/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║	css  >  Custom
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
:root { 

    --teal: #26a69a;

    --green: #88ba00;
    --green-rgb: 136, 186, 0;

    --piggy-400: #ffc890;
    --piggy: #f4b576;
    --piggy-600: #e3a262;


    --muted-xl: #eff0f6 !important;
    --muted-l: #c6c9db !important;
    --muted: #9a9fbf !important;
    --muted-d: #707488 !important; 
 
}

 





/*==============================================================================================
║ 	Fonts  >  sizes  
╚=============================================================================================
fs-1  >>
fs-2
fs-3
fs-4
fs-5
fs-6 == fs-lg  
fs-base  ==>   default
fs-sm
fs-xs  <<
*/


 
.cursor-help {
    cursor: help !important;
}



.text-muted-xl {
    color: var(--muted-xl) !important;
} 
.text-muted-l {
    color: var(--muted-l) !important;
} 
.text-muted {
    color: var(--muted) !important;
} 
.text-muted-d {
    color: var(--muted-d) !important;
} 



.bg-muted-d {
    background-color: var(--muted-d) !important;
} 
.bg-muted {
    background-color: var(--muted) !important;
} 
.bg-muted-l {
    background-color: var(--muted-l) !important;
} 
.bg-muted-xl {
    background-color: var(--muted-xl) !important;
} 

.border-muted {

}

.border-muted {
    --border-opacity: 1;
    border-color: var(--muted) !important;
}






.bg-green {
    /* background: var(--green) !important; */
    background-color: rgba(var(--green-rgb), var(--bg-opacity)) !important;    
} 
.text-green {
    color: var(--green) !important;
} 


.bg-piggy {
    background: var(--piggy) !important;
    /* background-color: rgba(var(--green-rgb), var(--bg-opacity)) !important;     */
} 
.text-piggy-400 {
    color: var(--piggy-400) !important;
} 
.text-piggy {
    color: var(--piggy) !important;
} 
.text-piggy-600 {
    color: var(--piggy-600) !important;
} 








.text-justify {
    text-align: justify;
}




/*==============================================================================================
║ 	Fonts  >  sizes  
╚=============================================================================================*/



