/* 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; }

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

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 -------------------------------------------------------------- */

/* link de volta — pill discreto no topo, so quando embutida num site */
.topo-volta { max-width: 26rem; margin: 0 auto .7rem; }
.volta {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-weight: 600; font-size: .78rem; letter-spacing: .02em;
  padding: .38rem .9rem .38rem .7rem; 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; }
.volta:hover, .volta:focus-visible { background: var(--limao); color: var(--marinho); }
@media (prefers-reduced-motion: reduce) { .volta { transition: none; } }

.topo {
  background: var(--marinho);
  color: #fff;
  padding: 1rem .9rem 1.05rem;
  /* Fitas de chevron do pattern do manual (ID 26 ELTON, pag. 21): filas
     coladas alternando um tom mais claro e um mais escuro que o fundo, e um
     brilho ciano diagonal entrando pela esquerda, como na arte da peca. */
  background-image:
    linear-gradient(104deg, rgba(64, 170, 214, .38), rgba(64, 170, 214, 0) 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Crect width='64' height='36' fill='%2313284a'/%3E%3Cpath d='M0 0 L32 15 L64 0 L64 18 L32 33 L0 18 Z' fill='%2317335f'/%3E%3Cpath d='M0 18 L32 33 L64 18 L64 36 L32 51 L0 36 Z M0 -18 L32 -3 L64 -18 L64 0 L32 15 L0 0 Z' fill='%230e1f3a'/%3E%3C/svg%3E");
  background-size: auto, 2.7rem 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 pincel lima da peca corta por baixo do fim de "VOTAR", nao ao lado. */
.visto-marca {
  width: 1.8rem; height: auto; color: var(--lima); flex: none;
  align-self: flex-end; margin: 0 0 -.55rem -1.9rem;
}

.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);
}
.passos li::before {
  content: counter(p);
  display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; margin-top: .12rem;
  border-radius: 50%;
  background: #b6d6ed; color: var(--marinho);
  font-size: .68rem; font-weight: 700; line-height: 1;
}

/* A tecla da urna, destacada como na peca impressa. */
.tecla {
  background: var(--lima); color: var(--marinho);
  padding: 0 .25rem; border-radius: 3px;
  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;
}

/* No Dr. Elton o selo e o botton oficial do manual, uma imagem: o circulo,
   os chevrons e o Gunterz inclinado do 4412 ja vem prontos de la. */
body[data-tema="elton"] .selo {
  background: none; border: 0; padding: 0; transform: none;
  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 de chevrons que fecha a peca impressa — mesmo pattern do topo,
   nos verdes medidos na arte */
.faixa {
  flex: none; height: calc(2.5rem + env(safe-area-inset-bottom));
  background-color: #97c53f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Crect width='64' height='36' fill='%2397c53f'/%3E%3Cpath d='M0 0 L32 15 L64 0 L64 18 L32 33 L0 18 Z' fill='%23a6cf45'/%3E%3Cpath d='M0 18 L32 33 L64 18 L64 36 L32 51 L0 36 Z M0 -18 L32 -3 L64 -18 L64 0 L32 15 L0 0 Z' fill='%238dbd35'/%3E%3C/svg%3E");
  background-size: 2.4rem 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: .5rem .7rem;
  background: var(--surface); border: 1px solid var(--linha);
  border-radius: var(--raio); font-size: .78rem; color: var(--mut);
}

.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;
}
/* O visto e um item flex depois da ultima caixa; num cargo de 5 digitos nao
   sobra largura e ele sai da tela. Com o Dr. Elton isso so acontece enquanto
   o eleitor digita o estadual, mas quando o cargo travado tem 5 digitos
   (Tozi, Dulce — deputado estadual) o campo fica permanentemente sem o visto
   e a pagina rola de lado. Ai a goteira do visto entra na conta das caixas,
   igual para todos os cargos daquela pagina. */
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); }

/* O visto em contorno da peca, depois do numero travado do Dr. Elton: ocupa
   o vao da 5a caixa que o cargo de 4 digitos deixa livre. */
