/* ============================================================================
   Painel da Comissão Eleitoral SOBRAC — folha de estilo única e autossuficiente.

   Regras que esta folha segue, porque a versão anterior tropeçou nelas:

   1. NÃO depende de CDN. O Bootstrap saiu; as poucas classes de grade, card,
      form e tabela que o HTML já usava estão implementadas aqui embaixo. Se a
      rede externa cair, a página continua correta.
   2. NÃO redefine elementos globais de formulário (`label`, `input`) — isso
      quebrava caixas de seleção em tabela, campos lado a lado e rótulos em
      linha. Tudo é aplicado por classe ou por seletor específico.
   3. As fontes remotas são melhoria, não requisito: o desenho fecha com
      Helvetica/Arial se Montserrat não carregar.

   A paleta vem do site institucional (acustica.org.br): azul #2E318D e
   laranja #F4941E. A tipografia é deliberadamente comum — fonte do sistema
   no texto (a mesma do Windows e do Office, que o associado já lê o dia
   inteiro) e Montserrat só nos títulos. Sem monoespaçada, sem caixa alta
   espaçada: isso dava ao painel um ar de ferramenta de programador, e quem
   opera a eleição é a diretoria da SOBRAC.
   ========================================================================= */

:root {
    --azul: #2E318D;
    --azul-escuro: #23265F;
    --azul-fraco: #EEEFF7;
    --laranja: #F4941E;
    --laranja-escuro: #D97F0C;
    --laranja-fraco: #FDF1DD;
    --grafite: #222226;
    --texto: #5F6169;
    --texto-fraco: #8A8D96;
    --regua: #E3E5EA;
    --regua-forte: #C9CCD6;
    --fundo: #F4F5F7;
    --branco: #FFFFFF;
    --perigo: #B3261E;
    --perigo-fraco: #FBEDEC;
    --ok: #1E7A46;
    --ok-fraco: #EAF4EE;

    /* Fonte do sistema: é a que a pessoa já vê no Windows, no e-mail e no
       Word. Montserrat fica só nos títulos, para manter o vínculo com o site.
       Monoespaçada não é mais usada na interface — só em código, se houver. */
    --titulo: 'Montserrat', 'Segoe UI', system-ui, Arial, sans-serif;
    --corpo: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --serifa: Georgia, 'Times New Roman', serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

    --largura: 1180px;

    /* Apelidos. Algumas telas ainda têm <style> próprio escrito com os nomes
       antigos; sem estes apelidos aquelas regras viram `var()` inválido e a
       borda/cor simplesmente some — foi assim que a versão anterior quebrou.
       Renomear variável exige manter o nome velho apontando pro novo. */
    --linha: var(--regua);
    --line: var(--regua);
    --paper: var(--fundo);
    --paper-raised: #FFFFFF;
    --ink: var(--grafite);
    --ink-soft: var(--texto);
    --signal: var(--laranja);
    --current: var(--azul);
    --danger: var(--perigo);
    --sobrac-navy: var(--azul);
    --sobrac-blue: var(--azul);
    --sobrac-orange: var(--laranja);
    --sobrac-text: var(--grafite);
    --sobrac-bg: var(--fundo);
    --fonte-titulo: var(--titulo);
    --fonte-corpo: var(--corpo);
    --fonte-destaque: var(--serifa);
    --fonte-mono: var(--mono);
    --font-display: var(--titulo);
    --font-body: var(--corpo);
    --font-mono: var(--mono);
    --erro: var(--perigo);
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--corpo);
    font-size: 14px;
    line-height: 1.65;
}

h1, h2, h3, h4, h5 {
    font-family: var(--titulo);
    font-weight: 600;
    color: var(--grafite);
    line-height: 1.25;
    margin: 0 0 10px;
}
h1 { font-size: 25px; letter-spacing: -.01em; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

p { margin: 0 0 12px; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--laranja-escuro); text-decoration: underline; }

/* Números alinhados sem virar "terminal": a própria fonte do texto tem
   variante tabular, que basta para CPF, datas e contagens. */
