/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · base (13 oct · DISENO.md §2). Tokens, reseteo, letra, estructura, densidades, foco y movimiento.
   Todo lo visual de la app sale de estos tokens: ninguna hoja de área inventa colores ni tamaños sueltos.
   Orden de carga (index.html): base · componentes · entrada · profesor · horario · admisiones · pendientes · direccion ·
   movil (finanzas la carga finanzas.js al entrar).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Darker Grotesque: solo el título de cada pantalla y la marca. El resto, la letra del sistema. */
@font-face { font-family: 'Darker Grotesque'; font-style: normal; font-weight: 500; font-display: block; src: url(../fuentes/darker-grotesque-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Darker Grotesque'; font-style: normal; font-weight: 600; font-display: block; src: url(../fuentes/darker-grotesque-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Darker Grotesque'; font-style: normal; font-weight: 700; font-display: block; src: url(../fuentes/darker-grotesque-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Darker Grotesque'; font-style: normal; font-weight: 800; font-display: block; src: url(../fuentes/darker-grotesque-latin-800-normal.woff2) format('woff2'); }

/* ── 1 · tokens ── */
:root {
  /* superficies */
  --fondo: #F3F4F7;
  --sup: #FFFFFF;
  --sup-2: #F8F9FB;
  --sup-3: #EEF0F4;
  --linea: #E3E6EC;
  --linea-2: #CDD2DB;

  /* tinta */
  --tinta: #161D2B;
  --tinta-2: #4A5263;
  --tinta-3: #6B7385;
  --tinta-4: #9AA1AF;

  /* acción (un solo color) */
  --acento: #1F6FE0;
  --acento-2: #1A5EC2;
  --acento-suave: #EAF1FD;
  --acento-texto: #1756B0;
  --acento-anillo: rgba(31, 111, 224, .22);

  /* semánticos */
  --ok: #23935A;        --ok-fondo: #E7F4EC;        --ok-texto: #17683F;
  --aviso: #E59A1E;     --aviso-fondo: #FDF3E1;     --aviso-texto: #8A5204;
  --peligro: #D0372E;   --peligro-fondo: #FCEDEB;   --peligro-texto: #A8261F;
  --neutro-fondo: #EEF0F4; --neutro-texto: #4A5263;

  /* 17 oct · asistencias · colores: una sola pareja en toda la app (profesor, Supervisión, Administración, Recepción,
     modo clase): presente = azul, ausente = gris, los dos con fuerza (antes, tintes pastel que se confundían). El rojo
     queda para la clase sin asistencia tomada y, en Recepción, para el ausente sin motivo. --asis-tinta: el gris de
     segundo plano (edad, estado) dentro de una ficha teñida, sobre 4,5:1 en los dos tintes. */
  --presente: #1F6FE0;  --presente-tinte: #D2E2F9;  --presente-borde: #79A9EC;  --presente-texto: #1756B0;
  --ausente: #6B7385;   --ausente-tinte: #D9DBDF;   --ausente-borde: #A6ABB6;   --ausente-texto: #3F4757;
  --asis-tinta: #4A5263;

  /* estados del alumno: solo puntos de 8 px y anillos de foto, siempre con su nombre cerca */
  --e-aspirante: #9B8FD4;
  --e-lista-de-espera: #6A92D8;
  --e-esperando-pagos: #C88DB4;
  --e-bienvenida: #4FA3B5;
  --e-nuevo: #B09878;
  --e-activo: #7C8597;
  --e-pausa: #B4BAC6;
  --e-desistio: #B4BAC6;
  --e-facturas: #B4BAC6;

  /* instrumentos: sin color (config.js los deja todos en este gris) · avatares sin foto: iniciales neutras */
  --instrumento: #7C8597;
  --avatar-fondo: #E7EBF2;
  --avatar-texto: #4A5A77;

  /* superficies grafito: avisos (toasts) y tooltips */
  --grafito: #1F2633;

  /* letra · los pasos son tamaños; el alto de línea va aparte (--lh-…): font: 600 var(--t-m)/var(--lh-m) var(--f-ui) */
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  --f-titulo: "Darker Grotesque", var(--f-ui);
  --t-xs: 11.5px;   --lh-xs: 16px;
  --t-s: 12.5px;    --lh-s: 18px;
  --t-m: 14px;      --lh-m: 20px;
  --t-l: 15px;      --lh-l: 22px;
  --t-xl: 17px;     --lh-xl: 24px;
  --t-2xl: 20px;    --lh-2xl: 26px;
  --t-titulo: 34px; --lh-titulo: 36px;

  /* forma */
  --r-s: 6px;
  --r-m: 8px;
  --r-l: 12px;
  --r-xl: 16px;
  --r-pildora: 999px;

  /* sombras */
  --s-1: 0 1px 2px rgba(16, 24, 40, .05);
  --s-2: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06);
  --s-3: 0 2px 6px rgba(16, 24, 40, .08), 0 16px 40px rgba(16, 24, 40, .16);

  /* capas flotantes: casi opacas, nada se lee a través */
  --sup-flotante: rgba(255, 255, 255, .97);
  --desenfoque: blur(18px) saturate(1.3);
  --velo: rgba(16, 24, 40, .32);

  /* densidad (la cambian .amplio y .denso) */
  --alto-control: 36px;
  --letra-control: var(--t-l);
  --alto-fila: 44px;

  /* movimiento · Ajustes › Movimiento: Normal .2 s (por defecto), Lento ×1,4, Rápido */
  --dur: .2s;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --lento: 1.4;

  /* nombres anteriores que el JS todavía escribe en estilos en línea (var(--gris), var(--azul)…): apuntan a la paleta */
  --azul: var(--acento);
  --verde: var(--ok);
  --rojo: var(--peligro);
  --naranja: var(--aviso);
  --gris: var(--tinta-3);
  --gris-claro: var(--tinta-4);
  --texto: var(--tinta);
  --curva: var(--ease);
}
:root.lento { --dur: .28s; }
:root.rapido { --dur: .12s; }

/* ── 2 · reseteo ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 var(--t-l)/var(--lh-l) var(--f-ui);
  color: var(--tinta);
  background: var(--fondo);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  user-select: none;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button) { padding: 0; border: 0; background: none; }
button { cursor: pointer; }
img, svg { display: block; }
textarea, input, .copiable { user-select: text; }
[hidden] { display: none !important; }
::selection { background: var(--acento-anillo); }
.fondo { display: none; } /* capa decorativa del concepto anterior: ya no se pinta */

/* jerarquía con tamaño y peso; Darker Grotesque solo en el título de pantalla */
h1 { font: 700 var(--t-titulo)/var(--lh-titulo) var(--f-titulo); letter-spacing: -.005em; color: var(--tinta); }
h2 { font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); letter-spacing: -.005em; color: var(--tinta); }
h3 { font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); color: var(--tinta); }
h4 { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }

/* ── 3 · estructura ── */
#app { height: 100vh; }
.portal { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
/* ronda 3: .contenido ya no lleva relleno; el margen lo pone el marco de la vista (abajo) */
.contenido { position: relative; min-height: 0; padding: 0; overflow: hidden; }
.vista { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 16px; }

/* ── 3b · marco de página único (RONDA-3 §1 · DISENO.md § Marco) ──
   Cada pestaña de cada portal vive en el mismo contenedor: la .vista hija directa de .contenido. Centrada, 1280 px como
   máximo, 32 px a cada lado (24 px a ≤ 1180 px), 20 px arriba: el título empieza siempre en el mismo sitio.
   .vista.ancha (horario, Hoja, matriz de Pendientes) usa todo el ancho; su cabecera se sangra para que el título caiga
   en la misma línea y el mismo margen que en las demás (--marco-sangria). El iPhone (≤ 760) lo maneja movil.css. */
:root {
  --marco-ancho: 1280px;
  --marco-lado: 32px;
  --marco-lado-ancha: 24px;
  --marco-arriba: 20px;
  --marco-abajo: 24px;
  --alto-cab: 40px;
}
@media (max-width: 1180px) { :root { --marco-lado: 24px; } }
@media (min-width: 761px) {
  .contenido > .vista {
    width: 100%; max-width: var(--marco-ancho); margin-inline: auto;
    padding: var(--marco-arriba) var(--marco-lado) var(--marco-abajo);
  }
  /* ancha: todo el ancho; lo que va arriba (título y mandos) se alinea con el marco de las demás */
  /* ancha: 24 px a los lados (lo que usaban antes; el horario calcula sus columnas con ese ancho) y la cabecera
     sangrada hasta el margen de las demás: (ventana − 1280) / 2 + 32 − 24 */
  .contenido > .vista:is(.ancha, .vista-horario, .adm-hoja, .vista-pendientes) {
    --marco-sangria: calc(max(0px, (100vw - var(--marco-ancho)) / 2) + var(--marco-lado) - var(--marco-lado-ancha));
    max-width: none; padding-inline: var(--marco-lado-ancha);
  }
  .contenido > .vista:is(.ancha, .vista-horario, .adm-hoja, .vista-pendientes) > :is(.vista-cab, .titulo-fila, .adm-cab, .pd-cab) { margin-inline: var(--marco-sangria); }
}
@media print { .contenido > .vista { max-width: none; padding: 0; } }

/* título de pantalla: Darker Grotesque 34/700, y a su lado (misma línea base) el detalle en gris */
.vista h1, .titulo-fila h1, .titulo-vista { font: 700 var(--t-titulo)/var(--lh-titulo) var(--f-titulo); letter-spacing: -.005em; color: var(--tinta); }
.titulo-fila { flex: none; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.titulo-fila .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* cabecera de pestaña (ronda 3): título a la izquierda, acciones a la derecha, siempre 40 px de alto (no cambia al
   cambiar de pestaña ni de filtro). Marcado:
   <header class="vista-cab"><div class="vista-cab-titulo"><h1>…</h1><p class="sub">…</p></div>
     <div class="vista-cab-acciones">…botones, buscador, conmutador…</div></header>
   .titulo-fila (la de antes) sigue valiendo y tiene la misma altura. */
.vista-cab { flex: none; display: flex; align-items: center; gap: 12px; min-width: 0; }
.vista-cab-titulo { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.vista-cab-titulo h1, .vista-cab > h1 { white-space: nowrap; }
.vista-cab-titulo .sub { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vista-cab-acciones { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 761px) {
  .vista-cab { height: var(--alto-cab); }
  .titulo-fila { min-height: var(--alto-cab); }
  :is(.vista-cab-titulo, .vista-cab, .titulo-fila) > h1 { line-height: var(--alto-cab); }
}

/* ── 4 · densidades: cada vista elige la suya ── */
.amplio { --alto-control: 44px; --letra-control: var(--t-xl); --alto-fila: 52px; }
.denso { --alto-control: 30px; --letra-control: var(--t-m); --alto-fila: 34px; font-size: var(--t-m); line-height: var(--lh-m); }
.denso.muy, .muy-denso { --alto-control: 28px; --letra-control: 13px; --alto-fila: 32px; font-size: 13px; }

/* ── 5 · utilidades mínimas ── */
.espacio { flex: 1; }
.sub { font-size: var(--t-m); line-height: var(--lh-m); color: var(--tinta-3); }
.detalle { font-size: var(--t-s); line-height: var(--lh-s); color: var(--tinta-3); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.truncar { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fila { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* desplazamiento fino, discreto */
* { scrollbar-width: thin; scrollbar-color: rgba(22, 29, 43, .18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(22, 29, 43, .16); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(22, 29, 43, .28); }

/* ── 6 · foco visible (solo con teclado) ── */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-m); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ── 7 · movimiento ── */
/* Entrada de una vista: corta y suave, en cascada solo cuando cambia lo que se mira (app.js · .sin-entrada). */
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fundido { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes girar { to { transform: rotate(360deg); } }
.entra { animation: entra var(--dur) var(--ease) backwards; }
.vista > * { animation: entra var(--dur) var(--ease) backwards; }
.vista > :nth-child(2) { animation-delay: .03s; }
.vista > :nth-child(3) { animation-delay: .06s; }
.vista > :nth-child(4) { animation-delay: .09s; }
.vista > :nth-child(5) { animation-delay: .12s; }
.vista > :nth-child(n+6) { animation-delay: .15s; }
.contenido.sin-entrada * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; scroll-behavior: auto !important; }
}