/* ═══════════════════════════════════════════════════════════════════════════
   Vikout Ambiental × Control Tower — design system único (SPEC §1)
   Estética editorial broadsheet: sin bordes redondeados, sin sombras,
   sin degradados. Jerarquía por tipografía, filetes finos y espacio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tokens: assets/familia.css §1 (Especificación Vikout UI §2/§3/§4). */

/* ── Marca del cliente · tokens parametrizables ───────────────────────────
   La paleta corporativa del cliente entra por aquí: sólo se redefinen los
   tokens de acento; el semáforo (ok/warn/crit) es semántico y no se toca. */
/* Marca del cliente: familia.css §1. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Tipografía base ─────────────────────────────────────────────────────── */

.kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-4);
}

.lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-2);
  max-width: 76ch;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.serif-num {
  font-family: var(--serif);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: .95;
}

/* ── Layout shell ────────────────────────────────────────────────────────── */

/* El shell ocupa todo el ancho para que la sidebar quede pegada al borde de la
   ventana: si se centra el shell completo, en pantallas anchas queda una franja
   de papel a la izquierda de la sidebar y se ve como un bloque suelto. El ancho
   de lectura se limita en .content, que se centra dentro de su columna. */
.shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 100vh;
}

.content {
  padding: 30px 40px 60px;
  /* Ancho definido, no shrink-to-fit: con `margin:0 auto` la columna quedaba a
     merced del min-content de su contenido y una tabla ancha empujaba toda la
     página. Con width:100% manda la columna y la tabla desborda dentro de su
     propio .t-scroll, que ya tiene overflow-x. */
  width: 100%;
  min-width: 0;
  max-width: 1230px;
  justify-self: center;
}

/* ── Sidebar (seña de identidad SEM, traducida al sabor CT) ──────────────── */

.sidebar {
  /* Fija al navegar: el panel se pega arriba y ocupa el alto de la ventana,
     con su propio scroll si la navegación no cabe. Antes se estiraba al alto
     del documento y desaparecía al bajar. */
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: var(--ink);
  color: var(--paper);
  padding: 26px 0 22px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.side-logo {
  display: block;
  padding: 0 22px 16px;
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
}

.side-logo .wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .02em;
  color: var(--paper);
  line-height: 1.05;
}

.side-logo .sub {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-top: 4px;
}

/* Variante centrada del wordmark (P3-12): el bloque completo —arco, «VIGIA» y
   bajada— se centra en el ancho de la barra, con el filete inferior a la vista
   para que la firma no flote. */
body[data-wordmark="centro"] .side-logo {
  text-align: center;
  padding: 0 18px 18px;
}
body[data-wordmark="centro"] .side-logo .sub { letter-spacing: .34em; }

.side-kicker {
  padding: 0 22px 14px;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--side-kicker);
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.side-nav { flex: 1; padding-top: 6px; }

.side-group {
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding: 6px 0;
}
.side-group:last-child { border-bottom: 0; }

.side-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  padding: 8px 20px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
/* Sobre el fondo tinta, un gris cálido no aguanta la proyección: el inactivo
   sube a casi papel (contraste ~11:1) y gana algo de peso; el activo se sigue
   distinguiendo por fondo, peso y filete, no por color. */
  color: var(--side-item);
  font-weight: 450;
}
.side-item:hover {
  color: var(--paper);
  background: rgba(255,255,255,.07);
}
.side-item.active {
  color: var(--paper);
  background: rgba(255,255,255,.13);
  border-left-color: var(--accent-light);
  border-left-width: 3px;
  padding-left: 19px;
  font-weight: 600;
}
.side-item.placeholder { color: var(--side-quiet); }
.side-item.placeholder:hover { color: var(--paper); }

.side-foot {
  padding: 16px 22px 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--side-quiet);
  line-height: 1.8;
  border-top: 1px solid rgba(255,255,255,.12);
}
.side-foot a { color: var(--side-kicker); }
.side-foot a:hover { color: var(--paper); }

/* Pie del shell: sello de versión para que un comentario por correo pueda citar
   qué compilación se estaba mirando. Discreto, nunca compite con el contenido. */
.app-foot {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-4);
}
.app-foot-ver { color: var(--ink-3); }

/* ── Cabecera del contenido ──────────────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.page-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 12px 0 0;
  line-height: 1.15;
}

/* Aire entre las líneas del encabezado: el kicker y el título compartían
   demasiado poco espacio y las dos líneas se leían como un bloque. */
.page-head .kicker { line-height: 1.7; }

.page-head .meta {
  margin-left: auto;
  min-width: 0;
  text-align: right;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.7;
  white-space: nowrap;
}
.page-head .meta .mono { font-size: 10.5px; white-space: normal; overflow-wrap: anywhere; }

/* ── Tiles KPI ───────────────────────────────────────────────────────────── */

.tiles {
  display: grid;
  gap: 1px;
  background: var(--rule-grid);
  border-top: 1px solid var(--rule-strong);
}
/* Pistas fijas: el número de tiles siempre es igual al de columnas, así la
   rejilla no deja celdas vacías mostrando su propio fondo. El desborde que
   antes motivó auto-fit venía del mono de la cabecera y de las tablas. */
.tiles.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .tiles.cols-3, .tiles.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Bajo 720px: teléfono ──────────────────────────────────────────────────
   Marcela abre esto desde el celular. Con la rejilla de dos columnas la
   sidebar se comía 230px de un ancho de 390 y el contenido quedaba en una
   ranura. Aquí el shell se apila: la navegación pasa a ser una barra
   horizontal desplazable arriba y el contenido usa el ancho completo. */
@media (max-width: 720px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 16px 0 10px;
  }
  .side-logo { padding: 0 16px 12px; }
  .side-logo .wordmark { font-size: 24px; }
  .side-kicker { padding: 0 16px 8px; }

  .side-nav {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    /* La barra se desliza con el dedo; el filete de arriba la separa del
       wordmark sin ocupar altura. */
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
  }
  .side-group { display: flex; flex-direction: row; gap: 0; border: 0; padding: 0; margin: 0; }
  .side-group + .side-group { border-left: 1px solid rgba(255,255,255,.2); margin-left: 8px; padding-left: 8px; }
  .side-item { width: auto; white-space: nowrap; padding: 10px 14px; min-height: 44px; }
  .side-foot { padding: 10px 16px 0; }

  .content { padding: 20px 16px 44px; }
}

/* Bajo 480px la rejilla de tarjetas baja a una columna: dos no dejan leer la
   cifra ni su glosa. */
@media (max-width: 480px) {
  .tiles.cols-3, .tiles.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { font-size: 26px; }
}

.tile {
  min-width: 0;
  background: var(--paper);
  padding: 16px 20px 22px;
  display: flex;
  flex-direction: column;
}

/* Dos líneas reservadas: un rótulo que envuelve no puede empujar la cifra por
   debajo de la de sus vecinos — la fila se lee por su línea de base. */
.tile .tile-kicker {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 16px;
  min-height: 32px; /* dos líneas exactas: un rótulo que envuelve no baja la cifra */
}

.tile .tile-fig {
  display: flex;
  /* Sin esto la caja de la cifra no puede encogerse bajo su contenido y el
     número se mete en el tile vecino. */
  min-width: 0;
  /* Y sin esto la unidad no tiene dónde bajar: en una fila flex sin wrap,
     «204 auditorías» no cabe en un tile de 156px y la «s» final cruza el
     divisor, que se lee como una falta de ortografía y no como un desborde. */
  flex-wrap: wrap;
  row-gap: 2px;
  align-items: baseline;
  gap: 7px;
  margin-top: 11px;
}

/* La cifra escala con el ancho en vez de saltar por tramos: un tile de la
   banda KPI mide ~164px a 924px de viewport, y siete dígitos con separador
   («101.244») a tamaño fijo no caben. El máximo es el tamaño de diseño; el
   mínimo, el más chico que sigue leyéndose de lejos. Las tres densidades
   repiten el patrón más abajo, porque su selector gana especificidad a
   cualquier media query. */
.tile .tile-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tile .tile-unit {
  font-family: var(--serif);
  font-size: clamp(13px, 1.5vw, 18px);
  color: var(--ink-4);
}

