/* As áreas do painel e os seus momentos.
 *
 * Entrada, estado da sessão, condução pela etapa da eleição e a entrega das
 * partes dos guardiões.
 *
 * Parte de estilo/. A folha foi dividida por assunto em 03/08/2026: 915 linhas
 * num arquivo só obrigavam a rolar por tudo para achar qualquer coisa.
 *
 * Ligadas por <link> múltiplo, e NÃO por @import: @import encadeia downloads —
 * o navegador só descobre o segundo arquivo depois de baixar o primeiro. */

/* --------------------------------------------------------------- áreas */

.area h2 {
  font-size: var(--texto-secao);
  margin: 0 0 1rem;
}
.area[hidden] {
  display: none;
}

/* O contexto da eleição aberta acompanha todas as áreas: cada ação abaixo se
   refere a ela, e descobrir isso só depois de agir é caro. */
.contexto {
  border-left: 4px solid var(--acao);
}

/* Enquanto nenhuma eleição está aberta, as áreas dependentes explicam o que
   falta em vez de mostrarem formulários que não têm onde gravar.
   Isto é orientação, não permissão: quem pode o quê é decidido no servidor. */
.exige-eleicao {
  color: var(--apagado);
}
body.com-eleicao .exige-eleicao {
  display: none;
}
.dependente {
  display: none;
}
body.com-eleicao .dependente {
  display: block;
}

/* Dado tabular rola dentro do próprio contêiner. Rolagem horizontal da página
   inteira é o defeito responsivo mais irritante que existe.
   tabindex="0" no contêiner é obrigatório: área rolável sem foco não é
   alcançável por quem não usa mouse. */
.rola {
  overflow-x: auto;
}
.rola:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 2px;
}
.rola table {
  min-width: 30rem;
}

/* Na trilha, data e nome NÃO quebram.

   Numa tabela espremida o navegador quebra palavra como último recurso, e o
   resultado é "03/08/202 6," e "gab riel" — apontado por Gabriel em 05/08/2026,
   olhando a janela estreita. Uma data partida no meio do ano deixa de ser data.

   Com `nowrap` a largura mínima da tabela cresce e o contêiner rola, que é para
   isso que ele existe. Rolar é incômodo; ler "gab riel" é erro.

   A coluna do meio continua quebrando: ela é frase, e frase quebra. */
.trilha-quando,
.trilha-quem {
  white-space: nowrap;
}

/* O detalhe da linha.

   A primeira versão tinha QUATRO tratamentos de texto — cinza grande, cinza
   pequeno, branco grande, branco pequeno — e nenhum deles queria dizer coisa
   diferente: o rótulo do grupo e o valor ficaram iguais, e a nota cinza ficou
   maior que o nome do campo, também cinza. Apontado por Gabriel em 05/08/2026.

   Agora são DOIS níveis de tipografia, e quem separa nome de valor é o
   alinhamento:

     - rótulo de grupo: miúdo, maiúsculo, espaçado — o mesmo tratamento do
       cabeçalho de tabela, que já existe no projeto e já significa "isto rotula
       o que vem abaixo";
     - nome do campo e valor: mesmo tamanho, em duas colunas. O nome fica
       apagado, o valor em cor de texto. */
.detalhe-do-evento td {
  padding-top: 0.25rem;
  padding-bottom: 1rem;
}
.titulo-do-detalhe {
  font-size: var(--texto-miudo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--apagado);
  font-weight: 600;
  margin: 1rem 0 0.4rem;
}
.titulo-do-detalhe:first-child {
  margin-top: 0.25rem;
}

/* A nota é miúda de propósito: ela explica a seção, não compete com ela. */
.nota-do-detalhe {
  font-size: var(--texto-miudo);
  color: var(--apagado);
  margin: 0 0 0.5rem;
  max-width: 60ch;
}

.detalhes {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.2rem 1rem;
  margin: 0;
  font-size: var(--texto-apoio);
}
.detalhes dt {
  color: var(--apagado);
}
.detalhes dd {
  margin: 0;
  color: var(--tinta);
}
/* A marca do evento não tem sílaba: quebra em qualquer ponto, senão estica a
   linha da tabela e empurra tudo de novo. */
.detalhes dd.mono {
  overflow-wrap: anywhere;
}

/* Numa tela estreita as duas colunas viram uma: `minmax(8rem, …)` a 200% pede
   256px só para o nome do campo, e sobra nada para o valor. */
@media (max-width: 34rem) {
  .detalhes {
    grid-template-columns: 1fr;
    gap: 0 0;
  }
  .detalhes dd {
    margin-bottom: 0.5rem;
  }
}

/* As colunas da lista de eleições NÃO se movem ao filtrar.

   Com largura automática, a tabela recalcula tudo a cada troca de conteúdo — e os
   nomes de estado variam muito ("Rascunho" contra "Cerimônia de chaves"), então
   as colunas dançavam a cada filtro. Apontado por Gabriel em 05/08/2026.

   `table-layout: fixed` faz a largura vir da declaração, e não do conteúdo. Só o
   nome da eleição fica elástico: é o único campo cujo tamanho varia de verdade e
   o único que se quer ler por inteiro.

   Escopado nesta tabela, e não em todas: a da trilha e a de eleitores têm outras
   proporções, e mudar as três de uma vez sem medir seria trocar um defeito visto
   por dois não vistos. */
#tabela-eleicoes {
  table-layout: fixed;
  /* Com a coluna de seções, 30rem já não comportam os dados sem esmagar o nome
     da eleição. A largura excedente fica contida em `.rola`, que oferece a
     rolagem horizontal acessível em telas estreitas. */
  min-width: 55rem;
}
#tabela-eleicoes th:nth-child(2),
#tabela-eleicoes td:nth-child(2) {
  width: 11rem;
}
#tabela-eleicoes th:nth-child(3),
#tabela-eleicoes td:nth-child(3) {
  width: 5rem;
}
#tabela-eleicoes th:nth-child(4),
#tabela-eleicoes td:nth-child(4) {
  width: 10rem;
}
/* A coluna de ações cabia só "Abrir". Com arquivar e apagar ao lado, 6rem
   espremia os três a ponto de sair uma letra por linha — o botão vira uma
   coluna de letras, e o rótulo deixa de ser legível. */
#tabela-eleicoes th:nth-child(5),
#tabela-eleicoes td:nth-child(5) {
  width: 15rem;
}
#tabela-eleicoes th:first-child,
#tabela-eleicoes td:first-child {
  overflow-wrap: break-word;
}

/* A linha da eleição aberta.

   A marca NÃO é só cor: a palavra "Aberta agora" entra na célula e `aria-current`
   diz o mesmo a quem usa leitor de tela. Cor sozinha não chega a quem não a
   distingue, e "qual está aberta" é a pergunta que se faz o tempo todo. */
.linha-aberta {
  background: var(--acao-clara);
}
/* A marca existe para a linha aberta não depender de COR — é isso que ela
   resolve, e só isso.

   Nasceu com maiúsculas, negrito e cor ao mesmo tempo, colada ao nome. Três
   realces empilhados fazem 13px pesar como 15px, e a marca passou a disputar
   leitura com o nome da eleição. Apontado por Gabriel em 05/08/2026.

   Fica a cor, que é o que dá o significado; saem o negrito e as maiúsculas, que
   só davam peso. E entra o respiro que faltava. */
.marca-aberta {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: var(--texto-miudo);
  font-weight: 400;
  color: var(--acao);
  white-space: nowrap;
}
/* `width: 1%` era do `<td>`: num layout de tabela ele significa "a menor
   largura possível". A classe passou a viver num `<div>` DENTRO da célula, e ali
   o mesmo 1% vira 1% de verdade — a caixa colapsava para 2px e os botões saíam
   com uma letra por linha.

   A largura da coluna agora é declarada em `#tabela-eleicoes`, que é o lugar
   dela. Aqui fica só o que diz respeito ao conteúdo. */
.eleicoes-acao {
  white-space: nowrap;
}

/* A coluna do botão não encolhe nem deixa o rótulo partir ao meio. */
.trilha-acao {
  width: 1%;
  white-space: nowrap;
}
.trilha-acao button {
  white-space: nowrap;
}

/* Coluna estreita, para o que é curto por natureza.

   Sem isto, `flex: 1 1 12rem` faz TODA coluna crescer igual, e o campo de
   quórum — um dígito — ficava com 400px, do mesmo tamanho do nome da eleição.
   Largura deve dizer quanto conteúdo se espera. */
.linha > div.curta {
  flex: 0 1 9rem;
  min-width: 0;
}

