/* Sistema de diseño del consultorio: una sola fuente de colores, tipografía, tamaños, radios y sombras.
   Se carga después de las hojas de cada página y de tema.css, así manda. Los nombres históricos de variables
   (--ucasal-*, --d-*, --blue, --bg-panel, --color-*) apuntan a los tokens: tres nomenclaturas, una sola paleta.
   El modo oscuro cambia solo los tokens (html.oscuro); lo que usa tokens se adapta solo. */
:root {
  /* Color */
  --c-primario: #0A1D37; --c-primario-2: #12336b; --c-acento: #C8102E; --c-acento-2: #a00d25; --c-dorado: #c9a45c;
  --c-fondo: #f1f5f9; --c-panel: #ffffff; --c-suave: #f8fafc; --c-linea: #e2e8f0; --c-linea-2: #cbd5e1;
  --c-texto: #0f172a; --c-texto-2: #475569; --c-texto-3: #64748b; --c-sobre-oscuro: #ffffff;
  --c-exito: #047857; --c-exito-fondo: #ecfdf5; --c-exito-borde: #a7f3d0;
  --c-aviso: #b45309; --c-aviso-fondo: #fffbeb; --c-aviso-borde: #fde68a;
  --c-error: #b91c1c; --c-error-fondo: #fef2f2; --c-error-borde: #fecaca;
  --c-info: #1d4ed8; --c-info-fondo: #eff6ff; --c-info-borde: #bfdbfe;
  /* Tipografía y escala */
  --f-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --t-1: .75rem; --t-2: .875rem; --t-3: 1rem; --t-4: 1.25rem; --t-5: 1.6rem; --t-6: 2.2rem;
  /* Forma */
  --r-1: .5rem; --r-2: .75rem; --r-3: 1.25rem;
  --s-1: 0 1px 2px rgba(12,27,51,.06); --s-2: 0 6px 18px -8px rgba(12,27,51,.18); --s-3: 0 20px 40px -16px rgba(12,27,51,.3);
  /* Nombres históricos → tokens */
  --ucasal-blue: var(--c-primario); --ucasal-red: var(--c-acento); --ucasal-light: var(--c-suave); --ucasal-accent: #3B82F6;
  --blue: var(--c-primario); --red: var(--c-acento);
  --bg-body: var(--c-fondo); --bg-panel: var(--c-panel); --text-main: var(--c-texto); --text-muted: var(--c-texto-3);
  --radius: var(--r-3); --shadow: var(--s-2);
  --d-ink: var(--c-texto); --d-navy: var(--c-primario); --d-navy-2: var(--c-primario-2); --d-blue: #2a5bd7; --d-blue-soft: var(--c-info-fondo);
  --d-red: var(--c-acento); --d-red-dark: var(--c-acento-2); --d-gold: var(--c-dorado); --d-text: var(--c-texto); --d-text-2: var(--c-texto-2); --d-text-3: var(--c-texto-3);
  --d-bg: var(--c-fondo); --d-surface: var(--c-panel); --d-line: var(--c-linea); --d-line-2: var(--c-linea);
  --d-sans: var(--f-sans); --d-serif: var(--f-serif); --d-r-s: var(--r-1); --d-r-m: var(--r-2); --d-r-l: var(--r-3); --d-r-xl: 28px;
  --color-bg: var(--c-fondo); --color-white: var(--c-panel); --color-text-main: var(--c-texto); --color-text-muted: var(--c-texto-3); --color-border: var(--c-linea);
  --color-primary: var(--c-primario); --color-primary-dark: var(--c-primario-2); --color-primary-light: var(--c-info-fondo); --font-family: var(--f-sans);
}

