/* Componentes de INDEC Engine. Cada uno tiene su ficha con todos los estados en design/components/.
   Reglas: colores, radios y sombras solo de tokens.css; foco visible siempre; hover sin desplazamiento;
   solo se animan transform y opacity; 44 px con puntero grueso; alto contraste (forced-colors) cubierto. */

/* ---------- Íconos (set oficial de Sudlar, trazo 2 px, acento austral) ---------- */
.ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.ico--sm { width: 16px; height: 16px; }
.ico .ink { stroke: currentColor; }
.ico .acc { stroke: currentColor; }
.ico .acc-fill { stroke: currentColor; fill: currentColor; }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--color-surface-container); --btn-fg: var(--color-on-surface); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-6); border: 1px solid var(--btn-bd); border-radius: var(--radius-full);
  background: var(--btn-bg); color: var(--btn-fg); font: 500 var(--fs-sm)/1.2 var(--font-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}
.btn:hover { --btn-bg: var(--color-container-hover); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.btn--primary { --btn-bg: var(--color-action); --btn-fg: var(--color-on-action); --btn-bd: var(--color-action); }
.btn--primary:hover, .btn--primary:active { --btn-bg: var(--color-action-hover); --btn-bd: var(--color-action-hover); }
.btn--ghost { --btn-bd: transparent; --btn-bg: transparent; }
.btn--ghost:hover { --btn-bg: var(--color-surface-container); --btn-bd: transparent; }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--fs-xs); }
/* Deshabilitado sin opacidad: el texto conserva un contraste legible (gris tenue sobre la superficie) */
.btn[disabled], .btn[aria-disabled="true"] { --btn-bg: var(--color-surface-container); --btn-fg: var(--color-on-surface-muted); --btn-bd: transparent; cursor: not-allowed; }
.btn[disabled]:active, .btn[aria-disabled="true"]:active { transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .ico { animation: spin 900ms linear infinite; }
.btn[aria-pressed="true"] { --btn-bg: var(--color-action); --btn-fg: var(--color-on-action); --btn-bd: var(--color-action); }
.btn .done { display: none; }
.btn.is-done .done { display: inline-flex; }
.btn.is-done .ico:not(.done) { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Enlace con aspecto de acción terciaria */
.link-btn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); padding: 0 var(--space-1);
  background: none; border: 0; color: var(--color-primary); font: 500 var(--fs-sm)/1.3 var(--font-body); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; border-radius: var(--radius-sm); }
.link-btn:hover { text-decoration-thickness: 2px; }
.link-btn:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }

kbd, .kbd { font: 500 var(--fs-xs)/1 var(--font-mono); border: 1px solid var(--color-outline); border-bottom-width: 2px;
  border-radius: var(--radius-sm); padding: 2px 6px; color: var(--color-on-surface-variant); background: var(--color-surface); }

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field > label, .field .label { font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--color-on-surface); }
.field .help { font-size: var(--fs-xs); color: var(--color-on-surface-muted); }
.input {
  width: 100%; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-outline); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-on-surface); font: 400 var(--fs-sm)/1.3 var(--font-body);
}
.input::placeholder { color: var(--color-on-surface-muted); }
.input:hover { border-color: var(--color-on-surface-muted); }
.input:focus-visible, .input:focus { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: 0; border-color: var(--color-focus-ring); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input[disabled] { background: var(--color-surface-container); color: var(--color-on-surface-muted); border-color: var(--color-outline-variant); cursor: not-allowed; }
.input--search { padding-left: 44px; border-radius: var(--radius-full); }
.search-box { position: relative; min-width: 0; }
.search-box > .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-on-surface-variant); }

