html{
    padding: 0;
    margin: 0;
    overflow:hidden;
}
body{
    background-color: #ebedf4;
    padding: 10px;
    overflow:hidden;
}

#Word_wrap,
header{
    background-color:#f6f6f6;
}

.particles-js-canvas-el{
    position: fixed;
    top: 0;
}

label.error{
    font-size: .8rem;
    color:#b02a37 !important;
}

/* --- Filas expandibles estilo gInm (bitácora): control +/- y detalle hijo --- */
td.dtr-control{
    position: relative;
    cursor: pointer;
    width: 32px;
    white-space: nowrap;
    text-align: center;
}
td.dtr-control::before{
    content: '+';               /* + negro en negrita, sin caja (como gInm) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    font-weight: bold;
    font-size: 24px;
    line-height: 14px;
    border: none;
}
tr.dtr-expanded td.dtr-control::before{
    content: '-';               /* − más grande al expandir */
    font-size: 32px;
}
body.dark-mode td.dtr-control::before{ color: #fff; }
tr.child td{
    background-color: rgba(0,0,0,.03);
}
ul.dtr-details{
    list-style: none;
    margin: 0;
    padding: .25rem .5rem;
}
ul.dtr-details > li{
    padding: .15rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
ul.dtr-details > li:last-child{ border-bottom: 0; }
ul.dtr-details .dtr-title{ font-weight: 600; margin-right: .35rem; }
ul.dtr-details .dtr-data{ word-break: break-word; }
ul.dtr-details .dtr-old{ color: #b02a37; text-decoration: line-through; margin-right: .35rem; word-break: break-word; }
ul.dtr-details .dtr-arrow{ color: #6c757d; margin: 0 .25rem; }
/* --- Barra de DataTables: botones a la izquierda y buscador a la derecha --- */
/* Solo la fila de CONTROLES (no la de la tabla, que lleva .dt-layout-table). */
div.dt-container > .row:not(.dt-layout-table){
    margin: .5rem 0;          /* respiro arriba/abajo, sin margen negativo de .row */
    --bs-gutter-x: 1rem;      /* las celdas quedan con .5rem de aire a los lados */
    flex-wrap: wrap;          /* en pantallas angostas el buscador baja, no desborda */
    gap: .5rem 0;
    align-items: center;
}
div.dt-container .dt-search{ display: flex; align-items: center; }
div.dt-container .dt-search input{ width: 170px; max-width: 100%; }

/* La TABLA scrollea solo ella en horizontal: no arrastra la página ni rompe las tarjetas
   cuando la ventana se hace angosta (antes empujaba todo el contenido). */
div.dt-container{ max-width: 100%; }
/* La tabla es una CAJA con alto máximo: scrollea DENTRO de la tarjeta (horizontal
   y vertical), así su barra horizontal queda siempre visible al fondo del cuadro
   sin tener que bajar toda la página. La cabecera se queda fija arriba al scrollear.
   Tablas cortas no llegan al tope → sin scroll vertical (max-height no recorta). */
div.dt-container > .row.dt-layout-table{ overflow: auto; max-height: 70vh; margin: 0; }
div.dt-container > .row.dt-layout-table > *{ min-width: 0; }
/* La variante larga gana a "table.dataTable ... th.dt-orderable-*" de DataTables,
   que ponía position:relative en las columnas ordenables y rompía el sticky
   (unas celdas quedaban fijas y otras se iban con el scroll). */
.tabla-dt > thead > tr > th,
table.tabla-dt.dataTable > thead > tr > th{ position: sticky; top: 0; z-index: 3; background-color: var(--bs-body-bg); }

/* Tablas PLANAS (sin DataTable, p. ej. selección de boletines o resúmenes de reportes):
   la tarjeta les da su propio scroll horizontal. Se excluyen las tarjetas con DataTable
   (ya scrollean solas y un overflow extra recortaría los menús de sus botones). */
.card-body:has(table.table):not(:has(div.dt-container)){ overflow-x: auto; }

/* La botonera de la barra puede envolver cuando no cabe (6 botones > pantalla angosta). */
div.dt-container .dt-buttons{ flex-wrap: wrap; }

/* En pantallas angostas, cualquier grupo de botones (chips, segmentos) envuelve en vez de
   desbordar la página. */
@media (max-width: 767.98px){
    #Inf_Wrap .btn-group{ flex-wrap: wrap; }
}

/* Pestañas con contenido ancho (línea de tiempo, calendario de campañas): scroll propio. */
.tab-content{ max-width: 100%; }
.tab-content > .tab-pane{ overflow-x: auto; }

/* --- Notificaciones del header: panel pequeño anclado a la esquina (como gPay) --- */
/* Panel flotante que NO bloquea: el contenedor deja pasar los clics a la página
   (pointer-events none) y solo la tarjeta del panel los captura. Sin backdrop. */
.modal-notificaciones{ pointer-events: none; }
.modal-notificaciones .modal-dialog{
    position: fixed;
    top: 56px;                /* justo debajo del header */
    right: 12px;
    margin: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    pointer-events: auto;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
    border-radius: .5rem;
}
.modal-notificaciones .modal-content{ max-height: calc(100vh - 80px); }
.modal-notificaciones .list-group-item .fw-bold{ font-size: .9rem; }
.modal-notificaciones .NotMen{ font-size: .85rem; }
.modal-notificaciones .list-group-item.mb-4{ margin-bottom: .75rem !important; } /* compacto */
.modal-notificaciones .modal-body{ padding: .75rem; overflow-x: hidden; }
@media (max-width: 767.98px){
    .modal-notificaciones .modal-dialog{ right: 8px; left: 8px; width: auto; }
}

/* El detalle en el modal no debe scrollear en horizontal (rompía como tabla apretada). */
#modalDetalle .modal-body{ overflow-x: hidden; padding: 1rem 1.25rem; }
#modalDetalle .list-group-item{ word-break: break-word; white-space: normal; }
body.dark-mode tr.child td{ background-color: rgba(255,255,255,.05); }
body.dark-mode ul.dtr-details > li{ border-bottom-color: rgba(255,255,255,.08); }

.form-select:disabled,
input.form-control:disabled,
textarea.form-control:disabled,
input.form-control:read-only,
textarea.form-control:read-only{
    cursor: no-drop;
    background-color: rgba(233, 236, 239, 0.88);
}

.accordion .card-body{
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.acceskey{
    text-decoration: underline;
}

.introjs-button i{
    font-family: "Font Awesome 7 Pro";
}

.NMHide{
    display: inline;
}
.NMShow{
    display: none;
}
body.NoMenu .NMHide{
    display: none;
}

body.NoMenu .NMShow{
    display: inline;
}

/*Loading begging*/
.loading{    
    display: none;
    position: fixed; 
    width: 100%;
    height: 100vh; 
    background-color: rgba(0, 0, 0, .8); 
    z-index: 2000; 
    font-size: 2rem;
    top: 0;
    left: 0;
}

.loading>div{
    position: absolute; 
    top:50%; 
    left: 50%; 
    transform: translate(-50%,-50%);
}

.loading span{
    animation: color_change 1s infinite alternate;    
}


@keyframes color_change {
    0% { color: #3be8b0; }
    25% { color: #1aafd0; }
    50% { color: #6a67ce; }
    75% { color: #ffb900; }    
    100% { color: #fc636b; }
}

/*Loading end*/


/*Pagina de Loging*/
#Login_Main_Wrapper {
    height: 100vh;
    padding: 30px;
}

#Login_Main_Wrapper>img,
#Login_Main_Wrapper #Logo  {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -160px;
    margin-top: -280px;
    width: 150px;
}

#Login_Main_Wrapper .Toggle{
    padding: 60px;
    position: relative;
}

#Login_Main_Wrapper h2{
    font-size: 22px;
    padding-bottom: 5px;
    border-bottom: 2px solid #FFF;
}

#Log_Wrap {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -130px;
}

#Caja svg{
    width: 400px;
    height: 400px;
}

#Caja {
    transform: rotate(-15deg);
    position: absolute;    
}

.byIgemas {
    width: 70px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: 15px;
    text-align: center;
    color: #FFFFFF;
    font-size: 10px;
    transform: rotate(-17deg);
}

.byIgemas a{
    color: #FFFFFF;
    text-decoration: none;
}

#Login_Main_Wrapper label.error{
    display: none !important;
}

/* Los inputs del login SIEMPRE con fondo blanco y texto oscuro (como gInm), aun en modo
   oscuro: la regla global body.dark-mode .form-control los deja transparentes y sobre el
   paisaje no se leían. Se gana en especificidad con el #id + body.dark-mode. */
#Login_Main_Wrapper .form-control,
#Login_Main_Wrapper .input-group-text,
body.dark-mode #Login_Main_Wrapper .form-control,
body.dark-mode #Login_Main_Wrapper .input-group-text{
    background-color: #ffffff;
    color: #212529;
    border-color: #ced4da;
}
#Login_Main_Wrapper .input-group-text{
    color: #6c757d;
}
#Login_Main_Wrapper .form-control::placeholder,
body.dark-mode #Login_Main_Wrapper .form-control::placeholder{
    color: #6c757d !important;
}

