/* ============================================
   SAD - Sistema Académico Docente
   Neumorphism Design - Celeste Claro - 4px depth
   ============================================

   GUÍA DE BOTONES (v179 — ver project_overview.md changelog para razonamiento)
   ------------------------------------------------------------------------

   Categorías canónicas (usar SIEMPRE una clase, NUNCA style inline):

   • PRIMARIA (Guardar, Enviar, Crear, Aceptar)
     → <button class="neu-btn btn-primary btn-sm">${Icons.check} Guardar</button>
     Posición: flex-end en card-footer o modal-footer.

   • SECUNDARIA (Cancelar, Volver, acciones auxiliares)
     → <button class="neu-btn btn-sm">${Icons.close} Cancelar</button>
     Posición: izquierda del primary (orden: [Cancelar] [Guardar]).

   • DESTRUCTIVA texto-red (Eliminar recuperación, quitar link)
     → <button class="neu-btn btn-danger-sm">${Icons.trash} Eliminar</button>

   • DESTRUCTIVA background-red (Borrar institución, acciones mayores)
     → <button class="neu-btn btn-danger btn-sm">${Icons.trash} Borrar</button>

   • ICON-ONLY en tablas (editar/borrar fila)
     → <button class="btn-icon-sm edit">${Icons.edit}</button>
     → <button class="btn-icon-sm danger">${Icons.trash}</button>
     En mobile min 44×44 (touch target WCAG).

   • FULL-WIDTH (botones solos en card mobile)
     → Agregar clase .w-100 al botón.

   • CARD-BUTTON (icono grande + título + descripción apilados)
     → <button class="neu-btn btn-sm btn-card">...</button>

   • TAB NAVIGATION
     → <button class="tab-btn [active]">
     → <button class="tab-btn tab-btn-compact"> para tabs secundarias (fuentes 11px)

   Patrón estándar de edición tabular (asistencias, calificaciones, acompañam.):
   ------------------------------------------------------------------------
   <div class="neu-card" id="mi-form-root">
     ... tabla ...
     <div class="card-footer">
       <span id="mi-dirty-indicator" class="dirty-indicator" hidden>● sin guardar</span>
       <button class="neu-btn btn-sm" onclick="...cancelar...">Cancelar</button>  (opcional: solo crear)
       <button class="neu-btn btn-primary btn-sm" id="mi-save-btn" disabled onclick="...save...">${Icons.check} Guardar</button>
     </div>
   </div>
   <script>
     Utils.FormDirty.bind('mi-form-root', 'mi-save-btn', 'mi-dirty-indicator');
     // en saveHandler tras commit exitoso:
     Utils.FormDirty.clear('mi-form-root');
   </script>

   Reglas fuertes (grep antes de commit):
   1. NO `style="color:#..."` en botones. Usar clase .btn-danger-sm o similar.
   2. NO `style="width:100%"`. Usar .w-100.
   3. NO `style="margin-..."` en botones. Usar .mt-8/.mt-12/.mt-16/.mb-8/....
   4. NO `&times;`/`&#215;`/`×` literal. Usar ${Icons.close}.
   5. Orden fijo en modal/card-footer: [Cancelar] (izq) [Primary/Destructive] (der).
   6. Botones con ícono: ${Icons.X} SIEMPRE antes del label, con space.
   ============================================ */

:root {
    /* Colors */
    --bg: #d0e1f9;
    --bg-light: #dae8f8;
    --bg-dark: #c0d0e8;
    --shadow-dark: #a8b8cc;
    --shadow-light: #f0f6ff;
    --accent: #5b9bd5;
    --accent-hover: #4a87c0;
    --accent-light: #7db3e0;
    --text: #2c3e50;
    /* v194 L18 — Contraste mejorado: era #4a6278 (~4.0:1 sobre --bg #d0e1f9, borderline WCAG AA).
       Bajado a #3a5068 (~4.7:1) para uso al aire libre rural Ecuador (Honor 200 Pro brillo máx). */
    --text-secondary: #3a5068;
    --text-light: #6a7a8a;
    --success: #27ae60;
    --success-light: #2ecc71;
    --danger: #c0392b;
    --danger-light: #e74c3c;
    --warning: #b8860b;
    --warning-light: #d4a017;
    /* Spacing (4px base) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
    /* Typography */
    --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px;
    /* Radius */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    /* Transitions */
    --transition: all 0.25s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.4s ease;
    /* Z-index */
    --z-base: 1; --z-dropdown: 50; --z-sidebar: 100; --z-modal: 1000; --z-toast: 1500; --z-fab: 90;

    /* ===== UI STYLE TOKENS (Sistema = default) =====
       Orthogonal to themes — controls element sizing, typography, icons, organization.
       Override via [data-ui="compacta|editorial|tecnica"]. */
    --ui-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ui-font-heading: var(--ui-font-family);
    --ui-font-numeric: var(--ui-font-family);
    --ui-font-base: 14px;
    --ui-font-label: 13px;
    --ui-font-btn: 14px;
    --ui-font-th: 12px;
    --ui-font-td: 14px;
    --ui-font-h3: 18px;
    --ui-label-weight: 600;
    --ui-label-transform: none;
    --ui-label-spacing: normal;
    --ui-th-transform: uppercase;
    --ui-th-spacing: 0.5px;
    --ui-pad-btn: 12px 24px;
    --ui-pad-btn-sm: 8px 16px;
    --ui-pad-input: 12px 16px;
    --ui-pad-tab: 10px 20px;
    --ui-pad-cell: 12px 16px;
    --ui-pad-card: 20px;
    --ui-gap-row: 8px;
    --ui-gap-form: 18px;
    --ui-icon-size: 16px;
    --ui-icon-size-label: 16px;
    --ui-icon-stroke: 2;
    --ui-icon-gap: 6px;
    --ui-icon-tone: 0.75;
    --ui-stat-number: 36px;
    --ui-sidebar-w: 250px;
    --ui-sidebar-collapsed: 76px;
    --ui-btn-icon-size: 32px;
    --ui-modal-footer-align: flex-end;
}

/* ======== UI STYLE OVERRIDES ======== */
/* These override element sizing, typography, icon treatment. They do NOT touch
   colors, backgrounds, shadows, or container styling — those are owned by themes. */

/* ---- Compacta: dense, smaller, uppercase labels ---- */
[data-ui="compacta"] {
    --ui-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --ui-font-heading: var(--ui-font-family);
    --ui-font-numeric: var(--ui-font-family);
    --ui-font-base: 12px;
    --ui-font-label: 11px;
    --ui-font-btn: 12px;
    --ui-font-th: 10px;
    --ui-font-td: 12px;
    --ui-font-h3: 15px;
    --ui-label-weight: 600;
    --ui-label-transform: uppercase;
    --ui-label-spacing: 0.5px;
    --ui-th-transform: uppercase;
    --ui-th-spacing: 0.5px;
    --ui-pad-btn: 6px 14px;
    --ui-pad-btn-sm: 4px 10px;
    --ui-pad-input: 8px 10px;
    --ui-pad-tab: 6px 12px;
    --ui-pad-cell: 6px 8px;
    --ui-pad-card: 12px;
    --ui-gap-row: 4px;
    --ui-gap-form: 10px;
    --ui-icon-size: 14px;
    --ui-icon-size-label: 12px;
    --ui-icon-stroke: 1.75;
    --ui-icon-gap: 3px;
    --ui-icon-tone: 0.6;
    --ui-stat-number: 26px;
    --ui-sidebar-w: 210px;
    --ui-sidebar-collapsed: 52px;
    --ui-btn-icon-size: 26px;
    --ui-modal-footer-align: flex-end;
}

/* ---- Editorial: generous, serif headings, tabular numerics ---- */
[data-ui="editorial"] {
    --ui-font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --ui-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ui-font-numeric: 'Fira Code', 'Courier New', Consolas, monospace;
    --ui-font-base: 15px;
    --ui-font-label: 13px;
    --ui-font-btn: 14px;
    --ui-font-th: 13px;
    --ui-font-td: 15px;
    --ui-font-h3: 22px;
    --ui-label-weight: 500;
    --ui-label-transform: none;
    --ui-label-spacing: normal;
    --ui-th-transform: none;
    --ui-th-spacing: normal;
    --ui-pad-btn: 14px 28px;
    --ui-pad-btn-sm: 10px 20px;
    --ui-pad-input: 14px 18px;
    --ui-pad-tab: 12px 28px;
    --ui-pad-cell: 14px 20px;
    --ui-pad-card: 24px;
    --ui-gap-row: 14px;
    --ui-gap-form: 22px;
    --ui-icon-size: 16px;
    --ui-icon-size-label: 14px;
    --ui-icon-stroke: 1.5;
    --ui-icon-gap: 8px;
    --ui-icon-tone: 0.5;
    --ui-stat-number: 44px;
    --ui-sidebar-w: 270px;
    --ui-sidebar-collapsed: 80px;
    --ui-btn-icon-size: 36px;
    --ui-modal-footer-align: center;
}

/* ---- Tecnica: data-first, monospace numerics, thick strokes ---- */
[data-ui="tecnica"] {
    --ui-font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --ui-font-heading: var(--ui-font-family);
    --ui-font-numeric: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Courier New', monospace;
    --ui-font-base: 13px;
    --ui-font-label: 11px;
    --ui-font-btn: 12px;
    --ui-font-th: 10px;
    --ui-font-td: 13px;
    --ui-font-h3: 15px;
    --ui-label-weight: 700;
    --ui-label-transform: uppercase;
    --ui-label-spacing: 1px;
    --ui-th-transform: uppercase;
    --ui-th-spacing: 1px;
    --ui-pad-btn: 10px 20px;
    --ui-pad-btn-sm: 6px 14px;
    --ui-pad-input: 10px 12px;
    --ui-pad-tab: 8px 18px;
    --ui-pad-cell: 8px 12px;
    --ui-pad-card: 16px;
    --ui-gap-row: 6px;
    --ui-gap-form: 14px;
    --ui-icon-size: 14px;
    --ui-icon-size-label: 12px;
    --ui-icon-stroke: 2.5;
    --ui-icon-gap: 4px;
    --ui-icon-tone: 1;
    --ui-stat-number: 32px;
    --ui-sidebar-w: 230px;
    --ui-sidebar-collapsed: 64px;
    --ui-btn-icon-size: 30px;
    --ui-modal-footer-align: space-between;
}

/* ======== THEME SYSTEM ======== */

/* ---- Sistema Dark ---- */
[data-mode="dark"] {
    --bg: #1e2a3a; --bg-light: #243242; --bg-dark: #172230;
    --shadow-dark: #141e2b; --shadow-light: #263545;
    --accent: #5b9bd5; --accent-hover: #6faee0; --accent-light: #7db3e0;
    --text: #e0e8f0; --text-secondary: #8899aa; --text-light: #5a6f82;
    --success: #2ecc71; --success-light: #27ae60;
    --danger: #e74c3c; --danger-light: #c0392b;
    --warning: #f1c40f; --warning-light: #d4a017;
}
[data-mode="dark"] .attendance-status.present { background: #1a3a2a; }
[data-mode="dark"] .attendance-status.absent { background: #3a1a1a; }
[data-mode="dark"] .attendance-status.late { background: #3a321a; }
[data-mode="dark"] .attendance-status.justified { background: #1a2a3a; }
[data-mode="dark"] select.neu-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238899aa' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* =============================================
   TEMA 2: NEU PRO — Degradado celeste suave
   background: linear-gradient(160deg, #edf6ff, #dfe9f8, #d4e3f6)
   Textos con alto contraste para legibilidad
   ============================================= */
[data-theme="neupro"] {
    --bg: #dfe9f8; --bg-light: #edf6ff; --bg-dark: #d4e3f6;
    --shadow-dark: #b8c8dc; --shadow-light: #ffffff;
    --accent: #4a7ec2; --accent-hover: #3a6aac; --accent-light: #6a9dd6;
    --text: #1a2a3a; --text-secondary: #3a506a; --text-light: #6a8098;
    --success: #1e8449; --success-light: #27ae60;
    --danger: #a93226; --danger-light: #c0392b;
    --warning: #b7950b; --warning-light: #d4a017;
    --radius: 18px; --radius-sm: 12px;
}
[data-theme="neupro"][data-mode="dark"] {
    --bg: #1a2538; --bg-light: #202e42; --bg-dark: #141e2e;
    --shadow-dark: #0e1620; --shadow-light: #263550;
    --accent: #6a9dd6; --accent-hover: #84b4e5;
    --text: #e0e8f2; --text-secondary: #96a8ba; --text-light: #607080;
    --success: #2ecc71; --danger: #e74c3c; --warning: #f1c40f;
}
/* Body */
[data-theme="neupro"] body {
    background: linear-gradient(160deg, #edf6ff 0%, #dfe9f8 50%, #d4e3f6 100%) !important;
    background-attachment: fixed !important;
}
[data-theme="neupro"][data-mode="dark"] body {
    background: linear-gradient(160deg, #202e42 0%, #1a2538 50%, #141e2e 100%) !important;
    background-attachment: fixed !important;
}
/* Cards */
[data-theme="neupro"] .neu-card, [data-theme="neupro"] .stat-card, [data-theme="neupro"] .toast {
    background: linear-gradient(160deg, #edf6ff 0%, #dfe9f8 50%, #d4e3f6 100%) !important;
    box-shadow: 4px 4px 10px var(--shadow-dark), -2px -2px 10px var(--shadow-light) !important;
    border-radius: var(--radius); border: none;
}
[data-theme="neupro"][data-mode="dark"] .neu-card,
[data-theme="neupro"][data-mode="dark"] .stat-card,
[data-theme="neupro"][data-mode="dark"] .toast {
    background: linear-gradient(160deg, #202e42 0%, #1a2538 50%, #141e2e 100%) !important;
}
/* Sidebar */
[data-theme="neupro"] .sidebar {
    background: linear-gradient(180deg, #edf6ff 0%, #dfe9f8 50%, #d4e3f6 100%) !important;
    box-shadow: 4px 0 10px var(--shadow-dark), -2px 0 10px var(--shadow-light) !important;
}
[data-theme="neupro"][data-mode="dark"] .sidebar {
    background: linear-gradient(180deg, #202e42 0%, #1a2538 50%, #141e2e 100%) !important;
}
/* Top-bar */
[data-theme="neupro"] .top-bar {
    background: linear-gradient(90deg, #dfe9f8 0%, #edf6ff 50%, #dfe9f8 100%) !important;
    box-shadow: 0 4px 10px var(--shadow-dark), 0 -2px 10px var(--shadow-light) !important;
}
[data-theme="neupro"][data-mode="dark"] .top-bar {
    background: linear-gradient(90deg, #1a2538 0%, #202e42 50%, #1a2538 100%) !important;
}
/* Botones — fondo mas claro para contraste con texto */
[data-theme="neupro"] .neu-btn, [data-theme="neupro"] .neu-btn-icon, [data-theme="neupro"] .btn-icon-sm, [data-theme="neupro"] .badge {
    background: linear-gradient(160deg, #f2f8ff 0%, #e4eef8 100%) !important;
    box-shadow: 4px 4px 10px var(--shadow-dark), -2px -2px 10px var(--shadow-light) !important;
    border-radius: var(--radius-sm); border: none; color: var(--text) !important;
}
[data-theme="neupro"][data-mode="dark"] .neu-btn,
[data-theme="neupro"][data-mode="dark"] .neu-btn-icon,
[data-theme="neupro"][data-mode="dark"] .btn-icon-sm,
[data-theme="neupro"][data-mode="dark"] .badge {
    background: linear-gradient(160deg, #263550 0%, #1a2538 100%) !important;
    color: var(--text) !important;
}
[data-theme="neupro"] .neu-btn:hover {
    box-shadow: 5px 5px 12px var(--shadow-dark), -3px -3px 12px var(--shadow-light) !important;
}
[data-theme="neupro"] .neu-btn:active, [data-theme="neupro"] .neu-btn-icon:active {
    background: linear-gradient(160deg, #d4e3f6 0%, #edf6ff 100%) !important;
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -2px -2px 10px var(--shadow-light) !important;
}
/* Primary con buen contraste texto blanco */
[data-theme="neupro"] .btn-primary {
    background: linear-gradient(160deg, #6a9dd6 0%, #3a6aac 100%) !important;
    color: #fff !important;
    box-shadow: 4px 4px 10px var(--shadow-dark), -2px -2px 10px var(--shadow-light) !important;
}
[data-theme="neupro"] .btn-primary:hover {
    background: linear-gradient(160deg, #7daae0 0%, #4a7ec2 100%) !important;
}
/* Tabs */
[data-theme="neupro"] .tabs {
    gap: 6px; box-shadow: none !important; border: none !important; background: transparent !important;
    padding: 4px 0;
}
[data-theme="neupro"] .tab-btn {
    background: linear-gradient(160deg, #f2f8ff 0%, #e4eef8 100%) !important;
    box-shadow: 4px 4px 10px var(--shadow-dark), -2px -2px 10px var(--shadow-light) !important;
    border-radius: var(--radius-sm); color: var(--text) !important;
}
[data-theme="neupro"] .tab-btn.active {
    background: linear-gradient(160deg, #d4e3f6 0%, #edf6ff 100%) !important;
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -2px -2px 10px var(--shadow-light) !important;
    color: var(--accent) !important; font-weight: 700;
}
/* Inputs — fondo ligeramente mas oscuro que el card para distinguirse */
[data-theme="neupro"] .neu-input, [data-theme="neupro"] .neu-inset {
    background: linear-gradient(160deg, #d4e3f6 0%, #dfe9f8 100%) !important;
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -2px -2px 10px var(--shadow-light) !important;
    border-radius: var(--radius-sm); border: none; color: var(--text) !important;
}
[data-theme="neupro"][data-mode="dark"] .neu-input,
[data-theme="neupro"][data-mode="dark"] .neu-inset {
    background: linear-gradient(160deg, #141e2e 0%, #1a2538 100%) !important;
    color: var(--text) !important;
}
[data-theme="neupro"] .neu-input:focus {
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -2px -2px 10px var(--shadow-light), 0 0 0 2px var(--accent) !important;
}
/* Nav */
[data-theme="neupro"] .nav-link { border-radius: var(--radius-sm); color: var(--text-secondary); }
[data-theme="neupro"] .nav-link:hover {
    background: linear-gradient(160deg, #f2f8ff 0%, #e4eef8 100%);
    box-shadow: 4px 4px 10px var(--shadow-dark), -2px -2px 10px var(--shadow-light);
    color: var(--accent);
}
[data-theme="neupro"] .nav-link.active {
    background: linear-gradient(160deg, #d4e3f6 0%, #dfe9f8 100%) !important;
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -2px -2px 10px var(--shadow-light) !important;
    color: var(--accent) !important; font-weight: 700;
}
[data-theme="neupro"] select.neu-input { border-radius: var(--radius-sm); }
/* Modal */
[data-theme="neupro"] .modal-box {
    background: linear-gradient(160deg, #edf6ff 0%, #dfe9f8 50%, #d4e3f6 100%) !important;
}
[data-theme="neupro"][data-mode="dark"] .modal-box {
    background: linear-gradient(160deg, #202e42 0%, #1a2538 50%, #141e2e 100%) !important;
}
/* Dark: tabs */
[data-theme="neupro"][data-mode="dark"] .tab-btn {
    background: linear-gradient(160deg, #263550 0%, #1e2a3e 100%) !important;
    color: var(--text-secondary) !important;
}
[data-theme="neupro"][data-mode="dark"] .tab-btn.active {
    background: linear-gradient(160deg, #141e2e 0%, #1a2538 100%) !important;
    color: var(--accent) !important;
}
/* Dark: nav links */
[data-theme="neupro"][data-mode="dark"] .nav-link:hover {
    background: linear-gradient(160deg, #263550 0%, #1e2a3e 100%);
    color: var(--accent);
}
[data-theme="neupro"][data-mode="dark"] .nav-link.active {
    background: linear-gradient(160deg, #141e2e 0%, #1a2538 100%) !important;
    color: var(--accent) !important;
}
/* Dark: btn active/pressed */
[data-theme="neupro"][data-mode="dark"] .neu-btn:active,
[data-theme="neupro"][data-mode="dark"] .neu-btn-icon:active {
    background: linear-gradient(160deg, #141e2e 0%, #202e42 100%) !important;
}
/* Dark: btn-primary */
[data-theme="neupro"][data-mode="dark"] .btn-primary {
    background: linear-gradient(160deg, #4a7ec2 0%, #3a6aac 100%) !important;
    color: #fff !important;
}
[data-theme="neupro"][data-mode="dark"] .btn-primary:hover {
    background: linear-gradient(160deg, #5a8ed0 0%, #4a7ec2 100%) !important;
}
/* Textos — reforzar contraste sobre fondos claros */
[data-theme="neupro"] h1, [data-theme="neupro"] h2, [data-theme="neupro"] h3, [data-theme="neupro"] h4 {
    color: var(--text);
}
[data-theme="neupro"] .section-title, [data-theme="neupro"] .card-header h3 {
    color: var(--text);
}
[data-theme="neupro"] .stat-number { color: var(--accent); }
[data-theme="neupro"] .text-secondary { color: var(--text-secondary) !important; }

/* =============================================
   TEMA 3: GLASS - Fondo celeste claro, manchas azules,
   cards cristal translucido. Solo usa body::before para
   las manchas. No toca pseudo-elements de componentes.
   ============================================= */
[data-theme="glass"] {
    --bg: rgba(255,255,255,0.38); --bg-light: rgba(255,255,255,0.5); --bg-dark: rgba(255,255,255,0.22);
    --shadow-dark: rgba(0,50,120,0.06); --shadow-light: rgba(255,255,255,0.75);
    --accent: #1e88e5; --accent-hover: #1565c0; --accent-light: #64b5f6;
    --text: #0a1929; --text-secondary: #2c4460; --text-light: #5a7a9a;
    --success: #00b894; --success-light: #55efc4;
    --danger: #d63031; --danger-light: #ff7675;
    --warning: #fdcb6e; --warning-light: #ffeaa7;
    --radius: 18px; --radius-sm: 12px;
}
[data-theme="glass"][data-mode="dark"] {
    --bg: rgba(12,22,42,0.45); --bg-light: rgba(18,30,55,0.5); --bg-dark: rgba(8,15,30,0.55);
    --shadow-dark: rgba(0,0,0,0.3); --shadow-light: rgba(100,180,255,0.06);
    --accent: #64b5f6; --accent-hover: #90caf9;
    --text: #e2e8f0; --text-secondary: #94a3b8; --text-light: #64748b;
    --success: #55efc4; --danger: #ff7675; --warning: #ffeaa7;
}
/* Glass: fondo celeste + 4 manchas azules via body::before unico */
[data-theme="glass"] body {
    background: #d4e4f5 !important;
}
[data-theme="glass"] body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 45% 50% at 8% 15%, rgba(30,136,229,0.5) 0%, transparent 70%),
        radial-gradient(ellipse 40% 45% at 85% 75%, rgba(66,165,245,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 35% 40% at 70% 20%, rgba(25,118,210,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 30% 35% at 20% 80%, rgba(100,181,246,0.3) 0%, transparent 70%);
}
[data-theme="glass"][data-mode="dark"] body {
    background: #080e1a !important;
}
[data-theme="glass"][data-mode="dark"] body::before {
    background:
        radial-gradient(ellipse 50% 55% at 8% 15%, rgba(30,136,229,0.4) 0%, transparent 65%),
        radial-gradient(ellipse 45% 50% at 85% 75%, rgba(66,165,245,0.35) 0%, transparent 65%),
        radial-gradient(ellipse 40% 45% at 70% 20%, rgba(25,118,210,0.3) 0%, transparent 65%),
        radial-gradient(ellipse 35% 40% at 20% 80%, rgba(100,181,246,0.25) 0%, transparent 65%);
}
/* Glass dark: cards con vidrio oscuro translucido + bordes celeste sutil */
[data-theme="glass"][data-mode="dark"] .neu-card,
[data-theme="glass"][data-mode="dark"] .neu-inset {
    border: 1px solid rgba(100,180,255,0.12);
    border-top-color: rgba(100,180,255,0.2);
    box-shadow: 0 6px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(100,180,255,0.1) !important;
}
[data-theme="glass"][data-mode="dark"] .sidebar {
    border-right: 1px solid rgba(100,180,255,0.1);
    box-shadow: 2px 0 16px rgba(0,0,0,0.2) !important;
}
[data-theme="glass"][data-mode="dark"] .top-bar {
    border-bottom: 1px solid rgba(100,180,255,0.1);
    box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
}
[data-theme="glass"][data-mode="dark"] .neu-btn,
[data-theme="glass"][data-mode="dark"] .neu-btn-icon,
[data-theme="glass"][data-mode="dark"] .btn-icon-sm,
[data-theme="glass"][data-mode="dark"] .tab-btn {
    border: 1px solid rgba(100,180,255,0.1);
    border-top-color: rgba(100,180,255,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(100,180,255,0.08) !important;
}
[data-theme="glass"][data-mode="dark"] .neu-input {
    border: 1px solid rgba(100,180,255,0.08);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.15) !important;
}
[data-theme="glass"][data-mode="dark"] .toast {
    border: 1px solid rgba(100,180,255,0.12);
    box-shadow: 0 6px 24px rgba(0,0,0,0.25) !important;
}
[data-theme="glass"][data-mode="dark"] .btn-primary {
    box-shadow: 0 4px 24px rgba(30,136,229,0.4) !important;
}
/* Glass: cards con cristal translucido + borde brillante top */
[data-theme="glass"] .neu-card, [data-theme="glass"] .neu-inset {
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    border-top-color: rgba(255,255,255,0.7);
    box-shadow: 0 6px 24px rgba(0,40,100,0.06), inset 0 1px 0 rgba(255,255,255,0.55) !important;
    border-radius: var(--radius);
}
[data-theme="glass"] .sidebar {
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255,255,255,0.4);
    box-shadow: 2px 0 16px rgba(0,40,100,0.05) !important;
}
[data-theme="glass"] .top-bar {
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 3px 12px rgba(0,40,100,0.04) !important;
}
[data-theme="glass"] .neu-btn, [data-theme="glass"] .neu-btn-icon, [data-theme="glass"] .btn-icon-sm, [data-theme="glass"] .tab-btn {
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.45);
    border-top-color: rgba(255,255,255,0.65);
    box-shadow: 0 2px 10px rgba(0,40,100,0.04), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
[data-theme="glass"] .neu-btn:active, [data-theme="glass"] .neu-btn-icon:active, [data-theme="glass"] .tab-btn.active, [data-theme="glass"] .nav-link.active {
    box-shadow: inset 0 2px 8px rgba(0,40,100,0.08) !important;
}
[data-theme="glass"] .neu-input {
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: inset 0 1px 4px rgba(0,40,100,0.04) !important;
}
[data-theme="glass"] .toast {
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 6px 24px rgba(0,40,100,0.08) !important;
}
[data-theme="glass"] .btn-primary {
    background: linear-gradient(135deg, #1e88e5, #42a5f5) !important;
    border: none; color: #fff !important;
    box-shadow: 0 4px 20px rgba(30,136,229,0.3) !important;
}
[data-theme="glass"] .btn-primary:hover {
    box-shadow: 0 6px 28px rgba(30,136,229,0.4) !important;
}


/* =============================================
   TEMA 4: AURORA — Sidebar oscuro + acentos morados
   v238 — Reemplaza el antiguo "Aero" (Windows 7 glass) por un estilo
   moderno tipo dashboard SaaS: sidebar charcoal con texto blanco,
   topbar limpio blanco, acentos en gradiente índigo-violeta, cards
   blancas con bordes redondeados grandes, sin glass/blur.
   ============================================= */
[data-theme="aurora"] {
    --bg: #f1f5f9; --bg-light: #ffffff; --bg-dark: #e2e8f0;
    --shadow-dark: rgba(15,23,42,0.08); --shadow-light: rgba(255,255,255,1);
    --accent: #7c3aed; --accent-hover: #6d28d9; --accent-light: #a78bfa;
    --text: #0f172a; --text-secondary: #475569; --text-light: #94a3b8;
    --success: #16a34a; --success-light: #22c55e;
    --danger: #dc2626; --danger-light: #ef4444;
    --warning: #d97706; --warning-light: #f59e0b;
    --radius: 12px; --radius-sm: 8px;
    --sidebar-bg: #0f172a;
    --sidebar-text: #cbd5e1;
    --sidebar-active-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
[data-theme="aurora"][data-mode="dark"] {
    --bg: #0f172a; --bg-light: #1e293b; --bg-dark: #020617;
    --shadow-dark: rgba(0,0,0,0.4); --shadow-light: rgba(255,255,255,0.04);
    --accent: #a78bfa; --accent-hover: #c4b5fd;
    --text: #e2e8f0; --text-secondary: #94a3b8; --text-light: #64748b;
    --sidebar-bg: #020617;
    --sidebar-text: #cbd5e1;
}

/* Aurora: fondo limpio claro (no glass) */
[data-theme="aurora"] body {
    background: #f1f5f9 !important;
    background-attachment: fixed !important;
}
[data-theme="aurora"][data-mode="dark"] body {
    background: #020617 !important;
}

/* Aurora: cards limpias con borde sutil */
[data-theme="aurora"] .neu-card, [data-theme="aurora"] .neu-inset {
    background: #ffffff !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.04) !important;
    border-radius: var(--radius);
}
[data-theme="aurora"][data-mode="dark"] .neu-card, [data-theme="aurora"][data-mode="dark"] .neu-inset {
    background: #1e293b !important;
    border: 1px solid #334155;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Aurora: sidebar oscuro charcoal */
[data-theme="aurora"] .sidebar {
    background: #0f172a !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-right: none;
    box-shadow: 1px 0 4px rgba(15,23,42,0.1) !important;
    color: #cbd5e1 !important;
}
[data-theme="aurora"][data-mode="dark"] .sidebar {
    background: #020617 !important;
    border-right: 1px solid #1e293b;
}
[data-theme="aurora"] .sidebar a, [data-theme="aurora"] .sidebar .nav-link {
    color: #cbd5e1 !important;
}
[data-theme="aurora"] .sidebar a:hover, [data-theme="aurora"] .sidebar .nav-link:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
}
[data-theme="aurora"] .sidebar .nav-link.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    border-left: none !important;
    box-shadow: 0 4px 12px rgba(124,58,237,0.4) !important;
    border-radius: var(--radius-sm);
}

/* Aurora: top-bar limpio blanco */
[data-theme="aurora"] .top-bar {
    background: #ffffff !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04) !important;
}
[data-theme="aurora"][data-mode="dark"] .top-bar {
    background: #1e293b !important;
    border-bottom: 1px solid #334155;
}

/* Aurora: botones secundarios con borde */
[data-theme="aurora"] .neu-btn, [data-theme="aurora"] .neu-btn-icon, [data-theme="aurora"] .btn-icon-sm {
    background: #ffffff !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
    border-radius: var(--radius-sm);
    color: var(--text);
}
[data-theme="aurora"] .neu-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
[data-theme="aurora"] .neu-btn:active, [data-theme="aurora"] .neu-btn-icon:active {
    background: #f1f5f9 !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.05) !important;
}

/* Aurora: botones primarios con gradiente morado vibrante */
[data-theme="aurora"] .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: none; color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(124,58,237,0.35), 0 2px 4px rgba(124,58,237,0.2) !important;
    border-radius: var(--radius-sm);
}
[data-theme="aurora"] .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    box-shadow: 0 6px 16px rgba(124,58,237,0.45) !important;
    transform: translateY(-1px);
}

/* Aurora: tabs */
[data-theme="aurora"] .tab-btn {
    background: transparent !important;
    border: 1px solid transparent;
    box-shadow: none !important;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}
[data-theme="aurora"] .tab-btn:hover { background: #f1f5f9 !important; }
[data-theme="aurora"] .tab-btn.active {
    background: #ede9fe !important;
    color: #7c3aed !important;
    font-weight: 600;
    border: 1px solid #ddd6fe;
    box-shadow: none !important;
}

/* Aurora: inputs */
[data-theme="aurora"] .neu-input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1;
    box-shadow: none !important;
    border-radius: var(--radius-sm);
}
[data-theme="aurora"] .neu-input:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important;
    outline: none;
}

/* Aurora: badges sutiles */
[data-theme="aurora"] .badge {
    border: none;
    box-shadow: none;
    border-radius: 12px;
    font-weight: 600;
}

/* =============================================
   TEMA 5: CLEAN — Elevated cards con sombra
   Fondo gris azulado, cards con degradado claro,
   sombra unilateral grande, highlight interior,
   bordes muy redondeados
   ============================================= */
[data-theme="sunset"] {
    --bg: #d0dbe1; --bg-light: #f2f6f9; --bg-dark: #c2cdd4;
    --shadow-dark: hsl(0 0% 0% / 0.2); --shadow-light: hsl(0 0% 100% / 1);
    --accent: #6366f1; --accent-hover: #4f46e5; --accent-light: #818cf8;
    --text: #2d3142; --text-secondary: #555770; --text-light: #8890a0;
    --success: #22c55e; --success-light: #4ade80;
    --danger: #ef4444; --danger-light: #f87171;
    --warning: #f59e0b; --warning-light: #fbbf24;
    --radius: 24px; --radius-sm: 16px;
}
[data-theme="sunset"][data-mode="dark"] {
    --bg: #1a1f2e; --bg-light: #2a3040; --bg-dark: #121620;
    --shadow-dark: hsl(0 0% 0% / 0.4); --shadow-light: hsl(0 0% 100% / 0.04);
    --accent: #818cf8; --accent-hover: #a5b4fc;
    --text: #e2e8f0; --text-secondary: #94a3b8; --text-light: #64748b;
    --success: #4ade80; --danger: #f87171; --warning: #fbbf24;
}
/* Clean: fondo gris azulado */
[data-theme="sunset"] body {
    background: #d3efff94 !important;
}
[data-theme="sunset"][data-mode="dark"] body {
    background: #1a1f2e !important;
}
/* Clean: cards con degradado + sombra grande unilateral + highlight interior */
[data-theme="sunset"] .neu-card, [data-theme="sunset"] .stat-card, [data-theme="sunset"] .toast {
    background: linear-gradient(to bottom left, #e5f1f7, #e9f5ff) !important;
    box-shadow: inset -2px 2px hsl(0 0% 100% / 1), -12px 12px 28px hsl(0 0% 0% / 0.18) !important;
    border-radius: var(--radius); border: none;
}
[data-theme="sunset"][data-mode="dark"] .neu-card,
[data-theme="sunset"][data-mode="dark"] .stat-card,
[data-theme="sunset"][data-mode="dark"] .toast {
    background: linear-gradient(to bottom left, #252a3a, #2a3040) !important;
    box-shadow: inset -2px 2px hsl(0 0% 100% / 0.05), -12px 12px 28px hsl(0 0% 0% / 0.35) !important;
}
/* Clean: sidebar */
[data-theme="sunset"] .sidebar {
    background: linear-gradient(180deg, #e5f1f7, #e9f5ff) !important;
    box-shadow: inset -2px 0 hsl(0 0% 100% / 0.8), 6px 0 18px hsl(0 0% 0% / 0.1) !important;
}
[data-theme="sunset"][data-mode="dark"] .sidebar {
    background: linear-gradient(180deg, #252a3a, #2a3040) !important;
    box-shadow: inset -2px 0 hsl(0 0% 100% / 0.03), 6px 0 18px hsl(0 0% 0% / 0.3) !important;
}
/* Clean: top-bar */
[data-theme="sunset"] .top-bar {
    background: linear-gradient(90deg, #e5f1f7, #e9f5ff) !important;
    box-shadow: inset 0 -2px hsl(0 0% 100% / 0.8), 0 6px 18px hsl(0 0% 0% / 0.1) !important;
}
[data-theme="sunset"][data-mode="dark"] .top-bar {
    background: linear-gradient(90deg, #222838, #2a3040) !important;
    box-shadow: inset 0 -2px hsl(0 0% 100% / 0.03), 0 6px 18px hsl(0 0% 0% / 0.3) !important;
}
/* Clean: botones elevados con degradado */
[data-theme="sunset"] .neu-btn, [data-theme="sunset"] .neu-btn-icon, [data-theme="sunset"] .btn-icon-sm {
    background: linear-gradient(to bottom left, #e5f1f7, #e9f5ff) !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.9), -4px 4px 12px hsl(0 0% 0% / 0.12) !important;
    border-radius: var(--radius-sm); border: none; color: var(--text) !important;
}
[data-theme="sunset"][data-mode="dark"] .neu-btn,
[data-theme="sunset"][data-mode="dark"] .neu-btn-icon,
[data-theme="sunset"][data-mode="dark"] .btn-icon-sm {
    background: linear-gradient(to bottom left, #2a3040, #323848) !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.04), -4px 4px 12px hsl(0 0% 0% / 0.25) !important;
    color: var(--text) !important;
}
[data-theme="sunset"] .neu-btn:hover {
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.9), -6px 6px 18px hsl(0 0% 0% / 0.16) !important;
    transform: translate(1px, -1px);
}
[data-theme="sunset"] .neu-btn:active, [data-theme="sunset"] .neu-btn-icon:active {
    background: linear-gradient(to bottom left, #d0e4ee, #daeaf4) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.08), inset -1px 1px hsl(0 0% 100% / 0.5) !important;
    transform: translate(0, 0);
}
[data-theme="sunset"][data-mode="dark"] .neu-btn:active,
[data-theme="sunset"][data-mode="dark"] .neu-btn-icon:active {
    background: linear-gradient(to bottom left, #1a1f2e, #222838) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.2), inset -1px 1px hsl(0 0% 100% / 0.02) !important;
}
/* Clean: primary */
[data-theme="sunset"] .btn-primary {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    color: #fff !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.3), -6px 6px 18px hsl(250 70% 50% / 0.25) !important;
}
[data-theme="sunset"] .btn-primary:hover {
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.3), -8px 8px 24px hsl(250 70% 50% / 0.3) !important;
}
[data-theme="sunset"][data-mode="dark"] .btn-primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.1), -6px 6px 18px hsl(250 70% 40% / 0.3) !important;
}
/* Clean: badge */
[data-theme="sunset"] .badge {
    background: linear-gradient(to bottom left, #e5f1f7, #e9f5ff) !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.8), -3px 3px 8px hsl(0 0% 0% / 0.1);
    color: var(--text) !important;
}
[data-theme="sunset"][data-mode="dark"] .badge {
    background: linear-gradient(to bottom left, #2a3040, #323848) !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.04), -3px 3px 8px hsl(0 0% 0% / 0.2);
}
/* Clean: tabs */
[data-theme="sunset"] .tabs {
    gap: 8px; box-shadow: none !important; border: none !important; background: transparent !important;
    padding: 4px 0;
}
[data-theme="sunset"] .tab-btn {
    background: linear-gradient(to bottom left, #e5f1f7, #e9f5ff) !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.9), -4px 4px 12px hsl(0 0% 0% / 0.1) !important;
    border-radius: var(--radius-sm); color: var(--text-secondary) !important;
}
[data-theme="sunset"] .tab-btn.active {
    background: linear-gradient(to bottom left, #d0e4ee, #daeaf4) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.06), inset -1px 1px hsl(0 0% 100% / 0.5) !important;
    color: var(--accent) !important; font-weight: 700;
}
[data-theme="sunset"][data-mode="dark"] .tab-btn {
    background: linear-gradient(to bottom left, #2a3040, #323848) !important;
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.04), -4px 4px 12px hsl(0 0% 0% / 0.2) !important;
    color: var(--text-secondary) !important;
}
[data-theme="sunset"][data-mode="dark"] .tab-btn.active {
    background: linear-gradient(to bottom left, #1a1f2e, #222838) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.15), inset -1px 1px hsl(0 0% 100% / 0.02) !important;
    color: var(--accent) !important;
}
/* Clean: inputs hundidos */
[data-theme="sunset"] .neu-input, [data-theme="sunset"] .neu-inset {
    background: linear-gradient(to top right, #cfe0ea, #ddedf5) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.06), inset -2px 2px hsl(0 0% 100% / 0.6) !important;
    border-radius: var(--radius-sm); border: none; color: var(--text) !important;
}
[data-theme="sunset"][data-mode="dark"] .neu-input,
[data-theme="sunset"][data-mode="dark"] .neu-inset {
    background: linear-gradient(to top right, #121620, #1a1f2e) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.2), inset -2px 2px hsl(0 0% 100% / 0.02) !important;
    color: var(--text) !important;
}
[data-theme="sunset"] .neu-input:focus {
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.06), inset -2px 2px hsl(0 0% 100% / 0.6), 0 0 0 2px var(--accent) !important;
}
/* Clean: nav */
[data-theme="sunset"] .nav-link { border-radius: var(--radius-sm); }
[data-theme="sunset"] .nav-link:hover {
    background: linear-gradient(to bottom left, #e5f1f7, #e9f5ff);
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.8), -3px 3px 8px hsl(0 0% 0% / 0.08);
    color: var(--accent);
}
[data-theme="sunset"] .nav-link.active {
    background: linear-gradient(to bottom left, #d0e4ee, #daeaf4) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.06), inset -1px 1px hsl(0 0% 100% / 0.5) !important;
    color: var(--accent) !important; font-weight: 700;
}
[data-theme="sunset"][data-mode="dark"] .nav-link:hover {
    background: linear-gradient(to bottom left, #2a3040, #323848);
    box-shadow: inset -1px 1px hsl(0 0% 100% / 0.03), -3px 3px 8px hsl(0 0% 0% / 0.15);
    color: var(--accent);
}
[data-theme="sunset"][data-mode="dark"] .nav-link.active {
    background: linear-gradient(to bottom left, #1a1f2e, #222838) !important;
    box-shadow: inset 2px -2px hsl(0 0% 0% / 0.15), inset -1px 1px hsl(0 0% 100% / 0.02) !important;
    color: var(--accent) !important;
}
[data-theme="sunset"] select.neu-input { border-radius: var(--radius-sm); }
/* Clean: modal */
[data-theme="sunset"] .modal-box {
    background: linear-gradient(to bottom left, #e5f1f7, #e9f5ff) !important;
    box-shadow: inset -2px 2px hsl(0 0% 100% / 1), -16px 16px 40px hsl(0 0% 0% / 0.22) !important;
    border-radius: var(--radius);
}
[data-theme="sunset"][data-mode="dark"] .modal-box {
    background: linear-gradient(to bottom left, #252a3a, #2a3040) !important;
    box-shadow: inset -2px 2px hsl(0 0% 100% / 0.04), -16px 16px 40px hsl(0 0% 0% / 0.4) !important;
}

/* =============================================
   TEMA 6: FLORAL GLASS — Imagen flores de fondo
   Elementos vidrio gris claro translucido,
   sin alterar position/z-index de elementos
   ============================================= */
[data-theme="midnight"] {
    --bg: rgba(235,240,248,0.55); --bg-light: rgba(245,248,252,0.6); --bg-dark: rgba(225,232,240,0.5);
    --shadow-dark: rgba(0,0,0,0.06); --shadow-light: rgba(255,255,255,0.6);
    --accent: #6366f1; --accent-hover: #4f46e5; --accent-light: #818cf8;
    --text: #1e293b; --text-secondary: #475569; --text-light: #94a3b8;
    --success: #22c55e; --success-light: #4ade80;
    --danger: #ef4444; --danger-light: #f87171;
    --warning: #f59e0b; --warning-light: #fbbf24;
    --radius: 16px; --radius-sm: 12px;
}
[data-theme="midnight"][data-mode="dark"] {
    --bg: rgba(18,22,34,0.65); --bg-light: rgba(28,32,48,0.7); --bg-dark: rgba(10,14,22,0.75);
    --shadow-dark: rgba(0,0,0,0.25); --shadow-light: rgba(255,255,255,0.03);
    --accent: #818cf8; --accent-hover: #a5b4fc;
    --text: #e2e8f0; --text-secondary: #94a3b8; --text-light: #64748b;
    --success: #4ade80; --danger: #f87171; --warning: #fbbf24;
}
/* Fondo flores — solo body::before, no afecta layout */
[data-theme="midnight"] body {
    background: #eef2f8 !important;
}
[data-theme="midnight"] body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 55vw 45vh at 18% 22%, rgba(255, 183, 210, 0.55), transparent 55%),
        radial-gradient(ellipse 50vw 55vh at 82% 18%, rgba(205, 175, 235, 0.50), transparent 55%),
        radial-gradient(ellipse 48vw 42vh at 68% 78%, rgba(255, 210, 185, 0.48), transparent 55%),
        radial-gradient(ellipse 42vw 38vh at 28% 82%, rgba(185, 205, 235, 0.45), transparent 55%),
        radial-gradient(ellipse 40vw 40vh at 50% 50%, rgba(255, 220, 230, 0.35), transparent 60%),
        linear-gradient(135deg, #f5f0fa, #e8ecf5, #f0e8ee);
    opacity: 0.9;
}

/* Cuando el usuario configura una imagen custom de fondo (var --floral-bg-image),
   esta capa la muestra encima del gradient para potenciar el glassmorphism.
   Lleva blur suave + saturate/contrast reducidos + máscara radial para un
   efecto onírico donde los bordes se difuminan hacia el gradient de abajo. */
[data-theme="midnight"] body::after {
    content: '';
    position: fixed;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    width: calc(100% + 40px); height: calc(100% + 40px);
    z-index: -1;
    pointer-events: none;
    background-image: var(--floral-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--floral-bg-opacity, 0.55);
    filter: blur(3px) saturate(0.8) contrast(0.9);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.2) 100%);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.2) 100%);
    display: var(--floral-bg-display, none);
}
/* En modo oscuro bajamos opacidad y apagamos más */
[data-theme="midnight"][data-mode="dark"] body::after {
    opacity: var(--floral-bg-opacity, 0.25);
    filter: blur(4px) saturate(0.5) contrast(0.75) brightness(0.55);
}

/* Engrane dentro de la vista previa del tema Floral (esquina inferior derecha) */
.tp-midnight { position: relative; }
.tp-midnight-gear {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--accent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.tp-midnight-gear:hover {
    transform: rotate(45deg) scale(1.1);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.tp-midnight-gear:active {
    transform: rotate(45deg) scale(0.95);
}
[data-theme="midnight"][data-mode="dark"] body {
    background: #0e1220 !important;
}
[data-theme="midnight"][data-mode="dark"] body::before {
    opacity: 0.18;
    filter: contrast(0.7) saturate(0.4) brightness(0.5);
}
/* Vidrio gris claro — mas transparente para ver flores */
[data-theme="midnight"] .neu-card, [data-theme="midnight"] .stat-card, [data-theme="midnight"] .toast, [data-theme="midnight"] .neu-inset {
    background: rgba(235,240,248,0.5) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.4);
    border-top-color: rgba(255,255,255,0.6);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.45) !important;
    border-radius: var(--radius);
}
[data-theme="midnight"][data-mode="dark"] .neu-card,
[data-theme="midnight"][data-mode="dark"] .stat-card,
[data-theme="midnight"][data-mode="dark"] .toast,
[data-theme="midnight"][data-mode="dark"] .neu-inset {
    background: rgba(18,22,34,0.55) !important;
    border: 1px solid rgba(255,255,255,0.05);
    border-top-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
/* Sidebar vidrio */
[data-theme="midnight"] .sidebar {
    background: rgba(235,240,248,0.6) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255,255,255,0.35);
    box-shadow: 2px 0 12px rgba(0,0,0,0.04) !important;
}
[data-theme="midnight"][data-mode="dark"] .sidebar {
    background: rgba(14,18,28,0.7) !important;
    border-right: 1px solid rgba(255,255,255,0.03);
    box-shadow: 2px 0 12px rgba(0,0,0,0.15) !important;
}
/* Top-bar vidrio */
[data-theme="midnight"] .top-bar {
    background: rgba(235,240,248,0.55) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 3px 10px rgba(0,0,0,0.03) !important;
}
[data-theme="midnight"][data-mode="dark"] .top-bar {
    background: rgba(14,18,28,0.65) !important;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
}
/* Botones vidrio */
[data-theme="midnight"] .neu-btn, [data-theme="midnight"] .neu-btn-icon, [data-theme="midnight"] .btn-icon-sm {
    background: rgba(240,244,250,0.5) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.4);
    border-top-color: rgba(255,255,255,0.55);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.35) !important;
    border-radius: var(--radius-sm); color: var(--text) !important;
}
[data-theme="midnight"][data-mode="dark"] .neu-btn,
[data-theme="midnight"][data-mode="dark"] .neu-btn-icon,
[data-theme="midnight"][data-mode="dark"] .btn-icon-sm {
    background: rgba(22,26,40,0.5) !important;
    border: 1px solid rgba(255,255,255,0.05);
    border-top-color: rgba(255,255,255,0.08);
    color: var(--text) !important;
}
[data-theme="midnight"] .neu-btn:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
[data-theme="midnight"] .neu-btn:active, [data-theme="midnight"] .neu-btn-icon:active {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.05) !important;
    border-color: rgba(255,255,255,0.25);
}
/* Primary */
[data-theme="midnight"] .btn-primary {
    background: var(--accent) !important;
    color: #fff !important; border: none !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.25) !important;
}
[data-theme="midnight"][data-mode="dark"] .btn-primary {
    box-shadow: 0 4px 14px rgba(129,140,248,0.2) !important;
}
/* Badge */
[data-theme="midnight"] .badge {
    background: rgba(240,244,250,0.5) !important;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    color: var(--text) !important;
}
[data-theme="midnight"][data-mode="dark"] .badge {
    background: rgba(22,26,40,0.5) !important;
    border: 1px solid rgba(255,255,255,0.05);
}
/* Tabs */
[data-theme="midnight"] .tabs {
    box-shadow: none !important; border: none !important; background: transparent !important;
}
[data-theme="midnight"] .tab-btn {
    background: rgba(240,244,250,0.5) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    color: var(--text-secondary) !important;
}
[data-theme="midnight"] .tab-btn.active {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.04) !important;
    border-color: rgba(255,255,255,0.2);
    color: var(--accent) !important; font-weight: 700;
}
[data-theme="midnight"][data-mode="dark"] .tab-btn {
    background: rgba(22,26,40,0.5) !important;
    border: 1px solid rgba(255,255,255,0.04);
    color: var(--text-secondary) !important;
}
[data-theme="midnight"][data-mode="dark"] .tab-btn.active {
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.12) !important;
    color: var(--accent) !important;
}
/* Inputs */
[data-theme="midnight"] .neu-input {
    background: rgba(228,234,242,0.45) !important;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
    color: var(--text) !important;
}
[data-theme="midnight"][data-mode="dark"] .neu-input {
    background: rgba(10,14,22,0.5) !important;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12) !important;
    color: var(--text) !important;
}
[data-theme="midnight"] .neu-input:focus {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04), 0 0 0 2px var(--accent) !important;
}
/* Nav */
[data-theme="midnight"] .nav-link { border-radius: var(--radius-sm); }
[data-theme="midnight"] .nav-link:hover {
    background: rgba(240,244,250,0.4);
    color: var(--accent);
}
[data-theme="midnight"] .nav-link.active {
    background: rgba(230,236,244,0.5) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.04) !important;
    color: var(--accent) !important; font-weight: 700;
}
[data-theme="midnight"][data-mode="dark"] .nav-link:hover {
    background: rgba(22,26,40,0.4);
    color: var(--accent);
}
[data-theme="midnight"][data-mode="dark"] .nav-link.active {
    background: rgba(18,22,34,0.5) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.12) !important;
    color: var(--accent) !important;
}
[data-theme="midnight"] select.neu-input { border-radius: var(--radius-sm); }
/* Modal */
[data-theme="midnight"] .modal-box {
    background: rgba(238,242,248,0.7) !important;
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}
[data-theme="midnight"][data-mode="dark"] .modal-box {
    background: rgba(18,22,34,0.75) !important;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

/* ======== THEME SELECTOR UI ======== */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.theme-card {
    cursor: pointer; text-align: center; padding: 10px;
    border-radius: var(--radius); transition: var(--transition);
    position: relative; background: var(--bg);
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
}
.theme-card:hover { transform: translateY(-3px); }
.theme-card.active { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-preview {
    width: 100%; aspect-ratio: 16/10; border-radius: 6px;
    overflow: hidden; display: flex; margin-bottom: 8px;
}
.theme-preview .tp-side { width: 22%; }
.theme-preview .tp-main { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 3px; }
.theme-preview .tp-bar { height: 14%; border-radius: 2px; }
.theme-preview .tp-card { flex: 1; border-radius: 2px; }
.theme-name { font-size: 12px; font-weight: 600; }

/* Preview chips */
.tp-sistema .tp-side { background: #c0d0e8; } .tp-sistema .tp-main { background: #d0e1f9; } .tp-sistema .tp-bar { background: #bfd3ec; } .tp-sistema .tp-card { background: #c8daf2; }
.tp-neupro { background: linear-gradient(160deg, #edf6ff, #dfe9f8, #d4e3f6); } .tp-neupro .tp-side { background: linear-gradient(180deg, #edf6ff, #d4e3f6); box-shadow: 1px 0 3px #b8c8dc; } .tp-neupro .tp-main { background: transparent; } .tp-neupro .tp-bar { background: linear-gradient(90deg, #dfe9f8, #edf6ff, #dfe9f8); box-shadow: 2px 2px 4px #b8c8dc, -1px -1px 4px #fff; border-radius: 6px; } .tp-neupro .tp-card { background: linear-gradient(160deg, #edf6ff, #d4e3f6); box-shadow: 2px 2px 5px #b8c8dc, -1px -1px 5px #fff; border-radius: 6px; }
.tp-glass { background: #d4e4f5; position:relative; overflow:hidden; } .tp-glass::before { content:''; position:absolute; top:-20%; left:-15%; width:55%; height:55%; background:radial-gradient(circle,rgba(30,136,229,0.45),transparent 65%); filter:blur(5px); border-radius:50%; } .tp-glass::after { content:''; position:absolute; bottom:-20%; right:-10%; width:50%; height:50%; background:radial-gradient(circle,rgba(66,165,245,0.4),transparent 65%); filter:blur(5px); border-radius:50%; } .tp-glass .tp-side { background:rgba(255,255,255,0.3); position:relative; z-index:1; } .tp-glass .tp-main { background:transparent; position:relative; z-index:1; } .tp-glass .tp-bar { background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.5); position:relative; z-index:1; } .tp-glass .tp-card { background:rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.45); position:relative; z-index:1; }
.tp-aurora { background: linear-gradient(180deg,#1e5fa8,#7ec8e3,#c9e8f5); } .tp-aurora .tp-side { background: rgba(190,215,248,0.8); } .tp-aurora .tp-main { background: transparent; } .tp-aurora .tp-bar { background: rgba(235,242,255,0.85); border-top: 1px solid rgba(255,255,255,0.8); } .tp-aurora .tp-card { background: rgba(235,242,255,0.75); border: 1px solid rgba(255,255,255,0.5); }
.tp-sunset { background: #d0dbe1; } .tp-sunset .tp-side { background: linear-gradient(180deg,#e5f1f7,#e9f5ff); box-shadow: 2px 0 6px rgba(0,0,0,0.08); } .tp-sunset .tp-main { background: #d0dbe1; } .tp-sunset .tp-bar { background: linear-gradient(to bottom left,#e5f1f7,#e9f5ff); box-shadow: inset -1px 1px #fff, -2px 2px 4px rgba(0,0,0,0.1); border-radius: 6px; } .tp-sunset .tp-card { background: linear-gradient(to bottom left,#e5f1f7,#e9f5ff); box-shadow: inset -1px 1px #fff, -3px 3px 6px rgba(0,0,0,0.12); border-radius: 8px; }
.tp-midnight { position:relative; overflow:hidden; background: linear-gradient(135deg, #f5f0fa, #e8ecf5, #f0e8ee); } .tp-midnight::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 60% 55% at 20% 25%, rgba(255,183,210,0.55), transparent 60%), radial-gradient(ellipse 55% 55% at 80% 20%, rgba(205,175,235,0.50), transparent 60%), radial-gradient(ellipse 50% 45% at 70% 80%, rgba(255,210,185,0.45), transparent 60%), radial-gradient(ellipse 45% 40% at 25% 78%, rgba(185,205,235,0.40), transparent 60%); } .tp-midnight .tp-side { background:rgba(240,244,248,0.75); position:relative; z-index:1; border-right:1px solid rgba(255,255,255,0.4); } .tp-midnight .tp-main { background:transparent; position:relative; z-index:1; } .tp-midnight .tp-bar { background:rgba(240,244,248,0.7); border:1px solid rgba(255,255,255,0.45); position:relative; z-index:1; } .tp-midnight .tp-card { background:rgba(240,244,248,0.65); border:1px solid rgba(255,255,255,0.4); position:relative; z-index:1; }

/* ======== UI STYLE PREVIEW CHIPS ======== */
/* Mini-mockups showing density and typography for each UI style. */
.ui-card {
    cursor: pointer; padding: 10px;
    border-radius: var(--radius); transition: var(--transition);
    background: var(--bg);
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    text-align: center;
}
.ui-card:hover { transform: translateY(-3px); }
.ui-card.active { outline: 3px solid var(--accent); outline-offset: 2px; }
.ui-preview {
    width: 100%; aspect-ratio: 16/10; border-radius: 6px;
    overflow: hidden; margin-bottom: 8px;
    background: var(--bg-light);
    display: flex; flex-direction: column; gap: 3px; padding: 6px;
    justify-content: center;
}
.ui-preview .up-line { background: var(--text-secondary); opacity: 0.5; border-radius: 1px; }
.ui-preview .up-row { display: flex; gap: 3px; align-items: center; }
.ui-preview .up-dot { background: var(--accent); border-radius: 50%; flex-shrink: 0; }

/* Sistema: 3 medium lines, balanced */
.up-sistema .up-line { height: 5px; }
.up-sistema .up-line:nth-child(1) { width: 55%; }
.up-sistema .up-line:nth-child(2) { width: 80%; }
.up-sistema .up-line:nth-child(3) { width: 65%; }
.up-sistema .up-dot { width: 8px; height: 8px; }

/* Compacta: many thin tight lines */
.up-compacta { gap: 2px; padding: 5px; }
.up-compacta .up-line { height: 3px; }
.up-compacta .up-line:nth-child(1) { width: 70%; }
.up-compacta .up-line:nth-child(2) { width: 90%; }
.up-compacta .up-line:nth-child(3) { width: 60%; }
.up-compacta .up-line:nth-child(4) { width: 85%; }
.up-compacta .up-line:nth-child(5) { width: 75%; }
.up-compacta .up-line:nth-child(6) { width: 55%; }
.up-compacta .up-dot { width: 5px; height: 5px; }

/* Editorial: fewer large lines with serif flavor */
.up-editorial { gap: 6px; padding: 8px; justify-content: center; }
.up-editorial .up-line { height: 7px; border-radius: 2px; }
.up-editorial .up-line:nth-child(1) { width: 45%; height: 9px; margin: 0 auto; opacity: 0.7; }
.up-editorial .up-line:nth-child(2) { width: 85%; }
.up-editorial .up-line:nth-child(3) { width: 70%; }
.up-editorial .up-dot { width: 10px; height: 10px; }

/* Técnica: grid-like data rows with dots (mono feel) */
.up-tecnica { gap: 3px; padding: 5px; }
.up-tecnica .up-row { height: 5px; }
.up-tecnica .up-row .up-line { flex: 1; height: 100%; background: var(--text-secondary); opacity: 0.7; }
.up-tecnica .up-row .up-line:first-child { flex: 0 0 20%; opacity: 0.9; }
.up-tecnica .up-dot { width: 4px; height: 4px; border-radius: 1px; }

.ui-name { font-size: 12px; font-weight: 600; }

/* ======== ICON STYLE CARDS ======== */
.icon-card {
    cursor: pointer; padding: 10px;
    border-radius: var(--radius); transition: var(--transition);
    background: var(--bg);
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    text-align: center;
}
.icon-card:hover { transform: translateY(-3px); }
.icon-card.active { outline: 3px solid var(--accent); outline-offset: 2px; }

.icon-preview {
    width: 100%; aspect-ratio: 16/10; border-radius: 6px;
    background: var(--bg-light);
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 8px; padding: 8px;
    color: var(--text-secondary);
    overflow: hidden;
}
.icon-preview svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Preview variants — mirror the live styles */
.ip-sistema svg { stroke: var(--text-secondary); stroke-width: 2; }
.ip-neon svg    { stroke: var(--accent); filter: drop-shadow(0 0 3px var(--accent)); }
.ip-solido svg  { stroke: var(--accent); stroke-width: 2.75; }
/* Colorido preview — each of the 4 sample icons in a different color */
.ip-colorido svg { stroke-width: 2.25; }
.ip-colorido svg:nth-of-type(1) { stroke: #e91e63; }
.ip-colorido svg:nth-of-type(2) { stroke: #9c27b0; }
.ip-colorido svg:nth-of-type(3) { stroke: #00bcd4; }
.ip-colorido svg:nth-of-type(4) { stroke: #ff9800; }

/* ======== ICON STYLE OVERRIDES (applied app-wide via data-icons) ======== */
/* Sistema = default (no overrides needed, uses --ui-icon-stroke = 2 and currentColor) */

/* Neón — accent color with glowing drop-shadow */
[data-icons="neon"] .neu-btn svg,
[data-icons="neon"] .tab-btn svg,
[data-icons="neon"] label svg,
[data-icons="neon"] .section-title svg,
[data-icons="neon"] .card-header h3 svg,
[data-icons="neon"] h3 svg,
[data-icons="neon"] h4 svg,
[data-icons="neon"] .btn-icon-sm svg,
[data-icons="neon"] .stat-icon svg {
    stroke: var(--accent);
    filter: drop-shadow(0 0 3px var(--accent));
}
[data-icons="neon"] .tab-btn.active svg { filter: drop-shadow(0 0 6px var(--accent)); }
[data-icons="neon"] .stat-icon svg { filter: drop-shadow(0 0 5px var(--accent)); }
[data-icons="neon"] .btn-primary svg,
[data-icons="neon"] .btn-success svg,
[data-icons="neon"] .btn-danger svg {
    stroke: #fff;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.85));
}
[data-icons="neon"] .btn-icon-sm.danger svg { stroke: var(--danger); filter: drop-shadow(0 0 3px var(--danger)); }

/* Sólido — accent color with thick strokes */
[data-icons="solido"] .neu-btn svg,
[data-icons="solido"] .tab-btn svg,
[data-icons="solido"] label svg,
[data-icons="solido"] .section-title svg,
[data-icons="solido"] .card-header h3 svg,
[data-icons="solido"] h3 svg,
[data-icons="solido"] h4 svg,
[data-icons="solido"] .btn-icon-sm svg,
[data-icons="solido"] .stat-icon svg {
    stroke: var(--accent);
    stroke-width: 2.75;
}
[data-icons="solido"] .btn-primary svg,
[data-icons="solido"] .btn-success svg,
[data-icons="solido"] .btn-danger svg { stroke: currentColor; stroke-width: 2.5; }
[data-icons="solido"] .btn-icon-sm.danger svg { stroke: var(--danger); }

/* Colorido — paleta diversa asignada por posición con :nth-of-type */
[data-icons="colorido"] {
    --cl-1: #e91e63; /* pink */
    --cl-2: #9c27b0; /* purple */
    --cl-3: #00bcd4; /* cyan */
    --cl-4: #ff9800; /* orange */
    --cl-5: #4caf50; /* green */
    --cl-6: #2196f3; /* blue */
    --cl-7: #ff5722; /* deep orange */
    --cl-8: #f06292; /* light pink */
}
/* Base stroke for all icons in colorido mode */
[data-icons="colorido"] .neu-btn svg,
[data-icons="colorido"] .tab-btn svg,
[data-icons="colorido"] label svg,
[data-icons="colorido"] .section-title svg,
[data-icons="colorido"] .card-header h3 svg,
[data-icons="colorido"] h3 svg,
[data-icons="colorido"] h4 svg,
[data-icons="colorido"] .btn-icon-sm svg,
[data-icons="colorido"] .stat-icon svg { stroke-width: 2.25; }

/* Tabs — cycle through palette */
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+1) svg { stroke: var(--cl-1); }
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+2) svg { stroke: var(--cl-2); }
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+3) svg { stroke: var(--cl-3); }
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+4) svg { stroke: var(--cl-4); }
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+5) svg { stroke: var(--cl-5); }
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+6) svg { stroke: var(--cl-6); }
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+7) svg { stroke: var(--cl-7); }
[data-icons="colorido"] .tabs .tab-btn:nth-of-type(8n+8) svg { stroke: var(--cl-8); }

/* Form labels — cycle by form-group position */
[data-icons="colorido"] .form-group:nth-of-type(8n+1) label svg { stroke: var(--cl-1); }
[data-icons="colorido"] .form-group:nth-of-type(8n+2) label svg { stroke: var(--cl-2); }
[data-icons="colorido"] .form-group:nth-of-type(8n+3) label svg { stroke: var(--cl-3); }
[data-icons="colorido"] .form-group:nth-of-type(8n+4) label svg { stroke: var(--cl-4); }
[data-icons="colorido"] .form-group:nth-of-type(8n+5) label svg { stroke: var(--cl-5); }
[data-icons="colorido"] .form-group:nth-of-type(8n+6) label svg { stroke: var(--cl-6); }
[data-icons="colorido"] .form-group:nth-of-type(8n+7) label svg { stroke: var(--cl-7); }
[data-icons="colorido"] .form-group:nth-of-type(8n+8) label svg { stroke: var(--cl-8); }

/* Section titles & headings — cycle by sibling index */
[data-icons="colorido"] .section-title svg,
[data-icons="colorido"] h3 svg,
[data-icons="colorido"] h4 svg { stroke: var(--cl-2); }
[data-icons="colorido"] .neu-card:nth-of-type(8n+1) .section-title svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+1) h3 svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+1) h4 svg { stroke: var(--cl-1); }
[data-icons="colorido"] .neu-card:nth-of-type(8n+2) .section-title svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+2) h3 svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+2) h4 svg { stroke: var(--cl-3); }
[data-icons="colorido"] .neu-card:nth-of-type(8n+3) .section-title svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+3) h3 svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+3) h4 svg { stroke: var(--cl-4); }
[data-icons="colorido"] .neu-card:nth-of-type(8n+4) .section-title svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+4) h3 svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+4) h4 svg { stroke: var(--cl-5); }
[data-icons="colorido"] .neu-card:nth-of-type(8n+5) .section-title svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+5) h3 svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+5) h4 svg { stroke: var(--cl-6); }
[data-icons="colorido"] .neu-card:nth-of-type(8n+6) .section-title svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+6) h3 svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+6) h4 svg { stroke: var(--cl-7); }
[data-icons="colorido"] .neu-card:nth-of-type(8n+7) .section-title svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+7) h3 svg,
[data-icons="colorido"] .neu-card:nth-of-type(8n+7) h4 svg { stroke: var(--cl-8); }

/* Stat cards (dashboard) — each card gets its own color */
[data-icons="colorido"] .grid-4 .stat-card:nth-of-type(4n+1) .stat-icon svg { stroke: var(--cl-1); }
[data-icons="colorido"] .grid-4 .stat-card:nth-of-type(4n+2) .stat-icon svg { stroke: var(--cl-3); }
[data-icons="colorido"] .grid-4 .stat-card:nth-of-type(4n+3) .stat-icon svg { stroke: var(--cl-4); }
[data-icons="colorido"] .grid-4 .stat-card:nth-of-type(4n+4) .stat-icon svg { stroke: var(--cl-5); }

/* Secondary buttons cycle colors by card position */
[data-icons="colorido"] .neu-btn:not(.btn-primary):not(.btn-success):not(.btn-danger) svg { stroke: var(--cl-6); }
[data-icons="colorido"] .d-flex .neu-btn:nth-of-type(5n+1):not(.btn-primary):not(.btn-success):not(.btn-danger) svg { stroke: var(--cl-1); }
[data-icons="colorido"] .d-flex .neu-btn:nth-of-type(5n+2):not(.btn-primary):not(.btn-success):not(.btn-danger) svg { stroke: var(--cl-3); }
[data-icons="colorido"] .d-flex .neu-btn:nth-of-type(5n+3):not(.btn-primary):not(.btn-success):not(.btn-danger) svg { stroke: var(--cl-4); }
[data-icons="colorido"] .d-flex .neu-btn:nth-of-type(5n+4):not(.btn-primary):not(.btn-success):not(.btn-danger) svg { stroke: var(--cl-5); }
[data-icons="colorido"] .d-flex .neu-btn:nth-of-type(5n+5):not(.btn-primary):not(.btn-success):not(.btn-danger) svg { stroke: var(--cl-7); }

/* Table action icons cycle across columns */
[data-icons="colorido"] .btn-icon-sm:nth-of-type(3n+1) svg { stroke: var(--cl-3); }
[data-icons="colorido"] .btn-icon-sm:nth-of-type(3n+2) svg { stroke: var(--cl-4); }
[data-icons="colorido"] .btn-icon-sm:nth-of-type(3n+3) svg { stroke: var(--cl-1); }
[data-icons="colorido"] .btn-icon-sm.danger svg { stroke: var(--danger); }

/* Keep primary/success/danger buttons readable (white icons on colored bg) */
[data-icons="colorido"] .btn-primary svg,
[data-icons="colorido"] .btn-success svg,
[data-icons="colorido"] .btn-danger svg { stroke: #fff; }

/* Sidebar nav items cycle colors */
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+1) svg { stroke: var(--cl-1); }
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+2) svg { stroke: var(--cl-2); }
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+3) svg { stroke: var(--cl-3); }
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+4) svg { stroke: var(--cl-4); }
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+5) svg { stroke: var(--cl-5); }
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+6) svg { stroke: var(--cl-6); }
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+7) svg { stroke: var(--cl-7); }
[data-icons="colorido"] .sidebar-menu li:nth-of-type(8n+8) svg { stroke: var(--cl-8); }
/* Active sidebar item keeps white-on-accent contrast */
[data-icons="colorido"] .sidebar-menu li.active svg { stroke: #fff; }

/* Empty state icons get a soft pastel */
[data-icons="colorido"] .empty-icon svg { stroke: var(--cl-2); opacity: 0.7; }

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

body {
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-base);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--ui-font-heading); }

/* ---- Neumorphic Base Classes ---- */
.neu-card {
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: 4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
    padding: 20px;
}

.neu-inset {
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.neu-input {
    width: 100%;
    padding: var(--ui-pad-input);
    border: none;
    outline: none;
    background: var(--bg);
    border-radius: var(--radius-sm);
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
    color: var(--text);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-base);
    transition: var(--transition);
}

.neu-input:focus {
    box-shadow: inset 4px 4px 10px var(--shadow-dark),
                inset -4px -4px 10px var(--shadow-light),
                0 0 0 2px var(--accent);
}

.neu-input::placeholder {
    color: var(--text-light);
}

select.neu-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235a6f82' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.neu-input {
    resize: vertical;
    min-height: 80px;
}

.neu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-icon-gap);
    padding: var(--ui-pad-btn);
    border: none;
    outline: none;
    background: var(--bg);
    border-radius: var(--radius-sm);
    box-shadow: 4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
    color: var(--text);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-btn);
    font-weight: 600;
    text-transform: var(--ui-label-transform);
    letter-spacing: var(--ui-label-spacing);
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}

.neu-btn:hover {
    box-shadow: 2px 2px 4px var(--shadow-dark),
                -2px -2px 4px var(--shadow-light);
}

.neu-btn:active {
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
}

.btn-primary {
    background: var(--accent);
    color: white;
    box-shadow: 4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: var(--success-light);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: var(--danger-light);
}

.btn-danger-sm {
    background: var(--bg);
    color: var(--danger);
    font-size: 13px;
    padding: 8px 16px;
}

.btn-sm {
    padding: var(--ui-pad-btn-sm);
    font-size: var(--ui-font-label);
}

.neu-btn-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: var(--bg);
    border-radius: var(--radius-sm);
    box-shadow: 4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
}

.neu-btn-icon:active {
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
}

/* ---- Auth Screen ---- */
.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

/* Tour lado izquierdo */
.auth-tour {
    display: none;
}

/* Login lado derecho */
.auth-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: 420px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 24px;
    padding: 30px;
}

/* Desktop: 2 columnas */
@media (min-width: 960px) {
    /* v248-fix — Hard-cap a 100vh: con `min-height: 100vh`, una slide con
       descripción larga (ej: Calificaciones) hacía crecer .auth-screen y
       empujaba al form de login fuera del viewport. `height: 100vh` +
       overflow hidden lo blinda. La descripción tiene scroll interno. */
    .auth-screen {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
    .auth-tour {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1.3;
        background: linear-gradient(145deg, #c0d4ec, #b0c8e4);
        position: relative;
        overflow: hidden;
        padding: 48px;
    }
    .auth-tour::before {
        content: '';
        position: absolute;
        top: -20%;
        left: -20%;
        width: 140%;
        height: 140%;
        background: radial-gradient(ellipse at 30% 50%, rgba(91,155,213,0.12) 0%, transparent 60%);
        pointer-events: none;
    }
    .auth-side {
        flex: 0 0 440px;
        box-shadow: -8px 0 30px rgba(0,0,0,0.08);
        z-index: 1;
        padding: 32px;
    }
    .auth-container { max-width: 380px; }
}

/* Tour embebido en card neumorphic */
.auth-tour .login-tour-card {
    width: 100%;
    max-width: 670px;
    text-align: center;
    position: relative;
    background: var(--bg, #d0e1f9);
    border-radius: 24px;
    box-shadow: 6px 6px 14px #a0b0c4, -6px -6px 14px #f0f6ff;
    padding: 48px 44px 38px;
}
.auth-tour .login-tour-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;  /* v249-fix: reducido de 32 → 18 para no dejar gap arriba */
}
.auth-tour .login-tour-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #a0b4cc;
    cursor: pointer;
    transition: all 0.3s ease;
}
.auth-tour .login-tour-dot.active {
    background: linear-gradient(135deg, #5b9bd5, #3a7fc0);
    width: 40px;
    border-radius: 7px;
    box-shadow: 0 2px 10px rgba(91,155,213,0.45);
}
.auth-tour .login-tour-content {
    /* v250-fix: ALTURA FIJA viewport-aware. Antes el contenedor cambiaba de
       tamaño entre slides cortas/largas. Ahora todas las slides usan el mismo
       espacio: contenido pegado arriba, slides cortas dejan gap abajo
       (no encima del icono). En 1080px → 540px; en 768px → ~430px. */
    height: clamp(380px, 56vh, 540px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.auth-tour .login-tour-content.lt-slide-enter {
    animation: ltSlideIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auth-tour .login-tour-content.lt-slide-exit {
    animation: ltSlideOut 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}
/* v249-fix — Mínimos de clamp() subidos: en 1366×768 los íconos y letras
   se ven proporcionalmente grandes (no chiquitos como antes). En 1920×1080
   llegan al máximo original. Slide larga sigue cabiendo sin overflow. */
.auth-tour .lt-icon {
    font-size: clamp(76px, 9vh, 92px);
    margin-bottom: clamp(18px, 2.6vh, 28px);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
}
.auth-tour .lt-title {
    font-size: clamp(30px, 3.7vh, 37px);
    font-weight: 800;
    color: #1e3a5f;
    margin-bottom: clamp(8px, 1vh, 10px);
}
.auth-tour .lt-subtitle {
    font-size: clamp(18px, 2.2vh, 22px);
    font-weight: 700;
    color: #5b9bd5;
    margin-bottom: clamp(16px, 2.3vh, 24px);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.auth-tour .lt-desc {
    font-size: clamp(16px, 2vh, 20px);
    color: #3d5570;
    line-height: 1.55;
    max-width: 600px;
    margin: 0;
}
.auth-tour .lt-counter {
    font-size: clamp(14px, 1.6vh, 17px);
    font-weight: 600;
    color: #8a9bb0;
    margin-top: clamp(18px, 3vh, 34px);
    letter-spacing: 1px;
}

@keyframes ltSlideIn {
    from { opacity: 0; transform: translateX(70px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes ltSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-70px); }
}

.auth-logo svg {
    margin-bottom: 12px;
}

.auth-logo-img {
    width: 180px;
    height: auto;
    max-width: 85%;
    display: block;
    margin: 0 auto 8px;
    user-select: none;
    -webkit-user-drag: none;
}

.auth-logo h1,
.auth-logo-title {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 8px;
    color: transparent;
    -webkit-text-stroke: 2px #29b5eb;
    text-stroke: 2px #29b5eb;
    margin: 0;
    line-height: 1;
}

.auth-logo p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
}

.auth-form {
    padding: 30px;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 24px;
    color: var(--accent);
    font-size: 20px;
}

.form-group {
    margin-bottom: var(--ui-gap-form);
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ui-font-label);
    font-weight: var(--ui-label-weight);
    text-transform: var(--ui-label-transform);
    letter-spacing: var(--ui-label-spacing);
    color: var(--text-secondary);
}

.form-group label svg {
    width: var(--ui-icon-size-label);
    height: var(--ui-icon-size-label);
    opacity: var(--ui-icon-tone);
    margin-right: var(--ui-icon-gap);
    vertical-align: -3px;
    display: inline-block;
}

/* ---- Datos module 2-col grid ---- */
.datos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.datos-grid .form-group {
    margin-bottom: 0;
}
.datos-grid .full-span {
    grid-column: 1 / -1;
}
@media (max-width: 600px) {
    .datos-grid {
        grid-template-columns: 1fr;
    }
    .datos-grid .full-span {
        grid-column: 1;
    }
}

.auth-switch {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* ---- App Layout ---- */
.app-screen {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--ui-sidebar-w);
    min-height: 100vh;
    border-radius: 0;
    box-shadow: 4px 0 8px var(--shadow-dark);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    transition: var(--transition);
}

/* ---- Sidebar Collapsed (icon-only) ---- */
.sidebar.collapsed {
    width: var(--ui-sidebar-collapsed);
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 16px 8px 12px;
}

.sidebar.collapsed .sidebar-header h2 {
    display: none;
}

.sidebar.collapsed .sidebar-user {
    justify-content: center;
    padding: 12px 8px;
    gap: 0;
}

.sidebar.collapsed .sidebar-user span {
    display: none;
}

.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-arrow,
.sidebar.collapsed .btn-label {
    display: none;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 4px auto;
    gap: 0;
    border-radius: 12px;
}

.sidebar.collapsed .nav-icon {
    font-size: 20px;
    width: auto;
    min-width: auto;
    line-height: 1;
}

.sidebar.collapsed .nav-child {
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 3px auto;
    justify-content: center;
    border-radius: 10px;
}

.sidebar.collapsed .nav-child .nav-icon {
    font-size: 17px;
}

.sidebar.collapsed .sidebar-footer {
    padding: 8px;
    align-items: center;
}

.sidebar.collapsed .sidebar-footer .sidebar-file-actions,
.sidebar.collapsed .sidebar-footer .footer-actions span:not([data-icon]) {
    display: none;
}

.sidebar.collapsed .sidebar-footer button {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    border-radius: 12px;
}

.sidebar.collapsed .sidebar-footer button [data-icon] {
    font-size: 18px;
}

#toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.sidebar.collapsed #toggle-icon {
    transform: rotate(180deg);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--shadow-dark);
}

.sidebar-header h2 {
    color: var(--accent);
    font-size: 22px;
    letter-spacing: 3px;
    transition: width 0.25s ease, opacity 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* Logo horizontal en la cabecera del sidebar */
.sidebar-brand {
    height: 36px;
    width: auto;
    max-width: 160px;
    display: block;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    transition: width 0.25s ease, opacity 0.2s ease, max-width 0.25s ease;
}
.sidebar-brand:hover { opacity: 0.85; }

/* Cuando el sidebar está colapsado, oculta el logo */
.sidebar.collapsed .sidebar-brand {
    max-width: 0;
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--accent);
    font-size: 18px;
    flex-shrink: 0;
}

.sidebar-user span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.25s ease, opacity 0.2s ease;
}

.nav-menu {
    list-style: none;
    flex: 1;
    padding: 8px 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    transition: all 0.25s ease;
    font-size: 14px;
    font-weight: 500;
}

.nav-text {
    white-space: nowrap;
    overflow: hidden;
}

.nav-link:hover {
    color: var(--accent);
    background: var(--bg-light);
}

.nav-link.active {
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
}

.nav-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* ---- Submenu / Accordion ---- */
.nav-group {
    list-style: none;
}
.nav-parent {
    position: relative;
}
.nav-arrow {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.25s ease, width 0.25s ease, opacity 0.2s ease;
    opacity: 0.6;
    flex-shrink: 0;
}
.nav-group.open > .nav-parent .nav-arrow {
    transform: rotate(180deg);
}
.nav-submenu {
    list-style: none;
    display: none;
    padding-left: 0;
}
.nav-group.open > .nav-submenu {
    display: block;
}
.nav-child {
    padding: 10px 16px 10px 44px;
    font-size: 13px;
}
.nav-child .nav-icon {
    font-size: 15px;
    width: 20px;
}
/* Highlight parent when any child is active */
.nav-group.has-active > .nav-parent {
    color: var(--accent);
    font-weight: 600;
}

.sidebar-footer {
    padding-top: 16px;
    border-top: 1px solid var(--shadow-dark);
}

/* ---- Main Content ---- */
.main-content {
    flex: 1;
    margin-left: 250px;
    min-height: 100vh;
    transition: var(--transition);
}

.sidebar.collapsed ~ .main-content {
    margin-left: 76px;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    box-shadow: 0 4px 8px var(--shadow-dark);
    padding: 16px 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-bar h2 {
    font-size: 18px;
    color: var(--text);
}

.top-bar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* File switcher: badge ↔ select swap */
.file-switcher {
    position: relative;
}

.file-switcher .badge {
    cursor: pointer;
    user-select: none;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.15s, box-shadow 0.2s;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 16px;
    position: relative;
    border: 1.5px solid rgba(134, 239, 172, 0.9);
    box-shadow:
        0 0 6px rgba(74, 222, 128, 0.65),
        0 0 14px rgba(74, 222, 128, 0.35);
}
.file-switcher .badge:hover { opacity: 0.8; }

/* Variante warning (cuando dice "Sin archivo"): halo y borde en amarillo/ámbar
   para coherencia cromática con el fondo. Sin esto el badge warning mostraba
   halo verde sobre fondo amarillo — visualmente desconectado. */
.file-switcher .badge.badge-warning {
    border-color: rgba(252, 211, 77, 0.9);
    box-shadow:
        0 0 6px rgba(234, 179, 8, 0.65),
        0 0 14px rgba(234, 179, 8, 0.35);
}

/* Shimmer: sweep diagonal de ~1.2s cada 12s. La banda blanca está orientada
   \  (ángulo 45deg en el gradient → máxima inclinación posible) y el elemento
   se traslada de izquierda a derecha → visualmente el destello entra por la
   esquina superior-izquierda y sale por la inferior-derecha. Desactivado si
   el usuario pidió menos movimiento (accesibilidad). */
.file-switcher .badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        transparent 42%,
        rgba(255, 255, 255, 0.40) 50%,
        transparent 58%,
        transparent 100%
    );
    transform: translateX(-130%);
    animation: badge-shimmer 12s linear infinite;
    pointer-events: none;
}

@keyframes badge-shimmer {
    0%   { transform: translateX(-130%); }
    10%  { transform: translateX(130%); }
    100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
    .file-switcher .badge::after { animation: none; display: none; }
}

.file-switcher-select {
    display: none;
    font-size: 12px;
    padding: 6px 10px;
    min-width: 200px;
    max-width: 280px;
}

.file-switcher.editing .badge {
    display: none;
}
.file-switcher.editing .file-switcher-select {
    display: inline-block;
}

@media (max-width: 768px) {
    .file-switcher .badge { max-width: 130px; font-size: 11px; }
    .file-switcher-select { min-width: 160px; max-width: 200px; font-size: 11px; }
}

/* Logo upload in datos module */
.logo-upload {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 32px;
    color: var(--text-light);
    transition: box-shadow 0.2s;
}
.logo-upload:hover {
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}
.logo-upload img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--accent);
    color: white;
}

.badge-warning {
    background: var(--warning);
    color: var(--text);
}

.badge-success {
    background: var(--success);
}

.badge-danger {
    background: var(--danger);
}

.module-content {
    padding: 24px;
}

/* ---- Cards & Grids ---- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-card {
    text-align: center;
    padding: 24px;
}

.stat-card .stat-number {
    font-size: var(--ui-stat-number);
    font-family: var(--ui-font-numeric);
    font-weight: 700;
    color: var(--accent);
}

.stat-card .stat-icon {
    font-size: 28px;
    margin-bottom: 4px;
}
.stat-icon svg { width: 28px; height: 28px; }

.stat-card .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.stat-clickable {
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}
.stat-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 16px var(--shadow-dark),
                -6px -6px 16px var(--shadow-light);
}
.stat-clickable:active {
    transform: translateY(0);
    box-shadow: inset 3px 3px 6px var(--shadow-dark),
                inset -3px -3px 6px var(--shadow-light);
}
.stat-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-gap-row);
    margin-bottom: 16px;
}

.card-header h3 { font-size: var(--ui-font-h3); }

/* =========================================================================
   v179 — Estándar de footer para formularios tabulares
   (asistencias, calificaciones, acompañamiento).
   Uso: <div class="card-footer"> con Guardar + opcional Cancelar + indicador.
   En mobile se vuelve sticky para que Guardar siempre sea visible aunque la
   tabla tenga muchas filas.
   ========================================================================= */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}

.dirty-indicator {
    color: var(--warning, #b45309);
    font-size: 13px;
    font-weight: 500;
    margin-right: auto;   /* empuja botones a la derecha */
    letter-spacing: 0.2px;
}
.dirty-indicator[hidden] { display: none; }

/* =========================================================================
   v183 — Modal de relogin (Google session expired) con disclosure de
   transparencia. Reemplaza inline styles por clases siguiendo la guía v179.
   ========================================================================= */
.relogin-modal-body {
    text-align: center;
    padding: 8px 0;
}
.relogin-icon {
    font-size: 40px;
    margin-bottom: 12px;
}
.relogin-title {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 8px;
}
.relogin-cta {
    margin-top: 16px;
}

/* Disclosure expandible (genérico, reusable) — patrón <details>/<summary>
   con estilo neumórfico. Click en el summary expande el body. Sin JS. */
.disclosure-info {
    margin: 12px 0;
    text-align: left;
    border-radius: var(--radius-sm, 12px);
    background: var(--bg-light, #f5f8fd);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    overflow: hidden;
}
.disclosure-info > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--accent, #5b9bd5);
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.disclosure-info > summary::-webkit-details-marker { display: none; }
.disclosure-info > summary::after {
    content: '▾';
    margin-left: auto;
    transition: transform 0.2s;
    opacity: 0.6;
}
.disclosure-info[open] > summary::after {
    transform: rotate(180deg);
}
.disclosure-info > summary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.disclosure-body {
    padding: 4px 14px 14px 14px;
    color: var(--text-secondary, #4a6278);
    line-height: 1.55;
}
.disclosure-body p { margin: 0 0 8px 0; }
.disclosure-body p:last-child { margin-bottom: 0; }
.disclosure-reassure {
    color: var(--success, #1e8449) !important;
    margin-top: 10px !important;
    text-align: center;
}

/* ---- Table ---- */
.table-container {
    overflow-x: auto;
    border-radius: var(--radius);
}

.neu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.neu-table thead {
    background: var(--bg-dark);
}

.neu-table th {
    padding: var(--ui-pad-cell);
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--ui-font-th);
    text-transform: var(--ui-th-transform);
    letter-spacing: var(--ui-th-spacing);
    font-family: var(--ui-font-family);
}

.neu-table td {
    padding: var(--ui-pad-cell);
    font-size: var(--ui-font-td);
    font-family: var(--ui-font-numeric);
    border-bottom: 1px solid var(--shadow-dark);
}

.neu-table tbody tr:hover {
    background: var(--bg-light);
}

.neu-table tbody tr:last-child td {
    border-bottom: none;
}

.table-actions {
    display: flex;
    gap: 8px;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: var(--bg);
    border-radius: 6px;
    box-shadow: 2px 2px 4px var(--shadow-dark),
                -2px -2px 4px var(--shadow-light);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
}

/* v193 H9 — En touch devices (mobile/tablet), aumentar el touch target a 44×44
   (WCAG 2.5.5). Mantenemos el look compacto en desktop con mouse (`pointer: fine`)
   para no romper layouts de tablas. Honor 200 Pro DPR 2.5 → ahora ~17.5mm efectivos. */
@media (pointer: coarse) {
    .btn-icon-sm { width: 44px; height: 44px; font-size: 16px; }
}

/* v193 H8 — Badge "R" para recuperación. Antes vivía como inline `style=`
   con colors hardcoded `#dbeafe`/`#1e40af` → invisibles en dark mode. Ahora
   con override por modo. */
.badge-recovery {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 10px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 10px;
    vertical-align: middle;
    font-weight: 600;
}
[data-mode="dark"] .badge-recovery {
    background: rgba(59, 130, 246, 0.22);
    color: #93c5fd;
}

/* v193 M15 — Botones del flujo de login (anteriormente con `style=` inline). */
.btn-google-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
}
.btn-offline-access {
    padding: 12px;
}
/* v193 M14 — Botón "✕" del install-banner (transparente sobre fondo coloreado).
   Antes vivía como `style="background:transparent;box-shadow:none;color:white"` */
.btn-install-dismiss {
    background: transparent;
    box-shadow: none;
    color: white;
    font-size: 18px;
    border: none;
    cursor: pointer;
}
.btn-install-dismiss:hover { opacity: 0.7; }
.btn-install-dismiss:focus-visible { outline: 2px solid white; outline-offset: 2px; }

/* v193 M16 — Icono de "candado" en banners de lock (asistencias/calificaciones/
   insumos). Antes era el emoji 🔒 con `style="font-size:20px"` inline; ahora
   usa el SVG de Icons.lock con sizing canónico. */
.lock-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.lock-banner-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.btn-icon-sm:active {
    box-shadow: inset 2px 2px 4px var(--shadow-dark),
                inset -2px -2px 4px var(--shadow-light);
}

.btn-icon-sm.danger {
    color: var(--danger);
}

.btn-icon-sm.edit {
    color: var(--accent);
}

/* ---- Modal ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* v163 — z-index 3000: por encima de calculadora/calendario/reminder/today
       (2500-2700 de v162) para que confirmaciones genéricas (Utils.confirmAction
       → openModal) y prompts aparezcan SOBRE cualquier overlay invocado por el
       usuario. Queda debajo de overlays de sistema (license-block 9999,
       lock 10000, boot 10100) que representan estados de excepción. */
    z-index: 3000;
    padding: 20px;
}

.modal-container {
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
}

/* Inputs/selects nunca desbordan el modal */
.modal-body .neu-input,
.modal-body select.neu-input,
.modal-body input.neu-input,
.modal-body textarea.neu-input {
    max-width: 100%;
    box-sizing: border-box;
}

/* Tablas dentro de modales: scroll horizontal en pantallas chicas */
.modal-body .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding: 0 4px;
}
.modal-body .neu-table {
    min-width: 400px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.modal-header h3 {
    font-size: 18px;
    color: var(--accent);
}

.modal-body .form-group {
    margin-bottom: 16px;
}

.modal-body .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: var(--ui-modal-footer-align);
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--shadow-dark);
}

/* ---- Toast ---- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    box-shadow: 4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    animation: slideIn 0.3s ease;
    max-width: 360px;
}

.toast.success {
    border-left: 4px solid var(--success);
}

.toast.error {
    border-left: 4px solid var(--danger);
}

.toast.warning {
    border-left: 4px solid var(--warning);
}

.toast.info {
    border-left: 4px solid var(--accent);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---- Filter Bar ---- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.filter-bar select.neu-input,
.filter-bar input.neu-input {
    width: auto;
    min-width: 180px;
}

/* ---- Tabs ---- */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: var(--ui-pad-tab);
    border: none;
    outline: none;
    background: var(--bg);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow: 4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
    color: var(--text-secondary);
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-btn);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-icon-gap);
    cursor: pointer;
    transition: var(--transition);
}

.tab-btn.active {
    color: var(--accent);
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
}

/* ---- Attendance ---- */
.attendance-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.attendance-status.present {
    background: #c8f7c5;
    color: var(--success);
}

.attendance-status.absent {
    background: #f7c5c5;
    color: var(--danger);
}

.attendance-status.late {
    background: #f7ebc5;
    color: var(--warning);
}

.attendance-status.justified {
    background: #c5d8f7;
    color: var(--accent);
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 15px;
    margin-bottom: 20px;
}

/* ---- Progress Bar ---- */
.progress-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--bg);
    box-shadow: inset 2px 2px 4px var(--shadow-dark),
                inset -2px -2px 4px var(--shadow-light);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transition: width 0.5s ease;
}

/* ---- Checkbox neumorphic ---- */
.neu-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.neu-checkbox input[type="checkbox"] {
    display: none;
}

.neu-checkbox .checkmark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    box-shadow: inset 3px 3px 6px var(--shadow-dark),
                inset -3px -3px 6px var(--shadow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.neu-checkbox input:checked + .checkmark {
    background: var(--accent);
    box-shadow: 2px 2px 4px var(--shadow-dark),
                -2px -2px 4px var(--shadow-light);
    color: white;
    font-size: 14px;
}

/* ---- Import area ---- */
.import-area {
    border: 2px dashed var(--shadow-dark);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.import-area:hover, .import-area.drag-over {
    border-color: var(--accent);
    background: var(--bg-light);
}
.import-area.drag-over {
    border-style: solid;
    box-shadow: inset 0 0 12px rgba(91,155,213,0.15);
}

.import-area input[type="file"] {
    display: none;
}

/* ---- Subject Badges (tutor module) ---- */
.subject-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}
.subject-badge:hover {
    box-shadow: 2px 2px 3px var(--shadow-dark), -2px -2px 3px var(--shadow-light);
}
.subject-badge:active {
    box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
}
.subject-badge-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
}
.subject-badge-avg {
    font-size: 12px;
    font-weight: 700;
    color: var(--success);
    background: var(--bg-light);
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light);
}
.subject-badge-del {
    font-size: 16px;
    line-height: 1;
    color: var(--text-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
}
.subject-badge-del:hover { color: var(--danger); }

/* ============ WIZARD OVERLAY (floating dialog) ============ */
#wizard-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(44,62,80,0.5);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    overflow-y: auto;
}
.wz-dialog {
    width: 100%;
    max-width: 720px;
    margin: auto;
    padding: 28px 32px;
    border-radius: var(--radius);
    max-height: none;
}
.wz-header {
    text-align: center;
    margin-bottom: 8px;
}
.wz-header h2 {
    font-size: 22px;
    color: var(--accent);
    margin-bottom: 4px;
}

/* Progress dots */
.wz-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0 20px;
    padding: 0 8px;
}
.wz-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--bg);
    color: var(--text-secondary);
    box-shadow: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light);
    transition: all 0.3s;
}
.wz-dot.active {
    color: var(--accent);
    box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}
.wz-dot.completed {
    background: var(--accent);
    color: #fff;
}
.wz-line {
    flex: 1;
    height: 3px;
    min-width: 8px;
    max-width: 44px;
    border-radius: 2px;
    background: var(--bg);
    box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light);
    transition: background 0.3s;
}
.wz-line.completed {
    background: var(--accent);
    box-shadow: none;
}

