:root {
  color-scheme: light;
  --bg: #f4f3ef;
  --surface: #fcfcfb;
  --surface-2: #efeee9;
  --border: #deddd6;
  --text: #0b0b0b;
  --text-2: #52514e;
  --text-3: #75746f;
  --accent: #2a78d6;
  --accent-ink: #1b5fb0;
  --accent-soft: #e3eefb;
  --bar: #2a78d6;
  --track: #e7e6e0;
  --ok: #1a7f37;
  --ok-soft: #e2f3e6;
  --warn: #9a6200;
  --warn-soft: #fbf0d9;
  --bad: #c0362c;
  --bad-soft: #fbe5e3;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);
  --radius: 14px;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211;
    --surface: #1a1a19;
    --surface-2: #232321;
    --border: #34332f;
    --text: #ffffff;
    --text-2: #c3c2b7;
    --text-3: #9a998f;
    --accent: #3987e5;
    --accent-ink: #8dbcf3;
    --accent-soft: #1b2a3d;
    --bar: #3987e5;
    --track: #2c2c29;
    --ok: #5cc27a;
    --ok-soft: #173020;
    --warn: #e0a940;
    --warn-soft: #33280f;
    --bad: #f07b72;
    --bad-soft: #3a1c1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211;
  --surface: #1a1a19;
  --surface-2: #232321;
  --border: #34332f;
  --text: #ffffff;
  --text-2: #c3c2b7;
  --text-3: #9a998f;
  --accent: #3987e5;
  --accent-ink: #8dbcf3;
  --accent-soft: #1b2a3d;
  --bar: #3987e5;
  --track: #2c2c29;
  --ok: #5cc27a;
  --ok-soft: #173020;
  --warn: #e0a940;
  --warn-soft: #33280f;
  --bad: #f07b72;
  --bad-soft: #3a1c1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; }
code { font-family: var(--mono); font-size: .9em; }
a { color: var(--accent-ink); }

.topo { background: var(--surface); border-bottom: 1px solid var(--border); }
.topo-inner, main { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.topo-inner {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px;
}
.topo h1 { font-size: 1.6rem; letter-spacing: -.01em; }
.topo h1 span { color: var(--accent); }
.sub { margin: 4px 0 0; color: var(--text-2); }
.contagem {
  font-size: .9rem; color: var(--text-2); background: var(--surface-2);
  border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
.contagem strong { color: var(--text); font-variant-numeric: tabular-nums; }
.topo-dir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- login ---------- */
.login-pagina { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-caixa {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px;
}
.login-caixa h1 { font-size: 1.6rem; margin: 0 0 4px; }
.login-caixa h1 span { color: var(--accent); }
.login-caixa .sub { margin-bottom: 20px; }
.login-caixa label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 6px; }
.login-caixa input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.login-caixa input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-caixa .btn { width: 100%; margin-top: 20px; padding: 12px; font-size: 1rem; }
.login-erro { color: var(--bad); font-size: .9rem; margin: 12px 0 0; min-height: 1.2em; }
.login-nota { color: var(--text-3); font-size: .85rem; margin: 16px 0 0; }

main { padding-top: 24px; padding-bottom: 48px; }

.painel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.uf-painel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uf-painel label { font-weight: 600; }
select, input {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
}
select:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.salvo { color: var(--text-3); font-size: .85rem; margin-left: auto; }

.secao-titulo { margin: 32px 0 14px; }
.secao-titulo h2 { font-size: 1.25rem; }
.secao-titulo p { margin: 4px 0 0; color: var(--text-2); }

.slots { display: grid; gap: 12px; }

.slot {
  display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 16px;
  align-items: start; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.slot-cab h3 { font-size: 1rem; }
.slot-cab .dica { color: var(--text-3); font-size: .82rem; margin-top: 2px; }
.slot-cab input {
  margin-top: 10px; width: 100%;
  font-family: var(--mono); font-size: 1.35rem; letter-spacing: .12em;
  padding: 8px 12px;
}
.slot-cab input.texto { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; padding: 12px; }
.slot-cab input::placeholder { font-family: var(--sans); font-size: .95rem; letter-spacing: 0; color: var(--text-3); }

.resultado { min-height: 64px; display: flex; align-items: center; }
.resultado .vazio { color: var(--text-3); font-size: .92rem; }
.resultado .aviso { color: var(--warn); font-size: .92rem; }
.resultado .erro { color: var(--bad); font-size: .92rem; }

.cand { display: flex; gap: 14px; align-items: center; width: 100%; }
.foto {
  width: 60px; height: 76px; border-radius: 10px; object-fit: cover; flex: none;
  background: var(--surface-2); display: grid; place-items: center;
  color: var(--text-3); font-weight: 600; font-size: 1.1rem;
}
.cand-info { min-width: 0; flex: 1; }
.cand-nome { font-weight: 650; font-size: 1.08rem; }
.cand-meta { color: var(--text-2); font-size: .9rem; overflow-wrap: anywhere; }
.cand-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cand-acoes { display: flex; gap: 8px; flex: none; }

.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2);
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--accent-soft); color: var(--accent-ink); }

.btn {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 8px 14px;
}
.btn:hover { background: var(--surface-2); }
.btn.primario { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.fantasma { border-color: transparent; color: var(--text-2); }

.opcoes { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.opcoes .rotulo { font-size: .85rem; color: var(--text-2); }
.opcao {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left;
  font: inherit; font-size: .92rem; cursor: pointer; color: var(--text);
  background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; padding: 8px 12px;
}
.opcao:hover { border-color: var(--accent); }
.opcao .num { font-family: var(--mono); color: var(--text-2); }
.opcao .sit { font-size: .78rem; color: var(--text-3); }

.legenda-box { display: flex; gap: 14px; align-items: center; }
.legenda-num {
  font-family: var(--mono); font-size: 1.4rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 10px; padding: 10px 14px;
}

.acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.nota { margin: 0; color: var(--text-3); font-size: .85rem; }

.futuro { margin-top: 32px; border-style: dashed; box-shadow: none; }
.futuro h2 { font-size: 1.05rem; }
.futuro p { margin: 6px 0 0; color: var(--text-2); }

.privacidade { margin-top: 28px; color: var(--text-3); font-size: .85rem; text-align: center; }

/* ---------- ficha: moldura, cabeçalho e abas ---------- */
dialog.ficha {
  width: min(1060px, 100vw - 24px); height: min(920px, 100dvh - 24px); max-width: none; max-height: none;
  padding: 0; border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  background: var(--bg); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
dialog.ficha[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(10, 10, 10, .5); }
.fechar {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); flex: none;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 1rem;
}
.fechar:hover { background: var(--surface-2); }
.ficha-cab { position: relative; display: flex; gap: 16px; align-items: center; padding: 18px 22px 14px; background: var(--surface); }
.ficha-foto { width: 64px; height: 82px; border-radius: 12px; font-size: 1.2rem; }
.ficha-id { flex: 1; min-width: 0; }
.ficha-id h2 { font-size: 1.45rem; letter-spacing: -.01em; }
.ficha-num {
  font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 8px; padding: 2px 8px; vertical-align: middle; margin-left: 4px;
}
.ficha-sub { color: var(--text-2); font-size: .92rem; margin-top: 2px; overflow-wrap: anywhere; }
.ficha-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ficha-nav {
  display: flex; gap: 2px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; flex: none;
}
.ficha-aba {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--text-2);
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 11px 12px 9px; cursor: pointer; white-space: nowrap;
}
.ficha-aba:hover { color: var(--text); }
.ficha-aba[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.ic-svg { width: 18px; height: 18px; flex: none; }
.ic-peq { width: 14px; height: 14px; }
.contador { font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--text-2); border-radius: 999px; padding: 1px 7px; }
.contador.forte { background: var(--warn-soft); color: var(--warn); }
.ficha-rolagem { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ficha-painel { padding: 20px 22px 32px; max-width: 1000px; margin: 0 auto; }
.painel-intro { color: var(--text-2); margin: 0 0 16px; }
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.subnav button {
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
}
.subnav button:hover { border-color: var(--accent); }
.subnav button[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }

/* ---------- ficha: cartões do resumo ---------- */
.resumo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; }
.rcard {
  display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--text); text-decoration: none;
  cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px;
  box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.rcard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
.rcard-topo { display: flex; align-items: center; gap: 8px; }
.rcard-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.rcard-rot { font-size: .82rem; font-weight: 600; color: var(--text-2); flex: 1; }
.rcard-val { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rcard-val .chance { font-size: .95rem; padding: 4px 12px; }
.rcard-ctx { font-size: .84rem; color: var(--text-2); flex: 1; }
.rcard-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rcard-ir { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--accent-ink); margin-left: auto; }
.rcard.tom-atencao { border-left: 4px solid var(--warn); }
.rcard.tom-alerta { border-left: 4px solid var(--bad); }
.rcard-carregando { cursor: default; justify-content: center; }
.rcard-carregando:hover { transform: none; border-color: var(--border); }

/* ---------- ficha: seções com o quadro "Como ler isto" ---------- */
.fsecao {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px;
  margin-bottom: 14px; box-shadow: var(--shadow); scroll-margin-top: 12px;
}
.fsecao > h3 { font-size: 1.02rem; margin-bottom: 12px; }
.fsecao .explica { color: var(--text-2); }
.fsecao-grade { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr); gap: 20px; align-items: start; }
.fsecao-grade.sem-aside { grid-template-columns: minmax(0, 1fr); }
.fsecao-grade.largo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.leitura { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; border-top: 3px solid var(--text-3); font-size: .88rem; }
.leitura.tom-ok { border-top-color: var(--ok); }
.leitura.tom-info { border-top-color: var(--accent); }
.leitura.tom-atencao { border-top-color: var(--warn); }
.leitura.tom-alerta { border-top-color: var(--bad); }
.leitura-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.leitura-rot { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; }
.leitura p { margin: 0; color: var(--text); }
.leitura .leitura-dica { margin-top: 8px; color: var(--text-2); font-size: .82rem; }
.leitura-tag, .rcard-tag {
  display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border);
}
.tom-ok .leitura-tag, .leitura-tag.tom-ok, .tom-ok .rcard-tag { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.tom-info .leitura-tag, .leitura-tag.tom-info, .tom-info .rcard-tag { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.tom-atencao .leitura-tag, .leitura-tag.tom-atencao, .tom-atencao .rcard-tag { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.tom-alerta .leitura-tag, .leitura-tag.tom-alerta, .tom-alerta .rcard-tag { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
td .leitura-tag + small { margin-top: 4px; }

.numero-grande { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numero-grande small { display: block; font-size: .86rem; font-weight: 400; color: var(--text-2); margin-top: 4px; line-height: 1.4; }
.medidor2 { margin-top: 14px; }
.medidor2 .trilho { position: relative; height: 12px; border-radius: 6px; background: var(--track); }
.medidor2 .cheio { height: 100%; border-radius: 6px; background: var(--bar); }
.medidor2 .marca { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--text); border-radius: 2px; }
.medidor2 .marca.m1, .marca-leg.m1 { background: var(--text-3); }
.medidor2 .escala { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-3); margin-top: 4px; }
.medidor2 .legenda2 { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--text-2); margin-top: 6px; }
.marca-leg.cheio-leg { width: 12px; background: var(--bar); }
.marca-leg { display: inline-block; width: 3px; height: 12px; background: var(--text); border-radius: 2px; margin-right: 6px; vertical-align: -2px; }

/* ---------- ficha: fila da lista e grupo eleito ---------- */
.fila { display: flex; flex-wrap: wrap; gap: 4px; }
.q {
  width: 22px; height: 22px; border-radius: 5px; background: var(--track); display: inline-grid; place-items: center;
  font-size: .64rem; font-weight: 700; color: var(--surface);
}
.q.dentro { background: var(--bar); }
.q.voce { background: var(--text); color: var(--surface); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warn); }
.q-mais { font-size: .8rem; color: var(--text-3); align-self: center; margin-left: 4px; }
.fila-legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--text-2); margin-top: 12px; }
.fila-legenda .q { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; box-shadow: none; }
.fila-texto { margin-top: 10px; font-size: .9rem; color: var(--text-2); }
.membros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.membro {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid transparent; border-radius: 14px; padding: 12px 10px; cursor: pointer;
}
.membro:hover { border-color: var(--accent); }
.membro.eu { border-color: var(--accent); background: var(--accent-soft); }
.membro-foto { width: 52px; height: 64px; border-radius: 10px; font-size: .95rem; }
.membro-nome { font-weight: 650; font-size: .9rem; }
.membro-meta { font-size: .78rem; color: var(--text-3); }
.membro-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.faixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.faixa-item { border-radius: 12px; padding: 10px 12px; background: var(--surface-2); font-size: .82rem; color: var(--text-2); border: 2px solid transparent; }
.faixa-item strong { display: block; color: var(--text); font-size: .9rem; margin-bottom: 2px; }
.faixa-item.atual { border-color: var(--accent); background: var(--accent-soft); }
.chip-botao { border: 0; cursor: pointer; font: inherit; font-size: .8rem; }
.chip-botao:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- ficha: quem é, projetos, dinheiro e alertas ---------- */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); }
.linha-tempo li { position: relative; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 10px; padding: 6px 0 6px 10px; font-size: .9rem; }
.linha-tempo li::before {
  content: ""; position: absolute; left: -21px; top: 11px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--text-3);
}
.linha-tempo li.venceu::before { background: var(--ok); border-color: var(--ok); }
.lt-ano { font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-res { font-size: .82rem; color: var(--text-2); text-align: right; }
.bens-topo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.bens-topo li { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--surface-2); border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.bens-topo small { display: block; color: var(--text-3); font-size: .78rem; overflow-wrap: anywhere; }
.bens-topo strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
details.mais { margin-top: 10px; }
details.mais > summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--accent-ink); margin-bottom: 8px; }
.projetos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.projeto { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.projeto .tit { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.projeto .det { font-size: .88rem; color: var(--text-2); margin-top: 4px; }
.projeto .fnt { font-size: .78rem; color: var(--text-3); margin-top: 4px; }
.compartilhados { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.compartilhados li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  background: var(--surface-2); border-radius: 10px; padding: 8px 12px; font-size: .9rem;
}
.compartilhados small { display: block; color: var(--text-3); font-size: .78rem; }
.compartilhados .num { text-align: right; font-variant-numeric: tabular-nums; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.filtro {
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 6px 12px;
}
.filtro span { font-variant-numeric: tabular-nums; opacity: .8; margin-left: 4px; }
.filtro[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.filtro-alerta[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #fff; }
.filtro-atencao[aria-pressed="true"] { background: var(--warn); border-color: var(--warn); color: #fff; }
.sinal-nivel { font-size: .72rem; font-weight: 600; color: var(--text-3); margin-left: 4px; }
.link-acao {
  font: inherit; font-weight: 600; font-size: .88rem; color: var(--accent-ink); background: none; border: 0;
  padding: 0; margin-top: 12px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center;
}
details.como-ler { background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; padding: 12px 16px; margin-top: 8px; font-size: .9rem; }
details.como-ler summary { cursor: pointer; font-weight: 600; }
details.como-ler ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.esqueleto { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: .9rem; padding: 16px 0; }
.giro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: girar .8s linear infinite; flex: none; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .giro { animation: none; }
  .rcard { transition: none; }
  .rcard:hover { transform: none; }
}
@media (max-width: 760px) {
  dialog.ficha { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; border: 0; }
  .ficha-cab { flex-wrap: wrap; padding: 14px 56px 10px 14px; gap: 12px; }
  .ficha-cab .fechar { position: absolute; top: 12px; right: 12px; }
  .ficha-acoes { width: 100%; justify-content: flex-start; }
  .ficha-foto { width: 52px; height: 66px; }
  .ficha-id h2 { font-size: 1.2rem; }
  .ficha-painel { padding: 16px 14px 28px; }
  .fsecao { padding: 14px; }
  .fsecao-grade { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .faixas { grid-template-columns: minmax(0, 1fr); }
  .resumo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rcard { padding: 12px; }
  .rcard-val { font-size: 1.2rem; }
  .compartilhados li { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 420px) {
  .resumo-grid { grid-template-columns: minmax(0, 1fr); }
}

.bloco { margin-top: 26px; }
.bloco h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin-bottom: 10px;
}
.bloco .explica { color: var(--text-2); font-size: .9rem; margin: -4px 0 12px; }

.grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 20px; margin: 0;
}
.grade dt { font-size: .8rem; color: var(--text-3); }
.grade dd { margin: 0; font-weight: 550; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tile { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.tile .rot { font-size: .8rem; color: var(--text-2); }
.tile .val { font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.tile .det { font-size: .78rem; color: var(--text-3); }

.medidor { margin-top: 14px; }
.medidor .trilho { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.medidor .cheio { height: 100%; border-radius: 4px; background: var(--bar); min-width: 2px; }
.medidor .legenda { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-2); margin-top: 6px; }

.barras { display: grid; gap: 8px; }
.barra {
  display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 9.5em; gap: 12px;
  align-items: center; font-size: .9rem; padding: 2px 0;
}
.barra .nome { color: var(--text-2); overflow-wrap: anywhere; }
.barra .trilho { height: 10px; }
.barra .cheio { height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; min-width: 2px; }
.barra .valor { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; text-align: right; }
.barra:hover .cheio { filter: brightness(1.12); }

table.lista { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lista th {
  text-align: left; font-weight: 600; font-size: .78rem; color: var(--text-3);
  border-bottom: 1px solid var(--border); padding: 6px 8px 6px 0;
}
table.lista td { border-bottom: 1px solid var(--border); padding: 8px 8px 8px 0; vertical-align: top; }
table.lista td.num, table.lista th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
table.lista tr:last-child td { border-bottom: 0; }
.tabela-rolagem { overflow-x: auto; }

.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links a {
  font-size: .88rem; text-decoration: none; background: var(--surface-2);
  padding: 6px 12px; border-radius: 999px;
}
.links a:hover { text-decoration: underline; }

.vice { display: flex; gap: 12px; align-items: center; }
.vice + .vice { margin-top: 10px; }
.vice .foto { width: 48px; height: 60px; font-size: .9rem; }

.carregando { color: var(--text-3); padding: 40px 0; text-align: center; }
.fonte { margin-top: 28px; font-size: .8rem; color: var(--text-3); }

/* ---------- jornada: trilha de passos na ordem da urna ---------- */
.jornada { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.jornada-inner {
  max-width: 980px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 2px;
  overflow-x: auto; list-style: none; scrollbar-width: none;
}
.jornada-inner::-webkit-scrollbar { display: none; }
.jornada-inner li { flex: none; }
.jornada-passo {
  display: flex; align-items: center; gap: 7px; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--text-2); background: none; border: 0; border-radius: 999px; padding: 6px 10px 6px 6px;
  cursor: pointer; white-space: nowrap;
}
.jornada-passo:hover { background: var(--surface-2); color: var(--text); }
.jornada-num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); flex: none;
}
.jornada-passo.feito .jornada-num { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.jornada-passo[aria-current="step"] { background: var(--accent-soft); color: var(--accent-ink); }
.jornada-passo[aria-current="step"] .jornada-num { background: var(--accent); color: #fff; border-color: var(--accent); }

.passo-intro { margin: 4px 0 20px; }
.passo-kicker {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent-ink); margin: 0 0 4px;
}
.passo-intro h2 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 8px; }
.passo-intro p { color: var(--text-2); margin: 0 0 8px; max-width: 75ch; line-height: 1.55; }
.passo-slots { margin-bottom: 22px; }
.passo-nav {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--border);
}
.passo-nav:empty { display: none; }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

/* afinidade do quiz levada para as listas e candidatos */
.lista-afinidade { font-size: .85rem; color: var(--text-2); margin: 6px 0 0; }
.lista-afinidade strong { color: var(--accent-ink); }
.lista-afinidade.vazia { color: var(--text-3); }
.afin-mini { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; }
.afin-mini .trilho { flex: 1; min-width: 50px; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.afin-mini .cheio { display: block; height: 100%; background: var(--bar); }
.afin-mini b { font-variant-numeric: tabular-nums; font-size: .85rem; }
.sem-afinidade { color: var(--text-3); }
.afinidade-listas .link-btn { color: var(--accent-ink); }
.convite-quiz { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.convite-quiz > div { flex: 1; min-width: 220px; }
.proximo-quiz { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.proximo-quiz p { font-size: .88rem; color: var(--text-2); margin: 0 0 10px; }
.passos-chave { margin: 0 0 8px; padding-left: 22px; }
.passos-chave li { margin: 6px 0; color: var(--text-2); font-size: .92rem; line-height: 1.5; }

/* ---------- guia de boas-vindas ---------- */
dialog.guia {
  width: min(620px, 100vw - 24px); max-height: min(880px, 100dvh - 24px); padding: 0;
  border: 1px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
.guia-corpo { padding: 20px 24px 24px; }
.guia-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.guia-pontos { display: flex; gap: 6px; }
.guia-pontos i { width: 28px; height: 5px; border-radius: 3px; background: var(--track); }
.guia-pontos i.on { background: var(--accent); }
.guia h2 { font-size: 1.45rem; letter-spacing: -.01em; margin: 0 0 8px; }
.guia p { color: var(--text-2); line-height: 1.55; margin: 0 0 10px; }
.guia-opcional {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle;
  color: var(--text-3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; margin-left: 6px;
}
.guia-roteiro { list-style: none; padding: 0; margin: 14px 0 16px; display: grid; gap: 10px; counter-reset: roteiro; }
.guia-roteiro li {
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; font-size: .95rem; line-height: 1.45;
}
.guia-roteiro li::before {
  counter-increment: roteiro; content: counter(roteiro); flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem;
}
.guia-rotulo { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 6px; }
.guia select, .guia input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
}
.guia input { font-family: var(--mono); font-size: .92rem; margin-top: 6px; }
.guia-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.guia-acoes .btn { padding: 10px 18px; }
.guia-acoes-dir { display: flex; gap: 8px; flex-wrap: wrap; }
.guia-escolhas { display: grid; gap: 12px; margin: 16px 0 4px; }
.guia-escolha {
  text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px; cursor: pointer; display: grid; gap: 4px;
}
.guia-escolha:hover { border-color: var(--accent); }
.guia-escolha strong { font-size: 1.08rem; }
.guia-escolha span { color: var(--text-2); font-size: .93rem; line-height: 1.45; }
.guia-escolha.principal { border-color: var(--accent); background: var(--accent-soft); }
.guia .link-btn { color: var(--accent-ink); font-size: .92rem; }

.segmentado { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.segmentado button {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
}
.segmentado button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.cartao {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.cartao h3 { font-size: 1.05rem; margin-bottom: 4px; }
.cartao .explica { color: var(--text-2); font-size: .9rem; margin: 0 0 14px; }

.callout {
  border-left: 4px solid var(--accent); background: var(--accent-soft);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.callout h3 { font-size: 1rem; margin-bottom: 6px; }
.callout p { margin: 6px 0 0; }
.callout .nomes { font-weight: 600; }

.vagas-lista { display: grid; gap: 2px; }
.vaga-linha {
  display: grid; grid-template-columns: minmax(140px, 36%) minmax(0, 1fr) 7.5em; gap: 12px; align-items: center;
  font: inherit; font-size: .9rem; text-align: left; color: var(--text); cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px;
}
.vaga-linha:hover { background: var(--surface-2); }
.vaga-linha[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.vaga-linha .nome { overflow-wrap: anywhere; }
.vaga-linha .nome small { display: block; color: var(--text-3); font-size: .78rem; }
.vaga-linha .trilho { height: 10px; }
.vaga-linha .cheio { display: block; height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; }
.vaga-linha .valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vaga-linha .valor small { color: var(--text-3); }

details.metodo { margin-top: 14px; font-size: .88rem; color: var(--text-2); }
details.metodo summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
details.metodo ol, details.metodo ul { padding-left: 20px; margin: 8px 0; }
details.metodo li { margin: 4px 0; }

.chance { display: inline-block; font-size: .76rem; font-weight: 650; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.chance.alta { background: var(--accent); color: #fff; }
.chance.disputada { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.chance.baixa { background: var(--surface-2); color: var(--text-2); }
.chance.muito-baixa { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border); }
.chance.problema { background: var(--bad-soft); color: var(--bad); }

.forca { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.forca .trilho { flex: 1; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.forca .cheio { display: block; height: 100%; background: var(--bar); border-radius: 3px; }
.forca span:last-child { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--text-2); width: 2.2em; text-align: right; }

table.lista .quem { font-weight: 600; }
table.lista .quem small { display: block; font-weight: 400; color: var(--text-3); }
table.lista tr.destaque td { background: var(--accent-soft); }
table.lista tr.linha-corte td { border-bottom: 2px dashed var(--accent); }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.btn.pequeno { font-size: .8rem; padding: 5px 10px; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-align: left; font-weight: 600; }
.link-btn:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------- análise ---------- */
.analise-carregando { color: var(--text-3); font-size: .9rem; margin-top: 18px; }
.sinais { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sinal {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start;
  background: var(--surface-2); border-radius: 10px; padding: 10px 12px;
}
.sinal .ic {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; background: var(--surface); color: var(--text-2);
}
.sinal.alerta .ic { background: var(--bad-soft); color: var(--bad); }
.sinal.atencao .ic { background: var(--warn-soft); color: var(--warn); }
.sinal.ok .ic { background: var(--ok-soft); color: var(--ok); }
.sinal .tit { font-weight: 600; }
.sinal .det { font-size: .9rem; color: var(--text-2); margin-top: 2px; }
.sinal .fnt { font-size: .78rem; color: var(--text-3); margin-top: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-size: .8rem; background: var(--surface-2); color: var(--text-2); border-radius: 999px; padding: 3px 10px; }
.chip.destaque { background: var(--accent-soft); color: var(--accent-ink); }
.nota-pequena { font-size: .82rem; color: var(--text-3); margin-top: 10px; }

/* ---------- quiz: uma votação por vez ---------- */
#quiz-palco { scroll-margin-top: 76px; }
.quiz-palco { max-width: 760px; margin: 0 auto; }
.quiz-progresso { margin-bottom: 14px; }
.quiz-progresso-topo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: .92rem; color: var(--text-2); margin-bottom: 8px;
}
.quiz-progresso-topo strong { color: var(--text); font-size: 1.05rem; }
.quiz-falta { color: var(--text-3); font-size: .86rem; }
.quiz-parcial { color: var(--accent-ink); font-size: .9rem; }
.quiz-segmentos { display: flex; gap: 4px; }
.quiz-segmentos .seg {
  flex: 1; height: 8px; min-width: 0; border-radius: 4px; border: 0; padding: 0; cursor: pointer;
  background: var(--track);
}
.quiz-segmentos .seg:hover { background: var(--border); }
.quiz-segmentos .seg.resp { background: var(--accent); }
.quiz-segmentos .seg.pulou { background: var(--text-3); opacity: .5; }
.quiz-segmentos .seg.atual { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-cartao {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow); padding: 26px 28px;
}
.quiz-tema {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-ink); margin: 0 0 8px;
}
.quiz-afirmacao { font-size: 1.35rem; line-height: 1.35; font-weight: 650; letter-spacing: -.01em; margin: 0 0 10px; }
.quiz-contexto { font-size: .88rem; color: var(--text-3); margin: 0; }
.quiz-respostas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.quiz-respostas .resp {
  font: inherit; font-size: 1.02rem; font-weight: 650; padding: 15px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
}
.quiz-respostas .resp:hover { border-color: var(--accent); }
.quiz-respostas .resp[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.quiz-respostas .resp.pular {
  grid-column: 1 / -1; font-size: .9rem; font-weight: 600; color: var(--text-2); padding: 10px; border-style: dashed;
}
.quiz-respostas .resp.pular[aria-pressed="true"] {
  background: var(--surface-2); color: var(--text); border-color: var(--text-3); border-style: solid;
}
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.quiz-nav .btn { padding: 11px 20px; }
.quiz-nota-fim { text-align: right; }
.quiz-metodo { margin-top: 8px; }
.quiz-pular { margin: 22px 0 0; }
.quiz-pular .link-btn { color: var(--text-2); font-size: .88rem; font-weight: 500; text-decoration: underline; }

/* ---------- quiz: tela de resultado ---------- */
.quiz-res { display: grid; gap: 16px; }
.quiz-res .cartao { margin: 0; }
.quiz-res h4 { font-size: 1rem; margin: 0 0 4px; }
.res-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.res-cab-texto { flex: 1; min-width: 260px; }
.res-cab-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.res-gov {
  display: flex; align-items: baseline; gap: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; font-size: .86rem; color: var(--text-2);
}
.res-gov strong { color: var(--text); font-size: 1rem; }
.res-rodape { display: grid; gap: 4px; }
.res-cab h3 { font-size: 1.35rem; letter-spacing: -.01em; margin: 0 0 6px; }
.res-cab p { color: var(--text-2); margin: 0; font-size: .92rem; line-height: 1.5; }
.res-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; }
.res-podio .carregando { grid-column: 1 / -1; padding: 24px 0; }
.res-top {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  padding: 16px 18px; min-width: 0; display: grid; row-gap: 10px;
  /* As 6 partes (posição, nome, partidos, número, barra, vagas) dividem as mesmas linhas
     nos três cartões, então cada parte fica na mesma altura em todos eles. */
  grid-row: span 6; grid-template-rows: subgrid;
}
.res-top.primeiro { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.res-pos { font-size: .76rem; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .05em; }
.res-top h4 {
  font-size: 1rem; line-height: 1.3; margin: 0; overflow-wrap: anywhere;
}
.res-top .chips { margin: 0; }
.res-pc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.res-pc strong { font-size: 2.2rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--text); }
.res-top.primeiro .res-pc strong { color: var(--accent-ink); }
.res-pc span { font-size: .85rem; color: var(--text-2); }
.res-top .trilho { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.res-top .cheio { display: block; height: 100%; background: var(--bar); }
.res-vagas { font-size: .82rem; color: var(--text-3); margin: 0; }
.res-todos { grid-column: 1 / -1; margin: 0; padding: 12px 18px; }
.res-todos summary { cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--accent-ink); }
.res-todos .explica { margin: 10px 0; }
.res-todos .afinidade { margin-top: 12px; }
.res-tabela td, .res-tabela th { vertical-align: top; }
.res-tabela th:nth-child(n+2), .res-tabela td:nth-child(n+2) { text-align: center; }
.res-tabela td:nth-child(n+2) { white-space: nowrap; }
.res-tabela th:nth-child(n+3) { min-width: 80px; max-width: 130px; }
.res-afirm { font-size: .86rem; color: var(--text-2); min-width: 220px; }
.res-afirm small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.res-voce { font-weight: 600; }
.res-marca { font-weight: 700; }
.res-tabela td.igual .res-marca { color: var(--ok); }
.res-tabela td.diferente .res-marca { color: var(--bad); }
.res-tabela td.neutro { color: var(--text-3); }
.res-partidos { margin: 0; }
.res-seguir { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0; }
.res-seguir p { margin: 0; flex: 1; min-width: 240px; }
.quiz-refazer { color: var(--text-2); font-size: .82rem; text-decoration: underline; font-weight: 500; }
@media (max-width: 640px) {
  .res-podio { grid-template-columns: minmax(0, 1fr); }
  .quiz-cartao { padding: 20px 18px; }
  .quiz-afirmacao { font-size: 1.15rem; }
  .quiz-respostas .resp { padding: 13px 10px; }
}
.afinidade { display: grid; gap: 6px; }
.afinidade .linha {
  display: grid; grid-template-columns: minmax(90px, 45%) minmax(0, 1fr) 3.6em; gap: 10px; align-items: center; font-size: .88rem;
}
.afinidade .linha .nome { overflow-wrap: anywhere; }
.afinidade .linha .nome small { display: block; color: var(--text-3); font-size: .76rem; }
.afinidade .trilho { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.afinidade .cheio { display: block; height: 100%; background: var(--bar); border-radius: 4px; }
.afinidade .pc { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.15; }
.afinidade .pc small { display: block; font-weight: 400; font-size: .72rem; color: var(--text-3); white-space: nowrap; }

details.entenda { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
details.entenda summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--accent-ink); }
details.entenda h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 14px 0 4px;
}
details.entenda p, details.entenda li { font-size: .92rem; color: var(--text-2); margin: 4px 0; }
details.entenda ul { padding-left: 18px; margin: 0; }
details.entenda .ementa { font-size: .84rem; font-style: italic; color: var(--text-3); }
details.entenda .situacao { font-size: .86rem; }
details.entenda .links { margin-top: 10px; }
.lados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.como-votaram {
  margin-top: 18px; background: var(--surface-2); border-radius: 14px; padding: 14px 16px;
  font-size: .88rem; color: var(--text-2);
}
.cv-cab { margin: 0 0 10px; line-height: 1.5; }
.cv-cab strong { color: var(--text); }
.cv-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cv-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cv-col.seu-lado { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cv-tit { font-weight: 650; color: var(--text); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cv-voce {
  font-size: .72rem; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 999px; padding: 2px 8px;
}
.cv-vazio { color: var(--text-3); }
.cv-col .chips { margin: 0; }
@media (max-width: 480px) { .cv-colunas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .lados { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.chave-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chave-form input { flex: 1; min-width: 220px; font-family: var(--mono); font-size: .9rem; }


/* ---------- gastos ---------- */
.comparacoes { display: grid; gap: 6px; }
.comparacao {
  display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 10em; gap: 12px; align-items: center; font-size: .9rem;
}
.comparacao .nome { color: var(--text-2); overflow-wrap: anywhere; }
.comparacao .trilho { position: relative; height: 10px; border-radius: 4px; background: var(--track); }
.comparacao .cheio { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bar); border-radius: 4px; }
.comparacao .marca { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); }
.comparacao .valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.comparacao .valor small { color: var(--text-3); }
.legenda-comp { color: var(--text-3); font-size: .82rem; }
table.lista td small { display: block; color: var(--text-3); font-size: .78rem; }
.tabela-fornecedores td { vertical-align: top; }
.tabela-fornecedores .badge { margin: 0 4px 4px 0; }
tr.detalhe > td { background: var(--surface-2); padding: 12px; }
.fornecedor-detalhe .grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lista-simples { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; color: var(--text-2); }
.lista-simples li { margin: 3px 0; }
@media (max-width: 680px) {
  .comparacao { grid-template-columns: minmax(0, 1fr) auto; }
  .comparacao .trilho { grid-column: 1 / -1; grid-row: 2; }
}

.cola { display: none; }

@media (max-width: 680px) {
  .slot { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cand { flex-wrap: wrap; }
  .cand-acoes { width: 100%; }
  .barra { grid-template-columns: minmax(0, 1fr) auto; }
  .barra .trilho { grid-column: 1 / -1; grid-row: 2; }
  .salvo { margin-left: 0; width: 100%; }
}

@media print {
  body { background: #fff; color: #000; }
  .topo, .jornada, main, dialog { display: none !important; }
  .cola { display: block; font: 14pt/1.4 var(--sans); padding: 12mm; }
  .cola h1 { font-size: 16pt; margin: 0 0 8mm; }
  .cola table { border-collapse: collapse; width: 100%; }
  .cola td { border: 1px solid #000; padding: 4mm; }
  .cola td.numero { font: 700 20pt var(--mono); letter-spacing: .15em; width: 45mm; text-align: center; }
  .cola p { font-size: 10pt; margin-top: 6mm; }
}

/* ---------- ajuda para decidir: listas de deputados ---------- */
.como-funciona { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.como-funciona li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.como-funciona .passo {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem;
}
.como-funciona strong { display: block; font-size: .92rem; }
.como-funciona span:not(.passo) { display: block; font-size: .82rem; color: var(--text-2); margin-top: 2px; }
.seu-voto-listas { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.seu-voto-listas p { margin: 4px 0 0; }
.busca-listas { position: relative; margin: 4px 0 20px; }
.busca-listas input { width: 100%; padding: 12px 14px; font-size: 1rem; }
.busca-resultado { display: grid; gap: 4px; margin-top: 6px; }
.resultado-item {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
}
.resultado-item:hover { border-color: var(--accent); }
.resultado-item span { font-size: .84rem; color: var(--text-2); }
.resultado-item em { font-style: normal; font-size: .78rem; color: var(--accent-ink); margin-left: auto; }
.listas-titulo { font-size: 1.1rem; margin-bottom: 2px; }
.listas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; margin-top: 12px; }
.lista-card {
  display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px; box-shadow: var(--shadow);
}
.lista-card.minha { border: 2px solid var(--accent); }
.lista-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lista-cab h3 { font-size: 1rem; line-height: 1.3; }
.lista-cab small { display: block; color: var(--text-3); font-size: .8rem; margin-top: 4px; }
.lista-partidos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lista-partidos .chip { font-size: .72rem; padding: 1px 8px; }
.lista-vagas { text-align: center; flex: none; }
.lista-vagas strong { display: block; font-size: 1.8rem; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lista-vagas span { font-size: .75rem; color: var(--text-3); }
.assentos { display: flex; flex-wrap: wrap; gap: 4px; }
.assentos i { width: 12px; height: 12px; border-radius: 50%; background: var(--bar); }
.assentos span { font-size: .8rem; color: var(--text-3); }
.lista-rot { margin: 2px 0 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.lista-minha { margin: 0; font-size: .84rem; font-weight: 600; color: var(--accent-ink); }
.rostos { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.rosto {
  display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit; color: var(--text);
  background: none; border: 0; padding: 4px 2px; border-radius: 10px; cursor: pointer;
}
.rosto:hover { background: var(--surface-2); }
.rosto-foto { width: 44px; height: 44px; border-radius: 50%; font-size: .8rem; }
.rosto.meu .rosto-foto { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.rosto-nome {
  font-size: .72rem; line-height: 1.2; text-align: center; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rosto-mais { justify-content: center; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: 12px; min-height: 60px; }
.lista-rodape {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto;
}
.lista-margem { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lista-margem small { font-size: .76rem; color: var(--text-3); }
.lista-card.compacta { gap: 6px; padding: 12px 14px; box-shadow: none; }
.listas-sem-vaga { margin-top: 18px; }
.listas-grade.compacta { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

dialog.lista-dlg {
  width: min(780px, 100vw - 24px); height: min(880px, 100dvh - 24px); max-width: none; max-height: none; padding: 0;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--bg); color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
dialog.lista-dlg[open] { display: flex; flex-direction: column; }
.lista-dlg-corpo { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lista-dlg-cab { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.lista-dlg-cab h2 { font-size: 1.25rem; }
.lista-dlg-cab p { margin: 4px 0 0; color: var(--text-2); font-size: .9rem; }
.lista-dlg-rolagem { flex: 1; overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.faixa-lista { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; }
.faixa-lista summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.faixa-lista summary small { flex-basis: 100%; color: var(--text-3); font-size: .8rem; }
.cand-linhas { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 4px; }
.cand-linha {
  display: grid; grid-template-columns: 2em 40px minmax(0, 1fr) 120px auto; gap: 10px; align-items: center;
  padding: 8px; border-radius: 10px;
}
.cand-linha:hover { background: var(--surface-2); }
.cand-linha.meu { background: var(--accent-soft); }
.cand-pos { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-3); text-align: right; }
.cand-linha-foto { width: 40px; height: 40px; border-radius: 50%; font-size: .8rem; }
.cand-linha-info { min-width: 0; display: flex; flex-direction: column; }
.cand-linha-meta { font-size: .78rem; color: var(--text-3); overflow-wrap: anywhere; }
.cand-linha-acoes { display: flex; justify-content: flex-end; }

@media (max-width: 760px) {
  .como-funciona { grid-template-columns: minmax(0, 1fr); }
  .seu-voto-listas { flex-direction: column; align-items: flex-start; }
  .listas-grade { grid-template-columns: minmax(0, 1fr); }
  dialog.lista-dlg { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .cand-linha { grid-template-columns: 1.6em 36px minmax(0, 1fr); }
  .cand-linha .forca, .cand-linha-acoes { grid-column: 3; }
  .cand-linha-acoes { justify-content: flex-start; }
}

/* ---------- rodapé com o aviso geral ---------- */
.rodape { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-3); font-size: .85rem; text-align: center; }
.rodape p { margin: 6px auto; max-width: 720px; }

/* ---------- ficha da empresa ---------- */
dialog.empresa-dlg {
  width: min(680px, 100vw - 24px); height: min(860px, 100dvh - 24px); max-width: none; max-height: none; padding: 0;
  border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--bg); color: var(--text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
dialog.empresa-dlg[open] { display: flex; flex-direction: column; }
.empresa-dlg-corpo { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.empresa-cab { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.empresa-rot { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.empresa-cab h2 { font-size: 1.25rem; margin-top: 2px; }
.empresa-sub { margin: 4px 0 0; color: var(--text-2); font-size: .88rem; overflow-wrap: anywhere; }
.empresa-rolagem { flex: 1; overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.empresa-veredito { display: flex; flex-direction: column; gap: 2px; border-radius: 12px; padding: 12px 14px; background: var(--surface-2); border-left: 4px solid var(--text-3); }
.empresa-veredito.tom-ok { border-left-color: var(--ok); background: var(--ok-soft); }
.empresa-veredito.tom-info { border-left-color: var(--accent); background: var(--accent-soft); }
.empresa-veredito.tom-atencao { border-left-color: var(--warn); background: var(--warn-soft); }
.empresa-veredito.tom-alerta { border-left-color: var(--bad); background: var(--bad-soft); }
.empresa-veredito span { font-size: .9rem; color: var(--text-2); }
.empresa-contexto { margin: 12px 0 0; font-size: .9rem; }
.empresa-numeros { margin-top: 14px; }
.empresa-titulo { font-size: .95rem; margin: 20px 0 8px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.check strong { display: block; font-size: .92rem; }
.check span:not(.check-ic) { display: block; font-size: .86rem; color: var(--text-2); margin-top: 2px; }
.check-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--surface-2); color: var(--text-2); }
.check.tom-ok .check-ic { background: var(--ok-soft); color: var(--ok); }
.check.tom-info .check-ic { background: var(--accent-soft); color: var(--accent-ink); }
.check.tom-atencao .check-ic { background: var(--warn-soft); color: var(--warn); }
.check.tom-alerta .check-ic { background: var(--bad-soft); color: var(--bad); }
.socios { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.socios li { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.socios span { color: var(--text-3); font-size: .82rem; text-align: right; }
.link-inline { margin: 0 0 0 6px; font-size: .78rem; }
@media (max-width: 760px) {
  dialog.empresa-dlg { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}

/* ---------- indicadores de qualidade nos cartões de lista ---------- */
.lista-ind { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.lista-ind:empty { display: none; }
.ind-carregando { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-3); }
.ind-topo { display: flex; gap: 14px; align-items: center; }
.ind-indice { flex: none; width: 64px; text-align: center; }
.ind-indice strong { display: block; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ind-indice span { display: block; font-size: .66rem; color: var(--text-3); margin-top: 4px; line-height: 1.2; }
.ind-barras { flex: 1; display: grid; gap: 6px; min-width: 0; }
.ind-barra { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 2em; gap: 8px; align-items: center; font-size: .78rem; }
.ind-barra .ind-rot { color: var(--text-2); }
.ind-barra .trilho { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.ind-barra .cheio { display: block; height: 100%; background: var(--bar); border-radius: 4px; }
.ind-barra b { text-align: right; font-variant-numeric: tabular-nums; }
.ind-barra small { grid-column: 2 / -1; grid-row: 1; font-size: .72rem; color: var(--text-3); padding-left: 4px; }
.ind-resumo { margin: 8px 0 0; font-size: .8rem; color: var(--text-2); }
.rosto.anel-ok .rosto-foto { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ok); }
.rosto.anel-conferir .rosto-foto { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warn); }
.rosto.anel-serio .rosto-foto { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bad); }
.rosto.meu .rosto-nome { color: var(--accent-ink); font-weight: 700; }
.indicadores-ajuda { margin: 8px 0 4px; }

/* ---------- pontuação na ficha ---------- */
.rcard-val .de100 { font-size: .85rem; font-weight: 500; color: var(--text-3); }
.nota-topo { display: flex; gap: 18px; align-items: center; }
.nota-grande { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--accent-soft); color: var(--accent-ink); }
.nota-grande strong { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.nota-grande span { font-size: .72rem; }
.nota-barras { flex: 1; display: grid; gap: 8px; min-width: 0; }
.nota-barra { display: grid; grid-template-columns: minmax(8em, 34%) minmax(0, 1fr) 2.2em; gap: 10px; align-items: center; font-size: .86rem; }
.nota-rot { color: var(--text-2); }
.nota-barra .trilho { position: relative; height: 10px; border-radius: 5px; background: var(--track); }
.nota-barra .cheio { display: block; height: 100%; border-radius: 5px; background: var(--bar); }
.nota-barra .marca-meio { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text-3); }
.nota-barra b { text-align: right; font-variant-numeric: tabular-nums; }
.nota-sub { margin: 16px 0 8px; font-size: .88rem; color: var(--text-2); }
.descontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.descontos .leitura-tag { min-width: 3em; text-align: center; margin-right: 6px; }
@media (max-width: 760px) {
  .nota-topo { flex-direction: column; align-items: stretch; }
  .nota-grande { align-self: center; }
}

/* ---------- ALESP, emendas, trajetória e perfil do partido ---------- */
.aviso-bancada { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: .92rem; }
.pilha { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--track); }
.pilha span { display: block; min-width: 3px; }
.pilha-geral { background: var(--bar); }
.pilha-local { background: var(--warn); }
.pilha-simbolica { background: var(--bad); opacity: .75; }
.pilha-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.pilha-legenda li { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; align-items: start; }
.pilha-legenda i { width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; display: block; }
.pilha-legenda span { grid-column: 2; color: var(--text-2); font-size: .84rem; }
.linha-tempo li small { display: block; color: var(--text-3); font-size: .8rem; margin-top: 2px; }
.linha-tempo li.atual .lt-res { color: var(--accent-ink); font-weight: 600; }
.lt-res[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.tile.destaque { background: var(--accent-soft); }
.tile.destaque .val { color: var(--accent-ink); }
.tile .de100 { font-size: .8rem; font-weight: 500; color: var(--text-3); }
.dinamica { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .9rem; }
.bens-topo small .badge { margin: 4px 6px 0 0; }
.bens-topo small .link-inline { margin-top: 4px; }
.nota-rot small { color: var(--text-3); font-size: .78em; }
.lista-perfil { margin: 0; font-size: .8rem; color: var(--text-2); }
.lista-perfil:empty { display: none; }

/* ---------- visão por lista ou por pessoa ---------- */
.visao-barra { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 14px 0 12px; }
.segmentado { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.segmentado button { border: 0; background: var(--surface); color: var(--text-2); padding: 8px 14px; font: inherit; font-size: .9rem; cursor: pointer; }
.segmentado button + button { border-left: 1px solid var(--border); }
.segmentado button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.visao-ordem { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--text-2); }
.visao-ordem select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.pessoas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pessoa-botao { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.pessoa-botao:hover { border-color: var(--accent); }
.pessoa-linha.meu .pessoa-botao { border-color: var(--accent); background: var(--accent-soft); }
.pessoa-botao .rosto { padding: 0; }
.pessoa-info { display: grid; gap: 2px; min-width: 0; }
.pessoa-info small { color: var(--text-2); font-size: .82rem; }
.pessoa-info .pessoa-det { color: var(--text-3); }
.pessoa-nota { min-width: 3em; text-align: center; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pessoa-nota.vazia { color: var(--text-3); font-weight: 500; }

/* afinidade individual no rosto de quem já é deputado federal */
.rosto { position: relative; }
.rosto-afin {
  position: absolute; top: -4px; right: 2px; z-index: 1; font-size: .66rem; font-weight: 700; line-height: 1;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 5px; font-variant-numeric: tabular-nums;
}
.cand-linha-afin { display: block; font-size: .82rem; font-weight: 600; color: var(--accent-ink); margin-top: 2px; }

/* resultado: seções iguais para listas e deputados */
.res-secao { display: grid; gap: 10px; }
.res-secao-cab h4 { font-size: 1.05rem; margin: 0 0 2px; }
.res-secao-cab .explica { margin: 0; color: var(--text-2); font-size: .88rem; }
.res-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.res-foto { width: 44px; height: 44px; border-radius: 50%; font-size: .8rem; flex: none; }
.res-pessoa h4 { min-width: 0; }
.res-pessoa .link-btn { font-size: 1rem; line-height: 1.3; text-align: left; }

/* quem tende a ganhar e a perder com cada votação */
.quiz-efeitos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.quiz-efeito { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.quiz-efeito.ganha { border-top: 3px solid var(--ok); }
.quiz-efeito.perde { border-top: 3px solid var(--warn); }
.quiz-efeito h4 { margin: 0 0 8px; }
.quiz-efeito ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.quiz-efeito li { font-size: .88rem; line-height: 1.45; color: var(--text-2); }
.quiz-efeito li strong { display: block; color: var(--text); font-weight: 650; }
.quiz-efeitos + h4 { margin-top: 14px; }
@media (max-width: 560px) { .quiz-efeitos { grid-template-columns: minmax(0, 1fr); } }
.quiz-nota {
  margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--warn); background: var(--warn-soft);
  border-radius: 10px; font-size: .9rem; line-height: 1.5; color: var(--text);
}

/* pergunta do quiz: as quatro partes antes de responder */
.quiz-guia { display: grid; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.quiz-sec h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2);
}
.quiz-sec-n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: #fff; font-size: .75rem; letter-spacing: 0;
}
.quiz-sec > p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text-2); }
.quiz-incerto { margin-top: 8px !important; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.quiz-incerto strong { color: var(--text); }
.quiz-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-lado { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.quiz-lado-tit { margin: 0 0 4px; font-weight: 700; font-size: .92rem; color: var(--text); }
.quiz-lado-tit small { font-weight: 500; color: var(--text-3); }
.quiz-lado-quem { margin: 0 0 8px; font-size: .82rem; color: var(--accent-ink); font-weight: 600; line-height: 1.4; }
.quiz-lado ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.quiz-lado li { font-size: .88rem; line-height: 1.45; color: var(--text-2); }
.quiz-sec .quiz-efeitos { margin-top: 0; }
.quiz-efeito .quiz-lado-tit { margin-bottom: 8px; }
.quiz-cartao .quiz-nota { margin-top: 18px; }
@media (max-width: 560px) { .quiz-lados { grid-template-columns: minmax(0, 1fr); } }

/* Senado, Governo e Presidência: cartões por candidato */
.maj-intro { margin: 0 0 14px; }
.maj-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.maj-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.maj-card.escolhido { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.maj-card.invalido { opacity: .65; }
.maj-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.maj-foto { width: 64px; height: 80px; border-radius: 12px; }
.maj-id h4 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.maj-id .link-btn { font-size: 1.05rem; text-align: left; }
.maj-partido { margin: 2px 0 6px; font-size: .84rem; color: var(--text-2); overflow-wrap: anywhere; }
.maj-num {
  font: 700 1.5rem var(--mono); letter-spacing: .04em; color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 10px; padding: 4px 10px; line-height: 1.2;
}
.maj-afin { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-2); }
.maj-resumo {
  margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px;
  background: var(--surface-2); border-radius: 12px;
}
.maj-resumo dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.maj-resumo dd { margin: 2px 0 0; font-size: .88rem; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.maj-resumo dd small { color: var(--text-3); }
.maj-carregando { grid-column: 1 / -1; color: var(--text-3); font-size: .85rem; }
.maj-sinais { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 22px; }
.maj-sinais small { color: var(--text-3); font-size: .8rem; }
.maj-rodape { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.maj-rodape .btn { flex: 1; }
@media (max-width: 400px) { .maj-resumo { grid-template-columns: minmax(0, 1fr); } }

.maj-problema { margin-top: 18px; }
.maj-problema .maj-grade { margin-top: 12px; }

.maj-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 12px; }
.maj-filtros label { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-2); }
.maj-filtros select {
  font: inherit; font-size: .9rem; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.maj-filtro-aviso { font-size: .8rem; color: var(--text-3); }
.maj-convite { margin-bottom: 12px; }
.maj-convite p { margin: 0; }

/* ---------- tela de deputados: controles numa linha e balões de informação ---------- */
.listas-barra { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 10px; }
.listas-barra .busca-listas { flex: 1; min-width: 220px; margin: 0; position: relative; }
.listas-barra .busca-listas input {
  width: 100%; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
}
.listas-barra .busca-resultado {
  position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); background: var(--bg);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.listas-barra .busca-resultado:empty { display: none; }
.listas-barra .visao-ordem select { border-radius: 999px; padding: 7px 12px; }

/* Botões "Por lista / Por pessoa": um trilho só, sem caixa em volta de cada um. */
.listas-barra .segmentado, .maj-filtros .segmentado {
  display: inline-flex; gap: 2px; padding: 3px; margin: 0; border: 0; border-radius: 999px; background: var(--surface-2);
}
.listas-barra .segmentado button {
  border: 0; border-radius: 999px; background: transparent; color: var(--text-2); padding: 6px 14px;
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.listas-barra .segmentado button + button { border-left: 0; }
.listas-barra .segmentado button[aria-pressed="true"] {
  background: var(--surface); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.listas-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; position: relative; }
details.info-balao { position: static; }
details.info-balao > summary {
  list-style: none; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: 6px 12px 6px 10px; user-select: none;
}
details.info-balao > summary::-webkit-details-marker { display: none; }
details.info-balao > summary::before { content: "ⓘ"; margin-right: 6px; }
details.info-balao[open] > summary { background: var(--accent); color: #fff; }
.info-balao-corpo {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2); padding: 14px 16px; font-size: .9rem; color: var(--text-2); line-height: 1.5;
}
.info-balao-corpo p { margin: 8px 0 0; }
.info-balao-corpo ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.info-balao-corpo .como-funciona { margin: 0; }
.listas-quiz { color: var(--accent-ink); font-size: .84rem; text-decoration: underline; font-weight: 500; }

/* Campo do voto dentro do passo: uma barra compacta, sem repetir o que os cartões mostram. */
.passo-slots { margin-bottom: 14px; gap: 8px; }
.passo-slots .slot {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px;
  box-shadow: none;
}
.passo-slots .slot-cab h3 { font-size: .9rem; }
.passo-slots .slot-cab .dica { display: none; }
.passo-slots .slot-cab input { margin-top: 6px; font-size: 1.1rem; padding: 6px 10px; }
.passo-slots .resultado { min-height: 0; }
.passo-slots .foto { width: 40px; height: 50px; border-radius: 8px; font-size: .8rem; }
.passo-slots .cand-nome { font-size: .98rem; }
.passo-slots .cand-acoes .btn { padding: 6px 12px; font-size: .85rem; }
@media (max-width: 680px) {
  .passo-slots .slot { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cartão de lista (deputados), no padrão dos cartões de candidato ---------- */
.lista-card { gap: 12px; }
.lista-cab { align-items: flex-start; }
.lista-nome { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.lista-nome .lista-partidos { margin: 0; }
.lista-numeros { display: flex; gap: 8px; flex: none; }
.lista-num {
  min-width: 58px; text-align: center; background: var(--accent-soft); border-radius: 12px; padding: 6px 8px;
}
.lista-num strong { display: block; font-size: 1.5rem; line-height: 1.1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lista-num span { display: block; font-size: .7rem; color: var(--text-2); }
.lista-num.nota { background: var(--surface-2); }
.lista-num.nota strong { color: var(--text); }
.lista-card .maj-afin { margin: 0; }
.lista-card .lista-rodape { margin-top: 0; }
.lista-card .lista-rodape .btn { width: 100%; }
details.lista-mais { border-top: 1px solid var(--border); padding-top: 8px; }
details.lista-mais > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--accent-ink); }
details.lista-mais[open] { display: grid; gap: 10px; }
details.lista-mais .lista-margem { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.assentos { display: none; }

/* cartão de lista clicável */
.lista-card.clicavel { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lista-card.clicavel:hover { border-color: var(--accent); }
.lista-card.clicavel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lista-abrir { margin: 0; font-size: .82rem; font-weight: 600; color: var(--accent-ink); }
.lista-abrir span { font-size: 1.1rem; }

/* janela da lista: análise antes da lista inteira */
.analise-lista { display: grid; gap: 12px; margin-bottom: 18px; }
.analise-numeros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.analise-numeros .maj-afin { flex: 1; min-width: 220px; }
.analise-texto { margin: 0; font-size: .88rem; color: var(--text-2); line-height: 1.5; }
.quem-entraria { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.quem-entraria h3 { font-size: 1rem; margin: 0 0 4px; }
.quem-entraria ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.quem-entraria li { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; font-size: .88rem; }
.quem-entraria li small { flex-basis: 100%; color: var(--text-2); font-size: .8rem; line-height: 1.4; }
.cand-linha-avisos { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 4px; }
.cand-linha-avisos small { color: var(--text-2); font-size: .78rem; line-height: 1.4; }

.quem-entraria .explica { font-size: .86rem; margin: 0; }

/* ---------- ficha: empresas em que o candidato é sócio ---------- */
.emp-conta { font-size: .8rem; font-weight: 600; color: var(--text-2); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.emp-socios { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.emp-socio { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.emp-socio-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between; }
.emp-socio small { color: var(--text-2); font-size: .8rem; line-height: 1.4; }
.emp-socio .chips { margin-top: 2px; }
.badge.neutro { background: var(--surface-2); color: var(--text-2); }

/* nota de integridade nos cartões de Senado, Governo e Presidência */
.maj-integ .maj-carregando { grid-column: auto; font-size: .8rem; }
.afin-mini.integ-ok .cheio { background: var(--ok); }
.afin-mini.integ-conferir .cheio { background: var(--warn); }
.afin-mini.integ-serio .cheio { background: var(--bad); }
.afin-mini.integ-ok b { color: var(--ok); }
.afin-mini.integ-conferir b { color: var(--warn); }
.afin-mini.integ-serio b { color: var(--bad); }
.maj-foto.anel-ok { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ok); }
.maj-foto.anel-conferir { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warn); }
.maj-foto.anel-serio { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bad); }
.afin-mini b small { font-weight: 500; color: var(--text-3); font-size: .72rem; }

/* ---------- ficha: notícias ---------- */
.noticias-assuntos { display: grid; gap: 6px; margin-bottom: 12px; }
.noticias-assuntos > span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.noticias-assuntos .chip small { color: var(--text-3); margin-left: 2px; }
.noticias { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.noticia { display: grid; gap: 3px; padding-left: 10px; border-left: 3px solid var(--border); }
.noticia.risco { border-left-color: var(--warn); }
.noticia a { color: var(--text); font-weight: 600; font-size: .92rem; line-height: 1.35; text-decoration: none; }
.noticia a:hover { text-decoration: underline; }
.noticia small { color: var(--text-3); font-size: .78rem; }