/* Hasta 767.98px = modo móvil (antes 500px, lo que dejaba 501–767px sin estilos y el
   sidebar abarcaba toda la pantalla al minimizar). Se alinea al breakpoint de escritorio (768px). */
@media (max-width: 767.98px){
    #Login_Main_Wrapper h2{
        font-size: 20px;
        margin-top: 15px;
    }
        
    .byIgemas {
        margin-left: -15px;
        transform: rotate(-90deg);
        position: fixed;
        bottom: 25px;
        left: auto;
        width: auto;
        right: -15px;
    }
    
    #Login_Main_Wrapper .Toggle{
        padding: 20px 0;        
    }
    
    #Login_Main_Wrapper .btn{
        font-size: 14px;            
    }
        
    #Login_Main_Wrapper>img,
    #Login_Main_Wrapper #Logo{
        width: 100px;
        position: static;
        margin: 0px auto;
        margin-top: 0!important;
        display: block;
    }
        
    #Login_Main_Wrapper #Caja svg{
        display: none;
    }
        
    #Login_Main_Wrapper #Log_Wrap{
        width: 100%;
        margin: 0 auto;
        position: relative;
        height: auto;
        left: 0;
        top: 0;
    }
}

/*Pagina de Loging*/

 /*scroll begin*/
    .OverflowCSS::-webkit-scrollbar,
    .dt-scroll-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        display: none;
    }

    .OverflowCSS:hover::-webkit-scrollbar,
    .dt-scroll-body:hover::-webkit-scrollbar {
        display: block;
    }

    /* Ponemos un color de fondo y redondeamos las esquinas del thumb */
    .OverflowCSS::-webkit-scrollbar-thumb,
    .dt-scroll-body::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

    /* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
    .OverflowCSS::-webkit-scrollbar-thumb:hover,
    .dt-scroll-body::-webkit-scrollbar-thumb:hover {
        background: #b3b3b3;
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    }

    /* Cambiamos el fondo cuando esté en active */
    .OverflowCSS::-webkit-scrollbar-thumb:active,
    .dt-scroll-body::-webkit-scrollbar-thumb:active {
        background-color: #999999;
    }

    /* Ponemos un color de fondo y redondeamos las esquinas del track */
    .OverflowCSS::-webkit-scrollbar-track,
    .dt-scroll-body::-webkit-scrollbar-track {
        background: #e1e1e1;
        /*border-radius: 4px;*/
    }

    /* Cambiamos el fondo cuando esté en active o hover */
    .OverflowCSS::-webkit-scrollbar-track:hover,
    .OverflowCSS::-webkit-scrollbar-track:active,
    .dt-scroll-body::-webkit-scrollbar-track:hover,
    .dt-scroll-body::-webkit-scrollbar-track:active {
      background: #d4d4d4;
    }
