table.dataTable tbody tr.selected {
    background-color: #EEF0FE !important;
    color: unset !important;
}

.v-input-lookup > a {
    border-top-left-radius: 0.475rem !important;
    border-bottom-left-radius: 0.475rem !important;
}

.v-input-lookup > span > button:first-child {
    border-radius: 0px;
}

.v-input-lookup > span > button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.dataTables_length {
    display: none;
}

.aside-enabled.aside-fixed.header-fixed[data-kt-aside-minimize=on] .header {
    left: 0px !important;
}

.aside-enabled.aside-fixed[data-kt-aside-minimize=on] .wrapper {
    padding-left: 0px;
}

.tabsrow {
    /*background: #2020201f;*/
    margin: 0px !important;
    padding: 0px;
}

#kt_wrapper {
    /*padding-top: 65px;*/
    padding-top: 85px;
}

#kt_content {
    padding-top: 0px;
}

#ulVGrupos > li {
    cursor: pointer;
}

.paginate_button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.475rem;
    height: 2.5rem;
    min-width: 2.5rem;
    font-weight: 500;
    font-size: 1.075rem;
}

.paging_simple_numbers {
    display: flex;
    padding: 0 !important;
    justify-content: end;
}

    .paging_simple_numbers > span {
        display: flex;
    }

        .paging_simple_numbers > span > a {
            /*background:#ccc;*/
        }

            .paging_simple_numbers > span > a:hover {
                background-color: #EFF2FF;
            }

.dataTables_pager {
    align-self: center !important;
}

.paginate_button {
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
}

a.current {
    background: #6777EF;
    color: white;
}

.control-label {
    padding-top: 6px;
    padding-left: 0;
}

.dropdown.open > ul.dropdown-menu {
    display: block;
    position: absolute;
}


.liseparador {
    border-bottom: 1px solid #787878
}

.dropdown-menu > li {
    padding: 4px;
}

[hidden] {
    display: none;
}

.errorInputBFM {
    color: rgba(var(--bs-danger-rgb)) !important;
}

.container-fluid22 {
    padding: 0px 1px !important;
}

/*.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
     width: unset; 
}*/

.ContenedorCamposPrimary input {
    color: #6777EF;
    background-color: #edeffc !important;
    border-color: #edeffc !important;
}

.ContenedorCamposSuccess input, .ContenedorCamposSuccess span, .ContenedorCamposSuccess a {
    color: #5DB9BD !important;
    background-color: #e7f6f6 !important;
    border-color: #e7f6f6 !important;
}

.ContenedorCamposwarning input {
    color: #F1BC01 !important;
    background-color: #fff7d9 !important;
    border-color: #fff7d9 !important;
}

.ContenedorCamposDanger input, .ContenedorCamposDanger span, .ContenedorCamposDanger a {
    color: #FF6E50 !important;
    background-color: #ffeeeb !important;
    border-color: #ffeeeb !important;
}

.ContenedorCamposSalarioDanger input {
    color: #FF6E50 !important;
    background-color: #ffeeeb !important;
    border-color: #ffeeeb !important;
    text-align: center;
}

.ContenedorCamposSalarioSuccess input {
    color: #5DB9BD !important;
    background-color: #e7f6f6 !important;
    border-color: #e7f6f6 !important;
    text-align: center;
}

/*ContenedorEmpleadoCustom*/
.ContenedorEmpleadoCustom.contWhitFields {
    padding-bottom: 1.0rem;
    /*padding-bottom: 1.5rem;*/ /*Revision*/
}

.ContenedorEmpleadoCustom > .row {
    --bs-gutter-x: 0.3rem;
}

    .ContenedorEmpleadoCustom > .row > .control-label {
        color: #333 !important;
        font-weight: 400;
        font-size: 0.95rem !important;
        /*Revision*/
        /*font-size: inherit !important;
        font-weight: 500;*/
    }
/*Revision*/
/*.ContenedorEmpleadoCustom input[disabled]{
        background: unset;
        border: 0px;
        color: #000;
        font-weight: 700;
    }*/
/*Revision*/
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eff2f5 !important;
    opacity: 1 !important;
}
/*Revision*/
.select2-container .select2-selection--single {
    height: 35px;
    width: 100% !important;
    font-size: 0.95rem !important; /*Revision*/
}
/*.select2.select2-container {
    width: 97% !important;
}*/
/*Revision*/
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 33px;
}
/*Revision*/
.site-padding {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.input-lookup > div > a {
    height: max-content;
}

.input-lookup > div > a {
    height: max-content;
}

.input-lookup > div > span > button {
    height: max-content;
}

    .input-lookup > div > span > button > i {
        line-height: 1.5;
    }

[component="EmpresaConfiguracionCustomFRM"] {
    background: var(--bs-body-bg);
}

    [component="EmpresaConfiguracionCustomFRM"] > div > .scroll {
        max-height: 600px;
        overflow-y: auto;
    }

[component="EmpresaConfiguracionCustomFRM_Item"] {
    border-radius: 0.55rem;
    transition: background-color 0.15s ease;
}

    [component="EmpresaConfiguracionCustomFRM_Item"]:hover {
        cursor: pointer;
        background-color: #f3f5fc;
        box-shadow: none;
    }

    /* Categoria seleccionada: fondo lavanda + acento lateral morado (sin sombra/punteado) */
    [component="EmpresaConfiguracionCustomFRM_Item"].selected {
        box-shadow: none !important;
        border: none !important;
        border-left: 3px solid #6777EF !important;
        background-color: #EEF0FE !important;
    }

    /* Icono +/- de expandir/colapsar, en morado de marca */
    [component="EmpresaConfiguracionCustomFRM_Item"] > div i.fa-plus-square,
    [component="EmpresaConfiguracionCustomFRM_Item"] > div i.fa-minus-square,
    [component="EmpresaConfiguracionCustomFRM_Item"] i {
        color: #6777EF !important;
        transition: color 0.15s ease;
    }

label.dropzone > input {
    display: none;
}

table.dataTable > tbody {
}

table.dataTable > tfoot > tr {
    text-align: end;
}

/*.dataTable thead > tr > th:nth-child(2) {
    max-width: 500px;
    min-width: 500px;
}*/

#ulTabs > li {
    color: #a1a5b7;
    border: 0;
    border-bottom: 1px solid transparent;
    transition: color .2s ease,background-color .2s ease;
    padding: 0.5rem 0;
}

    #ulTabs > li > a > span {
        padding-left: 0.5rem;
    }

    #ulTabs > li.active > a {
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid #6777EF;
        transition: color .2s ease,background-color .2s ease;
        color: #6777EF;
    }

.hidden {
    display: none;
}


.sa-button-container {
    direction: rtl;
}


/*.select2-close-mask {
    z-index: 2099;
}

.select2-dropdown {
    z-index: 3051;
}*/

.form-check.form-check-solid .form-check-input:active, .form-check.form-check-solid .form-check-input:focus {
    filter: brightness(0.9);
    /* background-color: #5c53a8; */
    border: 1px solid #000;
}


.nav-botones > .nav-boton {
    margin-left: auto;
}

    .nav-botones > .nav-boton ~ .nav-boton {
        margin-left: unset;
    }

