/* =========================================================================
   XIXINUS ÉLITE — theme.css
   ARQUITECTURA DUAL DE COLOR:
   - MODO INSTITUCIONAL (Light Academic & Executive - Canvas LMS / gob.pe)
   - MODO ESTUDIO (Dark Navy & Slate de Alta Concentración)
   ========================================================================= */

/* --- TEMA OSCURO (MODO ESTUDIO) --- */
:root, [data-theme="dark"] {
    --theme-name: "dark";
    
    /* Fondos Ejecutivos: Deep Navy & Slate */
    --bg-dark: #0b1329;
    --bg-dark-rgb: 11, 19, 41;
    --bg-card: rgba(15, 23, 42, 0.90);
    --bg-card-hover: rgba(30, 41, 59, 0.95);
    --bg-surface: #0f172a;
    --bg-nav: rgba(11, 19, 41, 0.94);
    
    /* Azul Real Académico */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-rgb: 37, 99, 235;

    /* Acentos Secundarios Informativos */
    --cian: #0284c7;
    --sky: #38bdf8;
    --cian-glow: rgba(37, 99, 235, 0.15);
    --purple: #6366f1;
    --purple-dark: #4f46e5;

    /* Estados Institucionales */
    --amber: #d97706;
    --rose: #dc2626;
    --emerald: #059669;
    --accent-red: #dc2626;
    --accent-green: #059669;
    --accent-yellow: #d97706;
    --coral: #f43f5e;
    --lavender: #a78bfa;

    /* Tipografía y Contraste */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-secondary: #cbd5e1;
    --text-dim: #64748b;

    /* Estructura y Bordes */
    --border-card: rgba(148, 163, 184, 0.14);
    --border-glass: rgba(37, 99, 235, 0.22);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --font-main: 'Plus Jakarta Sans', sans-serif;

    /* Inputs y Formularios */
    --input-bg: rgba(15, 23, 42, 0.85);
    --input-border: rgba(148, 163, 184, 0.25);
    --input-color: #f8fafc;
    --input-placeholder: #64748b;

    /* Tablas */
    --th-bg: rgba(255, 255, 255, 0.04);
    --td-border: rgba(255, 255, 255, 0.05);
    --tr-hover: rgba(255, 255, 255, 0.03);

    /* Sombras Enterprise */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.35);
}

/* --- TEMA CLARO (MODO INSTITUCIONAL / EJECUTIVO B2G & B2B) --- */
:root[data-theme="light"], html[data-theme="light"], body.theme-light, [data-theme="light"] {
    --theme-name: "light";
    
    /* Fondos Blancos y Perla Académicos (Canvas LMS / Google Classroom) */
    --bg-dark: #f8fafc;
    --bg-dark-rgb: 248, 250, 252;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-nav: rgba(255, 255, 255, 0.96);
    
    /* Azul Real Académico Formal (MINEDU / Gob.pe) */
    --primary: #1d4ed8;
    --primary-hover: #1e40af;
    --primary-light: #2563eb;
    --primary-rgb: 29, 78, 216;

    /* Acentos Secundarios */
    --cian: #0284c7;
    --sky: #0369a1;
    --cian-glow: rgba(29, 78, 216, 0.06);
    --purple: #4f46e5;
    --purple-dark: #4338ca;

    /* Estados Institucionales */
    --amber: #b45309;
    --rose: #b91c1c;
    --emerald: #047857;
    --accent-red: #b91c1c;
    --accent-green: #047857;
    --accent-yellow: #b45309;

    /* Tipografía de Alto Contraste (WCAG AAA) */
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-secondary: #334155;
    --text-dim: #94a3b8;

    /* Estructura y Bordes Limpios */
    --border-card: #e2e8f0;
    --border-glass: #cbd5e1;
    --border-subtle: #f1f5f9;
    --font-main: 'Plus Jakarta Sans', sans-serif;

    /* Inputs y Formularios */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-color: #0f172a;
    --input-placeholder: #94a3b8;

    /* Tablas */
    --th-bg: #f1f5f9;
    --td-border: #e2e8f0;
    --tr-hover: #f8fafc;

    /* Sombras Suaves */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Fondos sutiles según modo */
body {
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(15, 23, 42, 0.6) 0%, transparent 50%);
}

