/* ═══════════════════════════════════════════════════════════════════════
   SABAI · Tokens
   ───────────────────────────────────────────────────────────────────────
   Se hereda de Sphaera la ARQUITECTURA (escala de radios, sombras, easing,
   fuentes autoalojadas en .woff2). Los VALORES son propios: Sphaera es la
   marca profesional de Javi, Sabai es la casa.

   Todos los pares de color están comprobados contra WCAG 2.1 sobre su
   fondo. Los que se marcan como «3 m» superan 3:1 y sirven para texto
   grande y para el Panel, pero no para texto corrido pequeño.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Con el tema cambian también los controles nativos (select, date,
     scrollbars): sin esta línea salían claros sobre fondo oscuro. */
  color-scheme: light;

  /* ── Día ─────────────────────────────────────────────────────────── */
  --sb-fondo:        #F6F4EF;   /* el mismo blanco cálido del logo */
  --sb-superficie:   #FFFDF8;
  --sb-tinta:        #1C1F1D;   /* 15.13:1 · verde-negro, nunca negro puro */
  --sb-tinta-suave:  #646A63;   /*  5.05:1 */
  --sb-linea:        #DFDACE;
  --sb-borde:        var(--sb-linea);
  --sb-fondo-suave:  rgba(28,31,29,.04);
  --sb-acento:       #3F6B4E;   /*  5.58:1 · verde hoja, del árbol */
  --sb-acento-tenue: rgba(63,107,78,.10);
  /* SIN USAR desde el 02/09/2026, y conviene saber por qué antes de
     volver a echarle mano. Su único usuario era el contador de la tira
     del recorrido, que se pintaba sobre `var(--sb-tinta)` de fondo. Eso
     de noche se da la vuelta —`--sb-tinta` es CREMA de noche— y este
     verde, que está pensado para fondo oscuro, quedaba a 1,7:1 encima.
     No es que el color esté mal: es que «superficie siempre oscura» no
     existe en una casa con dos temas, salvo que se escriba a mano un
     color que no sea un token. Si vuelve a hacer falta, que sea sobre un
     fondo escrito en hexadecimal y no sobre un token de tinta. */
  --sb-acento-claro: #9FD3AE;   /* 12.7:1 sobre #1C1F1D · sin usar hoy */
  --sb-aviso:        #8F5C21;   /*  5.13:1 · ámbar */
  --sb-aviso-tenue:  rgba(143,92,33,.10);

  /* ── Miembros ────────────────────────────────────────────────────
     Elegidos para distinguirse entre sí también con daltonismo:
     azul · terracota · morado · verde azulado. Ningún par rojo-verde.
     El verde de marca queda reservado al sistema, nunca a una persona. */
  --sb-rocio: #2F6E8F;   /* 5.10:1 */
  --sb-javi:  #9A5624;   /* 5.12:1 */
  --sb-lucia: #6B4E96;   /* 6.05:1 */
  --sb-alma:  #217A70;   /* 4.68:1 */

  /* ── Forma ───────────────────────────────────────────────────────── */
  --sb-r:      14px;
  --sb-r-sm:    8px;
  --sb-r-md:   12px;
  --sb-r-lg:   22px;

  /* Teñidas del verde-negro de la tinta, no gris neutro: la sombra de
     2026 es difusa, grande, de baja opacidad y del color del ambiente. */
  --sb-sombra:      0 1px 2px rgba(31,45,36,.05), 0 8px 24px rgba(31,45,36,.08);
  --sb-sombra-alta: 0 2px 4px rgba(31,45,36,.06), 0 18px 44px rgba(31,45,36,.12);

  /* ── Movimiento ──────────────────────────────────────────────────── */
  --sb-ease:     cubic-bezier(.22, 1, .36, 1);
  /* El muelle de la casa (curva linear() con un rebote corto), para lo
     que entra o se elige — hojas, galletas —, no para todo. OJO: para
     dar reserva a navegadores sin linear() NO vale var(--sb-muelle)
     (el fallo llega en computado y anula la propiedad entera): se
     escribe la curva LITERAL en una segunda declaración, con la de
     --sb-ease encima como red. Este token queda como referencia del
     valor canónico. */
  --sb-muelle:   linear(0, .32 22%, .72 40%, 1.02 62%, .99 80%, 1);
  --sb-t-rapida: .16s;
  --sb-t:        .28s;
  --sb-t-lenta:  .5s;

  /* ── Tipografía ───────────────────────────────────────────────────
     Una sola familia: Figtree, geométrica y cálida, con alta altura de x
     — legible a tres metros y moderna sin frialdad. La jerarquía se hace
     con peso y tamaño, no cambiando de familia. Decidido tras ver la
     serif en pantalla: demasiado sobria para la casa.
     Licencia abierta (OFL), autoalojada en .woff2. */
  --sb-fuente-titulo: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sb-fuente-ui:     "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sb-fuente-mono:   ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Escala tipográfica del Panel ─────────────────────────────────
     Pensada para leerse de paso, a unos tres metros. Nada por debajo
     de 16px en el Panel; la letra pequeña es para el móvil. */
  --sb-panel-hora:   clamp(56px, 7vw, 104px);
  --sb-panel-titulo: clamp(28px, 3.2vw, 46px);
  --sb-panel-item:   clamp(20px, 2.1vw, 30px);
  --sb-panel-meta:   clamp(16px, 1.4vw, 20px);
}

