/*
 * Reporte A4 «Reporte de Atenciones» (Salud Ocupacional · PAE) · v3.
 * Dos orientaciones (REQUISITOS-V3 §2, DECISIONES-V3 §2): .hoja--apaisada (inicial; 841,89 × 595,28 pt, cuerpo de
 * 761,89 × 482 pt en tres columnas de 241,96 pt) y .hoja--vertical (595,28 × 841,89 pt, cuerpo de 490,28 × 695 pt, la
 * rejilla de la v2). La geometría vive en variables de .hoja (--hoja-ancho, --m-x, --cuerpo-alto…): las reglas no repiten
 * medidas por orientación. La hoja en pantalla ES el PDF; el @page (tamaño y orientación) lo inyecta la vista en
 * <style id="pagina-impresion"> según la orientación activa (la regla de abajo es el respaldo vertical).
 * Paleta: solo los tokens :root de styles.css y los colores de categoría, familia y clasificación que vienen inline desde
 * el modelo; el texto nunca lleva el color de la serie. Tipografía: SEIS cuerpos en todo el reporte (--h-fs-1…6 =
 * 7 · 8 · 9 · 12,5 · 17 · 34 pt); los SVG del catálogo (graficos.js, modo hoja) usan 7 y 8 pt y el número del anillo,
 * 17 pt. Ningún texto baja de 7 pt. Cabecera: PAE a la izquierda y Brisa a la derecha a la misma altura óptica (ancho de
 * Brisa = 2,7 × el alto de PAE, la misma razón que la barra y el acceso de styles.css: con 10/3 las mayúsculas de «BRISA»
 * quedaban a ×1,69 de las de «ENERGY» y el logo del prestador dominaba al del cliente).
 * Sin sombras ni efectos de pantalla dentro de la hoja; los degradés de las marcas imprimen (print-color-adjust: exact).
 * Visor: en ≤ 760 px la hoja va al 100 % (sin selector de zoom) y el desplazamiento horizontal parte del borde izquierdo
 * de la hoja; el paginador y los conmutadores miden ≥ 44 px con puntero grueso.
 */

