/* ===================================================================
   LOGIN — Portal de Proveedores Locales de Atacama
   CORPROA / Cluster Minero Atacama

   Archivo:
   /vistas/css/pagina/index.css

   Utilizado por:
   - index.php
   - recuperar_clave.php

   Paleta institucional:
   Navy       #0B123E
   Navy light #102A56
   Burdeos    #53001F
   Rojo CTA   #D60012
   =================================================================== */


/* ===================================================================
   01. TOKENS / VARIABLES
   =================================================================== */

:root {

    /* Marca -------------------------------------------------------- */
    --brand-primary: #0B123E;
    --brand-primary-light: #102A56;
    --brand-primary-dark: #060A26;
    --brand-burgundy: #53001F;
    --brand-red: #D60012;
    --brand-red-hover: #B90010;
    --brand-red-active: #E60000;

    /* Superficies -------------------------------------------------- */
    --surface: #FFFFFF;
    --background: #EEF2F8;
    --background-soft: #F7F9FC;

    /* Texto -------------------------------------------------------- */
    --text: #141D42;
    --text-muted: #50607F;
    --text-subtle: #7288AC;

    /* Bordes ------------------------------------------------------- */
    --border: #E0E7F1;
    --border-strong: #C5D1E3;

    /* Radios ------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;

    /* Sombras ------------------------------------------------------ */
    --shadow-card:  0 20px 55px rgba(6, 10, 38, 0.20);
    --shadow-card-strong: 0 28px 80px rgba(6, 10, 38, 0.30);
    --shadow-red: 0 10px 28px rgba(214, 0, 18, 0.25);

    /* Transiciones ------------------------------------------------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 250ms var(--ease-out);
}


/* ===================================================================
   02. BASE
   =================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: var(--brand-primary-dark);

    color: var(--text);

    font-family:
            "Archivo",
            "Segoe UI",
            Arial,
            sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}


/* ===================================================================
   03. CONTENEDOR GENERAL
   =================================================================== */

.login-register {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    overflow: hidden;
}

@supports (height: 100dvh) {
    .login-register {
        height: 100dvh;
        min-height: 100dvh;
    }
}


/*
   Overlay de la fotografía.

   Se mantiene azul/navy para que cualquier imagen aleatoria pueda
   recibir texto blanco sin perder contraste.
*/
.login-register::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
            linear-gradient(
                    90deg,
                    rgba(6, 10, 38, 0.88) 0%,
                    rgba(11, 18, 62, 0.73) 28%,
                    rgba(11, 18, 62, 0.48) 48%,
                    rgba(11, 18, 62, 0.14) 67%,
                    rgba(11, 18, 62, 0) 80%
            );

    pointer-events: none;
}


/* Mantiene compatibilidad con nombres del layout anterior */
.login-height {
    height: 100%;
}

.login-sidebar {
    padding: 0;
    margin-top: 0;
}


/* ===================================================================
   04. NUEVO LAYOUT: FOTO + PANEL LOGIN
   =================================================================== */

.login-shell {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 480px);

    width: 100%;
    min-height: 100vh;
}

@supports (height: 100dvh) {
    .login-shell {
        min-height: 100dvh;
    }
}


/* ===================================================================
   05. PANEL IZQUIERDO — BRANDING
   =================================================================== */

.login-brand {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;

    padding:
            clamp(48px, 7vw, 110px)
            clamp(38px, 7vw, 110px);

    overflow: hidden;
}

.login-brand-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 760px;

    color: #FFFFFF;
}


/* -------------------------------------------------------------------
   Eyebrow
   ------------------------------------------------------------------- */

.login-brand-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 0 22px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.login-brand-eyebrow::before {
    content: "";

    display: block;

    width: 44px;
    height: 3px;

    flex: 0 0 44px;

    border-radius: 999px;

    background:
            linear-gradient(
                    90deg,
                    var(--brand-red) 0%,
                    var(--brand-burgundy) 100%
            );
}


/* -------------------------------------------------------------------
   Nombre del portal
   ------------------------------------------------------------------- */

