/* ============================================================
   TOKENS — el único sitio donde se decide el aspecto.
   ============================================================

   La identidad sale de la web que ya tienen en maxieventos.es: sus dos
   tipografías (Fira Sans en titulares, PT Sans en el cuerpo), su azul y su
   naranja. El sistema se va a integrar sobre esa web, así que tiene que
   parecerse a ella, no competir.

   Regla de oro: NINGÚN otro fichero escribe un color a mano. Si en otra hoja
   aparece un #hex, es un error — se añade el token aquí y se usa por su
   nombre. Así se puede rehacer el aspecto entero sin tocar una sola línea de
   lógica, y sin miedo a que quede una pantalla descolgada.

   Los nombres describen el PAPEL que cumple el color, no el color en sí.
   `--alerta` sigue funcionando aunque mañana deje de ser rojo; `--rojo` no.
   ------------------------------------------------------------ */

/* ---------- Tipografías ----------
   Servidas desde aquí, NO desde Google. La página de autorizaciones lleva
   datos de salud de menores: enlazar una fuente externa mandaría la dirección
   IP de cada familia a un tercero cada vez que la abren. Ambas son de licencia
   libre (SIL Open Font License), así que alojarlas es legítimo.
   Solo se carga el subconjunto latino: 5 ficheros, 200 KB en total. */

@font-face {
  font-family: "Fira Sans";
  src: url("/fuentes/firasans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;   /* el texto se lee desde el primer momento */
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fuentes/firasans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("/fuentes/firasans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("/fuentes/ptsans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("/fuentes/ptsans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---------- Superficies y texto ----------
     Su web es blanca, con bandas grises claras para separar secciones. */
  --bg: #ffffff;              /* fondo de la página */
  --superficie: #f7f7f7;      /* tarjetas, tablas, formularios */
  --tinta: #212121;           /* texto principal — el suyo */
  --tinta-suave: #5c5c5c;     /* texto secundario (su #787878, oscurecido
                                 hasta 6,9:1 — el original daba 4,4 y el
                                 mínimo legible es 4,5) */
  --tinta-tenue: #6b6b6b;     /* rótulos y pistas — 5,2:1 sobre blanco y
                                 4,9:1 sobre las tarjetas grises, que es donde
                                 más se usa */
  --borde: #e4e4e4;           /* separadores */
  --borde-fuerte: #c9c9c9;    /* bordes de controles */

  /* ---------- Acento e identidad ----------
     Los tres colores de su marca. El azul oscuro manda; el claro identifica
     eXpacios, y el naranja —que ya usan como acento— identifica Maxi Fun,
     que además es la marca infantil. */
  --acento: #0d6fa2;          /* azul MaxiEventos: botones y enlaces */
  --acento-claro: #e3eff6;
  --expacios: #4290bb;        /* azul claro: la marca eXpacios */
  --expacios-claro: #e8f1f7;
  --maxifun: #fd8c01;         /* naranja MaxiEventos: la marca Maxi Fun */
  --maxifun-claro: #fff1de;

  /* Versiones para TEXTO sobre fondo claro. El naranja de la marca sobre
     blanco da 2,4:1 y hace falta 4,5:1 para poder leerlo: es precioso como
     mancha de color —bordes, bolitas, fondos— y malo como letra. Estas dos
     conservan el tono y ganan el contraste. */
  --maxifun-texto: #a35400;   /* 5,4:1 sobre blanco */
  --expacios-texto: #22638c;  /* 5,8:1 sobre blanco */

  /* ---------- Significado, no decoración ----------
     Estos tres NO son el acento: dicen si algo va bien o mal, y por eso no
     deben cambiar de significado aunque cambie la identidad visual. Ojo con
     el naranja de la marca: el ámbar de «queda un turno» es más oscuro a
     propósito, para que no se confunda con Maxi Fun. */
  --alerta: #c62828;          /* algo va mal o exige atención */
  --alerta-clara: #fdecea;
  --hay: #2e7d32;             /* verde: los dos turnos libres */
  --queda: #b45309;           /* ámbar: queda un turno */
  --lleno: #c62828;           /* rojo: completo */

  /* ---------- Tipografía ---------- */
  --letra: "PT Sans", "Segoe UI", system-ui, sans-serif;
  --letra-titulo: "Fira Sans", "PT Sans", "Segoe UI", system-ui, sans-serif;
  --letra-datos: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --cuerpo: 16px;             /* PT Sans pide algo más de cuerpo que Segoe UI */
  --interlineado: 1.55;
}

/* Modo oscuro. Su web no lo tiene, pero el panel se abre desde el móvil a
   cualquier hora: aquí se reinterpreta la misma identidad sobre fondo oscuro,
   aclarando los colores de marca para que sigan teniendo contraste.
   Solo se redefinen los tokens — ninguna regla de las otras hojas necesita
   saber en qué tema está. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --superficie: #1e2126;
    --tinta: #ecedef;
    --tinta-suave: #a8acb3;
    --tinta-tenue: #8f959d;   /* aclarado: sobre el fondo oscuro, el anterior
                                 se quedaba en 4,1:1 */
    --borde: #2e3238;
    --borde-fuerte: #454a52;

    --acento: #58a6d8;
    --acento-claro: #16303f;
    --expacios: #7bb4d6;
    --expacios-claro: #1a2a35;
    --maxifun: #ffa733;
    --maxifun-claro: #33240f;
    --maxifun-texto: #ffb454;
    --expacios-texto: #8cc0de;

    --alerta: #ef7a70;
    --alerta-clara: #351d1c;
    --hay: #6fbf75;
    --queda: #d99a33;
    --lleno: #ef7a70;
  }
}

/* El atributo `hidden` tiene que ganar siempre.
   La regla del navegador es `[hidden] { display: none }`, y cualquier `display`
   de una hoja de autor la anula por especificidad: `.bloque { display: flex }`
   hacía aparecer en pantalla secciones que el guion había ocultado —el aviso de
   «falta la señal» seguía visible en una reserva ya pagada—. Va aquí, con los
   tokens, porque es la única hoja que cargan todas las páginas. */
[hidden] { display: none !important; }