html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.front-container {
    min-height: 100vh;
    min-height: 100dvh;
}

/*
    Login responsivo para pantallas normales y tótems.
    El problema original venía de col-lg-2: en pantallas altas y angostas
    el formulario quedaba demasiado comprimido. Acá se controla el ancho
    por CSS con mínimo, máximo y valores relativos a la pantalla.
*/
.login-screen {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(18px, 3vw, 44px);
}

.login-wrap {
    width: min(100%, 430px);
    min-width: min(360px, calc(100vw - 32px));
    margin: 0 auto;
}

.login-card {
    width: 100%;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
}

.login-card-body {
    padding: clamp(28px, 4vw, 46px) clamp(24px, 4vw, 42px);
}

.login-card img {
    width: clamp(120px, 12vw, 200px);
    height: clamp(48px, 4.8vw, 80px);
}

.login-card h1 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.login-card p {
    margin-bottom: 0;
    color: #6f7480;
}

.login-card .form-control {
    min-height: 48px;
    border-radius: 12px;
    font-size: 1rem;
}

.login-card .btn-lg {
    min-height: 50px;
    border-radius: 12px;
    font-weight: 600;
}

.login-links {
    gap: 18px;
}

/* Tótem vertical: mantiene un ancho cómodo aunque la pantalla sea angosta. */
@media (orientation: portrait) and (min-width: 520px) {
    .login-wrap {
        width: min(72vw, 460px);
        min-width: 410px;
    }
}

/* Tótem horizontal o desktop: no se estira demasiado, queda centrado y legible. */
@media (orientation: landscape) and (min-width: 900px) {
    .login-wrap {
        width: clamp(390px, 28vw, 460px);
    }
}

/* Celulares o pantallas extremadamente angostas: evita overflow lateral. */
@media (max-width: 420px) {
    html, body {
        overflow-y: auto;
    }

    .login-screen {
        padding: 14px;
    }

    .login-wrap {
        width: 100%;
        min-width: 0;
    }

    .login-card {
        border-radius: 18px;
    }

    .login-card-body {
        padding: 24px 18px;
    }

    .login-links {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* Pantallas bajas: reduce espacios para que no corte el formulario. */
@media (max-height: 620px) {
    html, body {
        overflow-y: auto;
    }

    .login-screen {
        align-items: flex-start !important;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .login-card-body {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    #loginForm {
        margin-top: 1rem !important;
    }

    #loginForm .d-grid {
        margin-top: 1.5rem !important;
    }
}