/* Estilos compartidos por index.html e impacto_legislativo.html. */
:root {
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px; --cds-gap-xl: 40px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 16px; --cds-pad-lg: 22px; --cds-radius: 6px;
  --cds-font-size-caption: 13px; --cds-font-size-body: 15px; --cds-font-size-heading: 18px; --cds-font-size-title: 24px;
  --cds-dur-slow: 400ms; --cds-ease-out: cubic-bezier(.2, .7, .2, 1);
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
html, body { margin: 0; background: #333333; }
.dash-skeleton { color: transparent; background: rgba(230, 230, 231, .12); border-radius: 4px; }

/* Paleta: fondo #333333 · texto #E6E6E7 · detalles #00A0CB · títulos #004254 · gráficas #74D7F2 · color por subtema. Montserrat Light. */
@font-face { font-family: 'IMCO Montserrat'; src: url('../fonts/montserrat-latin-wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
#dash-root { --dash-gutter: 0; }
.ix-bg {
  --ix-bg: #333333; --ix-text: #E6E6E7; --ix-muted: #B9BABC; --ix-accent: #00A0CB; --ix-title: #004254; --ix-chart: #74D7F2;
  --ix-panel: #3A3A3B; --ix-line: rgba(0, 160, 203, .35); --ix-faint: rgba(230, 230, 231, .12); --ix-off: #6D6E70;
  --ix-font: 'IMCO Montserrat', 'Montserrat', var(--font-anthropic-sans);
  --color-fg: var(--ix-text); --color-fg-muted: var(--ix-muted); --color-bg: var(--ix-bg); --color-panel: var(--ix-panel); --color-border-line: var(--ix-line);
  --cds-chart-grid: rgba(230, 230, 231, .12); --cds-chart-muted: var(--ix-off); --cds-surface-popover: #2A2A2B; --cds-border: var(--ix-accent); --cds-text-secondary: var(--ix-muted);
  background: var(--ix-bg); color: var(--ix-text); color-scheme: dark; font-family: var(--ix-font); font-weight: 300;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 40px 64px;
}
.ix { max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--cds-gap-xl); }
.ix * { box-sizing: border-box; }
.ix h1, .ix h2, .ix h3, .ix p { margin: 0; }
.ix, .ix button, .ix input, .ix svg text { font-family: var(--ix-font); font-weight: 300; }
.ix b, .ix strong { font-weight: 500; }
.ix p { text-align: justify; hyphens: auto; }
.ix [hidden] { display: none !important; }
@media (max-width: 640px) { .ix p, .ix .ix-step-def, .ix .ix-ex-desc, .ix .ix-table td.c-desc { text-align: left; } }

.ix-head { display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.ix-logo img { display: block; width: min(300px, 100%); height: auto; }
.ix-title-band { background: var(--ix-title); border-left: 4px solid var(--ix-accent); padding: 14px 20px; }
.ix-title { font-size: calc(var(--cds-font-size-title) * 1.45); line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--ix-text); text-wrap: balance; }
.ix-lede { font-size: var(--cds-font-size-heading); line-height: 1.6; max-width: 70ch; color: var(--ix-text); }
.ix .ix-lede b { font-weight: 500; color: var(--ix-chart); font-variant-numeric: tabular-nums; }

.ix-nav { display: flex; flex-direction: column; gap: 0; border-bottom: 1px solid var(--ix-line); }
.ix-tabs { display: flex; gap: 6px var(--cds-gap-lg); flex-wrap: wrap; align-items: flex-end; }
.ix-tabs button { font-size: var(--cds-font-size-body); border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ix-muted); padding: 10px 2px 8px; cursor: pointer; }
.ix-tabs button:hover { color: var(--ix-text); }
.ix-tabs button[aria-selected="true"] { color: var(--ix-text); font-weight: 500; border-bottom-color: var(--ix-accent); }
.ix-sub { padding-block: 4px 2px; border-top: 1px solid var(--ix-faint); column-gap: 20px; }
.ix-sub button { flex: none; white-space: nowrap; }
@media (max-width: 900px) { .ix-sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--ix-line) transparent; } }
.ix-sub button { font-size: var(--cds-font-size-caption); padding: 8px 2px 7px; border-bottom-color: var(--ix-tab-color, transparent); border-bottom-width: 3px; opacity: .75; }
.ix-sub button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--ix-tab-color, var(--ix-accent)); }
.ix-sub button[aria-selected="false"] { border-bottom-color: color-mix(in srgb, var(--ix-tab-color, transparent) 45%, transparent); }
.ix-navrow { display: flex; justify-content: space-between; gap: var(--cds-gap-md); flex-wrap: wrap; align-items: flex-end; }
.ix-check { display: inline-flex; gap: 8px; align-items: center; font-size: var(--cds-font-size-caption); color: var(--ix-muted); cursor: pointer; padding-bottom: 10px; }
.ix-check input { accent-color: var(--ix-accent); }
.ix button:focus-visible, .ix input:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 2px; }

.ix-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--cds-gap-md); }
.ix-kpi { background: var(--ix-panel); border-top: 3px solid var(--ix-accent); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-xs); }
.ix-kpi-label { font-size: var(--cds-font-size-caption); color: var(--ix-muted); text-transform: uppercase; letter-spacing: .06em; }
.ix-kpi-num { font-size: calc(var(--cds-font-size-title) * 1.8); line-height: 1.05; color: var(--ix-chart); font-variant-numeric: tabular-nums; min-height: 1.1em; }
.ix-kpi-sub { font-size: var(--cds-font-size-caption); color: var(--ix-muted); }
.ix-kpi-sub b { color: var(--ix-text); }

.ix-sec { display: flex; flex-direction: column; gap: var(--cds-gap-md); }
.ix-sec-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ix-h2 { background: var(--ix-title); border-left: 4px solid var(--ix-accent); color: var(--ix-text); font-size: var(--cds-font-size-heading); letter-spacing: .03em; padding: 8px 14px; text-wrap: balance; }
.ix-note { font-size: var(--cds-font-size-caption); color: var(--ix-muted); max-width: 72ch; }
.ix-card { background: var(--ix-panel); border: 1px solid var(--ix-faint); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-md); min-width: 0; }
.ix-chart { position: relative; min-width: 0; }
.ix-legend { display: flex; gap: 6px var(--cds-gap-md); flex-wrap: wrap; font-size: var(--cds-font-size-caption); color: var(--ix-muted); }
.ix-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ix-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }

.ix-steps { display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
.ix-step { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: var(--cds-gap-md); align-items: center; padding: 8px; margin: -8px; cursor: pointer; border: 0; background: transparent; color: inherit; text-align: left; width: calc(100% + 16px); }
.ix-step:hover, .ix-step[aria-pressed="true"] { background: rgba(0, 160, 203, .1); }
.ix-step-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ix-step-lvl { font-size: var(--cds-font-size-caption); color: var(--ix-accent); letter-spacing: .06em; text-transform: uppercase; }
.ix-step-name { font-size: var(--cds-font-size-body); font-weight: 500; }
.ix-step-def { font-size: var(--cds-font-size-caption); color: var(--ix-muted); text-align: justify; }
.ix-step-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ix-bar { flex: 0 0 auto; height: 20px; border-radius: 2px; min-width: 3px; }
.ix-step-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-step-val span { color: var(--ix-muted); font-size: var(--cds-font-size-caption); }
.ix-step.is-muted .ix-step-name { font-weight: 300; color: var(--ix-muted); }
.ix-divider { border: 0; border-top: 1px dashed var(--ix-faint); margin: 4px 0; }
@media (max-width: 620px) { .ix-step { grid-template-columns: 1fr; gap: 6px; } }

.ix-ex { border-top: 1px solid var(--ix-line); padding-top: var(--cds-pad-md); display: flex; flex-direction: column; gap: var(--cds-gap-sm); }
.ix-ex-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--cds-gap-sm); flex-wrap: wrap; }
.ix-ex-title { font-size: var(--cds-font-size-caption); color: var(--ix-muted); }
.ix-ex-title b { color: var(--ix-text); }
.ix-ex-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--cds-gap-md); }
.ix-ex-item { display: flex; flex-direction: column; gap: 4px; font-size: var(--cds-font-size-caption); line-height: 1.55; min-width: 0; }
.ix-ex-org { font-weight: 500; font-size: var(--cds-font-size-body); }
.ix-ex-meta { color: var(--ix-muted); }
.ix-ex-desc { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-align: justify; hyphens: auto; }
.ix-hint { font-size: var(--cds-font-size-caption); color: var(--ix-muted); }
.ix-btn { font-size: var(--cds-font-size-caption); border: 1px solid var(--ix-accent); background: transparent; color: var(--ix-text); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.ix-btn:hover { background: rgba(0, 160, 203, .15); }
.ix a { color: var(--ix-chart); }

.ix svg { display: block; overflow: visible; }
.ix svg text { fill: var(--ix-text); font-size: var(--cds-font-size-caption); }
.ix svg text.mut { fill: var(--ix-muted); }
.ix svg text.halo { paint-order: stroke; stroke: var(--ix-panel); stroke-width: 4px; stroke-linejoin: round; }
.ix svg .grid line { stroke: var(--cds-chart-grid); }
.ix svg .clk { cursor: pointer; }
.ix-tip { position: absolute; pointer-events: none; background: #2A2A2B; border: 1px solid var(--ix-accent); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); max-width: 260px; z-index: 5; color: var(--ix-text); }
.ix-tip .k { color: var(--ix-muted); }
.ix-hitos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 6px var(--cds-gap-md); font-size: var(--cds-font-size-caption); }
.ix-hitos li { display: flex; gap: 8px; align-items: baseline; }
.ix-hito-n { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--ix-accent); color: var(--ix-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }

.ix-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--cds-gap-md); }
.ix-case { background: var(--ix-panel); border-top: 3px solid var(--ix-accent); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-width: 0; }
.ix-case-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--cds-font-size-caption); color: var(--ix-muted); }
.ix-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ix-accent); border-radius: 999px; padding: 2px 9px; font-size: var(--cds-font-size-caption); color: var(--ix-text); background: var(--ix-bg); }
.ix-case h3 { font-size: var(--cds-font-size-heading); font-weight: 500; line-height: 1.35; text-wrap: balance; }
.ix-case p { font-size: var(--cds-font-size-caption); line-height: 1.6; color: var(--ix-muted); }
.ix-case-foot { margin-top: auto; font-size: var(--cds-font-size-caption); }
.ix-empty { font-size: var(--cds-font-size-caption); color: var(--ix-muted); }