.linha > div.acao {
  /* `0 1 auto`, e não `0 0 auto`: o segundo NUNCA encolhe, e um botão de rótulo
     longo — "liberar a cerimônia de chaves" — mantinha a largura natural e
     atravessava a tela. `flex-wrap` só quebra ENTRE itens; um item maior que o
     contêiner estoura sozinho.

     `min-width: 0` é o par obrigatório: sem ele, item flex não encolhe abaixo
     do tamanho do próprio conteúdo, e o `1` acima não teria efeito. */
  flex: 0 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------- cargos e candidatos */

/* O formulário de acrescentar candidato, entre o título do cargo e a tabela.
   Os rótulos estavam colados na tabela — encostados na última linha, pareciam
   parte dela. Apontado por Gabriel em 05/08/2026. */
.novo-candidato {
  margin-bottom: var(--e5);
}

/* A legenda da tabela de candidatos.
   `caption` nasce centralizada; aqui ela é uma explicação, e explicação alinha
   com o texto que explica. */
.cartao table > caption {
  text-align: left;
  margin-bottom: var(--e2);
  font-size: var(--texto-miudo);
  color: var(--apoio, #666);
}

/* A célula de ações de uma linha de lista.

   `table-cell` não tem `gap`: dois botões lado a lado ficam com vão ZERO, e foi
   assim que "Refazer o rosto" e "Autorizar" nasceram — medido em 0px, encostados
   um no outro.

   Alvos de toque colados não são questão de estética: quem mira no primeiro
   acerta o segundo, e aqui o segundo AUTORIZA um eleitor a votar. Errar o clique
   emite uma credencial que ninguém pediu.

   `flex` com `gap` resolve, e `flex-wrap` evita que dois botões estourem a coluna
   em tela estreita. */
.acoes-da-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: flex-end;
}

/* ------------------------------------------- corrigir e excluir cadastros */

/* As ações do cargo, logo abaixo do título dele.

   Alinhadas à esquerda, sob o `h3`, e não à direita na mesma linha: à direita
   elas mudariam de lugar conforme o nome do cargo fosse curto ou longo, e o
   botão que apaga um cargo inteiro não deve andar pela tela. */
.acoes-do-cargo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e4);
}

/* O bloco que aparece quando o formulário de eleitor entra em modo de correção.

   A borda à esquerda é o sinal de que aquele formulário deixou de cadastrar e
   passou a corrigir. Sem ela, a única diferença visível seria o texto do botão —
   e quem chega no meio da tela não tem por que reparar nele. */
#correcao {
  border-left: 3px solid var(--acao);
  padding-left: var(--e4);
  margin-bottom: var(--e4);
}

/* A caixa "apto" e o rótulo dela, lado a lado.

   `align-items: baseline` alinha o quadradinho pelo texto, e não pelo topo da
   caixa: o rótulo tem uma linha de ajuda embaixo, e sem isto a marca subia
   sozinha para o alto do bloco. */
.caixa-de-marca {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--e2);
}
.caixa-de-marca .ajuda-do-campo {
  grid-column: 2;
}

/* A correção que acontece NO LUGAR do que ela edita — o título de um cargo, a
   linha de um candidato.

   Os campos da linha de candidato herdam a largura da célula, que é estreita.
   `min-width: 0` deixa o campo encolher com ela em vez de estourar a tabela para
   fora da tela em 390px. */
.correcao-no-lugar {
  margin-bottom: var(--e4);
}
.acoes-da-linha button,
td input {
  min-width: 0;
}

/* ------------------------------------------------------------- entrada */

/* A entrada cobre o painel inteiro enquanto não há sessão. É organização
   visual: quem recusa é o servidor, e ele recusa igual para quem apagar esta
   camada pelo inspetor. */
.entrada {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: var(--papel);
  overflow-y: auto;
}

.entrada[hidden] {
  display: none;
}

.entrada-cartao {
  width: min(24rem, 100%);
  margin: 0;
}

.entrada-cartao h1 {
  font-size: var(--texto-secao);
}

.entrada-cartao > div {
  margin-bottom: 0.75rem;
}

.quem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  font-size: var(--texto-miudo);
}

.quem[hidden] {
  display: none;
}

.quem button {
  min-height: 2.25rem;
  padding: 0.35rem 0.8rem;
}

