/*==============================================================================
= Sistema de Inscripción - ITSSMT
===============================================================================
= Archivo: login.css
= Descripción: Estilos exclusivos para la pantalla de Inicio de Sesión
==============================================================================*/
/*==============================================================================
= FONDO
==============================================================================*/
body{
    background:
        radial-gradient(circle at top left,
            rgba(184,214,122,.18),
            transparent 30%),
        radial-gradient(circle at bottom right,
            rgba(55,96,115,.15),
            transparent 30%),
        var(--color-body);
}
/*==============================================================================
= LOGIN
==============================================================================*/
.login-wrapper{
    min-height:100vh;
}
.card-login{
    border:none;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}
/*==============================================================================
= PANEL INSTITUCIONAL
==============================================================================*/
.login-brand{
    background:linear-gradient(
        180deg,
        var(--color-primario),
        var(--color-terciario)
    );
    color:#FFFFFF;
}
.login-brand img{
    width:180px;
    max-width:100%;
    margin-bottom:2rem;
}
.login-brand h1{
    font-size:1.80rem;
    font-weight:700;
    margin-bottom:1rem;
}
.login-brand p{
    opacity:.90;
    line-height:1.6;
    margin-bottom:0;
}
/*==============================================================================
= PANEL DERECHO
==============================================================================*/
.login-body{
    background:#FFFFFF;
}
.login-body h2{
    font-weight:700;
    color:var(--color-terciario);
}
.login-body p{
    color:var(--color-texto-light);
}
/*==============================================================================
= TABS
==============================================================================*/
.nav-tabs{
    border-bottom:1px solid var(--color-borde);
}
.nav-tabs .nav-link{
    color:var(--color-texto-light);
    font-weight:600;
    border:none;
    border-bottom:3px solid transparent;
    transition:var(--transition-fast);
}
.nav-tabs .nav-link:hover{
    color:var(--color-primario);
}
.nav-tabs .nav-link.active{
    color:var(--color-primario);
    background:transparent;
    border:none;
    border-bottom:3px solid var(--color-secundario);
}
/*==============================================================================
= FORMULARIOS
==============================================================================*/
.login-body .form-control{
    height:48px;
}
.login-body .input-group .btn{
    min-width:48px;
}
/*==============================================================================
= BOTÓN
==============================================================================*/
.login-body .btn-primary{
    height:48px;
    font-size:1rem;
    font-weight:600;
}
/*==============================================================================
= LOGO
==============================================================================*/
.login-logo{
    animation:fadeLogo .80s ease;
}
@keyframes fadeLogo{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/*==============================================================================
= ANIMACIÓN DEL LOGIN
==============================================================================*/
.card-login{
    animation:fadeCard .40s ease;
}
@keyframes fadeCard{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/*==============================================================================
= RESPONSIVE
==============================================================================*/
@media (max-width:991.98px){
    .login-brand{
        display:none !important;
    }
    .card-login{
        margin:1rem;
    }
}
@media (max-width:767.98px){
    .login-body{
        padding:2rem !important;
    }
}
@media (max-width:575.98px){
    .login-body{
        padding:1.50rem !important;
    }
    .login-body h2{
        font-size:1.40rem;
    }
    .nav-tabs .nav-link{
        font-size:.90rem;
    }
}