/*scroll end*/

/*jodit beging*/
.jodit-toolbar-button_SEP_LS1,
.jodit-toolbar-button_SEP_LS2,
.jodit-toolbar-button_SEP_LS3 {
    background-color: yellow;
    margin-left: -8px !important;
    margin-right: -8px !important;
    border-top: 1px solid;
    border-bottom: 1px solid;
}
/*jodit end*/

/*dark-mode beging*/
    body.dark-mode,
    body.dark-mode .modal-body{
        background-color: #1F2937;
    }

    body.dark-mode .modal-header .btn-close{
        --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
    }

    body.dark-mode header,
    body.dark-mode #Word_wrap,
    body.dark-mode .modal-footer{
        background-color: #111827;
    }

    body.dark-mode aside,    
    body.dark-mode header,    
    body.dark-mode #Info_wrap,    
    body.dark-mode #Word_wrap,
    body.dark-mode.NoMenu aside,
    body.dark-mode.NoMenu header,
    body.dark-mode.NoMenu #Info_wrap,
    body.dark-mode.NoMenu #Word_wrap{
        box-shadow: 0 0 10px #888;
    }
    
    body.dark-mode .dropdown-divider{
        border-top: 1px solid #888;
    }

    body.dark-mode hr{
        color: #888;
    }

    body.dark-mode .form-control,
    body.dark-mode .form-select,
    body.dark-mode h1:not(.fs-4),
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode label:not(.invalid-feedback):not(.btn):not(.jodit-ui-checkbox){
        background-color: transparent;
        color: #ffffff;
    }

    body.dark-mode .form-select{
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    body.dark-mode .bootstrap-select>.dropdown-toggle.bs-placeholder{
        color: #ffffff;
    }

    body.dark-mode .bootstrap-select>.dropdown-toggle:after{
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        width: 16px;
        height: 12px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 16px 12px;
        border:none;
    }

    body.dark-mode .form-text{        
        color: rgba(255, 255, 255, .7);
    }

    body.dark-mode .form-select option,
    body.dark-mode .form-select optgroup{
        background-color: #1F2937;
        color: #ffffff;
    }

    body.dark-mode .form-select:disabled,
    body.dark-mode input.form-control:disabled,
    body.dark-mode textarea.form-control:disabled,
    body.dark-mode input.form-control:read-only,
    body.dark-mode textarea.form-control:read-only{    
        background-color: rgba(255, 255, 255, 0.1);
    }

    body.dark-mode .text-muted{
        color: #cecece !important;
    }

    body.dark-mode input::placeholder,
    body.dark-mode textarea::placeholder{
        color: #cecece !important;
    }
    
    footer,
    footer a,
    .ShortCut{
        color:#212529;
        opacity: .75;
    }

    /* El aside es negro siempre (claro u oscuro): su botón de menú debe ser claro. */
    aside .ShortCut{
        color:#faf9f9;
    }

    /* Cajita del buscador global (Ctrl+K) en el header: un botón disfrazado de input,
       con las teclas Ctrl K a la derecha (referencia de Jeffrey, estilo GitHub).
       En escritorio tiene ancho de input; en móvil queda solo la lupa. */
    #btnPaleta{
        border: 1px solid #d0d3d8;
        border-radius: .5rem;
        padding: .25rem .55rem;
        color: #212529;
        opacity: .75;
    }
    #btnPaleta:hover,
    #btnPaleta:focus-visible{
        opacity: 1;
        background-color: rgba(0, 0, 0, .04);
    }
    @media (min-width: 768px){
        #btnPaleta{ min-width: 230px; }
    }
    #btnPaleta .buscador-texto{
        font-size: .9rem;
    }
    /* Teclas dibujadas: fondo transparente con borde, no el kbd oscuro de Bootstrap. */
    #btnPaleta kbd{
        font-size: .7rem;
        padding: .1rem .35rem;
        background-color: transparent;
        color: inherit;
        border: 1px solid #d0d3d8;
        border-radius: .3rem;
    }
    body.dark-mode #btnPaleta{
        color: #ffffff;
        border-color: #4b5563;
    }
    body.dark-mode #btnPaleta:hover,
    body.dark-mode #btnPaleta:focus-visible{
        background-color: rgba(255, 255, 255, .08);
    }
    body.dark-mode #btnPaleta kbd{
        border-color: #4b5563;
    }
    
    body.dark-mode .ShortCut,
    body.dark-mode .datatable,
    body.dark-mode #Main_Wrapper,
    body.dark-mode .dt-container{
        color:#ffffff;
    }

    body.dark-mode footer,
    body.dark-mode footer a{
        color:#9CA3AF;
    }

    body.dark-mode input:not(.jodit-ui-input__input) {
      color-scheme: dark;
    }

    body.dark-mode .card-body,
    body.dark-mode ul:not(#Consultas_Wrap) .list-group-item:not(.list-group-item-primary) {
        background-color: #1F2937;
    }

    body.dark-mode .bootstrap-select div.dropdown-menu,
    body.dark-mode .bootstrap-select ul.dropdown-menu{
        background-color: #1F2937;
        border-color: #fefefe;
    }

    body.dark-mode .bootstrap-select ul.dropdown-menu li a,
    body.dark-mode ul:not(#Consultas_Wrap) .list-group-item:not(.list-group-item-primary){
        color:#ffffff;
    }

    body.dark-mode .bootstrap-select ul.dropdown-menu li a:hover{
        background-color: #0d6efd;
        color:#fefefe;
    }

    #ExtraNotaData .bootstrap-select .dropdown-menu li{
        border-bottom: 1px solid #fefefe;
    }
    
    body.dark-mode .jodit-container:not(.jodit_inline) .jodit-workplace,
    body.dark-mode .jodit-dialog__content{
        /*background-color: #1F2937;*/
        background-color: #ffffff;
        color: #000000;
    }

    body.dark-mode .jodit-toolbar__box:not(:empty):not(:empty),
    body.dark-mode .jodit-status-bar,
    body.dark-mode .jodit-dialog__header,
    body.dark-mode .jodit-dialog__footer button{
        background-color: #111827;
        color:#ffffff;
    }
    body.dark-mode .jodit-toolbar__box .jodit-icon,
    body.dark-mode .jodit-toolbar-button__trigger,
    body.dark-mode .jodit-dialog__panel .jodit-icon{
        fill:#ffffff;
        stroke: #ffffff;
    }

    body.dark-mode .jodit-dialog_prompt input{
        color: #000000;
    }

    body.dark-mode .jodit-toolbar-button__button:hover:not([disabled]),
    body.dark-mode .jodit-toolbar-button__trigger:hover:not([disabled]){
        background-color:#0dcaf0;
    }

    

    body.dark-mode .tooltip.show{
        opacity: 1;
    }
    body.dark-mode .tooltip .tooltip-inner{
        background-color: #0dcaf0;
    }

    body.dark-mode .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before{
        border-right-color: #0dcaf0;
    }

    body.dark-mode .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{
        border-left-color: #0dcaf0;
    }

    body.dark-mode .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before{
        border-bottom-color: #0dcaf0;
    }

    body.dark-mode .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{
        border-top-color: #0dcaf0;
    }

    body.dark-mode .popover.EditField .popover-body{
        background-color: #1F2937;
        border-radius: 5px;
    }
    body.dark-mode .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,
    body.dark-mode .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after{
        border-right-color: #1F2937;
    }
    
    body.dark-mode #AddPagos .accordion-body,
    body.dark-mode .jodit-filebrowser-files{
        background-color: #1F2937;
    }
    
    body.dark-mode .jodit-dialog__panel{
        background-color: #111827;
    }
