.login_one_image {
    background-image: url(images/2.jpg);
    background-position: 50%;
    background-size: cover;
}
@media (max-width: 1199.98px) {
    .login_one_image {
        height: 100vh;
        opacity: 0.5;
        position: fixed;
        top: 0;
    }
}
.login_two_image {
    background-image: url(images/3.jpg);
}
.login_bs_validation,
.login_two_image {
    background-position: 50%;
    background-size: cover;
}
.login_bs_validation {
    background-image: url(images/1.jpg);
}
@media (max-width: 1199.98px) {
    .login_bs_validation {
        height: 100vh;
        opacity: 0.5;
        position: fixed;
        top: 0;
    }
}
.login-card {
    align-items: center;
    background: url(images/login_bg.jpg);
    background-position: 50%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    min-height: 100vh;
    padding: 30px 12px;
}
.login-card.login-bg {
    background: rgba(48, 142, 135, 0.06) !important;
}
@media (max-width: 1199.98px) {
    .login-card {
        background: transparent;
    }
}
@media (max-width: 575.98px) {
    .login-card {
        padding-bottom: 40px;
        padding-top: 40px;
    }
}
.login-card .logo {
    display: block;
    margin-bottom: 30px;
    text-align: center;
}
@media (max-width: 1199.98px) {
    .login-card .logo {
        position: relative;
    }
}
@media (max-width: 575.98px) {
    .login-card .logo {
        margin-bottom: 10px;
    }
}
.login-card .logo .for-light {
    display: none;
}
.login-card .btn-showcase .btn {
    line-height: 1;
    margin: 0;
    padding: 10px 15px;
}
.login-card .btn-showcase .btn + .btn {
    margin-left: 5px;
}
.login-card .btn-showcase .btn i {
    height: 16px;
    vertical-align: bottom;
}
.login-card .login-main {
    background-color: var(--bs-body-bg);
    border-radius: 10px;
    box-shadow: 0 0 37px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    padding: 40px;
    width: 450px;
}
@media (max-width: 991.98px) {
    .login-card .login-main {
        width: 380px;
    }
}
@media (max-width: 1199.98px) {
    .login-card .login-main {
        position: relative;
    }
}
@media (max-width: 575.98px) {
    .login-card .login-main {
        padding: 20px;
        width: auto;
    }
}
.login-card .login-main .theme-form .h4,
.login-card .login-main .theme-form h4 {
    margin-bottom: 5px;
}
.login-card .login-main .theme-form .unlock-1 {
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}
.login-card .login-main .theme-form label {
    font-size: 15px;
    letter-spacing: 0.4px;
}
.login-card .login-main .theme-form .checkbox label:before {
    background-color: var(--white);
    border: 1px solid var(--font-color);
}
.login-card .login-main .theme-form .login-social-title {
    margin-bottom: 30px;
    margin-top: 30px;
    position: relative;
    text-align: center;
    z-index: 1;
}
.login-card .login-main .theme-form .login-social-title .h6,
.login-card .login-main .theme-form .login-social-title h6 {
    background-color: var(--white);
    color: var(--font-color);
    margin-left: auto;
    margin-right: auto;
    padding-left: 25px;
    padding-right: 25px;
    width: -moz-fit-content;
    width: fit-content;
}
.login-card .login-main .theme-form .login-social-title:before {
    background-color: var(--light-border);
    content: "";
    height: 2px;
    position: absolute;
    right: 0;
    top: 10px;
    width: 100%;
    z-index: -1;
}
.login-card .login-main .theme-form input {
    transition: all 0.3s ease;
}
.login-card .login-main .theme-form input::-webkit-input-placeholder {
    color: var(--font-color);
}
.login-card .login-main .theme-form input:focus,
.login-card .login-main .theme-form input:hover {
    box-shadow: none !important;
    transition: all 0.3s ease;
}
.login-card .login-main .theme-form p {
    color: var(--font-color);
    font-size: 14px;
    margin-bottom: 25px;
}
.login-card .login-main .theme-form p a {
    color: var(--theme-default);
}
@media (max-width: 575.98px) {
    .login-card .login-main .theme-form p {
        margin-bottom: 5px;
    }
}
.login-card .login-main .theme-form .form-group {
    margin-bottom: 10px;
    position: relative;
}
.login-card .login-main .theme-form .form-group a {
    color: var(--theme-default);
    float: right;
}
.login-card .login-main .theme-form .form-group a.link {
    float: none;
}
@media (max-width: 575.98px) {
    .login-card .login-main .theme-form .form-group {
        margin-bottom: 5px;
    }
}
.login-card .login-main .theme-form ul.login-social {
    align-items: center;
    display: flex;
    justify-content: center;
}
.login-card .login-main .theme-form ul.login-social li {
    align-items: center;
    background-color: rgba(48, 142, 135, 0.05);
    border: 1px solid var(--light-border);
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}
@media (max-width: 767.98px) {
    .login-card .login-main .theme-form ul.login-social li {
        height: 35px;
        width: 35px;
    }
}
.login-card .login-main .theme-form ul.login-social li i {
    color: var(--theme-default);
    height: 16px;
    vertical-align: middle;
    width: auto;
}
.login-card .login-main .theme-form ul.login-social li:nth-child(n + 2) {
    margin-left: 15px;
}
.login-card .login-main .theme-form ul.login-social li:hover {
    background-color: var(--theme-default);
}
.login-card .login-main .theme-form ul.login-social li:hover i {
    color: var(--white);
}
@media (max-width: 575.98px) {
    .login-card .login-main .theme-form .or:before {
        width: 55%;
    }
}
.login-card .login-main .theme-form label {
    font-size: 14px;
}
.login-card .login-main .theme-form label a {
    color: var(--theme-default);
}
.login-card .login-main .theme-form .show-hide {
    top: 50%;
}
.login-card input[type="password"] {
    padding: 12px 60px 12px 12px !important;
}
/* Estados de autenticacion/cuenta fuera del shell principal. */
body.vb-auth-page{
    min-height: 100vh;
}

