/* Identidade Sinal News: vermelho #D90404, grafite #212121, cinza #53585C, Roboto. */
:root {
  --vermelho: #d90404;
  --vermelho-escuro: #a80303;
  --grafite: #212121;
  --fundo: #f5f5f5;
  --painel: #ffffff;
  --texto: #212121;
  --suave: #53585c;
  --linha: #e0e0e0;
  --trilho: #eeeeee;
  --verde: #1b8a3a;
  --ambar: #f2a007;
  --fonte: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
ul {
  list-style: none;
}
button,
select {
  font: inherit;
  color: inherit;
}
[hidden] {
  display: none !important;
}

/* ---------- peças comuns ---------- */
.logo-texto {
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 0.9;
  color: var(--vermelho);
  letter-spacing: -0.02em;
  display: inline-flex;
  flex-direction: column;
}
.logo-texto b {
  color: var(--grafite);
  font-size: 0.8em;
}

.aovivo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: var(--vermelho);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 0.4em 0.8em;
  border-radius: 0.25em;
  white-space: nowrap;
}
.aovivo::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #fff;
  animation: pulso 1.2s infinite;
}
@keyframes pulso {
  50% {
    opacity: 0.25;
  }
}

.avatar {
  position: relative;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--cor, var(--suave));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  overflow: hidden;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.barra {
  height: 0.6rem;
  background: var(--trilho);
  border-radius: 99px;
  overflow: hidden;
}
.barra i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cor, var(--vermelho));
  border-radius: inherit;
  transition: width 0.9s ease;
}

.sit {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2em 0.6em;
  border-radius: 0.25em;
  white-space: nowrap;
}
.sit:empty {
  display: none;
}
.sit.eleito {
  background: var(--verde);
  color: #fff;
}
.sit.turno2 {
  background: var(--ambar);
  color: #212121;
}

.lista {
  display: flex;
  flex-direction: column;
}
.cand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--linha);
}
.cand:first-child {
  border-top: 0;
}
.cand-pos {
  width: 1.4rem;
  text-align: center;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--suave);
  flex: none;
}
.cand-info {
  flex: 1;
  min-width: 0;
}
.cand-linha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cand-nome {
  font-size: 1.05rem;
  font-weight: 700;
}
.cand-sub {
  font-size: 0.8rem;
  color: var(--suave);
  margin: 0.15rem 0 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cand-num {
  text-align: right;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.cand-pct {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.cand-votos {
  font-size: 0.78rem;
  color: var(--suave);
}

.mapa {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.3rem;
}
.uf {
  --cor: #9e9e9e;
  --forca: 1;
  position: relative;
  border: 0;
  border-radius: 0.3rem;
  aspect-ratio: 5 / 3.6;
  cursor: pointer;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  background: color-mix(
    in srgb,
    var(--cor) calc(var(--forca) * 100%),
    var(--painel)
  );
  transition: background 0.6s;
  font-variant-numeric: tabular-nums;
}
.uf b {
  font-size: 0.85rem;
}
.uf small {
  font-size: 0.62rem;
  opacity: 0.9;
}
.uf.vazio {
  background: var(--trilho);
  color: var(--suave);
}
.uf.sel {
  outline: 0.18rem solid var(--texto);
  outline-offset: 0.08rem;
}
.uf:focus-visible {
  outline: 0.18rem solid var(--texto);
  outline-offset: 0.08rem;
}

/* ---------- página pública ---------- */
.topo {
  background: #fff;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
}
.topo .logo img {
  height: 2.6rem;
  display: block;
}
.topo-titulo {
  flex: 1;
  line-height: 1.15;
  border-left: 3px solid var(--vermelho);
  padding-left: 0.8rem;
}
.topo-titulo strong {
  display: block;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.topo-titulo span {
  font-size: 0.8rem;
  color: var(--suave);
}

.abas {
  background: var(--vermelho);
  display: flex;
  gap: 0.2rem;
  padding: 0 1rem;
  overflow-x: auto;
}
.abas button {
  background: none;
  border: 0;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.85rem 1rem;
  cursor: pointer;
  border-bottom: 0.25rem solid transparent;
  opacity: 0.8;
  white-space: nowrap;
}
.abas button[aria-selected="true"] {
  opacity: 1;
  border-bottom-color: #fff;
  background: var(--vermelho-escuro);
}

.faixa-sim {
  background: var(--grafite);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.45rem 1rem;
}
.faixa-sim b {
  color: #ffd54f;
}

.grade {
  max-width: 1180px;
  margin: 1rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.lateral {
  display: grid;
  gap: 1rem;
}
.cartao {
  background: var(--painel);
  border-radius: 0.4rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cartao h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
  padding-left: 0.6rem;
  border-left: 0.25rem solid var(--vermelho);
}
.cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.cab h1 {
  font-size: 1.7rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
}
.cab p {
  color: var(--suave);
  margin-top: 0.25rem;
}
.cab select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: 0.3rem;
  background: #fff;
  max-width: 100%;
}

.progresso {
  margin: 1rem 0 0.4rem;
}
.progresso-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  font-size: 0.8rem;
  color: var(--suave);
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.progresso-topo b {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--vermelho);
  font-variant-numeric: tabular-nums;
}
.progresso .barra {
  height: 0.8rem;
}

.erro {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: #fff3e0;
  border-left: 0.25rem solid var(--ambar);
  border-radius: 0.25rem;
  font-size: 0.9rem;
}

.numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.numeros div {
  border-top: 1px solid var(--linha);
  padding-top: 0.6rem;
}
.numeros span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--suave);
}
.numeros b {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.numeros small {
  color: var(--suave);
  margin-left: 0.3rem;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--suave);
}
.legenda i {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--cor);
  margin-right: 0.35rem;
  vertical-align: -1px;
}