.ix-tools { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; }
.ix-search { font-size: var(--cds-font-size-body); padding: 7px 12px; border: 1px solid var(--ix-line); background: var(--ix-bg); color: var(--ix-text); flex: 1 1 16rem; min-width: 0; }
.ix-search::placeholder { color: var(--ix-off); }
.ix-count { font-size: var(--cds-font-size-caption); color: var(--ix-muted); font-variant-numeric: tabular-nums; }
.ix-tablebox { max-height: 560px; overflow: auto; border: 1px solid var(--ix-faint); }
.ix-table { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); line-height: 1.5; }
.ix-table th { position: sticky; top: 0; background: #2E2E2F; text-align: left; font-weight: 500; color: var(--ix-accent); padding: 8px 10px; border-bottom: 1px solid var(--ix-line); white-space: nowrap; z-index: 1; }
.ix-table td { padding: 8px 10px; border-bottom: 1px solid var(--ix-faint); vertical-align: top; }
.ix-table td.c-desc { min-width: 18rem; max-width: 36rem; text-align: justify; hyphens: auto; }
.ix-table td.c-nw { white-space: nowrap; }
@media (max-width: 720px) { .ix-table .c-hide { display: none; } .ix-table td.c-desc { min-width: 16rem; } }
.ix-foot { border-top: 1px solid var(--ix-line); padding-top: var(--cds-pad-lg); display: flex; flex-wrap: wrap; gap: var(--cds-gap-md) var(--cds-gap-xl); justify-content: space-between; align-items: flex-start; font-size: var(--cds-font-size-caption); color: var(--ix-muted); }
.ix-foot img { width: 180px; height: auto; display: block; }
.ix-foot p { max-width: 62ch; text-align: left; line-height: 1.6; }
.ix-mbars { display: flex; flex-direction: column; gap: 10px; }
.ix-mbar { display: flex; flex-direction: column; gap: 4px; border: 0; background: transparent; color: inherit; text-align: left; padding: 4px 0; cursor: pointer; }
.ix-mbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--cds-font-size-caption); }
.ix-mbar-track { display: flex; height: 14px; background: rgba(230, 230, 231, .06); }
.ix-mbar-track span { display: block; height: 100%; }
[data-dash-source-state=empty] { color: transparent; }
[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
@media (prefers-reduced-motion: no-preference) { .ix-bar { transition: width var(--cds-dur-slow) var(--cds-ease-out); } }

/* Encabezado del sitio: logo y navegación entre páginas */
.ix-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px var(--cds-gap-lg); flex-wrap: wrap; }
.ix-topbar .ix-logo { flex: 0 1 300px; }
.ix-site { display: flex; gap: 4px var(--cds-gap-lg); flex-wrap: wrap; align-items: flex-end; }
.ix .ix-site a { color: var(--ix-muted); text-decoration: none; font-size: var(--cds-font-size-body); padding: 8px 2px 6px; border-bottom: 3px solid transparent; white-space: nowrap; }
.ix .ix-site a:hover { color: var(--ix-text); }
.ix .ix-site a[aria-current="page"] { color: var(--ix-text); font-weight: 500; border-bottom-color: var(--ix-accent); }
.ix .ix-site a:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 2px; }
@media (max-width: 480px) { .ix-site { gap: 4px 16px; } .ix .ix-site a { font-size: var(--cds-font-size-caption); } }