:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface-alt: #f4f1ec;
  --fg: #1c1c1c;
  --fg-soft: #444;
  --muted: #666;
  --accent: #1f4a8b;
  --accent-soft: #e8eef7;
  --border: #ddd;
  --border-soft: #f0eee9;
  --chart-bg: #fafafa;
  --chart-grid: #ececec;
}
/* Dark palette — applied when the OS prefers dark (unless the user forced light)
   or when the user explicitly toggled dark via data-tema. */
:root[data-tema="dark"] {
  --bg: #15140f;
  --surface: #201e1a;
  --surface-alt: #2a2723;
  --fg: #ececec;
  --fg-soft: #cfccc6;
  --muted: #a09c95;
  --accent: #7fb0ea;
  --accent-soft: #1e2a3a;
  --border: #3a372f;
  --border-soft: #2c2925;
  --chart-bg: #1b1a16;
  --chart-grid: #34302a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --bg: #15140f;
    --surface: #201e1a;
    --surface-alt: #2a2723;
    --fg: #ececec;
    --fg-soft: #cfccc6;
    --muted: #a09c95;
    --accent: #7fb0ea;
    --accent-soft: #1e2a3a;
    --border: #3a372f;
    --border-soft: #2c2925;
    --chart-bg: #1b1a16;
    --chart-grid: #34302a;
  }
}
:root { color-scheme: light; }
:root[data-tema="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="light"]) { color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.55 "futura-pt","Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface); position: relative; }
/* header wordmark — scaled copy of the Coming Soon Trajan lockup */
.brand-logo { display: inline-block; text-decoration: none; color: var(--fg); }
.brand-logo .bl1 { display: block; font-family: "trajan-pro-3", serif; font-weight: 400;
  font-variant: small-caps; font-variant-caps: small-caps; font-size: 18px; line-height: 1;
  letter-spacing: 0.08em; text-indent: 0.08em; white-space: nowrap; }
.brand-logo .bl-rule { display: block; border-top: 1px solid var(--fg);
  margin: 2px 0 3px; width: 100%; }
.brand-logo .bl2 { display: block; font-family: "trajan-pro-3", serif; font-weight: 400;
  font-variant: small-caps; font-variant-caps: small-caps; font-size: 12px; line-height: 1;
  letter-spacing: 0.12em; text-indent: 0.12em; white-space: nowrap; text-align: center; }
.topbar-right { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; }
.nav-links a { margin-left: 18px; color: var(--fg); text-decoration: none; font-weight: 500; }
.nav-links a:hover { color: var(--accent); }
/* Sits outside .nav-links (a sibling in .topbar-right, next to the theme
   toggle) precisely so it does NOT collapse into the mobile hamburger
   dropdown along with the rest of the nav -- language should stay reachable
   in one tap regardless of menu state, same as the theme toggle. */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: 28px;
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px;
  font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; }
