/* Paleta e layout copiados do santinho impresso "COMO VOTAR" da campanha:
   topo azul-marinho, corpo cinza com base esverdeada, e cada digito do numero
   dentro de um quadrado — verde quando preenchido, branco quando vazio. */

/* Fontes da peca (mesmas do manual da campanha, e as do manual TOZI ID):
   Geometos nos titulos e numeros, Avenir no texto — auto-hospedadas, nada de
   CDN. A Archivo condensada da primeira versao saiu quando o manual chegou. */
@font-face {
  font-family: "Geometos";
  src: url("fonts/geometos.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Geometos Neue";
  src: url("fonts/geometos-black.woff2") format("woff2");
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: "Avenir LT Std";
  src: url("fonts/avenir-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Avenir LT Std";
  src: url("fonts/avenir-500.woff2") format("woff2");
  font-weight: 500 800; font-display: swap;
}

:root {
  /* Cores medidas na arte final da colinha (peca 15/08) — nao no manual
     digital, que traz o lima neon de tela. A peca tem DOIS verdes: o verde
     das caixas (--limao) e o lima vivo dos acentos (--lima: pincel, tecla
     CONFIRMA, tique, faixa do pe). */
  --marinho: #13284a;
  --marinho-2: #0e1f3a;
  --limao: #84bf41;
  --lima: #a9cf35;
  --limao-esc: #6f8f26;
  --bg: #e9e9e6;
  --bg-2: #dfe0d8;
  --surface: #ffffff;
  --txt: #13284a;
  --rot: #63666a;
  --mut: #5c6066;
  --linha: #cfceca;
  --marca: #13284a;
  --marca-txt: #ffffff;
  --acento: #13284a;
  /* Caixa do campo travado: na peca do Dr. Elton ela e verde como as outras,
     na do Tozi o campo dele sai azul para separar dos aliados. */
  --cx-travado: var(--limao);
  --cx-travado-txt: var(--marinho);
  --erro: #a32d2d;
  --erro-bg: #fceaea;
  --display: "Avenir LT Std", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Fonte dos numeros e titulos, a display da campanha. */
  --titulo: "Geometos Neue", "Geometos", var(--display);
  --raio: 8px;
  --gap-d: 6px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* clip, nao hidden: a vinheta do rosto sangra da folha e nao pode virar
   rolagem lateral; clip corta sem criar contexto de scroll novo */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  padding: 0;
  /* coluna cheia: a faixa lima do pe fecha a pagina mesmo em tela alta */
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--bg);
  background-image: linear-gradient(170deg, var(--bg) 55%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--txt);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
}

/* Fundo da peca do Dr. Elton: prata com brilho lima no canto de baixo. */
body[data-tema="elton"] {
  background-image:
    radial-gradient(46rem 34rem at 100% 94%, rgba(169, 207, 53, .32), transparent 62%),
    linear-gradient(168deg, #dfe0d8 0%, #e9e9e6 48%, #e6e6e3 100%);
}

/* --- topo -------------------------------------------------------------- */

/* Volta para o site — canto de cima a esquerda, onde todo mundo procura
   "voltar". E chrome do app, nao conteudo da peca: fica no fio da margem,
   discreto, sem disputar com o "COMO VOTAR". */
.topo-volta { max-width: 26rem; margin: 0 auto; }
.volta {
  display: inline-flex; align-items: center; gap: .45rem;
  /* Alvo de 44px SEM engordar o cabecalho: o padding cresce para dentro e as
     margens negativas devolvem o espaco ao layout. A da esquerda ainda anula
     o recuo do proprio pill, alinhando a seta com o "C" de COMO VOTAR — sem
     isso ela nasce 11px a direita da coluna de texto e o topo fica torto. */
  min-height: 44px; padding: .5rem .85rem .5rem .7rem;
  margin: -.3rem 0 .1rem -.7rem;
  /* Sem preenchimento parado: com fundo visivel, o pill sangrava para fora da
     margem (a seta so alinha com o titulo se a caixa recuar) e parecia
     cortado na borda da tela. Fantasma resolve os dois — a seta alinha, nada
     vaza — e o fundo entra no toque, confirmando que e clicavel. */
  background: transparent; color: #fff;
  font-weight: 600; font-size: .78rem; letter-spacing: .02em;
  border-radius: 999px;
  text-decoration: none;
  transition: background .18s cubic-bezier(.25, 1, .5, 1), color .18s cubic-bezier(.25, 1, .5, 1);
}
.volta svg { width: .5rem; height: auto; flex: none; }
/* Fantasma parado, fundo discreto no toque: o lima cheio era do pill antigo e
   agora gritaria mais que o "COMO VOTAR" logo abaixo. */
.volta:hover, .volta:focus-visible { background: rgba(255, 255, 255, .18); }
/* No celular ninguem passa o mouse: o retorno que importa e o do toque. */
.volta:active { background: rgba(255, 255, 255, .3); }
@media (prefers-reduced-motion: reduce) { .volta { transition: none; } }

.topo {
  background: #061e4c;
  color: #fff;
  padding: 1rem .9rem 1.05rem;
  /* Pattern OFICIAL do manual (ID 26 ELTON, pag. 21), extraido do vetor:
     colunas de 135,6 x periodo 71, fita clara #0a3983 de 35,8 de espessura
     sobre o escuro #061e4c — 50/50, sem terceiro tom. O path e o poligono
     exato da peca (vale assimetrico em x=37). Por cima, o brilho ciano que a
     arte tem entrando pelo canto de baixo a esquerda. */
  background-image:
    radial-gradient(34rem 20rem at 0% 100%, rgba(64, 170, 214, .42), rgba(64, 170, 214, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135.6 71'%3E%3Crect width='135.6' height='71' fill='%23061e4c'/%3E%3Cpath d='M135.6 0 L135.6 35.8 L111.7 43.5 L92.3 49.8 L71.4 56.5 L37 67.7 L23.9 63.4 L0 55.7 L0 19.9 L37 31.9 Z' fill='%230a3983'/%3E%3C/svg%3E");
  /* Proporcao da peca impressa: ~8 colunas na largura (coluna = 13% dela).
     Numa tela de 375px isso da 3rem por coluna. */
  background-size: auto, 2.8rem auto;
}

.topo-int {
  max-width: 26rem; margin: 0 auto;
  display: flex; align-items: center; gap: .9rem;
}

.topo-txt { flex: 1; min-width: 0; }

.marca {
  font-family: var(--titulo);
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .5rem;
  font-size: 1.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.01em; text-transform: uppercase;
}

/* O risco lima da identidade cruza POR CIMA da base de "LINH", em COLINHA,
   como ele sublinha "medico"/"compromisso" no manual. Medidas em em na caixa
   do titulo (Geometos, medido no render): "FAÇA SUA " termina em 5,71em e a
   palavra inteira em 10,75em, entao o risco de 2,1em comeca em 7,2em e morre
   antes do A final. */
.marca { position: relative; }
.visto-marca {
  position: absolute; z-index: 1;
  left: 7.2em; width: 2.1em;
  bottom: -.77em; height: .98em;
  color: var(--lima);
  pointer-events: none;
}

.passos {
  margin: 0; padding: 0; list-style: none;
  counter-reset: p;
  display: grid; gap: .12rem;
}
.passos li {
  counter-increment: p;
  display: grid; grid-template-columns: 1.15rem 1fr; gap: .35rem;
  font-size: .84rem; line-height: 1.35;
  color: rgba(255, 255, 255, .93);
}
/* Bolinha numerada do passo. O place-items centra a CAIXA DE LINHA, nao a
   tinta do algarismo: a caixa e assimetrica (ascent 0,74em contra descent
   0,22em) e o digito so ocupa acima da baseline, entao ele sentava 0,124em
   alto — 7% do diametro, visivel numa bolinha desse tamanho. O padding-top
   desce a area de conteudo pela metade do seu valor, dai o dobro da correcao.
   box-sizing explicito porque o `*` do topo do arquivo nao pega pseudo. */
.passos li::before {
  content: counter(p);
  display: grid; place-items: center;
  box-sizing: border-box;
  width: 1.15rem; height: 1.15rem; margin-top: .12rem;
  padding-top: .248em;
  border-radius: 50%;
  background: #b6d6ed; color: var(--marinho);
  font-size: .68rem; font-weight: 700; line-height: 0;
}

/* A tecla da urna, como na peca impressa: na arte a folga e igual nos quatro
   lados (0,30 da altura das maiusculas) e a caixa mede 1,63 vez essa altura.
   O padding NAO pode ser simetrico para chegar la: a Avenir reserva 0,223em
   de descida abaixo da baseline e "CONFIRMA" nao tem descendente, entao essa
   sobra vira folga so embaixo. Compensacao: o topo leva 0,18em a mais que a
   base, que e a diferenca exata (desc 0,223 - asc acima do cap 0,018).
   Medido na peca 7x10 (16/08) e nas metricas da fonte — nao mexer sem
   remedir os dois. */
.tecla {
  display: inline-block;
  vertical-align: middle;
  background: var(--lima); color: var(--marinho);
  padding: .27em .22em .09em; border-radius: .2em;
  line-height: .85; font-weight: 800;
}

/* Selo redondo do candidato, como na peca impressa: circulo navy liso, sem
   anel, conteudo levemente inclinado. Preenchido pelo app.js a partir da
   config — so aparece quando ha campo travado. A borda marinho-2 nao e anel:
   so separa o circulo do padrao de chevrons do topo, que tem a mesma cor. */
.selo {
  flex: none;
  width: 6.4rem; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--marinho);
  border: 2px solid var(--marinho-2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: .1rem;
  padding: .4rem;
  transform: rotate(-8deg);
}
.selo-cargo {
  font-size: .5rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.selo-nome {
  font-family: var(--titulo);
  font-size: .95rem; font-weight: 800; line-height: 1;
  text-transform: uppercase; color: #fff;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.selo-numero {
  font-family: var(--titulo);
  font-size: 1.3rem; font-weight: 900; font-style: italic; line-height: 1;
  color: var(--limao); letter-spacing: .04em;
}

/* Campanha com adesivo oficial (Dr. Elton e Dulce): o selo e a propria arte,
   uma imagem — circulo, tipografia e a inclinacao do lockup ja vem prontos
   dela, entao nada de fundo, anel ou rotacao por cima. */
body:is([data-tema="elton"], [data-tema="dulce"]) .selo {
  background: none; border: 0; padding: 0; transform: none;
}
body[data-tema="elton"] .selo { filter: drop-shadow(0 3px 7px rgba(14, 31, 58, .28)); }
.selo-badge { display: block; width: 100%; height: auto; }

/* --- folha ------------------------------------------------------------- */

.folha { width: 100%; max-width: 26rem; margin: 0 auto; padding: 1rem .9rem 2rem; flex: 1 0 auto; }

/* faixa lima que fecha a peca — o MESMO pattern oficial do topo (manual
   p.22, a versao verde: fita clara %23bdff00 sobre %23a2d600), na mesma
   escala de 6rem por coluna */
.faixa {
  flex: none; height: calc(2.5rem + env(safe-area-inset-bottom));
  background-color: #a2d600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135.6 71'%3E%3Crect width='135.6' height='71' fill='%23a2d600'/%3E%3Cpath d='M135.6 0 L135.6 35.8 L111.7 43.5 L92.3 49.8 L71.4 56.5 L37 67.7 L23.9 63.4 L0 55.7 L0 19.9 L37 31.9 Z' fill='%23bdff00'/%3E%3C/svg%3E");
  /* Na peca a faixa e bem mais miuda que o topo: ~20 colunas na largura
     (coluna = 5% dela) — 1.2rem numa tela de 375px. */
  background-size: 1.15rem auto;
}
body:is([data-tema="tozi"], [data-tema="dulce"]) .faixa { display: none; }

.aviso {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: 0 0 .85rem; padding: .4rem .45rem .4rem .85rem;
  background: var(--surface); border: 1px solid var(--linha);
  border-radius: var(--raio); font-size: .78rem; color: var(--mut);
}

/* "Comecar de novo" apaga o que o eleitor digitou, mas era um link sublinhado:
   sem cara de alvo tocavel e sem dizer o que faz. Vira pill com a seta de
   recomeco. De CONTORNO, nao cheio: e utilitario, nao pode competir com
   "Salvar imagem" nem virar um alvo grande de toque acidental — quem enche
   seis campos e apaga sem querer refaz tudo. */
.recomecar {
  display: inline-flex; align-items: center; gap: .45rem;
  flex: none; min-height: 44px; padding: .5rem .9rem;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--marca); background: transparent;
  border: 2px solid var(--marca); border-radius: 999px;
  cursor: pointer;
  transition: background-color .16s cubic-bezier(.25, 1, .5, 1),
              color .16s cubic-bezier(.25, 1, .5, 1);
}
.recomecar svg { width: 1.1em; height: 1.1em; flex: none; }
.recomecar:hover, .recomecar:focus-visible { background: var(--marca); color: var(--marca-txt); }
.recomecar:active { transform: scale(.97); }

.link {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--limao-esc); text-decoration: underline; cursor: pointer;
  min-height: 44px; font-weight: 600;
}

.carregando { text-align: center; color: var(--mut); padding: 2rem 0; }

.colinha { display: grid; gap: .75rem; }

/* Foto a esquerda, corpo (rotulo + caixas) a direita.
   Todas as caixas tem a mesma largura em todos os cargos, alinhadas a
   esquerda — como na peca impressa. A conta usa o cargo mais largo (5),
   com base na largura do corpo (100% aqui = largura de .campo-corpo). */
.campo {
  --cx: calc((100% - 4 * var(--gap-d)) / 5);
  display: flex; align-items: center; gap: .6rem;
}
/* Goteira a direita nas paginas cujo cargo travado tem 5 digitos (Tozi,
   Dulce). Nasceu para caber o visto depois do numero; o visto saiu, mas a
   folga fica: sem ela as caixas de 5 digitos encostam nas duas bordas e a
   linha perde o respiro que as de 4 e 3 digitos tem. */
body:has(.campo.travado .digito:nth-child(5)) .campo {
  --cx: calc((100% - 2rem - 4 * var(--gap-d)) / 5);
}
.campo-corpo { flex: 1; min-width: 0; }

.foto {
  position: relative;
  flex: none;
  width: 3.4rem; height: 4.3rem;
  padding: 0; margin: 0;
  border: 1px solid var(--linha); border-radius: 7px;
  background: var(--surface); overflow: hidden;
  display: grid; place-items: center;
  color: var(--rot); cursor: pointer;
  transition: border-color .12s ease;
}
button.foto:hover, button.foto:focus-visible { border-color: var(--marinho); outline: none; }
.foto-travada { cursor: default; border-color: var(--cx-travado); border-width: 2px; }

/* Campo ainda vazio: tracejado reforca que ali se pode tocar para buscar. */
button.foto:not(.tem-foto) { border-style: dashed; border-color: var(--marinho); }

.foto-lupa {
  position: absolute; right: -1px; bottom: -1px;
  width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  background: var(--marinho); color: #fff;
  border-radius: 7px 0 6px 0;
}
.foto-lupa svg { width: .82rem; height: .82rem; display: block; }
button.foto:hover .foto-lupa, button.foto:focus-visible .foto-lupa { background: var(--limao-esc); }

.foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-ph { display: grid; place-items: center; width: 100%; height: 100%; }
.foto-ph svg { width: 62%; height: 62%; opacity: .55; }
.foto-ph.inicial {
  font-size: 1.7rem; font-weight: 800; color: var(--marca-txt);
  background: var(--marinho);}

.rotulo {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4rem;
  margin: 0 0 .3rem;
  font-size: 1rem; font-weight: 800; line-height: 1.15;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--rot);
}

/* Na peca do Dr. Elton o rotulo do cargo sai na display da campanha. */
body[data-tema="elton"] .rotulo { font-family: var(--titulo); font-weight: 800; }

.nome { color: var(--marinho); overflow-wrap: anywhere; }
.nome:empty { display: none; }
/* Separador no fim do cargo, nao no inicio do nome: quando o nome e longo e
   cai para a linha de baixo, a barra fica no fim da primeira linha em vez de
   orfa no comeco da segunda. */
.rotulo > span:first-child::after { content: " |"; color: var(--rot); }
/* Sem nome resolvido ainda, nao ha o que separar. O span .nome existe sempre
   no DOM (aria-live precisa dele estavel), entao a checagem e por :has(). */
.rotulo:has(.nome:empty) > span:first-child::after { content: ""; }
.partido { color: var(--rot); font-size: .8em; font-weight: 700; }

.digitos { position: relative; display: flex; gap: var(--gap-d); container-type: inline-size; }

.digito {
  font-family: var(--titulo);
  width: var(--cx); aspect-ratio: 1; flex: none;
  display: grid; place-items: center;
  padding-top: .07em; /* otico: o digito da Geometos senta alto na caixa */
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(19, 40, 74, .06);
  font-size: 15.5cqw; font-weight: 900; line-height: 1;
  color: var(--marinho);
  transition: background-color .12s ease, border-color .12s ease;
}
/* Numerais do santinho do Dr. Elton (foto da peca): retos, geometricos e
   pesados — a Geometos Neue Black upright, sem o falso italico de antes.
   Corpo maior que o padrao: na foto a tinta do algarismo ocupa ~72% da
   caixa (15.5cqw davam 61%). O padding-top otico em em escala junto. */
body[data-tema="elton"] .digito { font-size: 21.6cqw; }
.digito.preenchido { background: var(--limao); border-color: var(--limao); box-shadow: none; }
.campo.travado .digito.preenchido {
  background: var(--cx-travado); border-color: var(--cx-travado);
  color: var(--cx-travado-txt);
}
/* So destaca a proxima caixa do campo em foco. A classe .atual existe em todo
   campo vazio; sem o :focus-within os seis apareceriam marcados de uma vez. */
.digitos:focus-within .digito.atual {
  border-color: var(--marinho); border-width: 2px;
}

/* Input real, invisivel por cima das caixas: um so campo mantem colagem,
   teclado numerico e leitor de tela funcionando. As caixas sao decorativas. */
.entrada {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  font: inherit;
  cursor: text;
}
.entrada:focus { outline: none; }
.campo.travado .entrada { cursor: default; }

.campo.tem-erro .digito { border-color: var(--erro); }
.campo.tem-erro .digito.preenchido { background: var(--erro-bg); }
.campo.tem-erro .nome { color: var(--erro); }

.erro { margin: .25rem 0 0; font-size: .74rem; font-weight: 600; color: var(--erro); }
.erro-geral {
  margin: .75rem 0 0; padding: .55rem .75rem; font-size: .8rem; font-weight: 600;
  color: var(--erro); background: var(--erro-bg);
  border: 1px solid var(--erro); border-radius: var(--raio);
}

/* Empilhados: "Compartilhe com amigos" nao cabe ao lado de "Salvar imagem"
   em 375px sem quebrar no meio da palavra. */
.acoes { display: grid; gap: .5rem; margin-top: 1.25rem; }
.acoes button {
  min-height: 48px; padding: .6rem .5rem;
  font: inherit; font-size: .88rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--marca-txt); background: var(--marca);
  border: 2px solid var(--marca); border-radius: var(--raio);
  cursor: pointer;
}
.acoes button.secundario { color: var(--marca); background: transparent; }
.acoes button:active { transform: scale(.985); }
.acoes button[disabled] { opacity: .45; cursor: default; }

/* Marcacao legal obrigatoria: menor e mais apagada que o rodape, como na
   lateral do santinho impresso, sem competir com o aviso da urna. */
/* Discreta pelo CORPO, nao pela opacidade: a .72 de antes derrubava o
   contraste para 2,8:1 e o CNPJ e justamente o texto que precisa ser
   legivel quando alguem vai conferir quem pagou a peca. Sem ela, o
   proprio --mut ja da 4,5:1 nos tres temas. */
.legal {
  margin: .5rem 0 0; text-align: center;
  font-size: .64rem; line-height: 1.35; letter-spacing: .01em;
  color: var(--mut); text-wrap: balance;
}

/* --- busca geral do topo ------------------------------------------------ */
/* Um campo unico acima da folha. Pilula alta (52px) com a lupa dentro, na
   cor da marca: o primeiro toque da pagina precisa se anunciar sozinho. */
.busca-geral { position: relative; margin: 0 0 1.1rem; }
.bg-caixa {
  display: flex; align-items: center; gap: .55rem;
  min-height: 52px; padding: 0 .9rem;
  background: var(--surface, #fff); border: 2px solid var(--marca);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
.bg-caixa:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 25%, transparent); }
.bg-lupa { width: 22px; height: 22px; flex: none; color: var(--marca); }
.bg-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--txt);
}
.bg-input::placeholder { color: var(--mut); font-weight: 500; }
/* O X do teclado do proprio type=search varia por navegador; este e o nosso. */
.bg-input::-webkit-search-cancel-button { display: none; }
.bg-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--bg-2); color: var(--rot); font-size: .85rem;
  cursor: pointer; display: grid; place-items: center;
}
/* Resultados: cartao solto POR CIMA da folha (nao empurra os campos — a
   lista abre e fecha a cada tecla e o layout pulando e pior que sobrepor). */
