/* ─── Componentes do formulário ───────────────────────────────────────────
   Raio 10px, campo preenchido, sombra discreta. Tudo aqui existe para o
   campo ser óbvio de achar e o erro, óbvio de resolver.
   ------------------------------------------------------------------------ */

/* ══ Campo ═════════════════════════════════════════════════════════════ */

.campo { display: grid; gap: var(--e-2); }

.campo__rotulo {
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: 0.005em;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.obrig {
  color: var(--makro-deep);
  text-decoration: none;
  font-weight: 600;
}

.opcional {
  font-weight: 400;
  font-size: var(--t-12);
  color: var(--ink-soft);
  background: var(--campo-fundo);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 1px var(--e-2);
}

.campo__ajuda {
  font-size: var(--t-13);
  color: var(--ink-soft);
  order: 3;
}

.campo__erro {
  order: 4;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--makro-deep);
  display: none;
}

.campo__erro:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
}

.campo__erro:not(:empty)::before {
  font-family: bootstrap-icons;
  content: "\F33A";           /* bi-exclamation-circle */
  line-height: 1.4;
  flex: none;
}

/* ── Entrada ──────────────────────────────────────────────────────────── */

.entrada {
  order: 2;
  width: 100%;
  min-height: var(--alvo);
  padding: var(--e-3) var(--e-4);
  background: var(--campo-fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-campo);
  font-size: var(--t-16);       /* 16px evita o zoom automático do iOS */
  transition: border-color var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva);
}

.entrada::placeholder { color: var(--ink-fraco); }

.entrada:hover { border-color: var(--ink-fraco); }

.entrada:focus {
  background: var(--paper);
  border-color: var(--ink);
  outline: none;
}
.entrada:focus-visible {
  outline: 3px solid var(--makro);
  outline-offset: 2px;
}

.entrada[aria-invalid="true"] {
  border-color: var(--makro);
  background: var(--makro-veu);
}

.entrada--combo  { padding-right: var(--e-10); }
.entrada--segredo { padding-right: calc(var(--alvo) + var(--e-2)); }

/* ══ Combobox de município ═════════════════════════════════════════════ */

.combo {
  order: 2;
  position: relative;
}

.combo__seta {
  position: absolute;
  right: var(--e-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
  transition: transform var(--rapido) var(--curva);
}

.combo:has([aria-expanded="true"]) .combo__seta {
  transform: translateY(-50%) rotate(180deg);
}

.combo__lista {
  position: absolute;
  z-index: var(--z-lista);
  inset-inline: 0;
  top: calc(100% + var(--e-2));
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lista);
  padding: var(--e-1);
}

.combo__opcao {
  min-height: var(--alvo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  font-size: var(--t-14);
}

.combo__opcao[aria-selected="true"],
.combo__opcao:hover {
  background: var(--campo-fundo);
}

.combo__opcao[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--makro);
}

.combo__opcao b {
  font-weight: 600;
  color: var(--makro-deep);
}

.combo__uf {
  flex: none;
  font-family: var(--face-num);
  font-size: var(--t-12);
  color: var(--ink-soft);
  background: var(--campo-fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  padding: 0 var(--e-2);
}

.combo__opcao[aria-selected="true"] .combo__uf,
.combo__opcao:hover .combo__uf { background: var(--paper); }

.combo__aviso {
  padding: var(--e-3);
  font-size: var(--t-13);
  color: var(--ink-soft);
}

/* ══ Grupo de checkboxes ═══════════════════════════════════════════════ */

.grupo { display: grid; gap: var(--e-2); }

.grupo__legenda {
  font-size: var(--t-14);
  font-weight: 600;
  padding: 0;
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

.opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo-fundo);
  cursor: pointer;
  font-size: var(--t-14);
  font-weight: 500;
  transition: border-color var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva);
}

.opcao:hover { border-color: var(--ink-fraco); }

/* Escondido de verdade, mas ainda focável pelo teclado. Não usar opacity:0
   com 1px: o input continua sendo alvo de clique e rouba o toque do rótulo.
   O link dos termos fica dentro deste label - por isso o input não pode
   cobrir a área do rótulo. */
.opcao input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.opcao__marca {
  flex: none;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink-fraco);
  border-radius: var(--raio-pequeno);
  background: var(--paper);
  color: var(--paper);
  font-size: var(--t-13);
  transition: background-color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva);
}

.opcao__marca .bi {
  opacity: 0;
  transition: opacity var(--rapido) var(--curva);
}

.opcao__icone { color: var(--ink-soft); }

.opcao input:checked ~ .opcao__marca {
  background: var(--makro);
  border-color: var(--makro);
}
.opcao input:checked ~ .opcao__marca .bi { opacity: 1; }

/* Marcado é fundo branco com borda de tinta - nunca o véu vermelho, que é
   a cor de erro. Antes disso, "termos aceitos" ficava idêntico a
   "termos faltando". */
.opcao:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper);
}
.opcao:has(input:checked) .opcao__icone { color: var(--ink); }