.rodape {
  max-width: 1180px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  font-size: 0.78rem;
  color: var(--suave);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.rodape a {
  color: var(--vermelho);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 820px) {
  .grade {
    grid-template-columns: 1fr;
  }
  .cand {
    gap: 0.7rem;
  }
  .cand-pos {
    display: none;
  }
  .cand-pct {
    font-size: 1.25rem;
  }
  .aovivo {
    font-size: 0.65rem;
  }
}

/* ---------- telão (16:9; 1rem = 1% da largura do palco) ---------- */
html.telao {
  font-size: min(1vw, 1.7778vh);
  background: #000;
}
html.telao,
html.telao body {
  height: 100%;
  overflow: hidden;
}
body.telao-corpo {
  --fundo: #0d0d0f;
  --painel: #1a1a1e;
  --texto: #fff;
  --suave: #b9bcc2;
  --linha: #2e2e34;
  --trilho: #2e2e34;
  display: grid;
  place-items: center;
  background: #000;
}
.palco {
  width: 100rem;
  height: 56.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--texto);
  background:
    radial-gradient(
      60rem 30rem at 85% -10%,
      rgba(217, 4, 4, 0.35),
      transparent 70%
    ),
    linear-gradient(160deg, #17171b, #0b0b0d);
}

.t-topo {
  height: 7.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 3rem;
  flex: none;
}
.t-logo {
  background: #fff;
  border-radius: 0.6rem;
  padding: 0.7rem 1.2rem;
  display: grid;
  place-items: center;
  height: 5.4rem;
}
.t-logo img {
  height: 4rem;
  display: block;
}
.t-logo .logo-texto {
  font-size: 2rem;
}
.t-titulo {
  flex: 1;
  min-width: 0;
}
.t-kicker {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ff5a4f;
}
.t-titulo h1 {
  font-size: 3.5rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.t-titulo h1 span {
  font-weight: 300;
  color: var(--suave);
}
.t-dir {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.t-dir .aovivo {
  font-size: 1.15rem;
}
#relogio {
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.t-cena {
  flex: 1;
  min-height: 0;
  padding: 0.5rem 3rem 1.5rem;
  transition: opacity 0.4s;
}
.t-cena.saindo {
  opacity: 0;
}
.t-cena > section {
  height: 100%;
  display: grid;
  gap: 2rem;
}
.t-cena > section > * {
  min-width: 0;
}
#cena-cargo {
  grid-template-columns: 57rem 1fr;
}
#cena-mapa {
  grid-template-columns: 40rem 1fr;
  align-items: center;
}

.t-painel {
  background: var(--painel);
  border-radius: 1rem;
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--linha);
  min-height: 0;
}
.t-painel h2 {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--suave);
  margin-bottom: 0.6rem;
  padding-left: 0.8rem;
  border-left: 0.35rem solid var(--vermelho);
}