.login-brand-title {
    max-width: 740px;
    margin: 0;
    color: #FFFFFF;
    font-family:"Lato", Sans-serif;
    font-size: clamp(44px, 4.6vw, 72px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.login-brand-title span {
    color: rgba(255, 255, 255, 0.92);
}


/* -------------------------------------------------------------------
   Slogan aleatorio
   ------------------------------------------------------------------- */

.login-brand-message {
    position: relative;

    max-width: 590px;

    margin-top: 38px;
    padding: 2px 0 2px 21px;

    border-left: 3px solid var(--brand-red);

    animation: loginBrandIn 500ms var(--ease-out) both;
}

.login-brand-message h2 {
    margin: 0 0 9px;

    color: #FFFFFF;

    font-family:
            "Archivo",
            "Segoe UI",
            Arial,
            sans-serif;

    font-size:
            clamp(19px, 1.6vw, 26px);

    font-weight: 600;

    line-height: 1.25;

    letter-spacing: -0.015em;
}

.login-brand-message p {
    max-width: 540px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;
    font-weight: 400;

    line-height: 1.65;
}


/* -------------------------------------------------------------------
   Logos institucionales
   ------------------------------------------------------------------- */

.login-brand-logos {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 48px;
}

.login-brand-logos img {
    display: block;

    width: auto;
    height: auto;

    max-width: 175px;
    max-height: 64px;

    object-fit: contain;
    object-position: left center;
}

.login-brand-logos img:nth-of-type(2) {
    max-width: 205px;
}

.login-brand-divider {
    display: block;

    width: 1px;
    height: 48px;

    flex: 0 0 1px;

    background:
            rgba(255, 255, 255, 0.25);
}


/* ===================================================================
   06. PANEL DERECHO — GRADIENTE INSTITUCIONAL
   =================================================================== */

.login-auth-panel {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 100vh;

    padding: 40px 36px;

    overflow-y: auto;

    background:

            radial-gradient(
                    ellipse 100% 75% at 8% -10%,
                    #1A2560 0%,
                    transparent 60%
            ),

            radial-gradient(
                    ellipse 100% 85% at 110% 105%,
                    #53001F 0%,
                    transparent 60%
            ),

            linear-gradient(
                    160deg,
                    #0B123E 0%,
                    #070C2C 55%,
                    #250016 100%
            );

    box-shadow:
            -30px 0 80px rgba(6, 10, 38, 0.26);
}

@supports (height: 100dvh) {
    .login-auth-panel {
        min-height: 100dvh;
    }
}


/*
   Línea muy sutil entre fotografía y panel.
*/
.login-auth-panel::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 1px;

    background:
            rgba(255, 255, 255, 0.08);

    pointer-events: none;
}

.login-auth-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 390px;
}


/* ===================================================================
   07. TARJETA LOGIN
   =================================================================== */

#loginform {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 390px;

    margin: 0 auto;
    padding: 36px 34px 32px;

    background:
            var(--surface);

    border:
            1px solid rgba(255, 255, 255, 0.18);

    border-radius:
            var(--radius-xl);

    box-shadow:
            var(--shadow-card-strong);
}

#loginform br {
    display: none;
}


/* ===================================================================
   08. CABECERA DEL LOGIN
   =================================================================== */

.login-card-heading {
    margin: 0 0 28px;

    text-align: center;
}

.login-card-heading > span {
    display: block;

    margin: 0 0 8px;

    color: var(--brand-red);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.login-card-heading h2 {
    margin: 0 0 9px;

    color: var(--brand-primary);

    font-size: 22px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.015em;
}

.login-card-heading p {
    max-width: 310px;

    margin: 0 auto;

    color: var(--text-muted);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.55;

    letter-spacing: normal;
    text-transform: none;
}


/* ===================================================================
   09. FORMULARIO
   =================================================================== */

#loginform form {
    margin-top: 0 !important;
}

#loginform .form-group {
    margin-bottom: 16px;
}


/* -------------------------------------------------------------------
   Inputs
   ------------------------------------------------------------------- */

#loginform .input-group {
    display: flex;

    width: 100%;

    overflow: hidden;

    background:
            #FFFFFF;

    border:
            1px solid var(--border-strong);

    border-radius:
            var(--radius-md);

    transition:
            border-color var(--transition-fast),
            box-shadow var(--transition-fast),
            background var(--transition-fast);
}

#loginform .input-group:hover {
    border-color:
            #9FB0CC;
}

#loginform .input-group:focus-within {
    border-color:
            var(--brand-red);

    box-shadow:
            0 0 0 3px rgba(214, 0, 18, 0.10);
}


/* -------------------------------------------------------------------
   Iconos
   ------------------------------------------------------------------- */

