:root{ padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
  html{ color-scheme: light dark; }
  body{ margin:0; font:14px/1.5 system-ui, sans-serif; }
  img{ max-width:100%; }
  [hidden]{ display:none !important; }

  :root{
    --bg:#eef0e8;
    --surface:#ffffff;
    --surface-2:#e2e6d9;
    --ink:#14171c;
    --ink-soft:#52585f;
    --border:#cdd2c2;
    --red:#c81e2c;
    --red-ink:#7a1414;
    --gold:#a9781f;
    --gold-soft:#f2e2b3;
    --fiscal:#166e68;
    --fiscal-soft:#d9ece9;
    --laboral:#b45f1c;
    --laboral-soft:#f3e2cf;
    --mercantil:#463a6e;
    --mercantil-soft:#e3ddef;
    --otros:#575f68;
    --otros-soft:#e5e7e2;
    --congreso:#8a1c3d;
    --congreso-soft:#f1d9e0;
    --senado:#1c4a75;
    --senado-soft:#d9e4ee;
    --shadow: 0 1px 0 rgba(20,23,28,.05), 0 8px 20px -12px rgba(20,23,28,.35);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#11131a; --surface:#1a1d24; --surface-2:#20242c; --ink:#ece9e1; --ink-soft:#a8adb6;
      --border:#2c303a; --red:#ff6b5e; --red-ink:#ffb3a9; --gold:#dab35a; --gold-soft:#3a3220;
      --fiscal:#3fb3a8; --fiscal-soft:#183330; --laboral:#e2954a; --laboral-soft:#3a2a16;
      --mercantil:#a292d6; --mercantil-soft:#2a2440; --otros:#9aa1ab; --otros-soft:#242730;
      --congreso:#e26b8b; --congreso-soft:#3a1c26; --senado:#6ea3d6; --senado-soft:#1c2c3a;
      --shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
      --bg:#11131a; --surface:#1a1d24; --surface-2:#20242c; --ink:#ece9e1; --ink-soft:#a8adb6;
      --border:#2c303a; --red:#ff6b5e; --red-ink:#ffb3a9; --gold:#dab35a; --gold-soft:#3a3220;
      --fiscal:#3fb3a8; --fiscal-soft:#183330; --laboral:#e2954a; --laboral-soft:#3a2a16;
      --mercantil:#a292d6; --mercantil-soft:#2a2440; --otros:#9aa1ab; --otros-soft:#242730;
      --congreso:#e26b8b; --congreso-soft:#3a1c26; --senado:#6ea3d6; --senado-soft:#1c2c3a;
      --shadow: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:'Work Sans','Segoe UI',Arial,sans-serif;
    padding-inline:16px; padding-block:0; margin:0;
    -webkit-font-smoothing:antialiased;
  }
  @media (min-width:720px){ body{ padding-inline:32px; } }
  .wrap{ max-width:1100px; margin:0 auto; }

  h1,h2,h3,.display{
    font-family:'Anton','Arial Narrow',sans-serif; text-transform:uppercase;
    letter-spacing:.01em; text-wrap:balance; line-height:1.02;
  }
  .mono{ font-family:'IBM Plex Mono','Consolas',monospace; }
  a{ color:inherit; }

  /* ---------- Masthead ---------- */
  .masthead{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--bg);
    padding-top:calc(18px + env(safe-area-inset-top,0px)); padding-bottom:10px;
    border-bottom:3px solid var(--ink);
  }
  .masthead-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .brand .title1{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(26px,5.4vw,44px); line-height:1; }
  .brand .title1 span{ color:var(--red); }
  .tagline{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
  .edition-date{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); text-align:right; }
  .tabs{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
  .tab{
    font-family:'Anton',sans-serif; text-transform:uppercase; font-size:14px; padding:9px 16px;
    border:2px solid var(--ink); border-radius:3px; background:var(--surface); color:var(--ink); cursor:pointer;
  }
  .tab[aria-selected="true"]{ background:var(--ink); color:var(--bg); }
  .tab:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

  /* ---------- Ticker ---------- */
  .ticker{ background:var(--red); color:#fff; overflow:hidden; white-space:nowrap; }
  .ticker-inner{ display:inline-flex; gap:48px; padding:8px 0; animation:scroll-left 46s linear infinite; }
  .ticker:hover .ticker-inner{ animation-play-state:paused; }
  .ticker span{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; }
  .ticker b{ font-family:'Anton',sans-serif; font-size:13px; margin-right:8px; }
  @keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .ticker{overflow-x:auto;} .ticker-inner{animation:none;} }

  /* ---------- Day strip ---------- */
  .daystrip{ display:flex; gap:8px; overflow-x:auto; padding:14px 0 4px; }
  .daypill{
    flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:12px; border:1px solid var(--border);
    background:var(--surface); color:var(--ink-soft); padding:6px 12px; border-radius:999px; cursor:pointer;
  }
  .daypill[aria-selected="true"]{ background:var(--gold-soft); color:var(--ink); border-color:var(--gold); font-weight:600; }

  section.view{ padding-block:20px 60px; }
  section.view[hidden]{ display:none !important; }

  /* ---------- Stats ---------- */
  .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:22px; }
  .stat{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; box-shadow:var(--shadow); }
  .stat .n{ font-family:'Anton',sans-serif; font-size:26px; line-height:1; }
  .stat .label{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
  .meter{ height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:8px; }
  .meter i{ display:block; height:100%; border-radius:4px; }

  /* ---------- Articles ---------- */
  .frontpage{ display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:760px){
    .frontpage{ grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; }
    .story.lead{ grid-column:span 3; }
    .story.md{ grid-column:span 3; }
  }
  @media (min-width:980px){
    .story.md{ grid-column:span 1; }
  }
  .story{
    background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px;
    display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow);
    border-top:5px solid var(--cat,var(--otros));
  }
  .kicker{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .pill{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    padding:3px 8px; border-radius:999px; background:var(--catsoft,var(--otros-soft)); color:var(--cat,var(--otros)); font-weight:600;
  }
  .story h3{ font-size:clamp(18px,2.6vw,24px); margin:0; }
  .story.lead h3{ font-size:clamp(26px,4.4vw,40px); }
  .standfirst{ margin:0; font-size:15px; line-height:1.5; font-weight:500; }
  .story.lead .standfirst{ font-size:17px; }
  .articlebody{ display:flex; flex-direction:column; gap:10px; margin-top:2px; }
  .articlebody p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--ink-soft); max-width:68ch; }
  details.reader > summary{
    cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--cat,var(--otros)); font-weight:600; list-style:none; padding:4px 0;
  }
  details.reader > summary::-webkit-details-marker{ display:none; }
  details.reader > summary::before{ content:"▸ "; }
  details.reader[open] > summary::before{ content:"▾ "; }
  details.reader > summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .foot{ margin-top:auto; display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--ink-soft); flex-wrap:wrap; border-top:1px dashed var(--border); padding-top:9px; }
  .foot .ref{ font-family:'IBM Plex Mono',monospace; }
  .srclink{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--cat,var(--otros)); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

  .aside-note{
    background:var(--surface-2); border:1px dashed var(--border); border-radius:10px; padding:14px 16px;
    font-size:13px; color:var(--ink-soft); margin-top:16px; line-height:1.55;
  }
  .aside-note b{ color:var(--ink); }

  /* ---------- Cortes ---------- */
  .manifesto{
    background:var(--ink); color:var(--bg); border-radius:10px; padding:16px 18px; margin-bottom:16px;
  }
  .manifesto h2{ font-size:clamp(17px,3vw,22px); margin:0 0 6px; color:var(--gold); }
  .manifesto p{ margin:0; font-size:13.5px; line-height:1.55; opacity:.92; max-width:70ch; }

  .chambers{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .chamber-card{
    flex:1 1 220px; background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:14px 16px; box-shadow:var(--shadow); border-left:5px solid var(--cc,var(--otros));
  }
  .chamber-card .h{ font-family:'Anton',sans-serif; font-size:13px; letter-spacing:.03em; color:var(--cc,var(--otros)); }
  .chamber-card .who{ font-size:18px; font-weight:700; margin:.2em 0; }
  .chamber-card .meta{ font-size:12px; color:var(--ink-soft); }

  .scoreboard{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow); }
  .scoreboard h3{ font-size:15px; margin:0 0 4px; }
  .scoreboard .sub{ font-size:12px; color:var(--ink-soft); margin:0 0 12px; line-height:1.5; }
  .scorerow{ display:grid; grid-template-columns:minmax(90px,150px) 1fr 28px; gap:10px; align-items:center; margin-bottom:7px; }
  .scorerow .g{ font-size:12.5px; font-weight:600; }
  .scorerow .bar{ height:10px; background:var(--surface-2); border-radius:5px; overflow:hidden; }
  .scorerow .bar i{ display:block; height:100%; background:var(--gold); border-radius:5px; }
  .scorerow .v{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }

  .feed{ display:flex; flex-direction:column; gap:14px; }
  .acard{
    background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px;
    border-left:5px solid var(--cc,var(--otros)); box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:9px;
  }
  .acard .row1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .tag-cc{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; padding:3px 8px;
    border-radius:999px; background:var(--ccsoft,var(--otros-soft)); color:var(--cc,var(--otros)); font-weight:700; }
  .tstamp{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); }
  .acard h3{ font-size:clamp(18px,2.8vw,26px); margin:0; }
  blockquote.pull{
    margin:4px 0; padding:10px 14px; border-left:4px solid var(--cc,var(--otros));
    background:var(--ccsoft,var(--otros-soft)); border-radius:0 8px 8px 0;
  }
  blockquote.pull p{ margin:0; font-size:15px; line-height:1.5; font-style:italic; color:var(--ink); }
  blockquote.pull cite{ display:block; margin-top:6px; font-size:11.5px; font-style:normal; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }

  footer{ text-align:center; font-size:11.5px; color:var(--ink-soft); padding:20px 0 40px; font-family:'IBM Plex Mono',monospace; line-height:1.7; }

  /* ---------- Accesibilidad y jerarquía de encabezados ---------- */
  /* Secciones que el diseño identifica con pestañas necesitan igualmente un
     encabezado real: sin él, la página salta de h1 a h3 y ni un lector de
     pantalla ni un rastreador saben dónde empieza cada bloque. */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  h1.title1{ margin:0; }

  /* ---------- Archivo de ediciones ---------- */
  ul.archivo{ list-style:none; padding:0; margin:0 0 22px; }
  ul.archivo li{
    display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
    padding:9px 2px; border-bottom:1px dashed var(--border); font-size:14px;
  }
  ul.archivo li a{ font-weight:600; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
  ul.archivo .arch-tit{ color:var(--ink-soft); font-size:13px; }
  .view > h2{ font-size:15px; margin:22px 0 6px; color:var(--ink-soft); letter-spacing:.04em; }


/* ==========================================================================
   PORTADA — jerarquía de periódico
   ========================================================================== */

/* Iconografía: hereda el color de la categoría vía currentColor */
.ico{ width:1em; height:1em; flex:0 0 auto; vertical-align:-0.13em; }

/* --- Cabecera y rótulos --- */
.masthead{ border-bottom-width:5px; }
.brand .title1{ font-size:clamp(28px,6.2vw,58px); letter-spacing:-0.005em; }

.daystrip{ gap:6px; padding:16px 0 6px; }
a.daypill{
  text-decoration:none; font-weight:600; letter-spacing:.04em;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
a.daypill:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
a.daypill[aria-current="page"]{ background:var(--gold-soft); color:var(--ink); border-color:var(--gold); font-weight:700; }
a.daypill.archivo{ border-style:dashed; color:var(--red); font-weight:700; }


/* --- Rótulo de sección --- */
.rotulo{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:38px 0 16px; padding-bottom:8px;
  border-bottom:3px solid var(--ink);
}
.rotulo h2{
  font-size:clamp(24px,5vw,40px); margin:0; line-height:1;
  text-transform:uppercase;
}
.rotulo.cortes h2{ color:var(--congreso); }

/* --- Pieza principal --- */
.lead{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--surface); border:1px solid var(--border);
  border-top:7px solid var(--cat,var(--otros));
  border-radius:12px; padding:26px 26px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
}
.lead-marca{
  position:absolute; z-index:-1; right:-44px; top:-38px;
  color:var(--cat,var(--otros)); opacity:.09; pointer-events:none;
}
.lead-marca .ico{ width:230px; height:230px; stroke-width:1.1; }
.lead-h{
  font-size:clamp(28px,6.4vw,62px); margin:0; line-height:.96; letter-spacing:-0.01em;
}
.lead-sub{
  margin:0; font-size:clamp(15px,2.2vw,19px); line-height:1.5;
  color:var(--ink); max-width:60ch; font-weight:500;
}
.lead.cortes{ border-top-color:var(--cat); }
.lead .pull{ margin:2px 0 0; }

/* --- Destacados --- */
.rejilla{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px; }
@media (min-width:760px){ .rejilla{ grid-template-columns:repeat(3,1fr); } }
.tarjeta{
  background:var(--surface); border:1px solid var(--border);
  border-top:5px solid var(--cat,var(--otros));
  border-radius:10px; padding:16px 18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .13s ease, box-shadow .13s ease;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:0 10px 26px -14px rgba(20,23,28,.5); }
.tarjeta h3{ font-size:clamp(17px,2.4vw,22px); margin:0; line-height:1.03; }
.linea{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-soft); }

