/* ════════════════════════════════════════════════════════════════════════
   TEMAS + PIEL DE TABLERO — gambito, 25-ago-2026
   ────────────────────────────────────────────────────────────────────────
   POR QUÉ ESTE ARCHIVO EXISTE Y NO SE METIÓ EN EL <style> DE index.html:
   el <style> tiene 1.400 líneas escritas contra el lenguaje viejo (documento
   blanco, borde de 1px, sin sombra). Esto es la PIEL: se carga después y
   redefine los mismos tokens que aquél ya usa, así las 85 secciones cambian
   sin tocar 85 lugares. Si algo se ve mal, se quita el <link> y todo vuelve
   exactamente a como estaba — por eso va aparte.

   REFERENCIA: las 8 capturas de @codez_dev que él juntó en «fotos de como
   quisiera que se viera» (archivadas con `visto`, ref1-ref8). Lo que tienen
   en común, y es lo que se copia:
     · fondo de página GRIS, tarjetas BLANCAS elevadas con sombra suave
     · radio grande (16px la tarjeta, 999px las pastillas)
     · el número manda: grande, tabular, y el rótulo chico ARRIBA de él
     · el delta va en CHIP de color pegado al número, nunca en prosa
     · UNA tarjeta de acento sólido por fila, el resto blancas
     · gráficos embebidos sin ejes ni leyenda cuando son de apoyo
   Y la otra mitad del pedido: el tema se ESCOGE. Cada bloque [data-tema]
   redefine sólo colores; la estructura es la misma. Eso es exactamente lo que
   muestran ref1 (azul) y ref2 (verde): la misma pantalla, otro color.

   CONTRASTE: todo par texto/fondo de acá se midió con `bin/contraste.mjs`
   contra WCAG 2.2 AA (4,5:1 para texto normal). No se cambia un color sin
   volver a medirlo — el 15-ago ya pasó que 11 textos quedaron por debajo.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── TEMA 1 · AZUL (el de arranque) — ref1 «Youcare» ─────────────────── */
:root{
  --lienzo:#eef1f6;          /* el gris de la página, detrás de las tarjetas */
  --fondo:#ffffff; --tarjeta:#ffffff; --sup:#f7f9fc; --sup2:#eef2f7;
  --borde:#e4e9f0; --borde2:#cfd7e2;
  --texto:#0f172a; --tenue:#55617a; --tenue2:#5f6a84;
  --acento:#2563eb; --acento-suave:#eff5ff; --acento-borde:#c3d9fd;
  --acento-txt:#ffffff;      /* texto encima del acento sólido */
  --bien:#157d3c; --bien-suave:#f0fdf4; --bien-borde:#bbf7d0;
  --mal:#b91c1c;  --mal-suave:#fef2f2;  --mal-borde:#fecaca;
  --ojo:#b05109;  --ojo-suave:#fffbeb;  --ojo-borde:#fde68a;
  --radio:16px; --radio-chico:10px; --radio-grande:22px;
  --sombra:0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.05);
  --sombra-alta:0 2px 4px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.10);
}

/* ─── TEMA 2 · VERDE — ref2 «Quixotic» ───────────────────────────────── */
:root[data-tema="verde"]{
  --lienzo:#eef2ee;
  --fondo:#ffffff; --tarjeta:#ffffff; --sup:#f5faf6; --sup2:#eaf3ec;
  --borde:#e2ebe4; --borde2:#c9d8cd;
  --texto:#12211a; --tenue:#4d6055; --tenue2:#5b6f63;
  --acento:#1a7f45; --acento-suave:#effaf2; --acento-borde:#bfe6cd;
  --acento-txt:#ffffff;
  --bien:#157d3c; --bien-suave:#f0fdf4; --bien-borde:#bbf7d0;
  --mal:#b3261e;  --mal-suave:#fdf1f0;  --mal-borde:#f5c9c5;
  --ojo:#96590a;  --ojo-suave:#fdf8ec;  --ojo-borde:#f0dcae;
}

/* ─── TEMA 3 · NEUTRO — ref3 «Skillset» ──────────────────────────────── */
:root[data-tema="neutro"]{
  --lienzo:#ebebeb;
  --fondo:#ffffff; --tarjeta:#ffffff; --sup:#f7f7f7; --sup2:#efefef;
  --borde:#e4e4e4; --borde2:#cfcfcf;
  --texto:#111111; --tenue:#585858; --tenue2:#666666;
  --acento:#1c1c1c; --acento-suave:#f2f2f2; --acento-borde:#d6d6d6;
  --acento-txt:#ffffff;
  --bien:#157d3c; --bien-suave:#f1f8f3; --bien-borde:#c4e3ce;
  --mal:#b3261e;  --mal-suave:#fbf0ef;  --mal-borde:#eec7c4;
  --ojo:#8a5a00;  --ojo-suave:#fbf6ea;  --ojo-borde:#e8d6a8;
}

/* ─── TEMA 4 · VIOLETA — ref6 «FINNOVA» ──────────────────────────────── */
:root[data-tema="violeta"]{
  --lienzo:#eeeef8;
  --fondo:#ffffff; --tarjeta:#ffffff; --sup:#f7f7fd; --sup2:#eeeefa;
  --borde:#e6e6f2; --borde2:#d0d0e4;
  --texto:#171734; --tenue:#575780; --tenue2:#65658c;
  --acento:#4f46e5; --acento-suave:#f0f0ff; --acento-borde:#c9c7f7;
  --acento-txt:#ffffff;
  --bien:#157d3c; --bien-suave:#f0fdf4; --bien-borde:#bbf7d0;
  --mal:#b91c1c;  --mal-suave:#fef2f2;  --mal-borde:#fecaca;
  --ojo:#b05109;  --ojo-suave:#fffbeb;  --ojo-borde:#fde68a;
}

/* ─── TEMA 5 · AGUA — ref5 «Ultraleads» (marino + cian) ──────────────── */
:root[data-tema="agua"]{
  --lienzo:#e9eef4;
  --fondo:#ffffff; --tarjeta:#ffffff; --sup:#f4f9fc; --sup2:#e8f2f8;
  --borde:#dfe9f0; --borde2:#c5d5e0;
  --texto:#0c2233; --tenue:#4c6274; --tenue2:#586d7f;
  --acento:#0e4d75; --acento-suave:#eaf4fa; --acento-borde:#b6d8ea;
  --acento-txt:#ffffff;
  --bien:#0f766e; --bien-suave:#effaf8; --bien-borde:#b5e3dd;
  --mal:#b3261e;  --mal-suave:#fdf1f0;  --mal-borde:#f5c9c5;
  --ojo:#96590a;  --ojo-suave:#fdf8ec;  --ojo-borde:#f0dcae;
}

/* ─── TEMA 6 · CREMA — ref8 «Aurex Living» ───────────────────────────── */
:root[data-tema="crema"]{
  --lienzo:#eae6df;
  --fondo:#ffffff; --tarjeta:#fffdfa; --sup:#faf7f2; --sup2:#f2ede4;
  --borde:#e8e1d6; --borde2:#d3c9b9;
  --texto:#1c1814; --tenue:#5c5347; --tenue2:#6b6152;
  --acento:#1c1814; --acento-suave:#f6f1e8; --acento-borde:#ddd2c0;
  --acento-txt:#ffffff;
  --bien:#3f6d34; --bien-suave:#f2f7ef; --bien-borde:#cbdfc2;
  --mal:#9c3a1c;  --mal-suave:#fbf1ec;  --mal-borde:#eecdbd;
  --ojo:#8a5a00;  --ojo-suave:#fbf5e9;  --ojo-borde:#e8d5a6;
}

/* ─── TEMA 7 · CARBÓN — ref4 (oscuro con lima) ───────────────────────── */
/* ⚠️ Los dos temas oscuros son OPCIÓN, nunca el de arranque: está anotado en
   la memoria que no los quiere de default. Están porque DOS de las ocho fotos
   que él eligió son oscuras (ref4 y ref7) — así que se ofrecen, y se escogen. */
:root[data-tema="carbon"]{
  --lienzo:#101310;
  --fondo:#181c18; --tarjeta:#1e231e; --sup:#242a24; --sup2:#2b322b;
  --borde:#2f372f; --borde2:#3d473d;
  --texto:#eef3ea; --tenue:#a8b3a3; --tenue2:#93a08e;
  --acento:#b6f03c; --acento-suave:#232c18; --acento-borde:#3f5220;
  --acento-txt:#14180f;      /* sobre lima va tinta oscura, no blanco */
  --bien:#7ede9b; --bien-suave:#18291d; --bien-borde:#2d4a36;
  --mal:#ff9b8f;  --mal-suave:#2c1a18;  --mal-borde:#4d2b27;
  --ojo:#f5c86a;  --ojo-suave:#2b2415;  --ojo-borde:#4b3d1f;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  --sombra-alta:0 2px 6px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);
}

/* ─── TEMA 8 · NOCHE — ref7 «Helios» (oscuro malva) ──────────────────── */
:root[data-tema="noche"]{
  --lienzo:#0d0a10;
  --fondo:#15111a; --tarjeta:#1c1723; --sup:#231d2b; --sup2:#2a2333;
  --borde:#2f2738; --borde2:#403550;
  --texto:#f2ecf6; --tenue:#b0a3bb; --tenue2:#9e90ab;
  --acento:#e8b7e0; --acento-suave:#2a1f2c; --acento-borde:#4a3550;
  --acento-txt:#1a1220;
  --bien:#86e0a8; --bien-suave:#152618; --bien-borde:#2b4634;
  --mal:#ff9d9d;  --mal-suave:#2a1719;  --mal-borde:#4a292d;
  --ojo:#f3ca7c;  --ojo-suave:#2a2116;  --ojo-borde:#4a3a20;
  --sombra:0 1px 2px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.4);
  --sombra-alta:0 2px 6px rgba(0,0,0,.55), 0 14px 36px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════════════════
   PIEL — lo que convierte el documento en tablero.
   Sólo toca APARIENCIA (fondo, borde, sombra, radio, tamaño de número).
   Ni una regla de acá mueve la posición de nada ni esconde contenido.
   ══════════════════════════════════════════════════════════════════════ */

/* El cambio que más se nota de los ocho ejemplos: la página deja de ser
   blanca y pasa a ser gris, para que la tarjeta blanca se despegue. Sin esto,
   una tarjeta blanca sobre fondo blanco necesita un borde para existir — y ese
   borde es justo lo que hace que se vea a documento. */
