/*
 * Dashboard de Atenciones · Salud Ocupacional PAE (Upstream y Downstream) — estilos globales de la aplicación.
 * Marca: azul PAE sobre blanco; bandas celestes y bordes separan las estructuras de trabajo.
 * Siempre en modo claro (también con el sistema en modo oscuro). Las hojas A4 comparten los tokens de color mediante alias de reporte.css.
 * Base copiada de lesiones-mano-pae (proyecto hermano); bloques propios al final: cabecera de vista, KPIs (héroe y
 * secundarios), paneles, grilla del tablero, chips de categoría, barra de progreso, barra de filtros compacta,
 * asistente del conector SYSOWEB y tarjeta de estado de conexión.
 * Escala tipográfica de 6 pasos (--fs-1 … --fs-6, ver :root): todo texto de la app usa uno de esos pasos; el único
 * tamaño fuera de la escala es el número héroe del tablero (--fs-hero = paso 6 × 1,6), porque un solo número domina.
 */
@font-face { font-family: 'Informe Sans'; src: url('../assets/fonts/informe-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Informe Sans'; src: url('../assets/fonts/informe-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Informe Sans'; src: url('../assets/fonts/informe-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Informe Sans'; src: url('../assets/fonts/informe-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light only;
  /* Marca · Atenciones (paleta PAE) */
  --pae-azul: #0A4A8F;
  --pae-azul-oscuro: #083B73;
  --pae-verde: #008C44;
  --pae-rojo: #E53935;
  --pae-gris: #EEF2F6;
  --pae-celeste: #7DB9E8;
  --pae-menta: #8FE6D7;
  --tinta: #1F2A37;
  --tinta-2: #4B5563;
  --tinta-3: #6B7280;
  --titulo: #0A3F7C;
  --acento: var(--pae-azul);
  --acento-oscuro: var(--pae-azul-oscuro);
  --acento-medio: #176FA6;
  --acento-suave: #E8F0F9;
  --verde: #007038;
  --verde-suave: #E6F4EC;
  --borde: #C8D9E8;
  /* Borde de los controles de formulario: 3:1 sobre blanco (WCAG 1.4.11). */
  --borde-control: #8A94A6;
  --borde-control-hover: #5E6B7B;
  --borde-suave: #DEE4E9;
  --borde-tarjeta: #D7E2EE;
  --fondo: #FFFFFF;
  --fondo-2: #F7FAFD;
  --fondo-3: #EAF2FA;
  --error: #B3261E;
  --error-suave: #FCEDEC;
  --aviso: #8A5A00;
  --aviso-suave: #FFF6E0;
  --ok: #2E7D4F;
  --ok-suave: #E9F5EE;
  --foco: 0 0 0 3px rgba(10, 74, 143, 0.30);
  --radio: 10px;
  --radio-sm: 7px;
  /* Elevación: sobre blanco, los bordes delimitan y la sombra acompaña. */
  --sombra: 0 1px 2px rgba(10, 74, 143, 0.05), 0 6px 16px -8px rgba(10, 74, 143, 0.12);
  --sombra-alta: 0 2px 4px rgba(10, 74, 143, 0.08), 0 12px 28px -10px rgba(10, 74, 143, 0.18);
  --sombra-item: 0 1px 2px rgba(10, 74, 143, 0.05), 0 2px 6px rgba(10, 74, 143, 0.04);
  --sombra-item-hover: 0 1px 3px rgba(10, 74, 143, 0.08), 0 4px 10px -4px rgba(10, 74, 143, 0.10);
  --sombra-control: inset 0 1px 2px rgba(23, 61, 98, 0.07);
  --fuente: 'Informe Sans', 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --barra: 68px;
  /* Escala tipográfica (6 pasos). Medida en px porque la hoja A4 y los SVG también fijan px.
       1  12 px    notas, pies de panel, etiquetas de eje, insignias
       2  13,5 px  texto secundario: detalles, etiquetas de campo, ayudas, filas de tabla
       3  15 px    cuerpo
       4  17 px    títulos de tarjeta y de paso del asistente
       5  22 px    título de vista, cifras de panel, horizontes del KPI héroe
       6  28–32 px valor de los KPI secundarios (y de la tira v1 de 8 KPI)
     Fuera de la escala, a propósito: --fs-hero (paso 6 × 1,6 ≈ 48–60 px) para el único número que domina el tablero. */
  /* Escala de seis pasos: todo el texto de la aplicación (salvo acceso y splash) usa estos tokens; 14 px queda como cuerpo
     base de controles y botones (subirlo a --fs-3 cambia targets y anchos en 375 px: auditoría propia). --fs-2 es 13 px en
     TODA la app (antes 13,5 fuera del tablero y 13 dentro: dos cuerpos casi iguales conviviendo en la misma pantalla). */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 22px;
  --fs-6: clamp(28px, 1.4vw + 12px, 32px);
  --fs-hero: clamp(48px, 2.6vw + 22px, 60px);
  /* Alias v1 (valor grande de los KPI). */
  --fs-num: var(--fs-6);
}

*, *::before, *::after { box-sizing: border-box; }
/* Lo que se enfoca o se desplaza a la vista no queda tapado por la barra superior ni por una barra de acciones fija. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 12px); scroll-padding-bottom: 96px; }
h1, h2, h3, p { margin: 0; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--fs-3);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) { html, body { background: var(--fondo); color: var(--tinta); } }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Foco de teclado: contorno (las sombras propias de botones, menús y opciones elegidas no lo pueden tapar). */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
a { color: var(--acento); }

/* T3 marca: inicio · barra superior y cinta de demostración (REQUISITOS-V3 §3, DECISIONES-V3 §3) */
/* ─── Barra superior ───
   PAE y el nombre del producto a la izquierda, navegación, usuario y el logo de Brisa cerrando a la derecha: la misma
   disposición que la cabecera de las hojas del reporte (PAE izquierda, Brisa derecha). Sin símbolo ilustrado.
   Misma altura óptica (corrección ronda 1 de la tanda 3): la razón 10/3 igualaba la masa de tinta pero dejaba las
   mayúsculas de «BRISA» a ×1,69 de las de «ENERGY» (el ojo compara letras: Brisa dominaba al logo del cliente). Con
   Brisa a 2,7 × --logos de ancho (36 px → 97 × 25,4 px) las mayúsculas quedan a ×1,37, que compensa el verde más claro.
   La proporción se mantiene en cualquier escala (barra, acceso, splash, /ayuda y la cabecera de cada hoja: CONTRATO §7). */
.barra {
  --logos: 36px;
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  height: var(--barra); padding: 0 20px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--borde-suave);
  box-shadow: 0 1px 0 rgba(10, 74, 143, 0.03), 0 3px 10px rgba(10, 74, 143, 0.04);
}
/* La marca no se comprime: si falta lugar se achica el nombre del usuario (elipsis) y, por ancho, los pasos de abajo. */
.barra__marca { display: flex; flex: none; align-items: center; gap: 14px; min-width: 0; border-radius: 8px; text-decoration: none; color: inherit; }
.barra__logo { display: block; flex: none; width: auto; height: var(--logos); }
.barra__brisa { display: block; flex: none; width: calc(var(--logos) * 2.7); height: auto; }
.barra__sep { flex: none; width: 1px; height: 32px; background: var(--borde); }
.barra__titulos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* Nombre del producto a --fs-4 (17 px): no compite con el título de la vista (--fs-5, 22 px). */
.barra__t1 { font-weight: 700; color: var(--titulo); font-size: var(--fs-4); white-space: nowrap; letter-spacing: -0.01em; }
.barra__t2 { margin-top: 3px; font-size: var(--fs-1); font-weight: 600; color: var(--acento-medio); white-space: nowrap; letter-spacing: 0.02em; }
.nav { display: flex; gap: 4px; margin-left: 12px; min-width: 0; }
.nav a {
  display: inline-flex; flex: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px; white-space: nowrap;
  border-radius: 999px; text-decoration: none; color: var(--tinta-2); font-weight: 500; font-size: 14px;
}
.nav a:hover { background: var(--fondo-2); color: var(--tinta); }
.nav a[aria-current="page"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; box-shadow: inset 0 0 0 1px #CFDDEE; }
.nav svg { flex: none; width: 18px; height: 18px; }
.barra__usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Solo el nombre se achica (elipsis): la insignia y «Cerrar sesión» nunca se comprimen ni invaden el logo de Brisa. */
.barra__usuario > .insignia, .barra__usuario > .btn { flex: none; }
.barra__nombre { font-size: var(--fs-2); color: var(--tinta-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pasos medidos con getBoundingClientRect (superadmin, 4 secciones, barra completa ≈ 1214 px sin el nombre). */
@media (max-width: 1480px) { .barra__nombre { display: none; } }
/* Laptop chica y tablet: la navegación queda en íconos (con nombre accesible y globo) para que nada se superponga. */
@media (max-width: 1400px) {
  .nav a { width: 44px; padding: 0; justify-content: center; }
  .nav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 980px) { .barra__t2 { display: none; } .barra__t1 { font-size: var(--fs-3); } }
/* Tablet angosta: quedan los dos logos, la navegación y el usuario (el título de la vista sigue en la página). */
@media (max-width: 880px) { .barra__titulos, .barra__marca > .barra__sep { display: none; } }
@media (max-width: 760px) {
  .barra { --logos: 29px; gap: 8px; padding: 0 12px; }
  /* Sin el nombre, el bloque del usuario no se comprime: si falta lugar, la navegación se desplaza en horizontal. */
  .barra__usuario { flex: none; gap: 4px; }
  .barra__marca { gap: 8px; }
  .nav { margin-left: 0; overflow-x: auto; }
  .nav a { width: 44px; }
}
/* Celular (≤ 540 px; la barra completa mide 532 px): no entran los dos logos con la navegación y la salida; queda PAE
   (Brisa sigue en el acceso, en el splash y en las hojas del reporte). */
@media (max-width: 540px) { .barra__sep--brisa, .barra__brisa { display: none; } }
@media (max-width: 400px) { .barra .insignia { display: none; } }
@media (max-width: 360px) { .barra { --logos: 26px; } }

/* Cinta de entorno (demostración o emuladores): siempre una línea de 32 px (--cinta), el detalle se recorta en celular. */
.cinta-demo {
  height: 32px; padding: 6px 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
  background: var(--aviso-suave); color: var(--aviso); border-bottom: 1px solid #F1DFB0;
  font-size: var(--fs-2); line-height: 19px;
}
.cinta-demo strong { font-weight: 700; }
@media (max-width: 600px) { .cinta-demo__mas { display: none; } }
/* Demo y emuladores: la cinta (32 px) se descuenta de los altos que dependen de la ventana. */
:root:has(.cinta-demo) { --cinta: 32px; }
/* fin T3 marca (barra y cinta) */
.insignia { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.02em; }
.insignia--admin { background: var(--verde-suave); color: var(--verde); }
.insignia--demo { background: var(--aviso-suave); color: var(--aviso); }

main { padding: 32px 20px 32px; max-width: 1560px; margin: 0 auto; }

/* ─── Botones ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--radio-sm);
  border: 1px solid var(--borde); background: #FFFFFF; color: var(--tinta);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(23, 61, 98, 0.08);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn:hover { background: var(--fondo-2); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primario { background: var(--acento); border-color: var(--acento); color: #FFFFFF; box-shadow: 0 1px 2px rgba(23, 61, 98, 0.18), 0 4px 10px -2px rgba(10, 74, 143, 0.35); }
.btn--primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.btn--peligro { color: var(--error); border-color: #EBC6C3; }
.btn--peligro:hover { background: var(--error-suave); }
.btn--fantasma { border-color: transparent; background: transparent; color: var(--tinta-2); box-shadow: none; }
.btn--fantasma:hover { background: var(--fondo-2); color: var(--tinta); }
.btn--chico { min-height: 34px; padding: 0 12px; font-size: var(--fs-2); }
.btn--icono { width: 44px; min-height: 44px; padding: 0; flex: none; color: var(--acento); }
.btn--enlace { min-height: 32px; padding: 0 8px; border-color: transparent; background: transparent; box-shadow: none; color: var(--acento); font-size: var(--fs-2); }
.btn--enlace:hover { background: var(--acento-suave); color: var(--acento-oscuro); }
.btn--enlace svg { width: 16px; height: 16px; }
.btn--icono svg { width: 20px; height: 20px; }
.btn--icono:hover { background: var(--acento-suave); color: var(--acento-oscuro); }
.btn--activo { background: var(--acento-suave); border-color: #9FB6CF; color: var(--acento-oscuro); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; }
.btn[aria-busy="true"]::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ─── Tarjetas y formulario ─── */
/* Tarjeta genérica con los tokens del sistema visual (CONTRATO §13.3): mismo radio, superficie, canto de luz y sombra que .panel y .kpi. */
.tarjeta { background: var(--superficie-tarjeta, #FFFFFF); border: 1px solid var(--borde-tarjeta); border-top-color: var(--luz-canto, var(--borde-tarjeta)); border-radius: var(--radio-tarjeta, 14px); box-shadow: var(--luz-borde, 0 0 0 transparent), var(--sombra-tarjeta, var(--sombra)); }
.tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.tarjeta__t { margin: 0; font-size: var(--fs-4); font-weight: 600; color: var(--titulo); }
.tarjeta__cuerpo { padding: 14px 18px 18px; }

.filas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo > .btn { align-self: flex-start; }
.campo > label, .campo__et { font-size: var(--fs-2); font-weight: 600; color: var(--tinta); display: flex; align-items: baseline; gap: 6px; }
.campo__et .opc, .campo > label .opc { font-weight: 400; color: var(--tinta-3); font-size: var(--fs-1); }
.campo__ayuda { margin: 0; font-size: var(--fs-2); color: var(--tinta-2); }
.campo__ayuda:empty { display: none; }
.campo__error { margin: 0; font-size: var(--fs-2); color: var(--error); }
.campo__error:empty { display: none; }
.campo:has(> .campo__error:not(:empty)) > .campo__ayuda { display: none; }
.control, select.control, textarea.control {
  width: 100%; min-height: 44px; padding: 9px 12px; border-radius: var(--radio-sm);
  border: 1px solid var(--borde-control); background: #FFFFFF; font-size: 15px; box-shadow: var(--sombra-control); transition: border-color 0.15s, box-shadow 0.15s;
}
select.control { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6168' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
textarea.control { min-height: 96px; resize: vertical; line-height: 1.45; }
.control:hover { border-color: var(--borde-control-hover); }
.control:focus { outline: none; border-color: var(--acento); box-shadow: var(--foco); }
.control[aria-invalid="true"] { border-color: var(--error); background-color: #FFFBFB; }
.control:disabled { background: var(--fondo-2); color: var(--tinta-3); box-shadow: none; }
.control--mayus { text-transform: uppercase; }

/* Chips: botones de selección múltiple (categorías). aria-pressed="true" = incluida. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--borde-control); background: #FFFFFF; cursor: pointer; font-weight: 500; font-size: 14px; user-select: none;
  box-shadow: var(--sombra-item); transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--borde-control-hover); background: var(--fondo-2); box-shadow: var(--sombra-item-hover); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--acento); border-color: var(--acento); color: #FFFFFF; box-shadow: 0 1px 2px rgba(23, 61, 98, 0.18), 0 4px 10px -2px rgba(10, 74, 143, 0.40); }
.chip[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.chip--chico { min-height: 32px; padding: 0 11px; font-size: var(--fs-2); }
/* Punto con el color de la categoría (--c); sobre el chip activo lleva un anillo blanco para que el azul no se pierda. */
.chip__punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, var(--acento)); }
.chip[aria-pressed="true"] .chip__punto { box-shadow: 0 0 0 2px #FFFFFF; }

/* Segmentados (UG de los filtros, zoom del reporte) */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #F1F4F7; box-shadow: inset 0 0 0 1px var(--borde-control); }
.segmentado button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--tinta-2); transition: background 0.15s, color 0.15s; }
.segmentado button:hover { color: var(--tinta); background: #E3EAF2; }
.segmentado button[aria-checked="true"] { background: var(--acento); color: #FFFFFF; font-weight: 600; box-shadow: 0 1px 2px rgba(10, 74, 143, 0.25), 0 3px 8px -2px rgba(10, 74, 143, 0.40); }
.segmentado button:disabled { cursor: not-allowed; opacity: 0.55; }
.campo > .segmentado { align-self: flex-start; }
.segmentado[aria-invalid="true"] { background: #FFF4F3; box-shadow: inset 0 0 0 1.5px var(--error); }
.segmentado--chico { padding: 3px; border-radius: 10px; }
.segmentado--chico button { min-height: 32px; padding: 0 12px; font-size: var(--fs-2); border-radius: 8px; }

/* Avisos */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-sm); font-size: var(--fs-2); line-height: 1.4; }
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.aviso--info { background: var(--acento-suave); color: var(--acento-oscuro); box-shadow: inset 0 0 0 1px #C9E0EE; }
.aviso--aviso { background: var(--aviso-suave); color: var(--aviso); box-shadow: inset 0 0 0 1px #EFD9A6; }
.aviso--error { background: var(--error-suave); color: var(--error); box-shadow: inset 0 0 0 1px #F0C8C5; }
.aviso--ok { background: var(--ok-suave); color: var(--ok); box-shadow: inset 0 0 0 1px #C4E3D0; }
.aviso__cuerpo { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.aviso__cuerpo p { margin: 0; }
.acceso-control:not(:empty) { margin-top: 14px; }
/* Quién y cuándo sumó un ítem (Administración) */
.nota-alta { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: var(--fs-1); font-weight: 400; line-height: 1.35; color: var(--tinta-3); }
.nota-alta svg { width: 13px; height: 13px; flex: none; }
.editor-item > .nota-alta { grid-column: 1 / -1; margin-top: -2px; }

/* Llamado (i): aclaración breve al pasar el mouse o al enfocarlo (ui.js lo acomoda cerca de los bordes) */
.campo__et-fila { display: flex; align-items: center; gap: 7px; }
.campo__et-fila > label, .campo__et-fila > .campo__et { font-size: var(--fs-2); font-weight: 600; color: var(--tinta); }
.info {
  position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--acento); color: var(--acento); font: 700 10.5px/1 var(--fuente); font-style: normal; cursor: help; user-select: none;
}
.info:hover, .info:focus-visible { background: var(--acento); color: #FFFFFF; }
.info__tip {
  position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 9px); width: min(300px, calc(100vw - 32px)); transform: translateX(-50%);
  padding: 10px 12px; border-radius: 9px; background: #1F2A36; color: #FFFFFF; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  font: 400 12.5px/1.45 var(--fuente); text-align: left; white-space: normal; letter-spacing: 0; text-transform: none;
  display: none; pointer-events: none;
}
.info__tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #1F2A36; }
.info:hover .info__tip, .info:focus .info__tip { display: block; animation: globo 0.15s ease-out; }
.info__tip--fin { left: auto; right: -8px; transform: none; }
.info__tip--fin::after { left: auto; right: 10px; margin-left: 0; }
.info__tip--inicio { left: -8px; transform: none; }
.info__tip--inicio::after { left: 10px; margin-left: 0; }
@keyframes globo { from { opacity: 0; margin-bottom: -4px; } to { opacity: 1; margin-bottom: 0; } }
@keyframes aparece { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* Barra de acciones fija al pie (Administración: guardar cambios) */
.acciones {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 32px; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(6px);
  border-top: 1px solid var(--borde-suave); border-radius: 0 0 16px 16px; box-shadow: 0 -10px 18px -14px rgba(10, 74, 143, 0.40);
}
.acciones__estado { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-2); color: var(--tinta-2); }
.acciones__estado svg { width: 16px; height: 16px; flex: none; }
.acciones__estado--ok { color: var(--verde); font-weight: 600; }
.acciones__estado--error { color: var(--error); }
.acciones__estado--error strong { font-weight: 700; }
.acciones__botones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
  .acciones { padding: 12px 16px; border-radius: 0 0 12px 12px; }
  .acciones__botones { width: 100%; flex-wrap: nowrap; }
  .acciones__botones .btn { flex: 0 0 auto; }
  .acciones .btn--primario { min-width: 0; flex: 1 1 auto; }
}

/* ─── Reporte: cabecera de la tarjeta, visor de hojas y paginador (las hojas A4 viven en reporte.css) ─── */
.rep__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 22px 16px; }
.rep__titulos { min-width: 0; }
.rep__cab .tarjeta__t { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.rep__resumen { margin-top: 3px; min-height: 19px; font-size: var(--fs-2); color: var(--tinta-2); }
.rep__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.rep__acciones .btn { min-width: 168px; }
/* Mesa de lectura: gris frío para que cada hoja A4 blanca se lea como una pieza separada. */
.visor-contenedor { background: #E4EAEF; border-top: 1px solid var(--borde); box-shadow: inset 0 8px 12px -10px rgba(23, 61, 98, 0.30); border-radius: 0 0 var(--radio) var(--radio); overflow-x: auto; padding: 14px 12px 24px; }
.visor__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto 14px; padding: 0 10px; position: sticky; left: 0; }
.visor__nota { font-size: var(--fs-2); color: var(--tinta-2); }
.visor__barra .segmentado { background: rgba(255, 255, 255, 0.75); }
.visor-hojas__marco { scroll-margin-top: calc(var(--barra) + 14px); }
/* Indicador de hoja del reporte, mínimo (anterior · 1/4 · siguiente): gris plata translúcido,
   a la derecha de las hojas para no taparlas (la posición horizontal la calcula la vista). */
.paginador {
  position: fixed; z-index: 25; right: 12px; bottom: 24px; width: 40px;
  display: flex; flex-direction: column; align-items: center; padding: 3px 0;
  border-radius: 999px; color: #52607A;
  background: rgba(203, 210, 220, 0.40);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.paginador[hidden] { display: none; }
.paginador:hover, .paginador:focus-within { background: rgba(203, 210, 220, 0.62); }
.paginador__t { padding: 1px 0 2px; font-size: var(--fs-1); font-weight: 700; line-height: 1.2; color: #334155; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: default; }
.paginador__t span { font-weight: 500; color: #334155; }
.paginador__b { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #3D4A60; cursor: pointer; }
.paginador__b:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.8); color: var(--titulo); }
.paginador__b:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
/* Extremo (aria-disabled: el botón conserva el foco; el clic se ignora): el ícono atenuado, el anillo de foco entero. */
.paginador__b:disabled, .paginador__b[aria-disabled="true"] { cursor: default; }
.paginador__b:disabled svg, .paginador__b[aria-disabled="true"] svg { opacity: 0.3; }
.paginador__b svg { width: 15px; height: 15px; }
.paginador__arriba { transform: rotate(180deg); }
@media (max-width: 760px) {
  .paginador { right: 4px; bottom: 14px; width: 40px; }
  .paginador__b { width: 36px; height: 36px; }
  .rep__cab { padding: 16px 16px 14px; }
  .rep__acciones { width: 100%; }
  .rep__acciones .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .visor__nota { display: none; }
  .visor__barra { justify-content: flex-end; }
}

/* ─── Administración ─── */
.admin { display: grid; gap: 20px; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
.admin__menu { position: sticky; top: calc(var(--barra) + 16px); display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.admin__menu button { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-weight: 500; color: var(--tinta-2); }
.admin__menu svg { width: 17px; height: 17px; flex: none; color: var(--tinta-3); }
.admin__menu button[aria-current="true"] { background: var(--acento-suave); color: var(--acento-oscuro); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); }
.admin__menu button[aria-current="true"] svg { color: var(--acento); }
.admin__menu button:hover { background: var(--fondo-2); color: var(--tinta); }
.admin__menu button[aria-current="true"]:hover { background: var(--acento-suave); }
@media (max-width: 900px) {
  .admin { grid-template-columns: minmax(0, 1fr); }
  .admin__menu { position: static; flex-direction: row; flex-wrap: wrap; }
  .admin__menu button { white-space: nowrap; }
  .admin__menu button[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--acento); }
}
@media (max-width: 640px) {
  .admin__menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .admin__menu::-webkit-scrollbar { display: none; }
}
/* Listas editables: filas separadas por una línea, sin tarjeta por fila */
.editor-lista { display: grid; border: 1px solid var(--borde-tarjeta); border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.editor-item { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 12px; background: #FFFFFF; }
.editor-item + .editor-item { border-top: 1px solid var(--borde-suave); }
.editor-item:hover { background: #FBFCFD; }
.editor-item--inactivo, .editor-item--inactivo:hover { background: var(--fondo-2); }
.editor-item--cab, .editor-item--cab:hover { padding-top: 9px; padding-bottom: 9px; background: var(--fondo-2); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-2); }
.editor-item--doble { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px; }
.editor-item--simple { grid-template-columns: minmax(0, 1fr) 92px; }
.editor-item--bloque { grid-template-columns: minmax(0, 1fr); }
.editor-item--mapeo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
@media (max-width: 640px) {
  .editor-item--doble, .editor-item--mapeo { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .editor-item--cab { display: none !important; }
  .editor-item .editor-campo__et { display: block; margin-bottom: 3px; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-3); }
  .control--alta, .control--alta-sel { max-width: none; }
  .fila-acciones > .control { flex: 1 1 100%; }
}
.editor-lista .control { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.editor-campo { min-width: 0; }
.editor-campo__et { display: none; }
.editor-item > label > span { position: relative; top: 1px; }
.editor-item--inactivo .control { color: var(--tinta-3); }
/* "Activo" como interruptor */
.editor-item > label { display: inline-flex !important; align-items: center; gap: 8px !important; font-size: var(--fs-2); color: var(--tinta-2); cursor: pointer; user-select: none; white-space: nowrap; }
.editor-item > label > input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px;
  background: #C3CDD6; cursor: pointer; transition: background 0.15s; box-shadow: inset 0 1px 2px rgba(23, 61, 98, 0.18);
}
.editor-item > label > input[type="checkbox"]::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(23, 61, 98, 0.35); transition: transform 0.15s;
}
.editor-item > label > input[type="checkbox"]:checked { background: var(--pae-verde); }
.editor-item > label > input[type="checkbox"]:checked::before { transform: translateX(14px); }
/* Foco del interruptor: contorno del sistema (2 px, 8,8:1); el anillo translúcido de --foco daba 1,67:1. */
.editor-item > label > input[type="checkbox"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Zona para elegir o arrastrar el archivo a importar */
.campo > .zona-archivo {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 22px 18px; border: 1.5px dashed #AFC4DA; border-radius: 12px;
  background: var(--fondo-2); text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  font-size: 14px; font-weight: 400; color: var(--tinta);
}
.zona-archivo:hover, .zona-archivo:focus-within, .zona-archivo--sobre { border-color: var(--acento); background: var(--acento-suave); }
.zona-archivo:focus-within { box-shadow: var(--foco); }
.zona-archivo input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.zona-archivo__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #FFFFFF; color: var(--acento); box-shadow: var(--sombra-item); }
.zona-archivo__icono svg { width: 20px; height: 20px; }
.zona-archivo__t { margin-top: 4px; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.zona-archivo__d { font-size: var(--fs-2); color: var(--tinta-2); }
.acciones--admin { padding: 12px 18px; border-radius: 0 0 var(--radio) var(--radio); }
.acciones--admin .acciones__estado--sucio { color: var(--aviso); font-weight: 600; }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.tabla-simple th, .tabla-simple td { padding: 9px 12px; border-bottom: 1px solid var(--borde-suave); text-align: left; vertical-align: middle; }
.tabla-simple th { background: var(--fondo-2); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-2); border-bottom-color: var(--borde); }
.tabla-simple tbody tr:last-child > * { border-bottom: 0; }
.tabla-simple__acciones { white-space: nowrap; text-align: right; }
.tabla-simple__acciones .btn + .btn { margin-left: 6px; }
.tabla-simple--ficha th { width: 190px; font-size: var(--fs-1); letter-spacing: 0; text-transform: none; font-weight: 600; }
.tabla-simple td.num, .tabla-simple th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Marco común de tablas (mismo borde y radio que las listas editables) */
.tabla-marco { margin-top: 14px; overflow: auto; border: 1px solid var(--borde-tarjeta); border-radius: 10px; background: #FFFFFF; }
.tabla-marco--alta { max-height: 520px; }
.tabla-marco--angosta { max-width: 640px; }
.tabla-empresas__alias { color: var(--tinta-2); font-size: var(--fs-2); }
.tabla-auditoria { table-layout: fixed; }
.tabla-auditoria th:nth-child(1) { width: 172px; } .tabla-auditoria th:nth-child(2) { width: 190px; } .tabla-auditoria th:nth-child(3) { width: 30%; }
.tabla-auditoria td { overflow-wrap: anywhere; }
.tabla-auditoria__cuando { white-space: nowrap; }
/* Estados como insignias */
.estado { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; white-space: nowrap; }
.estado--ok { background: var(--ok-suave); color: var(--ok); }
.estado--aviso { background: var(--aviso-suave); color: var(--aviso); }
.estado--error { background: var(--error-suave); color: var(--error); }
.estado--gris { background: #EEF1F4; color: var(--tinta-2); }
/* En pantallas angostas cada fila de tabla es una tarjeta con etiquetas */
@media (max-width: 640px) {
  .tabla-simple--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-simple--tarjetas, .tabla-simple--tarjetas tbody, .tabla-simple--tarjetas tr, .tabla-simple--tarjetas td { display: block; width: 100%; }
  .tabla-simple--tarjetas tr { padding: 10px 12px; border-bottom: 1px solid var(--borde-suave); }
  .tabla-simple--tarjetas tbody tr:last-child { border-bottom: 0; }
  .tabla-simple--tarjetas td { padding: 3px 0; border: 0; text-align: left; }
  .tabla-simple--tarjetas td[data-et]::before { content: attr(data-et); display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-3); }
  .tabla-simple--tarjetas td:first-child::before { display: none; }
  .tabla-simple--tarjetas .tabla-simple__acciones { padding-top: 8px; text-align: left; }
  .tabla-empresas__alias { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tabla-simple--tarjetas td.sin-dato { display: none; }
  .tabla-auditoria { table-layout: auto; }
}
.subt { margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--titulo); }
.fila-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vacio { margin-top: 12px; padding: 16px 18px; border: 1px dashed #B9C4CF; border-radius: 10px; background: var(--fondo-2); color: var(--tinta-2); font-size: var(--fs-2); text-align: center; }
.campo--separado { margin-top: 14px; }
.imp-resultado { margin-top: 16px; }
.imp-resultado:empty { display: none; }
.tarjeta__cuerpo > .campo__ayuda:first-child { max-width: 88ch; }
.campo__ayuda + .editor-lista, .aviso + .editor-lista, .campo__ayuda + .vacio, .aviso + .vacio { margin-top: 14px; }
.filas--pie { align-items: end; }
.campo__ayuda + .filas, .aviso + .filas { margin-top: 16px; }
.filas--importar { max-width: 760px; grid-template-columns: minmax(0, 1fr); }
.filas--importar > .campo:first-child { max-width: 320px; }
.fila-acciones--fin { justify-content: flex-end; align-items: center; gap: 14px; }
.filas--angosta { max-width: 720px; }
.filas--textos { max-width: 820px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.control--alta { max-width: 340px; }
.control--alta-sel { max-width: 260px; }
.control--corto { min-height: 80px; }
/* Casilla con título y aclaración */
.casilla { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin-top: 14px; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--acento); cursor: pointer; }
.casilla__t { display: block; font-weight: 600; font-size: 14px; }
.casilla__d { display: block; margin-top: 2px; font-size: var(--fs-2); color: var(--tinta-2); }

/* T3 marca: inicio · acceso y splash (REQUISITOS-V3 §3, DECISIONES-V3 §3) */
/* ─── Acceso: columna de marca (blanco con banda celeste) y columna de ingreso (blanca) ───
   Las dos columnas comparten la fila superior (logos PAE y Brisa), la inferior (pie) y la altura donde arranca el contenido.
   Logos a la misma altura óptica (ver .barra): PAE a --acc-logos de alto, Brisa a 2,7 × de ancho (36 px → 89 × 36 y
   97 × 25,4). */
.acceso {
  --acc-logos: 36px;                         /* alto del logo PAE (Brisa: ancho = 2,7 ×) */
  --acc-arriba: 52px;                        /* margen superior común */
  --acc-abajo: 44px;                         /* margen inferior común */
  --acc-fila: var(--acc-logos);              /* alto de la fila de los logos */
  --acc-sep: clamp(40px, 9vh, 120px);        /* de la fila de los logos al contenido */
  min-height: 100vh; min-height: 100dvh; max-width: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  background: #FFFFFF;
}
.acceso__marca, .acceso__panel { display: flex; flex-direction: column; min-width: 0; padding: var(--acc-arriba) clamp(32px, 5vw, 88px) var(--acc-abajo); }
.acceso__marca { background: linear-gradient(145deg, #FFFFFF 35%, var(--fondo-3) 100%); }
.acceso__panel { padding-inline: clamp(32px, 4.5vw, 72px); background: #FFFFFF; border-left: 1px solid var(--borde-suave); }
.acceso__marcas { display: flex; align-items: center; gap: 20px; height: var(--acc-fila); }
.acceso__pae { display: block; flex: none; width: auto; height: var(--acc-logos); }
.acceso__brisa { display: block; flex: none; width: calc(var(--acc-logos) * 2.7); height: auto; }
.acceso__sep { flex: none; width: 1px; height: calc(var(--acc-logos) - 4px); background: #B9C4CF; }
.acceso__producto { width: 100%; max-width: 600px; margin-top: var(--acc-sep); container-type: inline-size; }
/* Ceja: «Salud Ocupacional · Upstream y Downstream» (≈ 381 px en una línea); si la columna es más angosta, dos renglones
   sin el punto colgando (consulta de contenedor: vale para el escritorio angosto y para el celular). */
.acceso__area { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento-medio); }
.acceso__producto h1 { margin: 12px 0 0; font-size: clamp(40px, 3.3vw, 54px); line-height: 1.05; letter-spacing: -0.022em; color: var(--titulo); }
.acceso__producto h1 span { display: block; font-weight: 700; }
.acceso__producto h1 span:first-child { font-weight: 400; }
.acceso__lema { margin: 18px 0 0; font-size: 19px; line-height: 1.45; color: var(--tinta-2); }
.acceso__ejes { list-style: none; margin: 36px 0 0; padding: 0; max-width: 540px; border-top: 1px solid var(--borde); }
.acceso__ejes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 15px 0 16px; border-bottom: 1px solid var(--borde); }
.acceso__n { padding-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--acento); font-variant-numeric: tabular-nums; }
.acceso__ejes p { margin: 0; }
.acceso__ejes strong { display: block; font-size: 16px; font-weight: 700; color: var(--tinta); }
.acceso__ejes p span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.acceso__ug { margin: auto 0 0; padding-top: 32px; font-size: 14px; color: var(--tinta-2); }
.acceso__ug span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); }
.acceso__ug span:not(:first-child) { margin-top: 10px; }

/* El formulario arranca a la altura de la ceja de la columna de marca y no se mueve cuando aparece un error. */
.acceso__form { width: 100%; max-width: 384px; margin: calc(var(--acc-fila) + var(--acc-sep)) auto 0; }
.acceso__form h2 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; color: var(--titulo); }
.acceso__sub { margin: 10px 0 28px; font-size: 15px; line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.acceso__sub code { font-size: 13px; }
.acceso__demo { margin: -8px 0 22px; }
.acceso form { display: grid; gap: 18px; }
.acceso .campo { gap: 7px; }
.acceso .campo > label { font-size: 14px; }
.acceso .control { min-height: 48px; padding: 11px 14px; border-radius: 9px; font-size: 16px; }
.acceso__clave { position: relative; }
.acceso__clave .control { padding-right: 92px; }
.acceso__ver { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--acento); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.acceso__ver:hover { background: var(--acento-suave); }
.acceso__ver:focus-visible { outline-offset: 0; }
/* Región viva siempre presente (para que el lector de pantalla anuncie el aviso); vacía no ocupa lugar. */
.acceso__mayus { margin: 0; font-size: 14px; font-weight: 600; color: var(--aviso); }
.acceso__mayus:empty { margin-top: -7px; }
.acceso__error:not(:empty) { margin-top: -4px; font-size: 14px; }
.acceso__btn { width: 100%; min-height: 48px; margin-top: 4px; border-radius: 9px; font-size: 16px; }
.acceso__olvido { justify-self: start; margin-top: -4px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--acento); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(10, 74, 143, 0.35); text-underline-offset: 3px; }
.acceso__olvido:hover { text-decoration-color: currentColor; }
.acceso__olvido:focus-visible { border-radius: 3px; }
.acceso__seguridad { display: flex; gap: 10px; align-items: flex-start; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--borde-suave); font-size: 12.5px; line-height: 1.5; color: var(--tinta-2); }
.acceso__seguridad svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--verde); }
.acceso__pie { width: 100%; max-width: 384px; margin: auto auto 0; padding-top: 32px; font-size: var(--fs-1); color: var(--tinta-3); }
@media (pointer: coarse) {
  .acceso__ver { min-width: 44px; min-height: 44px; right: 2px; }
  .acceso__olvido { min-height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .acceso__producto, .acceso__form { animation: acceso-entra 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .acceso__form { animation-delay: 0.06s; }
}
@keyframes acceso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Escritorio bajo (notebooks de 720-820 px de alto): menos aire vertical. */
@media (min-width: 901px) and (max-height: 820px) {
  .acceso { --acc-arriba: 36px; --acc-abajo: 30px; --acc-sep: clamp(28px, 6vh, 52px); }
  .acceso__producto h1 { font-size: clamp(36px, 3vw, 44px); }
  .acceso__lema { margin-top: 12px; font-size: 17px; }
  .acceso__ejes { margin-top: 26px; }
  .acceso__ejes li { padding: 10px 0 11px; }
  .acceso__ug { padding-top: 24px; }
  .acceso__sub { margin-bottom: 22px; }
}
/* Tableta y celular: la marca queda como franja superior y el ingreso debajo, con el mismo borde izquierdo. */
@media (max-width: 900px) {
  .acceso { --acc-logos: 30px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; --acc-sep: 26px; }
  .acceso__marca { padding: 24px 24px 30px; }
  .acceso__marcas { gap: 16px; }
  .acceso__producto { max-width: none; }
  .acceso__producto h1 { margin-top: 8px; font-size: 32px; }
  .acceso__lema { margin-top: 10px; font-size: 16px; }
  .acceso__ejes, .acceso__ug { display: none; }
  .acceso__panel { padding: 32px 24px 24px; border-left: 0; border-top: 1px solid var(--borde-suave); }
  .acceso__form { max-width: 440px; margin: 0; }
  .acceso__form h2 { font-size: 26px; }
  .acceso__pie { max-width: 440px; margin: auto 0 0; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .acceso__marca { padding: 32px 40px 36px; }
  .acceso__producto h1 { font-size: 40px; }
  .acceso__ejes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; margin-top: 30px; border-top: 0; }
  /* align-content: start → los tres ejes arrancan a la misma altura aunque sus textos tengan largos distintos. */
  .acceso__ejes li { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 12px 0 0; border-top: 1px solid var(--borde); border-bottom: 0; }
  .acceso__n { padding: 0 0 6px; }
  .acceso__panel { padding: 40px 40px 28px; }
}
@container (max-width: 390px) {
  .acceso__area { flex-direction: column; letter-spacing: 0.12em; line-height: 1.5; }
  .acceso__punto { display: none; }
}
/* Celulares bajos: la franja se compacta (logos más chicos, sin ceja ni lema) para que «Ingresar» quede a la vista. */
@media (max-width: 599px) and (max-height: 740px) {
  .acceso { --acc-logos: 26px; }
  .acceso__marca { padding: 18px 22px 22px; }
  .acceso__marcas { gap: 14px; }
  .acceso__producto { margin-top: 16px; }
  .acceso__area, .acceso__lema { display: none; }
  .acceso__producto h1 { margin-top: 0; font-size: 22px; line-height: 1.15; }
  .acceso__producto h1 span { display: inline; }
  .acceso__panel { padding: 22px 22px 20px; }
  .acceso__sub { margin-bottom: 18px; }
}

/* ─── Pantalla de carga inicial (antes del ingreso): los dos logos, el nombre del producto y el estado ─── */
.splash {
  --splash-logos: 36px;
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  display: grid; place-items: center; padding: 40px 24px;
  background: radial-gradient(1100px 620px at 22% 18%, #FFFFFF 0%, var(--fondo-2) 65%, var(--fondo-3) 100%);
}
.splash__centro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.splash__marcas { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.splash__pae { display: block; flex: none; width: auto; height: var(--splash-logos); }
.splash__brisa { display: block; flex: none; width: calc(var(--splash-logos) * 2.7); height: auto; }
.splash__sep { flex: none; width: 1px; height: calc(var(--splash-logos) - 4px); background: #B9C4CF; }
.splash__t { font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--titulo); letter-spacing: -0.015em; }
.splash__area { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acento-medio); }
.splash__lema { margin-top: 14px; font-size: 15px; color: var(--tinta-2); }
.splash__estado { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tinta-2); }
.splash__estado::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--acento-suave); border-top-color: var(--acento); animation: gira 0.8s linear infinite; }
@media (max-width: 480px) { .splash__area { flex-direction: column; line-height: 1.5; } .splash__punto { display: none; } }
@media (max-width: 420px) { .splash { --splash-logos: 30px; } .splash__marcas { gap: 16px; margin-bottom: 32px; } .splash__t { font-size: 26px; } }
/* fin T3 marca (acceso y splash) */

/* ─── Diálogos y notificaciones ─── */
dialog.dialogo { border: 0; padding: 0; border-radius: 14px; width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(23, 61, 98, 0.28); }
dialog.dialogo::backdrop { background: rgba(23, 35, 48, 0.45); }
.dialogo__cuerpo { padding: 22px 22px 8px; }
.dialogo__t { margin: 0 0 8px; font-size: 18px; color: var(--titulo); }
.dialogo__x { color: var(--tinta-2); font-size: 14.5px; }
.dialogo__acciones { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; flex-wrap: wrap; }
.dialogo__x p + p { margin-top: 8px; }
.dialogo__campo { margin-top: 14px; }
.dialogo__campo > label { color: var(--tinta); }
.dialogo__opciones { display: grid; gap: 8px; margin-top: 14px; }
.opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 14px;
  border: 1px solid #9FB6CF; border-radius: 10px; background: #FFFFFF; color: var(--tinta); text-align: left; cursor: pointer;
  box-shadow: var(--sombra-item); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.opcion:hover, .opcion:focus-visible { border-color: var(--acento); background: var(--acento-suave); box-shadow: var(--sombra-item-hover); }
.opcion__cuerpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opcion__t { font-weight: 600; overflow-wrap: anywhere; }
.opcion__d { font-size: var(--fs-2); font-weight: 600; color: var(--acento); }
.opcion svg { width: 18px; height: 18px; flex: none; color: var(--acento); }
/* Notificaciones abajo a la derecha; si hay una barra de acciones fija (Administración), por encima de ella. */
.avisos-flotantes { position: fixed; z-index: 60; right: 16px; bottom: 24px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
:root:has(.acciones) .avisos-flotantes { bottom: 88px; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: #1F2A36; color: #FFFFFF; box-shadow: 0 10px 30px rgba(0,0,0,0.18); font-size: 14px; animation: sube 0.18s ease-out; }
.toast--error { background: #8C1D18; }
.toast--ok { background: #1E5E3B; }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.cargando { display: grid; place-items: center; min-height: 40vh; color: var(--tinta-2); gap: 12px; }
.cargando::before { content: ''; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--acento-suave); border-top-color: var(--acento); animation: gira 0.8s linear infinite; }

/* ─── Cabecera de vista (Tablero, Reporte, Importar): título, aclaración y acciones ─── */
.vista__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.vista__titulos { min-width: 0; }
.vista__t { font-size: var(--fs-5); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--titulo); }
.vista__d { margin-top: 3px; min-height: 19px; font-size: var(--fs-2); color: var(--tinta-2); text-wrap: pretty; }
/* Línea de trazabilidad (SYSOWEB · datos hasta … · sincronizado …) bajo la descripción de la vista. */
.vista__fuente { margin-top: 2px; font-size: var(--fs-1); color: var(--tinta-3); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.vista__fuente:empty { display: none; }
.vista__acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── Barra de filtros compartida (filtros.js, CONTRATO-V2 §D): fija bajo la cabecera, compacta ───
   Dos filas: controles (ámbito · UG · sector · empresa · período · fechas exactas · interanual) y chips de categoría;
   en 1440 px mide ≤ 96 px. Sin etiquetas visibles sobre los selects: la primera opción nombra la dimensión
   («Todas las unidades», «Todos los sectores», «Todas las empresas») y cada control lleva aria-label. */
.filtros {
  position: sticky; top: var(--barra); z-index: 20;
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra-item);
}
.filtros__cuerpo { display: flex; flex-direction: column; gap: 8px; }
/* Resumen de una línea («Upstream · Año en curso · Todas las categorías»): solo en celular, donde la barra arranca plegada. */
.filtros__resumen { display: none; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.filtros__resumen > svg { flex: none; color: var(--acento); }
.filtros__resumen-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtros__resumen-chev { color: var(--tinta-3); transition: transform 0.15s; }
.filtros--abierta .filtros__resumen-chev { transform: rotate(180deg); }
.filtros__resumen:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 8px; }
.filtros__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.filtros__ambito { flex: none; }
/* Los selects comparten el espacio y se encogen antes de pasar a una segunda fila. */
.filtros__fila--principal > .control { flex: 1 1 150px; width: auto; max-width: 200px; }
.filtros__ug { flex-basis: 170px; }
.filtros__sector { flex-basis: 150px; max-width: 190px; }
.filtros__empresa { flex-basis: 190px; max-width: 230px; }
.filtros__periodo { flex-basis: 160px; max-width: 180px; }
.filtros .campo__et { font-size: var(--fs-1); font-weight: 600; color: var(--tinta-2); }
.filtros .control { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.filtros select.control { padding-right: 30px; background-position: right 10px center; }
/* Fechas exactas del preset («01/01/2026 – 13/10/2026») y, en «Personalizado», las dos fechas editables. */
.filtros__rango { flex: none; font-size: var(--fs-1); color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.filtros__fechas { display: flex; flex: 0 1 auto; align-items: center; gap: 6px; }
.filtros__fechas .control { width: 150px; }
.filtros__fechas-sep { color: var(--tinta-3); }
/* Comparación interanual: interruptor con etiqueta corta. */
.filtros__comparar { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 4px; font-size: var(--fs-2); font-weight: 600; color: var(--tinta-2); cursor: pointer; user-select: none; white-space: nowrap; }
.filtros__comparar:has(:checked) { color: var(--acento-oscuro); }
.filtros__categorias { align-items: center; gap: 6px 10px; }
.filtros__categorias .chips { gap: 6px; }
.filtros__categorias .chip--chico { min-height: 28px; padding: 0 10px; font-size: var(--fs-2); }
.filtros__cuenta { font-size: var(--fs-2); color: var(--tinta-2); white-space: nowrap; }
.filtros__error { font-size: var(--fs-2); color: var(--error); }
.filtros__error:empty { display: none; }
/* Notebook (≤ 1360 px): el texto del rango se oculta (queda en el globo del select de período) y la fila de categorías
   pierde su etiqueta visible (sigue en aria-labelledby) y aprieta los chips, para que las dos filas sigan siendo dos. */
@media (max-width: 1360px) {
  .filtros__rango { display: none; }
  .filtros__categorias > .campo__et { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filtros__categorias .chips { gap: 4px; }
  .filtros__categorias .chip--chico { padding: 0 8px; }
}
/* Tableta (≤ 1100 px): las filas se parten; la barra deja de ser fija para no tapar un cuarto de la pantalla. */
@media (max-width: 1100px) { .filtros { position: static; } }

/* Interruptor (checkbox con forma de llave): apagado = pista blanca con borde 3:1 y perilla oscura; encendido = azul PAE. */
.interruptor {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px;
  background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--borde-control); cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
}
.interruptor::before { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--borde-control-hover); transition: transform 0.15s, background 0.15s; }
.interruptor:checked { background: var(--acento); box-shadow: inset 0 0 0 1.5px var(--acento); }
.interruptor:checked::before { background: #FFFFFF; transform: translateX(14px); }
/* Foco: se conserva el borde de 1,5 px (3:1) y se agrega un anillo de 2 px en --acento separado por 2 px de blanco (8,8:1). */
.interruptor:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--borde-control), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--acento); }
.interruptor:checked:focus-visible { box-shadow: inset 0 0 0 1.5px var(--acento), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--acento); }

/* V2 tablero: inicio
   Tablero v3 (REQUISITOS-V3 §4 · DECISIONES-V3 §4-§5). Dueño: public/js/vistas/tablero.js (que ya no inyecta estilos).
   KPI héroe + secundarios, lectura rápida, paneles «un título + una pregunta + un gráfico + una lectura», grilla de 12
   columnas y piezas .tab-*. Las tarjetas toman los tokens del sistema visual (bloque «T3 sistema visual»: --superficie-tarjeta,
   --luz-borde, --luz-canto, --sombra-tarjeta, --sombra-elevada, --radio-tarjeta, --transicion).
   Escala de la vista: seis cuerpos, medidos (héroe 48–60 · 22 · 15 · 14 de controles y botones · 13 · 12; la barra suma 17).
   --fs-2 (13 px) coincide con el texto de los SVG (graficos.js con fuente 13: texto 13 px, chico 12 px = --fs-1).
   Contraste: sobre la superficie blanca y las bandas --fondo-2 todo texto chico va en --tinta-2 (7,1:1); --tinta-3 queda
   en 4,62:1 sobre --fondo-2; acá se conserva la mayor legibilidad de --tinta-2. */
/* La línea de trazabilidad cae sobre --fondo blanco: en el tablero va en --tinta-2. */
.tab-vista .vista__fuente { color: var(--tinta-2); }

/* ─── KPIs ─── */
/* Tira v1: 8 KPI en escritorio ancho, 4 + 4 en escritorio chico y tableta, 2 por fila en celular (siempre filas parejas). */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 1300px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Jerarquía (DECISIONES-V2 §6): un KPI héroe domina y hasta 6 secundarios de un cuerpo menor. Marcado:
   <div class="kpis kpis--jerarquia">
     <div class="kpi kpi--hero" style="--c:…;--c2:…">
       <p class="kpi__etiqueta">Atenciones · Año 2026</p><p class="kpi__valor">2.345</p><p class="kpi__detalle">…</p>
       <p class="kpi__comparacion kpi__comparacion--sube"><span class="kpi__delta">▲ 12 %</span> vs. período anterior (1.100)</p>
       <div class="tab-heroe__tendencia"><div class="tab-graf tab-heroe__spark" data-graf="spark-total"></div><p class="tab-heroe__eje">…</p></div>
       <dl class="kpi__horizontes"><div><dt>Mes de octubre</dt><dd>312</dd></div>…</dl>
     </div>
     <div class="kpis__secundarios"><div class="kpi" style="--c:…;--c2:…"><div class="tab-kpi__cab">valor · mini serie</div> etiqueta · detalle · comparación · horizontes</div> ×6</div>
   </div>
   Comparación: --sube · --baja · --igual (neutros) y --bueno · --malo cuando la vista conoce el sentido (más accidentes = malo). */
.kpis--jerarquia { grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.kpis__secundarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; min-width: 0; }
.kpi {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 14px;
  background: var(--superficie-tarjeta, #FFFFFF); border: 1px solid var(--borde-tarjeta); border-top-color: var(--luz-canto, var(--borde-tarjeta));
  border-radius: var(--radio-tarjeta, 14px); box-shadow: var(--luz-borde), var(--sombra-tarjeta, var(--sombra-item)); overflow: hidden;
  transition: box-shadow var(--transicion, 150ms ease);
}
.kpi:hover { box-shadow: var(--luz-borde), var(--sombra-elevada, var(--sombra-item-hover)); }
/* Canto superior de 3 px con el color de la familia (--c); la etiqueta nombra el indicador, el color solo acompaña. */
.kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c, var(--acento)); }
/* Cifras proporcionales en los números sueltos (dataviz); las tabulares quedan para columnas, ejes y horizontes. */
.kpi__valor { font-size: var(--fs-5); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; color: var(--titulo); overflow-wrap: anywhere; }
.kpi__unidad { margin-left: 4px; font-size: var(--fs-3); font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
.kpi__etiqueta { margin-top: 8px; font-size: var(--fs-2); font-weight: 600; line-height: 1.3; color: var(--tinta); }
.kpi__detalle { margin-top: 3px; font-size: var(--fs-1); line-height: 1.35; color: var(--tinta-2); text-wrap: pretty; }
.kpi__detalle:empty { display: none; }
.kpi__comparacion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: var(--fs-2); line-height: 1.3; color: var(--tinta-2); }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--fondo-3); color: var(--tinta); font-size: var(--fs-2); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi__delta svg { width: 14px; height: 14px; }
.kpi__comparacion--sube .kpi__delta { background: var(--acento-suave); color: var(--acento-oscuro); }
.kpi__comparacion--baja .kpi__delta { background: var(--fondo-3); color: var(--tinta-2); }
.kpi__comparacion--igual .kpi__delta { background: transparent; box-shadow: inset 0 0 0 1px var(--borde); color: var(--tinta-2); }
.kpi__comparacion--bueno .kpi__delta { background: var(--verde-suave); color: var(--verde); }
.kpi__comparacion--malo .kpi__delta { background: var(--error-suave); color: var(--error); }
.kpi__horizontes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 18px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.kpi__horizontes > div { min-width: 0; }
.kpi__horizontes dt { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-2); }
.kpi__horizontes dd { margin: 2px 0 0; font-size: var(--fs-5); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--titulo); font-variant-numeric: tabular-nums; }

/* Héroe: la pieza que domina. Luz de marca en la esquina (texto siempre en --tinta-2 o más oscuro: ≥ 6,6:1 sobre --acento-suave). */
.kpi--hero {
  justify-content: flex-start; padding: 22px 26px 20px;
  background: radial-gradient(120% 85% at 100% 0%, rgba(234, 242, 250, 0.72) 0%, rgba(234, 242, 250, 0) 64%), var(--superficie-tarjeta, #FFFFFF);
}
.kpi--hero::before { height: 4px; }
.kpi--hero .kpi__etiqueta { order: -1; margin: 0 0 10px; font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.kpi--hero .kpi__valor { font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.03em; }
.kpi--hero .kpi__detalle { margin-top: 8px; font-size: var(--fs-2); }
/* Tendencia de 12 meses del héroe: línea del total con área, el último mes marcado (hueco si está en curso) y su valor. */
.tab-heroe__tendencia { margin-top: 16px; }
.tab-heroe__spark { height: 64px; }
.tab-heroe__eje { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; font-size: var(--fs-1); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tab-heroe__eje-t { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* Secundarios: valor y mini serie de 12 meses en la misma línea; los horizontes «Mes · Año · Ant.» en una línea chica. */
.kpis__secundarios .kpi { padding: 14px 16px 12px; }
.tab-kpi__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 0; }
.tab-kpi__cab .kpi__valor { flex: 0 1 auto; min-width: 0; }
.tab-kpi__spark { flex: 0 1 52%; min-width: 56px; max-width: 132px; height: 30px; }
.kpis__secundarios .kpi__comparacion { margin-top: 6px; font-size: var(--fs-1); }
.kpis__secundarios .kpi__delta { min-height: 20px; padding: 0 7px; font-size: var(--fs-1); }
.tab-kpi__h { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: auto; padding-top: 8px; font-size: var(--fs-1); color: var(--tinta-2); }
.tab-kpi__h span { white-space: nowrap; }
.tab-kpi__h b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tab-kpi__rango { font-size: var(--fs-1); color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-kpi__sin { color: var(--tinta-2); }
@media (max-width: 1100px) {
  .kpis--jerarquia { grid-template-columns: minmax(0, 1fr); }
  .kpi--hero { padding: 20px 22px 18px; }
}

/* ─── Lectura rápida (cinco hechos del modelo, sin interpretar) ─── */
.tab-lectura {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 16px; padding: 10px 16px;
  background: var(--superficie-tarjeta, #FFFFFF); border: 1px solid var(--borde-tarjeta); border-top-color: var(--luz-canto, var(--borde-tarjeta));
  border-radius: var(--radio-tarjeta, 14px); box-shadow: var(--luz-borde), var(--sombra-tarjeta, var(--sombra-item)); font-size: var(--fs-2); color: var(--tinta-2);
}
.tab-lectura__t { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--titulo); white-space: nowrap; }
.tab-lectura__l { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.tab-lectura__l li { position: relative; padding-left: 12px; text-wrap: pretty; }
.tab-lectura__l li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); }

/* ─── Paneles: título + pregunta + gráfico + lectura (la tarjeta .panel es del bloque «T3 sistema visual») ─── */
.tab-panel__tit { min-width: 0; }
.tab-pregunta { margin-top: 3px; line-height: 1.4; text-wrap: pretty; }
.tab-lee { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--borde-suave); font-size: var(--fs-2); line-height: 1.45; color: var(--tinta); }
.tab-lee__t { flex: none; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acento); }
.tab-lee__x { min-width: 0; text-wrap: pretty; }
/* El pie mantiene el mismo texto legible en blanco y bandas auxiliares: --tinta-2 para conservar AA (--tinta-3 daría 4,62:1). */
.grilla-tablero .panel__pie { color: var(--tinta-2); line-height: 1.4; text-wrap: pretty; }
.tab-graf { min-width: 0; }
.tab-sub { margin: 16px 0 6px; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-2); }
.tab-sub:first-child { margin-top: 0; }
.tab-sub__n { margin-left: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tab-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin-bottom: 14px; }
.tab-cifras--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tab-cifras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tab-cifra { min-width: 0; padding-left: 10px; border-left: 2px solid var(--borde-suave); }
.tab-cifra__v { font-size: var(--fs-5); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--titulo); }
.tab-cifra__e { margin-top: 2px; font-size: var(--fs-1); line-height: 1.3; color: var(--tinta-2); text-wrap: pretty; }
/* Dos columnas dentro de un panel ancho (exámenes: clases | aptitud). */
.tab-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.tab-dos__col { min-width: 0; }
/* Tres columnas dentro de un panel ancho (base; en la tanda 4 solo la usa CAVAS y toxicológicos, con --parejo). */
.tab-tres { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 14px 32px; }
.tab-tres__col { min-width: 0; }
/* CAVAS y toxicológicos: porcentajes y drogas · CAVAS por mes · toxicológicos por mes, en tres columnas parejas (dos sin serie
   mensual: porcentajes | drogas). */
.tab-tres--parejo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tab-tres--parejo.tab-tres--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Empresas (v4): waffle de todas las atenciones | cruce del rol de llamados por empresa (mariposa), arriba alineados. Mitades
   parejas: con 5/12 la leyenda del waffle recortaba «Operadora (PAE / Axion)». */
.tab-empresas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; align-items: start; }
.tab-empresas__col { min-width: 0; }
/* Vacunación (v4): el origen de los registros en una línea de texto (no en un anillo). */
.tab-origen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: var(--fs-1); line-height: 1.4; color: var(--tinta-2); }
.tab-origen__t { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-2); }
.tab-origen__x { color: var(--tinta); font-variant-numeric: tabular-nums; }
.tab-origen__nota { margin: 4px 0 0; }
/* Nota bajo una tabla del panel (definiciones largas, REQUISITOS-V4 §2): entre la tabla y la siguiente. */
.tab-tabla .tab-tabla__nota { max-width: 72ch; margin: 6px 0 14px; }
/* Botón «Tabla de los últimos 12 meses» de los KPI (paridad de teclado de las mini series) y su tabla. */
.tab-kpis-pie { display: flex; justify-content: flex-end; margin: -8px 0 8px; }
.tab-kpis-tabla { margin: 0 0 16px; padding: 10px 12px; background: #FFFFFF; border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-tarjeta, 14px); }

/* Categorías: lista con barras HTML (degradé claro → base y borde del tono base, como las marcas SVG) y subcategorías desplegables. */
.tab-cats { margin: 0; padding: 0; list-style: none; }
.tab-cat + .tab-cat { border-top: 1px solid var(--borde-suave); }
.tab-cat__fila { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 40px 54px 18px; align-items: center; gap: 10px; min-height: 32px; padding: 2px 0; font-size: var(--fs-2); color: var(--tinta); }
.tab-cat__fila--plana { padding-right: 0; }
summary.tab-cat__fila { cursor: pointer; list-style: none; }
summary.tab-cat__fila::-webkit-details-marker { display: none; }
summary.tab-cat__fila:hover { color: var(--titulo); }
/* Foco de teclado de las filas de Categorías (su único camino por teclado): contorno del sistema, 2 px, 8,8:1. */
summary.tab-cat__fila:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.tab-cat__et { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tab-cat__et span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-cat__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--acento)); flex: none; }
.tab-cat__pista { position: relative; height: 12px; border-radius: 0 4px 4px 0; background: var(--fondo-2); }
.tab-cat__barra { position: absolute; left: 0; top: 0; height: 100%; border-radius: 0 4px 4px 0; background: var(--c, var(--acento)); box-shadow: inset 0 0 0 1px var(--c, var(--acento)); }
.tab-cat__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tab-cat__pct { text-align: right; font-size: var(--fs-1); color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-cat__chev { width: 16px; height: 16px; color: var(--tinta-2); transition: transform var(--transicion, 150ms ease); }
details[open] > summary .tab-cat__chev { transform: rotate(180deg); }
.tab-cat--cero .tab-cat__fila { color: var(--tinta-2); }
.tab-cat__subs { margin: 2px 0 10px; font-size: var(--fs-2); }
.tab-cat__subs th, .tab-cat__subs td { padding: 5px 10px; }
.tab-cat__subs th:first-child, .tab-cat__subs td:first-child { padding-left: 17px; }

/* Tabla equivalente de cada panel (botón «Tabla»): primera columna fija al desplazar en horizontal. */
.tab-tabla { overflow-x: auto; }
.tab-tabla .tabla-simple { font-size: var(--fs-2); white-space: nowrap; }
.tab-tabla .tabla-simple + .tabla-simple, .tab-tabla .tab-sub + .tabla-simple { margin-top: 0; }
.tab-tabla .tabla-simple th:first-child, .tab-tabla .tabla-simple td:first-child { position: sticky; left: 0; background: #FFFFFF; }
.tab-tabla .tabla-simple thead th:first-child { background: var(--fondo-2); }
.tab-tabla .tabla-simple tfoot th { background: var(--fondo-2); text-transform: none; letter-spacing: 0; font-size: var(--fs-2); color: var(--tinta); }
.tab-tabla .tabla-simple td.sec { color: var(--tinta-2); }
/* Textos largos de una tabla (v4): el encabezado de fila (causas con nombre largo) y las columnas `largo` (nombre oficial de
   un capítulo CIE-10) cortan renglón en lugar de obligar a desplazar la tabla. */
.tab-tabla .tabla-simple tbody th[scope="row"] { white-space: normal; max-width: 30ch; }
.tab-tabla .tabla-simple .largo { white-space: normal; min-width: 18ch; max-width: 46ch; }
.tab-desglose { margin-top: 12px; }
.tab-desglose > summary { cursor: pointer; font-size: var(--fs-2); font-weight: 600; color: var(--acento); }
.tab-desglose > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.tab-desglose .tabla-simple { margin-top: 8px; }
.tab-nota { margin: 4px 0 0; font-size: var(--fs-1); line-height: 1.4; color: var(--tinta-2); text-wrap: pretty; }

/* Estados: recarga (atenuación leve: 0,85 conserva ≥ 4,5:1 en todos los textos), vacío y error con el tablero ya pintado. */
.tab-cuerpo[aria-busy="true"] { opacity: 0.85; pointer-events: none; transition: opacity var(--transicion, 150ms ease); }
.tab-vacio { padding: 36px 16px; text-align: center; }
.tab-vacio__t { font-size: var(--fs-3); font-weight: 700; color: var(--titulo); }
.tab-vacio__d { margin: 6px auto 0; max-width: 560px; font-size: var(--fs-2); color: var(--tinta-2); text-wrap: pretty; }
.tab-vacio__acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.tab-error { max-width: 720px; }
.tab-aviso:not(:empty) { margin-bottom: 16px; }
.tab-aviso .aviso__cuerpo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; }

/* ─── Grilla de 12 columnas con ritmo vertical (estilo Power BI): los paneles de una fila miden lo mismo, el cuerpo crece y
   la línea «Lectura» queda al pie, a la misma altura en toda la fila (.tab-espacio empuja la lectura; mínimo 14 px). ─── */
.grilla-tablero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.grilla-tablero > .tab-panel > .panel__cuerpo { display: flex; flex-direction: column; }
.grilla-tablero > .tab-panel > .panel__cuerpo > * { flex: none; }
.grilla-tablero > .tab-panel > .panel__cuerpo > .tab-espacio { flex: 1 0 14px; }
.grilla-tablero > .tab-panel > .panel__cuerpo > .tab-espacio + .tab-lee { margin-top: 0; }
/* Panel de contenido breve junto a uno alto (vacunación junto al mapa de calor): el gráfico va centrado en el alto que deja
   la fila y la lectura sigue al pie, alineada con la de su vecino (el espacio deja de crecer: lo absorben los márgenes
   automáticos). Sin alto sobrante (una columna, ≤ 900 px) no cambia nada. */
.grilla-tablero > .tab-panel--centrado > .panel__cuerpo > .tab-panel__graf { margin-block: auto; }
.grilla-tablero > .tab-panel--centrado > .panel__cuerpo > .tab-espacio { flex: 0 0 14px; }
/* La lectura reserva dos renglones en la grilla de varias columnas: con una o dos líneas, su filete queda a la misma altura
   en toda la fila. Entre 901 y 1199 px las columnas son más angostas y una lectura llega a tres renglones (espontáneas |
   llamados a 950–1100 px; mensual | categorías justo arriba de 1100 px): ahí reserva tres (auditoría ronda 2: 18–19 px de
   desnivel medidos a 950 y 1024 px). La reserva suma el relleno (10 px) y el filete (1 px): con 10 px, una lectura de dos
   renglones medía 1 px más que la de uno y su filete quedaba 1 px más arriba (medido en la tanda 4 a 1024–1440 px). */
@media (min-width: 901px) { .grilla-tablero > .tab-panel .tab-lee { min-height: calc(11px + 2.9em); } }
@media (min-width: 901px) and (max-width: 1199px) { .grilla-tablero > .tab-panel .tab-lee { min-height: calc(11px + 4.35em); } }
/* Notas de método dentro del cuerpo, debajo del gráfico (la lectura cierra el panel). */
.grilla-tablero > .tab-panel > .panel__cuerpo > .panel__pie { padding: 0; margin-top: 10px; }
/* Títulos de panel a --fs-4 (17 px): un escalón claro sobre la pregunta (13 px) y la escala del tablero sigue en seis
   cuerpos contando la barra (héroe · 22 · 17 · 14 · 13 · 12; medido en la primera pantalla a 1440). */
.tab-vista .panel__cab h2 { font-size: var(--fs-4); }
.grilla-tablero > * { grid-column: span 12; min-width: 0; }
.grilla-tablero > .span-8 { grid-column: span 8; }
.grilla-tablero > .span-6 { grid-column: span 6; }
.grilla-tablero > .span-4 { grid-column: span 4; }
.grilla-tablero > .span-3 { grid-column: span 3; }
@media (max-width: 1100px) {
  .grilla-tablero > .span-8 { grid-column: span 12; }
  .grilla-tablero > .span-4, .grilla-tablero > .span-3 { grid-column: span 6; }
  .tab-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-tres__col:first-child { grid-column: 1 / -1; }
  .tab-empresas { grid-template-columns: minmax(0, 1fr); }
}
/* ≤ 900 px: todo a una columna (selectores explícitos para ganarle a .span-* sin !important). */
@media (max-width: 900px) {
  .grilla-tablero > *, .grilla-tablero > .span-8, .grilla-tablero > .span-6, .grilla-tablero > .span-4, .grilla-tablero > .span-3 { grid-column: span 12; }
}
/* Celular (≤ 760 px): héroe a todo el ancho con el número visible sin desplazar (filtros plegados); secundarios de a dos. */
@media (max-width: 760px) {
  .kpis { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px 12px 12px; min-height: 112px; }
  /* El detalle se envuelve en dos líneas: el desglose accidentológico / no accidentológico no se recorta con elipsis. */
  .kpi__detalle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; }
  .kpis--jerarquia { gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .kpis__secundarios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis__secundarios .kpi { padding: 12px 12px 10px; }
  .kpi--hero { padding: 18px 18px 16px; min-height: 0; }
  .kpi--hero .kpi__detalle, .kpi__comparacion { white-space: normal; }
  .kpi__horizontes { margin-top: 12px; }
  .tab-heroe__spark { height: 56px; }
  .tab-aviso .aviso__cuerpo { grid-template-columns: minmax(0, 1fr); }
  /* El nombre de la categoría ocupa una línea entera y la barra con sus números va debajo (sin recortes). */
  .tab-cat__fila { grid-template-columns: minmax(0, 1fr) 34px 54px 16px; gap: 2px 8px; padding: 7px 0; }
  .tab-cat__et { grid-column: 1 / -1; }
  .tab-cat__et span { white-space: normal; }
  .tab-lectura { padding: 10px 12px; }
  .tab-tres, .tab-dos { grid-template-columns: minmax(0, 1fr); }
  .tab-cifras--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-lee { flex-direction: column; gap: 2px; }
  /* Primera pantalla del celular: menos cromo antes del héroe. La descripción en dos líneas (el texto completo sigue en el
     DOM y en el reporte), la trazabilidad va al pie de la vista y las acciones quedan como botones de ícono de 44 px. */
  .tab-vista .vista__d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .tab-vista > .vista__cab .vista__fuente { display: none; }
  .tab-vista .vista__cab { flex-wrap: nowrap; align-items: flex-start; }
  .tab-vista .vista__acciones { width: auto; flex: none; }
  .tab-vista .vista__acciones .btn { flex: none; width: 44px; padding: 0; }
  .tab-vista .vista__acciones .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Trazabilidad al pie del tablero: solo en celular (arriba ocupa dos líneas de la primera pantalla). */
.tab-fuente-pie { display: none; margin-top: 16px; }
@media (max-width: 760px) { .tab-fuente-pie:not(:empty) { display: block; } }
@media print { .kpi, .tab-lectura { box-shadow: none; } }
/* fin V2 tablero */

/* ─── Tablero: paneles (tarjeta con cabecera y cuerpo); la grilla de 12 columnas está en el bloque «V2 tablero» ─── */
.panel { display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra-item); }
.panel__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; padding: 14px 18px 0; }
.panel__cab h2, .panel__t { margin: 0; font-size: var(--fs-3); font-weight: 600; line-height: 1.3; color: var(--titulo); }
.panel__d { margin-top: 2px; font-size: var(--fs-2); color: var(--tinta-2); }
.panel__acciones { display: flex; flex: none; gap: 6px; }
.panel__cuerpo { flex: 1 1 auto; min-width: 0; padding: 12px 18px 18px; }
.panel__cuerpo > svg { display: block; width: 100%; height: auto; }
.panel__pie { padding: 0 18px 14px; font-size: var(--fs-1); color: var(--tinta-3); }
.panel__vacio { padding: 22px 8px; text-align: center; font-size: var(--fs-2); color: var(--tinta-2); }
.panel--tabla .panel__cuerpo { padding: 8px 0 0; overflow-x: auto; }
.panel--tabla .tabla-simple tbody tr:last-child > * { border-bottom: 0; }


/* ─── Asistente de puesta en marcha del conector SYSOWEB (CONTRATO-V2 §K): tres pasos, un botón grande por paso ───
   <ol class="asistente">
     <li class="asistente__paso asistente__paso--hecho|--activo|--pendiente">
       <span class="asistente__n">1</span>                         (o el ícono «ok» en un paso hecho)
       <h3 class="asistente__t">Instalar la extensión</h3>
       <p class="asistente__d">Una línea de ayuda.</p>
       <p class="asistente__estado">Vinculada como …</p>           (paso hecho)
       <a class="btn btn--primario btn--grande asistente__btn" href="…">Instalar desde Chrome Web Store</a>
       <ol class="asistente__instr"><li>…</li></ol>                 (instrucciones opcionales, con <img class="asistente__captura">)
       <a class="asistente__ayuda" href="ayuda">¿Problemas?</a>
     </li> ×3
   </ol>
   Al completarse, la vista lo reemplaza por .estado-conexion. */
.asistente { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.asistente__paso {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px 20px 18px;
  background: #FFFFFF; border: 1px solid var(--borde-tarjeta); border-radius: var(--radio); box-shadow: var(--sombra-item);
}
.asistente__paso--activo { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra); }
.asistente__paso--hecho { background: var(--fondo-2); }
.asistente__paso--pendiente .asistente__t, .asistente__paso--pendiente .asistente__d { color: var(--tinta-3); }
.asistente__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--acento-suave); color: var(--acento-oscuro); font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.asistente__n svg { width: 18px; height: 18px; }
.asistente__paso--hecho .asistente__n { background: var(--pae-verde); color: #FFFFFF; }
.asistente__paso--pendiente .asistente__n { background: var(--fondo-3); color: var(--tinta-2); }
.asistente__t { margin: 4px 0 0; font-size: var(--fs-4); font-weight: 700; line-height: 1.25; color: var(--titulo); }
.asistente__d { margin: 0; font-size: var(--fs-2); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.asistente__estado { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-2); font-weight: 600; color: var(--verde); overflow-wrap: anywhere; }
.asistente__estado svg { width: 16px; height: 16px; flex: none; }
.asistente__btn { width: 100%; margin-top: auto; }
.asistente__instr { display: grid; gap: 6px; margin: 4px 0 0; padding-left: 20px; font-size: var(--fs-2); line-height: 1.45; color: var(--tinta-2); }
.asistente__instr li::marker { font-weight: 700; color: var(--acento); }
.asistente__captura { display: block; width: 100%; height: auto; margin-top: 6px; border: 1px solid var(--borde-suave); border-radius: 8px; }
.asistente__ayuda { align-self: flex-start; margin-top: 2px; font-size: var(--fs-2); font-weight: 600; color: var(--acento); text-decoration: underline; text-decoration-color: rgba(10, 74, 143, 0.35); text-underline-offset: 3px; }
.asistente__ayuda:hover { text-decoration-color: currentColor; }
.btn--grande { min-height: 52px; padding: 0 20px; border-radius: 9px; font-size: var(--fs-3); }
.btn--grande svg { width: 20px; height: 20px; }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
@media (max-width: 900px) { .asistente { grid-template-columns: minmax(0, 1fr); } }

/* ─── Estado de la conexión con SYSOWEB (tarjeta contraída del asistente, CONECTOR-SYSOWEB §8) ───
   <section class="estado-conexion estado-conexion--ok|--aviso|--error|--neutro [estado-conexion--sincronizando]">
     <span class="estado-conexion__punto" aria-hidden="true"></span>
     <div class="estado-conexion__texto"><p class="estado-conexion__t">Conectado a SYSOWEB</p><p class="estado-conexion__d">Última sincronización hace 3 min</p></div>
     <div class="estado-conexion__acciones"><button class="btn">Sincronizar ahora</button></div>
     <div class="progreso">…</div>                                                  (solo mientras sincroniza)
     <ul class="estado-conexion__modulos"><li><span class="estado-conexion__modulo">Asistencias</span><span class="estado-conexion__fecha">hasta 12/10/2026</span><span class="estado-conexion__cifras">+120 · 3 dup.</span></li>…</ul>
   </section> */
.estado-conexion {
  --c: var(--borde-control); --c-suave: var(--fondo-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px;
  background: #FFFFFF; border: 1px solid var(--borde-tarjeta); border-left: 4px solid var(--c); border-radius: var(--radio); box-shadow: var(--sombra-item);
}
.estado-conexion--ok { --c: var(--pae-verde); --c-suave: var(--verde-suave); }
.estado-conexion--aviso { --c: var(--aviso); --c-suave: var(--aviso-suave); }
.estado-conexion--error { --c: var(--error); --c-suave: var(--error-suave); }
.estado-conexion__punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--c-suave); }
.estado-conexion--sincronizando .estado-conexion__punto { animation: late 1.2s ease-in-out infinite; }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 4px var(--c-suave); } 50% { box-shadow: 0 0 0 7px var(--c-suave); } }
.estado-conexion__texto { flex: 1 1 240px; min-width: 0; }
.estado-conexion__t { margin: 0; font-size: var(--fs-3); font-weight: 700; color: var(--tinta); }
.estado-conexion__d { margin: 2px 0 0; font-size: var(--fs-2); color: var(--tinta-2); text-wrap: pretty; }
.estado-conexion__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.estado-conexion > .progreso { flex: 1 1 100%; }
.estado-conexion__modulos { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin: 4px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--borde-suave); font-size: var(--fs-2); }
.estado-conexion__modulos li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.estado-conexion__modulo { flex: none; font-weight: 600; color: var(--tinta); }
.estado-conexion__fecha { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.estado-conexion__cifras { flex: none; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── Barra de progreso determinada (importación por lotes) ─── */
.progreso { position: relative; width: 100%; height: 8px; border-radius: 999px; background: var(--fondo-3); box-shadow: inset 0 0 0 1px var(--borde-suave); overflow: hidden; }
.progreso__barra { height: 100%; width: 0; border-radius: inherit; background: var(--acento); transition: width 0.25s ease; }
.progreso--ok .progreso__barra { background: var(--pae-verde); }
.progreso--error .progreso__barra { background: var(--error); }
.progreso__texto { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: var(--fs-2); color: var(--tinta-2); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  body { font-size: 15px; }
  main { padding: 12px; }
  :root:has(.acciones) .avisos-flotantes { bottom: 132px; }
  .campo > .segmentado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; }
  .segmentado button { padding: 0 8px; }
  /* Filtros: ya no quedan fijos (ocuparían media pantalla). Arrancan plegados en una línea de resumen; desplegados,
     cada control a todo el ancho, las dos fechas en una fila y las categorías en una fila con desplazamiento horizontal. */
  .filtros { position: static; padding: 6px 12px; gap: 6px; }
  .filtros__resumen { display: flex; }
  .filtros__cuerpo { display: none; padding-bottom: 6px; }
  .filtros--abierta .filtros__cuerpo { display: flex; }
  .filtros__fila--principal { gap: 8px; }
  .filtros__ambito { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .filtros__fila--principal > .control, .filtros__fechas, .filtros__comparar { flex: 1 1 100%; width: 100%; max-width: none; }
  .filtros__fechas .control { flex: 1 1 0; width: auto; min-width: 0; }
  .filtros__rango { display: block; width: 100%; order: 1; }
  .filtros__categorias { flex-wrap: nowrap; align-items: center; }
  .filtros__categorias > .campo__et { flex: none; }
  .filtros__categorias .chips { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .filtros__categorias .chip--chico { flex: none; }
  .filtros__cuenta { flex: none; }
  /* KPIs del tablero en celular: en el bloque «V2 tablero». */
  .panel__cab { padding: 12px 14px 0; }
  .panel__cuerpo { padding: 10px 14px 14px; }
  .vista__acciones { width: 100%; }
  .vista__acciones .btn { flex: 1 1 0; min-width: 0; }
}

/* Puntero grueso (táctil): objetivos de 44 px (HIG / WCAG 2.5.5) para chips, segmentados, botones chicos, controles de filtros,
   menú, marca, paginador e interruptores. Va al final para ganarle a las reglas de tamaño anteriores y a las de ≤ 760 px. */
@media (pointer: coarse) {
  .chip, .chip--chico, .filtros__categorias .chip--chico, .segmentado--chico button, .segmentado button, .btn--chico, .btn--fantasma, .btn--enlace,
  .filtros .control, .filtros__fila--principal > .control, .filtros__fechas .control, .filtros__comparar, .editor-lista .control, #btn-salir,
  .admin__menu button, .acceso__ver, .asistente__ayuda, .panel summary, .tab-cat__fila { min-height: 44px; }
  .filtros__categorias .chip--chico { padding: 0 12px; }
  .nav a { flex: none; width: 44px; height: 44px; }
  .barra__marca { min-height: 44px; }
  .asistente__ayuda { display: inline-flex; align-items: center; }
  /* Paginador del reporte y menú de Administración: también a 44 px. */
  .paginador { width: 52px; }
  .paginador__b { width: 44px; height: 44px; }
  .paginador__b svg { width: 17px; height: 17px; }
  .admin__menu button { padding: 0 14px; }
  .editor-item > label { min-height: 44px; padding: 0 6px; }
  .editor-item > label > input[type="checkbox"], .interruptor { width: 44px; height: 26px; }
  .editor-item > label > input[type="checkbox"]::before { width: 22px; height: 22px; }
  .editor-item > label > input[type="checkbox"]:checked::before { transform: translateX(18px); }
  .interruptor::before { width: 20px; height: 20px; }
  .interruptor:checked::before { transform: translateX(18px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Impresión: solo las hojas del reporte */
@media print {
  html, body { background: #FFFFFF !important; }
  .barra, .cinta-demo, .rep__cab, .filtros, .visor__barra, .paginador, .avisos-flotantes, .no-imprimir { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  .tarjeta { border: 0 !important; box-shadow: none !important; }
  /* Sin la sombra interior del visor: Chrome la imprimía como una máscara rasterizada de página completa por hoja. */
  .visor-contenedor { background: #FFFFFF !important; padding: 0 !important; border: 0 !important; overflow: visible !important; box-shadow: none !important; }
}

/* T3 sistema visual: inicio
   Tokens y reglas del sistema de gráficos (REQUISITOS-V3 §4 · DECISIONES-V3 §4). Dueño: catálogo de gráficos (public/js/graficos.js).
   Correspondencia, una sola definición por color: --grad-<familia>-b = color base de la familia (categorias.js FAMILIAS; «marca» =
   --pae-azul; «neutro» = COLOR_NEUTRO) y --grad-<familia>-a = tono claro = el base mezclado con 20 % de blanco (graficos.js T_CLARO y
   GRADIENTES; corrección ronda 1 de la tanda 3: con 40 % los extremos claros de familias distintas se confundían). Los SVG escriben
   esos mismos hex en sus <linearGradient> (imprimen sin depender de variables CSS) y tests/graficos.test.mjs verifica que coincidan
   con este bloque. El degradé es solo de las marcas de una serie; las que distinguen series (apiladas por familia, anillos,
   leyendas) van planas. El tono claro nunca es texto ni define solo el borde de una marca (borde de 1 px con ≥ 3:1 sobre blanco). */
:root {
  --grad-marca-a: #3B6EA5; --grad-marca-b: #0A4A8F;
  --grad-emergencias-a: #EA615D; --grad-emergencias-b: #E53935;
  --grad-espontaneas-a: #4176B1; --grad-espontaneas-b: #12549E;
  --grad-enfermeria-a: #33A369; --grad-enfermeria-b: #008C44;
  --grad-controles-a: #987236; --grad-controles-b: #7E4F04;
  --grad-examenes-a: #53A5C7; --grad-examenes-b: #288EB9;
  --grad-otras-a: #9C4E84; --grad-otras-b: #832265;
  --grad-neutro-a: #959FA9; --grad-neutro-b: #7B8794;
  /* Tarjetas blancas, borde azul tenue y sombra corta; el hover conserva la misma altura visual. */
  --superficie-tarjeta: #FFFFFF;
  --luz-borde: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --luz-canto: #D7E2EE;
  --sombra-tarjeta: 0 1px 2px rgba(10, 74, 143, 0.04), 0 4px 12px -6px rgba(10, 74, 143, 0.10);
  --sombra-elevada: 0 1px 3px rgba(10, 74, 143, 0.06), 0 5px 14px -6px rgba(10, 74, 143, 0.12);
  --radio-tarjeta: 14px;
  --radio-control: 10px;
  --transicion: 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* Panel del tablero: un título + una pregunta + un gráfico + una lectura. Borde uniforme y sombra breve, también al hover. */
.panel {
  border-radius: var(--radio-tarjeta);
  border-top-color: var(--luz-canto);
  background: var(--superficie-tarjeta);
  box-shadow: var(--luz-borde), var(--sombra-tarjeta);
  transition: box-shadow var(--transicion), border-color var(--transicion);
}
.panel:hover { border-color: var(--borde-tarjeta); border-top-color: var(--luz-canto); box-shadow: var(--luz-borde), var(--sombra-elevada); }
/* Paridad de teclado: el botón «Tabla» es el camino a los números sin puntero; su foco se ve sobre la tarjeta. */
.panel .btn[data-tabla]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; box-shadow: var(--foco); }

/* Gráficos SVG (graficos.js). Las marcas llevan degradé claro → base y borde de 1 px del tono base; el texto, siempre tinta. */
.graf { display: block; width: 100%; height: auto; overflow: visible; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.graf.graf--hoja { width: auto; max-width: 100%; }
.graf text { font-family: inherit; font-variant-numeric: tabular-nums; }
.graf .graf__heroe { font-variant-numeric: proportional-nums; }
.graf__hit { fill: transparent; }
.graf__hit:hover { fill: rgba(10, 74, 143, 0.045); }
.graf--temporal .graf__hit:hover, .graf--calor .graf__hit:hover, .graf--mosaico .graf__hit:hover { fill: transparent; }
.graf__marca, .graf__punto { transition: opacity var(--transicion), filter var(--transicion), stroke-width var(--transicion); }
/* Hover: lo no señalado baja al 60 % (solo marcas: el texto conserva su contraste AA); lo señalado se realza con borde 1,5 px y sombra.
   Las celdas del mapa de calor NO se atenúan (llevan su número escrito encima: al 60 % el blanco bajaba a 2,47:1); la celda
   señalada se marca con un contorno de 2 px en tinta. */
.graf--hover .graf__marca:not(.graf__sel):not(.graf__celda), .graf--hover .graf__punto:not(.graf__sel) { opacity: 0.6; }
.graf--hover .graf__marca.graf__sel[stroke] { stroke-width: 1.5px; }
.graf--hover .graf__sel { filter: drop-shadow(0 2px 3px rgba(23, 61, 98, 0.28)); }
.graf--hover .graf__celda.graf__sel { stroke: var(--tinta); stroke-width: 2px; }
.graf__cursor { opacity: 0; pointer-events: none; transition: opacity var(--transicion); }
.graf__cursor--on { opacity: 1; }
.graf--hoja .graf__marca, .graf--hoja .graf__punto { transition: none; }

/* Leyenda HTML (dos o más series): la muestra imita la marca (caja para barras y áreas, trazo para líneas). */
.graf-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-1); color: var(--tinta-2); }
.graf-leyenda__i { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.graf-leyenda__sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.graf-leyenda__sw--linea { width: 14px; height: 3px; border-radius: 2px; }
.graf-leyenda__et { color: var(--tinta); }
.graf-leyenda__n { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.graf-leyenda__p { color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Globo-tarjeta: el valor manda (grande, en título), el nombre acompaña; flecha hacia la marca; aparece en 150 ms. */
.graf-tip {
  position: fixed; z-index: 70; min-width: 132px; max-width: 280px; padding: 9px 12px 10px;
  border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-control); background: #FFFFFF; color: var(--tinta);
  box-shadow: var(--sombra-elevada); font-size: var(--fs-2); line-height: 1.35;
  opacity: 0; transform: translateY(4px); transition: opacity var(--transicion), transform var(--transicion);
}
.graf-tip[hidden] { display: none; }
.graf-tip--visible { opacity: 1; transform: none; }
.graf-tip::after {
  content: ''; position: absolute; left: var(--flecha-x, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: #FFFFFF; border-right: 1px solid var(--borde-tarjeta); border-bottom: 1px solid var(--borde-tarjeta); transform: rotate(45deg);
}
.graf-tip--abajo { transform: translateY(-4px); }
.graf-tip--abajo.graf-tip--visible { transform: none; }
.graf-tip--abajo::after { top: -6px; bottom: auto; border: 0; border-left: 1px solid var(--borde-tarjeta); border-top: 1px solid var(--borde-tarjeta); }
.graf-tip--derecha, .graf-tip--izquierda { transform: none; }
.graf-tip--derecha::after, .graf-tip--izquierda::after { top: var(--flecha-y, 50%); bottom: auto; margin: -5px 0 0; border: 0; }
.graf-tip--derecha::after { left: -6px; border-left: 1px solid var(--borde-tarjeta); border-bottom: 1px solid var(--borde-tarjeta); }
.graf-tip--izquierda::after { left: auto; right: -6px; border-right: 1px solid var(--borde-tarjeta); border-top: 1px solid var(--borde-tarjeta); }
/* Clasificaciones: globo compacto fuera del flujo y cifras vinculadas a la fila señalada. */
.graf--piramide-llamados .graf__cab-clasificacion { font-family: Arial, sans-serif; font-weight: 700; }
.graf--piramide-llamados .graf__placa { filter: drop-shadow(0 2px 2px rgb(10 63 124 / 24%)); }
.graf--piramide-llamados.graf--hoja .graf__placa { filter: none; }
.graf-tip--piramide { min-width: 0; max-width: calc(100vw - 16px); overflow-y: auto; border-color: #A9C6DE; border-radius: 8px; padding: 6px 8px; line-height: 1.25; box-shadow: 0 4px 12px -5px rgb(10 63 124 / 22%); transform: none; }
.graf-tip--piramide::after { display: none; }
.graf-tip--piramide .graf-tip__v { font-size: 14px; line-height: 1.25; }
.graf-tip--piramide .graf-tip__t, .graf-tip--piramide .graf-tip__l { font-size: 12px; }
.graf-tip--piramide .graf-tip__k { display: none; }
.graf-tip--piramide-breve .graf-tip__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.graf-tip--piramide-breve .graf-tip__v { margin-top: 0; }
.graf--piramide-llamados .graf__fila-numerica { transition: fill var(--transicion), stroke var(--transicion); }
.graf--piramide-llamados .graf__fila-numerica.graf__sel { fill: #E1EEF9; stroke: #397CAF; stroke-width: 1.3px; }
.graf--piramide-llamados .graf__datos-clasificacion.graf__sel .graf__cantidad { fill: #103F76; font-weight: 700; }
.graf--piramide-llamados .graf__sel:not(.graf__marca) { filter: none; }
.graf--piramide-llamados .graf__hit:hover { fill: transparent; }
@media print { .graf-tip { display: none !important; } }
.graf-tip__t { display: flex; align-items: center; gap: 7px; font-size: var(--fs-1); font-weight: 600; color: var(--tinta-2); }
.graf-tip__k { flex: none; width: 12px; height: 3px; border-radius: 2px; }
.graf-tip__v { margin-top: 3px; font-size: var(--fs-4); font-weight: 700; line-height: 1.2; color: var(--titulo); font-variant-numeric: tabular-nums; }
.graf-tip__p { margin-left: 4px; font-size: var(--fs-2); font-weight: 600; color: var(--tinta-2); }
.graf-tip__var { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--fondo-3); color: var(--tinta-2); font-size: var(--fs-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.graf-tip__var--sube { background: var(--acento-suave); color: var(--acento-oscuro); }
.graf-tip__var--bueno { background: var(--verde-suave); color: var(--verde); }
.graf-tip__var--malo { background: var(--error-suave); color: var(--error); }
.graf-tip__flecha { font-size: 10px; line-height: 1; }
.graf-tip__l { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: var(--fs-1); color: var(--tinta-2); }
.graf-tip__l + .graf-tip__l { margin-top: 2px; }
.graf-tip__le { flex: 1 1 auto; min-width: 0; }
.graf-tip__lv { flex: none; margin-left: 12px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }

@media print {
  .panel { background: #FFFFFF; box-shadow: none; }
  .graf-tip, .graf__hit, .graf__cursor { display: none !important; }
  .graf--hover .graf__marca, .graf--hover .graf__punto { opacity: 1 !important; filter: none !important; }
}
/* T3 sistema visual: fin */

/* ─── Espera del servidor (Tanda 5 · Fase 3): aviso modal con reloj de arena y esqueleto de la primera carga ─── */
dialog.espera { border: 0; padding: 0; border-radius: 16px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(23, 61, 98, 0.28); background: var(--fondo); color: var(--tinta); }
dialog.espera::backdrop { background: rgba(23, 35, 48, 0.40); backdrop-filter: blur(1.5px); }
.espera__cuerpo { display: grid; justify-items: center; gap: 6px; padding: 26px 26px 6px; text-align: center; }
.espera__t { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: var(--titulo); letter-spacing: -0.005em; }
.espera__d { margin: 0; font-size: 14.5px; color: var(--tinta-2); text-wrap: pretty; }
.espera__tiempo { margin: 6px 0 0; font-size: var(--fs-3); font-weight: 600; color: var(--acento); font-variant-numeric: tabular-nums; }
.espera__pista { margin: 0; min-height: 0; font-size: var(--fs-2); color: var(--tinta-2); text-wrap: pretty; }
.espera__pista:empty { display: none; }
.espera__acciones { display: flex; justify-content: center; padding: 14px 22px 22px; }
.reloj-arena { display: block; overflow: visible; }
.reloj-arena__vidrio { fill: var(--acento-suave); }
.reloj-arena__borde { fill: none; stroke: var(--acento); stroke-width: 2.4; stroke-linejoin: round; }
.reloj-arena__tapa { fill: var(--acento); }
.reloj-arena__poste { fill: var(--acento-medio); }
.reloj-arena__arena { fill: var(--acento-medio); }
.reloj-arena__chorro { stroke: var(--acento-medio); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2.2 2.6; }
.reloj-arena__giro { transform-box: view-box; transform-origin: 32px 44px; animation: ra-giro 3.2s cubic-bezier(0.55, 0, 0.35, 1) infinite; }
.reloj-arena__arena--sup { animation: ra-sup 3.2s linear infinite; }
.reloj-arena__arena--inf { animation: ra-inf 3.2s linear infinite; }
.reloj-arena__chorro { animation: ra-chorro 0.45s linear infinite, ra-chorro-visible 3.2s step-end infinite; }
@keyframes ra-giro { 0%, 84% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
@keyframes ra-sup { 0% { transform: translateY(0); } 82%, 100% { transform: translateY(31px); } }
@keyframes ra-inf { 0% { transform: translateY(32px); } 82%, 100% { transform: translateY(0); } }
@keyframes ra-chorro { to { stroke-dashoffset: -9.6; } }
@keyframes ra-chorro-visible { 0% { opacity: 1; } 82% { opacity: 0; } }
/* Sin movimiento (regla global de prefers-reduced-motion): el reloj queda con la mitad de la arena en cada bulbo. */
@media (prefers-reduced-motion: reduce) {
  .reloj-arena__arena--sup { transform: translateY(15px); }
  .reloj-arena__arena--inf { transform: translateY(16px); }
}

/* Primera carga del tablero: la forma del tablero (indicadores y paneles) en gris, con un brillo que recorre. */
.tab-esqueleto { display: grid; gap: 16px; }
.tab-esqueleto__kpis { display: grid; gap: 16px; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); }
.tab-esqueleto__secundarios { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tab-esqueleto__grilla { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tab-esq { border-radius: var(--radio); background: linear-gradient(100deg, var(--fondo-3) 30%, #F4F8FC 50%, var(--fondo-3) 70%) 0 0 / 300% 100%; animation: tab-brillo 1.6s ease-in-out infinite; }
.tab-esq--heroe { min-height: 230px; }
.tab-esq--kpi { min-height: 109px; }
.tab-esq--panel { min-height: 300px; }
.tab-esqueleto__estado { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 0; color: var(--tinta-2); font-size: var(--fs-2); }
@keyframes tab-brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width: 1100px) { .tab-esqueleto__kpis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .tab-esqueleto__secundarios { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tab-esqueleto__grilla { grid-template-columns: minmax(0, 1fr); } .tab-esq--heroe { min-height: 180px; } }

/* Rediseño 2026-10: inicio
   Tablero «Actividad de Salud» (docs/REDISENO-TABLERO.md; vistas/tablero.js y tablero-salud.js). Reutiliza la grilla de 12
   columnas (.grilla-tablero, .span-*), la tarjeta .panel, la lectura .tab-lee y los tokens del bloque «T3 sistema visual».
   Agrega: encabezados de bloque (h2) y de panel (h3), resumen 01, controles, listas compactas, programas, lesiones, empresas,
   CIE-10, selectores y la entrada animada de los gráficos. Degradés sutiles: siempre del tono claro al base de la MISMA
   familia (el color nunca es texto). Movimiento: sólo opacidad y escala de las marcas, una vez, con movimiento reducido
   nada (además de la regla global), y en la impresión tampoco. */

/* Separación entre la nota de cobertura de la vista y el primer bloque. */
.tab-vista > .tab-cuerpo { margin-top: 14px; }

/* Encabezado de bloque: rótulo en versalitas con su filete; describe el bloque sin competir con los títulos de panel. */
.tab-salud > .tab-bloque { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 22px 0 -4px; padding: 0 2px; }
.tab-salud > .tab-bloque:first-child { margin-top: 0; }
.tab-bloque__t { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-2); font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento-oscuro); }
.tab-bloque__t::before { content: ''; flex: none; width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--acento-medio), var(--acento-oscuro)); }
.tab-bloque__d { margin: 0; font-size: var(--fs-2); color: var(--tinta-2); text-wrap: pretty; }
.tab-salud > .tab-bloque::after { content: ''; flex: 1 1 48px; align-self: center; height: 1px; background: linear-gradient(90deg, var(--borde), rgba(200, 217, 232, 0)); }

/* Panel: título h3 a --fs-4 (el escalón sobre la pregunta de 13 px); las acciones bajan de renglón antes que apretar el título. */
.tab-salud .panel__cab { flex-wrap: wrap; }
.tab-salud .tab-panel__tit { flex: 1 1 280px; }
.tab-salud .panel__cab h3 { margin: 0; font-size: var(--fs-4); font-weight: 650; line-height: 1.3; letter-spacing: -0.005em; color: var(--titulo); text-wrap: balance; }
.tab-salud .panel__acciones { flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; max-width: 100%; }
.tab-salud .panel__vacio { padding: 18px 8px; }
/* Tablas: el encabezado de fila es un nombre (empresa, UG, motivo, código): en caja normal y legible, no como rótulo de columna. */
.tab-salud .tabla-simple tbody th[scope="row"] { background: #FFFFFF; font-size: var(--fs-2); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta); border-bottom-color: var(--borde-suave); }
/* Dos columnas apiladas en un mismo panel (ausentismo): aire entre filas. Una cifra sola ocupa todo el ancho. */
.tab-salud .tab-dos + .tab-dos { margin-top: 16px; }
.tab-cifras--1 { grid-template-columns: minmax(0, 1fr); }
/* Tableta: el panel de programas va a todo el ancho (sus fichas se acomodan en fila; sin hueco a su lado). */
@media (min-width: 901px) and (max-width: 1100px) { .grilla-tablero > .tab-panel--ancho-tableta { grid-column: span 12; } }

/* Controles de formulario dentro de los paneles: los del sistema (.control), en tamaño compacto. */
.tab-salud .control { width: auto; min-height: 34px; padding: 5px 10px; font-size: var(--fs-2); }
.tab-salud select.control { max-width: 260px; padding-right: 30px; background-position: right 10px center; }
.tab-selector { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-1); font-weight: 600; color: var(--tinta-2); }
.tab-buscar { display: inline-flex; flex: none; width: 240px; max-width: 100%; }
.tab-buscar input.control {
  width: 100%; padding-left: 32px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6168' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.2' y2='16.2'/%3E%3C/svg%3E") no-repeat 10px 50% / 15px;
}
/* Segmentado con botones de alternancia (aria-pressed): mismo aspecto que el de radios. */
.segmentado button[aria-pressed="true"] { background: var(--acento); color: #FFFFFF; font-weight: 600; box-shadow: 0 1px 2px rgba(10, 74, 143, 0.25), 0 3px 8px -2px rgba(10, 74, 143, 0.40); }
.segmentado button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* 01 · Resumen: el total domina (héroe con luz de marca) y las categorías van en fichas con su parte del total. */
.tab-resumen__grid { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: 16px 22px; align-items: stretch; }
.tab-resumen__heroe {
  position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 20px 22px 18px 24px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(232, 240, 249, 0.95) 0%, rgba(232, 240, 249, 0) 70%), linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 100%);
  box-shadow: inset 0 0 0 1px var(--borde-tarjeta);
}
.tab-resumen__heroe::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--acento-medio), var(--acento-oscuro)); }
.tab-resumen__eti { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.tab-resumen__valor { margin-top: 6px; font-size: var(--fs-hero); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--titulo); font-variant-numeric: proportional-nums; }
.tab-resumen__det { margin-top: 10px; font-size: var(--fs-2); line-height: 1.4; color: var(--tinta-2); text-wrap: pretty; }
.tab-resumen__comp { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--borde); font-size: var(--fs-1); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.tab-resumen__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Pocas categorías (filtro): las fichas ocupan la fila. Con 7 (sin COVID), la última ocupa dos columnas: fila completa. */
.tab-resumen__cats--1 { grid-template-columns: minmax(0, 1fr); }
.tab-resumen__cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tab-resumen__cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tab-resumen__cats--4 > .tab-resumen__cat:last-child:nth-child(4n + 3) { grid-column: span 2; }
.tab-resumen__cat {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 13px 11px; border-radius: 10px; overflow: hidden;
  background: #FFFFFF; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #FFFFFF) 0%, #FFFFFF 64%);
  box-shadow: inset 0 0 0 1px var(--borde-suave);
}
.tab-resumen__cat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c2, var(--c)), var(--c)); }
.tab-resumen__cat-t { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-2); font-weight: 600; line-height: 1.3; color: var(--tinta); }
.tab-resumen__cat-n { margin-top: 2px; font-size: var(--fs-5); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--titulo); font-variant-numeric: tabular-nums; }
.tab-resumen__cat-p { font-size: var(--fs-1); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tab-resumen__pista { position: relative; display: block; height: 6px; margin-top: auto; border-radius: 3px; background: var(--fondo-3); overflow: hidden; }
.tab-resumen__cat-p + .tab-resumen__pista { margin-top: 8px; }
.tab-resumen__pista > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--c2, var(--c)), var(--c)); }
.tab-resumen__fuera { margin: 14px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--fondo-2); font-size: var(--fs-1); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
@media (max-width: 1100px) { .tab-resumen__grid { grid-template-columns: minmax(0, 1fr); } }

/* 03 · Detalle desplegable de una categoría: los encabezados cortan renglón y, si aun así no entra, la tabla se desplaza
   dentro de su caja (nunca la página). */
.tab-cat__det { overflow-x: auto; }
.tab-salud .tab-cat__subs thead th { white-space: normal; text-transform: none; letter-spacing: 0; font-size: var(--fs-1); }

/* 10–12 · Controles: tres columnas (múltiplos del mismo color), cada una con su canto y su luz de familia. */
.tab-controles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 20px; }
.tab-control {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
  position: relative; min-width: 0; padding: 14px 14px 10px; border-radius: 12px;
  background: #FFFFFF; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, #FFFFFF) 0%, #FFFFFF 140px);
  box-shadow: inset 0 0 0 1px var(--borde-suave);
}
.tab-control::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--c2, var(--c)), var(--c)); }
.tab-control__t { margin: 0 0 10px; font-size: var(--fs-3); font-weight: 650; line-height: 1.3; color: var(--titulo); }
.tab-control .tab-cifras { margin-bottom: 6px; }
/* Cabecera, gráfico y pie comparten filas: las notas no desplazan el eje de una tarjeta respecto de las otras. */
.tab-control__cabecera { display: flex; flex-direction: column; min-width: 0; }
.tab-control > .tab-graf { align-self: end; }
@media (max-width: 1100px) {
  .tab-controles { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .tab-control { display: block; grid-row: auto; }
  .tab-control__pie:empty { display: none; }
}

/* Listas compactas (clave · valor) y notas chicas. */
.tab-mini { margin: 6px 0 10px; padding: 0; list-style: none; font-size: var(--fs-2); }
.tab-mini li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dotted var(--borde); }
.tab-mini li:last-child { border-bottom: 0; }
.tab-mini li > span { min-width: 0; color: var(--tinta); text-wrap: pretty; }
.tab-mini li > b { flex: none; font-weight: 650; color: var(--titulo); font-variant-numeric: tabular-nums; }
.tab-mini-nota { margin: 4px 0 8px; font-size: var(--fs-1); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }

/* 15 · Consultas específicas: lista de cifras; lo no identificable en la fuente, en texto (nunca un cero). */
.tab-lista { margin: 0; padding: 0; list-style: none; }
.tab-lista__i { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); font-size: var(--fs-2); color: var(--tinta); }
.tab-lista__i:first-child { padding-top: 2px; }
.tab-lista__i:last-child { border-bottom: 0; }
.tab-lista__i > span { min-width: 0; text-wrap: pretty; }
.tab-lista__i > b { flex: none; font-size: var(--fs-4); font-weight: 700; color: var(--titulo); font-variant-numeric: tabular-nums; }
.tab-lista__i--sin > b { max-width: 55%; font-size: var(--fs-1); font-weight: 600; color: var(--tinta-2); text-align: right; }

