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

body{

    background:#eef3fb;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;

}

/* Logo */
.logo{
    width:120px;
    height:auto;
    margin-bottom:20px;
}

/* Imagen ilustrativa */
.imagen-login{
    width:300px;
    max-width:100%;
}

.container{

    width:1000px;
    max-width:95%;
    height:600px;

    display:flex;

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

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

.left-panel{

    width:50%;

    background:linear-gradient(135deg,#86adbb,#6b6f71);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

}

.overlay{

    width:80%;
    text-align:center;

}

.overlay h1{

    font-size:38px;

    margin-bottom:20px;

}

.overlay p{

    font-size:18px;

    line-height:30px;

    margin-bottom:40px;

}

.overlay img{

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

}

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

.right-panel{

    width:50%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.login-box{

    width:350px;

}

.login-box h2{

    color:#06749c;

    font-size:32px;

    margin-bottom:10px;

}

.login-box p{

    color:#777;

    margin-bottom:30px;

}

.input-group{

    position:relative;

    margin-bottom:20px;

}

.input-group span{

    position:absolute;

    left:15px;

    top:15px;

    font-size:18px;

}

.input-group input{

    width:100%;

    padding:15px 45px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    transition:.3s;

}

.input-group input:focus{

    border-color:#06749c;

}

.show-password{

    position:absolute;

    right:10px;

    top:10px;

    background:none;

    border:none;

    cursor:pointer;

    font-size:20px;

}

.btn-login{

    width:100%;

    padding:15px;

    border:none;

    background:#06749c;

    color:white;

    border-radius:10px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.btn-login:hover{

    background:#06749c;

}

.error{

    background:#fee2e2;

    color:#b91c1c;

    padding:12px;

    border-radius:8px;

    margin-bottom:20px;

}

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

@media(max-width:900px){

.container{

    flex-direction:column;

    height:auto;

}

.left-panel{

    width:100%;
    padding:40px;

}

.right-panel{

    width:100%;
    padding:40px;

}

}