/*dark-mode end*/
    .accordion .card:not(:first-child) .card-header{
        border-radius: 0;
    }

    body.NoMenu aside,
    aside{
        position: fixed;
        z-index: 1000;
        height: calc(100dvh - 20px);
        max-height: -webkit-fill-available;
        width: calc(100vw - 16px);
        left: 8px;
        border-radius: 10px;        
        box-shadow: 0 0 5px 0 #0f172a;
    }
    aside.Close{
        display: none;
    }

    body.NoMenu #Main_Wrapper,
    #Main_Wrapper{
        width: 100%;
    }

    body.NoMenu header,
    header{
        height: 50px;        
        box-shadow: 0 0 5px 0 #0f172a;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    
    #Info_wrap{        
        box-shadow: 0 0 5px 0 #0f172a;
        height: 50px;
        margin: 10px 0;
    }

    body.NoMenu #Word_wrap,
    #Word_wrap{
        height: calc(100dvh - 140px);        
        box-shadow: 0 0 5px 0 #0f172a;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    #Inf_Wrap{
        height: calc(100% - 24px);
    }

    #MainMenuLst{
        height: calc(100% - 140px);
    }
    
    #MainMenuLst li.active{
        font-weight: bold;
    }

    ul#MainMenuLst li button.btn-toggle:before,
    ul#MainMenuCLst li button.btn-toggle:before {
        width: 1.25em;
        line-height: 0;
        position: absolute;
        right: 20px;
        top:25px;
        font-family: "Font Awesome 7 Duotone";
        content: "\f054\f054";
        transition: transform .35s ease;
        transform-origin: 0.5em 50%;
    }

    ul#MainMenuLst li button.btn-toggle[aria-expanded="true"]:before,
    ul#MainMenuCLst li button.btn-toggle[aria-expanded="true"]:before {
        transform: rotate(90deg);
    }

    ul#MainMenuLst li .collapse ul li,
    ul#MainMenuCLst li .collapse ul li{
        position: relative;
    }

    ul#MainMenuLst li .collapse ul li.active a:before{
        position: absolute;
        left: 8px;
        top: 12px;
        font-family: "Font Awesome 7 Pro";
        content: "\f00c";
        font-size: 12px;
    }

    ul#MainMenuLst li .collapse ul li:not(.active) a:before{
        position: absolute;
        left: 8px;
        top: 12px;
        font-family: "Font Awesome 7 Pro";
        content: "\f068";
        font-size: 12px;
    }


    ul#MainMenuCLst>li>a.included:after,
    ul#MainMenuCLst>li.includedAll>button:after{
        position: absolute;
        right: 8px;
        top: 15px;
        font-family: "Font Awesome 7 Pro";
        content: "\f00c";
        font-size: 12px;
        color: #23E03A;
    }

    ul#MainMenuCLst li .collapse ul li a.included:before{
        position: absolute;
        left: 8px;
        top: 12px;
        font-family: "Font Awesome 7 Pro";
        content: "\f00c";
        font-size: 12px;
        color: #23E03A;
    }

    ul#MainMenuCLst>li>a.excluded:after,
    ul#MainMenuCLst>li.excludedAll>button:after{
        position: absolute;
        right: 8px;
        top: 16px;
        font-family: "Font Awesome 7 Pro";
        content: "\f05e";
        font-size: 12px;
        color:#FF0000;
    }

    ul#MainMenuCLst>li.NotAll>button:after{
        position: absolute;
        right: 5px;
        top: 12px;
        font-family: "Font Awesome 7 Pro";
        content: "\f068";
        font-size: 17px;
        color:#FFFF00;
    }    

    ul#MainMenuCLst li .collapse ul li a.excluded:before{
        position: absolute;
        left: 8px;
        top: 12px;
        font-family: "Font Awesome 7 Pro";
        content: "\f05e";
        font-size: 12px;
        color:#FF0000;
    }

    ul#MainMenuLst>li>div>ul,
    ul#MainMenuCLst>li>div>ul{
        background-color: rgba(255, 255, 255, 0.1);
    }