html[data-theme="light"] body, body.theme-light {
    background-color: #f8fafc !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(29, 78, 216, 0.04) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(226, 232, 240, 0.6) 0%, transparent 45%) !important;
    color: #0f172a !important;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .container { padding: 0 16px; }
}

/* =========================================================================
   BOTÓN UNIVERSAL DE CAMBIO DE TEMA (THEME TOGGLE PILL)
   ========================================================================= */
.btn-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
}

.btn-theme-toggle:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: #3b82f6;
    color: #93c5fd;
    transform: translateY(-1px);
}

html[data-theme="light"] .btn-theme-toggle {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .btn-theme-toggle:hover {
    background: #f1f5f9;
    border-color: #1d4ed8;
    color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* =========================================================================
   BLINDAJE DE CONTRASTE UNIVERSAL PARA MODO INSTITUCIONAL CLARO
   Garantiza legibilidad WCAG AAA en todos los paneles, textos y componentes
   ========================================================================= */
html[data-theme="light"], body.theme-light {
    color: #0f172a;
    background-color: #f8fafc;
}

/* 1. Títulos y Encabezados */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
    color: #0f172a !important;
}

/* 2. Textos de Párrafos, Descripciones, Listas y Labels */
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] dd,
html[data-theme="light"] dt,
html[data-theme="light"] label {
    color: #334155 !important;
}

/* 3. Textos en Negrita */
html[data-theme="light"] b:not(.btn-primary b):not(.btn-action b):not(.btn-submit b):not(.deck-btn-primary b):not([class*="badge"]):not([class*="pill"]),
html[data-theme="light"] strong:not(.btn-primary strong):not(.btn-action strong):not(.btn-submit strong):not(.deck-btn-primary strong):not([class*="badge"]):not([class*="pill"]) {
    color: #0f172a !important;
}

/* 4. Textos Secundarios, Subtítulos y Muted */
html[data-theme="light"] .text-muted,
html[data-theme="light"] .kpi-desc,
html[data-theme="light"] .kpi-subtext,
html[data-theme="light"] small:not([class*="badge"]):not([class*="pill"]):not(.btn small),
html[data-theme="light"] .user-tag,
html[data-theme="light"] .kpi-tag {
    color: #475569 !important;
}

