/* ===========================================================================
   SaberTEC · Sistema de diseño
   Fuente única de verdad para la landing y la aplicación, que hasta ahora
   tenían paletas separadas y ya divergidas (--muted era #5a6782 en una y
   #63708a en la otra).

   Un solo tema: fondo claro, letra oscura. No hay modo oscuro a propósito.
   Los componentes tienen fondos claros incrustados y no están preparados
   para dos temas; mantenerlo obligaría a revisarlos todos.

   Tipografía: SN Pro, variable, licencia SIL OFL, alojada aquí mismo.
   No se pide a Google: evita la petición a un tercero, no manda la IP de
   menores fuera, y permite una CSP sin dominios externos.
   =========================================================================== */

@font-face {
  font-family: 'SN Pro';
  src: url('/assets/fuentes/snpro.woff2') format('woff2');
  font-weight: 200 900;          /* Un solo archivo cubre todo el rango */
  font-style: normal;
  font-display: swap;            /* El texto se ve antes de que llegue la fuente */
}

:root {
  /* --- Color -------------------------------------------------------------
     El acento se reserva para ESTADO: opción elegida, progreso, tu posición.
     Los botones usan --accion, que es neutro oscuro. Si el acento estuviera
     también en los botones dejaría de significar nada donde importa.        */
  --ground:#EDEFF9;
  --surface:#FFFFFF;
  --surface-2:#F6F7FC;
  --ink:#191D2E;
  --ink-2:#3A4055;
  --muted:#5C6379;
  --line:#DCE0F0;

  --brand:#3F51B5;
  --brand-deep:#32408F;
  --brand-soft:#E1E5F6;
  --brand-ghost:#F3F5FC;

  --accion:#2B3040;
  --accion-hover:#1E2230;

  /* Acierto en verde; lo fallado en OCRE, nunca en rojo: la landing promete
     "sin puntajes en rojo" y la paleta no puede contradecirlo. El rojo queda
     solo para errores reales del sistema.                                   */
  --ok:#1B6B4F;        --ok-soft:#E1F1EA;
  --refuerzo:#8A5D0E;  --refuerzo-soft:#F9EFD9;
  --alerta:#B3261E;    --alerta-soft:#FBE9E7;

  /* Colores de los Slime Buddies. Son de ILUSTRACIÓN, no de interfaz: no se
     usan para codificar áreas ni para teñir controles.                      */
  --bubu:#4DA6FF; --mimi:#9B6BFF; --gloo:#45D3A6;
  --poki:#FF9A33; --lumi:#FF6FAE; --zap:#FFD23F;

  /* --- Tipografía --------------------------------------------------------
     Una sola familia. La jerarquía la da el peso, que es para lo que sirve
     una variable. OJO: el peso por defecto de SN Pro es 200, así que hay que
     declararlo siempre de forma explícita.                                  */
  --fuente:'SN Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --peso-normal:400;
  --peso-medio:500;
  --peso-fuerte:650;
  --peso-titular:800;
  --peso-heroe:900;

  --t-heroe:clamp(38px, 6vw, 64px);
  --t-titulo:clamp(26px, 3.4vw, 36px);
  --t-seccion:22px;
  --t-tarjeta:18px;
  --t-cuerpo:16px;
  --t-menor:14px;
  --t-etiqueta:12.5px;

  --alto-apretado:1.05;
  --alto-titulo:1.18;
  --alto-cuerpo:1.6;

  /* --- Espacio, forma y profundidad --------------------------------------- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px;
  --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px;

  --r-s:10px; --r-m:16px; --r-l:24px; --r-pastilla:999px;

  --sombra:0 1px 2px rgba(25,29,46,.04), 0 8px 24px rgba(25,29,46,.06);
  --sombra-alta:0 2px 4px rgba(25,29,46,.06), 0 16px 40px rgba(63,81,181,.10);

  /* --- Movimiento ---------------------------------------------------------
     Salir siempre más rápido que entrar: hace que la interfaz responda.      */
  --dur-corta:120ms;
  --dur-media:200ms;
  --dur-larga:320ms;
  --curva:cubic-bezier(.2, .8, .2, 1);
  --curva-salida:cubic-bezier(.4, 0, 1, 1);
}


/* ---------------------------------------------------------------------------
   Base. La app no tenía ni una regla de foco y un solo atributo ARIA en todo
   app.js: un estudiante que navega con teclado no podía completar una sesión.
   Esto lo arregla de raíz para cualquier componente que se construya encima.
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-normal);
  line-height: var(--alto-cuerpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: var(--peso-titular);
  line-height: var(--alto-titulo);
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-heroe); font-weight: var(--peso-heroe); line-height: var(--alto-apretado); }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-seccion); }
h4 { font-size: var(--t-tarjeta); }

/* Foco visible en todo lo que se puede enfocar. Nunca se quita el anillo. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Cifras que no bailan al actualizarse: puntajes, tiempos, posiciones. */
.cifra, .mono, td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Quien pide menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}