/* Página «Impacto legislativo». Todo va bajo .lg para no chocar con los estilos .ix compartidos (css/reporte.css). */
.lg {
  --bg: var(--ix-bg); --fg: var(--ix-text); --line: var(--ix-accent); --chart: var(--ix-chart); --strip: var(--ix-title);
  --muted: var(--ix-muted); --panel: var(--ix-panel); --grid: rgba(230, 230, 231, .12); --track: rgba(230, 230, 231, .06);
  --dim: rgba(116, 215, 242, .28); --font: var(--ix-font);
  display: flex; flex-direction: column; gap: var(--cds-gap-xl); font-size: var(--cds-font-size-body); line-height: 1.55;
}
.lg p { max-width: 78ch; }
.lg a { text-underline-offset: 3px; }

/* índice */
.lg .indice { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; margin-top: 4px; }
.lg .indice a { color: var(--fg); text-decoration: none; border-bottom: 1px solid rgba(0, 160, 203, .6); padding-bottom: 1px; }
.lg .indice a:hover { color: var(--chart); border-color: var(--chart); }

/* barra de filtros */
.lg .tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); padding-block: 10px 8px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.lg .row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lg .row::-webkit-scrollbar { display: none; }
.lg .row button { font-size: 13px; color: var(--fg); background: transparent; border: 1px solid rgba(0, 160, 203, .55); border-radius: 2px; padding: 7px 12px; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.lg .row button:hover { border-color: var(--line); background: rgba(0, 160, 203, .12); }
.lg .row button[aria-pressed="true"] { background: var(--line); border-color: var(--line); color: #333333; }
.lg .row.temas button { border: 0; border-bottom: 3px solid var(--u, var(--line)); border-radius: 0; padding: 7px 10px 5px; }
.lg .row.temas button.extra { border-bottom-style: dashed; }
.lg .row.temas button[aria-pressed="true"] { background: var(--line); color: #333333; }
.lg .sep { align-self: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 0 4px 0 10px; border-left: 1px solid var(--grid); }
@media (min-width: 900px) { .lg .row { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 899px) { .lg .row { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 28px; } }
.lg .filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--muted); min-height: 26px; }
.lg .filtro .n { color: var(--fg); }
.lg .limpiar { font-size: 12px; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 2px 0; cursor: pointer; }
.lg .limpiar:hover { color: var(--chart); }

/* secciones */
.lg section { display: grid; gap: var(--cds-gap-md); scroll-margin-top: 150px; }
.lg .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: var(--cds-gap-md); }
.lg .panel { background: var(--panel); border: 1px solid var(--ix-faint); padding: var(--cds-pad-lg); display: grid; gap: 14px; align-content: start; min-width: 0; }
.lg .panel h3 { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--fg); }
.lg .note { font-size: 13px; color: var(--muted); text-align: justify; hyphens: auto; }
.lg .hint { font-size: 12px; color: var(--muted); }

/* indicadores, con el mismo aspecto que las cifras del reporte */
.lg .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--cds-gap-md); }
.lg .kpi { background: var(--panel); border-top: 3px solid var(--line); padding: var(--cds-pad-lg); display: grid; gap: 4px; align-content: start; color: inherit; text-decoration: none; }
.lg .kpi .v { font-size: calc(var(--cds-font-size-title) * 1.8); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--chart); }
.lg .kpi .l { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lg .kpi .s { font-size: 12px; color: var(--muted); }
.lg .kpi.dest { background: linear-gradient(180deg, rgba(0, 66, 84, .75), var(--panel) 85%); }
.lg a.kpi:hover .l { color: var(--chart); }

/* barras horizontales */
.lg .bars { display: grid; gap: 7px; }
.lg .bar { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 10px; align-items: center; font-size: 13px; padding: 2px 4px; margin: 0 -4px; border-radius: 2px; }
.lg .bar .lab { min-width: 0; line-height: 1.3; }
.lg .bar .lab small { color: var(--muted); font-size: 11px; display: block; }
.lg .bar .track { position: relative; height: 18px; display: flex; align-items: center; gap: 6px; min-width: 0; background: linear-gradient(90deg, var(--track), var(--track)) no-repeat left/var(--tw, 100%) 100%; }
.lg .bar .fill { height: 100%; background: var(--chart); min-width: 2px; display: flex; }
.lg .bar .fill i { display: block; height: 100%; }
.lg .bar .val { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.lg .bar.dim .fill { background: var(--dim); }
.lg .bar.dim .lab { color: var(--muted); }
.lg button.bar { width: calc(100% + 8px); background: transparent; border: 0; color: inherit; text-align: left; cursor: pointer; font-size: 13px; }
.lg button.bar:hover { background: rgba(0, 160, 203, .1); }
.lg button.bar[aria-pressed="true"] .lab { color: var(--chart); }
.lg .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* cronología */
.lg .chartbox { overflow-x: auto; position: relative; }
.lg svg { overflow: hidden; }
.lg svg .barra { cursor: default; outline: none; }
.lg svg .barra:hover rect.f, .lg svg .barra:focus rect.f { fill: #A9E8F8; }
.lg .tip { position: absolute; pointer-events: none; background: var(--strip); border-left: 3px solid var(--line); padding: 8px 10px; font-size: 12px; line-height: 1.45; white-space: nowrap; z-index: 2; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.lg .tip b { display: block; font-size: 13px; }

/* DOF */
.lg .dof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.lg .card { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--panel); }
.lg .card .ruta { margin-top: auto; }
.lg .card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg .card .tt { font-size: 15px; line-height: 1.4; text-wrap: pretty; }
.lg .pub { font-size: 12px; color: var(--chart); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg .meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; margin: 0; }
.lg .meta dt { color: var(--muted); }
.lg .meta dd { margin: 0; min-width: 0; }
.lg .chip { display: inline-block; font-size: 11px; padding: 2px 8px; border: 1px solid var(--line); color: var(--fg); letter-spacing: .03em; }
.lg .callout { border-left: 4px solid var(--line); background: rgba(0, 66, 84, .55); padding: 12px 14px; }

/* ruta legislativa */
.lg .ruta { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--grid); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.lg .ruta::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 2px; background: var(--line); }
.lg .ruta li { display: grid; justify-items: center; text-align: center; gap: 4px; position: relative; min-width: 0; }
.lg .ruta a, .lg .ruta span.sin { display: grid; justify-items: center; gap: 5px; text-decoration: none; color: var(--fg); font-size: 11px; line-height: 1.25; }
.lg .ruta .nodo { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); display: grid; place-items: center; position: relative; z-index: 1; transition: background .15s; }
.lg .ruta .nodo::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.lg .ruta li:last-child .nodo { background: var(--line); }
.lg .ruta li:last-child .nodo::after { background: var(--bg); }
.lg .ruta a:hover .nodo, .lg .ruta a:focus-visible .nodo { background: var(--chart); }
.lg .ruta a:hover .et { color: var(--chart); }
.lg .ruta .et { border-bottom: 1px solid rgba(116, 215, 242, .5); }
.lg .ruta .fe { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* mapa de calor */
.lg table.hm { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 520px; }
.lg .hm th, .lg .hm td { padding: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.lg .hm th { color: var(--muted); font-size: 11px; letter-spacing: .04em; font-weight: 300; }
.lg .hm th.r { text-align: left; color: var(--fg); font-size: 12px; white-space: nowrap; padding: 0; }
.lg .hm th.r button { all: unset; cursor: pointer; display: block; padding: 6px 8px 6px 0; }
.lg .hm th.r button:hover { color: var(--chart); }
.lg .hm th.r button:focus-visible { outline: 2px solid var(--chart); }
.lg .hm td { border: 1px solid var(--bg); }
.lg .hm tr.sel th.r { color: var(--chart); }
.lg .hm tr.off { opacity: .35; }
.lg .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.lg .sw { display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: 0; }
.lg .empty { font-size: 13px; color: var(--muted); padding: 10px 0; }

@media (max-width: 520px) {
  .lg .bar { grid-template-columns: minmax(96px, 44%) 1fr; }
  .lg .kpi .v { font-size: 34px; }
  .lg .tabs { padding-block: 8px 6px; gap: 6px; }
  .lg section { scroll-margin-top: 130px; }
  .lg .ruta .et { font-size: 10.5px; }
}
@media (prefers-reduced-motion: no-preference) { .lg .fill { transition: width .35s ease; } }