/* Páginas da eleição 2026 (apuração, estimativa, mapa, municípios, deputados, método) no design system Contexto v8.
   A base (cores, cabeçalho, rodapé, vinheta de troca de tela) está em contexto.css, carregado antes deste arquivo. */
:root {
  /* nomes antigos mantidos para o JavaScript e os mapas: agora apontam para os tokens v8 */
  --roxo: var(--ink);
  --escuro: var(--ink);
  --nevoa: rgba(15, 14, 13, .045);
  --clara: var(--marmore);
  --vermelho: var(--esq);
  --azul: var(--dir);
  --empate: var(--centro);
}

.miolo { max-width: 1180px; margin: 0 auto; padding: 0 16px 24px; }

.grade-hero, .grade-3, .grade-mapa, .grade-filtros { display: grid; gap: 16px; }
.grade-hero { align-items: center; gap: 28px; padding: 48px 0 44px; margin-bottom: 8px; }
.grade-hero.faixa-ink .titulo { color: var(--ivory); }
.grade-hero.faixa-ink .titulo::before { background: var(--ivory); }
.grade-hero.faixa-ink .palco { border-color: var(--g4); background: #171614; }
@media (min-width: 640px) {
  .grade-3 { grid-template-columns: repeat(3, 1fr); }
  .grade-2 { grid-template-columns: repeat(2, 1fr); }
  .grade-filtros { grid-template-columns: 1.4fr .7fr .9fr auto; align-items: end; }
}
@media (min-width: 1024px) {
  .grade-hero { grid-template-columns: 1.25fr .75fr; }
  .grade-mapa { grid-template-columns: 15rem 1fr 18rem; align-items: start; }
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--hair); background: var(--superficie);
  color: var(--texto-2); font: 500 12.5px/1.3 var(--f-texto); }

.titulo { margin: 8px 0 0; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(38px, 6vw, 64px); line-height: 1.04;
  letter-spacing: -.01em; color: var(--tinta); text-wrap: balance; }
h2.titulo { font-size: clamp(28px, 3.6vw, 40px); }
h1.titulo::before, h2.titulo::before { content: ""; display: block; width: 64px; height: 5px; margin-bottom: 16px; background: var(--ink); }

.lede { max-width: 42rem; margin: 16px 0 0; font-size: 17.5px; color: var(--texto-2); }
.num { font-variant-numeric: tabular-nums; }

.cartao, .aviso, .palco, .mapa, .tabela-wrap, .campo, .btn { border: 1px solid var(--linha); }
.cartao { display: flex; flex-direction: column; gap: 6px; background: var(--superficie); padding: 20px; border-top: 3px solid var(--ink); }
.cartao-lula { border-top-color: var(--esq); }
.cartao-flavio { border-top-color: var(--dir); }
.cartao .rotulo, .cartao .grande, .cartao .miudo { margin: 0; }
.rotulo { margin: 0; font: 500 11px/1.4 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--texto-3); }
.grande { margin: 12px 0 0; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(40px, 5vw, 52px); line-height: 1; letter-spacing: -.01em; }
.miudo { margin: 6px 0 0; font-size: 14px; color: var(--texto-2); }

.aviso { background: var(--marmore); border-color: var(--hair); padding: 16px 20px; overflow-wrap: anywhere; }
.palco { height: 16rem; background: var(--marmore); }
.palco canvas { display: block; width: 100%; height: 100%; }