.scrollTableCustom {
    display: block !important;
    /*max-height: 300px;
    overflow-y: auto;*/
}

    .scrollTableCustom > tbody {
        display: block !important;
        max-height: 60vh !important;
        overflow-y: scroll;
    }

    .scrollTableCustom thead, .scrollTableCustom tbody tr {
        display: table !important;
        width: 100%;
        table-layout: fixed;
    }

.barraEstado {
    position: absolute;
    width: 100%;
    top: 100%;
    background: #e9ecf8;
    border-top: 1px solid #e2e5f3;
    border-bottom: 1px solid #e2e5f3;
    padding: 5px 0;
    font-size: 0.8rem;
}

    .barraEstado .px-4 {
        color: #5e6278 !important;
        font-weight: 500;
    }

    .barraEstado strong {
        color: #181c32;
        font-weight: 700;
    }

.lookup2Btn > div > div > .input-group-btn > button {
    padding-right: 4px !important;
    padding-left: 6px !important;
}

.lookup2Lbl > div > label {
    padding-top: 19px !important;
}

.inputcustomBtn span.btn {
    padding-right: 8px !important;
    padding-left: 12px !important;
}

.swal2-modal {
    flex-wrap: wrap;
}

    .swal2-modal > .swal2-header, .swal2-modal > .swal2-content, .swal2-modal > .swal2-actions, .swal2-modal > .swal2-footer {
        width: 100%;
    }

    .swal2-modal > .swal2-actions {
        margin-bottom: 0px;
        margin-top: 5px;
        justify-content: end;
    }

.notificacionV {
    background-color: #fff;
    -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.notificacionVSinVer {
    background-color: #6777ef2b;
}

.dropdown-ColumnFilter > li > ul > li {
    padding: 0px;
}

    .dropdown-ColumnFilter > li > ul > li > a {
        display: block;
        padding: 4px;
    }

        .dropdown-ColumnFilter > li > ul > li > a:hover {
            background: #EFF2FF;
        }

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    display: none;
    width: auto;
    text-wrap: nowrap;
    background-color: #fff;
    /*color: #000;*/
    /*text-align: center;*/
    border-radius: 6px;
    border-block-color: aliceblue;
    padding: 5px;
    position: absolute;
    z-index: 10000;
    top: 105%;
    box-shadow: 7px 7px 7px 7px rgba(20, 20, 20, 0.1);
    /*bottom: 125%;*/ /* Posiciona el tooltip encima del elemento */
    /*left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;*/
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    display: block;
}

.data-item {
    display: flex;
    flex-direction: column;
}

    .data-item .label {
        font-size: 11px;
        color: #888;
        text-transform: uppercase;
        font-weight: 600;
    }

    .data-item .value {
        font-size: 14px;
        color: #333;
        font-weight: 500;
    }

.full-width {
    grid-column: span 2;
}

.highlight {
    color: #2563eb;
    font-weight: bold;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Columna Anterior y Columna Nuevo */
    gap: 10px;
    background: #f9fafb;
    padding: 1px; /*10px;*/
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
}

.diff-box {
    padding: 1px; /*5px 8px;*/
    border-radius: 4px;
    font-size: 13px;
}

.old-val {
    background: #fee2e2;
    color: #991b1b;
}

.new-val {
    background: #dcfce7;
    color: #166534;
    font-weight: bold;
}

.change-indicator {
    grid-column: span 2;
    font-size: 11px;
    font-weight: bold;
    color: #64748b;
    margin-top: 10px;
    border-bottom: 1px solid #e2e8f0;
}

/* ===========================================================================
   Estetica de las tablas de listado (.table_principal)
   Color de marca: #6777EF  |  Fila seleccionada: #EEF0FE
   =========================================================================== */
