/* ═════════════════════════════════════════════════════════════════════════════
   TINTA Y CENIZA · tokens
   Lo único que define colores, letras, medidas, curvas y pinceles. Las pantallas
   NO escriben hex: usan estas variables. Si falta algo, se añade aquí.
   ═════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Le Mano'; src: url(fonts/LeMano-sub.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Elden'; src: url(fonts/EldenFontOld-sub.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Arcuata'; src: url(fonts/Arcuata-sub.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Spectral'; src: url(fonts/spectral-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url(fonts/spectral-400i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* ── Ambiente fijo ─────────────────────────────────────────── */
  --noche: #0d0c0b;            /* fondo de la app */
  --hollin: #15120f;           /* materia de paneles y ventanas */
  --panel-denso: rgb(21 18 15 / .92);/* panel grande sobre el arte, sin desenfoque de fondo */
  --panel: rgb(21 18 15 / .86);/* panel sobre el arte */
  --panel-solido: #15120f;
  --panel-alto: #1c1814;       /* tooltip, menú elegido */
  --hueso: #e6dccb;            /* lectura · 14,4:1 sobre la noche */
  --hueso-tinta: #d9cab5;      /* tinta clara: rama, tira, bordes de rombo · 12,4:1 */
  --tinta-letra: #1f1814;      /* letra sobre tinta clara · 10,9:1 sobre hueso-tinta */
  --tinta-oscura: rgb(36 29 24 / .92); /* mancha secundaria */
  --ceniza: #a29886;           /* secundario · 6,9:1 */
  --ceniza-2: #8f8679;         /* metadatos · 5,5:1 */
  --filete: rgb(230 220 203 / .13);
  --filete-2: rgb(230 220 203 / .26);
  --filete-3: rgb(230 220 203 / .4);
  --acero: #87a0b5;            /* el frío: solo el canto superior de paneles */
  --sangre: #9e3530;           /* tinta de peligro (letra hueso 5,9:1) */
  --sangre-letra: #e8716a;     /* texto de peligro · 6,5:1 */
  --vida: #b8473f;             /* barra de PV, siempre con el número al lado */
  --ascua: #e9b67a;            /* chispas del ambiente: nunca interfaz */

  /* ── El acento: SOLO lo que responde. Crema por defecto (la portada) ── */
  --acento: #e0d8ae;           /* crema · 13,6:1 sobre la noche */
  --acento-letra: #15120f;     /* letra sobre la mancha de acento · 13,0:1 en crema */

  /* ── Pinceles (máscaras: un archivo sirve para cualquier color) ── */
  --p-mancha: url(pinceles/mancha-boton.webp);
  --p-mancha-seca: url(pinceles/mancha-boton-seca.webp);
  --p-mancha-ancha: url(pinceles/mancha-ancha.webp);
  --p-mancha-corta: url(pinceles/mancha-corta.webp);
  --p-mancha-raya: url(pinceles/mancha-raya.webp);
  --p-mancha-fila: url(pinceles/mancha-fila.webp);
  --p-sub-grueso: url(pinceles/subrayado-grueso.webp);
  --p-sub-medio: url(pinceles/subrayado-medio.webp);
  --p-sub-firme: url(pinceles/subrayado-firme.webp);
  --p-sub-pluma: url(pinceles/subrayado-pluma.webp);
  --p-sub-corto: url(pinceles/subrayado-corto.webp);
  --p-sub-recto: url(pinceles/subrayado-corto-recto.webp);
  --p-sub-hilo: url(pinceles/subrayado-hilo.webp);
  --p-sub-fino: url(pinceles/subrayado-fino.webp);
  --p-enso-cerrado: url(pinceles/enso-cerrado.webp);
  --p-enso-abierto: url(pinceles/enso-abierto.webp);
  --p-enso-fino: url(pinceles/enso-fino.webp);
  --p-enso-cola: url(pinceles/enso-fino-cola.webp);
  --p-enso-grueso: url(pinceles/enso-grueso-abierto.webp);
  --p-enso-seco: url(pinceles/enso-seco.webp);
  --p-salpicadura: url(pinceles/salpicadura-redonda.webp);
  --p-salpicadura-grande: url(pinceles/salpicadura-grande.webp);
  --p-gota: url(pinceles/gota-llena.webp);
  --p-gota-rota: url(pinceles/gota-rota.webp);
  --p-rama: url(pinceles/rama-vertical.webp);
  --p-curva: url(pinceles/curva-rama.webp);
  --p-separador: url(pinceles/separador-vertical.webp);
  --p-diagonal: url(pinceles/trazo-diagonal.webp);
  --p-tachon: url(pinceles/tachon-lineas.webp);
  --p-zigzag: url(pinceles/garabato-zigzag.webp);
  --p-marco: url(pinceles/marco-ventana.webp);
  --p-grano: url(pinceles/grano.webp);

  /* ── Movimiento (manda ../MOVIMIENTO.md; T.mov los lee de aquí) ── */
  --c-tinta: cubic-bezier(.22, 1, .36, 1);   /* llega y se asienta: entradas, revelados, contadores */
  --c-pincel: cubic-bezier(.7, 0, .2, 1);    /* trazos que cruzan: barrido, tinta que se retira, minimizar */
  --c-toque: cubic-bezier(.2, .8, .2, 1);    /* pulsación, hover, movimiento corto */
  --c-sello: cubic-bezier(.3, 1.18, .5, 1);  /* lo que sella, con un rebote mínimo */
  --c-sale: cubic-bezier(.4, 0, .9, .6);     /* salidas (≤ 160 ms) */
  --c-muelle: linear(0, 0.041, 0.139, 0.264, 0.397, 0.524, 0.639, 0.737, 0.817, 0.88, 0.929, 0.964, 0.988, 1.004, 1.013, 1.018, 1.02, 1.019, 1.018, 1.015, 1.013, 1.01, 1.008, 1.006, 1);  /* hoja inferior; siempre con --t-muelle */
  --t-instante: 80ms;          /* hundirse al pulsar */
  --t-toque: 140ms;
  --t-sale: 150ms;             /* toda salida */
  --t-base: 220ms;
  --t-trazo: 380ms;
  --t-escena: 400ms;
  --t-muelle: 480ms;
  --t-paso: 50ms;              /* escalón entre bloques (máx. 5) */
  --t-paso-fila: 30ms;         /* escalón entre filas (máx. 8) */
  --t-umbral: 200ms;           /* espera antes de enseñar un esqueleto */
  --t-minimo: 400ms;           /* permanencia mínima de un esqueleto ya visible */
  --t-umbral-arranque: 300ms;  /* espera antes de enseñar la pantalla de carga */
  --t-minimo-arranque: 600ms;  /* permanencia mínima de la pantalla de carga ya visible */
  --t-tip: 350ms; --t-tip-gracia: 500ms;
  --t-fantasma: 450ms;         /* lo que el fantasma de los PV espera antes de bajar */
  --t-casilla: 90ms; --t-ruta-max: 700ms;   /* token por su ruta */
  --enso-inicio: 316;          /* grados (0 = arriba, horario) donde empieza el trazo de enso-cerrado.webp */
  --esq: rgb(230 220 203 / .07);            /* tinta tenue de los esqueletos */
  --esq-mapa: #08080a;                      /* fondo del esqueleto del mapa */

  /* ── Medidas ────────────────────────────────────────────────── */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --gutter: clamp(16px, 3vw, 40px);
  --cab: 72px;                 /* cabecera */
  --pulgar: 0px;               /* alto de la barra del pulgar (lo pone el núcleo por debajo de 900) */
  --toque: 40px;               /* objetivo mínimo con ratón */
  --radio: 2px;
  /* Listas laterales (raíl de campaña, salas de la taberna, índice de ajustes): la misma letra, alto e icono */
  --lista-letra: 1.06rem;
  --lista-alto: 46px;
  --lista-icono: 1.25rem;
  --talla-s: 360px; --talla-m: 560px; --talla-l: 880px;  /* ventanas y hojas: solo estas */

  /* ── Capas (nombres, nunca números sueltos en las pantallas) ── */
  --z-telon: 0; --z-ceniza: 1; --z-contenido: 2;
  --z-mapa-hud: 9; --z-mapa-chrome: 12; --z-app-chrome: 30; --z-cajon: 35;
  --z-ventana: 40; --z-scrim: 50; --z-modal: 52; --z-popover: 60; --z-paleta: 70;
  --z-toast: 75; --z-barrido: 80; --z-tooltip: 90; --z-arranque: 100;

  color-scheme: dark;
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --c-muelle: var(--c-tinta); } }
@media (pointer: coarse) { :root { --toque: 44px; } }
@media (max-width: 899px) { :root { --cab: 60px; } }

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; font-size: var(--escala-texto, 100%); }
body {
  margin: 0; min-height: 100dvh; background: var(--noche); color: var(--hueso);
  font: 400 1rem/1.55 'Spectral', Georgia, 'Times New Roman', serif; font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
kbd { font: .75rem/1 'Arcuata', serif; font-feature-settings: 'tnum', 'lnum'; color: var(--ceniza);
  padding: .28em .45em .22em; border: 1px solid var(--filete-2); border-radius: 3px; letter-spacing: .02em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: 'Arcuata', serif; font-feature-settings: 'tnum', 'lnum'; }
.i { width: 1.4rem; height: 1.4rem; flex: none; }
[hidden] { display: none !important; }

/* Foco: doble anillo, noche por dentro y acento por fuera. Estático. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; box-shadow: 0 0 0 2px var(--noche); border-radius: var(--radio); }
[tabindex='-1']:focus { outline: none; box-shadow: none; }