/* contabilidad/tablero/estilos.css · TODO el CSS del tablero vive acá.
   No se enlaza nada de otro proyecto. Cada color es un token de :root; ninguna pieza
   trae su propio :root ni un color suelto en un style=.

   ── La paleta ────────────────────────────────────────────────────────────────
   Es la de referencia de dataviz, validada con validate_palette.js contra ESTAS
   superficies (si se cambia una superficie, hay que volver a correrlo):
     · categóricas slots 1-5, en orden fijo (el orden ES el mecanismo anti-daltonismo).
       Contra #101216 (oscuro) y #ffffff (claro) → PASAN todo. Peor par ΔE 8.4 en
       daltonismo, 19.3 a vista normal.
     · entra↔sale (azul↔rojo) ΔE 29 · facturado↔cobrado (s2↔s1) ΔE 31.8 → PASAN.
     · ya pagada ↔ por pagar (--s1 ↔ --parcial) → PASAN. OJO: acá NO va --az-250. En
       oscuro la rampa se invierte y --az-250 queda MÁS OSCURO que --s1: el validador
       daba ΔE 9.5 a vista normal, o sea dos azules que no se distinguen. Por eso "por
       pagar" es un token propio, claro en los dos modos.
     · --s0 da FAIL de croma a propósito: NO es una serie, es el cubo de "otros".
       --s0-paso existe para UN caso: la fila "Sin clasificar" de margen, donde el gris
       va contra sí mismo. Acá NO va --ink-3: el validador lo tira abajo en los dos
       modos (ΔE 10.4 y 4.1). --s0-paso da 17.2 y 19.3, y va al lado contrario en cada
       modo (más oscuro en claro, más claro en oscuro).
     · en claro, aqua/amarillo/magenta quedan por debajo de 3:1 contra la superficie →
       regla de relieve: TODA barra lleva su valor escrito al lado y toda figura tiene
       su tabla gemela. Eso no es decoración, es lo que la hace legible.

   ── La forma ─────────────────────────────────────────────────────────────────
   Esto es una HERRAMIENTA, no un informe. De ahí salen cuatro reglas:
   1 · Cáscara de producto: barra fija arriba, navegación lateral fija, contenido que
       scrollea solo. Nunca tabs de texto subrayado.
   2 · Oscuro por defecto. El claro existe y está diseñado aparte, no es un volteo.
   3 · UN protagonista por pantalla, y no siempre es el héroe: en "cerrado" es la
       cascada, en "margen" el ranking, en "cierre" el mes abierto.
   4 · Nada flota. Toda figura se apoya en una línea base visible y tiene eje con
       números redondos. Un gráfico del que no se puede leer un valor es una textura.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* superficies e ink — OSCURO es el modo de diseño */
  --plano: #08090b;
  --sup: #101216;
  --sup-2: #171a1f;
  --sup-3: #20242c;
  --linea: #1d212a;
  --borde: #262b35;
  --ink: #edeff2;
  --ink-2: #99a1ad;
  --ink-3: #6a727e;
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 28px rgba(0, 0, 0, .35);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .55), 0 16px 48px rgba(0, 0, 0, .45);

  /* categóricas (identidad: los servicios) */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
  --s0: #7d7b74;            /* "otros" / sin clasificar: gris, nunca una hue generada */
  --s0-paso: #b8b6ac;       /* el OTRO paso del mismo gris, para cuando --s0 va contra sí mismo */

  /* secuencial azul */
  --az-100: #184f95; --az-250: #256abf; --az-450: #3987e5; --az-600: #cde2fb;
  --pista: #1a3557;         /* el track de un medidor: paso oscuro de la MISMA rampa */
  --parcial: #9ec7f3;       /* "todavía por pagar" junto a "ya pagada" */

  /* divergente azul ↔ rojo (lo que entra ↔ lo que sale) */
  --entra: #3987e5;
  --sale: #e66767;

  /* estado — reservado, siempre con ícono + texto al lado */
  --bien: #2fbf55; --ojo: #e8b13a; --serio: #ec835a; --mal: #ef5f5f;
  --bien-txt: #4fd06f;

  --r: 12px;
  --r-chico: 8px;
  --r-pill: 999px;
  --gutter: 28px;
  --e1: 6px; --e2: 12px; --e3: 20px; --e4: 30px; --e5: 48px; --e6: 80px;
  --h-cabecera: 56px;
  --w-lateral: 236px;
  --w-eje: 56px;            /* el canal del eje Y: lo comparten el plano y el eje X */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ── CLARO · diseñado aparte, no es un volteo del oscuro ───────────────────── */
@media (prefers-color-scheme: light) {
  :root:where(:not([data-theme="dark"])) {
    color-scheme: light;
    --plano: #f6f7f9; --sup: #ffffff; --sup-2: #f0f2f5; --sup-3: #e5e8ee;
    --linea: #e9ecf0; --borde: #dde1e8;
    --ink: #0a0c10; --ink-2: #4e5663; --ink-3: #79818e;
    --sombra: 0 1px 2px rgba(10, 12, 16, .05), 0 6px 20px rgba(10, 12, 16, .05);
    --sombra-alta: 0 1px 3px rgba(10, 12, 16, .07), 0 14px 40px rgba(10, 12, 16, .09);
    --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4;
    --s0: #a9a79f; --s0-paso: #75736d;
    --az-100: #cde2fb; --az-250: #86b6ef; --az-450: #2a78d6; --az-600: #184f95;
    --pista: #dbe8f8; --parcial: #86b6ef;
    --entra: #2a78d6; --sale: #e34948;
    --bien: #0ca30c; --ojo: #d99a09; --serio: #ec835a; --mal: #d03b3b;
    --bien-txt: #046b04;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --plano: #f6f7f9; --sup: #ffffff; --sup-2: #f0f2f5; --sup-3: #e5e8ee;
  --linea: #e9ecf0; --borde: #dde1e8;
  --ink: #0a0c10; --ink-2: #4e5663; --ink-3: #79818e;
  --sombra: 0 1px 2px rgba(10, 12, 16, .05), 0 6px 20px rgba(10, 12, 16, .05);
  --sombra-alta: 0 1px 3px rgba(10, 12, 16, .07), 0 14px 40px rgba(10, 12, 16, .09);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4;
  --s0: #a9a79f; --s0-paso: #75736d;
  --az-100: #cde2fb; --az-250: #86b6ef; --az-450: #2a78d6; --az-600: #184f95;
  --pista: #dbe8f8; --parcial: #86b6ef;
  --entra: #2a78d6; --sale: #e34948;
  --bien: #0ca30c; --ojo: #d99a09; --serio: #ec835a; --mal: #d03b3b;
  --bien-txt: #046b04;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--plano);
  color: var(--ink);
  font: 14px/1.55 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: 15px; }
h2 { font-size: clamp(23px, 2.3vw, 31px); letter-spacing: -.03em; }
h3 { font-size: 14px; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--s1); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; border-radius: 4px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mono donde los números forman columna: es lo que hace que una tabla se lea de
   arriba abajo sin que los dígitos bailen. Proporcionales cuando el número va solo
   y grande — tabular-nums a 60px deja el número flojo. */
td, th, .val, .casc-val, .casc-pct, .chapa, .fig-linea-y span, .medidor-pies, .delta, .dato-par b, .mes-cerrado .detalle {
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.heroe .valor, .ficha .valor { font-variant-numeric: proportional-nums; }

/* ── la cáscara ───────────────────────────────────────────────────────────── */
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--w-lateral) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "cabecera cabecera" "lateral principal";
}

/* ⚠ Se llama .cabecera y NO .barra: `.barra` es la barra horizontal de datos que
   pinta piezas.mjs, y sus reglas vienen más abajo en este archivo. Con el mismo
   nombre, la cabecera de la app heredaba `position:absolute` de un gráfico y se
   montaba encima del contenido. */
.cabecera {
  grid-area: cabecera; position: sticky; top: 0; z-index: 40;
  height: var(--h-cabecera); display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--gutter); background: color-mix(in srgb, var(--plano) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--linea);
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-marca {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--s1), var(--s3));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--s1) 35%, transparent);
}
.logo-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; font-weight: 600; font-size: 14px; letter-spacing: -.02em; }
.logo-txt small { font-size: 10.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }

.cabecera-der { margin-left: auto; display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.cabecera-der .quien { font-size: 12px; color: var(--ink-3); max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* el pulso del sync: punto de estado + texto, nunca color solo */
.pulso {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 11.5px; color: var(--ink-2);
  padding: 4px 11px 4px 9px; border-radius: var(--r-pill);
  background: var(--sup-2); border: 1px solid var(--borde);
}
.pulso i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.pulso-corto { display: none; }
.pulso.bien i { background: var(--bien); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bien) 22%, transparent); }
.pulso.ojo i  { background: var(--ojo);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ojo) 22%, transparent); }
.pulso.mal i  { background: var(--mal);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mal) 22%, transparent); }
.pulso.demo i { background: var(--s4); }

.lateral {
  grid-area: lateral; position: sticky; top: var(--h-cabecera); align-self: start;
  height: calc(100dvh - var(--h-cabecera)); overflow-y: auto;
  padding: var(--e3) var(--e2); display: flex; flex-direction: column; gap: 2px;
}
.lateral button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  padding: 8px 11px; border-radius: var(--r-chico);
  transition: background .13s, color .13s;
}
.lateral button:hover { background: var(--sup-2); color: var(--ink); }
.lateral button[aria-current="true"] { background: var(--sup-2); color: var(--ink); font-weight: 600; }
.nav-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.lateral button[aria-current="true"] .nav-ico { opacity: 1; color: var(--s1); }
.nav-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { grid-area: principal; min-width: 0; border-left: 1px solid var(--linea); }
main[data-cargando="1"] { opacity: .5; transition: opacity .2s; }
.lienzo { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ── la pantalla ──────────────────────────────────────────────────────────── */
.pantalla { padding: var(--e5) 0 var(--e6); display: flex; flex-direction: column; gap: var(--e5); }
.lienzo > .aviso { margin-top: var(--e4); }
.lienzo > .aviso ~ .pantalla { padding-top: var(--e4); }
/* un aviso pertenece al título que tiene arriba: el hueco de sección los divorcia */
.pantalla > .titulo + .aviso { margin-top: calc(var(--e4) - var(--e5)); }
.pantalla > .aviso + .aviso { margin-top: calc(var(--e1) - var(--e5)); }

.titulo { display: flex; align-items: flex-end; gap: var(--e3); flex-wrap: wrap; }
.titulo-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.titulo .sub { font-size: 13px; color: var(--ink-3); }
.titulo .filtros { margin-left: auto; }

.filtros { display: flex; align-items: center; gap: 8px; }
.filtros label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
.filtros select {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r-chico);
  padding: 7px 11px; cursor: pointer;
}
.filtros select:hover { border-color: var(--ink-3); }

