/* Saira (SIL OFL 1.1, ver fonts/OFL.txt), fonte variável 400–700 hospedada localmente */
@font-face {
  font-family: "Saira";
  src: url("fonts/saira-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Paleta PATEC broadcast. Contraste AA conferido nos dois temas. */
:root {
  /* marca */
  --marca: #064975;
  --marca-forte: #043656;
  --marca-texto: #ffffff;           /* texto sobre a cor da marca */
  --marca-clara: #3a8cc4;           /* barras dos candidatos */
  /* neutros levemente azulados */
  --bg: #f3f6f9;
  --card: #ffffff;
  --texto: #0e2130;
  --suave: #4f6375;
  --borda: #d9e2ea;
  --trilho: #e3eaf1;
  /* semânticas (separadas da marca) */
  --eleito: #0b6b37;
  --eleito-bg: #dcf3e5;
  --eleito-barra: #1f9d55;
  --turno2: #7a4d00;
  --turno2-bg: #fdefc8;
  --sj: #b02a14;
  --sj-bg: #fde5df;
  --sj-barra: #e0532e;
  --anulado: #48596a;
  --anulado-bg: #e6ecf2;
  --anulado-barra: #9aabbb;
  --aviso: #8a4b00;
  --aviso-bg: #fff4dc;
  --simulado: #b42318;
  /* composição dos votos */
  --v-validos: var(--marca-clara);
  --v-anulados: var(--anulado-barra);
  --v-sj: var(--sj-barra);
  --v-brancos: #c5d3df;
  --v-nulos: #5b7185;

  /* cores categóricas das agremiações (matiz gerado no JS) */
  --cat-s: 58%;
  --cat-l: 42%;
  --vazia: #cfdbe6;

  --fonte: "Saira", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --raio: 12px;
}

/* Tema escuro: automático (prefers-color-scheme), salvo ?tema=claro; forçado com ?tema=escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --marca: #4fa3d9;
    --marca-forte: #7bbce6;
    --marca-texto: #04121c;
    --marca-clara: #3a8cc4;
    --bg: #0b1620;
    --card: #122230;
    --texto: #e6eef5;
    --suave: #9db0c1;
    --borda: #243a4d;
    --trilho: #1e3244;
    --eleito: #6fdc9c;
    --eleito-bg: #0d3a24;
    --eleito-barra: #34b870;
    --turno2: #f5c451;
    --turno2-bg: #3d2c05;
    --sj: #ff9d7e;
    --sj-bg: #4a1a10;
    --sj-barra: #f06a43;
    --anulado: #c3d0dc;
    --anulado-bg: #2a3d4f;
    --anulado-barra: #5f7488;
    --aviso: #f5c451;
    --aviso-bg: #3d2c05;
    --simulado: #d92d20;
    --v-brancos: #3b5367;
    --v-nulos: #8ea3b6;
    --cat-s: 55%;
    --cat-l: 60%;
    --vazia: #2c4459;
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --marca: #4fa3d9;
  --marca-forte: #7bbce6;
  --marca-texto: #04121c;
  --marca-clara: #3a8cc4;
  --bg: #0b1620;
  --card: #122230;
  --texto: #e6eef5;
  --suave: #9db0c1;
  --borda: #243a4d;
  --trilho: #1e3244;
  --eleito: #6fdc9c;
  --eleito-bg: #0d3a24;
  --eleito-barra: #34b870;
  --turno2: #f5c451;
  --turno2-bg: #3d2c05;
  --sj: #ff9d7e;
  --sj-bg: #4a1a10;
  --sj-barra: #f06a43;
  --anulado: #c3d0dc;
  --anulado-bg: #2a3d4f;
  --anulado-barra: #5f7488;
  --aviso: #f5c451;
  --aviso-bg: #3d2c05;
  --simulado: #d92d20;
  --v-brancos: #3b5367;
  --v-nulos: #8ea3b6;
  --cat-s: 55%;
  --cat-l: 60%;
  --vazia: #2c4459;
}
:root[data-tema="claro"] { color-scheme: light; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 16px/1.45 var(--fonte);
}

.num { font-variant-numeric: tabular-nums; }

a { color: var(--marca); }
a:hover { color: var(--marca-forte); }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

[hidden] { display: none !important; }

/* Faixa de simulado */
.faixa-simulado {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--simulado);
  color: #fff;
  text-align: center;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .85rem;
  padding: 6px 16px;
}

/* Cabeçalho */
.topo {
  background: var(--card);
  border-bottom: 4px solid var(--marca);
  padding: 12px 0;
}
.topo-conteudo { display: flex; align-items: center; gap: 14px; }
.logo-link { display: block; flex: none; line-height: 0; border-radius: 6px; }
.logo-link:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.logo { height: 44px; width: auto; display: block; }
.topo-textos { min-width: 0; padding-left: 14px; border-left: 1px solid var(--borda); }
.topo h1 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--marca);
}
.sub { margin: 2px 0 0; color: var(--suave); font-size: .85rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo { filter: brightness(0) invert(1); }
}
:root[data-tema="escuro"] .logo { filter: brightness(0) invert(1); }