.lang-switch:hover { border-color: var(--accent); color: var(--accent); }
.lang-switch .flag-icon { flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
.menu-toggle { display: none; margin-left: 10px; background: none; border: 1px solid var(--border);
  color: var(--fg); border-radius: 6px; cursor: pointer; font-size: 16px; width: 32px; height: 30px;
  line-height: 1; padding: 0; }
.menu-toggle:hover { border-color: var(--accent); color: var(--accent); }
.tema-toggle { margin-left: 16px; background: none; border: 1px solid var(--border);
  color: var(--fg); border-radius: 6px; cursor: pointer; font-size: 14px;
  width: 30px; height: 30px; line-height: 1; padding: 0; vertical-align: middle; }
.tema-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* Fluid content column: ~62% of the viewport on desktop, capped at 1340px on
   huge monitors. Wider proportion on small laptops/tablets; full width on phones
   (see media queries below). */
main { width: 62%; max-width: 1340px; margin: 0 auto; padding: 36px 28px 72px; }
/* Just above the Agregador's recent-polls card-view breakpoint (1440px),
   62% of the viewport is narrower than it needs to be for that table's
   columns -- there's plenty of unused space at the page borders that
   could go to content instead. Floor main's width there so it doesn't
   shrink below what the table needs; margin:auto centers it, letting the
   borders absorb the difference. Self-disables once 62% naturally grows
   past the floor (~1500px), so no upper bound is needed. */
@media (min-width: 1441px) { main { min-width: 930px; } }
h1 { font-size: 28px; margin-top: 0; }
h2 { font-size: 22px; margin-top: 28px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
h3 { font-size: 18px; margin-top: 24px; }
p { margin: 12px 0; }
.lede { font-size: 18px; color: var(--fg-soft); }
.muted { color: var(--muted); }
.explainer { background: var(--accent-soft); padding: 12px 16px; border-left: 3px solid var(--accent);
  margin: 16px 0; font-size: 14.5px; }
a { color: var(--accent); }
.hero { padding: 12px 0 8px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 18px 20px; text-decoration: none; color: var(--fg); transition: border-color 0.2s; }
.card:hover { border-color: var(--accent); }
.card h2 { font-size: 18px; margin: 0 0 8px; border: 0; padding: 0; color: var(--accent); }
.card p { margin: 0; font-size: 14.5px; color: var(--fg-soft); }
.card .cta { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--accent); font-weight: 600; }
.card-soon { opacity: 0.65; }
.badge { display: inline-block; font-size: 11px; background: var(--surface-alt); color: var(--muted); padding: 2px 8px;
  border-radius: 10px; vertical-align: middle; margin-left: 6px; }
.cycle-list { list-style: none; padding: 0; }
.cycle-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.cycle-list li a { font-weight: 600; }
.cycle-list .meta { float: right; color: var(--muted); font-size: 14px; }
.more { display: inline-block; margin-top: 10px; font-weight: 600; }
.filters { display: flex; gap: 16px; margin: 16px 0 24px; flex-wrap: wrap; }
.filters label { font-size: 14px; color: var(--muted); }
.filters select { font-size: 14px; padding: 4px 8px; margin-left: 4px; }
.cycle-table, .ranking { width: 100%; border-collapse: collapse; margin: 12px 0 24px; background: var(--surface);
  border: 1px solid var(--border); font-size: 16px; }
.cycle-table th, .cycle-table td, .ranking th, .ranking td { padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--border); }
.cycle-table th, .ranking th { background: var(--surface-alt); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted); }
.ranking td:first-child { font-weight: 500; color: var(--fg); }
.lbl-abbr { display: none; }
.table-hint { font-size: 13px; margin: 8px 0; }
.fonte { font-size: 12.5px; margin-top: 8px; }
.ranking td:last-child { font-weight: 700; color: var(--accent); }
.ranking.diagnostic td:last-child { font-weight: normal; color: var(--fg); }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.cycle-meta { background: var(--surface); border: 1px solid var(--border); padding: 12px 16px; margin: 16px 0;
  border-radius: 6px; font-size: 14px; }