/* ═══════════════════════════════════════════════════════════════════════
   El color de persona, legible en los dos temas
   ───────────────────────────────────────────────────────────────────────
   El color de cada uno viene de la tabla `miembros` y llega al CSS por
   style en línea como `--c`. Es un DATO, no un token: es siempre el tono
   de día, y de noche los ocho tonos de la paleta caen por debajo de AA
   sobre el fondo (2.0–3.6:1). La pantalla no debe usar `var(--c)` a
   pelo: usa `var(--sb-persona)`, que de día es el color tal cual y de
   noche lo aclara (mezcla al 42% con blanco → 8.4–9.9:1, la constante
   validada en «Necesito decir algo»). Para la tinta que va ENCIMA de un
   fondo de persona vale `--sb-persona-tinta`: crema de día, casi-negro
   de noche — es decir, `--sb-fondo`, con nombre propio para que se lea
   la intención. `--sb-persona-pc` es lo mismo para el dato `--pc` (el
   segundo color de persona que usan algunas pantallas cuando conviven
   dos: quien mira y quien es). Se define sobre `*` a propósito: cada
   elemento la recalcula desde SU `--c`/`--pc` heredado o en línea. Y
   SIN reserva dentro del var(): si el dato no está, la variable queda
   inválida y cada `var(--sb-persona, X)` cae a su propia X, igual que
   caía con `var(--c, X)`.
   ═══════════════════════════════════════════════════════════════════════ */
* {
  --sb-persona:       var(--c);
  --sb-persona-pc:    var(--pc);
  --sb-persona-cc:    var(--cc);
  --sb-persona-tinta: var(--sb-fondo);
}

/* ═══════════════════════════════════════════════════════════════════════
   EL DEDO APOYADO NO SELECCIONA TEXTO   ·   06/09/2026
   ───────────────────────────────────────────────────────────────────────
   En el iPhone, mantener pulsado un botón —el acelerador de la carrera,
   el freno de la mudanza— saca a ratos la lupa de seleccionar y la barra
   de copiar. El juego se queda debajo y el dedo deja de conducir; y como
   sólo pasa a veces, parece que el botón falla.

   Va aquí y no en cada juego porque le pasa a CUALQUIER botón que se
   mantenga pulsado, incluidos los que todavía no existen. Y no se pierde
   nada al quitarlo: el rótulo de un botón no se copia nunca. Lo que sí
   se copia —el código para invitar a otra casa, un enlace de calendario—
   vive en `input` y en cajas con `user-select:all`, y ésos no entran
   aquí. `-webkit-touch-callout` es la mitad que importa en iOS: sin él,
   el menú largo sale igual aunque no haya selección.
   ═══════════════════════════════════════════════════════════════════════ */
button, [role="button"], canvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]), :root:not([data-tema="dia"]) * {
    --sb-persona:    color-mix(in srgb, var(--c) 42%, #FFFFFF);
    --sb-persona-pc: color-mix(in srgb, var(--pc) 42%, #FFFFFF);
    --sb-persona-cc: color-mix(in srgb, var(--cc) 42%, #FFFFFF);
  }
}
:root[data-tema="noche"], :root[data-tema="noche"] * {
  --sb-persona:    color-mix(in srgb, var(--c) 42%, #FFFFFF);
  --sb-persona-pc: color-mix(in srgb, var(--pc) 42%, #FFFFFF);
  --sb-persona-cc: color-mix(in srgb, var(--cc) 42%, #FFFFFF);
}

/* ═══════════════════════════════════════════════════════════════════════
   Noche
   El Panel vive en la cocina y de madrugada no puede deslumbrar. Se
   activa por preferencia del sistema o forzando data-tema="noche".
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="dia"]) {
    color-scheme: dark;
    --sb-fondo:        #141715;
    --sb-superficie:   #1C201D;
    --sb-tinta:        #ECE7DC;   /* 14.64:1 */
    --sb-tinta-suave:  #9AA098;   /*  6.75:1 */
    --sb-linea:        #2C312D;
    --sb-fondo-suave:  rgba(236,231,220,.06);
    --sb-acento:       #7FB08D;   /*  7.31:1 */
    --sb-acento-tenue: rgba(127,176,141,.14);
    --sb-aviso:        #DDA765;   /*  8.42:1 */
    --sb-aviso-tenue:  rgba(221,167,101,.14);

    --sb-rocio: #7FB6D4;   /* 8.21:1 */
    --sb-javi:  #E0A06A;   /* 8.09:1 */
    --sb-lucia: #B79BDC;   /* 7.51:1 */
    --sb-alma:  #6FC7BB;   /* 9.08:1 */

    --sb-sombra:      0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
    --sb-sombra-alta: 0 2px 4px rgba(0,0,0,.40), 0 18px 44px rgba(0,0,0,.38);
  }
}

:root[data-tema="noche"] {
  color-scheme: dark;
  --sb-fondo:        #141715;
  --sb-superficie:   #1C201D;
  --sb-tinta:        #ECE7DC;
  --sb-tinta-suave:  #9AA098;
  --sb-linea:        #2C312D;
  --sb-fondo-suave:  rgba(236,231,220,.06);
  --sb-acento:       #7FB08D;
  --sb-acento-tenue: rgba(127,176,141,.14);
  --sb-aviso:        #DDA765;
  --sb-aviso-tenue:  rgba(221,167,101,.14);
  --sb-rocio: #7FB6D4;
  --sb-javi:  #E0A06A;
  --sb-lucia: #B79BDC;
  --sb-alma:  #6FC7BB;
  --sb-sombra:      0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.30);
  --sb-sombra-alta: 0 2px 4px rgba(0,0,0,.40), 0 18px 44px rgba(0,0,0,.38);
}

/* Quien pide menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
  :root { --sb-t-rapida: 0s; --sb-t: 0s; --sb-t-lenta: 0s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Transiciones entre pantallas (F4 de vanguardia, 31/08/2026)
   ───────────────────────────────────────────────────────────────────────
   Cada navegación era un parpadeo en blanco. Con @view-transition, el
   navegador funde una página con la siguiente — CSS puro, entre
   documentos, soportado en iOS desde Safari 18.2 y en Chrome 126.
   Mejora progresiva de libro: donde no hay soporte no pasa nada, y a
   quien pide menos movimiento se le apagan las animaciones (la
   navegación instantánea de siempre). Vive aquí, en los tokens, porque
   la transición necesita declararse en las DOS puntas del viaje y esta
   hoja está en todas las pantallas. */
@view-transition { navigation: auto; }
@keyframes sb-vt-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes sb-vt-sale  { to   { opacity: 0; } }
::view-transition-old(root) { animation: sb-vt-sale .16s var(--sb-ease) both; }
::view-transition-new(root) { animation: sb-vt-entra .22s var(--sb-ease) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Tipografía fina, gratis ─────────────────────────────────────────
   balance para que ningún titular deje una palabra viuda; pretty para
   el cuerpo. Los navegadores sin soporte lo ignoran sin ruido. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ── EL TAMAÑO DE LETRA DE CADA UNO (01/09/2026) ─────────────────────
   Tres tamaños, elegidos en Ajustes → Mis llaves y guardados en
   `miembros.texto`. Los aplica assets/js/tema.js poniendo `data-texto`
   en <html> antes de que se pinte el cuerpo.

   Lo pidió quien estrenó la casa —«la letra es pequeña para mí; en el
   Aula hay tres tamaños»— y es accesibilidad, no gusto: una casa que se
   lee mal no se usa.

   ── ESCALA LA LETRA, NO LA PANTALLA ──
   La primera versión de esto usaba `zoom` sobre la raíz. Funcionaba, y
   era mala: `zoom` agranda TODO —bordes, huecos, iconos, la barra de
   abajo— igual que ampliar con los dedos. Eso no es lo que hace un
   sistema operativo cuando subes el cuerpo de letra, y se nota: la
   pantalla se queda pequeña en vez de leerse mejor.

   Ahora escala SÓLO el texto. Las 1.600 declaraciones de `font-size` de
   la casa están escritas como
       font-size: calc(15.5px * var(--sb-tx, 1))
   y aquí sólo se cambia el multiplicador. Sin variable puesta vale 1 y
   el resultado es exactamente el píxel de siempre: por eso se pudo
   hacer sobre las veintisiete pantallas de producción sin miedo.

   Los huecos, los bordes y los iconos no se mueven, así que el texto
   crece DENTRO de la casa en vez de empujarla — que es justo lo que
   hace un sistema operativo. Las alturas de línea de Sabai son sin
   unidad, así que acompañan solas.

   Los saltos son 1,15 y 1,30. Se han mirado con ojos, pantalla a
   pantalla y en un móvil de 375 px, en los tres tamaños.
   ═══════════════════════════════════════════════════════════════════ */
:root[data-texto="grande"] { --sb-tx: 1.15; }
:root[data-texto="enorme"] { --sb-tx: 1.30; }

/* La pantalla de la cocina se queda fuera SOLA, y conviene saber por
   qué: `/panel/` no carga `tema.js` (lo dice su cabecera: va siempre en
   claro, por decisión propia), así que nunca recibe `data-texto`. Se
   mira a tres metros y tiene su tamaño pensado para eso; que la
   elección personal de quien pasó por delante le cambiara la letra a la
   casa entera sería lo contrario de un panel. */