/*_________________________________________________________________________________________________________________________________________________________________
|
|
|   Font Icons  >  fontawesome  |  phosphor
|
|________________________________________________________________________________________________________________________________________________________________*/  
/*==============================================================================================
║ 	fontawesome
╚=============================================================================================*/
[class*=" fa-"],[class^=fa-] {   
    --icon-font-size: 0.875rem;     /* ✅  */  

    --icon-font-size-xs: calc( var(--icon-font-size) / 1.2 ); 
    --icon-font-size-sm: calc( var(--icon-font-size) / 1.1 ); 

    --icon-font-size-1: calc( var(--icon-font-size) * 1.1 );       /* ⬆️  */
    --icon-font-size-2: calc( var(--icon-font-size) * 1.2 );       /* ⬆️  */
    --icon-font-size-3: calc( var(--icon-font-size) * 1.3 );       /* ⬆️  */
    --icon-font-size-4: calc( var(--icon-font-size) * 1.4 );       /* ⬆️  */
    --icon-font-size-5: calc( var(--icon-font-size) * 1.5 );       /* ⬆️  */
    --icon-font-size-6: calc( var(--icon-font-size) * 1.6 );       /* ⬆️  */
    --icon-font-size-7: calc( var(--icon-font-size) * 1.7 );       /* ⬆️  */
    --icon-font-size-8: calc( var(--icon-font-size) * 1.8 );       /* ⬆️  */
    --icon-font-size-9: calc( var(--icon-font-size) * 1.9 );       /* ⬆️  */ 

    font-style: normal;
    /* font-weight: 400; */
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: var(--icon-font-size);
    min-width: 1em;
    display: inline-block;
    /* vertical-align: calc(calc(50% - var(--icon-font-size)) * .5); */
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/*==============================================================================================
║ 	phosphor
╚=============================================================================================*/
[class*=" ph-"],[class^=ph-] {  
    --icon-font-size: 1rem;   /* ✅  */  
 
    --icon-font-size-xs: calc( var(--icon-font-size) / 1.2 ); 
    --icon-font-size-sm: calc( var(--icon-font-size) / 1.1 ); 

    --icon-font-size-1: calc( var(--icon-font-size) * 1.1 );       /* ⬆️  */
    --icon-font-size-2: calc( var(--icon-font-size) * 1.2 );       /* ⬆️  */
    --icon-font-size-3: calc( var(--icon-font-size) * 1.3 );       /* ⬆️  */
    --icon-font-size-4: calc( var(--icon-font-size) * 1.4 );       /* ⬆️  */
    --icon-font-size-5: calc( var(--icon-font-size) * 1.5 );       /* ⬆️  */
    --icon-font-size-6: calc( var(--icon-font-size) * 1.6 );       /* ⬆️  */
    --icon-font-size-7: calc( var(--icon-font-size) * 1.7 );       /* ⬆️  */
    --icon-font-size-8: calc( var(--icon-font-size) * 1.8 );       /* ⬆️  */
    --icon-font-size-9: calc( var(--icon-font-size) * 1.9 );       /* ⬆️  */ 

    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: var(--icon-font-size);
    /* font-size: calc(var(--icon-font-size)* 1.25); */
    min-width: 1em;
    display: inline-block;
    /* vertical-align: calc(calc(50% - var(--icon-font-size)) * .5); */
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
 

/*==============================================================================================
║ 	icons  >  Sizes  Classes
╚=============================================================================================*/
.fsi-xs  { font-size: var(--icon-font-size-xs); }
.fsi-sm  { font-size: var(--icon-font-size-sm); }  
.fsi-1   { font-size: var(--icon-font-size-1);}
.fsi-2   { font-size: var(--icon-font-size-2);}
.fsi-3   { font-size: var(--icon-font-size-3);}
.fsi-4   { font-size: var(--icon-font-size-4);}
.fsi-5   { font-size: var(--icon-font-size-5);}
.fsi-6   { font-size: var(--icon-font-size-6);}
.fsi-7   { font-size: var(--icon-font-size-7);}
.fsi-8   { font-size: var(--icon-font-size-8);}
.fsi-9   { font-size: var(--icon-font-size-9);}   
.fsi-2x  { font-size: calc( var(--icon-font-size) * 2.2 );}
.fa-2x  { font-size: calc( var(--icon-font-size) * 2.2 );}
.ph-2x  { font-size: calc( var(--icon-font-size) * 2.2 );}
 

  

.lh-2 {
    line-height: 1.5;
}











.form-check-input-teal {

}

.form-check-input:checked {
    background-color: var(--form-check-input-checked-bg-color);
    border-color: var(--form-check-input-checked-border-color);
}




.group_TodasCuentas {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 20px;
    padding-left: 35px;
}
.group_TodasCuentas i {
    position: absolute;
    font-size: 1.3rem; 
    line-height: calc(100% - 30%);
    border-radius: 5px;
    background: #ffffff;
}
.group_TodasCuentas i.back {
    color: orange;
    left: 9px;
    top: -1px;
}
.group_TodasCuentas i.middle {
    color: var(--muted);
    left: 0;
}
.group_TodasCuentas i.front {
    color: var(--teal);
    left: -9px;
    bottom: -2px;
} 
.group_TodasCuentas i.front::before {
    opacity: 0.75 !important;
}
 




html {  
    overflow: inherit;  /* IMPORTANTE > Para poder refrescar pagina con slidedown  */
}
body { 
    overflow: inherit;  /* IMPORTANTE > Para poder refrescar pagina con slidedown  */ 
}
 
 








/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	MAIN  SIDEBAR
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.sidebar {
    --sidebar-bg: #3e4c57;  
    --sidebar-width: 17rem;
    font-size: 0.8rem;
}
.nav-sidebar {
    --nav-link-padding-x-r: 0.5rem;
}
@media (min-width: 992px) {
    .sidebar-expand-lg.sidebar-main-resized:not(.sidebar-collapsed):not(.sidebar-main-unfold) .nav-sidebar {
        --nav-link-padding-x-r: 0;
    }
}
.nav-sidebar .nav-item-header {
    color: #25bbb2;  
    background-color: rgba(0, 0, 0, .4);
}

.nav-sidebar .nav-item-header > div {
    opacity: 1 !important;
}

    .nav-sidebar .nav-link i {
        display: flex    ;
        align-items: normal;
        margin-right: var(--nav-link-padding-x-r);
        font-size: var(--icon-font-size-1);
    }
    .nav-group-sub .nav-link {
        padding-left: calc(var(--nav-link-padding-x)* 1 + var(--icon-font-size));
    }
    .nav-sidebar .nav-link.active { 
        background-color: #26a69a99 !important;
    }
    .nav-group-sub .nav-group-sub .nav-link {
        padding-left: calc(var(--nav-link-padding-x)* 2 + var(--icon-font-size));
    }
    .nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
        padding-left: calc(var(--nav-link-padding-x)* 3 + var(--icon-font-size));
    }




/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	PAGE  HEADER
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.page-header .breadcrumb .breadcrumb-item {
    color: var(--muted);
}
.page-header .breadcrumb .breadcrumb-item.active {
    color: var(--teal);
}
.page-header .breadcrumb i {
    padding-right: 0.3rem;
}



/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	Page content > Content-inner > content
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
#loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.99);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#loading-overlay .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}






/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	APP  NAVBAR  >  BOTTOM  
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.app-navbar-bottom { 
    box-shadow: 0px 1px 6px 0px #b6b6b6;
}
.app-navbar-bottom ul.nav { 
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 6px;
    grid-template-columns: repeat(5, 1fr); 
} 
.app-navbar-bottom ul.nav .nav-item   {  
} 
.app-navbar-bottom ul.nav .nav-item  .navbar-nav-link { 
    justify-content: center;
} 
.app-navbar-bottom ~ .btn-to-top {
    bottom: calc(var(--spacer) + 40px);
}





/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	INSTALL  PWA
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
#box_install_app {
	opacity: 0;
	display: none;
	position: absolute;
	right: 10px;
	width: 200px;
	height: 60px;
	z-index: 20;
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
#box_install_app button {
	width: 200px;
	height: 60px;
	cursor: pointer; 
	border: none;
	padding: 0;
	margin: 0;
	background: none;
}
#box_install_app img {
	width: 200px;
	height: 60px;
	cursor: pointer;
	margin: auto;
}
#cerrar_btn_install {
	position: absolute;
	top: -8px;
	right: 0px;
	color: #777;
	border: 2px solid #777;
	font-size: 12px;
	line-height: 10px;
	font-weight: bold;
	padding: 4px 6px;
	cursor: pointer;
	border-radius: 50%;
	moz-border-radius: 50%;
}
 



 


/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	tooltip  Bootstrap
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before 
{
    border-top-color: inherit !important;
} 
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before
{
    border-right-color: inherit !important;
} 
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before
{
    border-bottom-color: inherit !important;
} 
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before
{
    border-left-color: inherit !important;
}



/*────────────────────────────────────────────────────────────────────────────────────────
|   Icons para Tooltips  >  Colores  Especiales
└───────────────────────────────────────────────────────────────────────────────────────*/ 
.table .info_descripcion,
.table .info_alert,
.table .aviso_contrapartida  { 
    --fa-primary-color: black; 
    --fa-secondary-opacity: 0.8;
} 

/*────────────────────────────────────────────────────────────────────────────────────────
|   Icons para Tooltips  >  Posiciones  Especiales
└───────────────────────────────────────────────────────────────────────────────────────*/ 
.table .info_descripcion  {
    top: -6px;
    left: -14px;
    position: absolute;  
} 
.table .aviso_contrapartida {
    top: -3px; 
    position: relative;  
}






 


/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	Custom Tooltip  (Casero)
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.custom-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Contenido del tooltip */
.tooltip-content {
    display: none; /* oculto por defecto */
    
    /* width: calc(100% * 3 + 100px);  */
    width: auto;
    
    max-width: 200px;
    min-width: 130px;
    text-align: center;

    position: absolute;
    padding: 6px 10px;
    border-radius: 5px;
    color: white;
    /* font-size: 12px; */
    font-weight: 500;
    line-height: 1.2rem;
    white-space: normal;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    background: black;
    z-index: 10;
}