/* ── avisos: una tira, no un cartel ───────────────────────────────────────── */
.aviso {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  padding: 11px 14px; border-radius: var(--r-chico);
  background: var(--sup); border: 1px solid var(--borde);
  border-left: 2px solid var(--ink-3);
}
.aviso .ico {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  color: var(--plano); background: var(--ink-3); transform: translateY(2px);
}
.aviso strong { color: var(--ink); font-weight: 600; }
.aviso.ojo   { border-left-color: var(--ojo); }  .aviso.ojo .ico   { background: var(--ojo); }
.aviso.serio { border-left-color: var(--mal); }  .aviso.serio .ico { background: var(--mal); }
.aviso.malo  { border-left-color: var(--mal); }  .aviso.malo .ico  { background: var(--mal); }
.aviso.bien  { border-left-color: var(--bien); } .aviso.bien .ico  { background: var(--bien); }

/* ── el reparto del ancho ─────────────────────────────────────────────────── */
.par { display: grid; gap: var(--e4); align-items: stretch; }
@media (min-width: 1040px) {
  .par { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .par.mitades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .par.mitades > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.columna-texto { max-width: 74ch; }
.rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ── el héroe ─────────────────────────────────────────────────────────────── */
.heroe {
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  padding: var(--e4); display: flex; flex-direction: column;
  box-shadow: var(--sombra); position: relative; overflow: hidden;
}
/* el halo del acento: lo único decorativo de la pieza, y sirve — es lo que marca
   cuál de todas las superficies es LA que contesta la pregunta */
.heroe::before {
  content: ""; position: absolute; inset: -60% 30% 55% -20%;
  background: radial-gradient(62% 62% at 28% 50%, color-mix(in srgb, var(--c, var(--s1)) 24%, transparent), transparent 72%);
  pointer-events: none;
}
.heroe > * { position: relative; }
.heroe .etiqueta { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.heroe .valor {
  font-size: clamp(44px, 5.6vw, 68px); font-weight: 660; line-height: 1;
  letter-spacing: -.045em; margin: 14px 0 9px;
}
.heroe .pie { font-size: 14px; color: var(--ink-2); }
.heroe .pie strong { color: var(--ink); font-weight: 600; }
.heroe-dentro { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea); }

/* ── fichas de KPI ────────────────────────────────────────────────────────── */
.fichas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.ficha {
  flex: 1 1 190px; min-width: 0; position: relative;
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 15px var(--e3) 16px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color .15s;
}
.ficha:hover { border-color: var(--ink-3); }
.ficha-cabeza { display: flex; align-items: center; gap: var(--e2); min-height: 16px; }
.ficha .etiqueta { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); min-width: 0; }
.ficha .valor { font-size: 26px; font-weight: 640; letter-spacing: -.035em; line-height: 1.15; margin-top: 4px; }
.ficha .valor.chico { font-size: 19px; letter-spacing: -.02em; }
/* la ficha que contesta la pregunta de la fila pesa más que sus vecinas: cuatro
   fichas iguales es lo mismo que ninguna */
.ficha.clave { background: var(--sup-2); border-color: var(--ink-3); }
.ficha.clave .valor { font-size: 32px; }
.ficha .nombre { display: flex; align-items: flex-start; gap: 8px; font-size: 18px; font-weight: 620; letter-spacing: -.02em; line-height: 1.25; margin-top: 6px; }
.ficha .nombre .punto { margin-top: 7px; }
.ficha[data-tip] { cursor: help; }

.chispa { margin-left: auto; width: 54px; height: 18px; flex: 0 0 auto; overflow: visible; }
.chispa path { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }

.delta { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.delta-ico { font-family: var(--sans); }
.delta.arriba { color: var(--bien-txt); }
.delta.abajo  { color: var(--mal); }
.delta.plano  { color: var(--ink-3); }
.delta.parejo { color: var(--ink-3); font-weight: 500; }

/* ── definiciones detrás del interruptor ──────────────────────────────────── */
.def { display: none; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
body.con-def .def { display: block; margin-top: 7px; }
body.con-def .def.en-linea { display: inline; margin: 0; }
body.con-def .heroe .def { max-width: 62ch; }
.interruptor {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
  font-size: 11.5px; color: var(--ink-2); user-select: none;
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  background: var(--sup-2); border: 1px solid var(--borde);
}
.interruptor:hover { color: var(--ink); }
.interruptor input { accent-color: var(--s1); width: 13px; height: 13px; cursor: pointer; margin: 0; }
.pie-nota { font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* ── tarjetas ─────────────────────────────────────────────────────────────── */
.tarjeta { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.tarjeta > header { display: flex; align-items: center; gap: var(--e2); }
.tarjeta > header h3 { letter-spacing: -.015em; }
.tarjeta > header > h3 + * { margin-left: auto; }
.tarjeta.protagonista, .tarjeta.plana {
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e4);
}
.tarjeta.protagonista { box-shadow: var(--sombra); }
.tarjeta.plana { padding: var(--e3) var(--e4) var(--e4); }

/* ══ LA FIGURA ═══════════════════════════════════════════════════════════════
   Tres capas sobre el mismo plano: el <svg> (área + línea), una capa HTML con los
   puntos —un <circle> en un svg deformado sale ovalado— y una capa de ranuras
   invisibles que reciben el mouse y el teclado, prenden el crosshair y disparan el
   tooltip. El eje Y y el eje X se anclan a las mismas coordenadas que los datos. */
.fig { display: flex; flex-direction: column; }
.fig-plano { position: relative; height: var(--alto, 300px); }
.fig-rejilla { position: absolute; inset: 0 0 0 var(--w-eje); }
.fig-linea-y { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--linea); }
.fig-linea-y.cero { border-top-color: var(--borde); }
.fig-linea-y span {
  position: absolute; right: 100%; padding-right: 12px; transform: translateY(-50%);
  font-size: 10.5px; color: var(--ink-3); white-space: nowrap;
}
.fig-lienzo { position: absolute; inset: 0 0 0 var(--w-eje); }
.fig-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fig-area { stroke: none; }
.fig-banda { fill: var(--ink); opacity: .07; stroke: none; }
.fig-linea { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fig-capa { position: absolute; inset: 0; pointer-events: none; }
.fig-pto {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px var(--sup); transform: translate(-50%, -50%);
  transition: width .12s, height .12s, box-shadow .12s;
}
.fig-pto.viva {
  width: 11px; height: 11px;
  box-shadow: 0 0 0 3px var(--sup), 0 0 0 6px color-mix(in srgb, var(--c) 28%, transparent);
}
/* el rótulo del extremo: se rotula UN valor, nunca todos los puntos. El texto va con
   tinta y el color lo lleva el punto que tiene al lado — nunca la letra. */
.fig-rotulo {
  position: absolute; transform: translate(-100%, -50%); margin-top: -22px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  background: var(--sup-2); border: 1px solid var(--borde); border-radius: var(--r-pill);
  padding: 3px 9px;
}
.fig-rotulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.fig-ranuras { position: absolute; inset: 0; }
.fig-ranura { position: absolute; top: 0; bottom: 0; cursor: crosshair; }
.fig-cruz {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-2);
  opacity: 0; transform: translateX(-50%); transition: opacity .12s;
}
.fig-ranura:hover .fig-cruz, .fig-ranura:focus-visible .fig-cruz { opacity: .45; }
.fig-eje-x { position: relative; height: 28px; margin-left: var(--w-eje); }
.fig-eje-x span {
  position: absolute; top: 10px; transform: translateX(-50%);
  font-size: 10.5px; color: var(--ink-3); white-space: nowrap;
}
.fig-eje-x span.primera { transform: none; }
.fig-eje-x span.ultima { transform: translateX(-100%); }

/* columnas apiladas: una por mes, partida en los pedazos que la componen */
.fig-cols { position: absolute; inset: 0 0 0 var(--w-eje); display: flex; align-items: flex-end; }
.fig-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: crosshair; }
.fig-col::before { content: ""; position: absolute; top: -10px; left: 2px; right: 2px; bottom: -28px; border-radius: 6px; }
.fig-col:hover::before, .fig-col:focus-visible::before { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.fig-pila {
  position: relative; width: 100%; max-width: 42px; min-height: 3px;
  display: flex; flex-direction: column; gap: 2px;   /* el hueco ES el separador */
}
.fig-seg { display: block; width: 100%; background: var(--c); border-radius: 2px; min-height: 2px; }
.fig-pila > .fig-seg:first-child { border-radius: 5px 5px 2px 2px; }
.fig-pila > .fig-seg:last-child { border-radius: 2px 2px 3px 3px; }
.fig-pila > .fig-seg:only-child { border-radius: 5px 5px 3px 3px; }
.fig-rotulo-col {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); white-space: nowrap;
}
.fig-eje-cols span { transform: translateX(-50%) !important; }

/* ── barras horizontales ──────────────────────────────────────────────────── */
.barras { display: flex; flex-direction: column; }
.barra-fila {
  display: grid; grid-template-columns: minmax(96px, 168px) 1fr minmax(84px, auto);
  align-items: center; gap: var(--e3); padding: 10px 0;
  border-bottom: 1px solid var(--linea);
}
.barra-fila:last-child { border-bottom: 0; }
.barra-fila .nom { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.barra-fila .nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { position: relative; height: 22px; border-radius: 5px; background: var(--sup-2); }
.barra {
  position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 3px 5px 5px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #ffffff), var(--c));
  transform-origin: left center;
}
.barra.vacia { background: none; }
/* la referencia del promedio en un ranking de porcentajes: convierte una lista de
   números parecidos en "estos están arriba de la media y estos abajo" */
.ref-promedio { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .5; border-radius: 2px; }
.clave-ref { width: 2px; height: 13px; background: var(--ink); opacity: .5; border-radius: 2px; flex: 0 0 auto; }
.barra-fila .val { text-align: right; font-size: 14px; font-weight: 640; }
.barra-fila .val small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.barra-fila.primera .nom { color: var(--ink); font-weight: 600; }
.barra-fila.primera .val { font-size: 16px; }

.punto { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: 0 0 auto; }
.linea-clave { width: 14px; height: 2px; border-radius: 2px; background: var(--c); flex: 0 0 auto; }
.con-punto { display: inline-flex; align-items: center; gap: 8px; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e3); font-size: 12px; color: var(--ink-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }

.apilada { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: var(--sup-2); gap: 2px; }
.apilada i { background: var(--c); display: block; }
.apilada.gruesa { height: 24px; border-radius: 6px; }
.barra-parte { position: absolute; top: 0; left: 0; height: 100%; min-width: 3px; }
.barra-parte .apilada { height: 100%; border-radius: 0; background: transparent; }

/* ── medidor ──────────────────────────────────────────────────────────────── */
.medidor { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.medidor-pista { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--pista); cursor: help; }
.medidor-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--az-250), var(--s1));
  box-shadow: 0 0 16px color-mix(in srgb, var(--s1) 45%, transparent);
}
.medidor-fill.ojo { background: linear-gradient(90deg, var(--ojo), var(--ojo)); box-shadow: 0 0 16px color-mix(in srgb, var(--ojo) 40%, transparent); }
.medidor-fill.malo { background: linear-gradient(90deg, var(--mal), var(--mal)); box-shadow: 0 0 16px color-mix(in srgb, var(--mal) 40%, transparent); }
.medidor-fill.tope { border-radius: var(--r-pill) 2px 2px var(--r-pill); }
/* la marca del 100%: sin ella, "vamos 6% arriba" se ve igual que "vamos justos" */
.medidor-marca { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); border-radius: 2px; }
.medidor-marca span {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 4px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3);
}
.medidor-pies { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); gap: var(--e2); }
.medidor-pies b { color: var(--ink); font-weight: 650; }
.medidor-pies span { font-family: var(--sans); }
.medidor-pies b { font-family: var(--mono); }

