/* El estilo de Apus Dinámica, aprobado por Jose el 2026-11-07 (docs/estilo.md). TODO color, letra e imagen vive aquí:
   los demás CSS solo usan estas variables. Para cambiar el aspecto se cambia este archivo; para poner arte dibujado,
   se deja la imagen en web/arte/ y se cambia su variable --img-… (y sus cortes), sin tocar nada más. */

/* Baloo 2 (licencia OFL, web/fuentes/OFL.txt). Va dentro del juego porque la política de contenido no deja
   cargar letras de otros sitios, y así funciona aunque la red del estudio no tenga internet. */
@font-face {
  font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/web/fuentes/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/web/fuentes/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- los valores elegidos por Jose (la prueba test_estilo.py los compara con docs/estilo.md) ---- */
  --fondo: #fffaf0;
  --tarjeta: #ffb22e;
  --texto: #000000;
  --suave: #5a3d12;
  --acento: #57beff;
  --sobre-acento: #020923;
  --festivo: #00054d;
  --peligro: #000000;
  --borde: #db9928;
  --borde-fuerte: #b37d20;
  --radio: 14px;
  --radio-boton: 999px;
  --sombra: 0 18px 36px -12px #14233d40;
  --fuente: "Baloo 2", system-ui, sans-serif;
  --base: 18px;
  --peso: 700;
  --mayus: none;
  --tracking: -0.01em;

  /* ---- derivados, para que todo se lea (docs/estilo.md, «Derivados») ---- */
  --texto-acento: #00054d;        /* links y textos de acción: el celeste sobre crema casi no se lee */
  --foco: #00054d;                /* el contorno del teclado tiene que verse sobre crema y naranja */
  --sobre-peligro: #ffffff;       /* la letra sobre el negro de peligro (el globito) */
  --qr-fondo: #ffffff;            /* el QR del doble paso necesita fondo blanco para que el celular lo lea */
  --fuente-codigo: ui-monospace, Consolas, monospace;
  --sombra-panel: -12px 0 32px -8px #14233d40;
  --textura-fondo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* ---- el arte real: un espacio por superficie. none = se ve el color de arriba ----
     --img-X        la imagen (url("/web/arte/tarjeta.png"))
     --corte-X      los 9 cortes, en píxeles de la imagen: arriba derecha abajo izquierda (ej.: 24 32 24 32)
     --ancho-arte-X cuánto ocupa cada borde dibujado en pantalla (ej.: 18px). auto = el tamaño de los cortes
     El texto nunca va dentro del dibujo: sigue siendo texto encima. */
  --img-fondo: none;
  --img-tarjeta: none;            --corte-tarjeta: 0;            --ancho-arte-tarjeta: auto;
  --img-barra: none;              --corte-barra: 0;              --ancho-arte-barra: auto;
  --img-panel: none;              --corte-panel: 0;              --ancho-arte-panel: auto;
  --img-boton: none;              --corte-boton: 0;              --ancho-arte-boton: auto;
  --img-boton-secundario: none;   --corte-boton-secundario: 0;   --ancho-arte-boton-secundario: auto;
  --img-boton-peligro: none;      --corte-boton-peligro: 0;      --ancho-arte-boton-peligro: auto;
  --img-campo: none;              --corte-campo: 0;              --ancho-arte-campo: auto;
  --img-globo: none;              --corte-globo: 0;              --ancho-arte-globo: auto;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--texto);
  background-color: var(--fondo);
  background-image: var(--img-fondo), var(--textura-fondo);
  background-size: cover, 160px 160px; background-attachment: fixed, scroll;
  font-family: var(--fuente); font-size: var(--base); line-height: 1.5;
}
h1, h2, h3 { font-weight: var(--peso); text-transform: var(--mayus); letter-spacing: var(--tracking); line-height: 1.15; text-wrap: balance; }
.caja { max-width: 440px; margin: 0 auto; padding: 40px 16px; }
h1 { margin: 0 0 8px; font-size: 1.9rem; }
p { color: var(--suave); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }