/* ══════════════════════════════════════════════════════════════════════
   GRÁFICAS DEL PROGRAMA — los siete sistemas dibujan con estas clases.

   Por qué existe (2026-08-26): los tableros eran rejillas de números
   grandes. Un número suelto obliga a comparar de memoria —«¿1,532 es
   mucho contra 4,804?»— y quien presenta estas cifras ante la dirección
   no siempre es quien las calculó. Una barra contesta la proporción sin
   hacer la cuenta.

   Reglas que sostienen estos componentes:

   - EL COLOR NUNCA VA SOLO. Toda barra lleva su cifra escrita y toda
     leyenda su número. En una unidad de salud siempre hay alguien que
     no distingue rojo de verde, y un tablero que solo se entiende a
     color no se entiende.
   - SE DIBUJA CON CSS, no con una librería de gráficas. Estos tableros
     se abren desde teléfonos de campo con red intermitente: un <div>
     con un `width` en porcentaje ya está pintado cuando el JS de una
     librería ni ha empezado a descargar. Y el programa no manda datos
     de salud al navegador para que él los agrupe — la agregación se
     hace en SQL, igual que en el mapa de salud materna.
   - «SIN MEDIR» ES SU PROPIO SEGMENTO, en gris. Nunca se reparte entre
     los otros ni se pinta de rojo: acusaría de descontrol a quien nadie
     ha evaluado. Es la misma regla del listado de crónicas.
   - LOS PORCENTAJES DICEN SOBRE QUÉ. Un «68%» sin denominador es la
     forma más fácil de que una cifra se cite mal en una reunión.

   Los colores salen de tokens.css (--serie-1..6, --ok, --alerta,
   --critico, --sin-dato) y están VALIDADOS como grupo contra daltonismo
   y contraste. No se meten colores sueltos aquí.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Marco común de una gráfica ─────────────────────────────────────── */
.gr {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: .85rem;
  padding: 1.05rem 1.25rem 1.15rem;
  margin-bottom: 1.2rem;
}
.gr-cab { margin-bottom: .9rem; }
.gr-cab h3 { margin: 0 0 .15rem; font-size: .98rem; letter-spacing: -.01em; }
.gr-cab .nota { margin: 0; font-size: .83rem; color: var(--tinta-suave); line-height: 1.4; }

/* Dos gráficas lado a lado cuando hay ancho; una sola en teléfono. */
.gr-par {
  display: grid; gap: 1.2rem; margin-bottom: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.gr-par > .gr { margin-bottom: 0; }

/* ── Barras horizontales ────────────────────────────────────────────
   La forma por omisión del programa. Horizontal y no vertical porque
   las etiquetas son nombres largos —«Sintomáticos respiratorios sin
   examinar», once jurisdicciones— y en vertical habría que girarlas.  */
.gr-barras { display: flex; flex-direction: column; gap: .5rem; }

.gr-barra {
  display: grid; grid-template-columns: 1fr auto;
  gap: .1rem .8rem; align-items: baseline;
}
.gr-barra .etq {
  font-size: .85rem; color: var(--tinta-media); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}
/* La cifra va SIEMPRE escrita: es lo que hace legible la gráfica sin
   depender del color ni de medir la barra a ojo. */
.gr-barra .val {
  font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tinta); white-space: nowrap;
}
.gr-barra .val .de {
  font-weight: 500; color: var(--tinta-suave); font-size: .78rem;
}
/* `display: block` en los dos, y no es cosmético: la pista y el relleno
   son <span>, que por omisión son inline, y en un elemento inline el
   `height` se IGNORA. Sin esto la pista gris se dibuja (por ser grid
   item, que la blockifica) pero el relleno de color queda de altura
   cero: la gráfica sale vacía, con todas las barras en blanco, y nada
   falla ni avisa. Se vio al capturar la pantalla, no al compilar. */
.gr-barra .pista {
  grid-column: 1 / -1; display: block;
  height: 9px; border-radius: 999px;
  background: var(--pista); overflow: hidden;
}
.gr-barra .relleno {
  display: block;
  height: 100%; border-radius: 999px;
  background: var(--serie-1);
  min-width: 3px;               /* un valor >0 nunca se ve como cero */
}

