/* ═══════════════════════════════════════════════════════════════════════════
   assets/familia.css — Vikout · theme A «azul profundo» · familia Vikout
   Fuente de verdad: Especificacion_Vigia_UI.md v1 (28-ago-2026).

   Capa de identidad. Va DESPUÉS de styles.css: no reescribe la estructura del
   tablero, la reviste. Ningún color se escribe aquí fuera de la sección 1:
   todo componente consume tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS (spec §2) ─────────────────────────────────────────────────── */
:root {
  /* Superficie */
  --paper:        #EDF2F6;
  --surface:      #FFFFFF;
  --sunken:       #E5EAEC;
  --inverse:      #0E2A3B;

  /* Texto */
  --ink:          #0E2A3B;
  --ink-2:        #44555D;
  --ink-3:        #5B6B73;
  --ink-4:        #7E8C92;
  --ink-5:        #44555D;
  --ink-inverse:  #FFFFFF;

  /* Bordes y filetes */
  --rule-strong:  #0E2A3B;
  --rule-soft:    #E1E9EE;
  --rule-grid:    #C9D6DE;
  --rule-track:   #E5EAEC;
  --rule-select:  #AAB6BB;

  /* Señal de Vikout */
  --accent:        #1C7293;
  --accent-hover:  #155870;
  --accent-subtle: #DCEBF1;
  /* Acento de la casa Vikout (spec v1.1): vive solo sobre superficies tinta
     —ítem activo, sublínea del wordmark, kickers sobre tile feature,
     «Tolerancia cero» y filas de conducta penal— más el anillo de foco y
     serie-2 de gráficos. Nunca sobre superficie clara. */
  --accent-light:  #15B3C7;

  /* Serie cromática de gráficos — no semáforo */
  --serie-1: #1C7293;
  --serie-2: #15B3C7;
  --serie-3: #3F7D6A;
  --serie-4: #7E8C92;
  --serie-5: #5A6E9E;
  --serie-6: #2F9BAF;
  --serie-7: #8A7B5C;
  --serie-8: #44555D;

  /* Semáforo — información regulatoria, no estilo. No se armoniza. */
  --ok:   #1F9D6B;
  --warn: #E1902B;
  --crit: #E5484D;
  --ok-subtle:   #E4F5EE;
  --warn-subtle: #FBEEDA;
  --crit-subtle: #FBE3E4;
  --ok-text:   #16724D;
  --warn-text: #A9690F;
  --crit-text: #C2373B;

  /* Tintes de fila */
  --tint-crit: #FCF4F4;
  --tint-crit-border: #F3C6C8;
  --tint-warn: #FDF8EE;
  --tint-warn-border: #EFDCB4;

  /* Hover de superficie y sin-dato */
  --surface-hover: #F6F9FB;
  --nodata: #C9D6DE;
  /* Gráficos: relleno de área bajo la línea principal */
  --area-fill: rgba(28,114,147,.14);

  /* Mapa (spec §5 «Mapa»): el renderer las lee con getComputedStyle, así que el
     mapa cambia de marca con el resto de la interfaz. El semáforo lo toma de
     --ok/--warn/--crit: no se declara aquí. */
  --map-water: #E3EBF0;
  --map-water-deep: #FFFFFF;
  --map-land: #C9D6DE;
  --map-coast: #7E8C92;
  --map-grid: rgba(28,114,147,.10);
  --map-label: #5B6B73;
  --map-label-hi: #155870;
  --map-frame: rgba(28,114,147,.35);
  --map-chrome: #C9D6DE;
  --map-sbap: #1C7293;
  --map-ecmpo: #E1902B;

  /* Sidebar sobre tinta */
  --side-item:    #9FB4BF;
  --side-kicker:  #7D97A3;
  --side-quiet:   #5F7B89;
  --side-hair:    rgba(255,255,255,.11);
  --side-active:  rgba(21,179,199,.09);
  --on-ink-2:     #CDD9DE;

  /* Tipografía (spec §3) */
  --serif: 'Archivo', system-ui, sans-serif;   /* display; nombre heredado */
  --display: 'Archivo', system-ui, sans-serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Estructura (spec §4) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 9999px;
  --e1: 0 1px 2px rgba(14,42,59,.08);
  --e2: 0 4px 12px rgba(14,42,59,.10);
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --dur: 200ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* Marca del cliente: sólo señal y serie. El semáforo y el acento de casa no
   se tocan — el primero es normativo, el segundo es de familia. */
body[data-marca="yadran"] {
  --accent:        #1B3A5F;
  --accent-hover:  #10263F;
  --accent-subtle: #DDE6F0;
  --serie-1: #1B3A5F;
  --serie-5: #4A7FB5;
}

body[data-paleta="grafito"] {
  --paper: #F2F4F5;
  --accent: #44555D;
  --accent-hover: #0E2A3B;
  --accent-subtle: #E6EAEC;
  --rule-soft: #E4E8EA;
  --rule-grid: #D3DADD;
  --rule-track: #E9ECEE;
  --serie-1: #44555D; --serie-2: #7E8C92; --serie-3: #5B6B73;
  --serie-4: #AAB6BB; --serie-5: #0E2A3B; --serie-6: #C9D6DE;
}
body[data-paleta="grafito"] .map-box { background: var(--sunken); }

body[data-paleta="contraste"] {
  --paper: #FFFFFF;
  --ink: #061821;
  --ink-2: #24343C;
  --ink-3: #33454D;
  --accent: #0E2A3B;
  --accent-hover: #061821;
  --rule-strong: #061821;
  --rule-soft: #9FADB4;
  --rule-grid: #7E8C92;
  --rule-track: #D3DADD;
}

/* ── 2 · TIPOGRAFÍA (spec §3) ─────────────────────────────────────────────── */

body, html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}
/* Los controles no heredan la fuente por defecto: sin esto caen en Arial. */
button, input, select, textarea { font-family: inherit; }