.bg-lista {
  position: absolute; top: calc(100% - 1.2rem); left: 0; right: 0; z-index: 30;
  margin: 0; padding: .3rem; list-style: none;
  background: var(--surface, #fff); border: 1px solid var(--linha);
  border-radius: calc(var(--raio) + 4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  max-height: min(21rem, 55vh); overflow-y: auto;
}
/* Cargo do resultado: e a informacao que a busca por campo nao precisava
   dizer, e aqui e a que evita voto no cargo errado. */
.bg-cargo {
  margin-left: auto; flex: none; align-self: center;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; color: var(--marca);
  padding: .22rem .5rem; border: 1.5px solid currentColor; border-radius: 999px;
}
.bg-lista .busca-item { width: 100%; border-radius: calc(var(--raio) + 1px); }
.bg-lista .busca-item.exato { background: color-mix(in srgb, var(--marca) 10%, transparent); }
/* O campo que acabou de ser preenchido pela busca pisca uma vez: o toque
   aconteceu la em cima e o resultado aparece aqui embaixo — sem o brilho o
   eleitor nao sabe para onde olhar. */
@keyframes campo-brilho {
  0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 55%, transparent); }
  100% { box-shadow: 0 0 0 4px transparent; }
}
.campo.brilho { animation: campo-brilho 1.2s ease-out 2; border-radius: var(--raio); }

