/*
 * dark-mode-overrides.css
 * Se carga AL FINAL en todas las páginas. El modo legado nunca lo intercambia.
 * Maneja el modo oscuro tanto en modo normal como en modo legado.
 * Usa máxima especificidad para sobreescribir estilos en línea.
 */

/* ── 1. PALETA ─────────────────────────────────────────────── */
html.dark-mode {
    --primary:      #4d91ff;
    --primary-dark: #6aaeff;
    --accent:       #4d91ff;
    --text:         #e2e8f0;
    --muted:        #94a3b8;
    --line:         rgba(255,255,255,0.09);
    --panel:        #1e293b;
    --bg:           #0c1929;
    --danger:       #f87171;
    --success:      #34d399;
}

/* ── 2. FONDO DEL BODY Y PÁGINA ──────────────────────────────── */
html.dark-mode body,
html.dark-mode body.legacy-mode {
    background: #0c1929 !important;
    background-color: #0c1929 !important;
    color: #e2e8f0 !important;
}

/* ── 3. TEXTO — cubre todos los elementos + sobreescrituras de color en línea ─── */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #f1f5f9 !important;
}

html.dark-mode p, html.dark-mode span, html.dark-mode li,
html.dark-mode label, html.dark-mode small, html.dark-mode strong,
html.dark-mode em, html.dark-mode td, html.dark-mode th,
html.dark-mode caption, html.dark-mode legend, html.dark-mode summary {
    color: #e2e8f0 !important;
}

/* Sobreescrituras de estilos en línea — todos los hex oscuros usados en el código */
html.dark-mode [style*="color:#1B4965"],
html.dark-mode [style*="color: #1B4965"],
html.dark-mode [style*="color:#1b4965"],
html.dark-mode [style*="color:#1a4a7a"],
html.dark-mode [style*="color:#18211e"],
html.dark-mode [style*="color:#1a202c"],
html.dark-mode [style*="color:#2c3e50"],
html.dark-mode [style*="color:#5d6964"],
html.dark-mode [style*="color:#4a5568"],
html.dark-mode [style*="color:#555"],
html.dark-mode [style*="color: #555"],
html.dark-mode [style*="color:#666"],
html.dark-mode [style*="color: #666"],
html.dark-mode [style*="color:#888"],
html.dark-mode [style*="color: #888"],
html.dark-mode [style*="color:#999"],
html.dark-mode [style*="color: #999"],
html.dark-mode [style*="color:#333"],
html.dark-mode [style*="color: #333"] {
    color: #cbd5e1 !important;
}

/* Sobreescrituras en línea del azul principal → azul más claro para modo oscuro */
html.dark-mode [style*="color:#0d699e"],
html.dark-mode [style*="color:#136296"],
html.dark-mode [style*="color:#1a4a8a"] {
    color: #4d91ff !important;
}

/* ── 4. FONDOS ─────────────────────────────────────────── */
/* Solo transparente en contenedores estructurales, NO en elementos con fondo propio */
html.dark-mode main,
html.dark-mode .app-shell,
html.dark-mode .internal-shell,
html.dark-mode .admin-view,
html.dark-mode .user-view,
html.dark-mode .home-view,
html.dark-mode .page-content {
    background-color: transparent;
}

/* IMPORTANTE: hero-section mantiene su imagen de fondo — nunca sobreescribirla */
html.dark-mode .hero-section {
    background-color: transparent !important;
    min-height: 100vh !important;
}