/* Display: Archivo 700, tracking negativo. Archivo no tiene 300. */
h1, h2, h3,
.page-head h1,
.section-head h2,
.tile .tile-num,
.serif-num,
.donut-num,
.hbar-num,
.grp-title,
.tr-title,
.dsheet-t,
.an2-h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
  font-style: normal;
}

.page-head h1 { font-size: 30px; line-height: 1.1; letter-spacing: -.025em; }
.section-head h2 { font-size: 18px; letter-spacing: -.01em; }
.tile .tile-num, .serif-num, .donut-num {
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.tile .tile-num { font-size: 34px; line-height: 1; }
.lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Datos en mono con cifras tabulares: se comparan en columna (spec §3). */
.mono, .kicker, .f-label, .tile-kicker, .row-level, .row-when, .pill,
.side-kicker, .side-foot, .t-table th, .hbar-label, .doc-folio, .tr-k,
.nc-plazo, .as-num, .origen, .locked-kicker {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.mono { font-size: 11px; letter-spacing: .04em; color: var(--ink-4); }
.kicker {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.tile-kicker, .f-label, .t-table th, .side-kicker {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
}

/* ── 3 · SUPERFICIES Y ESTRUCTURA (spec §4) ───────────────────────────────── */

.tile, .chart-box, .panel-box, .filters, .t-table, .exp-box, .an-box,
.site-card, .nc-item, .grp, .dsheet, .fisc-panel, .an2-tabla, .an2-chart {
  background: var(--surface);
  border-radius: var(--r-md);
}
.tile, .panel-box, .filters, .site-card, .nc-item, .exp-box, .an-box {
  border: 1px solid var(--rule-grid);
}
.tile { padding: 14px 16px 18px; }
.filters { padding: 12px 14px; }

/* Tile feature: el KPI principal va en tinta (spec §5) */
.tile.feature, .tile-btn.on {
  background: var(--inverse);
  border-color: var(--inverse);
}
.tile.feature .tile-kicker, .tile-btn.on .tile-kicker { color: var(--accent-light); }
.tile.feature .tile-num, .tile.feature .tile-unit,
.tile-btn.on .tile-num, .tile-btn.on .tile-unit { color: var(--ink-inverse); }
.tile.feature .tile-foot, .tile-btn.on .tile-foot { color: var(--on-ink-2); }
.tile-foot {
  font-size: 12px; color: var(--ink-3); margin-top: 9px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}

.t-table {
  border: 1px solid var(--rule-grid);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.t-table th {
  background: var(--sunken);
  color: var(--ink-4);
  font-weight: 500;
  border-bottom: 1px solid var(--rule-grid);
}
.t-table td { color: var(--ink-2); font-size: 13px; border-bottom: 1px solid var(--rule-soft); }
.t-table td.strong { color: var(--ink); font-weight: 600; }
/* La tabla dejó de ser una rejilla al ancho de la página para volverse tarjeta:
   las celdas de los extremos necesitan respirar contra el borde. */
.t-table th:first-child, .t-table td:first-child { padding-left: 18px; }
.t-table th:last-child, .t-table td:last-child { padding-right: 18px; }
/* La casilla de selección no se pega al filete, y la de la cabecera cae en el
   mismo eje que las de cada fila. */
.t-table th:first-child input.chk, .t-table td:first-child input.chk { margin-left: 2px; }
.t-table tr:last-child td { border-bottom: 0; }
.t-table tbody tr:hover td { background: var(--surface-hover); }

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

/* Filas: tarjeta con borde y radio, 4 px de separación (spec §5) */
.rowitem {
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-1);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rowitem:hover { background: var(--surface); border-color: var(--ink-4); }
.rowitem.tint-crit { background: var(--tint-crit); border-color: var(--tint-crit-border); }
.rowitem.tint-warn { background: var(--tint-warn); border-color: var(--tint-warn-border); }
.rowitem.tint-crit:hover, .rowitem.tint-warn:hover { border-color: var(--ink-4); }
.row-action { color: var(--accent); font-weight: 500; }

/* Hovers de superficie */
a.tile:hover, .tile-btn:hover, .sd-item:hover, .cs-opt:hover, .tw-opt:hover,
a.chart-box:hover, .as-item:hover, .doc-row:hover, .pir-step:hover,
.fisc-ficha:hover, .an2-adj:hover { background: var(--surface-hover); }
.uf-item:hover { background: var(--surface-hover); border-color: var(--ink-3); }
[data-site].is-hot { background: var(--accent-subtle); }

/* Elevación en dos niveles */
.tw-panel, .tr-pop, .docview-panel, .search-drop, .cs-panel, .toast,
.an2-modelo-menu, .an-drop {
  box-shadow: var(--e2);
  border-radius: var(--r-md);
  background: var(--surface);
}
.toast { background: var(--inverse); color: var(--ink-inverse); font-size: 13px; }
.tw-chip { box-shadow: var(--e1); border-radius: var(--r-pill); }

/* ── 4 · CABECERA DE PÁGINA (spec §5) ─────────────────────────────────────── */
.page-head {
  border-bottom: 1px solid var(--rule-grid);
  padding-bottom: 14px;
}
.page-head .meta { color: var(--ink-3); font-size: 12px; }

.section-head { border-bottom: 1px solid var(--rule-grid); margin-bottom: 20px; }
.section-head h2 a { color: inherit; }
.section-head h2 a:hover { color: var(--accent); }

/* ── 5 · PILLS DE ESTADO — punto de color adelante (spec §5, §9) ──────────── */
.pill, .row-level, .nc-riesgo {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 3px 9px; line-height: 1.5;
  border: 0;
}
.pill::before, .row-level::before {
  content: ''; width: 5px; height: 5px; flex: none;
  border-radius: 50%; background: currentColor;
}
.pill.ok    { background: var(--ok-subtle);    color: var(--ok-text); }
.pill.warn  { background: var(--warn-subtle);  color: var(--warn-text); }
.pill.crit  { background: var(--crit-subtle);  color: var(--crit-text); }
.pill.info  { background: var(--accent-subtle); color: var(--accent-hover); }
.pill.muted { background: var(--sunken);       color: var(--ink-3); }
.row-level  { background: var(--sunken); color: var(--ink-3); }
.tint-crit .row-level { background: var(--crit-subtle); color: var(--crit-text); }
.tint-warn .row-level { background: var(--warn-subtle); color: var(--warn-text); }
.nc-riesgo { background: var(--crit-subtle); color: var(--crit-text); }
.nc-riesgo.suave { background: var(--warn-subtle); color: var(--warn-text); }

/* ── 6 · TARJETA ORIGEN — obligatoria en todos los KPI (spec §5) ──────────── */
.origen, .tr-mark {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent-subtle); color: var(--accent-hover);
  border: 0; border-radius: var(--r-pill);
  padding: 3px 9px; cursor: help; flex: none;
  transition: background var(--dur) var(--ease);
}
.tr-mark { cursor: pointer; }
.tr-mark:hover, .origen:hover { background: #CBE2EB; }
.tr-glyph { font-size: 8px; opacity: .75; }
/* Sobre tile oscuro */
.tile.feature .origen, .tile.feature .tr-mark,
.tile-btn.on ~ .tr-mark, .tile-holder:has(.tile-btn.on) > .tr-mark {
  background: rgba(21,179,199,.16); color: var(--accent-light);
}
/* Sin origen declarado: gris, nunca oculta */
.origen.sin-origen {
  background: var(--sunken); color: var(--ink-3);
}

/* ── 7 · FILTROS Y CONTROLES (spec §5, §6) ────────────────────────────────── */
/* El theme editorial usaba selects sin caja (sólo filete inferior): la spec
   pide caja con borde border-control y radio sm. */
.f-select, select.f-select, .cs-btn {
  border: 1px solid var(--rule-select);
  border-bottom: 1px solid var(--rule-select);
  border-radius: var(--r-sm);
  padding: 6px 24px 6px 10px;
  background-color: var(--surface);
  background-position: right 8px center;
  /* Piso cómodo para el control visible. El select nativo que acompaña al
     selector custom queda fuera: está oculto y no debe ocupar caja. */
  min-width: 90px;
}
.cs-wrap > select.f-select {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.f-select:focus { border-color: var(--accent); }
.cs-val { overflow: hidden; text-overflow: ellipsis; }
.f-select, .f-input, .cs-btn, select, input[type="text"], textarea {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-select);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Los controles se centran en la caja de filtros: con baseline, un rótulo y un
   select de altos distintos dejaban la fila descuadrada dentro del recuadro. */
.filters { align-items: center; }
.filters .f-group { align-items: center; }
/* Ningún control se monta sobre otro: la fila se mantiene en una línea, los
   selectores ceden hasta su piso legible y el texto trunca. El alcance vigente
   gobierna todas las cifras del tablero: si no se lee, el tablero miente. */
.filters { flex-wrap: nowrap; row-gap: 10px; }
.filters .f-group { flex: 0 1 auto; min-width: 0; }
.filters .f-select:not([data-cs]), .filters .cs-btn, .filters .cs-wrap,
.filters .f-line > .f-group > .cs-wrap, .filters .f-line > .cs-wrap {
  flex: 0 1 auto;
  min-width: 108px;
}
.cs-btn .cs-val, .f-line .cs-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filters .f-label { flex: none; }
/* En pantallas donde la fila ya no cabe con sus controles legibles, salta de
   línea — antes que comprimir el texto o colgar una barra de scroll. */
@media (max-width: 1280px) {
  .filters, .filters .f-line { flex-wrap: wrap; }
}
.f-select { padding-right: 26px; }
.f-select:hover, .f-input:hover, .cs-btn:hover:not(:disabled) { border-color: var(--ink-4); }
.f-input::placeholder { color: var(--ink-4); }
.scope-note { color: var(--ink-4); font-size: 12px; }

.btn, .tile-btn, button.btn {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  border: 1px solid var(--rule-select);
  border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  text-transform: none; letter-spacing: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--ink-4); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: var(--crit); border-color: var(--crit); color: var(--ink-inverse); }
.btn.small { font-size: 12px; padding: 5px 11px; border-radius: var(--r-sm); }
.chip, .cs-btn, .search-bar, .geo-chip { border-radius: var(--r-pill); }
.geo-chip {
  background: var(--accent); border-color: var(--accent);
  color: var(--ink-inverse); font-family: var(--sans);
}
.geo-chip:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Los ocho estados (spec §6) ------------------------------------------------ */
/* default y hover arriba · active */
.btn:active, .tile-btn:active, .chip:active, .cs-btn:active:not(:disabled) {
  transform: translateY(1px);
}
/* focus-visible: anillo diseñado, no heredado */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* disabled: control bloqueado */
button:disabled, input:disabled, select:disabled, textarea:disabled,
.btn[aria-disabled="true"], .cs-btn:disabled, .pager-nav button:disabled,
.btn.primary:disabled, .btn.danger:disabled {
  background: var(--sunken);
  border-color: var(--rule-track);
  color: var(--ink-4);
  cursor: not-allowed;
  opacity: 1;
}
/* readonly: es un dato, no un control bloqueado */
input[readonly], select[readonly], textarea[readonly],
.f-input[readonly], [data-readonly="true"], .btn[data-readonly="true"] {
  background: var(--sunken);
  border-color: transparent;
  color: var(--ink-2);
  cursor: default;
}
input[readonly]:hover, .f-input[readonly]:hover { border-color: transparent; }
/* error */
.is-error, [aria-invalid="true"], .f-input.error, .f-select.error,
.btn.is-error, .btn.primary.is-error {
  border-color: var(--crit);
  background: var(--crit-subtle);
  color: var(--crit-text);
}
.field-error {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: 12px; color: var(--crit-text);
}
.f-input[aria-invalid="true"], .f-select[aria-invalid="true"],
input[aria-invalid="true"], select[aria-invalid="true"] {
  border: 1px solid var(--crit);
  background: var(--crit-subtle);
  color: var(--crit-text);
}
/* loading */
.is-loading, [aria-busy="true"] { cursor: progress; position: relative; color: transparent; }
.is-loading > *, [aria-busy="true"] > * { opacity: .35; }
.skeleton, .is-loading::after, [aria-busy="true"]::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sunken) 0%, var(--surface-hover) 50%, var(--sunken) 100%);
  background-size: 200% 100%;
  animation: vg-shimmer 1.2s var(--ease) infinite;
}
.skeleton { position: relative; display: block; height: 14px; }
@keyframes vg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

input.chk { accent-color: var(--accent); }
.tw-knob { background: var(--rule-grid); }
.tw-switch.on .tw-knob { background: var(--accent); }

/* ── 8 · GRÁFICOS (spec §5) ───────────────────────────────────────────────── */
.hbar-track { background: var(--rule-track); border-radius: var(--r-pill); overflow: hidden; }
.hbar-fill { border-radius: var(--r-pill); background: var(--accent); }
/* Sin dato: hueco declarado, jamás una barra en cero */
.hbar-track.sin-dato {
  background: repeating-linear-gradient(135deg,
    var(--rule-track) 0 4px, var(--surface) 4px 8px);
}
.hbar-num { font-size: 17px; }
.hbar-label { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); letter-spacing: .06em; }
.donut-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.donut-sub { font-size: 12px; color: var(--ink-3); }

