/* Portal do eleitor — Sistema de Votação
   Visual minimalista: fundo branco, azul só no essencial, dourado em detalhes. */
:root{
  --primaria:#063f77;      /* azul-marinho do manual */
  --secundaria:#dcaa02;    /* dourado do manual (só detalhes) */
  --texto:#101828;
  --muted:#667085;
  --linha:#e4e7ec;
  --suave:#f5f7fa;
  --selecao:#f0f5fb;
  --erro:#d92d20;
  --ok:#12805c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;background:#fff;color:var(--texto);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:18px;line-height:1.5;
  display:flex;flex-direction:column;align-items:center;
  padding:0 20px env(safe-area-inset-bottom);
}
.fundo{display:none}
.topo{width:100%;max-width:520px;padding:28px 0 8px;display:flex;justify-content:flex-start}
.logo-principal{display:none;width:196px;height:54px;background:left center/contain no-repeat}
.marca-texto{font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--primaria);line-height:1.2}
.app{width:100%;max-width:520px;flex:1}
.tela{display:none;animation:entra .2s ease}
.tela.ativa{display:block}
@keyframes entra{from{opacity:0}to{opacity:1}}

.cartao{padding:28px 0 8px}
.cartao.centro{text-align:center;padding-top:56px}
.sobretitulo{margin:0 0 4px;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
h1{margin:0 0 8px;font-size:2rem;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--texto)}
h2{margin:12px 0 6px;font-size:1.35rem;font-weight:600;letter-spacing:-.01em;color:var(--texto)}
.muted{color:var(--muted);margin:4px 0 24px}
.ola{margin:0;color:var(--muted)}
.ola strong{color:var(--texto);font-weight:600}