/* Body & grid */
.wz-body {
    margin-bottom: 20px;
    min-height: 180px;
}
.wz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.wz-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wz-field.full {
    grid-column: 1 / -1;
}
.wz-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Dynamic list items */
.wz-list-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 14px;
}
.wz-list-item .wz-grid {
    flex: 1;
}
.wz-list-item .btn-icon-sm {
    margin-top: 22px;
    flex-shrink: 0;
}

/* Summary items */
.wz-summary-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.wz-summary-icon {
    font-size: 24px;
    flex-shrink: 0;
}

/* Footer */
.wz-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--shadow-dark);
}

/* Mobile responsive */
@media (max-width: 600px) {
    #wizard-overlay {
        padding: 12px;
    }
    .wz-dialog {
        padding: 18px 14px;
    }
    .wz-grid {
        grid-template-columns: 1fr;
    }
    .wz-field.full {
        grid-column: 1;
    }
    .wz-dot {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    .wz-line {
        max-width: 20px;
        min-width: 6px;
    }
    .wz-header h2 {
        font-size: 18px;
    }
    .wz-list-item {
        flex-direction: column;
    }
    .wz-list-item .btn-icon-sm {
        margin-top: 0;
        align-self: flex-end;
    }
    .wz-footer {
        flex-wrap: wrap;
    }
}