/* ============================================================ estado da sessão

   Enquanto não se sabe se há sessão, nem o painel nem a entrada aparecem.

   A regra é de ESTILO, e não de script, e é o ponto inteiro: o painel piscava
   por menos de um segundo ao recarregar porque `#entrada` nascia escondido e o
   painel nascia visível — e quem decidia era o JavaScript, DEPOIS do primeiro
   desenho e da ida ao servidor. Consertar isso com JavaScript seria consertar
   depois do momento em que o problema acontece.

   Não vazava dado: os dados exigem requisições autenticadas, que o servidor
   recusa. Vazava a estrutura administrativa — áreas, navegação, nomes de seção —
   e passava a impressão de que o painel havia aberto sozinho. */

#carregando {
  display: none;
  margin: 4rem auto;
  max-width: 20rem;
  text-align: center;
  color: var(--apoio, #666);
}

:root[data-sessao="desconhecida"] #carregando {
  display: block;
}

/* Escondido para valer, nos DOIS estados sem sessão.

   Com sessão "nao" a entrada apenas COBRIA o painel: `position: fixed` com fundo
   opaco. Aos olhos, sumia. Ao Tab, não — a navegação lateral inteira, o
   formulário de nova eleição e o botão "Criar" continuavam na ordem de foco e na
   árvore de acessibilidade, alcançáveis antes mesmo de digitar a senha.

   Quem enxerga a tela via um formulário de entrada. Quem navega por teclado ou
   por leitor de tela atravessava o painel administrativo para chegar até ele.
   Cobrir não é esconder; `display: none` é. */
:root[data-sessao="desconhecida"] .atalho,
:root[data-sessao="desconhecida"] .faixa,
:root[data-sessao="desconhecida"] .casca,
:root[data-sessao="nao"] .atalho,
:root[data-sessao="nao"] .faixa,
:root[data-sessao="nao"] .casca {
  display: none;
}

/* Sem JavaScript, o estado nunca sai de "desconhecida" e só o aviso aparece. É o
   comportamento correto: o painel não funciona sem JavaScript de qualquer forma,
   e antes ele PARECIA funcionar. */

/* ================================================ conduzir pela etapa da eleição

   O sistema tem ordem obrigatória e a tela não a contava: mostrava tudo o tempo
   todo e só reclamava depois do clique. Quem operava precisava já saber a
   sequência. */

.proximo-passo {
  margin: 0.5rem 0 0.75rem;
  font-weight: 600;
}

/* Uma ação de estado e, quando bloqueada, o motivo logo abaixo dela. */
.acao-estado {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* O motivo é uma frase; em 320px ela precisa quebrar em vez de esticar a
     linha e produzir rolagem lateral. */
  max-width: 22rem;
}

/* O motivo do bloqueio é TEXTO.

   Informar por cor sozinha — botão apagado e nada mais — esconde de quem não
   distingue a diferença e de quem não vê a tela. É a regra do WCAG, e aqui o
   texto é o conteúdo inteiro do aviso. */
.acao-estado .motivo {
  margin: 0;
  font-size: var(--texto-miudo);
  line-height: 1.35;
  color: var(--apoio, #666);
}

/* Bloqueado usa `aria-disabled`, e NÃO o atributo `disabled`: com `disabled` o
   controle sai da ordem de foco, e quem navega por teclado nunca chegaria nele
   nem ouviria o motivo. O estilo acompanha o atributo que de fato está lá. */
button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* O foco continua visível no controle bloqueado — é justamente ele que precisa
   ser alcançado para o motivo ser lido. */
button[aria-disabled="true"]:focus-visible {
  opacity: 1;
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* ===================================== a entrega das partes dos guardiões

   Perdeu as partes, não apura mais. A tela precisa caber inteira em 320px: uma
   parte é uma sequência hexadecimal longa, e se ela estourar a largura, quem
   opera rola de lado no momento mais perigoso do sistema. */

.partes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.partes-lista .parte {
  display: grid;
  gap: 0.5rem;
  /* A parte quebra em qualquer ponto; nada aqui pode empurrar a página. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.partes-lista .parte button {
  justify-self: start;
}

/* O motivo de um controle bloqueado, quando ele mora abaixo da linha inteira.

   Fica fora do fluxo de alinhamento da linha de propósito: dentro dele, o
   parágrafo aumentaria a altura do item e empurraria o controle para cima,
   desalinhando a linha toda. */
.motivo-da-linha {
  margin: -0.25rem 0 var(--e4);
  max-width: 42rem;
}

/* ====================================================== importar por planilha

   Fica dentro de um `<details>`: é uma operação ocasional, e ocupar espaço
   permanente numa tela usada o dia inteiro para cadastrar e autorizar seria
   trocar o frequente pelo raro. */
/* `.dobra` é o mesmo desenho de `.importar`, com nome que não mente.
   A regra nasceu para a planilha; o auto-cadastro é outra dobra, com a mesma
   forma. Duplicar as quatro regras seria criar duas que um dia discordam. */
.importar,
.dobra {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
}

.importar > summary,
.dobra > summary {
  cursor: pointer;
  font-weight: var(--peso-medio);
  /* O marcador padrão some em alguns navegadores quando se estiliza o resumo;
     mantê-lo é o que diz que isto abre. */
  list-style: revert;
}

.importar > summary:focus-visible,
.dobra > summary:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 2px;
}

.importar[open] > summary,
.dobra[open] > summary {
  margin-bottom: var(--e3);
}

/* ------------------------------------------------ o interruptor do hotsite */

/* O campo do link e o botão de copiar, lado a lado — e embaixo um do outro
   quando não couber. Sem `wrap`, num telefone o botão sai da tela. */
.linha-do-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
  margin-bottom: var(--e2);
}

/* O campo cresce e o botão não. `min-width` menor que o conteúdo é o que
   permite ao flex encolher: sem ele, um link longo empurra o botão para fora. */
.linha-do-link input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--fonte-mono);
  font-size: var(--texto-apoio);
}

