@import url('variables.css');


/* =========================================================
   BODY
========================================================= */

body {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark) 0%,
            var(--color-primary) 45%,
            var(--surface-page) 100%
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.container {

    width: 1200px;

    max-width: 95%;

    height:
        min(
            720px,
            calc(100vh - 40px)
        );

    display: flex;

    overflow: hidden;

    position: relative;

    background:
        #ffffff;

    border-radius:
        22px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .20);
}


/* =========================================================
   PANEL IZQUIERDO
========================================================= */

.left-panel {

    width: 50%;

    min-width: 0;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 55px;

    color:
        #ffffff;

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(35, 125, 29, .97),
            rgba(55, 166, 42, .90)
        );
}


/* =========================================================
   IMAGEN DEL SOCIO
========================================================= */

.left-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(34, 130, 28, .78),
            rgba(34, 130, 28, .88)
        ),
        url("../img/login.jpg");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .30;

    filter:
        blur(1px);

    transform:
        scale(1.03);

    z-index:
        0;
}


/* =========================================================
   CONTENIDO DEL PANEL IZQUIERDO
========================================================= */

.left-panel > * {

    position: relative;

    z-index: 1;
}


/* =========================================================
   LOGO
========================================================= */

.logo {

    width:
        300px;

    height:
        150px;

    background-image:
        var(--logo-vertical-blanco);

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    margin-bottom:
        15px;
}


/* =========================================================
   OVC
========================================================= */