/* 5. ANULACIÓN ROBUSTA DE TEXTOS CLAROS HARDCODEADOS (Espacios, Sin Espacios, Mayúsculas/Minúsculas) */
html[data-theme="light"] [style*="color: #fff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color:#fff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color: #FFF"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color:#FFF"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color: #ffffff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color:#ffffff"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color: #FFFFFF"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color:#FFFFFF"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color: white"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]),
html[data-theme="light"] [style*="color:white"]:not([class*="btn"]):not([class*="badge"]):not([class*="pill"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]) {
    color: #0f172a !important;
}

/* Grises claros a texto oscuro de alto contraste */
html[data-theme="light"] [style*="color: #cbd5e1"],
html[data-theme="light"] [style*="color:#cbd5e1"],
html[data-theme="light"] [style*="color: #e2e8f0"],
html[data-theme="light"] [style*="color:#e2e8f0"],
html[data-theme="light"] [style*="color: #f1f5f9"],
html[data-theme="light"] [style*="color:#f1f5f9"],
html[data-theme="light"] [style*="color: #f8fafc"],
html[data-theme="light"] [style*="color:#f8fafc"],
html[data-theme="light"] [style*="color: rgba(255"],
html[data-theme="light"] [style*="color:rgba(255"] {
    color: #334155 !important;
}

html[data-theme="light"] [style*="color: #94a3b8"]:not([class*="badge"]):not([class*="pill"]),
html[data-theme="light"] [style*="color:#94a3b8"]:not([class*="badge"]):not([class*="pill"]) {
    color: #475569 !important;
}

/* 6. ANULACIÓN DE FONDOS OSCUROS INTERNOS (Cajas, Contenedores, Modales) */
html[data-theme="light"] [style*="background: rgba(0, 0, 0"]:not([id*="modal"]):not([class*="modal-backdrop"]):not([class*="modal-overlay"]):not([style*="position: fixed"]):not([style*="position:fixed"]),
html[data-theme="light"] [style*="background: rgba(0,0,0"]:not([id*="modal"]):not([class*="modal-backdrop"]):not([class*="modal-overlay"]):not([style*="position: fixed"]):not([style*="position:fixed"]),
html[data-theme="light"] [style*="background:rgba(0,0,0"]:not([id*="modal"]):not([class*="modal-backdrop"]):not([class*="modal-overlay"]):not([style*="position: fixed"]):not([style*="position:fixed"]),
html[data-theme="light"] [style*="background:rgba(0, 0, 0"]:not([id*="modal"]):not([class*="modal-backdrop"]):not([class*="modal-overlay"]):not([style*="position: fixed"]):not([style*="position:fixed"]),
html[data-theme="light"] [style*="background-color: rgba(0, 0, 0"]:not([id*="modal"]):not([class*="modal-backdrop"]):not([class*="modal-overlay"]):not([style*="position: fixed"]):not([style*="position:fixed"]),
html[data-theme="light"] [style*="background-color: rgba(0,0,0"]:not([id*="modal"]):not([class*="modal-backdrop"]):not([class*="modal-overlay"]):not([style*="position: fixed"]):not([style*="position:fixed"]),
html[data-theme="light"] [style*="background-color:rgba(0,0,0"]:not([id*="modal"]):not([class*="modal-backdrop"]):not([class*="modal-overlay"]):not([style*="position: fixed"]):not([style*="position:fixed"]),
html[data-theme="light"] [style*="background: rgba(10, 14, 26"],
html[data-theme="light"] [style*="background: rgba(10,14,26"],
html[data-theme="light"] [style*="background: rgba(11, 19, 41"],
html[data-theme="light"] [style*="background: rgba(11,19,41"],
html[data-theme="light"] [style*="background: rgba(13, 17, 28"],
html[data-theme="light"] [style*="background: rgba(13,17,28"],
html[data-theme="light"] [style*="background: rgba(13, 20, 36"],
html[data-theme="light"] [style*="background: rgba(13,20,36"],
html[data-theme="light"] [style*="background: rgba(15, 23, 42"],
html[data-theme="light"] [style*="background: rgba(15,23,42"],
html[data-theme="light"] [style*="background: rgba(19, 29, 51"],
html[data-theme="light"] [style*="background: rgba(19,29,51"],
html[data-theme="light"] [style*="background: rgba(10, 10, 10"],
html[data-theme="light"] [style*="background: rgba(10,10,10"],
html[data-theme="light"] [style*="background: #000"],
html[data-theme="light"] [style*="background:#000"],
html[data-theme="light"] [style*="background: #0a"],
html[data-theme="light"] [style*="background:#0a"],
html[data-theme="light"] [style*="background: #0b"],
html[data-theme="light"] [style*="background:#0b"],
html[data-theme="light"] [style*="background: #0c"],
html[data-theme="light"] [style*="background:#0c"],
html[data-theme="light"] [style*="background: #0d"],
html[data-theme="light"] [style*="background:#0d"],
html[data-theme="light"] [style*="background: #0e"],
html[data-theme="light"] [style*="background:#0e"],
html[data-theme="light"] [style*="background: #07"],
html[data-theme="light"] [style*="background:#07"],
html[data-theme="light"] [style*="background: #08"],
html[data-theme="light"] [style*="background:#08"],
html[data-theme="light"] [style*="background: #111"],
html[data-theme="light"] [style*="background:#111"],
html[data-theme="light"] [style*="background: #1e293b"],
html[data-theme="light"] [style*="background:#1e293b"],
html[data-theme="light"] [style*="background-color: #1e293b"],
html[data-theme="light"] [style*="background-color:#1e293b"],
html[data-theme="light"] [style*="background: #0f172a"],
html[data-theme="light"] [style*="background:#0f172a"],
html[data-theme="light"] [style*="background-color: #0f172a"],
html[data-theme="light"] [style*="background-color:#0f172a"],
html[data-theme="light"] [style*="background: #334155"],
html[data-theme="light"] [style*="background:#334155"],
html[data-theme="light"] [style*="background-color: #334155"],
html[data-theme="light"] [style*="background-color:#334155"],
html[data-theme="light"] [style*="background: linear-gradient(135deg, #0f172a"],
html[data-theme="light"] [style*="background:linear-gradient(135deg, #0f172a"],
html[data-theme="light"] [style*="background: linear-gradient(135deg,#0f172a"],
html[data-theme="light"] [style*="background:linear-gradient(135deg,#0f172a"] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 7. Tablas Ejecutivas Completas (Todas las Vistas) */
html[data-theme="light"] table,
html[data-theme="light"] .data-table,
html[data-theme="light"] .admin-table,
html[data-theme="light"] .table-ugel,
html[data-theme="light"] .table-custom,
html[data-theme="light"] .cneb-table,
html[data-theme="light"] .psico-table,
html[data-theme="light"] .moat-table,
html[data-theme="light"] .beca-table,
html[data-theme="light"] .slide-table {
    background: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] .data-table th,
html[data-theme="light"] .admin-table th,
html[data-theme="light"] .table-ugel th,
html[data-theme="light"] .table-custom th,
html[data-theme="light"] .cneb-table th,
html[data-theme="light"] .psico-table th,
html[data-theme="light"] .moat-table th,
html[data-theme="light"] .beca-table th,
html[data-theme="light"] .slide-table th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-bottom: 2px solid #cbd5e1 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .data-table td,
html[data-theme="light"] .admin-table td,
html[data-theme="light"] .table-ugel td,
html[data-theme="light"] .table-custom td,
html[data-theme="light"] .cneb-table td,
html[data-theme="light"] .psico-table td,
html[data-theme="light"] .moat-table td,
html[data-theme="light"] .beca-table td,
html[data-theme="light"] .slide-table td {
    color: #1e293b !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html[data-theme="light"] .data-table td b,
html[data-theme="light"] .data-table td strong,
html[data-theme="light"] .admin-table td b,
html[data-theme="light"] .admin-table td strong,
html[data-theme="light"] .table-ugel td b,
html[data-theme="light"] .table-ugel td strong,
html[data-theme="light"] .table-custom td b,
html[data-theme="light"] .table-custom td strong {
    color: #0f172a !important;
}

html[data-theme="light"] .data-table td small,
html[data-theme="light"] .admin-table td small,
html[data-theme="light"] .table-ugel td small,
html[data-theme="light"] .table-custom td small {
    color: #64748b !important;
}

/* 8. Formularios, Inputs, Selects y Opciones */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-input,
html[data-theme="light"] .input-search,
html[data-theme="light"] .select-filter,
html[data-theme="light"] .ugel-select,
html[data-theme="light"] .region-select,
html[data-theme="light"] .search-input,
html[data-theme="light"] .filter-select,
html[data-theme="light"] .form-input-zen,
html[data-theme="light"] .form-select-zen {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] option,
html[data-theme="light"] select option,
html[data-theme="light"] .form-select option,
html[data-theme="light"] .select-filter option,
html[data-theme="light"] .region-select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .form-input-zen::placeholder {
    color: #94a3b8 !important;
}

/* 8.5 Componentes Especiales de Test Vocacional, Diagnósticos y Dashboards */
html[data-theme="light"] .eval-card,
html[data-theme="light"] .test-header-bar,
html[data-theme="light"] .container-zen,
html[data-theme="light"] .step-section-card,
html[data-theme="light"] .feature-card-zen,
html[data-theme="light"] .career-card-zen,
html[data-theme="light"] .habito-item,
html[data-theme="light"] .step-card-zen,
html[data-theme="light"] .uni-card-zen,
html[data-theme="light"] .glosario-card-zen,
html[data-theme="light"] .beca-card-zen,
html[data-theme="light"] .modal-card-zen,
html[data-theme="light"] .stepper-content,
html[data-theme="light"] .kpi-card-cepre,
html[data-theme="light"] .kpi-card-gore,
html[data-theme="light"] .stat-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .question-statement,
html[data-theme="light"] .question-title,
html[data-theme="light"] .checkpoint-title,
html[data-theme="light"] .kpi-card-cepre .val,
html[data-theme="light"] .kpi-card-gore .val,
html[data-theme="light"] .stat-card .numero,
html[data-theme="light"] .section-header h2,
html[data-theme="light"] .mv-card h3,
html[data-theme="light"] .sector-card h3,
html[data-theme="light"] .preview-kpi h3,
html[data-theme="light"] .pdrc-title,
html[data-theme="light"] .uni-feature-card h4,
html[data-theme="light"] .footer-col h4,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .feature-item h4 {
    color: #0f172a !important;
}

html[data-theme="light"] .eval-option-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

html[data-theme="light"] .eval-option-btn:hover {
    background: #f1f5f9 !important;
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
}

html[data-theme="light"] .eval-option-btn.option-neutral {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

html[data-theme="light"] .option-key-badge {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] .option-label {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

html[data-theme="light"] .option-label:hover {
    background: #f1f5f9 !important;
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
}

html[data-theme="light"] .elite-hack-body,
html[data-theme="light"] .checkpoint-enunciado,
html[data-theme="light"] .security-banner,
html[data-theme="light"] .modal-body,
html[data-theme="light"] .batch-toolbar label,
html[data-theme="light"] .kpi-card-cepre .lbl,
html[data-theme="light"] .kpi-card-gore .lbl,
html[data-theme="light"] .stat-card .label {
    color: #334155 !important;
}

/* 9. Logotipo y Badges de Barra de Navegación */
html[data-theme="light"] .dash-nav {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .dash-logo,
html[data-theme="light"] .logo-text {
    color: #0f172a !important;
}

html[data-theme="light"] .dash-logo span,
html[data-theme="light"] .logo-text span {
    color: #1d4ed8 !important;
}

html[data-theme="light"] .inst-badge {
    background: rgba(29, 78, 216, 0.08) !important;
    border-color: rgba(29, 78, 216, 0.25) !important;
    color: #1d4ed8 !important;
}

/* 10. KPIs y Tarjetas Métricas */
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .kpi-card-box,
html[data-theme="light"] .kpi-card-ugel,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .card,
html[data-theme="light"] .materia-group-card,
html[data-theme="light"] .student-hero-bar,
html[data-theme="light"] .hero-simulacro-card,
html[data-theme="light"] .radar-beca-card,
html[data-theme="light"] .benchmarking-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .kpi-val,
html[data-theme="light"] .kpi-value-big,
html[data-theme="light"] .kpi-number,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .student-identity h1 {
    color: #0f172a !important;
}

html[data-theme="light"] .kpi-title {
    color: #475569 !important;
    font-weight: 800 !important;
}

/* 11. Modales */
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-box {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .modal-content h2,
html[data-theme="light"] .modal-content h3,
html[data-theme="light"] .modal-content h4,
html[data-theme="light"] .modal-box h2,
html[data-theme="light"] .modal-box h3,
html[data-theme="light"] .modal-box h4 {
    color: #0f172a !important;
}

html[data-theme="light"] .modal-content p,
html[data-theme="light"] .modal-box p {
    color: #334155 !important;
}

/* 12. Pestañas (Tabs Navigation) */
html[data-theme="light"] .elite-tabs-nav,
html[data-theme="light"] .tabs-nav-ugel {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .elite-tab-btn,
html[data-theme="light"] .tab-btn-ugel {
    color: #64748b !important;
}

html[data-theme="light"] .elite-tab-btn:hover,
html[data-theme="light"] .tab-btn-ugel:hover {
    color: #0f172a !important;
    background: #e2e8f0 !important;
}

html[data-theme="light"] .elite-tab-btn.active,
html[data-theme="light"] .tab-btn-ugel.active {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* 13. PRESERVACIÓN ESTRICTA DE BOTONES Y LLAMADOS A LA ACCIÓN */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-action,
html[data-theme="light"] .btn-submit,
html[data-theme="light"] .btn-start-simulacro,
html[data-theme="light"] .btn-premium-pagar,
html[data-theme="light"] .btn-whatsapp,
html[data-theme="light"] .btn-banner-action,
html[data-theme="light"] .btn-informe-action,
html[data-theme="light"] button[style*="background: linear-gradient"],
html[data-theme="light"] button[style*="background:linear-gradient"],
html[data-theme="light"] a[style*="background: linear-gradient"],
html[data-theme="light"] a[style*="background:linear-gradient"],
html[data-theme="light"] .btn[style*="background: linear-gradient"],
html[data-theme="light"] .btn[style*="background:linear-gradient"],
html[data-theme="light"] button[style*="background-color: #1d4ed8"],
html[data-theme="light"] button[style*="background: #1d4ed8"],
html[data-theme="light"] button[style*="background: #2563eb"],
html[data-theme="light"] button[style*="background: #ef4444"],
html[data-theme="light"] button[style*="background: #dc2626"],
html[data-theme="light"] button[style*="background: #059669"],
html[data-theme="light"] button[style*="background: #15803d"],
html[data-theme="light"] button[style*="background: #166534"],
html[data-theme="light"] a[style*="background: #25D366"] {
    color: #ffffff !important;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-secondary-action,
html[data-theme="light"] .deck-btn:not(.deck-btn-primary) {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-secondary-action:hover,
html[data-theme="light"] .deck-btn:not(.deck-btn-primary):hover {
    background: #f1f5f9 !important;
    color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* Transición suave general para cambios de tema */
.dash-nav, .admin-nav, .header-ugel, .kpi-card, .panel-card, .data-table, .modal-content, .card {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

/* =========================================================================
   14. SUSTITUCIÓN UNIVERSAL DEL LOGOTIPO EN MODO INSTITUCIONAL (CLARO)
   ========================================================================= */
html[data-theme="light"] img[src*="logo.svg"],
html[data-theme="light"] .logo-container img,
html[data-theme="light"] .dash-brand img,
html[data-theme="light"] .logo-img,
html[data-theme="light"] .auth-logo-img {
    content: url("../img/logo-light.svg") !important;
}

html[data-theme="dark"] .logo-container img,
html[data-theme="dark"] .dash-brand img,
html[data-theme="dark"] .logo-img,
html[data-theme="dark"] .auth-logo-img {
    content: normal !important;
}

html[data-theme="light"] .logo-text {
    color: #0f172a !important;
}

html[data-theme="light"] .logo-text span,
html[data-theme="light"] .elite-text {
    color: #1d4ed8 !important;
    text-shadow: none !important;
}

/* Catch-all for JS-generated inline dark backgrounds */
html[data-theme="light"] [style*="background: rgba(15, 23, 42"],
html[data-theme="light"] [style*="background: #0d121f"],
html[data-theme="light"] [style*="background:rgba(15, 23, 42"],
html[data-theme="light"] [style*="background:#0d121f"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] .theme-override-light {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* =========================================================================
   BLINDAJE DE CONTRASTE TOTAL PARA EL LECTOR DE TEORÍA E INFOGRAFÍAS (Sep 2026)
   Garantiza contraste WCAG AAA impecable tanto en Modo Oscuro como en Modo Claro
   ========================================================================= */
.teoria-container {
    color: #f1f5f9;
}
.teoria-container h1, 
.teoria-container h2, 
.teoria-container h3, 
.teoria-container h4 {
    color: #ffffff;
}
.teoria-container p, 
.teoria-container li {
    color: #cbd5e1;
}
.teoria-container b, 
.teoria-container strong {
    color: #fbbf24;
}

/* Modo Claro Lector de Teoría */
html[data-theme="light"] .teoria-container {
    color: #1e293b !important;
}
html[data-theme="light"] .teoria-container h1,
html[data-theme="light"] .teoria-container h2,
html[data-theme="light"] .teoria-container h3,
html[data-theme="light"] .teoria-container h4 {
    color: #0f172a !important;
}
html[data-theme="light"] .teoria-container p,
html[data-theme="light"] .teoria-container li {
    color: #334155 !important;
}
html[data-theme="light"] .teoria-container b,
html[data-theme="light"] .teoria-container strong {
    color: #0f172a !important;
}
html[data-theme="light"] .teoria-container .teoria-card-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .teoria-container .teoria-academy-header {
    background: #f8fafc !important;
    border-bottom: 3px solid #2563eb !important;
}
html[data-theme="light"] .teoria-container .teoria-academy-title {
    color: #0f172a !important;
}
html[data-theme="light"] .teoria-container .teoria-academy-subtitle {
    color: #475569 !important;
}

/* =========================================================================
   BLINDAJE GLOBAL CONTRA DESBORDAMIENTO HORIZONTAL (MOBILE ZERO-OVERFLOW)
   ========================================================================= */
html {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}