.duelo {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
  min-height: 0;
}
.destaque {
  --cor: var(--vermelho);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 0.9rem solid var(--cor);
  border-radius: 1rem;
  padding: 1.2rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 2rem;
  align-items: center;
  min-height: 0;
}
.destaque .avatar {
  width: 9.5rem;
  height: 9.5rem;
  font-size: 3.6rem;
}
.destaque > div:nth-child(2) {
  min-width: 0; /* a coluna do nome não empurra o percentual */
}
.destaque-nome {
  font-size: 3.1rem;
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.destaque-sub {
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--suave);
  margin: 0.3rem 0 0.8rem;
}
/* Partido · número numa linha e o vice na de baixo, cada uma sem quebrar. */
.destaque-sub span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.destaque .barra {
  height: 1.3rem;
}
.destaque-votos {
  font-size: 1.5rem;
  color: var(--suave);
  margin-top: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.destaque-dir {
  text-align: right;
}
.destaque-pct {
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.destaque .sit {
  font-size: 1.2rem;
  display: inline-block;
  margin-top: 0.5rem;
}

.t-lado {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}
.telao-corpo .cand {
  padding: 0.75rem 0;
  gap: 1.1rem;
}
.telao-corpo .cand-pos {
  font-size: 1.6rem;
  width: 1.8rem;
}
.telao-corpo .cand .avatar {
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.3rem;
}
.telao-corpo .cand-nome {
  font-size: 1.6rem;
}
.telao-corpo .cand-sub {
  font-size: 1.05rem;
  margin: 0.1rem 0 0.4rem;
}
.telao-corpo .cand-pct {
  font-size: 2.2rem;
}
.telao-corpo .cand-votos {
  font-size: 1.05rem;
}
.telao-corpo .cand .sit {
  font-size: 0.9rem;
}
.telao-corpo .numeros {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.telao-corpo .numeros div {
  border: 0;
  padding: 0;
}
.telao-corpo .numeros span {
  font-size: 0.95rem;
}
.telao-corpo .numeros b {
  font-size: 1.9rem;
  display: block;
}
.telao-corpo .numeros small {
  font-size: 1rem;
  margin: 0;
}

.telao-corpo .mapa {
  gap: 0.45rem;
}
.telao-corpo .uf {
  cursor: default;
  border-radius: 0.5rem;
  aspect-ratio: auto;
  height: 3.75rem;
}
.telao-corpo .uf b {
  font-size: 1.5rem;
}
.telao-corpo .uf small {
  font-size: 0.95rem;
}

.t-rodape {
  flex: none;
}
.t-prog {
  height: 4.4rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 3rem;
  background: rgba(0, 0, 0, 0.45);
  font-size: 1.25rem;
  color: var(--suave);
  white-space: nowrap;
}
.t-prog .rotulo {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
}
.t-prog .valor {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  min-width: 9rem;
}
.t-prog .barra {
  flex: 1;
  height: 1rem;
}
.t-prog b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ticker {
  height: 3.8rem;
  background: var(--vermelho);
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}
.ticker-faixa {
  display: inline-flex;
  white-space: nowrap;
  animation: correr 90s linear infinite;
}
.ticker-faixa span {
  padding: 0 2.2rem;
  border-right: 2px solid rgba(255, 255, 255, 0.35);
}
.ticker-faixa em {
  font-style: normal;
  opacity: 0.8;
  font-size: 0.85em;
}
@keyframes correr {
  to {
    transform: translateX(-50%);
  }
}

.selo-sim {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ffd54f;
  color: #212121;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.2em;
  padding: 0.25rem 1.4rem;
  border-radius: 0 0 0.5rem 0.5rem;
}
.t-erro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 0.6rem solid var(--ambar);
  border-radius: 0.8rem;
  padding: 2rem 3rem;
  font-size: 1.8rem;
  max-width: 60rem;
  text-align: center;
}
.ajuda {
  position: absolute;
  right: 2rem;
  bottom: 9.5rem;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid var(--linha);
  border-radius: 0.8rem;
  padding: 1.2rem 1.6rem;
  font-size: 1.15rem;
  line-height: 1.7;
}
.ajuda kbd {
  background: #fff;
  color: #212121;
  border-radius: 0.3rem;
  padding: 0 0.5rem;
  font-family: inherit;
  font-weight: 700;
  margin-right: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-faixa,
  .aovivo::before {
    animation: none;
  }
  .barra i {
    transition: none;
  }
}

/* ---------- público: filtros, busca e destaques ---------- */
.filtros {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.busca {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linha);
  border-radius: 0.3rem;
  font: inherit;
}
.nota {
  font-size: 0.8rem;
  color: var(--suave);
  margin-top: 0.8rem;
}
.botao {
  background: var(--vermelho);
  color: #fff;
  border: 0;
  border-radius: 0.3rem;
  padding: 0.6rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
.dest li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--linha);
}
.dest li:first-child {
  border-top: 0;
  padding-top: 0;
}
.dest small {
  display: block;
  color: var(--suave);
  font-size: 0.75rem;
}
.dest-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dest-num b {
  font-size: 1.15rem;
  font-weight: 900;
}

/* ---------- telão: deputados e candidatos em destaque ---------- */
#cena-lista,
#cena-destaques {
  grid-template-columns: 1fr;
}
#cena-lista .t-painel {
  display: flex;
  flex-direction: column;
}
.ranking {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
  column-gap: 3.5rem;
}
.telao-corpo .ranking .cand {
  padding: 0;
}
.ranking .cand:nth-child(5n + 1) {
  border-top: 0;
}
.telao-corpo .ranking .cand-pos {
  font-size: 2rem;
  width: 2.6rem;
}
.telao-corpo .ranking .avatar {
  width: 4rem;
  height: 4rem;
  font-size: 1.5rem;
}
.telao-corpo .ranking .cand-nome {
  font-size: 1.9rem;
}
.telao-corpo .ranking .cand-sub {
  font-size: 1.15rem;
}
.telao-corpo .ranking .cand-pct {
  font-size: 2.1rem;
}
.telao-corpo .ranking .cand-votos {
  font-size: 1.3rem;
  color: #fff;
  font-weight: 700;
}