/* Controles */
.controles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 12px;
}
.cargos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--trilho);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.cargo-btn {
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  border: 0;
  border-radius: 7px;
  padding: 9px 6px;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}
.cargo-btn { grid-column: span 2; }
.cargo-btn[data-cargo^="deputado"] { grid-column: span 3; }
.cargo-btn:hover { background: var(--card); }
.cargo-btn[aria-pressed="true"] {
  background: var(--marca);
  color: var(--marca-texto);
  font-weight: 700;
}
.cargo-btn:focus-visible, select:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.abrangencia { display: flex; flex-direction: column; gap: 4px; }
.rotulo { font-size: .8rem; color: var(--suave); }
select {
  font: inherit;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--card);
  color: var(--texto);
  width: 100%;
}

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: .85rem;
  color: var(--suave);
  min-height: 1.5em;
}
.aviso {
  color: var(--aviso);
  background: var(--aviso-bg);
  border-radius: 6px;
  padding: 2px 8px;
}

.titulo-resultado { font-size: 1.3rem; font-weight: 700; margin: 12px 0 10px; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 12px;
}
.card h3 {
  margin: 0 0 10px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--suave);
}
.linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.destaque { font-size: 1.7rem; color: var(--marca); }
.grande { font-size: 1.35rem; margin: 0; font-weight: 600; }
.nota { font-size: .8rem; color: var(--suave); margin: 8px 0 0; }

.barra-progresso {
  height: 12px;
  background: var(--trilho);
  border-radius: 99px;
  overflow: hidden;
}
.barra-progresso-fill {
  height: 100%;
  width: 0;
  background: var(--marca);
  border-radius: 99px;
  transition: width .6s ease;
}

.grade-numeros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}
.grade-numeros div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.grade-numeros dt { color: var(--suave); font-size: .85rem; flex-basis: 100%; }
.grade-numeros dd { margin: 0; font-size: 1.2rem; font-weight: 600; }
.grade-numeros dd.pct { font-size: .9rem; color: var(--suave); font-weight: 400; }

