/* =====================================================
   APUNTES UNAM 2026 — styles.css
   ===================================================== */

/* =====================================================
   DESIGN TOKENS — "Studious Glass 2026"
   Glassmorphism moderado: blur sólo en zonas estables
   (menu, hero, modal, FABs). Cards de contenido con
   sombras en capas pero sin blur (preserva fluidez).
   ===================================================== */
:root {
    /* — Paleta base (light) — */
    --bg-color: #f5f3ee;                  /* crema cálido tipo papel */
    --bg-gradient: radial-gradient(ellipse at top, #faf8f3 0%, #f0ede5 70%);
    --surface-1: #ffffff;                 /* card sólido */
    --surface-2: #fafaf7;                 /* card secundaria */
    --surface-elev: rgba(255,255,255,0.92);
    --text-color: #1e293b;
    --text-muted: #64748b;
    --header-text: #0f172a;
    --card-text: #334155;
    --border-color: #e6e0d3;
    --input-bg: #ffffff;

    /* — Acentos — */
    --menu-accent: #6d28d9;               /* violeta principal */
    --menu-accent-2: #2563eb;             /* azul secundario */
    --accent-success: #059669;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;

    /* — Glass tokens — */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-bg-soft: rgba(255, 255, 255, 0.38);
    --glass-border: rgba(255, 255, 255, 0.55);
    --glass-border-soft: rgba(15, 23, 42, 0.06);
    --glass-blur: 14px;
    --glass-blur-strong: 20px;

    /* — Sombras en capas (multi-layer depth) — */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 2px 6px rgba(15,23,42,0.05);
    --shadow-md: 0 1px 3px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.08);
    --shadow-lg: 0 4px 8px rgba(15,23,42,0.08), 0 12px 28px rgba(15,23,42,0.10);
    --shadow-xl: 0 8px 16px rgba(15,23,42,0.10), 0 24px 48px rgba(15,23,42,0.14);
    --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(255,255,255,0.6) inset;
    --shadow: var(--shadow-md);            /* compat retro */

    /* — Espaciado escala 4-pt — */
    --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px;

    /* — Radios — */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-2xl: 28px;
    --r-pill: 999px;
    --border-radius: 22px;                 /* compat retro */

    /* — Tipografía — */
    --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lh-tight: 1.25;
    --lh-snug: 1.45;
    --lh-base: 1.65;
    --lh-relaxed: 1.75;

    /* — Transiciones — */
    --transition-smooth: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-quick: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

    /* — Menu — */
    --menu-bg: rgba(255,255,255,0.85);
    --menu-bg-solid: #ffffff;
    --menu-text: #1e293b;
    --menu-hover: #efeae0;

    /* — Mindmap branches — colores más suaves para fondo papel */
    --main-node: #fef3c7;
    --branch-1: #dbeafe;
    --branch-2: #d1fae5;
    --branch-3: #fed7aa;
    --branch-4: #ede9fe;
    --branch-5: #fce7f3;
    --sub-node-bg: #ffffff;

    /* — x-plot (graficación, sin cambios funcionales) — */
    --plot-bg: #ffffff;
    --plot-bg-contrast: #ffffff;
    --plot-border: #e2e8f0;
    --plot-axis: #475569;
    --plot-grid: rgba(100, 116, 139, 0.18);
    --plot-text: #334155;
    --plot-primary: #2563eb;
    --plot-accent: #dc2626;
    --plot-secondary: #059669;
    --plot-tertiary: #d97706;
    --plot-quaternary: #7c3aed;
}

body.dark-mode {
    --bg-color: #0c1424;
    --bg-gradient: radial-gradient(ellipse at top, #131e36 0%, #08101e 70%);
    --surface-1: #1e293b;
    --surface-2: #182232;
    --surface-elev: rgba(30, 41, 59, 0.92);
    --text-color: #e2e8f0;
    --text-muted: #94a3b8;
    --header-text: #f8fafc;
    --card-text: #cbd5e1;
    --border-color: #2a3a52;
    --input-bg: #0f172a;

    --glass-bg: rgba(15, 23, 42, 0.55);
    --glass-bg-strong: rgba(30, 41, 59, 0.78);
    --glass-bg-soft: rgba(15, 23, 42, 0.45);
    --glass-border: rgba(148, 163, 184, 0.18);
    --glass-border-soft: rgba(255, 255, 255, 0.04);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-md: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.32);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.42);
    --shadow-xl: 0 8px 16px rgba(0,0,0,0.45), 0 24px 48px rgba(0,0,0,0.55);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(148,163,184,0.10) inset;
    --shadow: var(--shadow-md);

    --menu-bg: rgba(15,23,42,0.78);
    --menu-bg-solid: #1e293b;
    --menu-text: #f1f5f9;
    --menu-hover: #2a3a52;

    --main-node: #78350f;
    --branch-1: #1e3a8a;
    --branch-2: #064e3b;
    --branch-3: #7c2d12;
    --branch-4: #4c1d95;
    --branch-5: #831843;
    --sub-node-bg: #1e293b;

    --plot-bg: #0f172a;
    --plot-bg-contrast: #1e293b;
    --plot-border: #334155;
    --plot-axis: #cbd5e1;
    --plot-grid: rgba(148, 163, 184, 0.22);
    --plot-text: #e2e8f0;
    --plot-primary: #60a5fa;
    --plot-accent: #f87171;
    --plot-secondary: #34d399;
    --plot-tertiary: #fbbf24;
    --plot-quaternary: #c4b5fd;
}

/* — Body global con fondo papel/gradiente — */
body {
    background: var(--bg-color);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-color);
    line-height: var(--lh-base);
    font-feature-settings: 'kern', 'liga';
    text-rendering: optimizeLegibility;
}

/* — Utilidad .glass — usar SÓLO en superficies estables
   (menu, hero, modal, FABs, tabs sticky). Nunca en listas largas. */
.glass {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    box-shadow: var(--shadow-glass);
}
.glass-soft {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-soft);
    backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    box-shadow: var(--shadow-md);
}
@supports not (backdrop-filter: blur(1px)) {
    .glass, .glass-soft { background: var(--surface-1); }
}

/* ── Graficador <x-plot> ───────────────────────────────────── */
x-plot {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 16px auto;
    background: var(--plot-bg);
    border: 1px solid var(--plot-border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}
.x-plot-frame {
    position: relative;
}

x-plot .x-plot-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}

x-plot .x-plot-caption {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--plot-text);
    text-align: center;
    font-style: italic;
    opacity: 0.85;
}

/* --- Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-color);
    background-image: radial-gradient(#cbd5e1 2px, transparent 2px);
    background-size: 30px 30px;
    color: var(--text-color);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode {
    background-image: radial-gradient(#334155 2px, transparent 2px);
}

/* --- Estructura de Páginas --- */
.subject-content {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 60px 20px;
    box-sizing: border-box;
}

.subject-content.visible {
    display: flex;
}

/* La página de inicio maneja su propio padding en .home-container */
#content-home {
    padding: 0;
}

/* --- Botones Flotantes (glass) --- */
.dark-mode-toggle,
.menu-btn {
    position: fixed;
    z-index: 1050;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.4) inset;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform var(--transition-quick), box-shadow var(--transition-quick), background var(--transition-quick);
}
@supports not (backdrop-filter: blur(1px)) {
    .dark-mode-toggle, .menu-btn { background: var(--surface-1); }
}

.menu-btn {
    top: 20px;
    left: 20px;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
}

.dark-mode-toggle {
    top: 20px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--menu-accent);
}

.dark-mode-toggle:hover {
    transform: rotate(30deg) scale(1.1);
}

.menu-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 5px;
    transition: all 0.4s ease;
}

.menu-btn.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-btn.open .bar:nth-child(2) {
    opacity: 0;
}

.menu-btn.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Floating Action Buttons Column --- */
.floating-actions-row {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.floating-actions-row > * {
    pointer-events: auto;
}
.floating-actions-row.fabs-dodging {
    opacity: 0;
    pointer-events: none;
}

.fab-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.4) inset;
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    transition: transform var(--transition-quick), box-shadow var(--transition-quick), background var(--transition-quick);
    flex-shrink: 0;
}
.fab-circle:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.55) inset;
}
.fab-circle:active { transform: translateY(-1px) scale(0.98); }

#scrollToTopBtn {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    display: none;
    animation: fadeInPage 0.3s ease;
}

/* Focus mode FAB (estado por defecto: visible y distinguible) */
#focus-mode-btn {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    color: #fff;
}
.dark-mode #focus-mode-btn {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: #0f172a;
}
#scrollToTopBtn.visible {
    display: flex;
}

/* --- Botón Instalar PWA (inside floating column) --- */
#pwa-install-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: none;
}
#pwa-install-btn.fab-visible {
    display: flex;
}
#pwa-install-btn.hidden-scroll {
    display: none;
}

/* --- Menú Lateral (glassmorphism) --- */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    height: 100dvh;
    /* Glass: estable porque tiene transform translate constante (sólo cambia X)
       y nada se relayouta detrás durante la animación. */
    background: var(--menu-bg);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    border-right: 1px solid var(--glass-border);
    box-shadow: 4px 0 32px rgba(15, 23, 42, 0.08), 1px 0 0 rgba(255,255,255,0.4) inset;
    z-index: 999;
    transform: translateX(-330px);
    transition: transform var(--transition-smooth);
    will-change: transform;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 90px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@supports not (backdrop-filter: blur(1px)) {
    .side-menu { background: var(--menu-bg-solid); }
}

.side-menu.open {
    transform: translateX(0);
}

.dark-mode .side-menu {
    box-shadow: 4px 0 32px rgba(0,0,0,0.45), 1px 0 0 rgba(148,163,184,0.10) inset;
}

.side-menu h3 {
    margin: 0 20px 12px 20px;
    font-size: 1.5rem;
    color: var(--menu-accent);
    border-bottom: 2px solid var(--menu-hover);
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-category-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-weight: 800;
    padding: 18px 24px 8px 24px;
    margin-top: 12px;
    border-top: 1px solid var(--glass-border-soft);
}
.menu-category-title:first-of-type { border-top: none; margin-top: 6px; }

.dark-mode .menu-category-title {
    color: #94a3b8;
}

/* --- Colores de Menú en Modo Oscuro (Override de los estilos en línea) --- */
.dark-mode #btn-espanol {
    color: #60a5fa !important;
}

.dark-mode #btn-matematicas {
    color: #a78bfa !important;
}

.dark-mode #btn-fisica {
    color: #22d3ee !important;
}

.dark-mode #btn-quimica {
    color: #4ade80 !important;
}

.dark-mode #btn-biologia {
    color: #fbbf24 !important;
}

.dark-mode #btn-hist-univ {
    color: #f87171 !important;
}

.dark-mode #btn-historia {
    color: #fb923c !important;
}

.dark-mode #btn-literatura {
    color: #c084fc !important;
}

.dark-mode #btn-geografia {
    color: #2dd4bf !important;
}

.dark-mode #btn-todas-unam {
    color: #fb923c !important;
}

.dark-mode #btn-simulacro {
    color: #60a5fa !important;
}

.dark-mode #btn-guided {
    color: #2dd4bf !important;
}

.dark-mode #link-flashcards {
    color: #c084fc !important;
}

.dark-mode #link-studytok {
    color: #fb7185 !important;
}

.dark-mode #link-stats {
    color: #a78bfa !important;
}

/* Menú en Modo Oscuro - Sombreados Active */
.dark-mode #btn-espanol.active {
    background-color: rgba(96, 165, 250, 0.15) !important;
    border-left-color: #60a5fa !important;
    color: #93c5fd !important;
}

.dark-mode #btn-matematicas.active {
    background-color: rgba(167, 139, 250, 0.15) !important;
    border-left-color: #a78bfa !important;
    color: #c4b5fd !important;
}

.dark-mode #btn-quimica.active {
    background-color: rgba(74, 222, 128, 0.15) !important;
    border-left-color: #4ade80 !important;
    color: #86efac !important;
}

.dark-mode #btn-fisica.active {
    background-color: rgba(34, 211, 238, 0.15) !important;
    border-left-color: #22d3ee !important;
    color: #67e8f9 !important;
}

.dark-mode #btn-biologia.active {
    background-color: rgba(251, 191, 36, 0.15) !important;
    border-left-color: #fbbf24 !important;
    color: #fcd34d !important;
}

.dark-mode #btn-hist-univ.active {
    background-color: rgba(248, 113, 113, 0.15) !important;
    border-left-color: #f87171 !important;
    color: #fca5a5 !important;
}

.dark-mode #btn-historia.active {
    background-color: rgba(251, 146, 60, 0.15) !important;
    border-left-color: #fb923c !important;
    color: #fdba74 !important;
}

.dark-mode #btn-literatura.active {
    background-color: rgba(192, 132, 252, 0.15) !important;
    border-left-color: #c084fc !important;
    color: #d8b4fe !important;
}

.dark-mode #btn-geografia.active {
    background-color: rgba(45, 212, 191, 0.15) !important;
    border-left-color: #2dd4bf !important;
    color: #5eead4 !important;
}

.dark-mode #btn-todas-unam.active {
    background-color: rgba(251, 146, 60, 0.15) !important;
    border-left-color: #fb923c !important;
    color: #fdba74 !important;
}

.dark-mode #btn-simulacro.active {
    background-color: rgba(96, 165, 250, 0.15) !important;
    border-left-color: #60a5fa !important;
    color: #93c5fd !important;
}

.dark-mode #btn-guided.active {
    background-color: rgba(45, 212, 191, 0.15) !important;
    border-left-color: #2dd4bf !important;
    color: #5eead4 !important;
}

.dark-mode #link-flashcards.active {
    background-color: rgba(192, 132, 252, 0.15) !important;
    border-left-color: #c084fc !important;
    color: #d8b4fe !important;
}

.dark-mode #link-studytok.active {
    background-color: rgba(251, 113, 133, 0.15) !important;
    border-left-color: #fb7185 !important;
    color: #fda4af !important;
}

.dark-mode #link-stats.active {
    background-color: rgba(139, 92, 246, 0.15) !important;
    border-left-color: #a78bfa !important;
    color: #c4b5fd !important;
}


/* --- Buscador en Menú --- */
.menu-search-wrapper {
    margin: 0 16px 14px 16px;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.menu-search-input {
    flex: 1;
    min-width: 0;
    padding: 9px 14px 9px 36px;
    border: 2px solid var(--menu-hover);
    border-radius: 12px;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.menu-search-input:focus {
    border-color: var(--menu-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.menu-search-wrapper .search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
    pointer-events: none;
}

.dark-mode .menu-search-input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

/* --- Listas del Menú --- */
.subject-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.subject-item {
    padding: 12px 20px;
    margin: 2px 12px;
    font-size: 1rem;
    color: var(--menu-text);
    text-decoration: none;
    font-weight: 700;
    transition: background var(--transition-quick), transform var(--transition-quick), box-shadow var(--transition-quick);
    display: flex;
    align-items: center;
    border-left: 4px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    position: relative;
}

.subject-item:hover {
    background-color: var(--menu-hover);
    transform: translateX(2px);
}

/* --- Colores dinámicos al hacer click (active) en la asignatura --- */
.subject-item.active {
    font-weight: 800;
}

#btn-espanol.active {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-left-color: #2563eb !important;
}

#btn-matematicas.active {
    background-color: #f3e8ff !important;
    color: #6d28d9 !important;
    border-left-color: #7c3aed !important;
}

#btn-fisica.active {
    background-color: #ecfeff !important;
    color: #0e7490 !important;
    border-left-color: #0891b2 !important;
}

#btn-quimica.active {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border-left-color: #16a34a !important;
}

#btn-biologia.active {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border-left-color: #d97706 !important;
}

#btn-hist-univ.active {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-left-color: #dc2626 !important;
}

#btn-historia.active {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border-left-color: #ea580c !important;
}

#btn-literatura.active {
    background-color: #faf5ff !important;
    color: #7e22ce !important;
    border-left-color: #9333ea !important;
}

#btn-geografia.active {
    background-color: #f0fdfa !important;
    color: #0f766e !important;
    border-left-color: #0d9488 !important;
}

#btn-todas-unam.active {
    background-color: #fff7ed !important;
    color: #c2410c !important;
    border-left-color: #ea580c !important;
}

#btn-simulacro.active {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-left-color: #2563eb !important;
}

#btn-guided.active {
    background-color: #f0fdfa !important;
    color: #0f766e !important;
    border-left-color: #0d9488 !important;
}

#link-flashcards.active {
    background-color: #f5f3ff !important;
    color: #6d28d9 !important;
    border-left-color: #7c3aed !important;
}

#link-studytok.active {
    background-color: #fff1f2 !important;
    color: #be123c !important;
    border-left-color: #e11d48 !important;
}

#link-stats.active {
    background-color: #f5f3ff !important;
    color: #7c3aed !important;
    border-left-color: #8b5cf6 !important;
}



.subject-icon {
    margin-right: 12px;
    font-size: 1.3rem;
    width: 24px;
    text-align: center;
}

.arrow-icon {
    margin-left: 6px;
    transition: transform var(--transition-smooth);
    font-size: 0.8rem;
    opacity: 0.6;
}

.subject-item.open .arrow-icon {
    transform: rotate(180deg);
}

.sub-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: #f8fafc;
    transition: max-height 0.38s ease-out, opacity 0.35s ease-out;
}

.dark-mode .sub-menu-list {
    background-color: #0f172a;
}

.sub-menu-list.expanded {
    opacity: 1;
}

/* Animación escalonada de los items al abrir submenu */
.sub-menu-list.expanded li {
    animation: slideInLeft 0.3s ease both;
}

.sub-menu-list.expanded li:nth-child(1) {
    animation-delay: 0.04s;
}

.sub-menu-list.expanded li:nth-child(2) {
    animation-delay: 0.08s;
}

.sub-menu-list.expanded li:nth-child(3) {
    animation-delay: 0.12s;
}

.sub-menu-list.expanded li:nth-child(4) {
    animation-delay: 0.16s;
}

.sub-menu-list.expanded li:nth-child(5) {
    animation-delay: 0.20s;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.class-item {
    padding: 9px 16px 9px 42px;
    margin: 2px 16px 2px 28px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    border-left: 3px solid transparent;
    border-radius: var(--r-sm);
    transition: background var(--transition-quick), color var(--transition-quick), transform var(--transition-quick);
    gap: 10px;
    position: relative;
}

.class-item-label {
    min-width: 0;
}

.menu-hit {
    background: #fef08a;
    color: #713f12;
    border-radius: 6px;
    padding: 0 2px;
    font-weight: 900;
}

.dark-mode .menu-hit {
    background: #854d0e;
    color: #fde68a;
}

.dark-mode .class-item {
    color: #94a3b8;
}

.class-item.active-class {
    font-weight: 900;
    color: var(--menu-accent);
    background-color: #e2e8f0;
    border-left-color: var(--menu-accent);
}

.dark-mode .class-item.active-class {
    background-color: #1e3a8a;
    color: #bfdbfe;
}

.class-item:hover {
    background-color: var(--menu-hover);
    color: var(--menu-accent);
    border-left-color: var(--menu-accent);
    transform: translateX(2px);
}

.dark-mode .class-item:hover {
    background-color: #1e293b;
}

/* Badge de clase completada en el menú */
.class-item .done-badge {
    margin-left: auto;
    font-size: 0.75rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 20px;
    padding: 2px 7px;
    font-weight: 900;
    flex-shrink: 0;
    display: none;
}

.class-item.studied .done-badge {
    display: inline;
}

.dark-mode .class-item .done-badge {
    background: #064e3b;
    color: #6ee7b7;
}

.submenu-section-title {
    padding: 10px 20px 8px 48px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
    list-style: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-quick), color var(--transition-quick);
    position: relative;
}

/* Línea-guía vertical que ata el subgrupo a la materia padre */
.submenu-section-title::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
    border-radius: 2px;
}

.dark-mode .submenu-section-title::before {
    background: #334155;
}

.submenu-section-title:hover {
    background: var(--menu-hover, #f1f5f9);
    color: var(--menu-accent, #7c3aed);
}

.submenu-group:first-child .submenu-section-title {
    border-top: none;
    margin-top: 0;
}

.submenu-section-title i {
    font-size: 0.78rem;
    color: var(--menu-accent, #7c3aed);
}

.dark-mode .submenu-section-title {
    color: #94a3b8;
    border-top-color: #1e293b;
}

.dark-mode .submenu-section-title:hover {
    background: #1e293b;
    color: #c4b5fd;
}

.sub-menu-list.expanded .submenu-group {
    animation: slideInLeft 0.3s ease both;
}

/* Subgrupos colapsables (Álgebra, Trigonometría, etc.) */
.submenu-group {
    list-style: none;
}

.submenu-group .group-arrow {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
    color: #94a3b8;
}

.submenu-group.open .group-arrow {
    transform: rotate(180deg);
}

.submenu-group-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.32s ease-out, opacity 0.3s ease-out;
}

.submenu-group-list.expanded {
    opacity: 1;
}

.submenu-group-list.expanded li {
    animation: slideInLeft 0.25s ease both;
}

.submenu-group-list.expanded li:nth-child(1) { animation-delay: 0.03s; }
.submenu-group-list.expanded li:nth-child(2) { animation-delay: 0.06s; }
.submenu-group-list.expanded li:nth-child(3) { animation-delay: 0.09s; }
.submenu-group-list.expanded li:nth-child(4) { animation-delay: 0.12s; }
.submenu-group-list.expanded li:nth-child(5) { animation-delay: 0.15s; }

/* Badge de clases pendientes en subject-item */
.subject-pending-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 900;
    margin-left: auto;
    flex-shrink: 0;
    transition: all 0.3s ease;
    line-height: 1;
    /* Estado: clases pendientes */
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #fcd34d;
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.subject-pending-badge.visible {
    display: inline-flex;
}

.subject-pending-badge.all-done {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

@keyframes badgePop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.dark-mode .subject-pending-badge {
    background: #451a03;
    color: #fcd34d;
    border-color: #92400e;
}

.dark-mode .subject-pending-badge.all-done {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #065f46;
}

/* Badge de clases pendientes en submenu-section-title (Álgebra, Cálculo, etc.) */
.group-pending-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 900;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #fcd34d;
    transition: all 0.3s ease;
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.group-pending-badge.visible {
    display: inline-flex;
}

.group-pending-badge.all-done {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

.dark-mode .group-pending-badge {
    background: #451a03;
    color: #fcd34d;
    border-color: #92400e;
}

.dark-mode .group-pending-badge.all-done {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #065f46;
}

/* --- Botón de Inicio en el menú --- */
.home-menu-link {
    background: #e0f2fe !important;
    border-left: 4px solid #0284c7 !important;
    font-weight: 800 !important;
    color: #0284c7 !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
}

.home-menu-link:hover {
    background: #bae6fd !important;
    color: #0369a1 !important;
}

.dark-mode .home-menu-link {
    background: #0c2340 !important;
    border-left-color: #3b82f6 !important;
    color: #93c5fd !important;
}

.dark-mode .home-menu-link:hover {
    background: #1e3a5f !important;
    color: #bfdbfe !important;
}

/* --- Overlay --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    /* transition: only opacity/visibility — not "all", since "all" would also
       try to transition the (heavy) backdrop-filter and forces continuous repaints
       of the page behind the menu. backdrop-filter removed: it triggered a full
       blur of the page content (including any SVG/mermaid diagrams) on every
       frame of the menu animation. */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- Layout Principal --- */
.main-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subject-content {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    animation: fadeInPage 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.subject-content.visible {
    display: flex;
}

/* --- Animaciones Globales --- */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseMain {
    0% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 228, 181, 0.6), var(--shadow);
    }

    100% {
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(255, 228, 181, 1), var(--shadow);
    }
}

@keyframes pulseMainEsp {
    0% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(224, 242, 254, 0.6), var(--shadow);
    }

    100% {
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(224, 242, 254, 1), var(--shadow);
    }
}

/* --- Títulos --- */
h1.title-main {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--menu-accent);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
    margin-top: 24px;
    margin-bottom: 36px;
    padding: 14px 30px;
    border-radius: var(--r-pill);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.4) inset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: fadeInDown 0.8s ease-out;
}
@supports not (backdrop-filter: blur(1px)) {
    h1.title-main { background: var(--surface-1); }
}

h1.title-main i {
    font-size: 0.82em;
    opacity: 0.95;
}

.dark-mode .title-main {
    color: #93c5fd !important;
    border-color: #334155;
}

/* --- Mindmap --- */
.mindmap-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
}

.main-topic {
    background-color: var(--main-node);
    color: #b45309;
    padding: 28px 44px;
    border-radius: var(--r-2xl);
    max-width: 620px;
    text-align: center;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.6) inset;
    border: 1px solid rgba(255,255,255,0.4);
    animation: pulseMain 2.5s infinite alternate;
    cursor: pointer;
    transition: transform var(--transition-quick), box-shadow var(--transition-smooth);
}

.espanol-topic {
    background-color: #e0f2fe;
    color: #0369a1;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.6) inset;
    animation: pulseMainEsp 2.5s infinite alternate;
}

.main-topic:hover {
    transform: scale(1.05);
    animation-play-state: paused;
}

.main-topic h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin: 0 0 10px 0;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.main-topic h2 .main-topic-title-text {
    text-align: center;
    white-space: nowrap;
    line-height: 1.1;
}

.main-topic h2 .main-topic-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.main-topic h2 .main-topic-title-icon i {
    margin: 0;
}

.main-topic p {
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
}

.dark-mode .main-topic h2,
.dark-mode .main-topic p {
    color: #fff;
}

.branches {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    flex-wrap: wrap;
}

.branch-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 320px;
}

.topic-node {
    width: 100%;
    box-sizing: border-box;
    padding: 22px 32px;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: transform var(--transition-quick), box-shadow var(--transition-quick);
    position: relative;
    overflow: hidden;
}

.topic-node::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg) translate(-100%, -100%);
    transition: all 0.5s;
    pointer-events: none;
}

.topic-node:hover::after {
    transform: rotate(30deg) translate(100%, 100%);
}

.topic-node:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.topic-node h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.dark-mode .topic-node h2 {
    color: #fff;
}

.topic-1 {
    background-color: var(--branch-1);
    color: #005f73;
}

.topic-2 {
    background-color: var(--branch-2);
    color: #2d6a4f;
}

.topic-3 {
    background-color: var(--branch-3);
    color: #944000;
}

.topic-4 {
    background-color: var(--branch-4);
    color: #4c1d95;
}

.topic-5 {
    background-color: var(--branch-5);
    color: #831843;
}

/* --- Sub Nodos --- */
.sub-nodes-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 95%;
    transform-origin: top;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sub-nodes-container.hidden {
    opacity: 0;
    transform: scaleY(0);
    height: 0;
    overflow: hidden;
    margin: 0;
    gap: 0;
}

.sub-node {
    background: var(--surface-1);
    padding: 20px 24px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    line-height: var(--lh-base);
    transition: transform var(--transition-quick), box-shadow var(--transition-quick);
    position: relative;
}

.sub-node:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    z-index: 5;
}

.dark-mode .sub-node {
    background: var(--surface-1);
    border-top-color: var(--border-color);
    border-right-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

.sub-node h3 {
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--header-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    letter-spacing: -0.01em;
    line-height: var(--lh-snug);
}

.dark-mode .sub-node h3 {
    color: var(--header-text);
}

.sub-node h3 i {
    color: #64748b;
    margin-right: 8px;
    font-size: 1.1rem;
}

.sub-node p {
    margin: 0 0 10px 0;
    font-weight: 400;
    color: #475569;
}

.dark-mode .sub-node p {
    color: var(--card-text);
}

.sub-node b,
.sub-node strong {
    color: #0f172a;
    font-weight: 900;
    background-color: rgba(255, 228, 181, 0.4);
    padding: 0 4px;
    border-radius: 4px;
}

.dark-mode .sub-node b,
.dark-mode .sub-node strong {
    color: #fef3c7;
    background-color: rgba(120, 53, 15, 0.4);
}

.topic-1-sub {
    border-left-color: var(--branch-1);
}

.topic-2-sub {
    border-left-color: var(--branch-2);
}

.topic-3-sub {
    border-left-color: var(--branch-3);
}

.topic-4-sub {
    border-left-color: var(--branch-4);
}

.topic-5-sub {
    border-left-color: var(--branch-5);
}

.badge {
    font-size: 0.75rem;
    background-color: #f1f5f9;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.example-box {
    background-color: #f8fafc;
    border-left: 3px solid #cbd5e1;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    color: #334155;
    margin-top: 10px;
}

.dark-mode .example-box {
    background-color: #334155;
    color: #e2e8f0;
    border-left-color: #475569;
}

.example-box ul {
    margin: 0;
    padding-left: 18px;
    font-style: italic;
    font-size: 0.9rem;
}

.example-box li {
    margin-bottom: 5px;
}

.example-box li:last-child {
    margin-bottom: 0;
}

.click-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dark-mode .click-hint {
    opacity: 1;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    padding: 4px 10px;
    width: fit-content;
    margin: 6px auto 0;
}

/* --- Botón "Marcar como Estudiado" --- */
.btn-mark-studied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    border: 2px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
    color: #64748b;
    font-family: 'Nunito', sans-serif;
    margin-top: 8px;
}

.btn-mark-studied:hover {
    border-color: #10b981;
    color: #065f46;
    background: #d1fae5;
}

.btn-mark-studied.done {
    border-color: #10b981;
    color: #065f46;
    background: #d1fae5;
}

.btn-mark-studied.done::before {
    content: "✓ ";
}

.dark-mode .btn-mark-studied {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ecfdf5;
    box-shadow: 0 10px 20px rgba(5, 150, 105, 0.35);
}

.dark-mode .btn-mark-studied.done {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #34d399;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4);
}

/* Animaciones del mindmap */
.visible .branch-col:nth-child(1) {
    animation: slideUp 0.6s ease-out backwards 0.1s;
}

.visible .branch-col:nth-child(2) {
    animation: slideUp 0.6s ease-out backwards 0.3s;
}

.visible .branch-col:nth-child(3) {
    animation: slideUp 0.6s ease-out backwards 0.5s;
}

.visible .sub-node {
    animation: fadeInRight 0.5s forwards;
}

/* --- Video Section --- */
.video-section {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-top: 6px solid #ef4444;
    padding: 30px 40px;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    position: relative;
}

.dark-mode .video-section {
    background: #1e293b;
    color: var(--text-color);
}

.video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 25px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.video-header:hover {
    opacity: 0.8;
}

.video-header h2 {
    margin: 0;
    color: #b91c1c;
    font-size: 1.8rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-header h2 i {
    color: #ef4444;
}

.dark-mode .video-header h2 {
    color: var(--header-text);
}

.video-container-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.video-container-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Sección Preguntas --- */
.unam-questions-section {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    background: var(--surface-1);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    border-top: 4px solid #2563eb;
    padding: 30px 36px;
    box-sizing: border-box;
    font-family: var(--font-body);
    position: relative;
}

.dark-mode .unam-questions-section {
    background: var(--surface-1);
    color: var(--text-color);
}

.unam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 24px;
    cursor: pointer;
}

.unam-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.unam-toggle-btn {
    background: var(--menu-hover);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background var(--transition-quick), color var(--transition-quick), transform var(--transition-quick);
    font-family: var(--font-body);
}

.unam-toggle-btn:hover {
    background: var(--surface-2);
    color: var(--text-color);
    transform: translateY(-1px);
}

.dark-mode .unam-toggle-btn {
    background: var(--menu-hover);
    color: var(--text-muted);
    border-color: var(--border-color);
}

.dark-mode .unam-toggle-btn:hover {
    background: #475569;
    color: #f1f5f9;
}

.unam-questions-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.unam-question-card {
    background: var(--surface-2);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
    transition: opacity var(--transition-quick), border-color var(--transition-quick), box-shadow var(--transition-quick), transform var(--transition-quick);
}
.unam-question-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: rgba(99, 102, 241, 0.25);
}

.dark-mode .unam-question-card {
    background: #0f172a;
    border-color: var(--border-color);
}
.dark-mode .unam-question-card:hover {
    border-color: rgba(129, 140, 248, 0.4);
}

/* Estados de las preguntas en la vista "Todas UNAM" */
.unam-question-card.unam-card-available {
    border-left: 4px solid #10b981;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08);
}
.dark-mode .unam-question-card.unam-card-available {
    border-left-color: #34d399;
    box-shadow: 0 2px 10px rgba(52, 211, 153, 0.15);
}
/* Completada: clase ya estudiada por el usuario. Verde más saturado + trofeo. */
.unam-question-card.unam-card-completed {
    border-left: 4px solid #059669;
    background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 30%);
    box-shadow: 0 2px 14px rgba(5, 150, 105, 0.15);
}
.dark-mode .unam-question-card.unam-card-completed {
    background: linear-gradient(135deg, #022c22 0%, #0f172a 35%);
    border-left-color: #10b981;
    box-shadow: 0 2px 14px rgba(16, 185, 129, 0.22);
}
.unam-question-card.unam-card-locked {
    opacity: 0.55;
    border-left: 4px solid #cbd5e1;
    background: #f1f5f9;
}
.unam-question-card.unam-card-locked:hover {
    opacity: 0.85;
}
.dark-mode .unam-question-card.unam-card-locked {
    background: #1e293b;
    border-left-color: #475569;
}

/* Opciones no interactivas (preguntas locked sin respuesta conocida) */
.unam-option.unam-option-static {
    cursor: default;
    background: transparent;
    border: 1px dashed #cbd5e1;
}
.unam-option.unam-option-static:hover {
    transform: none;
    box-shadow: none;
    border-color: #cbd5e1;
}
.dark-mode .unam-option.unam-option-static {
    border-color: #475569;
}

/* Badges de estado */
.badge-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.badge-state i { font-size: 0.72rem; }
.badge-state-available {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.dark-mode .badge-state-available {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #065f46;
}
.badge-state-completed {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #ffffff;
    border: 1px solid #059669;
    box-shadow: 0 1px 4px rgba(5, 150, 105, 0.3);
}
.dark-mode .badge-state-completed {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #022c22;
    border-color: #10b981;
}
.badge-state-locked {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}
.dark-mode .badge-state-locked {
    background: #1e293b;
    color: #94a3b8;
    border-color: #475569;
}

/* =====================================================
   Spoiler de pasaje de lectura (Q74–Q78: texto sobre el plástico).
   Utiliza <details>/<summary> nativo — colapsado por defecto.
   ===================================================== */
.unam-passage-spoiler {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    margin: 0 0 16px;
    padding: 0 14px;
    transition: background 0.2s;
}
.dark-mode .unam-passage-spoiler {
    background: #422006;
    border-color: #854d0e;
    border-left-color: #fbbf24;
}
.unam-passage-spoiler > summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    color: #92400e;
    padding: 12px 0;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dark-mode .unam-passage-spoiler > summary {
    color: #fde68a;
}
.unam-passage-spoiler > summary::-webkit-details-marker {
    display: none;
}
.unam-passage-spoiler > summary::before {
    content: "\25B6"; /* ▶ */
    display: inline-block;
    font-size: 0.75rem;
    color: #d97706;
    transition: transform 0.2s;
}
.unam-passage-spoiler[open] > summary::before {
    transform: rotate(90deg);
}
.unam-passage-spoiler .unam-passage-hint {
    font-weight: 500;
    font-size: 0.78rem;
    opacity: 0.75;
    margin-left: auto;
}
.unam-passage-body {
    padding: 4px 0 16px;
    border-top: 1px dashed rgba(217, 119, 6, 0.35);
    margin-top: 2px;
}
.unam-passage-body h3 {
    font-size: 1.05rem;
    color: #78350f;
    text-align: center;
    margin: 12px 0 10px;
}
.dark-mode .unam-passage-body h3 {
    color: #fde68a;
}
.unam-passage-body p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #451a03;
    margin: 10px 0;
}
.dark-mode .unam-passage-body p {
    color: #fde68a;
}
.unam-passage-body em {
    color: #78350f;
    font-style: italic;
}
.dark-mode .unam-passage-body em {
    color: #fcd34d;
}

/* =====================================================
   Estilos de los charts D3 embebidos en las preguntas UNAM
   (scopeados bajo .unam-question-card para no afectar el resto del app).
   ===================================================== */
/* Los scripts D3 generan SVGs con width fijo (ej. 400px) que provocan
   scroll horizontal en mobile. Forzar shrink-to-fit. */
.unam-question-card svg {
    max-width: 100%;
    height: auto;
}
.unam-question-card .collision-figure,
.unam-question-card .chem-option-figure,
.unam-question-card .molecule-figure {
    max-width: 100%;
    overflow: hidden;
}
/* Algunos badges (tema con texto largo "Magnitudes, MRU y Velocidad Relativa")
   pueden superar el ancho disponible cuando son flex items. Permitir que se
   contraigan y rompan línea internamente. */
.unam-question-card-badges > * {
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Asegurar que el contenido de la pregunta también respete el ancho del card. */
.unam-question-card,
.unam-question-text,
.unam-options {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
.unam-question-card #chart-1,
.unam-question-card #chart-2 {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}
.unam-question-card #chart-5,
.unam-question-card #chart-8,
.unam-question-card #chart-30 {
    margin: 18px 0 14px;
    display: flex;
    justify-content: center;
}
.unam-question-card .grid line {
    stroke: #ccc;
    stroke-dasharray: 5, 5;
    stroke-width: 1;
}
.unam-question-card .grid path {
    stroke-width: 0;
}
.unam-question-card .line-plot {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
}
.unam-question-card .axis-label {
    font-weight: bold;
    font-size: 14px;
    fill: currentColor;
}
.unam-question-card .vector-label {
    font-size: 13px;
    font-weight: bold;
}

/* Q2: tabla de razones trigonométricas dentro del question-card */
.unam-question-card table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px;
    text-align: center;
    font-size: 0.95em;
}
.unam-question-card table,
.unam-question-card th,
.unam-question-card td {
    border: 1px solid #888;
}
.unam-question-card th,
.unam-question-card td {
    padding: 6px 10px;
}
.unam-question-card th {
    background-color: #f2f2f2;
}
.dark-mode .unam-question-card th {
    background-color: #334155;
    color: #e2e8f0;
}
.dark-mode .unam-question-card table,
.dark-mode .unam-question-card th,
.dark-mode .unam-question-card td {
    border-color: #475569;
}

/* Q5: animación de colisión de bolas */
.unam-question-card .collision-figure {
    border: 2px solid #333;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    width: 100%;
    max-width: 440px;
}
.dark-mode .unam-question-card .collision-figure {
    border-color: #64748b;
}
.unam-question-card .collision-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.unam-question-card .collision-controls button {
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #333;
    background-color: #fff;
    color: #111827;
    transition: background-color 0.2s;
}
.unam-question-card .collision-controls button:hover {
    background-color: #eee;
}
.unam-question-card .collision-controls button:active {
    background-color: #ddd;
}
.dark-mode .unam-question-card .collision-controls button {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #475569;
}
.dark-mode .unam-question-card .collision-controls button:hover {
    background-color: #334155;
}
.unam-question-card .collision-figure svg text {
    cursor: default;
}

/* Q25: figuras químicas en opciones */
.unam-question-card .chem-options-list {
    list-style-type: none;
    padding: 0;
    margin: 18px 0 0;
}
.unam-question-card .chem-options-list li {
    margin-bottom: 14px;
}
.unam-question-card .chem-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.unam-question-card .chem-option-prefix {
    font-weight: bold;
    min-width: 24px;
}
.unam-question-card .chem-option-figure {
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
.dark-mode .unam-question-card .chem-option-figure {
    background: #ffffff; /* mantener blanco para que contraste con las fórmulas */
    border-color: #64748b;
}
.unam-question-card .chem-option-figure svg text {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

/* Q30: figura de molécula */
.unam-question-card .molecule-figure {
    padding: 16px;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.dark-mode .unam-question-card .molecule-figure {
    background: #ffffff;
    border-color: #64748b;
}
.unam-question-card .molecule-figure svg text {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 22px;
}

/* ─── Modo examen UNAM ──────────────────────────────────────────────────── */
.unam-exam-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
}
.unam-exam-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: #ea580c;
    color: white;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.unam-exam-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.35);
}
.unam-exam-toggle.active {
    background: #475569;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25);
}
.unam-exam-help {
    font-size: 0.85rem;
    color: #475569;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 8px 12px;
    border-radius: 8px;
    flex: 1;
    min-width: 220px;
}
.dark-mode .unam-exam-help {
    background: #422006;
    color: #fcd34d;
    border-color: #78350f;
}

/* Barra inferior con progreso + botón calificar */
.unam-exam-submit-bar {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 2px solid #e2e8f0;
    margin: 30px -20px 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 50;
    border-radius: 12px 12px 0 0;
}
.dark-mode .unam-exam-submit-bar {
    background: #1e293b;
    border-color: #334155;
}
.unam-exam-progress {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.unam-exam-progress-bar {
    background: #e2e8f0;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}
.dark-mode .unam-exam-progress-bar {
    background: #334155;
}
.unam-exam-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #ea580c 100%);
    transition: width 0.3s ease;
}
.unam-exam-progress-text {
    font-size: 0.85rem;
    color: #475569;
    font-weight: 600;
}
.dark-mode .unam-exam-progress-text {
    color: #cbd5e1;
}
.unam-exam-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    background: #ea580c;
    color: white;
    border: none;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
    transition: transform 0.15s ease;
}
.unam-exam-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}
.unam-exam-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.unam-exam-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    font-weight: 700;
    cursor: pointer;
}
.unam-exam-reset-btn:hover {
    background: #e2e8f0;
}
.dark-mode .unam-exam-reset-btn {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
}

/* Card en modo examen — más limpia, sin badges de estado */
.unam-card-exam {
    border-left: 4px solid #ea580c !important;
    background: white;
}
.dark-mode .unam-card-exam {
    background: #1e293b;
}

/* Panel de resultados del examen */
.unam-exam-results {
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border: 2px solid #fb923c;
    border-radius: 14px;
    padding: 24px;
    margin: 20px 0;
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.15);
}
.dark-mode .unam-exam-results {
    background: linear-gradient(135deg, #422006 0%, #451a03 100%);
    border-color: #c2410c;
}
.unam-exam-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(234, 88, 12, 0.2);
}
.unam-exam-results-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #9a3412;
}
.dark-mode .unam-exam-results-header h2 {
    color: #fb923c;
}
.unam-exam-results-pass, .unam-exam-results-fail {
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
}
.unam-exam-results-pass {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.unam-exam-results-fail {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.unam-exam-results-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.unam-exam-results-score {
    background: white;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dark-mode .unam-exam-results-score {
    background: #1e293b;
}
.unam-exam-results-score-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 6px;
}
.unam-exam-results-score-value {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}
.unam-exam-results-score-max {
    font-size: 1rem;
    color: #94a3b8;
    font-weight: 700;
}
.unam-exam-results-score-detail {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 6px;
}
.unam-exam-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.unam-exam-results-materia {
    background: white;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dark-mode .unam-exam-results-materia {
    background: #1e293b;
}
.unam-exam-results-materia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}
.dark-mode .unam-exam-results-materia-header {
    color: #cbd5e1;
}
.unam-exam-results-materia-bar {
    background: #e2e8f0;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}
.dark-mode .unam-exam-results-materia-bar {
    background: #334155;
}
.unam-exam-results-materia-fill {
    height: 100%;
    transition: width 0.5s ease;
}
.unam-exam-results-materia-detail {
    font-size: 0.8rem;
    color: #64748b;
}
.dark-mode .unam-exam-results-materia-detail {
    color: #94a3b8;
}

/* Filtro Todas / Solo completadas */
/* ─── Filtro tipo segmented control ─────────────────────────────────────── */
.unam-filter-toggle {
    display: flex;
    gap: 3px;
    margin: 14px 0 12px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
}
.dark-mode .unam-filter-toggle {
    background: #1e293b;
}
.unam-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}
.unam-filter-btn i {
    font-size: 0.85rem;
    flex-shrink: 0;
}
.unam-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.unam-filter-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #334155;
}
.dark-mode .unam-filter-btn {
    color: #94a3b8;
}
.dark-mode .unam-filter-btn:hover {
    background: rgba(71, 85, 105, 0.4);
    color: #e2e8f0;
}
.unam-filter-btn.active {
    background: #ffffff;
    color: #ea580c;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.dark-mode .unam-filter-btn.active {
    background: #334155;
    color: #fb923c;
}
.unam-filter-btn .unam-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 99px;
    background: rgba(100, 116, 139, 0.18);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
.unam-filter-btn.active .unam-filter-count {
    background: rgba(234, 88, 12, 0.16);
    color: #ea580c;
}
.dark-mode .unam-filter-btn.active .unam-filter-count {
    background: rgba(251, 146, 60, 0.22);
    color: #fb923c;
}

/* En mobile: el toggle ocupa todo el ancho como un segmented control nativo,
   los 3 botones se reparten en columnas iguales, y se acorta el label
   ("Solo disponibles" → "Disponibles") para que entren cómodamente. */
@media (max-width: 540px) {
    .unam-filter-toggle {
        width: 100%;
        gap: 2px;
        padding: 3px;
    }
    .unam-filter-btn {
        flex: 1 1 0;
        padding: 9px 6px;
        font-size: 0.78rem;
        min-height: 38px;
    }
    .unam-filter-btn .unam-filter-prefix {
        display: none;
    }
    .unam-filter-btn .unam-filter-label {
        text-transform: capitalize;
    }
}

/* En pantallas muy estrechas, el ícono ya carga el significado;
   reducimos aún más la tipografía y el espacio. */
@media (max-width: 380px) {
    .unam-filter-btn {
        gap: 4px;
        padding: 9px 4px;
        font-size: 0.72rem;
    }
    .unam-filter-btn .unam-filter-count {
        min-width: 18px;
        height: 16px;
        padding: 0 5px;
        font-size: 0.62rem;
    }
}

.unam-question-text {
    font-size: 1.05rem;
    color: var(--header-text);
    margin: 0 0 18px 0;
    font-weight: 800;
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
}

.dark-mode .unam-question-text {
    color: var(--header-text);
}

/* Lista vertical para preguntas con marcadores I/II/III, 1/2/3, a)/b), etc. */
.unam-question-text .q-list {
    display: block;
    margin: 10px 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}
.unam-question-text .q-list .q-item {
    display: block;
    padding: 4px 0 4px 22px;
    text-indent: -22px;
}

/* Tabla (grid) para preguntas de relación de dos columnas (romanos + letras). */
.unam-question-text .q-relation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 10px 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.unam-question-text .q-rel-cell {
    display: block;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.45;
}
.unam-question-text .q-rel-cell:nth-child(odd) {
    background: rgba(37, 99, 235, 0.06);
    border-right: 1px solid var(--border-color);
}
.unam-question-text .q-rel-cell:nth-child(even) {
    background: rgba(217, 119, 6, 0.05);
}
/* Última fila: quitar borde inferior de las dos últimas celdas */
.unam-question-text .q-rel-cell:nth-last-child(-n+2) {
    border-bottom: none;
}
.dark-mode .unam-question-text .q-relation {
    border-color: rgba(255, 255, 255, 0.12);
}
.dark-mode .unam-question-text .q-rel-cell {
    border-color: rgba(255, 255, 255, 0.12);
}
.dark-mode .unam-question-text .q-rel-cell:nth-child(odd) {
    background: rgba(96, 165, 250, 0.10);
}
.dark-mode .unam-question-text .q-rel-cell:nth-child(even) {
    background: rgba(251, 191, 36, 0.08);
}

.unam-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unam-option {
    background: var(--surface-1);
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 13px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
    transition: border-color var(--transition-quick), background var(--transition-quick), transform var(--transition-quick), box-shadow var(--transition-quick);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-xs);
}

.unam-option:hover {
    border-color: #6366f1;
    background: var(--surface-2);
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

.unam-option.selected {
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), var(--shadow-sm);
}

.unam-option.correct {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), var(--shadow-sm);
}

.unam-option.incorrect {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16), var(--shadow-sm);
}

.dark-mode .unam-option {
    background: #0f172a;
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .unam-option:hover {
    border-color: #818cf8;
    background: #1e293b;
}

.dark-mode .unam-option.selected {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
    border-color: #818cf8;
    color: #c7d2fe;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.22), var(--shadow-sm);
}

.dark-mode .unam-option.correct {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
    border-color: #10b981;
    color: #a7f3d0;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), var(--shadow-sm);
}

.dark-mode .unam-option.incorrect {
    background: linear-gradient(135deg, #2d1010 0%, #450a0a 100%);
    border-color: #ef4444;
    color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25), var(--shadow-sm);
}

.unam-feedback {
    margin-top: 15px;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.95rem;
    display: none;
    animation: fadeInPage 0.3s ease forwards;
    flex-direction: column;
    gap: 5px;
}

.unam-feedback.correct-feedback {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #065f46;
    border-left: 3px solid #10b981;
    border-radius: var(--r-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-xs);
    line-height: var(--lh-snug);
}

.unam-feedback.incorrect-feedback {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
    border-left: 3px solid #ef4444;
    border-radius: var(--r-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-xs);
    line-height: var(--lh-snug);
}

.dark-mode .unam-feedback.correct-feedback {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
    color: #a7f3d0;
    border-left-color: #10b981;
}

.dark-mode .unam-feedback.incorrect-feedback {
    background: linear-gradient(135deg, #2d1010 0%, #450a0a 100%);
    color: #fca5a5;
    border-left-color: #ef4444;
}

.unam-eval-btn {
    margin-top: 15px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--transition-quick), box-shadow var(--transition-quick), background var(--transition-quick);
    align-self: flex-start;
    font-family: var(--font-body);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.unam-eval-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.unam-eval-btn:active { transform: translateY(0); }

.unam-eval-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.dark-mode .unam-eval-btn:disabled {
    background: #334155;
    color: #64748b;
}

.exam-tip {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    padding: 14px 16px;
    border-radius: var(--r-md);
    margin-top: 14px;
    color: #713f12;
    font-size: 0.9rem;
    line-height: var(--lh-snug);
    border-left: 3px solid #ca8a04;
    box-shadow: var(--shadow-xs);
}
.exam-tip i:first-child {
    color: #ca8a04;
    margin-right: 4px;
}

.dark-mode .exam-tip {
    background: linear-gradient(135deg, rgba(133, 77, 14, 0.35) 0%, rgba(180, 83, 9, 0.45) 100%);
    color: #fde68a;
    border-left-color: #fbbf24;
}
.dark-mode .exam-tip i:first-child { color: #fbbf24; }

/* --- Regla mnemotécnica ---
   Caja aparte del exam-tip a propósito. Es el único lugar del contenido donde se
   admite lenguaje coloquial o metáforas ("verbos vivos y muertos"), porque su
   función es ayudar a memorizar, no definir. Al estar visualmente separada, el
   alumno distingue la ayuda de memoria de la explicación formal, y la definición
   del concepto nunca depende de ella. Violeta para no confundirla con el amarillo
   del tip de examen. */
.mnemo {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    padding: 14px 16px;
    border-radius: var(--r-md);
    margin-top: 14px;
    color: #4c1d95;
    font-size: 0.9rem;
    line-height: var(--lh-snug);
    border-left: 3px solid #7c3aed;
    box-shadow: var(--shadow-xs);
}
.mnemo i:first-child {
    color: #7c3aed;
    margin-right: 4px;
}
.mnemo em { font-style: italic; font-weight: 600; }

.dark-mode .mnemo {
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.38) 0%, rgba(109, 40, 217, 0.45) 100%);
    color: #ddd6fe;
    border-left-color: #a78bfa;
}
.dark-mode .mnemo i:first-child { color: #a78bfa; }

/* --- Tablas dentro del contenido de subnodes --- */
.sub-node table {
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.92rem;
    width: auto;
    max-width: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: block;
    overflow-x: auto;
}

.sub-node thead {
    background: #f1f5f9;
}

.sub-node th {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    text-align: left;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.sub-node td {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    color: #475569;
    vertical-align: top;
}

.sub-node tbody tr:nth-child(even) {
    background: #f8fafc;
}

.dark-mode .sub-node table {
    background: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark-mode .sub-node thead {
    background: #334155;
}

.dark-mode .sub-node th {
    border-color: #475569;
    color: #f1f5f9;
}

.dark-mode .sub-node td {
    border-color: #475569;
    color: #cbd5e1;
}

.dark-mode .sub-node tbody tr:nth-child(even) {
    background: #273548;
}

/* --- Dashboard Global UNAM --- */
.unam-dashboard-container {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 2px solid #f1f5f9;
}

.dark-mode .unam-dashboard-container {
    background: #1e293b;
    border-color: #334155;
}

.unam-dashboard-header {
    margin-top: 0;
    color: #334155;
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.dark-mode .unam-dashboard-header {
    color: #e2e8f0;
}

.unam-dashboard-badge {
    font-size: 1.1rem;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.unam-dashboard-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed #cbd5e1;
}

.unam-dashboard-grid.open {
    display: grid;
}

.dark-mode .unam-dashboard-grid {
    border-top-color: #334155;
}

.unam-dashboard-item {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    transition: transform 0.2s;
    cursor: pointer;
}

.dark-mode .unam-dashboard-item {
    background: #0f172a;
    border-color: #334155;
}

.unam-dashboard-item:hover {
    transform: translateY(-2px);
}

.unam-dashboard-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.unam-dashboard-item-title {
    font-weight: 800;
    color: #475569;
}

.unam-dashboard-item-count {
    font-weight: 900;
}

.unam-dashboard-progress-bar-bg,
.unam-dashboard-item-progress-bg {
    background: #e2e8f0;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

.dark-mode .unam-dashboard-progress-bar-bg,
.dark-mode .unam-dashboard-item-progress-bg {
    background: #334155;
}

.unam-dashboard-progress-bar-bg {
    height: 12px;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.unam-dashboard-progress-bar-fill,
.unam-dashboard-item-progress-fill {
    height: 100%;
    transition: width 1s;
}

.unam-subject-header {
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    scroll-margin-top: 20px;
}

.dark-mode .unam-subject-header {
    border-bottom-color: #334155;
}

.unam-subject-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unam-subject-header-indicator {
    background: #3b82f6;
    width: 8px;
    height: 30px;
    border-radius: 4px;
}

.unam-subject-header-title {
    margin: 0;
    color: #1e293b;
    font-size: 1.6rem;
    font-weight: 900;
}

.dark-mode .unam-subject-header-title {
    color: #e2e8f0;
}

.unam-question-card-inner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.unam-question-card-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.unam-dashboard-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.unam-dashboard-item-title {
    font-weight: 800;
    color: #475569;
}

.unam-dashboard-item-count {
    font-weight: 900;
}

/* --- Badges --- */
.badge-dark {
    background: #1e293b;
    color: #fbbf24;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid #334155;
}

.badge-orange {
    background: #fff7ed;
    color: #c2410c;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    border: 1px solid #ffedd5;
}

.badge-blue {
    background: #f0f9ff;
    color: #0369a1;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    border: 1px solid #e0f2fe;
}

.dark-mode .badge-orange {
    background: #431407;
    color: #fb923c;
    border-color: #7c2d12;
}

.dark-mode .badge-blue {
    background: #0c2a4a;
    color: #7dd3fc;
    border-color: #0369a1;
}

/* --- Botones de Acción --- */
.btn-subir {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    gap: 6px;
    align-items: center;
    transition: all 0.2s;
    font-family: 'Nunito', sans-serif;
}

.btn-subir:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.dark-mode .btn-subir {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
}

.dark-mode .btn-subir:hover {
    background: #475569;
    color: #f8fafc;
}

.btn-repasar-clase {
    font-size: 0.85rem;
    color: #3b82f6;
    font-weight: bold;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    display: flex;
    gap: 5px;
    align-items: center;
    transition: all 0.2s;
}

.btn-repasar-clase:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.dark-mode .btn-repasar-clase {
    background: #1e3a8a;
    color: #bfdbfe;
    border-color: #1d4ed8;
}

.dark-mode .btn-repasar-clase:hover {
    background: #1d4ed8;
}

/* --- Panel Resumen Simulacro --- */
.sim-results-panel {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    color: #fff;
    border-radius: 20px;
    padding: 35px 40px;
    text-align: center;
    margin: 30px auto;
    max-width: 700px;
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.35);
    animation: fadeInPage 0.5s ease forwards;
}

.sim-results-panel h2 {
    font-size: 2rem;
    margin: 0 0 10px 0;
}

.sim-score-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 4px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    font-size: 2.8rem;
    font-weight: 900;
}

.sim-score-circle span {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.8;
}

.sim-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.sim-stat-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.2s;
}

.sim-stat-box:hover {
    transform: translateY(-3px);
}

.sim-stat-box .stat-num {
    font-size: 1.8rem;
    font-weight: 900;
}

.sim-stat-box .stat-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

.btn-new-sim {
    background: #fff;
    color: #1d4ed8;
    border: none;
    padding: 12px 26px;
    border-radius: var(--r-pill);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    margin-top: 10px;
    transition: transform var(--transition-quick), box-shadow var(--transition-quick), background var(--transition-quick);
    font-family: var(--font-body);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-new-sim:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.btn-new-sim:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* --- Historial de Simulacros --- */
.sim-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.sim-history-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
}

.dark-mode .sim-history-item {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.sim-history-score {
    font-size: 1.3rem;
    font-weight: 900;
    color: #2563eb;
    min-width: 50px;
}

.dark-mode .sim-history-score {
    color: #60a5fa;
}

.sim-history-date {
    color: #64748b;
    margin-left: auto;
    font-size: 0.8rem;
}

/* --- Páginas "Próximamente" --- */
.coming-soon-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 20px;
}

.coming-soon-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: floatDeco 4s infinite alternate ease-in-out;
}

.coming-soon-page h2 {
    font-size: 2.5rem;
    color: var(--menu-accent);
    margin: 0 0 12px 0;
}

.coming-soon-page p {
    color: var(--card-text);
    font-size: 1.1rem;
    max-width: 380px;
}

.coming-soon-badge {
    background: #fef3c7;
    color: #d97706;
    padding: 6px 18px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: inline-block;
}

.dark-mode .coming-soon-badge {
    background: #44403c;
    color: #fbbf24;
}

/* --- Página Inicio --- */
.home-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 85vh;
    padding: 40px 20px;
    width: 100%;
    overflow: hidden;
}

.home-bg-blobs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.blob-1 {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 55vw;
    height: 55vw;
    max-width: 700px;
    max-height: 700px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.22) 0%, rgba(124, 58, 237, 0) 70%);
    border-radius: 50%;
    animation: floatBlob 10s infinite alternate ease-in-out;
}

