/* =========================================================================
   Partidos — vista do painel (três colunas) e rankings isolados (vMix)
   ========================================================================= */
.bp-pt { font-family: "Inter", system-ui, sans-serif; }

/* ---- placa do painel ---------------------------------------------------
   Vidro, mas menos translúcido que o do Congresso (que fica sobre o mapa
   escuro): três rankings de números pequenos pedem mais contraste. 90–93%
   de opacidade dá a leitura de placa sobre o cenário sem virar retângulo
   chapado; o brilho no canto e o filete no topo fazem o resto. */
/* rola quando a tela é baixa demais para os três rankings; em foco, trava —
   rolar a placa invisível por baixo do objeto 3D não faria sentido */
.bp-painel[data-painel="partidos"] { height: 100%; overflow-y: auto; overflow-x: hidden; }
.bp-com-fundo-mapa .bp-painel[data-painel="partidos"] { overflow: hidden; }
.bp-pt-modo-painel { min-height: 100%; display: flex; flex-direction: column; }
.bp-pt-modo-painel .bp-pt-linha { height: 52px; }
/* a coluna de votos não tem a linha ANTES/AGORA: o espaço equivalente mantém
   as três listas começando na mesma altura */
.bp-pt-modo-painel .bp-pt-lista-votos { margin-top: 1.35rem; }
.bp-pt-modo-painel .bp-pt-linha-voto { height: 48px; }
.bp-pt-vidro {
  position: relative; isolation: isolate; flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 1rem 2rem .7rem; border-radius: 5px; color: #102A50;
}
/* o fundo é um elemento próprio para poder sumir em transição: gradiente
   não anima, opacidade anima */
.bp-pt-fundo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 18% 6%, rgba(255,255,255,.75), transparent 40%),
    linear-gradient(150deg, rgba(238,245,253,.93), rgba(204,222,243,.90));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(18,48,94,.08);
  transition: opacity .6s ease;
}
/* topo: título centrado, % à direita; sem a marca — ela já está no topo do
   painel, e repeti-la aqui roubava o canto que agora dá ar ao título */