/* Banda KPI del shell: los tiles son angostos (3 + buscador) y cifras como
   "120.000 Ton. Cosechadas" no caben en una línea junto a la unidad. La unidad
   baja bajo la cifra en los TRES tiles por igual, así los pies quedan a la
   misma altura en vez de desalinearse sólo en el que envuelve. */
#kpi-band .tile-fig {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
#kpi-band .tile-unit { font-size: 16px; }

.tile .tile-foot {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 10px;
}

/* ── Encabezado de sección ───────────────────────────────────────────────── */

.section-head {
  display: flex;
  flex-wrap: nowrap;
  row-gap: 5px;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 7px;
  margin: 0 0 14px;
}

.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.35;
}

/* El encabezado no se parte en dos niveles: el título manda y la línea mono
   cede ancho con elipsis (el valor completo queda en su title). */
.section-head h2 { min-width: 0; }
.section-head .mono {
  margin-left: auto;
  /* No cede por debajo de su propio texto: el que se acomoda es el título.
     El tope de 100% deja truncar sólo las líneas realmente más anchas que el
     encabezado. */
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.filters {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: nowrap;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 26px;
}
/* Los sub-filtros de cada vista siguen la misma regla que la fila global: una
   sola línea, y lo que cede ancho es el texto del valor, no el nivel. */
.filters > * { min-width: 0; }
.filters .f-group { min-width: 0; flex: 1 1 auto; }
.filters .f-label { flex: none; }
.filters .cs-wrap { min-width: 0; flex: 1 1 auto; }
.filters .cs-val { min-width: 0; }

.f-select,
select.f-select {
  min-width: 0;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-bottom: 1px solid var(--rule-select);
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  padding: 3px 18px 3px 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%238a8378'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.f-select:focus { outline: none; border-bottom-color: var(--ink); }
.f-select:disabled {
  color: var(--ink-4);
  cursor: default;
  border-bottom-style: dotted;
  background-image: none;
}

.f-input,
input.f-input {
  border: 0;
  border-bottom: 1px solid var(--rule-select);
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  padding: 3px 0;
  width: 100%;
}
.f-input::placeholder { color: var(--ink-4); }
.f-input:focus { outline: none; border-bottom-color: var(--ink); }

.f-label {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex: none;
}

/* Etiqueta y sus selectores viajan juntos: en la fila con wrap, el salto de
   línea no puede caer entre el rótulo y su control. */
.f-group {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
}

.scope-note {
  /* Dos líneas junto a los filtros en vez de una línea larga que caía a su
     propia fila: el contador queda al mismo nivel que los selects. */
  margin-left: auto;
  max-width: 24ch;
  white-space: normal;
  text-align: right;
  text-wrap: balance;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-4);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.btn {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 7px 14px;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn.small { padding: 4px 9px; font-size: 9.5px; }

/* ── Filas de lista ──────────────────────────────────────────────────────── */

.rowitem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  padding: 13px 8px;
  font-family: var(--sans);
}
.rowitem:hover { background: var(--surface-hover); }
.rowitem.tint-crit { background: var(--tint-crit); }
.rowitem.tint-warn { background: var(--tint-warn); }
.rowitem.tint-crit:hover, .rowitem.tint-warn:hover { filter: brightness(.985); }

.rowitem .row-top {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.rowitem .row-level {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}
/* El rótulo de nivel lleva su forma delante, igual que las insignias: así la
   severidad se distingue también sin color. */
.rowitem .row-level[data-nivel]::before {
  font-size: 9px;
  margin-right: 5px;
  letter-spacing: 0;
}
.rowitem .row-level[data-nivel="crit"]::before { content: '\25A0'; }
.rowitem .row-level[data-nivel="warn"]::before { content: '\25B2'; }
.rowitem .row-level[data-nivel="ok"]::before { content: '\25CF'; }

.rowitem .row-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin-top: 5px;
  line-height: 1.35;
}

.rowitem .row-detail {
  font-size: 13px;
  color: var(--ink-5);
  margin-top: 5px;
  line-height: 1.6;
}

.rowitem .row-action {
  font-style: italic;
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 5px;
}

/* ── Barras horizontales ─────────────────────────────────────────────────── */

.hbars { display: grid; gap: 10px; }

.hbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) minmax(38px, max-content);
  align-items: center;
  gap: 12px;
}

.hbar-name {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.3;
}

/* El nombre de la barra lleva al portal donde se tramita ese reporte. Sin
   subrayado permanente: la fila ya es un dato, no una lista de enlaces. */
.hbar-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
}
.hbar-name a:hover {
  color: var(--ink);
  border-bottom-color: currentColor;
}

.hbar-track {
  height: 12px;
  background: var(--rule-track);
  position: relative;
}

.hbar-fill { height: 100%; display: block; }

.hbar-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-align: right;
  line-height: 1;
}
.hbar-num .hbar-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: .04em;
}

/* ── Dónut ───────────────────────────────────────────────────────────────── */

.donut { text-align: center; animation: donut-in .5s ease both; }

@keyframes donut-in { from { opacity: 0; } to { opacity: 1; } }

.donut svg { display: block; margin: 0 auto; }

.donut .donut-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.donut .donut-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 10px;
}

.donut .donut-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 3px;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

/* Las tablas de programa llevan un contenedor .t-scroll con scroll propio: en
   columnas angostas la tabla conserva su ancho mínimo y no ensancha la página. */
.t-scroll { max-width: 100%; overflow-x: auto; }

.t-table {
  min-width: 560px;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}

.t-table th {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  text-align: left;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--rule-grid);
}

.t-table td {
  font-size: 13px;
  color: var(--ink-2);
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--rule-track);
  line-height: 1.55;
  /* baseline y no top: las celdas mono son de 11px y con top quedaban
     flotando sobre el resto de la fila. */
  vertical-align: baseline;
}

.t-table td.mono, .t-table .mono { font-family: var(--mono); font-size: 11px; }

/* ── Pills ───────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 8px 1px;
  border: 1px solid currentColor;
  line-height: 1.6;
  vertical-align: middle;
}
/* Forma antes del texto: el nivel se distingue sin depender del color — hay
   daltonismo en cualquier directorio y estos tableros se proyectan. */
.pill::before {
  font-size: 9px;
  line-height: 1;
  flex: none;
}
.pill.ok { color: var(--ok); }
.pill.ok::before { content: '●'; }
.pill.warn { color: var(--warn); }
.pill.warn::before { content: '▲'; }
.pill.crit { color: var(--crit); }
.pill.crit::before { content: '■'; }
.pill.muted { color: var(--ink-4); }
.pill.muted::before { content: '○'; }

/* ── Caja de mapa + leyenda ──────────────────────────────────────────────── */

.map-box {
  border: 1px solid var(--rule-grid);
  background: var(--map-water);
}

.map-legend {
  display: flex;
  column-gap: 18px;
  row-gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 10px;
  align-items: center;
}
.map-legend .lg { display: flex; align-items: center; gap: 7px; }
.map-legend .lg-tri {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--ink);
  display: block;
}
.map-legend .lg-diamond { width: 8px; height: 8px; border: 1.5px solid var(--ink); transform: rotate(45deg); display: block; }
.map-legend .lg-square { width: 9px; height: 9px; border: 1.5px solid var(--ink); display: block; }
/* La severidad se marca con anillos alrededor del glifo, no con otra forma: la
   forma ya significa tipo de instalación. La leyenda usa el mismo lenguaje. */
.map-legend .lg-warn,
.map-legend .lg-crit {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: block;
  position: relative;
}
.map-legend .lg-warn { border: 1.3px solid var(--warn); }
.map-legend .lg-crit { border: 1.3px solid var(--crit); box-shadow: 0 0 0 2.4px var(--paper), 0 0 0 3.7px var(--crit); }
.map-legend .lg-warn::after,
.map-legend .lg-crit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  transform: rotate(45deg);
}
.map-legend .lg-warn::after { background: var(--warn); }
.map-legend .lg-crit::after { background: var(--crit); }
.map-legend .lg-crit { margin-right: 4px; }
.map-legend .lg-note { margin-left: auto; font-style: italic; }