/* ── 9 · BARRA LATERAL Y LOGO (spec §5, §7) ───────────────────────────────── */
.sidebar { background: var(--inverse); color: var(--ink-inverse); }
/* Batimetría de los temas oscuros del mapa, derivada de la tinta #0E2A3B:
   cada tema es un recorte de la misma rampa, no una tabla propia. */
fjord-map[theme="dark"] {
  --map-water: #0A1F2C; --map-water-deep: #071722; --map-land: #143547;
  --map-coast: #2F5D75; --map-grid: rgba(21,179,199,.14);
  --map-label: #7E8C92; --map-label-hi: #EDF2F6;
  --map-frame: rgba(21,179,199,.35); --map-chrome: #38607A;
}
fjord-map[theme="night"] {
  --map-water: #06131B; --map-water-deep: #040D13; --map-land: #0E2A3B;
  --map-coast: #24485C; --map-grid: rgba(28,114,147,.12);
  --map-label: #5B6B73; --map-label-hi: #DCEBF1;
  --map-frame: rgba(28,114,147,.30); --map-chrome: #1C4256;
}
fjord-map[theme="terminal"] {
  --map-water: #04090C; --map-water-deep: #000000; --map-land: #0E2A3B;
  --map-coast: #2F5D75; --map-grid: rgba(21,179,199,.08);
  --map-label: #5B6B73; --map-label-hi: #DCEBF1;
  --map-frame: rgba(21,179,199,.30); --map-chrome: #1C4256;
}
/* Lockup centrado en la barra: el arco, el wordmark y el descriptor comparten
   eje vertical. */