/* Los estados clínicos mandan sobre las series: en los siete sistemas
   «en control» es jade y «fuera de meta» es rojo, siempre. */
.gr-barra.ok      .relleno { background: var(--ok); }
.gr-barra.alerta  .relleno { background: var(--alerta); }
.gr-barra.critico .relleno { background: var(--critico); }
.gr-barra.gris    .relleno { background: var(--sin-dato); }
.gr-barra.s2 .relleno { background: var(--serie-2); }
.gr-barra.s3 .relleno { background: var(--serie-3); }
.gr-barra.s4 .relleno { background: var(--serie-4); }
.gr-barra.s5 .relleno { background: var(--serie-5); }
.gr-barra.s6 .relleno { background: var(--serie-6); }

/* ── Barra apilada de una sola línea ────────────────────────────────
   Para «de este total, cuánto está en control / fuera / sin medir».
   Los segmentos se separan 2px con el color del fondo: pegados, dos
   colores contiguos se leen como uno solo.                            */
.gr-apilada {
  display: flex; height: 26px; border-radius: .4rem;
  overflow: hidden; background: var(--pista); gap: 2px;
}
.gr-apilada .seg {
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; color: #fff;
  min-width: 2px; overflow: hidden; white-space: nowrap;
}
.gr-apilada .seg.ok      { background: var(--ok); }
.gr-apilada .seg.alerta  { background: var(--alerta); }
.gr-apilada .seg.critico { background: var(--critico); }
/* El gris de «sin medir» es claro: el texto blanco encima no se leería. */
.gr-apilada .seg.gris    { background: var(--sin-dato); color: var(--tinta); }
.gr-apilada .seg.s1 { background: var(--serie-1); }
.gr-apilada .seg.s2 { background: var(--serie-2); }
.gr-apilada .seg.s3 { background: var(--serie-3); }
.gr-apilada .seg.s4 { background: var(--serie-4); }

/* ── Leyenda ────────────────────────────────────────────────────────
   Obligatoria en cuanto hay dos series. Lleva el NÚMERO, no solo el
   nombre: es la codificación secundaria que permite leer la gráfica
   sin distinguir los colores.                                         */