/* ---------- Modo oscuro: los mismos tokens, otros valores ---------- */
html.oscuro {
  --c-fondo: #0b1220; --c-panel: #121c30; --c-suave: #182440; --c-linea: #2a3a57; --c-linea-2: #3b4c6e;
  --c-texto: #e8eef8; --c-texto-2: #bcc8dc; --c-texto-3: #94a5c0;
  --c-exito: #6ee7b7; --c-exito-fondo: #0f2a22; --c-exito-borde: #1f5c47;
  --c-aviso: #fbbf24; --c-aviso-fondo: #2b2108; --c-aviso-borde: #6b4e0a;
  --c-error: #fca5a5; --c-error-fondo: #2f1414; --c-error-borde: #7a2626;
  --c-info: #93c5fd; --c-info-fondo: #10213f; --c-info-borde: #1e3a6e;
  --s-1: 0 1px 2px rgba(0,0,0,.4); --s-2: 0 6px 18px -8px rgba(0,0,0,.6); --s-3: 0 20px 40px -16px rgba(0,0,0,.8);
  color-scheme: dark;
}
html.oscuro body { background: var(--c-fondo); color: var(--c-texto); }
/* Títulos y textos que las pantallas viejas pintan en línea con el azul institucional o con grises fijos */
html.oscuro [style*="color: var(--ucasal-blue)"], html.oscuro [style*="color:var(--ucasal-blue)"], html.oscuro [style*="color:var(--blue)"], html.oscuro [style*="color: var(--blue)"],
html.oscuro [style*="color: #0f172a"], html.oscuro [style*="color:#0f172a"], html.oscuro [style*="color: #1e293b"], html.oscuro [style*="color:#1e293b"], html.oscuro [style*="color:#0A1D37"],
html.oscuro h1:not(.sidebar *), html.oscuro h2:not(.sidebar *), html.oscuro h3:not(.sidebar *), html.oscuro h4:not(.sidebar *), html.oscuro h5:not(.sidebar *) { color: var(--c-texto) !important; }
html.oscuro [style*="color: #64748b"], html.oscuro [style*="color:#64748b"], html.oscuro [style*="color: #475569"], html.oscuro [style*="color:#475569"] { color: var(--c-texto-3) !important; }
html.oscuro [style*="background: white"], html.oscuro [style*="background:white"], html.oscuro [style*="background: #fff"], html.oscuro [style*="background:#fff"], html.oscuro [style*="background:#ffffff"],
html.oscuro [style*="background: #ffffff"], html.oscuro [style*="background-color: white"] { background: var(--c-panel) !important; }
html.oscuro [style*="background: #f8fafc"], html.oscuro [style*="background:#f8fafc"], html.oscuro [style*="background: #f1f5f9"], html.oscuro [style*="background:#f1f5f9"], html.oscuro [style*="background:#F8FAFC"], html.oscuro [style*="background: #F8FAFC"] { background: var(--c-suave) !important; }
html.oscuro [style*="border: 1px solid #e2e8f0"], html.oscuro [style*="border:1px solid #e2e8f0"], html.oscuro [style*="border-bottom: 1px solid #e2e8f0"] { border-color: var(--c-linea) !important; }
html.oscuro input, html.oscuro textarea, html.oscuro select { background: var(--c-panel); color: var(--c-texto); border-color: var(--c-linea); }
html.oscuro .card, html.oscuro .table-card, html.oscuro .stat-card, html.oscuro .chart-container, html.oscuro .modal-content, html.oscuro .eval-panel, html.oscuro .modal-header, html.oscuro .eval-pie,
html.oscuro .inicio-tarjeta, html.oscuro .inicio-fila, html.oscuro .ficha-alumno-boton, html.oscuro .tabla-casos, html.oscuro .notas-lista li, html.oscuro .pwa-boton, html.oscuro .toast { background: var(--c-panel); color: var(--c-texto); border-color: var(--c-linea); }
html.oscuro .doc-preview { background: var(--c-fondo); }
html.oscuro .ia-feedback { background: var(--c-info-fondo); color: var(--c-texto); }
html.oscuro .alertas-docente, html.oscuro .correccion-borrador, html.oscuro .notas-privadas { background: var(--c-aviso-fondo); border-color: var(--c-aviso-borde); color: var(--c-texto); }
html.oscuro .cierre-hecho { background: var(--c-exito-fondo); border-color: var(--c-exito-borde); color: var(--c-exito); }
html.oscuro .eval-pestana[aria-selected="true"] { background: var(--c-panel); }
html.oscuro .eval-pestanas, html.oscuro .eval-section[style*="background"] { background: var(--c-suave) !important; }
/* El papel del escrito sigue siendo blanco: es un documento */
html.oscuro .page-sim, html.oscuro .legal-paper, html.oscuro .legal-paper-page { background: #fff !important; color: #111 !important; }
html.oscuro .sidebar, html.oscuro .sidebar * { color: inherit; }
html.oscuro header, html.oscuro .topbar { background: var(--c-panel); border-color: var(--c-linea); }
html.oscuro .toast-title { color: var(--c-texto); } html.oscuro .toast-message { color: var(--c-texto-2); }
html.oscuro .badge-pending, html.oscuro .badge-evaluated { filter: brightness(.85); }
html.oscuro .ficha-grafico, html.oscuro .med-texto, html.oscuro .cp-fondo { background: var(--c-suave); }
html.oscuro .ficha-grafico text { fill: var(--c-texto-3); } html.oscuro .ficha-grafico .linea { stroke: var(--c-texto); }
html.oscuro .plazo, html.oscuro .novedad-marca, html.oscuro .nav-contador { filter: none; }

/* ---------- El mismo lenguaje visual en los tres portales ---------- */
.sidebar nav .nav-tab[aria-current="page"] { background: #fff; color: var(--c-primario); box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
.sidebar nav .nav-tab[aria-current="page"] svg { color: var(--c-acento); }
.sidebar nav .nav-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .nav-contador { background: var(--c-acento); }
.sidebar-logo h2, .sidebar h1 { font-family: var(--f-sans); letter-spacing: 0; }
.card, .table-card, .stat-card, .chart-container { border-radius: var(--r-3); box-shadow: var(--s-2); border: 1px solid var(--c-linea); }
.card:hover { transform: none; }
.btn-primary { background: var(--c-acento); color: #fff; }
.btn-primary:hover { background: var(--c-acento-2); transform: none; box-shadow: var(--s-2); }
.btn, .btn-outline, .nav-tab, .inicio-tarjeta, .inicio-fila, .eval-pestana, .pwa-boton { font-family: var(--f-sans); }
.boton-tema { background: transparent; border: 1px solid rgba(255,255,255,.25); color: inherit; border-radius: 999px; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.boton-tema svg { width: 1rem; height: 1rem; }
.boton-tema:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sidebar-pie { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }

/* ---------- Estados de pantalla ---------- */
.estado-cargando { color: var(--c-texto-3); font-size: var(--t-2); display: flex; align-items: center; gap: .5rem; padding: .6rem 0; }
.estado-cargando::before { content: ""; width: .9rem; height: .9rem; border: 2px solid var(--c-linea-2); border-top-color: var(--c-primario); border-radius: 50%; animation: estado-giro .8s linear infinite; }
@keyframes estado-giro { to { transform: rotate(360deg); } }
.estado-vacio, .estado-error { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem 1.1rem; border-radius: var(--r-2); font-size: var(--t-2); }
.estado-vacio { background: var(--c-suave); border: 1px dashed var(--c-linea-2); color: var(--c-texto-2); }
.estado-error { background: var(--c-error-fondo); border: 1px solid var(--c-error-borde); color: var(--c-error); }
.estado-vacio .ico, .estado-error .ico { width: 1.4rem; height: 1.4rem; margin: 0; }
.estado-texto { margin: 0; }
.estado-accion { padding: .4rem .9rem; font-size: var(--t-1); }
/* Menú del alumno en grupos */
.nav-grupo { font-size: var(--t-1); opacity: .55; margin: .9rem .75rem .35rem; font-weight: 800; }
.sidebar-nav { overflow-y: auto; min-height: 0; }
.sidebar-nav .nav-item { margin-bottom: .35rem; padding: .8rem 1.1rem; }
/* Textos que solo se muestran en modo demo */
body:not(.demo) .solo-demo { display: none !important; }

/* ---------- Impresión: solo el contenido ---------- */
@media print {
  html.oscuro { --c-fondo: #fff; --c-panel: #fff; --c-suave: #fff; --c-texto: #000; --c-texto-2: #222; --c-texto-3: #444; --c-linea: #999; }
  .sidebar, header, .topbar, .pwa-barra, .pwa-sin-red, .guia-boton, .guia-panel, #toast-container, .btn, button, .modal-header .btn, .nav-campana, .filtros, .eval-pestanas, body::after { display: none !important; }
  body, html { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; display: block !important; }
  .main-content, .content, .main-view, .modal, .modal-content, .modal-body, .eval-cuerpo, .doc-preview, .eval-panel { position: static !important; overflow: visible !important; height: auto !important; max-height: none !important; padding: 0 !important; display: block !important; box-shadow: none !important; }
  .card, .table-card { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .page-sim, .legal-paper { box-shadow: none !important; padding: 0 !important; }
}