.side-logo { padding: 0 20px 18px; text-align: center; }
.side-logo .vg-logo { display: inline-block; width: 111px; height: auto; }
.side-logo .sub {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent-light); margin-top: 8px; text-align: center;
}
.side-kicker { color: var(--ink-inverse); border-bottom: 1px solid var(--side-hair); text-align: center; }
.side-item {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--side-item);
  padding: 8px 18px;
  border-left: 2px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.side-item:hover { color: var(--ink-inverse); background: transparent; }
.side-item.active {
  color: var(--ink-inverse);
  border-left-color: var(--accent-light);
  border-left-width: 2px;
  padding-left: 18px;
  background: var(--side-active);
  font-weight: 600;
}
.side-kicker { font-size: 9.5px; }
.side-item.placeholder { color: var(--side-quiet); }
/* Etiqueta beta: el módulo se puede usar, pero su alcance aún se mueve. */
.side-beta {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: 1px;
  opacity: .75;
}
.side-item.active .side-beta { color: var(--accent-light); opacity: 1; }
.side-item.placeholder:hover { color: var(--ink-inverse); }
.side-foot {
  font-family: var(--mono); font-size: 9.5px; line-height: 1.7;
  color: var(--side-quiet); border-top: 1px solid var(--side-hair);
}
.side-foot a { color: var(--side-kicker); }
.side-foot a:hover { color: var(--ink-inverse); }
.app-foot, .app-foot-ver { font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }

/* Tiles del launcher: radio lg (spec §4) y separación real en vez de la malla
   de 1 px del theme editorial. */
.mod-grid { gap: 10px; background: transparent; border-top: 0; }
.mod-tile { border-radius: var(--r-lg); }
.mod-tile.active:hover { box-shadow: inset 0 0 0 1px var(--accent-light), var(--e2); }
.launcher .foot { color: var(--ink-3); }

/* ── 10 · MÓDULO NO CONTRATADO (spec §5) ──────────────────────────────────── */
.locked {
  background: linear-gradient(180deg, var(--surface) 0%, var(--sunken) 100%);
  border: 1px solid var(--rule-grid);
  border-radius: var(--r-md);
  padding: 44px 28px;
  text-align: center;
}
.locked-kicker {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.locked-title {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; margin: 9px 0 7px;
}
.locked-note {
  font-size: 13px; color: var(--ink-3); max-width: 48ch;
  margin: 0 auto 18px; text-wrap: pretty;
}
.lock-feats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 660px; margin: 22px auto 0; text-align: left;
}
.lf {
  background: var(--surface); border: 1px solid var(--rule-grid);
  border-radius: var(--r-sm); padding: 11px 13px;
  font-size: 12.5px; color: var(--ink-2);
}
.lf b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 13px; color: var(--ink); margin-bottom: 3px;
}
.locked-mart { margin-top: 20px; font-family: var(--mono); font-size: 9.5px; color: var(--ink-4); }

/* Estados vacíos (spec §5) */
.empty-nodata {
  border: 1px dashed var(--rule-grid); border-radius: var(--r-md);
  padding: 32px 24px; text-align: center; color: var(--ink-3);
}
.empty-nodata h3, .empty-error h3 {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--ink); margin-bottom: 6px;
}
.empty-error {
  border: 1px solid var(--crit-subtle); background: var(--crit-subtle);
  border-radius: var(--r-md); padding: 24px; color: var(--crit-text);
}