#loginform .input-group .input-group-text {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 46px;

    padding: 0 4px 0 14px;

    background:
            transparent;

    border: 0;

    border-radius: 0;

    color:
            var(--brand-primary-light);
}

#loginform .input-group .input-group-text .fa,
#loginform .input-group .input-group-text i {
    width: 18px;

    color:
            var(--brand-primary-light) !important;

    font-size: 15px;

    text-align: center;

    transition:
            color var(--transition-fast);
}

#loginform .input-group:focus-within .input-group-text .fa,
#loginform .input-group:focus-within .input-group-text i {
    color:
            var(--brand-red) !important;
}


/* -------------------------------------------------------------------
   Campo
   ------------------------------------------------------------------- */

#loginform .form-control,
#loginform input.form-control,
#loginform input.form-control[style] {
    width: 100%;

    height: 50px;

    padding:
            12px 14px 12px 8px !important;

    background:
            transparent !important;

    border:
            0 !important;

    border-radius:
            0 !important;

    box-shadow:
            none !important;

    outline:
            none !important;

    color:
            var(--text);

    font-family:
            "Archivo",
            "Segoe UI",
            Arial,
            sans-serif;

    font-size:
            14px;
    font-weight:
            400;
}

#loginform .form-control:focus {
    background:
            transparent !important;

    box-shadow:
            none !important;

    outline:
            none !important;
}

#loginform .form-control::placeholder {
    color:
            #8B99B0;

    opacity:
            1;
}


/* ===================================================================
   10. BOTÓN PRINCIPAL
   =================================================================== */

#loginform .btn,
#loginform button[type="submit"],
#loginform #btn_login,
#loginform button#btn_login[style] {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 50px;

    padding:
            12px 20px !important;

    background:
            var(--brand-red) !important;

    background-image:
            none !important;

    border:
            1px solid var(--brand-red) !important;

    border-radius:
            var(--radius-md) !important;

    box-shadow:
            0 7px 18px rgba(214, 0, 18, 0.18);

    color:
            #FFFFFF !important;

    font-family:
            "Archivo",
            "Segoe UI",
            Arial,
            sans-serif;

    font-size:
            14px;

    font-weight:
            600;

    line-height:
            1;

    letter-spacing:
            0.04em;

    text-align:
            center;

    text-transform:
            uppercase;

    cursor:
            pointer;

    transition:
            background var(--transition-fast),
            border-color var(--transition-fast),
            box-shadow var(--transition-base),
            transform var(--transition-fast);
}

#loginform .btn:hover,
#loginform button[type="submit"]:hover,
#loginform #btn_login:hover {
    background:
            var(--brand-red-hover) !important;

    border-color:
            var(--brand-red-hover) !important;

    box-shadow:
            var(--shadow-red);

    color:
            #FFFFFF !important;

    transform:
            translateY(-1px);
}

#loginform .btn:active,
#loginform button[type="submit"]:active,
#loginform #btn_login:active {
    background:
            var(--brand-red-active) !important;

    transform:
            translateY(0);

    box-shadow:
            0 4px 12px rgba(214, 0, 18, 0.18);
}

#loginform .btn:focus,
#loginform button[type="submit"]:focus {
    outline:
            none;

    box-shadow:
            0 0 0 3px rgba(214, 0, 18, 0.18);
}


/* ===================================================================
   11. RECUPERAR CONTRASEÑA
   =================================================================== */

.login-recovery {
    width: 100%;
    max-width: 390px;

    margin:
            24px auto 0;

    text-align:
            center;
}

.login-recovery p {
    margin:
            0 0 11px;

    color:
            rgba(255, 255, 255, 0.70);

    font-size:
            13px;

    font-weight:
            500;

    line-height:
            1.4;
}

.login-recovery a {
    display:
            block;

    width:
            100%;

    text-decoration:
            none;
}

.login-recovery a:hover {
    text-decoration:
            none;
}


/* -------------------------------------------------------------------
   Botón secundario
   ------------------------------------------------------------------- */