.rotulo{display:block;font-weight:500;margin:18px 0 8px;font-size:.95rem;color:var(--texto)}
.campo{
  width:100%;font:inherit;font-size:1.1rem;padding:14px 16px;border-radius:12px;
  border:1px solid #d0d5dd;background:#fff;color:var(--texto);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.campo::placeholder{color:#98a2b3}
.campo:focus{border-color:var(--primaria);box-shadow:0 0 0 4px rgba(6,63,119,.08)}
.campo-cpf{font-size:1.5rem;letter-spacing:.05em;font-weight:500;font-variant-numeric:tabular-nums}
.campo-codigo{letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.campo.invalido{border-color:var(--erro)}
.erro{color:var(--erro);font-size:.95rem;margin:12px 0 0}

.btn{
  display:block;width:100%;font:inherit;font-weight:600;font-size:1.05rem;
  border:0;border-radius:12px;padding:16px 18px;margin-top:20px;cursor:pointer;
  transition:opacity .15s, background .15s, transform .08s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-principal{background:var(--primaria);color:#fff}
.btn-principal:not(:disabled):hover{opacity:.92}
.btn-secundario{background:var(--suave);color:var(--texto)}
.btn-secundario:hover{background:#eef1f5}
.btn-link{background:none;border:0;color:var(--muted);font:inherit;font-size:.95rem;margin-top:28px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.btn.carregando{position:relative;color:transparent!important}
.btn.carregando::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite;
}
.btn-secundario.carregando::after{border-color:#d0d5dd;border-top-color:var(--texto)}

.spinner{width:28px;height:28px;margin:10px auto;border:2px solid var(--linha);border-top-color:var(--primaria);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Aguardando: três pontos discretos */
.vitral-anim{display:flex;gap:8px;justify-content:center;margin:36px auto 20px}
.vitral-anim span{width:10px;height:10px;border-radius:50%;background:var(--primaria);animation:pisca 1.2s ease-in-out infinite}
.vitral-anim span:nth-child(2){animation-delay:.15s}
.vitral-anim span:nth-child(3){animation-delay:.3s;background:var(--secundaria)}
@keyframes pisca{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:none}}

/* Cédula */
.cartao-cedula{padding-bottom:8px}
.descricao{color:var(--muted);margin:4px 0 0;white-space:pre-line}
.instrucao{font-weight:500;color:var(--texto);margin:14px 0 6px;font-size:.98rem}
.instrucao::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--secundaria);margin-right:10px;vertical-align:middle}
.busca{margin:12px 0}
.opcoes{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.opcao{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;
  padding:14px 16px;border-radius:14px;border:1px solid var(--linha);background:#fff;cursor:pointer;
  color:var(--texto);font-weight:500;font-size:1.05rem;line-height:1.3;
  transition:border-color .12s, background .12s, opacity .12s;
  -webkit-tap-highlight-color:transparent;
}
.opcao .nome{flex:1}
.opcao .marca{
  margin-left:auto;flex:0 0 24px;height:24px;border:1.5px solid #c4cad4;display:grid;place-items:center;
  transition:all .12s;
}
.opcao.radio .marca{border-radius:50%}
.opcao:not(.radio) .marca{border-radius:7px}
.opcao .marca svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.opcao[aria-checked="true"]{border-color:var(--primaria);background:var(--selecao);box-shadow:inset 0 0 0 1px var(--primaria)}
.opcao[aria-checked="true"] .marca{background:var(--primaria);border-color:var(--primaria)}
.opcao[aria-checked="true"] .marca svg{opacity:1}
.opcao.bloqueada{opacity:.4}
.opcao:focus-visible{outline:2px solid var(--primaria);outline-offset:2px}
.foto{flex:0 0 56px;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--suave);display:grid;place-items:center}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto-vazia{font-weight:600;color:var(--muted);font-size:1.05rem;letter-spacing:.02em}
.com-foto .opcao{padding:10px 14px 10px 10px}
.lista-confirmacao li{display:flex;align-items:center;gap:14px}
.lista-confirmacao .foto{flex-basis:48px;width:48px;height:48px}
@media (max-width:360px){.foto{flex-basis:48px;width:48px;height:48px}}
.sem-resultado{color:var(--muted);text-align:center;padding:12px}

.barra-acoes{
  position:sticky;bottom:0;z-index:5;margin:12px -20px 0;padding:10px 20px calc(14px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--linha);
}
.contador{display:block;text-align:center;color:var(--muted);font-size:.9rem;font-weight:500;min-height:1.35em}
.barra-botoes{display:flex;gap:10px}
.barra-botoes .btn{margin-top:6px}
.barra-botoes .btn-secundario{flex:0 0 40%;font-size:.98rem;padding-left:8px;padding-right:8px}

/* Confirmação */
.lista-confirmacao{list-style:none;padding:0;margin:18px 0 4px;display:flex;flex-direction:column;gap:8px}
.lista-confirmacao li{border:1px solid var(--linha);border-radius:14px;padding:12px 16px;font-weight:500;font-size:1.08rem;color:var(--texto)}
.lista-confirmacao li.branco{color:var(--muted);background:var(--suave);border-color:transparent}
#tela-confirmar .btn-secundario{margin-top:10px}

/* Sucesso */
.selo-ok{width:72px;height:72px;margin:0 auto 8px}
.selo-ok svg{width:100%;height:100%}
.selo-ok circle{fill:none;stroke:var(--ok);stroke-width:2;stroke-dasharray:160;stroke-dashoffset:160;animation:traca .5s ease forwards}
.selo-ok path{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:traca .35s .45s ease forwards}
@keyframes traca{to{stroke-dashoffset:0}}

.rodape{color:#98a2b3;font-size:.8rem;padding:28px 0 20px;text-align:center}

@media (min-width:600px){
  .topo{padding-top:44px}
  .cartao{padding-top:36px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------ Modo "Voto pela mesa" */
.topo{align-items:center;justify-content:space-between}
.selo-mesa{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--primaria);border:1px solid #c9d7e8;border-radius:999px;padding:5px 12px}
.selo-mesa[hidden]{display:none}
.info-ok{color:var(--ok);background:#ecfdf3;border-radius:12px;padding:12px 16px;margin:0 0 18px;font-weight:500}
#mesa-busca-wrap{margin-top:8px}
#mesa-busca{margin-top:4px}
.mesa-resultados{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mesa-resultados .vazio{color:var(--muted);padding:8px 2px}
.mesa-membro{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;font:inherit;text-align:left;padding:14px 16px;border:1px solid var(--linha);border-radius:12px;background:#fff;cursor:pointer;color:var(--texto)}
.mesa-membro:hover{border-color:var(--primaria);background:var(--selecao)}
.mesa-membro .n{font-weight:500}
.mesa-membro .t{color:var(--muted);font-size:.85rem;white-space:nowrap}
.mesa-membro.ja{opacity:.5;cursor:not-allowed}
.modo-mesa .app,.modo-mesa .topo{max-width:640px}
.aviso-espera{color:#7a5a00;background:#fffaeb;border-radius:12px;padding:12px 16px;margin:14px 0 0;font-size:.95rem}