/* ── Paneles ─────────────────────────────────────────────────────────────── */

.panel-box {
  border: 1px solid var(--rule-grid);
  padding: 18px 20px;
}

/* ── Capas fijas ──────────────────────────────────────────────────────────
   Seis elementos flotan sobre el tablero. Su orden vive declarado aquí, en un
   solo lugar, porque antes cada uno traía su z-index suelto y era imposible
   saber qué tapaba a qué sin abrirlos todos:

     60   .site-card   ficha de una unidad del mapa   (abajo derecha)
     70   .tw-chip     acceso a los ajustes           (abajo izquierda)
     70   .tr-pop      traza de un KPI                (junto al KPI)
     71   .tw-panel    panel de ajustes               (abajo izquierda)
     90   .toast       aviso efímero                  (abajo derecha)
    120   .docview     lectura de un expediente       (pantalla completa)

   El único par que compite por el mismo rincón es la ficha del sitio y el
   aviso: ambos anclan abajo a la derecha, y el aviso —que va por encima—
   tapaba el pie de la ficha, donde está su botón de acción. Con la ficha
   abierta, el aviso se muestra arriba, que es el único rincón libre. */

/* ── Toast ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 11px 18px;
  z-index: 90;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Con la ficha de una unidad abierta, el aviso deja libre la esquina inferior
   derecha: la ficha vive ahí y su botón de acción quedaba tapado. Sube arriba,
   que es el único rincón sin capas fijas. */
body:has(.site-card) .toast { bottom: auto; top: 24px; }

/* ── Utilidades de layout de vistas ──────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; align-items: start; }
.grid-side { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); gap: 44px; align-items: start; }
.vspace { margin-top: 36px; }
.vspace-s { margin-top: 22px; }

/* Vista placeholder / en construcción */
.ph-view { padding: 60px 0 0; max-width: 62ch; }
.ph-view h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -.01em;
  margin: 8px 0 14px;
}

/* ── Bajo 1120px: la columna lateral se apila; con 300px + tabla no cabe ──── */
@media (max-width: 1120px) {
  .grid-side { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  /* Cuatro tiles en una fila dejan ~156px por celda: la unidad baja bajo la
     cifra, como ya hace la banda KPI del shell por la misma razón. */
  .tiles.cols-4 .tile-fig { flex-direction: column; align-items: flex-start; }
}

/* ── 1280×800: apretar sin romper ────────────────────────────────────────── */
@media (max-width: 1340px) {
  .content { padding: 26px 26px 50px; }
  .page-head h1 { font-size: 34px; }
  .tile .tile-num { font-size: clamp(28px, 3vw, 40px); }
  .grid-3 { gap: 26px; }
  .grid-side { gap: 28px; }
}

/* ── Ficha emergente del mapa ────────────────────────────────────────────────
   Se abre al hacer clic en un punto: dato maestro de la unidad y enlaces a sus
   expedientes (RCA, PERT, resolución sanitaria). */
.site-card { position: fixed; right: 26px; bottom: 26px; z-index: 60; width: 320px;
  background: var(--paper); border: 1px solid var(--rule-strong); border-top-width: 3px;
  padding: 16px 18px 15px; box-shadow: 0 18px 44px rgba(14,42,59,.16); }
.site-card-x { position: absolute; top: 6px; right: 8px; background: none; border: 0;
  font-size: 17px; line-height: 1; color: var(--ink-4); cursor: pointer; padding: 4px 6px; }
.site-card-x:hover { color: var(--ink); }
.site-card-t { font-family: var(--serif); font-size: 21px; line-height: 1.15; margin: 5px 0 7px; }
.site-card-al { margin-top: 10px; display: grid; gap: 5px; font-size: 12.5px; line-height: 1.4;
  border-top: 1px solid var(--rule-soft); padding-top: 10px; color: var(--ink-2); }
.site-card-al .mono { color: var(--ink-4); }
.site-card-m { margin-top: 11px; }
.site-card-d { margin-top: 12px; border-top: 1px solid var(--rule-soft); padding-top: 11px;
  display: grid; gap: 6px; font-size: 12.5px; font-style: italic; }

/* ── Búsqueda global ─────────────────────────────────────────────────────────
   Primera fila de la pantalla, antes de la cabecera: es el punto de entrada al
   dato maestro, no un KPI más de la banda. */
.search-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 0 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}

/* ── Encabezados de las columnas de gráficos ─────────────────────────────────
   En columnas angostas el 'mono' envolvía sólo en algunas secciones, así que
   cada gráfico arrancaba a distinta altura. Aquí el encabezado es siempre de
   dos líneas: título arriba, referencia debajo, y los tres cuerpos quedan
   alineados entre sí. */
.grid-3 .section-head {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 3px;
}
/* El título reserva dos líneas: así los tres encabezados miden lo mismo y las
   cajas de gráfico arrancan y terminan a la misma altura. */
.grid-3 .section-head h2 { min-height: 2.4em; }
.grid-3 .section-head .mono { margin-left: 0; }

/* ── Paginación de listas ────────────────────────────────────────────────────
   Cinco filas por página; la barra aparece sólo cuando el filtro deja más. */
.pager {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 13px 2px 0;
}
.pager-info { color: var(--ink-4); }
.pager-nav { margin-left: auto; display: flex; gap: 1px; }
.pager-nav button {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}
.pager-nav button:hover:not(:disabled) { border-color: var(--rule-strong); color: var(--ink); }
.pager-nav button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pager-nav button:disabled { color: var(--ink-5); cursor: default; }
.pager-gap { align-self: center; padding: 0 3px; font-family: var(--mono); font-size: 11px; color: var(--ink-5); }

/* ── Encabezados enfrentados de las dos columnas ─────────────────────────────
   Su altura dependía de si el 'mono' envolvía, así que la línea inferior de
   una columna caía a distinta altura que la de la otra. Aquí el encabezado es
   siempre de dos líneas: título y referencia debajo, regla a la misma altura. */
.grid-side > div > .section-head {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 3px;
}
.grid-side > div > .section-head .mono {
  margin-left: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Marco de los gráficos ───────────────────────────────────────────────────
   Todo gráfico (dónut, barras, área, burbujas, tabla-calor) vive dentro del
   mismo rectángulo suave, para que las columnas lean como una sola familia. */
.chart-box {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 18px 20px 20px;
  min-width: 0;
}
.chart-box > svg { display: block; }
.chart-box .hbars { margin: 2px 0; }
.chart-box.center { text-align: center; }

/* ── Panel de ajustes ────────────────────────────────────────────────────────
   Tres decisiones de carácter: densidad, peso del semáforo y modo cliente. */
.tw-chip {
  position: fixed; left: 18px; bottom: 16px; z-index: 70;
  background: var(--ink); color: var(--paper);
  border: 0; padding: 7px 14px;
  font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer;
}
.tw-chip:hover { background: var(--accent); }
.tw-panel {
  position: fixed; left: 18px; bottom: 54px; z-index: 71; width: 296px;
  max-height: calc(100vh - 88px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--rule-strong); border-top-width: 3px;
  padding: 15px 18px 16px;
  box-shadow: 0 20px 50px rgba(14,42,59,.18);
  display: none;
}
.tw-panel.open { display: block; }
.tw-head { display: flex; align-items: center; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--rule-soft); }
.tw-x { margin-left: auto; background: none; border: 0; font-size: 17px; line-height: 1; color: var(--ink-4); cursor: pointer; }
.tw-x:hover { color: var(--ink); }
.tw-group { padding: 14px 0 0; }
.tw-group + .tw-group { border-top: 1px solid var(--rule-soft); margin-top: 14px; }
.tw-label { font-family: var(--serif); font-size: 17px; margin-bottom: 9px; }
.tw-opts { display: grid; gap: 1px; background: var(--rule-grid); }
.tw-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper); border: 0; padding: 8px 10px;
}
.tw-opt:hover { background: var(--surface-hover); }
.tw-opt.on { background: var(--ink); }
.tw-opt-t { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--ink); }
.tw-opt-s { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); margin-top: 2px; }
.tw-opt.on .tw-opt-t, .tw-opt.on .tw-opt-s { color: var(--paper); }
.tw-opt.on .tw-opt-s { opacity: .72; }
.tw-foot { font-size: 11px; line-height: 1.45; color: var(--ink-4); margin-top: 8px; }
.tw-switch {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: var(--paper); border: 1px solid var(--rule-soft); padding: 9px 11px; cursor: pointer;
}
.tw-switch:hover { border-color: var(--rule-strong); }
.tw-knob { width: 26px; height: 14px; flex: none; background: var(--rule-grid); position: relative; transition: background .15s; }
.tw-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: var(--paper); transition: transform .15s; }
.tw-switch.on { border-color: var(--ink); }
.tw-switch.on .tw-knob { background: var(--accent); }
.tw-switch.on .tw-knob::after { transform: translateX(12px); }
.tw-reset { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.tw-reset button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); text-decoration: underline;
}
.tw-reset button:hover { color: var(--ink); }

