/* compartilhado/otp-input.css
   Visual das seis caixinhas. Usa as variáveis de cor de quem incluir o arquivo
   (--primary no admin e no CRM, --azul no site), com um valor de reserva para
   quando nenhuma existir. */

.otp-campo {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.otp-caixa {
  width: 44px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;      /* larguras iguais: o campo não "pula" ao digitar */
  color: var(--text, #111827);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.otp-caixa:focus {
  border-color: var(--primary, var(--azul, #2563eb));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, var(--azul, #2563eb)) 22%, transparent);
}

.otp-caixa:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Erro pinta as seis, não uma: o código está errado como um todo, e destacar
   uma caixa sugeriria que o problema é naquele dígito. */
.otp-campo--erro .otp-caixa {
  border-color: var(--danger, #dc2626);
}

@media (max-width: 400px) {
  .otp-campo { gap: 6px; }
  .otp-caixa { width: 38px; height: 46px; font-size: 19px; }
}