/* ==========================================
   FONDO
========================================== */

body{
    margin:0;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.login-bg{

    min-height:100vh;

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

    background:#f3f3f3;

    position:relative;
}


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

.login-container{

    display:flex;
    flex-direction:column;
    align-items:center;
}


/* ==========================================
   TARJETA
========================================== */

.login-card{

    width:700px;
    height:480px;

    background:#fff;

    display:flex;

    overflow:hidden;

    border-radius:15px;

    box-shadow:
        0 3px 15px rgba(0,0,0,.18);
}


/* ==========================================
   LADO IZQUIERDO
========================================== */

.login-left{

    width:60%;

    display:flex;
    flex-direction:column;
}


/* ==========================================
   CABECERA
========================================== */

.login-header{

    height:58px;

    background:#d7ebf5;

    display:flex;
    align-items:center;

    padding-left:20px;

    border-bottom:1px solid #d9d9d9;
}


/* ==========================================
   LOGO
========================================== */
/* ESCUDO */

.logo-login{
    width:32px;
    height:auto;
    margin-right:12px;
}

/* TEXTO */

.logo-texto{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.logo-texto strong{
    font-size:15px;
    font-weight:700;
    color:#383838;
}

.logo-texto span{
    font-size:15px;
    font-weight:700;
    color:#383838;
}

.logo-login{

    height:42px;
}


/* ==========================================
   CUERPO
========================================== */

.login-body{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;
}


/* ==========================================
   TITULO
========================================== */

.login-title{

    margin-top:0;
    margin-bottom:35px;

    color:#555;

    font-size:34px;

    font-weight:300;

    letter-spacing:1px;
}


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

form{

    width:320px;
}


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

.input-login{

    width:100%;

    height:42px;

    padding:0 14px;

    border:1px solid #d5d5d5;

    border-radius:9px;

    font-size:14px;

    margin-bottom:15px;

    outline:none;
}

.input-login:focus{

    border-color:#7eb8d4;
}


/* ==========================================
   PASSWORD
========================================== */

.password-wrapper{

    position:relative;
}

.eye-icon{

    position:absolute;

    right:12px;
    top:12px;

    cursor:pointer;

    opacity:.6;
}


/* ==========================================
   RECORDAR
========================================== */

.remember{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:#555;

    margin-bottom:18px;
}


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

.btn-login{

    width:100%;

    height:44px;

    border:none;

    border-radius:7px;

    background:#d14f4f;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.2s;
}

.btn-login:hover{

    background:#992323;
}


/* ==========================================
   REGISTRO
========================================== */

.btn-register{

    width:100%;

    height:42px;

    margin-top:12px;

    border:1px solid #d5d5d5;

    background:#f2f2f2;

    color:#555;

    border-radius:9px;

    cursor:pointer;

    transition:.2s;
}

.btn-register:hover{

    background:#e7e7e7;
}


/* ==========================================
   LINK
========================================== */

.forgot-link{

    display:block;

    text-align:center;

    margin-top:20px;

    color:#5f98c6;

    text-decoration:none;

    font-size:14px;
}

.forgot-link:hover{

    text-decoration:underline;
}


/* ==========================================
   LADO DERECHO
========================================== */

.login-right{

    width:40%;

    overflow:hidden;
}


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

/* .login-image{

    width:100%;

    height:100%;

    object-fit:cover;
} */
.login-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

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

.login-footer{

    margin-top:20px;

    font-size:12px;

    color:#666;

    text-align:center;
}


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

@media(max-width:960px){

.login-card{

    width:95%;
    height:auto;
    
    flex-direction:column;
}

.login-left{

    width:100%;
}

.login-right{

    width:100%;
    height:260px;
}

.login-title{

    font-size:28px;
}

form{

    width:90%;

    max-width:320px;
}

.login-footer{

    padding:20px;
}

}