table.table_principal {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    /* Encabezado */
    table.table_principal > thead > tr > th {
        background-color: #6777EF;
        /* Sin !important: los titulos quedan blancos por especificidad sobre el tema,
       pero un color inline (p.ej. el verde de los dias DOM/LUN/MAR) puede ganar. */
        color: #fff;
        font-weight: 600;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        padding: 0.85rem 0.9rem;
        border-bottom: none;
        vertical-align: middle;
        white-space: nowrap;
    }

        table.table_principal > thead > tr > th:first-child {
            border-top-left-radius: 0.5rem;
        }

        table.table_principal > thead > tr > th:last-child {
            border-top-right-radius: 0.5rem;
        }

        /* Iconos de orden/menu del encabezado en blanco para que contrasten */
        table.table_principal > thead > tr > th .dropdown-toggle,
        table.table_principal > thead > tr > th i,
        table.table_principal > thead > tr > th .caret {
            color: #fff !important;
        }

    /* Cuerpo: separadores suaves (en vez de la linea punteada), respiracion y transicion */
    table.table_principal > tbody > tr > td {
        border-top: none !important;
        border-bottom: 1px solid #eef0f4 !important;
        border-bottom-style: solid !important;
        padding: 0.7rem 0.9rem;
        vertical-align: middle;
        color: #3f4254;
    }

    /* Cebra muy sutil */
    table.table_principal > tbody > tr:nth-of-type(even) > td {
        background-color: #fafbff;
    }

    /* Hover */
    table.table_principal > tbody > tr {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

        table.table_principal > tbody > tr:hover > td {
            background-color: #f1f3ff;
        }

        /* Fila seleccionada con acento a la izquierda */
        table.table_principal > tbody > tr.selected > td,
        table.dataTable.table_principal > tbody > tr.selected > td {
            background-color: #EEF0FE !important;
            color: #2b2f43 !important;
            font-weight: 600;
        }

            table.table_principal > tbody > tr.selected > td:first-child {
                box-shadow: inset 3px 0 0 0 #6777EF;
            }

        /* Ultima fila sin borde inferior para que cierre limpio */
        table.table_principal > tbody > tr:last-child > td {
            border-bottom: none !important;
        }

/* ===========================================================================
   Footer del listado: info de registros + paginador
   =========================================================================== */
.dataTables_info {
    color: #7e8299;
    font-size: 0.85rem;
    font-weight: 500;
    padding-top: 0.9rem !important;
}

.dataTables_pager {
    padding-top: 0.55rem;
}

/* Botones del paginador */
.paginate_button {
    cursor: pointer;
    margin-left: 3px;
    margin-right: 3px;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 0.475rem;
    color: #5e6278;
    background-color: #f4f5f9;
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .paging_simple_numbers > span > a:hover,
    .paginate_button:hover {
        background-color: #EEF0FE;
        color: #6777EF;
    }

    /* Pagina actual */
    a.current,
    .paginate_button.current,
    .paging_simple_numbers > span > a.current {
        background: #6777EF !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(103, 119, 239, 0.35);
    }

    /* Previous / Next deshabilitados */
    .paginate_button.disabled,
    .paginate_button.disabled:hover {
        color: #b5b9c5;
        background-color: transparent;
        cursor: default;
    }

/* Contenedor del footer del listado: separador superior y alineacion */
.dataTables_pager,
.dataTables_info {
    display: flex;
    align-items: center;
}

.dataTables_pager {
    justify-content: flex-end;
}

/* "Previous" / "Next" como iconos de chevron (oculta el texto y muestra ‹ ›) */
.paginate_button.previous,
.paginate_button.next {
    background-color: #f4f5f9;
    font-size: 0; /* oculta el texto "Previous"/"Next" */
    padding: 0;
}

    .paginate_button.previous::before,
    .paginate_button.next::before {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1;
    }

    .paginate_button.previous::before {
        content: "\276E";
    }
    /* ❮ */
    .paginate_button.next::before {
        content: "\276F";
    }
    /* ❯ */

    .paginate_button.previous:hover,
    .paginate_button.next:hover {
        background-color: #EEF0FE;
        color: #6777EF;
    }

/* ===========================================================================
   Menu de acciones de columna de los listados (Order Desc/Asc, Igual, Contiene,
   Filtro y la lista de valores). Son ul.dropdown-menu con estilo inline
   "height:250px; overflow:auto" — esa firma la comparten TODOS los menus de
   columna de TODAS las tablas, por eso se usa [style*="overflow"]. Es un
   .dropdown-menu de Bootstrap (oculto por defecto), asi que no afecta el header.
   =========================================================================== */
ul.dropdown-menu[style*="overflow"] {
    padding: 0.4rem;
    border: 1px solid #eef0f4;
    border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(54, 61, 100, 0.15);
}

    ul.dropdown-menu[style*="overflow"] > li > a {
        display: block;
        padding: 0.5rem 0.8rem;
        border-radius: 0.45rem;
        color: #3f4254;
        font-size: 0.85rem;
        font-weight: 500;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        ul.dropdown-menu[style*="overflow"] > li > a > i {
            display: inline-block;
            margin-right: 0.6rem;
            width: 1.1rem;
            text-align: center;
            /* !important para vencer la regla del encabezado (th i { color:#fff !important }),
               que volvia blancos -y por tanto invisibles- los iconos del menu. */
            color: #6777EF !important;
        }

            /* line-awesome (cargado junto a FA4) reescribe la fuente Y el @font-face de
           las clases .fa, dejando los glifos vacios. Solucion robusta: usar simbolos
           UNICODE con fuente de texto normal SOLO en los iconos que mapeamos (asi no
           convertimos en tofu los iconos no contemplados). */
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-sort-amount-desc::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-sort-amount-asc::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-bars::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-align-center::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-filter::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-greater-than::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-less-than::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-angle-right::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-angle-left::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-chevron-right::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-chevron-left::before {
                font-family: "Segoe UI", Arial, sans-serif !important;
                font-weight: 700 !important;
                font-style: normal !important;
            }

            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-sort-amount-desc::before {
                content: "\2193" !important;
            }
            /* down: Order Desc */
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-sort-amount-asc::before {
                content: "\2191" !important;
            }
            /* up: Order Asc */
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-bars::before {
                content: "\003D" !important;
            }
            /* = : Igual */
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-align-center::before {
                content: "\2283" !important;
            }
            /* contains: Contiene */
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-filter::before {
                content: "\25BD" !important;
            }
            /* funnel: Filtro */
            /* Posibles clases de MAYOR QUE / MENOR QUE (se cubren varias por si acaso) */
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-greater-than::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-angle-right::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-chevron-right::before {
                content: "\003E" !important;
            }
            /* > : Mayor que */
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-less-than::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-angle-left::before,
            ul.dropdown-menu[style*="overflow"] > li > a > i.fa-chevron-left::before {
                content: "\003C" !important;
            }
        /* < : Menor que */

        ul.dropdown-menu[style*="overflow"] > li > a:hover {
            background-color: #EEF0FE;
            color: #6777EF;
        }

            ul.dropdown-menu[style*="overflow"] > li > a:hover > i {
                color: #6777EF;
            }

    /* Separadores (li.liseparador con un <a> vacio dentro) */
    ul.dropdown-menu[style*="overflow"] > li.liseparador {
        height: 0;
        margin: 0.35rem 0.25rem;
        border-top: 1px solid #eef0f4;
        pointer-events: none;
    }

        ul.dropdown-menu[style*="overflow"] > li.liseparador > a {
            display: none;
        }

    /* <li></li> vacios usados como espaciadores: ocultarlos */
    ul.dropdown-menu[style*="overflow"] > li:empty {
        display: none;
    }

/* ===========================================================================
   Toggle del encabezado de columna: quitar el borde/recuadro negro al abrir
   el menu (foco/estado abierto) para que el titulo se vea limpio.
   =========================================================================== */
/* Importante: se apunta SOLO al elemento interactivo (a / dropdown-toggle / button),
   NO a "th *", porque ese comodin volvia transparente el triangulo verde decorativo
   de los dias (border-top: 40px solid #5ABCBF sobre un <div>). */
table.table_principal thead th .dropdown-toggle,
table.table_principal thead th [class*="dropdown-toggle"],
table.table_principal thead th a,
table.table_principal thead th button,
table.table_principal thead th .btn,
table.table_principal thead th a:focus,
table.table_principal thead th button:focus,
table.table_principal thead th [class*="dropdown-toggle"]:focus,
table.table_principal thead th.open > [class*="dropdown-toggle"],
table.table_principal thead .btn-group.open > .dropdown-toggle {
    outline: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* ===========================================================================
   Indicador de orden de DataTables en los listados.
   Se ocultan las flechas nativas (que descuadraban el titulo) y se muestra una
   flecha limpia SOLO para la direccion activa, posicionada de forma absoluta a
   la derecha del encabezado para que nunca mueva el titulo.
   =========================================================================== */
table.table_principal > thead > tr > th {
    position: relative;
}

    /* Quitar el fondo de flechas nativo */
    table.table_principal > thead > tr > th.sorting,
    table.table_principal > thead > tr > th.sorting_asc,
    table.table_principal > thead > tr > th.sorting_desc,
    table.table_principal > thead > tr > th.sorting_asc_disabled,
    table.table_principal > thead > tr > th.sorting_desc_disabled {
        background-image: none !important;
    }

        /* Ocultar el indicador "sin ordenar" y el ::before nativo */
        table.table_principal > thead > tr > th.sorting::before,
        table.table_principal > thead > tr > th.sorting::after,
        table.table_principal > thead > tr > th.sorting_asc::before,
        table.table_principal > thead > tr > th.sorting_desc::before {
            display: none !important;
        }

        /* Flecha limpia de la direccion activa (no afecta el flujo del titulo) */
        table.table_principal > thead > tr > th.sorting_asc::after,
        table.table_principal > thead > tr > th.sorting_desc::after {
            display: inline-block !important;
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-family: "Segoe UI", Arial, sans-serif !important;
            font-size: 0.8rem;
            font-weight: 700;
            color: #fff;
            opacity: 0.95;
        }

        table.table_principal > thead > tr > th.sorting_asc::after {
            content: "\2191" !important;
        }
        /* ↑ asc */
        table.table_principal > thead > tr > th.sorting_desc::after {
            content: "\2193" !important;
        }
/* ↓ desc */

/* ===========================================================================
   Modales de acciones de los listados (filtro, seleccion, generico, lookup):
   apariencia moderna. Scoped por id para no afectar otros modales de la app.
   =========================================================================== */
#modalFiltro .modal-content,
#modalFiltroSeleccionItems .modal-content,
#modalGenerico .modal-content,
#ModalLookup .modal-content {
    border: none;
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(54, 61, 100, 0.28);
}

/* Los modales de filtro solo tienen un campo: hacerlos mas compactos */
#modalFiltro .modal-dialog,
#modalFiltroSeleccionItems .modal-dialog {
    max-width: 480px;
}

/* Header con degradado de marca */
#modalFiltro .modal-header,
#modalFiltroSeleccionItems .modal-header,
#modalGenerico .modal-header,
#ModalLookup .modal-header {
    background: linear-gradient(90deg, #6777EF 0%, #8893ff 100%) !important;
    color: #fff;
    padding: 0.7rem 1.4rem !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    #modalFiltro .modal-header h1, #modalFiltro .modal-header h2,
    #modalFiltro .modal-header h3, #modalFiltro .modal-header h4,
    #modalFiltroSeleccionItems .modal-header h1, #modalFiltroSeleccionItems .modal-header h2,
    #modalFiltroSeleccionItems .modal-header h3, #modalFiltroSeleccionItems .modal-header h4,
    #modalGenerico .modal-header h1, #modalGenerico .modal-header h2,
    #modalGenerico .modal-header h3, #modalGenerico .modal-header h4,
    #ModalLookup .modal-header h1, #ModalLookup .modal-header h2,
    #ModalLookup .modal-header h3, #ModalLookup .modal-header h4 {
        color: #fff !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* El titulo a veces trae un <br> que lo parte en dos lineas: anularlo */
    #modalFiltro .modal-header br,
    #modalFiltroSeleccionItems .modal-header br,
    #modalGenerico .modal-header br,
    #ModalLookup .modal-header br {
        display: none !important;
    }

    /* Boton de cerrar (X) del header */
    #modalFiltro .modal-header [data-bs-dismiss="modal"],
    #modalFiltro .modal-header [data-dismiss="modal"],
    #modalFiltroSeleccionItems .modal-header [data-bs-dismiss="modal"],
    #modalFiltroSeleccionItems .modal-header [data-dismiss="modal"],
    #modalGenerico .modal-header [data-bs-dismiss="modal"],
    #modalGenerico .modal-header [data-dismiss="modal"],
    #ModalLookup .modal-header [data-bs-dismiss="modal"],
    #ModalLookup .modal-header [data-dismiss="modal"] {
        color: #fff !important;
        opacity: 0.9;
        border-radius: 0.5rem;
        transition: background-color 0.15s ease, opacity 0.15s ease;
    }

        #modalFiltro .modal-header [data-bs-dismiss="modal"]:hover,
        #modalFiltroSeleccionItems .modal-header [data-bs-dismiss="modal"]:hover,
        #modalGenerico .modal-header [data-bs-dismiss="modal"]:hover,
        #ModalLookup .modal-header [data-bs-dismiss="modal"]:hover {
            background-color: rgba(255, 255, 255, 0.18);
            opacity: 1;
        }

/* Cuerpo */
#modalFiltro .modal-body,
#modalFiltroSeleccionItems .modal-body,
#modalGenerico .modal-body,
#ModalLookup .modal-body {
    padding: 1.5rem !important;
}

