/* Verificação em duas etapas — a tela do código (01/10/2026).
   Mesma linguagem do monohub, nas cores do PCCS: azul #4581bf + laranja #ff8300. */

.mfa-etapa[hidden] { display: none !important; }

/* A troca de etapa, sem recarregar a página. */
.mfa-entra { animation: mfa-entra .22s ease-out; }
.mfa-sai   { animation: mfa-sai .14s ease-in forwards; }
@keyframes mfa-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes mfa-sai   { to   { opacity: 0; transform: translateX(-14px); } }
/* Quem pediu menos movimento não recebe movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
    .mfa-entra, .mfa-sai { animation: none; }
}

.mfa { color: #1f2937; text-align: center; }

.mfa__icone {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(69, 129, 191, .14);
    color: #4581bf; font-size: 22px;
}

.mfa__titulo { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: #000; }
.mfa__subtitulo { margin: 0; font-size: 15px; line-height: 1.5; color: #333; }
.mfa__email { color: #000; word-break: break-all; letter-spacing: .2px; }

.mfa__demora {
    display: flex; gap: 6px; align-items: flex-start; justify-content: center;
    margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: #666;
}
.mfa__demora .far { margin-top: 2px; }

.mfa__form { margin-top: 18px; }

.mfa__confiar {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 14px; font-size: 14px; color: #333; cursor: pointer; font-weight: 400;
}
.mfa__confiar input { width: 16px; height: 16px; margin: 0; accent-color: #4581bf; cursor: pointer; }

.mfa__rotulo { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #333; }

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

/* ⚠️ Fonte grande NÃO é só estética: abaixo de 16px o Safari do iOS dá zoom
   ao tocar no campo e empurra a tela inteira. */
.mfa__campo {
    width: 48px; min-width: 0; height: 58px; flex: 0 1 48px;
    padding: 0; text-align: center;
    font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: #1f2937; background: #fff;
    border: 1px solid #c9d3df; border-radius: 10px;
    transition: border-color .12s ease, box-shadow .12s ease;
    -moz-appearance: textfield;
}
.mfa__campo:focus {
    outline: none; border-color: #4581bf;
    box-shadow: 0 0 0 3px rgba(69, 129, 191, .28);
}
.mfa__campo.mfa__campo--erro { border-color: #d93025; }
.mfa__campos.mfa__campos--treme { animation: mfa-treme .32s ease; }
@keyframes mfa-treme {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .mfa__campos.mfa__campos--treme { animation: none; } }

.mfa__erro {
    display: flex; gap: 6px; align-items: flex-start; justify-content: center;
    margin: 12px 0 0; font-size: 13.5px; line-height: 1.4; color: #c5221f;
}
.mfa__erro[hidden], .mfa__validade[hidden] { display: none; }

.mfa__validade { margin: 12px 0 0; font-size: 13px; color: #555; }
.mfa__validade--fim { color: #b45309; }

.mfa__enviar {
    width: 100%; margin-top: 16px; padding: 12px 16px;
    font-size: 15px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: #fff; background: #4581bf;
    border: 0; border-radius: 4px; cursor: pointer;
    transition: background-color .12s ease, opacity .12s ease;
}
.mfa__enviar:hover { background: #3a6fa6; }
.mfa__enviar:disabled { opacity: .65; cursor: default; }
.mfa__enviar [hidden] { display: none; }

.mfa__rodape {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center;
    margin-top: 16px; font-size: 14px; color: #444;
}
.mfa__reenviar {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #ff8300;
    text-decoration: underline; text-underline-offset: 2px;
}
.mfa__reenviar:hover { color: #d96f00; }
.mfa__reenviar:disabled { opacity: .6; cursor: default; }
.mfa__reenviar[hidden], .mfa__aguarde[hidden] { display: none; }
.mfa__aguarde { color: #666; }
.mfa__aguarde strong { font-variant-numeric: tabular-nums; }

.mfa__voltar {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin: 14px 0 6px; padding: 6px 8px;
    background: none; border: 0; cursor: pointer;
    font-size: 13.5px; color: #555;
}
.mfa__voltar:hover { color: #000; }

@media (max-width: 400px) {
    .mfa__campos { gap: 6px; }
    .mfa__campo { height: 52px; font-size: 24px; }
}