/* Pantalla de verificacion del segundo factor (docs/definicion-2fa-otp.md, seccion 8).
   Reutiliza la paleta del login: azul institucional #25305F. */

.otp-titulo {
    color: #25305F;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 6px;
}

.otp-bajada {
    color: #737373;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 26px;
}

.otp-correo {
    color: #25305F;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Los cuadritos ---------------------------------------------------------
   Hay UN solo input real, transparente, estirado sobre los cuadros. Los cuadros
   son divs que solo pintan. Asi el pegado, el autocomplete del codigo, el
   backspace, las flechas y el lector de pantalla funcionan nativamente, sin
   sincronizar seis inputs a mano. */

.otp-campo {
    position: relative;
    margin-bottom: 8px;
}

.otp-input-real {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    -webkit-text-fill-color: transparent;
    /* 16px o mas: por debajo, iOS hace zoom al enfocar. */
    font-size: 16px;
    z-index: 2;
    cursor: pointer;
}

.otp-input-real:focus {
    outline: none;
}

.otp-cuadros {
    display: flex;
    gap: clamp(6px, 2vw, 10px);
    justify-content: center;
}

.otp-cuadro {
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 6vw, 26px);
    font-weight: 600;
    color: #25305F;
    background-color: #fff;
    border: 2px solid #d8dbe4;
    border-radius: 8px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

/* Fallback para navegadores sin aspect-ratio. */
@supports not (aspect-ratio: 3 / 4) {
    .otp-cuadro {
        height: 58px;
    }
}

.otp-cuadro.is-lleno {
    border-color: #b9bfd0;
    animation: otpPop .12s ease;
}

.otp-cuadro.is-activo {
    border-color: #25305F;
    box-shadow: 0 0 0 3px rgba(37, 48, 95, .13);
}

/* Caret propio: el del input real esta oculto, asi que el cuadro activo dibuja
   el suyo para que se vea donde va a caer el proximo digito. */
.otp-cuadro.is-activo::after {
    content: "";
    width: 2px;
    height: 42%;
    background-color: #25305F;
    animation: otpParpadeo 1.05s step-end infinite;
}

.otp-cuadro.is-activo.is-lleno::after {
    display: none;
}

/* Error y exito tinen el fondo ademas del borde: un borde de 2px es facil de pasar
   por alto, el bloque entero no. */
.otp-campo.is-error .otp-cuadro {
    border-color: #d64545;
    background-color: #fdf3f3;
}

.otp-campo.is-error {
    animation: otpSacudida .3s ease;
}

.otp-campo.is-ok .otp-cuadro {
    border-color: #2f9e63;
    background-color: #f2faf5;
}

@keyframes otpPop {
    0%   { transform: scale(.9); }
    100% { transform: scale(1); }
}

@keyframes otpParpadeo {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes otpSacudida {
    0%, 100%  { transform: translateX(0); }
    20%       { transform: translateX(-7px); }
    40%       { transform: translateX(7px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* --- Estado y acciones ---------------------------------------------------- */

.otp-mensaje {
    min-height: 20px;
    font-size: 13px;
    margin-bottom: 14px;
    text-align: center;
}

.otp-mensaje.is-error   { color: #d64545; }
.otp-mensaje.is-neutral { color: #737373; }
.otp-mensaje.is-ok      { color: #2f9e63; }

.otp-confiar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px;
    font-size: 13px;
    color: #737373;
}

.otp-reenvio {
    text-align: center;
    font-size: 13px;
    color: #737373;
    margin-bottom: 18px;
}

.otp-reenvio button {
    background: none;
    border: none;
    padding: 0;
    color: #25305F;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

.otp-reenvio button[disabled] {
    color: #a4a9b8;
    cursor: default;
    text-decoration: none;
}

.otp-links {
    text-align: center;
    font-size: 12.5px;
}

.otp-links a {
    color: #737373;
    text-decoration: underline;
}

.otp-links a:hover {
    color: #25305F;
}

.otp-separador {
    color: #d8dbe4;
    margin: 0 8px;
}

.otp-spinner {
    display: none;
    width: 18px;
    height: 18px;
    margin: 0 auto 14px;
    border: 2px solid #d8dbe4;
    border-top-color: #25305F;
    border-radius: 50%;
    animation: otpGiro .7s linear infinite;
}

.otp-spinner.is-visible {
    display: block;
}

@keyframes otpGiro {
    to { transform: rotate(360deg); }
}

/* Bloqueo: pantalla distinta, sin cuadritos. */
.otp-bloqueo {
    text-align: center;
    padding: 8px 0 4px;
}

.otp-bloqueo-icono {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .otp-cuadro,
    .otp-campo,
    .otp-spinner,
    .otp-cuadro.is-activo::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Transicion entre los dos pasos del login -------------------------------
   Los dos paneles viven en la misma pagina y se cruzan con un fundido corto mas
   un desplazamiento lateral. El contenedor anima su alto porque los paneles
   miden distinto y, sin eso, el cambio pega un salto feo.

   OJO: .login-panel arranca en opacity 0. El servidor SIEMPRE renderiza uno de
   los dos con .is-activo, asi que sin JavaScript igual se ve el que corresponde. */

.login-stack {
    position: relative;
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
}

.login-panel {
    opacity: 0;
    transition: opacity .19s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}

.login-panel.is-activo {
    opacity: 1;
    transform: none;
}

.login-panel.sale-izquierda   { opacity: 0; transform: translateX(-16px); }
.login-panel.sale-derecha     { opacity: 0; transform: translateX(16px); }
.login-panel.entra-derecha    { opacity: 0; transform: translateX(16px); }
.login-panel.entra-izquierda  { opacity: 0; transform: translateX(-16px); }

@media (prefers-reduced-motion: reduce) {
    .login-stack,
    .login-panel {
        transition: none !important;
    }
}

/* --- Requisitos de contrasena en vivo (ResetPassword) ---------------------- */

.reset-requisitos {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.reset-req {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8a91a0;
    transition: color .15s ease;
}

.reset-req-marca {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1.5px solid #d8dbe4;
    border-radius: 50%;
    position: relative;
    transition: border-color .15s ease, background-color .15s ease;
}

.reset-req.is-ok {
    color: #2f9e63;
}

.reset-req.is-ok .reset-req-marca {
    border-color: #2f9e63;
    background-color: #2f9e63;
}

/* Palito del check, dibujado con dos bordes y una rotacion. */
.reset-req.is-ok .reset-req-marca::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

@media (max-width: 380px) {
    .reset-requisitos {
        grid-template-columns: 1fr;
    }
}

/* Check grande de confirmacion (contrasena actualizada). */

.reset-ok-marca {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-color: #2f9e63;
    position: relative;
    animation: resetOkAparece .28s cubic-bezier(.34, 1.4, .64, 1);
}

.reset-ok-marca::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 12px;
    width: 12px;
    height: 22px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

@keyframes resetOkAparece {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .reset-ok-marca { animation: none; }
}

/* Aclaracion entre parentesis: explica un termino sin robarle peso a la frase
   principal. Un punto mas chica y en gris mas claro que el texto que la rodea. */

.otp-aclaracion {
    font-size: .92em;
    color: #9aa1b0;
}


/* --- Paso "confiar en este dispositivo" ------------------------------------
   Se pregunta DESPUES de verificar el codigo, en su propio panel. Como checkbox
   debajo de los cuadritos pasaba desapercibido: el codigo se envia solo al ultimo
   digito, asi que el usuario nunca llegaba a bajar la vista. */

.confianza-icono {
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background-color: #eef1f8;
    position: relative;
}

/* Candado dibujado con dos cajas: el arco y el cuerpo. */
.confianza-icono::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 11px;
    width: 14px;
    height: 12px;
    margin-left: -7px;
    border: 2.5px solid #25305F;
    border-bottom: none;
    border-radius: 7px 7px 0 0;
}

.confianza-icono::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 21px;
    width: 22px;
    height: 15px;
    margin-left: -11px;
    background-color: #25305F;
    border-radius: 3px;
}

/* El "no" tiene que ser tan clickeable como el "si": si la salida segura cuesta
   mas que la comoda, deja de ser una eleccion. */
.login-panel .btn-outline-secondary {
    border: 1px solid #d8dbe4;
    color: #737373;
    background-color: #fff;
    font-weight: 500;
}

.login-panel .btn-outline-secondary:hover {
    border-color: #b9bfd0;
    color: #25305F;
    background-color: #fafbfc;
}