#modalFiltro .control-labelFiltro,
#modalFiltroSeleccionItems .control-labelFiltro {
    font-weight: 600;
    color: #3f4254;
    padding-top: 0.55rem;
}

/* Inputs modernos dentro de los modales */
#modalFiltro .modal-body .form-control,
#modalFiltroSeleccionItems .modal-body .form-control,
#modalGenerico .modal-body .form-control,
#ModalLookup .modal-body .form-control {
    height: auto;
    padding: 0.6rem 0.9rem;
    border: 1px solid #e4e6ef;
    border-radius: 0.6rem;
    font-size: 0.9rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    #modalFiltro .modal-body .form-control:focus,
    #modalFiltroSeleccionItems .modal-body .form-control:focus,
    #modalGenerico .modal-body .form-control:focus,
    #ModalLookup .modal-body .form-control:focus {
        border-color: #6777EF;
        box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.15);
        outline: none;
    }

/* Footer */
#modalFiltro .modal-footer,
#modalFiltroSeleccionItems .modal-footer,
#modalGenerico .modal-footer,
#ModalLookup .modal-footer {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid #eef0f4 !important;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

    #modalFiltro .modal-footer .btn,
    #modalFiltroSeleccionItems .modal-footer .btn,
    #modalGenerico .modal-footer .btn,
    #ModalLookup .modal-footer .btn {
        border-radius: 0.6rem;
        padding: 0.55rem 1.15rem;
        font-weight: 600;
        font-size: 0.875rem;
        margin: 0;
    }

        /* El boton "Cerrar" (descarta el modal) en gris claro para contrastar con Aceptar */
        #modalFiltro .modal-footer .btn[data-bs-dismiss="modal"],
        #modalFiltro .modal-footer .btn[data-dismiss="modal"],
        #modalFiltroSeleccionItems .modal-footer .btn[data-bs-dismiss="modal"],
        #modalFiltroSeleccionItems .modal-footer .btn[data-dismiss="modal"],
        #modalGenerico .modal-footer .btn[data-bs-dismiss="modal"],
        #ModalLookup .modal-footer .btn[data-bs-dismiss="modal"] {
            background-color: #f4f5f9 !important;
            color: #5e6278 !important;
            border: none !important;
        }

            #modalFiltro .modal-footer .btn[data-bs-dismiss="modal"]:hover,
            #modalFiltroSeleccionItems .modal-footer .btn[data-bs-dismiss="modal"]:hover,
            #modalGenerico .modal-footer .btn[data-bs-dismiss="modal"]:hover,
            #ModalLookup .modal-footer .btn[data-bs-dismiss="modal"]:hover {
                background-color: #e9ebf5 !important;
                color: #6777EF !important;
            }

/* ===========================================================================
   Barra de "filtros aplicados" de los listados ({tabla}FiltrosAplicadosDiv).
   Se moderniza: contenedor suave y cada filtro como una pildora (chip).
   =========================================================================== */
[id$="FiltrosAplicadosDiv"] {
    background: #f7f8ff !important;
    border: 1px solid #e7e9f8 !important;
    border-radius: 0.65rem !important;
    padding: 0.55rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

    /* Cada filtro aplicado como chip/pildora */
    [id$="FiltrosAplicadosDiv"] a,
    [id$="FiltrosAplicados"] a {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin: 0.2rem 0.25rem 0.2rem 0;
        padding: 0.32rem 0.8rem;
        background-color: #EEF0FE;
        color: #6777EF !important;
        border-radius: 2rem;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none !important;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        [id$="FiltrosAplicadosDiv"] a:hover,
        [id$="FiltrosAplicados"] a:hover {
            background-color: #6777EF;
            color: #fff !important;
        }

        /* La X para quitar el filtro */
        [id$="FiltrosAplicadosDiv"] a i,
        [id$="FiltrosAplicados"] a i {
            font-size: 0.72rem;
            opacity: 0.85;
        }

/* ===========================================================================
   Componente LOOKUP (input con lupa + borrador) y su modal (#ModalLookup).
   =========================================================================== */
/* Campos del lookup (aplica a todas las variantes: .datafieldlookup, alias, etc.) */
.datafieldlookup,
.datafieldlookup2 {
    height: auto;
    padding: 0.5rem 0.8rem;
    font-size: 0.875rem;
    border: 1px solid #e4e6ef;
    box-shadow: none;
    border-radius: 0.475rem !important; /* redondeado como las demas cajas */
}

/* Caja de codigo del lookup (el input dentro del input-group) redondeada */
.input-group:has(.btn > .fa-search) > .form-control,
.input-group:has(.btn > .fa-search) > .datafield,
.input-group:has(.btn > .fa-search) > .datafieldlookup {
    border-radius: 0.475rem !important;
    margin-right: 0.3rem;
}

.datafieldlookup:focus,
.datafieldlookup2:focus,
.input-group .form-control.datafield:focus {
    border-color: #6777EF;
    box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.15);
    outline: none;
}

/* Botones del lookup identificados POR SU ICONO (robusto en todas las variantes,
   con o sin la clase .v-input-lookup). :has() funciona en Chrome moderno. */
.input-group-btn .btn:has(> .fa-search),
.input-group-btn .btn:has(> .fa-eraser) {
    border: none !important;
    padding: 0.5rem 0.75rem;
    border-radius: 0.475rem !important; /* redondeado, como controles separados */
    margin-left: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Lupa: morado, icono blanco */
.input-group-btn .btn:has(> .fa-search) {
    background-color: #6777EF !important;
}

    .input-group-btn .btn:has(> .fa-search):hover {
        background-color: #5563d6 !important;
    }

    .input-group-btn .btn:has(> .fa-search) > i {
        color: #fff !important;
    }

/* Borrador: lavanda, icono morado (antes era blanco sobre fondo claro = invisible) */
.input-group-btn .btn:has(> .fa-eraser) {
    background-color: #EEF0FE !important;
}

    .input-group-btn .btn:has(> .fa-eraser):hover {
        background-color: #dfe3ff !important;
    }

    .input-group-btn .btn:has(> .fa-eraser) > i {
        color: #6777EF !important;
    }

/* Modal del lookup: header mas compacto (el titulo del listado va en el cuerpo) */
#ModalLookup .modal-header {
    padding: 0.55rem 1.25rem !important;
    min-height: 0;
}

/* Botones del cuerpo del modal (Refrescar, etc.): compactos, no de ancho completo */
#ModalLookup .modal-body .btn {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.5rem;
}

/* "Refrescar" del modal lookup convertido en icono ⟳ */
#ModalLookup .modal-body [id$="_refresh"] {
    font-size: 0 !important; /* oculta el texto "Refrescar" */
    min-width: 2.4rem;
    padding: 0.5rem 0.7rem !important;
    justify-content: center;
}

    #ModalLookup .modal-body [id$="_refresh"] > * {
        display: none !important; /* oculta icono/span internos */
    }

    #ModalLookup .modal-body [id$="_refresh"]::before {
        content: "\27F3"; /* ⟳ */
        font-size: 1.1rem !important;
        font-family: "Segoe UI", Arial, sans-serif !important;
        line-height: 1;
    }

/* ===========================================================================
   Select (Chosen): modernizar y estandarizar la altura con las cajas de texto.
   =========================================================================== */
.chosen-container {
    font-size: inherit;
}

/* Caja del select: mismo estilo que un .form-control (sin min-height, que
   ensanchaba el control). La altura la da el padding. */
.chosen-container-single .chosen-single {
    height: auto !important;
    padding: 0.55rem 0.9rem !important;
    line-height: 1.6;
    border: 1px solid #e4e6ef !important;
    border-radius: 0.475rem !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #3f4254;
}

    .chosen-container-single .chosen-single span {
        line-height: 1.6;
    }

    /* Flecha del select (reemplaza el sprite por un chevron morado) */
    .chosen-container-single .chosen-single div {
        top: 0;
        right: 0.4rem;
        width: 1.4rem;
        height: 100%;
        background: transparent;
    }

        .chosen-container-single .chosen-single div b {
            background: none !important;
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

            .chosen-container-single .chosen-single div b::after {
                content: "\25BE"; /* ▾ */
                color: #6777EF;
                font-size: 0.85rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

    /* X para limpiar, centrada verticalmente */
    .chosen-container-single .chosen-single abbr {
        top: 50% !important;
        transform: translateY(-50%);
        right: 1.7rem;
        margin: 0;
    }

/* Estado activo / con dropdown abierto: anillo morado */
.chosen-container-active .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    border-color: #6777EF !important;
    box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.15) !important;
    border-radius: 0.475rem !important;
}

/* Dropdown */
.chosen-container .chosen-drop {
    border: 1px solid #e4e6ef !important;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(54, 61, 100, 0.15);
    margin-top: 4px;
    overflow: hidden;
}

/* Buscador del dropdown */
.chosen-container .chosen-search input[type="text"] {
    border: 1px solid #e4e6ef !important;
    border-radius: 0.45rem !important;
    padding: 0.45rem 0.7rem !important;
    background: #fff !important;
}

/* Opciones */
.chosen-container .chosen-results {
    margin: 0.3rem;
    padding: 0;
}

    .chosen-container .chosen-results li {
        padding: 0.5rem 0.7rem !important;
        border-radius: 0.4rem;
    }

        .chosen-container .chosen-results li.highlighted {
            background: #6777EF !important;
            color: #fff !important;
        }

        .chosen-container .chosen-results li.result-selected {
            background: #EEF0FE !important;
            color: #6777EF !important;
            font-weight: 600;
        }

/* ===========================================================================
   Select (select2): modernizar y estandarizar la altura con las cajas de texto.
   (El proyecto usa select2 en muchos formularios; este selector cubre ese caso.)
   =========================================================================== */
/* Ancho completo (como las cajas de texto); select2 lo auto-ajustaba al contenido */
.select2-container {
    width: 100% !important;
}

/* El .form-group es un flex-item dentro de "col-md-6 row" y se encogia al contenido.
   Lo forzamos a crecer con FLEX (no display): flex no afecta a los display:none,
   asi que NO revela campos ocultos. Luego wrapper e inputs al 100%. */
.contWhitFields > .form-group {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0;
}

    /* Wrapper del control al 100% (SOLO width, nunca display). Excluye lookup. */
    .contWhitFields > .form-group > div:not(.input-group):not(.has-error) {
        width: 100% !important;
    }

    .contWhitFields > .form-group > div:not(.input-group) > input.form-control {
        width: 100% !important;
    }

/* Solo estilo visual: el alto/ancho los maneja la regla previa (.select2-container
   .select2-selection--single { height:35px; width:100% }). NO usar display:flex ni
   height:auto: eso descuadraba el ancho. */
.select2-container--default .select2-selection--single {
    height: 35px !important;
    padding: 0 0.9rem !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 0.475rem !important;
    background: #fff !important;
    box-shadow: none !important;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 33px;
        padding: 0;
        color: #3f4254;
    }

    /* Flecha */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 0;
        right: 0.6rem;
        height: 100%;
    }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #6777EF transparent transparent transparent;
        }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #6777EF transparent;
}

/* X de limpiar */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 1.5rem;
    color: #a1a5b7;
    font-weight: 700;
}

/* Foco / abierto: anillo morado */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #6777EF !important;
    box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.15) !important;
}

/* Dropdown */
.select2-dropdown {
    border: 1px solid #e4e6ef !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 30px rgba(54, 61, 100, 0.15);
    overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #e4e6ef !important;
    border-radius: 0.45rem !important;
    padding: 0.45rem 0.7rem !important;
}

.select2-results__option {
    padding: 0.5rem 0.7rem !important;
    border-radius: 0.4rem;
    margin: 1px 0.3rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #6777EF !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #EEF0FE !important;
    color: #6777EF !important;
    font-weight: 600;
}

/* ===========================================================================
   Inputs de formulario (texto, numero, etc.): estilo moderno y consistente,
   igual que los de los modales/lookup (borde redondeado + focus ring morado).
   Scoped a los contenedores de campos para no afectar tablas u otros contextos.
   =========================================================================== */
.contWhitFields .form-control,
.contWhitFields textarea.form-control,
.contWhitFields input.datafield {
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .contWhitFields .form-control:focus,
    .contWhitFields textarea.form-control:focus,
    .contWhitFields input.datafield:focus {
        border-color: #6777EF;
        box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.15);
        outline: none;
    }

/* ===========================================================================
   Input numerico: ocultar spinners nativos y mostrar stepper ▲▼ moderno
   (los botones los inyecta Scripts/Helpers/VentukNumerico.js).
   =========================================================================== */
.contWhitFields input[type="number"]::-webkit-outer-spin-button,
.contWhitFields input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.contWhitFields input[type="number"].v-num-input {
    -moz-appearance: textfield;
    padding-right: 1.9rem !important;
}

.v-num-steppers {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 1.65rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0.4rem 0.4rem 0;
    border-left: 1px solid #eef0f4;
    z-index: 2;
}

    .v-num-steppers button {
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: #f4f5f9;
        color: #6777EF;
        font-size: 0.62rem;
        line-height: 1;
        padding: 0;
        margin: 0;
        cursor: pointer;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

        .v-num-steppers button:hover {
            background: #6777EF;
            color: #fff;
        }

    .v-num-steppers .v-num-up {
        border-bottom: 1px solid #eef0f4;
    }

/* ===========================================================================
   Datepicker: input + boton de calendario (redondeados, como el lookup) y el
   calendario emergente con colores de marca.
   =========================================================================== */
/* Boton de calendario (identificado por su icono) */
.input-group-btn .btn:has(> .fa-calendar) {
    background-color: #6777EF !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.475rem !important;
    margin-left: 0.25rem;
    padding: 0.5rem 0.75rem;
    transition: background-color 0.15s ease;
}

    .input-group-btn .btn:has(> .fa-calendar):hover {
        background-color: #5563d6 !important;
    }

    .input-group-btn .btn:has(> .fa-calendar) > i {
        color: #fff !important;
    }

/* Input de fecha redondeado dentro del grupo */
.input-group:has(.btn > .fa-calendar) > .form-control,
.input-group:has(.btn > .fa-calendar) > input.datepicker {
    border-radius: 0.475rem !important;
    margin-right: 0.3rem;
}

/* --- Calendario emergente (bootstrap-datepicker / datepicker3) --- */
.datepicker.dropdown-menu,
.datepicker {
    border: 1px solid #e4e6ef !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 10px 30px rgba(54, 61, 100, 0.15) !important;
    padding: 0.5rem !important;
}

    .datepicker table {
        border-radius: 0.4rem;
    }

    .datepicker td,
    .datepicker th {
        border-radius: 0.4rem !important;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

        .datepicker td.day:hover,
        .datepicker th.prev:hover,
        .datepicker th.next:hover,
        .datepicker th.datepicker-switch:hover,
        .datepicker .month:hover,
        .datepicker .year:hover {
            background-color: #EEF0FE !important;
            color: #6777EF !important;
        }

        .datepicker td.today,
        .datepicker td.today:hover {
            background-color: #EEF0FE !important;
            color: #6777EF !important;
            font-weight: 700;
        }

        .datepicker td.active.day,
        .datepicker td.active.day:hover,
        .datepicker td.active,
        .datepicker .month.active,
        .datepicker .year.active {
            background-color: #6777EF !important;
            background-image: none !important;
            color: #fff !important;
            text-shadow: none !important;
        }

        .datepicker td.old,
        .datepicker td.new {
            color: #b5b9c5 !important;
        }

/* --- Calendario emergente (bootstrap-datetimepicker) --- */
.bootstrap-datetimepicker-widget.dropdown-menu {
    border: 1px solid #e4e6ef !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 10px 30px rgba(54, 61, 100, 0.15) !important;
    padding: 0.5rem !important;
}

.bootstrap-datetimepicker-widget td.day:hover,
.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget td span:hover {
    background-color: #EEF0FE !important;
    color: #6777EF !important;
    border-radius: 0.4rem;
}

.bootstrap-datetimepicker-widget td.today:before {
    border-bottom-color: #6777EF !important;
}

.bootstrap-datetimepicker-widget td.active,
.bootstrap-datetimepicker-widget td.active:hover,
.bootstrap-datetimepicker-widget td span.active {
    background-color: #6777EF !important;
    color: #fff !important;
    border-radius: 0.4rem;
    text-shadow: none !important;
}

/* ===========================================================================
   Toggle / switch (form-check form-switch): color de marca y focus ring.
   =========================================================================== */
.form-check.form-switch .form-check-input {
    cursor: pointer;
    width: 3.75rem !important;
    height: 2rem !important;
    margin-top: 0;
    border: none !important;
    border-radius: 2rem !important;
    background-color: #d8dbe8 !important;
    /* knob: circulo blanco */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='6' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: 0.22rem center !important;
    background-size: 1.6rem 1.6rem !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    transition: background-color 0.25s ease, background-position 0.25s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

    /* Encendido: track con degradado de marca y knob a la derecha */
    .form-check.form-switch .form-check-input:checked {
        background-color: #6777EF !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='6' fill='%23ffffff'/%3e%3c/svg%3e") !important;
        background-position: calc(100% - 0.22rem) center !important;
        box-shadow: 0 2px 6px rgba(103, 119, 239, 0.35) !important;
    }

    .form-check.form-switch .form-check-input:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='6' fill='%23ffffff'/%3e%3c/svg%3e") !important;
        box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.18) !important;
    }

    .form-check.form-switch .form-check-input:checked:focus {
        box-shadow: 0 2px 6px rgba(103, 119, 239, 0.35), 0 0 0 3px rgba(103, 119, 239, 0.18) !important;
    }

    /* Deshabilitado */
    .form-check.form-switch .form-check-input:disabled {
        opacity: 0.5;
    }

/* ===========================================================================
   LOGIN moderno (scoped a body.login para no afectar el resto de la app).
   =========================================================================== */
body.login .login-card {
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(22, 79, 115, 0.18);
}

/* Titulos en azul de marca / neutro (sin morado) */
body.login .login-card-title {
    color: #164F73;
    font-weight: 800;
    letter-spacing: 0.3px;
}

body.login .login-card-description {
    color: #3f4254 !important;
    font-weight: 600;
}

/* Inputs: borde gris suave y foco discreto (anillo fino, poco saturado) */
body.login .login-card .form-control {
    border: 1px solid #e4e6ef;
    border-radius: 0.7rem;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 14px;
    background-color: #f9fafc;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    body.login .login-card .form-control:focus {
        border-color: #6777EF;
        background-color: #fff;
        box-shadow: 0 0 0 2px rgba(103, 119, 239, 0.12);
        outline: none;
    }

/* Boton de inicio: morado solido (CTA), limpio y con leve elevacion */
body.login .login-card .login-btn {
    background-color: #6777EF !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0.7rem !important;
    padding: 14px 20px !important;
    font-weight: 700;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(103, 119, 239, 0.25);
    transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    body.login .login-card .login-btn:hover {
        background-color: #5563d6 !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(103, 119, 239, 0.3);
        color: #fff !important;
    }

    body.login .login-card .login-btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(103, 119, 239, 0.25);
    }

/* Link de contraseña: neutro, morado solo al pasar el mouse */
body.login .forgot-password-link {
    color: #7e8299 !important;
    font-weight: 600;
    text-decoration: none;
}

    body.login .forgot-password-link:hover {
        color: #6777EF !important;
        text-decoration: underline;
    }

/* Separador mas sutil */
body.login .card-body hr {
    border-color: #eef0f4;
    opacity: 1;
}

/* Fondo claro, limpio y corporativo (en vez del wallpaper anterior) */
body.login {
    background: radial-gradient(900px 500px at 85% 90%, rgba(103, 119, 239, 0.08), transparent 60%), linear-gradient(135deg, #f5f8fc 0%, #e9eff6 100%) !important;
    background-attachment: fixed !important;
}

    /* anula el wallpaper viejo si llegara a pintarse */
    body.login .login-bg2 {
        background-image: none !important;
    }

    /* "Otros modulos de Ventuk": chips de TEXTO (sin imagenes), estilo pildora */
    body.login .vk-modulos-titulo {
        color: #3f4254 !important;
        font-weight: 600;
        font-size: 0.95rem !important;
        text-align: left;
        margin: 12px 0 12px !important;
    }

    body.login .vk-modulos-lista {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
        max-width: 380px;
    }

    body.login .vk-modulo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 38px;
        padding: 5px 6px;
        border-radius: 11px;
        background: #fff;
        border: 1px solid #d7dde7;
        color: #164F73 !important;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.15;
        text-decoration: none !important;
        transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }

        body.login .vk-modulo:hover {
            background: #164F73;
            border-color: #164F73;
            color: #fff !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(22, 79, 115, 0.22);
        }

    /* ---- Login: refinamiento del formulario ---- */
    /* Titulo un poco mas contenido */
    body.login .login-card-title {
        font-size: 30px !important;
        letter-spacing: 0.4px;
        margin-bottom: 6px !important;
    }

    body.login .login-card-description {
        margin-bottom: 26px !important;
    }

    /* Campos con icono (usuario / candado) dentro del input */
    body.login #txtLogEmail,
    body.login #txtLogPassword,
    body.login #txtLogPhoneCode {
        background-repeat: no-repeat !important;
        background-position: 16px center !important;
        background-size: 18px 18px !important;
        padding-left: 46px !important;
    }

    body.login #txtLogEmail {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23919aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e") !important;
    }

    body.login #txtLogPassword,
    body.login #txtLogPhoneCode {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23919aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3e%3cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3e%3c/svg%3e") !important;
    }