/* Selector propio (combobox de solo selección, patrón APG): nunca el <select> nativo */
.select { position: relative; min-width: 0; }
.select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 44px;
  padding: 0 var(--space-4); border: 1px solid var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface);
  color: var(--color-on-surface); font: 400 var(--fs-sm)/1.3 var(--font-body); cursor: pointer; text-align: left;
}
.select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger:hover { border-color: var(--color-on-surface-muted); }
.select-trigger:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.select-trigger[aria-expanded="true"] { border-color: var(--color-focus-ring); }
.select-trigger[aria-expanded="true"] .ico { transform: rotate(180deg); }
.select-trigger .ico { transition: transform var(--duration-fast) var(--ease-standard); color: var(--color-on-surface-variant); }
.select.is-active .select-trigger { border-color: var(--color-primary); background: var(--color-primary-container); color: var(--color-on-primary-container); }
.select-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: var(--space-1); list-style: none; background: var(--color-surface); border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md); box-shadow: var(--elevation-3); scrollbar-width: thin; scrollbar-color: var(--color-outline) transparent;
  opacity: 0; transform: translateY(-4px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.select-list.is-open { opacity: 1; transform: none; }
.select-list[hidden] { display: none; }
.select-list [role="option"] { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); color: var(--color-on-surface); }
.select-list [role="option"] .chk { width: 16px; visibility: hidden; color: var(--color-primary); }
.select-list [role="option"][aria-selected="true"] { font-weight: 600; }
.select-list [role="option"][aria-selected="true"] .chk { visibility: visible; }
.select-list [role="option"]:hover { background: var(--color-surface-container); }
.select-list [role="option"].is-active { background: var(--color-surface-container); outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: -2px; }

/* Control segmentado (2 a 5 opciones; grupo de radios) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; border: 0; border-radius: var(--radius-full); padding: 4px; background: var(--color-surface-container); max-width: 100%; }
.seg button { min-height: 36px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--color-on-surface-variant);
  font: 500 var(--fs-sm)/1.2 var(--font-body); border-radius: var(--radius-full); cursor: pointer; transition: background-color var(--duration-base) var(--ease-standard); }
.seg button:hover { background: var(--color-container-hover); color: var(--color-on-surface); }
.seg button[aria-checked="true"] { background: var(--color-action); color: var(--color-on-action); font-weight: 500; }
.seg button:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: 1px; }

/* Barra de filtros: búsqueda primero y más ancha, luego hasta tres filtros */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: var(--space-6) 0 var(--space-4); }
.filters > .field { flex: 0 1 auto; min-width: 0; }
.filters > .field:has(.search-box) { flex: 1 1 280px; max-width: 560px; }
.filters > .field:has(.select) { flex: 0 1 240px; }
.filters .count { font-size: var(--fs-sm); color: var(--color-on-surface-variant); margin-left: auto; align-self: center; }

/* ---------- Chips de estado (únicas píldoras) y etiquetas ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 10px; border: 0;
  border-radius: var(--radius-full); font: 500 var(--fs-xs)/1.4 var(--font-body); color: var(--color-on-surface); background: var(--color-surface-container); white-space: nowrap; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-on-surface-muted); flex: none; }
.chip--good .dot { background: var(--status-good); }
.chip--warn .dot { background: var(--status-warn); }
.chip--serious .dot { background: var(--status-serious); }
.chip--critical .dot { background: var(--status-critical); }
.chip--prov { background: var(--color-warning-container); }
.chip--prov .ico { color: var(--color-warning); }
.chip--info { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 0; border-radius: var(--radius-full);
  font: 500 var(--fs-xs)/1.5 var(--font-body); color: var(--color-on-surface-variant); background: var(--color-surface-container); white-space: nowrap; }

/* ---------- Avisos ---------- */
.banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); border: 0;
  border-radius: var(--radius-lg); background: var(--color-surface-container); color: var(--color-on-surface-variant); font-size: var(--fs-sm); }
.banner > .ico { margin-top: 1px; color: var(--color-on-surface); }
.banner b, .banner strong { color: var(--color-on-surface); }
.banner p { margin: 0; }
.banner p + p { margin-top: var(--space-2); }
.banner--warn { background: var(--color-warning-container); }
.banner--error { border: 1px solid var(--color-error); }
.banner--error > .ico { color: var(--color-error); }

/* Aviso de comparabilidad en un gráfico: una pastilla que despliega el detalle */
.caution { border: 0; background: none; margin: var(--space-3) 0 0; font-size: var(--fs-sm); }
.caution > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); cursor: pointer; list-style: none; font-weight: 500; font-size: var(--fs-xs);
  color: var(--color-on-surface); border-radius: var(--radius-full); background: var(--color-warning-container); }