.locais {
  font-size: 1rem;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.5em;
}
.locais[data-qtd="1"],
.locais[data-qtd="2"] {
  grid-template-columns: 1fr;
  font-size: 1.15rem;
}
.locais[data-qtd="3"],
.locais[data-qtd="4"] {
  grid-template-columns: 1fr 1fr;
}
.locais[data-qtd="5"],
.locais[data-qtd="6"] {
  font-size: 0.8rem;
}
.locais[data-qtd="7"],
.locais[data-qtd="8"],
.locais[data-qtd="9"] {
  font-size: 0.66rem;
}
.local {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 0.8em solid var(--cor);
  border-radius: 1em;
  padding: 1.2em 1.8em;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9em 1.6em;
  align-content: center;
  align-items: center;
  min-height: 0;
}
.local .avatar {
  width: 6.5em;
  height: 6.5em;
}
.local .avatar span {
  font-size: 2.4em;
}
.local-cargo {
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
}
.local-nome {
  font-size: 2.7em;
  font-weight: 900;
  line-height: 1.05;
  margin: 0.1em 0 0.15em;
}
.local .sit {
  font-size: 1em;
  display: inline-block;
}
.local-nums {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6em;
  border-top: 1px solid var(--linha);
  padding-top: 0.8em;
  font-variant-numeric: tabular-nums;
}
.local-nums b {
  display: block;
  font-size: 3.2em;
  font-weight: 900;
  line-height: 1;
}
.local-nums div + div b {
  color: #ff6b5e;
}
.local-nums span {
  font-size: 1.15em;
  color: var(--suave);
}
.t-vazio {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  font-size: 2rem;
  color: var(--suave);
  line-height: 1.5;
}

/* ---------- painel de controle ---------- */
body.telao-corpo:not(.mouse) {
  cursor: none;
}
.t-engrenagem {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 5;
  font: 700 14px var(--fonte);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
body.mouse .t-engrenagem {
  opacity: 1;
  pointer-events: auto;
}
.t-gaveta {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  z-index: 10;
  background: #141418;
  color: #fff;
  border-left: 1px solid #333;
  overflow-y: auto;
  font-size: 14px;
  cursor: default;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}
.t-gaveta-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--vermelho);
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 15px;
}
.t-gaveta-topo button {
  background: none;
  border: 0;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.painel {
  font-size: 14px;
  padding: 4px 16px 16px;
}
.painel section {
  padding: 14px 0;
  border-top: 1px solid var(--linha);
}
.painel section:first-child {
  border-top: 0;
}
.painel h3 {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--suave);
  margin-bottom: 0.7em;
}
.painel button {
  font: inherit;
  background: var(--trilho);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 0.5em 0.8em;
  cursor: pointer;
}
.painel button.ativo {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
  font-weight: 700;
}
.painel kbd {
  font: inherit;
  font-size: 0.8em;
  opacity: 0.6;
  margin-right: 0.5em;
}
.painel label {
  display: block;
  font-size: 0.9em;
  color: var(--suave);
  margin-top: 0.7em;
}
.painel input[type="text"],
.painel input[type="number"],
.painel select {
  font: inherit;
  width: 100%;
  margin-top: 0.25em;
  padding: 0.5em 0.6em;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: var(--painel);
  color: var(--texto);
}
.painel input[type="number"] {
  width: 5em;
}
.p-cenas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}
.p-cena {
  display: flex;
  flex-direction: column;
}
.p-cena button {
  text-align: left;
}
.painel .p-cena label {
  margin: 0.15em 0 0;
  font-size: 0.8em;
  cursor: pointer;
}
.p-linha {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin-top: 0.8em;
}
.painel .p-linha label {
  margin: 0;
}
.p-abr {
  margin-top: 0;
}
.p-dica {
  font-size: 0.8em;
  color: var(--suave);
  margin-top: 0.6em;
  line-height: 1.4;
}
.p-mapa {
  max-width: 330px;
  margin-bottom: 0.7em;
}
.painel .mapa {
  gap: 4px;
}
.painel .mapa .uf {
  height: auto;
  aspect-ratio: 5 / 3.2;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--linha);
  padding: 0;
}
.painel .mapa .uf b {
  font-size: 0.85em;
}
.painel .mapa .uf small {
  display: none;
}
.painel .mapa .uf.sel {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
  outline: 0;
}

.controle-corpo {
  max-width: 900px;
  margin: 1rem auto;
  padding: 0 1rem;
}
.controle .painel {
  background: var(--painel);
  border-radius: 0.4rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  columns: 2 340px;
  column-gap: 32px;
}
.controle .painel section {
  break-inside: avoid;
}
.p-escolhidos {
  margin-top: 0.6em;
}
.p-escolhidos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0;
  border-top: 1px solid var(--linha);
  font-size: 0.9em;
}
.painel .p-escolhidos button {
  padding: 0.1em 0.5em;
}
.painel input[type="search"] {
  font: inherit;
  width: 100%;
  margin-top: 0.25em;
  padding: 0.5em 0.6em;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: var(--painel);
  color: var(--texto);
}
.p-atual {
  font-size: 0.9em;
  color: var(--suave);
  margin-top: 0.8em;
}
.p-atual strong {
  color: var(--texto);
}
.p-filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}
.p-lista {
  margin-top: 0.5em;
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: 5px;
}
.p-lista:empty {
  display: none;
}
.painel .p-lista button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linha);
  border-radius: 0;
  padding: 0.45em 0.7em;
}
.painel .p-lista button:hover {
  background: var(--trilho);
}
.painel .p-lista button.ativo {
  background: var(--vermelho);
  color: #fff;
}
.p-lista small {
  opacity: 0.75;
  white-space: nowrap;
}
.p-status {
  font-size: 0.8em;
  color: var(--suave);
  margin-top: 0.4em;
}
.telao-corpo .ranking .cand-pos {
  width: 4.2rem;
  text-align: right;
}

