.login-body{
margin:0;
height:auto;
padding:20px;
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(135deg,#263238,#37474f);
display:flex;
align-items:center;
justify-content:center;
}

.login-container{
width:100%;
display:flex;
align-items:center;
justify-content:center;
}

.login-box{
background:white;
padding:40px;
border-radius:12px;
width:300px;
box-shadow:0 10px 30px rgba(109, 15, 15, 0);
text-align:center;
}

.login-logo img{
width:90px;
margin-bottom:10px;
}

.login-icon{
width:60px;
height:60px;
background:#1976d2;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
margin:10px auto;
}

.login-box h3{
margin:20px 0;
color:#333;
}

.input-group{
position:relative;
margin-bottom:18px;
}

.input-group i{
position:absolute;
top:12px;
left:10px;
color:#888;
}

.input-group input{
width:100%;
padding:10px 10px 10px 35px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
}

.login-btn{
width:100%;
background:#1976d2;
color:white;
border:none;
padding:12px;
border-radius:6px;
font-size:16px;
cursor:pointer;
margin-top:10px;
}

.login-btn:hover{
background:#1565c0;
}

.captcha-box{
margin:15px 0;
display:flex;
justify-content:center;
}

.forgot-password{
margin-top:15px;
}

.forgot-password a{
text-decoration:none;
font-size:14px;
color:#1976d2;
}
/* MODAL */

.login-body{
margin:0;
height:auto;
padding:20px;
font-family:Arial, Helvetica, sans-serif;
background:linear-gradient(135deg,#263238,#37474f);
display:flex;
align-items:center;
justify-content:center;
}

.login-container{
width:100%;
display:flex;
align-items:center;
justify-content:center;
}

.login-box{
background:white;
padding:40px;
border-radius:12px;
width:300px;
box-shadow:0 10px 30px rgba(109, 15, 15, 0);
text-align:center;
}

.login-logo img{
width:90px;
margin-bottom:10px;
}

.login-icon{
width:60px;
height:60px;
background:#1976d2;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
margin:10px auto;
}

.login-box h3{
margin:20px 0;
color:#333;
}

.input-group{
position:relative;
margin-bottom:18px;
}

.input-group i{
position:absolute;
top:12px;
left:10px;
color:#888;
}

.input-group input{
width:100%;
padding:10px 10px 10px 35px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
}

.login-btn{
width:100%;
background:#1976d2;
color:white;
border:none;
padding:12px;
border-radius:6px;
font-size:16px;
cursor:pointer;
margin-top:10px;
}

.login-btn:hover{
background:#1565c0;
}

.captcha-box{
margin:15px 0;
display:flex;
justify-content:center;
}

.forgot-password{
margin-top:15px;
}

.forgot-password a{
text-decoration:none;
font-size:14px;
color:#1976d2;
}
/* MODAL */

.modal{
display:none;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(243, 239, 239, 0.6);
align-items:center;
justify-content:center;
}
.modal.mostrar{
    display:flex;
}
/* CAJA DEL MODAL */

.login-modal{
width:420px;
height:650px;
background:white;
border-radius:12px;
padding:0;
position:relative;
overflow:hidden;
}

/* IFRAME */

.login-frame{
width:100%;
height:650px;
border:none;
}
.modal-content.login-modal{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
}
.modal-login{
    z-index:99999;
}

/* BOTON CERRAR */

.close{
position:absolute;
right:15px;
top:10px;
font-size:22px;
cursor:pointer;
color:#777;
}

.close:hover{
color:black;
}


/* CAJA DEL MODAL */

.login-modal{
width:420px;
height:650px;
background:white;
border-radius:12px;
padding:0;
position:relative;
overflow:hidden;
}

/* IFRAME */

.login-frame{
width:100%;
height:650px;
border:none;
}

/* BOTON CERRAR */

.close{
position:absolute;
right:15px;
top:10px;
font-size:22px;
cursor:pointer;
color:#777;
}

.close:hover{
color:black;
}