@media (min-width: 768px){
    /* 11-ago (Valeria): con el menú contraído (body.NoMenu) las reglas base de
       arriba ganaban por especificidad y redondeaban esquinas INTERNAS (el borde
       derecho del riel, el tope izquierdo del header…). En escritorio solo van
       redondas las 4 esquinas MÁS EXTERNAS de la app, con menú abierto o riel. */
    body.NoMenu aside,
    aside{
        display: block;
        float: left;
        width: 250px;
        height: calc(100dvh - 20px);
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        /* Sin esto, el fondo negro de la LISTA del menú (esquinas cuadradas) pinta
           ENCIMA del redondeo del aside — se notaba en el riel contraído, donde la
           lista toca el tope porque el logo está oculto. */
        overflow: hidden;
    }

    #Main_Wrapper{
        float: right;
        width: calc(100vw - 280px);
        height: calc(100dvh - 20px);
    }

    body.NoMenu header,
    header{
        border-top-left-radius: 0;
    }

    body.NoMenu #Word_wrap,
    #Word_wrap{
        border-bottom-left-radius: 0;
    }
}

/*Noty custom begin*/
.noty_theme__bootstrap-v4.noty_bar {
    margin: 4px;
    z-index: 13000;
}

.noty_has_timeout.noty_has_progressbar .noty_progressbar {
    opacity: 0.7;
}

