/* Telas públicas de acesso (/acesso e /entrar/link). Dono: B1. Só ACRESCENTA ao base.css: a moldura (arte + coluna),
   campos, botões, avisos e o .link-texto vêm de lá; aqui ficam as etapas, o selo, as regras da senha e o esqueleto.
   Movimento: uma troca de etapa (opacidade + 6 px, 220 ms ease-out); o base.css zera tudo em prefers-reduced-motion. */

/* ---------- etapas (uma visível por vez) ---------- */
.etapa { animation: etapa-entra var(--t-medio) var(--ease-out); }
@keyframes etapa-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.etapa h1 { text-wrap: balance; }
/* o h1 recebe foco por script a cada troca de etapa (leitor de tela anuncia o novo estado); não é um controle, então
   não ganha moldura — no toque o Chrome casava :focus-visible e desenhava o anel dourado (lente C, P2-2) */
.etapa h1:focus, .etapa h1:focus-visible { outline: none; }
.etapa .tela-sub { max-width: 46ch; }
.etapa > .btn-bloco { margin-top: 4px; }

/* selo do estado (ícone Tabler num quadrado navy do PDF) */
.selo { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: var(--r-painel);
  color: var(--gold); background: linear-gradient(150deg, var(--navy2), var(--navy)); border: 1px solid rgba(77, 141, 255, .28);
  box-shadow: 0 10px 24px rgba(4, 10, 32, .55); }
.selo svg { width: 26px; height: 26px; }
.selo-alerta { color: #FFD6D6; background: linear-gradient(150deg, #3A1620, #22101A); border-color: var(--erro-borda); }
.selo-ok { color: var(--sobre-ouro); background: var(--green); border-color: transparent; }

/* ---------- /acesso: confirmação do envio ---------- */
.envio-texto { color: var(--text); font-size: 16px; line-height: 1.55; margin-bottom: 14px; max-width: 46ch; }
.dica { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 24px; max-width: 46ch; padding-top: 14px;
  border-top: 1px solid var(--line); }

/* "Já tenho senha → Entrar" */
.link-entrar { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); margin-top: 14px; color: var(--text-2);
  font-size: 14.5px; text-decoration: none; }
.link-entrar strong { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 196, 0, .55);
  text-underline-offset: 3px; transition: text-decoration-color var(--t-medio) ease; }
.link-entrar svg { width: 18px; height: 18px; color: var(--gold); transition: transform var(--t-rapido) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-entrar:hover strong { text-decoration-color: var(--gold); }
  .link-entrar:hover svg { transform: translateX(3px); }
}

/* ---------- /entrar/link: regras da senha ---------- */
.regras { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: -4px 0 22px; padding: 12px 14px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r-campo); }
.regras li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.3; color: var(--muted);
  transition: color var(--t-medio) ease; }
.regras svg { flex: none; width: 16px; height: 16px; }
.regras .regra-ok { display: none; }
.regras li[data-ok="true"] { color: #CFF5D9; }
.regras li[data-ok="true"] .regra-ok { display: block; color: var(--green); }
.regras li[data-ok="true"] .regra-falta { display: none; }
.regras.conferir li[data-ok="false"] { color: var(--erro); }
@media (max-width: 480px) { .regras { grid-template-columns: 1fr; gap: 7px; } }

/* ---------- carregando: texto + esqueleto no formato da etapa de senha ---------- */
.etapa-carregando { animation: aparece-tarde var(--t-medio) var(--ease-out) 250ms both; }
@keyframes aparece-tarde { from { opacity: 0; } to { opacity: 1; } }
.carregando-texto { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; margin-bottom: 22px; }
.giro-claro { display: inline-block; border-color: rgba(255, 255, 255, .18); border-top-color: var(--gold); }
.esqueleto { display: grid; gap: 12px; }
.esqueleto i { display: block; border-radius: var(--r-campo); background: rgba(255, 255, 255, .06);
  animation: pulsar 1.1s ease-in-out infinite alternate; }
.esq-titulo { height: 30px; width: 78%; }
.esq-linha { height: 16px; width: 92%; margin-bottom: 10px; }
.esq-campo { height: 48px; }
.esq-botao { height: 48px; margin-top: 8px; background: rgba(255, 196, 0, .14) !important; }
@keyframes pulsar { from { opacity: .55; } to { opacity: 1; } }

/* telas largas: a coluna do formulário respira um pouco mais */
@media (min-width: 900px) {
  .selo { margin-bottom: 24px; }
  .envio-texto { font-size: 17px; }
}