/*
 * Expreso Loma Grande · Ajuste de login 3.3
 * Campos más proporcionados y fondo exterior más elegante.
 * No modifica autenticación, consultas, usuarios ni contraseñas.
 */

/* Fondo exterior: azul grisáceo profesional con detalles muy suaves. */
.login-page-v3 {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(22, 78, 170, .18), transparent 31%),
        radial-gradient(circle at 86% 82%, rgba(205, 157, 28, .10), transparent 27%),
        linear-gradient(135deg, #dfe8f6 0%, #f5f8fc 48%, #e6edf8 100%) !important;
}

.login-page-v3::before,
.login-page-v3::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
}

.login-page-v3::before {
    width: 330px;
    height: 330px;
    top: -145px;
    right: -95px;
    border: 1px solid rgba(19, 72, 157, .10);
    box-shadow:
        0 0 0 42px rgba(19, 72, 157, .025),
        0 0 0 88px rgba(19, 72, 157, .018);
}

.login-page-v3::after {
    width: 260px;
    height: 260px;
    left: -105px;
    bottom: -120px;
    border: 1px solid rgba(206, 157, 24, .12);
    box-shadow:
        0 0 0 36px rgba(206, 157, 24, .025),
        0 0 0 75px rgba(206, 157, 24, .016);
}

/* Panel con borde un poco más definido para separarlo del fondo. */
.login-shell-v3 {
    border-color: rgba(24, 58, 111, .15) !important;
    box-shadow:
        0 24px 62px rgba(11, 36, 79, .16),
        0 2px 8px rgba(11, 36, 79, .05) !important;
}

/* El lado derecho deja de parecer un gran bloque blanco vacío. */
.login-card-v3 {
    position: relative;
    background:
        radial-gradient(circle at 92% 8%, rgba(31, 100, 225, .055), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
}

.login-card-v3::before {
    content: "";
    position: absolute;
    inset: 18px;
    pointer-events: none;
    border: 1px solid rgba(31, 77, 150, .065);
    border-radius: 14px;
}

/* ================================================================
   COMPUTADORA: formulario y textboxes más cortos.
   ================================================================ */
@media (min-width: 761px) {
    .login-shell-v3 {
        width: min(760px, 92vw);
        min-height: 418px;
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .login-brand-v3 {
        padding-inline: 21px;
    }

    .login-card-v3 {
        padding: 23px 31px;
    }

    .login-card-inner {
        position: relative;
        z-index: 1;
        width: min(310px, 100%) !important;
        margin-inline: auto;
    }

    .login-form-v3 {
        width: 100%;
        margin-inline: auto;
    }

    .login-input-wrap,
    .login-submit {
        width: 100%;
    }

    .login-input-wrap input {
        min-height: 39px;
    }

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

    .login-card-header-v3 {
        margin-bottom: 13px;
    }

    .login-security {
        max-width: 270px;
        margin-inline: auto;
    }
}

/* Notebook pequeña: conserva proporciones sin apretar demasiado. */
@media (min-width: 761px) and (max-width: 980px) {
    .login-shell-v3 {
        width: min(735px, 95vw);
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .login-card-inner {
        width: min(300px, 100%) !important;
    }
}

/* ================================================================
   CELULAR: marco más estrecho y fondo más limpio.
   ================================================================ */
@media (max-width: 760px) {
    .login-page-v3 {
        background:
            radial-gradient(circle at 50% -5%, rgba(16, 65, 151, .18), transparent 31%),
            linear-gradient(180deg, #e5edf8 0%, #f5f8fc 55%, #eaf0f9 100%) !important;
    }

    .login-page-v3::before {
        width: 190px;
        height: 190px;
        top: -105px;
        right: -72px;
        box-shadow: 0 0 0 31px rgba(19, 72, 157, .022);
    }

    .login-page-v3::after {
        display: none;
    }

    .login-shell-v3 {
        width: min(390px, 100%);
    }

    .login-card-v3::before {
        inset: 8px;
        border-radius: 10px;
    }

    .login-card-inner {
        position: relative;
        z-index: 1;
        width: min(326px, 100%);
        margin-inline: auto;
    }

    .login-form-v3 {
        width: 100%;
    }

    .login-input-wrap input,
    .login-submit {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .login-card-inner {
        width: 100%;
    }
}