body {
    background: white;
    height: 100vh;
    display: flex;
    justify-content: center; /* centrado horizontal */
    align-items: flex-start; /* alinear arriba */
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.login-container {
    margin-top: 6vh; /* controla qué tan abajo desde arriba */
    width: 450px;
    max-width: 95%; /* responsivo */
    text-align: center;
    border: solid 1px #dfe6e9;
    background: #dfe6e9;
    padding-top: 5em !important;
    /*padding: -2em 1.5em;*/
    box-sizing: border-box;
}

.logo-img {
    display: block;
    margin: 0 auto 1.5em;
    max-width: 220px; /* controla tamaño */
    width: 70%;
    height: auto;
}


body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/img/fondo.jpg') no-repeat center center/cover;
    opacity: 0.2; /* Ajusta la opacidad de la imagen de fondo */
    z-index: -1;
}

#img {
    position: absolute;
    left: 52%;
    top: 10%;
    transform: translate(-30%, -50%);
    width: 20%; /* Ajusta según necesidad */
    height: 10%;
    z-index: 10;
    margin-bottom: 500px !important;
}

.alert {
    color: #eb2f06;
    font-size: 14px;
    padding: 0px;
    margin-top: -30px;
    margin-bottom: 7px;
}

/*.login-container {
    padding: 1em 1em;
    width: 450px;
    height: 600px;
    overflow: hidden;
    text-align: center;
    border: solid 1px silver;
}
*/



.title {
    margin-left: -1em;
}

/*img {
	width: 90% !important;
	height: 70% !important;
	margin-left: 1px !important;
	margin-bottom: 20px;
}*/

.fa-fingerprint {
    font-size: 1.5em;
    color: #0fbcf9;
    margin-right: 5px;
}

.welcome {
    /*margin-bottom: -35px;*/
    font-size: 18px;
    color: #0fbcf9;
    text-decoration: none;
}

.form {
    padding: 1.5em 0.5em;
}


.inputLogin, .btnLogin {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius:20px !important;
    border-top-right-radius:20px !important;
    border-bottom-right-radius:20px !important;
}

.text-warning, .validation-summary-errors {
    font-size: 13px;
    color: red;
}

#check {
    margin-left: -65px !important;
    color: white;
    font-size: 14px;
}

.form-check-input {
    margin-left: -50px !important;
    font-size: 16px;
    margin-top: 12px !important;
}

input, select {
    padding-left: 1.3em !important;
    color: black !important;
}

.btnLogin {
    font-size: 17px !important;
    letter-spacing: 3px;
    border: solid 1px #0fbcf9 !important;
    background-color: #13689F;
    color: white !important;
}

    .btnLogin:hover {
        color: white !important;
        background-color: #13689F;
        font-weight: 500;
    }

/*****************************************/
/************* Estilos Modal ************/
/*****************************************/
.v360-modal {
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
}

    .v360-modal .modal-header {
        /*box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);*/
        background-color: #192a56;
        color: white;
    }

    .v360-modal .closeModal {
        color: white !important;
    }
/*****************************************/
/********** Fin estilos Modal ************/
/*****************************************/

/*****************************************/
/************* Estilos Button ************/
/*****************************************/
.v360-button {
    color: silver;
    background-color: #192a56 !important;
    box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.3);
}

    .v360-button:hover {
        color: white;
    }

.recoverPasswordLink {
    color: white;
    font-size: 14px;
}

    .recoverPasswordLink:hover {
        color: silver;
        font-size: 14px;
    }
/*****************************************/
/************* Estilos Button ************/
/*****************************************/

/* Estilos para dispositivos pequeños */
@media (min-width: 375px) and (max-width: 767.98px) { /* 768px - 1px */
    .login-container {
        padding: 20em 4.5em;
        width: 470px;
        height: 1000px;
        overflow: hidden;
        text-align: center;
    }

    #img {
        top: 32%;
        margin-left: -10px;
        width: 45% !important; /* Ajusta según necesidad */
        height: 9%;
    }

    .welcome {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .box {
        height: 33px;
        font-size: 16px !important;
    }

    .form-check-input {
        margin-top: 7px !important;
        margin-left: -30px !important;
        font-size: 13px;
    }

    #check {
        font-size: 13px;
        margin-left: -55px !important;
    }

    .btnLogin {
        font-size: 15px !important;
    }
}

/* Estilos para dispositivos Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .login-container {
        padding: 17em 4.5em;
        width: 470px;
        height: 1000px;
        overflow: hidden;
        text-align: center;
    }

    #img {
        top: 28%;
        margin-left: -20px;
        width: 35%; /* Ajusta según necesidad */
        height: 10%;
    }

    .welcome {
        margin-bottom: 10px;
        font-size: 26px;
    }

    .alert {
        font-size: 19px;
    }

    .box {
        height: 45px;
        font-size: 21px !important;
    }

    .field-validation-error {
        font-size: 18px;
    }

    .form-switch {
        /*border: solid 1px yellow;*/
        margin-top: 5px;
    }

    .form-check-input {
        margin-top: 7px !important;
        margin-left: -25px !important;
        font-size: 16px;
    }

    #check {
        font-size: 19px;
        margin-left: -100px !important;
    }

    .btnLogin {
        font-size: 23px !important;
    }
}

/* Estilos para dispositivos laptop */
@media (min-width: 992px) and (max-width: 1600px) {
    .login-container {
        width: 430px;
        height: 700px;
        overflow: hidden;
        text-align: center;
    }

    #img {
        position: absolute;
        left: 50%;
        top: 26%;
        transform: translate(-50%, -50%);
        width: 17%; /* Ajusta según necesidad */
        height: 11%;
        z-index: 10;
    }

    .welcome {
        /*margin-bottom: -23px;*/
        font-size: 18px;
    }

    .form-switch {
        margin-top: 4px;
    }

    .form-check-input {
        margin-top: 6px !important;
        margin-left: -25px !important;
        font-size: 14px;
    }

    #check {
        font-size: 15px;
        margin-left: -120px !important;
    }
}

/* Estilos para dispositivos extra grandes */
@media (min-width: 1600px) {
    .login-container {
        padding: 9em 4.5em;
        width: 450px;
        height: 700px;
        overflow: hidden;
        text-align: center;
    }

    #img {
        top: 30%;
        margin-left: -30px;
        width: 16.5%; /* Ajusta según necesidad */
        height: 8%;
    }

    .welcome {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .form-switch {
        margin-top: 4px;
    }

    .form-check-input {
        margin-top: 6px !important;
        margin-left: -25px !important;
        font-size: 14px;
    }

    #check {
        font-size: 15px;
        margin-left: -130px !important;
    }
}