.caution > summary::-webkit-details-marker { display: none; }
.caution > summary .ico:first-child { color: var(--color-warning); }
.caution > summary .chev { transition: transform var(--duration-fast) var(--ease-standard); }
.caution[open] > summary .chev { transform: rotate(180deg); }
.caution > summary:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.caution ul { margin: var(--space-2) 0 0; padding: var(--space-4) var(--space-6); list-style: none; display: grid; gap: var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-container); }
.caution li { color: var(--color-on-surface); }
.caution li p { margin: 2px 0 0; color: var(--color-on-surface-variant); }
.caution .meta a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.caution .meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-on-surface-variant); }

/* ---------- Tarjetas ---------- */
.card { background: var(--color-surface-container); border: 0; border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: none; min-width: 0; }
.card > h3 { font-size: var(--fs-1); }
a.card, .card--link { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-on-surface); text-decoration: none; }
a.card { transition: background-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
a.card:hover { background: var(--color-container-hover); }
a.card:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.area-card .q { font: 500 var(--fs-0)/1.35 var(--font-display); color: var(--color-on-surface-variant); }
.area-card .stat { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-4); }
.area-card .stat b { font: var(--fw-display) var(--fs-3)/1.05 var(--font-display); letter-spacing: var(--ls-display); color: var(--color-on-surface); }
.area-card .stat span { font-size: var(--fs-xs); color: var(--color-on-surface-muted); }
.area-card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-on-surface-variant); }
.area-card .foot .go { color: var(--color-primary); font-weight: 600; font-size: var(--fs-sm); }
.area-card--soon { background: transparent; border: 1px solid var(--color-outline-variant); }

/* ---------- KPI ---------- */
.kpi { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6); background: var(--color-surface-container); border: 0; border-radius: var(--radius-lg); min-width: 0; }
.kpi .l { font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--color-on-surface-variant); }
.kpi .v { white-space: nowrap; font: 300 clamp(1.75rem, 17cqi, 2.75rem)/1.02 var(--font-display); letter-spacing: var(--ls-display); color: var(--color-on-surface); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .d { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--color-on-surface-variant); }
.kpi .d .arrow { font-size: 10px; color: var(--color-on-surface); }
.kpi .a { font-size: var(--fs-xs); color: var(--color-on-surface-muted); }
.kpi .chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.kpi .hint { font-size: var(--fs-xs); color: var(--color-on-surface-muted); line-height: 1.35; }
.kpi svg.spark { width: 100%; height: 28px; margin-top: auto; overflow: visible; }
.kpi--empty .v { color: var(--color-on-surface-muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); margin: var(--space-6) 0 var(--space-2); }

/* ---------- Tablas ---------- */
.tbl-wrap { overflow: auto; max-height: 420px; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-md); background: var(--color-surface);
  scrollbar-width: thin; scrollbar-color: var(--color-outline) transparent; }
.tbl-wrap--full { max-height: none; }
/* Pista de que la tabla sigue fuera de pantalla: sombra en el borde con más contenido */
.tbl-wrap { background:
    linear-gradient(to right, var(--color-surface) 30%, transparent) left center / 36px 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 30%, transparent) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 12px 100% no-repeat scroll,
    var(--color-surface); }
/* La primera columna queda fija al desplazar: el rótulo de la fila no se pierde */
.tbl:not(.tbl--text) tbody th[scope="row"], .tbl:not(.tbl--text) thead th:first-child { position: sticky; left: 0; background: var(--color-surface); }
.tbl:not(.tbl--text) thead th:first-child { z-index: 2; background: var(--color-surface-container); }
.tbl:not(.tbl--text) tbody tr:hover th[scope="row"] { background: var(--color-surface-container); }
.tbl-wrap:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.tbl { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tbl caption { text-align: left; padding: var(--space-2) var(--space-3); color: var(--color-on-surface-variant); font-size: var(--fs-xs); }
.tbl th, .tbl td { padding: 8px var(--space-3); text-align: right; border-bottom: 1px solid var(--color-outline-variant); white-space: nowrap; vertical-align: top; }
.tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-container); font-weight: 600; color: var(--color-on-surface); }
.tbl th[scope="row"], .tbl thead th:first-child, .tbl .l { text-align: left; }
.tbl th[scope="row"] { font-weight: 500; }
.tbl tbody tr:hover { background: var(--color-surface-container); }
.tbl .wrap { white-space: normal; min-width: 14ch; }
.tbl .num { text-align: right; }
.tbl code { white-space: nowrap; }
.tbl--text th, .tbl--text td { text-align: left; white-space: normal; overflow-wrap: anywhere; }