.hoja {
  /* Alias locales: mismos tokens de la aplicación, con nombres cortos para la hoja. */
  --h-tinta: var(--tinta, #1F2A37);
  --h-tinta-2: var(--tinta-2, #4B5563);
  --h-tinta-3: var(--tinta-3, #6B7280);
  --h-titulo: var(--titulo, #0A3F7C);
  --h-acento: var(--acento, #0A4A8F);
  --h-acento-oscuro: var(--acento-oscuro, #083B73);
  --h-acento-medio: var(--acento-medio, #176FA6);
  --h-acento-suave: var(--acento-suave, #E8F0F9);
  --h-verde: var(--verde, #007038);
  --h-regla: var(--borde, #C8D9E8);
  --h-separador: var(--borde-suave, #DEE4E9);
  --h-fondo-cab: var(--fondo-3, #EAF2FA);
  --h-cebra: var(--fondo-2, #F7FAFD);
  --h-fondo-card: var(--acento-suave, #E8F0F9);
  /* Escala tipográfica de la hoja (pt): SEIS cuerpos para todo el reporte. Nada más. */
  --h-fs-1: 8pt;
  --h-fs-2: 8pt;
  --h-fs-3: 9pt;
  --h-fs-4: 12.5pt;
  --h-fs-5: 17pt;
  --h-fs-6: 34pt;
  /* Geometría (vertical; .hoja--apaisada la redefine). */
  --hoja-ancho: 595.28pt;
  --hoja-alto: 841.89pt;
  --m-x: 52.5pt;
  --logos: 31.5pt;            /* alto del logo PAE; Brisa: ancho = 2,7 × este alto */
  --logos-top: 25pt;
  --regla-cab: 71.725pt;
  --cuerpo-top: 85pt;
  --cuerpo-alto: 695pt;
  --regla-pie: 786.275pt;
  --fuente-top: 792.9pt;
  --pie-top: 806.6pt;
  --num-top: 805.8pt;

  position: relative;
  width: var(--hoja-ancho);
  height: var(--hoja-alto);
  overflow: hidden;
  background: #FFFFFF;
  color: var(--h-tinta);
  font-family: 'Informe Sans', 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: var(--h-fs-3);
  line-height: 1.2;
  font-kerning: none;
  font-variant-ligatures: none;
  font-variant-numeric: normal;
  font-feature-settings: 'kern' 0, 'liga' 0, 'calt' 0;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  text-rendering: geometricPrecision;
  box-sizing: border-box;
}
.hoja--apaisada {
  --hoja-ancho: 841.89pt;
  --hoja-alto: 595.28pt;
  --m-x: 40pt;
  --logos: 28pt;
  --logos-top: 20pt;
  --regla-cab: 58pt;
  --cuerpo-top: 64pt;
  --cuerpo-alto: 482pt;
  --regla-pie: 552pt;
  --fuente-top: 557pt;
  --pie-top: 568pt;
  --num-top: 567.4pt;
}
.hoja *, .hoja *::before, .hoja *::after { box-sizing: border-box; }
:where(.hoja) :where(p, h1, h2, h3, table, ul, dl, dd) { margin: 0; }

/* ─── Encabezado: PAE a la izquierda, alcance, separador y Brisa a la derecha (misma altura óptica) ─── */
.hoja__cab { position: absolute; left: var(--m-x); right: var(--m-x); top: var(--logos-top); height: var(--logos); display: flex; align-items: center; gap: 12pt; }
.hoja__pae { display: block; flex: none; width: calc(var(--logos) * 406 / 164); height: var(--logos); }
.hoja__brisa { display: block; flex: none; width: calc(var(--logos) * 2.7); height: calc(var(--logos) * 2.7 * 107 / 409); }
.hoja__cab-t { flex: 1 1 auto; min-width: 0; text-align: right; }
.hoja__cab-sep { flex: none; align-self: stretch; width: 0.55pt; margin: 3pt 0; background: var(--h-regla); }
.hoja__cab-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--h-fs-2); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.hoja__cab-2 { font-size: var(--h-fs-2); color: var(--h-tinta-2); margin-top: 3pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja__regla-cab { position: absolute; left: var(--m-x); right: var(--m-x); top: var(--regla-cab); border-top: 0.55pt solid var(--h-regla); }
.hoja__regla-pie { position: absolute; left: var(--m-x); right: var(--m-x); top: var(--regla-pie); border-top: 0.45pt solid var(--h-regla); }
.hoja__fuente { position: absolute; left: var(--m-x); right: var(--m-x); top: var(--fuente-top); font-size: var(--h-fs-1); color: var(--h-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja__pie { position: absolute; left: var(--m-x); right: calc(var(--m-x) + 48pt); top: var(--pie-top); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--h-fs-1); line-height: 1.25; color: var(--h-tinta-2); }
.hoja__num { position: absolute; right: var(--m-x); top: var(--num-top); font-size: var(--h-fs-2); color: var(--h-tinta-2); font-variant-numeric: tabular-nums; }

/* ─── Área de contenido (flujo) ─── */
/* El recorte empieza 8,2 pt antes de la primera línea para no cortar tildes de mayúsculas (Ó, É). */
.hoja__cuerpo { position: absolute; left: var(--m-x); right: var(--m-x); top: var(--cuerpo-top); height: var(--cuerpo-alto); padding-top: 8.2pt; padding-bottom: 6pt; overflow: hidden; }
/* En vertical, el pie conserva completa la fuente y deja reserva al imprimir. */
.hoja--vertical { --pie-top: 815pt; --num-top: 814.2pt; }
.hoja--vertical .hoja__cuerpo { padding-bottom: 8pt; }
.hoja--vertical .hoja__fuente { white-space: normal; line-height: 9pt; text-overflow: clip; }

.cej { font-size: var(--h-fs-2); font-weight: 600; color: var(--h-acento-medio); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.tit { margin-top: 3pt; font-size: var(--h-fs-5); font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; color: var(--h-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tit__cont { font-size: var(--h-fs-4); font-weight: 500; color: var(--h-tinta-2); }
/* Título con el período a la derecha (hoja 1 apaisada): misma línea de base. */
.tit-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 18pt; margin-top: 3pt; }
.tit-fila .tit { flex: none; margin-top: 0; }
.tit-fila .per { min-width: 0; margin-top: 0; text-align: right; text-wrap: balance; }
.sub { margin-top: 2.5pt; font-size: var(--h-fs-3); color: var(--h-tinta-2); text-wrap: pretty; }
.per { margin-top: 3pt; font-size: var(--h-fs-3); color: var(--h-tinta-2); text-wrap: pretty; }
.per--filtros { margin-top: 2pt; font-size: var(--h-fs-2); }
.h2 { font-size: var(--h-fs-4); font-weight: 600; line-height: 1.2; color: var(--h-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Título oficial largo («Causas en el rol de llamados no accidentológicos»): hasta dos renglones en lugar de recortarse. */
.h2.h2--dos { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: clip; text-wrap: balance; }
/* Pregunta o descripción bajo un título: hasta dos líneas (el maquetador mide el alto real), nunca desborda. */
.desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2.5pt; font-size: var(--h-fs-2); line-height: 10.2pt; color: var(--h-tinta-2); text-wrap: pretty; }
.vacio { font-size: var(--h-fs-3); color: var(--h-tinta-2); padding: 10pt 0; }
.rep-nota { margin-top: 4pt; font-size: var(--h-fs-1); line-height: 9pt; color: var(--h-tinta-2); text-wrap: pretty; }
.rep-nota--tabla { margin-top: 3pt; }
/* Lectura de una línea de cada panel (un hecho que trae el modelo): filete de acento a la izquierda, tinta. */
.rep-lectura { margin-top: 5pt; padding-left: 5pt; border-left: 1.5pt solid var(--h-acento); font-size: var(--h-fs-2); line-height: 10.2pt; color: var(--h-tinta); text-wrap: pretty; }
/* Subtítulo de bloque dentro de una columna (p. ej. «Accidentológicos», «Por mes»). Los rótulos en mayúsculas de una
   línea (este y .rep-heroe__e) recortan con `clip` y 2 pt de margen: con `hidden` el recorte se comía la tilde de las
   mayúsculas acentuadas («PERÍODO»: la tinta de Í sube a 0,94 em y la fuente declara 0,81 em). La elipsis y la
   verificación del harness (scrollWidth > clientWidth) funcionan igual. */
.rep-sub { font-size: var(--h-fs-1); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--h-tinta-2); white-space: nowrap; overflow: clip; overflow-clip-margin: 2pt; text-overflow: ellipsis; }
/* Rótulo de un gráfico chico con su lectura a la derecha («CAVAS · más controles: junio de 2026 (37)»). */
.rep-sub-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8pt; margin-top: 6pt; }
.rep-sub-fila .rep-sub { flex: none; }
.rep-sub__nota { min-width: 0; font-size: var(--h-fs-1); color: var(--h-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Rejilla: filas de columnas con ancho fijo en pt (la fila la arma render.js con grid-template-columns) ─── */
.rep-fila { display: grid; align-items: start; }
.rep-fila--estirar { align-items: stretch; }
.rep-fila--estirar > .rep-celda > .rep-control { height: 100%; }
.rep-celda { min-width: 0; }
.rep-graf { line-height: 0; }
.rep-graf svg { display: block; max-width: 100%; }

/* Lectura rápida (hoja 1) */
.lectura { padding: 5pt 10pt 6pt 10pt; background: var(--h-fondo-card); border-left: 2pt solid var(--h-acento); }
.lectura__t { font-size: var(--h-fs-2); font-weight: 600; color: var(--h-acento); letter-spacing: 0.02em; text-transform: uppercase; }
.lectura__l { margin: 2pt 0 0; padding: 0 0 0 10pt; }
.lectura__l li { font-size: var(--h-fs-3); line-height: 11.4pt; color: var(--h-tinta); text-wrap: pretty; }
.lectura__l li + li { margin-top: 1.5pt; }
.lectura--columna { padding: 7pt 10pt 8pt 10pt; }

/* ─── Indicadores (hoja 1): héroe y seis secundarios (DECISIONES-V2 §6) ─── */
.rep-indic { display: grid; grid-template-columns: 178pt minmax(0, 1fr); column-gap: 16pt; align-items: stretch; }
.rep-heroe { position: relative; min-width: 0; padding: 8pt 12pt 8pt; background: var(--h-cebra); border-top: 2.4pt solid var(--c, var(--h-titulo)); }
.rep-heroe__e { font-size: var(--h-fs-2); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-tinta-2); white-space: nowrap; overflow: clip; overflow-clip-margin: 2pt; text-overflow: ellipsis; }
.rep-heroe__v { margin-top: 2pt; font-size: var(--h-fs-6); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--h-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-heroe__d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2pt; font-size: var(--h-fs-2); line-height: 10pt; color: var(--h-tinta-2); text-wrap: pretty; }
.rep-heroe__c { margin-top: 4pt; font-size: var(--h-fs-2); line-height: 9.6pt; color: var(--h-tinta-2); text-wrap: pretty; }
.rep-heroe__spark { margin-top: 6pt; line-height: 0; }
.rep-heroe__spark svg { display: block; max-width: 100%; }
.rep-heroe__eje { display: flex; justify-content: space-between; gap: 4pt; margin-top: 2pt; font-size: var(--h-fs-1); line-height: 8.4pt; color: var(--h-tinta-2); white-space: nowrap; }
.rep-heroe__eje span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
/* Héroe compacto: la sparkline a la derecha de la cifra, con el eje en la línea de base del número (≈ 40 pt menos). */
.rep-heroe__fila { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12pt; align-items: last baseline; margin-top: 2pt; }
.rep-heroe__fila .rep-heroe__v { margin-top: 0; }
.rep-heroe__fila .rep-heroe__spark { justify-self: end; margin-top: 0; min-width: 0; }
/* Horizontes del héroe: lista de dos columnas (OCTUBRE 2026 · 48 / PERÍODO ANTERIOR · 1.099 ▲ +3,9 %). */
.rep-heroe__h { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6pt; row-gap: 2.5pt; align-items: center; margin-top: 6pt; padding-top: 5pt; border-top: 0.55pt solid var(--h-separador); }
.rep-heroe__h dt { font-size: var(--h-fs-1); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15; color: var(--h-tinta-2); overflow-wrap: anywhere; text-wrap: balance; }
.rep-heroe__h dd { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4pt; font-size: var(--h-fs-3); font-weight: 700; line-height: 1.1; color: var(--h-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Chip de variación: flecha + «+8,9 %»; sube / baja / igual son direcciones, no juicios (un total mayor no es «mejor»). */
.rep-delta { display: inline-flex; align-items: center; gap: 1.8pt; height: 9.4pt; padding: 0 3.6pt; border-radius: 99pt; background: var(--h-fondo-cab); color: var(--h-tinta); font-size: var(--h-fs-1); font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-delta--sube { background: var(--h-acento-suave); color: var(--h-acento-oscuro); }
.rep-delta--baja { background: var(--h-fondo-cab); color: var(--h-tinta-2); }
.rep-delta--igual { background: transparent; box-shadow: inset 0 0 0 0.55pt var(--h-regla); color: var(--h-tinta-2); }
.rep-sinref { color: var(--h-tinta-3); }
.rep-kpis { display: grid; row-gap: 7pt; align-content: stretch; }
.rep-kpi { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 5pt 0 0; border-top: 0.7pt solid var(--h-separador); }
.rep-kpi::before { content: ''; position: absolute; left: 0; top: -0.7pt; width: 22pt; height: 2.4pt; background: var(--c, var(--h-acento)); }
.rep-kpi__v { display: flex; align-items: center; justify-content: space-between; gap: 4pt; font-size: var(--h-fs-5); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: var(--h-titulo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-kpi__v > span { min-width: 0; }
.rep-kpi__u { margin-left: 3pt; font-size: var(--h-fs-3); font-weight: 500; letter-spacing: 0; color: var(--h-tinta-2); }
.rep-kpi__e { margin-top: 2pt; font-size: var(--h-fs-2); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
/* Detalle: hasta dos líneas («39 accidentológicos · 47 no accidentológicos»); nunca se recorta con elipsis. */
.rep-kpi__d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1.5pt; font-size: var(--h-fs-1); line-height: 9pt; color: var(--h-tinta-2); text-wrap: pretty; }
/* Pie de la tarjeta (sparkline de 12 meses + horizontes), siempre contra el borde inferior: las tarjetas de una fila alinean. */
.rep-kpi__pie { margin-top: auto; padding-top: 3pt; }
.rep-kpi__spark { line-height: 0; }
.rep-kpi__spark svg { display: block; max-width: 100%; }
/* Horizontes de la tarjeta: «Mes 3 · Año 86 · Ant. 79». */
.rep-kpi__h { display: flex; flex-wrap: wrap; align-items: center; gap: 1pt 6pt; padding-top: 2pt; font-size: var(--h-fs-1); line-height: 8.6pt; color: var(--h-tinta-2); }
.rep-kpi__h span { display: inline-flex; align-items: center; gap: 2.6pt; white-space: nowrap; }
.rep-kpi__h b { font-weight: 600; color: var(--h-tinta); font-variant-numeric: tabular-nums; }

/* ─── Leyendas: muestra con el degradé del sistema + nombre en tinta (la identidad nunca va solo en el color) ─── */
.rep-leyenda { display: flex; flex-wrap: wrap; gap: 3pt 12pt; margin-top: 5pt; font-size: var(--h-fs-2); line-height: 1.2; color: var(--h-tinta-2); }
.rep-leyenda--mensual { margin-top: 4pt; }
.rep-leyenda--chica { gap: 2pt 8pt; margin-top: 4pt; font-size: var(--h-fs-1); }
.rep-leyenda__i { display: inline-flex; align-items: center; white-space: nowrap; }
.rep-leyenda__i i { display: inline-block; width: 7pt; height: 7pt; margin-right: 3.4pt; border-radius: 1.5pt; flex: none; }
.rep-leyenda__i b { margin-left: 2.4pt; font-weight: 600; color: var(--h-tinta); font-variant-numeric: tabular-nums; }
/* Título de panel con una nota a la derecha (misma línea de base): la descripción no ocupa una línea propia. */
.h2-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12pt; }
.h2-fila .h2 { flex: none; }
.h2__nota { min-width: 0; font-size: var(--h-fs-2); color: var(--h-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-sw { display: inline-block; width: 6.5pt; height: 6.5pt; margin-right: 5pt; border-radius: 1.4pt; vertical-align: -0.3pt; flex: none; }

/* Tablas chicas (derivaciones, resultados, clases, clasificaciones, ausentismo, diagnósticos, rankings) */
.rep-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--h-fs-3); }
.rep-tabla th, .rep-tabla td { padding: 0; font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.rep-tabla th { height: 13pt; background: var(--h-fondo-cab); font-size: var(--h-fs-1); font-weight: 600; color: var(--h-tinta-2); }
.rep-tabla td { border-bottom: 0.45pt solid var(--h-separador); }
.rep-tabla .c-l { text-align: left; padding-left: 6pt; }
/* Texto de la primera columna: se envuelve en dos líneas (la fila crece; el maquetador mide el alto real) en lugar de recortarse. */
.rep-tabla td.c-l { white-space: normal; overflow-wrap: anywhere; line-height: 1.12; padding-top: 1pt; padding-bottom: 1pt; text-wrap: pretty; }
.rep-tabla .c-n { text-align: right; padding-right: 4pt; font-variant-numeric: tabular-nums; }
.rep-tabla .c-p { text-align: right; padding-right: 6pt; color: var(--h-tinta-2); font-variant-numeric: tabular-nums; }
.rep-tabla .c-v { text-align: right; padding-right: 4pt; }
.rep-tabla tr.cero td { color: var(--h-tinta-3); }
.rep-tabla td.vacia { color: var(--h-tinta-2); padding: 4pt 6pt; white-space: normal; }
.rep-tabla tfoot td { border-top: 0.7pt solid var(--h-regla); border-bottom: 0; background: var(--h-fondo-cab); font-weight: 600; }
.rep-tabla tfoot td.c-p { color: var(--h-tinta); }
.rep-tabla--chica { font-size: var(--h-fs-2); }
/* Tabla chica: la celda de texto respeta filas de 10 pt (8 pt × 1,1 + 1 pt); un nombre largo igual envuelve y la fila crece. */
.rep-tabla--chica td.c-l { line-height: 1.1; padding-top: 0.5pt; padding-bottom: 0.5pt; }
.rep-tabla--horiz .c-l { padding-left: 4pt; }
.rep-horiz .rep-tabla td.c-l { font-weight: 500; }
/* Tabla del gráfico mensual: una columna por mes, cuerpo chico (--tam ≥ 7 pt) con la marca de color de cada categoría. */
.rep-tabla--mensual { font-size: var(--tam, var(--h-fs-2)); }
.rep-tabla--mensual th { height: 10.5pt; font-size: var(--tam, var(--h-fs-2)); }
.rep-tabla--mensual td.c-l { white-space: nowrap; padding-top: 0; padding-bottom: 0; line-height: 1; }
.rep-tabla--mensual .c-n { padding-right: 3pt; }
.rep-tabla--mensual .rep-sw { width: 5.5pt; height: 5.5pt; margin-right: 4pt; }
/* Tabla por categoría (hoja 1): una fila por categoría; en dos mitades lado a lado dentro de la misma tabla (las filas
   alinean), separadas por una columna en blanco sin filete; el total cierra la segunda mitad. Una categoría sin atenciones
   va en tinta 3 (sin ocultarla). */
.rep-tabla .c-sep { border-bottom: 0; background: transparent; }
.rep-tabla th.c-sep { background: transparent; }
.rep-tabla td.cero { color: var(--h-tinta-3); }
.rep-tabla td.c-tot { border-top: 0.7pt solid var(--h-regla); border-bottom: 0; background: var(--h-fondo-cab); font-weight: 600; color: var(--h-tinta); }
/* Versión mínima (7 pt) de una tabla chica: la tabla por categoría en dos mitades al pie de la columna del héroe. */
.rep-tabla--mini { font-size: var(--h-fs-1); }
.rep-tabla--mini .c-l { padding-left: 3pt; }
.rep-tabla--mini .rep-sw { width: 5.5pt; height: 5.5pt; margin-right: 3.5pt; }
.rep-tabla--mini .c-p { padding-right: 3pt; }

/* Cifras chicas en fila (ámbito, siniestros, exámenes, ausentismo, enfermería) */
.rep-mini { display: flex; gap: 10pt; }
.rep-mini__i { position: relative; flex: 1 1 0; min-width: 0; padding-top: 4pt; border-top: 0.55pt solid var(--h-separador); }
.rep-mini__i::before { content: ''; position: absolute; left: 0; top: -0.55pt; width: 18pt; height: 2pt; background: var(--c, transparent); }
.rep-mini__v { font-size: var(--h-fs-5); font-weight: 600; line-height: 1.05; color: var(--h-titulo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-mini__u { margin-left: 2pt; font-size: var(--h-fs-2); font-weight: 500; color: var(--h-tinta-2); }
.rep-mini__e { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1.5pt; font-size: var(--h-fs-2); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.rep-mini__d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1pt; font-size: var(--h-fs-1); line-height: 9pt; color: var(--h-tinta-2); overflow-wrap: anywhere; }

/* Barra 100 % por partes (SVG de render.js: degradé del sistema y mínimo visible por segmento) */
.rep-apilada { margin-top: 5pt; line-height: 0; }
.rep-apilada svg { display: block; max-width: 100%; }

/* CAVAS y controles toxicológicos (hoja 4): tarjeta por tipo con barra 100 % por resultado y serie mensual */
.rep-control { display: flex; flex-direction: column; padding: 7pt 10pt 8pt; background: var(--h-cebra); border-top: 0.7pt solid var(--h-separador); }
/* Serie mensual al pie de la tarjeta: las dos tarjetas de la fila alinean sus gráficos aunque el título ocupe dos líneas. */
.rep-control__mes { margin-top: auto; padding-top: 8pt; }
.rep-control__t { display: flex; align-items: flex-start; font-size: var(--h-fs-3); font-weight: 600; line-height: 1.2; }
.rep-control__t .rep-sw { margin-top: 2pt; }
.rep-control__v { margin-top: 3pt; font-size: var(--h-fs-5); font-weight: 600; line-height: 1.05; color: var(--h-titulo); font-variant-numeric: tabular-nums; }
.rep-control__v span { margin-left: 4pt; font-size: var(--h-fs-2); font-weight: 500; color: var(--h-tinta-2); }
.rep-control__o { margin-top: 2pt; font-size: var(--h-fs-1); line-height: 9pt; color: var(--h-tinta-2); text-wrap: pretty; }
.rep-control__pos { margin-top: 4pt; font-size: var(--h-fs-2); color: var(--h-tinta-2); text-wrap: pretty; }
.rep-control__pos b { font-size: var(--h-fs-4); font-weight: 600; color: var(--h-tinta); }
.rep-control__x { margin-top: 2pt; font-size: var(--h-fs-2); line-height: 10pt; color: var(--h-tinta-2); text-wrap: pretty; }
.rep-control__x b { font-weight: 600; color: var(--h-tinta); }
.rep-control__sub { margin-top: 6pt; font-size: var(--h-fs-1); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--h-tinta-2); white-space: nowrap; }
.rep-control__lista { margin: 2pt 0 0; padding: 0; list-style: none; font-size: var(--h-fs-2); }
.rep-control__lista li { display: flex; gap: 4pt; align-items: baseline; min-height: 11pt; border-bottom: 0.45pt solid var(--h-separador); white-space: nowrap; overflow: hidden; }
.rep-control__lista li b { font-weight: 600; }
.rep-control__lista li span { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Tres drogas o más: dos columnas (la tarjeta no crece una fila por droga). */
.rep-control__lista--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10pt; }
.rep-control__lista--2 li { min-width: 0; }
.rep-control .rep-tabla th { background: #FFFFFF; }

/* ─── Visor en pantalla ─── */
/* Las hojas se centran cuando entran; si la hoja es más ancha que el visor (100 % en un celular), queda pegada al borde
   izquierdo y el desplazamiento horizontal parte de ahí: nada queda inalcanzable (DECISIONES-V2 §12). */
.visor-hojas { --hoja-ancho: 595.28pt; --hoja-alto: 841.89pt; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding: 8px 0 32px; }
.visor-hojas--apaisada { --hoja-ancho: 841.89pt; --hoja-alto: 595.28pt; }
.visor-hojas__marco { width: calc(var(--hoja-ancho) * var(--escala, 1)); height: calc(var(--hoja-alto) * var(--escala, 1)); flex: none; margin-inline: auto; }
.visor-hojas .hoja { transform: scale(var(--escala, 1)); transform-origin: 0 0; box-shadow: 0 1px 3px rgba(10, 74, 143, 0.10), 0 8px 22px -8px rgba(10, 74, 143, 0.16); outline: 1px solid var(--borde-tarjeta, #D7E2EE); }
/* Barra de filtros dentro de la tarjeta del reporte (debajo de la cabecera, antes del visor): mismo eje izquierdo de 22 px
   que el título (.rep__cab) y que la barra del visor. */
.rep-filtros { padding: 0 22px 14px; }
.rep-filtros .filtros { margin-bottom: 0; padding-inline: 0; border: 0; box-shadow: none; background: none; }
.rep-filtros:empty { display: none; }
.rep .visor-contenedor { padding-inline: 22px; }
.rep .visor__barra { padding: 0; flex-wrap: wrap; row-gap: 8px; }
/* Conmutadores del visor: orientación de las hojas («Horizontal | Vertical») junto al zoom. */
.rep .visor__controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin-left: auto; }
@media (max-width: 760px) {
  .rep-filtros { padding: 0 12px 10px; }
  .rep .visor-contenedor { padding-inline: 12px; }
  .rep .visor__controles { width: 100%; justify-content: flex-end; }
}
/* Puntero grueso (táctil): los botones del paginador miden 44 px (HIG / WCAG 2.5.5); el visor conserva la posición
   horizontal (el paginador es fijo y no tapa la hoja al 100 %). */
@media (pointer: coarse) {
  .rep .paginador { width: 48px; padding: 2px 0; }
  .rep .paginador__b { width: 44px; height: 44px; }
  .rep .paginador__b svg { width: 17px; height: 17px; }
}
/* Celular (≤ 760 px, corrección ronda 1 de la tanda 3; ronda 2): la hoja empieza antes del 35 % de la pantalla. La cabecera
   de la tarjeta va en una línea (alcance con elipsis y Excel / PDF como botones de ícono de 44 px, con nombre accesible), el
   selector de zoom se oculta (la vista queda al 100 %: «Página» y «Ancho» dejaban el texto en 4 px) y el paginador es una
   barra horizontal abajo, centrada; el visor deja lugar debajo de la última hoja para que la barra no la tape. */
@media (max-width: 760px) {
  .rep .rep__cab { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 12px; }
  .rep .rep__titulos { flex: 1 1 auto; min-width: 0; }
  .rep .rep__cab .tarjeta__t { font-size: var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep .rep__resumen { min-height: 0; font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep .rep__acciones { width: auto; flex: none; flex-wrap: nowrap; gap: 6px; }
  .rep .rep__acciones .btn { flex: none; width: 44px; min-width: 0; padding: 0; }
  .rep .rep__acciones .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rep .visor-contenedor { padding-top: 8px; }
  .rep .visor__barra { margin-bottom: 4px; }
  .rep .visor-hojas { padding-top: 4px; }
  .rep #r-zoom { display: none; }
  .rep .visor-hojas { padding-bottom: 76px; }
  .rep .paginador { left: 50%; right: auto; bottom: 12px; width: auto; height: 48px; padding: 0 4px; flex-direction: row; gap: 2px; transform: translateX(-50%); }
  .rep .paginador__t { padding: 0 8px; }
  .rep .paginador__b svg { transform: rotate(-90deg); }
  .rep .paginador__b svg.paginador__arriba { transform: rotate(90deg); }
}

.rep__estado-impresion { display: none; }
/* Las hojas anteriores pueden verse mientras se calcula, pero nunca se imprimen como el filtro nuevo. */
.rep[data-estado="cargando"] #r-hojas { opacity: .5; pointer-events: none; }
/* ─── Impresión / PDF: cada hoja ocupa una página A4 exacta, sin márgenes del navegador ─── */
/* Respaldo: la vista inyecta <style id="pagina-impresion"> con el tamaño de la orientación activa (gana por orden). */
@page { size: A4; margin: 0; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; }
  .rep-filtros { display: none !important; }
  .rep:not([data-estado="listo"]) #r-hojas { display: none !important; }
  .rep:not([data-estado="listo"]) .rep__estado-impresion { display: block; padding: 24px; color: #182C45; }
  .visor-hojas, .rep .visor-hojas { display: block; padding: 0 !important; gap: 0; }
  .visor-hojas__marco { width: auto; height: auto; margin: 0; break-inside: avoid; page-break-inside: avoid; }
  .visor-hojas__marco + .visor-hojas__marco { break-before: page; page-break-before: always; }
  .visor-hojas .hoja { transform: none; box-shadow: none; outline: 0; break-after: auto; page-break-after: auto; }
}

/* ─── Reporte de la Actividad de Salud (rediseño 2026-10, lote 5: reporte/salud.js): inicio ───
   Cada panel del tablero es una tarjeta con el filete de su categoría (--c: el mismo color que en el tablero); las tarjetas
   de una fila se estiran al mismo alto (rep-fila--estirar) y su lectura y notas van al pie. Solo los SEIS cuerpos de la hoja
   y los tokens de styles.css; degradés suaves en las barras (imprimen con print-color-adjust: exact). Sin sombras. */
.rs-panel { display: flex; flex-direction: column; min-width: 0; padding: 5pt 10pt; background: #FFFFFF; border: 0.55pt solid var(--h-regla); border-top: 2pt solid var(--c, var(--h-acento)); border-radius: 2pt; }
.rep-fila--estirar > .rep-celda > .rs-panel { height: 100%; }
.rs-panel__cuerpo { min-width: 0; }
.rs-panel__pie { margin-top: auto; padding-top: 0; }
.rs-panel .rep-lectura { margin-top: 4pt; }
.rs-panel .rep-nota { margin-top: 3pt; }
.rs-panel .desc { margin-top: 1.5pt; }
.rs-panel .vacio { padding: 8pt 0 4pt; }
.rs-perfil__notas { margin-top: 5pt; font-size: var(--h-fs-1); line-height: 1.25; color: var(--h-tinta-2); }
.rs-perfil__notas > div + div { margin-top: 4pt; }
.rs-perfil__notas .rep-lectura, .rs-perfil__notas .rep-nota { display: inline; margin: 0 0 0 3pt; border: 0; padding: 0; }
.rs-motivos { display: grid; grid-template-columns: repeat(var(--columnas, 2), minmax(0, 1fr)); gap: 18pt; margin-top: 4pt; }
.rs-motivos ul { list-style: none; padding: 0; margin: 0; }
.rs-motivos li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32pt 40pt; gap: 7pt; align-items: center; min-height: 18pt; padding: 2pt 0 3pt; border-bottom: .4pt solid var(--h-separador); }
.rs-motivos__nombre { font-size: 8pt; line-height: 10pt; }
.rs-motivos b { line-height: 1; font-size: 12.5pt; text-align: right; color: var(--h-titulo); font-variant-numeric: tabular-nums; }
.rs-motivos__pct { padding: 2pt 3pt; border-radius: 7pt; background: var(--h-fondo-cab); font-size: 8pt; text-align: center; white-space: nowrap; }
.rs-motivos i { position: absolute; bottom: 0; left: 0; width: var(--parte); height: 1.5pt; background: var(--c); opacity: .45; }
/* Encabezado de un bloque que comparte hoja con el anterior: ceja con filete arriba. */
.rs-bloque { margin-top: 8pt; padding-top: 4pt; border-top: 0.55pt solid var(--h-regla); }
.rs-bloque__d { margin-top: 2pt; font-size: var(--h-fs-2); color: var(--h-tinta-2); }
.rs-sub b { margin-left: 3pt; font-weight: 700; letter-spacing: 0; color: var(--h-tinta); }
/* 01 · Resumen: héroe del total y una ficha por categoría (filete, cifra, % y su parte del total). */
.rs-resumen { display: flex; align-items: stretch; gap: 14pt; margin-top: 6pt; }
.rs-heroe { flex: none; }
.rs-heroe .rep-heroe__e { white-space: normal; text-wrap: balance; line-height: 1.15; }
.rs-cats { flex: 1 1 auto; min-width: 0; display: grid; gap: 8pt 12pt; margin: 0; padding: 0; list-style: none; align-content: start; }
.rs-cat { position: relative; min-width: 0; padding-top: 5pt; border-top: 0.7pt solid var(--h-separador); }
.rs-cat::before { content: ''; position: absolute; left: 0; top: -0.7pt; width: 22pt; height: 2.4pt; background: var(--c); }
.rs-cat__t { font-size: var(--h-fs-2); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.rs-cat__n { margin-top: 1.5pt; font-size: var(--h-fs-5); font-weight: 600; line-height: 1.05; color: var(--h-titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-cat__p { margin-top: 1pt; font-size: var(--h-fs-1); color: var(--h-tinta-2); white-space: nowrap; }
.rs-cat__pista { display: block; height: 3pt; margin-top: 3pt; border-radius: 1.5pt; background: var(--h-fondo-cab); overflow: hidden; }
.rs-cat__pista > span { display: block; height: 100%; border-radius: 1.5pt; background: linear-gradient(90deg, var(--c2, var(--c)), var(--c)); }
.rs-fuera { margin-top: 6pt; font-size: var(--h-fs-2); line-height: 10.2pt; color: var(--h-tinta-2); text-wrap: pretty; }
/* 03 · Composición: barra de la parte de cada categoría (escala de la mayor), cantidad y % del total. */
.rs-comp { display: grid; row-gap: 3.5pt; margin: 6pt 0 0; padding: 0; list-style: none; font-size: var(--h-fs-2); }
.rs-comp li { display: grid; grid-template-columns: 86pt minmax(0, 1fr) 30pt 34pt; align-items: center; column-gap: 6pt; min-height: 11pt; }
.rs-comp__et { display: flex; align-items: center; min-width: 0; font-weight: 600; white-space: normal; }
.rs-comp__pista { position: relative; display: block; height: 6.5pt; background: var(--h-fondo-cab); border-radius: 0 2pt 2pt 0; }
.rs-comp__pista > span { position: absolute; left: 0; top: 0; height: 100%; border-radius: 0 2pt 2pt 0; background: var(--c); box-shadow: inset 0 0 0 0.55pt var(--c); }
.rs-comp__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-comp__p { text-align: right; font-size: var(--h-fs-1); color: var(--h-tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-comp__cero { color: var(--h-tinta-3); }
/* Detalle por categoría (el desplegable de 03, estático): tablas en columnas parejas con la categoría como encabezado. */
.rs-columnas { margin-top: 4pt; }
.rs-detalle tr.rs-grupo td { padding-top: 3pt; font-weight: 600; color: var(--h-tinta); border-bottom: 0.55pt solid var(--h-regla); }
.rs-detalle tr.rs-grupo .rep-sw { margin-right: 4pt; }
.rs-tabla { margin-bottom: 1pt; }
.rs-tabla tbody tr { height: var(--fila, auto); }
/* Encabezados de la hoja: pueden partir en dos renglones por palabras (el ancho de la columna se calcula así). */
.rs-tabla th { white-space: normal; overflow-wrap: normal; line-height: 1.05; padding-top: 1.5pt; padding-bottom: 1.5pt; text-overflow: clip; }
/* Listas nombre → cantidad y fichas de programas */
.rs-lista { margin-top: 3pt; }
.rs-lista li { white-space: normal; overflow: visible; min-height: 11pt; padding: 1pt 0; }
.rs-lista li b { min-width: 0; font-weight: 500; }
.rs-lista li span { flex: none; padding-left: 6pt; text-align: right; }
.rs-lista .rs-lista__sin span, .rs-lista li.rs-lista__sin span { font-weight: 400; color: var(--h-tinta-2); }
.rs-fichas { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 5pt; margin: 6pt 0 0; padding: 0; list-style: none; }
.rs-ficha { padding: 4pt 7pt 5pt; background: var(--h-cebra); border-left: 2pt solid var(--c, var(--h-acento)); }
.rs-ficha__t { font-size: var(--h-fs-2); font-weight: 600; line-height: 1.15; }
.rs-ficha__v { margin-top: 1.5pt; font-size: var(--h-fs-4); font-weight: 600; line-height: 1.05; color: var(--h-titulo); font-variant-numeric: tabular-nums; }
.rs-ficha__v span { font-size: var(--h-fs-2); font-weight: 500; color: var(--h-tinta-2); }
.rs-ficha__x { margin-top: 1pt; font-size: var(--h-fs-1); line-height: 9pt; color: var(--h-tinta-2); }
.rs-ficha--sin .rs-ficha__t { color: var(--h-tinta-2); }
.rs-programa { padding-inline:5pt; }
.rs-programa .rs-ficha__t { color:var(--c); }
.rs-programa__datos { font-size:var(--h-fs-2); }
.rs-programa__imagen { display:block; width:26pt; height:26pt; margin-bottom:4pt; object-fit:contain; }
/* Cifras de un panel (exámenes, aptitudes, campañas, ausentismo, controles) */
.rs-cifras { margin-top: 6pt; }
/* Controles: tarjetas internas por tipo, de igual alto, con la serie mensual al pie. */
.rs-controles { margin-top: 6pt; grid-template-rows: auto auto auto; }
.rs-controles > .rep-celda, .rs-controles .rs-control { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.rep-fila--estirar > .rep-celda > .rs-control { height: 100%; }
.rs-control { padding: 6pt 8pt 7pt; }
.rs-control__mes { margin-top: 0; }
.rs-control__detalle { padding-top: 5pt; }
.rs-lesiones { margin-top: 4pt; }
.rs-lesiones .rs-lista li { min-height: var(--alto-li, 11pt); align-items: center; }
/* La leyenda de la silueta, centrada junto a la figura cuando es más corta (pocos tipos de lesión). */
.rs-lesiones > .rep-celda:last-child { display: flex; flex-direction: column; justify-content: center; }
/* Sectores: múltiplos chicos (un gráfico por unidad de gestión) con su lectura de una línea. */
.rs-multiples { margin-top: 4pt; }
.rs-multiple__lee { margin-top: 3pt; font-size: var(--h-fs-1); line-height: 9pt; color: var(--h-tinta-2); text-wrap: pretty; }
/* Hoja única sin registros (el mismo estado vacío que el tablero, sin tarjetas en cero). */
.rs-vacio { margin-top: 14pt; padding: 14pt 16pt 12pt; }
.rs-vacio__t { font-size: var(--h-fs-4); font-weight: 600; color: var(--h-tinta); }
.rs-vacio__d { margin-top: 4pt; font-size: var(--h-fs-3); color: var(--h-tinta); }
.rs-vacio .rep-nota { margin-top: 8pt; }
/* ─── Reporte de la Actividad de Salud: fin ─── */

/* El contenido medido del informe siempre se imprime completo; la paginación absorbe su alto real. */
.rs-panel :is(.h2, .desc, .rep-heroe__d, .rep-kpi__d, .rep-mini__e, .rep-mini__d) {
  display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; text-overflow: clip;
}

/* Revisión visual 19/10: jerarquía de portada, encabezados completos y cantidades legibles. */
.rs-resumen { display: grid; gap: 9pt; }
.rs-resumen .rs-heroe { width: 100%; text-align: center; padding: 7pt 12pt; border-radius: 3pt; background: linear-gradient(90deg, #F7FAFD, #EAF2FA, #F7FAFD); }
.rs-heroe .rep-heroe__e { text-transform: none; letter-spacing: 0; color: var(--h-titulo); font-size: 12.5pt; }
.rs-heroe .rep-heroe__v { margin-top: 4pt; }
.rs-cats { gap: 6pt 12pt; }
.rs-cat__t { min-height: 18pt; }
.rs-detalle tr.rs-grupo td { padding: 4pt 5pt; background: #E6F1FA; color: var(--h-titulo); font-weight: 700; }
.rs-panel[data-panel="ug"] .rs-tabla :is(tbody, tfoot) tr > :last-child { background: #ECF5FC; color: var(--h-titulo); font-weight: 700; }
.rs-panel[data-panel="sectores"] .rs-sub { padding: 4pt 5pt; background: #E6F1FA; color: var(--h-titulo); font-weight: 700; white-space: normal; }
.rs-panel[data-panel="sectores"] .rs-sub b { font-size: 9pt; color: var(--h-titulo); }
.rs-lesiones__grupo > .rs-sub { padding: 4pt 5pt; background: #E6F1FA; color: var(--h-titulo); font-weight: 700; white-space: normal; }
.rs-valor-barra { display: grid; grid-template-columns: minmax(0, 1fr) 26pt; align-items: center; gap: 5pt; }
.rs-valor-barra i { display: block; height: 4pt; width: var(--parte); background: linear-gradient(90deg, #83AFD1, #12549E); border-radius: 2pt; }
.rs-valor-barra b { color: var(--h-titulo); font-weight: 700; }
.rs-programa__imagen { width: 30pt; height: 30pt; }
.rs-programa:last-child .rs-programa__imagen { width: 35pt; height: 35pt; }
.rs-programa .rs-ficha__t { color: var(--h-titulo); }