.opcao:has(input:focus-visible) {
  outline: 3px solid var(--makro);
  outline-offset: 2px;
}

.opcao--larga {
  width: 100%;
  align-items: flex-start;
  padding: var(--e-3);
  font-weight: 400;
  line-height: 1.5;
}
.opcao--larga .opcao__marca { margin-top: 2px; }

.campo--termos { gap: var(--e-2); }

/* ══ Senha ═════════════════════════════════════════════════════════════ */

.segredo {
  order: 2;
  position: relative;
}

.olho {
  position: absolute;
  right: var(--e-1);
  top: 50%;
  transform: translateY(-50%);
  width: var(--alvo);
  height: var(--alvo);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--t-18);
}

.olho:hover { color: var(--ink); }
.olho[aria-pressed="true"] { color: var(--makro-deep); }

.requisitos {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  font-size: var(--t-13);
  color: var(--ink-soft);
}

.requisitos li {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.requisitos .bi { font-size: var(--t-12); }

/* Cumprido: cor + ícone trocado - nunca só a cor */
.requisitos li[data-ok] { color: var(--seal); }

/* ══ Botões ════════════════════════════════════════════════════════════ */

.botao {
  min-height: var(--alvo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-6);
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-size: var(--t-15);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background-color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}

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

.botao--principal {
  background: var(--makro);
  color: var(--paper);
  box-shadow: var(--sombra-botao);
}
.botao--principal:hover { background: var(--makro-escuro); }

.botao--fantasma {
  background: var(--paper);
  border-color: var(--linha);
  color: var(--ink-soft);
}
.botao--fantasma:hover {
  border-color: var(--ink-fraco);
  color: var(--ink);
}

.botao[disabled],
.botao[aria-busy="true"] {
  opacity: 0.5;
  cursor: progress;
  transform: none;
}

.botao[aria-busy="true"] .bi::before {
  content: "\F130";           /* bi-arrow-repeat */
  display: inline-block;
  animation: girar 900ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ══ Resumo de erros ═══════════════════════════════════════════════════ */

.resumo-erros {
  margin-top: var(--e-5);
  padding: var(--e-3) var(--e-4);
  background: var(--makro-veu);
  border: 1px solid var(--makro);
  border-radius: var(--raio);
  color: var(--makro-deep);
  font-size: var(--t-14);
  font-weight: 500;
}

.resumo-erros[hidden] { display: none; }

/* ══ Atalho de ajuda no WhatsApp ═══════════════════════════════════════ */

.zap {
  position: fixed;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: var(--z-zap);
  min-height: var(--alvo);
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  border-radius: 999px;
  background: var(--zap);
  color: var(--paper);
  font-size: var(--t-14);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sombra-zap);
  transition: background-color var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}

.zap:hover {
  background: var(--zap-escuro);
  color: var(--paper);
  transform: translateY(-2px);
}

.zap:active { transform: none; }

.zap .bi { font-size: var(--t-22); line-height: 1; }

/* Encosta no rodapé fixo do teclado em telas curtas e some do caminho do
   botão principal: no celular vira só o ícone. */
@media (max-width: 640px) {
  .zap {
    right: var(--e-4);
    bottom: var(--e-4);
    width: 52px;
    padding: 0;
    justify-content: center;
  }
  .zap__texto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ══ Celular ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .opcoes { display: grid; grid-template-columns: 1fr; }
  .opcao { width: 100%; }
  .acoes .botao { flex: 1; padding-inline: var(--e-4); }
  .requisitos { gap: var(--e-1) var(--e-3); }
}

/* ══ Sucesso ═══════════════════════════════════════════════════════════
   Fica no fim do arquivo de propósito: nenhuma regra acima o alcança, e
   as poucas variações de celular que ele precisa vêm logo abaixo dele. */

.sucesso {
  display: grid;
  justify-items: start;
  gap: var(--e-5);
  animation: sucesso-entra var(--normal) var(--curva) both;
}

.sucesso:focus { outline: none; }

.sucesso__selo {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--seal-veu);
  color: var(--seal);
  font-size: var(--t-30);
  line-height: 1;
}

.sucesso__titulo {
  font-family: var(--face-display);
  font-weight: 800;
  font-size: var(--t-30);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.sucesso__texto {
  margin-top: calc(var(--e-5) * -1 + var(--e-2));
  color: var(--ink-soft);
  font-size: var(--t-16);
  line-height: 1.6;
}

.sucesso__texto strong {
  color: var(--ink);
  font-weight: 600;
  word-break: break-word;
}

.sucesso__passos {
  display: grid;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo-fundo);
  list-style: none;
  counter-reset: etapa;
  font-size: var(--t-14);
}

.sucesso__passos li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.sucesso__passos i {
  color: var(--seal);
  font-size: var(--t-18);
  flex: none;
}

.sucesso__acao { text-decoration: none; }

@keyframes sucesso-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .sucesso__acao { width: 100%; justify-content: center; }
}