/* ---------- menu do mapa: ver estado ou região (Presidente) ---------- */
.mapa-dica {
  margin: -0.3rem 0 0.6rem;
  font-size: 0.78rem;
  color: var(--suave);
}
.mapa-area {
  position: relative;
}
.mapa-voltar {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  border: 1px solid var(--linha);
  border-radius: 0.3rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  background: var(--painel);
  cursor: pointer;
}
.mapa-voltar:hover,
.mapa-voltar:focus-visible {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: #fff;
}
/* Fora da região escolhida: o estado some quase todo e não recebe clique. */
.mapa-svg .uf.apagado {
  opacity: 0.12;
  pointer-events: none;
}
.mapa-rotulos .apagado {
  visibility: hidden;
}
.mapa-menu {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 0.3rem;
  min-width: 13rem;
  max-width: 100%;
  padding: 0.6rem;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 0.4rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.mapa-menu strong {
  font-size: 0.85rem;
  padding: 0 0.2rem 0.2rem;
}
.mapa-menu button {
  border: 0;
  border-radius: 0.3rem;
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-size: 0.85rem;
  background: var(--trilho);
  cursor: pointer;
}
.mapa-menu button:hover,
.mapa-menu button:focus-visible {
  background: var(--vermelho);
  color: #fff;
  outline: none;
}

/* ---------- mapa real dos estados (SVG) ---------- */
.mapa {
  display: block;
}
.mapa-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow: visible;
}
.mapa-svg .uf {
  fill: color-mix(
    in srgb,
    var(--cor, #9e9e9e) calc(var(--forca, 1) * 100%),
    var(--painel)
  );
  stroke: var(--painel);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.6s;
  outline: none;
}
.mapa-svg .uf.vazio {
  fill: var(--trilho);
}
.mapa-svg.clicavel .uf {
  cursor: pointer;
}
.mapa-svg.clicavel .uf:hover,
.mapa-svg .uf:focus-visible {
  stroke: var(--texto);
  stroke-width: 3;
}
.mapa-svg .uf.sel {
  stroke: var(--texto);
  stroke-width: 5;
}
.mapa-rotulos {
  pointer-events: none;
  font-family: var(--fonte);
}
.mapa-rotulos text {
  text-anchor: middle;
  font-size: 22px;
  fill: var(--suave);
  font-variant-numeric: tabular-nums;
}
.mapa-rotulos .sigla {
  font-weight: 900;
  font-size: 24px;
  fill: var(--texto);
}
.mapa-rotulos .sobre-cor text:not(.fora),
.mapa-rotulos .sobre-cor text:not(.fora) .sigla {
  fill: #fff;
}
.mapa-rotulos text.fora {
  text-anchor: start;
}
.mapa-rotulos line {
  stroke: var(--suave);
  stroke-width: 1.5;
}
.telao-corpo #t-mapa {
  height: 100%;
  display: grid;
  place-items: center;
}
.telao-corpo #t-mapa .mapa-svg {
  height: 100%;
  width: auto;
  max-width: 100%;
}
.painel .mapa-rotulos .pct {
  display: none;
}
.painel .mapa-rotulos .sigla {
  font-size: 34px;
}
.painel .mapa-svg .uf.sel {
  fill: var(--vermelho);
}
.painel .mapa-svg .uf.sel ~ * {
}
#cena-mapa {
  align-items: stretch;
}
#cena-mapa .t-painel {
  align-self: center;
}
.telao-corpo #t-mapa {
  display: block;
  height: 100%;
  min-height: 0;
}
.telao-corpo #t-mapa .mapa-svg {
  width: 100%;
  height: 100%;
}
.mapa-rotulos text {
  font-size: 25px;
}
.mapa-rotulos .sigla {
  font-size: 29px;
}
.mapa-svg .uf {
  stroke-width: 2.5;
}

