/* Hallmark · genre: editorial · macrostructure: Portfolio Grid · theme: Newsprint (Chile-branded)
 * tone: editorial / civic-record · anchor hue: cool azul ~258 · accent: azul + rojo + estrella
 * nav: N6 Newspaper masthead · footer: Ft4 Dense colophon · enrichment: none (real portraits)
 * Portfolio Grid knobs: cards=uniform, filter=voto+busqueda, reveal=instant (Newsprint 0× motion)
 * pre-emit critique: P5 H4 E5 S4 R5 V4
 */

@import url("tokens.css");

/* ─────────────────────────────  Reset  ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }

* { margin: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-paper);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-inline: max(var(--space-md), env(safe-area-inset-left));
}

img { display: block; max-width: 100%; }

:focus-visible {
  outline: var(--rule-mid) solid var(--color-focus);
  outline-offset: 3px;
}

::selection { background: var(--color-accent); color: var(--color-paper); }

.shell { max-width: 72rem; margin-inline: auto; }

/* ─────────────────────────────  Masthead (N6)  ───────────────────────────── */
.masthead {
  padding-block: var(--space-md) var(--space-sm);
  border-bottom: var(--rule-bold) double var(--color-accent);
}
/* Estrella solitaria — lone-star canton, the brand mark */
.canton {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--space-sm);
  background: var(--color-accent);
  display: grid;
  place-items: center;
}
.canton svg { width: 64%; height: 64%; fill: var(--color-star); display: block; }
.masthead__issue {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  margin-bottom: var(--space-sm);
}
.masthead__wordmark {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.25rem, 7vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-align: center;
}
.masthead__wordmark a { color: inherit; text-decoration: none; }
.masthead__sub {
  text-align: center;
  font-style: italic;
  color: var(--color-muted);
  font-size: var(--text-md);
  margin-top: var(--space-2xs);
}

/* ─────────────────────────────  Verdict band (hero)  ───────────────────────────── */
.verdict {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
@media (min-width: 60rem) {
  .verdict { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.verdict__head { max-width: 40rem; min-width: 0; }
.verdict__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: manual;
  min-width: 0;
  text-wrap: balance;
}
.verdict__lede {
  margin-top: var(--space-md);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 42ch;
}
.verdict__name { color: var(--color-accent-red); font-style: normal; }

/* Status ledger — committee (confirmed) + Sala (pending) */
.ledger {
  border: var(--rule-mid) solid var(--color-rule-bold);
  background: var(--color-paper-2);
}
.ledger__row { padding: var(--space-md) var(--space-lg); }
.ledger__row + .ledger__row { border-top: var(--rule-hair) solid var(--color-rule); }
.ledger__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ledger__verdict {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.1;
  margin-top: var(--space-3xs);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.ledger__verdict[data-state="rechazar"] { color: var(--vote-contra); }
.ledger__verdict[data-state="aprobar"]  { color: var(--color-ink); }
.ledger__verdict[data-state="pendiente"] { color: var(--vote-pend); }
.ledger__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  letter-spacing: 0.02em;
}
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  font-variant-numeric: tabular-nums;
}
.tally__item { display: flex; align-items: baseline; gap: var(--space-2xs); }
.tally__n {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 700;
}
.tally__k {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.tally__n[data-v="favor"]  { color: var(--vote-favor); }
.tally__n[data-v="contra"] { color: var(--vote-contra); }
.tally__n[data-v="abst"]   { color: var(--vote-abst); }
.tally__n[data-v="pend"]   { color: var(--vote-pend); }

/* ─────────────────────────────  Section heads (S2 hanging)  ───────────────────────────── */
.section { padding-block: var(--space-2xl); }
.section--why { border-bottom: var(--rule-hair) solid var(--color-rule); }
.s-head { margin-bottom: var(--space-xl); }
.s-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.s-head__sub {
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-md);
}

/* ¿Por qué? — columned prose */
.why__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.why__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.3;
  max-width: 28ch;
}
.why__lead::first-letter {
  font-weight: 600;
  font-size: 3.4em;
  float: left;
  line-height: 0.74;
  padding-right: var(--space-xs);
  color: var(--color-accent-red);
}
.why__body p { max-width: 65ch; }
.why__body p + p { margin-top: var(--space-md); }
.why__charges {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-sm);
}
.why__charges li {
  padding-left: var(--space-lg);
  position: relative;
  max-width: 60ch;
}
.why__charges li::before {
  content: "§";
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-weight: 600;
}
.why__note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-sm);
}

/* ─────────────────────────────  Roster (Portfolio Grid)  ───────────────────────────── */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: var(--rule-mid) solid var(--color-rule-bold);
}
.filters { display: flex; flex-direction: column; gap: var(--space-xs); }
.filters__legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.filters__row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chipbtn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-bold);
  border-radius: 0;
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}
.chipbtn:hover { background: var(--color-paper-3); }
.chipbtn[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.chipbtn__c { font-size: 1.1em; line-height: 1; }

.search { display: flex; flex-direction: column; gap: var(--space-xs); }
.search__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.search__field {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-bold);
  border-radius: 0;
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  min-width: min(20rem, 70vw);
}
.search__field::placeholder { color: var(--color-neutral); }

.roster {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
/* Denser grid for the full 155-member chamber */
.roster--camara {
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
}
.controls__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-inline-start: auto;
  align-self: center;
}
select.search__field { cursor: pointer; }

/* ───────── Grouped chamber (by party / bloc) ───────── */
#camara-groups { display: grid; gap: var(--space-xl); }
.bloc { display: grid; gap: var(--space-lg); min-width: 0; }
.bloc[hidden] { display: none; }
.party-group { display: grid; gap: var(--space-md); min-width: 0; }
.party-group[hidden] { display: none; }