/* ---- Mobile ---- */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
    }

    .sidebar {
        z-index: 201;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 200;
        -webkit-tap-highlight-color: transparent;
    }
    .sidebar-overlay.visible {
        display: block;
    }

    .main-content {
        margin-left: 0;
    }

    .mobile-only {
        display: flex;
    }

    /* ---- v156 — Sidebar touch targets en tablet/mobile ----
       El sidebar se vuelve un drawer en ≤768. Los nav-link base tenían 14px
       font/12×16 padding → altura ~51px, OK para táctil. Los nav-child 13px/10×16
       con 44px indent → ~45px, OK. Pero los botones del footer (Sync, Exportar
       Excel, Logout) son btn-sm de ~35px de alto, insuficiente para el pulgar.
       Fix: bumpear min-height a 44px en el footer; avatar del header un poco
       más grande; dejar los nav-link base porque ya cumplen touch. */
    .sidebar .sidebar-footer .neu-btn { min-height: 44px; font-size: 13px; }
    .sidebar .sidebar-footer .neu-btn .nav-text { font-size: 13px; }
    .sidebar .avatar { width: 44px; height: 44px; font-size: 20px; }
    .sidebar-user span { font-size: 15px; }

    /* ---- Grids — 2 columnas max en tablet ---- */
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .grid-2 { gap: 14px; }

    /* ---- v156 — Contenedor principal confinado al viewport ----
       v155 solo clipaba a nivel body/html, pero `.main-content { flex:1 }` dentro
       de `.app-screen { display:flex }` crecía al ancho del contenido (scrollWidth
       682 aunque viewport fuera 375) porque los flex children no encogen sin
       `min-width: 0`. Eso dejaba el LAYOUT interno calculado al ancho del contenido,
       no del viewport — tabs, tablas, botones, cards, todo se dibujaba a 635-660px
       y el body lo clipaba en 375 (usuario veía elementos cortados sin scroll
       horizontal aparente). El fix cierra la cadena: app-screen y main-content
       también se clampean, y los flex/grid children reciben min-width:0 para
       permitir shrink. */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    .app-screen, .main-content {
        max-width: 100vw;
        overflow-x: hidden;
        min-width: 0;
    }
    .module-content {
        min-width: 0;
    }
    .module-content, .module-content > *, .module-content .neu-card {
        max-width: 100%;
        box-sizing: border-box;
    }
    .module-content .neu-card { overflow-x: hidden; }
    .table-container { max-width: 100%; overflow-x: auto; }

    /* ---- Contenido modulo ---- */
    .module-content { padding: 16px; }

    /* ---- Top bar ---- */
    .top-bar { padding: 12px 16px; max-width: 100vw; overflow: hidden; }
    .top-bar h2 { font-size: 17px; }

    /* ---- Cards ---- */
    .card-header { flex-wrap: wrap; gap: 10px; }
    .stat-card { padding: 16px; }
    .stat-card .stat-number { font-size: 28px; }
    .section-title { font-size: 14px; }
    .empty-state { padding: 40px 16px; }
    .empty-state .empty-icon { font-size: 40px; }

    /* ---- Tablas — font mas chico, celdas compactas ---- */
    .neu-table { font-size: 13px; }
    .neu-table th, .neu-table td { padding: 8px 10px; }
    .table-actions { gap: 4px; }

    /* ---- Tabs — scroll horizontal + touch target cómodo ---- */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 2px; padding-bottom: 2px; }
    .tab-btn {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 42px;
        white-space: nowrap;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* ---- Botones dentro del módulo ---- */
    .module-content .neu-btn { min-height: 42px; }

    /* ---- Filter bar ---- */
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar select.neu-input,
    .filter-bar input.neu-input { width: 100%; min-width: 0; }

    /* ---- File switcher ---- */
    .file-switcher .badge { max-width: 220px; font-size: 14px; }
    .file-switcher-select { min-width: 180px; max-width: 240px; font-size: 13px; }

    /* ---- Modal — responsive medio ---- */
    .modal-overlay { padding: 14px; }
    .modal-container { max-height: 92vh; }
    .modal-header h3 { font-size: 16px; }
    .modal-body .form-row { grid-template-columns: 1fr; }
    .modal-body .neu-table { min-width: 280px; }

    /* ---- Wizard — responsive medio ---- */
    #wizard-overlay { padding: 16px; }
    .wz-dialog { padding: 22px 18px; max-width: 100%; }
    .wz-grid { grid-template-columns: 1fr; }
    .wz-field.full { grid-column: 1; }
    .wz-dot { width: 30px; height: 30px; font-size: 12px; }
    .wz-line { max-width: 28px; }

    /* ---- Toast — responsive medio ---- */
    .toast-container { right: 14px; left: auto; bottom: 14px; }
    .toast { max-width: 300px; padding: 12px 16px; font-size: 13px; }

    /* ---- Inline widths de modulos — override ---- */
    .neu-table th[style*="width"],
    .neu-table td[style*="width"] { width: auto !important; }
    .neu-table input[style*="width"],
    .neu-table select[style*="width"] { width: 80px !important; min-width: 60px !important; }

    /* ---- Planificacion iframe ---- */
    iframe[style*="height:500px"],
    iframe[style*="height: 500px"] { height: 350px !important; }

    /* ---- Datos grid ---- */
    .datos-grid { grid-template-columns: 1fr; }
    .datos-grid .full-span { grid-column: 1; }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--shadow-dark);
    border-radius: 3px;
}

