/* ============================================================================
   VeruFacts · Iniciar sesión / Recuperar contraseña — capa responsiva
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de css/login.css, del bundle del tema y de css/style.css.
   Solo la usan index.php y forgot.php, así que nada de esto afecta al panel.

   Idea de la maqueta en móvil: la pantalla se reparte en tres bloques
   (cabecera de marca · formulario · pie) y TODO escala con el alto real del
   viewport usando clamp(min, Xvh, max), de forma que no haya que hacer scroll
   ni en un móvil de 568px de alto ni en horizontal.
   ========================================================================== */

/* --- Alto real del viewport -------------------------------------------------
   100vh en móvil incluye la barra de direcciones del navegador; 100dvh la
   descuenta, así el pie no queda "flotando" a media pantalla.               */
.auth-page { min-height: 100vh; }
@supports (min-height: 100dvh) {
    .auth-page { min-height: 100dvh; }
}

/* --- Logo del panel de marca ------------------------------------------------
   Se usa SYSVEN_6_h.png: el original es un lienzo cuadrado de 1350x1350
   donde el logo solo ocupa una franja de 1245x271 (19% del área). Al limitarlo
   por altura se veía diminuto; esta versión viene recortada, así que se
   dimensiona POR ANCHO y se ve al tamaño que realmente ocupa.

   Además, la clase .max-n-75px del tema (que traía este logo) no es un
   "max-height": en style.bundle.css es max-height:95px + margin-top:250px +
   margin-left:450px FIJOS. Eso desbordaba ~380px en móvil y hasta 99px entre
   992px y 1200px. Aquí el logo se ancla al pie del panel y no puede desbordar
   en ningún ancho.                                                          */
.auth-brand-logo-wrap {
    margin-top: auto;
    justify-content: flex-end;
}

.auth-brand-logo {
    display: block;
    width: clamp(180px, 17vw, 240px);
    max-width: 100%;
    height: auto;
}

/* --- Loader inicial --------------------------------------------------------- */
.auth-loader-img {
    width: 180px;
    max-width: 45vw;
}

/* --- Código de verificación (recuperar contraseña) --------------------------
   Antes iba con estilos en línea, que ganaban a cualquier media query.      */
.auth-code-input {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.625rem;
    text-indent: 0.625rem;   /* compensa el espaciado sobrante del último dígito */
}