/* 16 · Identidad de los programas; etapas desconocidas conservadas en el detalle. */
.tab-programas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.tab-programa { display:flex; flex-direction:column; min-width:0; padding:16px 16px 4px; border:1px solid #DFE7EF; border-top:3px solid var(--programa); border-radius:12px; background:#FFFFFF; }
.tab-programa__t { font-size: var(--fs-2); font-weight: 650; line-height: 1.3; color: var(--tinta); text-wrap: pretty; }
.tab-programa__v { margin-top: 4px; font-size: var(--fs-5); font-weight: 700; line-height: 1.15; color: var(--titulo); font-variant-numeric: tabular-nums; }
.tab-programa__v span { font-size: var(--fs-2); font-weight: 600; color: var(--tinta-2); }
.tab-programa__x { margin-top: 3px; font-size: var(--fs-1); line-height: 1.4; color: var(--tinta-2); text-wrap: pretty; }
.tab-programa--sin { background: #FFFFFF; }

/* 20 · Lesiones: silueta | listas de tipo, mecanismo y siniestros. */
.tab-lesiones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 22px; align-items: start; }
.tab-lesiones__listas { min-width: 0; }
.tab-lesiones__listas > .tab-sub:first-child { margin-top: 0; }

/* 23 · Empresas: opción (operadora / contratistas) + búsqueda, y la lista desplegable con su composición. */
.tab-empresas__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 16px 0 6px; }
.tab-emplista { margin: 0; padding: 0; list-style: none; }
.tab-empresa + .tab-empresa { border-top: 1px solid var(--borde-suave); }
.tab-empresa__fila { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 56px 58px 18px; align-items: center; gap: 10px; min-height: 36px; padding: 3px 0; cursor: pointer; list-style: none; font-size: var(--fs-2); color: var(--tinta); }
.tab-empresa__fila::-webkit-details-marker { display: none; }
.tab-empresa__fila:hover { color: var(--titulo); }
.tab-empresa__fila:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.tab-empresa__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tab-empresa__pista { position: relative; height: 10px; border-radius: 0 4px 4px 0; background: var(--fondo-2); }
.tab-empresa__pista > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--grad-marca-a), var(--grad-marca-b)); box-shadow: inset 0 0 0 1px var(--grad-marca-b); }
.tab-empresa__v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.tab-empresa__p { text-align: right; font-size: var(--fs-1); color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-empresa__det { display: grid; gap: 6px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--fondo-2); }
.tab-empresa__det .tab-mini { margin: 0; columns: 2 220px; column-gap: 24px; }
.tab-empresa__det .tab-mini li { break-inside: avoid; }
.tab-empresa__det .btn { justify-self: start; }
.tab-emplista + .btn { margin-top: 8px; }

/* 27 · CIE-10: tabla gráfica con encabezados fijos; la barra de cada celda es relativa al máximo de su columna. */
.tab-cie { overflow: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--borde-suave); }
/* Con el listado completo, la tabla se desplaza dentro de su caja (encabezados fijos) en lugar de alargar la página. */
.tab-cie--todas { max-height: min(72vh, 900px); }
.tab-cie:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tab-cie__t { width: 100%; min-width: 560px; margin: 0; font-size: var(--fs-2); }
.tab-cie__t thead th { position: sticky; top: 0; z-index: 2; background: var(--fondo-2); }
.tab-cie__t tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 150px; background: #FFFFFF; text-align: left; font-weight: 400; }
.tab-cie__t thead th:first-child { left: 0; z-index: 3; }
.tab-cie__cod { display: block; font-weight: 700; letter-spacing: 0.02em; color: var(--titulo); font-variant-numeric: tabular-nums; }
.tab-cie__cap { display: block; font-size: var(--fs-1); color: var(--tinta-2); white-space: normal; }
.tab-cie__c { min-width: 170px; white-space: nowrap; }
.tab-cie__barra { position: relative; display: inline-block; width: calc(100% - 9.6em); min-width: 40px; height: 9px; vertical-align: middle; border-radius: 0 4px 4px 0; background: var(--fondo-2); overflow: hidden; }
.tab-cie__barra > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--c2, var(--c)), var(--c)); }
.tab-cie__n { display: inline-block; width: 3.8em; vertical-align: middle; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.tab-cie__p { display: inline-block; width: 5.6em; vertical-align: middle; text-align: right; font-size: var(--fs-1); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tab-cie + .btn { margin-top: 8px; }

/* Entrada animada de los gráficos (tablero.js): sólo en pantalla y sin preferencia de movimiento reducido. Mientras el
   gráfico no entró en la vista, sus marcas esperan ocultas (`graf--espera`); al entrar, crecen una vez (`graf--entrada`):
   columnas desde la base, barras desde el eje, puntos desde su centro; líneas, áreas, celdas y grupos sólo se funden.
   Los rótulos y números nunca se animan. */
@media screen and (prefers-reduced-motion: no-preference) {
  .graf--espera :is(.graf__marca, .graf__linea, .graf__area, .graf__punto) { opacity: 0; }
  .graf--entrada :is(.graf__marca, .graf__linea, .graf__area, .graf__punto) { animation: graf-aparece 440ms cubic-bezier(0.2, 0.6, 0.2, 1) backwards; }
  .graf--entrada:is(.graf--mensual, .graf--agrupadas, .graf--columnas-tendencia) path.graf__marca { transform-box: fill-box; transform-origin: 50% 100%; animation-name: graf-crece-y; animation-duration: 560ms; }
  .graf--entrada:is(.graf--barras, .graf--proporcion, .graf--bullet) path.graf__marca { transform-box: fill-box; transform-origin: 0 50%; animation-name: graf-crece-x; animation-duration: 560ms; }
  .graf--entrada circle:is(.graf__marca, .graf__punto) { transform-box: fill-box; transform-origin: 50% 50%; animation-name: graf-punto; }
  .graf--entrada :is(.graf__linea, .graf__area) { animation-duration: 640ms; }
}
@keyframes graf-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes graf-crece-y { from { opacity: 0.3; transform: scaleY(0.03); } to { opacity: 1; transform: none; } }
@keyframes graf-crece-x { from { opacity: 0.3; transform: scaleX(0.03); } to { opacity: 1; transform: none; } }
@keyframes graf-punto { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* Celular: fichas de a dos, listas a una columna, filas de empresa en dos renglones y objetivos táctiles de 44 px. */
@media (max-width: 760px) {
  .tab-salud > .tab-bloque { margin-top: 18px; }
  .tab-salud > .tab-bloque::after { display: none; }
  .tab-resumen__heroe { padding: 18px 18px 16px 20px; }
  .tab-resumen__cats, .tab-resumen__cats--3, .tab-resumen__cats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tab-resumen__cats--4 > .tab-resumen__cat:last-child:nth-child(4n + 3) { grid-column: auto; }
  .tab-resumen__cats > .tab-resumen__cat:last-child:nth-child(2n + 1) { grid-column: span 2; }
  .tab-resumen__cat { padding: 11px 11px 10px; }
  .tab-lesiones { grid-template-columns: minmax(0, 1fr); }
  .tab-empresa__fila { grid-template-columns: minmax(0, 1fr) 48px 56px 16px; gap: 2px 8px; padding: 7px 0; }
  .tab-empresa__n { grid-column: 1 / -1; white-space: normal; }
  .tab-empresa__det .tab-mini { columns: 1; }
  .tab-salud .control { min-height: 44px; }
  .tab-salud .panel__acciones { justify-content: flex-start; width: 100%; }
  .tab-selector { flex: 1 1 100%; }
  .tab-selector select.control { flex: 1 1 auto; max-width: none; }
  .tab-buscar { flex: 1 1 100%; width: auto; }
  .tab-cie__c { min-width: 150px; }
  .tab-salud .tab-cat__subs th, .tab-salud .tab-cat__subs td { padding: 5px 6px; }
  .tab-salud .tab-cat__subs th:first-child, .tab-salud .tab-cat__subs td:first-child { padding-left: 10px; }
}
@media print {
  .tab-resumen__heroe, .tab-control, .tab-programa { box-shadow: none; border: 1px solid var(--borde-suave); }
  /* Al pasar a impresión las marcas se ven al instante (sin la transición de opacidad de pantalla ni entrada animada). */
  .graf :is(.graf__marca, .graf__linea, .graf__area, .graf__punto) { transition: none !important; animation: none !important; }
}
/* Rediseño 2026-10: fin */

/* ALBATROS: composición compacta, sin alterar los paneles del informe A4. */
/* Acceso permanente a Exámenes: el nombre permanece visible también en la navegación compacta. */
.barra .nav a[data-vista="examenes-ocupacionales"] { width: auto; padding-inline: 12px; }
.barra .nav a[data-vista="examenes-ocupacionales"] span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (min-width: 1401px) and (max-width: 1600px) {
  .barra { gap: 12px; }
  .barra .nav { margin-left: 0; gap: 2px; }
  .barra .nav a { padding-inline: 10px; font-size: 13px; }
  .barra__nombre { display: none; }
}
@media (max-width: 1100px) {
  :root { --barra: 112px; }
  .barra { flex-wrap: wrap; align-content: center; gap: 0 12px; }
  .barra .nav { order: 5; flex: 1 0 100%; width: 100%; margin: 4px 0 0; padding: 2px; overflow-x: auto; scrollbar-width: thin; }
  .barra .nav a { width: auto; padding-inline: 12px; }
  .barra .nav a span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .barra__titulos, .barra__marca > .barra__sep { display: none; }
  .barra .barra__brisa { display: block; }
  .barra__sep--brisa { display: none; }
}
.enlace-detalle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 2px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--acento); }
.enlace-detalle:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--acento-oscuro); }
.enlace-detalle svg { width: 16px; height: 16px; flex: none; transform: rotate(-90deg); }
.enlace-detalle--volver svg { transform: rotate(90deg); }
.tab-examenes-acceso { padding: 0 18px; }
.examenes-ocupacionales { max-width: 880px; margin-inline: auto; }
.examenes-ocupacionales > .enlace-detalle { margin-bottom: 20px; }
.examenes-ocupacionales .vista__cab { margin-bottom: 24px; }
.examenes-ocupacionales .vista__t:focus { outline: none; }
.examenes-ocupacionales__estado { align-items: center; gap: 16px; padding: 48px 20px; text-align: center; background: linear-gradient(145deg, #f4f9fc, #fff 75%); }
.examenes-ocupacionales__estado p { color: var(--titulo); font-size: 18px; font-weight: 600; }
.examenes-ocupacionales__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--acento); background: #e9f3f9; }
.examenes-ocupacionales__icono svg { width: 26px; height: 26px; }
.tab-vista { color-scheme: light; background: #fff; font-variant-numeric: tabular-nums; }
.tab-vista .vista__d { display: block; -webkit-line-clamp: unset; font-size: 13px; }
.tab-vista .vista__cab { margin-bottom: 16px; }
.tab-vista > details.vista__fuente { margin-top: 8px; }
.tab-vista summary { cursor: pointer; }
.tab-compacto { --fs-1: 12px; --fs-2: 13px; --fs-4: 18px; }
.tab-franja { padding: 16px 0 0; border-top: 1px solid var(--borde); }
.tab-franja .tab-resumen__grid { grid-template-columns: 220px minmax(0,1fr); gap: 24px; }
.tab-franja .tab-resumen__heroe { padding: 8px 16px 8px 0; box-shadow: none; border-radius: 0; background: #fff; justify-content: start; }
.tab-franja .tab-resumen__heroe::before { display: none; }
.tab-franja .tab-resumen__eti { font-size: 12px; line-height: 1.4; font-weight: 500; text-transform: none; letter-spacing: 0; }
.tab-franja .tab-resumen__valor { font-size: 40px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tab-franja .tab-resumen__cats { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.tab-franja .tab-resumen__cat { padding: 0; grid-column: auto; background: #fff; box-shadow: none; border: 0; border-radius: 0; }
.tab-franja .tab-resumen__cat > button { color: var(--tinta); font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 8px; width: 100%; height: 100%; background: #fff; border: 0; border-bottom: 3px solid var(--c); border-radius: 4px 4px 0 0; }
.tab-franja .tab-resumen__cat > button:hover { background: var(--fondo-3); }
.tab-franja .tab-resumen__cat-t { font-size: 12px; min-height: 32px; line-height: 1.3; font-weight: 500; }
.tab-franja .tab-resumen__cat-n { font-size: 24px; font-weight: 650; }
.tab-franja .tab-resumen__cat-p { font-size: 12px; }
.tab-franja .tab-resumen__pista { display: none; }
.tab-resumen-detalle { font-size: 12px; margin-top: 8px; color: var(--tinta-2); }
.tab-resumen-detalle > summary { min-height: 44px; display: flex; align-items: center; }
.tab-solapas { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid #083B73; border-radius: 10px; margin: 12px 0 24px; padding: 5px; background: var(--pae-azul-oscuro); box-shadow: 0 3px 8px #083B731A; scrollbar-width: thin; scrollbar-color: #7DB9E8 #083B73; }
.tab-solapas button { position: relative; font: inherit; font-size: 13px; min-height: 44px; padding: 10px 14px; background: transparent; border: 0; border-radius: 6px; color: #fff; cursor: pointer; transition: background-color 140ms ease, box-shadow 140ms ease; }
.tab-solapas button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 2px; background: transparent; }
.tab-solapas button:hover { background: #ffffff14; }
.tab-solapas [aria-selected="true"] { color: #083B73; font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px #fff, 0 1px 3px #001D3F33; }
.tab-solapas [aria-selected="true"]::after { height: 4px; background: var(--c); box-shadow: 0 0 0 1px #083B7366; }
.tab-solapas [aria-selected="true"]:hover { background: #EDF5FF; }
.tab-vista :is(button,summary,input,select):focus-visible { outline: 2px solid #12549E; outline-offset: 3px; }
.tab-vista .tab-solapas button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tab-vista .tab-solapas [aria-selected="true"]:focus-visible { outline-color: #083B73; outline-offset: -3px; }
@media (min-width: 1280px) { .tab-solapas button { flex: 1 0 auto; } }
@media (prefers-reduced-motion: reduce) { .tab-solapas button { transition: none; } }
.tab-grilla { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; outline-offset: 4px; }
.tab-grilla > .tab-tarjeta { grid-column: span 6; min-width: 0; padding: 20px; border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 2px 6px #173F6210; margin: 0; }
.tab-grilla--general > [data-panel=mensual] { grid-column: span 8; }
.tab-grilla--general > [data-panel=composicion] { grid-column: span 4; }
.tab-grilla > .tab-tarjeta:only-child, .tab-grilla > :last-child:nth-child(3) { grid-column: span 12; }
.tab-compacto .panel__cab { padding: 0; margin: 0 0 12px; gap: 8px; align-items: start; }
.tab-compacto .tab-panel__tit { flex: 1 1 200px; min-width: 0; }
.tab-compacto .panel__cab h3 { font-size: 18px; font-weight: 650; text-wrap: pretty; }
.tab-compacto .panel__cuerpo { padding: 0; }
.tab-compacto .tab-pregunta { font-size: 12px; line-height: 1.45; margin-top: 6px; }
.tab-compacto :is(.btn,.control,.segmentado button) { min-height: 44px; font-size: 12px; }
.tab-compacto .tab-lee { margin-top: 12px; padding-top: 12px; min-height: 0; display: block; font-size: 12px; line-height: 1.5; }
.tab-compacto .tab-lee__t { margin-right: 6px; }
.tab-compacto .tab-lee__x { min-height: 0; }
.tab-compacto .tab-metodo { margin-top: 8px; font-size: 12px; }
.tab-compacto .tab-metodo > summary, .tab-detalles > summary { min-height: 44px; padding-block: 12px; font-size: 12px; }
.tab-compacto .tab-detalles { margin-top: 8px; border-top: 1px solid var(--borde); }
.tab-detalle-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); min-width: 0; }
.tab-compacto .tab-cat__fila { min-height: 44px; grid-template-columns: minmax(100px,1.5fr) minmax(28px,1fr) 48px 45px 16px; gap: 6px; }
.tab-compacto .tab-cat__et { white-space: normal; }
.tab-compacto .tab-cat__et > span:last-child { overflow: visible; text-overflow: clip; white-space: normal; }
.tab-compacto .tab-cat__det { overflow-x: auto; }
.tab-compacto .tab-graf { min-width: 0; }
.tab-compacto .leyenda { font-size: 12px; }
.tab-rol-leyenda { margin: 4px 0 18px; padding: 12px 14px; border: 1px solid #DCE6F0; border-radius: 8px; background: #F7FAFD; }
.tab-rol-leyenda .leyenda { margin: 0; gap: 10px 24px; }
@media (max-width: 1100px) {
  .tab-franja .tab-resumen__grid { grid-template-columns: 1fr; gap: 12px; }
  .tab-franja .tab-resumen__heroe { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .tab-grilla > .tab-tarjeta { grid-column: span 12; }
  .tab-grilla--general > [data-panel] { grid-column: span 12; }
}
@media (max-width: 600px) {
  .tab-grilla { gap: 16px; }
  .tab-grilla > .tab-tarjeta { padding: 16px; }
  .tab-franja .tab-resumen__cats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tab-franja .tab-resumen__cat-t { min-height: auto; }
  .tab-solapas { gap: 0; margin-bottom: 16px; }
  .tab-solapas button { padding-inline: 10px; }
  .tab-compacto .panel__cab { flex-direction: column; }
  .tab-compacto .tab-panel__tit { flex-basis: auto; }
  .tab-compacto .panel__acciones { justify-content: start; }
}

.tab-franja .tab-resumen__cats .tab-resumen__cat:last-child { grid-column: auto; }
.tab-franja .tab-resumen__cat::before { display: none; }

.tab-compacto .tab-tabla .tabla-simple { table-layout: auto; width: 100%; }
.tab-compacto .tab-tabla th, .tab-compacto .tab-tabla td { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.tab-compacto .tab-tabla { overflow-x: auto; }

@media (max-width:600px) { .tab-vista .chip { min-height:44px; } }

.tab-graf-tabla { max-height: 420px; overflow: auto; scrollbar-gutter: stable; }
.tab-graf-tabla .tabla-simple { width:100%; table-layout:auto; }
.tab-graf-tabla :is(th,td,caption) { white-space:normal; overflow-wrap:anywhere; font-size:12px; }
.tab-graf-tabla caption { text-align:left; padding:8px 0; color:var(--tinta-2); }
.tab-graf-tabla thead th { white-space:nowrap; overflow-wrap:normal; }

/* Lote 2: alternativas y exploración; la escala de datos no cambia al buscar. */
.tab-alternativas { width: fit-content; max-width: 100%; margin: 0 0 12px; flex-wrap: wrap; }
.tab-alternativas button { white-space: normal; min-height:44px; }
.tab-alcance-exportacion { margin: -2px 0 18px; max-width: 78ch; }
@media(max-width:600px) { .tab-grilla--rol .tab-alternativas { width:100%; } .tab-grilla--rol .tab-alternativas button { flex:1 1 100%; } }
.tab-explorar { margin-top: 12px; max-width: 100%; }
.tab-compacto .tab-cie { max-height: 480px; }
.tab-compacto .tab-cie__t { min-width: 0; table-layout: fixed; }
.tab-compacto .tab-cie__t :is(th,td) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.tab-compacto .tab-cie__barra { display: block; width: 100%; min-width: 0; }
.tab-compacto .tab-cie__n, .tab-compacto .tab-cie__p { width: auto; margin-right: 8px; }
.tab-compacto .tab-empresa__n { overflow: visible; white-space: normal; text-overflow: clip; }
.tab-compacto .tab-empresa__fila { min-height: 44px; }
.tab-graf-tabla:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Lote 3: referencia corporal neutral, sin imputar localizaciones clínicas. */
.tab-referencia-corporal { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; color: var(--titulo); }
.tab-referencia-corporal svg { flex: 0 0 54px; width: 54px; height: 114px; }
.tab-referencia-corporal figcaption { font-size: 13px; }
.tab-referencia-corporal figcaption span { display: block; margin-top: 6px; font-size: 12px; color: var(--tinta-2); }
.tab-programa-etapa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 12px; font-size: 12px; }
.tab-programa-etapa .tab-mini-nota { grid-column: 2 / -1; }
.tab-programa-pista { height: 10px; background: #F0F4FA; border-radius: 3px; }
.tab-programa-pista span { display: block; height: 100%; background: linear-gradient(90deg,#A7BDD5,#12549E); border-radius: 3px; }
.tab-programa-etapa.incluidas .tab-programa-pista span { background: linear-gradient(90deg,#587FA8,#12549E); }
.tab-compacto .tab-programas { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tab-compacto .tab-control .tab-metodo { order: 5; }
@media(max-width:768px) { .tab-compacto .tab-programas { grid-template-columns: 1fr; } }

.tab-motivos-contenido { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 20px; }
.tab-motivos-contenido .tab-referencia-corporal { display:block; text-align:center; margin:0; }
.tab-motivos-contenido .tab-referencia-corporal svg { width:72px; height:160px; }
.tab-motivos-contenido figcaption { font-size:12px; }
.tab-ranking ul { list-style:none; padding:0; margin:0; }
.tab-ranking__fila { display:grid; grid-template-columns:minmax(0,1fr) auto; position:relative; gap:5px 12px; padding:8px 0; font-size:12px; min-height:44px; }
.tab-ranking__fila b { font-weight:650; font-variant-numeric:tabular-nums; }
.tab-ranking__pista { grid-column:1/-1; background:#F2F6FB; height:8px; border-radius:3px; }
.tab-ranking__pista > span { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#A7BDD5,#12549E); transform-origin:left center; }
.tab-ranking__fila:is(:hover,:focus-visible) { outline:2px solid #12549E; outline-offset:3px; border-radius:4px; }
.tab-ranking__fila[data-globo]:not(.tab-sin-globo):is(:hover,:focus-visible)::after { content:attr(data-globo); position:absolute; z-index:5; top:100%; left:0; right:0; background:#fff; border:1px solid var(--borde); border-radius:8px; box-shadow:0 3px 8px #173F6226; padding:10px; color:var(--tinta); }
@media(max-width:600px) { .tab-motivos-contenido { grid-template-columns:58px minmax(0,1fr); gap:12px; } .tab-motivos-contenido .tab-referencia-corporal svg { width:52px; height:120px; } .tab-ranking__fila { grid-template-columns:1fr; } }

/* La figura ocupa el ancho legible de la tarjeta; sus listas amplían el detalle sin desplazar el mensaje principal. */
.tab-compacto .tab-lesiones { grid-template-columns:minmax(0,1fr); }

/* Revisión 18/10: sólo filtros y solapas se fijan al alcanzar el borde superior. */
body.tablero-activo .barra { position: relative; top: auto; }
.tab-vista #tb-filtros { position: sticky; top: 0; z-index: 25; background: #fff; padding-block: 4px; }
.tab-vista #tb-filtros .filtros { position: static; margin-bottom: 0; }
.tab-vista .filtros__categorias { display: none; }
.tab-vista .tab-solapas { position: sticky; top: var(--alto-filtros, 72px); z-index: 24; }
.tab-vista .tab-solapas button { padding-inline: 10px; }
.tab-alcance { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid #1766A6; background: #F3F8FC; color: var(--tinta); font-size: 13px; line-height: 1.55; }
.tab-compacto .tab-cie, .tab-cie--todas { max-height: none; overflow: visible; }
.tab-compacto .tab-cie__t thead th, .tab-compacto .tab-cie__t tbody th[scope="row"] { position: static; }
.tab-cie__icono { width: 30px; height: 30px; float: left; margin: 3px 10px 3px 0; color: #1766A6; }
.tab-rol-territorio { grid-template-columns: minmax(0, 1fr); }
.tab-rol-territorio .tabla-simple { width: 100%; table-layout: fixed; }
.tab-rol-territorio .tabla-simple :is(th,td) { white-space: normal; overflow-wrap: anywhere; }
.tab-rol-territorio .tabla-simple :is(th,td):first-child { width: 36%; }
@media (max-width: 767px) {
  .tab-vista .tab-solapas { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; gap: 0; }
  .tab-vista .tab-solapas button { flex: 0 0 auto; white-space: nowrap; }
  .tab-cie__icono { float: none; display: block; margin: 0 0 4px; }
  .tab-rol-territorio .tabla-simple :is(th,td) { padding: 8px 4px; font-size: 12px; }
  .tab-compacto .tab-cie__t :is(th,td) { padding: 8px 4px; }
  .tab-compacto .tab-cie__t th:first-child { width: 30%; }
  .tab-compacto .tab-cie__n, .tab-compacto .tab-cie__p { display: block; margin: 0; }
}

/* Refinamiento visual: iconos PNG locales, comparación territorial y revisión clínica. */
.salud-icono { display:inline-block; flex:none; width:36px; height:36px; background:#1766A6; mask-image:var(--icono); -webkit-mask-image:var(--icono); mask-size:contain; -webkit-mask-size:contain; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; }
.tab-ranking--motivos > ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin-block:4px 16px; }
.tab-grilla--espontaneas > .tab-tarjeta { grid-column:span 12; }
@media(min-width:1101px) { .tab-grilla--espontaneas .tab-ranking--motivos > ul { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tab-ranking--motivos .tab-ranking__fila { display:grid; grid-template-columns:30px minmax(0,1fr) 104px; grid-template-rows:1fr auto; gap:6px 10px; align-items:center; padding:12px 8px; border-bottom:1px solid #D9E3EE; }
.tab-ranking--motivos .salud-icono { grid-column:1; grid-row:1/3; width:30px; height:30px; align-self:start; margin-top:1px; }
.tab-ranking--motivos .tab-ranking__pista { grid-column:2; grid-row:2; height:6px; }
.tab-ranking--motivos .tab-ranking__fila b { grid-column:3; grid-row:2; justify-self:end; font-size:13px; line-height:1.4; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tab-motivos-alcance { margin:0 0 12px; font-size:12px; line-height:1.5; }
.tab-motivo__nombre { grid-column:2/-1; grid-row:1; align-self:start; min-width:0; font-size:13px; line-height:1.45; }
.tab-motivo__codigo { display:block; margin-top:3px; font-size:12px; color:var(--tinta-2, #536174); }
.tab-ranking--motivos .tab-ranking__fila { scroll-margin-top:calc(var(--alto-filtros, 72px) + 100px); }
.tab-ranking--motivos .tab-ranking__fila:is(:hover,:focus-visible) { background:#F4F8FC; }
@media(min-width:768px) and (max-width:1100px) {
  .tab-ranking--motivos .tab-ranking__fila:nth-child(2n)::before { content:""; position:absolute; left:-12px; top:12px; bottom:12px; border-left:1px solid #DFE7EF; }
}
@media(min-width:1101px) {
  .tab-ranking--motivos .tab-ranking__fila:not(:nth-child(3n + 1))::before { content:""; position:absolute; left:-12px; top:12px; bottom:12px; border-left:1px solid #DFE7EF; }
}
.tab-evolucion-vista { display:inline-flex; padding:3px; border:1px solid #D8E5F3; border-radius:10px; background:#F4F8FC; }
.tab-evolucion-vista button { min-height:44px; min-width:76px; padding:8px 12px; border:0; border-radius:7px; background:transparent; color:var(--tinta-2); font:inherit; font-size:13px; cursor:pointer; }
.tab-evolucion-vista button[aria-pressed="true"] { background:#FFF; color:var(--titulo); font-weight:650; box-shadow:0 1px 3px #163D6A20; }
.tab-evolucion-vista button:focus-visible { outline:2px solid var(--titulo); outline-offset:2px; }
.tab-programas-intro { margin:0 0 16px; color:var(--tinta-2); font-size:14px; line-height:1.55; }
.tab-programa__cab { display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:center; gap:16px; min-height:120px; margin-bottom:12px; }
.tab-programa__cab .tab-programa__t { margin:0; color:var(--programa); font-size:17px; line-height:1.4; font-weight:650; }
.tab-programa__imagen { display:block; width:112px; height:112px; object-fit:contain; }
.tab-programa__etapas { margin:0 0 16px; font-size:13px; line-height:1.6; }
.tab-compacto .tab-programa > .tab-metodo { margin-top:auto; border-top:1px solid #E5EBF1; }
.tab-programa > .tab-metodo > summary { color:var(--tinta-2); }
.tab-programa > .tab-metodo[open] > summary { color:var(--programa); }
.tab-programa .tab-mini-nota { padding-bottom:12px; line-height:1.6; }
@media(max-width:1100px) {
  .tab-compacto .tab-programas { grid-template-columns:1fr; gap:16px; }
}
@media(max-width:480px) {
  .tab-programa__cab { grid-template-columns:minmax(0,1fr) 88px; gap:12px; }
  .tab-programa__imagen { width:88px; height:104px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .tab-programa__imagen { transition:transform 180ms ease; }
  .tab-programa:hover .tab-programa__imagen { transform:translateY(-3px); }
}
.tab-territorio-leyenda { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; margin:10px 0; }
.tab-territorio-leyenda i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; background:var(--c); }
.tab-territorio-suma { list-style:none; padding:0; margin:0; }
.tab-territorio-suma li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; padding:11px 0; font-size:12px; }
.tab-territorio-suma strong { font-weight:500; }
.tab-territorio-valores { font-variant-numeric:tabular-nums; text-align:right; }
.tab-territorio-valores > span { color:var(--c); }
.tab-territorio-stack { grid-column:1/-1; display:flex; height:11px; background:#F1F5F9; border-radius:3px; overflow:hidden; }
.tab-territorio-stack > span { background:linear-gradient(90deg,color-mix(in srgb,var(--c),white 12%),var(--c)); border-right:1px solid white; }
.tab-campanias-barra { display:flex; align-items:flex-end; gap:8px 16px; flex-wrap:wrap; margin:16px 0 8px; }
.tab-campanias { min-width:0; border:0; padding:0; margin:0; }
.tab-campanias legend { font-size:13px; font-weight:600; color:var(--titulo); margin-bottom:8px; }
.tab-campanias legend span { font-weight:400; color:var(--tinta-2); }
.tab-campanias__anios { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.tab-campania { display:flex; flex-direction:column; gap:10px; min-width:0; min-height:44px; padding:12px 16px; border:1px solid var(--borde); border-radius:8px; background:white; cursor:pointer; font-size:13px; font-variant-numeric:tabular-nums; }
.tab-campania:has(:checked) { border-color:color-mix(in srgb,var(--campania),white 25%); background:color-mix(in srgb,var(--campania),white 96%); }
.tab-campania:hover { border-color:var(--acento); }
.tab-campania:has(:focus-visible) { outline:2px solid var(--acento); outline-offset:2px; }
.tab-campania:has(:disabled) { cursor:wait; opacity:.65; }
.tab-campania__cabecera { display:flex; align-items:center; gap:8px; }
.tab-campania__anio { color:var(--tinta); font-size:14px; font-weight:600; }
.tab-campania input { accent-color:var(--acento); width:16px; height:16px; margin:0 0 0 auto; flex-shrink:0; }
.tab-campania__trazo { width:22px; border-top:3px dotted var(--campania); }
.tab-campania__trazo--actual { border-top-style:solid; }
.tab-campania__saldo { display:flex; flex-direction:column; gap:4px; }
.tab-campania__total { color:var(--tinta); font-size:30px; font-weight:600; line-height:1.1; letter-spacing:-.5px; }
.tab-campania__unidad { color:var(--tinta-2); font-size:12px; line-height:1.4; }
.tab-campanias-colores { position:relative; font-size:13px; }
.tab-campanias-colores > summary { min-height:44px; padding:12px 8px; cursor:pointer; color:var(--titulo); }
.tab-campanias-colores > div { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; }
.tab-campania-color { display:flex; align-items:center; gap:4px; font-size:12px; }
.tab-campania-color input { width:44px; height:44px; padding:10px; background:white; border:1px solid var(--borde); border-radius:8px; cursor:pointer; }
.tab-campanias-nota { margin:4px 0 12px; }
@media (max-width:600px) {
  .tab-campanias { width:100%; }
  .tab-campanias__anios { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .tab-campania { padding:12px; }
  .tab-campanias legend span { display:block; margin-top:4px; }
}
.tab-administrativas table,.tab-revision-consultas table,.tab-revision-eventos table { table-layout:fixed; width:100%; }
.tab-administrativas td,.tab-administrativas th,.tab-revision-consultas td,.tab-revision-consultas th,.tab-revision-eventos td,.tab-revision-eventos th { white-space:normal; overflow-wrap:anywhere; }
.tab-administrativas th:first-child { width:22%; }
.tab-administrativas th:last-child { width:15%; }
.graf--silueta .graf__region { pointer-events:visiblePainted; }
.tab-lesiones .tab-sub { color:#12549E; margin-top:24px; padding-bottom:8px; border-bottom:1px solid #DCE6F0; }
.tab-lesiones .tab-mini li { padding:8px 0; gap:24px; }
.tab-territorio-pares { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.tab-territorio-col ul { list-style:none; padding:0; margin:12px 0 0; }
.tab-territorio-col .tab-sub { min-height:28px; color:var(--c); }
.tab-territorio-col li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 8px; min-height:39px; align-content:center; font-size:12px; }
.tab-territorio-col li > span:first-child { overflow-wrap:anywhere; }
.tab-territorio-col b { font-variant-numeric:tabular-nums; }
.tab-territorio-pista { grid-column:1/-1; height:6px; background:#F0F5FA; border-radius:4px; }
.tab-territorio-pista > span { display:block; height:100%; background:linear-gradient(90deg,color-mix(in srgb,var(--c),white 25%),var(--c)); border-radius:4px; }
.tab-revision table { width:100%; table-layout:fixed; }
.tab-revision td,.tab-revision th { overflow-wrap:anywhere; white-space:normal; }
.tab-revision > details { margin-top:16px; }
@media(max-width:767px) {
 .tab-ranking--motivos > ul { grid-template-columns:1fr; }
 .tab-territorio-pares { gap:16px; }
 .tab-territorio-col li { min-height:68px; }
 .tab-revision table { font-size:12px; }
 .tab-revision td,.tab-revision th { padding:6px 3px; }
}

@media(min-width:1100px){ .tab-grilla--general .tab-territorio-col .tab-sub { font-size:12px; letter-spacing:0; line-height:1.4; margin-top:8px; } .tab-grilla--general .tab-territorio-col ul { margin-top:4px; } }

/* Territorio: una fila por unidad con partes excluyentes y total explícito. */
@media(min-width:1101px) {
 .tab-territorio-suma li { grid-template-columns:125px minmax(0,1fr) 29ch; min-height:38px; gap:8px; padding:3px 0; align-items:center; }
 .tab-territorio-stack { grid-column:2; grid-row:1; }
 .tab-territorio-valores { grid-column:3; grid-row:1; }
 .tab-territorio-explica { margin:0; }
 .tab-territorio-leyenda { margin:8px 0; }
}
.tab-compacto [data-panel="sectores"] .panel__acciones { flex-wrap:wrap; max-width:100%; }
.tab-compacto [data-panel="sectores"] .tab-selector { flex:1 1 200px; min-width:0; }
.tab-compacto [data-panel="sectores"] .tab-selector .control { flex:1; min-width:0; }
.tab-compacto [data-filtrar-ug] { max-width:100%; white-space:normal; }

/* Jerarquía de cantidades y proporciones · revisión local 18/10/2026. */
.tab-grilla--rol > .tab-tarjeta { grid-column:span 12; }
.tab-medida { display:flex; align-items:baseline; gap:6px; margin:0; font-variant-numeric:tabular-nums; }
.tab-medida b { color:#173F62; font-size:24px; font-weight:700; }
.tab-medida__unidad { font-size:12px; color:#536174; }
.tab-porcentaje { display:inline-flex; align-items:center; justify-content:center; padding:3px 9px; border-radius:20px; background:#EDF3F8; color:#40566D; font-size:12px; font-weight:500; white-space:nowrap; }

/* Roles: una comparación temporal por vista y selección de series explícita. */
.rol-controles { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.rol-controles .segmentado { display:inline-flex; padding:3px; border:1px solid #D6E1EB; border-radius:10px; background:#F1F5F9; }
.rol-controles button { min-height:44px; min-width:64px; padding:8px 14px; border:0; border-radius:7px; background:transparent; color:#344E68; font:inherit; font-size:13px; cursor:pointer; }
.rol-controles button[aria-pressed="true"] { background:#12549E; color:white; font-weight:700; box-shadow:0 2px 5px #173F621A; }
.rol-controles :is(button,select):focus-visible,.rol-leyenda button:focus-visible,.rol-series summary:focus-visible { outline:3px solid #1766A6; outline-offset:3px; }
.rol-semana { display:flex; align-items:center; gap:8px; font-size:13px; }
.rol-semana select { min-height:44px; max-width:245px; }
.rol-evolucion { display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; margin:18px 0 8px; align-items:center; }
.rol-total { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:12px 24px 12px 0; border-right:1px solid #DEE6EE; color:#536174; font-size:13px; }
.rol-total > strong { color:#173F62; font-size:56px; font-weight:750; line-height:1.15; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.rol-total > span:first-child { font-weight:600; }
.rol-total > small { font-size:12px; margin-top:8px; }
.rol-total ul { width:100%; margin:17px 0 0; padding:15px 0 0; list-style:none; border-top:1px solid #E3EAF0; }
.rol-total li { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:7px; align-items:center; padding:7px 0; font-size:12px; }
.rol-total li > b { font-size:18px; color:#173F62; }
.rol-total li > .tab-porcentaje { grid-column:2/-1; justify-self:start; margin-top:-3px; }
.rol-curva { min-width:0; }
.rol-eje-titulo { margin:0 0 4px; font-size:13px; font-weight:600; color:#40566D; }
.rol-nota-cobertura { margin:10px 0 0; font-size:12px; line-height:1.55; color:#64748B; }
.rol-series__cab { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.rol-series__cab h4 { margin:8px 0; }
.rol-series { border:1px solid #D8E2EB; border-radius:9px; background:#F7F9FC; max-width:100%; }
.rol-series summary { min-height:44px; padding:11px 15px; font-size:13px; color:#173F62; cursor:pointer; }
.rol-series[open] { width:100%; }
.rol-series__lista { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px 16px; padding:4px 14px 12px; }
.rol-series__lista label { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; min-height:44px; gap:8px; font-size:13px; cursor:pointer; }
.rol-series__lista input { width:18px; height:18px; accent-color:#12549E; }
.rol-motivos-interactivos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 28px; }
.rol-motivo { appearance:none; border:0; border-bottom:1px solid #DCE5EF; border-radius:8px 8px 0 0; background:#fff; color:var(--tinta); text-align:left; display:flex; gap:12px; align-items:flex-start; padding:16px 10px; cursor:pointer; font:inherit; width:100%; min-width:0; }
.rol-motivo:hover { background:#F2F7FC; }
.rol-motivo > svg { width:32px; height:32px; flex:none; color:#1766A6; fill:currentColor; }
.rol-motivo__texto { display:block; min-width:0; flex:1; }
.rol-motivo__titulo { display:flex; align-items:baseline; gap:8px; font-size:14px; font-weight:600; }
.rol-motivo__titulo b { font-size:22px; font-variant-numeric:tabular-nums; color:#173F62; }
.rol-motivo__pie { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; margin:8px 0; color:#536A80; }
.rol-motivo__pie > span:first-child { display:flex; align-items:center; gap:4px; }
.rol-motivo__pie svg { width:14px; height:14px; }
.rol-motivo__barra,.rol-territorio__barra { display:block; height:3px; border-radius:3px; background:#EAF1F7; }
.rol-motivo__barra i,.rol-territorio__barra i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#91B5D8,#1766A6); }
.rol-territorio { margin:16px 0; }
.rol-territorio h4,.rol-empresas h4 { font-size:17px; color:#173F62; margin:0 0 12px; }
.rol-territorio h4 { margin-bottom:8px; }
.rol-territorio .tab-mini-nota { margin:6px 0; }
.rol-territorio__tabla { table-layout:fixed; width:100%; }
.rol-territorio__tabla :is(th,td) { padding:6px 12px; white-space:normal; overflow-wrap:anywhere; }
.rol-territorio__tabla tbody :is(th,td) { padding-block:3px; }
.rol-territorio__tabla th:first-child { width:42%; }
.rol-territorio__tabla--subtipo th:first-child { width:auto; }
.rol-territorio__tabla--subtipo th:last-child { width:112px; }
.rol-territorio__tabla tbody th { text-transform:none; letter-spacing:normal; font-weight:500; }
.rol-territorio__tabla tbody td { color:#173F62; font-weight:600; }
.rol-territorio__barra { height:8px; border-radius:4px; margin:5px 0 0; }
.rol-territorio__barra i { background:linear-gradient(90deg,#1766A6 0%,#349BC2 58%,#159B9B 100%); }
.rol-ug__fila { display:flex; align-items:center; justify-content:flex-start; gap:6px; text-transform:none; letter-spacing:normal; }
.rol-territorio__contenido:not(.rol-territorio__contenido--sectores) .rol-ug__fila { display:grid; grid-template-columns:minmax(0,1fr) 44px; }
.rol-territorio__dato { min-width:0; flex:1; padding-block:5px; line-height:1.4; }
.rol-ug { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; border:0; border-radius:4px; background:transparent; padding:0; color:#12549E; cursor:pointer; }
.rol-ug:hover { color:#073B70; }
.rol-ug svg { width:16px; height:16px; flex:none; transform:rotate(-90deg); }
.rol-ug--volver { order:-1; }
.rol-ug--volver svg { transform:rotate(90deg); }
.rol-territorio__seleccion { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 10px; padding:8px; margin-bottom:8px; border:1px solid #D5E3EF; border-radius:8px; background:#F4F8FC; }
.rol-territorio__seleccion > div { flex:1; min-width:0; }
.rol-territorio__nivel { display:block; color:#536A80; font-size:12px; margin-bottom:4px; }
.rol-territorio__seleccion h5 { margin:0; font-size:15px; line-height:1.5; color:#173F62; }
.rol-territorio__seleccion h5 span { font-weight:400; }
.rol-territorio__seleccion h5:focus-visible { outline:3px solid #1766A6; outline-offset:4px; border-radius:3px; }
.rol-territorio__contenido--sectores { margin-left:10px; padding-left:14px; border-left:2px solid #D5E3EF; }
.rol-empresas { margin-top:28px; padding-top:24px; border-top:1px solid #D8E2EB; }
.rol-regiones { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.rol-regiones button { min-height:44px; font-size:13px; border:1px solid #D8E2EB; border-radius:9px; }
.rol-regiones button span { font-variant-numeric:tabular-nums; padding-left:6px; }
.rol-regiones button[aria-pressed="true"] { background:#173F62; border-color:#173F62; color:white; }
.rol-subconjunto { background:#F1F5F9; padding:12px 14px; border-radius:8px; font-size:13px; }
.rol-anatomia-detalle { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:18px 0; }
.rol-anatomia-detalle h4 { margin:0 0 12px; font-size:14px; }
.rol-distribucion { list-style:none; padding:0; margin:0; }
.rol-distribucion li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid #E5EBF1; font-size:13px; }
.rol-distribucion b { font-variant-numeric:tabular-nums; font-size:17px; }
.rol-motivo:focus-visible,.rol-ug:focus-visible,.rol-regiones button:focus-visible { outline:3px solid #1766A6; outline-offset:3px; }
dialog.rol-dialogo { width:min(680px,calc(100vw - 28px)); max-height:88vh; overflow:hidden; }
.rol-dialogo form { display:flex; flex-direction:column; max-height:88vh; }
.rol-dialogo .dialogo__cuerpo { padding:24px; min-height:0; overflow-y:auto; }
.rol-dialogo tbody th { text-transform:none; letter-spacing:normal; font-weight:400; }
.rol-dialogo thead th { text-transform:none; letter-spacing:normal; }
.rol-dialogo .dialogo__t:focus { outline:none; }
.rol-dialogo .dialogo__x { font-size:13px; }
.rol-dialogo .tabla-simple { width:100%; table-layout:fixed; margin-top:18px; }
.rol-dialogo .tabla-simple :is(th,td) { white-space:normal; overflow-wrap:anywhere; }
.rol-dialogo .tabla-simple th:first-child { width:64%; }
.rol-dialogo .dialogo__acciones { flex:none; background:white; border-top:1px solid #D8E2EB; }
.rol-dialogo__total strong { font-size:28px; color:#173F62; }
@media(max-width:760px) {
 .rol-motivos-interactivos,.rol-anatomia-detalle { grid-template-columns:minmax(0,1fr); }
 .rol-territorio__tabla :is(th,td) { padding-inline:5px; font-size:12px; }
 .rol-territorio__tabla--subtipo th:last-child { width:84px; }
 .rol-territorio__seleccion { flex-wrap:nowrap; gap:6px; }
 .rol-territorio__contenido--sectores { margin-left:2px; padding-left:8px; }
 .rol-motivo { padding:15px 4px; }
 .rol-regiones { gap:6px; }
 .rol-regiones button { flex:1 1 42%; padding:9px; }
 .rol-dialogo .dialogo__cuerpo { padding:18px 14px; }
 .rol-dialogo .tabla-simple :is(th,td) { padding:9px 4px; font-size:12px; }
 .rol-dialogo .tabla-simple th:first-child { width:56%; }
}
.rol-series > button { margin:0 14px 12px; min-height:44px; }
.rol-cobertura-series { font-size:13px; line-height:1.6; color:#536174; margin:6px 0 18px; }
.rol-leyenda { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 12px; margin:12px 0; }
.rol-leyenda button { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px; border:1px solid transparent; border-radius:8px; background:transparent; color:#40566D; text-align:left; font:inherit; font-size:13px; cursor:pointer; line-height:1.45; }
.rol-leyenda button svg { flex:0 0 24px; }
.rol-leyenda button:is(:hover,[aria-pressed="true"]) { background:#EEF4FA; border-color:#CAD9E8; color:#173F62; }
.rol-trazo { transition:opacity .12s; }
.rol-trazo--atenuado { opacity:.13; }
.rol-leyenda--atenuada { opacity:.55; }
@media(max-width:760px) {
 .rol-evolucion { grid-template-columns:minmax(0,1fr); gap:18px; }
 .rol-total { border-right:0; border-bottom:1px solid #DEE6EE; padding:0 0 18px; }
 .rol-total > strong { font-size:48px; }
 .rol-total ul { display:flex; flex-wrap:wrap; gap:10px 25px; border:0; margin:0; padding-top:8px; }
 .rol-total li { flex:1 1 120px; }
 .rol-leyenda { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
 .rol-leyenda button { font-size:12px; gap:5px; padding:6px 3px; }
 .rol-series__lista { grid-template-columns:minmax(0,1fr); }
 .rol-controles,.rol-semana { width:100%; }
 .rol-semana select { flex:1; min-width:0; max-width:100%; }
 .tab-grilla--rol .panel__cab { flex-wrap:wrap; gap:12px; }
 .tab-grilla--rol .panel__acciones { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .rol-trazo { transition:none; } }
.tab-ranking--motivos .tab-ranking__fila { grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto auto; gap:6px 10px; }
.tab-ranking--motivos .tab-ranking__fila .tab-medida { grid-column:2; grid-row:2; }
.tab-ranking--motivos .tab-ranking__fila .tab-medida b { font-size:22px; line-height:1.2; }
.tab-ranking--motivos .tab-ranking__fila .tab-porcentaje { margin-left:auto; }
.tab-ranking--motivos .tab-ranking__pista { grid-column:2; grid-row:3; height:4px; }
.tab-rol-partes { display:flex; flex-wrap:wrap; gap:16px 48px; margin:18px 0 8px; padding:18px 0; border-block:1px solid #E3EAF0; }
.tab-rol-partes > div { border-left:3px solid var(--c); padding-left:14px; }
.tab-rol-partes > div > span { display:block; margin-bottom:8px; font-size:13px; }
.tab-seccion-titulo,.tab-evolucion-motivo h4 { margin:28px 0 8px; font-size:16px; color:#173F62; }
.tab-evolucion-motivo { margin-top:20px; padding-top:8px; border-top:1px solid #E3EAF0; }
.tab-evolucion-motivo .tab-selector { margin:12px 0; max-width:100%; }
.tab-evolucion-motivo select { max-width:100%; }
.tab-lesiones [data-graf=silueta] { width:100%; max-width:900px; margin-inline:auto; }
@media(max-width:600px) {
 .tab-medida { flex-wrap:wrap; }
 .tab-rol-partes { gap:18px; }
 .tab-rol-partes > div { width:100%; }
 .tab-evolucion-motivo .tab-selector { display:flex; flex-direction:column; align-items:stretch; }
}

/* Controles en rangos cortos: cifras dominantes, porcentaje secundario y eje explícito. */
.tab-control__unidad { margin: 10px 0 2px; font-size: 12px; font-weight: 600; color: var(--tinta-2, #526477); }
.tab-controles--rango .tab-control__unidad { margin-top:auto; padding-top:12px; }
.tab-controles--rango .tab-control:not(:last-child) .tab-cifra:nth-child(2) .tab-cifra__v { display:inline-block; padding:5px 9px; border-radius:20px; background:#EDF3F8; font-size:18px; }

.esp-motivos-interactivos .tab-medida { margin-top:8px; flex-wrap:wrap; }
.esp-motivos-interactivos .tab-porcentaje { margin-left:auto; }
.diagnosticos-tabla { width:100%; table-layout:fixed; border-collapse:collapse; margin:14px 0 18px; }
.diagnosticos-tabla thead th { padding:8px 0; border-bottom:1px solid #CAD8E4; color:#536A80; font-size:12px; font-weight:500; text-align:left; }
.diagnosticos-tabla thead th:nth-child(2) { width:80px; text-align:right; }
.diagnosticos-tabla thead th:last-child { width:90px; padding-left:6px; text-align:right; }
.diagnosticos-tabla .esp-diagnostico > :is(th,td) { padding:9px 0; border-bottom:1px solid #E5EBF1; vertical-align:middle; }
.esp-diagnostico[hidden] { display:none; }
.diagnosticos-tabla .esp-diagnostico__texto { padding-right:16px; text-align:left; }
.esp-diagnostico__texto > strong { display:block; font-size:13px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; color:#294257; }
.esp-diagnostico__codigo { display:block; margin-top:3px; font-size:12px; font-weight:400; line-height:1.35; color:#63788A; overflow-wrap:anywhere; }
.diagnosticos-tabla__cantidad,.diagnosticos-tabla__porcentaje { text-align:right; }
.diagnosticos-tabla__cantidad b { color:#173F62; font-size:19px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; }
.diagnosticos-tabla .tab-porcentaje { display:inline-block; white-space:nowrap; padding:3px 7px; font-size:12px; line-height:1.2; font-weight:400; }
.esp-diagnosticos__buscar { display:block; margin-top:14px; font-size:12px; color:#536A80; }
.esp-diagnosticos__buscar input { display:block; width:100%; margin-top:4px; min-height:40px; }
.rol-dialogo .rol-dialogo__total { margin:8px 0; }
.rol-dialogo .tab-mini-nota { margin:6px 0; }
@media (min-width:1101px) { .esp-motivos-interactivos { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px) {
  .diagnosticos-tabla thead th:nth-child(2) { width:62px; }
  .diagnosticos-tabla thead th:last-child { width:66px; }
  .diagnosticos-tabla .esp-diagnostico__texto { padding-right:8px; }
  .diagnosticos-tabla__cantidad b { font-size:18px; }
  .diagnosticos-tabla .tab-porcentaje { padding:3px 5px; }
}

/* Revisión visual 19/10: jerarquía de totales, detalle clínico compacto y encabezados. */
.tab-resumen .tab-resumen__grid--centrado,
.tab-franja .tab-resumen__grid--centrado { grid-template-columns:minmax(0,1fr); gap:18px; }
.tab-resumen .tab-resumen__grid--centrado .tab-resumen__heroe,
.tab-franja .tab-resumen__grid--centrado .tab-resumen__heroe {
  flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:20px;
  border:1px solid #D8E6F2; border-radius:12px; background:linear-gradient(120deg,#F3F8FC,#E8F2FA);
  text-align:center; box-shadow:none;
}
.tab-resumen__grid--centrado .tab-resumen__heroe::before { display:none; }
.tab-resumen__grid--centrado .tab-resumen__eti { color:#244D70; font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; }
.tab-resumen__grid--centrado .tab-resumen__valor { margin:0; font-size:clamp(42px,4.3vw,60px); line-height:1.08; font-weight:750; font-variant-numeric:tabular-nums; }
.tab-resumen__grid--centrado .tab-resumen__det { max-width:76ch; font-size:12px; }
.rol-total { align-self:start; padding:20px; border:1px solid #D8E6F2; border-radius:12px; background:linear-gradient(135deg,#F3F8FC,#E8F2FA); }
.rol-total > strong { font-size:60px; line-height:1.08; }
.rol-total > small { margin-top:3px; }
.rol-motivo .tab-medida { display:flex; align-items:baseline; gap:7px; margin-top:6px; flex-wrap:wrap; }
.rol-motivo .tab-medida b { font-size:25px; line-height:1.12; }
.rol-motivo .tab-medida__unidad { font-size:12px; }
.rol-motivo .tab-medida .tab-porcentaje { margin-left:auto; }
.diagnosticos-tabla--cantidades thead th:last-child { width:84px; padding-left:12px; }
.diagnosticos-tabla--cantidades .esp-diagnostico > :is(th,td) { padding-block:8px; }
.diagnosticos-tabla--cantidades .esp-diagnostico__texto > strong { font-size:13px; line-height:1.35; }
.diagnosticos-tabla--cantidades .esp-diagnostico__codigo { margin-top:2px; }
.tab-lista--consultas .tab-lista__i { gap:20px; padding-block:12px; }
.tab-lista--consultas b { font-size:24px; color:#173F62; font-variant-numeric:tabular-nums; }
.tab-sub--franja,
.rol-anatomia-detalle h4.tab-sub--franja { margin:14px 0 10px; padding:10px 12px; background:#EAF3FA; border-radius:5px; color:#174F7D; font-size:14px; font-weight:650; line-height:1.35; }
.tab-lesiones__listas details > summary.tab-sub--franja { min-height:44px; margin-bottom:10px; }
.tab-programas-intro { margin-bottom:12px; font-size:13px; }
.tab-programa[data-programa="mama"] .tab-programa__cab { grid-template-columns:minmax(0,1fr) 128px; gap:12px; }
.tab-programa[data-programa="mama"] .tab-programa__imagen { width:128px; height:128px; }
.tab-cie__nombre { display:block; margin-top:3px; color:#294257; font-size:13px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; }
.tab-compacto .tab-cie__t th:first-child { width:43%; }
.tab-cie__cod { font-size:12px; }
@media(max-width:760px) {
  .rol-total { width:100%; padding:18px; }
  .rol-total > strong { font-size:48px; }
  .rol-total li { flex-basis:150px; }
}
@media(max-width:480px) {
  .tab-resumen .tab-resumen__grid--centrado .tab-resumen__heroe,
  .tab-franja .tab-resumen__grid--centrado .tab-resumen__heroe { padding:18px 14px; }
  .tab-resumen__grid--centrado .tab-resumen__eti { max-width:25ch; font-size:14px; }
  .diagnosticos-tabla--cantidades thead th:last-child { width:64px; padding-left:8px; }
  .tab-programa[data-programa="mama"] .tab-programa__cab { grid-template-columns:minmax(0,1fr) 108px; }
  .tab-programa[data-programa="mama"] .tab-programa__imagen { width:108px; height:116px; }
  .tab-cie__nombre { font-size:12px; }
  .tab-cie__icono { width:24px; height:24px; }
}

/* Encabezados y totales de las secciones clínicas y territoriales. */
.tab-panel:is([data-panel="espontaneas"],[data-panel="rol"],[data-panel="enfermeria"]) > .panel__cab {
  padding:14px 18px; margin:-2px -2px 16px; border-radius:8px; background:#EAF3FA;
}
.tab-territorio-valores > b { display:inline-block; padding:3px 7px; background:#EAF3FA; border-radius:4px; color:#12549E; font-size:15px; font-weight:750; }
.tab-territorio-suma strong { color:#173F62; font-weight:650; }
.tab-territorio-suma li[data-fuera-ambito] { color:#64748B; }

.tab-cie__col-corta { display:none; text-decoration:none; }
@media(max-width:600px) {
  .tab-cie__col-completa { display:none; }
  .tab-cie__col-corta { display:inline; white-space:nowrap; }
}