html.dark-mode .panel,
html.dark-mode .stat-box,
html.dark-mode .hero-card,
html.dark-mode .modal-box,
html.dark-mode .upload-section,
html.dark-mode .upload-zone,
html.dark-mode .registry-card,
html.dark-mode .login-card,
html.dark-mode .stat-strip,
html.dark-mode .request-item {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* Sobreescrituras de fondo en línea */
html.dark-mode [style*="background:#f7f9fc"],
html.dark-mode [style*="background: #f7f9fc"],
html.dark-mode [style*="background:#f8fafc"],
html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="background:#f0f8ff"],
html.dark-mode [style*="background: #f0f8ff"],
html.dark-mode [style*="background:#eaf6ff"],
html.dark-mode [style*="background: #eaf6ff"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"],
html.dark-mode [style*="background:white"],
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background-color:#fff"],
html.dark-mode [style*="background-color: #fff"],
html.dark-mode [style*="background-color:white"],
html.dark-mode [style*="background-color:#f"] {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* ── 5. BARRA DE NAVEGACIÓN ──────────────────────────────────────────────── */
html.dark-mode .navbar,
html.dark-mode nav,
html.dark-mode header {
    background: rgba(8,15,30,0.98) !important;
    border-color: rgba(255,255,255,0.07) !important;
}
html.dark-mode .navbar *,
html.dark-mode nav a,
html.dark-mode .nav-links a,
html.dark-mode .nav-item {
    color: #cbd5e1 !important;
}
html.dark-mode .nav-item:hover,
html.dark-mode .nav-item.active {
    background: rgba(77,145,255,0.15) !important;
    color: #4d91ff !important;
}

/* ── 6. CAMPOS DE ENTRADA ──────────────────────────────────────────────── */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode [style*="background:#f7f9fc"] input,
html.dark-mode [style*="background:#f8fafc"] input {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.14) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder { color: #475569 !important; }
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: #4d91ff !important;
    box-shadow: 0 0 0 3px rgba(77,145,255,0.15) !important;
    outline: none !important;
}

/* ── 7. BOTONES ─────────────────────────────────────────────── */
html.dark-mode button:not(#darkModeToggle):not(#liteModeToggle):not(.chk-enfermedad) {
    background: #1e3a5f !important;
    color: #e2e8f0 !important;
    border-color: rgba(77,145,255,0.35) !important;
}
html.dark-mode .primary-button,
html.dark-mode .cta-primary,
html.dark-mode .btn-primary {
    background: #1d4ed8 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}
html.dark-mode .ghost-button,
html.dark-mode .cta-secondary {
    background: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.18) !important;
}
html.dark-mode .action-btn {
    background: #1e293b !important;
    color: #4d91ff !important;
    border-color: rgba(255,255,255,0.1) !important;
}
html.dark-mode .action-btn.danger { color: #f87171 !important; }
html.dark-mode .top-back-button {
    background: #1e293b !important;
    color: #4d91ff !important;
    border-color: rgba(77,145,255,0.3) !important;
    box-shadow: none !important;
}

/* ── 8. TABLAS ──────────────────────────────────────────────── */
html.dark-mode table {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
html.dark-mode thead, html.dark-mode thead tr {
    background: #162032 !important;
}
html.dark-mode th {
    color: #94a3b8 !important;
    border-color: rgba(255,255,255,0.09) !important;
    background: transparent !important;
}
html.dark-mode td {
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode tbody tr:hover {
    background: rgba(255,255,255,0.04) !important;
}

/* Sobreescrituras de color en línea para th */
html.dark-mode th[style*="color:#1B4965"],
html.dark-mode th[style*="color:#1a4a8a"],
html.dark-mode th[style*="color:#0d699e"] {
    color: #94a3b8 !important;
}

/* ── 9. ENLACES ───────────────────────────────────────────────── */
html.dark-mode a:not(.top-back-button):not(.primary-button) {
    color: #4d91ff !important;
}

/* ── 10. DIVISORES ───────────────────────────────────────────── */
html.dark-mode hr,
html.dark-mode .panel-head,
html.dark-mode .content-section {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── 11. SECCIÓN HERO (index / páginas públicas) ────────────────── */
/* Mantener imagen de fondo, oscurecer la capa superior */
html.dark-mode .hero-content h1,
html.dark-mode .hero-content h2,
html.dark-mode .hero-content p { color: #fff !important; }

/* ── 12. TARJETAS CON IMAGEN DE FONDO (tarjetas de exploración en basestyle) ───── */
/* Modo oscuro: mantener imágenes, agregar capa oscura sutil via pseudo-elemento */
html.dark-mode .card-ecg,
html.dark-mode .card-protocol,
html.dark-mode .card-team,
html.dark-mode .card-contact {
    filter: brightness(0.78) !important;
}
/* Modo legado: reemplazar con color sólido */
body.legacy-mode .card-ecg,
body.legacy-mode .card-protocol,
body.legacy-mode .card-team,
body.legacy-mode .card-contact {
    background-image: none !important;
    background-color: #1B4965 !important;
}

/* Tarjeta de imagen del proyecto/laboratorio */
html.dark-mode .about-image-card {
    filter: brightness(0.82) !important;
}
body.legacy-mode .about-image-card {
    background-image: none !important;
    background-color: #1B4965 !important;
}

/* ── 13. LEGADO + OSCURO combinados ─────────────────────────────── */
html.dark-mode body.legacy-mode .panel,
html.dark-mode body.legacy-mode .stat-box,
html.dark-mode body.legacy-mode .upload-section,
html.dark-mode body.legacy-mode .stat-strip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.dark-mode body.legacy-mode .navbar,
html.dark-mode body.legacy-mode nav {
    background: #060f1a !important;
    border-color: #334155 !important;
}
html.dark-mode body.legacy-mode input,
html.dark-mode body.legacy-mode select,
html.dark-mode body.legacy-mode textarea {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
html.dark-mode body.legacy-mode button:not(#darkModeToggle):not(#liteModeToggle) {
    background: #1e3a5f !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
html.dark-mode body.legacy-mode h1,
html.dark-mode body.legacy-mode h2,
html.dark-mode body.legacy-mode h3,
html.dark-mode body.legacy-mode h4,
html.dark-mode body.legacy-mode p,
html.dark-mode body.legacy-mode span,
html.dark-mode body.legacy-mode label,
html.dark-mode body.legacy-mode li,
html.dark-mode body.legacy-mode td,
html.dark-mode body.legacy-mode th {
    color: #e2e8f0 !important;
}
html.dark-mode body.legacy-mode table {
    background: #1e293b !important;
}
html.dark-mode body.legacy-mode thead,
html.dark-mode body.legacy-mode thead tr {
    background: #162032 !important;
}

/* ── 14. BARRA DE ESTADÍSTICAS ─────────────────────────────────────────── */
html.dark-mode .stat-strip .stat-item {
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .stat-strip .stat-value { color: #4d91ff !important; }
html.dark-mode .stat-strip .stat-label { color: #94a3b8 !important; }

/* ── 15. ALERTAS/BANNERS ─────────────────────────────────────── */
html.dark-mode #xmlParseBanner {
    background: #0f2544 !important;
    border-color: #1e3a5f !important;
    color: #93c5fd !important;
}
html.dark-mode #avisoFormSubida {
    background: #2d1515 !important;
    border-color: #f87171 !important;
    color: #fca5a5 !important;
}
html.dark-mode [style*="background:#eaf6ff"],
html.dark-mode [style*="background: #eaf6ff"] {
    background: #0f2544 !important;
    border-color: #1e3a5f !important;
    color: #93c5fd !important;
}

/* ── 16. AYUDAS DE FORMULARIO ───────────────────────────────────────── */
html.dark-mode .form-section-label,
html.dark-mode .eyebrow { color: #4d91ff !important; }
html.dark-mode .muted,
html.dark-mode [class*="muted"] { color: #94a3b8 !important; }

/* ── 17. CUADRÍCULA DE CHECKBOXES ──────────────────────────────────────── */
html.dark-mode #campoEnfermedadesCronicas {
    background: #0f172a !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode #campoEnfermedadesCronicas label { color: #e2e8f0 !important; }

/* ── 18. BARRAS DE DESPLAZAMIENTO ─────────────────────────────────────────── */
html.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
html.dark-mode ::-webkit-scrollbar-track { background: #0c1929; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

/* ── 19. MODAL ──────────────────────────────────────────────── */
html.dark-mode .modal-overlay { background: rgba(0,0,0,0.78) !important; }

/* ── 20. PIE DE PÁGINA ─────────────────────────────────────────────── */
html.dark-mode footer, html.dark-mode .footer {
    background: #060f1a !important;
    color: #94a3b8 !important;
    border-color: rgba(255,255,255,0.07) !important;
}
html.dark-mode footer * { color: #94a3b8 !important; }
html.dark-mode footer a { color: #4d91ff !important; }

/* ── access-option (tarjeta de inicio de sesión) ── */
html.dark-mode .access-option {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.09) !important;
}
html.dark-mode .access-option h2,
html.dark-mode .access-option p { color: #e2e8f0 !important; }

/* ── lado izquierdo del panel de login ── */
html.dark-mode .login-panel,
html.dark-mode .login-copy { background: transparent !important; }

/* ── badges de auto-llenado XML ── */
html.dark-mode .xml-auto-tag {
    background: rgba(77,145,255,0.18) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(77,145,255,0.3);
}

/* ── fondos de contenedores de gráficas en línea ── */
html.dark-mode [style*="background:#fff"][style*="border-radius"],
html.dark-mode [style*="background: #fff"][style*="border-radius"] {
    background: #1e293b !important;
}

/* ── botones de pestañas (dentro de formularios) ── */
html.dark-mode .tab-btn {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode .tab-btn.active {
    background: #1d4ed8 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

/* ── insignia biométrica ── */
html.dark-mode .bio-badge {
    color: #34d399 !important;
    background: rgba(52,211,153,0.12) !important;
    border-color: rgba(52,211,153,0.25) !important;
}

/* ── filas de tabla generadas en línea (renderizadas por JS) ── */
/* No se puede acceder al fondo del estilo en línea directamente, se apuntan los hijos de tr */
html.dark-mode #cuerpoTablaDescargas tr td,
html.dark-mode #cuerpoTablaDescargas tr {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode #cuerpoTablaDescargas tr:nth-child(even) {
    background: rgba(255,255,255,0.03) !important;
}
html.dark-mode #cuerpoTablaDescargas td[style*="color:#1B4965"],
html.dark-mode #cuerpoTablaDescargas td[style*="color:#444"],
html.dark-mode #cuerpoTablaDescargas td[style*="color:#555"],
html.dark-mode #cuerpoTablaDescargas td[style*="color:#666"] {
    color: #e2e8f0 !important;
}
html.dark-mode #cuerpoTablaDescargas span[style*="color:#999"] {
    color: #94a3b8 !important;
}

/* ── número y etiqueta de stat-box ── */
html.dark-mode .stat-box > *:first-child { color: #4d91ff !important; }
html.dark-mode .stat-box > *:last-child  { color: #94a3b8 !important; }

/* ── JS-rendered info bars ── */
html.dark-mode .limite-aviso,
html.dark-mode #avisoLimiteXML,
html.dark-mode #avisoLimiteEncuestas {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Chart stat containers (#f7f9fc boxes) ── */
html.dark-mode [style*="background:#f7f9fc"],
html.dark-mode [style*="background: #f7f9fc"] {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
}

/* ── thead rows with #e8eef5 background ── */
html.dark-mode tr[style*="background:#e8eef5"],
html.dark-mode tr[style*="background: #e8eef5"] {
    background: #162032 !important;
}

/* ── formNuevoAdminWrap ── */
html.dark-mode #formNuevoAdminWrap,
html.dark-mode [style*="background:#f0f6ff"] {
    background: #0f2544 !important;
    border-color: #1e3a5f !important;
}

/* ── Stat boxes inline (#fff with border-radius) ── */
html.dark-mode [style*="background:#fff"][style*="box-shadow"],
html.dark-mode [style*="background: #fff"][style*="box-shadow"] {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
}

/* ── OTP digit inputs ── */
html.dark-mode .otp-digit {
    background: #0f172a !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #e2e8f0 !important;
}
html.dark-mode .otp-digit:focus {
    border-color: #4d91ff !important;
    background: #0f2544 !important;
}
html.dark-mode .otp-digit.filled {
    border-color: #34d399 !important;
    background: rgba(52,211,153,0.08) !important;
}

/* ── Edit modal (JS-injected overlay) ── */
html.dark-mode #editorXMLOverlay > div {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
html.dark-mode #editorXMLOverlay input,
html.dark-mode #editorXMLOverlay select,
html.dark-mode #editorXMLOverlay textarea {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode #editorXMLOverlay label,
html.dark-mode #editorXMLOverlay p,
html.dark-mode #editorXMLOverlay h3 {
    color: #e2e8f0 !important;
}

/* hero-section handled in section 4 above */

/* ── Fix: login-panel border seam ── */
html.dark-mode .login-panel,
html.dark-mode .hero-card {
    border-color: rgba(255,255,255,0.07) !important;
    background: transparent !important;
}

/* ── Fix: login-panel min-height for consistent bg ── */
html.dark-mode .login-panel {
    min-height: calc(100vh - 88px) !important;
}

/* ── Fix: ¿Olvidaste tu contraseña? button — do NOT override background:none ── */
html.dark-mode button[style*="background:none"],
html.dark-mode button[style*="background: none"] {
    background: none !important;
    background-color: transparent !important;
}

/* ── Fix: admin-header area — consistent background ── */
html.dark-mode .admin-header {
    background: transparent !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── Fix: app-shell/internal-shell background unified ── */
html.dark-mode .app-shell,
html.dark-mode .internal-shell {
    background: transparent !important;
}

/* ── Fix: hero image opacity in dark mode — show more clearly ── */

/* ── Fix: panel/hero-card backgrounds don't create color seams ── */
html.dark-mode .panel,
html.dark-mode .hero-card,
html.dark-mode .stat-box {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.07) !important;
}

/* ── Fix: page-level wrapper sections get body bg, not panel bg ── */
html.dark-mode .home-view,
html.dark-mode .login-view,
html.dark-mode .survey-view {
    background: transparent !important;
}

/* ── Fix: transparent link-style buttons must stay transparent ── */
html.dark-mode .link-btn {
    background: none !important;
    background-color: transparent !important;
    color: #4d91ff !important;
    border: none !important;
}

/* ── Fix: narrow the background:#fff override — exclude buttons with padding:0 ── */
/* Revoke the broad [style*="background:#fff"][style*="box-shadow"] if it catches too much */
html.dark-mode button[style*="background:none"],
html.dark-mode a[style*="background:none"] {
    background: none !important;
    background-color: transparent !important;
}

/* ── hero-overlay: darken image in dark mode without hiding it ── */
html.dark-mode .hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(4, 12, 24, 0.72) 0%,
        rgba(8, 20, 50, 0.60) 100%
    ) !important;
}

/* ══════════════════════════════════════════════════════════════
   LEGACY LIGHT MODE — contrast fix
   Uses body.legacy-mode (no :not hack — specificity stays equal
   to dark-mode rules so source order determines the winner).
   Dark-mode counter-rules follow immediately to win by order.
   ══════════════════════════════════════════════════════════════ */

/* 1. Footer: dark blue + white text in legacy light */
body.legacy-mode .site-footer {
    background-color: #1B4965 !important;
    background:       #1B4965 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}
body.legacy-mode .site-footer p,
body.legacy-mode .site-footer .footer-content p {
    color: rgba(255, 255, 255, 0.88) !important;
}
body.legacy-mode .site-footer .footer-admin-link {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* 2. Pale sections: scoped dark text (only on pale-bg containers) */
body.legacy-mode .quick-stats strong,
body.legacy-mode .quick-stats span,
body.legacy-mode .about-text h2,
body.legacy-mode .about-text p,
body.legacy-mode .features-header h2,
body.legacy-mode .features-header p {
    color: #0d1b2a !important;
}

/* 3. Eyebrow on pale background */
body.legacy-mode .quick-stats .eyebrow,
body.legacy-mode .about-section .eyebrow,
body.legacy-mode .features-header .eyebrow {
    color: #1B4965 !important;
}

/* ── DARK MODE: restore correct colors (wins by source order, same specificity) ── */
html.dark-mode body.legacy-mode .site-footer {
    background-color: #060f1a !important;
    background:       #060f1a !important;
    color: #94a3b8 !important;
}
html.dark-mode body.legacy-mode .site-footer p,
html.dark-mode body.legacy-mode .site-footer .footer-content p {
    color: #94a3b8 !important;
}
html.dark-mode body.legacy-mode .site-footer .footer-admin-link {
    color: #4d91ff !important;
}
html.dark-mode body.legacy-mode .quick-stats strong,
html.dark-mode body.legacy-mode .quick-stats span,
html.dark-mode body.legacy-mode .about-text h2,
html.dark-mode body.legacy-mode .about-text p,
html.dark-mode body.legacy-mode .features-header h2,
html.dark-mode body.legacy-mode .features-header p {
    color: #e2e8f0 !important;
}
html.dark-mode body.legacy-mode .quick-stats .eyebrow,
html.dark-mode body.legacy-mode .about-section .eyebrow,
html.dark-mode body.legacy-mode .features-header .eyebrow {
    color: #4d91ff !important;
}

/* ══════════════════════════════════════════════════════════════
   FINAL OVERRIDE — Legacy + Dark mode: kill pale section blocks
   Problem: lite/basestyle.css sets background:#e8edf2 !important
   on body.legacy-mode sections. Those rules load BEFORE this file
   so we beat them with a longer selector (higher specificity) AND
   source order. No JS touched, no layout changed.
   ══════════════════════════════════════════════════════════════ */

html.dark-mode body.legacy-mode .quick-stats,
html.dark-mode body.legacy-mode .about-section,
html.dark-mode body.legacy-mode .features-section,
html.dark-mode body.legacy-mode .explore-section,
html.dark-mode body.legacy-mode .team-section,
html.dark-mode body.legacy-mode .contact-section,
html.dark-mode body.legacy-mode .site-footer,
html.dark-mode body.legacy-mode footer.site-footer {
    background:       #0c1929 !important;
    background-color: #0c1929 !important;
}

/* Also cover the @media prefers-color-scheme path for browsers
   that apply dark mode without JS having set html.dark-mode yet */

/* Text inside those sections — must stay readable in dark */
html.dark-mode body.legacy-mode .quick-stats *,
html.dark-mode body.legacy-mode .about-section *,
html.dark-mode body.legacy-mode .features-section *,
html.dark-mode body.legacy-mode .explore-section *,
html.dark-mode body.legacy-mode .team-section *,
html.dark-mode body.legacy-mode .contact-section * {
    color: #e2e8f0 !important;
}

/* Accent / eyebrow text keeps the brand blue */
html.dark-mode body.legacy-mode .quick-stats .eyebrow,
html.dark-mode body.legacy-mode .about-section .eyebrow,
html.dark-mode body.legacy-mode .features-section .eyebrow,
html.dark-mode body.legacy-mode .explore-section .eyebrow,
html.dark-mode body.legacy-mode .team-section .eyebrow,
html.dark-mode body.legacy-mode .contact-section .eyebrow {
    color: #4d91ff !important;
}

/* Headings slightly brighter for hierarchy */
html.dark-mode body.legacy-mode .quick-stats h1,
html.dark-mode body.legacy-mode .quick-stats h2,
html.dark-mode body.legacy-mode .quick-stats h3,
html.dark-mode body.legacy-mode .about-section h1,
html.dark-mode body.legacy-mode .about-section h2,
html.dark-mode body.legacy-mode .about-section h3,
html.dark-mode body.legacy-mode .features-section h1,
html.dark-mode body.legacy-mode .features-section h2,
html.dark-mode body.legacy-mode .features-section h3,
html.dark-mode body.legacy-mode .explore-section h1,
html.dark-mode body.legacy-mode .explore-section h2,
html.dark-mode body.legacy-mode .explore-section h3,
html.dark-mode body.legacy-mode .team-section h1,
html.dark-mode body.legacy-mode .team-section h2,
html.dark-mode body.legacy-mode .team-section h3,
html.dark-mode body.legacy-mode .contact-section h1,
html.dark-mode body.legacy-mode .contact-section h2,
html.dark-mode body.legacy-mode .contact-section h3 {
    color: #f1f5f9 !important;
}

/* Cards inside those sections stay dark blue (not pale) */
html.dark-mode body.legacy-mode .quick-stats .stat-box,
html.dark-mode body.legacy-mode .quick-stats .stat-item,
html.dark-mode body.legacy-mode .features-section .feature-card,
html.dark-mode body.legacy-mode .team-section .team-card,
html.dark-mode body.legacy-mode .explore-section .explore-card,
html.dark-mode body.legacy-mode .contact-section .contact-card {
    background:       #1e293b !important;
    background-color: #1e293b !important;
    border-color:     rgba(255,255,255,0.09) !important;
    color:            #e2e8f0 !important;
}

/* Footer text in Legacy dark stays muted, links stay blue */
html.dark-mode body.legacy-mode .site-footer *,
html.dark-mode body.legacy-mode footer.site-footer * {
    color: #94a3b8 !important;
}
html.dark-mode body.legacy-mode .site-footer a,
html.dark-mode body.legacy-mode footer.site-footer a,
html.dark-mode body.legacy-mode .site-footer .footer-admin-link {
    color: #4d91ff !important;
}

/* Dark mode normal: quitar bloques blancos del index */
html.dark-mode .quick-stats,
html.dark-mode .about-section {
    background: #0c1929 !important;
    background-color: #0c1929 !important;
}

/* Texto readable dentro de esas secciones */
html.dark-mode .quick-stats strong,
html.dark-mode .quick-stats span,
html.dark-mode .about-text h2,
html.dark-mode .about-text p,
html.dark-mode .about-section .eyebrow {
    color: #e2e8f0 !important;
}

/* Eyebrow/acento */
html.dark-mode .about-section .eyebrow {
    color: #4d91ff !important;
}
/* Dark normal: mantener imágenes del index */
html.dark-mode body:not(.legacy-mode) .about-image-card {
    background-image: url('https://images.pexels.com/photos/8442105/pexels-photo-8442105.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    filter: brightness(0.82) !important;
}

html.dark-mode body:not(.legacy-mode) .card-ecg {
    background: url('https://images.unsplash.com/photo-1530497610245-94d3c16cda28?q=80&w=600&auto=format&fit=crop') center/cover !important;
}

html.dark-mode body:not(.legacy-mode) .card-protocol {
    background: url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=600&auto=format&fit=crop') center/cover !important;
}

html.dark-mode body:not(.legacy-mode) .card-team {
    background: url('https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?q=80&w=600&auto=format&fit=crop') center/cover !important;
}

html.dark-mode body:not(.legacy-mode) .card-contact {
    background: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=600&auto=format&fit=crop') center/cover !important;
}

/* Lite/Legacy: sin imágenes */
body.legacy-mode .about-image-card,
body.legacy-mode .card-ecg,
body.legacy-mode .card-protocol,
body.legacy-mode .card-team,
body.legacy-mode .card-contact {
    background-image: none !important;
    background-color: #1B4965 !important;
}

/* Index hero: mostrar imagen en modo oscuro normal */
html.dark-mode body:not(.legacy-mode) .hero-section {
    background-image: url('https://images.unsplash.com/photo-1551076805-e1869033e561?q=80&w=2000&auto=format&fit=crop') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-color: transparent !important;
}

/* Lite/legacy: sin imagen */
body.legacy-mode .hero-section {
    background-image: none !important;
}
/* Dark normal: protocolo.html */
html.dark-mode body:not(.legacy-mode) .protocolo-intro,
html.dark-mode body:not(.legacy-mode) .protocolo-section {
    background: #0c1929 !important;
    background-color: #0c1929 !important;
}

/* Cards internas */
html.dark-mode body:not(.legacy-mode) .protocolo-card,
html.dark-mode body:not(.legacy-mode) .text-card,
html.dark-mode body:not(.legacy-mode) .referencias-section,
html.dark-mode body:not(.legacy-mode) .resumen-box,
html.dark-mode body:not(.legacy-mode) .criteria-box {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #e2e8f0 !important;
}

/* Filas/pasos */
html.dark-mode body:not(.legacy-mode) .steps-list,
html.dark-mode body:not(.legacy-mode) .step-row {
    border-color: rgba(255,255,255,0.09) !important;
}

html.dark-mode body:not(.legacy-mode) .step-row:hover {
    background: rgba(255,255,255,0.04) !important;
}

html.dark-mode body:not(.legacy-mode) .step-num,
html.dark-mode body:not(.legacy-mode) .tipo-badge {
    background: rgba(77,145,255,0.15) !important;
    color: #4d91ff !important;
    border-color: rgba(77,145,255,0.3) !important;
}

/* Texto */
html.dark-mode body:not(.legacy-mode) .protocolo-intro *,
html.dark-mode body:not(.legacy-mode) .protocolo-section * {
    color: #e2e8f0 !important;
}

/* Acentos */
html.dark-mode body:not(.legacy-mode) .protocolo-section .eyebrow,
html.dark-mode body:not(.legacy-mode) .protocolo-intro .eyebrow,
html.dark-mode body:not(.legacy-mode) .card-eyebrow,
html.dark-mode body:not(.legacy-mode) .referencias-section a {
    color: #4d91ff !important;
}

/* Botones */
html.dark-mode body:not(.legacy-mode) .btn-primary-sm {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

html.dark-mode body:not(.legacy-mode) .btn-ghost-sm {
    background: rgba(255,255,255,0.06) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255,255,255,0.14) !important;
}
/* Dark normal: contactos.html responsable-section */
html.dark-mode body:not(.legacy-mode) .responsable-section {
    background: #0c1929 !important;
    background-color: #0c1929 !important;
}

/* Cards internas */
html.dark-mode body:not(.legacy-mode) .responsable-card,
html.dark-mode body:not(.legacy-mode) .contact-info-card,
html.dark-mode body:not(.legacy-mode) .contact-method,
html.dark-mode body:not(.legacy-mode) .map-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #e2e8f0 !important;
}

/* Texto */
html.dark-mode body:not(.legacy-mode) .responsable-section *,
html.dark-mode body:not(.legacy-mode) .responsable-section p,
html.dark-mode body:not(.legacy-mode) .responsable-section span,
html.dark-mode body:not(.legacy-mode) .responsable-section li,
html.dark-mode body:not(.legacy-mode) .responsable-section h1,
html.dark-mode body:not(.legacy-mode) .responsable-section h2,
html.dark-mode body:not(.legacy-mode) .responsable-section h3 {
    color: #e2e8f0 !important;
}

/* Acentos */
html.dark-mode body:not(.legacy-mode) .responsable-section .eyebrow,
html.dark-mode body:not(.legacy-mode) .responsable-section a {
    color: #4d91ff !important;
}
/* ── Página de equipo ────────────────────────────────────────── */
html.dark-mode .eq-card {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.3) !important;
}
html.dark-mode .eq-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
html.dark-mode .eq-card-header h2,
html.dark-mode .person-name,
html.dark-mode .eq-info-block strong {
    color: #e2e8f0 !important;
}
html.dark-mode .eq-info-block,
html.dark-mode .eq-thanks-text {
    color: #94a3b8 !important;
}
html.dark-mode .person-item,
html.dark-mode .dev-card {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.07) !important;
}
html.dark-mode .person-role {
    color: #4d91ff !important;
}

/* Lite + dark equipo */
html.dark-mode body.legacy-mode .eq-card {
    background: #1e293b !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode body.legacy-mode .eq-card-header h2,
html.dark-mode body.legacy-mode .person-name,
html.dark-mode body.legacy-mode .eq-info-block strong {
    color: #e2e8f0 !important;
}
html.dark-mode body.legacy-mode .eq-info-block,
html.dark-mode body.legacy-mode .eq-thanks-text {
    color: #94a3b8 !important;
}
html.dark-mode body.legacy-mode .person-item,
html.dark-mode body.legacy-mode .dev-card {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.07) !important;
}
html.dark-mode body.legacy-mode .person-role {
    color: #4d91ff !important;
}

/* Contacto: corrección final para modo oscuro normal y legado */
html.dark-mode .responsable-section,
html.dark-mode body.legacy-mode .responsable-section {
    background: #0c1929 !important;
    background-color: #0c1929 !important;
}

html.dark-mode .responsable-card,
html.dark-mode body.legacy-mode .responsable-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
}

html.dark-mode .responsable-info,
html.dark-mode body.legacy-mode .responsable-info,
html.dark-mode .contact-list,
html.dark-mode body.legacy-mode .contact-list,
html.dark-mode .contact-row,
html.dark-mode body.legacy-mode .contact-row {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.10) !important;
}

html.dark-mode .contact-row:hover,
html.dark-mode body.legacy-mode .contact-row:hover {
    background: rgba(255,255,255,0.04) !important;
}

html.dark-mode .responsable-foto,
html.dark-mode body.legacy-mode .responsable-foto {
    background-color: #111827 !important;
}

html.dark-mode .responsable-section h2,
html.dark-mode .responsable-section h3,
html.dark-mode .responsable-info h3,
html.dark-mode .responsable-section p,
html.dark-mode .responsable-section span,
html.dark-mode .contact-row-text p,
html.dark-mode body.legacy-mode .responsable-section h2,
html.dark-mode body.legacy-mode .responsable-section h3,
html.dark-mode body.legacy-mode .responsable-info h3,
html.dark-mode body.legacy-mode .responsable-section p,
html.dark-mode body.legacy-mode .responsable-section span,
html.dark-mode body.legacy-mode .contact-row-text p {
    color: #e2e8f0 !important;
}

html.dark-mode .section-header p,
html.dark-mode .responsable-info .cargo,
html.dark-mode body.legacy-mode .section-header p,
html.dark-mode body.legacy-mode .responsable-info .cargo {
    color: #94a3b8 !important;
}

html.dark-mode .responsable-section .eyebrow,
html.dark-mode .contact-row-text span,
html.dark-mode .contact-row-text a,
html.dark-mode body.legacy-mode .responsable-section .eyebrow,
html.dark-mode body.legacy-mode .contact-row-text span,
html.dark-mode body.legacy-mode .contact-row-text a {
    color: #4d91ff !important;
}

html.dark-mode .contact-row-icon,
html.dark-mode body.legacy-mode .contact-row-icon {
    background: rgba(77,145,255,0.14) !important;
}


/* ── Contacto page: dark mode fix ── */
html.dark-mode .responsable-section,
html.dark-mode body.legacy-mode .responsable-section {
    background: #0c1929 !important;
    background-color: #0c1929 !important;
}

html.dark-mode .responsable-card,
html.dark-mode body.legacy-mode .responsable-card {
    background: #1e293b !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 0 14px 42px rgba(0,0,0,0.38) !important;
}

html.dark-mode .responsable-info,
html.dark-mode body.legacy-mode .responsable-info {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark-mode .section-header h2,
html.dark-mode .responsable-info h3,
html.dark-mode body.legacy-mode .section-header h2,
html.dark-mode body.legacy-mode .responsable-info h3 {
    color: #f1f5f9 !important;
}

html.dark-mode .section-header p,
html.dark-mode .responsable-info .cargo,
html.dark-mode body.legacy-mode .section-header p,
html.dark-mode body.legacy-mode .responsable-info .cargo {
    color: #cbd5e1 !important;
}

html.dark-mode .contact-list,
html.dark-mode body.legacy-mode .contact-list {
    background: #0f172a !important;
    border-color: rgba(255,255,255,0.12) !important;
}

html.dark-mode .contact-row,
html.dark-mode body.legacy-mode .contact-row {
    background: #0f172a !important;
    border-color: rgba(255,255,255,0.10) !important;
}

html.dark-mode .contact-row:hover,
html.dark-mode body.legacy-mode .contact-row:hover {
    background: #162032 !important;
}

html.dark-mode .contact-row-icon,
html.dark-mode body.legacy-mode .contact-row-icon {
    background: #1e3a5f !important;
}

html.dark-mode .contact-row-text span,
html.dark-mode body.legacy-mode .contact-row-text span {
    color: #94a3b8 !important;
}

html.dark-mode .contact-row-text a,
html.dark-mode body.legacy-mode .contact-row-text a {
    color: #4d91ff !important;
}

html.dark-mode .responsable-foto,
html.dark-mode body.legacy-mode .responsable-foto {
    background-color: #162032 !important;
}

html.dark-mode .responsable-foto-overlay,
html.dark-mode body.legacy-mode .responsable-foto-overlay {
    background: linear-gradient(to bottom, rgba(15,23,42,0.18) 0%, rgba(15,23,42,0.68) 100%) !important;
}

html.dark-mode .responsable-foto-badge,
html.dark-mode body.legacy-mode .responsable-foto-badge {
    background: rgba(15,23,42,0.72) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #e2e8f0 !important;
}

/* arreglo: modal de descarga legible en modo oscuro y legado */
html.dark-mode .dl-modal-box,
html.dark-mode body.legacy-mode .dl-modal-box {
    background: #ffffff !important;
    color: #102033 !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
}

html.dark-mode .dl-modal-header h3,
html.dark-mode .dl-modal-header p,
html.dark-mode .dl-modal-body label,
html.dark-mode .dl-modal-body span,
html.dark-mode .dl-modal-body p,
html.dark-mode .dl-modal-body strong,
html.dark-mode body.legacy-mode .dl-modal-header h3,
html.dark-mode body.legacy-mode .dl-modal-header p,
html.dark-mode body.legacy-mode .dl-modal-body label,
html.dark-mode body.legacy-mode .dl-modal-body span,
html.dark-mode body.legacy-mode .dl-modal-body p,
html.dark-mode body.legacy-mode .dl-modal-body strong {
    color: #102033 !important;
    opacity: 1 !important;
    filter: none !important;
}

html.dark-mode .dl-modal-body input,
html.dark-mode .dl-modal-body select,
html.dark-mode .dl-modal-body textarea,
html.dark-mode body.legacy-mode .dl-modal-body input,
html.dark-mode body.legacy-mode .dl-modal-body select,
html.dark-mode body.legacy-mode .dl-modal-body textarea {
    background: #0f1b2f !important;
    color: #ffffff !important;
    border: 1px solid #2b4b74 !important;
    opacity: 1 !important;
    filter: none !important;
}

html.dark-mode .dl-modal-body input::placeholder,
html.dark-mode .dl-modal-body textarea::placeholder,
html.dark-mode body.legacy-mode .dl-modal-body input::placeholder,
html.dark-mode body.legacy-mode .dl-modal-body textarea::placeholder {
    color: rgba(255,255,255,0.72) !important;
}

html.dark-mode .dl-modal-body select option,
html.dark-mode body.legacy-mode .dl-modal-body select option {
    background: #ffffff !important;
    color: #102033 !important;
}

html.dark-mode .dl-modal-box .primary-button,
html.dark-mode body.legacy-mode .dl-modal-box .primary-button {
    background: #1B4965 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

html.dark-mode .dl-modal-box .ghost-button,
html.dark-mode body.legacy-mode .dl-modal-box .ghost-button {
    background: #1B4965 !important;
    color: #ffffff !important;
    border-color: #1B4965 !important;
    opacity: 1 !important;
}

/* ajuste final: modal de descarga oscuro con texto claro */
html.dark-mode .dl-modal-box,
html.dark-mode body.legacy-mode .dl-modal-box {
    background: #071d33 !important;
    color: #f4f8ff !important;
    border: 1px solid rgba(120, 170, 220, 0.32) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45) !important;
    opacity: 1 !important;
    filter: none !important;
}

html.dark-mode .dl-modal-header h3,
html.dark-mode body.legacy-mode .dl-modal-header h3 {
    color: #ffffff !important;
}

html.dark-mode .dl-modal-header p,
html.dark-mode .dl-modal-body label,
html.dark-mode .dl-modal-body span,
html.dark-mode .dl-modal-body p,
html.dark-mode .dl-modal-body strong,
html.dark-mode body.legacy-mode .dl-modal-header p,
html.dark-mode body.legacy-mode .dl-modal-body label,
html.dark-mode body.legacy-mode .dl-modal-body span,
html.dark-mode body.legacy-mode .dl-modal-body p,
html.dark-mode body.legacy-mode .dl-modal-body strong {
    color: #dbeafe !important;
    opacity: 1 !important;
}

html.dark-mode .dl-modal-body input,
html.dark-mode .dl-modal-body select,
html.dark-mode .dl-modal-body textarea,
html.dark-mode body.legacy-mode .dl-modal-body input,
html.dark-mode body.legacy-mode .dl-modal-body select,
html.dark-mode body.legacy-mode .dl-modal-body textarea {
    background: #0b1729 !important;
    color: #ffffff !important;
    border: 1px solid #3b638f !important;
    opacity: 1 !important;
}

html.dark-mode .dl-modal-body input::placeholder,
html.dark-mode .dl-modal-body textarea::placeholder,
html.dark-mode body.legacy-mode .dl-modal-body input::placeholder,
html.dark-mode body.legacy-mode .dl-modal-body textarea::placeholder {
    color: rgba(230, 240, 255, 0.68) !important;
}

html.dark-mode .dl-modal-body select option,
html.dark-mode body.legacy-mode .dl-modal-body select option {
    background: #0b1729 !important;
    color: #ffffff !important;
}

html.dark-mode .dl-modal-body input[type="checkbox"],
html.dark-mode body.legacy-mode .dl-modal-body input[type="checkbox"] {
    accent-color: #5dade2 !important;
}

html.dark-mode .dl-modal-box .primary-button,
html.dark-mode .dl-modal-box .ghost-button,
html.dark-mode body.legacy-mode .dl-modal-box .primary-button,
html.dark-mode body.legacy-mode .dl-modal-box .ghost-button {
    background: #1f4f7a !important;
    color: #ffffff !important;
    border-color: #2f6fa8 !important;
}

html.dark-mode .dl-modal-box .primary-button:hover,
html.dark-mode .dl-modal-box .ghost-button:hover,
html.dark-mode body.legacy-mode .dl-modal-box .primary-button:hover,
html.dark-mode body.legacy-mode .dl-modal-box .ghost-button:hover {
    background: #28669d !important;
}

/* ajuste: checkbox UABC del modal de descarga en oscuro */
html.dark-mode .dl-modal-body .uabc-check,
html.dark-mode .dl-modal-body label:has(input[type="checkbox"]),
html.dark-mode body.legacy-mode .dl-modal-body .uabc-check,
html.dark-mode body.legacy-mode .dl-modal-body label:has(input[type="checkbox"]) {
    background: rgba(15, 27, 47, 0.95) !important;
    border: 1px solid #3b638f !important;
    color: #dbeafe !important;
}

html.dark-mode .dl-modal-body .uabc-check *,
html.dark-mode .dl-modal-body label:has(input[type="checkbox"]) *,
html.dark-mode body.legacy-mode .dl-modal-body .uabc-check *,
html.dark-mode body.legacy-mode .dl-modal-body label:has(input[type="checkbox"]) * {
    color: #dbeafe !important;
    opacity: 1 !important;
}

html.dark-mode .dl-modal-body input[type="checkbox"],
html.dark-mode body.legacy-mode .dl-modal-body input[type="checkbox"] {
    background-color: #0b1729 !important;
    border: 1px solid #5dade2 !important;
    accent-color: #5dade2 !important;
}