/* ---------- Estados vacío, carga y error ---------- */
.state { max-width: 464px; padding: var(--space-6) 0; color: var(--color-on-surface-variant); }
.state h2, .state h3, .state .t { font: 600 var(--fs-1)/1.3 var(--font-display); color: var(--color-on-surface); margin: 0 0 var(--space-2); }
.state p { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.state--box { max-width: none; padding: var(--space-6); border: 1px dashed var(--color-outline); border-radius: var(--radius-md); background: var(--color-surface); }
.state--error { border-left: 4px solid var(--color-error); }
.skel { display: block; border-radius: var(--radius-sm); background: var(--color-surface-container); animation: pulse 1.4s var(--ease-standard) infinite; }
.skel--line { height: 14px; margin: 10px 0; }
.skel--block { height: 180px; }
.loading { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) 0; opacity: 0; animation: appear 1ms linear 600ms forwards; }
.loading .msg { font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
@keyframes pulse { 50% { opacity: .55; } }
@keyframes appear { to { opacity: 1; } }

/* ---------- Pestañas (patrón APG de pestañas) ---------- */
.tablist { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tablist [role="tab"] { min-height: 44px; padding: 0 var(--space-6); border: 0; background: none; cursor: pointer;
  color: var(--color-on-surface-variant); font: 500 var(--fs-sm)/1.2 var(--font-body); border-radius: var(--radius-full); transition: background-color var(--duration-base) var(--ease-standard); }
.tablist [role="tab"]:hover { color: var(--color-on-surface); background: var(--color-surface-container); }
.tablist [role="tab"][aria-selected="true"] { color: var(--color-on-action); background: var(--color-action); font-weight: 500; }
.tablist [role="tab"]:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: -2px; }
[role="tabpanel"]:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }

/* ---------- Código con copia ---------- */
.code { position: relative; margin: var(--space-3) 0 0; border: 0; border-radius: var(--radius-md); background: var(--color-surface-container); }
.code pre { margin: 0; padding: var(--space-4); padding-right: 104px; overflow-x: auto; font: 400 var(--fs-sm)/1.55 var(--font-mono); color: var(--color-on-surface);
  scrollbar-width: thin; scrollbar-color: var(--color-outline) transparent; }
.code pre:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: -2px; }
.code .btn { position: absolute; top: var(--space-2); right: var(--space-2); }
.code--wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .code { display: flex; flex-direction: column-reverse; }
  .code pre { padding-right: var(--space-4); }
  .code .btn { position: static; align-self: flex-end; margin: var(--space-2) var(--space-2) 0 0; }
}
code { font: 400 .875em var(--font-mono); background: var(--color-surface-container); padding: 1px 5px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
pre code { background: none; padding: 0; overflow-wrap: normal; }

/* ---------- Menú de acciones (botón de menú, patrón APG) ---------- */
.menu-wrap { position: relative; display: inline-block; }
.menu { position: absolute; z-index: 45; right: 0; top: calc(100% + 4px); min-width: 240px; margin: 0; padding: var(--space-1); list-style: none;
  background: var(--color-surface); border: 0; border-radius: var(--radius-md); box-shadow: var(--elevation-3); }
.menu[hidden] { display: none; }
.menu [role="menuitem"] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer; color: var(--color-on-surface); font: 500 var(--fs-sm)/1.3 var(--font-body); }
.menu [role="menuitem"] small { font-weight: 400; color: var(--color-on-surface-muted); font-size: var(--fs-xs); }
.menu [role="menuitem"]:hover { background: var(--color-surface-container); }
.menu [role="menuitem"]:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: -2px; background: var(--color-surface-container); }

/* ---------- Marco de figura (gráfico) ---------- */
.fig { margin: 0; grid-column: span 6; display: flex; flex-direction: column; min-width: 0; padding: var(--space-8) var(--space-8) var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-lg); box-shadow: none; scroll-margin-top: 96px; }
.fig.half { grid-column: span 3; } .fig.third { grid-column: span 2; }
.fig h3 { font: 400 var(--fs-1)/1.25 var(--font-display); letter-spacing: var(--ls-title); max-width: 60ch; }
.fig .sub { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
.fig .plot { position: relative; margin-top: var(--space-4); min-height: 120px; overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-sm);
  scrollbar-width: thin; scrollbar-color: var(--color-outline) transparent; }