.blob-2 {
    position: absolute;
    bottom: -5%;
    right: -5%;
    width: 65vw;
    height: 65vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0) 70%);
    border-radius: 50%;
    animation: floatBlob 12s infinite alternate-reverse ease-in-out;
}

@keyframes floatBlob {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-50px) scale(1.1);
    }
}

.home-quote {
    position: relative;
    z-index: 1;
    font-size: 2.8rem;
    font-weight: 900;
    color: #1e293b;
    max-width: 850px;
    margin-bottom: 70px;
    font-style: italic;
    line-height: 1.4;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
    animation: fadeInDown 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dark-mode .home-quote {
    color: #e2e8f0;
}

.home-quote .highlight {
    color: #0369a1;
    position: relative;
    display: inline-block;
}

.home-quote .highlight::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: rgba(245, 158, 11, 0.5);
    z-index: -1;
    transform: rotate(-2deg);
    border-radius: 5px;
}

.home-card {
    position: relative;
    z-index: 1;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
    padding: 44px 52px;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--glass-border) inset;
    border: 1px solid var(--glass-border);
    border-top: 4px solid #10b981;
    max-width: 600px;
    animation: slideUp 1s 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) both;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.home-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl), 0 24px 60px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.7) inset;
}

.dark-mode .home-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: var(--shadow-xl);
}
@supports not (backdrop-filter: blur(1px)) {
    .home-card { background: var(--surface-1); }
}

.dark-mode .home-card p {
    color: #cbd5e1 !important;
}

.home-card i.heart-icon {
    color: #ef4444;
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.4));
    animation: pulseHeart 1.5s infinite ease-in-out;
}

@keyframes pulseHeart {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.2);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.25);
    }

    60% {
        transform: scale(1);
    }
}

.home-deco-icon {
    position: absolute;
    z-index: 0;
    opacity: 0.5;
    animation: floatDeco 8s infinite alternate ease-in-out;
}

.deco-1 {
    top: 15%;
    left: 10%;
    color: #93c5fd;
    font-size: 4rem;
    animation-delay: 0s;
}

.deco-2 {
    bottom: 25%;
    right: 12%;
    color: #fcd34d;
    font-size: 5rem;
    animation-delay: -2s;
}

.deco-3 {
    top: 30%;
    right: 15%;
    color: #a7f3d0;
    font-size: 3.5rem;
    animation-delay: -4s;
}

.deco-4 {
    bottom: 20%;
    left: 15%;
    color: #c4b5fd;
    font-size: 4rem;
    animation-delay: -1s;
}