#btn_recuperar,
button#btn_recuperar[style] {
    display:
            inline-flex;

    align-items:
            center;

    justify-content:
            center;

    width:
            100%;

    min-height:
            44px;

    padding:
            11px 18px !important;

    background:
            rgba(255, 255, 255, 0.06) !important;

    background-image:
            none !important;

    border:
            1px solid rgba(255, 255, 255, 0.32) !important;

    border-radius:
            var(--radius-md) !important;

    box-shadow:
            none !important;

    color:
            #FFFFFF !important;

    font-family:
            "Archivo",
            "Segoe UI",
            Arial,
            sans-serif;

    font-size:
            13px;

    font-weight:
            600;

    letter-spacing:
            0.04em;

    text-transform:
            uppercase;

    cursor:
            pointer;

    transition:
            background var(--transition-fast),
            border-color var(--transition-fast),
            transform var(--transition-fast);
}

#btn_recuperar:hover,
button#btn_recuperar[style]:hover {
    background:
            rgba(255, 255, 255, 0.14) !important;

    border-color:
            rgba(255, 255, 255, 0.55) !important;

    color:
            #FFFFFF !important;

    transform:
            translateY(-1px);
}


/* ===================================================================
   12. FOOTER DEL PANEL
   =================================================================== */

.lg-foot {
    width:
            100%;

    max-width:
            390px;

    margin:
            22px auto 0;

    padding:
            16px 5px 0;

    border-top:
            1px solid rgba(255, 255, 255, 0.12);

    color:
            rgba(255, 255, 255, 0.44);

    font-size:
            10px;

    font-weight:
            500;

    line-height:
            1.4;

    letter-spacing:
            0.08em;

    text-align:
            center;

    text-transform:
            uppercase;
}


/* ===================================================================
   13. VALIDACIÓN
   =================================================================== */

#loginform .invalid-feedback,
#loginform .fv-plugins-message-container {
    margin-top:
            6px;

    color:
            #B90010;

    font-size:
            12px;

    line-height:
            1.4;

    text-align:
            left;
}


/* ===================================================================
   14. RESPUESTA AJAX / ELEMENTOS TÉCNICOS
   =================================================================== */

#respuesta {
    width:
            0 !important;

    height:
            0 !important;

    margin:
            0 !important;

    padding:
            0 !important;

    overflow:
            hidden !important;

    flex:
            0 0 0 !important;
}


/* ===================================================================
   15. COMPATIBILIDAD CON RECUPERAR_CLAVE.PHP / ESTRUCTURA LEGACY
   =================================================================== */

/*
   Esta sección permite que recuperar_clave.php continúe utilizando
   la estructura antigua mientras se actualiza gradualmente.
*/

.login-register .d-flex.justify-content-end {
    position:
            relative;

    z-index:
            1;

    min-height:
            100vh;

    align-items:
            stretch !important;
}

.login-register .d-flex.justify-content-end > script,
.login-register .d-flex.justify-content-end > #respuesta {
    display:
            none !important;
}

.login-register .d-flex.justify-content-end > div:not(#respuesta) {
    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    justify-content:
            center;

    width:
            100%;

    max-width:
            480px;

    margin-left:
            auto !important;

    padding:
            40px 36px !important;

    overflow-y:
            auto;

    background:

            radial-gradient(
                    ellipse 100% 75% at 8% -10%,
                    #1A2560 0%,
                    transparent 60%
            ),

            radial-gradient(
                    ellipse 100% 85% at 110% 105%,
                    #53001F 0%,
                    transparent 60%
            ),

            linear-gradient(
                    160deg,
                    #0B123E 0%,
                    #070C2C 55%,
                    #250016 100%
            ) !important;

    box-shadow:
            -30px 0 80px rgba(6, 10, 38, 0.26);
}


/* -------------------------------------------------------------------
   Logo legacy
   ------------------------------------------------------------------- */

.lg-logo-wrap {
    display:
            flex;

    flex-direction:
            column;

    align-items:
            center;

    width:
            100%;

    margin:
            0 0 18px;
}

.lg-logo-wrap img,
.lg-logo-wrap img.logo_plataforma,
#loginform img.logo_plataforma {
    display:
            block;

    width:
            165px;

    max-width:
            70%;

    height:
            auto;

    margin:
            0 auto 15px;
}


/* -------------------------------------------------------------------
   Barra legacy
   ------------------------------------------------------------------- */

.lg-access-bar {
    width:
            100%;

    margin:
            0 0 22px;

    padding:
            10px 16px;

    background:
            var(--brand-primary);

    border-radius:
            var(--radius-md);

    color:
            #FFFFFF;

    font-size:
            13px;

    font-weight:
            600;

    letter-spacing:
            0.06em;

    text-align:
            center;

    text-transform:
            uppercase;
}