/* ── 11 · MODOS DEL PANEL DE AJUSTES ──────────────────────────────────────── */
body[data-semaforo="alerta"] .rowitem.tint-crit { background: #F7DDDE; box-shadow: inset 3px 0 0 var(--crit); }
body[data-semaforo="alerta"] .rowitem.tint-warn { background: #F7E7C6; box-shadow: inset 3px 0 0 var(--warn); }
body[data-semaforo="alerta"] .pill.crit { background: var(--crit); color: var(--ink-inverse); }
body[data-semaforo="alerta"] .pill.warn { background: var(--warn); color: var(--ink-inverse); }
body[data-semaforo="sobrio"] .pill::before,
body[data-semaforo="sobrio"] .row-level::before { background: currentColor; }

/* ── 11 bis · GRUPOS DE TARJETAS ──────────────────────────────────────────
   El theme editorial dibujaba los grupos como rejilla de filetes: `gap:1px`
   sobre un contenedor de color, y la línea era el color asomando entre celdas.
   Con tarjetas que ya traen borde y radio propios, ese fondo se ve como una
   franja sucia entre cajas. Los grupos pasan a ser tarjetas separadas de
   verdad: contenedor transparente y separación real. */
.tiles, .as-items, .tw-opts, .exp-list, .trm, .ph-view .ph-list {
  background: transparent;
  gap: 12px;
  border-top: 0;
}
.tiles { padding-top: 0; }
.as-items, .exp-list, .trm { gap: 10px; }
.tw-opts { gap: 6px; }

.tile, .as-item, .exp-item, .trm-hito, .tw-opt, .ph-view .ph-item {
  background: var(--surface);
  border: 1px solid var(--rule-grid);
  border-radius: var(--r-md);
}
.as-item, .exp-item, .trm-hito, .tw-opt { border-radius: var(--r-sm); }
.exp-item, .trm-hito { border-color: var(--rule-soft); }
/* El hover de estas tarjetas era un filtro de brillo sobre el fondo de la
   rejilla; ahora es superficie y borde, como el resto del sistema. La opción
   activa del panel queda fuera: su fondo es tinta y el rótulo va en papel. */
.as-item:hover, .exp-item:hover, .tw-opt:not(.on):hover {
  filter: none;
  background: var(--surface-hover);
  border-color: var(--ink-4);
}
.tw-opt.on:hover { background: var(--ink); border-color: var(--ink); }
.as-item.vacia { box-shadow: none; border-color: var(--rule-soft); }
.as-item.penal:hover { background-image: none; }

/* Las dos columnas de una fila grid-side arrancan a la misma altura: el
   encabezado reserva una línea de título más su línea mono, aunque uno de los
   dos títulos sea más corto que el otro. */
.grid-side > div > .section-head,
.grid-side > div > section > .section-head { min-height: 40px; align-items: baseline; }

/* La franja ya no se separa con un filete de tinta: entre tarjetas sueltas ese
   trazo se lee como el borde de una caja que no existe. */
.action-strip { border-top: 0; padding-top: 4px; }

/* ── 12 · PIEZAS PROPIAS DEL TABLERO (anexo de componentes) ───────────────── */

/* Consola de Analítica (spec §5). El chat no inventa tamaños: usa body y
   body-sm de la escala. */
.an2-q {
  background: var(--accent-subtle);
  border: 0;
  border-radius: var(--r-md);
  font-size: 14px;
  padding: 11px 14px;
}
.an2-a {
  background: var(--surface);
  border: 1px solid var(--rule-grid);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 14px;
}
.an2-a.an2-destello { background: var(--accent-subtle); border-color: var(--accent-subtle); }
.an2-chip, .an2-adj, .an2-file, .an2-btn-min { border-radius: var(--r-pill); }
.an2-chip {
  background: var(--surface); border: 1px solid var(--rule-select);
  font-size: 13px; color: var(--ink-2); padding: 8px 14px;
}
.an2-chip:hover { border-color: var(--accent); background: var(--surface-hover); }
.an2-adj { border: 1px solid var(--rule-select); color: var(--ink-3); }
/* Selector de modelo: es un select estándar, no un control propio. */
.an2-modelo-btn {
  background: var(--surface); border: 1px solid var(--rule-select);
  border-radius: var(--r-sm); font-family: var(--sans); font-size: 13px;
  color: var(--ink); padding: 6px 10px;
}
.an2-modelo-btn:hover { border-color: var(--ink-4); }
.an2-modelo-menu { border-radius: var(--r-md); box-shadow: var(--e2); background: var(--surface); }
.an2-modelo-op:hover { background: var(--surface-hover); }
.an2-tabla { font-size: 13px; }
.an2-tabla th { background: var(--sunken); color: var(--ink-4); font-family: var(--mono); }
.an2-bib-tabs button.on { box-shadow: inset 0 -2px 0 var(--accent); }
.an2-art, .an2-bib-item { border-radius: var(--r-sm); }
.an2-empty p, .an2-a p { font-size: 14px; }
.an2-fsrc, .an2-fuentes, .an2-leyenda, .an2-ax { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

/* Timeline PERT y escalera de priorización (spec §5) */
.trm-hito { color: var(--ink-2); }
.trm-hito .trm-punto { background: var(--surface); border: 1.5px solid var(--rule-grid); }
/* futuro: signal · cumplido: text-muted · en curso: signal con halo */
.trm-hito:not(.on) .trm-punto { border-color: var(--accent); }
.trm-hito.on { color: var(--ink-4); }
.trm-hito.on .trm-punto { background: var(--ink-4); border-color: var(--ink-4); }
.trm-hito.now { color: var(--ink); font-weight: 600; }
.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-hito.late { color: var(--crit-text); }
.trm-hito.late .trm-punto {
  background: var(--crit); border-color: var(--crit);
  box-shadow: 0 0 0 2.5px var(--crit-subtle);
}
.trm-hito.late .trm-est { color: var(--crit-text); font-weight: 500; }
.pir-step { border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--rule-soft); }
.pir-step.on { box-shadow: inset 0 0 0 2px var(--accent); }
.pir-step.vacia { background: var(--sunken); color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--rule-soft); }
.pir-step.critica, .pir-step.atrasada { box-shadow: inset 0 0 0 2px var(--crit); }

.as-item, .doc-row, .tr-slot > .tr-mark { border-radius: var(--r-sm); }
.as-item {
  background: var(--surface); border: 1px solid var(--rule-soft);
}
.as-item.tint-crit { background: var(--tint-crit); border-color: var(--tint-crit-border); }
.as-item.tint-warn { background: var(--tint-warn); border-color: var(--tint-warn-border); }
.as-item.vacia { background: var(--surface); border-color: var(--rule-soft); color: var(--ink-3); }
.as-num { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
/* Tolerancia cero: tarjeta sobre tinta, cifra blanca, nunca sumada al total */
.as-item.penal, .penal-row {
  background: var(--inverse); border-color: var(--inverse); color: var(--on-ink-2);
}
.as-item.penal .as-num, .penal-row .as-num { color: var(--ink-inverse); }
/* El rótulo sigue la regla del kicker del tile feature (spec §5): acento sobre
   tinta. La flecha es decoración y no tiene esa cobertura — va en on-ink. */
.as-item.penal .as-label, .penal-row .as-label { color: var(--accent-light); }
.as-item.penal:hover, .penal-row:hover { background: #143547; border-color: #143547; filter: none; }
.penal-row .kicker { color: var(--accent-light); }
.penal-row .row-title { color: var(--ink-inverse); }
.penal-row .penal-go, .as-item.penal .as-go { color: var(--on-ink-2); }
.an2-bubble, .an2-card, .an2-chart, .an2-tabla { border-radius: var(--r-md); }
.doc-link { color: var(--accent); }
.pir-step.vacia { background: var(--sunken); color: var(--ink-4); }


/* ═══════════════════════════════════════════════════════════════════════════
   13 · PASO A — LENGUAJE STINT CONTROL TOWER (sem13)
   Sólo piel: títulos más pesados, filetes en tinta translúcida, radios 12–14,
   elevación al pasar, semáforo sobrio. La estructura de sem12 no cambia.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --paper: #EEF2F3;
  --surface-2: #F7F9FA;
  --rule-soft: rgba(14,42,59,.06);
  --rule-grid: rgba(14,42,59,.10);
  --rule-track: rgba(14,42,59,.11);
  --rule-select: rgba(14,42,59,.16);
  --r-md: 12px;
  --r-lg: 14px;
  /* Semáforo sobrio del Control Tower Stint: mismo sentido, menos saturación */
  --ok:   #157F5F; --warn: #B5651D; --crit: #C0402E;
  --ok-subtle: #E2F0EA; --warn-subtle: #F6EADD; --crit-subtle: #F8E4E0;
  --ok-text: #116A4F; --warn-text: #94511A; --crit-text: #A8361F;
  --tint-crit: #FBF3F1; --tint-crit-border: #EDC8C0;
  --tint-warn: #FBF6EF; --tint-warn-border: #E9D6BE;
  --dur: 150ms; --ease: ease;
}
/* Títulos: Archivo 900 en página y tarjetas, 800 en secciones */
.page-head h1 { font-weight: 900; font-size: 34px; letter-spacing: -.025em; line-height: 1; }
.section-head h2, .grp-title, .tr-title, .dsheet-t, .locked-title { font-weight: 800; letter-spacing: -.02em; }
.tile .tile-num, .serif-num, .donut-num, .as-num { font-weight: 800; }
.mod-tile h3, .mod-tile .mod-name { font-weight: 900; letter-spacing: -.02em; }

/* Tarjetas: radio 14, filete translúcido */
.tile, .chart-box, .panel-box, .filters, .t-table, .exp-box, .an-box,
.site-card, .nc-item, .grp, .dsheet, .fisc-panel, .an2-tabla, .an2-chart, .map-box,
.locked, .empty-nodata, .empty-error, .mod-tile { border-radius: var(--r-lg); }
.t-table th, .an2-tabla th { background: var(--surface-2); }

/* Elevación al pasar en lo que se abre */
a.tile, .tile-btn, a.chart-box, .site-card, .mod-tile.active, .as-item:not(.vacia), .fisc-ficha {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
a.tile:hover, .tile-btn:hover, a.chart-box:hover, .site-card:hover, .mod-tile.active:hover,
.as-item:not(.vacia):hover, .fisc-ficha:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(4,16,22,.10);
  border-color: var(--accent);
}
.tile-btn.on:hover, .as-item.penal:hover { border-color: var(--inverse); }
@media (prefers-reduced-motion: reduce) {
  a.tile:hover, .tile-btn:hover, a.chart-box:hover, .site-card:hover, .mod-tile.active:hover,
  .as-item:not(.vacia):hover, .fisc-ficha:hover { transform: none; }
}
/* Alertas en modo «alerta» con el semáforo nuevo */
body[data-semaforo="alerta"] .rowitem.tint-crit { background: #F5DCD6; }
body[data-semaforo="alerta"] .rowitem.tint-warn { background: #F3E2CC; }


/* ═══════════════════════════════════════════════════════════════════════════
   14 · TEMA OSCURO (punto 4 · lenguaje Stint Control Tower)
   Rampa de la tinta #0E2A3B. El semáforo sube de luminancia para leerse sobre
   fondo oscuro, sin cambiar de tono.
   ═══════════════════════════════════════════════════════════════════════════ */
.tema-seg {
  display: flex; gap: 2px; padding: 2px; margin-bottom: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
}
.tema-seg button {
  flex: 1; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 8px; border: 0; border-radius: 5px;
  background: transparent; color: var(--side-kicker); cursor: pointer;
}
.tema-seg button:hover { color: var(--ink-inverse); }
body:not([data-tema="oscuro"]) .tema-seg [data-tema-set="claro"],
body[data-tema="oscuro"] .tema-seg [data-tema-set="oscuro"] {
  background: rgba(255,255,255,.16); color: #FFFFFF; font-weight: 600;
}

html[data-tema="oscuro"], body[data-tema="oscuro"] {
  color-scheme: dark;
  --paper: #071620; --surface: #0F2C3B; --surface-2: #0B2331; --sunken: #0B2331;
  --inverse: #1C4256;
  --ink: #EDF3F5; --ink-2: #A8BCC4; --ink-3: #8FA3AD; --ink-4: #7C8D97; --ink-5: #A8BCC4;
  --ink-inverse: #FFFFFF;
  --rule-strong: #EDF3F5;
  --rule-soft: rgba(255,255,255,.06); --rule-grid: rgba(255,255,255,.11);
  --rule-track: rgba(255,255,255,.13); --rule-select: rgba(255,255,255,.18);
  --accent: #3E9BBF; --accent-hover: #6BB6D3; --accent-subtle: rgba(62,155,191,.16);
  --serie-1: #3E9BBF; --serie-3: #4FA58A; --serie-4: #8FA3AD; --serie-5: #8A9CD0;
  --serie-7: #B8A47A; --serie-8: #A8BCC4;
  --ok: #3FB78C; --warn: #E0913F; --crit: #F0705A;
  --ok-subtle: rgba(63,183,140,.15); --warn-subtle: rgba(224,145,63,.16); --crit-subtle: rgba(240,112,90,.16);
  --ok-text: #6FD1AC; --warn-text: #F0B072; --crit-text: #FF9785;
  --tint-crit: rgba(240,112,90,.08); --tint-crit-border: rgba(240,112,90,.30);
  --tint-warn: rgba(224,145,63,.08); --tint-warn-border: rgba(224,145,63,.28);
  --surface-hover: #133447;
  --nodata: #2F5D75;
  --area-fill: rgba(62,155,191,.18);
  --on-ink-2: #CDD9DE;
  --map-water: #0A1F2C; --map-water-deep: #071722; --map-land: #143547;
  --map-coast: #2F5D75; --map-grid: rgba(21,179,199,.14);
  --map-label: #8FA3AD; --map-label-hi: #EDF3F5;
  --map-frame: rgba(21,179,199,.35); --map-chrome: #38607A;
  --map-sbap: #3E9BBF;
  --e1: 0 1px 2px rgba(0,0,0,.30); --e2: 0 6px 20px rgba(0,0,0,.40);
}
body[data-tema="oscuro"] .sidebar { background: #041016; }
body[data-tema="oscuro"] .tile.feature, body[data-tema="oscuro"] .tile-btn.on { background: var(--inverse); border-color: #2A5670; }
body[data-tema="oscuro"] .toast { background: #EDF3F5; color: #0E2A3B; }
body[data-tema="oscuro"] .origen:hover, body[data-tema="oscuro"] .tr-mark:hover { background: rgba(62,155,191,.28); }
body[data-tema="oscuro"] .as-item.penal, body[data-tema="oscuro"] .penal-row { background: #041016; border-color: #1C4256; }
body[data-tema="oscuro"] .as-item.penal:hover, body[data-tema="oscuro"] .penal-row:hover { background: #0A1F2C; }
body[data-tema="oscuro"] .tw-opt.on, body[data-tema="oscuro"] .tw-opt.on:hover { background: #EDF3F5; border-color: #EDF3F5; color: #0E2A3B; }
body[data-tema="oscuro"] .tw-opt.on .tw-opt-t, body[data-tema="oscuro"] .tw-opt.on .tw-opt-s { color: #0E2A3B; }
body[data-tema="oscuro"] a.tile:hover, body[data-tema="oscuro"] .tile-btn:hover,
body[data-tema="oscuro"] a.chart-box:hover, body[data-tema="oscuro"] .site-card:hover,
body[data-tema="oscuro"] .mod-tile.active:hover, body[data-tema="oscuro"] .as-item:not(.vacia):hover {
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
body[data-tema="oscuro"][data-semaforo="alerta"] .rowitem.tint-crit { background: rgba(240,112,90,.18); }
body[data-tema="oscuro"][data-semaforo="alerta"] .rowitem.tint-warn { background: rgba(224,145,63,.18); }
body[data-tema="oscuro"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
body[data-tema="oscuro"] .as-item.penal .as-num, body[data-tema="oscuro"] .penal-row .as-num { color: #FFFFFF; }