.acoes-do-autocadastro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e3);
}

/* A marca de quem se cadastrou sozinho.
   Cor diferente da do selo de situação: as duas ficam lado a lado na mesma
   célula, e duas pílulas iguais se leem como uma frase só. */
.selo-origem {
  margin-left: var(--e2);
  background: transparent;
  color: var(--apagado);
  border: 1px solid var(--borda);
}

/* Quem NÃO recebeu o código por e-mail.

   Discreto de propósito: é aviso de pendência operacional, e não situação
   eleitoral — a pessoa continua apta e vota do mesmo jeito, com o código
   entregue na mesa. Um selo vermelho e cheio ao lado de "apto" faria a linha
   parecer um problema de elegibilidade, que ela não é. */
.selo-envio {
  margin-left: var(--e2);
  background: transparent;
  color: var(--apagado);
  border: 1px dashed var(--borda);
}

/* Os primeiros motivos, para entender sem baixar nada. A planilha devolvida tem
   todos — esta lista é amostra, e o texto diz isso. */
.motivos {
  margin: var(--e2) 0 0;
  padding-left: var(--e5);
  font-size: var(--texto-miudo);
  color: var(--apagado);
  line-height: 1.5;
}

.motivos:empty {
  display: none;
}

.acao-recusadas {
  margin-top: var(--e3);
}

/* O campo de arquivo não aceita o mesmo tratamento dos outros: o botão interno
   é desenhado pelo navegador e não herda fonte nem altura. */
input[type="file"] {
  padding: var(--e2);
  /* Sem isto ele ignora a largura do contêiner e estoura a linha em 320px. */
  max-width: 100%;
}

/* O resultado recebe foco depois de importar, e o anel de foco num parágrafo
   não orienta ninguém — ele não está na ordem de Tab. É a mesma decisão do
   conteúdo principal, em `casca.css`. */
#resultado-importacao:focus,
#resultado-importacao:focus-visible {
  outline: none;
}

#resultado-importacao:not(:empty) {
  margin-top: var(--e3);
  font-weight: var(--peso-medio);
  color: var(--tinta);
}

/* ------------------------------------------------- a política de foto */

/* As três opções ocupam a largura, uma por linha.

   Não é `<select>` de propósito: cada política tem uma consequência que precisa
   ser lida ANTES de marcar — principalmente a obrigatória, que impede o voto de
   quem não tem rosto. Num `<select>` fechado, quem escolhe vê três palavras. */