/* ── Densidad ──────────────────────────────────────────────────────────────*/
body[data-densidad="compacta"] .content { padding: 22px 26px 44px; }
body[data-densidad="compacta"] .page-head h1 { font-size: 32px; }
body[data-densidad="compacta"] .tile { padding: 11px 14px 14px; }
body[data-densidad="compacta"] .tile .tile-num { font-size: clamp(24px, 2.4vw, 32px); }
body[data-densidad="compacta"] .rowitem { padding: 10px 10px; }
body[data-densidad="compacta"] .row-title { font-size: 15px; }
body[data-densidad="compacta"] .row-detail, body[data-densidad="compacta"] .row-action { font-size: 12px; }
body[data-densidad="compacta"] .vspace { margin-top: 24px; }
body[data-densidad="compacta"] .section-head h2 { font-size: 19px; }
body[data-densidad="compacta"] .chart-box { padding: 12px 14px 14px; }
body[data-densidad="compacta"] .map-box { height: 300px !important; }

body[data-densidad="sala"] .page-head h1 { font-size: 46px; }
body[data-densidad="sala"] .tile { padding: 22px 22px 26px; }
body[data-densidad="sala"] .tile .tile-num { font-size: clamp(32px, 4.2vw, 58px); }
body[data-densidad="sala"] .tile-kicker { font-size: 11px; }
body[data-densidad="sala"] .section-head h2 { font-size: 27px; }
body[data-densidad="sala"] .rowitem { padding: 18px 14px; }
body[data-densidad="sala"] .row-title { font-size: 19px; }
body[data-densidad="sala"] .row-detail, body[data-densidad="sala"] .row-action { font-size: 14.5px; }
body[data-densidad="sala"] .vspace { margin-top: 46px; }
body[data-densidad="sala"] .chart-box { padding: 24px 26px 26px; }

/* ── Peso del semáforo ─────────────────────────────────────────────────────*/
body[data-semaforo="sobrio"] .rowitem.tint-crit,
body[data-semaforo="sobrio"] .rowitem.tint-warn { background: transparent; }

body[data-semaforo="alerta"] .rowitem.tint-crit { background: var(--crit-subtle); box-shadow: inset 3px 0 0 var(--crit); }
body[data-semaforo="alerta"] .rowitem.tint-warn { background: var(--warn-subtle); box-shadow: inset 3px 0 0 var(--warn); }
body[data-semaforo="alerta"] .row-level { letter-spacing: .06em; font-weight: 500; }
body[data-semaforo="alerta"] .pill.crit { background: var(--crit); color: var(--paper); border-color: var(--crit); }
body[data-semaforo="alerta"] .pill.warn { background: var(--warn); color: var(--paper); border-color: var(--warn); }

/* ── Modo cliente ──────────────────────────────────────────────────────────*/
body[data-cliente="on"] .side-item.placeholder { display: none; }
body[data-cliente="on"] .side-foot,
body[data-cliente="on"] .page-head .meta .mono,
body[data-cliente="on"] .lg-note { display: none; }
/* El chip sigue visible: es la única salida del modo cliente. */
body[data-cliente="on"] .tw-chip { background: var(--accent); }
body[data-cliente="on"] .page-head .meta { font-size: 11px; }

/* ── Casillas de selección (envío masivo de recordatorios) ────────────────── */
input.chk {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  border: 1px solid var(--ink-4);
  background: var(--paper);
  cursor: pointer;
  vertical-align: -1px;
}
input.chk:hover { border-color: var(--ink); }
input.chk:checked { background: var(--accent); border-color: var(--accent); }
input.chk:checked::after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  margin: 1px auto 0;
  border: solid var(--paper);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(40deg);
}

/* Columnas de igual altura: la lateral se estira hasta el alto del contenido
   principal para que el mapa cierre alineado con la lista. */
.grid-side.stretch { align-items: stretch; }

/* ── Paleta ──────────────────────────────────────────────────────────────────
   Tres registros visuales del mismo tablero: el papel cálido con acento marino
   del original, un neutro institucional sin color, y una versión de tinta plena
   para proyectar en sala. */
/* Paleta grafito: familia.css §1. */
body[data-paleta="grafito"] .map-box { background: var(--sunken); }

/* Paleta contraste: familia.css §1. */
body[data-paleta="contraste"] .section-head { border-bottom-width: 2px; }
body[data-paleta="contraste"] .page-head { border-bottom-width: 2px; }
body[data-paleta="contraste"] .tiles { border-top-width: 2px; }
body[data-paleta="contraste"] .chart-box { border-color: var(--rule-soft); }

/* Los filtros globales encabezan la pantalla, sobre la banda de KPI. */
#global-filters { margin-bottom: 18px; }
/* Una sola fila para los cinco filtros globales: los selectores se acortan
   —con elipsis— antes que saltar de nivel. Los chips del alcance quedan en su
   propia banda debajo, por eso viven fuera de .f-line. */
#global-filters { flex-direction: column; align-items: stretch; gap: 0; }
.f-line {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.f-line > .f-group { min-width: 0; flex: 1 1 auto; }
/* El rótulo es el desambiguador (región vs. zona): nunca se oculta. Lo que
   cede espacio es el texto del valor, que ya lleva su title completo. */
.f-line > .f-group > .f-label { flex: none; }
.f-scope { padding-top: 8px; }
.f-line > .f-group > .cs-wrap { flex: 1 1 auto; min-width: 0; }
.f-line > .f-group > .cs-wrap,
.f-line > .cs-wrap { min-width: 0; }
.f-line .cs-btn { min-width: 0; }
.f-line .cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-line .cs-val { min-width: 0; }
.f-line > .scope-note { margin-left: auto; flex: none; }
@media (max-width: 1180px) {
  .f-line { gap: 12px; }
}
@media (max-width: 1180px) {
  .f-line { gap: 12px; }
}

/* ── Filetes dobles ──────────────────────────────────────────────────────────
   Un encabezado ya cierra con su línea: el bloque que le sigue no debe dibujar
   la suya. Donde el bloque necesita su marco (chart-box, panel-box, tablas), se
   sube 1px para que ambos filetes se resuelvan en uno. */
.section-head + .tiles,
.filters + .tiles,
#global-filters + #kpi-band .tiles { border-top: 0; }

/* Contenedor con marco justo después de un encabezado: el filete del
   encabezado es la única línea horizontal y la caja cuelga de él sin dibujar
   la suya. (El -1px anterior no fusionaba nada: el encabezado trae 14px de
   margen inferior.) */
.section-head:has(+ .chart-box),
.section-head:has(+ .panel-box),
.section-head:has(+ .map-box),
.section-head:has(+ .t-scroll) { margin-bottom: 0; }

.section-head + .chart-box,
.section-head + .panel-box,
.section-head + .map-box,
.section-head + .t-scroll { border-top: 0; }

/* La banda de KPI queda pegada a la fila de filtros que la encuadra. */
#global-filters + #kpi-band { margin-top: -1px; }

/* Logo del cliente en la cabecera, alineado al pie del título. */
.client-logo-img { display: block; width: 177px; height: 67px; align-self: flex-end; margin-left: auto; flex: none; }

/* Las tres cajas de gráfico de una fila comparten alto: la más alta manda y
   las demás se estiran, en vez de quedar de tamaños distintos. */
/* La rejilla trae align-items:start, que impedía que las secciones tomaran el
   alto de su fila: aquí se estiran para que las cajas puedan igualarse. */
.grid-3 { align-items: stretch; }
.grid-3 > section { display: flex; flex-direction: column; min-width: 0; }
.grid-3 > section > .chart-box { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ── Mapa ↔ tablero ──────────────────────────────────────────────────────── */
.geo-chip { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:5px 9px; background:var(--accent); border:1px solid var(--accent); color:var(--surface);
  font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:12.5px; line-height:1; }
.geo-chip .kicker { color:rgba(255,255,255,.7); }
.geo-chip-n { color:rgba(255,255,255,.75); }
.geo-chip-x { font-size:15px; line-height:1; color:rgba(255,255,255,.8); }
.geo-chip:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
[data-site].is-hot { background:var(--sunken); }
.rowitem[data-site] { transition:background .12s ease; }

/* ── Desplegables dibujados en la página ─────────────────────────────────
   El menú nativo lo pinta el sistema operativo y no viaja en una pantalla
   compartida. Estos paneles son HTML de la página, así que sí se transmiten. */
.cs-wrap { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.cs-wrap > select.f-select {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
}
.cs-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  background-image: none;
  padding-right: 2px;
}
.cs-btn .cs-val {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-btn .cs-caret { flex: none; color: var(--ink-4); font-size: 10px; }
.cs-btn:hover:not(:disabled) { border-bottom-color: var(--ink); }
.cs-wrap.open .cs-btn { border-bottom-color: var(--ink); }

.cs-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 90;
  min-width: 100%;
  max-width: 340px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 14px 34px rgba(14,42,59, .16);
}
.cs-wrap.open .cs-panel { display: block; }
.cs-opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 7px 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
  white-space: normal;
}
.cs-opt:hover { background: var(--surface-hover); color: var(--ink); }
.cs-opt.on { background: var(--ink); color: var(--paper); }
.cs-opt .cs-tick { margin-left: auto; }
.cs-group {
  padding: 7px 12px 4px;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--rule-soft);
}