/* ── la cascada ───────────────────────────────────────────────────────────── */
.cascada { display: flex; flex-direction: column; }
.casc-fila {
  display: grid; grid-template-columns: minmax(118px, 200px) 1fr minmax(92px, auto) 48px;
  align-items: center; gap: var(--e3); padding: 6px 0;
}
.casc-fila.apagada { opacity: .38; }
.casc-fila .nom { font-size: 13px; color: var(--ink-2); }
.casc-pista { position: relative; height: 26px; cursor: help; }
/* el filete que conecta un escalón con el siguiente: eso es lo que la hace cascada.
   Sólido: punteado lee como "proyección", no como grilla. */
.casc-pista::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--linea); }
.casc-barra { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; min-width: 3px; }
.casc-barra.entra, .casc-barra.total { background: linear-gradient(180deg, color-mix(in srgb, var(--entra) 92%, #ffffff), var(--entra)); }
.casc-barra.sale, .casc-barra.negativo { background: linear-gradient(180deg, color-mix(in srgb, var(--sale) 92%, #ffffff), var(--sale)); }
.casc-fila .casc-val { text-align: right; font-size: 14px; font-weight: 640; }
.casc-fila .casc-pct { text-align: right; font-size: 11.5px; color: var(--ink-3); }
.casc-fila.destacada { background: var(--sup-2); border-radius: var(--r-chico); padding: 12px var(--e2); margin: 6px calc(var(--e2) * -1); }
.casc-fila.destacada .nom { color: var(--ink); font-weight: 650; font-size: 14px; }
.casc-fila.destacada .casc-val { font-size: 18px; font-weight: 700; }
.casc-fila.destacada .casc-pct { color: var(--ink-2); }
.casc-fila.destacada .casc-pista::before { border-top-color: transparent; }
/* el último escalón es el resultado del mes: cierra la cascada con el peso del héroe */
.casc-fila.cierre-cascada { background: var(--ink); }
.casc-fila.cierre-cascada .nom, .casc-fila.cierre-cascada .casc-val, .casc-fila.cierre-cascada .casc-pct { color: var(--plano); }
.casc-fila.cierre-cascada .casc-val { font-size: 21px; }

/* ── tablas ───────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla-anio table { font-size: 11.5px; }
.tabla-anio th, .tabla-anio td { padding: 8px 9px; }
th, td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
th:first-child, td:first-child, td.txt, th[scope="row"] { text-align: left; }
th[scope="row"] { font-family: var(--sans); font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--ink-2); font-weight: 500; }
tbody tr:hover td, tbody tr:hover th[scope="row"] { background: var(--sup-2); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td, tfoot th { font-weight: 650; border-bottom: 0; border-top: 1px solid var(--borde); color: var(--ink); }
tr.fuerte td, tr.fuerte th[scope="row"] { font-weight: 700; color: var(--ink); }
tr.separa td, tr.separa th { border-top: 1px solid var(--borde); }
tr.gasto td { color: var(--ink-2); }
td.negativo { color: var(--mal); }
th.abierto { color: var(--ojo); }
th .def-mes { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ojo); }
th.renglon { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); font-family: var(--sans); }
th.renglon .def { font-weight: 400; }
td.total-fila { font-weight: 650; border-left: 1px solid var(--linea); color: var(--ink); }
.tabla-anio, .tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
/* que se vea que hay más tabla a la derecha en vez de parecer cortada */
.tabla-anio { --borde-derecho: linear-gradient(to left, var(--sup), transparent); }
.tabla-anio table { min-width: 720px; }
.tabla-anio th:first-child, .tabla-anio td:first-child { position: sticky; left: 0; background: var(--sup); z-index: 1; }
.corre-al-costado { display: none; font-size: 11.5px; color: var(--ink-3); padding-top: 10px; }

/* la tabla gemela de una figura: está siempre, pero plegada */
.gemela { margin-top: var(--e2); }
.gemela > summary {
  cursor: pointer; font-size: 12px; color: var(--ink-3); padding: 7px 0;
  list-style: none; display: inline-flex; align-items: center; gap: 7px;
}
.gemela > summary::-webkit-details-marker { display: none; }
.gemela > summary::before { content: "›"; font-size: 13px; transition: transform .15s; display: inline-block; }
.gemela[open] > summary::before { transform: rotate(90deg); }
.gemela > summary:hover { color: var(--ink-2); }
.gemela > .tabla-caja, .gemela > .tabla-anio { margin-top: 8px; }

/* ── varios ───────────────────────────────────────────────────────────────── */
.chapa {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--sup-2); color: var(--ink-2); border: 1px solid var(--borde);
}
.chapa .ico { font-family: var(--sans); }
.chapa.bien { background: color-mix(in srgb, var(--bien) 14%, transparent); color: var(--bien-txt); border-color: color-mix(in srgb, var(--bien) 28%, transparent); }
.chapa.ojo  { background: color-mix(in srgb, var(--ojo) 14%, transparent);  color: var(--ojo);  border-color: color-mix(in srgb, var(--ojo) 30%, transparent); }
.chapa.mal  { background: color-mix(in srgb, var(--mal) 14%, transparent);  color: var(--mal);  border-color: color-mix(in srgb, var(--mal) 30%, transparent); }
.falta { font-size: 13px; color: var(--ink-3); }
p.falta { padding: var(--e3) 0; }
.dato-par { display: flex; justify-content: space-between; gap: var(--e2); padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 13px; }
.dato-par:last-child { border-bottom: 0; }
.dato-par .nom { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dato-par b { font-weight: 650; white-space: nowrap; }

/* ── la checklist del cierre ──────────────────────────────────────────────── */
.chequeos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chequeos li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--ink-3); }
.chequeos li .ico { flex: 0 0 14px; text-align: center; font-size: 11px; }
.chequeos li.si { color: var(--ink-2); }
.chequeos li.si .ico { color: var(--bien-txt); }
.chequeos li.no { color: var(--ink); font-weight: 500; }
.chequeos li.no .ico { color: var(--ojo); }

/* El mes abierto es el protagonista; los cerrados son contexto y van chicos. */
.mes-abierto {
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  padding: var(--e4); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: var(--e3);
  container-type: inline-size;   /* el reparto de adentro depende del ancho DEL PANEL */
}
.mes-abierto > header { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.mes-abierto > header h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.025em; }
.abierto-cuerpo { display: grid; gap: var(--e3); align-items: start; }
@container (min-width: 620px) { .abierto-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e5); } }
.abierto-nota { display: flex; flex-direction: column; gap: var(--e2); }
.para-cerrar { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.para-cerrar strong { color: var(--ink); font-weight: 600; }
.cerrados { columns: 1; }
/* Multicolumna, no grid: llena hacia ABAJO (ago·jul·jun·may │ abr·mar·feb·ene).
   Con grid quedaba ago│jul, jun│may — el orden cronológico leído en zigzag. */
@media (min-width: 1040px) { .cerrados { columns: 2; column-gap: var(--e5); } }
.mes-cerrado {
  display: flex; align-items: center; gap: var(--e2); padding: 11px var(--e2);
  border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--ink-2);
  break-inside: avoid; border-radius: var(--r-chico);
}
.mes-cerrado:hover { background: var(--sup-2); }
.mes-cerrado b { font-weight: 600; color: var(--ink); min-width: 13ch; font-family: var(--sans); }
.mes-cerrado .detalle { margin-left: auto; color: var(--ink-3); font-size: 11px; text-align: right; }

/* ── botones y la puerta de entrada ───────────────────────────────────────── */
.boton, .boton-primario {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-chico);
  border: 1px solid var(--borde); background: var(--sup-2); color: var(--ink);
  transition: background .13s, border-color .13s;
}
.boton:hover { background: var(--sup-3); border-color: var(--ink-3); }
.boton-primario { background: var(--s1); color: #ffffff; border-color: var(--s1); padding: 10px 18px; font-size: 14px; }
.boton-primario:hover { opacity: .9; background: var(--s1); }

.puerta { min-height: 100dvh; display: grid; place-items: center; padding: var(--gutter); }
.puerta-caja {
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  padding: var(--e5) var(--e4); width: 100%; max-width: 390px;
  display: flex; flex-direction: column; gap: var(--e3); box-shadow: var(--sombra-alta);
}
.puerta-caja h1 { font-size: 21px; letter-spacing: -.03em; }
.puerta-caja input {
  font: inherit; font-size: 15px; padding: 11px 13px; width: 100%;
  border: 1px solid var(--borde); border-radius: var(--r-chico);
  background: var(--plano); color: var(--ink);
}
.recado { font-size: 13px; color: var(--ink-2); }
.recado.malo { color: var(--mal); }

/* ── tooltip ──────────────────────────────────────────────────────────────── */
#tip {
  position: fixed; z-index: 90; max-width: 300px; pointer-events: none;
  background: var(--sup-3); color: var(--ink);
  border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
  font-size: 12px; line-height: 1.5; padding: 8px 11px; border-radius: var(--r-chico);
  white-space: pre-line; transform: translate(-50%, -100%);
  opacity: 0; transition: opacity .12s;
}
#tip[data-ver="1"] { opacity: 1; }

/* ── movimiento ───────────────────────────────────────────────────────────────
   Entra escalonado, la figura se revela de izquierda a derecha y las barras crecen
   desde su base. El HTML SIEMPRE trae el número final escrito: la animación no es la
   que lo pone. Todo se apaga entero con prefers-reduced-motion. */
@keyframes subir  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes revelar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes crecer-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes crecer-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.entrando .pantalla > *, .entrando > .aviso {
  animation: subir .42s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.entrando .fig-svg { animation: revelar .8s cubic-bezier(.4, 0, .2, 1) both; animation-delay: .18s; }
.entrando .fig-capa, .entrando .fig-rotulo { animation: aparecer .4s both; animation-delay: .6s; }
.entrando .fig-pila { animation: crecer-y .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.12s + var(--i, 0) * 45ms); transform-origin: bottom center; }
.entrando .barra:not(.vacia), .entrando .casc-barra, .entrando .medidor-fill, .entrando .apilada i {
  animation: crecer-x .55s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.1s + var(--i, 0) * 35ms);
}
.entrando .barra, .entrando .casc-barra, .entrando .medidor-fill, .entrando .apilada i { transform-origin: left center; }

