* {
    box-sizing: content-box;
}

body{
    margin: 0;
    padding: 0;
    background: url(../../img/fondo.png) no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
    font-family: "lexend";
}



.Container{
    background-color: #4DACFF;
    width: 600px;
    height: 400px;
    border-radius: 85px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.DivLogin{
    width: 347px;
    height: 400px;
    color: #fff;    
    box-sizing: border-box;
    border-radius: 85px;

}

.DivLogin h1{
    text-align: center;
    margin-top: 50px;
    margin-left: 30px;
    font-size: 40px;
    font-family: "lexend";
}

.DivLogin form{
    padding: 00px 50px;
}

.DivLogin input{
    width: 100%;
    margin-bottom: 30px;
    border-radius: 25px;
    background: #fff;
    font-size: 20px;
    border: none;
    border-color: #fff;
    padding: 15px;
    text-indent: 20px;
}

button{
    width: 50%;
    height: 40px;
    border-radius: 15px;
    background: #fff;
    font-size: 20px;
    border: none;
    margin-left: 75px;
    font-family: "lexend";
}

.SignUp{
    margin-top: 3px;
    float: right;
    width: 250px;
    height: 394px;
    background: #fdfdfd;
    color: #898989;
    box-sizing: border-box;
    padding: 70px 30px;
    border-radius: 85px;
    text-align: center;
    font-size: 23px;
    font-family: "Lexend";
}

.SignUp h1{

    margin-top: 0px;
   
}
#transparente1, #transparente2 {
    margin-top: 3px;
    width: 250px;
    height: 394px;
    background: transparent;
    box-sizing: border-box;
    border-radius: 85px;
    position: absolute;
    cursor: pointer;
    z-index: 999;
}

#transparente1 {
    left: 57.9%;
}

#transparente2 {
    left: 3px;
}


.candado{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 230px;
    left: 60px;
}

.usuario{
    width: 20px;
    height: 20px;
    position: absolute;
    left: 60px;
    top: 143px;
}

img{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}

#olvidado{
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    margin: 10px;
}
#nombre{
    margin-bottom: 15px;
    position: absolute;
    top: 100px;
    left: 300px;
    width: 100px;
    height: 40px;
    border-radius: 25px;
    border:none;
    text-indent: 20px;
    font-size: 17px;
}

#apellido{
    position: absolute;
    width: 100px;
    top: 100px;
    left: 425px;
    height: 40px;
    border-radius: 25px;
    border:none;
    text-indent: 20px;
    font-size: 17px;
    
}
#usuario2{
    position: absolute;
    top: 150px;
    left: 300px;
    width: 230px;
    height: 40px;
    border-radius: 25px;
    border:none;
    text-indent: 30px;
    font-size: 17px;
    z-index: -2;
}

#cargo{
    position: absolute;
    top: 200px;
    left: 300px;
    width: 235px;
    height: 40px;
    border-radius: 25px;
    border:none;
    text-indent: 30px;
    font-size: 17px;
    z-index: -2;
}

#password2{
    position: absolute;
    top: 250px;
    left: 300px;
    width: 230px;
    height: 40px;
    border-radius: 25px;
    border:none;
    text-indent: 30px;
    font-size: 17px;
    z-index: -2;
}


#registrarse{
    position: absolute;
    top: 330px;
    left: 290px;
    width: 100px;
    height: 40px;
    border:none;
    background-color: #efefef;
    font-size: 20px;
    cursor: pointer;
}

#titulo2{
    position: absolute;
    top: 30px;
    left: 340px;
    margin-top: auto;
    margin-bottom: 20px;
    font-size: 40px;
    font-family: "lexend";
    color: #fff;
}


.candado2{
    width: 17px;
    height: 17px;
    position: absolute;
    top: 261px;
    left: 308px;
    z-index: -2;
}
.usuario2{
    width: 17px;
    height: 17px;
    position: absolute;
    left: 310px;
    top: 161px;
    z-index: -2;
    
}
.cargo{
    width: 17px;
    height: 17px;
    position: absolute;
    left: 310px;
    top: 211px;
    z-index: -2;
}
#cargo {
    color: grey;
}

#cargo option {
    color: black;
}


#cargo option[value=""] {
    color: grey;
}


#ingresar{
    margin-top: 15px;
    cursor: pointer;
 }

#password,
#usuario {
    border: 2px solid transparent; 
}
#password:hover,
#usuario:hover {
    border-color: rgba(147, 214, 255, 0.5); 
}
#ingresar:hover {
    background-color: rgb(156, 210, 245);
}
.Container:hover{
    box-shadow: 5px 10px 20px   #4dacff8a;
}
#registrarse:hover{
    background-color: rgb(156, 210, 245);
}

.alert{
    position: absolute;
    background-color: #9CD1F2;
    padding: 20px 40px;
    min-width: 420px;
    right: 0;
    top: 10px;
    overflow: hidden;
    border-radius: 4px;
    border-left: 8px solid #3392FF;
}
.alert.showAlert{
    opacity: 1;
    pointer-events: auto;
}