/* Mostrar tooltip con hover */
.custom-tooltip:hover .tooltip-content,
.custom-tooltip:active .tooltip-content {
    display: block;
    opacity: 1;
}

/* FLECHA */
.tooltip-content::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px;  /* tamaño flecha */
}

/* ---------- POSICIONES ---------- */

/* TOP */
.custom-tooltip.top .tooltip-content { 
    bottom: calc(100% + 10px);  
    left: 50%;
    transform: translateX(-50%);
}
.custom-tooltip.top .tooltip-content::before {
    top: 100%; /* debajo del tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-color: black transparent transparent transparent; /* apunta hacia abajo */
}

/* BOTTOM */
.custom-tooltip.bottom .tooltip-content { 
    top: calc(100% + 10px);   
    left: 50%;
    transform: translateX(-50%);
}
.custom-tooltip.bottom .tooltip-content::before {
    bottom: 100%; /* arriba del tooltip */  
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-color: transparent transparent black transparent; /* apunta hacia arriba */
}

/* LEFT */
.custom-tooltip.left .tooltip-content {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}
.custom-tooltip.left .tooltip-content::before {
    top: 50%;
    left: 100%;/* a la izquierda del tooltip */  
    transform: translateY(-50%) rotate(-90deg);
    border-color: transparent transparent transparent black; /* apunta hacia la derecha */
}

/* RIGHT */
.custom-tooltip.right .tooltip-content { 
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}
.custom-tooltip.right .tooltip-content::before {
    top: 50%;
    right: 100%; /* a la derecha del tooltip */  
    transform: translateY(-50%) rotate(90deg);
    border-color: black transparent transparent transparent; /* apunta hacia la izquierda */
}



/* ---------- COLORES ---------- */
.custom-tooltip.tooltip-success .tooltip-content { background: var(--green); }
.custom-tooltip.tooltip-success .tooltip-content::before { border-color: var(--green) transparent transparent transparent; }

.custom-tooltip.tooltip-warning .tooltip-content { background: var(--warning); }
.custom-tooltip.tooltip-warning .tooltip-content::before { border-color: var(--warning) transparent transparent transparent; }

.custom-tooltip.tooltip-danger .tooltip-content { background: var(--danger); }
.custom-tooltip.tooltip-danger .tooltip-content::before { border-color: var(--danger) transparent transparent transparent; }

.custom-tooltip.tooltip-yellow .tooltip-content { background: var(--yellow); color: var(--muted-d) }
.custom-tooltip.tooltip-yellow .tooltip-content::before { border-color: var(--yellow) transparent transparent transparent; }
























/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	forms
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
  
    /*==============================================================================================
    ║ 	inputs
    ╚=============================================================================================*/
    .form-control {
        color: teal;
    }
    .form-control-feedback-icon-right {
        height: 100%;
        position: absolute;
        right: 10px;
        top: 0;
        display: flex;
        align-items: center;
    }
    .form-control-feedback-icon-right i {
        cursor: pointer;
    }

    .form-control:focus {
        background-color: var(--input-focus-bg);
        border-color: none;
        outline: 0;
        box-shadow: none;
    }






    .selectCustom input.selectCustomInputValue {  
        max-width: 35px;
        padding: 0 2px !important;
        text-align: center !important; 
        

		width: 1px !important; 
		position: absolute !important;
		left: calc(50% - 10px) !important;
		bottom: 0px !important;
        border: none !important;        
		z-index: -1 !important; 
        /* */
    }

    
	.selectCustom  .clearSelectCustom { 
		font-size: 14px;
		cursor: pointer;
	}





/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	modals
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.modal {
    --modal-header-padding: 1rem 1.25rem;
}
.modalContent {
    display: none;
}