.cycle-meta p { margin: 4px 0; }
.ranking td:last-child { color: var(--accent); }
/* give the institute name room; right-align the numeric columns */
.ranking th:first-child, .ranking td:first-child { width: 46%; }
.ranking th:not(:first-child), .ranking td:not(:first-child) {
  text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* expandable poll-trajectory chart */
.inst-row { cursor: pointer; }
.inst-row:hover { background: var(--surface-alt); }
.exp { color: var(--accent); font-size: 11px; margin-right: 5px; }
.chart-row td { background: var(--surface); border-bottom: 1px solid var(--border);
  width: auto; text-align: left; white-space: normal; padding: 12px; }
.chartflex { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pollsvg { flex: 1.6 1 340px; width: 100%; max-width: 820px; height: auto; display: block;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.pollsvg .pt { cursor: pointer; }
.pollsvg .pt:hover { r: 5; }
.pollsvg .c-plot { fill: var(--chart-bg); stroke: var(--border); }
.pollsvg .c-grid { stroke: var(--chart-grid); }
.pollsvg .c-lbl { fill: var(--muted); }
.pollsvg .c-eday { stroke: var(--muted); }
.polltable { flex: 1 1 220px; max-width: 340px; max-height: 360px; overflow-y: auto; }
.polltable table { border-collapse: collapse; width: 100%; font-size: 11px; }
.polltable th { position: sticky; top: 0; background: var(--surface-alt); padding: 3px 5px;
  text-align: center; white-space: normal; word-break: break-word; line-height: 1.1;
  font-size: 10.5px; border-bottom: 1px solid var(--border); }
.polltable th:first-child { text-align: left; }
.polltable td { padding: 2px 5px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; }
.polltable td:first-child { text-align: left; color: var(--muted); }
.polltable th:first-child, .polltable td:first-child { width: 1%; white-space: nowrap; }
.polltable .tse-row td { font-weight: 700; color: var(--fg); background: var(--surface-alt); }
.polltable .more-note { color: var(--muted); font-style: italic; text-align: left; }
.charthint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.nochart { color: var(--muted); font-style: italic; padding: 10px; font-size: 13px; }
.contact-email { font-size: 18px; font-weight: 600; }
footer { border-top: 1px solid var(--border); padding: 16px 24px; text-align: center; color: var(--muted);
  font-size: 13px; background: var(--surface); }
footer a { color: var(--muted); }
/* Small laptops / tablets: use a larger share of the screen than the 62% desktop rule. */
@media (max-width: 1024px) { main { width: 86%; } }
@media (max-width: 640px) {
  main { width: auto; }
  .cards { grid-template-columns: 1fr; }
  .topbar { padding: 12px 16px; }
  .menu-toggle { display: inline-block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; background: var(--surface);
    border-bottom: 1px solid var(--border); padding: 4px 16px 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.10); z-index: 20; }
  .nav-links.open { display: flex; }
  .nav-links a { margin-left: 0; padding: 11px 0; width: 100%;
    border-bottom: 1px solid var(--border-soft); font-size: 15px; }
  .tema-toggle { margin-left: 10px; }
  .lang-switch { margin-left: 10px; padding: 4px 8px; font-size: 13px; }
  main { padding: 24px 16px 48px; }
  h1 { font-size: 22px; }
  .cycle-list .meta { display: block; float: none; }
  /* abbreviated headers + auto name width so the table never overflows */
  .cycle-table, .ranking { font-size: 13px; }
  .cycle-table th, .cycle-table td, .ranking th, .ranking td { padding: 7px 5px; }
  .lbl-full { display: none; }
  .lbl-abbr { display: inline; }
  .ranking th:first-child, .ranking td:first-child { width: auto; }
}

.metodologia-link { margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--border-soft); text-align: center; font-size: 14px; }
.metodologia-link a { color: var(--fg-soft); text-decoration: none; font-weight: 500;
  letter-spacing: 0.02em; }
.metodologia-link a:hover { color: var(--fg); text-decoration: underline; }

/* ============ HOME PAGE (body.body-home) ============ */
.body-home .topbar { justify-content: flex-end; border-bottom: none;
  background: transparent; padding-top: 18px; padding-bottom: 0; }
.body-home .topbar .brand-logo { display: none; }
.body-home main { width: 100%; max-width: none; padding: 0; }
.body-home footer { border-top: none; background: transparent; }

.home-stage { display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: calc(100vh - 180px);
  padding: 32px 24px 64px; gap: 56px; }

/* Mirror the coming-soon page's lockup (small-caps, modest tracking) for mobile;
   scale up the max via clamp for desktop (~36% larger ceiling than coming-soon). */
.home-logo { display: inline-block; max-width: 92vw; text-align: center;
  color: var(--fg); user-select: none; }
.home-logo .hl1 { display: block; margin: 0 0 6px;
  font-family: "trajan-pro-3", serif; font-weight: 400;
  font-variant: small-caps; font-variant-caps: small-caps;
  font-size: clamp(34px, 8.4vw, 68px); letter-spacing: 0.08em; text-indent: 0.08em;
  line-height: 1.0; white-space: nowrap; }
.home-logo .hl-rule { display: block; border: 0; border-top: 1px solid var(--fg);
  width: 100%; margin: 0; opacity: 0.8; }
.home-logo .hl2 { display: block; margin: 10px 0 0;
  font-family: "trajan-pro-3", serif; font-weight: 400;
  font-variant: small-caps; font-variant-caps: small-caps;
  font-size: clamp(20px, 5.5vw, 44px); letter-spacing: 0.12em; text-indent: 0.12em;
  line-height: 1.0; white-space: nowrap; opacity: 0.92; }

.home-cards { display: grid; grid-template-columns: repeat(3, minmax(220px, 300px));
  gap: 28px; justify-content: center; width: 100%; max-width: 960px; }
.hcard { font-family: "futura-pt", "Jost", system-ui, sans-serif;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px 24px; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg); text-decoration: none;
  border-radius: 4px; transition: transform .15s ease, border-color .15s ease,
    box-shadow .15s ease; min-height: 200px; }