.alert.show{
    animation: show_slide 1s ease forwards;
}

@keyframes show_slide {
    0%{
        transform: translateX(100%);
    }
    40%{
        transform: translateX(-10%);
    }
    80%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-10%);
    }
}
.alert.hide{
    animation: hide_slide 1s ease forwards;
}
@keyframes hide_slide {
    0%{
        transform: translateX(-10%);
    }
    40%{
        transform: translateX(0%);
    }
    80%{
        transform: translateX(-10%);
    }
    100%{
        transform: translateX(100%);
    }
}
.alert .fa-exclamation-circule .fa-check{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #3392FF;
    font-size: 30px;
}

.alert .msg{
    padding: 0 20px;
    font-size: 18px;
    color: white;
    font-family: "lexend";
}

.alert .close-btn{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: #55A4FF;
    padding: 20px 18px;
    cursor: pointer;
}

.close-btn:hover{
    background: #3392FF;
}

.close-btn .fa-times{
    color: white;
    font-size: 22px;
    line-height: 40px;
}

.container-error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7); /* Fondo semitransparente para el overlay */
    z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}

.error {
    position: relative; /* Para que el botón .cerrar-error se posicione relativo a este contenedor */
    width: 450px;
    height: 150px;
    background: #3392FF;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    border-top: #55A4FF 35px solid;
    border-bottom: #55A4FF 45px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cerrar-error{
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: -38px;
    right: 15px;
    color: #878787;
    cursor: pointer; 
    border-radius: 10px;
    background: white;
    font-size: 20px;
    border: none;
    font-family: "lexend"
}

.mensaje-error{
    position: absolute;
    top: -40px;
    left: 15px; 
    color: white; 
    font-size: 16px;
    font-family: "lexend"
}

.msj-error{
    color: white;
    font-size: 20px;

}

.cruz{
    position: absolute;
    top: -22px;
    left: 495px;
    cursor: pointer;
    width: 17px;
    height: 17px;
}

.equisimg{
    width: 17px;
    height: 17px;
}
#signupt {
    display: none;
}

#logint{
    display: none;
}

 #transparente2{
    z-index: 2;
}

.SignUp{
    z-index: 1;
} 

@media (max-width: 625px) {

    #login{
        display: none;
    }
    #signup{
        display: none;
    }

    #transparente1{
        display: none;
    }
    
    #transparente2{
        display: none;
    }
    .Container{
        width: 350px;
        height: 450px;
        border-radius: 50px;
        
    }

    #titulo2{
        left: 100px;
        top: 50px;
    
    }
    #nombre{
        left: 50px;
        top: 140px;
        
    }
    
    #apellido{
        left: 200px;
        top: 140px;
    }

    #usuario2{
        left: 50px;
        top: 200px;
        width: 250px;
    }
    
    #cargo{
        left: 50px;
        top: 260px;
        width: 250px;
    }

    #password2{
        left: 50px;
        top: 320px;
        width: 250px;
    } 
    
    #registrarse{
        left: 45px;
        top: 380px;
    }
    
    .usuario2{
        left: 60px;
        top: 210px;
    }

    .cargo{
        left: 60px;
        top: 270px;
    }

    .candado2{
        left: 60px;
        top: 330px;
    }


    #titulo{
        margin-left: 0px;
    }

    #usuario{
        width: 215px;
    }

    #password{
        width: 215px;
    }

    .usuario{
        left: 60px;
        top: 145px;
    }

    .candado{
        left: 60px;
        top: 230px;
    }
    #ingresar{
        margin-left: 50px;
    }

    #logint {
        background-color: #4DACFF;
        top: 20%; /* Cambia según necesites */
        left: 35%; /* Ajusta para el espaciado */
        width: 125px;
        height: 50px;
        font-size: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        border-radius: 10px;
        transform: translate(-50%, -50%); /* Centra el div */
        color: white;
    }

    #signupt {
        background-color: #4DACFF;
        top: 20%; /* Alineado con el anterior */
        left: 65%; /* Ajusta para el espaciado */
        width: 125px;
        height: 50px;
        font-size: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        border-radius: 10px;
        transform: translate(-50%, -50%); /* Centra el div */
        color: white;
    }

    @media (max-height: 870px) {
        #logint {
            top: 15%; /* Cambia según necesites */
        }

        #signupt {
            top: 15%; /* Alineado con el anterior */
        }
        .DivLogin{
            display: block;
        }
        .DivSignUp{
            display: none;
        }
    }

    @media (max-height: 708px) {
        #logint {
            top: 10%; /* Cambia según necesites */
        }

        #signupt {
            top: 10%; /* Alineado con el anterior */
        }
    }
    
    @media (max-height: 630px) {
        #logint {
            top: 5%; /* Cambia según necesites */
        }

        #signupt {
            top: 5%; /* Alineado con el anterior */
        }
    }

    @media (max-width: 420px) {
        #logint {
            left: 30%; /* Ajusta para el espaciado */
        }

        #signupt {
            left: 70%; /* Ajusta para el espaciado */
        }
        
    }
}