.modal .modal-header {
    padding: var(--modal-header-padding);
}
.modal .modal-header .modal-title { 
    display: flex;
    align-items: center;
}

.modal .loadingSpinner { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 62px; 
    padding: 10px;
}



/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	modals > Table
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/

    .modal .table-responsive {
        max-height: 550px;
        overflow-y: auto;
    }
    /*------------------------------------------------------------
    |	modals > Table  >  HEADER  FIXED
    ------------------------------------------------------------*/ 
    /* Not required only for visualizing */
    .modal table {
        border-collapse: collapse;
        width: 100%;
    } 
    /* Important */
    .modal table thead tr   {
        position: sticky;
        top: 0;
        background-color: #ffffff;
        z-index: 1;
    } 
    /* Not required only for visualizing */
    .modal table  td {
        /* padding: 1em; */   
        text-wrap: auto;
    }

    .modal table  tr.rowFecha {
        background: #05479608;
    }
 
    

/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	Tabla Categorias
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
#tableCategorias tbody td {
    padding: 4px 12px;
}
#tableCategorias tbody tr.rowTipoCategoria   td {
    padding-top: 10px;
}
#tableCategorias tbody tr.rowTipoCategoria:not(:first-of-type)  td {
    padding-top: 30px;
}




/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	Tabla SUB-Categorias
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
#tableSubcategorias tbody td {
    padding: 4px 12px;
}
#tableSubcategorias tbody tr.rowCategoria   td {
    padding-top: 10px;
}
#tableSubcategorias tbody tr.rowCategoria:not(:first-of-type)  td {
    padding-top: 20px;
}






/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	modals Forms
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.modal .form-group-hidden {
    display: none;
}













/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	modals Select Customs
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/

.modal#modalSelectCustom {

}
.modal#modalSelectCustom .modalSelectCustom_list { 
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 480px) {
    .modal#modalSelectCustom .modalSelectCustom_list { grid-template-columns: repeat(2, 1fr); }
} 
@media (min-width: 900px) {
    .modal#modalSelectCustom .modalSelectCustom_list { grid-template-columns: repeat(5, 1fr); }
} 
@media (min-width: 1200px) {
    .modal#modalSelectCustom .modalSelectCustom_list { grid-template-columns: repeat(5, 1fr); }
} 


.modal#modalSelectCustom .modalSelectCustom_list .option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem;
    border-radius: 6px; 
    background: rgb(62 166 154 / 20%);
    /* background: var(--primario-200); */
}     
.modal#modalSelectCustom .modalSelectCustom_list .option i { 
    font-size: 20px;
    color: var(--primario-800);
}  
.modal#modalSelectCustom .modalSelectCustom_list .option span { 
    display: flex;
    flex-grow: 1;
    margin-top: 5px; 
    align-items: center;
    line-height: 15px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primario-800); 
} 
.modal#modalSelectCustom .modalSelectCustom_list .option span.text_extra { 
    /* color: var(--complementario);  */
}



/*-----------------------------------------------------------------
|	OPTION SELECTED  STYLE
-----------------------------------------------------------------*/
form  input[disabled] + label,
.modal#modalSelectCustom .modalSelectCustom_list .option.disabled,
.modal#modalSelectCustom .modalSelectCustom_list .option[disabled] {
    cursor: not-allowed !important;
}
.modal#modalSelectCustom .modalSelectCustom_list .option.selected {
    /* background: var(--primario-700); */ 
    background: rgb(62, 166, 154);
}
.modal#modalSelectCustom .modalSelectCustom_list .option.selected * { 
    color: #fff !important; 
}
.modal#modalSelectCustom .modalSelectCustom_list .option.selected i { 
    color: var(--primario-100); 
} 
.modal#modalSelectCustom .modalSelectCustom_list .option.selected span {   
    color: var(--primario-100); 
} 



 







/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	Tablas  >  DataTables
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.dataTables_wrapper .datatable-header {
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px
}

@media (max-width: 575px) {
    .dataTables_filter .form-control {
        max-width: 162px;
    }
}