.lg-access-bar strong {
    color:
            #FFFFFF;

    font-weight:
            600;
}


/* -------------------------------------------------------------------
   Párrafos legacy dentro del login
   ------------------------------------------------------------------- */

#loginform > .align-items-center > p,
#loginform p.lg-hide-legacy {
    display:
            none !important;
}

#loginform strong > p {
    display:
            block !important;

    margin:
            14px 0 10px;

    color:
            var(--text);

    font-size:
            14px;

    font-weight:
            600;

    letter-spacing:
            normal;

    text-align:
            center;

    text-transform:
            none;
}

#loginform label {
    display:
            block;

    margin:
            8px 0 12px;

    color:
            var(--text-muted);

    font-size:
            13px;

    text-align:
            center;
}


/* -------------------------------------------------------------------
   Botón warning legacy
   Antes era ámbar. Ahora se alinea a la marca CORPROA.
   ------------------------------------------------------------------- */

#loginform .btn-warning,
#loginform a > .btn-warning {
    background:
            var(--brand-red) !important;

    background-image:
            none !important;

    border-color:
            var(--brand-red) !important;

    color:
            #FFFFFF !important;
}

#loginform .btn-warning:hover {
    background:
            var(--brand-red-hover) !important;

    border-color:
            var(--brand-red-hover) !important;

    color:
            #FFFFFF !important;
}


/* ===================================================================
   16. SWEET ALERT
   =================================================================== */

.swal2-popup {
    border-radius:
            var(--radius-lg) !important;

    font-family:
            "Archivo",
            "Segoe UI",
            Arial,
            sans-serif !important;
}

.swal2-popup .swal2-title {
    color:
            var(--brand-primary) !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background:
            var(--brand-red) !important;

    border-radius:
            var(--radius-md) !important;

    box-shadow:
            none !important;

    font-weight:
            600 !important;
}

.swal2-popup .swal2-styled.swal2-confirm:hover {
    background:
            var(--brand-red-hover) !important;
}


/* ===================================================================
   17. ANIMACIONES
   =================================================================== */

@keyframes loginBrandIn {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ===================================================================
   18. RESPONSIVE — DESKTOP MEDIANO
   =================================================================== */

@media (max-width: 1200px) {

    .login-shell {
        grid-template-columns:
            minmax(0, 1fr)
            450px;
    }

    .login-brand {
        padding:
                50px
                clamp(36px, 5vw, 70px);
    }

    .login-brand-title {
        font-size:
                clamp(40px, 5vw, 60px);
    }

    .login-brand-logos img {
        max-width:
                155px;

        max-height:
                56px;
    }

    .login-brand-logos img:nth-of-type(2) {
        max-width:
                180px;
    }

}


/* ===================================================================
   19. RESPONSIVE — TABLET HORIZONTAL
   =================================================================== */

@media (max-width: 1024px) {

    .login-shell {
        grid-template-columns:
            minmax(0, 1fr)
            410px;
    }

    .login-brand {
        padding:
                46px 36px;
    }

    .login-brand-title {
        font-size:
                clamp(36px, 5vw, 50px);
    }

    .login-brand-message {
        margin-top:
                28px;
    }

    .login-brand-message h2 {
        font-size:
                19px;
    }

    .login-brand-message p {
        font-size:
                14px;
    }

    .login-brand-logos {
        gap:
                18px;

        margin-top:
                34px;
    }

    .login-brand-logos img {
        max-width:
                135px;

        max-height:
                48px;
    }

    .login-brand-logos img:nth-of-type(2) {
        max-width:
                150px;
    }

    .login-auth-panel {
        padding:
                32px 26px;
    }

    #loginform {
        padding:
                32px 28px 28px;
    }

}


/* ===================================================================
   20. RESPONSIVE — MÓVIL / TABLET VERTICAL
   =================================================================== */