/* ---- Utility ---- */
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.fw-600 { font-weight: 600; }
.divider-section { border: none; border-top: 1px solid var(--shadow-dark); margin: 20px 0; }

/* ====== LOCK OVERLAY (Sistema bloqueado) ====== */
/* ========== BOOT OVERLAY (splash con barra de progreso) ========== */
.boot-overlay {
    position: fixed;
    inset: 0;
    background: rgba(208, 225, 249, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.45s ease;
}
.boot-overlay.fading { opacity: 0; pointer-events: none; }
.boot-card {
    padding: 36px 44px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    animation: boot-pop 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes boot-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.boot-logo {
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
    filter: drop-shadow(0 8px 18px rgba(59, 130, 246, 0.22));
}
.boot-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 28px;
    font-weight: 500;
}
.boot-progress {
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.boot-progress::after {
    /* Brillito animado que recorre la barra indicando "algo está pasando" incluso
       cuando el progreso específico no avanza. */
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: boot-shimmer 1.6s infinite linear;
}
@keyframes boot-shimmer {
    0%   { transform: translateX(0); }
    100% { transform: translateX(350%); }
}
.boot-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    animation: boot-gradient 3s ease infinite;
}
@keyframes boot-gradient {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.boot-status {
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
    margin: 14px 0 0;
    min-height: 18px;
    font-weight: 500;
}
[data-mode="dark"] .boot-overlay {
    background: rgba(15, 23, 42, 0.92);
}
[data-mode="dark"] .boot-progress { background: rgba(255, 255, 255, 0.1); }

/* ========== PROGRESS MODAL (v190) ========== */
/* Overlay reutilizable para procesos lentos (registro de institución, importar
   respaldo, formateo de fábrica, autorización masiva de representantes).
   z-index: 10050 — bajo el lock-overlay (10000) y bajo el boot-overlay (10100)
   pero arriba del modal genérico (1000) y FAB. API en utils.js: Utils.ProgressModal. */
.progress-modal {
    position: fixed;
    inset: 0;
    background: rgba(208, 225, 249, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: opacity 0.4s ease;
}
.progress-modal.fading { opacity: 0; pointer-events: none; }
.progress-modal-card {
    padding: 30px 36px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    animation: boot-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.progress-modal-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(59, 130, 246, 0.18);
    border-top-color: #3b82f6;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 0.8s linear infinite;
}
.progress-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.progress-modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 22px;
    font-weight: 500;
}
.progress-modal-bar-track {
    height: 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.progress-modal-bar-track::after {
    /* Brillo recorriendo la barra — indica "algo está pasando" incluso si el
       % específico no avanza durante un fetch lento al servidor. */
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: boot-shimmer 1.6s infinite linear;
}
.progress-modal-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
    animation: boot-gradient 3s ease infinite;
}
.progress-modal-message {
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
    margin: 14px 0 0;
    min-height: 18px;
    font-weight: 500;
}
.progress-modal-steps {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.progress-modal-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.25s ease, color 0.25s ease;
}
.progress-modal-steps li .step-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.18);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}
.progress-modal-steps li.pending .step-dot {
    border-color: rgba(0, 0, 0, 0.18);
}
.progress-modal-steps li.active {
    color: var(--text);
    font-weight: 600;
    background: rgba(59, 130, 246, 0.08);
}
.progress-modal-steps li.active .step-dot {
    border-color: #3b82f6;
    border-top-color: transparent;
    animation: spin 0.7s linear infinite;
}
.progress-modal-steps li.done {
    color: var(--text);
    opacity: 0.85;
}
.progress-modal-steps li.done .step-dot {
    border-color: #16a34a;
    background: #16a34a;
    animation: none;
}
.progress-modal-steps li.done .step-dot::after {
    content: '';
    position: absolute;
    top: 2px; left: 5px;
    width: 4px; height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.progress-modal-steps li.error {
    color: var(--danger, #dc2626);
    font-weight: 600;
    background: rgba(220, 38, 38, 0.08);
}
.progress-modal-steps li.error .step-dot {
    border-color: var(--danger, #dc2626);
    background: var(--danger, #dc2626);
    animation: none;
}
.progress-modal-steps li.error .step-dot::after {
    content: '!';
    color: white;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: 1px; left: 5px;
}
[data-mode="dark"] .progress-modal {
    background: rgba(15, 23, 42, 0.92);
}
[data-mode="dark"] .progress-modal-bar-track {
    background: rgba(255, 255, 255, 0.1);
}
[data-mode="dark"] .progress-modal-steps li.pending .step-dot {
    border-color: rgba(255, 255, 255, 0.22);
}
[data-mode="dark"] .progress-modal-steps li.active {
    background: rgba(99, 102, 241, 0.14);
}

.lock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 35, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lock-card {
    background: var(--bg);
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.lock-card .lock-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: lockPulse 2s ease-in-out infinite;
}
@keyframes lockPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.85; }
}
.lock-card h2 {
    margin: 0 0 8px 0;
    font-size: 20px;
    color: var(--text);
}
.lock-card .lock-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}
.lock-card .pin-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
}
.lock-card .lock-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.lock-card .lock-actions .neu-btn {
    min-width: 180px;
    padding: 12px 20px;
}
.lock-card .lock-logout-row {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--shadow-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.lock-card .lock-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--shadow-dark);
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.lock-card .lock-logout-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
}
.lock-card .lock-logout-hint {
    font-size: 11px;
    color: var(--text-light);
    margin: 0;
    text-align: center;
}