.hcard:hover { transform: translateY(-2px); border-color: var(--fg);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.hcard h2 { font-family: "futura-pt", "Jost", system-ui, sans-serif;
  font-weight: 500; font-size: 22px; letter-spacing: 0.02em;
  margin: 0; color: var(--fg); }
.hcard p { font-family: "futura-pt", "Jost", system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; margin: 0; color: var(--fg);
  opacity: 0.82; flex: 1; }
.hcta { font-family: "futura-pt", "Jost", system-ui, sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fg); align-self: flex-start;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.hcard-soon { cursor: not-allowed; opacity: 0.55; filter: grayscale(0.6); }
.hcard-soon:hover { transform: none; border-color: var(--border);
  box-shadow: none; }
.hcard-soon .hcta { border-bottom-style: dashed; opacity: 0.8; }

@media (max-width: 720px) {
  .home-stage { gap: 40px; min-height: calc(100vh - 140px); padding: 24px 14px 56px; }
  .home-cards { grid-template-columns: 1fr; max-width: 420px; }
}


/* ============ v4 ranking table tweaks ============ */
.ranking.v4-table { table-layout: fixed; }
/* fixed column widths so the three CM sub-columns are equal width */
.ranking.v4-table col.c-inst { width: 22%; }
.ranking.v4-table col.c-pesq { width: 15%; }
.ranking.v4-table col.c-cm   { width: 12%; }  /* x3 = 36% (CM bloc) */
.ranking.v4-table col.c-vies { width: 12%; }
.ranking.v4-table col.c-ep   { width: 15%; }
/* Override v3's `.ranking td:first-child { width: 46% }` — it has higher
   priority than colgroup widths in some browsers' fixed-layout algorithm. */
.ranking.v4-table th:first-child,
.ranking.v4-table td:first-child { width: 22%; }
/* let the EP header wrap on narrow viewports rather than overflow */
.ranking.v4-table th { white-space: normal; }
.ranking.v4-table th { text-align: center; padding: 9px 8px; }
/* only the Instituto header (1st row, 1st cell) is left-aligned —
   NOT Direção (which is also a th:first-child in the 2nd thead row). */
.ranking.v4-table thead tr:first-child th:first-child { text-align: left; }
.ranking.v4-table td { padding: 9px 8px; text-align: center; }
.ranking.v4-table td:first-child { text-align: left; }
.ranking.v4-table th.cm-group { border-bottom: 1px solid var(--border);
  letter-spacing: 0.06em; }
/* unit suffix in parentheses always sits on its own line below the column name —
   same size as the title, just lowercase and untracked so "(pp/sem.)" reads cleanly */
.ranking.v4-table th .th-unit { display: block;
  letter-spacing: 0; text-transform: none; margin-top: 2px; }
.ranking.v4-table thead tr:nth-child(2) th { font-size: 11px;
  text-transform: none; letter-spacing: 0.02em; color: var(--fg-soft);
  background: var(--surface); }
/* TSE registry number rendered subtly under each poll's date in the side table */
.polltable .poll-reg { font-size: 9.5px; opacity: 0.55;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  margin-top: 1px; line-height: 1.1; cursor: help; }

/* side polltable next to the trajectory chart: don't wrap candidate names.
   v3's CSS set `white-space: normal; word-break: break-word` on .polltable th,
   which broke long names mid-word. Override here. */
.polltable th { white-space: nowrap; word-break: normal; padding: 3px 8px; }
.polltable { max-width: 380px; overflow-x: auto; }
@media (max-width: 720px) {
  /* mobile: chart's flex-wrap already stacks the table below the graph,
     so let it use full width and skip the desktop max-width cap. */
  .polltable { max-width: 100%; }
}

/* metric-explainer card sitting below the ranking + source line */
.metric-card { background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 4px; padding: 14px 18px; margin: 18px 0 24px;
  font-size: 14px; line-height: 1.5; }
.metric-card p { margin: 0; }

/* sortable headers */
.ranking.v4-table th[data-sort] { cursor: pointer; user-select: none;
  position: relative; }
.ranking.v4-table th[data-sort]:hover { background: var(--border-soft); }
/* Absolutely positioned so toggling the sort arrow doesn't reflow the header */
.ranking.v4-table th[data-sort] .sort-ind { position: absolute;
  top: 4px; right: 6px; font-size: 10px; opacity: 0.75; line-height: 1; }
.ranking.v4-table th[data-sort].sort-active { color: var(--fg); }
.ranking.v4-table th[data-sort].sort-active .sort-ind { opacity: 1; }
@media (max-width: 720px) {
  .ranking.v4-table { table-layout: auto; }
  .ranking.v4-table col { width: auto; }
  .ranking.v4-table th, .ranking.v4-table td { padding: 7px 4px; }
}

/* ============ Metodologia: collapsible sections ============ */
/* Each <h2> section is wrapped at runtime in <details>/<summary>. The summary
   shows just the section title; clicking it expands the full content. Multiple
   sections can stay open simultaneously. */
main details {
  margin: 0;
  border-top: 1px solid var(--border);
}
main details + p.metodologia-link {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 0;
}
main details > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 40px 16px 0;
  position: relative;
  user-select: none;
}
main details > summary::-webkit-details-marker { display: none; }
main details > summary h2 {
  margin: 0;
  display: inline-block;
  border-bottom: none;
  padding: 0;
}
main details > summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: var(--fg-soft);
  line-height: 1;
}
main details[open] > summary::after { content: "−"; }
main details > summary:hover h2 { opacity: 0.78; }
main details[open] { padding-bottom: 20px; }