@media (max-width: 767.98px) {

    html,
    body {
        height:
                auto;

        min-height:
                100%;
    }

    body {
        overflow-y:
                auto;
    }


    /* ---------------------------------------------------------------
       Fondo general
       --------------------------------------------------------------- */

    .login-register {
        position:
                relative;

        width:
                100%;

        height:
                auto;

        min-height:
                100vh;

        overflow:
                visible;

        background-position:
                center top;
    }

    @supports (height: 100dvh) {
        .login-register {
            min-height:
                    100dvh;
        }
    }


    /*
       En móvil el overlay pasa a vertical para oscurecer principalmente
       la zona donde aparece el branding.
    */

    .login-register::before {
        background:

                linear-gradient(
                        180deg,
                        rgba(6, 10, 38, 0.42) 0%,
                        rgba(6, 10, 38, 0.54) 35%,
                        rgba(6, 10, 38, 0.85) 78%,
                        #0B123E 100%
                );
    }


    /* ---------------------------------------------------------------
       Layout vertical
       --------------------------------------------------------------- */

    .login-shell {
        display:
                block;

        width:
                100%;

        min-height:
                100vh;
    }


    /* ---------------------------------------------------------------
       Branding superior
       --------------------------------------------------------------- */

    .login-brand {
        display:
                flex;

        align-items:
                flex-end;

        min-height:
                350px;

        padding:
                44px 24px 32px;
    }

    .login-brand-content {
        max-width:
                520px;
    }

    .login-brand-eyebrow {
        margin-bottom:
                14px;

        font-size:
                10px;

        letter-spacing:
                0.13em;
    }

    .login-brand-eyebrow::before {
        width:
                30px;

        flex-basis:
                30px;
    }

    .login-brand-title {
        max-width:
                500px;

        font-size:
                clamp(31px, 9vw, 44px);

        line-height:
                1.02;
    }

    .login-brand-message {
        max-width:
                460px;

        margin-top:
                21px;

        padding-left:
                14px;
    }

    .login-brand-message h2 {
        margin-bottom:
                5px;

        font-size:
                17px;

        line-height:
                1.3;
    }

    /*
       En móvil dejamos el slogan visible,
       pero escondemos la descripción secundaria para ahorrar altura.
    */

    .login-brand-message p {
        display:
                none;
    }

    .login-brand-logos {
        gap:
                15px;

        margin-top:
                23px;
    }

    .login-brand-logos img {
        max-width:
                116px;

        max-height:
                40px;
    }

    .login-brand-logos img:nth-of-type(2) {
        max-width:
                135px;
    }

    .login-brand-divider {
        height:
                33px;
    }


    /* ---------------------------------------------------------------
       Panel login debajo
       --------------------------------------------------------------- */

    .login-auth-panel {
        min-height:
                auto;

        padding:
                32px 20px 38px;

        box-shadow:
                none;
    }

    .login-auth-panel::before {
        display:
                none;
    }

    .login-auth-content {
        max-width:
                430px;
    }

    #loginform {
        max-width:
                430px;

        padding:
                30px 25px 27px;

        border-radius:
                16px;
    }

    .login-card-heading {
        margin-bottom:
                24px;
    }

    .login-card-heading h2 {
        font-size:
                21px;
    }

    .login-recovery,
    .lg-foot {
        max-width:
                430px;
    }


    /* ---------------------------------------------------------------
       Legacy recuperar_clave.php
       --------------------------------------------------------------- */

    .login-register .d-flex.justify-content-end {
        display:
                flex;

        align-items:
                center !important;

        justify-content:
                center !important;

        min-height:
                100vh;

        padding:
                24px 18px;

        background:

                radial-gradient(
                        ellipse 100% 75% at 10% -10%,
                        #1A2560 0%,
                        transparent 58%
                ),

                radial-gradient(
                        ellipse 100% 80% at 110% 105%,
                        #53001F 0%,
                        transparent 58%
                ),

                linear-gradient(
                        160deg,
                        #0B123E 0%,
                        #070C2C 58%,
                        #250016 100%
                );
    }

    .login-register .d-flex.justify-content-end > div:not(#respuesta) {
        max-width:
                430px;

        min-height:
                auto;

        padding:
                0 !important;

        background:
                transparent !important;

        box-shadow:
                none;
    }

}


/* ===================================================================
   21. RESPONSIVE — MÓVIL PEQUEÑO
   =================================================================== */