.left-panel h1 {

    font-size:
        64px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -2px;

    margin:
        0 0 5px;
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.subtitulo {

    font-size:
        20px;

    color:
        var(--color-secondary);

    font-weight:
        700;

    margin-bottom:
        20px;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.left-panel p {

    max-width:
        520px;

    line-height:
        1.65;

    margin:
        0 0 42px;

    color:
        rgba(255, 255, 255, .95);

    font-size:
        15px;
}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.stats {

    display:
        flex;

    justify-content:
        center;

    gap:
        55px;
}


.stats div {

    text-align:
        center;

    min-width:
        75px;
}


.stats span {

    display:
        block;

    font-size:
        34px;

    color:
        var(--color-secondary);

    font-weight:
        900;

    line-height:
        1.1;

    margin-bottom:
        5px;
}


/* =========================================================
   PANEL DERECHO
========================================================= */

.right-panel {

    width:
        50%;

    position:
        relative;

    overflow:
        hidden;

    background:
        #f8faf8;
}


/* =========================================================
   PANELES DEL CARRUSEL
========================================================= */

.form-panel {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        45px;

    box-sizing:
        border-box;

    transition:
        transform .45s cubic-bezier(.4, 0, .2, 1),
        opacity .35s ease;
}


/* =========================================================
   LOGIN
========================================================= */

.login-panel {

    transform:
        translateX(0);

    opacity:
        1;

    z-index:
        3;
}


/* =========================================================
   REGISTRO
========================================================= */

.registro-panel {

    transform:
        translateX(110%);

    opacity:
        0;

    z-index:
        2;
}


/* =========================================================
   RECUPERACIÓN
========================================================= */

.recuperar-panel {

    transform:
        translateX(-110%);

    opacity:
        0;

    z-index:
        2;
}


/* =========================================================
   MOSTRAR REGISTRO
========================================================= */

.right-panel.mostrar-registro
.login-panel {

    transform:
        translateX(-110%);

    opacity:
        0;
}


.right-panel.mostrar-registro
.registro-panel {

    transform:
        translateX(0);

    opacity:
        1;

    z-index:
        3;
}


/* =========================================================
   MOSTRAR RECUPERACIÓN
========================================================= */

.right-panel.mostrar-recuperacion
.login-panel {

    transform:
        translateX(110%);

    opacity:
        0;
}


.right-panel.mostrar-recuperacion
.recuperar-panel {

    transform:
        translateX(0);

    opacity:
        1;

    z-index:
        3;
}


/* =========================================================
   FORM BOX
========================================================= */

.form-box {

    width:
        100%;

    max-width:
        440px;

    display:
        flex;

    flex-direction:
        column;

    box-sizing:
        border-box;
}


/* =========================================================
   ICONO SUPERIOR
========================================================= */

.form-box::before {

    content:
        "";

    width:
        64px;

    height:
        64px;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    background-color:
        #ffffff;

    background-image:
        var(--logo-vertical);

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        43px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .10);
}


/* =========================================================
   TÍTULO
========================================================= */

.form-box h2 {

    color:
        #174d22;

    font-size:
        34px;

    font-weight:
        800;

    text-align:
        center;

    padding:
        0;

    margin:
        0 0 8px;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.form-box .descripcion {

    color:
        #6d7770;

    font-size:
        14px;

    line-height:
        1.6;

    text-align:
        center;

    margin:
        0 0 28px;
}


/* =========================================================
   FORMULARIO LOGIN
========================================================= */

.login-form {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;
}


/* =========================================================
   INPUT GROUP
========================================================= */

.input-group {

    width:
        100%;

    height:
        58px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    margin-bottom:
        16px;
}


/* =========================================================
   INPUT
========================================================= */

.input-group input {

    width:
        100%;

    height:
        100%;

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0 52px;

    border:
        1px solid #dfe6df;

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        #26352b;

    outline:
        none;

    font-size:
        15px;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .025);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.input-group input::placeholder {

    color:
        #929b95;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

.input-group input:focus {

    border-color:
        var(--color-primary);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(69, 184, 45, .10);
}


/* =========================================================
   ICONO IZQUIERDO
========================================================= */

.input-icon {

    position:
        absolute;

    left:
        18px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        21px;

    height:
        21px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

    z-index:
        2;
}


/* =========================================================
   SVG ICONOS
========================================================= */

.input-icon svg {

    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        var(--color-primary);

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        stroke .2s ease;
}


/* =========================================================
   ICONO CUANDO INPUT TIENE FOCUS
========================================================= */

.input-group:focus-within
.input-icon svg {

    stroke:
        var(--color-primary);
}


/* =========================================================
   BOTÓN MOSTRAR CONTRASEÑA
========================================================= */

.password-toggle {

    position:
        absolute;

    right:
        17px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        #8d9890;

    cursor:
        pointer;

    z-index:
        3;

    transition:
        color .2s ease;
}


.password-toggle:hover {

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


.password-toggle svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   BOTÓN INICIAR SESIÓN
========================================================= */

.login-form button[type="submit"] {

    width:
        100%;

    height:
        58px;

    padding:
        0;

    margin-top:
        4px;

    border:
        none;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--color-primary)
        );

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 8px 18px rgba(57, 169, 38, .22);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.login-form button[type="submit"]:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px rgba(57, 169, 38, .28);

    filter:
        brightness(1.03);
}


.login-form button[type="submit"]:active {

    transform:
        translateY(0);
}


/* =========================================================
   LINKS
========================================================= */

.links {

    margin-top:
        28px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    flex-wrap:
        wrap;
}


.links a {

    color:
        var(--color-primary);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        color .2s ease;
}


.links a:hover {

    color:
        #24751b;

    text-decoration:
        none;
}


/* =========================================================
   SEPARADOR
========================================================= */

.separator {

    display:
        none;
}


/* =========================================================
   MENSAJE DE ERROR
========================================================= */

.mensaje-login {

    margin-top:
        18px;

    padding:
        12px 15px;

    border-radius:
        10px;

    font-size:
        13px;

    text-align:
        center;
}


.mensaje-login.error {

    color:
        #a52828;

    background:
        #fff0f0;

    border:
        1px solid #ffd2d2;
}

/* =========================================================
   REGISTRO / RECUPERACIÓN
========================================================= */

.registro-box,
.recovery-box {

    width: 100%;

    max-width: 440px;

    height: 100%;

    max-height: 620px;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;
}


/* =========================================================
   CABECERA
========================================================= */

.registro-box .form-header,
.recovery-box .form-header {

    flex-shrink: 0;

    text-align: center;
}


/* =========================================================
   CUERPO DEL FORMULARIO
========================================================= */

.registro-box .form-body,
.recovery-box .form-body {

    flex: 1;

    min-height: 0;

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 14px;

    overflow-y: auto;

    padding:
        5px 8px 5px 0;

    box-sizing: border-box;
}


/* =========================================================
   FILAS DE CAMPOS
========================================================= */

.form-row {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


/* =========================================================
   INPUTS DE REGISTRO Y RECUPERACIÓN
========================================================= */

.registro-box .form-body input,
.recovery-box .form-body input {

    width: 100%;

    height: 52px;

    box-sizing: border-box;

    margin: 0;

    padding:
        0 15px;

    border:
        1px solid #dfe6df;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #26352b;

    outline:
        none;

    font-family:
        inherit;

    font-size:
        14px;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, .025);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.registro-box input::placeholder,
.recovery-box input::placeholder {

    color:
        #929b95;

    opacity:
        1;
}


/* =========================================================
   FOCUS
========================================================= */

.registro-box input:focus,
.recovery-box input:focus {

    border-color:
        var(--color-primary);

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(69, 184, 45, .10);
}


/* =========================================================
   INPUT DESHABILITADO
========================================================= */

.registro-box input:disabled,
.recovery-box input:disabled {

    background:
        #f5f7f5;

    color:
        #8a938d;

    cursor:
        not-allowed;

    opacity:
        .85;
}


/* =========================================================
   INPUT SOLO LECTURA
========================================================= */

.registro-box input:read-only,
.recovery-box input:read-only {

    background:
        #f7f9f7;
}


/* =========================================================
   BOTONES
========================================================= */

.registro-box .form-body button,
.recovery-box .form-body button {

    width: 100%;

    min-height: 52px;

    margin: 0;

    padding:
        0 18px;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--color-primary)
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 6px 15px rgba(57, 169, 38, .18);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


/* =========================================================
   HOVER BOTONES
========================================================= */

.registro-box .form-body button:hover:not(:disabled),
.recovery-box .form-body button:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 20px rgba(57, 169, 38, .24);

    filter:
        brightness(1.03);
}


/* =========================================================
   BOTONES DESHABILITADOS
========================================================= */

.registro-box button:disabled,
.recovery-box button:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   BOTÓN DE VALIDACIÓN
========================================================= */

.btn-validar {

    width:
        100% !important;

    height:
        50px;

    background:
        #eef7ec !important;

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

    border:
        1px solid rgba(69, 184, 45, .20) !important;

    box-shadow:
        none !important;
}


.btn-validar:hover:not(:disabled) {

    background:
        #e3f3df !important;

    box-shadow:
        none !important;
}


/* =========================================================
   INFORMACIÓN DE LA CUENTA
========================================================= */

.datos-cuenta-recovery {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


/* =========================================================
   SEPARADOR
========================================================= */

.registro-box .separator,
.recovery-box .separator {

    width:
        100%;

    height:
        1px;

    border:
        none;

    margin:
        3px 0;

    background:
        #e5ebe5;

    flex-shrink:
        0;
}


/* =========================================================
   PIE DEL FORMULARIO
========================================================= */

.registro-box .form-footer,
.recovery-box .form-footer {

    flex-shrink:
        0;

    margin-top:
        20px;

    width:
        100%;
}


/* =========================================================
   BOTÓN ACTIVAR ACCESO
========================================================= */

.registro-box #btnActivar {

    width:
        100%;

    height:
        56px;

    border:
        none;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--color-primary)
        );

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 8px 18px rgba(57, 169, 38, .20);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.registro-box #btnActivar:hover:not(:disabled) {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px rgba(57, 169, 38, .27);
}