.noty_theme__bootstrap-v4.noty_bar .noty_body{
    text-align: center;
}

#noty_layout__inline{
    position: fixed;
    top: 250px;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    border-radius: .25rem;
    z-index: 10001;
    border:3px solid #888888;
    background-color: #fefefe;
}

#noty_layout__inline:before{
    content: "";
    position: absolute;
    bottom:-150px;
    left: 50%;
    margin-left: -50px;
    width: 94px;
    height: 138px;
    background-size: cover;
    background-repeat: no-repeat;    
}

#noty_layout__inline.success:before{
    background-image: url(../img/Gema/Exito.png);
}

#noty_layout__inline.warning:before{
    background-image: url(../img/Gema/Warning.png);
}

#noty_layout__inline.error:before{
    background-image: url(../img/Gema/Error.png);
}

#noty_layout__inline.information:before{
    background-image: url(../img/Gema/Gema.png);
}

#noty_layout__inline:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-bottom: -10px;
    margin-left: -10px;
    z-index: 12000;
    width: 20px;
    height: 20px;
    border: 3px solid transparent;        
    transform: rotate(45deg);
    background-color: #fefefe;
    border-bottom-color: #888888;
    border-right-color: #888888;
}

#noty_layout__inline .noty_type__info{
    background-color: #E4F3F1;  
    border:3px solid #31708f;
}

