*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Hanken Grotesk',Arial,sans-serif;background:#F5F5F5;color:#171B21;line-height:1.5}
  main{max-width:1180px;margin:0 auto;padding:32px 24px 80px}

  .section-tag{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#266FE0;margin-bottom:6px}
  h1{font-size:30px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
  .lead{font-size:15px;font-weight:300;color:#626A78;max-width:680px}

  .tabs{display:flex;gap:4px;border-bottom:1px solid #E5E7EB;margin:20px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;color:#626A78;background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;cursor:pointer;margin-bottom:-1px;flex:none;white-space:nowrap}
  .tab:hover{color:#171B21}
  .tab.on{color:#266FE0;border-bottom-color:#266FE0}

  label.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:#171B21;margin-top:16px;cursor:pointer;user-select:none}
  label.chk input{width:15px;height:15px;accent-color:#266FE0;cursor:pointer}
  .chk-hint{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#626A78}

  .card{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:24px}
  .card-label{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#626A78;margin-bottom:14px}

  .grid{display:grid;grid-template-columns:340px 1fr;gap:20px;margin-top:24px}
  @media(max-width:880px){.grid{grid-template-columns:1fr}}

  label.fld{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#626A78;margin:14px 0 5px}
  select,input[type=text]{width:100%;font-family:'Hanken Grotesk',sans-serif;font-size:14px;color:#171B21;background:#fff;border:1px solid #E5E7EB;border-radius:7px;padding:9px 11px;outline:none}
  select:focus,input:focus{border-color:#266FE0;box-shadow:0 0 0 3px rgba(38,111,224,.15)}
  select:disabled{background:#F5F5F5;color:#9aa1ad}

  .search-wrap{position:relative}
  .results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);max-height:340px;overflow:auto;display:none}
  .results.open{display:block}
  .res-item{padding:9px 12px;border-bottom:1px solid #F0F1F3;cursor:pointer}
  .res-item:last-child{border-bottom:none}
  .res-item:hover,.res-item.active{background:#E7F0FF}
  .res-denom{font-size:13.5px;font-weight:600;color:#171B21}
  .res-meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:#626A78;margin-top:2px}
  .res-cov{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9px;background:#E7F0FF;color:#266FE0;padding:1px 5px;border-radius:4px;margin-left:6px}

  .crumb{font-family:'JetBrains Mono',monospace;font-size:11px;color:#626A78;margin-bottom:4px}
  .node-title{font-size:21px;font-weight:600;line-height:1.25;margin-bottom:2px}
  .node-sub{font-size:12.5px;color:#626A78;font-weight:300}
  .badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle}
  .badge.agg{background:#FEF3C7;color:#92670c}
  .badge.dol{background:#E7F0FF;color:#184D9B}

  .kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 6px}
  @media(max-width:560px){.kpi-grid{grid-template-columns:1fr}}
  .kpi{background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:18px}
  .kpi-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#626A78;margin-bottom:7px}
  .kpi-value{font-size:25px;font-weight:800;color:#171B21;line-height:1.05}
  .kpi-delta{font-size:12px;font-weight:600;margin-top:5px}
  .kpi-delta.up{color:#10B981}.kpi-delta.down{color:#EF4444}.kpi-delta.neutral{color:#626A78}

  .analysis-subtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.analysis-subtabs[hidden]{display:none}.analysis-subtabs .tab{min-height:44px}
  .chart-wrap{position:relative;height:300px;margin-top:6px}
  .toggles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
  .tg{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;border:1px solid #E5E7EB;background:#fff;color:#626A78;border-radius:6px;padding:5px 10px;cursor:pointer;user-select:none}
  .tg.on{border-color:#266FE0;color:#266FE0;background:#E7F0FF}

  table{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px}
  th{background:#F5F5F5;color:#626A78;border-bottom:1px solid #E5E7EB;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;padding:8px 10px;text-align:right}
  th:first-child{text-align:left}
  td{padding:7px 10px;border-bottom:1px solid #E5E7EB;text-align:right;font-family:'JetBrains Mono',monospace}
  td:not(.mono){font-family:'Hanken Grotesk',Arial,sans-serif}
  td:first-child{text-align:left;font-family:'Hanken Grotesk',sans-serif;font-weight:600}
  tr:hover td{background:#FAFBFC}

  .meth{margin-top:28px}
  .meth-h{font-size:22px;font-weight:600;margin-bottom:6px}
  .meth-p{font-size:14px;font-weight:300;color:#626A78;max-width:760px;margin-bottom:22px}
  .meth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:760px){.meth-grid{grid-template-columns:1fr}}
  .meth-item{border-left:2px solid #E7F0FF;padding-left:14px}
  .meth-n{font-family:'JetBrains Mono',monospace;font-size:11px;color:#266FE0;letter-spacing:.1em;margin-bottom:5px}
  .meth-t{font-size:14.5px;font-weight:600;margin-bottom:5px;line-height:1.3}
  .meth-d{font-size:13px;font-weight:300;color:#626A78;line-height:1.55}
  .meth-d b{font-weight:600;color:#171B21}
  .meth-foot{font-family:'JetBrains Mono',monospace;font-size:10px;color:#626A78;margin-top:20px;padding-top:14px;border-top:1px solid #E5E7EB}
  .mono{font-family:'JetBrains Mono',monospace;font-size:.92em;color:#184D9B}
  .warn{background:#FEF3C7;border:1px solid #F59E0B;color:#92670c;font-size:12.5px;line-height:1.5;border-radius:8px;padding:10px 12px;margin:10px 0}
  .ok{background:#ECFDF5;border:1px solid #10B981;color:#0a7355;font-size:12.5px;line-height:1.5;border-radius:8px;padding:10px 12px;margin:10px 0}
  .backlink{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;color:#266FE0;cursor:pointer;margin-bottom:10px}
  .backlink:hover{text-decoration:underline}
  .empty{color:#9aa1ad;font-size:14px;padding:40px 8px;text-align:center}

  /* ---- calidad de datos ---- */
  .cal-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:20px 0}
  .cal-tile{background:#fff;border:1px solid #E5E7EB;border-radius:10px;padding:16px 18px}
  .cal-tile .lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#626A78;margin-bottom:6px}
  .cal-tile .val{font-size:25px;font-weight:800;letter-spacing:-.02em}
  .cal-tile .det{font-size:12px;color:#626A78;margin-top:2px;font-weight:300}
  .chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 9px;border-radius:99px;vertical-align:middle}
  .chip.g{background:#ECFDF5;color:#0a7355}
  .chip.y{background:#FEF3C7;color:#92670c}
  .chip.r{background:#FEE2E2;color:#b3372b}
  .chip.link{cursor:pointer}
  .hm-scroll{overflow-x:auto;padding-bottom:4px}
  /* las columnas del heatmap se generan inline desde el nº real de transiciones */
  .hm{display:grid;gap:2px;min-width:840px}
  .hm .h{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#626A78;align-self:end;text-align:center;padding-bottom:4px}
  .hm .h.first{text-align:left}
  .hm .rowlbl{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center;padding-right:10px;cursor:pointer}
  .hm .rowlbl:hover{color:#266FE0}
  .hm .rowlbl .code{font-family:'JetBrains Mono',monospace;font-size:10px;color:#626A78;margin-right:5px}
  .hm .cell{height:24px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9px;color:#171B21}
  .hm .cell.na{background:transparent;border:1px dashed #E5E7EB}
  .hm .score{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;align-self:center;text-align:right}
  .hm .score.g{color:#0a7355}.hm .score.y{color:#92670c}.hm .score.r{color:#b3372b}
  .cal-legend{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12px;color:#626A78;flex-wrap:wrap}
  .cal-legend .sw{width:24px;height:11px;border-radius:2px;display:inline-block}
  .cal-legend .swna{width:24px;height:11px;border-radius:2px;border:1px dashed #E5E7EB;display:inline-block}
  .cal-find{display:grid;grid-template-columns:9px 1fr;gap:13px;padding:12px 0;border-bottom:1px solid #F0F1F3}
  .cal-find:last-child{border-bottom:none}
  .cal-find .dot{width:9px;height:9px;border-radius:50%;margin-top:6px}
  .cal-find .dot.r{background:#EF4444}.cal-find .dot.y{background:#F59E0B}.cal-find .dot.b{background:#266FE0}
  .cal-find h4{font-size:14px;font-weight:600;margin-bottom:2px}
  .cal-find p{font-size:13px;font-weight:300;color:#626A78;max-width:88ch}
  .cal-find p b{font-weight:600;color:#171B21}
  .sbar{display:inline-block;width:64px;height:6px;border-radius:3px;background:#E5E7EB;vertical-align:middle;margin-left:8px;overflow:hidden}
  .sbar i{display:block;height:100%;border-radius:3px;background:#266FE0}
  .gl-tl{border-left:2px solid #E5E7EB;margin:6px 0 0 34px}
  .gl-tl-row{position:relative;padding:0 0 16px 18px}
  .gl-tl-row:before{content:'';position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:#266FE0}
  .gl-tl-year{position:absolute;left:-52px;top:1px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:#171B21}
  .gl-tl-head{font-size:13px;font-weight:600}
  .gl-tl-det{font-size:12px;color:#626A78;margin-top:3px;line-height:1.55}
  .gl-tl-det b{color:#171B21;font-weight:600}
  .gl-tl-ev{font-size:12px;color:#B45309;margin-top:3px}
  .gl-delta-up{color:#b3372b}.gl-delta-down{color:#0a7355}
  /* ---- glosas como análisis ---- */
  .gl-an-t{font-size:17.5px;font-weight:600;line-height:1.3;margin:0 0 8px}
  .gl-an-lead{font-size:13px;margin-bottom:14px}
  /* La bajada se lee en dos líneas y el texto completo va en el modal, igual
     que en las tarjetas de análisis. La card entera es el blanco del clic. */
  .card.gl-an{position:relative;cursor:pointer;padding-bottom:46px}
  .gl-an .gl-an-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .gl-an .an-more{position:absolute;right:18px;bottom:16px;margin-top:0;pointer-events:none}
  .gl-an:hover .an-more i{color:#266FE0}
  /* ---- una glosa en el tiempo ---- */
  .tray-search{width:100%;max-width:560px;padding:10px 14px;font-size:15px;border:1.5px solid #E5E7EB;border-radius:10px;font-family:'Hanken Grotesk',Arial,sans-serif}
  .tray-search:focus{outline:none;border-color:#266FE0}
  .tray-hint{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;color:#266FE0;background:#EFF4FC;border-radius:6px;padding:3px 8px;margin:6px 6px 0 0;cursor:pointer}
  .tray-hint:hover{background:#DCE7F8}
  .tray-res{border:1px solid #E5E7EB;border-radius:10px;padding:12px 14px;margin-top:10px;cursor:pointer;transition:box-shadow .15s ease}
  .tray-res:hover{box-shadow:0 6px 18px rgba(0,0,0,.07)}
  .tray-res .t-prog{font-weight:600;font-size:14px}
  .tray-res .t-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#626A78;margin-top:2px}
  .tray-res .t-snip{font-size:12.5px;color:#374151;margin-top:6px;line-height:1.5}
  .tray-res .t-snip mark{background:#FDE9B8;padding:0 1px}
  .chip-vig{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:2px 7px;border-radius:20px;background:#DFF3E7;color:#0a7355;margin-left:8px;vertical-align:1px}
  .chip-fin{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:2px 7px;border-radius:20px;background:#FDE4E1;color:#b3372b;margin-left:8px;vertical-align:1px}
  .chip-tra{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:2px 7px;border-radius:20px;background:#FDF0D5;color:#B45309;margin-left:8px;vertical-align:1px}
  .tray-v{border-left:3px solid #CBDCF6;padding:10px 0 10px 16px;margin-left:8px;position:relative}
  .tray-v.vr{border-left-color:#266FE0}
  .tray-v-year{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:#171B21}
  .tray-v-tipo{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#626A78;margin-left:8px}
  .tray-v-txt{font-size:13px;line-height:1.65;margin-top:6px;color:#1F2937}
  .tray-v-txt ins{background:#DFF3E7;color:#0a5c44;text-decoration:none;padding:0 1px;border-radius:2px}
  .tray-v-txt del{background:#FDE4E1;color:#a13327;padding:0 1px;border-radius:2px}
  .tray-v-txt mark{background:#FDE9B8;padding:0 1px}
  .tray-back{cursor:pointer;color:#266FE0;font-family:'JetBrains Mono',monospace;font-size:11px}
  /* ---- análisis (cards + popup) ---- */
  .an-sec{margin-top:30px}

  /* .an-wide lo declara la tarjeta; .an-ancho lo decide la grilla cuando la
     última fila quedaría con una sola tarjeta y media columna en blanco. Solo
     .an-wide sube el gráfico a 400px: la que se ensancha por geometría gana
     ancho, no altura, y mantiene la que tenía en su columna. */
  .an-card.an-wide,.an-card.an-ancho{grid-column:1/-1}
  .an-wide .an-chart{height:400px}
  .an-rank-preview{list-style:none;padding:0;margin:0;display:grid;gap:16px}
  .an-rank-label{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px;line-height:1.45}
  .an-rank-label span{overflow-wrap:anywhere}.an-rank-label b{white-space:nowrap;font:11px 'JetBrains Mono',monospace;color:#184D9B}
  .an-rank-track{height:7px;background:#E7F0FF;margin-top:7px;border-radius:3px;overflow:hidden}
  .an-rank-track i{display:block;height:100%;background:#266FE0;border-radius:3px}
  .an-preview-note{font-size:11px;color:#626A78;margin:12px 0 0}
  .an-chart.an-preview-list{height:auto!important;min-height:0}
  .an-composition-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 0;font-size:13px}
  .an-composition-controls select{max-width:100%;width:min(100%,520px);padding:10px;border:1px solid #E5E7EB;border-radius:6px;background:white;font:inherit}
  .an-composition-reading{font-size:13px;line-height:1.6;margin:12px 0 0;color:#626A78}
  .an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px;margin-top:20px}
  @media(max-width:720px){.an-grid{grid-template-columns:1fr}}
  .an-card{position:relative;min-width:0;background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:18px;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .15s ease,transform .15s ease}
  .an-open{font:inherit;color:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer}.an-open:focus-visible{outline:3px solid #266FE0;outline-offset:4px}
  .an-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
  .an-num{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#266FE0;margin-bottom:6px}
  .an-title{font-size:16.5px;font-weight:600;line-height:1.3;margin-bottom:4px}
  .an-sub{font-size:13px;font-weight:300;color:#626A78;line-height:1.5;margin-bottom:12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:3em}
  .an-chart{min-width:0;position:relative;height:260px;margin-top:18px}
  .an-more{font-family:'JetBrains Mono',monospace;font-size:10px;color:#266FE0;margin-top:12px}
  .an-overlay{position:fixed;inset:0;background:rgba(23,27,33,.55);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow-y:auto}
  .an-overlay.open{display:flex}
  /* Listas dentro del texto de una tarjeta: viñetas con aire entre ítems,
     para que tres obligaciones largas no se lean como un bloque corrido. */
  .an-lista{margin:10px 0 12px;padding-left:20px}
  .an-lista li{margin:0 0 9px;line-height:1.65}
  .an-lista li:last-child{margin-bottom:0}
  #an-m-texto p,.longform-text p{margin:0 0 10px}
  #an-m-texto p:last-child,.longform-text p:last-child{margin-bottom:0}
  .an-modal{background:#fff;border-radius:14px;max-width:860px;width:100%;padding:26px 28px;position:relative;margin-bottom:6vh}
  @media(max-width:560px){.an-modal{padding:20px 16px}}
  .an-close{position:absolute;top:14px;right:14px;border:none;background:#F5F5F5;color:#626A78;width:30px;height:30px;border-radius:8px;font-size:14px;cursor:pointer;line-height:1}
  .an-close:hover{background:#E5E7EB;color:#171B21}
  .an-m-title{font-size:21px;font-weight:600;line-height:1.25;margin-bottom:14px;padding-right:36px}
  .an-nav{display:flex;gap:8px;align-items:center;margin-top:18px;flex-wrap:wrap}
  /* ---- análisis largo: una sola lectura vertical, sin cards ni modal ---- */
  .longform{max-width:900px}
  .longform-intro{max-width:760px;margin-bottom:8px}
  .longform-sec{padding:34px 0 38px;border-bottom:1px solid #E5E7EB}
  .longform-sec:last-of-type{border-bottom:0}
  .longform-sec h2{font-size:23px;line-height:1.25;margin:0 0 8px;max-width:760px}
  .longform-sub{font-size:14px;color:#626A78;line-height:1.6;max-width:760px;margin:0 0 20px}
  .longform-chart{position:relative;height:330px;margin:4px 0 22px}
  .longform-text{font-size:14px;line-height:1.75;max-width:760px;margin:0}
  .longform-source{font-family:'JetBrains Mono',monospace;font-size:10px;color:#626A78;line-height:1.6;max-width:760px;margin-top:16px}
  @media(max-width:560px){.longform-chart{height:290px}.longform-sec h2{font-size:20px}}
  footer{font-family:'JetBrains Mono',monospace;font-size:10px;color:#626A78;margin-top:28px;line-height:1.6}
  .loading{padding:60px;text-align:center;color:#626A78}

  /* ---- skeleton de carga (§5.8 de la norma: skeleton, no spinner) ----
     Mientras llega data.json la vista no muestra un texto: muestra el mismo
     shell que va a ocupar el dato, con las mismas alturas, para que el layout
     no salte al pintarse. Reusa .an-sec/.an-grid/.an-card/.an-chart y .grid/
     .card —las clases reales— y solo agrega las barras grises. */
  .skel{pointer-events:none}
  .skel .an-card{cursor:default;box-shadow:none}
  .skel-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .skel-bar,.skel-block{background:#E5E7EB;border-radius:6px;animation:skel-late 1.5s ease-in-out infinite}
  .skel-h2{height:22px;width:min(440px,72%);margin-bottom:10px}
  .skel-p{height:13px;width:min(680px,92%)}
  .skel-title{height:18px;width:64%;margin-bottom:12px}
  .skel-sub{height:11px;margin-bottom:6px}
  .skel-sub-2{width:76%;margin-bottom:0}
  .skel-rot{height:10px;width:60%;margin-bottom:8px}
  .skel-block{border-radius:8px}
  .skel-campo{height:38px;border-radius:8px;margin-bottom:14px}
  .skel-fila{height:14px;margin-bottom:12px}
  .skel-detalle{height:320px;border-radius:8px}
  @keyframes skel-late{0%,100%{opacity:1}50%{opacity:.5}}
  @media(prefers-reduced-motion:reduce){.skel-bar,.skel-block{animation:none}}
  /* Una vista por forma: el comparador y las fichas de programa abren en la
     grilla de dos columnas; el resto, en la grilla de tarjetas. */
  .skel-dash{display:none}
  body[data-view=dashboard] .skel-cards{display:none}
  body[data-view=dashboard] .skel-dash{display:grid}

.cad-reading{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:32px;align-items:start}
.cad-speech{min-width:0;font-size:15px;line-height:1.75}
.cad-speech p{margin:0 0 14px;scroll-margin-top:28px;border-radius:6px}
.cad-speech p:focus{outline:2px solid #1D55B4;background:#EFF6FF;outline-offset:5px}
.cad-emphasis{grid-column:2;grid-row:1;background:#F3F6FC;border:1px solid #DBE4F3;border-radius:12px;padding:20px}
.cad-emphasis h3{font-size:19px;margin:0 0 10px}
.cad-emphasis h4{font-size:14px;margin:0 0 6px}
.cad-emphasis p{font-size:13px;line-height:1.6;margin:0 0 9px}
.cad-emphasis ol{list-style:none;margin:18px 0 0;padding:0}
.cad-emphasis li+li{border-top:1px solid #D8E1EF;margin-top:15px;padding-top:15px}
.cad-emphasis button{font:inherit;font-size:12px;color:#1D55B4;background:white;border:1px solid #BFCFE8;border-radius:6px;padding:6px 9px;cursor:pointer}
.cad-emphasis button:focus-visible{outline:2px solid #1D55B4;outline-offset:3px}
@media(max-width:850px){.cad-reading{grid-template-columns:1fr;gap:24px}.cad-emphasis{grid-column:1;grid-row:1}.cad-speech{grid-row:2}}


.sector-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin:24px 0}
/* Las dos cifras son lo único que lleva esta card —ya no trae pie ni ⓘ—, así
   que los 24px de margen del bloque de KPI quedaban como aire muerto: 53px
   bajo las cards contra los 28 de arriba. El padding de la card hace el
   trabajo. */
.sector-kpis small{display:block;color:#626A78}.sector-kpis strong{display:block;font-size:26px;margin-top:8px}.sector-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin:20px 0}.sector-controls label{display:grid;gap:6px;max-width:100%}.sector-controls select,.sector-controls button{padding:9px;border:1px solid #E5E7EB;border-radius:5px;background:white;color:#171B21}
/* El alto lo iguala el chrome, que es donde el <select> se cambia por un
   disparador de 44px (content.css). Acá solo va el gris que lo separa de los
   tres selectores de la misma fila. */
.sector-controls>button{background:#F5F5F5;font-weight:500;cursor:pointer}
.sector-controls>button:hover{background:#E5E7EB}
/* Bloques plegables de Vivienda y Obras Públicas: las tablas largas y la serie
   por línea se abren a pedido. No son el `details` de letra chica del pie
   —ese sigue en azul y pequeño—, así que el resumen se lee como encabezado. */
.sector-det{margin:22px 0 0;border:1px solid #E5E7EB;border-radius:10px;background:#fff}
/* El azul lo declara esta regla, no el `.longform summary` del pie de página que
   la sigue en la hoja: es el mismo azul, pero acá es una decisión. */
.longform .sector-det>summary{list-style:none;display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:14px 16px;cursor:pointer;color:#266FE0;font-size:17px;font-weight:600;line-height:1.3}
.sector-det>summary::-webkit-details-marker{display:none}
.sector-det>summary:hover{color:#184D9B}
.sector-det>summary h3{margin:0;font:inherit;color:inherit}
.sector-det>summary::after{content:'';flex:none;width:9px;height:9px;margin-right:4px;
  border-right:2px solid #626A78;border-bottom:2px solid #626A78;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.sector-det[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.sector-det>.sector-det-cuerpo{padding:0 16px 16px}
.sector-det .sector-scroll{margin-top:0}
.sector-series-link{border:0;padding:0;background:none;color:#266FE0;text-decoration:underline;text-align:left;font:inherit;cursor:pointer}.sector-series-link:focus-visible{outline:2px solid #266FE0;outline-offset:3px}[id$="-series-title"]{scroll-margin-top:100px}.sector-scroll{overflow-x:auto;margin:20px 0}.sector-scroll table{min-width:850px;width:100%}.sector-scroll th,.sector-scroll td{padding:10px;text-align:right}.sector-scroll th:first-child,.sector-scroll td:first-child{text-align:left;min-width:240px}.sector-scroll th{white-space:normal}.longform details{margin:20px 0}.longform summary{cursor:pointer;color:#266FE0}
/* ===== Ajustes de UI portados desde la rama ajustes-UI =====
   El monolito no usa variables CSS, así que van los hex literales de su paleta:
   #266FE0 primario · #E5E7EB línea · #626A78 apagado · #171B21 tinta ·
   #F5F5F5 fondo · #E7F0FF azul claro. */

/* Las cards tienen que ser contenedor posicionado: el globo del tooltip se
   ancla a ellas y si no, se va al borde de la página. */
.card{position:relative}

/* §5.10 tooltip. Reset tipográfico obligatorio: cuelga de títulos y heredaría
   su tamaño y sus versalitas. */
.tip{position:static;display:inline-flex;align-items:center;margin-left:6px;cursor:help}
.tip svg{width:14px;height:14px;color:#626A78;flex:none;transition:color .15s}
.tip:hover svg,.tip:focus-visible svg{color:#266FE0}
.tip-globo{position:absolute;left:0;bottom:calc(100% + 10px);max-width:100%;z-index:60;
  background:#fff;color:#171B21;border:1px solid #E5E7EB;border-radius:10px;padding:9px 14px;
  box-shadow:0 4px 14px rgb(0 0 0 / .08);pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .14s ease;
  font-family:'Hanken Grotesk',Arial,sans-serif;font-size:13.5px;font-weight:400;line-height:1.45;
  letter-spacing:normal;text-transform:none;text-align:left;white-space:normal}
.tip-globo::before,.tip-globo::after{content:'';position:absolute;left:18px;top:100%;border:7px solid transparent}
.tip-globo::before{border-top-color:#E5E7EB}
.tip-globo::after{border-top-color:#fff;margin-top:-1.5px}
.tip:hover .tip-globo,.tip:focus-within .tip-globo{opacity:1;visibility:visible}
/* Variante anclada al ícono, para controles sueltos dentro de una card grande. */
.tip.tip-ancla{position:relative}
.tip.tip-ancla .tip-globo{left:-8px;bottom:calc(100% + 9px);width:max-content;max-width:min(260px,72vw)}
.tip.tip-ancla .tip-globo::before,.tip.tip-ancla .tip-globo::after{left:13px}
.tit-fila{display:flex;align-items:baseline;gap:2px;position:relative}
.tit-fila>h3{margin:0}

/* Opción y ayuda en la misma fila. */
.chk-fila{display:flex;align-items:center;gap:7px;margin-top:16px}
.chk-fila .chk{margin-top:0}

/* Buscador con lupa, a ancho completo de su card. */
.busca{position:relative;display:block}
.busca-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:#626A78;pointer-events:none;transition:color .15s}
.busca:focus-within .busca-ico{color:#266FE0}
.busca .tray-search{max-width:none;padding-left:40px}

/* Coincidencias resaltadas en los resultados de búsqueda. */
.res-denom mark,.res-meta mark,.t-prog mark{background:#FDE9B8;padding:0 1px;border-radius:2px;color:inherit}

/* Segmentado: dos estados excluyentes, no dos filtros que se sumen. */
.ctrl-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.ctrl-fila-label{margin:14px 0 10px}
.ctrl-fila-label .seg{margin-left:auto}
.seg{display:inline-flex;border:1px solid #E5E7EB;border-radius:8px;background:#fff;padding:2px;gap:2px}
.seg-op{display:inline-flex;align-items:center;gap:7px;border:0;background:none;font-family:inherit;
  font-size:13px;color:#626A78;padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}
.seg-op:hover:not(.on){background:#F5F5F5;color:#171B21}
.seg-op.on{background:#E7F0FF;color:#266FE0;font-weight:600}
.seg-op .dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
@media(max-width:560px){.seg{width:100%}.seg-op{flex:1;justify-content:center;padding:6px 8px}}

/* Notas bajo el gráfico: el rótulo a la vista, la letra chica en el globo. */
.notas{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.nota-chip{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#626A78}

/* §5.17 leyenda clickeable: la píldora y la zona que responde son el mismo
   rectángulo. Encendida lleva borde; apagada lo pierde y se va a gris. */
.leyenda{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.ley-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #E5E7EB;background:#fff;
  font-family:inherit;font-size:12.5px;color:#171B21;border-radius:999px;padding:5px 12px;cursor:pointer;
  transition:border-color .15s,color .15s}
.ley-pill:hover{border-color:#C7DBFA}
.ley-pill:not(.on){border-color:transparent;color:#626A78}
.ley-pill:not(.on) .ley-m{opacity:.3}
.ley-pill.fija{cursor:default}
.ley-m{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.ley-guion{width:14px;height:3px;border-radius:2px}
.ley-rombo{width:8px;height:8px;border-radius:2px;transform:rotate(45deg)}

/* §5.4 paginador de tabla. Los <button> necesitan background y font-family
   explícitos o el navegador les pone su gris de control y su tipografía. */
/* Sin borde propio: el paginador SIEMPRE cuelga de una tabla y la última fila
   visible ya trae su línea de cierre. Con las dos se veía un borde doble. */
.paginador{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:10px}
th.th-gris{background:#F5F5F5!important;color:#626A78!important;border-bottom:1px solid #E5E7EB}
.dd.dd-mini{vertical-align:middle}
/* Variante para los que viven DENTRO de una frase: mismas medidas que el
   <select> nativo que reemplazan, o la línea crece y desborda. */
.dd.dd-frase{display:inline-block;vertical-align:baseline;width:auto;margin:0 2px;
  max-width:min(100%,calc(100vw - 64px))}
.dd.dd-frase>summary{max-width:100%;overflow:hidden}
@media(max-width:639px){
  label:has(> .dd.dd-frase){display:block}
  .dd.dd-frase{display:block;width:100%;max-width:100%;margin:6px 0 0}
  .dd.dd-frase .dd-panel{max-width:100%}
}
.dd.dd-frase>summary{height:auto;padding:1px 6px;font-size:inherit;font-family:inherit;
  border-radius:5px;gap:4px}
.dd.dd-frase>summary svg{width:11px;height:11px}
.dd.dd-frase .dd-panel{left:0;right:auto;min-width:0;max-width:min(240px,calc(100vw - 32px))}
.dd.dd-frase .dd-op{font-size:13px;padding:6px 12px}
.pg-cuenta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:#626A78}
.pg-controles{display:flex;align-items:center;gap:4px;margin-left:auto}
.pg-nav,.pg-num{height:32px;min-width:32px;padding:0 8px;border:1px solid transparent;background:none;
  font-family:inherit;font-size:13px;color:#626A78;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px}
.pg-num{font-variant-numeric:tabular-nums}
.pg-nav:hover:not([disabled]),.pg-num:hover:not(.on){background:#F5F5F5;color:#171B21}
.pg-nav[disabled]{opacity:.45;cursor:default}
.pg-num.on{border-color:#E5E7EB;color:#171B21;font-weight:600}
.pg-ventana{display:flex;align-items:center;gap:2px}
.pg-gap{color:#626A78;font-size:13px;padding:0 2px}
.pg-actual{display:none;font-family:'JetBrains Mono',monospace;font-size:11px;color:#171B21}
.pg-size select{height:32px;border:1px solid #E5E7EB;border-radius:6px;background:#fff;
  font-family:inherit;font-size:13px;color:#171B21;padding:0 6px 0 10px;cursor:pointer;margin-left:6px}
/* Bajo 640px cabe en UNA línea: se van etiquetas, cuenta y ventana. */
@media(max-width:640px){
  .pg-cuenta,.pg-ventana,.pg-txt{display:none}
  .pg-actual{display:inline}
  .pg-controles{margin-left:0;width:100%;justify-content:space-between;gap:6px}
}

/* La barra de scroll se esconde y el scroll queda. */
.results,.an-overlay,.hm-scroll,[style*="overflow-x:auto"]{scrollbar-width:none;-ms-overflow-style:none}
.results::-webkit-scrollbar,.an-overlay::-webkit-scrollbar,.hm-scroll::-webkit-scrollbar,
[style*="overflow-x:auto"]::-webkit-scrollbar{display:none}

/* Pie del modal: la fuente a la izquierda y el logo de Monitor a la derecha. */
.an-pie{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;margin-top:18px;
  padding-top:16px;border-top:1px solid #E5E7EB}
/* La fuente puede usar hasta la mitad del modal. Con el tope de 70ch se
   quedaba en un 31% del ancho y dejaba 700px en blanco antes del logo. */
.an-pie .meth-foot{margin-top:0;padding-top:0;border-top:0;flex:1 1 auto;max-width:50%}
@media(max-width:560px){.an-pie .meth-foot{max-width:none}}
.an-marca{display:flex;align-items:center;gap:8px;flex:none;opacity:.85}
.an-marca img.ico{width:26px;height:26px;display:block}
.an-marca img.wm{height:30px;width:auto;display:block}
@media(max-width:560px){.an-pie{flex-direction:column;align-items:flex-start;gap:14px}}

/* Expandir: círculo en la esquina inferior derecha de la tarjeta. */
.an-card .an-more,.longform-sec .an-more{position:absolute;right:18px;bottom:18px;
  margin-top:0;pointer-events:none;width:auto}
.an-more i{width:auto;height:auto;border:0;background:none;color:#9aa1ad;display:flex;
  align-items:center;justify-content:center;transition:color .15s ease}
.an-more svg{width:16px;height:16px}
.an-card:hover .an-more i,.longform-sec:hover .an-more i{color:#266FE0}

/* §5.16.1 — dropdown de <select>: el nativo se esconde y el panel se dibuja
   anclado bajo el disparador. Sin `select[data-dd]{display:none}` el control
   nativo queda a la vista JUNTO al nuevo. */
select[data-dd]{display:none}
.dd{position:relative;display:block}
.dd>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:14px;color:#171B21;background:#fff;
  border:1px solid #E5E7EB;border-radius:7px;padding:9px 11px;cursor:pointer;user-select:none}
.dd>summary::-webkit-details-marker{display:none}
.dd[open]>summary{border-color:#266FE0;box-shadow:0 0 0 3px rgba(38,111,224,.15)}
.dd>summary svg{flex:none;color:#626A78;transition:transform .18s}
.dd[open]>summary svg{transform:rotate(180deg)}
.dd.dd-off>summary{background:#F5F5F5;color:#9aa1ad;cursor:default}
.dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
.dd{max-width:100%}
.dd-panel{position:absolute;left:0;top:calc(100% + 4px);z-index:40;min-width:100%;
  max-width:min(560px,calc(100vw - 32px));max-height:320px;overflow-y:auto;background:#fff;
  border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 10px 24px rgba(23,27,33,.12);
  scrollbar-width:none;-ms-overflow-style:none}
@media(max-width:560px){.dd-panel{left:0;right:auto;max-width:100%}}
.dd-panel::-webkit-scrollbar{display:none}
.dd.dd-arriba .dd-panel{top:auto;bottom:calc(100% + 4px)}
.dd-op{display:block;width:100%;text-align:left;border:0;background:none;font-family:inherit;
  font-size:14px;color:#171B21;padding:8px 16px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dd-op:hover{background:#F5F5F5}
.dd-op.on{color:#266FE0;background:#E7F0FF}
.dd.dd-mini{display:inline-block;margin-left:6px}
.dd.dd-mini>summary{height:32px;padding:0 10px;font-size:13px;border-radius:6px;gap:6px}
.dd.dd-mini .dd-panel{left:auto;right:0;min-width:72px}
.dd.dd-mini .dd-op{font-size:13px;padding:7px 14px}
.dd.dd-inline{flex:none;min-width:132px}
.dd.dd-inline>summary{padding:7px 11px}

/* Congreso: una línea gris separa las secciones y cada una colapsa desde su
   chevrón. El selector de año usa el patrón <details> + panel del chrome. */
.pol{margin-top:22px;padding-top:22px;border-top:1px solid #E5E7EB}
.pol:first-child{margin-top:0;padding-top:0;border-top:0}
.pol-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pol-head h3{font-size:15px;margin:0}
.pol-tog{flex:1 1 auto;min-width:0;text-align:left;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;color:inherit}
.pol-acc{display:flex;align-items:center;gap:8px;flex:none}
.pol-chev{width:32px;height:32px;flex:none;border:1px solid transparent;background:none;border-radius:6px;
  cursor:pointer;color:#626A78;display:inline-flex;align-items:center;justify-content:center}
.pol-chev:hover{background:#F5F5F5;color:#171B21}
.pol-chev svg{width:16px;height:16px;transition:transform .18s}
.pol.cerrada .pol-chev svg{transform:rotate(-90deg)}
/* Cerrada, el selector no tiene sobre qué actuar. */
.pol.cerrada .anios{display:none}
.pol-anio{margin-top:10px}
.pol-vacio{font-size:13px;color:#626A78;margin:10px 0 0}
.anios{position:relative}
.anios>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid #E5E7EB;background:#fff;color:#626A78;border-radius:6px;padding:5px 10px;user-select:none}
.anios>summary::-webkit-details-marker{display:none}
.anios[open]>summary{border-color:#266FE0;color:#266FE0}
.anios>summary svg{width:12px;height:12px;transition:transform .18s}
.anios[open]>summary svg{transform:rotate(180deg)}
.anios-panel{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:#fff;
  border:1px solid #E5E7EB;border-radius:8px;padding:12px 16px;min-width:100%;
  box-shadow:0 10px 24px rgba(23,27,33,.12)}
.anios-panel label.chk{margin-top:9px;font-family:'JetBrains Mono',monospace;font-size:11px}
.anios-panel label.chk:first-child{margin-top:0}
@media(max-width:560px){.anios-panel{right:auto;left:0}}

/* Cronología: el botón de ver más/menos bajo las filas. */
.tl-mas{margin-top:12px}

/* §5.4 — barra de acciones de una tabla. El nombre de la columna es el dato;
   buscar y filtrar son acciones y viven FUERA del <th>, donde antes convivían
   con el título y se leían como parte de él. */
.camb-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
/* Las dos opciones se apilan en vez de desbordar: sus rótulos son frases, no
   una palabra, y a 320px no caben lado a lado. */
.camb-barra .seg{flex-wrap:wrap;max-width:100%}
.camb-barra .seg-op{flex:1 1 auto;justify-content:center;min-width:0}
.camb-acc{display:flex;gap:6px}
.tab-ico{width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #E5E7EB;border-radius:8px;background:#fff;color:#626A78;cursor:pointer;position:relative}
.tab-ico svg{width:17px;height:17px}
.tab-ico:hover{color:#171B21;border-color:#626A78}
.tab-ico.on{background:#E7F0FF;border-color:#266FE0;color:#266FE0}
/* Punto azul: el panel está cerrado pero sigue filtrando. */
.tab-ico.marcado::after{content:'';position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#266FE0}
.tab-panel{margin-top:12px;padding:14px 16px;background:#F5F5F5;border-radius:10px}
.tab-panel[hidden]{display:none}
.camb-filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px}
.camb-f{display:grid;gap:5px;min-width:0}
.camb-f>span{font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#626A78}
.camb-f :is(input,select){width:100%;font-family:'Hanken Grotesk',Arial,sans-serif;font-size:13px;color:#171B21;
  background:#fff;border:1px solid #E5E7EB;border-radius:7px;padding:7px 10px}
#camb-limpia{margin-top:12px}
/* El código del programa sí es un identificador: conserva la mono. */
.cb-tab tbody td .mono{font-family:'JetBrains Mono',monospace}

/* Cadena nacional: el h3 titula la card de la sección y el h4 las cards que
   van dentro. Mismo peso que el resumen de los plegables, para que las dos
   familias de card interna se lean igual. */
#cad-detail h4{font-size:16px;font-weight:600;line-height:1.3;margin:0 0 6px}

/* Las tres prioridades ya comparten alto —la grilla las estira—, pero su cita
   no mide lo mismo: el botón y la fuente quedaban a tres alturas distintas. El
   `margin-top:auto` del botón empuja ese pie al fondo de su card. */
.cg-prior{display:flex;flex-direction:column}
.cg-prior .cg-cita{margin-top:auto;align-self:flex-start}

/* «¿Cómo cambiaron sus énfasis?»: cada ley es una card plegable dentro de la
   card de la sección. Cerrada muestra el año y la bajada, que es lo que cambia
   de un año a otro; la cita queda a un clic. */
.cad-det{border:1px solid #E5E7EB;border-radius:10px;background:#fff;margin-top:12px}
.cad-det>summary{list-style:none;display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:14px 16px;cursor:pointer}
.cad-det>summary::-webkit-details-marker{display:none}
.cad-det>summary::after{content:'';flex:none;width:9px;height:9px;margin-right:4px;
  border-right:2px solid #626A78;border-bottom:2px solid #626A78;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.cad-det[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.cad-det-tit{min-width:0}
.cad-det-h{display:block;font-size:16px;font-weight:600;line-height:1.3;color:#171B21}
.cad-det>summary:hover .cad-det-h{color:#266FE0}
.cad-det-sub{display:block;font-size:13px;font-weight:300;color:#626A78;line-height:1.5;margin-top:3px}
.cad-det-cuerpo{padding:0 16px 16px}
.cad-det-cuerpo blockquote:first-child{margin-top:0}

/* A 375px los dos filtros de Rigidez legal caían uno por fila —165 + 204px no
   entran en 343— y el buscador quedaba tercero. Comparten fila a mitades: el
   disparador ya recorta con puntos suspensivos, así que encoger no esconde
   nada que no se recupere al abrirlo. Y en Vivienda y Obras Públicas el botón
   de descarga se iba a una fila propia bajo «Desde» y «Hasta»; con el hueco y
   el padding más justos entra con ellos. */
#rig-q{flex:1;min-width:200px}
@media(max-width:639px){
  #view-rigidez .ctrl-fila{gap:8px}
  #view-rigidez .ctrl-fila>:is(.dd,select){flex:1 1 0;min-width:0}
  #rig-q{flex:1 0 100%;min-width:0}
  .sector-controls{gap:10px}
  /* §5.4 ya esconde las etiquetas del paginador en móvil; acá es lo mismo: la
     palabra que sobra se va y el botón entra en la fila de «Desde» y «Hasta». */
  .cs-larga{display:none}
}

/* Elegir una ley o elegir un período son dos granularidades de la misma
   pregunta —y se excluyen—, así que comparten card y van en dos filas separadas
   por una línea, cada una con su selector. Lo usan Cadena nacional y Cambios
   entre leyes: en las dos, los años iban en pills —25 y 27, cinco filas a
   375px— y lo que el color de la pill codificaba (quién presentó la cadena;
   el signo del crecimiento anunciado) pasa al texto de la opción, que lo dice
   sin pedir que se decodifique contra una leyenda. */
.elige-otro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:#626A78}
.elige-otro select{width:auto;min-width:92px}
.elige-sel{display:grid;gap:6px;max-width:440px}
.elige-sel select{width:100%}
.elige{margin-top:14px}
.elige-rot{font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.1em;color:#626A78;margin-bottom:8px}
.elige-fila+.elige-fila{border-top:1px solid #E5E7EB;margin-top:16px;padding-top:16px}
.elige-pie{font-size:12px;color:#626A78;margin-top:10px}

/* Cadena nacional: el detalle se arma concatenando strings sueltos y sus cards
   quedaban una pegada a la otra, y el bloque entero pegado a «Mira el gobierno
   completo». Se le da el mismo ritmo que al resto del sitio. */
#cad-detail{margin-top:18px}
#cad-detail>:is(.card,article,details,.mu-stack,.mu-wide-scroll,div[style*="grid"]){margin-bottom:18px}
#cad-detail>.section-tag{margin-top:26px}
#cad-detail>.section-tag:first-child{margin-top:0}
#cad-detail>.tg{margin-top:14px}

/* Fonasa: mismo recorte a dos líneas que la grilla y el mismo botón de
   expandir en la esquina inferior derecha. */
.longform-sec{cursor:pointer;padding:26px 24px 30px;margin-bottom:18px;border-bottom:0}
/* La entrada de una vista va en card, igual que las tarjetas que la siguen;
   sin cursor ni hover, porque no abre nada. El último párrafo pierde su margen:
   el aire de abajo lo pone el padding de la card, y con los dos el hueco
   inferior quedaba al doble del superior. */
.vista-cab{margin-bottom:18px}
.vista-cab>p:last-child{margin-bottom:0}
.longform-sec:last-of-type{margin-bottom:0}
.longform-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.longform-sec .an-more{position:absolute;right:18px;bottom:18px;pointer-events:none}
.longform-sec:hover .an-more{color:#266FE0}

/* El modal ya no ofrece anterior/siguiente/copiar enlace. */
.an-nav[hidden]{display:none}

  .meth-guide{font-size:16px;line-height:1.7}
  .meth-guide .meth-intro{max-width:78ch;font-size:18px;color:#4B5563}
  .meth-guide>:is(article,.meth-orientation){margin:0 0 18px;scroll-margin-top:90px}
  .meth-guide>article>:first-child{margin-top:0}
  .meth-guide article h3{font-size:23px;line-height:1.3;margin:0 0 18px}
  .meth-guide article h4{font-size:18px;margin:24px 0 8px}
  .meth-guide p{margin:12px 0}.meth-guide li{margin:8px 0}
  .meth-guide ul,.meth-guide ol{padding-left:24px}
  .meth-guide a{color:#184D9B;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
  .meth-index{background:#F3F7FC;border-radius:12px;padding:16px 24px;margin:24px 0}
  .meth-index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;margin:0}
  .meth-index button{font:inherit;color:#184D9B;background:none;border:0;text-align:left;padding:8px 0;cursor:pointer;text-decoration:underline}
  .meth-guide :focus-visible{outline:3px solid #266FE0;outline-offset:4px}
  .meth-example{background:#F3F7FC;border-left:4px solid #266FE0;padding:18px 22px;border-radius:0 8px 8px 0;margin:20px 0}
  .meth-defs dt{font-weight:600;margin-top:18px}.meth-defs dd{margin:4px 0 16px}
  .meth-guide details:not(.dd){border:1px solid #D1D5DB;border-radius:8px;padding:14px 18px;margin:18px 0}
  .meth-guide summary{cursor:pointer;font-weight:600;color:#184D9B}
  .meth-table{overflow-x:auto}.meth-guide table{width:100%;min-width:560px;font-size:15px}
  .meth-guide th,.meth-guide td{white-space:normal;vertical-align:top;padding:12px;text-align:left}
  .meth-source-links{line-height:2.3}
  @media(max-width:600px){.meth-index ol{grid-template-columns:1fr}.meth-guide article h3{font-size:21px}}

/* MAQUETA: la tarjeta del universo encabeza la vista, a ancho completo.
   El layout de dos columnas —buscador a la izquierda, gráfico al lado—
   se conserva tal cual debajo. */
#mu-universo{margin-top:24px}
#mu-universo + .grid{margin-top:20px}

/* MAQUETA: recuadro del universo más bajo, para que el buscador suba.
   Se comprime el relleno, la altura de las tarjetas y los márgenes; el
   contenido es el mismo. */
#mu-universo.card{padding:16px 20px !important}
#mu-universo h3{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 12px}
#mu-universo .cal-tile{padding:11px 14px}
#mu-universo .cal-tile .lbl{font-size:10px;letter-spacing:.06em}
#mu-universo .cal-tile .val{font-size:26px;line-height:1.1;margin:3px 0 2px}
#mu-universo .cal-tile .det{font-size:11.5px;line-height:1.3}

/* Un elemento que solo es enfocable por su tabindex="-1" es DESTINO de foco
   —el <main> del skip link, las fichas del índice de Metodología, el párrafo
   al que salta «ver en el discurso»—, no un control. Chrome le enciende
   :focus-visible igual, y como al hacer clic en un punto muerto el foco sube
   al ancestro enfocable más cercano, bastaba tocar el fondo de la página para
   que el anillo azul enmarcara el <main> entero.
   Va al final del bloque a propósito: tiene la misma especificidad que
   `.meth-guide :focus-visible` y necesita ganarle. Lo que la persona sí
   recorre con Tab conserva su anillo —ninguno de esos lleva tabindex="-1"—,
   y el párrafo del discurso conserva su realce propio, que es más específico
   y sí informa a dónde saltó la lectura. */
[tabindex="-1"]:is(:focus,:focus-visible){outline:none}