.mono, .cpf, .numero, .codigo-verificador {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
/* Monoespaçada fica só no identificador da cédula, que é um código para
   conferir caractere a caractere. */
code, .identificador { font-family: var(--mono); font-size: .92em; }
code { color: var(--azul); background: var(--azul-fraco); padding: 1px 5px; border-radius: 2px; }

:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* =============================================== trilho lateral + página
   A silhueta do painel é uma coluna fixa à esquerda e uma folha de trabalho
   à direita — não a barra-em-cima-com-cards que todo painel tem. O trilho é
   escuro e estreito; a folha é clara e larga, para o dado ocupar a tela.

   O trilho é `fixed` e a folha ganha margem — não um grid no `body`. Grid
   dependeria de o `body` ter exatamente dois filhos, e basta um aviso do PHP
   ou um <script> solto para deslocar a página inteira. */
.ce-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;
    z-index: 10;
    background: var(--azul-escuro);
    color: rgba(255, 255, 255, .72);
    display: flex;
    flex-direction: column;
    padding: 22px 0 16px;
    overflow-y: auto;
}

/* Marca: logo pequena ao lado do nome do órgão, em duas linhas. */
.ce-marca {
    display: flex; align-items: center; gap: 12px;
    padding: 0 20px 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    text-decoration: none;
}
.ce-marca img {
    height: 26px; width: auto; display: block;
    background: var(--branco); padding: 4px 6px; border-radius: 2px;
}
.ce-marca span { display: block; line-height: 1.35; }
.ce-marca strong {
    display: block;
    font-family: var(--titulo); font-size: 14px; font-weight: 600;
    color: var(--branco); letter-spacing: .01em;
}
.ce-marca span { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.ce-marca:hover strong { color: var(--laranja); }

.ce-rail-nav { display: flex; flex-direction: column; padding: 14px 0 0; flex: 1; }
.ce-rail-nav a {
    display: block;
    padding: 7px 20px 7px 22px;
    color: rgba(255, 255, 255, .74);
    font-size: 13px;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.ce-rail-nav a:hover { color: var(--branco); background: rgba(255, 255, 255, .06); text-decoration: none; }
.ce-rail-nav a.ativo {
    color: var(--branco);
    border-left-color: var(--laranja);
    background: rgba(255, 255, 255, .08);
    font-weight: 600;
}

/* Ato do processo: o número é informação (a eleição acontece nesta ordem). */
.ce-rail-ato {
    display: flex; align-items: center; gap: 8px;
    margin: 22px 0 6px; padding: 0 20px; font-size: 12px; font-weight: 600;
    color: rgba(255, 255, 255, .5);
}
.ce-rail-ato span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; flex: 0 0 17px;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
    font-size: 12.5px; color: rgba(255, 255, 255, .65);
}

.ce-rail-rodape {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin-top: 18px; padding: 14px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px;
}
.ce-rail-rodape .quem {
    width: 100%; color: rgba(255, 255, 255, .85); font-size: 13px; margin-bottom: 2px;
}
.ce-rail-rodape a {
    color: rgba(255, 255, 255, .55); text-decoration: none; font-size: 12px;
}
.ce-rail-rodape a:hover { color: var(--laranja); text-decoration: none; }

/* Folha de trabalho: fundo claro, faixa laranja fina no alto como filete de
   documento oficial. */
.divprincipal, .ce-conteudo {
    max-width: 100%;
    margin-left: 232px;
    padding: 34px 40px 72px;
    background: var(--branco);
    border-top: 3px solid var(--laranja);
    min-height: 100vh;
}
/* O conteúdo tem largura de leitura própria dentro da folha. */
.divprincipal > *, .ce-conteudo > * { max-width: 1040px; }

.ce-cabecalho-pagina { border-bottom: 2px solid var(--grafite); padding-bottom: 14px; margin-bottom: 26px; }
.ce-cabecalho-pagina h1, .ce-cabecalho-pagina h3 { margin: 0 0 6px; }
.ce-cabecalho-pagina p { margin: 0; max-width: 78ch; }

/* Rótulo de seção: régua com etiqueta, como cabeçalho de bloco de documento. */
.ce-secao {
    font-size: 13.5px; font-weight: 600; color: var(--texto);
    margin: 34px 0 14px; display: flex; align-items: center; gap: 12px;
}
.ce-secao::after { content: ''; flex: 1; height: 1px; background: var(--regua); }

/* ----------------------------------------------------------------- grade
   Substitui o grid do Bootstrap: só o que o HTML das páginas usa. */
.row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.row > [class*="col"] { padding-left: 12px; padding-right: 12px; width: 100%; }
.col { flex: 1 1 0; min-width: 200px; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }
.col-md-6 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

/* ----------------------------------------------------------------- blocos */
.card, .bloco, .painel {
    background: var(--branco);
    border: 1px solid var(--regua);
    border-radius: 3px;
    margin-bottom: 22px;
}
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--regua);
    background: var(--branco);
}
.card-title {
    margin: 0; font-family: var(--titulo); font-size: 15px; font-weight: 600; color: var(--grafite);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card-header p { margin: 6px 0 0; font-size: 13px; }
.card-body { padding: 20px; }
.bloco, .painel { padding: 20px; }

/* --------------------------------------------------------------- botões
   Laranja é a ação principal da tela. Em listas e tabelas o botão é
   secundário — vinte laranjas competindo não destacam nada. */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--titulo);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    padding: 9px 20px;
    border: 1px solid var(--laranja);
    border-radius: 3px;
    background: var(--laranja);
    color: #1A1A1A;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}
.btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--laranja-escuro);
    border-color: var(--laranja-escuro);
    color: #1A1A1A;
    text-decoration: none;
}
.btn-secundario, .btn-secondary,
.table button, .table .btn,
.candidato button, .candidato .btn,
.membros button, .membros .btn,
.toolbar button {
    background: var(--branco);
    border-color: var(--regua-forte);
    color: var(--azul);
}
.btn-secundario:hover, .btn-secondary:hover,
.table button:hover, .table .btn:hover,
.candidato button:hover, .candidato .btn:hover,
.membros button:hover, .membros .btn:hover,
.toolbar button:hover {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--branco);
}
.btn-danger, .btn-remover, button.perigo, .negar,
.table .btn-danger, .table .btn-remover,
.candidato .btn-remover, .membros .btn-remover {
    background: var(--branco);
    border-color: var(--perigo);
    color: var(--perigo);
}
.btn-danger:hover, .btn-remover:hover, button.perigo:hover, .negar:hover,
.table .btn-danger:hover, .table .btn-remover:hover,
.candidato .btn-remover:hover, .membros .btn-remover:hover {
    background: var(--perigo);
    border-color: var(--perigo);
    color: var(--branco);
}
.btn-sm, .btn-reenviar { padding: 6px 14px; font-size: 12.5px; }
.btn:disabled, button:disabled { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------- formulários
   Só por classe/seletor específico: nada de regra global em `input` ou
   `label`, que estraga caixas de seleção e campos em linha. */
.form-group, .campo { margin-bottom: 16px; }
.form-group > label, .campo > label, label.rotulo {
    display: block;
    font-size: 12.5px;
    color: var(--texto-fraco);
    margin-bottom: 6px;
}
.form-control,
.campo input[type="text"], .campo input[type="password"], .campo input[type="number"],
.campo input[type="date"], .campo input[type="time"], .campo input[type="email"],
.campo select, .campo textarea, .campo input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--regua-forte);
    border-radius: 3px;
    background: var(--branco);
    color: var(--grafite);
    font-family: var(--corpo);
    font-size: 14px;
    line-height: 1.4;
}
.form-control:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(46, 49, 141, .12);
}
.form-control::placeholder { color: var(--texto-fraco); }
textarea.form-control, .campo textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--azul); }
.inputs { height: auto; }
.form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-inline .form-control { width: auto; }
.linha-campos { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.linha-campos .campo, .linha-campos .form-group { flex: 1 1 190px; margin-bottom: 0; }

/* -------------------------------------------------------------- tabelas */
.table-responsive { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--branco);
    border: 1px solid var(--regua);
    font-size: 13px;
}
.table thead th {
    background: var(--azul);
    color: var(--branco);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .1em;
    text-align: left;
    padding: 11px 14px;
    border: 0;
    white-space: nowrap;
}
.table td, .table th {
    padding: 11px 14px;
    border-top: 1px solid var(--regua);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.table tbody tr:hover { background: var(--azul-fraco); }
.table-striped tbody tr:nth-child(odd) { background: #FAFAFC; }
.table-striped tbody tr:hover { background: var(--azul-fraco); }
.table td input[type="checkbox"] { width: 16px; height: 16px; }

/* ---------------------------------------------------- listas de membros
   Usada pela chapa (aqui e em /inscricao): nome à esquerda, ação à direita,
   uma linha por pessoa. Sem marcador de lista — é um quadro, não um texto. */
.membros { list-style: none; padding: 0; margin: 14px 0; }
.membros li {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--regua);
}
.membros li:last-child { border-bottom: 0; }
.membros form { margin: 0; }
.membros button { padding: 4px 12px; font-size: 12.5px; }

.bloco h4 { margin-top: 22px; }
.bloco > h4:first-child, .bloco > h3:first-child, .bloco > h1:first-child { margin-top: 0; }

/* --------------------------------------------------------------- avisos */
.aviso, .alert {
    border: 1px solid var(--regua);
    border-left: 3px solid var(--laranja);
    background: var(--laranja-fraco);
    padding: 14px 16px;
    border-radius: 0 3px 3px 0;
    margin-bottom: 22px;
    color: var(--grafite);
}
.aviso.erro, .alert-danger { border-left-color: var(--perigo); background: var(--perigo-fraco); }
.aviso.ok, .alert-success { border-left-color: var(--ok); background: var(--ok-fraco); }

.selo {
    display: inline-block;
    font-size: 12.5px;
    padding: 3px 9px;
    border: 1px solid var(--regua-forte);
    border-radius: 2px;
    background: var(--branco);
    color: var(--texto);
    white-space: nowrap;
}
.selo.pendente, .selo.alerta { border-color: var(--laranja); background: var(--laranja-fraco); color: #8A5A00; }
.selo.aprovada, .selo.ok { border-color: var(--ok); background: var(--ok-fraco); color: var(--ok); }
.selo.negada, .selo.perigo { border-color: var(--perigo); background: var(--perigo-fraco); color: var(--perigo); }

/* ================================================== linha do processo
   Assinatura do painel: as quatro fases da eleição, na ordem em que
   acontecem, lidas do banco (períodos, inscrições pendentes, senhas, votos,
   apuração). Faixa contínua com marcadores — não são quatro cartões soltos:
   o que importa é a posição na sequência. */
.processo {
    display: flex; flex-wrap: wrap;
    background: var(--branco);
    border: 1px solid var(--regua);
    border-radius: 3px;
    margin-bottom: 26px;
}
.processo-fase {
    flex: 1 1 210px;
    padding: 16px 18px 18px;
    border-left: 1px solid var(--regua);
    border-top: 3px solid transparent;
    color: var(--texto);
    text-decoration: none;
    display: block;
}
.processo-fase:first-child { border-left: 0; }
.processo-fase:hover { background: #FAFAFC; color: var(--texto); text-decoration: none; }
.processo-fase .rotulo {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px;
    color: var(--texto-fraco);
}
.processo-fase .estado {
    display: block; font-family: var(--titulo); font-size: 15px; font-weight: 600;
    color: var(--grafite); margin-top: 8px;
}
.processo-fase .detalhe { display: block; font-size: 12.5px; margin-top: 3px; }
.processo-fase.concluida .rotulo { color: var(--ok); }
.processo-fase.corrente {
    border-top-color: var(--laranja);
    background: var(--laranja-fraco);
}
.processo-fase.corrente .rotulo { color: #8A5A00; }

/* Onda: só na fase corrente, como indicador de "acontecendo agora". */
.onda { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.onda span { width: 2px; background: var(--laranja); border-radius: 1px; }
.onda span:nth-child(1) { height: 45%; }
.onda span:nth-child(2) { height: 100%; }
.onda span:nth-child(3) { height: 65%; }
.onda span:nth-child(4) { height: 85%; }
.processo-fase.corrente .onda span { animation: onda-pulso 1.6s ease-in-out infinite; }
.processo-fase.corrente .onda span:nth-child(2) { animation-delay: .15s; }
.processo-fase.corrente .onda span:nth-child(3) { animation-delay: .3s; }
.processo-fase.corrente .onda span:nth-child(4) { animation-delay: .45s; }
@keyframes onda-pulso {
    0%, 100% { transform: scaleY(.55); }
    50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
    .processo-fase.corrente .onda span { animation: none; }
}

/* ------------------------------------------------- quadro da eleição
   Os números da eleição em tabela, não em cartões: são valores comparáveis
   entre si e o operador lê a coluna inteira de uma vez. */
.quadro th[scope="row"] {
    font-family: var(--corpo); font-weight: 400; color: var(--texto);
    text-align: left; width: 34%;
}
.quadro .valor {
    font-family: var(--titulo); font-size: 17px; font-weight: 600;
    color: var(--grafite); width: 16%; white-space: nowrap;
}
.quadro .nota { color: var(--texto-fraco); font-size: 12.5px; }
.quadro .ir { text-align: right; width: 80px; }
.quadro .ir a { font-size: 12.5px;
    letter-spacing: .1em; color: var(--azul);
}
.quadro .ir a:hover { color: var(--laranja-escuro); }

/* -------------------------------------------------------- atalhos do painel */
.ce-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ce-card {
    background: var(--branco);
    border: 1px solid var(--regua);
    border-radius: 3px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--texto);
    display: block;
}
.ce-card:hover { border-color: var(--azul); background: var(--azul-fraco); color: var(--texto); text-decoration: none; }
.ce-card strong {
    display: block; font-family: var(--titulo); font-size: 14px; font-weight: 600;
    color: var(--grafite); margin-bottom: 3px;
}
.ce-card span { display: block; font-size: 12.5px; line-height: 1.5; }

/* ---------------------------------------------- indicadores numéricos */
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.stat {
    background: var(--branco); border: 1px solid var(--regua); border-radius: 3px;
    padding: 14px 20px; flex: 1 1 150px;
}
.stat strong {
    display: block; font-family: var(--titulo); font-size: 24px; font-weight: 600;
    color: var(--grafite); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat span { font-size: 12.5px; color: var(--texto-fraco); }
.badge-sim { color: var(--ok); }
.badge-nao { color: var(--perigo); }

/* ------------------------------------------- participação (relatório)
   Barra simples em HTML: duas fatias não justificam carregar uma biblioteca
   de gráficos de CDN, e assim a cor sai da paleta do sistema. */
.participacao { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.participacao-numero {
    font-family: var(--titulo); font-size: 34px; font-weight: 600;
    color: var(--grafite); font-variant-numeric: tabular-nums; line-height: 1;
}
.participacao-texto { font-size: 13px; }
.barra-participacao {
    display: block; height: 12px; background: var(--regua); border-radius: 2px; overflow: hidden;
}
.barra-participacao span { display: block; height: 100%; background: var(--laranja); }
.participacao-legenda {
    display: flex; gap: 22px; margin-top: 10px; font-size: 12.5px;
    color: var(--texto-fraco);
}
.participacao-legenda strong { font-family: var(--titulo); font-size: 13px; color: var(--grafite); }

/* ------------------------------------------------- telas de acesso solto */
.ce-tela-unica { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.ce-tela-unica .cartao {
    width: 100%; max-width: 400px;
    background: var(--branco);
    border: 1px solid var(--regua);
    border-top: 3px solid var(--laranja);
    border-radius: 3px;
    padding: 34px 30px 30px;
}
.ce-tela-unica .cartao img { max-width: 190px; width: 100%; height: auto; display: block; margin: 0 auto 22px; }
.ce-tela-unica .cartao h1 { font-size: 17px; text-align: center; margin-bottom: 4px; }
.ce-tela-unica .cartao > p { text-align: center; font-size: 13px; }
.ce-tela-unica .cartao form { margin-top: 24px; }
.ce-tela-unica .cartao button { width: 100%; margin-top: 8px; }
.ce-tela-unica .rodape-cartao {
    margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--regua);
    text-align: center; font-size: 12px; color: var(--texto-fraco);
}

/* ------------------------------------------- cartões de candidato e chapa */
.candidato, .chapa { background: var(--branco); border: 1px solid var(--regua); border-radius: 3px; }
.candidato .status { font-size: 12.5px; }
.candidato .status.ok { color: var(--ok); }
.candidato .status.pendente { color: var(--perigo); }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 900px) {
    /* Sem espaço para a coluna: o trilho vira faixa no topo, rolável. */
    .ce-rail {
        position: static; width: auto; height: auto; padding: 14px 0 0;
        flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0;
    }
    .divprincipal, .ce-conteudo { margin-left: 0; }
    .ce-marca { border-bottom: 0; padding: 0 16px 14px; }
    .ce-rail-nav {
        /* `flex: 0 0 100%` e não `width: 100%`: com flex-basis 0 herdado do
           desktop o menu era espremido a zero e sumia da faixa. */
        order: 3; flex: 0 0 100%; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; padding: 0; border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .ce-rail-nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 12px 14px; }
    .ce-rail-nav a.ativo { border-left: 0; border-bottom-color: var(--laranja); }
    .ce-rail-ato { display: none; }
    .ce-rail-rodape { margin: 0 0 0 auto; padding: 0 16px 14px; border-top: 0; }
    .divprincipal, .ce-conteudo { min-height: 0; }
}

@media (max-width: 767px) {
    h1 { font-size: 21px; }
    /* Nada pode forçar a página a ficar mais larga que a tela. */
    .selo { white-space: normal; }
    .bloco, .card, .painel, .table-responsive { max-width: 100%; }
    img, input, select, textarea { max-width: 100%; }
    .divprincipal, .ce-conteudo { padding: 22px 16px 48px; }
    /* Uma fase por linha: com duas por linha a faixa estoura a viewport. */
    .processo-fase { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--regua); }
    .processo-fase:first-child { border-top: 0; }
    .processo-fase.corrente { border-top: 3px solid var(--laranja); }
    .stat { flex: 1 1 100%; }
}

/* ---------------------------------------------- Conferência dos eleitores aptos
   Diálogo de revisão em ce/aptos.php. <dialog> nativo: o navegador cuida do
   backdrop, do Esc e do foco, então aqui só tem aparência. */
.aptos-revisao, .ce-dialogo {
    border: 1px solid var(--regua);
    border-radius: 8px;
    padding: 26px 28px;
    max-width: 620px;
    width: calc(100% - 40px);
    max-height: 82vh;
    overflow-y: auto;
    color: var(--texto);
}
.aptos-revisao::backdrop, .ce-dialogo::backdrop { background: rgba(10, 10, 30, .55); }
.aptos-revisao h2, .ce-dialogo h2 { margin: 0 0 10px; font-size: 20px; }

.aptos-resumo {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--regua);
}

.aptos-lista-revisao {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.7;
}

/* O documento em fonte monoespaçada para conferir dígito a dígito — é o que a
   pessoa realmente compara com a planilha que tem na mão. */
.aptos-doc {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--texto-fraco);
}

.aptos-sem-email { color: #b42318; }

.aptos-revisao-acoes {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid var(--regua);
}

/* Diálogo de cadastro de associado: mesma caixa da revisão de aptos, só que
   com formulário dentro — daí os campos ficarem mais estreitos que na página. */
.ce-dialogo .campo small {
    display: block;
    margin-top: 5px;
    line-height: 1.45;
}
.ce-dialogo .aptos-sem-email:empty { display: none; }