/* =========================================================
   LINKS DEL FOOTER
========================================================= */

.registro-box .links,
.recovery-box .links {

    margin-top:
        20px;

    display:
        flex;

    justify-content:
        flex-start;

    align-items:
        center;

    width:
        100%;
}


/* =========================================================
   ENLACE VOLVER
========================================================= */

.registro-box .links a,
.recovery-box .links a {

    color:
        var(--color-primary);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        color .2s ease;
}


.registro-box .links a:hover,
.recovery-box .links a:hover {

    color:
        #24751b;

    text-decoration:
        none;
}


/* =========================================================
   MENSAJES
========================================================= */

.mensaje-registro {

    width:
        100%;

    box-sizing:
        border-box;

    margin-top:
        14px;

    padding:
        11px 14px;

    border-radius:
        9px;

    font-size:
        13px;

    line-height:
        1.45;

    text-align:
        center;
}

/* =====================================================
   MENSAJE FLOTANTE OVC
===================================================== */

.ovc-validacion-flotante {

    position: fixed;

    top: 24px;

    right: 24px;

    width: 390px;

    max-width: calc(100vw - 32px);

    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 15px;

    background: #ffffff;

    border-radius: 14px;

    border: 1px solid #e7e7e7;

    border-left: 4px solid #dc3545;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.16);

    box-sizing: border-box;

    z-index: 999999;

    opacity: 0;

    transform: translateX(
        calc(100% + 40px)
    );

    transition:
        opacity 0.3s ease,
        transform 0.35s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =====================================================
   MOSTRAR
===================================================== */

.ovc-validacion-flotante.mostrar {

    opacity: 1;

    transform: translateX(0);

}


/* =====================================================
   ICONO
===================================================== */

.ovc-validacion-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff0f0;

    color: #dc3545;

    font-size: 19px;

}



/* =====================================================
   CONTENIDO
===================================================== */

.ovc-validacion-content {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.ovc-validacion-content strong {

    color: #202124;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.2;

}



.ovc-validacion-content span {

    color: #60656b;

    font-size: 13px;

    line-height: 1.4;

    overflow-wrap: break-word;

}



/* =====================================================
   BOTÓN CERRAR
===================================================== */

.ovc-validacion-cerrar {

    width: 30px;

    height: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #8a8f94;

    cursor: pointer;

    font-size: 15px;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}


.ovc-validacion-cerrar:hover {

    background: #f1f2f3;

    color: #202124;

}



/* =====================================================
   MENSAJE EXITOSO
===================================================== */

.ovc-validacion-flotante.success {

    border-left-color: #198754;

}



.ovc-validacion-flotante.success
.ovc-validacion-icon {

    background: #eaf8f0;

    color: #198754;

}

/* =====================================================
   ERROR
===================================================== */

.ovc-validacion-flotante.error {

    border-left-color: #dc3545;

}



/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    body {

        padding:
            0;

        align-items:
            stretch;
    }


    .container {

        width:
            100%;

        max-width:
            none;

        min-height:
            100vh;

        height:
            auto;

        flex-direction:
            column;

        border-radius:
            0;

        box-shadow:
            none;
    }


    .left-panel {

        width:
            100%;

        min-height:
            390px;

        padding:
            40px 25px;
    }


    .right-panel {

        width:
            100%;

        min-height:
            600px;
    }


    .logo {

        width:
            260px;

        height:
            120px;

        background-image:
            var(--logo-horizontal-blanco);
    }


    .left-panel h1 {

        font-size:
            52px;
    }


    .left-panel p {

        margin-bottom:
            30px;
    }


    .stats {

        gap:
            35px;
    }


    .form-panel {

        padding:
            40px 25px;
    }

}


/* =========================================================
   RESPONSIVE — MÓVIL
========================================================= */