.politica-foto {
  width: 100%;
  /* Respiro ACIMA, e uma linha que separa.

     Sem eles, a legenda encostava no campo "Seções" — enquanto todos os outros
     campos tinham espaço entre si. E não é só estética: as três opções são uma
     DECISÃO, e não mais um campo do formulário. Coladas, liam-se como
     continuação de "quantas seções".

     Visto olhando a tela a 390px, não medindo: a medida de caixa dizia que nada
     estourava e nada se sobrepunha, e estava certa — o problema era ritmo. */
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.politica-foto legend {
  padding: 0;
  margin-bottom: var(--e3);
  font-weight: var(--peso-medio);
}

/* `align-items: start` alinha o rádio pelo topo do rótulo, e não pelo meio: o
   texto de apoio tem duas ou três linhas, e centralizado o botão descia para o
   meio do parágrafo, longe do nome da opção. */
.opcao-politica {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e2);
  /* `--e4` e não `--e3`: o texto de apoio quebra em duas ou três linhas numa
     tela estreita, e com o espaço menor a última linha de uma opção quase
     encostava no nome da seguinte. O espaço entre opções tem de ser maior que o
     espaço DENTRO de uma opção, senão elas deixam de se ler como três. */
  margin-bottom: var(--e4);
}

.opcao-politica:last-child {
  /* Espaço ANTES do botão de criar: a última opção não pode encostar nele.
     Zero aqui deixava "Sem foto" e "Criar" na mesma respiração, e a decisão
     ficava colada na ação que a torna permanente. */
  margin-bottom: var(--e4);
}

/* Alvo de toque: o rádio nativo é pequeno para dedo, e esta escolha é feita uma
   vez só — errar aqui não tem tela de correção. */
.opcao-politica input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* O rótulo inteiro é clicável, e empilha nome e consequência. */
.opcao-politica label {
  display: grid;
  gap: 0.15rem;
  cursor: pointer;
}

.opcao-politica .apoio {
  margin: 0;
}

/* ------------------------------------------------- autorizar um eleitor */

/* O nome, no diálogo de autorizar.

   É o que se compara com o documento na mão, no instante da decisão. Sai maior
   que o resto por isso, e não por ênfase decorativa: quem opera olha o papel,
   olha a tela e decide em segundos. */
.destaque-conferencia {
  font-size: var(--texto-secao);
  font-weight: 700;
  margin: var(--e2) 0 0;
}

/* O código só existe para o dia em que a etiqueta não sair, e por isso nasce
   recolhido. Ver o comentário no diálogo, em index.html. */
#autorizar-ver-codigo > summary {
  cursor: pointer;
  padding: var(--e2) 0;
}
#autorizar-codigo {
  font-variant-numeric: tabular-nums;
}

/* Os botões do diálogo de autorizar ficam do tamanho do rótulo.

   "Confirmar e imprimir" é longo, e com o `flex` padrão do diálogo ele quebrava
   para a linha de baixo e esticava até a largura toda — ao lado de um "Cancelar"
   pequeno, parecia que só havia um botão. Escopado neste diálogo: o de exclusão
   tem rótulos curtos e a regra de lá foi pensada para outro caso. */
#autorizar-eleitor .acoes-do-dialogo button {
  flex: 0 1 auto;
}

/* ------------------------------------------ arquivar e apagar eleição */

/* A região das arquivadas.

   Recolhida: o propósito de arquivar é tirar da frente o que já acabou, e duas
   tabelas sempre à vista devolveriam o problema. */
.bloco-arquivadas {
  margin-top: var(--e5);
  border-top: 1px solid var(--borda);
  padding-top: var(--e4);
}
.bloco-arquivadas > summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--e2) 0;
}

/* Os botões da linha ficam lado a lado, com espaço entre eles.
   O `gap` não é estética: um deles apaga, e alvos colados são onde se mira num
   e se acerta o outro. */
.eleicoes-acao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: flex-end;
}

/* ------------------------------------------------- o caderno de eleitores */

/* AS COLUNAS NÃO DANÇAM ENTRE LINHAS.
 *
 * Visto em 11/08/2026, na primeira lista com nomes de gente de verdade, e
 * medido no painel em 13/08/2026.
 *
 * A causa raiz era outra e já saiu: a célula de ações tinha `display: flex`, o
 * que TIRA o `td` do algoritmo da tabela — a largura declarada para de valer e o
 * conteúdo escorre por cima da coluna vizinha. O flex agora vive num `div`
 * dentro da célula.
 *
 * Sobrava o segundo defeito, e ele só aparece com linhas DIFERENTES: quem está
 * apto tem "Autorizar" e quem não está, não. Com a coluna estreita, a linha com
 * mais botões quebrava em duas fileiras e a outra ficava em uma — e "Excluir",
 * que existe em todas, aparecia em alturas diferentes de uma linha para a
 * seguinte. Numa lista de vinte, o acionamento que APAGA mudando de lugar é
 * convite ao clique errado.
 *
 * `table-layout: fixed` faz a largura vir da declaração, e não do conteúdo. O
 * excedente rola dentro de `.rola`, que já existe e já é alcançável por teclado.
 */
#tabela-eleitores {
  table-layout: fixed;
  min-width: 56rem;
}
/* Nome: SEM largura declarada, de propósito.
 *
 * Com `table-layout: fixed`, a coluna sem largura recebe o que sobra depois das
 * declaradas — então a tabela ocupa exatamente o espaço disponível, em vez de
 * pedir mais do que o painel tem e rolar por dentro.
 *
 * É o campo que se lê, e é ele que deve ficar com a sobra. `break-word` faz o
 * nome quebrar por palavra em vez de no meio dela. */
#tabela-eleitores th:first-child,
#tabela-eleitores td:first-child {
  overflow-wrap: break-word;
}
/* Documento: cabe "CPF 000.000.000-00" inteiro, numa linha só. Número quebrado
   ao meio deixa de ser conferível de relance, que é a única coisa que se faz com
   ele na mesa. */
#tabela-eleitores th:nth-child(2),
#tabela-eleitores td:nth-child(2) {
  width: 11rem;
  white-space: nowrap;
}
#tabela-eleitores th:nth-child(3),
#tabela-eleitores td:nth-child(3) {
  width: 4rem;
  white-space: nowrap;
}
/* Situação: cabe o PIOR CASO numa fileira só — "já votou" mais "auto-cadastro".
   Medido em 13/08/2026: com 11rem os dois selos empilhavam, e a linha de quem já
   votou ficava mais alta que as vizinhas.

   Alargar aqui não empurra a tabela: o nome é elástico e absorve a diferença. */
#tabela-eleitores th:nth-child(4),
#tabela-eleitores td:nth-child(4) {
  width: 13.5rem;
}
#tabela-eleitores .selos-da-situacao {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--e1);
}
#tabela-eleitores .selos-da-situacao .selo {
  white-space: nowrap;
  margin: 0;
}
/* Ações: larga o bastante para os botões caberem em UMA fileira, em toda linha.
   É a largura que mantém "Excluir" sempre na mesma altura. */
#tabela-eleitores th:last-child,
#tabela-eleitores td:last-child {
  /* Soma das três colunas de ação mais os espaços entre elas. */
  width: 22rem;
}

/* Tudo colado ao TOPO da linha, e não centralizado.
   Nome longo ocupa três linhas de texto e estica a altura; com o conteúdo
   centralizado, os botões daquela linha descem e a mesma ação fica em altura
   diferente da vizinha. */
#tabela-eleitores td {
  vertical-align: top;
}
/* CADA AÇÃO TEM LUGAR FIXO, e o lugar não muda de linha para linha.
 *
 * AUTORIZAR VEM PRIMEIRO, à esquerda: é a ação do dia da votação, e é onde o
 * olho começa a varrer a linha.
 *
 * O ponto que isto resolve: "Autorizar" SOME quando a pessoa já votou. Sem
 * lugares reservados, sumir puxaria os botões seguintes para a esquerda, e a
 * linha de quem já votou ficaria com tudo deslocado em relação à vizinha —
 * inclusive o menu, que existe em todas.
 *
 * Com três lugares nomeados, o que falta fica VAZIO e o resto não se move. */
#tabela-eleitores .acoes-da-linha {
  display: grid;
  /* Largura fixa por coluna, e não `auto`: com `auto` a grade encolhe para o
     conteúdo, e conjuntos diferentes de botões dão colunas de larguras
     diferentes. Cinco pixels bastam para o olho perceber que a lista treme. */
  grid-template-columns: 6.5rem 9.5rem 5rem;
  grid-template-areas: "autorizar rosto mais";
  gap: var(--e2);
  align-items: start;
}
#tabela-eleitores .acoes-da-linha [data-acao="autorizar"] {
  grid-area: autorizar;
}
#tabela-eleitores .acoes-da-linha [data-acao="rosto"] {
  grid-area: rosto;
}
#tabela-eleitores .menu-da-linha {
  grid-area: mais;
}
/* O rótulo não quebra: é uma palavra, e quebrá-la faz o botão virar uma tira
   vertical de letras. Quem dá espaço é a largura da coluna, declarada acima. */
#tabela-eleitores .acoes-da-linha button,
#tabela-eleitores .acoes-da-linha summary {
  white-space: nowrap;
}

/* O menu da linha, no caderno de eleitores.

   `<details>` nativo: abrir, fechar, foco e teclado vêm do navegador. O
   `summary` precisa da aparência de botão escrita aqui — `button.secundario` não
   o alcança, porque ele não é um `button`. Sem isto sai como texto solto. */
.menu-da-linha {
  position: relative;
}
.menu-da-linha > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--acao);
  border-radius: 8px;
  background: transparent;
  color: var(--acao);
  font-size: var(--texto-apoio);
  font-weight: var(--peso-normal);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.menu-da-linha > summary::-webkit-details-marker {
  display: none;
}
.menu-da-linha > summary:hover {
  background: var(--acao-clara);
}

/* O conteúdo abre ABAIXO do acionador, alinhado à direita, e FLUTUA.

   Dentro do fluxo, abrir um menu deslocaria todas as linhas de baixo — numa
   lista de vinte, a pessoa perde de vista onde estava. */
/* `fixed`, e NÃO `absolute`.
 *
 * A tabela vive dentro de `.rola`, que tem `overflow` para poder rolar na
 * horizontal em tela estreita. Um filho `absolute` que sai da caixa do
 * container COM overflow gera barra de rolagem nele — abrir o menu de uma linha
 * de baixo fazia a tabela inteira ganhar rolagem, e o menu ficava cortado.
 *
 * `fixed` sai do fluxo e do overflow de qualquer ancestral. Em troca, a posição
 * precisa ser calculada na abertura, em JavaScript — é o que `posicionarMenu`
 * faz em `editar-eleitor.js`. */
.menu-conteudo {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  min-width: 11rem;
  padding: var(--e2);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
.menu-conteudo button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}
/* A que apaga fica separada da que corrige, e não encostada nela: as duas fazem
   coisas de gravidade muito diferente. */
.menu-conteudo [data-acao="excluir"] {
  margin-top: var(--e1);
  border-top: 1px solid var(--borda);
  border-radius: 0;
}

/* O palco da câmera no diálogo de rosto.

   O TETO É DE LARGURA, e não de altura, e a diferença importa. O vídeo é 3/4:
   num diálogo de 545px ele ficava com 727px de altura e empurrava "Tirar a
   foto" e "Cancelar" para fora da janela — medido em 1440x1000, com "Cancelar"
   cortado no rodapé. Quem não consegue enquadrar ficava sem o botão de desistir
   à vista, e desistir é o caminho de saída da fila.

   Limitar a ALTURA deixaria o palco mais baixo que o vídeo, e o que sobra é
   faixa preta na lateral com a oval por cima — o defeito descrito em
   `.palco-captura video`. Limitando a largura, os dois encolhem juntos.

   Fica aqui, e não em `formas.css`: o hotsite carrega aquele arquivo, e a coluna
   dele já é estreita. Um teto lá mudaria uma tela que esta mudança não toca. */
#palco-rosto {
  max-width: 20rem;
}

/* A aparência da eleição, depois das duas portas do hotsite.

   O respiro maior em cima é o que a separa do par de dobras: sem ele, ela cola
   na segunda e passa a parecer parte dela. Espaço é o que agrupa e o que
   separa — e aqui ele precisa SEPARAR, porque é outro assunto. */
.aparencia-da-eleicao {
  margin-top: var(--e6);
  align-items: center;
}

/* Configuracao da marca da cabine, separada da criacao e da lista. */
.logo-da-urna {
  margin-bottom: var(--e5);
}

.editor-da-logo {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
}

.previa-da-logo {
  min-height: 8rem;
  display: grid;
  place-items: center;
  padding: var(--e4);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  text-align: center;
}

.previa-da-logo img {
  display: block;
  max-width: 100%;
  max-height: 8rem;
  object-fit: contain;
}

.acoes-da-logo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e4);
}

@media (max-width: 36rem) {
  .editor-da-logo {
    grid-template-columns: 1fr;
  }
}

/* A busca da lista de eleitores.

   RESPIRO EM CIMA, e quase nenhum embaixo: o espaço é o que diz de quem ela é.
   Grudada no cartão acima, pareceria a última linha das dobras de cadastro;
   com folga igual dos dois lados, flutuaria entre os dois grupos sem pertencer
   a nenhum. Perto do que filtra, e longe do resto. */
.busca-da-lista {
  margin-top: var(--e7);
  margin-bottom: var(--e3);
}