.gr-leyenda {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin-top: .75rem; font-size: .82rem;
}
.gr-leyenda .it { display: flex; align-items: center; gap: .4rem; color: var(--tinta-media); }
.gr-leyenda .pt { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.gr-leyenda .pt.ok      { background: var(--ok); }
.gr-leyenda .pt.alerta  { background: var(--alerta); }
.gr-leyenda .pt.critico { background: var(--critico); }
.gr-leyenda .pt.gris    { background: var(--sin-dato); }
.gr-leyenda .pt.s1 { background: var(--serie-1); }
.gr-leyenda .pt.s2 { background: var(--serie-2); }
.gr-leyenda .pt.s3 { background: var(--serie-3); }
.gr-leyenda .pt.s4 { background: var(--serie-4); }
.gr-leyenda .n { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ── Cifra destacada con su proporción ──────────────────────────────
   Sustituye a la tarjeta de número suelto cuando ese número es parte
   de un todo. «1,532» no dice nada; «1,532 de 4,804» con su barra, sí. */
.gr-titular { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.gr-titular .n {
  font-size: 2rem; font-weight: 750; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--tinta);
}
.gr-titular .n.ok { color: var(--jade-osc); }
.gr-titular .n.alerta { color: var(--alerta); }
.gr-titular .n.critico { color: var(--critico); }
.gr-titular .de { font-size: .88rem; color: var(--tinta-suave); }
.gr-titular .pct {
  font-size: .78rem; font-weight: 700; padding: .12rem .5rem;
  border-radius: 999px; background: var(--fondo); color: var(--tinta-media);
}

/* ── Columnas: la única forma vertical, para series de TIEMPO ───────
   Vertical solo cuando el eje es el tiempo, porque el tiempo se lee de
   izquierda a derecha. Para categorías se usan barras horizontales.   */
.gr-columnas {
  display: flex; align-items: flex-end; gap: 3px;
  height: 120px; padding-top: .3rem;
}
.gr-columnas .col {
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%; min-width: 0;
}
.gr-columnas .col .tallo {
  background: var(--serie-1); border-radius: 3px 3px 0 0; min-height: 2px;
}
.gr-columnas .col.pico .tallo { background: var(--critico); }
.gr-ejex {
  display: flex; gap: 3px; margin-top: .35rem;
  font-size: .68rem; color: var(--tinta-suave);
}
.gr-ejex span {
  flex: 1; text-align: center; min-width: 0;
  overflow: hidden; white-space: nowrap;
}

/* ── Barra por segmentos, una por renglón ─────────────────────────
   (2026-09-24, pedido del programa de dengue: «que se vea más visual y
   menos números, aún parece Excel».) Cada renglón es una categoría —una
   frontera, un municipio, un diagnóstico— y su barra se parte en
   confirmados / probables / descartados, u hospitalizados / ambulatorios.
   El LARGO total es proporcional al renglón mayor (así se comparan los
   renglones entre sí) y los segmentos dicen de qué está hecho cada uno.
   Se usa dentro de `.gr-barra`: la pista pasa a flex y cada `.relleno`
   es un segmento con su propio ancho, en % del renglón mayor.         */
.gr-barra .pista.multi { display: flex; gap: 2px; }
.gr-barra .pista.multi .relleno { border-radius: 0; min-width: 0; }
.gr-barra .pista.multi .relleno:first-child { border-radius: 999px 0 0 999px; }
.gr-barra .pista.multi .relleno:last-child  { border-radius: 0 999px 999px 0; }
.gr-barra .pista.multi .relleno:only-child  { border-radius: 999px; }
.gr-barra .pista.multi .relleno.ok      { background: var(--ok); }
.gr-barra .pista.multi .relleno.alerta  { background: var(--alerta); }
.gr-barra .pista.multi .relleno.critico { background: var(--critico); }
.gr-barra .pista.multi .relleno.gris    { background: var(--sin-dato); }
.gr-barra .pista.multi .relleno.s1 { background: var(--serie-1); }
.gr-barra .pista.multi .relleno.s2 { background: var(--serie-2); }
.gr-barra .pista.multi .relleno.s3 { background: var(--serie-3); }
.gr-barra .pista.multi .relleno.s4 { background: var(--serie-4); }
.gr-barra .pista.multi .relleno.s5 { background: var(--serie-5); }
.gr-barra .pista.multi .relleno.s6 { background: var(--serie-6); }
/* Un renglón gruesa cuando es LA barra de la gráfica, no una de veinte. */
.gr-barra.gruesa .pista { height: 14px; }
/* La etiqueta puede ser un enlace (tocar una frontera la filtra). */
.gr-barra .etq a { color: inherit; font-weight: 600; }
.gr-barra.activa .etq { color: var(--tinta); font-weight: 700; }

/* ── Minigráfica de tendencia (4 a 12 columnas, dentro de una tabla) ─
   Para «cómo viene esta localidad»: cuatro semanas en cuatro números se
   comparan de memoria; en cuatro columnas se ve si sube. La última va
   en color —es la semana que se decide— y el número va debajo, siempre. */
.gr-mini {
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: 30px; vertical-align: middle;
}
.gr-mini .c {
  width: 12px; background: var(--serie-1); opacity: .45;
  border-radius: 2px 2px 0 0; min-height: 2px;
}
.gr-mini .c.ult { opacity: 1; }
.gr-mini .c.ult.sube { background: var(--critico); }
.gr-mini-n {
  display: flex; gap: 3px; font-size: .64rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.gr-mini-n span { width: 12px; text-align: center; }

/* ── Celda con su barra (matrices de indicadores) ──────────────────
   Un porcentaje en una matriz de 12 × 9 se lee número por número; con
   una barra corta debajo, la fila se lee de un vistazo. El color es el
   del semáforo de la celda; sin color cuando el denominador no alcanza. */
.gr-celda { display: block; height: 4px; border-radius: 999px;
            background: var(--pista); margin-top: 3px; overflow: hidden; }
.gr-celda > span { display: block; height: 100%; background: var(--sin-dato);
                   border-radius: 999px; }
.ok      > .gr-celda > span { background: var(--ok); }
.alerta  > .gr-celda > span { background: var(--alerta); }
.critico > .gr-celda > span { background: var(--critico); }

/* ── «Ver la tabla»: los números no se pierden ─────────────────────
   Quien necesita copiar la cifra a un oficio la tiene plegada bajo la
   gráfica. Primero se ve; el detalle, a un toque.                     */
details.gr-tabla { margin-top: .8rem; }
details.gr-tabla > summary {
  cursor: pointer; font-size: .8rem; font-weight: 600;
  color: var(--tinta-suave); list-style: none;
}
details.gr-tabla > summary::-webkit-details-marker { display: none; }
details.gr-tabla > summary::before { content: "+ "; }
details.gr-tabla[open] > summary::before { content: "− "; }
details.gr-tabla > summary:hover { color: var(--tinta); }
details.gr-tabla[open] > summary { margin-bottom: .6rem; }

/* ── Cuando no hay datos ───────────────────────────────────────────
   Una gráfica vacía se lee como «no hay problema». Se dice que falta
   el dato, que es distinto.                                          */
.gr-vacio {
  padding: 1.1rem; text-align: center; font-size: .85rem;
  color: var(--tinta-suave); background: var(--fondo);
  border-radius: .5rem; line-height: 1.5;
}

@media (max-width: 560px) {
  .gr { padding: .9rem 1rem 1rem; }
  /* En teléfono el nombre va ARRIBA y la cifra debajo: con las dos en un
     renglón, una cifra larga («325 · 14 conf. · 149 prob. · …») apretaba
     la etiqueta hasta dejar «V…» en vez de «Veracruz» (2026-09-24). */
  .gr-barra { grid-template-columns: minmax(0, 1fr); }
  .gr-barra .val { white-space: normal; line-height: 1.35; }
  .gr-titular .n { font-size: 1.7rem; }
  .gr-columnas { height: 96px; }

  /* ── El desborde horizontal de las tarjetas de cifra ───────────────
     `.cifras` es `minmax(155px, 1fr)` en las cuatro apps, y `minmax`
     impone un MÍNIMO que el grid no puede bajar: en un teléfono de
     390px caben dos columnas de 155px (310) más el gap (14) y el
     padding de `main` (45) = 369… pero el texto largo de una tarjeta
     («confirmados SIN estudio de contactos») no cabe en 155px y estira
     la columna, y con ella la página entera. El resultado es que el
     tablero se corta por la derecha en campo, que es justo donde se
     consulta.

     Se arregla aquí y no en las cuatro hojas por lo mismo que la
     paleta: un solo lugar que corregir. Bajo 560px la rejilla pasa a
     UNA columna, que en un teléfono es lo legible de todos modos.

     `minmax(0, 1fr)` y no `1fr` a secas: el valor implícito de un grid
     item es `min-width: auto`, o sea «no me encojas por debajo de mi
     contenido», y una palabra larga volvería a desbordar. */
  .cifras {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Y que ninguna palabra larga —una CLUES, un correo— empuje el ancho. */
  .cifra { min-width: 0; overflow-wrap: anywhere; }
}

/* En papel, los rellenos de color se van en tóner y muchas impresoras
   de unidad son monocromas; se pide que respeten el color para que la
   proporción siga siendo legible, y que la gráfica no se parta en dos
   páginas por la mitad. */
@media print {
  .gr { break-inside: avoid; border-color: #999; }
  .gr-barra .relleno,
  .gr-apilada .seg {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   HUECO PARA EL BOTÓN DE MENÚ EN TELÉFONO

   Va en ESTE archivo y no en `armazon.css` por el orden de carga: cada
   app sirve su hoja (`tb.css`, `vectores.css`…) DESPUÉS del armazón, y
   todas declaran `main { padding: 1.8rem 1.4rem 4rem }` con el
   shorthand, que borra cualquier `padding-top` anterior. `graficas.css`
   es la última en cargar, así que aquí sí gana.

   Sin esto el botón —que es `fixed` y no ocupa lugar en el flujo— se
   encima sobre el `<h1>` y se come las primeras letras del título.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  main { padding-top: 4.6rem; }
}