/* ============================================================================
   MÓVIL Y TABLET (≤ 991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* Escala fluida: el segundo valor manda mientras la pantalla tenga alto
       de sobra; en pantallas bajas todo se comprime hasta el mínimo.        */
    .auth-page {
        --auth-brand-pad: clamp(0.85rem, 2.6vh, 1.75rem);
        --auth-gap:       clamp(0.35rem, 1.4vh, 0.75rem);
        --auth-block-gap: clamp(0.75rem, 3.2vh, 2rem);
        --auth-field-pad: clamp(0.6rem, 1.8vh, 0.95rem);
    }

    /* --- Cabecera de marca: compacta, nunca media pantalla --- */
    .auth-brand {
        position: relative;
        background-position: center center;
        background-size: cover;
        padding: var(--auth-brand-pad) 1.25rem !important;
        text-align: center;
    }

    /* Velo oscuro: el texto blanco se lee sobre cualquier zona de la imagen */
    .auth-brand::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(9, 15, 40, 0.55);
    }

    .auth-brand > * {
        position: relative;
        z-index: 1;
    }

    .auth-brand-body {
        flex-direction: column;
        align-items: center;
    }

    .auth-brand-text { align-items: center; }

    /* OJO: el tema fuerza `html, body { font-size: 12px !important }` por debajo
       de 992px, así que aquí los tamaños van en px o en vh — con rem quedarían
       diminutos (un input en rem terminaba en 12px). */
    .auth-brand-title {
        font-size: clamp(17px, 2.7vh, 23px) !important;
        margin: 0 0 var(--auth-gap) !important;
    }

    .auth-brand-text p {
        font-size: clamp(12px, 1.7vh, 14px) !important;
        margin-bottom: 0;
    }

    /* El salto de línea del copy está pensado para escritorio */
    .auth-brand-text br { display: none; }

    /* El logo encabeza la pantalla y es el elemento con más presencia */
    .auth-brand-logo-wrap {
        order: -1;
        margin: 0 0 var(--auth-block-gap);
        justify-content: center;
    }

    .auth-brand-logo {
        width: clamp(150px, 46vw, 235px);
        max-height: 9vh;      /* en pantallas muy bajas manda el alto */
        object-fit: contain;
    }

    /* --- Columna del formulario ---
       Crece para ocupar lo que sobra y centra el formulario ahí dentro, en vez
       de dejar todo el hueco muerto justo encima del pie.                    */
    .auth-aside {
        padding: var(--auth-block-gap) 1.25rem clamp(0.75rem, 2vh, 1.25rem) !important;
    }

    .auth-form-wrap {
        margin-top: 0 !important;
        justify-content: center;
    }

    .login.login-4 .login-form {
        width: 100%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-form-head { margin-bottom: var(--auth-block-gap) !important; }
    .auth-form-head h2 { font-size: clamp(17px, 2.6vh, 21px); }
    .auth-form-head p  { font-size: clamp(12px, 1.7vh, 14px); }

    /* --- Campos ---
       16px es el mínimo para que iOS no haga zoom al enfocar el input.     */
    .auth-form .form-control,
    .auth-field .form-control {
        font-size: 16px;
    }

    .auth-field {
        padding-top: var(--auth-field-pad) !important;
        padding-bottom: var(--auth-field-pad) !important;
        border-top: 0 !important;
        border-bottom: 1px solid #EBEDF3;
    }

    .auth-form .invalid-feedback,
    .auth-form .fv-plugins-message-container { font-size: 13px; }

    .auth-remember,
    .auth-remember .checkbox,
    .auth-remember a { font-size: 14px; }

    .auth-remember { margin-top: var(--auth-block-gap) !important; }

    /* --- Botones a lo ancho: objetivo táctil cómodo --- */
    .auth-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--auth-block-gap) !important;
        margin-bottom: 0 !important;
    }

    .auth-actions .btn {
        width: 100%;
        font-size: 15px;
        padding-top: clamp(0.75rem, 1.9vh, 1.15rem) !important;
        padding-bottom: clamp(0.75rem, 1.9vh, 1.15rem) !important;
        margin-top: calc(var(--auth-gap) / 2) !important;
        margin-bottom: calc(var(--auth-gap) / 2) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .auth-actions-spacer { display: none; }

    /* --- Código de verificación: nunca por debajo de 16px --- */
    .auth-code-input {
        font-size: clamp(20px, 3.2vh, 26px);
        letter-spacing: 8px;
        text-indent: 8px;
    }

    /* --- Pie de página: anclado abajo --- */
    .auth-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: var(--auth-block-gap) !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .auth-footer,
    .auth-footer a { font-size: 13px; }

    .auth-footer > div { margin-top: 0 !important; margin-bottom: 0 !important; }
    .auth-footer > div + div { margin-top: calc(var(--auth-gap) / 2) !important; }

    .auth-footer-links { justify-content: center; }

    /* --- Overlay de carga de las peticiones (blockUI) ---
       Por defecto ocupa el 30% del ancho: en un móvil queda diminuto.       */
    .blockUI.blockMsg.blockPage {
        width: 62% !important;
        left: 19% !important;
    }
}

/* ============================================================================
   PANTALLAS BAJAS — se recorta lo prescindible antes de obligar a hacer scroll
   ========================================================================== */

/* Móvil pequeño de pie (≈568-640px) y cualquier móvil en horizontal */
@media (max-width: 991.98px) and (max-height: 660px) {
    .auth-brand-text p { display: none; }
}

@media (max-width: 991.98px) and (max-height: 480px) {
    .auth-form-head p { display: none; }
    .auth-brand-logo { max-height: 7.5vh; }

    /* Se apura el espaciado vertical para que el botón siga entrando en pantalla */
    .auth-form .form-group { margin-bottom: 0 !important; }
    .auth-field {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
    .auth-field .form-control {
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
    .auth-footer { margin-top: clamp(0.5rem, 2vh, 1rem) !important; }
}

/* Horizontal muy bajo: el logo ya lleva el nombre de la marca, el titular sobra */
@media (max-width: 991.98px) and (max-height: 400px) {
    .auth-brand-title { display: none; }

    /* Con los dos mensajes de validación visibles el formulario crece; se
       recorta el aire para que siga entrando sin scroll. */
    .auth-remember,
    .auth-actions { margin-top: clamp(0.35rem, 1.3vh, 0.85rem) !important; }

    .auth-form .fv-plugins-message-container,
    .auth-form .invalid-feedback { font-size: 12px; margin-top: 0 !important; }
}

/* ============================================================================
   MÓVILES ESTRECHOS (≤ 575.98px)
   ========================================================================== */
@media (max-width: 575.98px) {
    .auth-brand  { padding-left: 1.125rem !important; padding-right: 1.125rem !important; }
    .auth-aside  { padding-left: 1.125rem !important; padding-right: 1.125rem !important; }
}