@keyframes floatDeco {
    0% {
        transform: translateY(0) rotate(-15deg);
    }

    100% {
        transform: translateY(-30px) rotate(15deg);
    }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .branches {
        flex-direction: column;
        align-items: center;
    }

    .branch-col {
        width: 100%;
        max-width: 500px;
        margin-bottom: 20px;
    }

    h1.title-main {
        font-size: 2rem;
        margin-top: 60px;
        padding: 12px 20px;
        border-radius: 24px;
    }

    .sim-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .home-quote {
        font-size: 2rem;
    }

    .home-card {
        padding: 30px;
    }

    .home-deco-icon {
        font-size: 2.5rem !important;
    }

    .sim-results-panel {
        padding: 25px 20px;
    }

    .video-section,
    .unam-questions-section {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .sim-results-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   DARK MODE: Nodo principal Español
   ===================================================== */
.dark-mode .espanol-topic {
    background-color: #082f49;
    color: #7dd3fc;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.25), var(--shadow);
}

.dark-mode .espanol-topic h2,
.dark-mode .espanol-topic p {
    color: #bae6fd;
}

.dark-mode .main-topic {
    border-color: rgba(255, 255, 255, 0.08);
}

/* =====================================================
   DARK MODE: Active items del menú
   ===================================================== */
.dark-mode .subject-item.active {
    background-color: #052e16;
    color: #4ade80;
    border-left-color: #22c55e;
}

.dark-mode .subject-item.active-espanol {
    background-color: #0c1d4e;
    color: #93c5fd;
    border-left-color: #3b82f6;
}

/* =====================================================
   SCROLLBAR personalizado (menú y body)
   ===================================================== */
.side-menu {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.side-menu::-webkit-scrollbar {
    width: 5px;
}

.side-menu::-webkit-scrollbar-track {
    background: transparent;
}

.side-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.dark-mode .side-menu {
    scrollbar-color: #475569 transparent;
}

.dark-mode .side-menu::-webkit-scrollbar-thumb {
    background: #475569;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* =====================================================
   SIMULACRO: Tarjetas de selección de materias
   ===================================================== */
#subject-checkboxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.sim-filter-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.sim-filter-actions button {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sim-filter-actions button:hover {
    background: #e2e8f0;
    color: #1e293b;
    transform: translateY(-1px);
}

.dark-mode .sim-filter-actions button {
    background: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

.dark-mode .sim-filter-actions button:hover {
    background: #475569;
    color: #f8fafc;
}

.sim-materia-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: center;
    user-select: none;
    width: 135px;
    min-height: 120px;
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: visible;
}

.sim-materia-card:hover {
    border-color: #94a3b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sim-materia-card.unchecked {
    opacity: 0.45;
    border-color: #e2e8f0;
    background: #f1f5f9;
}

.sim-materia-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: transform 0.2s;
}

.sim-materia-card:hover .sim-materia-icon {
    transform: scale(1.1);
}

.sim-materia-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: #334155;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    margin-bottom: 2px;
}

.sim-materia-check {
    position: absolute;
    top: 6px;
    right: 8px;
    color: #10b981;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.sim-materia-card.unchecked .sim-materia-check {
    opacity: 0;
}

/* Dark mode */
.dark-mode .sim-materia-card {
    background: #1e293b;
    border-color: #334155;
}

.dark-mode .sim-materia-card:hover {
    border-color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .sim-materia-card.unchecked {
    background: #0f172a;
    border-color: #1e293b;
}

.dark-mode .sim-materia-name {
    color: #e2e8f0;
}

/* =====================================================
   EXTRAS: x-mermaid, x-map, x-smiles
   ===================================================== */
x-mermaid, x-map, x-smiles {
    display: block;
    margin: 18px 0;
}
.x-mermaid-wrap {
    position: relative;
    background: var(--surface-color, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    overflow-x: auto;
}
.dark-mode .x-mermaid-wrap { background: #1e293b; border-color: #334155; }
.x-mermaid-svg-host {
    min-width: 600px;
    display: block;
}
.x-mermaid-wrap svg {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 600px;
    margin: 0 auto;
    display: block;
}
@media (max-width: 700px) {
    .x-mermaid-svg-host, .x-mermaid-wrap svg { min-width: 700px; }
}

/* <x-tip> — tooltips contextuales (Tippy.js) */
.x-tip-anchor {
    border-bottom: 1px dashed #6366f1;
    cursor: help;
    color: inherit;
}
.x-tip-anchor:hover { background: rgba(99, 102, 241, 0.1); }
.dark-mode .x-tip-anchor { border-bottom-color: #818cf8; }
.dark-mode .x-tip-anchor:hover { background: rgba(129, 140, 248, 0.18); }

/* <x-tone> — botón para reproducir tonos generados con Web Audio API */
x-tone {
    display: inline-block;
    margin: 4px 6px;
}
.x-tone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 2px solid #6d28d9;
    background: #ede9fe;
    color: #4c1d95;
    border-radius: 99px;
    font-weight: 800;
    font-size: .9rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.x-tone-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(109, 40, 217, 0.25);
}
.x-tone-btn.x-tone-playing {
    background: #6d28d9;
    color: #fff;
    animation: xTonePulse 0.6s ease infinite alternate;
}
@keyframes xTonePulse {
    from { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.45); }
    to { box-shadow: 0 0 0 8px rgba(109, 40, 217, 0); }
}
.dark-mode .x-tone-btn { background: #312e81; color: #c7d2fe; border-color: #818cf8; }
.dark-mode .x-tone-btn.x-tone-playing { background: #6366f1; color: #fff; }

/* ─── Búsqueda global (Fuse.js) ─── */
.menu-search-go {
    border: none;
    background: #6366f1;
    color: #fff;
    padding: 0 14px;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: .95rem;
    transition: background .15s ease;
}
.menu-search-go:hover { background: #4f46e5; }
.menu-search-go i { display: block; }

.search-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 20px;
}
.search-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--card-text);
}
.search-subtle { opacity: .65; font-size: .9rem; margin: 0 0 16px; }
.search-inputbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg, #fff);
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 18px;
}
.search-inputbar i { color: #6366f1; font-size: 1.1rem; }
.search-inputbar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--card-text);
}
.search-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--card-text);
    opacity: .6;
    font-size: .95rem;
}
.search-empty i { display: block; font-size: 1.6rem; margin-bottom: 10px; opacity: .5; }
.search-section { margin-bottom: 22px; }
.search-section h3 {
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6366f1;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-result {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--card-bg, #fff);
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
.search-result:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
}
.search-result-static { cursor: default; }
.search-result-static:hover { transform: none; box-shadow: none; }
.search-result-icon { font-size: 1.2rem; flex-shrink: 0; padding-top: 2px; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-title { font-weight: 700; font-size: .98rem; color: var(--card-text); margin-bottom: 4px; }
.search-result-snippet {
    font-size: .85rem;
    opacity: .75;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--card-text);
}
.search-result mark {
    background: #fef08a;
    color: #713f12;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}
.dark-mode .search-result mark { background: #ca8a04; color: #fff; }
.search-result-tag {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 6px;
    opacity: .55;
    font-weight: 700;
}

/* ─── Bookmark button en subnodos ─── */
.subnode-bookmark-btn {
    margin-left: 8px;
    color: #cbd5e1;
    cursor: pointer;
    font-size: .9em;
    transition: transform .15s ease, color .2s ease;
    vertical-align: middle;
}
.subnode-bookmark-btn:hover {
    color: #ca8a04;
    transform: scale(1.2);
}
.subnode-bookmark-btn.bookmarked {
    color: #ca8a04;
}
.subnode-bookmark-btn.bookmarked:hover {
    color: #a16207;
    transform: scale(1.2) rotate(-8deg);
}
.dark-mode .subnode-bookmark-btn { color: #475569; }
.dark-mode .subnode-bookmark-btn.bookmarked { color: #fbbf24; }
.dark-mode .subnode-bookmark-btn:hover { color: #fbbf24; }

/* ─── Página "Mis Marcados" ─── */
.bookmarks-page { color: var(--card-text); }
.bookmarks-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #ca8a04;
}
.bookmarks-subtle {
    opacity: .65;
    font-size: .9rem;
    margin: 0 0 18px;
}
.bookmarks-section { margin-bottom: 22px; }
.bookmarks-section h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bookmarks-count {
    background: rgba(203, 161, 53, 0.18);
    color: #92400e;
    font-size: .8rem;
    padding: 2px 9px;
    border-radius: 99px;
    font-weight: 800;
}
.dark-mode .bookmarks-count { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }

.bookmark-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid #ca8a04;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.bookmark-meta {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    margin-bottom: 4px;
    font-weight: 700;
}
.bookmark-title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.bookmark-snippet {
    font-size: .85rem;
    opacity: .8;
    line-height: 1.45;
    margin-bottom: 10px;
}
.bookmark-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.bookmark-go, .bookmark-remove {
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease;
}
.bookmark-go {
    background: #ca8a04;
    color: #fff;
}
.bookmark-go:hover { background: #a16207; }
.bookmark-remove {
    background: transparent;
    color: #94a3b8;
    border: 1px solid var(--border-color, #e2e8f0);
}
.bookmark-remove:hover { color: #dc2626; border-color: #dc2626; }

/* ─── MODO FOCUS — sesiones largas de lectura ───
   Oculta menú lateral, botón hamburguesa y FABs (excepto el propio focus + scroll-top).
   Agranda el contenido al ancho útil completo. */
body.focus-mode #menuBtn { display: none !important; }
body.focus-mode .side-menu { display: none !important; }
body.focus-mode .overlay { display: none !important; }
body.focus-mode .main-content { padding-left: 0 !important; }
body.focus-mode #pwa-install-btn,
body.focus-mode #pomodoro-fab,
body.focus-mode #floating-next-class,
body.focus-mode .floating-reset-btn { display: none !important; }

/* Ocultar widgets/columnas decorativas que distraen */
body.focus-mode .home-streak,
body.focus-mode .home-pomodoro-card,
body.focus-mode .floating-streak { display: none !important; }

/* El botón de focus se queda visible (es la única salida) */
body.focus-mode #focus-mode-btn {
    background: #6d28d9;
    color: #fff;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.35);
}
body.focus-mode #focus-mode-btn:hover { background: #5b21b6; }
.dark-mode body.focus-mode #focus-mode-btn { background: #818cf8; }

/* Contenido más ancho y centrado */
body.focus-mode .subject-content {
    max-width: 920px;
    margin: 0 auto;
    padding-top: 20px;
}
body.focus-mode .branches { gap: 18px; }
body.focus-mode .sub-node {
    font-size: 1.02rem;
    line-height: 1.6;
}

/* Fondo más limpio (sin patrones del home) */
body.focus-mode { background: #fafaf9; }
body.focus-mode.dark-mode { background: #0c1424; }

/* ─── LÍNEAS DE TIEMPO (página /timelines) ─── */
.tl-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    color: var(--card-text);
}
.tl-header h1 {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tl-subtle {
    opacity: .65;
    font-size: .9rem;
    margin: 0 0 20px;
}
.tl-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.tl-tab {
    background: transparent;
    border: 2px solid;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 800;
    font-size: .92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tl-tab:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.tl-tab-active { box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

.tl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 12px 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    font-size: .8rem;
}
.tl-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tl-legend-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.tl-stats {
    font-size: .85rem;
    opacity: .7;
    margin-bottom: 24px;
    text-align: center;
}

/* Spine vertical central */
.tl-spine {
    position: relative;
    margin-top: 10px;
}
.tl-spine::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, transparent 0%, var(--menu-hover) 5%, var(--menu-hover) 95%, transparent 100%);
    transform: translateX(-50%);
}
.dark-mode .tl-spine::before { background: linear-gradient(to bottom, transparent 0%, #334155 5%, #334155 95%, transparent 100%); }

.tl-event {
    position: relative;
    width: 50%;
    padding: 14px 30px;
    box-sizing: border-box;
}
.tl-event-left { left: 0; text-align: right; }
.tl-event-right { left: 50%; text-align: left; }

.tl-event-marker {
    position: absolute;
    top: 22px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--bg-color, #fff);
    box-shadow: 0 0 0 2px var(--era-color, #64748b);
    z-index: 2;
}
.tl-event-left .tl-event-marker { right: -8px; }
.tl-event-right .tl-event-marker { left: -8px; }
.dark-mode .tl-event-marker { border-color: #0f172a; }

.tl-event-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid var(--era-color, #64748b);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tl-event-left .tl-event-card { border-left: 1px solid var(--border-color, #e2e8f0); border-right: 4px solid var(--era-color, #64748b); }
.tl-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
}

.tl-event-year {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--era-color, #64748b);
    margin-bottom: 4px;
}
.tl-event-title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--card-text);
}
.tl-event-desc {
    font-size: .85rem;
    line-height: 1.5;
    opacity: .85;
    color: var(--card-text);
}
.tl-event-desc i { color: inherit; }

/* Móvil: todo a un lado, marker a la izquierda */
@media (max-width: 720px) {
    .tl-spine::before { left: 14px; transform: none; }
    .tl-event { width: 100%; left: 0 !important; padding: 10px 0 10px 36px; text-align: left !important; }
    .tl-event-left .tl-event-card,
    .tl-event-right .tl-event-card { border-left: 4px solid var(--era-color, #64748b); border-right: 1px solid var(--border-color, #e2e8f0); }
    .tl-event-marker { left: 6px !important; right: auto !important; top: 18px; }
    .tl-tab { font-size: .82rem; padding: 8px 12px; }
}

.x-extras-expand {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: all 0.15s;
}
.x-extras-expand:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.x-extras-expand--map {
    z-index: 1000;
}
.dark-mode .x-extras-expand {
    background: rgba(30, 41, 59, 0.95);
    color: #f1f5f9;
    border-color: #334155;
}
.dark-mode .x-extras-expand:hover {
    background: #2563eb;
    border-color: #2563eb;
}

/* Modal de pantalla completa para diagramas y mapas */
.x-extras-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.x-extras-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.x-extras-modal-panel {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    padding: 18px;
    width: min(96vw, 1200px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}
.dark-mode .x-extras-modal-panel { background: var(--surface-1); }
.x-extras-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s;
    z-index: 2;
}
.x-extras-modal-close:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.dark-mode .x-extras-modal-close {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
.x-extras-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    margin-top: 30px;
    background: #f8fafc;
    border-radius: 10px;
    position: relative;
    min-height: 60vh;
    user-select: none;
}
.dark-mode .x-extras-modal-body { background: #0f172a; }
.x-extras-pz-host {
    display: inline-block;
    transform-origin: 0 0;
}
.x-extras-pz-host svg {
    display: block;
}
.x-extras-modal-zoom-controls {
    position: absolute;
    bottom: 70px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}
.x-extras-zoom-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.15s;
}
.x-extras-zoom-btn:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.dark-mode .x-extras-zoom-btn {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
.x-extras-modal-caption {
    text-align: center;
    color: #64748b;
    font-style: italic;
    font-size: 0.9rem;
    padding: 10px 12px 4px;
    border-top: 1px solid #f1f5f9;
}
.dark-mode .x-extras-modal-caption { color: #94a3b8; border-top-color: #334155; }

.x-map-figure {
    margin: 0;
    background: var(--surface-color, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    overflow: hidden;
}
.dark-mode .x-map-figure { background: #1e293b; border-color: #334155; }
.x-map-canvas {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.x-extras-caption {
    text-align: center;
    color: #64748b;
    font-size: 0.82rem;
    font-style: italic;
    margin-top: 8px;
    padding: 0 12px 6px;
}
.dark-mode .x-extras-caption { color: #94a3b8; }

.x-smiles-figure {
    margin: 0;
    background: var(--surface-color, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    overflow-x: auto;
}
.dark-mode .x-smiles-figure { background: #1e293b; border-color: #334155; }
.x-smiles-canvas { max-width: 100%; height: auto; }

/* Asegura que los popups de Leaflet hereden la tipografía del proyecto */
.leaflet-container { font-family: "Nunito", system-ui, sans-serif; }

/* =====================================================
   ACTIVE RECALL CHECKPOINT (clases)
   ===================================================== */
.class-checkpoint {
    max-width: 900px;
    margin: 0 auto 28px;
    padding: 0 16px;
}
.class-checkpoint-cta {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid rgba(251, 146, 60, 0.35);
    border-left: 4px solid #f97316;
    border-radius: var(--r-lg);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.7) inset;
    position: relative;
    overflow: hidden;
}
.class-checkpoint-cta::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(251, 146, 60, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.dark-mode .class-checkpoint-cta {
    background: linear-gradient(135deg, rgba(124, 45, 18, 0.4) 0%, rgba(154, 52, 18, 0.55) 100%);
    border-color: rgba(251, 146, 60, 0.4);
    border-left-color: #fb923c;
    box-shadow: var(--shadow-md);
}
.class-checkpoint-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35), 0 0 0 1px rgba(255,255,255,0.4) inset;
    z-index: 1;
}
.class-checkpoint-text { flex: 1; min-width: 0; z-index: 1; }
.class-checkpoint-text h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #9a3412;
    letter-spacing: -0.01em;
}
.dark-mode .class-checkpoint-text h3 { color: #fed7aa; }
.class-checkpoint-text p {
    margin: 0;
    font-size: 0.86rem;
    color: #7c2d12;
    line-height: var(--lh-snug);
    opacity: 0.85;
}
.dark-mode .class-checkpoint-text p { color: #fdba74; }
.class-checkpoint-btn {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    padding: 11px 22px;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: transform var(--transition-quick), box-shadow var(--transition-quick);
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255,255,255,0.4) inset;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
}
.class-checkpoint-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.55) inset;
}
.class-checkpoint-btn:active { transform: translateY(0); }

.class-checkpoint-active {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-left: 4px solid #f97316;
    border-radius: var(--r-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-md);
}
.dark-mode .class-checkpoint-active {
    background: var(--surface-1);
    border-color: var(--border-color);
    border-left-color: #fb923c;
}
.chkpt-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.chkpt-header h3 {
    flex: 1;
    margin: 0;
    color: #9a3412;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.dark-mode .chkpt-header h3 { color: #fed7aa; }
.chkpt-cancel {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.chkpt-cancel:hover { background: #f1f5f9; color: #334155; }
.dark-mode .chkpt-cancel:hover { background: #334155; color: #f1f5f9; }
.chkpt-hint {
    font-size: 0.85rem;
    color: #475569;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #fef3c7;
    border-radius: 8px;
    border-left: 3px solid #f59e0b;
}
.dark-mode .chkpt-hint {
    background: rgba(245, 158, 11, 0.15);
    color: #fde68a;
}
.chkpt-questions { display: flex; flex-direction: column; gap: 14px; }
.chkpt-card { margin: 0 !important; }
.chkpt-src {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.chkpt-src-flash {
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}
.dark-mode .chkpt-src-flash {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
    border-color: rgba(124, 58, 237, 0.4);
}
.chkpt-summary-card {
    margin-top: 18px;
    background: var(--surface-color, #fff);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.dark-mode .chkpt-summary-card { background: #0f172a; }
.chkpt-summary-text { flex: 1; }
.chkpt-summary-pct { font-weight: 900; font-size: 1.2rem; }
.chkpt-summary-msg { color: #64748b; font-size: 0.9rem; margin-top: 2px; }
.chkpt-retry-btn {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}
.chkpt-retry-btn:hover { background: #e2e8f0; }
.dark-mode .chkpt-retry-btn { background: #334155; color: #f1f5f9; border-color: #475569; }
.dark-mode .chkpt-retry-btn:hover { background: #475569; }

@media (max-width: 600px) {
    .class-checkpoint-cta { flex-direction: column; text-align: center; }
    .class-checkpoint-btn { width: 100%; }
    .chkpt-summary-card { flex-direction: column; text-align: center; }
}

/* =====================================================
   REPASO DE ERRORES: Cola SRS
   ===================================================== */
.error-review-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 18px 0;
}
.ers-stat {
    background: var(--surface-color, #fff);
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
}
.dark-mode .ers-stat { background: #1e293b; border-color: #334155; }
.ers-stat-due { border-left: 4px solid #dc2626; }
.ers-stat-up { border-left: 4px solid #f59e0b; }
.ers-stat-grad { border-left: 4px solid #10b981; }
.ers-num { font-size: 2rem; font-weight: 900; color: #0f172a; line-height: 1; }
.dark-mode .ers-num { color: #f1f5f9; }
.ers-stat-due .ers-num { color: #dc2626; }
.ers-stat-grad .ers-num { color: #10b981; }
.ers-lbl { font-size: 0.78rem; color: #64748b; margin-top: 6px; font-weight: 700; }

.error-review-materias {
    background: var(--surface-color, #fff);
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.dark-mode .error-review-materias { background: #1e293b; border-color: #334155; }
.erm-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.92rem;
}
.dark-mode .erm-row { border-bottom-color: #334155; }
.erm-row:last-child { border-bottom: none; }
.erm-name { font-weight: 700; color: #334155; }
.dark-mode .erm-name { color: #cbd5e1; }
.erm-due { font-size: 0.85rem; font-weight: 700; }
.erm-total { font-size: 0.78rem; color: #94a3b8; }

.error-review-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 12px;
}
.error-review-section-header h2 {
    margin: 0;
    font-size: 1.15rem;
    color: #dc2626;
}
.dark-mode .error-review-section-header h2 { color: #f87171; }

.errrev-qmeta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.errrev-due {
    margin-left: auto;
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
}
.errrev-box {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.errrev-box-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 1.5px solid #cbd5e1;
}
.errrev-box-dot.on {
    background: #10b981;
    border-color: #059669;
}
.dark-mode .errrev-box-dot { background: #334155; border-color: #475569; }
.dark-mode .errrev-box-dot.on { background: #10b981; border-color: #059669; }

.error-review-upcoming {
    margin-top: 30px;
    background: var(--surface-color, #fff);
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
}
.dark-mode .error-review-upcoming { background: #1e293b; border-color: #334155; }
.error-review-upcoming summary {
    cursor: pointer;
    font-weight: 800;
    color: #475569;
    padding: 4px 0;
}
.dark-mode .error-review-upcoming summary { color: #cbd5e1; }
.erm-list { margin-top: 12px; }
.erm-up-row {
    display: grid;
    grid-template-columns: 130px 1fr 100px;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
    font-size: 0.85rem;
}
.dark-mode .erm-up-row { border-bottom-color: #334155; }
.erm-up-row:last-child { border-bottom: none; }
.erm-up-mat { font-weight: 700; }
.erm-up-q { color: #64748b; }
.dark-mode .erm-up-q { color: #94a3b8; }
.erm-up-due { font-size: 0.78rem; color: #94a3b8; text-align: right; }

@media (max-width: 600px) {
    .error-review-stats { grid-template-columns: 1fr 1fr; }
    .ers-stat-grad { grid-column: span 2; }
    .erm-up-row { grid-template-columns: 1fr; }
    .erm-up-due { text-align: left; }
}

/* =====================================================
   SIMULACRO: Selector de fuente de preguntas
   ===================================================== */
.sim-source-card {
    background: var(--surface-color, #fff);
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 18px 18px;
    margin-bottom: 18px;
}
.dark-mode .sim-source-card {
    background: #1e293b;
    border-color: #334155;
}
.sim-source-title {
    font-weight: 800;
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dark-mode .sim-source-title { color: #e2e8f0; }
.sim-source-title i { color: #2563eb; }
.sim-source-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 600px) {
    .sim-source-pills { grid-template-columns: 1fr; }
}
.sim-source-pill {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.sim-source-pill:hover {
    border-color: var(--src-color, #2563eb);
    transform: translateY(-1px);
}
.sim-source-pill.active {
    background: color-mix(in srgb, var(--src-color, #2563eb) 12%, transparent);
    border-color: var(--src-color, #2563eb);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--src-color, #2563eb) 22%, transparent);
}
.sim-source-pill i {
    font-size: 1.2rem;
    color: var(--src-color, #2563eb);
    margin-bottom: 2px;
}
.sim-source-pill-label {
    font-weight: 800;
    font-size: 0.95rem;
    color: #0f172a;
}
.dark-mode .sim-source-pill-label { color: #f1f5f9; }
.sim-source-pill-desc {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.25;
}
.dark-mode .sim-source-pill {
    background: #0f172a;
    border-color: #334155;
}
.dark-mode .sim-source-pill.active {
    background: color-mix(in srgb, var(--src-color, #2563eb) 22%, #0f172a);
}

/* =====================================================
   SIMULACRO: Tarjetas de modo
   ===================================================== */
.sim-mode-card {
    background: var(--surface-color, #fff);
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s;
}
.sim-mode-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
}
.dark-mode .sim-mode-card {
    background: #1e293b;
    border-color: #334155;
}
.sim-mode-card--full  { border-left: 4px solid #2563eb; }
.sim-mode-card--reduced { border-left: 4px solid #7c3aed; }
.sim-mode-card--adaptive {
    border-left: 4px solid #dc2626;
    background: linear-gradient(135deg, var(--surface-color, #fff) 0%, color-mix(in srgb, #dc2626 4%, transparent) 100%);
}
.dark-mode .sim-mode-card--adaptive {
    background: linear-gradient(135deg, #1e293b 0%, color-mix(in srgb, #dc2626 12%, #1e293b) 100%);
}
.sim-badge-new {
    display: inline-block;
    background: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sim-start-btn--red {
    background: #dc2626 !important;
    color: #fff !important;
}
.sim-from-mistake {
    display: inline-block;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}
.sim-results-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.btn-review-mistakes {
    background: #dc2626 !important;
    color: #fff !important;
    border: none !important;
}
.dark-mode .sim-from-mistake {
    background: rgba(220, 38, 38, 0.18);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.4);
}

.sim-mode-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.sim-mode-header > i { font-size: 1.4rem; margin-top: 2px; flex-shrink: 0; }
.sim-mode-header > div { flex: 1; }
.sim-mode-header h3 { font-size: 1.05rem; }

.sim-start-btn {
    flex-shrink: 0;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.sim-start-btn--purple { background: #7c3aed; }
.sim-start-btn:hover { filter: brightness(1.1); }

.sim-dist-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    font-size: .82rem;
    color: #64748b;
}
.dark-mode .sim-dist-grid { border-color: #334155; }
.sim-dist-grid span { display: flex; align-items: center; gap: 5px; }
.sim-dist-grid b { color: #0f172a; font-weight: 900; }
.dark-mode .sim-dist-grid b { color: #f1f5f9; }

/* Separador de materia dentro del examen */
.sim-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    margin: 24px 0 8px;
    font-weight: 800;
    font-size: .95rem;
    width: 100%;
    box-sizing: border-box;
}
.sim-section-header:first-child { margin-top: 0; }
.sim-section-title { flex: 1; }
.sim-section-range {
    font-size: .78rem;
    font-weight: 600;
    opacity: .7;
    white-space: nowrap;
}

/* =====================================================
   BOTÓN: Marcar como Estudiada
   ===================================================== */
.btn-mark-studied {
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
    margin: 20px auto;
    font-family: 'Nunito', sans-serif;
    outline: none;
}

.btn-mark-studied i {
    font-size: 1.4rem;
}

.btn-mark-studied:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.35);
}

.btn-mark-studied:active {
    transform: translateY(-2px);
}

/* Estado: Completado (Done) */
.btn-mark-studied.done {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}

.btn-mark-studied.done:hover {
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.35);
}

/* Celebration animation for auto-completed class */
.btn-mark-studied.celebrate {
    position: relative;
    overflow: visible;
    animation: celebrateGlow 1.5s ease-out;
}

@keyframes celebrateGlow {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    25%  { box-shadow: 0 0 30px 10px rgba(16, 185, 129, 0.5), 0 0 60px 20px rgba(52, 211, 153, 0.3); }
    50%  { box-shadow: 0 0 20px 5px rgba(16, 185, 129, 0.3), 0 0 40px 15px rgba(52, 211, 153, 0.15); }
    100% { box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2); }
}

.confetti-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    pointer-events: none;
    animation: confettiBurst 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

@keyframes confettiBurst {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0); opacity: 0; }
}

.class-nav-actions {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 980px;
    margin: 30px auto 10px;
}

.btn-class-nav {
    border: 2px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Nunito', sans-serif;
    transition: all 0.2s ease;
}

.btn-class-nav:hover {
    border-color: #94a3b8;
    background: #eef2ff;
    color: #1e3a8a;
    transform: translateY(-2px);
}

.btn-class-prev {
    justify-self: start;
}

.btn-class-next {
    justify-self: end;
}

.btn-class-nav-spacer {
    display: block;
    width: 100%;
}

.class-nav-actions .btn-mark-studied {
    margin: 0;
}

/* =====================================================
   PERFIL — WIDGET EN SIDEBAR
   ===================================================== */
.profile-widget {
    margin: 0 12px 18px 12px;
    padding: 13px 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1.5px solid #bfdbfe;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    flex-shrink: 0;
    min-height: 0;
}

.profile-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(16, 185, 129, 0.06) 100%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.profile-widget:hover::before {
    opacity: 1;
}

.profile-widget:hover {
    border-color: #93c5fd;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
}

.profile-widget:active {
    transform: translateY(0);
}

.dark-mode .profile-widget {
    background: linear-gradient(135deg, #0f1f3d 0%, #0f2a1a 100%);
    border-color: #1e3a5f;
}

.dark-mode .profile-widget:hover {
    border-color: #3b82f6;
}

/* Avatar del widget */
.pw-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    position: relative;
    background: #e2e8f0;
    color: #64748b;
    border: 2.5px solid #cbd5e1;
    transition: all 0.3s ease;
}

.pw-avatar.blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: #93c5fd;
}

.pw-avatar.pink {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    border-color: #f9a8d4;
}

/* Imagen de dinosaurio en el widget sidebar */
.pw-dino-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
}

.pw-avatar-edit {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #2563eb;
    color: #fff;
    border-radius: 50%;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.profile-widget:hover .pw-avatar-edit {
    opacity: 1;
    transform: scale(1);
}

.dark-mode .pw-avatar-edit {
    border-color: #1e293b;
}

/* Info del widget */
.pw-info {
    flex: 1;
    min-width: 0;
}

.pw-name {
    font-weight: 800;
    font-size: 0.92rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.dark-mode .pw-name {
    color: #f1f5f9;
}

.pw-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.pw-stats {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}
.dark-mode .pw-stats {
    color: #94a3b8;
}

.pw-bar {
    width: 100%;
    height: 5px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}

.dark-mode .pw-bar {
    background: #334155;
}

.pw-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
    width: 0%;
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pw-arrow {
    color: #94a3b8;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}

.profile-widget:hover .pw-arrow {
    transform: translateX(3px);
    color: #3b82f6;
}

/* =====================================================
   PERFIL — MODAL
   ===================================================== */
.pm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.pm-card {
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.pm-overlay.active .pm-card {
    transform: scale(1) translateY(0);
}

.dark-mode .pm-card {
    background: #1e293b;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
}

/* Header con gradiente */
.pm-header {
    position: relative;
    padding: 40px 24px 30px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #1d4ed8 0%, #0f766e 100%);
    color: #fff;
}

.pm-header-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

/* Avatar grande en header */
.pm-avatar-preview {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    margin: 0 auto 12px;
    position: relative;
    backdrop-filter: blur(4px);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.pm-avatar-preview.blue {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(147, 197, 253, 0.8);
}

.pm-avatar-preview.pink {
    background: rgba(236, 72, 153, 0.25);
    border-color: rgba(249, 168, 212, 0.8);
}

/* Imagen de dinosaurio en el modal */
.pm-dino-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
}

.pm-avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    animation: pmRingPulse 3s infinite ease-in-out;
}

@keyframes pmRingPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.2;
    }
}

.pm-header-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin: 0 0 4px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.pm-preview-name {
    font-size: 1.45rem;
    font-weight: 900;
    margin: 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    word-break: break-word;
}

/* Botón cerrar */
.pm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.pm-close:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(90deg);
}

/* Cuerpo */
.pm-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pm-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pm-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dark-mode .pm-label {
    color: #94a3b8;
}

/* Input de nombre */
.pm-input-wrapper {
    position: relative;
}

.pm-input-wrapper input {
    width: 100%;
    padding: 13px 50px 13px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}

.pm-input-wrapper input::placeholder {
    color: #cbd5e1;
    font-weight: 600;
}

.pm-input-wrapper input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.dark-mode .pm-input-wrapper input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .pm-input-wrapper input:focus {
    background: #1e293b;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

.pm-char-count {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-weight: 700;
    color: #cbd5e1;
}

/* Selección de avatares */
.pm-avatar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pm-av-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px 14px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

.pm-av-opt:hover {
    border-color: #93c5fd;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.dark-mode .pm-av-opt {
    background: #0f172a;
    border-color: #334155;
}

.dark-mode .pm-av-opt:hover {
    border-color: #3b82f6;
}

.pm-av-opt input[type="radio"] {
    display: none;
}

/* Círculo del avatar */
.pm-av-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.pm-av-blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
    border: 3px solid transparent;
}

.pm-av-pink {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #be185d;
    border: 3px solid transparent;
}

/* Estado seleccionado */
.pm-av-opt:has(input:checked) {
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.pm-av-opt:has(input[value="blue"]:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.pm-av-opt:has(input[value="pink"]:checked) {
    border-color: #ec4899;
    background: #fdf2f8;
}

.dark-mode .pm-av-opt:has(input[value="blue"]:checked) {
    background: #0c1f3f;
    border-color: #3b82f6;
}

.dark-mode .pm-av-opt:has(input[value="pink"]:checked) {
    background: #2a0a1d;
    border-color: #ec4899;
}

.pm-av-opt input[value="blue"]:checked~.pm-av-circle.pm-av-blue {
    border-color: #3b82f6;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.18), 0 0 20px rgba(59, 130, 246, 0.25);
    transform: scale(1.08);
}

.pm-av-opt input[value="pink"]:checked~.pm-av-circle.pm-av-pink {
    border-color: #ec4899;
    box-shadow: 0 0 0 5px rgba(236, 72, 153, 0.18), 0 0 20px rgba(236, 72, 153, 0.25);
    transform: scale(1.08);
}

.pm-av-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: #475569;
}

.dark-mode .pm-av-label {
    color: #94a3b8;
}

.pm-av-check {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 1rem;
    color: #10b981;
    opacity: 0;
    transform: scale(0);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pm-av-opt:has(input[value="blue"]:checked) .pm-av-check {
    opacity: 1;
    transform: scale(1);
    color: #3b82f6;
}

.pm-av-opt:has(input[value="pink"]:checked) .pm-av-check {
    opacity: 1;
    transform: scale(1);
    color: #ec4899;
}

/* Botón guardar */
/* Botón editar perfil → link a Configuración */
.pm-edit-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.pm-edit-link:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
    transform: translateX(3px);
}

.dark-mode .pm-edit-link {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

.dark-mode .pm-edit-link:hover {
    background: #0c2340;
    border-color: #3b82f6;
    color: #93c5fd;
}

.pm-edit-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.pm-edit-link:hover .pm-edit-arrow {
    transform: translateX(4px);
}


/* Sección de progreso en modal */
/* =====================================================
   PERFIL — PANEL DE PROGRESO DETALLADO
   ===================================================== */
.pm-stats-panel {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dark-mode .pm-stats-panel {
    background: #0f172a;
    border-color: #334155;
}

/* Encabezado del panel */
.pm-stats-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.dark-mode .pm-stats-header {
    color: #94a3b8;
}

/* Fila: circulo + tarjetas */
.pm-stats-overview {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Círculo SVG */
.pm-circle-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.pm-circle-svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}

.pm-circle-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
}

.dark-mode .pm-circle-bg {
    stroke: #334155;
}

.pm-circle-fill {
    fill: none;
    stroke: url(#circleGrad);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pm-circle-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pm-circle-pct {
    font-size: 1.05rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.dark-mode .pm-circle-pct {
    color: #f1f5f9;
}

.pm-circle-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tarjetas de stats */
.pm-stats-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pm-stat-card {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 10px;
    gap: 1px;
}

.pm-stat-done {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
}

.dark-mode .pm-stat-done {
    background: #052e16;
    border-color: #065f46;
}

.pm-stat-pending {
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.dark-mode .pm-stat-pending {
    background: #1c1200;
    border-color: #92400e;
}

.pm-stat-num {
    font-size: 1.3rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.pm-stat-done .pm-stat-num {
    color: #065f46;
}

.pm-stat-pending .pm-stat-num {
    color: #92400e;
}

.dark-mode .pm-stat-done .pm-stat-num {
    color: #6ee7b7;
}

.dark-mode .pm-stat-pending .pm-stat-num {
    color: #fcd34d;
}

.pm-stat-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.dark-mode .pm-stat-lbl {
    color: #94a3b8;
}

/* Barra global */
.pm-global-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-progress-track {
    width: 100%;
    height: 10px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}

.dark-mode .pm-progress-track {
    background: #334155;
}

.pm-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb 0%, #10b981 100%);
    width: 0%;
    border-radius: 99px;
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pm-progress-detail {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
    text-align: right;
}

/* Desglose por materia */
.pm-subject-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1.5px solid #e2e8f0;
    padding-top: 12px;
}

.dark-mode .pm-subject-breakdown {
    border-color: #334155;
}

.pm-subj-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-subj-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pm-subj-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark-mode .pm-subj-name {
    color: #cbd5e1;
}

.pm-subj-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pm-subj-count {
    font-size: 0.78rem;
    font-weight: 900;
    color: #64748b;
    flex-shrink: 0;
}

.dark-mode .pm-subj-count {
    color: #94a3b8;
}

.pm-subj-pct {
    font-size: 0.78rem;
    font-weight: 900;
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}

.pm-subj-track {
    width: 100%;
    height: 7px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}

.dark-mode .pm-subj-track {
    background: #334155;
}

.pm-subj-fill {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* Scrollbar del modal */
.pm-card::-webkit-scrollbar {
    width: 5px;
}

.pm-card::-webkit-scrollbar-track {
    background: transparent;
}

.pm-card::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.dark-mode .pm-card::-webkit-scrollbar-thumb {
    background: #334155;
}

/* Dark mode adaptive contrast */
.dark-mode .btn-mark-studied {
    box-shadow: 0 10px 25px rgba(5, 150, 105, 0.4);
}

.dark-mode .btn-mark-studied.done {
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.5);
}

.dark-mode .btn-class-nav {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

.dark-mode .btn-class-nav:hover {
    background: #172554;
    border-color: #3b82f6;
    color: #dbeafe;
}

/* =====================================================
   PÁGINA DE CONFIGURACIÓN
   ===================================================== */
.cfg-page {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Nunito', sans-serif;
}

/* Header */
.cfg-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
    margin-top: 60px;
}

.cfg-page-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

.cfg-page-icon i {
    animation: gearSpin 8s linear infinite;
}

@keyframes gearSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cfg-page-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.dark-mode .cfg-page-title {
    color: #f1f5f9;
}

.cfg-page-subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin: 2px 0 0;
    font-weight: 600;
}

.dark-mode .cfg-page-subtitle {
    color: #94a3b8;
}

/* Tarjeta de sección */
.cfg-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.cfg-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.dark-mode .cfg-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Header de tarjeta */
.cfg-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 900;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.dark-mode .cfg-card-header {
    color: #a5b4fc;
}

/* Campo */
.cfg-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cfg-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.dark-mode .cfg-label {
    color: #94a3b8;
}
.dark-mode .cfg-field-hint {
    color: #64748b;
}
.dark-mode .cfg-slider {
    background: #334155;
}
.dark-mode .cfg-radio-opt {
    border-color: #334155;
}
.dark-mode .cfg-radio-opt:hover {
    border-color: #6366f1;
    background: #1e293b;
}
.dark-mode .cfg-radio-opt.selected {
    border-color: #6366f1;
    background: #1e1b4b;
}
.dark-mode .cfg-radio-title {
    color: #f1f5f9;
}
.dark-mode .cfg-radio-desc {
    color: #64748b;
}
.dark-mode .cfg-radio-icon {
    color: #94a3b8;
}

/* Input */
.cfg-input-row {
    position: relative;
}

.cfg-input {
    width: 100%;
    padding: 13px 52px 13px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.cfg-input:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.dark-mode .cfg-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .cfg-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.cfg-char-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 700;
    pointer-events: none;
}

/* Grid de avatares */
.cfg-avatar-grid {
    display: flex;
    gap: 16px;
}

.cfg-av-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 2.5px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    background: #f8fafc;
}

.cfg-av-opt input {
    display: none;
}

.cfg-av-opt:hover {
    border-color: #a5b4fc;
    background: #f0f0ff;
    transform: translateY(-2px);
}

.cfg-av-opt.selected {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

.dark-mode .cfg-av-opt {
    background: #0f172a;
    border-color: #334155;
}

.dark-mode .cfg-av-opt:hover {
    border-color: #818cf8;
    background: #1e1b4b;
}

.dark-mode .cfg-av-opt.selected {
    border-color: #818cf8;
    background: #1e1b4b;
}

.cfg-av-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
    box-sizing: border-box;
}

.cfg-av-blue {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 2px solid #93c5fd;
}

.cfg-av-pink {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    border: 2px solid #f9a8d4;
}

.cfg-av-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.cfg-av-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #475569;
}

.dark-mode .cfg-av-label {
    color: #94a3b8;
}

.cfg-av-check {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #6366f1;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.cfg-av-opt.selected .cfg-av-check {
    opacity: 1;
}

/* Slider para configuración */
.cfg-field-hint {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: -4px 0 10px;
    line-height: 1.3;
}
.cfg-slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cfg-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
}
.cfg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    cursor: pointer;
}
.cfg-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    cursor: pointer;
}
.cfg-slider-val {
    font-size: 1.1rem;
    font-weight: 900;
    color: #10b981;
    min-width: 48px;
    text-align: center;
}

/* Radio group para opciones de configuración */
.cfg-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cfg-radio-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.cfg-radio-opt input[type="radio"] {
    display: none;
}
.cfg-radio-opt:hover {
    border-color: #a5b4fc;
    background: #f8fafc;
}
.cfg-radio-opt.selected {
    border-color: #6366f1;
    background: #eef2ff;
}
.cfg-radio-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.cfg-radio-icon {
    font-size: 1.2rem;
    color: #64748b;
    width: 24px;
    text-align: center;
}
.cfg-radio-opt.selected .cfg-radio-icon {
    color: #6366f1;
}
.cfg-radio-title {
    display: block;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e293b;
}
.cfg-radio-desc {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}
.cfg-radio-check {
    font-size: 1.1rem;
    color: #6366f1;
    opacity: 0;
    transition: opacity 0.2s;
}
.cfg-radio-opt.selected .cfg-radio-check {
    opacity: 1;
}

/* Botón guardar */
.cfg-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.cfg-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.cfg-feedback {
    font-size: 0.85rem;
    font-weight: 700;
    min-height: 1.2em;
    text-align: center;
    margin: 0;
    transition: opacity 0.3s;
}

/* Toggle tema */
.cfg-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.cfg-theme-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cfg-theme-icon {
    font-size: 1.4rem;
    color: #f59e0b;
    width: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.dark-mode .cfg-theme-icon {
    color: #fbbf24;
}

.cfg-theme-name {
    display: block;
    font-weight: 800;
    color: #1e293b;
    font-size: 0.95rem;
}

.dark-mode .cfg-theme-name {
    color: #f1f5f9;
}

.cfg-theme-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 1px;
    transition: all 0.3s;
}

.dark-mode .cfg-theme-label {
    color: #94a3b8;
}

/* Toggle switch */
.cfg-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.cfg-toggle-track {
    display: block;
    width: 52px;
    height: 28px;
    background: #e2e8f0;
    border-radius: 99px;
    position: relative;
    transition: background 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cfg-theme-toggle[aria-pressed="true"] .cfg-toggle-track {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.cfg-toggle-thumb {
    display: block;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cfg-theme-toggle[aria-pressed="true"] .cfg-toggle-thumb {
    transform: translateX(24px);
}

.guided-wrap {
    width: 100%;
    max-width: 1080px;
    padding: 0 12px 32px;
}

.guided-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.guided-kpi {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.guided-kpi:hover {
    transform: translateY(-2px);
}

.guided-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.guided-kpi b {
    font-size: 1.6rem;
    color: #1e293b;
    line-height: 1.2;
}

.guided-kpi span {
    color: #64748b;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.guided-next-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.1);
    position: relative;
    overflow: hidden;
}

.guided-next-card::after {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.guided-next-card h3 {
    margin: 0 0 8px;
    color: #0369a1;
    font-size: 1.15rem;
    font-weight: 900;
}

.guided-next-card p {
    margin: 0;
    color: #0f172a;
    font-weight: 700;
    font-size: 1.05rem;
}

.guided-next-card-time {
    border-color: #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1);
}

.guided-next-card-time h3 {
    color: #4338ca;
}

.guided-next-btn {
    margin-top: 16px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.guided-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.4);
}

.guided-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.guided-col {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.guided-col h4 {
    margin: 0 0 14px;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 800;
}

.guided-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guided-item {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: inherit;
    border-left-width: 4px;
    transition: all 0.2s ease;
}

.guided-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 0.95rem;
}

.guided-item-text {
    flex: 1;
    text-align: left;
    color: #334155;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
}

.guided-item-arrow {
    font-size: 0.8rem;
    opacity: 0.5;
    transition: transform 0.2s;
}

.guided-item:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.guided-item:hover .guided-item-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.guided-empty {
    margin: 0;
    color: #64748b;
    font-weight: 700;
}

.cfg-backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cfg-import-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    border: 2px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    padding: 11px 18px;
    font-weight: 800;
    cursor: pointer;
}

#cfgImportBackupInput {
    display: none;
}

.cfg-backup-status {
    margin: 10px 0 0;
    color: #64748b;
    font-weight: 700;
    font-size: 0.92rem;
}

.dark-mode .guided-kpi,
.dark-mode .guided-col {
    background: #0f172a;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.dark-mode .guided-kpi b {
    color: #f1f5f9;
}

.dark-mode .guided-kpi span,
.dark-mode .guided-col h4,
.dark-mode .guided-item-text,
.dark-mode .guided-next-card p,
.dark-mode .guided-empty {
    color: #cbd5e1;
}

.dark-mode .guided-next-card {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
    border-color: #0284c7;
}

.dark-mode .guided-next-card h3 {
    color: #7dd3fc;
}

.dark-mode .guided-next-card-time {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-color: #4f46e5;
}

.dark-mode .guided-next-card-time h3 {
    color: #a5b4fc;
}

.dark-mode .guided-item {
    background: #1e293b;
    border-color: #334155;
}

.dark-mode .guided-item:hover {
    background: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .cfg-import-btn {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

@media (max-width: 900px) {

    .guided-summary,
    .guided-grid {
        grid-template-columns: 1fr;
    }

    .class-nav-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 560px;
        margin-bottom: 88px;
    }

    .class-nav-actions .btn-mark-studied {
        order: 1;
        grid-column: 1 / -1;
        margin-bottom: 12px;
    }

    .btn-class-prev {
        order: 2;
        grid-column: 1;
    }

    .btn-class-next {
        order: 3;
        grid-column: 2;
    }

    .btn-class-prev,
    .btn-class-next,
    .class-nav-actions .btn-mark-studied {
        justify-self: stretch;
        width: 100%;
    }

    .btn-class-nav-spacer {
        display: none;
    }
}

/* ----------------------------- */
/* Study Tools: Modals + Buttons */
/* ----------------------------- */

/* =====================================================
   ESTILOS PREMIUM PARA FLASHCARDS
   ===================================================== */

/* Contenedor de configuración inicial */
.flash-config-card {
    background: var(--sub-node-bg);
    border: 1.5px solid var(--menu-hover);
    border-radius: 24px;
    padding: 35px;
    max-width: 760px;
    margin: 40px auto;
    text-align: center;
    box-shadow: var(--shadow);
    animation: fadeInPage 0.5s ease;
}

.flash-config-row {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
    align-items: flex-end;
}

.flash-select-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    min-width: 200px;
}

.flash-select-group label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--card-text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-left: 5px;
    opacity: 0.8;
}

.flash-input-styled {
    width: 100%;
    padding: 13px 18px;
    border-radius: 14px;
    border: 2px solid var(--menu-hover);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    outline: none;
    transition: all 0.25s ease;
}

.flash-input-styled:focus {
    border-color: var(--menu-accent);
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.1);
    background: var(--sub-node-bg);
}

.btn-flash-start {
    background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 20px rgba(109, 40, 217, 0.35);
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-flash-start:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 30px rgba(109, 40, 217, 0.45);
}

.btn-flash-start:active {
    transform: translateY(-2px) scale(0.98);
}

/* Área de Sesión */
#flash-session-area {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 35px;
    max-width: 1150px;
    margin: 20px auto 100px;
    width: 100%;
}

@media (max-width: 900px) {

    /* El selector :not([style*="display: none"]) asegura que no forzamos la visibilidad si el JS o HTML lo tiene oculto */
    #flash-session-area:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 5px !important;
        padding-bottom: 120px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        align-items: center;
    }

    .flash-sidebar {
        display: contents !important;
    }

    #flashProgressBox {
        order: -1;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
    }

    #flashCardScene {
        order: 0;
        width: 100% !important;
        height: 380px !important;
        margin: 0 !important;
    }

    #flashControlsBox {
        order: 1;
        width: 100% !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    .btn-flip-trigger {
        display: none !important;
    }

    .flash-action-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: stretch;
    }

    .flash-action-group .btn-srs {
        flex: 1 !important;
        padding: 12px 2px !important;
        font-size: 0.85rem !important;
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .flash-action-group .btn-srs i {
        font-size: 1.1rem !important;
    }

    .flash-card-content {
        font-size: 1.35rem !important;
    }
}

/* Tarjeta Flash con efecto 3D flip */
.flash-card-scene {
    width: 100%;
    height: 420px;
    perspective: 2000px;
    cursor: pointer;
}

.flash-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.flash-card-scene.flipped .flash-card-inner {
    transform: rotateY(180deg);
}

.flash-card-front,
.flash-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px;
    border-radius: 28px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.flash-card-front {
    background: var(--sub-node-bg);
    color: var(--text-color);
}

.flash-card-back {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #1e293b;
    transform: rotateY(180deg);
}

.dark-mode .flash-card-front {
    background: #1e293b;
    border-color: #334155;
}

.dark-mode .flash-card-back {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #f1f5f9;
    border-color: #334155;
}

.flash-card-content {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.45;
    word-break: break-word;
    max-width: 100%;
}

.flash-card-label {
    position: absolute;
    top: 25px;
    left: 30px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.5;
    color: var(--text-color);
}

.flash-card-hint-text {
    position: absolute;
    bottom: 25px;
    width: 100%;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--card-text);
    opacity: 0.6;
}

/* Sidebar de controles */
.flash-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flash-stat-box {
    background: var(--sub-node-bg);
    padding: 24px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--menu-hover);
}

.flash-stat-title {
    font-size: 0.78rem;
    font-weight: 900;
    color: #6d28d9;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.flash-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.flash-progress-count {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text-color);
}

.flash-progress-bar-wrap {
    height: 10px;
    background: var(--bg-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 5px 0 15px;
}

.flash-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6d28d9, #9333ea);
    width: 0%;
    border-radius: 12px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flash-action-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-flip-trigger {
    background: var(--bg-color);
    border: 2px dashed var(--menu-hover);
    color: var(--card-text);
    border-radius: 18px;
    padding: 16px;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-flip-trigger:hover {
    border-color: #6d28d9;
    color: #6d28d9;
    background: rgba(109, 40, 217, 0.05);
}

.btn-srs {
    border: none;
    border-radius: 18px;
    padding: 16px;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
}

.btn-srs-easy {
    background: #dcfce7;
    color: #166534;
    border: 2px solid #bbf7d0;
    box-shadow: 0 4px 10px rgba(22, 101, 52, 0.1);
}

.btn-srs-medium {
    background: #fff7ed;
    color: #9a3412;
    border: 2px solid #ffedd5;
    box-shadow: 0 4px 10px rgba(154, 52, 18, 0.1);
}

.btn-srs-hard {
    background: #fee2e2;
    color: #991b1b;
    border: 2px solid #fecaca;
    box-shadow: 0 4px 10px rgba(153, 27, 27, 0.1);
}

.dark-mode .btn-srs-easy {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #065f46;
}

.dark-mode .btn-srs-medium {
    background: #7c2d12;
    color: #fdba74;
    border-color: #9a3412;
}

.dark-mode .btn-srs-hard {
    background: #450a0a;
    color: #fca5a5;
    border-color: #991b1b;
}

.btn-srs:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.02);
}

.btn-srs:active {
    transform: scale(0.96);
}

/* Stats page redesign */
.stats-page {
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    padding: 0 20px;
}

.stats-card {
    background: var(--surface-1);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-color);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-quick);
}
.stats-card:hover { box-shadow: var(--shadow-md); }

.stats-section-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--header-text);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stats-section-title i {
    font-size: 1rem;
    opacity: .7;
}

/* KPI Grid */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.stats-kpi {
    text-align: center;
    padding: 12px 8px;
    border-radius: 16px;
    background: var(--bg-color);
}

.stats-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.stats-kpi-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--header-text);
    line-height: 1.2;
}

.stats-kpi-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--card-text);
    opacity: .7;
    margin-top: 4px;
}

/* Bar chart rows */
.stats-bar-row {
    margin-bottom: 16px;
}

.stats-bar-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.stats-bar-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.stats-bar-name {
    font-weight: 800;
    font-size: .9rem;
    color: var(--text-color);
    flex: 1;
}

.stats-bar-pct {
    font-weight: 900;
    font-size: .9rem;
    flex-shrink: 0;
}

.stats-bar-track {
    height: 8px;
    background: var(--menu-hover);
    border-radius: 99px;
    overflow: hidden;
}

.dark-mode .stats-bar-track {
    background: #334155;
}

.stats-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stats-bar-nums {
    font-size: .75rem;
    font-weight: 700;
    color: var(--card-text);
    opacity: .6;
    margin-top: 4px;
    text-align: right;
}

/* Weakness alert */
.stats-weak-alert {
    border-color: #fecaca;
    background: linear-gradient(135deg, var(--sub-node-bg) 0%, #fef2f210 100%);
}

.dark-mode .stats-weak-alert {
    border-color: #7f1d1d40;
}

.stats-weak-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-color);
    border-radius: 12px;
    margin-bottom: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Simulacro history */
.stats-trend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-color);
    border-radius: 12px;
    margin-bottom: 18px;
}

.stats-sim-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--menu-hover);
}

.stats-sim-item:last-child {
    border-bottom: none;
}

.stats-sim-score {
    font-size: 1.05rem;
    font-weight: 900;
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
}

.stats-sim-bar-track {
    flex: 1;
    height: 6px;
    background: var(--menu-hover);
    border-radius: 99px;
    overflow: hidden;
}

.dark-mode .stats-sim-bar-track {
    background: #334155;
}

.stats-sim-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}

.stats-sim-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 90px;
}

.stats-sim-nums {
    font-size: .82rem;
    font-weight: 800;
    color: var(--text-color);
}

.stats-sim-date {
    font-size: .7rem;
    font-weight: 600;
    color: var(--card-text);
    opacity: .6;
}

/* Heatmap */
.stats-heatmap {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
}

.stats-heatmap-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--menu-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--card-text);
    opacity: .5;
    transition: all 0.2s ease;
}

.stats-heatmap-cell.active {
    background: #8b5cf6;
    color: #fff;
    opacity: 1;
}

.dark-mode .stats-heatmap-cell {
    background: #334155;
}

.dark-mode .stats-heatmap-cell.active {
    background: #7c3aed;
}

.stats-heatmap-cell.today {
    outline: 2px solid #8b5cf6;
    outline-offset: 1px;
    opacity: 1;
}

/* Heatmap 90-day variant — denser grid + intensity levels (GitHub style) */
.stats-heatmap-90 {
    grid-template-columns: repeat(15, 1fr);
    gap: 3px;
}

.stats-heatmap-90 .stats-heatmap-cell {
    border-radius: 4px;
    font-size: 0;
    opacity: 1;
}

.stats-heatmap-cell-l0 { background: var(--menu-hover); opacity: .6; }
.stats-heatmap-cell-l1 { background: #c4b5fd; }
.stats-heatmap-cell-l2 { background: #a78bfa; }
.stats-heatmap-cell-l3 { background: #8b5cf6; }
.stats-heatmap-cell-l4 { background: #6d28d9; }

.dark-mode .stats-heatmap-cell-l0 { background: #334155; opacity: .6; }
.dark-mode .stats-heatmap-cell-l1 { background: #6d28d9; opacity: .55; }
.dark-mode .stats-heatmap-cell-l2 { background: #7c3aed; opacity: .75; }
.dark-mode .stats-heatmap-cell-l3 { background: #8b5cf6; opacity: .9; }
.dark-mode .stats-heatmap-cell-l4 { background: #a78bfa; }

.stats-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: .7rem;
    opacity: .65;
    justify-content: flex-end;
}

.stats-heatmap-legend .stats-heatmap-cell {
    width: 13px;
    height: 13px;
    aspect-ratio: 1;
    flex: 0 0 auto;
}

/* SRS Calendar (próximas revisiones, 14 días) */
.stats-srs-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.stats-srs-cal-day {
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    background: var(--menu-hover);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 64px;
    transition: transform .15s ease;
}

.stats-srs-cal-day:hover {
    transform: translateY(-2px);
}

.srs-cal-dow {
    font-size: .65rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .04em;
    opacity: .6;
}

.srs-cal-num {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--card-text);
}

.srs-cal-count {
    font-size: .85rem;
    font-weight: 800;
    padding: 1px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.55);
    color: #1e3a8a;
}

.srs-cal-count-empty {
    background: transparent;
    color: inherit;
    opacity: .35;
    font-weight: 600;
}

.stats-srs-cal-l0 { background: var(--menu-hover); opacity: .55; }
.stats-srs-cal-l1 { background: #fef3c7; }
.stats-srs-cal-l2 { background: #fde68a; }
.stats-srs-cal-l3 { background: #fbbf24; }
.stats-srs-cal-l4 { background: #f59e0b; color: #fff; }

.stats-srs-cal-l3 .srs-cal-num,
.stats-srs-cal-l4 .srs-cal-num,
.stats-srs-cal-l4 .srs-cal-dow { color: #422006; }

.stats-srs-cal-l4 .srs-cal-count { background: rgba(255, 255, 255, 0.85); color: #b45309; }

.dark-mode .stats-srs-cal-day { background: #334155; }
.dark-mode .stats-srs-cal-l1 { background: #78350f; color: #fde68a; }
.dark-mode .stats-srs-cal-l2 { background: #92400e; color: #fef3c7; }
.dark-mode .stats-srs-cal-l3 { background: #b45309; color: #fff; }
.dark-mode .stats-srs-cal-l4 { background: #d97706; color: #fff; }
.dark-mode .srs-cal-count { background: rgba(0,0,0,.35); color: #fef3c7; }

.stats-srs-cal-day.today {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

/* Por Tema (flashcards SRS) */
.stats-tema-section {
    margin-bottom: 18px;
}

.stats-tema-section:last-child { margin-bottom: 0; }

.stats-tema-header {
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .85;
}

.stats-tema-header--weak { color: #b91c1c; }
.stats-tema-header--strong { color: #047857; }
.dark-mode .stats-tema-header--weak { color: #fca5a5; }
.dark-mode .stats-tema-header--strong { color: #6ee7b7; }

.stats-tema-row {
    display: grid;
    grid-template-columns: 24px 1fr minmax(80px, 140px) auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: .85rem;
}

.stats-tema-mat {
    font-size: 1rem;
    text-align: center;
}

.stats-tema-name {
    font-weight: 700;
    color: var(--card-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-tema-bar-track {
    height: 8px;
    background: var(--menu-hover);
    border-radius: 99px;
    overflow: hidden;
}

.stats-tema-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .25s ease;
}

.stats-tema-score {
    font-weight: 800;
    font-size: .75rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .stats-tema-row {
        grid-template-columns: 22px 1fr auto;
        font-size: .78rem;
        gap: 6px;
    }
    .stats-tema-bar-track { display: none; }
}

/* Empty state */
.stats-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--card-text);
    opacity: .6;
    font-size: .9rem;
    font-weight: 600;
}

.stats-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 10px;
    opacity: .4;
}

/* Responsive */
@media (max-width: 600px) {
    .stats-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-card {
        padding: 20px 16px;
    }

    .stats-heatmap {
        grid-template-columns: repeat(6, 1fr);
    }

    .stats-heatmap-90 {
        grid-template-columns: repeat(10, 1fr);
    }

    .stats-srs-cal {
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .stats-srs-cal-day {
        min-height: 56px;
        padding: 6px 2px;
    }

    .srs-cal-dow { font-size: .55rem; }
    .srs-cal-num { font-size: .9rem; }
    .srs-cal-count { font-size: .75rem; padding: 1px 6px; }

    .stats-sim-detail {
        min-width: 70px;
    }

    .stats-kpi-value {
        font-size: 1.3rem;
    }
}

/* Legacy table styles (kept for compatibility) */
.stats-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.stats-table th {
    text-align: left;
    padding: 15px 20px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--card-text);
    opacity: 0.7;
}

.stats-table td {
    padding: 20px;
    background: var(--bg-color);
    font-weight: 800;
    color: var(--text-color);
}

.stats-table tr td:first-child {
    border-radius: 15px 0 0 15px;
}

.stats-table tr td:last-child {
    border-radius: 0 15px 15px 0;
}

.dark-mode .stats-table td {
    background: #1e293b;
}

@media (max-width: 700px) {
    .flash-card-scene {
        height: 340px;
    }

    .flash-card-content {
        font-size: 1.4rem;
    }

    .flash-config-card {
        padding: 25px 20px;
    }

    .btn-flash-start {
        width: 100%;
        justify-content: center;
    }
}

/* Notificaciones Toast */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#toast-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

#toast-container>div {
    pointer-events: auto;
}

/* =====================================================
   FLASHCARDS DENTRO DE CLASE (class-flashcards-section)
   Usa el mismo patrón que .video-section / .unam-questions-section
   ===================================================== */

.class-flashcards-section {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-top: 6px solid #7c3aed;
    padding: 30px 40px;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    position: relative;
}

.dark-mode .class-flashcards-section {
    background: #1e293b;
    color: var(--text-color);
}

/* Header igual que .unam-header / .video-header */
.cfs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 25px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.cfs-header:hover {
    opacity: 0.85;
}

.cfs-header h2 {
    margin: 0;
    color: #5b21b6;
    font-size: 1.8rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cfs-header h2 i {
    color: #7c3aed;
}

.dark-mode .cfs-header h2 {
    color: var(--header-text);
}

/* Botón igual que .unam-toggle-btn pero en morado */
.cfs-toggle-btn {
    background: #ede9fe;
    color: #6d28d9;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
}

.cfs-toggle-btn:hover {
    background: #ddd6fe;
}

.dark-mode .cfs-toggle-btn {
    background: #3b0764;
    color: #c4b5fd;
}

.dark-mode .cfs-toggle-btn:hover {
    background: #4c0878;
}

/* Contenido colapsable */
.cfs-body {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.cfs-body.open {
    display: flex;
}

/* Barra de progreso */
.cfs-progress-bar-track {
    width: 100%;
    max-width: 600px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}

.dark-mode .cfs-progress-bar-track {
    background: #334155;
}

.cfs-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6d28d9, #a78bfa);
    border-radius: 99px;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cfs-progress-text {
    font-size: 0.82rem;
    font-weight: 800;
    color: #6d28d9;
    width: 100%;
    max-width: 600px;
    text-align: right;
    margin-top: -8px;
}

.dark-mode .cfs-progress-text {
    color: #a78bfa;
}

/* Flip card */
.cfs-scene {
    width: 100%;
    max-width: 600px;
    height: 200px;
    perspective: 1200px;
    cursor: pointer;
}

.cfs-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 18px;
}

.cfs-card.flipped {
    transform: rotateY(180deg);
}

.cfs-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    text-align: center;
    overflow: hidden;
}

.cfs-card-front {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 2px solid #c4b5fd;
    color: #4c1d95;
}

.dark-mode .cfs-card-front {
    background: linear-gradient(135deg, #2e1065 0%, #3b0764 100%);
    border-color: #7c3aed;
    color: #e9d5ff;
}

.cfs-card-back {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    color: #14532d;
    transform: rotateY(180deg);
}

.dark-mode .cfs-card-back {
    background: linear-gradient(135deg, #052e16 0%, #064e3b 100%);
    border-color: #22c55e;
    color: #bbf7d0;
}

.cfs-face-label {
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.55;
    margin-bottom: 10px;
}

.cfs-face-content {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.cfs-tema-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255, 255, 255, 0.55);
    color: inherit;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 20px;
    opacity: 0.75;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfs-flip-hint {
    font-size: 0.68rem;
    opacity: 0.45;
    position: absolute;
    bottom: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Controles de navegación */
.cfs-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 600px;
}

.cfs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cfs-btn-nav {
    background: #f1f5f9;
    color: #475569;
}

.cfs-btn-nav:hover:not(:disabled) {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.dark-mode .cfs-btn-nav {
    background: #334155;
    color: #cbd5e1;
}

.dark-mode .cfs-btn-nav:hover:not(:disabled) {
    background: #475569;
}

.cfs-btn-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cfs-btn-flip {
    background: #ede9fe;
    color: #6d28d9;
    flex: 1;
    justify-content: center;
    font-weight: 900;
}

.cfs-btn-flip:hover {
    background: #ddd6fe;
    transform: translateY(-1px);
}

.dark-mode .cfs-btn-flip {
    background: #3b0764;
    color: #c4b5fd;
}

.dark-mode .cfs-btn-flip:hover {
    background: #4c0878;
}

/* Responsive */
@media (max-width: 700px) {
    .class-flashcards-section {
        padding: 20px 20px;
    }
    .cfs-scene {
        height: 185px;
    }
    .cfs-face-content {
        font-size: 0.9rem;
    }
    .cfs-btn {
        padding: 9px 12px;
        font-size: 0.82rem;
    }
    .cfs-header h2 {
        font-size: 1.4rem;
    }
}

/* =============================================
   POMODORO TIMER WIDGET
   ============================================= */
.pomodoro-fab {
    background: #1e293b;
    transition: background 0.2s;
}
.pomodoro-fab--running { background: #dc2626; }
.pomodoro-fab:hover { background: #334155; }

.pomodoro-widget {
    position: fixed;
    bottom: 24px;
    right: 78px;
    width: 200px;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 16px;
    padding: 16px;
    z-index: 1001;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    font-family: inherit;
}
.pomodoro-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .75rem; font-weight: 700; opacity: .7; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: .06em;
}
.pomodoro-close {
    background: none; border: none; color: inherit; cursor: pointer; opacity: .6; font-size: .9rem;
}
.pomodoro-display {
    font-size: 2.6rem; font-weight: 900; text-align: center;
    letter-spacing: .04em; margin: 4px 0 12px;
}
.pomodoro-controls {
    display: flex; justify-content: center; gap: 12px;
}
.pomodoro-controls button {
    background: #334155; border: none; color: #f1f5f9;
    border-radius: 50%; width: 40px; height: 40px;
    font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pomodoro-controls button:hover { background: #475569; }
.pomodoro-cycles {
    text-align: center; font-size: .72rem; opacity: .5; margin-top: 10px;
}

/* =============================================
   STUDYTOK FILTER CHIPS
   ============================================= */
.stok-filter-bar {
    display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
    padding: 9px 16px 9px 76px; position: sticky; top: 0;
    background: var(--bg-color, #f8fafc); z-index: 20;
    border-bottom: 1px solid #e2e8f0;
    scrollbar-width: none;
}
.stok-filter-bar::-webkit-scrollbar { display: none; }
@media (min-width: 769px) {
    .stok-filter-bar { padding-left: 16px; }
}
.dark-mode .stok-filter-bar { background: #0f172a; border-color: #1e293b; }

.stok-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 99px;
    border: 1.5px solid #e2e8f0; background: transparent;
    font-size: .8rem; font-weight: 700; cursor: pointer;
    font-family: inherit; color: #64748b;
    transition: all 0.15s;
}
.stok-chip--active {
    background: #2563eb; border-color: #2563eb; color: #fff;
}
.stok-chip:hover:not(.stok-chip--active) { border-color: #94a3b8; color: #334155; }
.dark-mode .stok-chip { border-color: #334155; color: #94a3b8; }
.dark-mode .stok-chip:hover:not(.stok-chip--active) { border-color: #475569; color: #e2e8f0; }

/* =============================================
   SIMULACRO TIMER
   ============================================= */
.sim-timer-wrapper {
    position: sticky; top: 0; z-index: 50;
    background: #fff; border-radius: 0 0 12px 12px;
    padding: 10px 18px 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    margin-bottom: 16px;
}
.dark-mode .sim-timer-wrapper { background: #1e293b; }
.sim-timer-info {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 1rem;
}
.sim-timer-info > i { color: #2563eb; }
#sim-timer-display { font-size: 1.4rem; font-weight: 900; letter-spacing: .04em; }
.sim-timer-label { font-size: .8rem; font-weight: 600; opacity: .6; }
.sim-timer-track {
    height: 5px; background: #e2e8f0; border-radius: 99px;
    margin-top: 8px; overflow: hidden;
}
.sim-timer-bar {
    height: 100%; width: 100%; background: #2563eb;
    border-radius: 99px; transition: width 1s linear, background 0.5s;
}
.dark-mode .sim-timer-track { background: #334155; }

/* =============================================
   CLASS NOTES PANEL
   ============================================= */
.class-notes-panel {
    width: 100%; max-width: 1000px; margin: 30px auto;
    background: #ffffff; border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border-top: 6px solid #f59e0b; padding: 30px 40px;
    box-sizing: border-box;
}
.dark-mode .class-notes-panel { background: #1e293b; color: var(--text-color); }


.class-notes-body {
    display: none; padding-top: 8px;
}
.class-notes-hint { display: block; font-size: .72rem; opacity: .6; font-weight: 600; margin-bottom: 10px; }
.class-notes-textarea {
    width: 100%; min-height: 120px; max-height: 400px;
    border: 1.5px solid #fde68a; border-radius: 10px;
    padding: 12px 16px; font-family: inherit; font-size: .95rem;
    background: #fffbeb; color: inherit; resize: vertical;
    line-height: 1.6; box-sizing: border-box;
}
.dark-mode .class-notes-textarea { background: #1c1a10; border-color: #78350f; }
.class-notes-textarea:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

/* =====================================================
   FEATURE 1: Weakness Panel (Stats)
   ===================================================== */
.weakness-panel { margin-top: 24px; }
.weakness-title {
    font-size: .85rem; font-weight: 800; color: #64748b;
    text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.weakness-item { margin-bottom: 12px; }
.weakness-item-header {
    display: flex; align-items: center; gap: 8px;
    font-size: .9rem; font-weight: 700; margin-bottom: 5px;
}
.weakness-pct { margin-left: auto; font-weight: 900; }
.weakness-total { font-size: .75rem; font-weight: 600; opacity: .55; }
.weakness-bar-track { height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.dark-mode .weakness-bar-track { background: #334155; }
.weakness-bar { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.weakness-flashcard {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .85rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9;
}
.dark-mode .weakness-flashcard { border-color: #1e293b; }
.weakness-empty { text-align: center; padding: 20px; color: #64748b; font-size: .9rem; }

/* =====================================================
   FEATURE 2: Daily Plan (Guided Study)
   ===================================================== */
.daily-plan-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1.5px solid #86efac; border-radius: 16px;
    padding: 20px 24px; margin-bottom: 24px;
}
.dark-mode .daily-plan-card { background: #0d1f13; border-color: #166534; }
.daily-plan-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.daily-plan-header h3 { margin: 0; font-size: 1.1rem; }
.daily-plan-date { margin-left: auto; font-size: .78rem; font-weight: 600; opacity: .6; text-transform: capitalize; }
.daily-plan-items { display: flex; flex-direction: column; gap: 10px; }
.daily-plan-item {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.7); border-radius: 10px; padding: 12px 14px;
}
.dark-mode .daily-plan-item { background: rgba(255,255,255,.04); }
.daily-plan-item--done { opacity: .6; }
.daily-plan-icon { font-size: 1.2rem; flex-shrink: 0; color: #2563eb; }
.daily-plan-content { flex: 1; }
.daily-plan-item-title { font-weight: 800; font-size: .9rem; }
.daily-plan-item-sub { font-size: .78rem; opacity: .7; margin-top: 2px; }
.daily-plan-btn {
    flex-shrink: 0; background: #2563eb; color: #fff;
    border: none; border-radius: 8px; padding: 7px 14px;
    font-size: .8rem; font-weight: 800; cursor: pointer; font-family: inherit;
}
.daily-plan-btn:hover { filter: brightness(1.1); }


/* =====================================================
   FEATURE 4: Subnode Quiz Modal
   ===================================================== */
.subnode-quiz-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 9000; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.subnode-quiz-modal {
    background: #fff; border-radius: 20px; width: 100%; max-width: 480px;
    padding: 24px; box-shadow: 0 25px 60px rgba(0,0,0,.2);
    max-height: 80vh; display: flex; flex-direction: column;
}
.dark-mode .subnode-quiz-modal { background: #1e293b; }
.subnode-quiz-header {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 800; font-size: .95rem; margin-bottom: 12px;
}
.subnode-quiz-header button { background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .6; color: inherit; }
.subnode-quiz-counter { font-size: .78rem; opacity: .5; margin-bottom: 16px; }
.subnode-quiz-cards { flex: 1; overflow: hidden; position: relative; min-height: 140px; }
.subnode-quiz-card {
    display: none; flex-direction: column; gap: 12px;
}
.subnode-quiz-card--active { display: flex; }
.subnode-quiz-q { font-weight: 700; font-size: .95rem; line-height: 1.5; }
.subnode-quiz-divider { border: none; border-top: 1.5px dashed #e2e8f0; }
.dark-mode .subnode-quiz-divider { border-color: #334155; }
.subnode-quiz-a { font-size: .9rem; line-height: 1.6; color: #0f766e; }
.dark-mode .subnode-quiz-a { color: #34d399; }
.subnode-quiz-nav {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 20px;
}
.subnode-quiz-nav button {
    background: #f1f5f9; border: none; border-radius: 50%;
    width: 36px; height: 36px; cursor: pointer; font-size: .9rem;
    display: flex; align-items: center; justify-content: center; color: inherit;
}
.dark-mode .subnode-quiz-nav button { background: #334155; color: #f1f5f9; }
.subnode-quiz-nav span { font-weight: 700; font-size: .85rem; opacity: .7; }
.subnode-quiz-icon-btn {
    font-size: .7rem; opacity: .5; cursor: pointer; margin-left: 6px;
    transition: opacity 0.15s;
}
.subnode-quiz-icon-btn:hover { opacity: 1; }

/* =====================================================
   FEATURE 5: Timeline (Historia)
   ===================================================== */
/* Sección colapsable de Línea del Tiempo (clases de Historia) */
.class-timeline-section {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-top: 6px solid #0891b2;
    padding: 30px 40px;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    position: relative;
}
.dark-mode .class-timeline-section { background: #1e293b; color: var(--text-color); }
.cts-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 25px;
    cursor: pointer; transition: opacity 0.2s;
}
.cts-header:hover { opacity: 0.85; }
.cts-header h2 {
    margin: 0; color: #0e7490; font-size: 1.8rem; font-weight: 900;
    display: flex; align-items: center; gap: 12px;
}
.cts-header h2 i { color: #0891b2; }
.dark-mode .cts-header h2 { color: var(--header-text); }
.cts-toggle-btn {
    background: #cffafe; color: #0e7490; border: none;
    padding: 8px 16px; border-radius: 20px; font-weight: 700; cursor: pointer;
    transition: all 0.2s ease; font-family: 'Nunito', sans-serif;
    white-space: nowrap; flex-shrink: 0;
}
.cts-toggle-btn:hover { background: #a5f3fc; }
.dark-mode .cts-toggle-btn { background: #0e2935; color: #67e8f9; }
.dark-mode .cts-toggle-btn:hover { background: #134150; }
.cts-body { padding-top: 4px; }

/* Container interno (track + eventos) — usado por renderTimeline */
.timeline-container {
    max-width: 900px; margin: 24px auto 0; width: 100%;
    background: #f8fafc; border-radius: 14px; padding: 20px 24px;
    border: 1.5px solid #e2e8f0;
}
.dark-mode .timeline-container { background: #0f172a; border-color: #1e293b; }
.timeline-header {
    font-weight: 800; font-size: .95rem; color: #b45309;
    display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
}
.timeline-track {
    display: flex; flex-direction: column; gap: 0;
    border-left: 2px solid #e2e8f0; margin-left: 16px; padding-left: 20px;
}
.dark-mode .timeline-track { border-color: #334155; }
.timeline-event {
    position: relative; padding-bottom: 16px; display: flex; flex-direction: column;
}
.timeline-dot {
    position: absolute; left: -27px; top: 4px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #b45309; border: 2px solid #fff; box-shadow: 0 0 0 2px #b45309;
}
.dark-mode .timeline-dot { border-color: #0f172a; }
.timeline-year { font-weight: 900; font-size: .85rem; color: #b45309; margin-bottom: 2px; }
.timeline-desc { font-size: .85rem; line-height: 1.5; color: #475569; }
.dark-mode .timeline-desc { color: #94a3b8; }

/* =====================================================
   SKIP LINK (Accesibilidad)
   ===================================================== */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--menu-accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
    font-weight: 800;
    z-index: 10000;
    transition: top 0.2s;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   FOCUS VISIBLE (Accesibilidad — navegación con teclado)
   ===================================================== */
.class-item:focus-visible,
.subject-item:focus-visible,
button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid var(--menu-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* =====================================================
   FLOATING RESET CLASS BUTTON
   ===================================================== */
.floating-reset-class {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transition: all 0.25s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.floating-reset-class.hidden {
    display: none;
}
.floating-reset-class:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.45);
}
.floating-reset-class.spinning i {
    animation: fabSpin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fabSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Reset confirmation dialog */
.reset-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}
.reset-confirm-overlay.visible {
    background: rgba(0, 0, 0, 0.5);
}
.reset-confirm-dialog {
    background: var(--sub-node-bg, #fff);
    color: var(--text-color, #1e293b);
    border-radius: 20px;
    padding: 32px 28px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 340px;
    width: 90%;
}
.reset-confirm-overlay.visible .reset-confirm-dialog {
    transform: scale(1);
    opacity: 1;
}
.reset-confirm-icon {
    font-size: 2.5rem;
    color: #f59e0b;
    margin-bottom: 12px;
    display: block;
}
.reset-confirm-dialog h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
}
.reset-confirm-dialog p {
    margin: 0 0 20px;
    font-size: 0.95rem;
    opacity: 0.75;
}
.reset-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.reset-confirm-actions button {
    padding: 10px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.reset-confirm-cancel {
    background: var(--card-bg, #f1f5f9);
    color: var(--text-color, #475569);
}
.reset-confirm-cancel:hover {
    background: #e2e8f0;
}
.reset-confirm-ok {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}
.reset-confirm-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

/* =====================================================
   FLOATING NEXT CLASS BUTTON
   ===================================================== */
.floating-next-class {
    background: var(--menu-accent);
    display: none;
    transition: all 0.25s ease;
}
.floating-next-class.visible {
    display: flex;
}
.floating-next-class:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37,99,235,.45);
}

/* =====================================================
   BANCO LIVE TRACKER
   ===================================================== */
.banco-tracker {
    position: sticky;
    top: 8px;
    z-index: 20;
    background: var(--sub-node-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.banco-tracker .bt-stats {
    display: flex;
    gap: 14px;
    font-weight: 800;
    font-size: 1rem;
    align-items: baseline;
}
.banco-tracker .bt-stat-correct { color: #10b981; }
.banco-tracker .bt-stat-incorrect { color: #ef4444; }
.banco-tracker .bt-stat-pct {
    font-size: 1.25rem;
    font-weight: 900;
    color: #94a3b8;
}
.banco-tracker .bt-progress {
    font-size: 0.88rem;
    color: var(--text-color, #64748b);
    font-weight: 600;
}
.banco-tracker .bt-bar {
    flex-basis: 100%;
    height: 6px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
    overflow: hidden;
    order: 99;
}
.banco-tracker .bt-bar-fill {
    height: 100%;
    width: 0%;
    background: #94a3b8;
    transition: width .3s ease, background .3s ease;
}
.dark-mode .banco-tracker {
    background: var(--sub-node-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* =====================================================
   CLASS QUIZ SUMMARY
   ===================================================== */
.class-quiz-summary {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
    border-top: 6px solid #10b981;
    padding: 30px 35px;
    animation: fadeInPage 0.5s ease;
}
[data-theme="dark"] .class-quiz-summary {
    background: var(--card-bg);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
}
.cqs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.cqs-header i {
    font-size: 1.8rem;
}
.cqs-header h2 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-primary, #1e293b);
    margin: 0;
}
.cqs-total {
    text-align: center;
    padding: 18px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 18px;
}
[data-theme="dark"] .cqs-total {
    border-bottom-color: #334155;
}
.cqs-total-number {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}
.cqs-total-detail {
    font-size: 0.95rem;
    color: #64748b;
    margin-top: 4px;
    font-weight: 600;
}
.cqs-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}
[data-theme="dark"] .cqs-bar {
    background: #334155;
}
.cqs-bar-total {
    height: 10px;
    max-width: 300px;
    margin: 12px auto 0;
}
.cqs-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.6s ease;
}
.cqs-breakdown {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}
.cqs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.cqs-row-label {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cqs-row-stats {
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
}
.cqs-correct {
    font-weight: 900;
    color: #10b981;
}
.cqs-pct {
    font-weight: 900;
    margin-left: 4px;
}
.cqs-row .cqs-bar {
    flex: 1;
    min-width: 80px;
}
.cqs-recommendation {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 18px;
}
.cqs-rec-good {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}
[data-theme="dark"] .cqs-rec-good {
    background: #064e3b;
    color: #6ee7b7;
}
.cqs-rec-review {
    background: #fef3c7;
    color: #92400e;
    border-left: 4px solid #f59e0b;
}
[data-theme="dark"] .cqs-rec-review {
    background: #78350f;
    color: #fde68a;
}
.cqs-recommendation i {
    font-size: 1.2rem;
}
.cqs-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--menu-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cqs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.cqs-btn-retry {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    margin-bottom: 8px;
}
.cqs-btn-retry:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}
@media (max-width: 600px) {
    .class-quiz-summary { padding: 20px 16px; }
    .cqs-row-label { min-width: 100%; }
    .cqs-total-number { font-size: 2.4rem; }
}

/* Celebration of a summary section (total / individual row) when the
   section's average meets or exceeds the configured minimum passing grade. */
.cqs-total.cqs-celebrate,
.cqs-row.cqs-celebrate {
    position: relative;
    overflow: visible;
    animation: cqsSectionCelebrate 1.4s ease-out;
    border-radius: 10px;
}
.cqs-total.cqs-celebrate {
    animation-duration: 1.6s;
}
@keyframes cqsSectionCelebrate {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);   background-color: transparent; }
    20%  { box-shadow: 0 0 26px 8px rgba(16, 185, 129, 0.55), 0 0 50px 16px rgba(52, 211, 153, 0.25); background-color: rgba(16, 185, 129, 0.08); }
    55%  { box-shadow: 0 0 14px 4px rgba(16, 185, 129, 0.3);  background-color: rgba(16, 185, 129, 0.05); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);   background-color: transparent; }
}
[data-theme="dark"] .cqs-total.cqs-celebrate,
[data-theme="dark"] .cqs-row.cqs-celebrate {
    animation-name: cqsSectionCelebrateDark;
}
@keyframes cqsSectionCelebrateDark {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);   background-color: transparent; }
    20%  { box-shadow: 0 0 26px 8px rgba(52, 211, 153, 0.6), 0 0 55px 18px rgba(16, 185, 129, 0.3); background-color: rgba(52, 211, 153, 0.12); }
    55%  { box-shadow: 0 0 14px 4px rgba(52, 211, 153, 0.35); background-color: rgba(52, 211, 153, 0.06); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);   background-color: transparent; }
}

/* =====================================================
   TIMER COLOR FEEDBACK
   ===================================================== */
#sim-timer-display.timer-warning { color: #f59e0b; }
#sim-timer-display.timer-danger  { color: #dc2626; }

/* =====================================================
   SIMULACRO — DESGLOSE POR MATERIA
   ===================================================== */
.sim-breakdown {
    width: 100%;
    max-width: 500px;
    margin: 18px auto 10px;
}
.sim-breakdown-title {
    font-weight: 900;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: var(--text-color);
}
.sim-breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.sim-breakdown-row i {
    width: 18px;
    text-align: center;
}
.sim-breakdown-label {
    flex: 1;
    color: var(--card-text);
}
.sim-breakdown-bar-track {
    flex: 2;
    height: 7px;
    background: #e2e8f0;
    border-radius: 99px;
    overflow: hidden;
}
.dark-mode .sim-breakdown-bar-track {
    background: #334155;
}
.sim-breakdown-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}
.sim-breakdown-score {
    min-width: 50px;
    text-align: right;
    font-weight: 900;
    font-size: 0.82rem;
}

/* =====================================================
   PREFERS-REDUCED-MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   TABLA PERIÓDICA INTERACTIVA
   ===================================================== */
.pt-grid {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 2px;
    margin-top: 10px;
    overflow-x: auto;
    min-width: 0;
}
.pt-el {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    min-width: 0;
    border: 1px solid rgba(0,0,0,0.1);
    position: relative;
}
.pt-el:hover {
    transform: scale(1.3);
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.pt-z { font-size: 0.5rem; opacity: 0.7; line-height: 1; }
.pt-sym { font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
.pt-mass { font-size: 0.4rem; opacity: 0.6; line-height: 1; }
.pt-period-lbl {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 600; color: var(--card-text);
}
.pt-label-lan {
    display: flex; align-items: center; justify-content: flex-end;
    font-size: 0.55rem; font-weight: 600; color: var(--card-text);
    padding-right: 4px;
}
.pt-lan-ref {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.5rem; color: var(--card-text);
    cursor: pointer; border: 1px dashed var(--card-text); border-radius: 3px;
    opacity: 0.6;
}

/* Element category colors — Light mode (pasteles con texto oscuro) */
.pt-alcalino { background: #fde68a; color: #713f12; }         /* pastel amber */
.pt-alcalinoterreo { background: #fef08a; color: #713f12; }   /* pastel yellow */
.pt-transicion { background: #fecaca; color: #7f1d1d; }       /* pastel red */
.pt-metal { background: #d1d5db; color: #1f2937; }            /* pastel gray */
.pt-metaloide { background: #a7f3d0; color: #064e3b; }        /* pastel emerald */
.pt-no-metal { background: #bfdbfe; color: #1e3a5f; }         /* pastel blue */
.pt-halogeno { background: #ddd6fe; color: #3b0764; }         /* pastel violet */
.pt-gas-noble { background: #a5f3fc; color: #164e63; }        /* pastel cyan */
.pt-lantanido { background: #fbcfe8; color: #831843; }        /* pastel pink */
.pt-actinido { background: #e9d5ff; color: #581c87; }         /* pastel purple */

/* Element category colors — Dark mode */
body.dark-mode .pt-alcalino { background: #92400e; color: #fef3c7; }
body.dark-mode .pt-alcalinoterreo { background: #854d0e; color: #fef9c3; }
body.dark-mode .pt-transicion { background: #7f1d1d; color: #fecaca; }
body.dark-mode .pt-metal { background: #4b5563; color: #e5e7eb; }
body.dark-mode .pt-metaloide { background: #064e3b; color: #a7f3d0; }
body.dark-mode .pt-no-metal { background: #1e3a5f; color: #bfdbfe; }
body.dark-mode .pt-halogeno { background: #4c1d95; color: #ddd6fe; }
body.dark-mode .pt-gas-noble { background: #155e75; color: #a5f3fc; }
body.dark-mode .pt-lantanido { background: #831843; color: #fbcfe8; }
body.dark-mode .pt-actinido { background: #581c87; color: #e9d5ff; }

/* Selected element */
.pt-el.pt-selected {
    outline: 3px solid #2563eb;
    outline-offset: 1px;
    transform: scale(1.15);
    z-index: 9;
    box-shadow: 0 0 12px rgba(37,99,235,0.5);
}
body.dark-mode .pt-el.pt-selected {
    outline-color: #60a5fa;
    box-shadow: 0 0 12px rgba(96,165,250,0.5);
}

/* Legend */
.pt-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-bottom: 10px; font-size: 0.7rem;
}
.pt-legend-item {
    display: flex; align-items: center; gap: 3px; color: var(--text-color);
}
.pt-legend-dot {
    width: 10px; height: 10px; border-radius: 2px; display: inline-block;
    border: 1px solid rgba(0,0,0,0.15);
}

/* Info panel */
.pt-info-panel {
    background: var(--sub-node-bg);
    border: 1px solid var(--menu-hover);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    animation: fadeInDown 0.3s ease;
}
.pt-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
}
.pt-info-z { font-size: 1rem; opacity: 0.8; }
.pt-info-sym { font-size: 2.2rem; font-weight: 800; }
.pt-info-name { font-size: 1.2rem; font-weight: 600; }
.pt-info-body { padding: 10px 20px 15px; }
.pt-info-row {
    padding: 5px 0;
    font-size: 0.85rem;
    color: var(--text-color);
    border-bottom: 1px solid var(--menu-hover);
}
.pt-info-row:last-child { border-bottom: none; }
.pt-info-row b { color: var(--header-text); }
.pt-info-row code {
    background: var(--menu-hover);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-color);
}
.pt-info-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.6;
}
.pt-info-close:hover { opacity: 1; }

/* Landscape toggle button */
.pt-landscape-btn {
    display: none;
    margin: 0 auto 10px;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    gap: 6px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(8,145,178,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.pt-landscape-btn:active { transform: scale(0.95); }
@media (max-width: 768px) {
    .pt-landscape-btn { display: flex; }
}

/* Forced landscape mode via CSS rotation */
@media (max-width: 768px) and (orientation: portrait) {
    body.pt-forced-landscape #dynamic-content-area {
        position: fixed;
        top: 0; left: 0;
        width: 100vh;
        height: 100vw;
        transform: rotate(90deg);
        transform-origin: top left;
        translate: 100vw 0;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 9999;
        background: var(--bg-primary);
        padding: 10px;
    }
    body.pt-forced-landscape .sidebar,
    body.pt-forced-landscape .mobile-header {
        display: none !important;
    }
}

/* Responsive: smaller screens */
@media (max-width: 768px) {
    .pt-grid { gap: 1px; }
    .pt-el { padding: 1px 0; }
    .pt-z { font-size: 0.35rem; }
    .pt-sym { font-size: 0.55rem; }
    .pt-mass { display: none; }
    .pt-period-lbl { font-size: 0.45rem; }
    .pt-label-lan { font-size: 0.4rem; }
    .pt-lan-ref { font-size: 0.35rem; }
    .pt-info-sym { font-size: 1.6rem; }
    .pt-info-name { font-size: 1rem; }
}

/* ── Periodic Table Page Layout ── */
.pt-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 15px 30px;
}
.pt-page-header {
    text-align: center;
    margin-bottom: 14px;
}
.pt-page-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--header-text);
    margin: 0 0 4px;
}
.pt-page-header h2 i {
    color: #0891b2;
    margin-right: 6px;
}
.pt-page-header p {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    margin: 0;
}

/* ── Collapsible Notes below the table ── */
.pt-notes-wrapper {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pt-notes-section {
    background: var(--sub-node-bg, #fff);
    border: 1px solid var(--menu-hover, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}
.pt-notes-section:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.pt-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-primary, #f9fafb);
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
}
.pt-notes-header:hover {
    background: var(--menu-hover, #f3f4f6);
}
.pt-notes-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--header-text);
}
.pt-notes-header h3 i {
    color: #0891b2;
    margin-right: 6px;
}
.pt-notes-chevron {
    font-size: 0.75rem;
    color: var(--text-secondary, #9ca3af);
    transition: transform 0.25s ease;
}
.pt-notes-section.pt-notes-open .pt-notes-chevron {
    transform: rotate(180deg);
}
.pt-notes-body {
    display: none;
    padding: 10px 14px 14px;
    gap: 8px;
}
.pt-notes-section.pt-notes-open .pt-notes-header {
    border-bottom-color: var(--menu-hover, #e5e7eb);
}
.pt-notes-section.pt-notes-open .pt-notes-body {
    display: flex;
    flex-direction: column;
}
.pt-note-card {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-color, #374151);
    padding: 8px 12px;
    background: var(--bg-primary, #f9fafb);
    border-radius: 8px;
    border-left: 3px solid #0891b2;
}
.pt-note-card b {
    color: var(--header-text, #111827);
}
.pt-note-tip {
    display: block;
    margin-top: 4px;
    padding: 5px 8px;
    background: linear-gradient(135deg, rgba(8,145,178,0.08), rgba(6,182,212,0.08));
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0e7490;
}
.pt-note-tip i {
    margin-right: 4px;
}
body.dark-mode .pt-note-tip {
    background: linear-gradient(135deg, rgba(8,145,178,0.15), rgba(6,182,212,0.15));
    color: #22d3ee;
}

/* =====================================================
   DIAGRAMA DE MOELLER
   ===================================================== */
.moe-page .moe-title i { color: #7c3aed; }

.moe-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.78rem;
}
.moe-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--sub-node-bg, #fff);
    border: 1px solid var(--menu-hover, #e5e7eb);
    color: var(--text-color, #374151);
    font-weight: 600;
}
.moe-legend-dot {
    width: 14px; height: 14px; border-radius: 4px;
    display: inline-block;
}
.moe-legend-dot.moe-cell-s { background: #3b82f6; }
.moe-legend-dot.moe-cell-p { background: #10b981; }
.moe-legend-dot.moe-cell-d { background: #f59e0b; }
.moe-legend-dot.moe-cell-f { background: #a855f7; }

.moe-diagram-wrap {
    background: var(--sub-node-bg, #fff);
    border: 1px solid var(--menu-hover, #e5e7eb);
    border-radius: 14px;
    padding: 18px 10px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin-bottom: 16px;
    text-align: center;
}
body.dark-mode .moe-diagram-wrap {
    background: #1f2937;
    border-color: #374151;
}
.moe-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.moe-diagram-hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}
.moe-diagram-hint i {
    color: #dc2626;
    margin-right: 4px;
}

/* SVG cell colors */
.moe-cell rect {
    stroke: rgba(0,0,0,0.15);
    stroke-width: 1;
    transition: filter 0.2s;
}
.moe-cell:hover rect {
    filter: brightness(1.1);
}
.moe-cell-s rect { fill: #bfdbfe; }
.moe-cell-p rect { fill: #bbf7d0; }
.moe-cell-d rect { fill: #fed7aa; }
.moe-cell-f rect { fill: #e9d5ff; }
body.dark-mode .moe-cell-s rect { fill: #1e40af; }
body.dark-mode .moe-cell-p rect { fill: #065f46; }
body.dark-mode .moe-cell-d rect { fill: #9a3412; }
body.dark-mode .moe-cell-f rect { fill: #6b21a8; }

.moe-cell-label {
    font-family: 'Segoe UI', sans-serif;
    font-size: 22px;
    font-weight: 700;
    fill: #111827;
    pointer-events: none;
}
body.dark-mode .moe-cell-label {
    fill: #f9fafb;
}

/* SVG arrows */
.moe-arrow {
    stroke: #dc2626;
    stroke-width: 2.5;
    stroke-linecap: round;
    fill: none;
    opacity: 0.85;
}
body.dark-mode .moe-arrow {
    stroke: #f87171;
}

/* Filling-order sequence */
.moe-order-box {
    background: var(--sub-node-bg, #fff);
    border: 1px solid var(--menu-hover, #e5e7eb);
    border-radius: 14px;
    padding: 14px 16px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin-bottom: 8px;
}
body.dark-mode .moe-order-box {
    background: #1f2937;
    border-color: #374151;
}
.moe-order-box h3 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--header-text, #111827);
}
.moe-order-box h3 i { color: #7c3aed; margin-right: 5px; }
.moe-seq {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 2px;
    align-items: center;
    font-size: 0.82rem;
    line-height: 1.6;
}
.moe-seq-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,0.08);
    color: #111827;
    position: relative;
}
.moe-seq-item sup {
    font-size: 0.65em;
    font-weight: 800;
    margin-left: 1px;
}
.moe-seq-step {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 99px;
    background: rgba(0,0,0,0.1);
    font-size: 0.6rem;
    font-weight: 800;
    color: #111827;
}
.moe-seq-s { background: #bfdbfe; }
.moe-seq-p { background: #bbf7d0; }
.moe-seq-d { background: #fed7aa; }
.moe-seq-f { background: #e9d5ff; }
body.dark-mode .moe-seq-s { background: #1e40af; color: #dbeafe; }
body.dark-mode .moe-seq-p { background: #065f46; color: #bbf7d0; }
body.dark-mode .moe-seq-d { background: #9a3412; color: #fed7aa; }
body.dark-mode .moe-seq-f { background: #6b21a8; color: #e9d5ff; }
body.dark-mode .moe-seq-item { color: inherit; border-color: rgba(255,255,255,0.1); }
body.dark-mode .moe-seq-step { background: rgba(0,0,0,0.35); color: inherit; }
.moe-seq-arrow {
    color: #dc2626;
    font-weight: 800;
    margin: 0 2px;
    opacity: 0.7;
}
body.dark-mode .moe-seq-arrow { color: #f87171; }

.moe-notes { margin-top: 16px; }
.moe-notes .pt-notes-header h3 i { color: #7c3aed; }
.moe-code-big {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(124,58,237,0.08);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6d28d9;
    line-height: 1.5;
    word-break: break-word;
}
body.dark-mode .moe-code-big {
    background: rgba(167,139,250,0.15);
    color: #c4b5fd;
}

@media (max-width: 640px) {
    .moe-cell-label { font-size: 18px; }
    .moe-seq { font-size: 0.74rem; }
    .moe-seq-item { padding: 3px 6px; }
    .moe-seq-step { min-width: 15px; height: 15px; font-size: 0.55rem; }
}

/* ── Streak Widget ── */
.streak-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 14px;
    background: var(--sub-node-bg, #fff);
    border: 1px solid var(--menu-hover, #e5e7eb);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    max-width: 320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.streak-active {
    border-color: #f59e0b;
    box-shadow: 0 2px 16px rgba(245,158,11,0.2);
}
.streak-fire {
    font-size: 1.8rem;
    line-height: 1;
}
.streak-fire-active { color: #f59e0b; }
.streak-fire-inactive { color: #d1d5db; }
.streak-info {
    flex: 1;
}
.streak-count {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--header-text, #111827);
    line-height: 1;
}
.streak-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}
.streak-best {
    font-size: 0.7rem;
    color: var(--text-secondary, #9ca3af);
    white-space: nowrap;
}
.streak-best i { color: #f59e0b; margin-right: 3px; }

/* ── Sidebar Streak Chip ── */
.pw-streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 99px;
    line-height: 1;
    transition: all 0.3s ease;
}
.pw-streak-chip i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.pw-streak-text {
    font-weight: 600;
    opacity: 0.8;
    font-size: 0.6rem;
}
.pw-streak-active {
    color: #92400e;
    background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.2));
    border: 1px solid rgba(245,158,11,0.3);
}
.pw-streak-active i {
    color: #f59e0b;
    filter: drop-shadow(0 0 3px rgba(245,158,11,0.5));
}
.pw-streak-inactive {
    color: #9ca3af;
    background: rgba(156,163,175,0.08);
    border: 1px solid rgba(156,163,175,0.15);
}
.pw-streak-inactive i { color: #d1d5db; }
body.dark-mode .pw-streak-active {
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.12));
    border-color: rgba(251,191,36,0.25);
}
body.dark-mode .pw-streak-active i {
    color: #fbbf24;
    filter: drop-shadow(0 0 4px rgba(251,191,36,0.4));
}
body.dark-mode .pw-streak-inactive {
    color: #6b7280;
    background: rgba(75,85,99,0.15);
    border-color: rgba(75,85,99,0.2);
}
body.dark-mode .pw-streak-inactive i { color: #4b5563; }

/* ── Profile Modal Streak Panel ── */
.pm-streak-panel {
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--bg-primary, #f9fafb);
    border-radius: 10px;
    border: 1px solid var(--menu-hover, #e5e7eb);
}
.pm-streak-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pm-streak-fire {
    font-size: 1.6rem;
    line-height: 1;
}
.pm-streak-fire-active { color: #f59e0b; }
.pm-streak-fire-inactive { color: #d1d5db; }
body.dark-mode .pm-streak-fire-inactive { color: #4b5563; }
.pm-streak-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pm-streak-count {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--header-text, #111827);
    line-height: 1;
}
.pm-streak-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
}
.pm-streak-best {
    font-size: 0.72rem;
    color: var(--text-secondary, #9ca3af);
    white-space: nowrap;
}
.pm-streak-best i { color: #f59e0b; margin-right: 2px; }

/* Score badge on class items */
.score-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}
.class-item.studied .score-badge { display: none !important; }
.score-badge.score-ok { background: #d1fae5; color: #065f46; }
.score-badge.score-warn { background: #fef3c7; color: #92400e; }
.score-badge.score-low { background: #fee2e2; color: #991b1b; }
body.dark-mode .score-badge.score-ok { background: #064e3b; color: #6ee7b7; }
body.dark-mode .score-badge.score-warn { background: #78350f; color: #fcd34d; }
body.dark-mode .score-badge.score-low { background: #7f1d1d; color: #fca5a5; }

/* --- Per-question countdown timer (Simulacro) --- */
.sim-q-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    font-size: 0.72rem;
    font-weight: 600;
    color: #0369a1;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.sim-q-timer-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #0ea5e9;
    transition: width 1s linear;
    width: 100%;
}
.sim-q-timer-text {
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sim-q-timer-warning {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}
.sim-q-timer-warning .sim-q-timer-bar { background: #f59e0b; }
.sim-q-timer-danger {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}
.sim-q-timer-danger .sim-q-timer-bar { background: #ef4444; }
.sim-q-timer-expired {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
    opacity: 0.7;
}
.sim-q-timer-expired .sim-q-timer-bar { width: 0% !important; }

/* Dark mode */
body.dark-mode .sim-q-timer { background: #0c4a6e; border-color: #075985; color: #7dd3fc; }
body.dark-mode .sim-q-timer-bar { background: #0284c7; }
body.dark-mode .sim-q-timer-warning { background: #78350f; border-color: #92400e; color: #fcd34d; }
body.dark-mode .sim-q-timer-warning .sim-q-timer-bar { background: #f59e0b; }
body.dark-mode .sim-q-timer-danger { background: #7f1d1d; border-color: #991b1b; color: #fca5a5; }
body.dark-mode .sim-q-timer-danger .sim-q-timer-bar { background: #ef4444; }
body.dark-mode .sim-q-timer-expired { background: #7f1d1d; border-color: #991b1b; }
/* ─── TEMARIO DE LA GUÍA UNAM (página /temario) ─── */
.tg-page { max-width: 980px; margin: 0 auto; padding: 10px 4px 60px; }
.tg-header h1 { font-size: 1.5rem; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.tg-subtle { color: #64748b; font-size: 0.85rem; line-height: 1.5; margin: 0; }

.tg-global {
    display: flex; align-items: center; gap: 16px; margin: 18px 0 14px;
    padding: 14px 18px; border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4, #ecfeff); border: 1px solid #bbf7d0;
}
.tg-global-num { font-size: 2.1rem; font-weight: 800; color: #16a34a; line-height: 1; }
.tg-global-txt { font-size: 0.9rem; color: #334155; line-height: 1.45; }

.tg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tg-tab {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 13px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
    background: transparent; border: 1.5px solid; transition: all .18s ease;
}
.tg-tab:hover { transform: translateY(-1px); }
.tg-tab-pct { font-size: 0.72rem; opacity: 0.75; font-weight: 700; }

.tg-resumen-materia { margin-bottom: 16px; }
.tg-barra {
    display: flex; height: 9px; border-radius: 999px; overflow: hidden;
    background: #fee2e2; margin-bottom: 10px;
}
.tg-barra-ok { background: #16a34a; }
.tg-barra-mid { background: #f59e0b; }

.tg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tg-chip {
    font-size: 0.76rem; padding: 4px 11px; border-radius: 999px;
    background: #f1f5f9; color: #475569;
}
.tg-chip b { font-weight: 800; }
.tg-chip-ok { background: #dcfce7; color: #15803d; }
.tg-chip-mid { background: #fef3c7; color: #b45309; }
.tg-chip-no { background: #fee2e2; color: #b91c1c; }

.tg-filtro {
    cursor: pointer; font-size: 0.8rem; font-weight: 600; padding: 7px 14px;
    border-radius: 8px; border: 1.5px solid #cbd5e1; background: #fff; color: #475569;
    display: inline-flex; align-items: center; gap: 7px; transition: all .18s ease;
}
.tg-filtro:hover { border-color: #16a34a; color: #16a34a; }
.tg-filtro-on { background: #16a34a; border-color: #16a34a; color: #fff; }

.tg-arbol { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.tg-nodo {
    display: flex; align-items: center; gap: 9px; padding: 7px 12px;
    border-bottom: 1px solid #f1f5f9; font-size: 0.86rem;
}
.tg-nodo:last-child { border-bottom: none; }
.tg-prof-0 { background: #f8fafc; font-weight: 700; font-size: 0.92rem; }
.tg-prof-1 { padding-left: 30px; }
.tg-prof-2 { padding-left: 52px; }
.tg-prof-3 { padding-left: 74px; }
.tg-prof-4 { padding-left: 96px; }

.tg-cod {
    font-family: 'Courier New', monospace; font-size: 0.74rem; font-weight: 700;
    color: #94a3b8; min-width: 46px; flex-shrink: 0;
}
.tg-titulo { flex: 1; line-height: 1.4; }
.tg-badge { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; }
.tg-badge-ok { background: #dcfce7; color: #15803d; }
.tg-badge-mid { background: #fef3c7; color: #b45309; }
.tg-badge-no { background: #fee2e2; color: #b91c1c; }

.tg-clase {
    flex-shrink: 0; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 0.73rem; color: #2563eb; text-decoration: none;
    padding: 3px 9px; border-radius: 6px; background: #eff6ff;
}
.tg-clase:hover { background: #dbeafe; text-decoration: underline; }
.tg-resumen { flex-shrink: 0; font-size: 0.72rem; color: #94a3b8; font-weight: 700; }
.tg-vacio { padding: 40px 20px; text-align: center; color: #16a34a; font-size: 0.95rem; }
.tg-falta .tg-titulo { color: #b91c1c; }

@media (max-width: 640px) {
    .tg-clase { max-width: 96px; }
    .tg-prof-2 { padding-left: 40px; }
    .tg-prof-3, .tg-prof-4 { padding-left: 54px; }
    .tg-global-num { font-size: 1.7rem; }
}

body.dark-mode .tg-subtle { color: #94a3b8; }
body.dark-mode .tg-global { background: linear-gradient(135deg, #052e16, #083344); border-color: #166534; }
body.dark-mode .tg-global-num { color: #4ade80; }
body.dark-mode .tg-global-txt { color: #cbd5e1; }
body.dark-mode .tg-arbol { border-color: #1e293b; }
body.dark-mode .tg-nodo { border-bottom-color: #1e293b; }
body.dark-mode .tg-prof-0 { background: #0f172a; }
body.dark-mode .tg-cod { color: #64748b; }
body.dark-mode .tg-chip { background: #1e293b; color: #94a3b8; }
body.dark-mode .tg-chip-ok { background: #052e16; color: #4ade80; }
body.dark-mode .tg-chip-mid { background: #422006; color: #fbbf24; }
body.dark-mode .tg-chip-no { background: #450a0a; color: #f87171; }
body.dark-mode .tg-badge-ok { background: #052e16; color: #4ade80; }
body.dark-mode .tg-badge-mid { background: #422006; color: #fbbf24; }
body.dark-mode .tg-badge-no { background: #450a0a; color: #f87171; }
body.dark-mode .tg-clase { background: #172554; color: #93c5fd; }
body.dark-mode .tg-clase:hover { background: #1e3a8a; }
body.dark-mode .tg-filtro { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-mode .tg-barra { background: #450a0a; }
body.dark-mode .tg-falta .tg-titulo { color: #f87171; }

/* ─── INTERRUPTOR DE VISTA DEL MENÚ (clases / temario) ─── */
.menu-modo-switch {
    display: flex; gap: 4px; padding: 4px; margin: 0 6px 12px;
    background: #f1f5f9; border-radius: 10px;
}
.menu-modo-switch button {
    flex: 1; cursor: pointer; border: none; background: transparent;
    padding: 7px 4px; border-radius: 7px; font-size: 0.73rem; font-weight: 700;
    color: #64748b; display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; transition: all .18s ease; font-family: inherit;
}
.menu-modo-switch button:hover { color: #16a34a; }
.menu-modo-switch button.activo { background: #fff; color: #16a34a; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Visibilidad de cada modo */
.menu-temario-root { display: none; }
.subject-list.menu-en-temario .menu-temario-root { display: block; }
.subject-list.menu-en-temario .menu-modo-clases { display: none; }

/* Árbol del temario dentro del menú */
.tgm-pct { margin-left: auto; margin-right: 6px; font-size: 0.66rem; font-weight: 800; opacity: .65; }
.tgm-lista li { list-style: none; }
.tgm-item {
    display: flex; align-items: flex-start; gap: 6px; padding: 5px 8px 5px 10px;
    font-size: 0.73rem; line-height: 1.35; color: #475569; text-decoration: none;
    border-radius: 6px; border-left: 2px solid transparent;
}
a.tgm-item:hover { background: #f1f5f9; color: #0f172a; border-left-color: #16a34a; }
span.tgm-item { cursor: default; }
.tgm-cod {
    font-family: 'Courier New', monospace; font-size: 0.64rem; font-weight: 700;
    color: #94a3b8; flex-shrink: 0; min-width: 30px;
}
.tgm-n0 { font-weight: 700; color: #1e293b; margin-top: 4px; }
.tgm-n1 { padding-left: 18px; }
.tgm-n2 { padding-left: 30px; }
.tgm-n3 { padding-left: 42px; }
.tgm-cubierto .tgm-cod { color: #16a34a; }
.tgm-parcial .tgm-cod { color: #f59e0b; }
.tgm-falta { opacity: .5; }
.tgm-falta .tgm-cod { color: #ef4444; }

/* ─── BLOQUE DE TEMAS OFICIALES DENTRO DE UNA CLASE ─── */
.tgc-box {
    margin: 0 auto 26px; max-width: 900px; border: 1px solid #bbf7d0;
    border-radius: 12px; background: #f0fdf4; overflow: hidden;
}
.tgc-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: #dcfce7; color: #15803d; font-size: 0.85rem;
}
.tgc-n {
    margin-left: auto; background: #16a34a; color: #fff; font-size: 0.7rem;
    font-weight: 800; padding: 2px 9px; border-radius: 999px;
}
.tgc-lista { margin: 0; padding: 8px 14px; list-style: none; }
.tgc-item {
    display: flex; align-items: baseline; gap: 9px; padding: 4px 0;
    font-size: 0.84rem; color: #334155; line-height: 1.4;
}
.tgc-cod {
    font-family: 'Courier New', monospace; font-size: 0.72rem; font-weight: 700;
    color: #16a34a; flex-shrink: 0; min-width: 42px;
}
.tgc-est-parcial .tgc-cod { color: #b45309; }
.tgc-parcial {
    font-size: 0.65rem; font-weight: 700; color: #b45309; background: #fef3c7;
    padding: 1px 7px; border-radius: 999px; flex-shrink: 0;
}
.tgc-link {
    display: block; padding: 9px 14px; border-top: 1px solid #bbf7d0;
    font-size: 0.78rem; font-weight: 600; color: #15803d; text-decoration: none;
}
.tgc-link:hover { background: #dcfce7; }

body.dark-mode .menu-modo-switch { background: #1e293b; }
body.dark-mode .menu-modo-switch button { color: #94a3b8; }
body.dark-mode .menu-modo-switch button.activo { background: #0f172a; color: #4ade80; }
body.dark-mode .tgm-item { color: #94a3b8; }
body.dark-mode a.tgm-item:hover { background: #1e293b; color: #f1f5f9; }
body.dark-mode .tgm-n0 { color: #e2e8f0; }
body.dark-mode .tgc-box { background: #052e16; border-color: #166534; }
body.dark-mode .tgc-head { background: #065f46; color: #bbf7d0; }
body.dark-mode .tgc-item { color: #cbd5e1; }
body.dark-mode .tgc-cod { color: #4ade80; }
body.dark-mode .tgc-link { color: #4ade80; border-top-color: #166534; }
body.dark-mode .tgc-link:hover { background: #065f46; }

/* Contador de subtemas migrados junto al tema en el menú */
.tgm-sub {
    margin-left: auto; font-size: 0.63rem; font-weight: 800;
    color: #94a3b8; flex-shrink: 0; padding-left: 6px;
}

/* Tema con subtemas: abre un submenú en vez de navegar */
.tgm-n4 { padding-left: 54px; }

.tgm-hijos { list-style: none; margin: 0; padding: 0; display: none; }
.tgm-hijos.abierto { display: block; }

.tgm-flecha {
    margin-left: auto; flex-shrink: 0; font-size: 0.6rem; color: #94a3b8;
    padding-top: 2px; transition: transform var(--transition-quick);
}
.tgm-item.abierto .tgm-flecha { transform: rotate(90deg); }
.tgm-rama { font-weight: 700; }
/* La flecha es la que se queda con el margen automático; el contador de
   subtemas se pega al título para no repartirse el espacio con ella. */
.tgm-rama .tgm-sub { margin-left: 8px; }

body.dark-mode .tgm-flecha { color: #64748b; }

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE UN TEMA DEL TEMARIO  (.tema-page)
   Layout propio para js/data/temas/. Las clases del menú por clases siguen
   usando .mindmap-container / .branch-col / .sub-node, que no se tocan.
   ══════════════════════════════════════════════════════════════════════════ */

/* La página del tema usa neutros FRÍOS, no los cremas cálidos del resto de la app
   (--border-color #e6e0d3, --surface-2 #fafaf7). Con la paleta cálida las tarjetas
   se veían beige y desentonaban con el azul del contenido. */
.tema-page {
    --tema-borde: #e2e8f0;
    --tema-caja: #f1f5f9;
    --tema-titulo: #1e3a8a;
}
body.dark-mode .tema-page {
    --tema-borde: #24344d;
    --tema-caja: rgba(148,163,184,0.09);
    --tema-titulo: #dbeafe;
}

/* Un color por posición, para que el badge de la tarjeta, su barra superior y su
   chip del índice se lean como la misma cosa. Ciclo de 6: son las seis funciones
   de la lengua; a partir de la séptima se repite.
   --tc  = tono medio: barra superior, borde de la caja de ejemplos, hover
   --tc-ink = tono oscuro para texto pequeño (badge, foco): el medio no contrasta
   --tc-soft = fondo tenue del badge y del resalte de negritas
   --tc-wash = tinte muy claro para el fondo de la caja de ejemplos */
.tema-page .tema-card[data-c="1"], .tema-page .tema-chip[data-c="1"] { --tc: #2563eb; --tc-ink: #1e40af; --tc-soft: #dbeafe; --tc-wash: #f1f6fd; }
.tema-page .tema-card[data-c="2"], .tema-page .tema-chip[data-c="2"] { --tc: #ea580c; --tc-ink: #c2410c; --tc-soft: #ffedd5; --tc-wash: #fdf6f0; }
.tema-page .tema-card[data-c="3"], .tema-page .tema-chip[data-c="3"] { --tc: #7c3aed; --tc-ink: #6d28d9; --tc-soft: #ede9fe; --tc-wash: #f6f4fe; }
.tema-page .tema-card[data-c="4"], .tema-page .tema-chip[data-c="4"] { --tc: #059669; --tc-ink: #047857; --tc-soft: #d1fae5; --tc-wash: #f0fbf6; }
.tema-page .tema-card[data-c="5"], .tema-page .tema-chip[data-c="5"] { --tc: #d97706; --tc-ink: #b45309; --tc-soft: #fef3c7; --tc-wash: #fdf9ef; }
.tema-page .tema-card[data-c="6"], .tema-page .tema-chip[data-c="6"] { --tc: #db2777; --tc-ink: #be185d; --tc-soft: #fce7f3; --tc-wash: #fdf3f8; }
.tema-page .tema-card[data-c="0"] { --tc: var(--menu-accent); --tc-ink: #5b21b6; --tc-soft: #ede9fe; --tc-wash: #f7f5fe; }

/* En oscuro se invierte: el tono claro es el legible, así que --tc-ink aclara. */
body.dark-mode .tema-page .tema-card[data-c="1"], body.dark-mode .tema-page .tema-chip[data-c="1"] { --tc: #60a5fa; --tc-ink: #93c5fd; --tc-soft: rgba(96,165,250,0.16); --tc-wash: rgba(96,165,250,0.07); }
body.dark-mode .tema-page .tema-card[data-c="2"], body.dark-mode .tema-page .tema-chip[data-c="2"] { --tc: #fb923c; --tc-ink: #fdba74; --tc-soft: rgba(251,146,60,0.16); --tc-wash: rgba(251,146,60,0.07); }
body.dark-mode .tema-page .tema-card[data-c="3"], body.dark-mode .tema-page .tema-chip[data-c="3"] { --tc: #a78bfa; --tc-ink: #c4b5fd; --tc-soft: rgba(167,139,250,0.16); --tc-wash: rgba(167,139,250,0.07); }
body.dark-mode .tema-page .tema-card[data-c="4"], body.dark-mode .tema-page .tema-chip[data-c="4"] { --tc: #34d399; --tc-ink: #6ee7b7; --tc-soft: rgba(52,211,153,0.16); --tc-wash: rgba(52,211,153,0.07); }
body.dark-mode .tema-page .tema-card[data-c="5"], body.dark-mode .tema-page .tema-chip[data-c="5"] { --tc: #fbbf24; --tc-ink: #fcd34d; --tc-soft: rgba(251,191,36,0.16); --tc-wash: rgba(251,191,36,0.07); }
body.dark-mode .tema-page .tema-card[data-c="6"], body.dark-mode .tema-page .tema-chip[data-c="6"] { --tc: #f472b6; --tc-ink: #f9a8d4; --tc-soft: rgba(244,114,182,0.16); --tc-wash: rgba(244,114,182,0.07); }
body.dark-mode .tema-page .tema-card[data-c="0"] { --tc: #a78bfa; --tc-ink: #c4b5fd; --tc-soft: rgba(167,139,250,0.16); --tc-wash: rgba(167,139,250,0.07); }

/* Una sola columna de lectura para toda la página. Sin esto las secciones que la
   página hereda del layout de clase (checkpoint, flashcards, video, notas,
   "marcar como estudiada") salen más anchas que las tarjetas y el eje vertical
   se pierde. Todas son hijas directas de .tema-page.
   `width: 100%` es imprescindible: .subject-content es flex column con
   align-items:center, así que sus hijas encogen a su contenido y sin esto la
   cabecera y los chips saldrían más angostos que las tarjetas. */
.tema-page { --tema-col: 800px; }
.tema-page > * {
    width: 100%;
    max-width: var(--tema-col);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

/* Los diagramas piden min-width 600-700px (ver .x-mermaid-svg-host). Su caja
   .x-mermaid-wrap ya scrollea en horizontal, pero sólo si su ancho está acotado:
   sin `width: 100%` arriba, la columna adoptaba el ancho intrínseco del SVG y
   desbordaba la página entera. Estas dos reglas son el cinturón de seguridad
   para que un hijo ancho nunca vuelva a estirar la tarjeta. */
.tema-page .tema-card-body { min-width: 0; }
.tema-page .tema-card-body x-mermaid,
.tema-page .tema-card-body x-map,
.tema-page .tema-card-body x-smiles { max-width: 100%; }

/* En las páginas de tema el diagrama se AJUSTA al ancho de la tarjeta en vez
   de dibujarse a 700px con scroll horizontal (con el recorte, en el teléfono
   parecía roto). El botón «Ampliar» ya da la versión a tamaño completo, y los
   diagramas de los temas se dibujan en columna para seguir siendo legibles
   ajustados. */
.tema-page .x-mermaid-svg-host { min-width: 0; }
.tema-page .x-mermaid-wrap svg {
    min-width: 0;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ── Cabecera ── */
/* Es una tarjeta, igual que los subnodos: agrupa de qué tema se trata y la
   primera acción (el checkpoint) en un solo bloque. */
.tema-page .tema-head {
    margin-bottom: var(--sp-6);
    padding: var(--sp-6);
    background: var(--surface-1);
    border: 1px solid var(--tema-borde);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.tema-page .tema-bc {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--sp-2);
}
/* La materia lleva el color de la materia (viene inline desde titleStyle); el
   código queda en gris para que el ojo lea primero de qué materia es. */
.tema-page .tema-bc-sep { opacity: 0.5; margin: 0 6px; }
.tema-page .tema-h1 {
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-3);
}
body.dark-mode .tema-page .tema-h1,
body.dark-mode .tema-page .tema-bc-mat { color: #93c5fd !important; }
.tema-page .tema-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 62ch;
}

/* ── Checkpoint, dentro de la cabecera ── */
.tema-page .tema-cp { margin-top: var(--sp-5); }
.tema-page .tema-cp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 11px 22px;
    border: none;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.32);
    transition: transform var(--transition-quick), box-shadow var(--transition-quick);
}
.tema-page .tema-cp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4);
}
.tema-page .tema-cp-hint {
    margin: var(--sp-3) 0 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: #c2410c;
    max-width: 46ch;
}
body.dark-mode .tema-page .tema-cp-hint { color: #fdba74; }

/* ── Checkpoint en curso: una pregunta a la vez ──
   Vive en #checkpoint-<temaId>, un contenedor hermano de la cabecera que está
   vacío hasta que se pulsa el botón. Se presenta como tarjeta propia en naranja
   para distinguirse del contenido de estudio. */
/* startClassCheckpoint hace scrollIntoView del host; sin margen de scroll la
   tarjeta queda pegada al borde y el botón hamburguesa (fixed, top 20px) le tapa
   la cabecera. */
.tema-page .tema-cp-host {
    scroll-margin-top: 90px;
}
.tema-page .tema-cp-host:empty { display: none; }
.tema-page .tcp {
    background: var(--surface-1);
    border: 1.5px solid #fb923c;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
}
body.dark-mode .tema-page .tcp { border-color: #9a3412; }

.tema-page .tcp-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.tema-page .tcp-ico {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #ffedd5;
    color: #ea580c;
    font-size: 0.9rem;
    flex-shrink: 0;
}
body.dark-mode .tema-page .tcp-ico { background: rgba(234,88,12,0.18); color: #fb923c; }
.tema-page .tcp-titles { flex: 1; min-width: 0; }
.tema-page .tcp-titles h3 {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 800;
    color: #9a3412;
    line-height: 1.2;
}
.tema-page .tcp-titles p {
    margin: 1px 0 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b45309;
}
body.dark-mode .tema-page .tcp-titles h3 { color: #fdba74; }
body.dark-mode .tema-page .tcp-titles p { color: #fb923c; }
.tema-page .tcp-close {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--tema-borde);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-quick), border-color var(--transition-quick);
}
.tema-page .tcp-close:hover { color: #ea580c; border-color: #fdba74; }

.tema-page .tcp-bar {
    height: 6px;
    border-radius: var(--r-pill);
    background: #ffedd5;
    overflow: hidden;
    margin-bottom: var(--sp-5);
}
body.dark-mode .tema-page .tcp-bar { background: rgba(234,88,12,0.2); }
.tema-page .tcp-bar-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: #f97316;
    transition: width var(--transition-quick);
}
.tema-page .tcp-res-alto { background: #10b981; }
.tema-page .tcp-res-medio { background: #f59e0b; }
.tema-page .tcp-res-bajo { background: #dc2626; }

.tema-page .tcp-q {
    margin: 0 0 var(--sp-4);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.38;
    color: var(--tema-titulo);
}

/* ── Opciones ── */
.tema-page .tcp-opts {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.tema-page .tcp-opt {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--tema-borde);
    border-radius: 11px;
    background: var(--surface-1);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--card-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-quick), background var(--transition-quick);
}
.tema-page .tcp-opt:not(:disabled):hover {
    border-color: #fdba74;
    background: #fff7ed;
}
body.dark-mode .tema-page .tcp-opt:not(:disabled):hover { background: rgba(234,88,12,0.10); }
.tema-page .tcp-letra {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    flex-shrink: 0;
    line-height: 1.75;
}
.tema-page .tcp-opt-txt { flex: 1; }

/* Estados tras responder: la correcta siempre se muestra, la elegida errónea se
   marca, y el resto se apaga para que la vista se quede en esas dos. */
.tema-page .tcp-opt-ok {
    border-color: #059669;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 700;
}
.tema-page .tcp-opt-ok .tcp-letra { color: #059669; }
.tema-page .tcp-opt-mal {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
    font-weight: 700;
}
.tema-page .tcp-opt-mal .tcp-letra { color: #dc2626; }
.tema-page .tcp-opt-off { opacity: 0.55; }
.tema-page .tcp-opt:disabled { cursor: default; }
body.dark-mode .tema-page .tcp-opt-ok { background: rgba(5,150,105,0.14); color: #6ee7b7; }
body.dark-mode .tema-page .tcp-opt-mal { background: rgba(220,38,38,0.14); color: #fca5a5; }

/* ── Retroalimentación ── */
.tema-page .tcp-fb {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border-left: 3px solid;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.tema-page .tcp-fb-ok { background: #ecfdf5; border-left-color: #059669; }
.tema-page .tcp-fb-mal { background: #fef2f2; border-left-color: #dc2626; }
body.dark-mode .tema-page .tcp-fb-ok { background: rgba(5,150,105,0.12); }
body.dark-mode .tema-page .tcp-fb-mal { background: rgba(220,38,38,0.12); }
/* El cuerpo va en el mismo azul marino que la pregunta, no en el gris del
   contenido: la retroalimentación es parte del quiz, no del apunte. */
.tema-page .tcp-fb-txt {
    margin: 0 0 var(--sp-4);
    font-size: 0.93rem;
    line-height: 1.55;
    color: #1e3a5f;
}
body.dark-mode .tema-page .tcp-fb-txt { color: #cbd5e1; }
.tema-page .tcp-fb-ok .tcp-fb-txt b { color: #059669; }
.tema-page .tcp-fb-mal .tcp-fb-txt b { color: #dc2626; }
body.dark-mode .tema-page .tcp-fb-ok .tcp-fb-txt b { color: #6ee7b7; }
body.dark-mode .tema-page .tcp-fb-mal .tcp-fb-txt b { color: #fca5a5; }

.tema-page .tcp-next {
    padding: 10px 22px;
    border: none;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(234,88,12,0.3);
    transition: transform var(--transition-quick);
}
.tema-page .tcp-next:hover { transform: translateY(-1px); }
.tema-page .tcp-res-msg {
    margin: 0 0 var(--sp-4);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--card-text);
}

/* ── Índice de chips ── */
.tema-page .tema-chips {
    margin-bottom: var(--sp-6);
    padding: var(--sp-4) var(--sp-1) 0;
    border-top: 1px solid var(--tema-borde);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.tema-page .tema-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--tema-borde);
    border-radius: var(--r-pill);
    background: var(--surface-1);
    color: var(--card-text);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition-quick), transform var(--transition-quick), box-shadow var(--transition-quick);
}
.tema-page .tema-chip:hover {
    border-color: var(--tc);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.tema-page .tema-chip-n {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--tc-soft);
    color: var(--tc);
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* ── Rama (sólo cuando el tema tiene más de una) ── */
.tema-page .tema-branch { margin-bottom: var(--sp-8); }
.tema-page .tema-branch-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--sp-4);
    padding: 0 var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--tema-borde);
    cursor: pointer;
}

/* ── Tarjetas ── */
.tema-page .tema-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.tema-page .tema-cards.hidden { display: none; }

/* La barra superior es un `border-top` grueso, no un pseudo-elemento absoluto: el
   borde sigue el radio de las esquinas y se funde en diagonal con el borde lateral
   de 1px, que es la curva del diseño. Una tira absoluta siempre sale recta. */
.tema-page .tema-card {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--tema-borde);
    border-top: 4px solid var(--tc);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
    scroll-margin-top: 90px;
    overflow: hidden;
}
.tema-page .tema-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.tema-page .tema-card-n,
.tema-page .tema-card-ico {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--tc-soft);
    color: var(--tc-ink);
    font-size: 0.9rem;
    font-weight: 800;
    flex-shrink: 0;
}
.tema-page .tema-card-titles { flex: 1; min-width: 0; }
/* El título es azul marino constante, no el color de la tarjeta: si cada tarjeta
   tuviera su tono, la lista de títulos se leería como un arcoíris. El color por
   posición se queda en la barra, el badge y el foco. */
.tema-page .tema-card-titles h3 {
    font-size: 1.14rem;
    font-weight: 800;
    color: var(--tema-titulo);
    margin: 0;
    line-height: 1.25;
}
.tema-page .tema-card-foco {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tc-ink);
    margin: 3px 0 0;
}

/* Dos controles sin borde: flashcards del apartado y la bandera de "marcar para
   repasar". La bandera marcada va en ámbar, no en verde: señala algo pendiente de
   repasar, no algo terminado. */
.tema-page .tema-card-acts {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    padding-top: 2px;
}
.tema-page .tema-card-acts > i {
    display: block;
    color: #cbd5e1;
    cursor: pointer;
    transition: color var(--transition-quick), transform var(--transition-quick);
}
.tema-page .tema-card-acts > i:hover {
    color: var(--tc);
    transform: scale(1.08);
}
.tema-page .tema-card-acts .subnode-quiz-icon-btn { font-size: 0.95rem; }
.tema-page .tema-card-acts .subnode-bookmark-btn { font-size: 1.02rem; }
.tema-page .tema-card-acts > i.bookmarked { color: var(--accent-warning); }
body.dark-mode .tema-page .tema-card-acts > i { color: #475569; }
body.dark-mode .tema-page .tema-card-acts > i.bookmarked { color: #fbbf24; }

.tema-page .tema-card-body {
    font-size: 0.97rem;
    line-height: 1.62;
    color: var(--card-text);
}
.tema-page .tema-card-body > p { margin: 0 0 var(--sp-2); }
.tema-page .tema-card-body > p:last-child { margin-bottom: 0; }
/* El texto en negrita del contenido es el término clave del subnodo: se resalta
   con el color de la tarjeta. Se excluyen las cajas que ya tienen su propio
   fondo, donde el resalte competiría con el de la caja. */
.tema-page .tema-card-body > p b {
    background: var(--tc-soft);
    color: var(--tema-titulo);
    padding: 1px 5px;
    border-radius: 5px;
    font-weight: 700;
}
.tema-page .tema-card-body .exam-tip b,
.tema-page .tema-card-body .mnemo b {
    background: none;
    padding: 0;
}

/* ── Ejemplos ── */
/* El fondo va tintado con el color de la tarjeta, no en gris neutro: así la caja
   de ejemplos se lee como parte del mismo bloque que su barra y su badge. */
.tema-page .tema-card-ex {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--tc-wash);
    border-left: 3px solid var(--tc);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.tema-page .tema-card-ex ul { margin: 0; padding-left: var(--sp-4); }
.tema-page .tema-card-ex li {
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.tema-page .tema-card-ex li:last-child { margin-bottom: 0; }

/* ── Tarjeta de síntesis (el diagrama que resume toda la rama) ── */
.tema-page .tema-card-resumen { background: var(--tema-caja); }
.tema-page .tema-card-resumen .tema-card-body { margin-top: var(--sp-2); }

/* Destello al llegar desde un chip del índice */
@keyframes temaCardFlash {
    from { box-shadow: 0 0 0 3px var(--tc-soft); }
    to   { box-shadow: var(--shadow-sm); }
}
.tema-page .tema-card-flash { animation: temaCardFlash 1.1s ease-out; }

/* El botón hamburguesa es fixed en top/left 20px y mide 50px. Mientras la columna
   de lectura no tenga margen lateral suficiente para dejarlo fuera, la cabecera
   arranca por debajo de él: si no, le tapa el breadcrumb. */
@media (max-width: 960px) {
    .tema-page .tema-head { margin-top: 58px; }
}

@media (max-width: 640px) {
    .tema-page .tema-head { padding: var(--sp-5); }
    .tema-page .tema-card { padding: var(--sp-4); }
    .tema-page .tema-card-titles h3 { font-size: 1.04rem; }
    .tema-page .tema-lead { font-size: 0.94rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE UN TEMA — DISEÑO MÓVIL  (.tema-bar / .tema-m)
   ══════════════════════════════════════════════════════════════════════════
   Casi todo este bloque vive dentro de @media (max-width: 768px). Por encima de
   esa anchura la página del tema conserva el layout de escritorio intacto y las
   dos piezas nuevas (.tema-bar y .tema-m) quedan ocultas; por debajo se invierte
   y se ocultan las secciones que la página hereda del layout de clase.

   La paleta es la del diseño y NO la del resto de la app: neutros fríos sobre
   #F6F8FC punteado, tinta azul marina y naranja para lo accionable. Va en
   variables propias (--tm-*) para no pisar los tokens globales, y con su juego
   oscuro para que el modo noche siga siendo legible. */

:root {
    --tm-fondo: #f6f8fc;
    --tm-punto: #d6dee9;
    --tm-panel: #ffffff;
    --tm-tinta: #143a5a;
    --tm-azul: #1a6fa8;
    --tm-texto: #33445a;
    --tm-suave: #5a6b80;
    --tm-tenue: #7c8ba1;
    --tm-linea: #e7edf5;
    --tm-borde: #dde5ef;
    --tm-naranja: #f2761b;
    --tm-naranja-ink: #a2500b;
    --tm-naranja-suave: #fff9f3;
    --tm-naranja-borde: #f5d9bc;
    --tm-verde: #1f8a4c;
    --tm-verde-bg: #eaf7ef;
    --tm-rojo: #d8552f;
    --tm-rojo-bg: #fdf0ec;
    --tm-violeta: #6c3fd1;
    --tm-violeta-bg: #efe9fc;
    --tm-rosa: #c2276f;
    --tm-rosa-bg: #fce4ef;
    /* Baloo 2 es la tipografía de titulares del diseño; Nunito, que ya carga la
       app, hace de reserva mientras llega el woff2 (font-display: swap). */
    --tm-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}
body.dark-mode {
    --tm-fondo: #0b1220;
    --tm-punto: #1c2942;
    --tm-panel: #131c2e;
    --tm-tinta: #dbeafe;
    --tm-azul: #7cb5e3;
    --tm-texto: #cbd5e1;
    --tm-suave: #a6b4c8;
    --tm-tenue: #8496ad;
    --tm-linea: #223149;
    --tm-borde: #2b3d59;
    --tm-naranja: #fb923c;
    --tm-naranja-ink: #fdba74;
    --tm-naranja-suave: rgba(251, 146, 60, 0.10);
    --tm-naranja-borde: rgba(251, 146, 60, 0.34);
    --tm-verde: #4ade80;
    --tm-verde-bg: rgba(34, 197, 94, 0.14);
    --tm-rojo: #f87171;
    --tm-rojo-bg: rgba(248, 113, 113, 0.14);
    --tm-violeta: #a78bfa;
    --tm-violeta-bg: rgba(167, 139, 250, 0.16);
    --tm-rosa: #f472b6;
    --tm-rosa-bg: rgba(244, 114, 182, 0.16);
}

/* Fuera de móvil no existen. Se dejan en el DOM (no se desmontan) para que girar
   el teléfono no pierda una respuesta a medias ni el texto de una nota. */
.tema-bar, .tema-m { display: none; }

@media (max-width: 768px) {

/* ── Lienzo ───────────────────────────────────────────────────────────────── */
body.en-tema {
    background-color: var(--tm-fondo);
    background-image: radial-gradient(var(--tm-punto) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
}
/* La barra ocupa el sitio del botón hamburguesa flotante, así que éste sobra: si
   se quedara saldrían dos hamburguesas, una encima de la otra. */
body.en-tema .menu-btn { display: none; }

.tema-page { --tema-col: 100%; }
/* Sin el botón flotante ya no hace falta el hueco que lo esquivaba (la regla de
   @media 960px, más arriba): ahora es la barra quien empuja al contenido. */
.tema-page .tema-head { margin-top: 0; }

/* Las secciones que la página hereda del layout de clase tienen aquí su
   equivalente dentro de .tema-m, rediseñado para el teléfono. Se ocultan en vez
   de no generarse para que al volver a escritorio sigan ahí, con su estado. */
.tema-page .class-flashcards-section,
.tema-page .unam-questions-section,
.tema-page .class-notes-panel,
.tema-page .class-nav-actions,
.tema-page .class-quiz-summary,
.tema-page .quiz-lazy-placeholder { display: none !important; }

/* ── Barra superior ───────────────────────────────────────────────────────── */
.tema-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 0 18px;
    padding: 10px 0;
    background: var(--tm-fondo);
}
.tema-bar-menu {
    width: 46px; height: 46px;
    flex: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--tm-panel);
    border: 1.5px solid var(--tm-linea);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(20, 58, 90, 0.06);
}
.tema-bar-menu span {
    width: 18px; height: 2.5px;
    border-radius: 2px;
    background: var(--tm-tinta);
}
.tema-bar-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.tema-bar-k {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tm-tenue);
}
.tema-bar-t {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tm-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tema-bar-next, .tema-bar-prev {
    flex: none;
    min-height: 44px;
    padding: 10px 16px;
    border: 1.5px solid var(--tm-linea);
    border-radius: 999px;
    background: var(--tm-panel);
    color: var(--tm-azul);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}
/* Sólo flecha: con texto, la barra no da para dos botones más la etiqueta */
.tema-bar-prev, .tema-bar-next { min-width: 44px; padding: 10px 13px; }

/* ── Cabecera y checkpoint, con la piel del diseño ────────────────────────── */
.tema-page .tema-head {
    padding: 22px 18px 20px;
    border: 1.5px solid var(--tm-linea);
    border-radius: 24px;
    background: var(--tm-panel);
    box-shadow: 0 6px 20px rgba(20, 58, 90, 0.06);
}
.tema-page .tema-h1 {
    font-family: var(--tm-display);
    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--tm-azul) !important;
}
.tema-page .tema-lead { color: var(--tm-suave); }
.tema-page .tema-bc { color: var(--tm-tenue); }

/* La llamada al checkpoint es una tarjeta crema, no un botón suelto: en el
   teléfono es la primera decisión de la página y necesita explicarse. */
.tema-page .tema-cp {
    margin-top: 18px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--tm-naranja-suave);
    border: 1.5px solid var(--tm-naranja-borde);
    border-radius: 18px;
}
.tema-page .tema-cp::before {
    content: 'Antes de empezar, veamos cómo están tus conocimientos del tema.';
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
    color: var(--tm-naranja-ink);
}
/* Orden invertido respecto al escritorio: la frase de arriba (::before) hace de
   entradilla, el botón va a lo ancho y el matiz de "fallar es normal" cierra. */
.tema-page .tema-cp-btn {
    order: 1;
    width: 100%;
    justify-content: center;
    min-height: 56px;
    padding: 15px 20px;
    border: 2px solid #e8a76a;
    border-radius: 14px;
    background: var(--tm-panel);
    color: var(--tm-naranja-ink);
    font-size: 1.02rem;
    font-weight: 800;
    box-shadow: none;
}
.tema-page .tema-cp-hint {
    order: 2;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tm-tenue);
}

/* ── Tarjetas de contenido ────────────────────────────────────────────────── */
.tema-page .tema-card {
    border: 1.5px solid var(--tm-linea);
    border-top: 5px solid var(--tc);
    border-radius: 22px;
    padding: 18px 16px 20px;
    box-shadow: 0 2px 10px rgba(20, 58, 90, 0.05);
}
.tema-page .tema-card-titles h3 {
    font-family: var(--tm-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tm-tinta);
    letter-spacing: -0.01em;
}
.tema-page .tema-card-n,
.tema-page .tema-card-ico {
    width: 34px; height: 34px;
    border-radius: 10px;
    font-size: 1rem;
}
.tema-page .tema-card-body { font-size: 1.02rem; line-height: 1.55; }
.tema-page .tema-card-ex { border-radius: 0 10px 10px 0; }

/* Los dos controles de la tarjeta son la única forma de marcar un apartado como
   confuso: a 32px de diámetro son alcanzables con el pulgar. */
.tema-page .tema-card-acts { gap: 8px; padding-top: 0; }
.tema-page .tema-card-acts > i {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 1.5px solid var(--tm-borde);
    border-radius: 50%;
}
.tema-page .tema-card-acts > i.bookmarked {
    background: #ffe8d3;
    border-color: #f0c79f;
}
body.dark-mode .tema-page .tema-card-acts > i.bookmarked {
    background: rgba(251, 146, 60, 0.16);
    border-color: rgba(251, 146, 60, 0.4);
}

/* ── Cierre de la teoría ──────────────────────────────────────────────────── */
.tema-m {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 26px;
}
.tema-fin {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0 2px;
}
/* La línea es un zigzag dibujado con dos gradientes cruzados repetidos en x:
   marca el corte de sección sin meter una imagen. */
.tema-fin-linea {
    flex: 1;
    height: 14px;
    background-image:
        linear-gradient(135deg, transparent 46%, var(--tm-borde) 46%, var(--tm-borde) 54%, transparent 54%),
        linear-gradient(45deg, transparent 46%, var(--tm-borde) 46%, var(--tm-borde) 54%, transparent 54%);
    background-size: 16px 14px;
    background-repeat: repeat-x;
}
.tema-fin-sello {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border: 2px solid var(--tm-borde);
    border-radius: 999px;
    background: var(--tm-panel);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-tenue);
}
.tema-fin-sello i {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--tm-tinta);
    color: var(--tm-panel);
    font-size: 0.62rem;
}

/* ── Notas ────────────────────────────────────────────────────────────────── */
.tema-notas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 18px;
    background: var(--tm-panel);
    border: 1.5px solid var(--tm-linea);
    border-left: 5px solid #e2a33a;
    border-radius: 20px;
}
.tema-notas-head { display: flex; align-items: center; gap: 12px; }
.tema-notas-ico {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: 12px;
    background: #fdf0d8;
    color: #b27400;
    font-size: 1rem;
}
body.dark-mode .tema-notas-ico { background: rgba(226, 163, 58, 0.16); color: #fbbf24; }
.tema-notas-head strong {
    display: block;
    font-family: var(--tm-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tm-tinta);
}
.tema-notas-head span {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tm-tenue);
}
.tema-notas-ta {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    padding: 13px 15px;
    border: 1.5px solid var(--tm-borde);
    border-radius: 14px;
    background: var(--tm-panel);
    color: var(--tm-texto);
    font-family: inherit;
    font-size: 0.98rem;
    line-height: 1.5;
}
.tema-notas-ta:focus { outline: 2px solid var(--tm-azul); outline-offset: -1px; }
.tema-notas-pie { font-size: 0.8rem; font-weight: 600; color: var(--tm-tenue); }

/* ── Banner de práctica ───────────────────────────────────────────────────── */
.tema-practica-hero {
    margin-top: 6px;
    padding: 24px 20px;
    border-radius: 24px;
    background-color: #143a5a;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.4px, transparent 1.4px);
    background-size: 20px 20px;
}
.tema-practica-k {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f9b77a;
}
.tema-practica-hero h3 {
    margin: 6px 0;
    font-family: var(--tm-display);
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
}
.tema-practica-hero p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #b9cee1;
}

/* ── Acordeones ───────────────────────────────────────────────────────────── */
.tema-acc-wrap { display: flex; flex-direction: column; gap: 12px; }
.tema-acc {
    width: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-align: left;
    background: var(--tm-panel);
    border: 1.5px solid var(--tm-linea);
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(20, 58, 90, 0.04);
    font-family: inherit;
    cursor: pointer;
}
.tema-acc.abierto { background: var(--tm-fondo); }
.tema-acc-ico {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: none;
    border-radius: 13px;
    font-size: 1rem;
}
.tema-acc-f { background: var(--tm-violeta-bg); color: var(--tm-violeta); }
.tema-acc-p { background: var(--tm-rosa-bg); color: var(--tm-rosa); }
.tema-acc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tema-acc-txt strong { font-size: 1.02rem; font-weight: 800; color: var(--tm-tinta); }
.tema-acc-txt span { font-size: 0.83rem; font-weight: 600; color: var(--tm-tenue); }
.tema-acc-chev {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--tm-fondo);
    color: var(--tm-suave);
    font-size: 0.72rem;
    transition: transform var(--transition-quick);
}
.tema-acc.abierto .tema-acc-chev { transform: rotate(180deg); background: var(--tm-panel); }
.tema-acc-panel {
    padding: 16px;
    border: 1.5px solid var(--tm-linea);
    border-radius: 18px;
    background: var(--tm-panel);
}

/* ── Flashcards ───────────────────────────────────────────────────────────── */
.tema-flash-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tema-flash-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--tm-violeta-bg);
    overflow: hidden;
}
.tema-flash-bar > div {
    height: 100%;
    border-radius: 999px;
    background: var(--tm-violeta);
    transition: width 0.3s ease;
}
.tema-flash-n { flex: none; font-size: 0.82rem; font-weight: 800; color: var(--tm-violeta); }
.tema-flash-card {
    width: 100%;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 18px;
    text-align: center;
    border: 2px solid #d9cdf6;
    border-radius: 18px;
    background: #f3eefd;
    font-family: inherit;
    cursor: pointer;
}
.tema-flash-card.volteada { border-color: #a9ddbf; background: #effaf3; }
body.dark-mode .tema-flash-card { background: var(--tm-violeta-bg); border-color: rgba(167, 139, 250, 0.4); }
body.dark-mode .tema-flash-card.volteada { background: var(--tm-verde-bg); border-color: rgba(74, 222, 128, 0.4); }
.tema-flash-lado {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a7bb5;
}
.tema-flash-card.volteada .tema-flash-lado { color: var(--tm-verde); }
.tema-flash-txt {
    font-family: var(--tm-display);
    font-size: 1.22rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--tm-tinta);
}
.tema-flash-hint { font-size: 0.78rem; font-weight: 700; color: var(--tm-tenue); }
.tema-flash-nav { display: flex; gap: 8px; margin-top: 12px; }
.tema-flash-nav button {
    flex: 1;
    min-height: 46px;
    border: 1.5px solid var(--tm-borde);
    border-radius: 999px;
    background: var(--tm-panel);
    color: var(--tm-suave);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
}
.tema-flash-nav button.p {
    border-color: var(--tm-violeta);
    background: var(--tm-violeta);
    color: #fff;
}

/* ── Reactivos, de uno en uno ─────────────────────────────────────────────── */
.tprac-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tprac-badge {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tm-rosa-bg);
    color: var(--tm-rosa);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tprac-badge-unam { background: var(--tm-linea); color: var(--tm-tinta); }
.tprac-badge-banco { background: #d5f2ec; color: #0d9488; }
body.dark-mode .tprac-badge-banco { background: rgba(13,148,136,0.18); color: #5eead4; }
.tprac-n { flex: none; font-size: 0.82rem; font-weight: 800; color: var(--tm-tenue); }
.tprac-bar {
    flex: 1 1 100px;
    height: 8px;
    border-radius: 999px;
    background: var(--tm-linea);
    overflow: hidden;
}
.tprac-bar > div {
    height: 100%;
    border-radius: 999px;
    background: var(--tm-rosa);
    transition: width 0.3s ease;
}
.tprac-q {
    margin: 0 0 14px;
    font-family: var(--tm-display);
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--tm-tinta);
}
.tprac-opts { display: flex; flex-direction: column; gap: 9px; }
.tprac-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 11px 15px;
    text-align: left;
    border: 2px solid var(--tm-borde);
    border-radius: 13px;
    background: var(--tm-panel);
    color: var(--tm-texto);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}
.tprac-opt:disabled { cursor: default; }
.tprac-letra { flex: none; font-size: 0.78rem; font-weight: 800; opacity: 0.6; }
.tprac-opt-txt { flex: 1; }
.tprac-ok  { background: var(--tm-verde-bg); border-color: var(--tm-verde); color: var(--tm-verde); }
.tprac-mal { background: var(--tm-rojo-bg);  border-color: var(--tm-rojo);  color: var(--tm-rojo); }
.tprac-off { opacity: 0.5; }
.tprac-fb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 16px;
    border-left: 4px solid var(--tm-verde);
    border-radius: 0 12px 12px 0;
    background: var(--tm-verde-bg);
}
.tprac-fb-mal { border-left-color: var(--tm-rojo); background: var(--tm-rojo-bg); }
.tprac-fb p {
    margin: 0;
    flex: 1 1 200px;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--tm-texto);
}
.tprac-fb-ok  p b { color: var(--tm-verde); }
.tprac-fb-mal p b { color: var(--tm-rojo); }
.tprac-next {
    min-height: 44px;
    padding: 11px 20px;
    border: none;
    border-radius: 999px;
    background: var(--tm-rosa);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}
/* Opción tocada pero aún sin confirmar */
.tprac-sel {
    border-color: var(--tm-rosa);
    background: var(--tm-rosa-bg);
    color: var(--tm-rosa);
}
.tprac-confirm {
    margin-top: 14px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    background: var(--tm-naranja);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}
.tprac-confirm:disabled { opacity: 0.45; cursor: default; }
/* Target del auto-scroll de nextTemaPrac: sin margen, la barra fija (.tema-bar)
   taparía la cabecera de la pregunta nueva. */
.tema-acc-panel > [id^="tprac-"] { scroll-margin-top: 90px; }

/* ── Resumen de reactivos ─────────────────────────────────────────────────── */
.tres {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 16px 22px;
    background: var(--tm-panel);
    border: 1.5px solid var(--tm-linea);
    border-top: 5px solid #17a35c;
    border-radius: 22px;
}
.tres-head { display: flex; align-items: center; gap: 12px; }
.tres-ico {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: none;
    border-radius: 13px;
    background: #e4f6ec;
    color: #17a35c;
    font-size: 1rem;
}
body.dark-mode .tres-ico { background: rgba(23, 163, 92, 0.18); color: #4ade80; }
.tres-head strong {
    font-family: var(--tm-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tm-tinta);
}
.tres-cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
/* La dona es un conic-gradient con el porcentaje en --p y un disco del color del
   panel encima: sin SVG y sin librería. */
.tres-dona {
    width: 112px; height: 112px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--tm-naranja) 0 var(--p), var(--tm-linea) var(--p) 100%);
}
.tres-dona-in {
    width: 86px; height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tm-panel);
}
.tres-dona-pct {
    font-family: var(--tm-display);
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 700;
    color: var(--tm-naranja-ink);
}
.tres-dona-n { font-size: 0.78rem; font-weight: 800; color: var(--tm-tenue); }
.tres-lado { flex: 1 1 180px; display: flex; flex-direction: column; gap: 10px; }
.tres-frase { font-size: 0.96rem; line-height: 1.5; color: var(--tm-suave); }
.tres-frase b { color: var(--tm-tinta); }
.tres-casillas { display: flex; flex-wrap: wrap; gap: 6px; }
.tres-c {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    /* Es un botón: salta a su pregunta en el acordeón */
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.tres-c-ok  { background: var(--tm-verde-bg); color: var(--tm-verde); }
.tres-c-mal { background: var(--tm-rojo-bg);  color: var(--tm-rojo); }
.tres-c-nil { background: var(--tm-linea); }
.tres-fuentes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 1.5px solid var(--tm-linea);
}
.tres-fuente { display: flex; flex-direction: column; gap: 7px; }
.tres-fuente-top { display: flex; align-items: center; gap: 9px; }
.tres-punto {
    width: 10px; height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--tm-rosa);
}
.tres-unam .tres-punto { background: var(--tm-tinta); }
.tres-banco .tres-punto { background: #0d9488; }
.tres-fuente-top strong { font-size: 0.95rem; font-weight: 800; color: var(--tm-tinta); }
.tres-fuente-n { margin-left: auto; font-size: 0.86rem; font-weight: 800; color: var(--tm-tenue); }
.tres-fuente-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--tm-linea);
    overflow: hidden;
}
.tres-fuente-bar > div { height: 100%; border-radius: 999px; background: var(--tm-rosa); }
.tres-unam .tres-fuente-bar > div { background: var(--tm-tinta); }
.tres-banco .tres-fuente-bar > div { background: #0d9488; }
.tres-consejo {
    margin: 0;
    padding: 14px 16px;
    border-left: 4px solid var(--tm-naranja);
    border-radius: 0 12px 12px 0;
    background: var(--tm-naranja-suave);
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--tm-naranja-ink);
}
.tres-acciones { display: flex; flex-direction: column; gap: 10px; }
.tres-btn {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border: 2px solid var(--tm-borde);
    border-radius: 14px;
    background: var(--tm-panel);
    color: var(--tm-tinta);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
}
.tres-btn-reset { border-color: #edbe93; color: var(--tm-naranja-ink); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.tema-pie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tema-est, .tema-pie-next, .tema-pie-prev {
    flex: 1 1 200px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
}
.tema-est {
    border: 2px solid var(--tm-borde);
    background: var(--tm-panel);
    color: var(--tm-suave);
}
.tema-est.done { border-color: var(--tm-verde); background: var(--tm-verde-bg); color: var(--tm-verde); }
.tema-est-ic {
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 0.6rem;
}
/* El círculo hueco de "sin marcar" ya lo dibuja el borde del contenedor: el
   icono de dentro sólo aparece al completar. */
.tema-est:not(.done) .tema-est-ic i { display: none; }
.tema-pie-next { border: none; background: var(--tm-tinta); color: #fff; }
body.dark-mode .tema-pie-next { color: #0b1220; }
.tema-pie-prev { border: 2px solid var(--tm-borde); background: var(--tm-panel); color: var(--tm-tinta); }
/* Anterior y siguiente caben en una fila; "Marcar como aprendida" va arriba a lo ancho */
.tema-pie-prev, .tema-pie-next { flex: 1 1 140px; }
.tema-pie-nota {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--tm-tenue);
}

}