/* Tab button con etiqueta en 2 líneas centrada — usada en la ventana de detalle del estudiante */
.tab-btn.tab-btn-2line {
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tab-btn.tab-btn-2line br { display: block; }

/* v179 — Variante compacta para tabs secundarias (ej. dentro de detalle de
   estudiante en Tutor donde se muestra un insumo por tab). Reemplaza el
   inline `style="padding:5px 10px;font-size:11px"` que rompía los overrides
   de tema. */
.tab-btn.tab-btn-compact {
    padding: 5px 10px;
    font-size: 11px;
}

/* v180 — Variante para el botón de eliminar posicionado en esquina
   superior-derecha de una card (ej. asignatura en wizard). Reemplaza el
   inline `style="position:absolute;top:8px;right:8px"`. Requiere que el
   contenedor padre tenga `position:relative`. */
.btn-icon-sm.btn-corner-delete {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* v180 — Estados del botón lápiz de recuperación (calificaciones). Reemplazan
   los inline `style="color:#1e40af;background:#dbeafe"` / `color:#64748b`.
   `recovery-active` = ya hay una recuperación registrada (azul con fondo);
   `recovery-inactive` = se puede agregar recuperación pero no existe aún
   (gris discreto). */
.btn-icon-sm.recovery-active { color: #1e40af; background: #dbeafe; }
.btn-icon-sm.recovery-inactive { color: #64748b; }

/* v180 — Estado disabled canónico para .btn-icon-sm. Reemplaza el inline
   `style="opacity:0.3;cursor:not-allowed"`. Aplica a cualquier botón icon-
   only deshabilitado en el sistema (recovery no disponible, locks, etc.). */
.btn-icon-sm:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* v179 — Variante tipo "card button" para botones con icono grande + título +
   descripción apilados verticalmente (ej. tours guiados en Seguridad). Reemplaza
   el inline `style="display:flex;flex-direction:column;gap:6px;..."`. */
.neu-btn.btn-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    text-align: center;
}
.btn-card-icon {
    font-size: 22px;
}
.neu-btn.btn-card-admin {
    grid-column: span 3;
    border: 2px solid rgba(168, 85, 247, 0.3);
}
@media (max-width: 600px) {
    .neu-btn.btn-card-admin { grid-column: auto; }
}

/* ===== Panel de Detalle de Estudiante (dentro de #module-content) ===== */
#student-detail-panel {
    position: relative;
    min-height: 100%;
}
#student-detail-panel .detail-back-btn {
    position: sticky;
    top: 8px;
    left: 0;
    z-index: 20;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
}
#student-detail-panel .detail-body {
    padding-top: 4px;
}
#student-detail-panel .stat-card.stat-clickable {
    transition: transform 0.15s ease, box-shadow 0.2s ease, outline 0.2s ease;
}
#student-detail-panel .stat-card.stat-clickable:hover {
    transform: translateY(-2px);
}
#student-detail-panel .stat-card.stat-active {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.w-100 { width: 100%; }
.text-secondary { color: var(--text-secondary); }

/* ---- SVG Icons in components ---- */
.nav-icon svg { width: 20px; height: 20px; flex-shrink: 0; }
.neu-btn svg, .neu-btn-icon svg { width: var(--ui-icon-size); height: var(--ui-icon-size); vertical-align: middle; flex-shrink: 0; }
.tab-btn svg { width: var(--ui-icon-size); height: var(--ui-icon-size); vertical-align: middle; flex-shrink: 0; }
.btn-icon-sm svg { width: 16px; height: 16px; vertical-align: middle; }
/* Icon stroke-width reacts to UI style (inherits to SVG children) */
.neu-btn svg, .tab-btn svg, .form-group label svg { stroke-width: var(--ui-icon-stroke); }
.empty-state .empty-icon svg { width: 60px; height: 60px; }

/* ---- Animations ---- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes ripple {
    to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}


.modal-overlay { animation: fadeIn 0.2s ease; }
.modal-container { animation: scaleIn 0.25s ease; }
.toast.removing { animation: slideOut 0.3s ease forwards; }

/* ---- Micro-interactions ---- */
.neu-btn { position: relative; overflow: hidden; }
.neu-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    left: 50%; top: 50%;
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.neu-btn:active::after { animation: ripple 0.4s ease-out; }
.module-content .neu-card { transition: transform 0.2s ease, box-shadow 0.25s ease; }
.module-content .neu-card:hover { transform: translateY(-1px); }
.module-content .neu-card:active { transform: translateY(0); }
.module-content .stat-card:hover .stat-number { transform: scale(1.05); }
.stat-number { transition: transform 0.3s ease; display: inline-block; }

/* ---- Disabled / Loading / Error States ---- */
.neu-btn:disabled, .neu-btn.disabled {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.neu-btn.loading {
    position: relative; color: transparent !important; pointer-events: none;
}
.neu-btn.loading::before {
    content: ''; position: absolute; width: 18px; height: 18px;
    border: 2px solid var(--bg-light); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.6s linear infinite;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.neu-input.input-error {
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light), 0 0 0 2px var(--danger);
}
.neu-input.input-success {
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light), 0 0 0 2px var(--success);
}

/* ---- Focus Visible ---- */
.neu-btn:focus-visible, .neu-input:focus-visible, .tab-btn:focus-visible, .nav-link:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Skeleton Loading ---- */
.skeleton {
    background: linear-gradient(90deg, var(--bg-dark) 25%, var(--bg-light) 37%, var(--bg-dark) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: 10px; border-radius: 4px; }
.skeleton-card { height: 100px; margin-bottom: 12px; border-radius: var(--radius); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* ---- Typography Utilities ---- */
.text-h1 { font-size: 28px; font-weight: 700; line-height: 1.2; }
.text-h2 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.text-h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.text-body { font-size: 14px; line-height: 1.5; }
.text-caption { font-size: 12px; color: var(--text-light); line-height: 1.4; }
.text-overline { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Breadcrumb ---- */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); }
.breadcrumb-item { cursor: pointer; color: var(--text-secondary); transition: color 0.2s; }
.breadcrumb-item:hover { color: var(--accent); }
.breadcrumb-sep { color: var(--text-light); font-size: 10px; }
.breadcrumb-item.current { color: var(--text); font-weight: 600; cursor: default; }

/* ---- FAB ---- */
.fab-container { position: fixed; bottom: 24px; right: 24px; z-index: 90; }
.fab {
    width: 56px; height: 56px; border-radius: 50%; background: var(--accent);
    color: white; border: none; cursor: pointer; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 4px 4px 12px var(--shadow-dark), -2px -2px 6px var(--shadow-light);
    transition: transform 0.2s, box-shadow 0.2s;
}
.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(0.95); }
.fab svg { width: 24px; height: 24px; stroke: white; }
.fab-menu {
    position: absolute; bottom: 66px; right: 0;
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: all 0.25s ease;
}
.fab-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.fab-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg); padding: 12px 20px; border-radius: var(--radius-sm);
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    white-space: nowrap; cursor: pointer; font-size: 15px; font-weight: 500;
    color: var(--text); transition: var(--transition); border: none;
}
.fab-item:hover { color: var(--accent); transform: translateX(-4px); }
.fab-item svg { width: 20px; height: 20px; }
[data-theme="dark"] .fab-item {
    box-shadow: 4px 4px 8px #0d1520, -4px -4px 8px #2a3a4d;
}

/* ---- Notification Badge ---- */
.nav-link { position: relative; }
.notification-badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 18px; height: 18px; border-radius: 9px;
    background: var(--danger); color: white;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.notification-badge:empty { display: none; }