/* ── teléfono ─────────────────────────────────────────────────────────────── */
@media (max-width: 1039px) {
  :root { --gutter: 16px; --w-eje: 44px; --h-cabecera: 52px; }

  /* la lateral se vuelve una fila de pills debajo de la barra; el interruptor de
     definiciones se queda en la barra — si se rehace la cabecera, se va con ella */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabecera" "lateral" "principal"; }
  .cabecera { gap: var(--e2); padding: 0 var(--gutter); }
  .pulso-largo { display: none; }
  .pulso-corto { display: inline; }
  .pulso { padding: 4px 9px 4px 8px; }
  .cabecera-der .quien { display: none; }
  .logo-txt small { display: none; }
  .interruptor span { display: none; }
  .interruptor { padding: 6px 9px; }

  .lateral {
    position: sticky; top: var(--h-cabecera); z-index: 35; height: auto;
    flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 9px var(--gutter); border-right: 0; border-bottom: 1px solid var(--linea);
    background: color-mix(in srgb, var(--plano) 92%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
  }
  .lateral::-webkit-scrollbar { display: none; }
  .lateral button { width: auto; flex: 0 0 auto; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid transparent; }
  .lateral button[aria-current="true"] { border-color: var(--borde); }
  .lateral .nav-ico { display: none; }

  .pantalla { padding: var(--e4) 0 var(--e5); gap: var(--e4); }
  .heroe { padding: var(--e3); }
  .heroe .valor { font-size: clamp(38px, 12vw, 52px); }
  .tarjeta.protagonista, .tarjeta.plana, .mes-abierto { padding: var(--e3); }
  .ficha { flex-basis: 150px; padding: 13px var(--e3) 14px; }
  .ficha .valor { font-size: 23px; }
  .ficha.clave .valor { font-size: 27px; }

  /* nombre y valor en la MISMA línea, y la barra debajo a todo el ancho. Si la barra
     queda en el medio, cada renglón se come tres líneas y la lista no se lee. */
  .barra-fila { grid-template-columns: 1fr auto; gap: var(--e2); row-gap: 7px; padding: 11px 0; }
  .barra-fila .nom { grid-area: 1 / 1; }
  .barra-fila .val { grid-area: 1 / 2; font-size: 13.5px; }
  .barra-fila .val small { display: inline; margin-left: 7px; }
  .barra-fila .barra-pista { grid-area: 2 / 1 / 2 / 3; height: 14px; }

  .casc-fila { grid-template-columns: 1fr auto 42px; gap: 10px; row-gap: 6px; padding: 9px 0; }
  .casc-fila .nom { grid-area: 1 / 1; }
  .casc-fila .casc-val { grid-area: 1 / 2; font-size: 13.5px; }
  .casc-fila .casc-pct { grid-area: 1 / 3; }
  .casc-fila .casc-pista { grid-area: 2 / 1 / 2 / 4; height: 14px; }
  .casc-barra { top: 2px; bottom: 2px; }
  .casc-fila.destacada .casc-val { font-size: 15px; }
  .casc-fila.cierre-cascada .casc-val { font-size: 17px; }

  .tarjeta > header { flex-wrap: wrap; row-gap: 9px; }
  .tarjeta > header > h3 { flex: 1 1 100%; }
  .tarjeta > header > h3 + * { margin-left: 0; }
  .titulo .filtros { margin-left: 0; flex-basis: 100%; }

  .fig-eje-x span { font-size: 10px; }
  .corre-al-costado { display: block; }
  .mes-cerrado { padding: 10px 8px; gap: 9px; }
  .mes-cerrado b { min-width: 10.5ch; }
  #tip { max-width: 240px; }
}

/* Nueve meses no entran como nueve etiquetas en 390px: primero se cae el año, y si
   todavía se tocan, una etiqueta sí y una no. Los extremos no se caen nunca, y el
   mes completo lo sigue diciendo el tooltip de cada ranura. */
@media (max-width: 700px) {
  /* Los botones de la cabecera se achican o no entran a 390px. Estuvieron OCULTOS mientras
     existió el modo demo, así que el desborde recién apareció al sacarlo: era un bug tapado,
     no uno nuevo. Se achican en vez de esconderse — "Actualizar" y "Salir" son las dos únicas
     acciones del tablero y no se pueden perder en el teléfono, que es donde más se abre. */
  .cabecera-der { gap: 6px; }
  .cabecera-der .boton { padding: 6px 10px; font-size: 12px; }

  .fig-eje-x .anio-corto { display: none; }
  .fig-eje-x span:nth-child(even) { display: none; }
  .fig-eje-x span.primera, .fig-eje-x span.ultima { display: block; }
}

/* ── impresión y accesibilidad forzada ────────────────────────────────────── */
@media (forced-colors: active) {
  .barra, .casc-barra, .medidor-fill, .apilada i, .punto, .fig-pto { forced-color-adjust: none; border: 1px solid ButtonText; }
  .fig-linea { stroke: ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Una tira de datos chicos en una línea: contexto, no métrica. Va DEBAJO de lo importante.
   Existe porque los números del día estuvieron arriba y en tarjetas grandes, y competían
   con el número del mes en vez de acompañarlo. */
.tira { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e1); margin: var(--e2) 0; }
.tira-titulo { font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-right: var(--e1); }

/* ══════════════════════════════════════════════════════════════════════════
   EL CEO · la portada. Vocabulario nuevo sobre los mismos tokens: nada de acá trae
   un color propio. La tarjeta KPI es la ficha con tres cosas más (delta con "vs qué",
   meta escrita + semáforo como punto + palabra, chispa) y un estado APAGADA del mismo
   tamaño. El semáforo va en un punto y una palabra, nunca en el color del número:
   nueve números de colores es ruido, y el color solo es inaccesible.
   ══════════════════════════════════════════════════════════════════════════ */
.pantalla[data-vista="ceo"] { gap: var(--e4); }
.filtros-ceo { gap: 10px; flex-wrap: wrap; }
.filtros-ceo .boton { margin-left: 4px; }
.filtros-ceo .boton[aria-pressed="true"] { background: var(--sup-3); }

/* la tira "Ahora": el mes en curso, en una línea, distinta del mes que se mira */
.ahora {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2);
  padding: 11px var(--e3); border-radius: var(--r); background: var(--sup-2); border: 1px solid var(--linea);
  font-size: 13.5px; color: var(--ink-2);
}
.ahora-titulo { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ahora-txt strong { color: var(--ink); font-weight: 650; font-size: 15px; }
.ahora-txt b { color: var(--ink); font-weight: 600; }
.ahora-dia { display: inline-flex; gap: 6px; margin-left: auto; }
body.con-def .ahora .def { flex-basis: 100%; margin-top: 0; }

/* el héroe con tres de apoyo al lado */
@media (min-width: 1040px) { .par.tres { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.heroe .pie .delta { display: inline-flex; margin-right: 10px; }
.heroe .pie .kpi-sem { font-size: 12px; }
.heroe .heroe-dentro .fig { margin: 0 -4px; }
.heroe .fig-leyenda { display: none; }

/* qué está en rojo: el "20 segundos" */
.en-rojo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px var(--e3); border-radius: var(--r); border: 1px solid var(--borde); background: var(--sup);
  font-size: 13px;
}
.en-rojo.mal { border-color: color-mix(in srgb, var(--mal) 40%, transparent); }
.en-rojo-titulo { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); }
.en-rojo-titulo i { color: var(--mal); font-style: normal; font-size: 9px; }
.en-rojo a.chapa { text-decoration: none; cursor: pointer; }
.en-rojo a.chapa:hover { filter: brightness(1.15); }
body.con-def .en-rojo .def { flex-basis: 100%; margin-top: 0; }

/* los bloques y sus tarjetas */
.bloque { display: flex; flex-direction: column; gap: var(--e2); }
.bloque > header { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.bloque > header h3 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.bloque-nota { font-size: 12px; color: var(--ink-3); }
.bloque.apagado > header h3 { color: var(--ink-3); }
.kpis { display: grid; gap: var(--e2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  position: relative; min-width: 0; min-height: 128px;
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 14px var(--e3) 14px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color .15s, background .15s;
}
.kpi[data-ir] { cursor: pointer; }
.kpi[data-ir]:hover, .kpi[data-ir]:focus-visible { border-color: var(--ink-3); }
.kpi.marcada { border-color: var(--s1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s1) 22%, transparent); }
.kpi-cabeza { display: flex; align-items: center; gap: var(--e2); min-height: 18px; }
.kpi .etiqueta { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); min-width: 0; }
.kpi .valor { font-size: 26px; font-weight: 640; letter-spacing: -.035em; line-height: 1.15; margin-top: 3px; font-variant-numeric: proportional-nums; }
.kpi .delta.plano { font-weight: 500; }
.kpi-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; min-height: 18px; }
.kpi-sem { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.kpi-sem i { font-style: normal; font-size: 9px; line-height: 1; color: var(--ink-3); }
.kpi-sem.bien i { color: var(--bien); }
.kpi-sem.ojo i  { color: var(--ojo); }
.kpi-sem.mal i  { color: var(--mal); }
.kpi-sem.bien { color: var(--bien-txt); }
.kpi-sem.ojo  { color: var(--ojo); }
.kpi-sem.mal  { color: var(--mal); }
.kpi-nota { font-size: 11.5px; color: var(--ink-3); }
.kpi .chispa { width: 58px; height: 18px; }
/* apagada: mismo alto, borde punteado, «—», y la línea que dice qué la enciende */
.kpi.apagada { border-style: dashed; background: transparent; }
.kpi.apagada .valor { color: var(--ink-3); font-weight: 500; }
.kpi-motivo { font-size: 12px; line-height: 1.4; color: var(--ink-3); }

/* las figuras, dos por fila; el eje % es fijo. A media pantalla doce etiquetas de mes no entran:
   se cae una sí y una no, como en el teléfono. Los extremos se quedan siempre. */
.figs .fig-eje-x span:nth-child(even) { display: none; }
.figs .fig-eje-x span.primera, .figs .fig-eje-x span.ultima { display: block; }
.figs .tarjeta { background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r); padding: var(--e3) var(--e4) var(--e4); }
.fig-leyenda { justify-content: flex-end; margin-bottom: 6px; }
.tabla-ceo th[scope="row"] { white-space: nowrap; }
.tabla-ceo td { font-variant-numeric: tabular-nums; }

/* presentar: sin lateral, sin cabecera, más aire, tipografía un paso más grande. Para el Zoom. */
body.presentar .cabecera, body.presentar .lateral { display: none; }
body.presentar .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "principal"; }
body.presentar .lienzo { max-width: 1360px; --gutter: 40px; }
body.presentar .kpi .valor { font-size: 30px; }
body.presentar .ahora, body.presentar .en-rojo, body.presentar .kpi-motivo, body.presentar .bloque > header h3 { font-size: 15px; }
body.presentar .heroe .valor { font-size: clamp(56px, 6.4vw, 84px); }

@media (max-width: 1039px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 14px 12px; min-height: 112px; }
  .kpi .valor { font-size: 22px; }
  .ahora { padding: 10px 14px; font-size: 13px; }
  .ahora-dia { margin-left: 0; flex-basis: 100%; }
  .figs .tarjeta { padding: var(--e3); }
  .filtros-ceo { row-gap: 8px; }
  body.presentar .lienzo { --gutter: 16px; }
}

/* ── Los gastos (pantalla 10): cada renglón con nombre ───────────────────── */
.tabla-gastos th[scope="row"] small, .tabla-gastos td small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; font-family: var(--sans); letter-spacing: 0; }
.tabla-gastos th[scope="row"] { font-weight: 600; max-width: 34ch; }
.tabla-gastos tr.grupo th, .tabla-gastos tr.grupo td { background: var(--fondo-2, transparent); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); padding-top: 10px; }
.tabla-gastos tr.excluido th, .tabla-gastos tr.excluido td { color: var(--ink-3); }
.tabla-gastos tr.excluido th[scope="row"] { text-decoration: line-through; text-decoration-color: var(--ink-3); }
table th.num, table td.num { text-align: right; font-variant-numeric: tabular-nums; }