/* A tela de entrar da prévia (change previa-sq10-vidro, F2): os tokens e os botões vêm do
   styles.css do Vidro; aqui só a coluna, o campo do e-mail e as 6 caixas do código. */

.entrar {
  min-height: 100dvh; max-width: 400px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 48px) var(--pad) calc(env(safe-area-inset-bottom) + 32px);
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
/* A marca como no cabeçalho do app (.brand-mark): a águia num círculo com o tom do SQ10. */
.entrar-marca { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 16%, transparent); }
.entrar-marca img { width: 44px; height: 44px; object-fit: contain; }
[data-theme="dark"] .entrar-marca img { filter: brightness(0) invert(1); }

.entrar-passo { display: flex; flex-direction: column; gap: 14px; }
/* O .btn do Vidro é inline-flex e venceria o [hidden] do navegador. */
.entrar [hidden] { display: none !important; }
/* O título é o .lt do Vidro (styles.css): 44 px no computador e 34 px no celular. Aqui só a margem,
   porque a coluna já espaça os blocos. */
.entrar .lt { margin: 0; }
.entrar-lead { margin: 0 0 8px; color: var(--label-2); }
.entrar-lead b { color: var(--label); font-weight: 600; overflow-wrap: anywhere; }
.entrar-passo form { display: flex; flex-direction: column; gap: 14px; }

.entrar-campo {
  width: 100%; height: 54px; padding: 0 18px; border: 0; border-radius: var(--r-sm);
  background: var(--fill); color: var(--label); font: inherit; outline: none;
  transition: box-shadow .2s var(--ease-out);
}
.entrar-campo::placeholder { color: var(--label-3); }
.entrar-campo:focus { box-shadow: 0 0 0 2px var(--tint); }

.entrar-caixas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.entrar-caixa {
  width: 100%; min-width: 0; height: 60px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: var(--fill); color: var(--label); text-align: center;
  font-size: 28px; font-weight: 700; outline: none; caret-color: var(--tint);
  transition: box-shadow .2s var(--ease-out);
}
.entrar-caixa:focus { box-shadow: 0 0 0 2px var(--tint); }
.entrar-caixas[aria-invalid="true"] .entrar-caixa { box-shadow: 0 0 0 2px var(--err); }

.entrar-erro { margin: 0; color: var(--err-ink); font-size: 15px; }
[data-theme="dark"] .entrar-erro { color: var(--err); }
.entrar-aviso { margin: 0; padding: 12px 16px; border-radius: var(--r-sm); background: var(--fill); color: var(--label); font-size: 15px; }

.entrar-acoes { display: flex; justify-content: space-between; }
.entrar-espera { margin-left: 6px; color: var(--label-3); font-weight: 500; }
.btn-plain[disabled] { color: var(--label-3); cursor: default; }
.entrar-suporte { align-self: center; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }