@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/montserrat-800.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/montserrat-900.woff2') format('woff2'); }

:root {
  --navy: #000146; --navy-2: #010641; --azul: #0A4FB5; --azul-borda: #142E8B; --digito: #02217B;
  --verde: #6DB03C; --verde-claro: #7ED833; --whats: #25D366; --whats-escuro: #1DA851;
  --fundo: #F2F5FB; --card: #ffffff; --texto: #10203f; --mudo: #5f6b85; --linha: #dfe5f0; --alerta: #b45309; --alerta-bg: #fff7e6;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); line-height: 1.4; }
img { max-width: 100%; }

.topo { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 60%, #04072e 100%); color: #fff; text-align: center; padding: 22px 16px 26px; }
.topo .logo { width: min(320px, 78vw); height: auto; display: block; margin: 0 auto 14px; }
.topo h1 { margin: 0; font-family: Montserrat, var(--fonte); font-weight: 900; font-size: clamp(24px, 6vw, 32px); letter-spacing: .5px; text-transform: uppercase; }
.topo .sub { margin: 8px auto 0; max-width: 520px; color: #c9d3ff; font-size: 15px; }

.conteudo { max-width: 560px; margin: 0 auto; padding: 16px 16px 8px; }

.cargo { background: var(--card); border-radius: 16px; box-shadow: 0 4px 18px rgba(0, 20, 80, .08); padding: 14px 14px 12px; margin-bottom: 14px; }
.faixa { display: block; border-radius: 999px; padding: 8px 14px; color: #fff; text-align: center; font-family: Montserrat, var(--fonte); font-weight: 800; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; }
.faixa.azul { background: var(--azul); } .faixa.verde { background: var(--verde); }

.caixas { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px 0 10px; }
.dig { width: 50px; height: 62px; border: 3px solid var(--azul-borda); border-radius: 12px; background: #fff; color: var(--digito); font-family: Montserrat, var(--fonte); font-weight: 900; font-size: 30px; text-align: center; padding: 0; margin: 0; -moz-appearance: textfield; caret-color: var(--azul); }
.dig::-webkit-outer-spin-button, .dig::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dig:focus { outline: none; border-color: var(--verde-claro); box-shadow: 0 0 0 4px rgba(126, 216, 51, .28); }
span.dig.fixo { display: inline-flex; align-items: center; justify-content: center; background: #EEF3FF; border-color: #b9c6ea; }
.limpar { flex: 0 0 auto; margin-left: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eef1f7; color: var(--mudo); font-size: 22px; line-height: 1; cursor: pointer; }
.limpar:active { background: #dfe5f0; }
@media (max-width: 380px) { .caixas { gap: 6px; } .dig { width: 44px; height: 56px; font-size: 26px; } .limpar { width: 28px; height: 28px; font-size: 20px; } }

.quem { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 8px 10px; border-radius: 12px; background: #f6f8fd; border: 1px solid var(--linha); }
.quem .foto { width: 46px; height: 64px; object-fit: cover; border-radius: 8px; background: #e7ecf7; flex: 0 0 auto; }
.quem .nome { font-family: Montserrat, var(--fonte); font-weight: 800; font-size: 15px; color: var(--digito); line-height: 1.25; }
.quem .partido { font-size: 13px; color: var(--mudo); margin-top: 2px; }
.quem.vazio .nome, .quem.parcial .nome, .quem.sem_dados .nome { color: var(--mudo); font-weight: 700; }
.quem.nao_achou { background: var(--alerta-bg); border-color: #f5d9a8; }
.quem.nao_achou .nome { color: var(--alerta); }
.quem.achou { background: #f0fbe8; border-color: #cfeab6; }

.previa { background: var(--card); border-radius: 16px; box-shadow: 0 4px 18px rgba(0, 20, 80, .08); padding: 14px; margin: 18px 0 8px; text-align: center; }
.previa h2 { margin: 0 0 10px; font-family: Montserrat, var(--fonte); font-weight: 800; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--digito); }
#previa-img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linha); background: #fff; aspect-ratio: 1080 / 1480; }
.dica { font-size: 13px; color: var(--mudo); margin: 10px 0 0; }

.acoes { position: sticky; bottom: 0; z-index: 5; background: rgba(242, 245, 251, .96); backdrop-filter: blur(6px); border-top: 1px solid var(--linha); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: grid; gap: 8px; max-width: 560px; margin: 0 auto; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 0; border-radius: 14px; padding: 15px 16px; font-family: Montserrat, var(--fonte); font-weight: 800; font-size: 16px; color: #fff; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.btn:active { transform: translateY(1px); }
.btn.whats { background: var(--whats); } .btn.whats:active { background: var(--whats-escuro); }
.btn.salvar { background: var(--navy); }
.link { background: none; border: 0; color: var(--azul); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 4px; font-family: var(--fonte); }

.rodape { max-width: 560px; margin: 0 auto; padding: 14px 16px 30px; text-align: center; font-size: 12px; color: var(--mudo); }
.rodape a { color: var(--azul); }

#toast { position: fixed; left: 50%; bottom: 150px; transform: translate(-50%, 20px); max-width: min(92vw, 520px); background: #10203f; color: #fff; padding: 12px 16px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; word-break: break-word; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }