/**
 * Login responsive: correcta visualización en móvil, tablet y desktop.
 *
 * El tema usa .login-body { display: table; margin: auto; } lo que encoge el
 * contenedor al ancho del formulario (~450px) y el fondo solo cubre esa columna.
 * Forzamos ancho completo y flex para centrar el formulario sin shrink.
 */
.main-wrapper.login-body {
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100%;
    max-width: none;
    min-width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    background-color: #eef2ee;
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.4)
        ),
        url("../img/login-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 767.98px) {
    .main-wrapper.login-body {
        background-attachment: scroll;
    }
}

.login-wrapper .container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Mismo ancho que el tema (~450px); no 100% del .container o el card se estira en desktop */
.login-wrapper .loginbox {
    max-width: 450px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.32);
    box-sizing: border-box;
}

.login-wrapper .loginbox .login-right {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

/* Logo del login: escala en pantallas pequeñas */
.login-wrapper .login-right-wrap .text-center img.img-fluid {
    max-height: 180px;
    height: auto;
    width: auto;
    max-width: 100%;
}
@media (max-width: 575.98px) {
    .login-wrapper .login-right-wrap .text-center img.img-fluid {
        max-height: 140px;
    }
    .login-wrapper .loginbox .login-right {
        padding: 1.25rem 0.75rem;
    }
}
@media (max-width: 374px) {
    .login-wrapper .login-right-wrap .text-center img.img-fluid {
        max-height: 110px;
    }
    .login-wrapper .loginbox .login-right .login-right-wrap h1 {
        font-size: 22px;
    }
}

/* Evitar desborde en filas del formulario */
.login-right-wrap .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.login-right-wrap .row [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
@media (max-width: 575.98px) {
    .login-right-wrap .row .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .login-right-wrap .row .col-6.text-end {
        text-align: center !important;
        margin-top: 0.5rem;
    }
}

/* Botón y inputs a ancho completo en móvil */
.login-right-wrap .form-control,
.login-right-wrap .btn {
    max-width: 100%;
    box-sizing: border-box;
}

.login-body .login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    width: 100%;
    min-height: 0;
    height: auto;
    vertical-align: unset;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .login-body .login-wrapper {
        display: flex;
        padding: 1rem 0;
    }
}