/* Campo de código de verificação (OTP) — pequeno e centralizado, padronizado em TODAS as
   telas de verificação: login 2FA (admin/cliente/parceiro), verificação de e-mail no
   onboarding e confirmação de ordem (RF + Fundos). Alveja o atributo data-format
   compartilhado, então vale para qualquer classe de input sem alterar o markup.
   Segue a mesma linha do campo do step de "Valor" (menor e centralizado). QA UX-J. */
/* Especificidade .form-input[...] (0,2,0) para vencer .form-input.form-input-focus-left
   do auth.css; todas as 5 telas têm a classe form-input no input de código. */
.form-input[data-format="verification-code"] {
  max-width: 14rem;
  margin-inline: auto;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.form-input[data-format="verification-code"]::placeholder {
  letter-spacing: 0.4rem;
  font-weight: 400;
}

/* Centraliza o grupo inteiro (rótulo + campo + dica) nas telas que usam .form-group
   (login 2FA e confirmação de ordem). */
.form-group:has(input[data-format="verification-code"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.form-group:has(input[data-format="verification-code"]) .field-header,
.form-group:has(input[data-format="verification-code"]) .field-header-main {
  justify-content: center;
}

/* Onboarding: a verificação de e-mail usa .email-verification-code-wrap em vez de .form-group. */
.email-verification-code-wrap {
  text-align: center;
}
.email-verification-code-wrap input[data-format="verification-code"] {
  display: block;
}