/* General */
::selection {
  color: #ffffff;
  background-color: #00acac;
}
a {
    color: #00ACAC !important;
    text-decoration: none;
    font-size: 14px;
    background-color: transparent;
}
a:hover {
    text-decoration: underline
}
#loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #d9e0e7;
    z-index: 9999;
    display: none;
}
.loading-spinner {
    height: 36px;
    width: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -18px 0 0 -18px;
    border: 2px solid rgba(45,53,60,.85);
    border-top: 2px solid #fff;
    -webkit-border-radius: 36px;
    border-radius: 36px;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -ms-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
}
.form-group {
    position: relative;
}
.form-group input[type="password"] {
    padding-right: 40px; /* Ajustar el espacio para el icono */
}
.form-group i.togglePassword{
    position: absolute;
    top: 50%;
    right: 10px; /* Ajustar el espacio desde el borde derecho */
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 15px;
    transition: color 0.2s ease;
}
.checkbox.checkbox-css input:checked + label::before {
  background: #00acac;
  border-color: #00acac;
}
.checkbox.checkbox-css label:before {
    width: 16px;
    height: 16px;
    background: transparent;
    border: 1px solid #7F7F7F;
    cursor: pointer;
}
.checkbox.checkbox-css input:checked+label:after {
    background-size: 75%;
    color: #fff;
    height: 16px;
    width: 16px;
    text-align: center;
    cursor: pointer;
}
.checkbox.checkbox-css label {
    cursor: pointer;
}
.form-control:focus {
  border: 1px solid #00acac;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color negro con opacidad (0.5) */
}
/* End General */
/* Jconfirm */
.jconfirm .jconfirm-box.jconfirm-type-success{
  border-top: solid 7px #00acac !important;
  -webkit-animation-name: type-green;
  animation-name: type-green;
}
.jconfirm .jconfirm-box.jconfirm-type-success .jconfirm-title-c .jconfirm-icon-c{
  color: #00acac !important;
}
.jconfirm .jconfirm-box.jconfirm-type-info{
  border-top: solid 7px #49b6d6 !important;
  -webkit-animation-name: type-blue;
  animation-name: type-blue;
}
.jconfirm .jconfirm-box.jconfirm-type-info .jconfirm-title-c .jconfirm-icon-c{
  color: #49b6d6 !important;
}
/* End Jconfirm */
/* Alertas */
body #gritter-notice-wrapper .gritter-item-wrapper .gritter-item p {
    color: #FFFFFF !important;
    font-size: 12px !important;
}
.gritter-close:before, .gritter-light .gritter-close:before{
    font-family: "Font Awesome 5 Free" !important;
    content: "\f00d" !important;
    font-size: 16px !important;
    font-weight: 900 !important; 
}
.alert-success .gritter-bottom,.alert-success .gritter-item,.alert-success .gritter-top{
    background: #00acac !important;
}
.alert-warning .gritter-bottom,.alert-warning .gritter-item,.alert-warning .gritter-top{
    background: #F8AC59 !important;
}
.alert-info .gritter-bottom,.alert-info .gritter-item,.alert-info .gritter-top{
    background: #1C84C6 !important;
}
.alert-error .gritter-bottom,.alert-error .gritter-item,.alert-error .gritter-top{
    background: #F66C5E !important;
}
.gritter-image i{
    color: #FFFFFF;
}
.gritter-close{
    color: #FFFFFF !important
}
.gritter-title{
    font-size: 13px !important;
    font-weight: bold !important;
}
/* End Alertas */
/* ================== LOGIN V2 (tarjeta moderna, responsive) ================== */
:root{
    --lv2-green: #5CB660;
    --lv2-green-dark: #142B1E;
    --lv2-navy: #12263f;
}
html, body.login-v2-body{ height: 100%; }
body.login-v2-body{
    margin: 0;
    background: #eef1f4;
}
#page-container.fade{ opacity: 1; }
.login-v2-wrap{
    position: relative;
    z-index: 1;
    min-height: 100vh;
    box-sizing: border-box;
}
.login-v2-card{
    width: 100%;
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.login-v2-top{
    position: relative;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    padding: 28px 24px 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.login-v2-logo{
    max-width: 280px;
    max-height: 150px;
    width: auto;
    height: auto;
}
.login-v2-slogan{
    margin: 8px 0 0 0;
    color: #7a8a9a;
    font-size: 17px;
}
.login-v2-mid{
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #6BC96F 0%, #4CAE50 100%);
    padding: 44px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-v2-mid form{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.login-v2-wave{
    position: absolute;
    left: 0;
    width: 100%;
    height: 42px;
    line-height: 0;
    pointer-events: none;
}
.login-v2-wave svg{ width: 100%; height: 100%; display: block; }
.login-v2-wave--top{ bottom: -1px; }
.login-v2-wave--bottom{ top: -1px; }
.login-v2-field{
    position: relative;
    margin-bottom: 12px;
}
.login-v2-field i:first-child{
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #6b6b6b;
    font-size: 15px;
}
.login-v2-field input{
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    padding: 13px 40px 13px 42px;
    font-size: 14px;
    color: #333;
    background: #fff;
}
.login-v2-field input:focus{
    outline: none;
    box-shadow: 0 0 0 2px rgba(20,43,30,0.35);
}
.login-v2-field i.togglePassword{
    position: absolute;
    top: 50%;
    right: 14px;
    left: auto;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 15px;
}
.login-v2-btn{
    width: 100%;
    border: none;
    border-radius: 10px;
    background: var(--lv2-green-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.login-v2-btn:hover{ opacity: 0.92; }
.login-v2-btn:disabled{ opacity: 0.7; cursor: default; }
.login-v2-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.login-v2-row .checkbox-css label{
    color: #123524;
    font-size: 13px;
}
.login-v2-row a{
    color: var(--lv2-green-dark) !important;
    font-size: 13px;
    font-weight: 600;
}
.login-v2-bottom{
    position: relative;
    overflow: hidden;
    background-color: #fff;
    padding: 18px 20px 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}
.login-v2-features{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    max-width: 460px;
    margin: 0 auto 18px auto;
}
.login-v2-feature{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #556;
    font-size: 12.5px;
    min-width: 60px;
    flex: 1;
}
.login-v2-feature i{
    font-size: 24px;
    color: var(--lv2-navy);
}
.login-v2-gradient-bar{
    height: 4px;
    width: 140px;
    margin: 0 auto 12px auto;
    border-radius: 4px;
    background: linear-gradient(90deg, #17a2b8, #3d7bd6, var(--lv2-green));
}
.login-v2-footer-slogan{
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--lv2-navy);
}
.login-v2-copyright{
    margin: 0;
    font-size: 10.5px;
    color: #aab2bb;
}
.login-v2-legal-link{
    margin: 4px 0 0 0;
    font-size: 10.5px;
}
.login-v2-legal-link a{
    color: #8a97a3 !important;
    text-decoration: underline;
}
.login-v2-dev-credit{
    margin: 6px 0 0 0;
    font-size: 9.5px;
    color: #c3cad1;
}
.login-v2-dev-credit a{
    color: #c3cad1 !important;
    text-decoration: none;
}
.login-v2-dev-credit a:hover{ text-decoration: underline; }
/* Banners subidos por el negocio (opcionales, n_module 'LGB' escritorio / 'LGM' movil): cada
   uno SOLO en su propio tamaño de pantalla -- nunca se mezclan. La imagen ya trae su propia
   banda verde y sus propias olas, asi que ahi se apagan el degradado dibujado por CSS y las
   olas SVG para no duplicar el efecto encima de la imagen real. Sin ninguna de las dos, el
   login SIEMPRE usa el diseño de degradado + olas por defecto (en cualquier tamaño).
   El banner de ESCRITORIO exige ademas "orientation:landscape": es una imagen ancha (ej.
   1920x1080), y con background-size:cover en una tablet en VERTICAL (alta y angosta) se
   estira mucho y su franja blanca superior se ve enorme -- ahi mismo se cae al degradado por
   defecto (seguro/proporcional en cualquier tamaño) en vez de forzar la imagen. */
@media (min-width: 768px) and (orientation: landscape){
    .login-v2-card.has-banner{
        background-image: var(--lv2-banner-d);
        background-size: cover;
        background-position: center;
    }
    .login-v2-card.has-banner .login-v2-top,
    .login-v2-card.has-banner .login-v2-mid,
    .login-v2-card.has-banner .login-v2-bottom{
        background: transparent;
    }
    .login-v2-card.has-banner .login-v2-wave{
        display: none;
    }
    /* Alto EXACTO calibrado a esta imagen (medido al subirla): asi el limite de cada seccion
       cae justo donde la imagen real cambia de blanco a verde, sea cual sea la imagen. */
    .login-v2-card.has-banner .login-v2-top{
        height: calc(var(--lv2-top-pct) * 1vh);
        min-height: 0;
        flex: none;
        justify-content: center;
    }
    .login-v2-card.has-banner .login-v2-bottom{
        height: calc(var(--lv2-bottom-pct) * 1vh);
        flex: none;
        justify-content: center;
    }
}
@media (max-width: 767px){
    .login-v2-card.has-banner-mobile{
        background-image: var(--lv2-banner-m);
        background-size: cover;
        background-position: center;
    }
    .login-v2-card.has-banner-mobile .login-v2-top,
    .login-v2-card.has-banner-mobile .login-v2-mid,
    .login-v2-card.has-banner-mobile .login-v2-bottom{
        background: transparent;
    }
    .login-v2-card.has-banner-mobile .login-v2-wave{
        display: none;
    }
    .login-v2-card.has-banner-mobile .login-v2-top{
        height: calc(var(--lv2-top-pct-m) * 1vh);
        min-height: 0;
        flex: none;
        justify-content: center;
    }
    .login-v2-card.has-banner-mobile .login-v2-bottom{
        height: calc(var(--lv2-bottom-pct-m) * 1vh);
        flex: none;
        justify-content: center;
    }
}
/* End Login V2 */