.fig .plot:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.fig .plot-help { font-size: var(--fs-xs); color: var(--color-on-surface-muted); margin: var(--space-1) 0 0; }
.fig .notes { margin: var(--space-3) 0 0; padding-left: 18px; font-size: var(--fs-xs); color: var(--color-on-surface-variant); }
.why { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
.why > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); cursor: pointer; list-style: none; font-weight: 500; font-size: var(--fs-xs);
  color: var(--color-on-surface); border-radius: var(--radius-full); background: var(--color-surface-container); }
.why > summary::-webkit-details-marker { display: none; }
.why > summary .chev { transition: transform var(--duration-fast) var(--ease-standard); }
.why[open] > summary .chev { transform: rotate(180deg); }
.why > summary:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.why > p, .why > ul { margin: var(--space-3) 0 0; max-width: 72ch; }
.why > ul { padding-left: 18px; }
.fig .fig-foot { margin-top: auto; padding-top: var(--space-3); }
.fig .src { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-outline-variant); font-size: var(--fs-xs); color: var(--color-on-surface-muted); overflow-wrap: anywhere; }
.fig .fig-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.fig .tview { margin-top: var(--space-3); }
.fig .tview[hidden] { display: none; }
body.has-zoom { overflow: hidden; }
.fig.zoom { position: fixed; inset: 0; z-index: 80; border-radius: var(--radius-none); overflow: auto; padding: clamp(16px, 3vw, 48px); box-shadow: var(--elevation-4); }
.fig.zoom > * { flex-shrink: 0; }  /* sin esto un gráfico alto se encoge a unos pocos píxeles y recorta filas */
.fig.zoom .plot { overflow-y: visible; min-height: 0; }
.fig.zoom h3 { font-size: var(--fs-3); max-width: none; }
.fig.zoom .sub { font-size: var(--fs-1); }
.fig.zoom .legend, .fig.zoom .src, .fig.zoom .notes { font-size: var(--fs-0); }
.grid-charts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 900px) { .fig.half, .fig.third { grid-column: span 6; } }
@media (max-width: 520px) { .fig { padding: var(--space-4) var(--space-4) var(--space-3); } }

/* ---------- Gráficos (SVG del vocabulario cerrado) ---------- */
.cv { display: block; overflow: visible; }
/* Falso positivo del auditor (LAYOUT-11): Chrome vuelve «block» al texto SVG y lo mide como una caja HTML con desborde. En SVG el texto no se
   recorta (el <svg> es overflow: visible) y text-overflow no se aplica a él: esta declaración no cambia lo que se ve y solo le dice al auditor que no es un recorte. */