body.vb-auth-page--reactivar{
    background: linear-gradient(90deg, rgba(10,20,32,.88) 0%, rgba(10,20,32,.60) 48%, rgba(10,20,32,.28) 100%), url('/dependencias/img/reactivar_cuenta_bg.png') center center / cover no-repeat fixed;
}

body.vb-auth-page--cerrar-sesion{
    background: linear-gradient(90deg, rgba(11,18,32,.88) 0%, rgba(11,18,32,.62) 48%, rgba(11,18,32,.34) 100%), url('/dependencias/img/cerrar_sesion_bg.png') center center / cover no-repeat fixed;
}

.vb-auth-page .login-card{
    min-height: 100vh;
    background: transparent;
}

.vb-auth-page .login-main{
    background: rgba(18,28,42,.88);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(12px);
}

.vb-auth-page--cerrar-sesion .login-main{
    background: rgba(18,25,38,.88);
}

.vb-auth-page .login-main .alert-light,
.vb-auth-page .vb-auth-message{
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.18) !important;
}

@media (max-width: 575.98px){
    body.vb-auth-page{
        background-position: center top;
        background-attachment: scroll;
    }

    .vb-auth-page .login-main{
        margin: 0 16px;
    }
}

/* Login administrador: contrato visual canonico de autenticacion. */
.login-text-error{padding-top:20px;text-align:center;padding-left:0;color:#e03636;}
.form-input.position-relative .show-hide{align-items:center;display:inline-flex;height:100%;position:absolute;right:12px;top:0;}
.form-input.position-relative .show-hide span{align-items:center;display:inline-flex;height:100%;}

.login-card{
    --vb-primary:#6f8f72;
    --vb-primary-hover:#5f7c62;
    --vb-secondary:#b8c9b0;
    --vb-accent:#d7c7a3;
    --vb-bg-overlay:rgba(17,36,25,.58);
    --vb-card-bg:rgba(255,255,255,.10);
    --vb-card-border:rgba(255,255,255,.18);
    --vb-text:#f5f7f2;
    --vb-text-soft:rgba(245,247,242,.82);
    --vb-input-bg:rgba(255,255,255,.10);
    --vb-input-border:rgba(255,255,255,.22);
    --vb-input-focus:rgba(184,201,176,.35);
    --vb-shadow:0 20px 60px rgba(0,0,0,.28);
}

.login-card + *,
body.dark-only .login-card{background-color:#102117;font-family:'Nunito Sans',sans-serif;}

.login-card{
    position:relative;
    align-items:center !important;
    background:linear-gradient(135deg,rgba(10,25,17,.55),rgba(27,48,35,.45)),url('/dependencias/img/login_bg.jpg') !important;
    background-repeat:no-repeat !important;
    background-position:50% !important;
    background-size:cover !important;
    display:flex !important;
    justify-content:center !important;
    margin:0 auto !important;
    min-height:100vh !important;
    padding:30px 12px !important;
    overflow:hidden;
}

.login-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(9,23,16,.18) 0%,rgba(9,23,16,.48) 100%),var(--vb-bg-overlay);
    z-index:0;
}

