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

body{
    width:100%;
    min-height:100vh;
    overflow:hidden;
    background:linear-gradient(135deg,#f4f4f4,#ececec);
    position:relative;
}

.circulo1{
    width:400px;
    height:400px;
    background:#006847;
    border-radius:50%;
    position:absolute;
    top:-120px;
    left:-120px;
    opacity:0.15;
}

.circulo2{
    width:300px;
    height:300px;
    background:#6b1236;
    border-radius:50%;
    position:absolute;
    bottom:-100px;
    right:-100px;
    opacity:0.15;
}

.contenedor-login{
    width:88%;
    max-width:1300px;
    height:76vh;
    min-height:560px;
    max-height:630px;
    background:white;
    margin:18px auto;
    border-radius:35px;
    overflow:hidden;
    display:flex;
    box-shadow:0px 15px 40px rgba(0,0,0,0.1);
    position:relative;
    z-index:10;
}

.lado-logo{
    width:50%;
    background:linear-gradient(135deg,#006847,#008f5d);
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:25px 35px;
    text-align:center;
    position:relative;
}

.lado-logo::before{
    content:"";
    width:500px;
    height:500px;
    background:rgba(255,255,255,0.05);
    border-radius:50%;
    position:absolute;
    top:-150px;
    right:-150px;
}

.logo{
    width:210px;
    max-height:210px;
    object-fit:contain;
    margin-bottom:20px;
    filter:drop-shadow(0px 5px 10px rgba(0,0,0,0.2));
    position:relative;
    z-index:2;
}

.lado-logo h1{
    font-size:38px;
    line-height:1.05;
    font-weight:bold;
    margin-bottom:18px;
    position:relative;
    z-index:2;
}

.lado-logo p{
    font-size:16px;
    line-height:1.3;
    width:85%;
    opacity:0.9;
    position:relative;
    z-index:2;
}

.lado-formulario{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#ffffff;
    padding:25px 35px;
}

.card-login{
    width:100%;
    max-width:460px;
}

.card-login h2{
    font-size:44px;
    color:#6b1236;
    font-weight:bold;
    margin-bottom:12px;
}

.card-login span{
    color:gray;
    font-size:18px;
}

label{
    margin-bottom:8px;
    font-weight:bold;
    color:#333;
}

.icono{
    background:#006847;
    color:white;
    border:none;
    border-radius:12px 0px 0px 12px;
    height:50px;
    width:52px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.custom-input{
    height:50px;
    border-radius:0px 12px 12px 0px;
    border:1px solid #dcdcdc;
    padding-left:15px;
    font-size:16px;
}

.custom-input:focus{
    box-shadow:none;
    border:1px solid #6b1236;
}

.card-login .mb-4{
    margin-bottom:16px !important;
}

.card-login .mt-4{
    margin-top:18px !important;
}

.btn-login{
    width:100%;
    height:52px;
    border:none;
    border-radius:15px;
    background:linear-gradient(135deg,#006847,#6b1236);
    color:white;
    font-size:20px;
    font-weight:bold;
    transition:0.3s;
    margin-top:5px;
}

.btn-login:hover{
    transform:translateY(-3px);
    box-shadow:0px 8px 20px rgba(0,0,0,0.2);
}

/* RESPONSIVE */

@media(max-width:992px){

    body{
        overflow:auto;
    }

    .contenedor-login{
        width:95%;
        height:auto;
        min-height:auto;
        max-height:none;
        flex-direction:column;
        margin:20px auto;
    }

    .lado-logo{
        display:none;
    }

    .lado-formulario{
        width:100%;
        padding:30px 25px;
    }

    .card-login{
        width:100%;
        max-width:480px;
    }

    .card-login h2{
        font-size:38px;
    }
}
/* AJUSTE LOGIN CELULAR CENTRADO */

@media(max-width:992px){

    html,
    body{
        width:100%;
        min-height:100vh;
        overflow:hidden;
    }

    body{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .circulo1,
    .circulo2{
        position:fixed;
    }

    .contenedor-login{
        width:92%;
        margin:0 auto;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .lado-formulario{
        width:100%;
        padding:0;
    }

    .card-login{
        width:100%;
        padding:35px 25px;
    }

}

.footer-links{
    margin-top:18px;
    text-align:center;
    font-size:14px;
}

.footer-links a{
    text-decoration:none;
    color:#6b1236;
    font-weight:600;
    margin:0 5px;
}

.footer-links a:hover{
    color:#006847;
}

.footer-links span{
    color:#999;
}

.botones-ayuda-login{
    display:flex;
    gap:10px;
    margin-top:15px;
}



.manual-scroll{
    max-height:65vh;
    overflow-y:auto;
    padding-right:10px;
}

.manual-scroll h5{
    color:#006847;
    margin-top:18px;
    font-weight:bold;
}

.manual-scroll p,
.manual-scroll li{
    font-size:15px;
    line-height:1.5;
}

@media(max-width:600px){

    .botones-ayuda-login{
        flex-direction:column;
    }

    .btn-manual,
    .btn-guia{
        width:100%;
    }

}
/* BOTONES MANUAL Y GUÍA */

.botones-ayuda-login{
    display:flex;
    gap:12px;
    margin-top:18px;
}

.btn-manual,
.btn-guia{
    flex:1;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none !important;
    color:#fff !important;
    font-size:15px;
    font-weight:700;
    border-radius:16px;
    transition:all .25s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.btn-manual{
    background:linear-gradient(135deg,#006847,#008f5d);
}

.btn-guia{
    background:linear-gradient(135deg,#6b1236,#8a1748);
}

.btn-manual:hover,
.btn-guia:hover{
    color:#fff !important;
    text-decoration:none !important;
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.btn-manual i,
.btn-guia i{
    font-size:18px;
}

.btn-manual span,
.btn-guia span{
    line-height:1;
}

/* CORRECCIÓN INPUTS LOGIN */

.card-login form{
    width:100%;
}

.input-group{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
}

.input-group .icono{
    flex:0 0 52px;
}

.input-group .custom-input{
    flex:1;
    width:1%;
    min-width:0;
}
/* FORZAR COLOR BLANCO EN BOTONES PDF */

a.btn-manual,
a.btn-guia{
    color:white !important;
    text-decoration:none !important;
}

a.btn-manual:link,
a.btn-manual:visited,
a.btn-manual:hover,
a.btn-manual:active,
a.btn-guia:link,
a.btn-guia:visited,
a.btn-guia:hover,
a.btn-guia:active{
    color:white !important;
    text-decoration:none !important;
}

a.btn-manual i,
a.btn-manual span,
a.btn-guia i,
a.btn-guia span{
    color:white !important;
    text-decoration:none !important;
}