.rodape {
  margin: 1.25rem 0 0; text-align: center;
  font-size: .7rem; color: var(--mut);
  /* Em 375px a frase nao cabe numa linha so e sobrava "lugar nenhum." sozinho
     embaixo. O balance reparte as linhas por igual em vez de encher a
     primeira; onde nao existe (navegador antigo), quebra como antes. */
  text-wrap: balance;
}

/* temas por candidato — paletas copiadas dos sites de cada campanha */
/* Tozi: cores digitais do manual TOZI ID — 274C #1a174e, 280C #001a6d e
   2132C #1055bd. O impresso sai em Pantone/CMYK (por isso o santinho mede
   #0f1b2c/#1e5898 no PDF); em tela o manual manda usar estes RGB.
   O verde segue sendo a caixa preenchida dos outros cargos: a peça é conjunta
   com o Dr. Elton. O campo do Tozi é o único azul. */
body[data-tema="tozi"] {
  --marinho: #1a174e; --marinho-2: #001a6d; --limao: #84bf41; --lima: #84bf41;
  --limao-esc: #1055bd; --bg: #e3e4e3; --bg-2: #d8dad8;
  --txt: #1a174e; --rot: #5b5f6b; --mut: #5b5f6b;
  --linha: #c8cac8; --marca: #1055bd; --acento: #1055bd;
  --cx-travado: #1055bd; --cx-travado-txt: #ffffff;
  --display: "Avenir LT Std", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Geometos Neue", "Geometos", var(--display);
}
/* Na peca do Tozi so o campo DELE e azul; os aliados impressos (Dr. Elton e
   o governador, agora fixos) seguem verdes como os demais, com foto sem
   destaque. Sem isto o azul do --cx-travado pintaria os tres. */