.tique {
  flex: none; align-self: center;
  width: calc(var(--cx) * 1.04); height: auto;
  margin-left: .1rem;
  fill: #fdfdf8; stroke: var(--lima); stroke-width: 3.4; stroke-linejoin: round;
  transform: rotate(-7deg);
  filter: drop-shadow(0 1px 2px rgba(19, 40, 74, .2));
}

.digito {
  font-family: var(--titulo);
  width: var(--cx); aspect-ratio: 1; flex: none;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(19, 40, 74, .06);
  font-size: 2.35rem; font-weight: 900; line-height: 1;
  color: var(--marinho);
  transition: background-color .12s ease, border-color .12s ease;
}
/* Os numerais da peca do Dr. Elton sao o Gunterz Bold Italic do manual —
   inclinados. Sem o arquivo da fonte, a Geometos itálica e o mais perto. */
body[data-tema="elton"] .digito { font-style: italic; }
.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; }

.rodape {
  margin: 1.25rem 0 0; text-align: center;
  font-size: .7rem; color: var(--mut);
}

/* 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);
}
/* 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; }
body[data-tema="tozi"] .selo-numero,
body[data-tema="tozi"] .digito { font-style: italic; }
/* 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. */
@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; }
}
body[data-tema="elton"] .visto-marca { width: 1.5rem; margin-left: -1.55rem; }
/* 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. */
body[data-tema="tozi"] .passos {
  flex: 1; min-width: 0; padding-right: 6rem; font-size: .8rem;
}
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;
}
body[data-tema="tozi"] .folha::before {
  content: "";
  position: absolute; z-index: 1; pointer-events: none;
  right: .3rem; top: -4.9rem;
  width: 5.6rem; height: 8.8rem;
  background: url("marca/rosto.svg") center/contain 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;
}
/* Na arte do Dr. Elton o botton e maior e desce um pouco mais na faixa. */
body[data-tema="elton"] .campo > .selo { width: 7.5rem; top: -.1rem; }
/* 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;
}
/* 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[data-tema="elton"] .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. */
body:is([data-tema="tozi"], [data-tema="dulce"]) .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: paleta do site-dulcerita (identidade 2026) sobre o layout do
   verso do santinho 7x10 dela. A peça é conjunta com o Dr. Elton: o campo
   travado dela também sai verde, como os demais — a marca fica no petróleo
   do topo, no selo navy com número mint e no padrão de pessoinhas. */
body[data-tema="dulce"] {
  --marinho: #094b68; --marinho-2: #0a6089; --limao: #84bf41; --lima: #84bf41;
  --limao-esc: #1f7a68; --bg: #e3e4e3; --bg-2: #d9e2df;
  --txt: #10333f; --rot: #48626e; --mut: #48626e;
  --linha: #c8cac8; --marca: #094b68; --acento: #0a6089;
  --cx-travado: #84bf41; --cx-travado-txt: #10333f;
  --display: "Avenir LT Std", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Geometos Neue", "Geometos", var(--display);
}
/* O padrão de pessoinhas de mãos dadas, textura do topo e do rodapé. */
body[data-tema="dulce"] .topo {
  background-image: url("marca/pessoinhas.svg");
  background-size: 3.4rem auto;
  padding-bottom: 1.4rem;
}
body[data-tema="dulce"] .passos { flex: 1; min-width: 0; font-size: .8rem; }
body[data-tema="dulce"] .passos li::before { background: #5ac2ad; color: #0f2d3d; }
body[data-tema="dulce"] .tecla { background: #b9d13d; color: #0f2d3d; }
/* Selo navy chapado com número mint, sem anel — como no santinho. */
body[data-tema="dulce"] .selo { background: #174156; border-color: transparent; }
body[data-tema="dulce"] .selo-numero { color: #5ac2ad; font-style: italic; }
body[data-tema="dulce"] .rodape {
  background: var(--marinho) url("marca/pessoinhas.svg") 0 0/3.4rem auto;
}

/* --- 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; }
}

@media print {
  body { background: #fff; padding: 0; font-size: 12pt; }
  .topo { background: #fff; color: #000; }
  .passos, .aviso, .acoes, .rodape, .carregando, .link { 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; }
}