@media (max-width: 480px) {

    .login-brand {
        min-height:
                330px;

        padding:
                38px 20px 27px;
    }

    .login-brand-title {
        font-size:
                clamp(29px, 9.5vw, 38px);
    }

    .login-brand-message {
        margin-top:
                18px;
    }

    .login-brand-message h2 {
        font-size:
                16px;
    }

    .login-brand-logos {
        margin-top:
                20px;
    }

    .login-brand-logos img {
        max-width:
                105px;

        max-height:
                37px;
    }

    .login-brand-logos img:nth-of-type(2) {
        max-width:
                120px;
    }

    .login-brand-divider {
        height:
                29px;
    }

    .login-auth-panel {
        padding:
                27px 16px 32px;
    }

    #loginform {
        padding:
                27px 21px 24px;
    }

    .login-card-heading > span {
        font-size:
                10px;
    }

    .login-card-heading h2 {
        font-size:
                20px;
    }

    .login-card-heading p {
        font-size:
                12.5px;
    }

    #loginform .form-control,
    #loginform input.form-control {
        height:
                48px;
    }

    #loginform .btn,
    #loginform button[type="submit"],
    #loginform #btn_login {
        min-height:
                48px;
    }

    .lg-logo-wrap img,
    .lg-logo-wrap img.logo_plataforma,
    #loginform img.logo_plataforma {
        width:
                138px;

        max-width:
                138px;
    }

}


/* ===================================================================
   22. PANTALLAS DESKTOP DE POCA ALTURA
   Ej.: notebook 1366 × 650
   =================================================================== */

@media (min-width: 768px) and (max-height: 720px) {

    .login-brand {
        padding-top:
                30px;

        padding-bottom:
                30px;
    }

    .login-brand-eyebrow {
        margin-bottom:
                14px;
    }

    .login-brand-title {
        font-size:
                clamp(36px, 4vw, 52px);
    }

    .login-brand-message {
        margin-top:
                24px;
    }

    .login-brand-message p {
        font-size:
                13px;

        line-height:
                1.5;
    }

    .login-brand-logos {
        margin-top:
                28px;
    }

    .login-brand-logos img {
        max-height:
                48px;
    }

    .login-auth-panel {
        padding-top:
                24px;

        padding-bottom:
                24px;
    }

    #loginform {
        padding:
                27px 30px 24px;
    }

    .login-card-heading {
        margin-bottom:
                20px;
    }

    #loginform .form-group {
        margin-bottom:
                13px;
    }

    .login-recovery {
        margin-top:
                17px;
    }

    .lg-foot {
        margin-top:
                15px;

        padding-top:
                12px;
    }

}


/* ===================================================================
   23. ACCESIBILIDAD — REDUCIR MOVIMIENTO
   =================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
                auto !important;

        animation-duration:
                0.01ms !important;

        animation-iteration-count:
                1 !important;

        transition-duration:
                0.01ms !important;
    }

}

/* ===================================================================
   INPUTS LOGIN - ICONO + CAMPO EN UNA SOLA LÍNEA
   =================================================================== */

#loginform .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;

    width: 100%;

    min-height: 52px;

    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);

    transition:
            border-color 150ms ease,
            box-shadow 150ms ease;
}


/* Celda del icono */

#loginform .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    min-width: 52px;
    height: 52px;

    flex: 0 0 52px;

    padding: 0 !important;

    background: #FFFFFF !important;

    border: 0 !important;
    border-right: 1px solid var(--border) !important;

    border-radius: 0 !important;

    color: #9FB0CC;
}


/* Icono Lucide */

#loginform .input-group-text .fa {
    display: block;

    width: 18px;
    height: 18px;

    margin: 0;

    color: #9FB0CC;

    transition: color 150ms ease;
}


/* Campo */

#loginform .input-group .form-control {
    display: block;

    flex: 1 1 auto;

    width: 1%;
    min-width: 0;

    height: 52px;

    margin: 0;

    padding: 0 14px !important;

    background: #FFFFFF !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: var(--text);

    font-size: 14px;
    line-height: 52px;
}


/* Placeholder */

#loginform .input-group .form-control::placeholder {
    color: #9FB0CC;
    opacity: 1;
}


/* Focus del grupo completo */

#loginform .input-group:focus-within {
    border-color: var(--brand-red);

    box-shadow:
            0 0 0 3px rgba(214, 0, 18, 0.10);
}


/* Icono cambia al rojo institucional al hacer foco */

#loginform .input-group:focus-within .input-group-text .fa {
    color: var(--brand-red);
}


/* Evita que Bootstrap introduzca bordes adicionales */

#loginform .input-group-prepend,
#loginform .input-group-append {
    margin: 0 !important;
}