body{background:var(--lienzo)}

.tarjeta{
  background:var(--tarjeta);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:18px 20px;
}

/* La barra de cifras de arriba era una tira de rótulos y números del mismo
   tamaño (medido en la captura del 25-ago: todos ~13px). Pasa a ser la fila de
   KPIs de ref1/ref3/ref5: rótulo chico arriba, número grande abajo. */
.barra{
  background:var(--tarjeta);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:14px 16px;
}
.barra .dato span{
  display:block;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tenue2); font-weight:600; margin-bottom:3px;
}
.barra .dato b{
  font-size:20px; font-weight:650; letter-spacing:-.02em;
  font-variant-numeric:proportional-nums; line-height:1.15;
}

/* Pastillas: los pasos del juego y el índice de secciones. En las ocho fotos
   NO hay una sola pestaña cuadrada — todas son pastillas, y la activa va
   rellena de color sólido con el texto invertido. */
.paso, .indice .ie, .fichbar .ie{
  border-radius:999px;
  transition:background .12s ease, color .12s ease, box-shadow .12s ease;
}
.paso.on, .indice .ie.on, .fichbar .ie.on{
  background:var(--acento); color:var(--acento-txt); border-color:var(--acento);
  box-shadow:0 2px 8px color-mix(in srgb, var(--acento) 30%, transparent);
}
.paso.on b, .indice .ie.on b, .fichbar .ie.on b{color:var(--acento-txt)}

button{border-radius:999px}
input,select,textarea{border-radius:var(--radio-chico)}

/* Chips de estado y de variación: ya existían como `.ch`; sólo se redondean
   del todo y se les da cuerpo, que es como se ven en las referencias. */
.ch{border-radius:999px; padding:2px 9px; font-weight:600}

/* Las cifras del informe (`.inf_cif`) son KPIs escritos como tabla. Mismo
   tratamiento que la barra: rótulo arriba chico, número grande abajo. */
.inf_cif>div{
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--radio-chico);
  padding:12px 14px;
}
.inf_cif span{
  display:block;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tenue2); font-weight:600; margin-bottom:4px;
}
.inf_cif b{
  font-size:22px; font-weight:650; letter-spacing:-.02em;
  font-variant-numeric:proportional-nums; line-height:1.15;
}

.nota, .ver{border-radius:var(--radio-chico)}
.est, .inf, .ficha, .item{border-radius:var(--radio)}

/* ══════════════════════════════════════════════════════════════════════
   PIEZAS NUEVAS (prefijo dk-, de «dashboard kit»).
   El prefijo no es capricho: `.rot`, `.barra`, `.et` y `.num` YA existen en
   el <style> viejo con otro significado. Sin prefijo, cada pieza nueva
   rompería una vieja en alguna de las 85 secciones.
   ══════════════════════════════════════════════════════════════════════ */

/* Fila de KPIs: se adapta sola al ancho. `auto-fit` con mínimo de 190px
   quiere decir que en pantalla ancha entran 5 y en angosta bajan a 2, sin
   media queries y sin que nadie decida el número a mano. */
.dk-fila{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); margin:12px 0}

.dk-kpi{
  background:var(--tarjeta); border:1px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra);
  padding:16px 18px; display:flex; flex-direction:column; gap:6px; min-width:0;
}
/* La tarjeta destacada de cada fila — en ref1, ref3, ref5 y ref6 hay
   exactamente UNA por fila, y es la que contesta la pregunta de la pantalla. */
.dk-kpi.dk-on{background:var(--acento); border-color:var(--acento); color:var(--acento-txt)}
.dk-kpi.dk-on .dk-rot, .dk-kpi.dk-on .dk-pie{color:color-mix(in srgb, var(--acento-txt) 78%, transparent)}

.dk-rot{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue2); font-weight:600}
/* Sin `tabular-nums` en las cifras grandes: los dígitos de ancho fijo hacen
   que un «121» se vea suelto y desarmado a tamaño de titular. El ancho fijo
   se usa donde los números se apilan en columna —tablas y marcas de eje—, que
   es para lo que sirve. */
.dk-num{font-size:26px; font-weight:650; letter-spacing:-.025em; font-variant-numeric:proportional-nums; line-height:1.1}
.dk-num.dk-xl{font-size:34px}
.dk-num .dk-dec{font-size:.62em; color:var(--tenue); font-weight:600}   /* los centavos, atenuados — ref2 */
.dk-pie{font-size:11.5px; color:var(--tenue)}

/* ── LA ALARMA DE CAJA ────────────────────────────────────────────────────────
   No es una nota de texto: es una fila de KPIs con marco de peligro. El marco
   hace el trabajo que antes hacía la palabra «Aviso»: se ve antes de leer.
   Nace del aviso de caja, que era un párrafo de 98 palabras repetido en las
   seis pantallas del paso 2 (medido 5-sep-2026). */
.dk-alarma{border:1px solid var(--mal-borde); background:var(--mal-suave);
  border-left:4px solid var(--mal); border-radius:var(--radio); padding:12px 14px 4px; margin:12px 0}