/* Filtro en cascada sin alternativas: se muestra inerte en vez de ofrecer
   opciones que el alcance ya no contiene. */
.cs-btn:disabled {
  color: var(--ink-4);
  cursor: default;
  border-bottom-style: dotted;
}
.cs-btn:disabled .cs-caret { opacity: .4; }

.chip-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--rule-soft);
  margin-top: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 9px;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.4;
}
.chip:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chip .chip-x { font-size: 13px; opacity: .75; }
.chip.geo { background: var(--accent); border-color: var(--accent); }
.chip.clear {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--rule-select);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 5px 9px;
}
.chip.clear:hover { color: var(--ink); border-color: var(--ink); background: transparent; }
/* Grupo de alternancia (p. ej. urgencia de plazos RCA): el no elegido va en
   contorno y el elegido en sólido, para que el estado no dependa del color. */
.chip.tog { background: transparent; color: var(--ink-3); border-color: var(--rule-select); }
.chip.tog:hover { background: transparent; color: var(--ink); border-color: var(--ink-3); }
.chip.tog.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 500; }

/* ── No conformidades de una auditoría (P2-6) ─────────────────────────────── */
.nc-list { display: flex; flex-direction: column; margin-top: 10px; }
.nc-item { padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.nc-item:first-child { border-top: 0; }
.nc-top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; row-gap: 5px; }
.nc-num { color: var(--ink-3); }
.nc-plazo { margin-left: auto; color: var(--ink-3); }
.nc-titulo { font-family: var(--serif); font-size: 16px; margin: 5px 0 2px; text-wrap: pretty; }
.nc-meta { color: var(--ink-4); }
.nc-riesgo { font-size: 12.5px; color: var(--crit); margin-top: 6px; }
.nc-riesgo.suave { color: var(--ink-4); font-style: italic; }
.nc-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 9px; }

/* ── Unidades fiscalizables en la ficha de unidad (P3-1) ─────────────────── */
.site-card-uf {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.uf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--rule-soft);
  padding: 8px 9px;
  font-family: var(--sans);
}
.uf-item:hover { border-color: var(--ink-3); background: var(--sunken); }
.uf-item.on { border-color: var(--ink); background: var(--ink); }
.uf-item.on .uf-t, .uf-item.on .uf-m, .uf-item.on .uf-a { color: var(--paper); }
.uf-t { font-size: 12.5px; color: var(--ink); }
.uf-m { font-size: 10.5px; color: var(--ink-4); }
.uf-a { font-size: 11px; color: var(--ink-3); font-style: italic; text-wrap: pretty; }

/* ── Maestro-detalle: control único de apertura en la fila (P3-7) ─────────── */
.row-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 3px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.row-open:hover { color: var(--ink); }
.row-open:hover .ro-caret { border-color: var(--ink-3); color: var(--ink); }
.row-open .ro-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: none;
  border: 1px solid var(--rule-select);
  font-size: 12px;
  line-height: 1;
  color: var(--ink-4);
}
.row-open.on .ro-caret { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.row-open.on { color: var(--ink); }

/* ── Trazabilidad: marca «origen» y su ficha (P3-6) ───────────────────────── */
.tile-holder { position: relative; min-width: 0; display: flex; }
.tile-holder > .tile { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.tile-holder > .tile .tile-kicker { margin-right: 62px; }
.tile-holder > .tr-mark { position: absolute; top: 10px; right: 10px; }

.tr-slot { margin-top: 10px; display: flex; justify-content: center; }

.tr-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--rule-select);
  color: var(--ink-4);
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 3px 7px;
  line-height: 1.3;
}
.tr-mark:hover { color: var(--ink); border-color: var(--ink-3); }
.tr-mark.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tr-glyph { font-size: 11px; letter-spacing: 0; }
.tile-btn.on + .tr-mark { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.8); }

.tr-pop {
  position: fixed;
  z-index: 70;
  width: 360px;
  max-height: 78vh;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 18px 44px rgba(14,42,59,.22);
  padding: 14px 16px 16px;
}
.tr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-x {
  background: transparent; border: 0; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--ink-4); padding: 0 2px;
}
.tr-x:hover { color: var(--ink); }
.tr-title { font-family: var(--serif); font-size: 19px; margin: 8px 0 2px; }
.tr-val { font-family: var(--serif); font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.tr-block { margin-top: 13px; display: flex; flex-direction: column; gap: 4px; }
.tr-k { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.tr-v { font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.tr-rows { display: flex; flex-direction: column; }
.tr-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 5px 0; border-bottom: 1px solid var(--rule-soft); font-size: 12.5px;
}
.tr-row .mono { color: var(--ink-3); white-space: nowrap; }
.tr-more { padding-top: 6px; font-size: 12px; font-style: italic; color: var(--ink-4); }
.tr-docs { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-style: italic; }
.tr-note { margin-top: 13px; font-size: 11.5px; font-style: italic; color: var(--ink-4); text-wrap: pretty; }

/* ── Grupos colapsables (lista de compromisos RCA a escala) ───────────────── */
.grp { border-bottom: 1px solid var(--rule-soft); }
.grp-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  padding: 11px 4px 10px;
  text-align: left;
  font-family: var(--sans);
}
.grp-head:hover .grp-title { text-decoration: underline; text-underline-offset: 3px; }
.grp-caret {
  flex: none;
  width: 15px;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-3);
}
.grp-title {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 18px;
  color: var(--ink);
}
.grp-count { color: var(--ink-3); margin-left: auto; }
.grp-body { padding-bottom: 6px; }
.grp-more { padding: 9px 4px 4px; font-size: 12.5px; font-style: italic; }

.search-drop {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 80;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 16px 40px rgba(14,42,59,.14);
  max-height: 330px;
  overflow-y: auto;
}
.sd-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 9px 14px;
  cursor: pointer;
}
.sd-item:hover { background: var(--surface-hover); }
.sd-item .sd-name { display: block; font-family: var(--serif); font-size: 15px; }
.sd-item .mono { display: block; margin-top: 2px; }
.sd-empty { padding: 12px 14px; font-style: italic; font-size: 12.5px; color: var(--ink-3); }