@media (max-width: 600px) {

    .left-panel {

        min-height:
            340px;

        padding:
            30px 20px;
    }


    .logo {

        width:
            220px;

        height:
            90px;
    }


    .left-panel h1 {

        font-size:
            42px;
    }


    .subtitulo {

        font-size:
            17px;
    }


    .left-panel p {

        font-size:
            13px;

        margin-bottom:
            25px;
    }


    .stats {

        gap:
            20px;
    }


    .stats span {

        font-size:
            26px;
    }


    .form-panel {

        padding:
            35px 20px;
    }


    .form-box h2 {

        font-size:
            28px;
    }


    .links {

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            12px;
    }
    /* =========================================================
   REGISTRO / RECUPERACIÓN EN MÓVIL
========================================================= */

.registro-box,
.recovery-box {

    max-width:
        100%;

    max-height:
        none;
}


.registro-box .form-body,
.recovery-box .form-body {

    padding-right:
        3px;
}


.form-row {

    grid-template-columns:
        1fr;

    gap:
        12px;
}
 .ovc-validacion-flotante {

        top: 15px;

        right: 15px;

        left: 15px;

        width: auto;

        max-width: none;

        transform:
            translateY(-25px);

    }


    .ovc-validacion-flotante.mostrar {

        transform:
            translateY(0);

    }

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 480px) {

    .ovc-validacion-flotante {

        top: 75px;

        left: 15px;

        right: 15px;

        min-width: 0;

        max-width: none;

        padding: 13px 15px;

    }

}


@media (max-width: 360px) {

    .ovc-validacion-flotante {

        left: 10px;

        right: 10px;

        padding: 12px;

    }

}

.inline-password-field {
    position: relative;
    min-width: 0;
}

.inline-password-field > input {
    width: 100%;
    padding-right: 52px !important;
}

.inline-password-field > .password-toggle {
    right: 14px;
}

/* =========================================================
   DISEÑO UNIFICADO DE ACCESO
   Comparte la línea visual de Actualizar contraseña.
========================================================= */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: block;
    padding: 0;
    color: var(--text-primary);
    background: var(--surface-page);
    font-family: Lato, Arial, Helvetica, sans-serif;
}

.container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 43%) minmax(420px, 57%);
    overflow: hidden;
    border-radius: 0;
    background: var(--white);
    box-shadow: none;
}

.left-panel {
    width: auto;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(42px, 7vw, 100px);
    overflow: hidden;
    color: var(--white);
    text-align: left;
    background: var(--color-primary);
}

.left-panel::before,
.left-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--color-quaternary);
    opacity: 1;
    filter: none;
    transform: none;
    z-index: 0;
}

.left-panel::before {
    inset: auto -160px auto auto;
    top: -100px;
    width: 330px;
    height: 330px;
}

.left-panel::after {
    left: -110px;
    bottom: -80px;
    width: 230px;
    height: 230px;
}

.left-panel > * {
    position: relative;
    z-index: 1;
}

.left-panel .logo {
    position: absolute;
    top: clamp(28px, 4.5vw, 58px);
    left: clamp(42px, 7vw, 100px);
    width: min(310px, 68%);
    height: 88px;
    margin: 0;
    background-image: var(--logo-horizontal-blanco);
    background-position: left center;
    background-size: contain;
}

.login-brand-copy,
.login-brand-security {
    position: relative;
    z-index: 1;
}

.left-panel .subtitulo {
    display: block;
    margin: 0 0 10px;
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.left-panel h1 {
    max-width: 560px;
    margin: 0 0 18px;
    color: var(--white);
    font-size: clamp(35px, 4.4vw, 62px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -1px;
}

.left-panel p {
    max-width: 540px;
    margin: 0;
    color: rgb(255 255 255 / 90%);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.65;
}

.login-brand-security {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 38px;
    font-size: 14px;
}

.right-panel {
    width: auto;
    min-width: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--surface-page);
}

.form-panel {
    padding: clamp(28px, 5vw, 72px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary) transparent;
}

.form-box {
    width: min(500px, 100%);
    max-width: 500px;
    height: min(680px, calc(100vh - 56px));
    max-height: 680px;
    justify-content: center;
    padding: clamp(28px, 4vw, 48px);
    overflow-y: auto;
    border: 1px solid var(--border-default);
    border-left: 5px solid var(--color-primary);
    border-radius: 22px;
    background: var(--white);
    box-shadow: 0 20px 55px rgb(23 52 32 / 10%);
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary) transparent;
}

.form-box::before {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    margin: 0 0 22px;
    border-radius: 19px;
    background-color: var(--color-primary);
    background-image: var(--logo-vertical-blanco);
    background-size: 54px;
    box-shadow: 0 10px 22px var(--primary-shadow);
}

/* Iconografía contextual de las pantallas de autenticación. */
.form-box::before,
.form-box.recovery-box::before {
    display: none;
}

.auth-card-icon {
    width: 76px;
    min-width: 76px;
    height: 76px;
    min-height: 76px;
    flex: 0 0 76px;
    display: grid;
    place-items: center;
    margin: 0 0 22px;
    border-radius: 19px;
    color: var(--color-secondary);
    background: var(--color-primary);
    box-shadow: 0 10px 22px var(--primary-shadow);
    font-size: 27px;
}

/* Mantener el logotipo de recuperación con las mismas dimensiones del login. */
.form-box.recovery-box::before {
    width: 76px;
    min-width: 76px;
    height: 76px;
    min-height: 76px;
    flex-basis: 76px;
    background-size: 54px;
}

.form-box h2 {
    text-align: left;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.15;
}

.form-box .descripcion {
    text-align: left;
    line-height: 1.55;
}

.form-box .links {
    width: 100%;
}

.registro-box,
.recovery-box {
    width: min(500px, 100%);
    max-width: 500px;
    height: min(680px, calc(100vh - 56px));
    max-height: 680px;
}

.login-form button[type="submit"],
.registro-box #btnActivar,
.registro-box .form-body button:not(.btn-validar),
.recovery-box .form-body button:not(.btn-validar) {
    background: var(--color-primary);
}