.dk-alarma-t{color:var(--mal); font-size:var(--t2); font-weight:700;
  display:flex; align-items:center; gap:7px; line-height:1.3}
.dk-alarma-t svg{flex:0 0 auto}
.dk-alarma .dk-fila{margin:10px 0 0}
.dk-alarma details.pq{margin:2px 0 8px}
/* La cifra que contesta la pregunta, en rojo lleno: es la que hay que mirar
   primero y no puede competir de igual a igual con las otras tres. */
.dk-kpi.dk-mal-on{background:var(--mal); border-color:var(--mal); color:#fff}
.dk-kpi.dk-mal-on .dk-rot, .dk-kpi.dk-mal-on .dk-pie{color:color-mix(in srgb, #fff 80%, transparent)}
.dk-kpi.dk-mal-on .dk-num .dk-dec{color:color-mix(in srgb, #fff 75%, transparent)}
.dk-kpi.dk-mal-on .dk-barra{background:color-mix(in srgb, #fff 28%, transparent)}
.dk-kpi.dk-mal-on .dk-barra>i{background:#fff}
.dk-kpi.dk-mal-on .dk-marca{background:#fff; opacity:.9}
.dk-kpi.dk-mal-on svg{stroke:currentColor}

/* El delta: chip pegado al número, verde si sube y rojo si baja. Esto es lo
   que reemplaza la frase «$4.836 mil más que en 2031» por algo que se lee sin
   leer. La frase no se borra: baja al «ver más». */
.dk-delta{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11.5px; font-weight:650; padding:2px 8px; border-radius:999px;
  font-variant-numeric:tabular-nums; vertical-align:middle;
}
.dk-delta.dk-sube{background:var(--bien-suave); color:var(--bien); border:1px solid var(--bien-borde)}
.dk-delta.dk-baja{background:var(--mal-suave); color:var(--mal); border:1px solid var(--mal-borde)}
.dk-delta.dk-igual{background:var(--sup2); color:var(--tenue); border:1px solid var(--borde)}

/* Barra de avance con su marca de referencia. La marca importa más que la
   barra: la regla del proyecto es que ninguna cifra se muestra sin la
   referencia externa al lado, y acá esa referencia es una rayita en el punto
   donde está el sector real. */
.dk-barra{position:relative; height:8px; border-radius:999px; background:var(--sup2); overflow:hidden; margin-top:6px}
.dk-barra>i{display:block; height:100%; border-radius:999px; background:var(--acento)}
.dk-barra.dk-sube>i{background:var(--bien)}
.dk-barra.dk-baja>i{background:var(--mal)}
.dk-marca{position:absolute; top:-3px; width:2px; height:14px; background:var(--texto); opacity:.55; border-radius:1px}

/* Mini-gráfico embebido, sin ejes ni leyenda — ref8. Es forma, no lectura:
   dice «viene subiendo», y el número exacto ya está arriba en grande. */
.dk-spark{display:block; width:100%; height:34px; overflow:visible}
.dk-spark .dk-linea{fill:none; stroke:var(--acento); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.dk-spark .dk-area{fill:var(--acento); opacity:.10}
.dk-spark .dk-punto{fill:var(--acento)}

/* Anillo de porcentaje — ref3 «Community growth 65%». */
.dk-anillo{display:inline-grid; place-items:center; position:relative; width:74px; height:74px}
.dk-anillo svg{transform:rotate(-90deg); width:74px; height:74px}
.dk-anillo .dk-pista{fill:none; stroke:var(--sup2); stroke-width:8}
.dk-anillo .dk-arco{fill:none; stroke:var(--acento); stroke-width:8; stroke-linecap:round}
.dk-anillo .dk-centro{position:absolute; font-size:15px; font-weight:650; font-variant-numeric:tabular-nums}

/* Selector de tema. Va en la barra de arriba, a la derecha. */
.dk-temas{display:inline-flex; align-items:center; gap:7px; vertical-align:middle}
.dk-temas button{
  position:relative;
  width:17px; height:17px; padding:0; border-radius:999px; cursor:pointer;
  border:2px solid var(--borde2); background:var(--dk-muestra,#ccc);
  transition:transform .1s ease, border-color .1s ease;
}
/* EL BLANCO DE CLIC ES 24x24 AUNQUE EL PUNTO SE VEA DE 17. WCAG 2.2, criterio
   2.5.8 «Tamano del objetivo (minimo)»: ningun control puede medir menos de 24
   CSS px por lado, porque abajo de eso el dedo y el raton fallan y hay que
   volver a apuntar. Medido el 26-ago: estos botones median 17x17.
   No se agranda el circulo de color —quedaria pesado al lado del titulo— sino
   que se le cuelga un area transparente centrada de 24x24 con `::after`, que es
   la que recibe el clic. Y el `gap` sube de 5 a 7 px para que las areas de dos
   botones vecinos queden pegadas y NO superpuestas: 17 + 7 = 24, justo. La
   norma pide las dos cosas, tamano y separacion. */
.dk-temas button::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:24px; height:24px; border-radius:999px;
}
.dk-temas button:hover{transform:scale(1.18)}
.dk-temas button[aria-pressed="true"]{border-color:var(--texto); transform:scale(1.18)}

/* ══════════════════════════════════════════════════════════════════════
   LA PANTALLA «DECIDIR» TAMBIÉN OBEDECE AL TEMA.
   `#tab` (la pantalla con la que se opera el año) trae su propia paleta
   colgada del id, con un azul fijo `#1f5f8b` que no se movía aunque se
   cambiara de tema — y con los dos temas oscuros quedaba como un bloque
   blanco en medio de la pantalla negra. Acá se la vuelve a atar al tema.

   POR QUÉ LOS ALIAS `--g-…`: adentro de `#tab` los nombres `--tenue`,
   `--acento`, `--bien`, `--mal`, `--ojo` y `--fondo` YA están redefinidos.
   Escribir ahí `--tenue: var(--tenue)` sería una variable que se apunta a sí
   misma, que en CSS es inválida y deja el valor vacío. Los alias se declaran
   una sola vez arriba, en `:root`, donde esos nombres todavía valen lo del
   tema: `var()` se resuelve donde se DECLARA, así que el alias ya viaja con
   el color resuelto y adentro de `#tab` se puede usar sin chocar. */
:root{
  --g-tenue:var(--tenue); --g-tenue2:var(--tenue2); --g-acento:var(--acento);
  --g-bien:var(--bien); --g-mal:var(--mal); --g-ojo:var(--ojo);
  --g-bienf:var(--bien-suave); --g-malf:var(--mal-suave); --g-ojof:var(--ojo-suave);
  --g-acento2:var(--acento-suave);
}
#tab{
  --fondo:var(--lienzo); --tarj:var(--tarjeta); --linea:var(--borde); --linea2:var(--sup2);
  --tinta:var(--texto); --tenue:var(--g-tenue); --suave:var(--g-tenue2);
  --acento:var(--g-acento); --acento2:var(--g-acento2);
  --bien:var(--g-bien); --bienf:var(--g-bienf);
  --ojo:var(--g-ojo);   --ojof:var(--g-ojof);
  --mal:var(--g-mal);   --malf:var(--g-malf);
  /* Los cuatro colores de serie de los gráficos: usted / hoy / previsto /
     rival. Se mantienen distinguibles entre sí en los ocho temas porque cada
     uno cuelga de un token distinto, no de tonos del mismo color. */
  --cli:var(--g-acento); --hoy:var(--g-tenue2); --pre:var(--g-bien); --riv:var(--g-ojo);
}

/* Blancos y grises escritos a mano que quedaban encendidos en los dos temas
   oscuros. Se listan uno por uno a propósito: un `*{background:…}` general
   apagaría también los fondos de color que sí tienen que verse. */
:root[data-tema="carbon"] .tarjeta,
:root[data-tema="noche"]  .tarjeta,
:root[data-tema="carbon"] .barra,
:root[data-tema="noche"]  .barra{background:var(--tarjeta)}
:root[data-tema="carbon"] header,
:root[data-tema="noche"]  header{background:var(--fondo)}
:root[data-tema="carbon"] body,
:root[data-tema="noche"]  body{color:var(--texto)}

/* ══════════════════════════════════════════════════════════════════════
   LOS HALLAZGOS DE CUALQUIER INFORME: la cifra se para sola.
   Un solo molde pinta los hallazgos de TODOS los informes del juego, así
   que este bloque no arregla una sección: arregla todas las que usan
   `.inf_h`, que es donde vive la prosa numerada que él señaló.
   ══════════════════════════════════════════════════════════════════════ */
.inf_h .hz{
  grid-template-columns:22px minmax(0,1fr) auto;   /* nº · texto · CIFRA */
  align-items:start; gap:12px; padding:14px 0;
}
.inf_h .nu{
  width:22px; height:22px; background:var(--acento-suave);
  color:var(--acento); border:1px solid var(--acento-borde); font-weight:700;
}
/* De texto corrido a cifra: 19px, tabular, con chip de color según el tono
   que el propio informe ya venía calculando (v = mejoró, r = empeoró,
   o = para mirar). El color no se inventa acá; ya estaba decidido. */
.inf_h .vale{
  display:inline-block; white-space:nowrap; text-align:right;
  font-size:19px; font-weight:650; letter-spacing:-.02em; line-height:1.2;
  padding:4px 11px; border-radius:999px; border:1px solid var(--borde);
  background:var(--sup); color:var(--texto);
}
.inf_h .vale.v{background:var(--bien-suave); color:var(--bien); border-color:var(--bien-borde)}
.inf_h .vale.r{background:var(--mal-suave);  color:var(--mal);  border-color:var(--mal-borde)}
.inf_h .vale.o{background:var(--ojo-suave);  color:var(--ojo);  border-color:var(--ojo-borde)}
/* En pantalla angosta la cifra se pone debajo del texto en vez de aplastarlo. */
@media(max-width:640px){
  .inf_h .hz{grid-template-columns:22px minmax(0,1fr)}
  .inf_h .vale{grid-column:2; justify-self:start; margin-top:6px}
}

/* ══════════════════════════════════════════════════════════════════════
   GRÁFICAS (`public/graficas.js`).
   Todo cuelga de los tokens del tema: una gráfica no trae ni un color
   propio, así que cambiar de tema las cambia a todas y no hay una paleta
   paralela que se desincronice.
   ══════════════════════════════════════════════════════════════════════ */
.gr{margin:0 0 6px}
.gr-cab{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.gr-cab b{font-size:13px; font-weight:650; letter-spacing:-.01em}
.gr-cab span{font-size:11.5px; color:var(--tenue)}
.gr-caja{width:100%}
.gr-caja svg{display:block; width:100%; height:auto; overflow:visible}
.gr-rej{stroke:var(--borde); stroke-width:1; shape-rendering:crispEdges}
.gr-eje{fill:var(--tenue2); font-size:10px; font-family:inherit; font-variant-numeric:tabular-nums}
.gr-der{text-anchor:end}
.gr-cen{text-anchor:middle}
/* El rótulo del extremo izquierdo del eje horizontal: arranca en su punto en
   vez de centrarse sobre él, para que no se salga por la izquierda. El del
   extremo derecho usa .gr-der, que ya existía para el eje vertical. */
.gr-ini{text-anchor:start}

.gr-ley{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px}
.gr-lg{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--tenue)}
.gr-lg i{width:9px; height:9px; border-radius:3px; flex:none}
.gr-lg b{color:var(--texto); font-variant-numeric:tabular-nums}

/* Filas con marca de referencia */
.gr-filas{display:flex; flex-direction:column; gap:7px}
.gr-fila, .gr-banda{display:grid; grid-template-columns:minmax(76px,132px) minmax(0,1fr) auto; gap:10px; align-items:center}
.gr-fnom{font-size:12px; color:var(--tenue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gr-fbar{position:relative; height:16px; background:var(--sup2); border-radius:999px; overflow:visible}
.gr-fbar>i{display:block; height:100%; border-radius:999px}
/* La marca de referencia: rayita vertical que cruza la barra. Va con el
   color del texto y no con un color propio para que se lea igual en los
   ocho temas, incluidos los dos oscuros. */
.gr-fbar>u{position:absolute; top:-3px; width:2px; height:22px; background:var(--texto); opacity:.6; border-radius:1px}
.gr-fval{font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
/* El segundo renglon de la cifra: el mismo dato en su unidad. Va debajo y mas
   chico porque el porcentaje es el que compara entre las cuatro barras y la
   unidad es la que dice cuanto hay que mover la perilla. */
.gr-fval{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15}
.gr-fval em{font-style:normal; font-size:11px; font-weight:500; color:var(--tenue)}
/* Fila que ADEMAS es el selector de esa variable. El cursor y el realce dicen
   que se puede tocar; sin eso la grafica parece un cuadro de solo mirar. */
.gr-fsel{cursor:pointer; border-radius:7px; padding:2px 4px; margin:-2px -4px}
.gr-fsel:hover{background:var(--sup2)}
.gr-fsel:focus-visible{outline:2px solid var(--acento); outline-offset:1px}
.gr-fon{background:var(--sup2); box-shadow:inset 0 0 0 1px var(--linea)}
.gr-fon .gr-fnom{color:var(--texto); font-weight:600}
.gr-nota{font-size:11.5px; color:var(--tenue); margin-top:8px; line-height:1.45}

/* ═══ H7 · LA BANDA SANA DEL SECTOR, DIBUJADA DETRÁS DE LA SERIE ═══════════
   Va como franja y no como dos rayas porque lo que hay que leer de un vistazo
   es SI LA LÍNEA ESTÁ ADENTRO, y para eso el ojo necesita un área. Los colores
   salen de `--bien`, que es la variable del tema: un verde clavado a mano se
   vería mal en cinco de los seis temas claros. La opacidad es baja a propósito
   —es fondo, no dato— y los bordes van punteados para que no se confundan con
   una serie más. El texto de abajo NO es decoración: sin él, la franja es un
   color, y un color no es un dato que se pueda copiar ni leer en voz alta. */
.gr-banda-sector{fill:var(--bien); opacity:.09}
.gr-banda-borde{stroke:var(--bien); stroke-width:1; stroke-dasharray:4 3; opacity:.5}
.gr-lg-banda{color:var(--bien)}
.gr-lg-banda b{color:var(--bien); font-weight:600}
.gr-lg-franja{width:14px !important; height:9px; border-radius:2px !important; background:color-mix(in srgb, var(--bien) 22%, transparent); box-shadow:inset 0 0 0 1px var(--bien)}
.gr-fila-banda td{color:var(--bien); font-weight:600; border-top:1px solid var(--bien-borde); background:var(--bien-suave)}
.gr-mini{display:inline-block; width:2px; height:10px; background:var(--texto); opacity:.6; vertical-align:-1px}

/* Dona */
.gr-dona{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.gr-danillo{position:relative; width:128px; height:128px; flex:none}
.gr-danillo svg{width:128px; height:128px; display:block}
.gr-dcen{position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1.15}
.gr-dcen b{display:block; font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.gr-dcen span{font-size:10px; color:var(--tenue2); text-transform:uppercase; letter-spacing:.06em}
.gr-dley{display:flex; flex-direction:column; gap:6px; min-width:0}

/* Estacionalidad */
.gr-meses{display:flex; align-items:flex-end; gap:4px; height:78px}
.gr-mes{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; gap:4px}
.gr-mes>i{display:block; width:100%; background:var(--acento); opacity:.30; border-radius:4px 4px 0 0}
.gr-mes>u{font-size:9.5px; color:var(--tenue2); text-decoration:none}
.gr-pico>i{opacity:1}
.gr-pico>u{color:var(--texto); font-weight:700}

/* Banda de precio */
.gr-bandas{display:flex; flex-direction:column; gap:9px}
.gr-brail{position:relative; height:16px}
.gr-brail>i{position:absolute; inset:5px 0; background:var(--sup2); border-radius:999px; display:block}
.gr-bmed{position:absolute; top:0; width:2px; height:16px; background:var(--tenue); opacity:.7; border-radius:1px; margin-left:-1px}
.gr-bmio{position:absolute; top:1px; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:var(--acento); border:2px solid var(--tarjeta); box-shadow:0 0 0 1px var(--acento)}
.gr-bmio.gr-fuera{background:var(--mal); box-shadow:0 0 0 1px var(--mal)}

@media(max-width:640px){
  .gr-fila, .gr-banda{grid-template-columns:minmax(64px,96px) minmax(0,1fr) auto}
}

/* Dos gráficas lado a lado en pantalla ancha, una debajo de otra en angosta.
   Nunca tres: una gráfica de menos de ~300px de ancho deja de leerse.

   🔴 EL `min(310px,100%)` NO ES ADORNO. `minmax(310px,1fr)` a secas le pone a
   la columna un PISO de 310px que no negocia: en un teléfono de 320, después
   del margen de la caja y de los 26px de aire de la tarjeta quedan 211px de
   contenedor, y la columna igual se planta en 310. Los 99px que sobran se
   salen, y como `.inf` lleva `overflow:hidden` NO SE RECUPERAN con el dedo:
   se pierden. Eso era lo que se comía los tres últimos años del eje —2035,
   2036 y 2037— en las once gráficas conmutables. Medido con `bin/ejes.mjs`
   a 320 el 4-sep-2026: 93px fuera de la caja en once de doce.
   Con `min(310px,100%)` el piso vale 310 cuando hay lugar y vale el ancho del
   contenedor cuando no lo hay: en pantalla ancha no cambia nada. */
.gr-rej2{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr)); margin:14px 0}
.inf_gr{padding:4px 15px 12px; border-bottom:1px solid var(--borde)}
.inf_gr .gr-rej2:first-child{margin-top:4px}

/* ══════════════════════════════════════════════════════════════════════
   AIRE.
   Su criterio del 25-ago, textual: *«son tan estéticas que la gente siente
   placentero verlas; las que teníamos causan estrés, duelen»*.

   La diferencia medible entre las ocho referencias y esta pantalla no está
   en el color: está en el ESPACIO. En las capturas de referencia cada
   tarjeta respira ~24px por dentro y ~18px entre una y otra, y el bloque de
   texto nunca pasa de dos renglones. Acá se venía de 16px y 12px con
   párrafos de cuatro renglones, y esa densidad es lo que cansa: el ojo no
   encuentra dónde parar.

   Nada de esto esconde información. Es la misma pantalla, con lugar para
   respirar entre una cosa y la otra.
   ══════════════════════════════════════════════════════════════════════ */
.tarjeta{padding:24px 26px; margin-bottom:18px}
.inf{padding-bottom:6px}
.inf_cab{padding:20px 26px 18px}
.inf_gr{padding:6px 26px 20px}
.inf_h{padding:4px 26px 10px}
.inf_h .hz{padding:16px 0; gap:16px}
.gr-rej2{gap:26px; margin:18px 0}
.gr{margin-bottom:10px}
.gr-cab{margin-bottom:12px}
.gr-cab b{font-size:14px}
.gr-filas, .gr-bandas{gap:11px}
.gr-fbar, .gr-brail{height:20px}
.gr-fbar>u{top:-4px; height:28px}
.gr-brail>i{inset:6px 0}
.gr-bmio{top:3px}
.gr-fval{font-size:14px}
.inf_cif{gap:12px}
.g2, .rejilla{gap:16px}

/* El texto largo deja de ser un muro: se le pone un ancho máximo de lectura.
   Un renglón de 120 caracteres obliga al ojo a saltar de una punta a la otra
   y perder la línea; entre 65 y 85 es donde se lee sin esfuerzo. */
.inf_h .qq, .nota, .inf_no, .ayuda{max-width:78ch; line-height:1.6}
.inf_tit{line-height:1.5}

/* La ficha técnica y el «no dice» son letra chica de pie de página: van
   atenuados y con aire, no compitiendo con las gráficas por atención. */
.inf_ficha{margin-top:8px; padding:18px 26px; background:var(--sup); border-radius:var(--radio)}
.inf_no{margin:0 26px 18px; padding:14px 16px; border-radius:var(--radio-chico)}

/* El «ver más» que agrega `aire.js`. Discreto: es una puerta, no un botón de
   acción — y si compitiera con los botones de decidir sería peor el remedio. */
.aire-pq{display:block; margin-top:6px}
.aire-pq>summary{cursor:pointer; font-size:12px; color:var(--acento); font-weight:600;
  list-style:none; display:inline-block; padding:2px 10px; border-radius:999px;
  background:var(--acento-suave); border:1px solid var(--acento-borde)}
.aire-pq>summary::-webkit-details-marker{display:none}
.aire-pq>summary:hover{background:var(--acento); color:var(--acento-txt)}
.aire-pq[open]>summary{margin-bottom:8px}
.aire-pq[open]>summary::after{content:' ▴'}
.aire-pq:not([open])>summary::after{content:' ▾'}
.aire-pq .pq_a{color:var(--tenue); line-height:1.6}

/* En papel no hay clic: todo lo plegado se imprime abierto y sin el botón. */
@media print{
  .aire-pq{display:inline}
  .aire-pq>summary{display:none}
  .aire-pq .pq_a{display:inline; color:inherit}
}

/* La vista de tabla de cada gráfica. Plegada, discreta, y con los números en
   ancho fijo — acá sí, porque se apilan en columna y tienen que alinear. */
.gr-tab{margin-top:10px}
.gr-tab>summary{cursor:pointer; font-size:11.5px; color:var(--tenue); list-style:none;
  display:inline-block; padding:2px 9px; border-radius:999px; border:1px solid var(--borde)}
.gr-tab>summary::-webkit-details-marker{display:none}
.gr-tab>summary:hover{color:var(--texto); border-color:var(--borde2)}
.gr-tabw{overflow-x:auto; margin-top:8px}
.gr-tab table{width:100%; font-size:12px; font-variant-numeric:tabular-nums}
.gr-tab th, .gr-tab td{padding:5px 8px; text-align:right; white-space:nowrap}
.gr-tab .gr-izq{text-align:left}
.gr-tab th{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--tenue2)}
@media print{ .gr-tab{display:block} .gr-tab>summary{display:none} }

/* ══════════════════════════════════════════════════════════════════════
   LA RENDIJA (`public/rendija.js`).
   Al bajar, el encabezado se encoge y le devuelve al contenido la pantalla
   que le estaba comiendo. Medido antes: 263px de encabezado + 284px de la
   barra de «Decidir» = 547 de 900, o sea 39% de pantalla útil.
   Lo que se esconde es lo de ORIENTARSE (cifras de caja, pasos, buscador);
   lo que se queda es lo de TRABAJAR (dónde estoy y cómo cierro el año).
   ══════════════════════════════════════════════════════════════════════ */
.compacto header .barra,
.compacto header .busca{
  max-height:0; opacity:0; margin:0; padding-top:0; padding-bottom:0;
  overflow:hidden; pointer-events:none; border-width:0;
}
.compacto header .pasos{
  max-height:46px; overflow:hidden;
}
.compacto header .paso{padding-top:5px; padding-bottom:5px; font-size:12px}
.compacto header .paso b{width:17px; height:17px; font-size:10px}
.compacto header h1{font-size:16px}
/* La transición se apaga para quien pidió menos movimiento en su sistema:
   una barra que se encoge sola es exactamente lo que marea a esa gente. */
header .barra, header .busca, header .pasos, header h1{
  transition:max-height .18s ease, opacity .14s ease, font-size .18s ease;
}
@media (prefers-reduced-motion:reduce){
  header .barra, header .busca, header .pasos, header h1{transition:none}
}
/* La barra de «Decidir» se pega DEBAJO del encabezado, no encima de él: dos
   capas fijas que arrancan las dos en 0 se tapan entre sí. */
#tab .top{top:var(--techo-fijo,0px)}
.compacto #tab .top{padding-top:6px; padding-bottom:6px}
@media print{ .compacto header .barra, .compacto header .busca{max-height:none; opacity:1; overflow:visible} }

/* La barra de «Decidir» mide 296px estando fija — más de un cuarto de la
   pantalla, y de eso la fila de cinco indicadores se lleva la mayor parte.
   Al bajar se va: las cifras del año son para ORIENTARSE y están a un
   pequeño desplazamiento de distancia, mientras que las pestañas de módulos
   son NAVEGACIÓN y tienen que quedar siempre al alcance. */
.compacto #tab .kpis{max-height:0; opacity:0; overflow:hidden; border-width:0}
.compacto #tab .top .id{padding-top:5px; padding-bottom:5px; font-size:12px}
#tab .kpis{transition:max-height .18s ease, opacity .14s ease}
@media (prefers-reduced-motion:reduce){ #tab .kpis{transition:none} }
@media print{ .compacto #tab .kpis{max-height:none; opacity:1; overflow:visible} }

/* H5 · LA MISMA PARTE, EN LARGO. La rosca dice «esto es un total repartido»;
   la barra dice CUÁNTO, que es lo que el ángulo hace mal. Van juntas a
   propósito: cada una contesta lo que la otra contesta peor.
   Ver `G.dona` en graficas.js y el hallazgo H5 de docs/GRAFICAS.md. */
.gr-barras2{display:flex; flex-direction:column; gap:4px; margin-top:8px}
.gr-b2{display:grid; grid-template-columns:minmax(90px,28%) 1fr minmax(76px,auto); align-items:center; gap:8px}
.gr-b2r{font-size:12px; color:var(--tenue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gr-b2p{height:10px; background:var(--fondo2,#eef1f4); border-radius:5px; overflow:hidden}
.gr-b2p i{display:block; height:100%; border-radius:5px}
.gr-b2v{font-size:12px; text-align:right; white-space:nowrap}