body[data-tema="tozi"] .campo.travado:not(.proprio) .digito.preenchido {
  background: var(--limao); border-color: var(--limao); color: var(--marinho);
}
body[data-tema="tozi"] .campo.travado:not(.proprio) .foto-travada {
  border-color: var(--linha); border-width: 1px;
}
/* Selo chapado no azul, sem o anel verde; e os numerais inclinados da peça.
   A inclinação do selo é coisa da peça do Dr. Elton, não das outras. */
body:is([data-tema="tozi"], [data-tema="dulce"]) .selo { transform: none; }
body[data-tema="tozi"] .selo { background: var(--acento); border-color: #fff; }
body[data-tema="tozi"] .selo-numero { color: #fff; }
/* Sem italico: a Geometos nao tem face italica (fonts/ so traz geometos.woff2
   e geometos-black.woff2), entao o navegador sintetizava um oblique por skew.
   O skew inclina o glifo mas nao mexe na largura de avanco, e o numero saia
   encostado a direita dentro da caixa — era o mesmo defeito que o "fora de
   centro". Upright resolve os dois. O text-indent zera a folga que o
   letter-spacing do .selo-numero deixa depois do ultimo digito, que puxava o
   texto centralizado meio passo para a esquerda. */
body[data-tema="tozi"] .selo-numero,
body[data-tema="tozi"] .digito { font-style: normal; }
body[data-tema="tozi"] .selo-numero { text-indent: .04em; }
/* Geometos não tem eixo de largura: o font-stretch do tema padrão viraria
   síntese e engorda a letra. */
body:is([data-tema="tozi"], [data-tema="dulce"]) .marca,
body:is([data-tema="tozi"], [data-tema="dulce"]) .selo-nome,
body:is([data-tema="tozi"], [data-tema="dulce"]) .selo-cargo,
body:is([data-tema="tozi"], [data-tema="dulce"]) .digito { font-stretch: normal; }
/* O nome inteiro não cabe no selo em Geometos, que é mais larga que a Archivo
   condensada; e quebrar "PROFESSOR" no meio (overflow-wrap: anywhere) fica
   pior que diminuir. */
body:is([data-tema="tozi"], [data-tema="dulce"]) .selo-nome {
  font-size: .78rem; overflow-wrap: normal; letter-spacing: 0;
}

/* --- layout da peça impressa (só o tema do Tozi) ----------------------- */

/* Topo: título à esquerda e passos à direita, sobre o gradiente navy→azul da
   peça, com o bloco de listras nas laterais. */
body[data-tema="tozi"] .topo {
  background-color: var(--marinho);
  background-image:
    linear-gradient(160deg, rgba(26, 23, 78, .92) 30%, rgba(16, 85, 189, .55)),
    url("marca/ondas.svg"), url("marca/ondas.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, left -14% center, right -14% center;
  background-size: cover, 42% auto, 42% auto;
  padding-bottom: 1.4rem;
}
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .topo-int { align-items: flex-start; }
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .marca {
  flex: none; font-size: 1.25rem; line-height: 1; white-space: nowrap;
}
/* Título ao lado dos passos é o arranjo da peça, mas ela é bem mais larga em
   proporção que um celular: abaixo disso a coluna dos passos fica com três
   linhas por item e o topo engorda. Aí eles voltam a ficar um sob o outro. */
/* O visto desce 1,2rem abaixo da linha do titulo; no mobile os passos vem
   logo abaixo e ficariam riscados por ele. O respiro extra so existe no
   layout empilhado — de 26rem pra cima o titulo fica ao lado dos passos e a
   regra do breakpoint zera a margem de novo. */
body[data-tema="elton"] .marca { margin-bottom: 1.4rem; }
@media (min-width: 26rem) {
  body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .topo-txt {
    display: flex; align-items: center; gap: .8rem;
  }
  body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .marca { font-size: 1.08rem; margin: 0; }
  /* Na arte o COMO VOTAR e maior que nos aliados; o pincel encolhe junto. */
  body[data-tema="elton"] .marca { font-size: 1.3rem; }
}
/* (o tamanho e a posicao do pincel saem da regra base, em em: eles seguem o
   corpo do titulo sozinhos, sem override por tema) */
/* A faixa navy da arte respira mais que o topo compacto dos aliados. */
body[data-tema="elton"] .topo { padding-top: 1.25rem; padding-bottom: 1.45rem; }
/* Na peça o "COMO VOTAR" vem sozinho — o tique é assinatura do Dr. Elton. */
body:is([data-tema="tozi"], [data-tema="dulce"]) .visto-marca { display: none; }
/* Os passos da peça são numerados em azul, não no verde do Dr. Elton. O vão à
   direita é onde o rosto entra. */
/* Bolinhas equidistantes SEM engordar o topo: os tres passos cabem em uma
   linha cada, e af o vao entre bolinhas ja sai igual sozinho. O passo 1
   ("Digite o numero do seu candidato") pedia 207px numa coluna de 188px e
   quebrava em duas linhas, o que jogava os vaos para 38px e 22px. Os 19px
   que faltavam vem de tres cortes pequenos em vez de um grande: tracking
   negativo, a coluna da bolinha um tico menor e o vao do rosto ajustado a
   TINTA dele, nao a caixa: medido no render, na altura do passo 1 o traco so
   comeca 10,6px depois da borda da caixa do SVG (mais abaixo, na curva do
   queixo, sobra 1,6px — mas os passos 2 e 3 tem 61px e 86px de folga e nunca
   chegam la). A fonte cai so de .8 para .77rem; ir ate .72rem, que resolveria
   sozinho, ficaria pequeno demais numa peca de apoio a voto. */
body[data-tema="tozi"] .passos {
  flex: 1; min-width: 0; padding-right: 3.2rem; font-size: .77rem;
  letter-spacing: -.018em;
}
body[data-tema="tozi"] .passos li { grid-template-columns: 1.05rem 1fr; gap: .3rem; }
body[data-tema="tozi"] .passos li::before { width: 1.05rem; height: 1.05rem; }
body[data-tema="tozi"] .passos li::before {
  background: var(--acento); color: #fff;
}

/* O rosto em traço invade o corpo pelo canto direito, como na peça. */
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .folha {
  position: relative;
  padding-top: 1.6rem;
}
/* O card do aviso ("Comecar de novo") e o primeiro elemento da folha — bem
   onde o queixo da vinheta desce. Termina antes dela. */
body[data-tema="tozi"] .aviso { margin-right: 3.8rem; }

/* O rosto em traco invade do topo para o corpo, vinheta de canto com a cara
   da peca. Sangra forte pela direita: o que ficaria por cima da tecla e das
   caixas e cortado pela borda, entao nada util fica por baixo. */
body[data-tema="tozi"] .folha::before {
  content: "";
  position: absolute; z-index: 1; pointer-events: none;
  /* Sangria RESPONSIVA. A folha e width:100% com max-width:26rem e margin
     auto: no desktop sobra margem dos dois lados e a arte cabe inteira ali,
     como na peca. Num celular de 390px a folha ocupa a largura toda, a
     margem e zero, e os -2rem fixos de antes iam para fora da tela — o
     html { overflow-x: clip } segurava, mas o Safari anterior ao 16 ignora
     clip e o dedo arrastava a pagina de lado.
     (100vw - 100%) / 2 e exatamente a margem que sobra de cada lado, entao
     o min() sangra os 2rem quando ha espaco e nada quando nao ha. A arte
     mantem 5.6rem de largura e fica ancorada a esquerda: o que muda e so
     quanto dela a caixa deixa aparecer. */
  --sangra: min(2rem, max(0px, (100vw - 100%) / 2));
  right: calc(-1 * var(--sangra)); top: -4.9rem;
  width: calc(3.6rem + var(--sangra)); height: 8.8rem;
  background: url("marca/rosto.svg") left center / 5.6rem 8.8rem no-repeat;
}

/* O selo (movido para cá pelo app.js) ocupa o vazio à direita dos senadores,
   que só têm 3 dígitos — o mesmo lugar que ele tem na peça. */
/* O selo vive dentro do campo do senador (1º voto) e transborda sobre o de
   baixo — ancorado ali, desce junto quando um aviso empurra o formulário. */
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .campo { position: relative; }
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .campo > .selo {
  position: absolute; z-index: 1;
  right: 0; top: -.3rem;
  width: 7rem;
  /* Decoracao nao recebe toque: o .entrada transparente cobre a faixa inteira
     das caixas, e sem isto o selo comeria os toques na metade direita dela. */
  pointer-events: none;
}
/* No Dr. Elton o adesivo tambem desce para o ultimo campo (ver app.js), na
   faixa das caixas — o rotulo em cima fica livre para o nome do presidente.
   Um tico menor que os 7.5rem de antes: no pe da folha ele nao disputa com
   o topo e nao precisa gritar. */
body[data-tema="elton"] .campo > .selo { width: 7.2rem; top: 1.3rem; }
/* O adesivo transborda do campo de 2 digitos; o respiro antes dos botoes
   absorve o transbordo (mesma solucao da Dulce, folga um pouco maior porque
   o botton dele e maior). */
body[data-tema="elton"] .acoes { margin-top: 4rem; }
/* Na Dulce o selo vive no ULTIMO campo (ver app.js) e comeca na altura das
   CAIXAS, nao do rotulo: o rotulo cresce quando o nome do candidato resolve,
   e era ali que o selo cobria os senadores. Abaixo dele o vao de um cargo de
   2 digitos e permanente, e o que sobra transborda para o respiro antes dos
   botoes — que ganha folga equivalente logo abaixo. */
/* 6.2rem = 23,9% da largura da folha, a mesma proporcao que o adesivo tem na
   peca impressa (526px de 2204px). */
body[data-tema="dulce"] .campo > .selo { top: 1.5rem; width: 6.2rem; }
body[data-tema="dulce"] .acoes { margin-top: 3.6rem; }
/* Mesmo arranjo no Tozi. Ele ficava nos senadores e, com o nome resolvido,
   cobria "ANDRE DO PRADO" no 1o voto e encostava em "PETTER MAAHS" no 2o
   (medido: 64px e 51px de nome tapados). O top desce o selo do rotulo para a
   faixa das caixas; o respiro maior absorve o transbordo, como nos outros. */
body[data-tema="tozi"] .campo > .selo { top: 1.3rem; }
body[data-tema="tozi"] .acoes { margin-top: 3.9rem; }
/* A mensagem de erro do campo que hospeda o selo quebraria por baixo dele. */
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .campo:has(> .selo) .erro {
  padding-right: 7.4rem;
}
/* O NOME tambem. O selo desce para a faixa das caixas por um `top` fixo, mas
   o rotulo acima dele cresce com o nome do candidato — e o topo do circulo
   subia por cima da ultima palavra. Medido nas tres campanhas com o
   presidente de nome mais longo do dataset ("VETERINARIO WILSON GRASSI"):
   Tozi cobria 88px do nome, Dr. Elton 116px, Dulce 76px, sempre a sigla e o
   fim do nome. Reservar a faixa faz o nome quebrar em duas linhas em vez de
   sumir por baixo do adesivo — numa peca de conferencia de voto, ler o nome
   inteiro vale mais que a linha unica. */
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .campo:has(> .selo) .rotulo {
  padding-right: 7.4rem;
}
/* A peça não tem o tique de conferido: o campo dele já vem preenchido. */
body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .rotulo { font-size: .82rem; }
/* Na peca o campo travado sai sem a sigla do partido ("DEPUTADO FEDERAL |
   DR. ELTON", nada de UNIÃO) — e sem ela o rotulo cabe numa linha so. */
body:is([data-tema="elton"], [data-tema="dulce"]) .campo.travado .partido { display: none; }

/* A foto de cada cargo fica à esquerda, como no tema padrão: é ela que abre a
   busca por nome, e ver o rosto do candidato é metade do "confira o nome e a
   foto". A peça impressa não tem essa coluna, mas ela é o app funcionando. */

/* Rodapé com a faixa de listras da peça. (Só o Tozi: na Dulce o rodapé é o
   texto solto, sem caixa — ver o bloco do tema dela.) */
body[data-tema="tozi"] .rodape {
  margin: 1.6rem -.9rem 0;
  padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--marinho);
  color: rgba(255, 255, 255, .82);
}
body[data-tema="tozi"] .rodape {
  background: var(--marinho) url("marca/ondas.svg") center/150% auto no-repeat;
}
/* Dulce Rita: verso do santinho 7x10 em curvas (16/08) reproduzido à risca.
   Painel cinza-claro chapado dentro da moldura petróleo, rótulo do cargo em
   cinza com o nome em navy, dígito navy na caixa verde, selo circular
   petróleo-escuro e pattern de pessoinhas mint — cores medidas da peça.
   A peça é conjunta com o Dr. Elton: o campo travado dela também sai verde. */
body[data-tema="dulce"] {
  --marinho: #005474; --marinho-2: #005b79; --limao: #8dc73f; --lima: #bfd736;
  --limao-esc: #1f7a68; --bg: #e7e8e8; --bg-2: #e7e8e8;
  --txt: #062240; --rot: #656769; /* 4,63:1 no fundo dela; o #6d6f71 do impresso dava 4,11 */ --mut: #5c6a72;
  --linha: #d3d4d4; --marca: #005474; --acento: #0a4b69;
  --cx-travado: #8dc73f; --cx-travado-txt: #062240;
  --display: "Avenir LT Std", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Geometos Neue", "Geometos", var(--display);
}
/* Na peça o cargo é cinza e o NOME (e os dígitos) saem no navy mais escuro,
   não no petróleo do topo. */
body[data-tema="dulce"] .nome,
body[data-tema="dulce"] .digito { color: var(--txt); }
/* Topo da peca: pessoinhas tom sobre tom. O coracao mint aparece DESFOCADO,
   um brilho suave — por isso pseudo com blur, nao background (filter nao pega
   numa camada só do background). */
/* O padrao da peca nao e um campo infinito: sao as pessoinhas (Λ com cabeca —
   duas bolinhas e um coracao, nessa ordem) grandes, em duas filas, encostadas
   no PE da faixa, com o terco de cima liso. Dai repeat-x, bottom e a altura em
   %: medido na pagina 2 do santinho, o bloco ocupa 63,5% da faixa (264px de
   416px) e cada figura vale 135px — proporcao que o `auto 64%` mantem em
   qualquer altura de cabecalho. O tile tem 3 figuras porque a cabeca so fecha
   o ciclo de tres. */
body[data-tema="dulce"] .topo {
  background-image: url("marca/padrao-dulce-topo.svg");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 64%;
  padding-bottom: 1.4rem;
}
/* Na peca o coracao fica logo depois do CONFIRMA — ancorado nos passos, e nao
   na borda do .topo, ele acompanha a coluna de conteudo em vez de voar para o
   canto da tela quando a janela e larga. Centro a 74% da altura do bloco, como
   na arte (medido na peca 7x10). */
body[data-tema="dulce"] .passos { position: relative; }
body[data-tema="dulce"] .passos::after {
  content: ""; position: absolute;
  right: -.2rem; top: 74%; transform: translateY(-50%);
  width: 3.4rem; height: 3.2rem;
  background: url("marca/coracao.svg") center/contain no-repeat;
  filter: blur(7px); opacity: .8;
  pointer-events: none;
}
body[data-tema="dulce"] .passos { flex: 1; min-width: 0; font-size: .8rem; padding-right: 3.4rem; }
/* Com o titulo ao lado (>=26rem) o coracao fica alem dos passos: folga menor
   evita quebrar "do seu candidato" em duas linhas a toa. */
@media (min-width: 26rem) {
  body[data-tema="dulce"] .passos { padding-right: 2.4rem; }
}
/* Passos da peça: bolinha navy com número branco. */
body[data-tema="dulce"] .passos li::before { background: var(--txt); color: #fff; }
/* A tecla CONFIRMA da peça não é chapada: desce do lima vivo para o verde
   das caixas (cores medidas no topo e na base da caixa impressa). */
body[data-tema="dulce"] .tecla {
  background: linear-gradient(180deg, #bfd736, #68bd46);
  color: var(--txt);
}
/* O selo dela e o adesivo oficial em imagem (ver o bloco de temas com arte,
   acima) — o lockup montado a mao saiu junto com as regras que o vestiam. */
/* Pessoinhas mint na lateral direita do corpo, como na peça — ATRAS de todo
   o conteudo. Sem o z-index negativo o pseudo-elemento posicionado pinta por
   cima de qualquer irmao estatico: botoes, aviso e rodape ficavam por baixo
   do padrao. -1 o poe acima so do fundo da pagina. */
body[data-tema="dulce"] .folha::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: auto; width: 58%;
  /* A faixa NAO estica: mantem a largura de sempre e so encosta na borda
     direita da JANELA. A folha tem max-width 26rem e e centrada, entao a
     sobra ate a janela e 50vw - 13rem; em tela estreita (sem sobra) o min()
     devolve o -.9rem de antes, que so anula o padding lateral da folha. */
  right: min(-.9rem, calc(13rem - 50vw));
  z-index: -1;
  background: url("marca/padrao-dulce-corpo.svg") right top/4.6rem auto repeat;
  opacity: .85; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
/* Os corações mint desfocados que a peça espalha pelo painel — um grande à
   esquerda na altura do governador, um menor à direita entre os senadores. */
body[data-tema="dulce"] .folha::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    url("marca/coracao.svg") left 8% top 64% / 6.5rem auto no-repeat,
    url("marca/coracao.svg") right 24% top 26% / 3.5rem auto no-repeat;
  filter: blur(9px); opacity: .3;
}
/* O botao de contorno e transparente: sobre o padrao, as pessoinhas vazavam
   para dentro do texto. Fundo da pagina no lugar de transparencia. */
body[data-tema="dulce"] .acoes button.secundario { background: var(--bg); }
/* A peça fecha com a faixa petróleo colada na borda de baixo: o rodapé é a
   faixa (full-bleed, herdado da regra tozi/dulce acima), empurrado para o pé
   pelo margin-top: auto. */
/* Rodape sem caixa: so o texto, no cinza discreto do tema (o base .rodape ja
   faz isso). O margin-top: auto so empurra para o pe da pagina. */
body[data-tema="dulce"] .rodape { margin-top: auto; padding-bottom: env(safe-area-inset-bottom); }
/* A foto do campo pre-definido nao leva destaque verde: fica com o mesmo fio
   fino dos campos livres. */
body:is([data-tema="dulce"], [data-tema="elton"]) .foto-travada {
  border-color: var(--linha); border-width: 1px;
}
/* Respiro garantido entre o ultimo botao e a faixa, mesmo com a pagina cheia
   (o margin-top: auto colapsa a zero quando o conteudo enche). */
body[data-tema="dulce"] .acoes { margin-bottom: 1.4rem; }
/* A folha tem flex: 1 e estica ate o pe da tela; sem isto o rodape parava no
   meio e sobrava um vao cinza com padrao solto embaixo. Coluna flex + auto
   no rodape fecham a pagina com a faixa navy, como a peca fecha. */
body[data-tema="dulce"] .folha { display: flex; flex-direction: column; }
body[data-tema="dulce"] .folha > * { flex: none; }

/* --- gaveta de busca por nome (bottom sheet) -------------------------- */

body.sem-rolagem { overflow: hidden; }

.busca {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 16, 28, .55);
  display: flex; align-items: flex-end; justify-content: center;
}

.busca-painel {
  width: 100%; max-width: 30rem; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: 18px 18px 0 0;
  padding: .8rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  animation: sobe .18s ease;
}
@keyframes sobe { from { transform: translateY(100%); } }

.busca-topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
.busca-titulo {
  margin: 0; font-size: 1rem; font-weight: 800;
  text-transform: uppercase; color: var(--rot);
}
.busca-x {
  background: none; border: 0; font-size: 1.1rem; line-height: 1;
  color: var(--mut); cursor: pointer;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
}
.busca-x:hover { background: var(--surface); }

.busca-input {
  width: 100%; box-sizing: border-box;
  padding: .7rem .85rem; margin-bottom: .5rem;
  font: inherit; font-size: 1rem;
  border: 2px solid var(--linha); border-radius: 10px;
  background: var(--surface); color: var(--txt);
}
.busca-input:focus { border-color: var(--marinho); outline: none; }

.busca-lista {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1;
}
.busca-dica { padding: 1.2rem .3rem; color: var(--mut); font-size: .88rem; text-align: center; }

.busca-item {
  width: 100%; display: flex; align-items: center; gap: .7rem;
  padding: .5rem .3rem; background: none; border: 0;
  border-bottom: 1px solid var(--linha);
  font: inherit; text-align: left; cursor: pointer;
}
.busca-item:active { background: var(--surface); }

.busca-foto {
  flex: none; width: 2.9rem; height: 3.6rem;
  border-radius: 6px; overflow: hidden;
  background: var(--marinho); color: var(--marca-txt);
  display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 800;}
.busca-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.busca-txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.busca-nome {
  font-weight: 700; color: var(--txt); line-height: 1.2;
  text-transform: uppercase; font-stretch: 82%; font-size: .95rem;
}
.busca-meta { font-size: .82rem; color: var(--rot); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .busca-painel { animation: none; }
}

/* --- celular: cabecalho so com o titulo ---------------------------------- */
/* Os tres passos ocupavam ~5rem no alto de uma tela de 667px e empurravam a
   folha para fora da primeira dobra. O passo 1 ("Digite o numero do seu
   candidato") ja e o placeholder da busca logo abaixo, e os passos 2 e 3
   descrevem a urna, nao a pagina. De tablet pra cima (>40rem) sobra altura e
   eles voltam, como na peca impressa. */
@media (max-width: 40rem) {
  .passos { display: none; }
  .topo { padding-top: .7rem; padding-bottom: .8rem; }
  /* O visto do Dr. Elton desce 0,77em abaixo da caixa do titulo: sem os
     passos embaixo, quem segura esse transbordo e o padding do topo. */
  body[data-tema="elton"] .topo { padding-top: .8rem; padding-bottom: 1.3rem; }
  body[data-tema="elton"] .marca { margin-bottom: 0; }
  body:is([data-tema="tozi"], [data-tema="dulce"]) .topo { padding-bottom: .9rem; }
  /* O coracao da Dulce e ancorado nos passos (.passos::after) e sai com eles;
     no lugar dele o padrao de pessoinhas do fundo fica maior na faixa baixa. */
  body[data-tema="dulce"] .topo { background-size: auto 78%; }
  /* Sem a coluna dos passos ao lado, o titulo volta ao corpo do layout
     empilhado em vez do tamanho reduzido do arranjo lado a lado. */
  body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .marca { font-size: 1.25rem; }
  body[data-tema="elton"] .marca { font-size: 1.35rem; }
  /* O rosto do Tozi sobe para dentro do cabecalho. Com o cabecalho de 150px
     para ~74px ele nao cabe mais no tamanho da peca: passava por cima da
     busca, e identidade por cima de campo e justamente o que o produto nao
     faz. Reduzido a altura da propria faixa navy, ele vira vinheta de canto e
     morre 12px antes do campo (proporcao preservada: 3.5 x 0.636 = 2.23). */
  body[data-tema="tozi"] .folha::before {
    top: -3.2rem; height: 3.5rem;
    width: calc(2rem + var(--sangra));
    background-size: 2.23rem 3.5rem;
  }

  /* Voltar e titulo na MESMA linha. Sozinha, a barra do voltar custava 41px
     de altura para uma frase de tres palavras. */
  .topo { display: flex; align-items: center; gap: .7rem; }
  .topo-volta { max-width: none; margin: 0; flex: none; }
  .topo-int { flex: 1; min-width: 0; }
  /* So a seta, num disco de vidro: o cabecalho e um pattern de chevrons, e um
     controle chapado sobre ele ou some ou vira mancha. O desfoque separa o
     alvo do fundo sem inventar uma cor que nao existe na identidade. */
  .volta {
    width: 40px; height: 40px; min-height: 0;
    padding: 0; margin: 0; justify-content: center;
    position: relative;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
  }
  /* O disco tem 40px para nao engordar a linha; o alvo de toque continua 44.  */
  .volta::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
  /* Fundo mais claro nao chega como foco num controle que ja e translucido:
     no teclado o anel branco e o unico sinal que se le sobre o pattern. */
  .volta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* Otico: a seta e assimetrica (aponta para a esquerda) e sentava 1px a
     direita do centro do disco. */
  .volta svg { width: .56rem; margin-left: -1px; }
  .volta-txt { display: none; }

  /* --- densidade: o objetivo e a folha inteira na primeira tela ----------- */
  /* Cortes na MOLDURA (respiros, faixa, ar sob o selo), nunca no conteudo:
     caixas, fotos, rotulos e alvos de toque ficam do tamanho que estao. */
  .folha { padding-top: 1rem; padding-bottom: 1rem; }
  .busca-geral { margin-bottom: .75rem; }
  .colinha { gap: .55rem; }
  .rotulo { margin-bottom: .2rem; }
  /* No desktop o selo transborda o ultimo campo e o ar antes dos botoes
     (3,6 a 4rem) existe so para absorver esse transbordo. No celular esse ar
     custa mais do que vale: encostando o selo no PE do campo ele deixa de
     transbordar, e o respiro dos botoes volta ao 1,25rem do resto da folha.
     O vao a direita de um cargo de 2 digitos e permanente, entao ele continua
     no lugar da peca, sem chegar perto das caixas. */
  body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .campo > .selo {
    top: auto; bottom: 0;
  }
  body[data-tema="elton"] .campo > .selo { width: 5.9rem; }
  body[data-tema="tozi"] .campo > .selo { width: 5.6rem; }
  body[data-tema="dulce"] .campo > .selo { width: 5.2rem; }
  body:is([data-tema="elton"], [data-tema="tozi"], [data-tema="dulce"]) .acoes { margin-top: 1.25rem; }
  .rodape { margin-top: .8rem; }
  /* A faixa fecha a peca; no celular ela so precisa registrar a cor. */
  .faixa { height: calc(1.5rem + env(safe-area-inset-bottom)); }
}

@media print {
  body { background: #fff; padding: 0; font-size: 12pt; }
  .topo { background: #fff; color: #000; }
  .passos, .aviso, .acoes, .rodape, .carregando, .link, .busca-geral { display: none !important; }
  .marca { color: #000; }
  .campo { break-inside: avoid; }
  .digito { border: 1px solid #000; background: #fff; color: #000; }
  .digito.preenchido { background: #ddd; }
  .rotulo, .nome { color: #000 !important; }
}