/*==============================
    LOGIN GRUPO VIVEXA
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#081A38,#123A63);

}

/*==============================
        CONTENEDOR
==============================*/

.login-container{

    width:1200px;

    max-width:95%;

    min-height:720px;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    display:grid;

    grid-template-columns:55% 45%;

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

}

/*==============================
      IMAGEN IZQUIERDA
==============================*/

.login-image{

    position:relative;

    background:url("https://images.unsplash.com/photo-1600585154526-990dced4db0d?auto=format&fit=crop&w=1400&q=80");

    background-size:cover;

    background-position:center;

}

.login-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(8,26,56,.65);

}

.overlay{

    position:relative;

    z-index:10;

    color:#fff;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:60px;

}

.logo{

    width:180px;

    margin-bottom:30px;

}

.overlay h2{

    font-size:48px;

    margin-bottom:20px;

    font-weight:800;

}

.overlay p{

    font-size:22px;

    line-height:1.7;

    opacity:.95;

}

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

.login-form{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px;

}

.form-box{

    width:100%;

    max-width:420px;

}

.form-box h1{

    font-size:42px;

    color:#081A38;

    font-weight:800;

}

.form-box span{

    display:block;

    margin-top:8px;

    margin-bottom:45px;

    color:#666;

    font-size:17px;

}

/*==============================
        INPUTS
==============================*/

.input-group{

    position:relative;

    margin-bottom:25px;

}

.input-group i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#888;

    font-size:18px;

}

.input-group input{

    width:100%;

    height:62px;

    border:2px solid #E5E5E5;

    border-radius:18px;

    padding-left:58px;

    font-size:16px;

    transition:.3s;

    outline:none;

}

.input-group input:focus{

    border-color:#F68B1F;

    box-shadow:0 0 15px rgba(246,139,31,.25);

}

/*==============================
        OPCIONES
==============================*/

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

    font-size:14px;

}

.options a{

    color:#F68B1F;

    text-decoration:none;

    font-weight:600;

}

.options a:hover{

    text-decoration:underline;

}

/*==============================
        BOTON
==============================*/

button{

    width:100%;

    height:62px;

    border:none;

    border-radius:18px;

    background:#F68B1F;

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

button:hover{

    background:#ff9d2d;

    transform:translateY(-3px);

    box-shadow:0 15px 25px rgba(246,139,31,.35);

}

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

.footer{

    margin-top:40px;

    text-align:center;

    color:#888;

    font-size:14px;

}

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

@media(max-width:992px){

.login-container{

grid-template-columns:1fr;

}

.login-image{

display:none;

}

.login-form{

padding:50px 30px;

}

.form-box{

max-width:100%;

}

}

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


.login-error{
    display:flex;
    align-items:center;
    gap:10px;

    background:#fff1f0;
    color:#c62828;

    border:1px solid #ffcdd2;

    padding:14px 16px;

    border-radius:14px;

    margin-bottom:20px;

    font-size:14px;

    animation:loginError .3s ease;
}

.login-error i{
    font-size:16px;
}

@keyframes loginError{

    from{
        opacity:0;
        transform:translateY(-5px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}



/*==============================
        RECUPERAR CONTRASEÑA
==============================*/


.login-success{
    display:flex;
    align-items:center;
    gap:10px;

    background:#ecfdf3;
    color:#16803c;

    border:1px solid #b7ebc6;

    padding:14px 16px;

    border-radius:14px;

    margin-bottom:20px;

    font-size:14px;

    animation:loginSuccess .3s ease;
}

.login-success i{
    font-size:16px;
}

@keyframes loginSuccess{

    from{
        opacity:0;
        transform:translateY(-5px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}