/*=========================================
LOGIN
=========================================*/

.login-body{

    margin:0;
    min-height:100vh;

    font-family:
    "Segoe UI",
    sans-serif;

    background:
    linear-gradient(
        135deg,
        #0f5132 0%,
        #198754 55%,
        #dff5e6 100%
    );

}


/*=========================================
LAYOUT
=========================================*/

.login-wrapper{

    width:100%;
    min-height:100vh;

    display:grid;

    grid-template-columns:
    1.1fr
    .9fr;

}


/*=========================================
PANEL IZQUIERDO
=========================================*/

.login-left{

    display:flex;
    align-items:center;
    justify-content:center;

    padding:70px;

    color:#fff;

}

.login-left-content{

    max-width:560px;

}

.login-brand{

    width:90px;
    margin-bottom:25px;

}

.login-left h1{

    font-size:48px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;

}

.login-left h1 span{

    color:#d8ffe3;

}

.login-campus{

    font-size:20px;
    opacity:.95;
    margin-bottom:30px;

}

.login-divider{

    width:90px;
    height:5px;

    border-radius:50px;

    background:#fff;

    margin-bottom:30px;

}

.login-description{

    font-size:18px;
    line-height:1.8;
    opacity:.95;

    margin-bottom:40px;

}


/*=========================================
ILUSTRACIÓN
=========================================*/

.login-illustration{

    margin-bottom:40px;

}

.login-illustration img{

    width:220px;

    filter:
    drop-shadow(
        0 20px 40px rgba(0,0,0,.20)
    );

}


/*=========================================
CARACTERÍSTICAS
=========================================*/

.login-features{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

}

.feature{

    display:flex;
    align-items:center;

    gap:15px;

    padding:15px 18px;

    background:
    rgba(255,255,255,.12);

    border-radius:18px;

    backdrop-filter:blur(12px);

}

.feature-icon{

    width:52px;
    height:52px;

    border-radius:50%;

    background:#fff;

    color:#198754;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

}

.feature strong{

    display:block;

    font-size:16px;

}

.feature small{

    opacity:.85;

}


/*=========================================
PANEL DERECHO
=========================================*/

.login-right{

    display:flex;
    justify-content:center;
    align-items:center;

    padding:50px;

}


/*=========================================
CARD LOGIN
=========================================*/

.login-card{

    width:100%;
    max-width:460px;

    background:#fff;

    border-radius:28px;

    padding:45px;

    box-shadow:
    0 25px 70px rgba(0,0,0,.18);

    animation:
    fadeUp .8s ease;

}

.login-logo{

    width:95px;

    display:block;

    margin:auto;
    margin-bottom:20px;

}

.login-card h2{

    text-align:center;

    font-weight:700;

    color:#1f2937;

    margin-bottom:10px;

}

.login-subtitle{

    text-align:center;

    color:#6c757d;

    margin-bottom:35px;

}


/*=========================================
FORMULARIO
=========================================*/

.login-card label{

    font-weight:600;

    color:#495057;

    margin-bottom:8px;

}

.login-card .form-control{

    border-radius:16px;

    height:55px;

    padding-left:18px;

    border:1px solid #dfe7ef;

    transition:.3s;

}

.login-card .form-control:focus{

    border-color:#198754;

    box-shadow:
    0 0 0 .2rem rgba(25,135,84,.15);

}

.btn-login{

    height:56px;

    border-radius:16px;

    font-size:18px;

    font-weight:700;

}


/*=========================================
FOOTER
=========================================*/

.login-footer{

    text-align:center;

    margin-top:25px;

    color:#9aa3af;

    font-size:14px;

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

    .login-wrapper{

        grid-template-columns:1fr;

    }

    .login-left{

        display:none;

    }

    .login-right{

        padding:30px;

    }

    .login-card{

        max-width:480px;

    }

}