.cv text, .cv tspan { text-overflow: ellipsis; }
.cv text { font: 400 12px var(--font-body); fill: var(--color-on-surface-variant); }
.cv .grid line { stroke: var(--grid); stroke-width: 1; }
.cv .baseline, .cv .zero { stroke: var(--color-on-surface-muted); stroke-width: 1; }
.cv .ref { stroke: var(--color-on-surface-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.cv .ref-label { fill: var(--color-on-surface-muted); font-size: 11px; paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; stroke-linejoin: round; }
.cv .band { fill: var(--color-surface-container); }
.cv .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cv .ln.total { stroke: var(--color-on-surface); stroke-width: 1.5; }
.cv .tot-dot { fill: var(--color-surface); stroke: var(--color-on-surface); stroke-width: 1.5px; }
.cv .end-dot { stroke: var(--color-surface); stroke-width: 2px; }
.cv .hov-dot { stroke: var(--color-surface); stroke-width: 2px; pointer-events: none; }
.cv .cross { stroke: var(--color-on-surface-muted); stroke-width: 1; pointer-events: none; }
.cv .direct { fill: var(--color-on-surface); font-weight: 500; font-size: 12px; }
.cv .lbl { fill: var(--color-on-surface); font-size: 12px; }
.cv .val { fill: var(--color-on-surface-variant); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cv .ax-title { fill: var(--color-on-surface-muted); font-size: 11px; }
.cv .quad { fill: var(--color-on-surface-muted); font-size: 11px; font-style: italic; }
.cv .stem { stroke: var(--color-outline); stroke-width: 2; }
.cv .hit { fill: transparent; cursor: crosshair; }
.cv .dv { font-size: 12px; }
.cv .dv-num { fill: var(--color-on-surface); font-weight: 600; }
.cv .dv-rel { font-size: 11px; font-weight: 600; }
.cv .rel-warn, .rel-key .rel-warn { fill: var(--color-warning); color: var(--color-warning); }
.cv .rel-bad, .rel-key .rel-bad { fill: var(--color-error); color: var(--color-error); }
.rel-key { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-on-surface-variant); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.rel-key span { font-weight: 500; }
.cv .cell-val { font-size: 12px; font-weight: 500; pointer-events: none; }
.cv .area { opacity: .16; }
.cv .lbl.pyr { fill: var(--color-on-surface); font-size: 10.5px; paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; }
.cv .kbd-mark { fill: none; stroke: var(--color-focus-ring); stroke-width: 2; pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: var(--space-3) 0 0; list-style: none; font-size: var(--fs-sm); color: var(--color-on-surface-variant); }
.legend li { display: flex; align-items: center; gap: var(--space-2); }
.sw { display: inline-block; width: 14px; height: 3px; border-radius: var(--radius-sm); flex: none; }
.sw--box { height: 10px; width: 10px; border-radius: var(--radius-none); }
.sw--dash { height: 0; border-top: 2px dashed currentColor; background: none; }
.scale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--color-on-surface-variant); }
.scale i { height: 8px; width: 160px; max-width: 40vw; border-radius: var(--radius-sm); display: block; }
.scale .hint { color: var(--color-on-surface-muted); }
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--space-3); }
.mini { margin: 0; border: 1px solid var(--color-outline-variant); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3) 6px; }
.mini svg { width: 100%; height: 64px; display: block; overflow: visible; }
.mini figcaption { display: flex; justify-content: space-between; font-size: var(--fs-sm); gap: var(--space-2); }
.mini figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini figcaption b { font-weight: 600; }
.chart-error { padding: var(--space-4); font-size: var(--fs-sm); color: var(--color-on-surface-variant); }

/* Tooltip (uno solo) */
.tt { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
  background: var(--color-surface); color: var(--color-on-surface); border: 1px solid var(--color-outline-variant); box-shadow: var(--elevation-3);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12.5px; min-width: 150px; max-width: min(320px, calc(100vw - 16px)); }
.tt .h { font-weight: 600; margin-bottom: 5px; }
.tt .r { display: flex; align-items: center; gap: var(--space-2); margin-top: 3px; }
.tt .r span { flex: 1; color: var(--color-on-surface-variant); }
.tt .r b { font-variant-numeric: tabular-nums; }
.tt .r.tot { border-top: 1px solid var(--color-outline-variant); padding-top: 4px; margin-top: 6px; }
.tt.sheet { left: 8px; right: 8px; top: auto; bottom: 8px; max-width: none; transform: none; }