/* Sticky bloc label — political lean stays pinned while scrolling its parties */
.bloc-band {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-paper);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  border-bottom: var(--rule-bold) solid var(--color-ink);
  padding-block: var(--space-sm);
}
.bloc-band__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.02em;
}
.bloc-band__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.party-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.party-head__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
}
.party-head__bloc {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule);
  padding: 1px var(--space-2xs);
}
.party-head__tally { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.pt { white-space: nowrap; }
.pt + .pt::before { content: "·"; margin-inline: var(--space-2xs); color: var(--color-rule); }
.pt__n { font-weight: 700; font-variant-numeric: tabular-nums; }
.pt__n[data-v="favor"]   { color: var(--vote-favor); }
.pt__n[data-v="contra"]  { color: var(--vote-contra); }
.pt__n[data-v="abst"]    { color: var(--vote-abst); }
.pt__n[data-v="ausente"] { color: var(--vote-pend); }
.party-head__n {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

/* Dissenters — voted against their party's majority */
.rep--diss {
  border-color: var(--color-accent-red);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent-red);
}
.rep__flag {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-red);
  padding: var(--space-xs) var(--space-md) 0;
}

/* "Solo disidentes" toggle */
.chipbtn.toggle[aria-pressed="true"] {
  background: var(--color-accent-red);
  color: var(--color-paper);
  border-color: var(--color-accent-red);
}

/* Card — flat, hairline framed (no card-in-card, no side stripe) */
.rep {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  border: var(--rule-hair) solid var(--color-rule-bold);
  background: var(--color-paper);
}
.rep[hidden] { display: none; }

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-paper-3);
  overflow: hidden;
  border-bottom: var(--rule-hair) solid var(--color-rule-bold);
}
/* Initials fallback (sits behind the photo; shown when no photo file is present) */
.portrait::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  color: var(--color-neutral);
  z-index: var(--z-base);
}
/* Newsprint halftone dots over the portrait */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--color-rule-bold) 0.6px, transparent 0.7px);
  background-size: 4px 4px;
  opacity: 0.12;
  z-index: calc(var(--z-base) + 1);
  pointer-events: none;
}
.portrait img {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.rep__id { padding: var(--space-md) var(--space-md) 0; }
.rep__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.rep__role { font-size: var(--text-sm); color: var(--color-muted); font-style: italic; }
.rep__party {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: var(--space-sm) var(--space-md) 0;
  font-size: var(--text-sm);
}
.rep__party-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  border: var(--rule-hair) solid var(--color-rule);
  padding: 1px var(--space-2xs);
  color: var(--color-ink);
}
.rep__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.45;
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Vote chip — colour + glyph + word (never colour alone) */
.vote {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-weight: 700;
}
.vote__glyph {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.85rem;
  color: var(--color-paper);
}
.vote[data-v="favor"]  { background: var(--vote-favor-bg);  color: var(--vote-favor); }
.vote[data-v="contra"] { background: var(--vote-contra-bg); color: var(--vote-contra); }
.vote[data-v="abst"]   { background: var(--vote-abst-bg);   color: var(--vote-abst); }
.vote[data-v="pend"]   { background: var(--vote-pend-bg);   color: var(--vote-pend); }
.vote[data-v="ausente"] { background: var(--vote-pend-bg); color: var(--vote-pend); }
.vote[data-v="ausente"] .vote__glyph { background: var(--vote-pend); }
.vote[data-v="favor"]  .vote__glyph { background: var(--vote-favor); }
.vote[data-v="contra"] .vote__glyph { background: var(--vote-contra); }
.vote[data-v="abst"]   .vote__glyph { background: var(--vote-abst); }
.vote[data-v="pend"]   .vote__glyph { background: var(--vote-pend); }

.roster__empty {
  font-style: italic;
  color: var(--color-muted);
  padding: var(--space-xl) 0;
}
.roster__empty[hidden] { display: none; }

/* ─────────────────────────────  Sala pending  ───────────────────────────── */
.sala {
  border-block: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-2xl);
}
.sala__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .sala__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sala__cell {
  border: var(--rule-mid) solid var(--color-rule-bold);
  padding: var(--space-lg);
  text-align: center;
  background: var(--vote-pend-bg);
}
.sala__cell[data-v="favor"]  { background: var(--vote-favor-bg); }
.sala__cell[data-v="contra"] { background: var(--vote-contra-bg); }
.sala__cell[data-v="abst"]   { background: var(--vote-abst-bg); }
.sala__cell-k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.sala__cell-n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  color: var(--vote-pend);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-xs);
}
.sala__cell-n[data-v="favor"]  { color: var(--vote-favor); }
.sala__cell-n[data-v="contra"] { color: var(--vote-contra); }
.sala__cell-n[data-v="abst"]   { color: var(--vote-abst); }
.sala__hint {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 60ch;
}
.sala__hint strong { color: var(--color-ink); font-weight: 600; }

/* ─────────────────────────────  Colophon (Ft4)  ───────────────────────────── */
.colophon {
  border-top: var(--rule-bold) double var(--color-rule-bold);
  padding-block: var(--space-xl) var(--space-2xl);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-muted);
}
.colophon__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .colophon__grid { grid-template-columns: 1.2fr 1fr; }
}
.colophon h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.colophon p { max-width: 60ch; }
.colophon ol { padding-left: 1.4em; display: grid; gap: var(--space-2xs); }
.colophon a { color: var(--color-accent); text-decoration: none; word-break: break-word; }
.colophon a:hover { text-decoration: underline; }
.colophon__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.colophon__mark span { display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.04em; color: var(--color-muted); margin-top: var(--space-2xs); }

/* small print legend in the controls / skip link */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: static;
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
}