/* ═══════════════════════════════════════════════════════════ Authenology · Dark Theme Activado con: ═══════════════════════════════════════════════════════════ */ /* ── Transición global al cambiar tema ── */ *, *::before, *::after { transition: background-color .25s ease, border-color .25s ease, color .15s ease, box-shadow .25s ease; } /* Excluir transiciones que no deben animar */ [data-theme="dark"] img, [data-theme="dark"] video, [data-theme="dark"] .tp-caption, [data-theme="dark"] [class*="revolution"], [data-theme="dark"] canvas { transition: none !important; } /* ══════════════════════════════════════ Paleta oscura — variables de tema ══════════════════════════════════════ */ [data-theme="dark"] { --dk-bg: #0d1117; --dk-surface: #161b27; --dk-surface-2: #1e2436; --dk-surface-3: #252d42; --dk-border: rgba(255,255,255,.07); --dk-border-strong: rgba(255,255,255,.13); --dk-text: #dde4f0; --dk-text-muted: #8b94a8; --dk-text-faint: #5b6478; --dk-shadow: 0 4px 24px rgba(0,0,0,.45); --dk-shadow-lg: 0 12px 48px rgba(0,0,0,.55); --dk-input-bg: #1a2030; color-scheme: dark; } /* ══════════════════════════════════════ 01. Body / Global ══════════════════════════════════════ */ [data-theme="dark"] body { background-color: var(--dk-bg) !important; color: var(--dk-text) !important; } /* ══════════════════════════════════════ 02. Tipografía ══════════════════════════════════════ */ [data-theme="dark"] .text-dark-gray, [data-theme="dark"] .text-dark-gray a { color: var(--dk-text) !important; } [data-theme="dark"] .text-medium-gray { color: var(--dk-text-muted) !important; } [data-theme="dark"] .text-light-gray { color: var(--dk-text-faint) !important; } [data-theme="dark"] .text-extra-medium-gray { color: var(--dk-text-muted) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--dk-text) !important; } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span:not(.cert-badge):not(.btn-double-text):not([class*="badge"]) { color: inherit; } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.cert-btn) { color: var(--dk-text-muted); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.cert-btn):hover { color: var(--dk-text); } /* ══════════════════════════════════════ 03. Fondos de sección ══════════════════════════════════════ */ [data-theme="dark"] .bg-white { background-color: var(--dk-surface) !important; } [data-theme="dark"] .bg-very-light-gray { background-color: var(--dk-bg) !important; } [data-theme="dark"] .bg-light { background-color: var(--dk-surface-2) !important; } [data-theme="dark"] .bg-light-gray { background-color: var(--dk-surface-2) !important; } [data-theme="dark"] .bg-extra-medium-gray { background-color: var(--dk-surface-3) !important; } [data-theme="dark"] .bg-transparent { background-color: transparent !important; } /* Secciones con fondo explícito blanco */ [data-theme="dark"] section:not([class*="bg-dark"]):not([class*="bg-base"]):not([class*="bg-gradient"]) { background-color: var(--dk-bg); } /* ══════════════════════════════════════ 04. Navegación (header) ══════════════════════════════════════ */ [data-theme="dark"] header, [data-theme="dark"] nav.navbar, [data-theme="dark"] .navbar.header-light, [data-theme="dark"] .navbar.bg-white { background-color: var(--dk-surface) !important; border-bottom: 1px solid var(--dk-border) !important; box-shadow: 0 2px 20px rgba(0,0,0,.35) !important; } [data-theme="dark"] .navbar-sticky.stick { background-color: rgba(22,27,39,.97) !important; backdrop-filter: blur(12px); } [data-theme="dark"] .nav-link, [data-theme="dark"] .navbar-nav .nav-link { color: var(--dk-text) !important; } [data-theme="dark"] .nav-link:hover { color: var(--base-color) !important; } /* Dropdown */ [data-theme="dark"] .dropdown-menu { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; box-shadow: var(--dk-shadow) !important; } [data-theme="dark"] .dropdown-menu a, [data-theme="dark"] .dropdown-menu li a { color: var(--dk-text-muted) !important; } [data-theme="dark"] .dropdown-menu a:hover { color: var(--dk-text) !important; background: var(--dk-surface-3) !important; } /* Hamburguesa */ [data-theme="dark"] .navbar-toggler-line { background-color: var(--dk-text) !important; } /* Mobile collapse */ [data-theme="dark"] .navbar-collapse { background-color: var(--dk-surface-2) !important; } /* Búsqueda en header */ [data-theme="dark"] .search-form-wrapper { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border-strong) !important; } [data-theme="dark"] .search-input { background-color: var(--dk-input-bg) !important; color: var(--dk-text) !important; border-color: var(--dk-border-strong) !important; } [data-theme="dark"] .search-form-wrapper h2 { color: var(--dk-text) !important; } /* ══════════════════════════════════════ 05. Controles de sitio (dark / lang toggles) ══════════════════════════════════════ */ .site-controls { display: flex; align-items: center; flex-shrink: 0; gap: 6px; margin-right: 8px; } /* El toggle de idioma/tema se agregó a la misma fila flex que el botón "Acceder" y el ícono de búsqueda; sin flex-shrink:0 + nowrap el botón se encoge por debajo del ancho de su texto y, por el word-break:break-word global del body, el texto termina partiéndose letra por letra. */ .header-icon .header-search-icon, .header-icon .header-button { flex-shrink: 0; } .header-button .btn { white-space: nowrap; flex-shrink: 0; } /* Recuperar espacio horizontal: el margen ms-20px del botón Acceder era holgado antes de compartir la fila con el selector de idioma/tema. */ .header-icon .header-button.ms-20px { margin-left: 10px !important; } /* Toggle de tema */ .theme-toggle { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.12); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s, transform .15s; padding: 0; margin: 0; color: inherit; font: inherit; line-height: 1; } .theme-toggle:hover { transform: rotate(20deg) scale(1.08); border-color: var(--base-color); } .theme-toggle:focus { outline: none; } .theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; } /* Sol visible en dark, luna visible en light */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,.15); color: #fbbf24; } /* Toggle de idioma */ .lang-toggle { display: flex; align-items: center; flex-shrink: 0; overflow: hidden; background: rgba(0,0,0,.06); border-radius: 100px; padding: 2px; gap: 2px; border: 1.5px solid rgba(0,0,0,.09); color: #888; } [data-theme="dark"] .lang-toggle { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } .lang-btn { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 4px 10px; border: none; border-radius: 100px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1; cursor: pointer; background: transparent; color: inherit; transition: background .2s, color .2s; } .lang-btn:focus { outline: none; } .lang-btn.active { background: var(--base-color); color: #fff; box-shadow: 0 2px 8px rgba(11,165,190,.3); } [data-theme="dark"] .lang-btn { color: var(--dk-text-muted); } [data-theme="dark"] .lang-btn.active { color: #fff; } /* ══════════════════════════════════════ 06. Tarjetas y cajas con sombra ══════════════════════════════════════ */ [data-theme="dark"] .box-shadow, [data-theme="dark"] .box-shadow-small, [data-theme="dark"] .box-shadow-medium, [data-theme="dark"] .box-shadow-large, [data-theme="dark"] .box-shadow-extra-large, [data-theme="dark"] .box-shadow-quadruple-large { box-shadow: var(--dk-shadow) !important; } [data-theme="dark"] .card, [data-theme="dark"] [class*="feature-box"], [data-theme="dark"] [class*="pricing-table"], [data-theme="dark"] [class*="testimonial"] { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } /* ══════════════════════════════════════ 07. Bordes ══════════════════════════════════════ */ [data-theme="dark"] .border-color-extra-medium-gray, [data-theme="dark"] [class*="border-color-light"] { border-color: var(--dk-border-strong) !important; } [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom { border-color: var(--dk-border) !important; } /* ══════════════════════════════════════ 08. Formularios ══════════════════════════════════════ */ [data-theme="dark"] .form-control, [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--dk-input-bg) !important; color: var(--dk-text) !important; border-color: var(--dk-border-strong) !important; } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--dk-text-faint) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { box-shadow: 0 0 0 3px rgba(11,165,190,.2) !important; border-color: var(--base-color) !important; } /* Newsletter input específico */ [data-theme="dark"] .newsletter-style-02 input { background: var(--dk-input-bg) !important; color: var(--dk-text) !important; } /* ══════════════════════════════════════ 09. Botones ══════════════════════════════════════ */ [data-theme="dark"] .btn-dark-gray { background-color: var(--dk-surface-3) !important; border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } [data-theme="dark"] .btn-dark-gray:hover { background-color: var(--base-color) !important; border-color: var(--base-color) !important; color: #fff !important; } [data-theme="dark"] .btn-outline-dark { border-color: var(--dk-border-strong) !important; color: var(--dk-text) !important; } [data-theme="dark"] .btn-outline-dark:hover { background-color: var(--dk-surface-3) !important; } /* ══════════════════════════════════════ 10. Footer ══════════════════════════════════════ */ [data-theme="dark"] footer { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } [data-theme="dark"] footer a { color: var(--dk-text-muted) !important; } [data-theme="dark"] footer a:hover { color: var(--base-color) !important; } [data-theme="dark"] .footer-navbar li a { color: var(--dk-text-muted) !important; } /* ══════════════════════════════════════ 11. Modal ══════════════════════════════════════ */ [data-theme="dark"] .modal-content { background-color: var(--dk-surface) !important; border-color: var(--dk-border-strong) !important; box-shadow: var(--dk-shadow-lg) !important; color: var(--dk-text) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--dk-border) !important; } [data-theme="dark"] .btn-close { filter: invert(1); } /* ══════════════════════════════════════ 12. Dividers y separadores ══════════════════════════════════════ */ [data-theme="dark"] hr, [data-theme="dark"] .divider-style-03 { border-color: var(--dk-border) !important; } [data-theme="dark"] .divider-style-03-01 { background-color: var(--dk-border) !important; opacity: 1 !important; } /* ══════════════════════════════════════ 13. Labels / chips de sección ══════════════════════════════════════ */ [data-theme="dark"] span[class*="bg-white"][class*="box-shadow"] { background-color: var(--dk-surface-2) !important; box-shadow: 0 2px 12px rgba(0,0,0,.3) !important; } /* ══════════════════════════════════════ 14. Sección oscura que ya existe (bg-dark-gray) → se mantiene dark en ambos modos ══════════════════════════════════════ */ [data-theme="dark"] .bg-dark-gray { background-color: #0a0e16 !important; } /* ══════════════════════════════════════ 15. Accordion y tabs ══════════════════════════════════════ */ [data-theme="dark"] .accordion-item { background-color: var(--dk-surface) !important; border-color: var(--dk-border) !important; } [data-theme="dark"] .accordion-button { background-color: var(--dk-surface-2) !important; color: var(--dk-text) !important; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--dk-surface-3) !important; color: var(--base-color) !important; } [data-theme="dark"] .accordion-body { background-color: var(--dk-surface) !important; } [data-theme="dark"] .nav-tabs .nav-link { color: var(--dk-text-muted) !important; } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--base-color) !important; border-color: var(--base-color) transparent transparent !important; } /* ══════════════════════════════════════ 16. Scroll-progress y misceláneos ══════════════════════════════════════ */ [data-theme="dark"] .scroll-progress { border-color: var(--dk-border) !important; } /* Chips de "Acceder" botón */ [data-theme="dark"] .header-button .btn-dark-gray { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.15) !important; color: var(--dk-text) !important; } /* Validador de certificados */ [data-theme="dark"] .cert-search-box { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } [data-theme="dark"] .cert-search-input { background: var(--dk-input-bg) !important; color: var(--dk-text) !important; border-color: var(--dk-border-strong) !important; } [data-theme="dark"] .cert-card { background: var(--dk-surface) !important; box-shadow: var(--dk-shadow) !important; } [data-theme="dark"] .cert-card-body { background: transparent; } [data-theme="dark"] .cert-card-footer { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } [data-theme="dark"] .cert-card-name { color: var(--dk-text) !important; } [data-theme="dark"] .cert-card-cedula { color: var(--dk-text-faint) !important; } [data-theme="dark"] .cert-card-row-label{ color: var(--dk-text-faint) !important; } [data-theme="dark"] .cert-card-row-value{ color: var(--dk-text-muted) !important; } [data-theme="dark"] .cert-card-divider { background: var(--dk-border) !important; } [data-theme="dark"] .cert-btn-ghost { border-color: var(--dk-border-strong) !important; color: var(--dk-text-muted) !important; } [data-theme="dark"] .cert-btn-ghost:hover { background: var(--dk-surface-3) !important; } [data-theme="dark"] .cert-empty-icon { background: var(--dk-surface-2) !important; color: var(--dk-text-muted) !important; } /* faq section visual */ [data-theme="dark"] .faq-section-visual { background: linear-gradient(145deg, var(--dk-surface-2) 0%, rgba(11,165,190,.1) 42%, var(--dk-surface) 100%) !important; } /* ══════════════════════════════════════ 17. Responsive — controles en móvil ══════════════════════════════════════ */ @media (max-width: 991.98px) { .site-controls { margin-right: 8px; } .lang-btn { padding: 3px 8px; font-size: 10px; } .theme-toggle { width: 30px; height: 30px; } .theme-toggle svg { width: 14px; height: 14px; } }