/* Esta hoja solo la carga layouts/login.blade.php: es seguro fijar overflow
   del body acá, ya que ninguna otra pantalla la comparte. */
body {
    overflow: hidden;
}

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    padding: 1rem;
    background: linear-gradient(135deg, var(--color-azul-900) 0%, var(--color-azul-100) 100%);
    font-family: var(--font-sans);
}

.login__title {
    color: var(--color-naranja-600);
}

.login__link {
    color: var(--color-azul-600);
    text-decoration: underline;
}

.login__link:hover {
    color: var(--color-azul-700);
}

.form_login {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 22rem;
    max-width: 90vw;
    max-height: 100%;
    overflow-y: auto;
    background-color: var(--color-surface);
    padding: 2.5rem 2.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border-top: 3px solid var(--color-azul-700);
}

/* Los labels de x-cmp-input / x-cmp-input-psw traen su propio mb-3, que se
   sumaba al gap del flex y duplicaba el espaciado vertical. Se anula acá,
   sin tocar el componente compartido con otras pantallas. */
.form_login label {
    margin-bottom: 0;
}

.login__bloq-mayus {
    color: var(--color-naranja-600);
    font-weight: 600;
    margin: 0;
}

[x-cloak] {
    display: none !important;
}

/* En pantallas bajas (celular en horizontal, ventanas chicas) se reduce el
   padding y el espaciado interno para que el formulario entre sin scroll. */
@media (max-height: 700px) {
    .form_login {
        gap: 0.65rem;
        padding: 1.5rem 2.25rem;
    }
}