/* ---- Charts ---- */
.chart-container { padding: 16px 0; }
.chart-bar-container {
    display: flex; align-items: flex-end; gap: 12px; height: 140px; padding: 8px 0;
}
.chart-bar {
    flex: 1; border-radius: 6px 6px 0 0; transition: height 0.6s ease;
    min-width: 40px; position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
}
.chart-bar-value {
    font-size: 12px; font-weight: 700; margin-bottom: 4px;
    color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.chart-bar-label {
    position: absolute; bottom: -22px; text-align: center;
    font-size: 11px; width: 100%; color: var(--text-secondary);
}
.chart-pie {
    width: 140px; height: 140px; border-radius: 50%;
    box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
}
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ---- Calendar Grid ---- */
.calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.calendar-header {
    text-align: center; font-size: 11px; font-weight: 600;
    color: var(--text-light); padding: 4px 0; text-transform: uppercase;
}
.calendar-day {
    aspect-ratio: 1; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 500; transition: var(--transition);
}
.calendar-day.cal-present { background: #c8f7c5; color: var(--success); }
.calendar-day.cal-absent { background: #f7c5c5; color: var(--danger); }
.calendar-day.cal-mixed { background: #f7ebc5; color: var(--warning); }
.calendar-day.cal-none { background: var(--bg-dark); color: var(--text-light); }
.calendar-day.cal-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar-day.cal-empty { visibility: hidden; }
[data-theme="dark"] .calendar-day.cal-present { background: #1a3a2a; }
[data-theme="dark"] .calendar-day.cal-absent { background: #3a1a1a; }
[data-theme="dark"] .calendar-day.cal-mixed { background: #3a321a; }

/* ---- Activity Feed ---- */
.activity-item {
    padding: 10px 0; border-bottom: 1px solid var(--shadow-dark);
    display: flex; flex-direction: column; gap: 2px;
}
.activity-item:last-child { border-bottom: none; }
.activity-time { font-size: 11px; color: var(--text-light); }
.activity-text { font-size: 13px; }

/* ---- Search Input in Tables ---- */
.search-bar {
    position: relative; margin-bottom: 12px;
}
.search-bar .neu-input { padding-left: 40px; }
.search-bar svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-light); pointer-events: none;
}

/* ---- Install Banner ---- */
.install-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 12px 24px; background: var(--accent); color: white;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; z-index: 1500; animation: slideIn 0.3s ease;
    font-size: 14px; font-weight: 500;
}
.install-banner .neu-btn { background: white; color: var(--accent); box-shadow: none; }

/* ---- Offline Bar ---- */
.offline-bar {
    background: var(--warning); color: var(--text); text-align: center;
    padding: 6px; font-size: 12px; font-weight: 600;
}

/* ---- Theme Toggle ---- */
.theme-toggle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); border: none; cursor: pointer;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    color: var(--text); transition: var(--transition);
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
[data-theme="dark"] .theme-toggle {
    box-shadow: 3px 3px 6px #0d1520, -3px -3px 6px #2a3a4d;
}

/* ---- Student Photo ---- */
.student-photo {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
}
.photo-upload {
    width: 80px; height: 80px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: var(--text-light); font-size: 13px;
}
.photo-upload img { width: 100%; height: 100%; object-fit: cover; }

/* ---- PIN Input ---- */
.pin-container { display: flex; gap: 8px; justify-content: center; margin: 20px 0; }
.pin-input {
    width: 48px; height: 56px; text-align: center; font-size: 24px; font-weight: 700;
    border: none; outline: none; background: var(--bg); border-radius: var(--radius-sm);
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    color: var(--text); -webkit-text-security: disc;
}
.pin-input:focus {
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light), 0 0 0 2px var(--accent);
}

/* ---- Responsive Table Sticky ---- */
@media (max-width: 768px) {
    .neu-table.sticky-name th:nth-child(3),
    .neu-table.sticky-name td:nth-child(3) {
        position: sticky; left: 0; z-index: 2; background: var(--bg);
    }
    .fab-container { bottom: 16px; right: 16px; }
    .fab { width: 48px; height: 48px; font-size: 20px; }
    .breadcrumb { display: none; }
}

/* ---- Print CSS ---- */
@media print {
    .sidebar, .top-bar, .fab-container, .toast-container,
    .install-banner, .offline-bar, .tabs, .filter-bar,
    .neu-btn, .btn-icon-sm, .table-actions, .breadcrumb,
    .search-bar, .card-header .neu-btn { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .module-content { padding: 0 !important; }
    .neu-card { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
    .neu-table { font-size: 11px; }
    .neu-inset { box-shadow: none !important; border: 1px solid #eee; }
    body { background: white !important; color: black !important; }
    .stat-number { color: #333 !important; }
    .badge { border: 1px solid #999; }
}


/* ======== GLOBAL IMPROVEMENTS ======== */

/* ---- Subtle animations ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Module content fade-in */
/* module animations moved to water effect */
.modal-container, .modal-box { animation: scaleIn 0.2s ease; }
.toast { animation: fadeInUp 0.3s ease; }

/* ---- Notification badge pulse ---- */
.notification-badge:not(:empty) {
    animation: pulse 2s ease-in-out infinite;
}

/* ---- Loading spinner ---- */
.sna-loading {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    color: var(--text-secondary); font-size: var(--text-sm);
}
.sna-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--shadow-dark);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Skeleton loading ---- */
.skeleton {
    background: linear-gradient(90deg, var(--bg-dark) 25%, var(--bg-light) 50%, var(--bg-dark) 75%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease infinite;
    border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: var(--sp-2); border-radius: 4px; }
.skeleton-card { height: 80px; margin-bottom: var(--sp-3); }

/* ---- Disabled state global ---- */
button:disabled, .neu-btn:disabled, input:disabled, select:disabled, textarea:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: grayscale(30%);
}

/* ---- Focus visible global ---- */
.neu-btn:focus-visible, .neu-btn-icon:focus-visible, .btn-icon-sm:focus-visible,
.tab-btn:focus-visible, .nav-link:focus-visible,
select.neu-input:focus-visible, textarea.neu-input:focus-visible,
input[type="date"]:focus-visible, input[type="number"]:focus-visible,
input[type="text"]:focus-visible, input[type="email"]:focus-visible,
input[type="password"]:focus-visible, input[type="file"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* ---- Empty state component ---- */
.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-4);
    color: var(--text-secondary);
}
.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: var(--sp-3);
    opacity: 0.4;
}
.empty-state p {
    font-size: var(--text-sm);
    margin-bottom: var(--sp-3);
}

/* ---- Error state ---- */
.error-card {
    text-align: center;
    padding: var(--sp-6);
    color: var(--danger);
    border: 1px solid var(--danger-light);
    border-radius: var(--radius);
    background: rgba(192,57,43,0.04);
}

/* ---- Form validation inline ---- */
.field-error {
    color: var(--danger);
    font-size: var(--text-xs);
    margin-top: 2px;
    animation: fadeIn 0.2s ease;
}
.neu-input.invalid {
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light), 0 0 0 2px var(--danger) !important;
}

/* ---- Smooth scroll ---- */
html { scroll-behavior: smooth; }

/* ---- Stat disabled ---- */
.stat-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(40%);
}

/* ---- Hover lift for cards ---- */
.stat-clickable { transition: var(--transition); }
.stat-clickable:hover {
    transform: translateY(-3px);
}

/* ---- Table row hover ---- */
.neu-table tbody tr {
    transition: background 0.15s ease;
}

/* ---- Badge variants consistency ---- */
.badge-success { background: var(--success) !important; color: #fff !important; }
.badge-danger { background: var(--danger) !important; color: #fff !important; }
.badge-warning { background: var(--warning) !important; color: #fff !important; }
.badge-info { background: var(--accent) !important; color: #fff !important; }

/* ---- Attendance status icons ---- */
.attendance-status.present::before { content: "✓ "; }
.attendance-status.absent::before { content: "✗ "; }
.attendance-status.late::before { content: "⏰ "; }
.attendance-status.justified::before { content: "✓ "; }

/* ---- Danger zone visual ---- */
.danger-zone {
    border: 2px solid var(--danger-light);
    border-radius: var(--radius);
    padding: var(--sp-4);
    background: rgba(192,57,43,0.03);
}

/* ---- Print styles ---- */
@media print {
    .sidebar, .top-bar, .fab-container, .toast-container,
    #mobile-menu-btn, #theme-toggle, .file-switcher,
    .modal-overlay, #wizard-overlay, #offline-bar, #install-banner {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .neu-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .neu-table { font-size: 11px; }
    .neu-table th, .neu-table td { padding: 4px 6px; }
    body { background: #fff !important; }
    body::before, body::after { display: none !important; }
}

/* ---- Responsive 480px — full mobile ---- */
@media (max-width: 480px) {

    /* ---- v156 — Cadena completa confinada al viewport (body → app-screen → main) ----
       v155 solo puso max-width:100vw en html/body. El bug residual (descubierto
       en testing mobile de v155) era que `.main-content { flex:1 }` dentro de
       `.app-screen { display:flex }` NO encogía al viewport porque los flex
       children sin `min-width: 0` se expanden al min-content de sus hijos. Eso
       producía scrollWidth 682 aunque el body clipara a 375 — el LAYOUT se
       calculaba a 682 y los elementos salían del viewport visible (botones con
       texto cortado, tablas que no activaban scroll interno, cards a 660px).
       Fix: clampear también app-screen + main-content + module-content con
       max-width:100vw y min-width:0, así todo el pipeline de flex/grid se
       renderiza al ancho real del viewport. */
    html, body {
        max-width: 100vw;
        overflow-x: hidden !important;
    }
    .app-screen, .main-content {
        max-width: 100vw;
        overflow-x: hidden;
        min-width: 0;
    }
    .module-content {
        min-width: 0;
    }
    .module-content, .module-content > *, .module-content .neu-card {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* neu-card clipa hijos NO scrolleables; las tablas y paneles scrolleables
       tienen su propio overflow-x:auto, así que no se cortan visualmente
       (se les ve la sombra lateral como hint). */
    .module-content .neu-card { overflow-x: hidden; }
    .table-container { max-width: 100%; overflow-x: auto; }

    /* ---- Layout general ---- */
    .module-content { padding: 10px; }
    .top-bar { padding: 10px 12px; gap: 8px; max-width: 100vw; overflow: hidden; }
    /* En mobile chico el título del módulo no cabe junto al badge del archivo
       activo + los botones de acción. Se oculta (el usuario ya ve el módulo
       activo por el sidebar resaltado). El badge del archivo tiene prioridad
       porque indica QUÉ se está editando, mientras que el módulo es obvio.
       `!important` porque algunos temas podrían re-establecer display. */
    .top-bar h2 { display: none !important; }
    .breadcrumb { display: none; }
    .sidebar { width: 100%; max-width: 280px; }
    /* Bitácora deshabilitada → no ocupa espacio en mobile (solo activo cuando
       hay archivo activo; en otros casos dejar que el badge respire). */
    #btn-bitacora:disabled { display: none; }

    /* ---- v156 — Sidebar en mobile chico ----
       Touch targets más generosos que en tablet + tipografía legible. Los
       nav-link a 16px font/14×16 padding quedan en ~52px de alto (cómodo para
       pulgar). Nav-child con indent reducido de 44 → 36px (el drawer es de
       280px, no dejamos mucho texto truncado por margen izquierdo grande). */
    .sidebar .nav-link { font-size: 16px; padding: 14px 16px; min-height: 48px; }
    .sidebar .nav-child { font-size: 14px; padding: 12px 16px 12px 36px; min-height: 44px; }
    .sidebar .nav-icon { font-size: 20px; }
    .sidebar .nav-child .nav-icon { font-size: 16px; width: 22px; }
    .sidebar-user { padding: 14px 0; gap: 14px; }
    .sidebar-user span { font-size: 15px; }
    .sidebar .avatar { width: 44px; height: 44px; font-size: 20px; }
    .sidebar-footer .neu-btn { min-height: 44px; font-size: 14px; padding: 10px 12px; }
    .sidebar-footer .neu-btn .nav-text { font-size: 14px; }

    /* ---- Grids — 1 columna en movil ---- */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 10px; }

    /* ---- Cards ---- */
    .neu-card { padding: 14px; }
    .card-header { flex-direction: column; gap: 8px; align-items: stretch; }
    .card-header .neu-btn { width: 100%; justify-content: center; }
    /* Containers intermedios tipo `<div class="d-flex">` dentro del card-header
       (usados para agrupar múltiples botones de acción) también deben ocupar
       todo el ancho, si no el hijo `.neu-btn { width:100% }` solo hereda el
       ancho natural del contenedor intermedio. */
    .card-header > .d-flex,
    .card-header > div {
        width: 100%;
    }
    .stat-card { padding: 12px; }
    .stat-card .stat-number { font-size: 24px; }
    .section-title { font-size: 14px; margin-bottom: 10px; font-weight: 600; }
    .empty-state { padding: 30px 12px; }
    .empty-state .empty-icon { font-size: 36px; }

    /* ---- Tablas — legibilidad mínima en móvil chico ---- */
    .neu-table { font-size: 13px; }
    .neu-table th, .neu-table td { padding: 8px 10px; }
    .table-actions { gap: 6px; }
    .btn-icon-sm { width: 36px; height: 36px; font-size: 14px; }

    /* ---- Tabs — touch target aceptable ---- */
    .tabs { gap: 2px; }
    .tab-btn {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* ---- Filter bar ---- */
    .filter-bar { flex-direction: column; gap: 8px; }
    .filter-bar select, .filter-bar input { width: 100%; }
    .filter-bar select.neu-input,
    .filter-bar input.neu-input { min-width: 0; }

    /* ---- File switcher — con el h2 oculto, el badge puede expandirse más
       para mostrar el nombre completo del archivo activo sin truncado. */
    .file-switcher-select { min-width: 180px; max-width: 240px; font-size: 13px; }
    .file-switcher .badge { max-width: 200px; font-size: 13px; }

    /* ---- Flex-between ---- */
    /* El patrón típico es `<h3>Título</h3> <button>+Nuevo</button>` en un
       flex-between. Con flex-wrap:wrap el botón pasa a la siguiente línea
       si no cabe; con width:100% en el botón, ocupa todo el ancho de la fila
       inferior (touch cómodo, consistente con card-header). Los otros usos
       de flex-between sin botón (ej. label+value) no se afectan. */
    .flex-between { flex-wrap: wrap; gap: 8px; }
    .module-content .flex-between > .neu-btn {
        width: 100%;
        justify-content: center;
    }
    /* Botones sueltos después de un h2/h3/h4 dentro de un card
       (patrón "+ Nuevo X" en Insumos/Periodos; etc.) — full-width para
       touch cómodo. Aplica tanto a primary como a secundarios, pero
       excluye los chicos (btn-sm/btn-icon-sm) pensados para caber junto
       a otros. */
    .module-content .neu-card > h2 + .neu-btn:not(.btn-sm):not(.btn-icon-sm),
    .module-content .neu-card > h3 + .neu-btn:not(.btn-sm):not(.btn-icon-sm),
    .module-content .neu-card > h4 + .neu-btn:not(.btn-sm):not(.btn-icon-sm) {
        width: 100%;
        justify-content: center;
    }
    /* Botón solitario dentro de un wrapper simple (ej. <div class="mb-16">
       <button>...</button> <span>...</span></div>) hijo directo del card —
       también full-width. Uso `:only-of-type` para capturar el caso donde
       el button es el único `<button>` del wrapper (puede haber spans o
       textos hermanos). Incluye btn-sm porque en mobile los touch targets
       son más importantes que la densidad visual del desktop. */
    .module-content .neu-card > div > .neu-btn:only-of-type:not(.btn-icon-sm) {
        width: 100%;
        justify-content: center;
    }

    /* ---- Formularios — botones con touch target mínimo ---- */
    .form-row { grid-template-columns: 1fr !important; gap: 8px; }
    .neu-input { padding: 10px 12px; font-size: 13px; min-height: 44px; }
    .module-content .neu-btn { min-height: 44px; font-size: 13px; }
    /* Botón primario solo al final de un card/form (sin hermanos de acción):
       ocupa todo el ancho para evitar el "botón chico a la izquierda con
       whitespace vacío" típico de formularios mobile (ej. "Enviar" en
       Notificaciones → Nueva Individual). */
    .module-content .form-group + .neu-btn.btn-primary:last-child,
    .module-content .form-group ~ .neu-btn.btn-primary:last-child {
        width: 100%;
        justify-content: center;
    }

    /* ---- Modal — full mobile ---- */
    .modal-overlay { padding: 8px; }
    .modal-container { max-height: 95vh; border-radius: 12px; }
    .modal-header { margin-bottom: 12px; }
    .modal-header h3 { font-size: 17px; font-weight: 600; }
    .modal-body .form-group { margin-bottom: 10px; }
    .modal-body .form-row { gap: 6px; }
    .modal-body .neu-table { min-width: auto; font-size: 12px; }
    .modal-body .neu-table th,
    .modal-body .neu-table td { padding: 7px 8px; }
    .modal-footer { flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 10px; }
    .modal-footer .neu-btn { flex: 1; min-width: 0; font-size: 13px; padding: 10px 12px; min-height: 44px; }

    /* ---- Wizard — full mobile ---- */
    #wizard-overlay { padding: 8px; }
    .wz-dialog { padding: 16px 12px; border-radius: 12px; }
    .wz-header h2 { font-size: 17px; }
    .wz-dot { width: 30px; height: 30px; font-size: 11px; }
    .wz-line { max-width: 16px; min-width: 5px; }
    .wz-body { min-height: 140px; margin-bottom: 14px; }
    .wz-list-item { flex-direction: column; padding: 10px; }
    .wz-list-item .btn-icon-sm { margin-top: 0; align-self: flex-end; }
    .wz-footer { flex-wrap: wrap; gap: 8px; }
    .wz-footer .neu-btn { flex: 1; min-width: 0; font-size: 13px; }
    .wz-summary-item { padding: 10px; gap: 10px; flex-wrap: wrap; }

    /* ---- Toast — full-width centrado ---- */
    .toast-container { left: 10px; right: 10px; bottom: 10px; }
    .toast { max-width: none; padding: 10px 14px; font-size: 13px; }

    /* ---- Inline widths de modulos — override forzado ---- */
    .neu-table input[style*="width"] { width: 75px !important; min-width: 60px !important; }
    .neu-table select[style*="width"] { width: 110px !important; }
    input[style*="width:120px"],
    input[style*="width: 120px"] { width: 90px !important; }

    /* ---- Inline font-size en módulos — mínimo legible más agresivo (v154) ----
       Problema reportado por el usuario: en dispositivos móviles reales (Honor
       200 Pro Chrome) con DPR alto + escala de texto del SO (Android) + zoom del
       navegador, los `style="font-size:11px/12px"` hardcoded en los templates
       JS se vuelven ilegibles físicamente aunque la preview headless los muestre
       OK. Esto pasa en tutor.js (44 ocurrencias), reportes.js (39), estudiantes.js
       (25), etc.
       Solución: forzar TODO font-size inline entre 9-12px a 13px mínimo dentro
       de `.module-content` (tablas de módulos operativos). `!important` vence
       el inline style. NO afecta los reports imprimibles porque esos se abren
       en `window.open` nueva sin `.module-content`. */
    .module-content [style*="font-size:9px"],
    .module-content [style*="font-size: 9px"],
    .module-content [style*="font-size:10px"],
    .module-content [style*="font-size: 10px"],
    .module-content [style*="font-size:11px"],
    .module-content [style*="font-size: 11px"],
    .module-content [style*="font-size:12px"],
    .module-content [style*="font-size: 12px"] {
        font-size: 13px !important;
    }

    /* ---- Progreso bar inline ---- */
    .progress-bar[style*="width:200px"],
    .progress-bar[style*="width: 200px"] { width: 120px !important; }

    /* ---- Planificacion iframe ---- */
    iframe[style*="height:500px"],
    iframe[style*="height: 500px"] { height: 280px !important; }

    /* ---- Datos grid ---- */
    .datos-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 1024px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
    .module-content { max-width: 1200px; margin-inline: auto; }
}

/* ---- License Block Overlay ---- */
.license-block-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg, #d0e1f9);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.license-block-card {
    max-width: 400px;
    width: 100%;
    text-align: center;
    padding: 40px 32px;
}
.license-block-card svg { margin-bottom: 16px; }
.license-block-card h2 {
    font-size: 20px;
    color: var(--text, #2c3e5a);
    margin-bottom: 12px;
}
.license-block-card p {
    font-size: 14px;
    color: var(--text-secondary, #7a8da6);
    line-height: 1.6;
    margin-bottom: 8px;
}
.license-contact {
    font-size: 12px !important;
    margin-bottom: 24px !important;
}
.license-block-card .neu-btn { width: 100%; }

/* ---- Product Tour ---- */
.tour-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(10, 20, 40, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tour-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 700px;
    width: 100%;
}
.tour-card {
    position: relative;
    width: 100%;
    background: linear-gradient(145deg, #dae8f8, #c5d6eb);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 6px 6px 16px #a0b0c4, -6px -6px 16px #f0f6ff;
    padding: 40px 50px 32px;
    overflow: hidden;
}
.tour-card::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -30%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(91,155,213,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
/* Botones laterales semi-circulo */
.tour-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 80px;
    border: none;
    background: linear-gradient(135deg, #5b9bd5, #4a87c0);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(91,155,213,0.4);
}
.tour-arrow:hover { background: linear-gradient(135deg, #4a87c0, #3a73aa); }
.tour-arrow:active { transform: translateY(-50%) scale(0.94); }
.tour-arrow:disabled { opacity: 0.3; cursor: default; }
.tour-arrow:disabled:active { transform: translateY(-50%); }
.tour-arrow-left {
    left: -22px;
    border-radius: 44px 0 0 44px;
    padding-right: 4px;
}
.tour-arrow-right {
    right: -22px;
    border-radius: 0 44px 44px 0;
    padding-left: 4px;
}
.tour-arrow svg { width: 22px; height: 22px; flex-shrink: 0; }
.tour-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 30px;
    color: rgba(0,0,0,0.25);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.15s;
    z-index: 1;
}
.tour-close:hover { color: var(--text, #2c3e50); }
.tour-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}
.tour-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #b0c0d4;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tour-dot.active {
    background: linear-gradient(135deg, #5b9bd5, #3a7fc0);
    width: 32px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(91,155,213,0.45);
}
.tour-content {
    text-align: center;
    min-height: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tour-content.slide-enter {
    animation: tourSlideIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tour-content.slide-exit {
    animation: tourSlideOut 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}
.tour-icon {
    font-size: 72px;
    margin-bottom: 24px;
    display: block;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
}
.tour-title {
    font-size: 32px;
    font-weight: 800;
    color: #1e3a5f;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}
.tour-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #5b9bd5;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.tour-desc {
    font-size: 17px;
    color: #3d5570;
    line-height: 1.8;
    max-width: 480px;
}
.tour-counter {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #8a9bb0;
    margin: 26px 0 0;
    letter-spacing: 1px;
}

@keyframes tourSlideIn {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes tourSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-80px); }
}

@media (max-width: 480px) {
    .tour-card { padding: 32px 22px 24px; }
    .tour-arrow { width: 36px; height: 64px; }
    .tour-arrow-left { left: -18px; }
    .tour-arrow-right { right: -18px; }
    .tour-arrow svg { width: 18px; height: 18px; }
    .tour-icon { font-size: 56px; }
    .tour-title { font-size: 24px; }
    .tour-subtitle { font-size: 15px; }
    .tour-desc { font-size: 15px; }
    .tour-content { min-height: 240px; }
}

/* ---- Tabla con scroll horizontal + hint de "hay más a la derecha" ---- */
.table-container {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-container::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, var(--bg));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.table-container:hover::after {
    opacity: 1;
}

/* En mobile, sombra permanente y headers sin wrap para que la tabla sea
   legible con scroll horizontal en lugar de apretarse en columnas delgadas. */
@media (max-width: 768px) {
    .table-container::after {
        opacity: 0.75;
        width: 20px;
        background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.12));
    }
    .table-container .neu-table thead th {
        white-space: nowrap;
    }
    /* Las celdas de nombres (columnas 2-4 generalmente) tienen min-width
       cómodo para que "Álvarez Gómez Pedro" no se parta en 3 líneas. */
    .table-container .neu-table td {
        min-width: 60px;
    }
    /* Primera columna: nowrap + min-width 70px. Sirve para "#" (estudiantes) y
       para textos tipo "2024-2025" (periodos/cursos) que antes se partían en
       2 líneas por falta de espacio. El nowrap fuerza ancho natural y el
       scroll horizontal permite acceder al resto. */
    .table-container .neu-table td:nth-child(1) {
        min-width: 70px;
        white-space: nowrap;
    }
    .table-container .neu-table td:nth-child(2),
    .table-container .neu-table td:nth-child(3),
    .table-container .neu-table td:nth-child(4) {
        min-width: 110px;
    }
}

/* ---- Color scheme hint ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) {
        color-scheme: dark;
    }
}

/* v180 — Fix selects en modo oscuro (reporte usuario 2026-04-22, tema
   neupro). El <select> cerrado se estila vía CSS, pero el dropdown de
   <option> lo pinta el sistema operativo usando `color-scheme`. Sin la
   hint explícita, si el OS está en modo claro pero el usuario tiene la app
   en dark (theme-toggle interno), el dropdown renderiza fondo blanco y el
   <option> hereda el color claro del body → texto blanco sobre fondo
   blanco, ilegible. Forzar `color-scheme: dark` en el scope `[data-mode="dark"]`
   le dice al OS que use su paleta oscura para todos los widgets nativos
   (<select>, scrollbar, file input, date picker).
   Aplica a TODOS los temas: neupro, aurora, glass, sunset, midnight, oscuro. */
:root[data-mode="dark"] {
    color-scheme: dark;
}
:root[data-mode="light"] {
    color-scheme: light;
}

/* Defensa en profundidad: estilo directo del <option> (Firefox/Chrome
   respetan color y background-color en <option> en la mayoría de OS). */
:root[data-mode="dark"] select option,
:root[data-mode="dark"] select optgroup {
    background-color: var(--bg-dark, #141e2e);
    color: var(--text, #e0e8f2);
}
:root[data-mode="light"] select option,
:root[data-mode="light"] select optgroup {
    background-color: var(--bg-light, #ffffff);
    color: var(--text, #1a2a3a);
}

/* ---- Clickable rows ---- */
.clickable-row { cursor: pointer; transition: background 0.15s ease; }
.clickable-row:hover { background: var(--bg-light) !important; }

/* ---- Bitacora button in top-bar ---- */
#btn-bitacora { font-size: 18px; }
#btn-bitacora:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- Module depth transition ---- */
.module-content {
    animation: moduleEmerge 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
}
@keyframes moduleEmerge {
    0% { opacity: 0; transform: scale(0.9) translate(15px, 12px); filter: blur(3px); }
    100% { opacity: 1; transform: scale(1) translate(0, 0); filter: blur(0); }
}
.module-sinking {
    animation: moduleSink 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
    pointer-events: none;
    transform-origin: center center;
}
@keyframes moduleSink {
    0% { opacity: 1; transform: scale(1) translate(0, 0); filter: blur(0); }
    100% { opacity: 0; transform: scale(0.9) translate(15px, 12px); filter: blur(3px); }
}

/* ===================================================================
   v161 — Calculadora + Calendario + Recordatorios + Botón "i" del día
   =================================================================== */

/* ---- CALCULADORA flotante ---- */
.calc-overlay {
    /* v162 — z-index 2500: por encima de wizard-overlay (700), modal-overlay
       (1000), tours (9000 pero ese no sale en uso normal), etc. Queda DEBAJO de
       los 3 overlays "de sistema" (license-block 9999, lock 10000, boot 10100)
       que solo aparecen en estados de excepción (los cuales NO deben convivir
       con calculadora/calendario abiertos). */
    position: fixed; inset: 0; z-index: 2500;
    background: rgba(10, 20, 40, 0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: fadeIn 0.2s ease;
}
.calc-window {
    width: 320px; max-width: 100%; padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
    animation: popIn 0.25s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.calc-header { display: flex; justify-content: space-between; align-items: center; }
.calc-header h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.calc-display {
    background: var(--bg, #d0e1f9); border-radius: 10px; padding: 14px 16px;
    min-height: 80px; display: flex; flex-direction: column; justify-content: flex-end;
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    overflow: hidden;
}
.calc-subdisplay { font-size: 13px; color: var(--text-secondary, #7a8da6); min-height: 16px; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.calc-main { font-size: 30px; font-weight: 700; color: var(--text, #1a2340); text-align: right; line-height: 1.1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-key {
    padding: 14px 0; font-size: 17px; font-weight: 600; border: none; cursor: pointer;
    background: var(--bg); color: var(--text);
    border-radius: 10px;
    box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    transition: all 0.12s ease; min-height: 48px;
}
.calc-key:hover { color: var(--accent); }
.calc-key:active { box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light); transform: scale(0.97); }
.calc-key-op { color: var(--accent, #3b82f6); font-size: 19px; }
.calc-key-eq { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; }
.calc-key-eq:hover { color: #fff; filter: brightness(1.1); }
.calc-key-cls { color: #ef4444; }
.calc-key-ce { color: #b8860b; }

/* ---- CALENDARIO flotante ---- */
.cal-overlay {
    /* v162 — mismo razonamiento que .calc-overlay (ver arriba) */
    position: fixed; inset: 0; z-index: 2500;
    background: rgba(10, 20, 40, 0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: fadeIn 0.2s ease;
}
.cal-window {
    width: 520px; max-width: 100%; padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    animation: popIn 0.25s cubic-bezier(0.2, 1.3, 0.4, 1);
    max-height: 90vh; overflow-y: auto;
}
.cal-win-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cal-win-header h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }

.cal-widget { display: flex; flex-direction: column; gap: 10px; }
.cal-header { display: flex; align-items: center; gap: 10px; }
.cal-month-label { flex: 1; font-weight: 700; font-size: 16px; color: var(--text, #1a2340); text-align: center; text-transform: capitalize; }
.cal-nav, .cal-today-btn { flex-shrink: 0; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 11px; color: var(--text-secondary, #7a8da6); font-weight: 600; text-align: center; padding: 4px 0; }
.cal-weekday { padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day {
    aspect-ratio: 1 / 1;
    min-height: 42px;
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    padding: 4px 2px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-light, #d8e5f5);
    box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
    transition: all 0.15s ease;
    overflow: hidden;
}
.cal-day:hover { transform: translateY(-1px); box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light); }
.cal-day-num { font-size: 14px; font-weight: 600; color: var(--text, #1a2340); }
.cal-day-empty { visibility: hidden; box-shadow: none; cursor: default; background: transparent; }
.cal-day-today { border: 2px solid #3b82f6; }
.cal-day-today .cal-day-num { color: #3b82f6; }
.cal-day-has-reminder.cal-day-teacher { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(99,102,241,0.15)); }
.cal-day-has-reminder.cal-day-inst { background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(139,92,246,0.15)); }
.cal-day-has-reminder.cal-day-mixed { background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(168,85,247,0.22)); }
.cal-day-has-reminder .cal-day-num { color: #1e40af; font-weight: 700; }
.cal-day-has-reminder.cal-day-inst .cal-day-num { color: #6d28d9; }
.cal-day-pencil { position: absolute; top: 3px; right: 4px; font-size: 10px; color: #1e40af; line-height: 1; }
.cal-day-has-reminder.cal-day-inst .cal-day-pencil { color: #6d28d9; }
.cal-day-preview { font-size: 9px; line-height: 1.1; margin-top: 2px; color: var(--text-secondary); text-align: center; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; }
.cal-legend { display: flex; gap: 14px; justify-content: center; font-size: 11px; color: var(--text-secondary, #7a8da6); margin-top: 4px; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-dot-teacher { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.cal-dot-inst { background: linear-gradient(135deg, #a855f7, #8b5cf6); }

/* ---- MODAL de recordatorio (nuevo/editar/eliminar) ---- */
.rem-modal-overlay { z-index: 2600; } /* v162: sobre calc/cal */
.rem-form .form-group { margin-bottom: 10px; }
.rem-readonly { border-top: 1px dashed var(--shadow-dark); padding-top: 10px; margin-top: 10px; }
.rem-readonly-item { background: rgba(168,85,247,0.08); border-left: 3px solid #a855f7; padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; }
.rem-readonly-subject { font-weight: 600; font-size: 13px; color: var(--text, #1a2340); }
.rem-readonly-detail { font-size: 12px; color: var(--text-secondary, #7a8da6); margin-top: 3px; line-height: 1.4; }
.rem-picker-item {
    display: block; width: 100%; padding: 10px 12px; margin-bottom: 6px;
    background: var(--bg-light); border-radius: 8px; border: none; cursor: pointer;
    text-align: left; font-size: 14px; color: var(--text);
    box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
    transition: all 0.15s;
}
.rem-picker-item:hover { transform: translateY(-1px); color: var(--accent); }
.rem-picker-subject { font-weight: 600; }

/* ---- BOTÓN FLOTANTE "i" (recordatorios del día) ---- */
.today-rem-fab {
    /* v165 — Separación mayor del FAB + (usuario: "está muy cerca del botón de
       accesos rápidos"). FAB container: bottom:24px right:24px width:56px.
       Gap antes 12px → ahora 32px. Posición: right = 24 + 56 + 32 = 112px.
       Mobile ≤600: gap 26px → right = 16 + 48 + 26 = 90px (ver @media abajo). */
    position: fixed;
    right: calc(24px + 56px + 32px); /* 112px */
    bottom: 24px;
    width: 56px; height: 56px; border-radius: 50%;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
    font-size: 24px; font-weight: 900; font-family: Georgia, serif;
    display: flex; align-items: center; justify-content: center;
    box-shadow:
        0 8px 20px rgba(245, 158, 11, 0.55),
        0 0 0 0 rgba(245, 158, 11, 0.7);
    z-index: 85;
    animation: todayRemPulse 2.2s ease-in-out infinite;
}
.today-rem-fab:hover { transform: scale(1.06); }
.today-rem-fab:active { transform: scale(0.95); }
.today-rem-ico { display: block; transform: translateY(-1px); }
@keyframes todayRemPulse {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(245,158,11,0.55), 0 0 0 0 rgba(245,158,11,0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 10px 28px rgba(245,158,11,0.75), 0 0 0 14px rgba(245,158,11,0);
        transform: scale(1.04);
    }
}

/* Modal de hoy (click fuera cierra) */
.today-rem-modal-overlay { z-index: 2700; } /* v162: sobre rem-modal */
.trm-item { background: var(--bg-light); padding: 12px 14px; border-radius: 10px; margin-bottom: 8px; box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light); }
.trm-item-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.trm-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.trm-badge-inst { background: rgba(168,85,247,0.18); color: #6d28d9; }
.trm-badge-teacher { background: rgba(59,130,246,0.18); color: #1e40af; }
.trm-course { font-size: 11px; color: var(--text-secondary, #7a8da6); }
.trm-subject { font-weight: 700; font-size: 15px; color: var(--text, #1a2340); margin-bottom: 4px; }
.trm-detail { font-size: 13px; color: var(--text-secondary, #5a6a80); line-height: 1.5; white-space: pre-wrap; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
    from { opacity: 0; transform: scale(0.92) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Responsive calendario en mobile */
@media (max-width: 600px) {
    .cal-window { padding: 14px; }
    .cal-day { min-height: 38px; padding: 3px 1px; }
    .cal-day-num { font-size: 12px; }
    .cal-day-preview { display: none; }
    .cal-day-pencil { font-size: 9px; top: 2px; right: 3px; }
    .cal-legend { font-size: 10px; gap: 10px; }
    .calc-window { width: 100%; max-width: 340px; padding: 14px; }
    .calc-main { font-size: 26px; }
    .calc-key { padding: 12px 0; font-size: 16px; min-height: 44px; }
    .today-rem-fab {
        /* v165 — mobile: FAB real 48×48 con container bottom:16 right:16.
           Gap antes 10px → ahora 26px para mayor separación visual.
           → "i" (52×52) en right: calc(16+48+26) = 90px. Bottom 14px para
           centrar visualmente con el FAB (52 vs 48, diferencia 4/2 = 2px). */
        width: 52px; height: 52px; font-size: 22px;
        right: calc(16px + 48px + 26px); bottom: 14px;
    }

    /* v179 — Touch target WCAG (44×44 min) para `.btn-icon-sm`. v147 lo
       olvidó: los botones de editar/borrar en tablas quedaban a 32×32 en
       mobile, incómodo para dedo. En desktop se mantienen compactos. */
    .btn-icon-sm {
        min-width: 44px;
        min-height: 44px;
    }

    /* v179 — Sticky footer para cards con formulario tabular (asistencias,
       calificaciones, acompañamiento). Mantiene Guardar visible aunque la
       tabla tenga 40+ estudiantes. backdrop-filter desenfoca lo que queda
       detrás (compatible Chrome/Safari; Firefox degrada a fondo sólido). */
    .card-footer {
        position: sticky;
        bottom: 0;
        background: var(--bg-card, #fff);
        backdrop-filter: saturate(1.1) blur(6px);
        -webkit-backdrop-filter: saturate(1.1) blur(6px);
        z-index: 5;
        margin-left: calc(-1 * var(--ui-card-pad, 16px));
        margin-right: calc(-1 * var(--ui-card-pad, 16px));
        padding-left: var(--ui-card-pad, 16px);
        padding-right: var(--ui-card-pad, 16px);
    }
}

/* =============================================
   v240 — Modal legal LOPDP (LegalModal)
   Bloqueante, full-screen, tema-agnóstico.
   ============================================= */
/* v247-fix — Refactor de hardcoded Aurora a tokens del tema activo.
   Antes (v240) este modal usaba paleta Aurora fija (morados #7c3aed/#8b5cf6).
   Ahora hereda los tokens (--bg, --accent, --text, sombras neumórficas) del
   tema actual del docente. En Sistema (default) se ve celeste neumórfico;
   en Aurora se ve morado; en Glass translúcido; etc. — sin overrides. */
.legal-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 30, 50, 0.62);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.legal-modal {
    background: var(--bg);
    border-radius: var(--radius-lg);
    width: 100%; max-width: 920px; height: 92vh; max-height: 820px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 8px 8px 24px var(--shadow-dark), -8px -8px 24px var(--shadow-light);
    color: var(--text);
}
.lm-header {
    padding: 22px 28px 14px;
    border-bottom: 1px solid var(--bg-dark);
    background: var(--bg-light);
}
.lm-header h2 {
    margin: 0 0 4px;
    font-size: 20px; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.lm-subtitle { color: var(--text-secondary); font-size: 13px; margin: 0; line-height: 1.5; }
.lm-tabs {
    display: flex; gap: 0; padding: 0 16px;
    border-bottom: 1px solid var(--bg-dark); background: var(--bg-light);
    overflow-x: auto;
}
.lm-tab {
    padding: 12px 18px;
    background: transparent; border: none; cursor: pointer;
    font-size: 13px; color: var(--text-secondary); font-weight: 500;
    border-bottom: 3px solid transparent;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
    font-family: inherit;
    transition: color .15s, border-color .15s;
}
.lm-tab:hover { color: var(--text); }
.lm-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.lm-tab.done { color: var(--success); }
.lm-tab.done.active { color: var(--accent); border-bottom-color: var(--accent); }
.lm-tab-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-dark); color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.lm-tab.active .lm-tab-num { background: var(--accent); color: #fff; }
.lm-tab.done .lm-tab-num { background: var(--success); color: #fff; }
.lm-doc-container {
    flex: 1;
    margin: 16px 24px 0;
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 320px;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}
.lm-doc-frame {
    width: 100%; height: 100%; border: none; background: #fff;
    display: block; border-radius: var(--radius);
}
.lm-footer {
    padding: 18px 24px 14px;
    border-top: 1px solid var(--bg-dark);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
    background: var(--bg-light);
}
.lm-check {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--text); cursor: pointer; user-select: none;
    flex: 1; min-width: 280px;
}
.lm-check input[type="checkbox"] {
    width: 20px; height: 20px; cursor: pointer; accent-color: var(--accent);
    flex-shrink: 0;
}
.lm-check strong { color: var(--accent); }
.lm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lm-btn {
    padding: 10px 18px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 13px; cursor: pointer;
    border: none;
    font-family: inherit;
    transition: box-shadow .15s, transform .1s, color .15s;
    background: var(--bg);
    color: var(--text);
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}
.lm-btn:active { box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light); }
.lm-btn-cancel { color: var(--text-secondary); }
.lm-btn-cancel:hover { color: var(--text); }
.lm-btn-confirm {
    color: var(--accent);
}
.lm-btn-confirm:hover:not(:disabled) {
    color: var(--accent-hover);
    transform: translateY(-1px);
}
.lm-btn-confirm:disabled {
    opacity: 0.45; cursor: not-allowed;
    color: var(--text-light);
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}
.lm-progress {
    padding: 8px 24px 14px;
    font-size: 11px; color: var(--text-light); text-align: center;
    background: var(--bg-light); letter-spacing: .3px;
}
@media (max-width: 640px) {
    .legal-modal { height: 100vh; max-height: none; border-radius: 0; }
    .lm-header { padding: 16px 18px 10px; }
    .lm-doc-container { margin: 12px 14px 0; }
    .lm-footer { padding: 14px 18px 10px; }
    .lm-actions { width: 100%; justify-content: stretch; }
    .lm-actions .lm-btn { flex: 1; }
}