.campo, .btn, .check { font: inherit; color: var(--tinta); background: var(--superficie); }
.campo { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 8px 12px; border-color: var(--hair); }
.btn { min-height: 44px; padding: 8px 16px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--ink); transition: background .2s, color .2s; }
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn-cheio { background: var(--ink); color: var(--ivory); }
.btn-cheio:hover { background: var(--g4); border-color: var(--g4); }
.faixa-ink .btn-cheio { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.faixa-ink .btn-cheio:hover { background: var(--g1); }
.btn:disabled, .btn:disabled:hover { opacity: .45; cursor: not-allowed; background: var(--superficie); color: var(--tinta); }
.btn-cheio:disabled, .btn-cheio:disabled:hover { background: var(--g3); color: var(--ivory); border-color: var(--g3); }

.camada { display: block; width: 100%; text-align: left; }
.camada[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; background: transparent; }
.check input { accent-color: var(--ink); }
.pilha { display: flex; flex-direction: column; gap: 8px; }
.linha-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.barra { display: flex; height: 12px; overflow: hidden; background: var(--neutro); }
.fatia-lula, .fatia-flavio, .fatia-cobertura { display: block; height: 100%; width: 0; transition: width .75s cubic-bezier(.22, 1, .36, 1); }
.fatia-lula { background: var(--esq); }
.fatia-flavio { background: var(--dir); }
.fatia-cobertura { background: var(--ink); }
.cor-lula { color: var(--esq-texto); }
.cor-flavio { color: var(--dir-texto); }
.swatch-lula { background: var(--esq); }
.swatch-flavio { background: var(--dir); }
.swatch-empate { background: var(--centro); }
.swatch-sem { background: var(--sem); }
.uf-linha { display: grid; grid-template-columns: 2.5rem 1fr 4.5rem; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; }
.pesquisa { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
@media (min-width: 640px) { .pesquisa { grid-template-columns: 14rem 1fr 4.5rem; align-items: center; } }

.tabela-wrap { overflow-x: auto; background: var(--superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); }
.tabela th { font: 500 10.5px/1.4 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); background: var(--papel); border-bottom: 2px solid var(--ink); }
.tabela td.num, .tabela th.num { text-align: right; }
.tabela tr.linha-ativa td { background: var(--nevoa); }

.busca-lista { list-style: none; max-height: 16rem; margin: 8px 0 0; padding: 0; overflow: auto; }
.busca-lista:not(:empty) { border: 1px solid var(--linha); }
.busca-item, .link-mun { font: inherit; color: var(--tinta); text-align: left; cursor: pointer; background: var(--superficie); }
.busca-item { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--linha); }
.link-mun { min-height: 40px; padding: 0; border: 0; font-weight: 600; background: transparent; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.busca-item:hover, .busca-item:focus-visible, .link-mun:hover, .link-mun:focus-visible { background: var(--nevoa); }

.mapa { height: 70vh; min-height: 420px; background: var(--neutro); }
.mapa-uf { height: 34rem; min-height: 320px; }
.leaflet-container { background: var(--neutro); font-family: var(--f-texto); }
.grade-mapa-uf { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .grade-mapa-uf { grid-template-columns: 1.45fr .85fr; } }
.lista-uf { list-style: none; max-height: 34rem; margin: 12px 0 0; padding: 0; overflow: auto; }
.link-uf { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 4px; border: 0;
  border-bottom: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.link-uf .num { flex: 0 0 2rem; font-weight: 700; }
.link-uf > span:last-child { flex: 1; text-align: right; }
.link-uf.linha-ativa { background: var(--nevoa); }
.leaflet-interactive { transition: fill .7s ease, fill-opacity .9s ease, stroke .35s ease, stroke-width .35s ease; }
.legenda { margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; }
.legenda li { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--hair); }

.bloco { margin-top: 48px; }
.espaco { margin-top: 16px; }
.escondido { display: none !important; }

.linha-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.linha-titulo .titulo { margin-top: 0; }
.acoes-grafico { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 40rem; }
.notas-grafico { flex: 1 1 16rem; }
.notas-grafico .miudo { margin: 3px 0 0; }
.notas-grafico .miudo:first-child { margin-top: 0; }

@keyframes pulso { from { transform: translateY(8px); opacity: .35; } to { transform: none; opacity: 1; } }
.pulso { animation: pulso .45s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: no-preference) {
  #ficha.ficha-entra { animation: trocar .35s ease; }
  .grade-3 .cartao, .grade-2 .cartao { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
  .grade-3 .cartao:hover, .grade-2 .cartao:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(15, 14, 13, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .fatia-lula, .fatia-flavio, .fatia-cobertura, .leaflet-interactive, .pulso { transition: none; animation: none; }
}
@media (max-width: 639px) { .mapa { height: 65vh; min-height: 320px; } }
.grade-hero > div:only-child { grid-column: 1 / -1; }