:root {
  --verde-medio: #056333;
  --verde-claro: #009d48;
  --verde-escuro: #004923;
  --amarelo: #ffcb05;
  --azul: #1e398d;
  --vermelho: #da2128;
  --branco: #ffffff;
  --papel: #fdfdfb;
  --tinta: #16261d;
  --borda: #d8ddd6;
  --cinza: #eef0ec;

  --largura: 420px;
  --raio-cartao: 20px;
  --raio-casa: 7px;

  /* De 0px (tela baixa) a 1px (tela alta): o layout cresce até onde cabe sem rolar. */
  --f: 0px;
}

@supports (height: 100svh) {
  :root { --f: clamp(0px, calc((100svh - 600px) / 200), 1px); }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  /* No Safari do iPhone, 100vh ignora as barras do navegador e força rolagem. */
  min-height: 100svh;
  font-family: "Encode Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--branco);
  background-color: var(--verde-medio);
  background-image: repeating-conic-gradient(
    from 0deg at 50% -10%,
    rgba(0, 0, 0, 0.15) 0deg 2.2deg,
    rgba(0, 0, 0, 0) 2.2deg 7deg
  );
  background-attachment: fixed;
}

.pagina {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding-inline: 14px;
  padding-block: calc(14px + 4 * var(--f)) calc(18px + 2 * var(--f));
}

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

.topo { margin-bottom: 2px; }

.topo__logo {
  display: block;
  width: min(calc(140px + 50 * var(--f)), 60%);
  height: auto;
  margin: 0 auto calc(12px + 8 * var(--f));
}

/* ---------- seletor de aparelho ---------- */

.aparelho { display: flex; justify-content: center; gap: 8px; margin-bottom: calc(10px + 4 * var(--f)); }

.aparelho__opcao {
  flex: 0 1 150px;
  padding: calc(4px + 2 * var(--f)) 12px;
  font: inherit;
  font-weight: 600;
  font-size: calc(0.76rem + 0.8 * var(--f));
  color: var(--branco);
  background: rgba(0, 0, 0, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.aparelho__opcao[aria-pressed="true"] {
  color: var(--verde-escuro);
  background: var(--amarelo);
  border-color: var(--amarelo);
}

/* ---------- avisos ---------- */

.aviso {
  margin: 0 0 14px;
  padding: 11px 13px;
  font-size: 0.82rem;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid var(--amarelo);
  border-radius: 6px;
}

/* ---------- cartão ---------- */

.cartao {
  padding: 6px;
  background: var(--amarelo);
  border-radius: var(--raio-cartao);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.cartao__papel {
  padding: calc(8px + 6 * var(--f)) 10px;
  background: var(--papel);
  border-radius: 14px;
  color: var(--tinta);
}

/* ---------- linhas de candidato ---------- */

.linhas { margin: 0; padding: 0; list-style: none; }

.linha {
  display: flex;
  align-items: center;
  gap: calc(8px + 2 * var(--f));
  padding: calc(4px + 2 * var(--f)) 6px;
  border-radius: 10px;
  transition: background-color 120ms ease;
}

.linha + .linha { border-top: 1px solid var(--cinza); }

.linha--travada { background: rgba(0, 157, 72, 0.11); }

.linha__foto {
  flex: 0 0 auto;
  width: calc(38px + 10 * var(--f));
  height: calc(48px + 14 * var(--f));
  overflow: hidden;
  background: var(--cinza);
  border-radius: 7px;
}

.linha__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.linha__foto svg { display: block; width: 100%; height: 100%; color: rgba(22, 38, 29, 0.22); }

.linha__texto { flex: 1 1 auto; min-width: 0; }

.linha__cargo {
  margin: 0;
  font-family: "Encode Sans Semi Expanded", sans-serif;
  font-weight: 700;
  font-size: 0.57rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(22, 38, 29, 0.55);
}

.linha__nome {
  margin: 2px 0 0;
  font-weight: 600;
  font-size: min(0.82rem, 3.6vw);
  line-height: 1.22;
}

.linha__dica { margin: 2px 0 0; font-size: 0.74rem; color: rgba(22, 38, 29, 0.45); }

.linha__erro { margin: 2px 0 0; font-size: 0.74rem; font-weight: 600; color: var(--vermelho); }

/* ---------- casinhas de dígito (o visual da urna) ---------- */

.casas { position: relative; flex: 0 0 auto; padding-block: 6px; }

.casas__campo {
  position: absolute;
  inset: -6px 0;
  width: 100%;
  height: calc(100% + 12px);
  opacity: 0;
  cursor: text;
  z-index: 2;
  font-size: 16px; /* evita zoom automático no iOS */
}

.casas__fila { display: flex; gap: 3px; }

.casa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(24px + 4 * var(--f));
  height: calc(32px + 6 * var(--f));
  font-family: "Encode Sans Semi Expanded", sans-serif;
  font-weight: 800;
  font-size: calc(1rem + 3 * var(--f));
  color: rgba(22, 38, 29, 0.3);
  background: var(--cinza);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-casa);
  transition: background-color 110ms ease, border-color 110ms ease, color 110ms ease;
}

.casa--cheia {
  color: var(--amarelo);
  background: var(--verde-escuro);
  border-color: var(--verde-escuro);
}

.casa--travada {
  color: var(--amarelo);
  background: var(--verde-medio);
  border-color: var(--verde-medio);
}

.casa--foco { border-color: var(--azul); box-shadow: 0 0 0 2px rgba(30, 57, 141, 0.28); }

.cursor { animation: piscar 1s steps(2, start) infinite; color: var(--azul); }

@keyframes piscar { to { opacity: 0; } }

/* ---------- ações ---------- */

.acao {
  display: block;
  width: 100%;
  margin-top: calc(10px + 6 * var(--f));
  padding: calc(13px + 4 * var(--f)) 20px;
  font-family: "Encode Sans Semi Expanded", sans-serif;
  font-weight: 800;
  font-size: calc(1.02rem + 1 * var(--f));
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--verde-escuro);
  background: var(--amarelo);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 100ms ease, opacity 120ms ease;
}

.acao[hidden] { display: none; }

.acao:active { transform: scale(0.985); }

.acao:disabled { opacity: 0.55; cursor: default; }

.acao--secundaria {
  color: var(--branco);
  background: rgba(0, 0, 0, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
}

.acao--whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--branco);
  background: #25d366;
}

.acao__icone {
  width: calc(1.15rem + 1 * var(--f));
  height: calc(1.15rem + 1 * var(--f));
  flex: none;
}

/* ---------- resultado ---------- */

.resultado { margin: 0 0 4px; }

.resultado img { display: block; width: 100%; border-radius: var(--raio-cartao); }

.resultado figcaption {
  margin-top: 9px;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- acessibilidade ---------- */

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

.cartao__papel :focus-visible { outline-color: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- rodape legal ---------- */
.rodape {
  max-width: var(--largura);
  margin: calc(12px + 4 * var(--f)) auto 0;
  padding: 0 6px;
  font-size: calc(0.62rem + 0.4 * var(--f));
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
}