.dataTables_wrapper .datatable-header  .dataTables_length { 
    margin-left: auto;
}  
.dataTables_wrapper .datatable-header  .input-group { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


.dataTables_wrapper .datatable-footer {
    border-top: none;
} 



table.dataTable.table-xs tbody td, 
table.dataTable.table-xs thead th { 
    padding: 0.65rem 0.65rem;
    font-size: 13px; /* Fuente más pequeña si lo deseas */
    font-weight: 500;
} 
table.dataTable.table-xs thead th.sorting {
    padding-right: 3rem;
}

.table tr.columnas {
    /* border-top: none; */
    color: #fff;
    background: #3e4c57;
}
.table thead tr.filtros { 
    background: #3e4c5775;
}
.table thead tr.filtros th {
    padding: 0.4rem;
    /* display: table-cell; */
    text-align: center;
}

.table thead tr.filtros th input {
    color: #f00;;
    font-weight: 600;
    transition: background-color 0.3s ease;
    background-color: white; /* Color por defecto */
}
  
.table thead tr.filtros th input:focus,
.table thead tr.filtros th input:not(:placeholder-shown) {
    background: #ffe2e2; /* Color cuando tiene contenido */
} 

.table tbody tr:nth-last-child {
    border-bottom: none;
}






 

.datatable-header .dataTables_filter .input-group .form-control-feedback-icon {
    top: 0;
    padding-right: 3.2rem;
    padding-left: 0.5rem;
}
.datatable-header .dataTables_filter .input-group button.reloadDataTable {
    z-index: 6;
} 
.datatable-header .datatable-custom-filters {
    margin-bottom: var(--dt-spacer-y);
    /* flex-grow: 1; */
} 
.pagination {  
    --pagination-active-bg: var(--teal);
    --pagination-active-border-color: var(--teal);
} 
.dataTables_paginate .pagination {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center; /* Centrar los elementos */
    gap: 5px; /* Espaciado entre los botones */
    max-width: 100%; /* Para evitar desbordamientos */
    overflow: hidden; /* Opcional, para evitar scroll lateral */
}


 


/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	dateRangePicker  >  DataTables 
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.datatable-header .datatable-custom-filters .dateRange .dateRangeDisplay {
    min-width: 180px;    
    max-width: 350px;
    cursor: pointer;
}










/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	icon List
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.modal  .iconsList {
    max-height: 350px;
    overflow-y: auto;
} 

.modal .iconsList { 
    margin: 0 auto;
    padding: 0.2rem;
    display: grid;
    grid-gap: 0.3rem;
    grid-template-columns: repeat(7, 1fr);
}
@media (min-width: 480px) {
    .modal .iconsList { grid-template-columns: repeat(9, 1fr); }
} 
@media (min-width: 900px) {
    .modal .iconsList { grid-template-columns: repeat(11, 1fr); }
} 
@media (min-width: 1200px) {
    .modal .iconsList { grid-template-columns: repeat(13, 1fr); }
} 


.modal  .iconsList button i {
    color: #1c7484;
    font-size: 1.5rem;
}

.modal  .iconsList > .lineCategory {
	grid-column: 1/-1 !important;
    color: #1c7484;
    font-size: 15px;
    font-weight: 500;
    margin-top: 15px;
}

.modal  .iconsList > .lineCategory:first-child {
    margin-top: 0;
}







.rowCategoria  .categorias-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* Espaciado uniforme entre X e Y */
}
 

#formCategoria .nav-tabs-highlight, 
#formCategoria .nav-tabs-overline, 
#formSubcategoria .nav-tabs-overline, 

#formSubcategoria .nav-tabs-highlight, 
#formCategoria .nav-tabs-underline,
#formSubcategoria .nav-tabs-underline {
    --nav-tabs-underline-size: 2px;
    --nav-tabs-underline-color: var(--teal);
}


.nav-tabs-highlight .nav-link.active:before,
.nav-tabs-overline .nav-link.active:before,
.nav-tabs-underline .nav-link.active:before {
    background-color: var(--nav-tabs-underline-color);
}