/* ============================================ DARK MODE - Intermedia Host Se activa con la clase .dark-mode en ============================================ */ body.dark-mode { background-color: #0f1923 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M20 0 V60 H80 V120' stroke='rgba(126,188,18,0.08)' stroke-width='1' fill='none'/%3E%3Cpath d='M0 40 H60 V80 H120' stroke='rgba(126,188,18,0.08)' stroke-width='1' fill='none'/%3E%3Ccircle cx='20' cy='60' r='2.5' fill='rgba(126,188,18,0.15)'/%3E%3Ccircle cx='80' cy='60' r='2.5' fill='rgba(126,188,18,0.15)'/%3E%3Ccircle cx='60' cy='40' r='2.5' fill='rgba(126,188,18,0.15)'/%3E%3Ccircle cx='60' cy='80' r='2.5' fill='rgba(126,188,18,0.15)'/%3E%3Ccircle cx='20' cy='60' r='5' fill='none' stroke='rgba(126,188,18,0.07)' stroke-width='1'/%3E%3Ccircle cx='80' cy='60' r='5' fill='none' stroke='rgba(126,188,18,0.07)' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(circle, rgba(126,188,18,0.08) 1px, transparent 1px), linear-gradient(rgba(126,188,18,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(126,188,18,0.03) 1px, transparent 1px); background-size: 120px 120px, 60px 60px, 60px 60px, 60px 60px; color: #d0d8e4 !important; } /* ---- Top bar ---- */ body.dark-mode .top-bar { background-color: #0a1017 !important; } /* ---- Navbar ---- */ body.dark-mode .navbar-light, body.dark-mode .sticky-top.navbar-light { background: #131f2d !important; border-bottom: 1px solid #1e2f42; } body.dark-mode .navbar-light .navbar-nav .nav-link, body.dark-mode .sticky-top.navbar-light .navbar-nav .nav-link { color: #b0bec9 !important; } body.dark-mode .navbar-light .navbar-nav .nav-link:hover, body.dark-mode .navbar-light .navbar-nav .nav-link.active { color: #7EBC12 !important; } body.dark-mode .navbar-toggler { border-color: #3a4f63; } body.dark-mode .navbar-light .navbar-collapse { border-top-color: #1e2f42; } /* ---- Dropdown ---- */ body.dark-mode .dropdown-menu { background-color: #1a2a3a !important; border: 1px solid #1e2f42 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; } body.dark-mode .dropdown-menu a.dropdown-item strong { color: #d0d8e4 !important; } body.dark-mode .dropdown-menu .descripcion { color: #7EBC12 !important; } body.dark-mode .dropdown-menu a.dropdown-item:hover { background-color: #1e3248 !important; } body.dark-mode .dropdown-menu hr.menu { border-top-color: #1e2f42 !important; } /* ---- Menu second (mobile) ---- */ body.dark-mode .menu-second a { color: #b0bec9; } /* ---- Headings & text ---- */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e2eaf3 !important; } body.dark-mode p { color: #b0bec9; } body.dark-mode .text-dark, body.dark-mode .text-secondary { color: #b0bec9 !important; } /* ---- Cards & white/light backgrounds ---- */ body.dark-mode .bg-white, body.dark-mode .bg-light { background-color: #19293b !important; } body.dark-mode .card, body.dark-mode .border { border-color: #1e2f42 !important; } body.dark-mode .card-body { background-color: #19293b; } /* ---- Section title decorators ---- */ body.dark-mode .section-title::before { border-top-color: #3a4f63; border-bottom-color: #3a4f63; } /* ---- Tables ---- */ body.dark-mode table, body.dark-mode .table { color: #d0d8e4; } body.dark-mode .table-bordered td, body.dark-mode .table-bordered th, body.dark-mode .table td, body.dark-mode .table th { border-color: #1e2f42; background-color: #19293b; } body.dark-mode .table-striped tbody tr:nth-of-type(odd) td { background-color: #1e3045; } /* ---- Forms ---- */ body.dark-mode .form-control, body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode textarea { background-color: #19293b !important; border-color: #2d4460 !important; color: #d0d8e4 !important; } body.dark-mode .form-control::placeholder { color: #5c7a94 !important; } body.dark-mode .form-control:focus { background-color: #1e3045 !important; border-color: #7EBC12 !important; box-shadow: 0 0 0 0.2rem rgba(126,188,18,0.15) !important; } /* ---- Buttons ---- */ body.dark-mode .btn.btn-primary, body.dark-mode .btn.btn-secondary { background: #2c4a6e !important; border-color: #2c4a6e !important; color: #e2eaf3 !important; } body.dark-mode .btn.btn-primary:hover, body.dark-mode .btn.btn-secondary:hover { background: #7EBC12 !important; border-color: #7EBC12 !important; color: #fff !important; } body.dark-mode .btn-outline-light { border-color: #3a4f63 !important; color: #b0bec9 !important; } /* ---- Lista checks ---- */ body.dark-mode .lista-checks li { color: #d0d8e4 !important; } /* ---- Accordion ---- */ body.dark-mode .accordion-item { background-color: #19293b !important; border-color: #1e2f42 !important; } body.dark-mode .accordion-button { background-color: #1e3045 !important; color: #d0d8e4 !important; } body.dark-mode .accordion-button:not(.collapsed) { background-color: #1a3d5c !important; color: #7EBC12 !important; } body.dark-mode .accordion-body { background-color: #19293b !important; color: #b0bec9 !important; } /* ---- Pricing / plan cards ---- */ body.dark-mode [class*="plan"], body.dark-mode [class*="pricing"] { background-color: #19293b; border-color: #1e2f42; } /* ---- Footer contact form ---- */ body.dark-mode .bg-light.rounded { background-color: #19293b !important; } /* ---- Slick carousel arrows ---- */ body.dark-mode .slick-prev:before, body.dark-mode .slick-next:before { color: #7EBC12 !important; } /* ---- Back to top ---- */ body.dark-mode .back-to-top { background: #1e3045 !important; color: #7EBC12 !important; } /* ---- Dark mode toggle button ---- */ #dark-mode-toggle { background: none; border: 1px solid transparent; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s ease; color: #606062; padding: 0; vertical-align: middle; margin-left: 8px; } #dark-mode-toggle:hover { border-color: #7EBC12; color: #7EBC12; background: rgba(126,188,18,0.08); } body.dark-mode #dark-mode-toggle { color: #b0bec9; } body.dark-mode #dark-mode-toggle:hover { color: #7EBC12; }