.btn-validar {
    color: var(--white) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-validar:hover:not(:disabled) {
    color: var(--white) !important;
    background: var(--primary-dark) !important;
}

.recovery-box .login-form,
.recovery-box .form-body {
    flex: 0 0 auto;
}

.recovery-box .form-body {
    overflow: visible;
}

/* Anchor tall recovery content at the top: flex centering can push the
   key above the scrollable card when password requirements appear. */
.recuperar-panel .recovery-box {
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}
.recovery-box > .auth-card-icon,
.recovery-box > .form-header,
.registro-box > .auth-card-icon,
.registro-box > .form-header {
    flex-shrink: 0;
}

/* Separación y estados de progreso de la recuperación de contraseña. */
.recovery-box #recoveryVerification,
.recovery-box #recoveryPasswordFields {
    width: 100%;
    flex-direction: column;
    gap: 14px;
}

.recovery-box #recoveryPasswordFields > input,
.recovery-box #recoveryPasswordFields > .form-row,
.recovery-box #recoveryPasswordFields > button {
    margin: 0;
}

.recovery-box button.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: .8;
}

.recovery-box button.is-loading::before {
    width: 16px;
    height: 16px;
    content: "";
    flex: 0 0 16px;
    border: 2px solid rgb(255 255 255 / 45%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: recovery-button-spin .75s linear infinite;
}

@keyframes recovery-button-spin {
    to { transform: rotate(360deg); }
}

.password-requirements {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: #f8faf8;
    box-sizing: border-box;
}

.password-requirements p {
    margin: 0 0 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.password-requirements ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-requirements li {
    position: relative;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
}

.password-requirements li::before {
    position: absolute;
    left: 0;
    content: "•";
    font-weight: 900;
}

.password-requirements li.is-valid { color: #24751b; }
.password-requirements li.is-valid::before { content: "✓"; }
.password-requirements li.is-invalid { color: #b42332; }
.password-requirements li.is-invalid::before { content: "×"; }

.registro-box .form-body input.password-invalid,
.recovery-box .form-body input.password-invalid {
    border-color: #dc3545;
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgb(220 53 69 / 10%);
}

.registro-box .form-body input.password-valid,
.recovery-box .form-body input.password-valid {
    border-color: #39a926;
    background: #fbfffa;
    box-shadow: 0 0 0 3px rgb(57 169 38 / 10%);
}

@media (max-width: 560px) {
    .password-requirements ul { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .container {
        height: auto;
        min-height: 100vh;
        grid-template-columns: 1fr;
    }

    .left-panel {
        width: 100%;
        min-height: 240px;
        justify-content: flex-end;
        padding: 98px 34px 32px;
    }

    .left-panel .logo {
        top: 17px;
        left: 34px;
        width: 250px;
        height: 70px;
    }

    .left-panel h1 {
        margin-bottom: 9px;
        font-size: 29px;
        letter-spacing: -.5px;
    }

    .left-panel p {
        font-size: 15px;
        line-height: 1.45;
    }

    .left-panel .subtitulo,
    .login-brand-security {
        display: none;
    }

    .right-panel {
        width: 100%;
        height: min(720px, calc(100vh - 240px));
        min-height: 620px;
    }

    .form-panel {
        padding: 30px 22px 42px;
        align-items: flex-start;
    }

    .form-box {
        width: min(500px, 100%);
        height: calc(100% - 8px);
        max-height: 680px;
    }
}

@media (max-width: 480px) {
    .left-panel {
        min-height: 205px;
        padding: 88px 22px 24px;
    }

    .left-panel .logo {
        left: 22px;
        width: 220px;
        height: 62px;
    }

    .left-panel h1 {
        font-size: 25px;
    }

    .left-panel p {
        display: none;
    }

    .right-panel {
        height: calc(100vh - 205px);
        min-height: 590px;
    }

    .form-panel {
        padding: 20px 14px 32px;
    }

    .form-box {
        height: calc(100% - 8px);
        padding: 25px 20px;
        border-radius: 17px;
    }

    .form-box::before {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
        background-size: 45px;
    }

    .form-box.recovery-box::before {
        width: 64px;
        min-width: 64px;
        height: 64px;
        min-height: 64px;
        flex-basis: 64px;
        background-size: 45px;
    }

    .auth-card-icon {
        width: 64px;
        min-width: 64px;
        height: 64px;
        min-height: 64px;
        flex-basis: 64px;
        font-size: 23px;
    }
}

/* =========================================================
   REGISTRO: ALINEACIÓN Y ALTURA ESTABLE
========================================================= */

.registro-panel {
    padding-block: 24px;
}

.registro-panel .registro-box {
    height: min(760px, calc(100vh - 48px));
    max-height: 760px;
    justify-content: flex-start;
    overflow: hidden;
    padding: clamp(24px, 3vw, 38px);
}

.registro-box .auth-card-icon {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    flex-basis: 52px;
    margin-bottom: 14px;
    border-radius: 15px;
    font-size: 20px;
}

.registro-box .form-header {
    width: 100%;
}

.registro-box .form-header h2 {
    margin-bottom: 6px;
}

.registro-box .form-header .descripcion {
    margin-bottom: 18px;
}

.registro-box .login-form {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.registro-box .form-body {
    min-width: 0;
    padding: 2px 6px 4px 2px;
    gap: 12px;
    scrollbar-gutter: stable;
}

.registro-box .form-body > input,
.registro-box .form-row,
.registro-box .separator {
    flex: 0 0 auto;
}

.registro-box .form-body > input {
    min-height: 52px;
}

.registro-box .form-row > * {
    min-width: 0;
}

.registro-box .form-row-action {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .82fr);
    align-items: stretch;
}

.registro-box .form-row-action input,
.registro-box .form-row-action button {
    height: 52px;
    min-height: 52px;
}

.registro-box .form-footer {
    margin-top: 14px;
    padding-top: 2px;
    background: var(--white);
}

.registro-box #btnActivar {
    display: block;
    height: 54px;
    margin: 0;
}

.registro-box .links {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .registro-panel {
        padding-block: 24px;
    }

    .registro-panel .registro-box {
        min-height: 0;
        padding: 24px;
        overflow: hidden;
    }
}

@media (max-width: 560px) {
    .registro-box .form-row,
    .registro-box .form-row-action {
        grid-template-columns: 1fr;
    }

    .registro-panel .registro-box {
        height: auto;
        min-height: 760px;
        max-height: none;
        overflow: visible;
    }

    .registro-box .login-form {
        display: flex;
    }

    .registro-box .form-body {
        overflow: visible;
    }
}

@media (max-height: 720px) and (min-width: 561px) {
    .registro-panel .registro-box {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .registro-box .login-form {
        flex: 0 0 auto;
        display: flex;
        min-height: auto;
    }

    .registro-box .form-body {
        flex: 0 0 auto;
        overflow: visible;
        padding-right: 2px;
    }

    .registro-box .form-footer {
        flex: 0 0 auto;
    }
}

/* =========================================================
   CALENDARIO OVC
========================================================= */
.ovc-date-field{position:relative;width:100%;min-width:0}
.ovc-date-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ovc-date-trigger{width:100%;height:52px;display:flex;align-items:center;gap:11px;padding:0 14px;border:1px solid var(--border-default);border-radius:10px;background:var(--white);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.ovc-date-trigger:hover{border-color:var(--primary-border)}
.ovc-date-trigger:focus-visible,.ovc-date-field.is-open .ovc-date-trigger{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 4px var(--primary-surface)}
.ovc-date-trigger i{color:var(--color-primary)}
.ovc-date-copy{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.ovc-date-label{overflow:hidden;color:var(--primary-dark);font-size:10px;font-weight:700;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.ovc-date-value{color:var(--text-primary)}
.ovc-date-value.is-placeholder{color:var(--text-muted)}
.ovc-calendar{position:fixed;z-index:1000000;width:min(340px,calc(100vw - 28px));padding:16px;border:1px solid var(--border-default);border-radius:16px;background:var(--white);box-shadow:0 18px 48px rgb(23 52 32 / 18%);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;pointer-events:none;transition:opacity .16s,transform .16s}
.ovc-calendar.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ovc-calendar-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;margin-bottom:13px}
.ovc-calendar-nav{width:40px;height:40px;border:0;border-radius:10px;color:var(--primary-dark);background:var(--primary-surface);cursor:pointer}
.ovc-calendar-nav:hover{background:var(--primary-border)}
.ovc-calendar-title{display:flex;justify-content:center;gap:7px}
.ovc-calendar-select{min-width:0;height:40px;padding:0 8px;border:1px solid var(--border-default);border-radius:9px;color:var(--text-primary);background:var(--white);font:700 13px Lato,Arial,sans-serif;outline:0}
.ovc-calendar-select:focus{border-color:var(--color-primary)}
.ovc-calendar-week,.ovc-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ovc-calendar-week span{padding:5px 0;color:var(--text-muted);font-size:11px;font-weight:700;text-align:center;text-transform:uppercase}
.ovc-calendar-day{aspect-ratio:1;border:0;border-radius:10px;color:var(--text-primary);background:transparent;font:700 13px Lato,Arial,sans-serif;cursor:pointer}
.ovc-calendar-day:hover{color:var(--primary-dark);background:var(--primary-surface)}
.ovc-calendar-day.is-outside{color:var(--gray-400)}
.ovc-calendar-day.is-today{box-shadow:inset 0 0 0 1px var(--color-primary)}
.ovc-calendar-day.is-selected{color:var(--white);background:var(--color-primary);box-shadow:0 5px 12px var(--primary-shadow)}
.ovc-calendar-footer{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-default)}
.ovc-calendar-action{padding:8px 10px;border:0;border-radius:8px;color:var(--primary-dark);background:transparent;font:700 12px Lato,Arial,sans-serif;cursor:pointer}
.ovc-calendar-action:hover{background:var(--primary-surface)}
@media(max-width:480px){.ovc-calendar{padding:14px;border-radius:14px}.ovc-calendar-day{border-radius:8px}}

/* El disparador del calendario es un campo, no un botón de acción. */
.recovery-box .form-body button.ovc-date-trigger,
.registro-box .form-body button.ovc-date-trigger {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--white);
    box-shadow: 0 2px 7px rgb(0 0 0 / 3%);
    transform: none;
}

.recovery-box .form-body button.ovc-date-trigger:hover,
.registro-box .form-body button.ovc-date-trigger:hover {
    border-color: var(--primary-border);
    color: var(--text-primary);
    background: var(--white);
    box-shadow: 0 2px 7px rgb(0 0 0 / 3%);
    transform: none;
    filter: none;
}

.recovery-box .form-body button.ovc-date-trigger:focus-visible,
.registro-box .form-body button.ovc-date-trigger:focus-visible,
.recovery-box .ovc-date-field.is-open button.ovc-date-trigger,
.registro-box .ovc-date-field.is-open button.ovc-date-trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--primary-surface);
}

.recovery-box .ovc-date-trigger .ovc-date-value,
.registro-box .ovc-date-trigger .ovc-date-value {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recovery-box .ovc-date-trigger .ovc-date-label,
.registro-box .ovc-date-trigger .ovc-date-label {
    display: block;
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recovery-box .ovc-date-trigger .ovc-date-value.is-placeholder,
.registro-box .ovc-date-trigger .ovc-date-value.is-placeholder {
    color: var(--text-muted);
}

.recovery-box .ovc-date-trigger i,
.registro-box .ovc-date-trigger i {
    flex: 0 0 auto;
    color: var(--color-primary);
}

/* El registro es más alto que las otras vistas del carrusel. En pantallas
   reducidas debe desplazarse como página y comenzar siempre desde arriba. */
@media (max-width: 900px) {
    .registro-panel {
        align-items: flex-start;
        justify-content: center;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .registro-panel .registro-box {
        height: auto;
        min-height: 700px;
        max-height: none;
        flex: 0 0 auto;
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .registro-panel .registro-box {
        min-height: 650px;
    }
}

/* En tablet, OVC conserva las mismas proporciones visuales de OVCADMIN. */
@media (min-width: 481px) and (max-width: 900px) {
    .left-panel {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
        justify-content: flex-end;
        padding: 98px 34px 32px;
        box-sizing: border-box;
    }

    .right-panel {
        height: calc(100vh - 240px);
        min-height: 660px;
    }

    .login-panel .form-box,
    .recovery-panel .form-box {
        height: 620px;
        min-height: 620px;
        max-height: 620px;
    }
}

/* Escala tipográfica compartida por los accesos OVC y OVCADMIN. */
.login-panel .form-box{width:min(500px,100%);padding:48px}
.login-panel .auth-card-icon{width:76px;min-width:76px;height:76px;min-height:76px;flex-basis:76px;margin-bottom:22px;font-size:27px}
.login-panel .form-box h2{margin:0 0 8px;font-size:34px;font-weight:800;line-height:1.15}
.login-panel .form-box .descripcion{margin:0 0 28px;font-size:14px;line-height:1.6}
.login-panel .input-group{height:58px;margin-bottom:16px}
.login-panel .input-group input{font-size:15px}
.login-panel .input-icon{left:18px;width:21px;height:21px;color:var(--text-primary);font-size:17px}
.login-panel .input-icon i{display:block;line-height:1}
.auth-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.login-panel .login-form button[type="submit"]{height:58px;font-size:16px;font-weight:700}
.login-panel .links{margin-top:28px;gap:20px}
.login-panel .links a{font-size:14px;font-weight:700}

@media (max-width:900px){
    .login-panel .form-box{padding:40px}
    .login-panel .form-box h2{font-size:32px}
}

@media (max-width:480px){
    .login-panel .form-box{padding:25px 20px}
    .login-panel .auth-card-icon{width:64px;min-width:64px;height:64px;min-height:64px;flex-basis:64px;margin-bottom:20px;font-size:23px}
    .login-panel .form-box h2{font-size:28px}
    .login-panel .form-box .descripcion{font-size:14px}
    .login-panel .links{gap:12px}
    .login-panel .links a{font-size:13px}
}

/* Controles de visibilidad dentro de registro y recuperación. */
.registro-box .inline-password-field,
.recovery-box .inline-password-field{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:52px!important;
    min-height:52px!important;
}
.registro-box .inline-password-field>input,
.recovery-box .inline-password-field>input{
    width:100%!important;
    height:100%!important;
    min-height:52px!important;
    padding-right:50px!important;
}
.registro-box .inline-password-field>.password-toggle,
.recovery-box .inline-password-field>.password-toggle{
    position:absolute!important;
    top:50%!important;
    right:8px!important;
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    transform:translateY(-50%)!important;
    color:#718078!important;
    background:transparent!important;
    box-shadow:none!important;
}
.registro-box .inline-password-field>.password-toggle:hover,
.recovery-box .inline-password-field>.password-toggle:hover{
    color:var(--color-tertiary)!important;
    background:var(--portal-blue-soft,#edf4fd)!important;
}

/* Cabecera compacta institucional para el acceso responsivo de socios. */
@media (max-width:900px){
    .container{grid-template-rows:156px auto}
    .left-panel{
        z-index:4;
        display:block;
        height:156px;
        min-height:156px;
        max-height:156px;
        padding:0;
        overflow:visible;
        background:var(--color-primary)
    }
    .left-panel::before{
        inset:0 0 0 auto;
        width:58%;
        height:100%;
        border-radius:0;
        background:var(--logo-solo) no-repeat right -18px center/175px;
        opacity:.16
    }
    .left-panel::after{display:none}
    .login-brand-copy{
        position:absolute;
        top:17px;
        left:50%;
        width:min(360px,calc(100% - 112px));
        height:96px;
        min-height:96px;
        max-height:96px;
        padding:10px 18px 30px;
        overflow:hidden;
        border-radius:18px 18px 0 0;
        background:#fff;
        box-shadow:0 8px 22px rgba(16,65,24,.16);
        box-sizing:border-box;
        text-align:center;
        transform:translateX(-50%)
    }
    .left-panel h1{
        max-width:none;
        margin:0;
        color:var(--color-tertiary);
        font-size:20px;
        line-height:1.2;
        letter-spacing:0
    }
    .left-panel p{
        max-width:310px;
        margin:6px auto 0;
        color:#17231b;
        font-size:9px;
        line-height:1.35
    }
    .left-panel .subtitulo{
        position:absolute;
        right:0;
        bottom:0;
        left:0;
        display:flex!important;
        width:auto!important;
        padding:0!important;
        border-radius:0!important;
        align-items:center;
        justify-content:center;
        height:25px;
        margin:0;
        color:var(--color-tertiary);
        background:var(--color-secondary);
        font-size:16px;
        font-weight:900;
        letter-spacing:0
    }
    .left-panel .logo{
        top:auto!important;
        bottom:-4px;
        left:50%;
        z-index:3;
        width:150px!important;
        min-width:150px!important;
        max-width:150px!important;
        height:48px!important;
        min-height:48px!important;
        max-height:48px!important;
        padding:0!important;
        margin:0;
        border-radius:17px 17px 0 0;
        background-color:#fff!important;
        background-image:var(--logo-navbar)!important;
        background-position:center!important;
        background-repeat:no-repeat!important;
        background-size:126px auto!important;
        box-sizing:border-box;
        box-shadow:0 -2px 10px rgba(21,70,28,.10);
        transform:translateX(-50%)
    }
    .login-brand-security,.login-brand-points{display:none}
    .right-panel{height:calc(100dvh - 156px);min-height:590px}
    .form-panel{padding-top:14px}
}
@media (max-width:480px){
    .login-brand-copy{width:calc(100% - 112px)}
    .left-panel p{display:none}
    .left-panel h1{font-size:18px}
}

/* Authentication forms are part of the page, not floating white cards.
   Preserve existing dimensions and scrolling for the expanded forms. */
.right-panel .form-panel .form-box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.right-panel .registro-box .form-footer {
    background: transparent;
}
.right-panel .auth-card-icon {
    box-shadow: none;
}
.right-panel .login-form input:not([type="hidden"]):not(.ovc-date-native),
.right-panel .login-form button.ovc-date-trigger {
    background-color: #fff;
}

/* A single, centered description replaces the login slogan. */
@media (max-width: 900px) {
    html { height: auto !important; overflow-y: auto !important; }
    body { height: auto !important; min-height: 100dvh; overflow-y: auto !important; }
    body .container { height: auto !important; min-height: 100dvh; overflow: visible !important; grid-template-rows: auto auto !important; }
    body .container .left-panel { position: relative !important; top: auto !important; }
    body .container .right-panel { height: auto !important; min-height: 0 !important; overflow: visible !important; }
    body .right-panel .form-panel { position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important; transform: none !important; padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important; }
    body .right-panel .form-panel:not(.login-panel) { display: none; }
    body .right-panel.mostrar-registro .login-panel,
    body .right-panel.mostrar-recuperacion .login-panel { display: none; }
    body .right-panel.mostrar-registro .registro-panel,
    body .right-panel.mostrar-recuperacion .recuperar-panel { display: flex; }
    body .right-panel .form-panel .form-box { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; justify-content: flex-start !important; }
    body .registro-box .login-form { display: flex !important; flex: 0 0 auto !important; }
    body .registro-box .form-body { overflow: visible !important; }
}
@media (max-width: 900px) {
    .container .left-panel .logo { bottom: 0 !important; }
}
.container .left-panel .login-brand-copy p {
    display: block !important;
    width: 100%;
    max-width: 460px !important;
    margin: 24px auto !important;
    font-size: clamp(20px, 1.8vw, 26px) !important;
    line-height: 1.5 !important;
    font-weight: 600;
    text-align: center !important;
    text-wrap: balance;
}
@media (max-width: 900px) {
    .container .left-panel .login-brand-copy {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .container .left-panel .login-brand-copy p {
        max-width: 390px !important;
        margin: 0 auto !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
    }
}
@media (max-width: 480px) {
    .container .left-panel .login-brand-copy p {
        font-size: 14px !important;
    }
}
/* Recovery: only fields scroll; the heading and actions stay visible. */
body .right-panel .recuperar-panel .recovery-box{display:flex!important;flex-direction:column!important;height:min(780px,calc(100dvh - 80px))!important;max-height:calc(100dvh - 40px)!important;min-height:0!important;overflow:hidden!important;justify-content:flex-start!important}
body .recovery-box #recoveryForm{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important}
body .recovery-box #recoveryForm .form-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:10px}
body .recovery-box .form-footer{flex:0 0 auto!important;padding-top:16px;background:transparent}
body .recovery-box #btnRestablecerRecovery{width:100%;min-height:52px;margin:0 0 12px;border:0;border-radius:12px;background:var(--color-primary);color:#fff;font:700 16px Lato,Arial,sans-serif;cursor:pointer}
body .recovery-box #btnRestablecerRecovery:disabled{opacity:.55;cursor:not-allowed}
body .recovery-box #btnRestablecerRecovery[hidden]{display:none!important}
@media(max-width:900px){body .right-panel .recuperar-panel .recovery-box{height:calc(100dvh - 200px)!important;min-height:360px!important;max-height:none!important}body .right-panel .recuperar-panel{padding-bottom:20px!important}}