/* ===========================================================================
   Login: modal de Recuperacion de contraseña (#modalRestorePassword) moderno.
   =========================================================================== */
#modalRestorePassword .modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(54, 61, 100, 0.28);
}

#modalRestorePassword .modal-header {
    background: linear-gradient(90deg, #6777EF 0%, #8893ff 100%) !important;
    padding: 0.7rem 1.4rem !important;
    border: none !important;
    border-radius: 0 !important;
    align-items: center;
}

    #modalRestorePassword .modal-header h2 {
        color: #fff !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

#modalRestorePassword .modal-body {
    padding: 1.75rem 1.75rem 1rem !important;
}

    #modalRestorePassword .modal-body label {
        color: #3f4254 !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem;
    }

#modalRestorePassword #txtEmailToRestore {
    border: 1px solid #e4e6ef !important;
    border-radius: 0.6rem !important;
    padding: 0.7rem 1rem !important;
    min-height: 46px;
    font-size: 0.95rem;
    background-color: #f9fafc !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    #modalRestorePassword #txtEmailToRestore:focus {
        border-color: #6777EF !important;
        background-color: #fff !important;
        box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.15) !important;
        outline: none;
    }

/* Footer y botones */
#modalRestorePassword .modal-footer {
    border-top: 1px solid #eef0f4 !important;
    padding: 1rem 1.5rem !important;
    gap: 0.5rem;
    display: flex;
    justify-content: flex-end;
}

#modalRestorePassword .boton-primary,
#modalRestorePassword .boton-secondary {
    border-radius: 0.6rem !important;
    padding: 0.6rem 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#modalRestorePassword .boton-primary {
    background-color: #6777EF !important;
    color: #fff !important;
    border: none !important;
}

    #modalRestorePassword .boton-primary:hover {
        background-color: #5563d6 !important;
    }

#modalRestorePassword .boton-secondary {
    background-color: #f4f5f9 !important;
    color: #5e6278 !important;
    border: none !important;
}

    #modalRestorePassword .boton-secondary:hover {
        background-color: #e9ebf5 !important;
        color: #6777EF !important;
    }

/* ===========================================================================
   Login: mensajes de validacion (alertas) limpios y modernos.
   =========================================================================== */
body.login .alert {
    border: none !important;
    border-radius: 0.6rem !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-top: 4px;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}

body.login .alert-danger {
    background-color: #fdeef1 !important;
    color: #e1356b !important;
    border-left: 3px solid #e1356b !important;
}

body.login .alert-warning {
    background-color: #fff6e0 !important;
    color: #c98a00 !important;
    border-left: 3px solid #f1bc01 !important;
}

body.login .alert-success {
    background-color: #e7f7f0 !important;
    color: #1ba672 !important;
    border-left: 3px solid #1ba672 !important;
}

/* ===========================================================================
   SweetAlert (mensajes de la app): apariencia moderna. Cubre sweetalert v1
   (.sweet-alert) y sweetalert2 (.swal2-*).
   =========================================================================== */
/* ---- SweetAlert2 ---- */
.swal2-popup {
    border-radius: 1rem !important;
    box-shadow: 0 20px 60px rgba(54, 61, 100, 0.25) !important;
    padding: 1.5rem 1.5rem 1.75rem !important;
}

.swal2-title {
    color: #181c32 !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
}

.swal2-html-container,
.swal2-content {
    color: #7e8299 !important;
    font-size: 0.95rem !important;
}

.swal2-actions {
    gap: 0.5rem;
}

.swal2-styled.swal2-confirm {
    background-color: #6777EF !important;
    border: none !important;
    border-radius: 0.6rem !important;
    padding: 0.6rem 1.6rem !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(103, 119, 239, 0.3) !important;
}

    .swal2-styled.swal2-confirm:hover {
        background-color: #5563d6 !important;
    }

    .swal2-styled.swal2-confirm:focus {
        box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.3) !important;
    }

.swal2-styled.swal2-cancel {
    background-color: #f4f5f9 !important;
    color: #5e6278 !important;
    border: none !important;
    border-radius: 0.6rem !important;
    padding: 0.6rem 1.6rem !important;
    font-weight: 600 !important;
}

    .swal2-styled.swal2-cancel:hover {
        background-color: #e9ebf5 !important;
        color: #6777EF !important;
    }