.bp-pt-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: .4rem 0 1.9rem; }
.bp-pt-id { justify-self: center; text-align: center; line-height: 1.1; }
.bp-pt-id strong { display: block; font-size: 1.9rem; font-weight: 900; letter-spacing: .1em; color: #0C2A5C; }
.bp-pt-id span { display: block; margin-top: .3rem; font-size: .82rem; color: rgba(16,42,80,.65); }
.bp-pt-apur { justify-self: end; text-align: right; line-height: 1.05; }
.bp-pt-apur span { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(16,42,80,.55); }
.bp-pt-apur strong { font-size: 1.7rem; font-weight: 900; font-variant-numeric: tabular-nums; color: #0C2A5C; }

/* três colunas: a de votos é mais estreita e mais apagada — informação de
   apoio, não a manchete */
.bp-pt-palco { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; padding-top: .3rem; }   /* Governadores e Senado (votos válidos saiu do painel) */
.bp-pt-col { min-width: 0; }
.bp-pt-col-menor { opacity: .9; font-size: .9em; padding-top: .35rem; }

/* título da coluna: é o que se lê de longe. Grande, com um traço de acento
   na cor do painel — hierarquia: título > AGORA > sigla > resto */
.bp-pt-cab { display: flex; flex-direction: column; margin-bottom: .7rem; padding-bottom: .5rem; position: relative; }
.bp-pt-cab::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: #0C2A5C; }
.bp-pt-cab strong { font-size: 1.55rem; font-weight: 900; letter-spacing: .08em; color: #0C2A5C; line-height: 1.05; }
.bp-pt-cab span { margin-top: .3rem; font-size: .76rem; color: rgba(16,42,80,.65); }
.bp-pt-col-menor .bp-pt-cab strong { font-size: 1.15rem; }
.bp-pt-col-menor .bp-pt-cab::after { width: 40px; height: 2px; background: rgba(12,42,92,.5); }
.bp-pt-colunas, .bp-pt-linha { display: grid; grid-template-columns: 9px minmax(0,1fr) 3.4rem 4.4rem 2.6rem; gap: .5rem; align-items: center; }
.bp-pt-colunas { padding: 0 .7rem .15rem; font-size: .64rem; font-weight: 800; letter-spacing: .12em; color: rgba(16,42,80,.5); }
/* 4 células numa grade de 5 colunas: ANTES e AGORA precisam ser postas nas
   colunas 3 e 4 explicitamente, senão caem nas 2 e 3 e desalinham dos números */
.bp-pt-colunas span:nth-child(2) { grid-column: 3; text-align: right; }
.bp-pt-colunas span:nth-child(3) { grid-column: 4; text-align: right; }
.bp-pt-colunas span:nth-child(4) { grid-column: 5; }
.bp-pt-colunas span:nth-child(3) { color: rgba(16,42,80,.8); }
.bp-pt-lista { display: flex; flex-direction: column; gap: .38rem; }
.bp-pt-linha {
  height: 50px; padding: 0 .7rem; border-radius: 5px;
  background: rgba(255,255,255,.66); border: 1px solid rgba(38,72,118,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.bp-pt-linha i { width: 7px; height: 26px; border-radius: 1.5px; background: var(--cor); }
.bp-pt-sigla { min-width: 0; white-space: nowrap; overflow: hidden; font-weight: 800; font-size: 1rem; }
.bp-pt-sigla[data-longa="1"] { font-size: .82rem; letter-spacing: -.02em; }
.bp-pt-sigla[data-longa="2"] { font-size: .68rem; letter-spacing: -.03em; }
/* ANTES no mesmo azul de AGORA, só menor: a hierarquia vem do tamanho e do
   peso, não de apagar o número */
.bp-pt-antes { text-align: right; font-variant-numeric: tabular-nums; color: #0C2A5C; font-size: .9rem; font-weight: 600; }
.bp-pt-agora { text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; color: #0C2A5C; font-size: 1.36rem; }
.bp-pt-var { font-style: normal; display: inline-flex; align-items: center; justify-content: flex-end; gap: .25rem; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .82rem; }
/* seta: triângulo em clip-path; "respira" em vez de piscar — piscar em TV lê
   como alerta. Verde sobe, vermelho desce; sem variação não há seta. */
/* `.bp-pt-linha .bp-pt-seta`: a seta é um <i>, e a regra da barrinha de cor
   (`.bp-pt-linha i`) ganhava dela e a deixava transparente */
.bp-pt-linha .bp-pt-seta { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: bp-seta-respira 1.5s ease-in-out infinite alternate; }
.bp-pt-linha .bp-var-desce .bp-pt-seta { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bp-pt-linha .bp-var-igual .bp-pt-seta { display: none; }
@keyframes bp-seta-respira { from { opacity: 1; transform: translateY(0); } to { opacity: .3; transform: translateY(-2px); } }
.bp-var-desce .bp-pt-seta { animation-name: bp-seta-respira-desce; }
@keyframes bp-seta-respira-desce { from { opacity: 1; transform: translateY(0); } to { opacity: .3; transform: translateY(2px); } }
/* entrada: cada linha chega de baixo em cascata; a placa, os títulos e as
   colunas também. Como `display:none` reinicia animações de CSS, a coreografia
   se repete sempre que a vista é reaberta — sem código. */
.bp-pt-entra { animation: bp-pt-chega .62s cubic-bezier(.16,.84,.3,1) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); }
@keyframes bp-pt-chega { from { opacity: 0; translate: 0 14px; } }
.bp-pt-vidro { animation: bp-pt-placa .5s ease-out both; }
@keyframes bp-pt-placa { from { opacity: 0; translate: 0 8px; } }
/* valor que mudou nesta leitura: um brilho que apaga em 1,2 s */
.bp-pt-mudou { animation: bp-pt-brilho 1.2s ease-out both; }
@keyframes bp-pt-brilho { 0% { color: #1B8A4C; text-shadow: 0 0 10px rgba(27,138,76,.45); } 100% { text-shadow: none; } }
.bp-pt-agora.bp-pt-mudou { animation-name: bp-pt-brilho-agora; }
@keyframes bp-pt-brilho-agora { 0% { scale: 1.18; color: #1B8A4C; } 100% { scale: 1; } }
.bp-var-sobe { color: #1B8A4C; } .bp-var-desce { color: #C0392B; } .bp-var-igual { color: rgba(16,42,80,.35); }

/* votos: sigla, total, %, e uma barra fina embaixo */
.bp-pt-linha-voto { grid-template-columns: 7px minmax(0,1fr) 4.6rem 3.6rem; grid-template-rows: auto 4px; row-gap: 3px; height: 48px; padding-top: 4px; }
.bp-pt-linha-voto i { grid-row: 1 / span 2; height: 24px; }
.bp-pt-votos { text-align: right; font-variant-numeric: tabular-nums; color: rgba(16,42,80,.78); font-size: .82rem; }
.bp-pt-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; color: #0C2A5C; font-size: 1.02rem; }
.bp-pt-trilha { grid-column: 2 / span 3; height: 3px; background: rgba(18,48,94,.1); border-radius: 2px; overflow: hidden; }
.bp-pt-trilha span { display: block; height: 100%; border-radius: 2px; transition: width .6s ease; }
.bp-pt-bn .bp-pt-sigla { color: rgba(16,42,80,.62); font-weight: 700; }
.bp-pt-nota { margin-top: .5rem; text-align: center; font-size: .6rem; color: rgba(16,42,80,.5); letter-spacing: .02em; }

/* ---- rankings isolados: cartão lateral escuro, como o ranking de candidatos */
.bp-pt-modo-gov, .bp-pt-modo-sen, .bp-pt-modo-cam, .bp-pt-modo-votos { color: #fff; }
.bp-pt-modo-gov .bp-faixa-sub, .bp-pt-modo-sen .bp-faixa-sub, .bp-pt-modo-cam .bp-faixa-sub, .bp-pt-modo-votos .bp-faixa-sub { text-transform: none; letter-spacing: 0; }
.bp-pt-modo-gov .bp-pt-col, .bp-pt-modo-sen .bp-pt-col, .bp-pt-modo-cam .bp-pt-col, .bp-pt-modo-votos .bp-pt-col { padding: 1rem 1.4rem .4rem; }
.bp-pt-modo-gov .bp-pt-cab strong, .bp-pt-modo-sen .bp-pt-cab strong, .bp-pt-modo-cam .bp-pt-cab strong, .bp-pt-modo-votos .bp-pt-cab strong { display: none; }
.bp-pt-modo-gov .bp-pt-cab::after, .bp-pt-modo-sen .bp-pt-cab::after, .bp-pt-modo-cam .bp-pt-cab::after, .bp-pt-modo-votos .bp-pt-cab::after { display: none; }
.bp-pt-modo-gov .bp-pt-cab, .bp-pt-modo-sen .bp-pt-cab, .bp-pt-modo-cam .bp-pt-cab, .bp-pt-modo-votos .bp-pt-cab { padding-bottom: 0; margin-bottom: .4rem; }
.bp-pt-modo-gov .bp-pt-mudou, .bp-pt-modo-sen .bp-pt-mudou, .bp-pt-modo-cam .bp-pt-mudou, .bp-pt-modo-votos .bp-pt-mudou { animation-name: bp-pt-brilho-escuro; }
@keyframes bp-pt-brilho-escuro { 0% { color: #8FE3B0; text-shadow: 0 0 12px rgba(143,227,176,.5); } 100% { text-shadow: none; } }
.bp-pt-modo-gov .bp-pt-cab span, .bp-pt-modo-sen .bp-pt-cab span, .bp-pt-modo-cam .bp-pt-cab span, .bp-pt-modo-votos .bp-pt-cab span { color: rgba(190,214,245,.8); font-size: .82rem; }
.bp-pt-modo-gov .bp-pt-colunas, .bp-pt-modo-sen .bp-pt-colunas , .bp-pt-modo-cam .bp-pt-colunas { color: rgba(190,214,245,.6); }
.bp-pt-modo-gov .bp-pt-colunas span:nth-child(3), .bp-pt-modo-sen .bp-pt-colunas span:nth-child(3) , .bp-pt-modo-cam .bp-pt-colunas span:nth-child(3) { color: rgba(220,233,251,.95); }
.bp-pt-modo-gov .bp-pt-linha, .bp-pt-modo-sen .bp-pt-linha, .bp-pt-modo-cam .bp-pt-linha, .bp-pt-modo-votos .bp-pt-linha {
  height: 52px; background: rgba(255,255,255,.07); border-color: rgba(140,180,240,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.bp-pt-modo-gov .bp-pt-sigla, .bp-pt-modo-sen .bp-pt-sigla, .bp-pt-modo-cam .bp-pt-sigla, .bp-pt-modo-votos .bp-pt-sigla { color: #fff; font-size: 1.12rem; }
.bp-pt-modo-gov .bp-pt-antes, .bp-pt-modo-sen .bp-pt-antes , .bp-pt-modo-cam .bp-pt-antes { color: rgba(190,214,245,.6); font-size: 1.05rem; }
.bp-pt-modo-gov .bp-pt-agora, .bp-pt-modo-sen .bp-pt-agora , .bp-pt-modo-cam .bp-pt-agora { color: #fff; font-size: 1.6rem; }
.bp-pt-modo-gov .bp-var-sobe, .bp-pt-modo-sen .bp-var-sobe , .bp-pt-modo-cam .bp-var-sobe { color: #8FE3B0; }
.bp-pt-modo-gov .bp-var-desce, .bp-pt-modo-sen .bp-var-desce , .bp-pt-modo-cam .bp-var-desce { color: #FF8F84; }
.bp-pt-modo-gov .bp-var-igual, .bp-pt-modo-sen .bp-var-igual , .bp-pt-modo-cam .bp-var-igual { color: rgba(190,214,245,.4); }
.bp-pt-modo-votos .bp-pt-linha-voto { height: 52px; grid-template-columns: 7px minmax(0,1fr) 5.4rem 4.2rem; }
.bp-pt-modo-votos .bp-pt-votos { color: rgba(190,214,245,.7); font-size: .9rem; }
.bp-pt-modo-votos .bp-pt-pct { color: #fff; font-size: 1.3rem; }
.bp-pt-modo-votos .bp-pt-trilha { background: rgba(255,255,255,.12); }
.bp-pt-modo-votos .bp-pt-bn .bp-pt-sigla { color: rgba(190,214,245,.75); }
.bp-pt-modo-gov .bp-pt-nota, .bp-pt-modo-sen .bp-pt-nota, .bp-pt-modo-cam .bp-pt-nota, .bp-pt-modo-votos .bp-pt-nota { color: rgba(190,214,245,.55); padding: 0 1.4rem 1rem; font-size: .66rem; }

/* ---- foco -------------------------------------------------------------
   O 3D é todo em WebGL (partidos3d.js). O CSS só faz os fades rápidos: os
   outros rankings e o título geral somem em 250 ms; a coluna em foco some
   quando o canvas já a cobre (`-coberta`), então a troca DOM → 3D não se vê. */
.bp-pt-col { transition: opacity .25s ease; }
.bp-pt-focado .bp-pt-col:not(.bp-pt-col-foco) { opacity: 0; pointer-events: none; }
.bp-pt-col-coberta { opacity: 0 !important; transition: opacity .12s linear; }
.bp-pt-focado .bp-pt-fundo { opacity: .08; }
.bp-pt-id, .bp-pt-apur, .bp-pt-nota { transition: opacity .25s ease; }
.bp-pt-focado .bp-pt-id, .bp-pt-focado .bp-pt-apur, .bp-pt-focado .bp-pt-nota { opacity: 0; }
.bp-pt-focado .bp-pt-focar { opacity: 0; pointer-events: none; }

/* botões: Focar discreto no canto do cabeçalho; Voltar no canto da placa */
.bp-pt-cab { padding-right: 0; }
.bp-pt-focar {
  position: absolute; right: 0; top: .2rem; cursor: pointer;
  font: 800 .66rem/1 "Inter", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #0C2A5C; background: rgba(12,42,92,.1); border: 1px solid rgba(12,42,92,.22);
  padding: .42rem .75rem; border-radius: 999px; transition: background .2s, color .2s, opacity .3s;
}
.bp-pt-focar:hover { background: #0C2A5C; color: #fff; }
.bp-pt-voltar {
  position: absolute; right: 1.4rem; top: 1rem; z-index: 6; cursor: pointer;
  font: 800 .72rem/1 "Inter", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(12,42,92,.9); border: 1px solid rgba(255,255,255,.35);
  padding: .6rem 1rem; border-radius: 999px; box-shadow: 0 8px 22px rgba(3,12,30,.4);
  animation: bp-pt-chega .45s ease-out both;
}
.bp-pt-voltar:hover { background: #164E9E; }

/* o painel mostra o mapa por trás, apagado e sem interação */
.bp-palco.bp-com-fundo-mapa { position: relative; }
.bp-palco.bp-com-fundo-mapa .bp-painel[data-painel="mapa"] {
  position: absolute; inset: 0; z-index: 0; opacity: .3; pointer-events: none;
  filter: saturate(.75); transition: opacity .6s ease;
}
.bp-palco.bp-com-fundo-mapa .bp-painel[data-painel="mapa"] #paineis-dir,
.bp-palco.bp-com-fundo-mapa .bp-painel[data-painel="mapa"] .bp-btn-brasil { display: none; }
.bp-palco.bp-com-fundo-mapa .bp-painel[data-painel="partidos"] { position: relative; z-index: 2; }

/* ---- vitrine WebGL: canvas no palco, acima da vista, sem capturar clique */
.bp-pt-vitrine { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }

/* sem botão Focar: o ranking inteiro é a área de toque */
.bp-pt-focaveis .bp-pt-modo-painel .bp-pt-col, .bp-pt-focaveis .bp-pt-col { cursor: pointer; border-radius: 10px; transition: opacity .25s ease, background .2s ease; }
.bp-pt-focaveis:not(:has(.bp-pt-focado)) .bp-pt-col:hover { background: rgba(255,255,255,.05); }