/* ==========================================================================
   ASODIB
   Archivo: assets/css/login.css
   Hoja de estilos del acceso al Portal de Afiliados.
   Dependencias:
   - variables.css
   - Bootstrap 5
   Contiene únicamente estilos específicos del acceso.
   ========================================================================== */
/* ==========================================================================
   CONTENEDOR GENERAL
   ========================================================================== */
body{
    margin:0;
    padding:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--fuente-principal);
    background:
        linear-gradient(
            rgba(10,78,155,.08),
            rgba(10,78,155,.08)
        ),
        var(--color-fondo);
}
/* ==========================================================================
   CONTENEDOR LOGIN
   ========================================================================== */
.login-container{
    width:100%;
    max-width:480px;
    padding:var(--espacio-6);
}
/* ==========================================================================
   TARJETA LOGIN
   ========================================================================== */
.login-box{
    padding:2.5rem;
    border-radius:var(--radio-xl);
    background:var(--color-blanco);
    box-shadow:var(--sombra-xl);
    animation:loginFade .7s ease;
}
/* ==========================================================================
   LOGO
   ========================================================================== */
.logo-login{
    display:block;
    width:170px;
    height:auto;
    margin:0 auto var(--espacio-5);
    transition:transform var(--transicion-normal);
}
.logo-login:hover{
    transform:scale(1.03);
}
/* ==========================================================================
   TÍTULOS
   ========================================================================== */
.login-box h1{
    margin-bottom:var(--espacio-2);
    color:var(--color-primario);
    font-size:var(--titulo-h2);
    font-weight:var(--peso-negrita);
    text-align:center;
}
.login-box h2{
    margin-bottom:var(--espacio-1);
    color:var(--color-gris-700);
    font-size:var(--texto-xl);
    text-align:center;
}
.login-box h3{
    margin-bottom:var(--espacio-6);
    color:var(--color-texto-secundario);
    font-size:var(--texto-sm);
    font-weight:var(--peso-normal);
    text-align:center;
}
/* ==========================================================================
   FORMULARIO
   ========================================================================== */
.campo{
    margin-bottom:var(--espacio-5);
}
.campo label{
    display:block;
    margin-bottom:var(--espacio-2);
    color:var(--color-gris-700);
    font-weight:var(--peso-semibold);
}
.campo input{
    box-sizing:border-box;
    width:100%;
    padding:.85rem var(--espacio-4);
    border:var(--ancho-borde) solid var(--color-gris-400);
    border-radius:var(--radio-input);
    color:var(--color-texto);
    background:var(--color-blanco);
    font-size:var(--texto-md);
    transition:
        border-color var(--transicion-normal),
        box-shadow var(--transicion-normal);
}
.campo input:focus{
    border-color:var(--color-primario);
    outline:none;
    box-shadow:var(--sombra-focus);
}
/* ==========================================================================
   BOTÓN LOGIN
   ========================================================================== */
.btn-login{
    width:100%;
    padding:.9rem;
    border:0;
    border-radius:var(--radio-boton);
    background:linear-gradient(
        135deg,
        var(--color-primario),
        var(--color-secundario)
    );
    color:var(--color-blanco);
    font-size:var(--texto-md);
    font-weight:var(--peso-semibold);
    cursor:pointer;
    transition:
        transform var(--transicion-normal),
        box-shadow var(--transicion-normal);
}
.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:var(--sombra-md);
}
/* ==========================================================================
   ENLACES
   ========================================================================== */
.login-links{
    margin-top:var(--espacio-5);
    text-align:center;
}
.login-links a{
    color:var(--color-enlace);
    font-size:var(--texto-sm);
    text-decoration:none;
}
.login-links a:hover{
    color:var(--color-enlace-hover);
    text-decoration:underline;
}
/* ==========================================================================
   MENSAJES
   ========================================================================== */
#mensaje{
    display:none;
    margin-top:var(--espacio-5);
    padding:var(--espacio-3);
    border-radius:var(--radio-md);
    text-align:center;
}
.mensaje-error{
    background:var(--color-peligro-suave);
    color:#842029;
}
.mensaje-exito{
    background:var(--color-exito-suave);
    color:#0f5132;
}
.mensaje-info{
    background:var(--color-info-suave);
    color:#055160;
}
/* ==========================================================================
   PIE
   ========================================================================== */
.login-footer{
    margin-top:var(--espacio-6);
    color:var(--color-texto-secundario);
    font-size:var(--texto-xs);
    text-align:center;
}
.login-footer a{
    color:var(--color-enlace);
    text-decoration:none;
}
.login-footer a:hover{
    color:var(--color-enlace-hover);
    text-decoration:underline;
}
/* ==========================================================================
   ANIMACIÓN
   ========================================================================== */
@keyframes loginFade{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:576px){
    .login-container{
        padding:var(--espacio-4);
    }
    .login-box{
        padding:var(--espacio-6) var(--espacio-5);
    }
    .logo-login{
        width:140px;
    }
    .login-box h1{
        font-size:var(--titulo-h3);
    }
    .login-box h2{
        font-size:var(--texto-lg);
    }
}
/* ==========================================================================
   ACCESIBILIDAD
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
    .logo-login,
    .login-box,
    .btn-login{
        transition:none;
        animation:none;
    }
}