.pill{ display:inline-flex; align-items:center; gap:5px; }
.pill.ghost{ background:transparent; border:1px solid var(--border); color:var(--ink-soft); }


/* --- Cortes: cámaras --- */
.chamber-card{ padding:12px 14px; }
.chamber-card .h{ display:flex; align-items:center; gap:6px; }
.chamber-card .who{ font-size:16px; }

.manifesto{ padding:14px 18px; }
.manifesto p{ font-size:13px; }

/* Los rótulos de sección del archivo no deben heredar el tamaño del rótulo */
.view > h2:not(#h-boe):not(#h-cortes){ font-size:15px; }

@media (prefers-reduced-motion: reduce){
  .tarjeta, ol.indice a{ transition:none; }
  .tarjeta:hover{ transform:none; }
}

/* En móvil la marca de agua caía detrás del titular: se reduce y se aparta. */
@media (max-width:640px){
  .lead{ padding:20px 18px 16px; }
  .lead-marca{ right:-30px; top:-26px; }
  .lead-marca .ico{ width:130px; height:130px; }
  .kpi{ padding:12px 10px; }
  .rotulo{ margin-top:28px; }
}

/* ==========================================================================
   TIPOGRAFÍA — Anton solo donde manda
   ==========================================================================
   Anton es una condensada muy pesada: funciona para la cabecera y para el
   titular principal, y cansa para todo lo demás. Los titulares secundarios
   pasan a Work Sans con peso, y el texto de apoyo a una serif de lectura.  */

.tarjeta h3,
.story h3, .acard h3,
.idx-t{
  font-family:'Work Sans','Segoe UI',Arial,sans-serif;
  font-weight:700; letter-spacing:.005em; line-height:1.22;
  text-transform:none;
}
.story.lead h3{
  font-family:'Anton',sans-serif; font-weight:400;
  letter-spacing:.01em; line-height:1.02;
}
.tarjeta h3{ font-size:clamp(16px,2.1vw,19px); }
.story h3{ font-size:clamp(17px,2.3vw,21px); }
.acard h3{ font-size:clamp(18px,2.5vw,23px); }

/* Texto de apoyo: serif, que es lo que da el aire editorial y se lee mejor */
.lead-sub, .linea, .standfirst{
  font-family:'Lora',Georgia,'Times New Roman',serif;
  font-weight:400;
}
.lead-sub{ font-size:clamp(16px,2.1vw,20px); line-height:1.55; }
.linea{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.standfirst{ font-size:15.5px; line-height:1.6; }
blockquote.pull p{ font-family:'Lora',Georgia,serif; }

/* --- Cintillo de cabecera --- */
.dateline{
  margin:14px 0 2px; padding:9px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.03em;
  color:var(--ink-soft); text-transform:uppercase;
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
}
.dateline b{ color:var(--ink); }
.dateline a{ color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.dateline .sep{ opacity:.4; }

/* --- "Sigue en la edición": sustituye al listado de titulares --- */
.sigue{ margin:22px 0 0; }
.sigue a{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px; text-decoration:none; color:inherit;
  border:2px dashed var(--border); border-radius:12px;
  transition:border-color .14s ease, background .14s ease;
}
.sigue a:hover{ border-color:var(--red); background:var(--surface); }
.sigue-n{
  font-family:'Anton',sans-serif; font-size:clamp(28px,5vw,42px);
  line-height:1; color:var(--red);
}
.sigue a > span:nth-child(2){
  font-family:'Lora',Georgia,serif; font-size:15px; line-height:1.45;
  color:var(--ink-soft); max-width:46ch;
}
.sigue-f{ margin-left:auto; font-size:22px; color:var(--red); }
.sigue.cortes .sigue-n, .sigue.cortes .sigue-f{ color:var(--congreso); }
.sigue.cortes a:hover{ border-color:var(--congreso); }

/* --- Página por norma -------------------------------------------------- */
.miga{font:500 11px/1.4 "Work Sans",system-ui,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;opacity:.72;margin:14px 0 6px}
.miga a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.miga span[aria-current]{opacity:.6}
.norma{max-width:44rem;margin:0 auto 28px}
.norma h1.display{font-size:clamp(26px,5.4vw,46px);line-height:1.02;margin:4px 0 12px}
.norma .entradilla{font:400 17px/1.55 Lora,Georgia,serif;margin:0 0 18px;opacity:.9}
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 22px;
  padding:14px 16px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);
  border-left:4px solid #c81e2c;font:14px/1.5 "Work Sans",system-ui,sans-serif}
.ficha dt{font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.05em;
  opacity:.7;align-self:center}
.ficha dd{margin:0}
.norma .cuerpo p{font:400 16px/1.65 Lora,Georgia,serif;margin:0 0 14px}
.norma .fuente{font:500 13px/1.5 "IBM Plex Mono",ui-monospace,monospace;opacity:.8;
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);padding-top:12px}
.relacionadas ul.indice{list-style:none;padding:0;margin:8px 0 0}
.relacionadas ul.indice li{padding:7px 0;border-bottom:1px dotted
  color-mix(in srgb,currentColor 25%,transparent)}
.relacionadas ul.indice a{color:inherit;text-decoration:none;
  font:600 14px/1.35 "Work Sans",system-ui,sans-serif}
.relacionadas ul.indice a:hover{text-decoration:underline}

/* --- Listas de índice: nota secundaria bajo cada entrada --------------- */
ul.indice .nota{display:block;font:400 12px/1.45 "Work Sans",system-ui,sans-serif;
  opacity:.68;margin-top:2px}
ul.indice .ref{display:block;font:500 11px/1.5 "IBM Plex Mono",ui-monospace,monospace;
  opacity:.72;letter-spacing:.02em;margin-top:2px}
.relacionadas .srclink{display:inline-block;margin:0 10px 8px 0}

/* --- Parlamentarios ---------------------------------------------------- */
.hemi-caja{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;
  align-items:center;margin:6px 0 26px}
@media (max-width:640px){.hemi-caja{grid-template-columns:1fr}}
.hemiciclo{width:100%;height:auto;display:block}
.hemi-total{font:800 42px/1 "Work Sans",system-ui,sans-serif;fill:currentColor}
.hemi-pie{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;fill:currentColor;
  opacity:.6;letter-spacing:.12em;text-transform:uppercase}
.leyenda-grupos{list-style:none;margin:0;padding:0;min-width:190px}
.leyenda-grupos li{border-bottom:1px dotted color-mix(in srgb,currentColor 25%,transparent)}
.leyenda-grupos a{display:flex;align-items:center;gap:9px;padding:6px 2px;color:inherit;
  text-decoration:none;font:600 13px/1.3 "Work Sans",system-ui,sans-serif}
.leyenda-grupos a:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.leyenda-grupos i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.leyenda-grupos b{margin-left:auto;font:600 13px/1 "IBM Plex Mono",ui-monospace,monospace}

.rejilla-dip{list-style:none;padding:0;margin:8px 0 26px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;
  background:color-mix(in srgb,currentColor 16%,transparent);
  border:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.rejilla-dip li{background:var(--papel,#f4f2ec)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rejilla-dip li{background:#131211}}
.rejilla-dip a{display:block;padding:11px 13px;color:inherit;text-decoration:none}
.rejilla-dip a:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.dip-nombre{display:block;font:700 14px/1.25 "Work Sans",system-ui,sans-serif}
.dip-meta{display:block;font:500 11px/1.5 "IBM Plex Mono",ui-monospace,monospace;
  opacity:.72;letter-spacing:.02em;margin-top:2px}
.dip-cifras{display:block;font:400 12px/1.4 Lora,Georgia,serif;opacity:.78;margin-top:3px}

.provincias{list-style:none;padding:0;margin:8px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px 14px}
.provincias a{display:flex;justify-content:space-between;gap:8px;padding:4px 0;color:inherit;
  text-decoration:none;font:500 13px/1.4 "Work Sans",system-ui,sans-serif;
  border-bottom:1px dotted color-mix(in srgb,currentColor 22%,transparent)}
.provincias a:hover{text-decoration:underline}
.provincias .ref{font:600 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;opacity:.6}

.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px 22px;margin:10px 0 26px}
.metrica-cab{display:flex;justify-content:space-between;align-items:baseline;
  font:600 12px/1.4 "Work Sans",system-ui,sans-serif}
.metrica-cab b{font:700 17px/1 "IBM Plex Mono",ui-monospace,monospace}
.barra{height:7px;margin:5px 0 3px;background:color-mix(in srgb,currentColor 14%,transparent)}
.barra i{display:block;height:100%;background:#c81e2c}
.metrica-pie{font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;opacity:.62}

/* ---------------------------------------------------------------- buscador */
.buscador { margin: 0 0 2rem; }

.buscador-caja { position: relative; }

.buscador-input {
  width: 100%;
  box-sizing: border-box;
  padding: .95rem 2.6rem .95rem 1rem;
  font: inherit;
  font-size: 1.15rem;
  border: 2px solid var(--rule, #d6d2c8);
  border-radius: 3px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.buscador-input:focus {
  outline: none;
  border-color: var(--accent, #9b1c1c);
  box-shadow: 0 0 0 3px rgba(155, 28, 28, .12);
}
.buscador-input::-webkit-search-cancel-button { display: none; }

.buscador-limpiar {
  position: absolute;
  right: .45rem; top: 50%;
  transform: translateY(-50%);
  width: 2rem; height: 2rem;
  border: 0; background: none;
  font-size: 1.4rem; line-height: 1;
  color: #8a8478; cursor: pointer;
}
.buscador-limpiar:hover { color: var(--accent, #9b1c1c); }

.buscador-filtros {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .8rem 0 0;
}

.buscador-pista {
  margin: .9rem 0 0;
  font-size: .85rem;
  color: #6c665c;
}
.buscador-pista kbd {
  font: inherit;
  border: 1px solid var(--rule, #d6d2c8);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 .3em;
  background: #faf8f4;
}

.res-lista { list-style: none; margin: 1rem 0 0; padding: 0; }

.res { border-top: 1px solid var(--rule, #d6d2c8); }
.res:last-child { border-bottom: 1px solid var(--rule, #d6d2c8); }

.res > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .1rem .8rem;
  padding: .7rem .6rem;
  text-decoration: none;
  color: inherit;
}
.res > a:hover, .res-activo > a {
  background: #f6f3ec;
  box-shadow: inset 3px 0 0 var(--accent, #9b1c1c);
}

.res-clase {
  grid-column: 2; grid-row: 1;
  align-self: start;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8478;
  white-space: nowrap;
}
.res-norma { color: #9b1c1c; }
.res-diputado { color: #1d4e6b; }
.res-cortes { color: #6b4b1d; }

.res-titulo {
  grid-column: 1; grid-row: 1;
  font-weight: 700;
  line-height: 1.3;
}
.res-sub {
  grid-column: 1; grid-row: 2;
  font-size: .85rem;
  color: #5c574e;
  line-height: 1.4;
}
.res-fecha {
  grid-column: 2; grid-row: 2;
  align-self: end;
  font-size: .75rem;
  color: #8a8478;
  white-space: nowrap;
}
.res mark { background: #fbe9a7; color: inherit; padding: 0 .1em; }

.buscador-fallback { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.buscador-fallback input[type="search"] { flex: 1 1 14rem; padding: .6rem; font: inherit; }

@media (max-width: 34rem) {
  .res > a { grid-template-columns: minmax(0, 1fr); }
  .res-clase, .res-fecha { grid-column: 1; grid-row: auto; text-align: left; }
}

/* Caja de búsqueda de la cabecera. No hace nada por JavaScript: es un
   formulario GET normal que lleva a /buscar/?q=…, así que funciona igual con
   el bundle cargado que sin él. */
.masthead-aux { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }

.masthead-buscar { display: flex; gap: .3rem; }
.masthead-buscar input[type="search"] {
  width: 15rem; max-width: 42vw;
  padding: .4rem .55rem;
  font: inherit; font-size: .85rem;
  border: 1px solid var(--rule, #d6d2c8);
  border-radius: 3px; background: #fff;
  -webkit-appearance: none; appearance: none;
}
.masthead-buscar input[type="search"]:focus {
  outline: none; border-color: var(--accent, #9b1c1c);
}
.masthead-buscar button {
  padding: .4rem .7rem;
  font: inherit; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--rule, #d6d2c8);
  border-radius: 3px; background: #faf8f4;
  color: inherit; cursor: pointer;
}
.masthead-buscar button:hover { border-color: var(--accent, #9b1c1c); color: var(--accent, #9b1c1c); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 40rem) {
  .masthead-aux { align-items: stretch; width: 100%; }
  .masthead-buscar input[type="search"] { width: 100%; max-width: none; }
  .masthead-aux .edition-date { text-align: left; }
}

/* ------------------------------------------------- hemiciclo interactivo */
/* La capa de React se monta encima del SVG que ya viene servido: sin
   JavaScript el dibujo y la leyenda siguen ahí, y lo que se añade son los
   controles. Por eso los estilos del escaño van sobre el SVG estático. */

.escano {
  transition: opacity .12s ease, transform .12s ease, stroke-width .12s ease;
  stroke: transparent;
  stroke-width: 0;
  transform-box: fill-box;
  transform-origin: center;
}
#hemiciclo-app ~ * .escano, .hemi-caja .escano { cursor: pointer; }

.escano:hover, .escano:focus {
  stroke: #1b1a17;
  stroke-width: 2.2;
  outline: none;
}

/* Cuando hay un filtro activo, lo que no encaja se apaga en vez de
   desaparecer: así se ve de un vistazo cuánta cámara es y cuánta no. */
#hemiciclo.filtrando .escano.apagado { opacity: .13; }
#hemiciclo.filtrando .escano.vivo {
  stroke: #1b1a17;
  stroke-width: 1.6;
  transform: scale(1.18);
}

/* La ficha flotante se posiciona respecto a este contenedor, que está
   debajo del SVG: por eso su «top» sale negativo y no puede haber
   overflow recortando aquí. */
.hemi-interactivo { position: relative; margin: .2rem 0 0; }

.hemi-controles {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .9rem 0 0;
  border-top: 1px solid var(--rule, #d6d2c8);
}

.hc-fila { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

.hc-buscar {
  flex: 1 1 16rem;
  min-width: 0;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .95rem;
  border: 1px solid var(--rule, #d6d2c8);
  border-radius: 3px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.hc-buscar:focus { outline: none; border-color: var(--accent, #9b1c1c); }
.hc-buscar::-webkit-search-cancel-button { display: none; }

.hc-limpiar {
  padding: .5rem .8rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--rule, #d6d2c8);
  border-radius: 3px;
  background: #faf8f4;
  color: #6c665c;
  cursor: pointer;
}
.hc-limpiar:hover { border-color: var(--accent, #9b1c1c); color: var(--accent, #9b1c1c); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .62rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid var(--rule, #d6d2c8);
  border-radius: 999px;
  background: #fff;
  color: #46423b;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover { border-color: #a9a294; }
.chip i {
  width: .62rem; height: .62rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--c, #8a8478);
}
.chip b { font-variant-numeric: tabular-nums; color: #8a8478; font-weight: 500; }

/* El chip encendido toma el color del grupo, que llega en línea como --c:
   así no hay nueve reglas duplicadas y el color es siempre el mismo que el
   del escaño en el SVG. */
.chip.on {
  background: var(--c, #1b1a17);
  border-color: var(--c, #1b1a17);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}
.chip.on i { background: #fff; }
.chip.on b { color: rgba(255, 255, 255, .85); }

.chip.marca.on { background: #1b1a17; border-color: #1b1a17; color: #fff; }

.hc-resumen {
  margin: .1rem 0 0;
  font-size: .82rem;
  color: #6c665c;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ ficha flotante */
.ficha-flotante {
  position: absolute;
  z-index: 40;
  width: min(20rem, 82vw);
  padding: .8rem .9rem .7rem;
  background: #fffdf8;
  border: 1px solid #1b1a17;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(27, 26, 23, .18);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}
.ficha-flotante::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 12px; height: 12px;
  margin-left: -6px;
  background: #fffdf8;
  border-right: 1px solid #1b1a17;
  border-bottom: 1px solid #1b1a17;
  transform: rotate(45deg);
}

/* Cuando el escaño está muy arriba, la ficha se dibuja debajo y la flecha
   cambia de lado: sin esto, la tarjeta de las primeras filas se salía por
   encima de la ventana y no se leía el nombre. */
.ficha-flotante.ff-abajo { transform: translate(-50%, 14px); }
.ficha-flotante.ff-abajo::after {
  bottom: auto;
  top: -7px;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid #1b1a17;
  border-top: 1px solid #1b1a17;
}

.ff-grupo {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a8478;
}
.ff-nombre {
  margin: .15rem 0 .5rem;
  font-size: 1.05rem;
  line-height: 1.2;
}

.ff-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .8rem;
  margin: 0;
  padding: .5rem 0 0;
  border-top: 1px solid var(--rule, #d6d2c8);
}
.ff-datos > div { display: flex; justify-content: space-between; gap: .5rem; }
.ff-datos dt { font-size: .72rem; color: #6c665c; margin: 0; }
.ff-datos dd {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ff-disidencia { grid-column: 1 / -1; }
.ff-disidencia dd { color: var(--accent, #9b1c1c); }

.ff-ultima {
  margin: .55rem 0 0;
  padding: .45rem 0 0;
  border-top: 1px solid var(--rule, #d6d2c8);
  font-size: .78rem;
  line-height: 1.4;
  color: #46423b;
}
.ff-ultima span {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8478;
  margin-bottom: .1rem;
}

.ff-pie {
  margin: .5rem 0 0;
  font-size: .7rem;
  color: #8a8478;
  font-style: italic;
}

.hemi-resultados { margin-top: 1rem; }
.dip.vacio {
  padding: 1rem;
  color: #6c665c;
  font-style: italic;
  border: 1px dashed var(--rule, #d6d2c8);
}

/* En pantalla táctil no hay hover: la ficha aparece al tocar, así que se
   ancla abajo en vez de flotar sobre el dedo. */
@media (hover: none) {
  .ficha-flotante {
    position: fixed;
    left: 50% !important;
    top: auto !important;
    bottom: .6rem;
    transform: translateX(-50%);
  }
  .ficha-flotante::after { display: none; }
}