/* Candidatos */
.candidatos { list-style: none; margin: 0; padding: 0; }
.cand {
  padding: 12px 0;
  border-top: 1px solid var(--borda);
}
.cand:first-child { border-top: 0; padding-top: 0; }
.cand-cab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px 10px;
  align-items: start;
}
.cand-numero {
  min-width: 2.6em;
  text-align: center;
  font-weight: 700;
  color: var(--marca);
  background: var(--trilho);
  border-radius: 6px;
  padding: 2px 6px;
}
.cand-nome { font-weight: 600; overflow-wrap: anywhere; }
.cand-pct { font-weight: 700; font-size: 1.15rem; text-align: right; }
.cand-info {
  grid-column: 2;
  grid-row: 2;
  font-size: .82rem;
  color: var(--suave);
  overflow-wrap: anywhere;
}
.cand-votos { grid-column: 3; grid-row: 2; text-align: right; font-size: .82rem; color: var(--suave); white-space: nowrap; }
.cand-vices { grid-column: 2 / 4; font-size: .8rem; color: var(--suave); overflow-wrap: anywhere; }
.selos { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.selo {
  font-size: .72rem;
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.selo-eleito { color: var(--eleito); background: var(--eleito-bg); }
.selo-turno2 { color: var(--turno2); background: var(--turno2-bg); }
.selo-sj { color: var(--sj); background: var(--sj-bg); }
.selo-anulado { color: var(--anulado); background: var(--anulado-bg); }
.selo-outro { color: var(--texto); background: var(--trilho); }

.cand-barra {
  margin-top: 8px;
  height: 8px;
  background: var(--trilho);
  border-radius: 99px;
  overflow: hidden;
}
.cand-barra-fill {
  height: 100%;
  width: 0;
  background: var(--marca-clara);
  border-radius: 99px;
  transition: width .6s ease;
}
.cand.eleito .cand-barra-fill { background: var(--eleito-barra); }
.cand.anulado .cand-barra-fill { background: var(--anulado-barra); }
.cand.sub-judice .cand-barra-fill { background: var(--sj-barra); }

/* Composição dos votos */
.barra-empilhada {
  display: flex;
  height: 14px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--trilho);
  margin-bottom: 12px;
}
.barra-empilhada span { height: 100%; }
.lista-votos { margin: 0; display: grid; gap: 8px; }
.lista-votos div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 8px;
  align-items: baseline;
}
.lista-votos dt { display: flex; align-items: center; gap: 8px; }
.lista-votos dd { margin: 0; text-align: right; font-weight: 600; }
.lista-votos .pct { grid-column: 2 / 4; font-size: .78rem; color: var(--suave); font-weight: 400; }
.lista-votos .sub dt { padding-left: 18px; font-size: .92rem; }
.lista-votos .sub2 dt { padding-left: 36px; font-size: .86rem; color: var(--suave); }
.bolinha { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.c-validos { background: var(--v-validos); }
.c-anulados { background: var(--v-anulados); }
.c-sj { background: var(--v-sj); }
.c-brancos { background: var(--v-brancos); }
.c-nulos { background: var(--v-nulos); }

/* Deputados (proporcional) */
.aviso-parcial {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--raio);
  color: var(--turno2);
  background: var(--turno2-bg);
  font-weight: 600;
  font-size: .9rem;
}
.cadeiras-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.cadeira { width: 16px; height: 16px; border-radius: 4px; }
.cadeira.vazia { background: var(--vazia); }
.cadeiras-legenda {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: .85rem;
}
.cadeiras-legenda li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.leg-nome { overflow-wrap: anywhere; }
.bolinha.sem-cadeira { background: transparent; box-shadow: inset 0 0 0 1.5px var(--borda); }

/* Tabelas: rolam dentro do próprio container, nunca a página */
.tabela-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .88rem; }
.tabela th, .tabela td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela thead th {
  background: var(--trilho);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--suave);
  white-space: nowrap;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .dir { text-align: right; }