/* Regla de persistencia visible junto a los chips: el alcance es del tablero y
   sobrevive al cambio de módulo; cuando se hereda, se dice de dónde viene. */
.scope-rule {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-4);
}

/* ── Pirámides del sistema documental (V2-12) ─────────────────────────────
   Dos jerarquías lado a lado. Cada peldaño es un botón que filtra la lista;
   el ancho crece hacia la base porque hacia abajo hay más papel y menos
   discrecionalidad: una política se decide, un formato se llena. */
.pir-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 18px;
}
/* Las dos pirámides se leen desde la base: una tiene seis peldaños y la otra
   siete, así que la columna crece hacia arriba y los cimientos quedan a la
   misma altura. */
.pir-wrap > div { display: flex; flex-direction: column; }
.pir-wrap > div > div:last-child { margin-top: auto; }
@media (max-width: 900px) { .pir-wrap { grid-template-columns: minmax(0, 1fr); } }

.pir-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
}
.pir-head span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-4);
}

.pir-step {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  border: 0;
  padding: 9px 12px;
  font: inherit;
  cursor: pointer;
  transition: filter .12s;
}
.pir-step:hover { filter: brightness(1.07); }
.pir-step.on { box-shadow: 0 0 0 2px var(--ink); }
.pir-step.vacia { box-shadow: inset 0 0 0 1px var(--rule-soft); cursor: default; }
.pir-step.vacia:hover { filter: none; }
.pir-num {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.pir-lab {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .01em;
}

.pir-lectura {
  max-width: 92ch;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-3);
  text-wrap: pretty;
}
.pir-lectura strong { color: var(--ink); font-weight: 500; }
.pir-lectura em { color: var(--ink-2); font-style: italic; font-weight: 500; }

/* El buscador vive en el encabezado de la sección: buscar es la entrada al
   catálogo, no un filtro más. Ocupa el sitio del rótulo mono y hereda su
   línea de base. */
.doc-head { align-items: baseline; gap: 24px; }
.doc-head .f-input {
  flex: 0 1 auto;
  width: 62ch;
  min-width: 200px;
  margin-left: auto;
  margin-bottom: 2px;
}

/* Fila de documento: ámbito, título, clasificación y folio, con el acceso al
   archivo a la derecha. Tres líneas de metadato porque un documento se
   identifica por su lugar en la jerarquía, no por su nombre. */
.doc-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 14px 2px;
  border-bottom: 1px solid var(--rule-track);
}
.doc-row:first-child { border-top: 1px solid var(--rule-strong); }
.doc-ambito {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 3px;
}
.doc-titulo {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 4px;
}
.doc-meta { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.doc-folio {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--ink-3);
  margin-top: 4px;
}
/* Las dos fechas van juntas y separadas del folio: responden a preguntas
   distintas —desde cuándo existe, y si esto es lo que rige hoy. */
.doc-fechas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.doc-row .sep { color: var(--ink-5); padding: 0 2px; }
.doc-ver {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.doc-estado {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.doc-link {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
}
.doc-link:hover { border-bottom-color: currentColor; }
/* «Ver» abre la ficha en el tablero y es un botón; «Ley Chile ↗» sale a otra
   pestaña y es un enlace. Se ven iguales porque hacen lo mismo para el lector:
   llevar al texto del documento. */
button.doc-link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 0;
  cursor: pointer;
}

/* Ficha de control documental dentro del visor: papel, no interfaz. */
.docview-inline {
  overflow: auto;
  background: var(--paper);
  padding: 34px 40px 44px;
}
.dsheet { max-width: 74ch; margin: 0 auto; color: var(--ink); }
.dsheet header { border-bottom: 1px solid var(--rule-strong); padding-bottom: 14px; margin-bottom: 22px; }
.dsheet-kick {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.dsheet h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.dsheet-folio { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--ink-3); }
.dsheet h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 26px 0 8px;
}
.dsheet p { font-size: 14px; line-height: 1.65; margin: 0; text-wrap: pretty; }
.dsheet-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.dsheet-t th,
.dsheet-t td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule-soft); }
.dsheet-t th { width: 34%; font-weight: 400; color: var(--ink-3); }
.dsheet-rev thead th { width: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--rule-strong); }
.dsheet-rev td { font-size: 12.5px; }
.dsheet footer {
  margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-3);
}
/* Documento declarado sin archivo cargado: se dice, no se disfraza de botón. */
.doc-nofile {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-3);
}

.action-strip { border-top: 1px solid var(--rule-strong); margin-bottom: 26px; }
.action-strip .as-head { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 10px; }
.action-strip .as-head .mono { margin-left: auto; }
.as-items {
  /* Cinco tarjetas en una sola línea: con auto-fit y mínimo 230px la quinta
     saltaba de fila. Columnas iguales que pueden encogerse. */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-grid);
}
/* Tarjeta en columna: la cifra arriba y el rótulo debajo. En fila horizontal,
   con cinco columnas el texto quedaba en una tira de 30 px y se partía a mitad
   de palabra; en columna los 125 px del caso más angosto son utilizables. */
.as-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 2px 8px;
  padding: 12px 12px 13px;
  color: var(--ink);
  min-width: 0;
}
.as-item:hover { filter: brightness(.97); }
.as-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -.03em;
  line-height: 1.05;
  grid-column: 1;
}
.as-body { min-width: 0; display: block; grid-column: 1 / -1; }
.as-label { display: block; font-size: 12px; font-weight: 500; line-height: 1.35; }
.as-foot { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.as-go { color: var(--ink-4); font-size: 13px; grid-column: 2; grid-row: 1; justify-self: end; }

/* La fila de cinco se mantiene siempre en una línea: en pantallas angostas
   las tarjetas se encogen en vez de saltar de fila. */
.as-items { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Fila de conducta penal: es un botón que recorta las causas a su unidad.
   Tinte crítico permanente; seleccionada, filete de tinta a la izquierda. */
.penal-row {
  display: flex;
  gap: 20px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule-track);
  background: var(--tint-crit);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.penal-row:hover { filter: brightness(.98); }
.penal-row.on { box-shadow: inset 3px 0 0 var(--crit); }
.penal-go { color: var(--ink-4); margin-left: 6px; }

/* Tarjeta de exposición penal: mismo formato del resto de la franja, color
   propio. Es responsabilidad personal, no una multa más de la empresa. */
.as-item.penal { color: var(--paper); }
.as-item.penal .as-label { color: var(--paper); }
.as-item.penal .as-foot { color: rgba(255,255,255,.82); }
.as-item.penal .as-go { color: rgba(255,255,255,.72); }
.as-item.penal:hover { filter: none; background-image: linear-gradient(rgba(14,42,59,.14), rgba(14,42,59,.14)); }
/* Tarjeta en cero: se conserva para que la franja no cambie de forma al filtrar.
   Papel, filete suave y cifra apagada — presente, pero sin pedir atención. */
.as-item.vacia {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  cursor: default;
}
.as-item.vacia:hover { filter: none; }
.as-item.vacia .as-num { color: var(--ink-4); }
.as-item.vacia .as-label { color: var(--ink-3); font-weight: 400; }
.as-item.vacia .as-foot { color: var(--ink-3); font-style: italic; }

.action-strip.quiet {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

/* Agregados clicables: el tile del índice lleva a su vista filtrada. */
a.tile { text-decoration: none; color: inherit; display: block; }
a.tile:hover { background: var(--surface-hover); }

/* Sección navegable: el título y su caja llevan al módulo. La flecha lo
   declara — un gráfico clickeable sin seña no se descubre. */
.section-head.linked h2 a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.section-head.linked .sh-arrow { color: var(--ink-4); font-size: 15px; }
.section-head.linked h2 a:hover { color: var(--accent); }
.section-head.linked h2 a:hover .sh-arrow { color: var(--accent); }

a.chart-box, a.chart-box.link {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.chart-box:hover { background: var(--surface-hover); }

/* Tile que actúa como filtro: botón con estado activo explícito. */
.tile-btn {
  font: inherit;
  color: inherit;
  text-align: left;
  border: 0;
  cursor: pointer;
  display: block;
  width: 100%;
}
.tile-btn:hover { background: var(--surface-hover); }
.tile-btn.on { background: var(--ink); }
.tile-btn.on .tile-kicker,
.tile-btn.on .tile-unit,
.tile-btn.on .tile-foot { color: rgba(255,255,255, .72); }
.tile-btn.on .tile-num { color: var(--paper) !important; }
/* En la banda KPI el número no lleva color inline: hereda igual el invertido. */
#kpi-band .tile-btn.on .tile-num { color: var(--paper); }

/* ── Ficha de fiscalización con plan desplegable ─────────────────────────── */
.fisc-ficha { cursor: pointer; }
/* El hover no puede borrar el semáforo: aclara con transparencia para que el
   tinte de severidad de la fila siga visible debajo. */
.fisc-ficha:hover { background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)); }
.fisc-ficha.on { box-shadow: inset 3px 0 0 var(--accent); }
.fisc-ficha .fisc-panel { margin-top: 14px; cursor: default; background: var(--surface); }

/* ── Módulo previsto ───────────────────────────────────────────────
   Declara qué va a contener y en qué estado está: así se lee como alcance
   por construir y no como una pantalla rota. */
.ph-view .ph-lead {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 62ch;
  margin-top: 14px;
  text-wrap: pretty;
}
.ph-view .ph-list {
  display: grid;
  gap: 1px;
  background: var(--rule-grid);
  margin-top: 20px;
  max-width: 62ch;
}
.ph-view .ph-item {
  background: var(--paper);
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ph-view .ph-state {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  border-left: 2px solid var(--rule-select);
  padding-left: 12px;
}

/* ── Expediente de tramitación · hitos del procedimiento ─────────────────── */
.rowitem.prj-on { box-shadow: inset 3px 0 0 var(--accent); }
.trm { display: grid; gap: 1px; background: var(--rule-soft); margin-top: 12px; }
.trm-hito {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--paper);
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--ink-4);
}
.trm-hito .trm-punto {
  width: 9px; height: 9px;
  flex: none;
  border: 1.5px solid var(--rule-select);
  border-radius: 50%;
}
.trm-hito.on { color: var(--ink-2); }
.trm-hito.on .trm-punto { background: var(--ok); border-color: var(--ok); }
.trm-hito.now { color: var(--ink); font-weight: 500; }
.trm-hito.now .trm-punto { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2.5px rgba(28,114,147,.18); }
.trm-est { margin-left: auto; }

/* Modo cliente: las reseñas técnicas del mart salen también de las secciones. */
body[data-cliente="on"] .section-head .mono { display: none; }

/* ── Inventario del expediente ───────────────────────────────────────────
   Vive dentro de una fila de la lista, en columna angosta: lista vertical con
   el estado al frente, sin tabla ni scroll horizontal. */
.exp-box { background: var(--surface); }
.exp-list { display: grid; gap: 1px; background: var(--rule-soft); }
.exp-item { background: var(--paper); padding: 10px 12px; }
.exp-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 5px;
}
.exp-tipo { color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; }
.exp-item-top .pill { margin-left: auto; }
.exp-titulo { font-size: 13px; line-height: 1.4; margin-top: 5px; text-wrap: pretty; }
.exp-meta { margin-top: 4px; line-height: 1.5; }