/* ---------- Paleta de comandos ---------- */
.palette { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 10vh var(--space-4) var(--space-4); }
.palette[hidden] { display: none; }
.palette .scrim { position: absolute; inset: 0; background: var(--color-scrim); opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.palette .box { position: relative; width: min(680px, 100%); max-height: min(70vh, 640px); display: flex; flex-direction: column; background: var(--color-surface);
  border: 0; border-radius: var(--radius-lg); box-shadow: var(--elevation-4); overflow: hidden;
  opacity: 0; transform: scale(.98); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.palette.is-open .scrim, .palette.is-open .box { opacity: 1; transform: none; }
.palette .head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-outline-variant); }
.palette .head .search-box { flex: 1; }
.palette .head .input { min-height: 44px; font-size: var(--fs-0); border-color: transparent; }
.palette .head .input:focus, .palette .head .input:focus-visible { border-color: var(--color-focus-ring); }
.palette .results { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); scrollbar-width: thin; scrollbar-color: var(--color-outline) transparent; }
.palette .group-label { padding: var(--space-3) var(--space-3) var(--space-1); font: 600 var(--fs-xs)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-on-surface-muted); }
.palette [role="option"] { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-3); border-left: 3px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.palette [role="option"] .tx { display: flex; flex-direction: column; min-width: 0; }
.palette [role="option"] .tx b { font-weight: 500; color: var(--color-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette [role="option"] .tx span { font-size: var(--fs-xs); color: var(--color-on-surface-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette [role="option"] mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.palette [role="option"]:hover { background: var(--color-surface-container); }
.palette [role="option"][aria-selected="true"] { background: var(--color-primary-container); border-left-color: var(--color-primary); }
.palette [role="option"][aria-selected="true"] .tx b { color: var(--color-on-primary-container); }
.palette .empty { padding: var(--space-6) var(--space-4); color: var(--color-on-surface-variant); font-size: var(--fs-sm); }
.palette .foot { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-outline-variant); font-size: var(--fs-xs); color: var(--color-on-surface-muted); }
.palette .foot span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---------- Detalle desplegable genérico ---------- */
.disclosure > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); cursor: pointer; list-style: none;
  border: 1px solid var(--color-outline); border-radius: var(--radius-sm); background: var(--color-surface); font: 500 var(--fs-sm)/1.2 var(--font-body); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .chev { margin-left: auto; transition: transform var(--duration-fast) var(--ease-standard); }
.disclosure[open] > summary .chev { transform: rotate(180deg); }
.disclosure > summary:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }

/* ---------- Objetivos táctiles con puntero grueso ---------- */
@media (pointer: coarse) {
  .btn, .btn--sm, .select-trigger, .input, .seg button, .menu [role="menuitem"], .select-list [role="option"], .link-btn,
  .fig .why > summary, .caution > summary, .tablist [role="tab"], .caution .meta a { min-height: var(--target-recommended); }
}

/* ---------- Alto contraste (Windows forced-colors) ---------- */
@media (forced-colors: active) {
  .btn, .select-trigger, .input, .seg, .chip, .tag, .card, .kpi, .fig, .banner, .caution, .menu, .select-list, .palette .box, .tt, .code { border-color: CanvasText; }
  .btn--primary { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .btn[aria-pressed="true"], .seg button[aria-checked="true"], .select-list [role="option"][aria-selected="true"], .palette [role="option"][aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .palette [role="option"][aria-selected="true"] .tx b, .palette [role="option"][aria-selected="true"] .tx span { color: HighlightText; }
  .chip .dot { forced-color-adjust: none; border: 1px solid CanvasText; }
  .ico .acc, .ico .acc-fill { stroke: CanvasText; fill: CanvasText; }
  .ico .acc { fill: none; }
  .plot svg.cv, .mini svg, .kpi svg.spark, .sw, .scale i { forced-color-adjust: none; }
  .cv text, .cv .lbl, .cv .direct, .cv .val { fill: CanvasText; }
  .cv .grid line, .cv .baseline, .cv .zero, .cv .ref, .cv .cross { stroke: GrayText; }
  .skel { background: GrayText; }
  :focus-visible { outline-color: Highlight !important; }
}

/* ---------- Movimiento reducido: sin desplazamientos ni escalas; los giros pasan a un pulso ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .select-trigger .ico, .caution > summary .chev, .disclosure > summary .chev { transition: none; }
  .btn:active { transform: none; }
  .select-list, .select-list.is-open { transform: none; transition: opacity var(--duration-fast) linear; }
  .palette .box, .palette.is-open .box { transform: none; }
  .btn[aria-busy="true"] .ico { animation: pulse 1.4s linear infinite; }
  .skel { animation: none; }
}

/* En pantallas angostas las tablas de texto y la foto del mes se apilan: una tarjeta por fila, con el rótulo de cada dato */
@media (max-width: 640px) {
  .tbl--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl--cards, .tbl--cards tbody, .tbl--cards tr, .tbl--cards th, .tbl--cards td { display: block; width: 100%; }
  .tbl--cards tr { padding: var(--space-3); border-bottom: 1px solid var(--color-outline-variant); }
  .tbl--cards tbody tr:hover { background: none; }
  .tbl--cards th[scope="row"] { padding: 0 0 var(--space-2); border: 0; position: static; white-space: normal; font-weight: 600; text-align: left; }
  .tbl--cards td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  .tbl--cards td::before { content: attr(data-label); flex: none; max-width: 50%; text-align: left; color: var(--color-on-surface-variant); font-weight: 500; }
  .tbl--cards td.l { text-align: right; }
  .tbl-wrap { max-height: none; }
  .tbl:not(.tbl--text) tbody th[scope="row"], .tbl:not(.tbl--text) thead th:first-child { max-width: 9.5rem; white-space: normal; }
}

/* Huellas SHA-256: abreviadas, completas al desplegar, con botón de copiar */
.hash-cell { white-space: nowrap; }
.hash-d { display: inline-block; vertical-align: top; }
.hash-d > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 24px; }
.hash-d > summary::-webkit-details-marker { display: none; }
.hash-d[open] { display: block; }
.hash-full { display: inline-block; overflow-wrap: anywhere; word-break: break-all; white-space: normal; font-size: var(--fs-xs); max-width: 100%; }

/* Un <details> cerrado no deja nada alcanzable con Tab ni visible para quien lee la página (ni en navegadores que solo lo ocultan con content-visibility) */
details:not([open]) > :not(summary) { display: none; }

/* Línea de lectura bajo el título del gráfico («Sin cambio significativo», «el último dato es preliminar») */
.fig .reading { margin: var(--space-2) 0 0; font-size: var(--fs-sm); font-weight: 500; color: var(--color-on-surface); }
.more-reads { margin-top: var(--space-3); }
.more-reads > .takeaways { margin-top: var(--space-3); }
/* Sección plegada: «Ver N gráficos» es el encabezado de lo que queda adentro */
.fold-charts { margin-top: var(--space-6); }
.fold-charts > summary { min-height: 44px; padding: 0 var(--space-6); font-size: var(--fs-sm); }
.fold-charts[open] > summary { margin-bottom: var(--space-4); }
.fold-charts > .grid-charts { margin-top: 0; }

/* Gráficos de 5 o más líneas: cada serie suma un trazo propio (continuo, rayas, puntos…) además del color; la leyenda lo repite */
.cv.many .ln[data-si="1"] { stroke-dasharray: 7 4 !important; }
.cv.many .ln[data-si="2"] { stroke-dasharray: 1.5 3 !important; stroke-linecap: round; }
.cv.many .ln[data-si="3"] { stroke-dasharray: 9 3 2 3 !important; }
.cv.many .ln[data-si="4"] { stroke-dasharray: 3 3 1 3 !important; }
.legend.many li[data-si] .sw:not(.sw--box) { height: 0; background: none !important; border-top: 3px solid currentColor; width: 22px; }
.legend.many li[data-si="1"] .sw:not(.sw--box) { border-top-style: dashed; }
.legend.many li[data-si="2"] .sw:not(.sw--box) { border-top-style: dotted; }
.legend.many li[data-si="3"] .sw:not(.sw--box) { border-top-style: double; border-top-width: 5px; }
.legend.many li[data-si="4"] .sw:not(.sw--box) { border-top-style: dashed; border-top-width: 5px; }

/* Puntero grueso: los resúmenes desplegables y los enlaces de acción llegan a 44 px */
@media (pointer: coarse) {
  .why > summary, .caution > summary, .hash-d > summary, .disclosure > summary { min-height: var(--target-recommended); }
  .link-btn { min-height: var(--target-recommended); }
  .calc-links a { min-height: var(--target-recommended); }
}
/* Celdas de texto: no se parten palabras corrientes (fechas, nombres); solo la columna de descripción y los códigos largos */
.tbl--text td:not(.wrap) { overflow-wrap: normal; }
.tbl--text td:not(.wrap) code { overflow-wrap: anywhere; }
.tbl--text td.nw { white-space: nowrap; }

/* Líneas de advertencia a la vista (una línea con ícono) y chip de la cifra de un área */
.fig .notes-warn { list-style: none; padding-left: 0; margin-top: var(--space-2); display: grid; gap: var(--space-1); }
.fig .notes-warn li { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-on-surface); }
.fig .notes-warn .ico { margin-top: 2px; color: var(--color-warning); }
.takeaways-warn li::before { background: var(--color-warning); }
.chip.flag { margin-left: var(--space-2); vertical-align: middle; }
.area-card .stat .chip.flag { margin-left: 0; align-self: flex-start; margin-top: var(--space-1); }
.stat .unit, .tile .unit { font: 400 var(--fs-sm)/1 var(--font-body); color: var(--color-on-surface-muted); letter-spacing: 0; }