.tabela .forte { font-weight: 700; }
.tabela .suave { color: var(--suave); }
.tabela td.col-nome { min-width: 180px; overflow-wrap: anywhere; }
.tabela td.col-nome .bolinha { margin-right: 8px; vertical-align: -1px; }
.sub-linha { display: block; font-size: .75rem; color: var(--suave); margin-top: 2px; }
.tabela .sit-nao-eleito td { color: var(--suave); }
.ordem {
  font: inherit;
  color: var(--marca);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-transform: inherit;
  letter-spacing: inherit;
  font-weight: 700;
}
.ordem:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.eleitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 24px; }
.eleito-item {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto;
  grid-template-areas: "pos nome votos" "pos info pct";
  gap: 0 10px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--borda);
}
.eleito-item:first-child { border-top: 0; }
@media (min-width: 640px) { .eleito-item:nth-child(2) { border-top: 0; } }
.el-pos { grid-area: pos; color: var(--suave); font-weight: 600; font-size: .9rem; }
.el-nome { grid-area: nome; font-weight: 600; overflow-wrap: anywhere; }
.el-votos { grid-area: votos; font-weight: 700; text-align: right; }
.el-info { grid-area: info; font-size: .8rem; color: var(--suave); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.el-pct { grid-area: pct; font-size: .8rem; color: var(--suave); text-align: right; }
.selo-mini { font-size: .66rem; padding: 1px 7px; white-space: nowrap; display: inline-block; }
.col-nome .selo-mini { margin-left: 6px; }
.eleito-item .selo-mini { font-size: .62rem; }
.selo-media { box-shadow: inset 0 0 0 1px var(--eleito); background: transparent; }
.selo-suplente { color: var(--anulado); background: var(--anulado-bg); }
.selo-nao { color: var(--suave); background: transparent; box-shadow: inset 0 0 0 1px var(--borda); }

.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filtro-busca { grid-column: 1 / -1; }
input[type="search"] {
  font: inherit;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--card);
  color: var(--texto);
  width: 100%;
}
input[type="search"]:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.tab-vazia { padding: 16px; text-align: center; margin: 0; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.paginacao .nota { margin: 0; text-align: center; }
.pag-btn {
  font: inherit;
  font-weight: 600;
  color: var(--marca);
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.pag-btn:disabled { color: var(--suave); opacity: .5; cursor: default; }
.pag-btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Estado vazio */
.vazio { text-align: center; padding: 40px 20px; }
.vazio-icone { width: 48px; height: 48px; color: var(--marca); }
.vazio-titulo { font-size: 1.2rem; font-weight: 700; margin: 12px 0 4px; }
.vazio-detalhe { color: var(--suave); margin: 0; }

/* Rodapé */
.rodape { margin-top: 24px; padding-bottom: 32px; font-size: .85rem; }
.faixa-rodape {
  background: var(--marca);
  color: var(--marca-texto);
  padding: 12px 0;
  font-weight: 600;
  margin-bottom: 12px;
}
.faixa-rodape a { color: inherit; }
.nw { white-space: nowrap; }
.faixa-rodape a:hover { color: inherit; text-decoration-thickness: 2px; }
.rodape p { margin: 4px 0; }

@media (min-width: 640px) {
  .controles { flex-direction: row; align-items: end; }
  .cargos { flex: 1; grid-template-columns: repeat(5, 1fr); }
  .cargo-btn, .cargo-btn[data-cargo^="deputado"] { grid-column: auto; }
  .filtros { grid-template-columns: 2fr 1fr 1fr; }
  .filtro-busca { grid-column: auto; }
  .eleitos { grid-template-columns: 1fr 1fr; }
  .abrangencia { width: 240px; }
  .grade-numeros { grid-template-columns: repeat(3, 1fr); }
  .logo { height: 56px; }
  .topo h1 { font-size: 1.7rem; }
  .sub { font-size: .95rem; }
}

@media (max-width: 359px) {
  .logo { height: 40px; }
  .topo-textos { padding-left: 10px; }
  .topo h1 { font-size: 1.1rem; }
}

/* ------------------------------------------------ Modo incorporado (?embed=1) */
.rodape-embed { display: none; }
html.embed body { display: flow-root; }            /* altura medida sem colapso de margens */
html.embed .topo, html.embed .rodape { display: none; }
html.embed .rodape-embed {
  display: block;
  font-size: .78rem;
  color: var(--suave);
  padding: 8px 0 10px;
  text-align: center;
}
html.embed .rodape-embed a { color: var(--marca); }
html.embed .faixa-simulado { position: static; font-size: .72rem; padding: 4px 12px; }
html.embed main.wrap { padding: 0 12px; }
html.embed .controles { margin-top: 12px; }
html.sem-seletor .controles { display: none; }
html.embed .titulo-resultado { margin-top: 8px; }
@media (max-width: 359px) {
  .cargo-btn { font-size: .82rem; padding: 8px 2px; }
  .card { padding: 12px; }
}

/* ------------------------------------------------ Placar (?embed=1&compacto=1) */
html.compacto .controles, html.compacto #titulo, html.compacto #resultado,
html.compacto #vazio { display: none !important; }
html.compacto .status { display: none; }
html.compacto .rodape-embed { padding: 2px 0 8px; }
.placar { padding-top: 8px; }
.placar-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.placar-titulo { font-weight: 700; font-size: .98rem; color: var(--marca); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placar-pct { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.placar-pct small { font-weight: 400; color: var(--suave); font-size: .75rem; }
.placar .barra-progresso { height: 6px; margin: 4px 0 8px; }
.placar-lista { list-style: none; margin: 0; padding: 0; }
.placar-lista li { padding: 3px 0; }
.placar-linha { display: flex; align-items: baseline; gap: 6px; font-size: .88rem; }
.placar-nome { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placar-linha .selo { font-size: .6rem; padding: 0 6px; flex: none; }
.placar-valor { font-weight: 700; white-space: nowrap; }
.placar-lista .cand-barra { margin-top: 3px; height: 4px; }
.placar-cadeiras { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--vazia); gap: 1px; }
.placar-cadeiras span { height: 100%; }
.placar-legenda { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: .8rem; }
.placar-legenda li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.placar-legenda .leg-nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.placar-vazio { margin: 6px 0; font-weight: 600; font-size: .9rem; }
.placar-rodape { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.placar-link { font-size: .82rem; font-weight: 600; }
.placar-idade { font-size: .72rem; color: var(--suave); }
.placar-idade.aviso { padding: 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .barra-progresso-fill, .cand-barra-fill { transition: none; }
}