/* ── Analítica · conversación con el dato maestro ──────────────────────── */
.an-box { border: 1px solid var(--rule-soft); background: var(--surface); display: flex; flex-direction: column; }
#an-chat { padding: 16px 18px; max-height: 520px; overflow-y: auto; }
.an-q {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.55;
  padding: 9px 13px;
  margin: 14px 0 10px auto;
  max-width: 46ch;
  width: fit-content;
}
.an-a {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.65;
  max-width: 64ch;
}
.an-a p { margin: 0 0 8px; text-wrap: pretty; }
.an-input {
  display: flex;
  gap: 12px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.an-sug {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 10px 13px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  cursor: pointer;
}
.an-sug:hover { border-color: var(--accent); color: var(--ink); }
.an-drop {
  border: 1.5px dashed var(--rule-select);
  padding: 22px 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.7;
}

/* ── Visor de documentos ─────────────────────────────────────────────────────
   El expediente se lee sobre el tablero, sin salir de la sesión. */
.docview {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(14,42,59, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.docview-panel {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-top-width: 3px;
  width: min(1000px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 26px 60px rgba(14,42,59, .3);
}
.docview-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule-soft);
  flex: none;
}
.docview-t {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docview-x {
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-4);
  cursor: pointer;
  padding: 2px 6px;
  flex: none;
}
.docview-x:hover { color: var(--ink); }
.docview-f { flex: 1; width: 100%; border: 0; background: var(--paper); min-height: 0; }


/* ── Módulo Analítica (an2-*) ─────────────────────────────────────────────
   Espacio de trabajo, no tablero: tres zonas verticales con el alcance por
   fuentes a la izquierda, la conversación al centro y las salidas a la
   derecha. Hereda tipografía y paleta; no hereda el chrome de filtros. */
.an2 { display: flex; flex-direction: column; min-height: calc(100vh - 210px); }
.an2-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.an2-head h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; }
.an2-head .mono { font-size: 10px; letter-spacing: .05em; color: var(--ink-4); margin-left: 10px; }
.an2-head .btn { margin-left: auto; }

.an2-body {
  flex: 1;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 0;
  gap: 0 22px;
  min-height: 0;
}
.an2-body.con-der { grid-template-columns: 280px minmax(0, 1fr) 320px; }
.an2-body.sin-izq { grid-template-columns: 34px minmax(0, 1fr) 0; }
.an2-body.sin-izq.con-der { grid-template-columns: 34px minmax(0, 1fr) 320px; }
@media (max-width: 980px) {
  .an2-body, .an2-body.con-der, .an2-body.sin-izq, .an2-body.sin-izq.con-der { grid-template-columns: minmax(0, 1fr); }
  .an2-izq, .an2-der { border: 1px solid var(--rule-soft); margin-bottom: 14px; }
}

.an2-izq { border-right: 1px solid var(--rule-soft); padding-right: 18px; min-width: 0; overflow: hidden; }
.an2-body.sin-izq .an2-izq { padding-right: 6px; }
.an2-body.sin-izq #an2-izq-body { display: none; }
.an2-izq-t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.an2-body.sin-izq .an2-izq-t { writing-mode: vertical-rl; text-orientation: mixed; gap: 10px; }
.an2-izq-t button, .an2-der-t button {
  background: none; border: 1px solid var(--rule-select); font: inherit;
  color: var(--ink-3); cursor: pointer; padding: 0 6px; line-height: 1.5;
}
.an2-grupo { margin-bottom: 16px; }
.an2-grupo-t { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.an2-check {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--ink-2); padding: 3px 0; cursor: pointer;
}
.an2-check input { accent-color: var(--accent); }
.an2-check-n { margin-left: auto; font-size: 10.5px; color: var(--ink-3); }
.an2-vacio { font-size: 12px; font-style: italic; color: var(--ink-3); padding: 4px 0; }
.an2-file {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid var(--rule-track);
}
.an2-file .mono { font-size: 10px; color: var(--ink-3); }
.an2-file-n { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an2-file-ok { color: var(--ok); }
.an2-file-x { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 13px; padding: 0 2px; margin-left: auto; }
.an2-prog { flex: 1; height: 5px; background: var(--rule-track); position: relative; align-self: center; }
.an2-prog i { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .3s; }
.an2-drop {
  margin-top: 10px; padding: 14px 10px; text-align: center;
  border: 1px dashed var(--rule-select); font-size: 11.5px; color: var(--ink-3);
}
.an2-drop.an2-hover { border-color: var(--accent); color: var(--accent); }
.an2-btn-min {
  background: none; border: 1px solid var(--rule-select); font-family: var(--sans);
  font-size: 11px; color: var(--ink-2); cursor: pointer; padding: 2px 9px; margin-top: 6px;
}
.an2-btn-min:hover { border-color: var(--ink); }
.an2-alcance {
  border-top: 1px solid var(--rule-strong); padding-top: 8px;
  font-size: 10px; letter-spacing: .04em; color: var(--ink-3); line-height: 1.6;
}

.an2-centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.an2-chatwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#an2-chat { flex: 1; overflow: auto; min-height: 320px; max-height: calc(100vh - 350px); padding-right: 4px; }
.an2-empty { max-width: 68ch; padding: 26px 2px; }
.an2-empty h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 8px; }
.an2-empty p { font-size: 13.5px; color: var(--ink-3); line-height: 1.6; margin: 0 0 18px; }
.an2-chips { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.an2-chip {
  background: var(--paper); border: 1px solid var(--rule-select);
  font: inherit; font-size: 12.5px; color: var(--ink-2); text-align: left;
  padding: 8px 13px; cursor: pointer; line-height: 1.5;
}
.an2-chip:hover { border-color: var(--ink); }
.an2-q {
  max-width: 60ch; margin: 16px 0 10px auto;
  background: color-mix(in oklab, var(--accent), var(--paper) 92%);
  padding: 10px 14px; font-size: 13.5px; line-height: 1.55;
}
.an2-a { border-top: 1px solid var(--rule-soft); padding: 14px 0 6px; font-size: 13.5px; line-height: 1.65; }
.an2-a p { margin: 0 0 10px; max-width: 88ch; text-wrap: pretty; }
.an2-a.an2-destello { background: color-mix(in oklab, var(--accent), var(--paper) 94%); }
.an2-h4 {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 16px 0 6px;
}
.an2-ref { font-family: var(--mono); font-size: 9.5px; color: var(--accent); margin-left: 1px; }
.an2-proc { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-style: italic; }
.an2-spin {
  width: 12px; height: 12px; border: 2px solid var(--rule-select);
  border-top-color: var(--accent); border-radius: 50%;
  animation: an2gira .8s linear infinite;
}
@keyframes an2gira { to { transform: rotate(360deg); } }

.an2-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0 4px; }
.an2-tabla th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  border-bottom: 1px solid var(--rule-strong); padding: 6px 12px 6px 0;
}
.an2-tabla td { border-bottom: 1px solid var(--rule-track); padding: 7px 12px 7px 0; vertical-align: top; }
.an2-warnrow td { background: var(--tint-warn); }