.login-card > div{position:relative;z-index:1;width:100%;max-width:460px;}
.logo-wrap{display:flex;justify-content:center;margin-bottom:22px;}
.logo-box{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:22px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.18);}
.logo-box img{max-width:220px;width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));}

.login-main{background:var(--vb-card-bg);border:1px solid var(--vb-card-border);border-radius:28px;padding:34px 30px;box-shadow:var(--vb-shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.login-main h2{color:var(--vb-text);font-weight:800;letter-spacing:.2px;margin-bottom:8px;}
.login-main p{color:var(--vb-text-soft);}
.login-main .theme-form .col-form-label{color:var(--vb-text);font-weight:700;margin-bottom:6px;}
.login-main .theme-form .form-control{height:52px;border-radius:14px;border:1px solid var(--vb-input-border);background:var(--vb-input-bg);color:var(--vb-text);padding:12px 16px;transition:all .28s ease;box-shadow:none;}
.login-main .theme-form .form-control::placeholder{color:rgba(255,255,255,.55);}
.login-main .theme-form .form-control:hover{border-color:rgba(215,199,163,.55);background:rgba(255,255,255,.14);}
.login-main .theme-form .form-control:focus{color:var(--vb-text);background:rgba(255,255,255,.16);border-color:var(--vb-secondary);box-shadow:0 0 0 4px var(--vb-input-focus);}

.form-input.position-relative{position:relative;}
.show-hide{position:absolute;top:50%;right:14px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:34px;border-radius:999px;background:rgba(255,255,255,.08);transition:all .25s ease;cursor:pointer;user-select:none;}
.show-hide:hover{background:rgba(255,255,255,.16);}
.show-hide span{color:var(--vb-text-soft);font-size:12px;font-weight:800;letter-spacing:.2px;}
.show-hide span.show:before{content:'Mostrar';}
.show-hide span:before{content:'Ocultar';}

.theme-form .link,
.theme-form p a{color:#e5d6b7;font-weight:700;text-decoration:none;transition:all .25s ease;}
.theme-form .link:hover,
.theme-form p a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.login-main .btn.btn-primary{height:52px;border:none;border-radius:14px;background:#173c17;font-weight:800;letter-spacing:.3px;box-shadow:0 6px 10px rgba(111,143,114,.28);transition:all .28s ease;}
.login-main .btn.btn-primary:hover,
.login-main .btn.btn-primary:focus{background:linear-gradient(135deg,var(--vb-primary-hover) 0%,#6f8f72 100%);transform:translateY(-2px);box-shadow:0 16px 30px rgba(111,143,114,.34);}
.login-main .btn.btn-primary:active{transform:translateY(0);box-shadow:0 8px 18px rgba(111,143,114,.24);}
.login-main .login-text-error{margin-top:8px;margin-bottom:18px;padding:12px 14px;text-align:center;color:#ffd7d7;background:rgba(224,54,54,.14);border:1px solid rgba(255,140,140,.24);border-radius:14px;}
.login-main .text-end{margin-top:18px !important;}

@media (max-width:575px){
    .login-card{padding:20px 10px !important;}
    .login-main{padding:26px 20px;border-radius:22px;}
    .logo-box{padding:12px 16px;border-radius:18px;}
    .logo-box img{max-width:180px;}
}