/* Telas de acesso (public/entrar.html): página grafite, um cartão claro no centro com a tela de pontos do nome do
   app em cima e o formulário embaixo. Tokens e componentes do docs/padrao-visual.md (estilo.css + abas.css). */
.en-body { min-height: 100vh; min-height: 100dvh; margin: 0; display: block; background: var(--pagina); color: var(--pagina-texto); font: 14px/1.5 var(--font-sans); }
.en-pagina { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-4); padding: var(--esp-6) var(--esp-4); }
.en-cartao { width: min(460px, 100%); }
.en-cartao.largo { width: min(640px, 100%); }
.en-lcd { padding: var(--esp-4) var(--esp-4) var(--esp-3); }
.en-corpo { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-2) var(--esp-2) var(--esp-2); color: var(--texto); }
.en-cabeca { display: flex; flex-direction: column; gap: var(--esp-1); }
.en-titulo { margin: 0; font: 600 var(--titulo, 22px)/1.1 var(--font-display); letter-spacing: -.03em; }
.en-texto { margin: 0; font-size: 13px; color: var(--texto-2); }
.en-carregando { margin: var(--esp-3) 0; color: var(--suave); }
.en-form { display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-3); padding: 0; border-top: 0; background: none; } /* o estilo.css tem regras globais de form (caixa da conversa) */
.en-form .ab-campo input { height: var(--ctl, 36px); box-sizing: border-box; }
.en-form .ab-campo input.en-codigo { font-family: var(--font-mono); letter-spacing: .3em; font-size: 16px; }
.en-acoes { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; margin-top: var(--esp-1); }
.en-corpo button:not(.en-link) { height: var(--ctl, 36px); padding: 0 14px; border-radius: var(--raio-ctl, 12px); } /* botões do app: 36px, como em toda a aplicação */
.en-acoes .primario { min-width: 120px; }
.en-link { background: none; border: 0; padding: 0; height: auto; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: 13px var(--font-sans); }
.en-link:hover { color: var(--texto); }
.en-acoes .en-link { margin-left: auto; }
.en-erro { display: none; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-ctl, 12px); background: var(--erro-fundo); color: var(--erro-texto, #7a1d16); font-size: 13px; }
.en-erro.vis { display: block; }
.en-ok { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-ctl, 12px); background: var(--sup-2); font-size: 13px; color: var(--texto-2); }
.en-dica { font-size: 12px; color: var(--suave); }
/* campo isca (honeypot): fora da tela para gente, preenchido só por robô */
.en-isca { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* autenticador: QR + chave manual */
.en-totp { display: flex; gap: var(--esp-4); align-items: flex-start; padding: var(--esp-3); border-radius: var(--raio-tela, 18px); background: var(--sup-2); }
.en-qr { flex: none; width: 168px; height: 168px; border-radius: var(--raio-ctl, 12px); background: #fff; display: grid; place-items: center; overflow: hidden; }
.en-qr svg { width: 100%; height: 100%; display: block; }
.en-qr .en-dica { padding: var(--esp-2); text-align: center; }
.en-totp-txt { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; font-size: 13px; color: var(--texto-2); }
.en-totp-txt ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--esp-1); }
.en-chave { font: 600 13px var(--font-mono); letter-spacing: .08em; word-break: break-all; background: var(--branco, #fff); border: 1px solid var(--borda-ctl); border-radius: 10px; padding: 6px 10px; color: var(--texto); }

/* códigos de recuperação */
.en-codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-1) var(--esp-3); margin: 0; padding: var(--esp-3); list-style: none; border-radius: var(--raio-tela, 18px); background: var(--lcd); color: var(--lcd-texto, #f2f2f0); font: 600 14px var(--font-mono); letter-spacing: .08em; }
.en-confirma { display: flex; gap: var(--esp-2); align-items: center; font-size: 13px; color: var(--texto-2); }
.en-confirma input { width: 16px; height: 16px; accent-color: var(--primaria); }
.en-rodape { margin: 0; font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pagina-suave); }
.en-rodape b { color: var(--brilho); }

@media (max-width: 560px) {
  .en-totp { flex-direction: column; align-items: center; }
  .en-codigos { grid-template-columns: minmax(0, 1fr); }
}
/* celular (D58): menos margem em volta do cartão; as ações quebram com o link embaixo do botão */
@media (max-width: 420px) {
  .en-pagina { padding: var(--esp-4) var(--esp-3); }
  .en-acoes .en-link { margin-left: 0; }
}