.an2-chart svg { width: 100%; height: auto; display: block; }
.an2-ax { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.an2-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }
.an2-leyenda i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; }

.an2-fuentes { margin-top: 8px; }
.an2-fsrc-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--rule-select); font-family: var(--mono);
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer; padding: 3px 9px;
}
.an2-fuentes .an2-fsrc-list { display: none; border-left: 2px solid var(--rule-select); margin: 8px 0 0 2px; padding-left: 12px; }
.an2-fuentes.open .an2-fsrc-list { display: block; }
.an2-fsrc { display: flex; gap: 10px; align-items: baseline; font-size: 12px; padding: 4px 0; flex-wrap: wrap; }
.an2-fsrc .mono { font-size: 10px; color: var(--ink-3); }
.an2-fsrc-n em { font-style: italic; color: var(--warn-ink, var(--ink-2)); }
.an2-fsrc.sesion .an2-fsrc-n { font-weight: 500; }
.an2-fsrc a { font-size: 11.5px; font-style: italic; }
.an2-fsrc-d { margin-left: auto; }

.an2-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.an2-acciones button {
  background: none; border: 0; border-bottom: 1px solid var(--rule-select);
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); cursor: pointer; padding: 1px 0;
}
.an2-acciones button:hover { color: var(--ink); border-bottom-color: var(--ink); }

.an2-inputbar { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--rule-strong); padding-top: 12px; margin-top: 10px; }
.an2-inputbar .f-input { flex: 1; min-width: 120px; }
.an2-adj {
  flex: none; width: 30px; height: 30px; background: none;
  border: 1px solid var(--rule-select); font-size: 16px; color: var(--ink-3); cursor: pointer;
}
.an2-adj:hover { border-color: var(--ink); color: var(--ink); }
.an2-donde { font-size: 10px; letter-spacing: .04em; color: var(--ink-3); margin-top: 6px; }

.an2-modelo { position: relative; flex: none; }
.an2-modelo-btn {
  background: none; border: 1px solid var(--rule-select); font-family: var(--sans);
  font-size: 12px; color: var(--ink-2); cursor: pointer; padding: 6px 11px; white-space: nowrap;
}
.an2-lock { margin-right: 5px; font-size: 11px; }
.an2-modelo-menu {
  display: none; position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40;
  width: 340px; background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 color-mix(in oklab, var(--ink), transparent 85%);
}
.an2-modelo-menu.open { display: block; }
.an2-modelo-op {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--rule-track); font: inherit; cursor: pointer; padding: 10px 13px;
}
.an2-modelo-op:hover { background: color-mix(in oklab, var(--accent), var(--paper) 94%); }
.an2-modelo-op.on { box-shadow: inset 3px 0 0 var(--accent); }
.an2-modelo-op.priv { background: color-mix(in oklab, var(--accent), var(--paper) 91%); }
.an2-modelo-n { display: block; font-size: 13px; color: var(--ink); }
.an2-modelo-n em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.an2-modelo-d { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.an2-modelo-op.priv .an2-modelo-d { color: var(--ink-2); font-weight: 500; }

.an2-der { border-left: 1px solid var(--rule-soft); padding-left: 18px; min-width: 0; overflow: hidden; }

/* ── Ventana baja (1280×720 de un proyector) ───────────────────────────────
   Con 720px de alto, los 350px reservados al chrome dejaban la conversación
   en una ranura de cuatro líneas. Aquí se recorta lo que rodea al hilo, no el
   hilo: cabecera más apretada y menos alto reservado. */
@media (max-height: 800px) {
  .an2 { min-height: calc(100vh - 150px); }
  .an2-head { padding-bottom: 6px; margin-bottom: 10px; }
  .an2-head h2 { font-size: 19px; }
  #an2-chat { min-height: 220px; max-height: calc(100vh - 250px); }
  .content { padding-top: 20px; padding-bottom: 34px; }
}
.an2-body:not(.con-der) .an2-der { display: none; }
.an2-der-t {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.an2-art {
  display: flex; gap: 10px; align-items: center;
  border: 1px solid var(--rule-soft); padding: 9px 11px; margin-bottom: 8px;
}
.an2-art-thumb {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent), var(--paper) 88%);
  color: var(--accent); font-size: 16px;
}
.an2-art-b { flex: 1; min-width: 0; }
.an2-art-tt { display: block; font-size: 12.5px; line-height: 1.4; }
.an2-art .mono, .an2-bib-item .mono { font-size: 10px; color: var(--ink-3); }
.an2-art .an2-btn-min { margin-top: 0; }

.an2-bib { border: 1px solid var(--rule-strong); padding: 12px 16px 8px; margin-bottom: 14px; background: var(--paper); }
.an2-bib-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 8px; }
.an2-bib-tabs button {
  background: none; border: 0; font-family: var(--sans); font-size: 12.5px;
  color: var(--ink-3); cursor: pointer; padding: 4px 0 7px;
}
.an2-bib-tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.an2-bib-tabs #an2-bib-x { margin-left: auto; }
.an2-bib-item {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--rule-track); font-size: 13px;
}

/* ── Exposición penal en la franja de acción ──────────────────────────────
   Su propia línea a ancho completo, separada de la rejilla de acciones y
   fuera del total de la cabecera. La regla del dominio es explícita: un
   indicador de tolerancia cero no se agrega dentro de un conteo compuesto. */
.action-strip .as-penal {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 2px;
  /* El fondo va aquí y no inline: al moverla fuera de la rejilla se perdió el
     style que la traía, y el texto en papel quedó sobre fondo transparente —
     la tarjeta existía y no se veía. En la clase no se puede volver a perder. */
  background: var(--crit);
  padding: 14px 18px;
}
.action-strip .as-penal .as-body { flex: 1; min-width: 0; }
.action-strip .as-penal .as-num { font-size: 34px; line-height: 1; }

/* La misma tarjeta en cero no es una alarma: papel, borde fino y tinta normal. */
.action-strip .as-penal.vacia {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  color: var(--ink);
}
.action-strip .as-penal.vacia .as-num,
.action-strip .as-penal.vacia .as-label { color: var(--ink-3); }
.action-strip .as-penal.vacia .as-foot { color: var(--ink-4); }