/* ---------- telão: cena do mapa em estilo de apresentação ---------- */
#cena-mapa {
  grid-template-columns: 47rem 1fr;
  gap: 2.5rem;
  margin: -1rem 0 -1.2rem;
  height: calc(100% + 2.2rem);
}
#cena-mapa .t-lado {
  justify-content: center;
}
#cena-mapa .t-painel {
  align-self: stretch;
}
.telao-corpo #t-mapa {
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.07),
    transparent 75%
  );
}
.telao-corpo #t-mapa .mapa-svg {
  filter: drop-shadow(0 1.2rem 1.6rem rgba(0, 0, 0, 0.65));
}
.telao-corpo #t-mapa .uf {
  fill: color-mix(
    in srgb,
    var(--cor, #9e9e9e) calc(45% + var(--forca, 1) * 55%),
    #1c1c21
  );
  stroke: #0b0b0d;
  stroke-width: 3;
}
.telao-corpo #t-mapa .uf.vazio {
  fill: #34343c;
}
.telao-corpo #t-mapa .mapa-rotulos text {
  font-size: 26px;
  fill: #d5d7db;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.telao-corpo #t-mapa .mapa-rotulos .sigla {
  font-size: 34px;
  fill: #fff;
}
.telao-corpo #t-mapa .mapa-rotulos line {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
}
.lideres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}
.lider {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.lider b {
  flex: none;
  min-width: 4.4rem;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  padding: 0.5rem 0.4rem;
  border-radius: 0.6rem;
  background: var(--cor);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.lider span {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lider small {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lider.sem b {
  background: #34343c;
  color: var(--suave);
}

/* ---------- telão: rolagem da lista de deputados ---------- */
.ranking-janela {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ranking-janela .ranking {
  height: 100%;
}
.ranking.rolando {
  height: auto;
  grid-template-rows: none;
  grid-auto-flow: row;
  grid-auto-rows: var(--linha, 7rem);
  will-change: transform;
}
.ranking.rolando.suave {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ranking.rolando .cand:nth-child(5n + 1) {
  border-top: 1px solid var(--linha);
}
.ranking.rolando .cand:nth-child(-n + 2) {
  border-top: 0;
}

/* ---------- telão: animações leves nas trocas ---------- */
@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes surgir-lado {
  from {
    opacity: 0;
    transform: translateX(-1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.t-cena.entrando > section > * {
  animation: surgir 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.t-cena.entrando > section > *:nth-child(2) {
  animation-delay: 0.12s;
}
.t-cena.entrando .destaque {
  animation: surgir-lado 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.t-cena.entrando .destaque:nth-child(2) {
  animation-delay: 0.1s;
}
.t-cena.entrando .lider {
  animation: surgir 0.5s ease-out both;
  animation-delay: 0.25s;
}
.local {
  animation: surgir 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--ordem, 0) * 70ms);
}
.t-titulo h1 > *,
.t-titulo h1 {
  animation: surgir-lado 0.45s ease-out;
}
.p-rede {
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--suave);
}
.p-rede strong {
  font-size: 1.1em;
  color: var(--texto);
}
@media (prefers-reduced-motion: reduce) {
  .t-cena.entrando > section > *,
  .t-cena.entrando .destaque,
  .t-cena.entrando .lider,
  .local,
  .t-titulo h1,
  .t-titulo h1 > * {
    animation: none;
  }
}

/* ---------- controle: lista no ar para rolar pelo celular ---------- */
.p-espelho {
  list-style: none;
  margin-top: 0.5em;
  height: 330px;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: 6px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.p-espelho:empty {
  display: none;
}
.p-espelho li {
  height: 44px;
  display: grid;
  grid-template-columns: 3.2em 1fr auto;
  align-items: center;
  gap: 0.6em;
  padding: 0 0.7em;
  border-bottom: 1px solid var(--linha);
}
.p-espelho li:nth-child(4n + 1),
.p-espelho li:nth-child(4n + 2) {
  background: color-mix(in srgb, var(--trilho) 55%, transparent);
}
.p-espelho b {
  font-weight: 900;
  color: var(--suave);
}
.p-espelho span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  line-height: 1.1;
}
.p-espelho small {
  display: block;
  font-weight: 400;
  font-size: 0.8em;
  color: var(--suave);
}
.p-espelho em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--suave);
}

/* ---------- listas roláveis do telão (todas as cenas) ---------- */
.rol-janela { flex: 1; min-height: 0; overflow: hidden; }
.painel-lista { display: flex; flex-direction: column; min-height: 0; }
.ranking { height: auto; grid-template-rows: none; grid-auto-flow: row; grid-auto-rows: var(--linha, 7rem); }
.ranking .cand, .ranking .cand:nth-child(5n + 1) { border-top: 1px solid var(--linha); }
.ranking .cand:nth-child(-n + 2) { border-top: 0; }
.rol-janela > .lista .cand { height: var(--linha, 5rem); padding-top: 0; padding-bottom: 0; }
.rol-janela > .lista .cand:first-child { border-top: 0; }
.rol-janela > .lista, .ranking-janela > .ranking { will-change: transform; }
.rol-janela > .lista.suave, .ranking-janela > .ranking.suave { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.p-espelho[data-por-linha='1'] li { background: none; }
.p-espelho[data-por-linha='1'] li:nth-child(odd) { background: color-mix(in srgb, var(--trilho) 55%, transparent); }

/* Fotos dos candidatos: o TSE publica em 3x4, com o rosto na parte de cima.
   Mostrar a foto inteira na largura e alinhar pelo alto evita cortar a cabeça. */
.avatar { background-color: var(--cor, var(--suave)); }
.avatar img { object-fit: cover; object-position: 50% 18%; }
.t-engrenagem { font-size: 16px; padding: 10px 18px; }

/* Botão de tela cheia: só o ícone, no canto de baixo à direita (aparece com o mouse). */
.t-engrenagem { top: auto; bottom: 16px; right: 16px; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border-radius: 10px; }
.t-engrenagem svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.t-engrenagem .sair, .t-engrenagem.cheia .entrar { display: none; }
.t-engrenagem.cheia .sair { display: block; }
.t-engrenagem:hover { background: var(--vermelho); border-color: var(--vermelho); }
.lider em { font-style: normal; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lider b { transition: background-color .4s; }

/* Selo de situação (aguardando TSE / simulação) na linha de cima, sem cobrir o texto. */
.t-kicker .selo-sim { position: static; transform: none; display: inline-block; margin-left: 1.2rem; padding: .15rem .8rem; border-radius: .35rem; font-size: .85rem; letter-spacing: .12em; vertical-align: .12rem; }

/* ---------- situação dos candidatos: eleito, 2º turno, suplente ---------- */
.sit.suplente { background: #6b7280; color: #fff; }
.sit.naoeleito { display: none; }
.cand.cand-eleito { box-shadow: inset .35rem 0 0 var(--verde); background: color-mix(in srgb, var(--verde) 9%, transparent); }
.cand.cand-turno2 { box-shadow: inset .35rem 0 0 var(--ambar); background: color-mix(in srgb, var(--ambar) 9%, transparent); }
.destaque.destaque-eleito { box-shadow: 0 0 0 .3rem var(--verde), 0 0 2.5rem color-mix(in srgb, var(--verde) 45%, transparent); }
.destaque.destaque-turno2 { box-shadow: 0 0 0 .25rem var(--ambar); }
.local.local-eleito { box-shadow: 0 0 0 .25rem var(--verde); }
.faixa-resultado { font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--verde); border-radius: .4rem; padding: .55rem 1rem; margin-top: 1rem; }
.faixa-resultado.turno2 { background: var(--ambar); color: #212121; }
.telao-corpo .faixa-resultado { position: absolute; right: 3rem; top: 7.2rem; z-index: 3; margin: 0; font-size: 1.5rem; padding: .45rem 1.4rem; box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .5); animation: surgir .5s ease-out; }
.telao-corpo .faixa-resultado { top: 7.6rem; font-size: 1.25rem; max-width: 37rem; text-align: center; }
#cena-cargo.com-faixa .t-lado { padding-top: 3.6rem; }
/* A faixa agora fica dentro da coluna da direita, acima dos demais candidatos. */
.telao-corpo .faixa-resultado { position: static; max-width: none; font-size: 1.35rem; padding: .7rem 1.2rem; }