#noty_layout__inline .noty_type__warning{
    background-color: #F8E0CD;
    border:3px solid #8a6d3b;
}

#noty_layout__inline .noty_type__error{
    background-color: #EECDCD;
    border:3px solid #a94442;
}

#noty_layout__inline .noty_type__success{
    background-color: #F4F7DC;
    border:3px solid #3c763d;
}
/*Noty custom end*/

/*datatable*/
.dtr-details li{
    text-wrap: auto;
}

table tr{
    white-space: nowrap;    
}

.dt-button-background{
    background: rgba(0, 0, 0, 0.7);
    background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
}

td.handPointer{
    cursor: pointer;
}

td.details-control{
    position: relative; 
    cursor: pointer;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
tr.dt-hasChild td.details-control:before {
    font-size: 32px !important;
    content: '-' !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before,
td.details-control:before {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    color: #333;
    background: none;
    box-shadow: none;
    font-weight: bold;
    font-size: 24px;
    text-align: center;    
    line-height: 14px;
    content: '+';    
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-right: none !important;
}

table.table-dark.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, 
table.table-dark.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before,
table.table-dark td.details-control:before{
    color: #fff;
}

.dt-action .btn-group button:before{
    border: none;
    content: none;
}


table.dataTable>thead>tr>td.select-checkbox, 
table.dataTable>thead>tr>th.select-checkbox,
table.dataTable>tbody>tr>td.select-checkbox, 
table.dataTable>tbody>tr>th.select-checkbox{
    position: relative;
    cursor: pointer;
}

table.dataTable>thead>tr>td.select-checkbox:before, 
table.dataTable>thead>tr>th.select-checkbox:before{
    content: " ";
    margin-top: -5px;
    margin-left: -6px;
    border: 1px solid black;
    border-radius: 3px;    
}

body.dark-mode table.dataTable>thead>tr>td.select-checkbox:before, 
body.dark-mode table.dataTable>thead>tr>th.select-checkbox:before,
body.dark-mode table.dataTable>tbody>tr>td.select-checkbox:before, 
body.dark-mode table.dataTable>tbody>tr>th.select-checkbox:before{
    border: 1px solid white;
}

table.dataTable>thead>tr>td.select-checkbox:before, 
table.dataTable>thead>tr>th.select-checkbox:before, 
table.dataTable>thead>tr>td.select-checkbox:after, 
table.dataTable>thead>tr>th.select-checkbox:after{
    display: block;
    position: absolute;
    top: 1.2em;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
}

table.dataTable>thead>tr>td.select-checkbox.selectAll:after, 
table.dataTable>thead>tr>th.select-checkbox.selectAll:after{
    content: "✓";
    font-size: 20px;
    margin-top: -19px;
    margin-left: -6px;
    text-align: center;
    text-shadow: 1px 1px #b0bed9, -1px -1px #b0bed9, 1px -1px #b0bed9, -1px 1px #b0bed9;
}

.dt-scroll-head table{
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dt-scroll-head table.dataTable>thead>tr>th:first-child{
    border-top-left-radius: 5px;
}

.dt-scroll-head table.dataTable>thead>tr>th:last-child{
    border-top-right-radius: 5px;
}

.dt-scroll-body table{
    /*overflow: hidden; No se puede apiclar porque oculta el menu*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

table.dataTable>tbody:not(.rounded-0)>tr:last-child>td:first-child,
table.dataTable>tfoot>tr:last-child>th:first-child{
    border-bottom-left-radius: 5px;
}

table.dataTable>tbody:not(.rounded-0)>tr:last-child>td:last-child,
table.dataTable>tfoot>tr:last-child>th:last-child{
    border-bottom-right-radius: 5px;
}

div.dt-scroll-body {
    border: none;
    background: none !important;
}

div.DTS div.dt-scroll-body table{
    background-color: transparent;
}


tr.selected .dt-action button.btn-link{
    color:#ffffff;
}
/*datatable*/


/*DropDown Add*/
.dropdown-menu li {
    position: relative;
}
.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}
/*DropDown Add*/

/*Datatable*/
body.dt-print-view{
    background-color: #ffffff;
}

div.dt-container div.dt-info{
    padding: 5px 0;
    text-align: center;
}

.dark-mode div.dt-button-collection,
.dark-mode .btn-group .dropdown-menu{
    background-color: #1F2937;
}

.dark-mode div.dt-button-collection a.dropdown-item,
.dark-mode .btn-group .dropdown-menu a.dropdown-item{
    color: #ffffff;
}

.dark-mode div.dt-button-collection a.dropdown-item:focus:not(.active), 
.dark-mode div.dt-button-collection a.dropdown-item:hover:not(.active),
.dark-mode .btn-group .dropdown-menu a.dropdown-item:focus:not(.active),
.dark-mode .btn-group .dropdown-menu a.dropdown-item:hover:not(.active){
    color: #000000;
}

.dark-mode .dtsb-searchBuilder{
    color:#ffffff;
}

.dtb-popover-close{
    color:#000000;
    line-height: 18px;
}

.dt-datetime-date{
    color:#000000;
}

/*Datatable*/

/*bootstrap-select*/
#ExtraNotaData .bootstrap-select .dropdown-menu li{
    border-bottom: 1px solid #cecece;
}

#ExtraNotaData .bootstrap-select .dropdown-menu li small{
    padding-left: 0;
    display: block;
}
/*bootstrap-select*/


@media print {
    body,
    body.dark-mode{
        background-color:#ffffff;
    }

    body.dark-mode #PrintArea ul:not(#Consultas_Wrap) .list-group-item{
        color: #000000;
        background-color: #ffffff;

    }
}
/* ── Selector de permisos (_PermisoPicker, estilo AWS IAM calcado de gPay) ── */
/* Las categorías fluyen en columnas tipo mosaico (CSS multi-column): cada tarjeta
   conserva su alto natural y el navegador las reparte; nada de una sola columna
   alta con scroll interno. */
.permiso-picker .pp-cats {
    column-count: 1;
    column-gap: .5rem;
}
@media (min-width: 768px) {
    .permiso-picker .pp-cats { column-count: 2; }
}
@media (min-width: 1400px) {
    .permiso-picker .pp-cats { column-count: 3; }
}
.permiso-picker .pp-cat {
    break-inside: avoid;      /* una categoría nunca se parte entre dos columnas */
    margin-bottom: .5rem;
    background-color: var(--bs-body-bg);
}
.permiso-picker .pp-item:hover {
    background-color: var(--bs-tertiary-bg, #f2f4f7);
}
.permiso-picker .pp-check:disabled + i + span {
    opacity: .75; /* lo que aporta el rol se ve "asentado", no editable */
}
body.dark-mode .permiso-picker .pp-item:hover {
    background-color: rgba(255, 255, 255, .06);
}