/* ---- SweetAlert v1 ---- */
.sweet-alert {
    border-radius: 1rem !important;
    box-shadow: 0 20px 60px rgba(54, 61, 100, 0.25) !important;
}

    .sweet-alert h2 {
        color: #181c32 !important;
        font-weight: 700 !important;
    }

    .sweet-alert p {
        color: #7e8299 !important;
    }

    .sweet-alert button,
    .sweet-alert button.confirm {
        background-color: #6777EF !important;
        border-radius: 0.6rem !important;
        padding: 0.65rem 1.7rem !important;
        font-weight: 600 !important;
        box-shadow: 0 6px 16px rgba(103, 119, 239, 0.3) !important;
        transition: background-color 0.15s ease;
    }

        .sweet-alert button.confirm:hover {
            background-color: #5563d6 !important;
        }

        .sweet-alert button:focus {
            box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.3) !important;
            outline: none !important;
        }

        .sweet-alert button.cancel {
            background-color: #f4f5f9 !important;
            color: #5e6278 !important;
        }

/* ===========================================================================
   Menu principal del header (React/Metronic): moderno con colores de marca.
   Scoped a #kt_header_nav para no afectar otros menus.
   =========================================================================== */
/* Items de primer nivel */
body.login-page #kt_content,
#kt_content,
.content,
.wrapper,
#kt_wrapper {
    padding-top: 80px !important;
}


#kt_header_nav .menu > .menu-item > .menu-link {
    border-radius: 0.6rem;
    padding: 0.5rem 0.9rem;
    color: #4b5563;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    #kt_header_nav .menu > .menu-item > .menu-link .menu-title {
        font-weight: 600;
    }

    #kt_header_nav .menu > .menu-item > .menu-link:hover,
    #kt_header_nav .menu > .menu-item.hover > .menu-link,
    #kt_header_nav .menu > .menu-item.show > .menu-link,
    #kt_header_nav .menu > .menu-item.menu-dropdown.show > .menu-link {
        background-color: #EEF0FE !important;
        color: #6777EF !important;
    }

        #kt_header_nav .menu > .menu-item > .menu-link:hover .menu-title,
        #kt_header_nav .menu > .menu-item.show > .menu-link .menu-title {
            color: #6777EF !important;
        }

    /* Item activo (pagina actual) con acento inferior morado */
    #kt_header_nav .menu > .menu-item > .menu-link.active,
    #kt_header_nav .menu > .menu-item > .menu-link.here,
    #kt_header_nav .menu > .menu-item.here > .menu-link {
        color: #6777EF !important;
        background-color: transparent;
        position: relative;
    }

        #kt_header_nav .menu > .menu-item > .menu-link.active .menu-title,
        #kt_header_nav .menu > .menu-item > .menu-link.here .menu-title {
            color: #6777EF !important;
        }

        #kt_header_nav .menu > .menu-item > .menu-link.active::after,
        #kt_header_nav .menu > .menu-item > .menu-link.here::after,
        #kt_header_nav .menu > .menu-item.here > .menu-link::after {
            content: "";
            position: absolute;
            left: 0.9rem;
            right: 0.9rem;
            bottom: 2px;
            height: 2px;
            border-radius: 2px;
            background-color: #6777EF;
        }

/* Flecha de los menus con submenu */
#kt_header_nav .menu .menu-arrow:after {
    transition: transform 0.15s ease;
}

/* Submenus (dropdowns) modernos */
#kt_header_nav .menu-sub.menu-sub-dropdown,
#kt_header_nav .menu-sub.menu-sub-lg-dropdown {
    border-radius: 0.65rem !important;
    border: 1px solid #eef0f4 !important;
    box-shadow: 0 12px 32px rgba(54, 61, 100, 0.15) !important;
    padding: 0.4rem !important;
}

#kt_header_nav .menu-sub .menu-item > .menu-link {
    border-radius: 0.45rem;
    font-weight: 500;
    color: #3f4254;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    #kt_header_nav .menu-sub .menu-item > .menu-link:hover,
    #kt_header_nav .menu-sub .menu-item.show > .menu-link,
    #kt_header_nav .menu-sub .menu-item > .menu-link.active {
        background-color: #EEF0FE !important;
        color: #6777EF !important;
    }

        #kt_header_nav .menu-sub .menu-item > .menu-link:hover .menu-title,
        #kt_header_nav .menu-sub .menu-item > .menu-link.active .menu-title {
            color: #6777EF !important;
        }

/* ===========================================================================
   Header: logo y area de usuario (campana + avatar + email) mas actuales.
   =========================================================================== */
/* Logo */
#kt_header img[src*="mail.svg"] {
    height: 34px !important;
    width: auto !important;
}

/* Campana de notificaciones: boton circular con hover */
#kt_header #kt_drawer_chat_toggle {
    border-radius: 50% !important;
    color: #7e8299;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    #kt_header #kt_drawer_chat_toggle:hover {
        background-color: #EEF0FE !important;
        color: #6777EF !important;
    }

    #kt_header #kt_drawer_chat_toggle .fa-bell {
        font-size: 1.05rem;
    }

/* Avatar de usuario: circulo lavanda con icono morado (hover invierte) */
#kt_header_user_menu_toggle {
    border-radius: 999px;
    padding: 3px 10px 3px 3px;
    transition: background-color 0.15s ease;
}

    #kt_header_user_menu_toggle:hover {
        background-color: #f4f5f9;
    }

    #kt_header_user_menu_toggle .menu-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #EEF0FE;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        transition: background-color 0.15s ease;
    }

        #kt_header_user_menu_toggle .menu-icon .fa-user {
            color: #6777EF !important;
            font-size: 1rem !important;
        }

    #kt_header_user_menu_toggle:hover .menu-icon {
        background-color: #6777EF;
    }

        #kt_header_user_menu_toggle:hover .menu-icon .fa-user {
            color: #fff !important;
        }

    #kt_header_user_menu_toggle .menu-title {
        color: #3f4254 !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

/* ===========================================================================
   Header: ocultar logos demo de Metronic con enlace roto (causaban el icono
   doble y el error 404 al hacer clic). El logo real (mail.svg) se mantiene.
   =========================================================================== */
#kt_header a[href*="demo1"] {
    display: none !important;
}

/* ===========================================================================
   Tabs de formularios (General / Configuracion general / Credenciales, etc.):
   activo y hover con el morado de marca.
   =========================================================================== */
.nav-line-tabs .nav-item .nav-link.text-active-primary,
.nav-tabs .nav-link.text-active-primary {
    color: #7e8299;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

    .nav-line-tabs .nav-item .nav-link.text-active-primary:hover,
    .nav-tabs .nav-link.text-active-primary:hover {
        color: #6777EF;
        border-bottom-color: #c7ccf7;
    }

    .nav-line-tabs .nav-item .nav-link.text-active-primary.active,
    .nav-tabs .nav-link.text-active-primary.active {
        color: #6777EF !important;
        border-bottom-color: #6777EF !important;
        background: transparent;
    }

/* ---------------------------------------------------------------------------
   Login: ancho de la tarjeta.
   assets/css/Customs/Ventuk.css ensancha .container a max-width:95% !important
   a partir de 1400px (para las pantallas internas de la app). En el login eso
   estira la tarjeta a casi todo el monitor. VentukWeb NO carga Ventuk.css en su
   login, por eso alla se ve angosta. Aqui se restaura el .container de Bootstrap
   solo en el login (body.login), sin tocar el resto de la aplicacion.
   --------------------------------------------------------------------------- */
body.login .container {
    max-width: 1140px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}