/* ============================================================
 * Archivo: public/login.css
 * Descripción: Estilos para la página de login.
 * ============================================================ */

.login-contenedor {
    min-height: calc(100vh - 75px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background:
        linear-gradient(90deg, rgba(9, 34, 32, 0.48), rgba(9, 34, 32, 0.18)),
        linear-gradient(135deg, rgba(25, 63, 60, 0.98) 0%, rgba(25, 63, 60, 0.98) 62%, rgba(188, 228, 224, 0.82) 62%, rgba(188, 228, 224, 0.82) 64%, rgba(7, 43, 46, 0.98) 64%, rgba(7, 43, 46, 0.98) 100%);
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: var(--color-blanco);
    border-radius: var(--radio-lg);
    padding: 42px 38px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(188, 228, 224, 0.55);
}

.login-brand {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin: 0 auto 18px;
    color: var(--color-primario);
    background: var(--color-blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-media);
}

.login-card h2 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--color-texto);
    font-size: 1.95rem;
    font-weight: 800;
    text-transform: uppercase;
}

.login-card .subtitulo {
    text-align: center;
    color: var(--color-texto-secundario);
    margin-bottom: 35px;
    font-size: 1rem;
}

.login-input {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input .ui-icon {
    position: absolute;
    left: 16px;
    color: var(--color-texto-secundario);
}

.login-input input {
    padding-left: 46px;
    border-radius: 999px;
    min-height: 50px;
    background: #edf6f5;
}

.login-volver {
    text-align: center;
    margin-top: 18px;
    font-size: 0.9rem;
}

.login-volver a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    color: var(--color-texto);
    font-weight: 800;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(25, 63, 60, 0.06);
}

.login-volver a:hover {
    background: var(--color-fondo-oscuro);
    color: var(--color-blanco);
    transform: translateY(-2px);
}

.login-volver a:focus-visible {
    outline: 3px solid rgba(72, 180, 170, 0.28);
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .login-contenedor {
        min-height: calc(100vh - 68px);
        padding: 28px 16px;
        background:
            linear-gradient(90deg, rgba(9, 34, 32, 0.54), rgba(9, 34, 32, 0.22)),
            linear-gradient(135deg, rgba(25, 63, 60, 0.98) 0%, rgba(25, 63, 60, 0.98) 70%, rgba(188, 228, 224, 0.74) 70%, rgba(188, 228, 224, 0.74) 72%, rgba(7, 43, 46, 0.98) 72%, rgba(7, 43, 46, 0.98) 100%);
    }

    .login-card {
        padding: 34px 24px;
    }
}