@charset "UTF-8";
/*
//══ 🅲🆂🆂 ═══════════════════════════════════════════════════════════════════
│  
│ 🩵 custom.css — overrides/extend de Limitless (all.css)
│
│ Carga recomendada (en template.php):
│   1) all.css   (Limitless)
│   2) custom.css (Gemini) 
│
└─────────────────────────────────────────────────────────────────────────*/


/*══════════════════════════════════════════════════════════════════════════
║  ÍNDICE
╠══════════════════════════════════════════════════════════════════════════
║  00) Root / Design Tokens (variables CSS)
║  01) Extensiones de all.css (helpers básicos)
║  02) Tipografía (text-*, gradients, lighten/darken)
║  03) Colores utilitarios (bg-*, text-*, border-*)
║  04) Iconos (FontAwesome / Phosphor / Icomoon / Emoji + tamaños)
║  05) Layout helpers (flex, tamaños, line-height)
║  06) Animaciones (pulse, bounce, etc.)
║  07) Formularios (inputs, checks, switches, etc.)
║  08) Componentes (DataTables, Select2, Navbar, Sidebar, etc.)
║  09) Modales (tablas sticky header, form helpers, daterangepicker...)
║  10) Hacks / Debug / Legacy (dejar aquí lo “temporal”)
╚══════════════════════════════════════════════════════════════════════════*/

 
/*────────────────────────────────────────────────────────
│ Root / Set Overrides
└──────────────────────────────────────────────────────*/
:root,
[data-color-theme="light"] {
    --body-font-size-lg: 1rem;
    --body-font-size-sm: 0.75rem;
    --body-font-size-xs: 0.625rem;
    --body-line-height-computed: calc(1375rem / 1000);
    --body-line-height-lg: 2.2;
    --body-line-height-sm: 1.8334;
    --body-line-height-xs: 1.375;
    --component-active-bg: var(--marca);
    --component-active-bg-rgb: 12, 131, 255;
    --component-active-color: #fff;
    --focus-ring-box-shadow: 0 0 0 0.125rem rgba(12, 131, 255, 0.25);
    --spacer-1: 0.3125rem;
    --spacer-2: 0.625rem;
    --spacer: 1.25rem;
    --spacer-4: 1.875rem;
    --spacer-5: 3.75rem;
    --icon-font-family: Phosphor;
    --icon-font-size: 1.25rem;
    --icon-font-size-lg: 1.5rem;
    --icon-font-size-sm: 1rem;
    --box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.125);
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.15);
    --transition-base-timer: 0.15s;
    --transition-collapse-timer: 0.3s;
    --gray-100: #f9fafb;
    --gray-200: #f3f4f6;
    --gray-300: #e5e7eb;
    --gray-400: #d1d5db;
    --gray-500: #9ca3af;
    --gray-600: #6b7280;
    --gray-700: #4b5563;
    --gray-800: #374151;
    --gray-900: #1f2937;
    --indigo: #5c6bc0;
    --purple: #8e70c1;
    --pink: #f35c86;
    --teal: #26a69a;
    --yellow: #ffd648;
    --primary: #0c83ff;
    --secondary: #247297;
    --success: #059669;
    --info: #049aad;
    --warning: #f58646;
    --danger: #ef4444;
    --light: #f3f4f6;
    --dark: #252b36;
    --black: #000;
    --white: #fff;
    --indigo-rgb: 92, 107, 192;
    --purple-rgb: 142, 112, 193;
    --pink-rgb: 243, 92, 134;
    --teal-rgb: 38, 166, 154;
    --yellow-rgb: 255, 214, 72;
    --primary-rgb: 12, 131, 255;
    --secondary-rgb: 36, 114, 151;
    --success-rgb: 5, 150, 105;
    --info-rgb: 4, 154, 173;
    --warning-rgb: 245, 134, 70;
    --danger-rgb: 239, 68, 68;
    --light-rgb: 243, 244, 246;
    --dark-rgb: 37, 43, 54;
    --black-rgb: 0, 0, 0;
    --white-rgb: 255, 255, 255;
    --body-color-rgb: 31, 41, 55;
    --body-bg-rgb: 241, 244, 249;
    --font-sans-serif: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--font-sans-serif);
    --body-font-size: 0.875rem;
    --body-font-weight: 400;
    --body-line-height: 1.5715;
    --body-color: #1f2937;
    --body-bg: #f1f4f9;
    --border-width: 1px;
    --border-style: solid;
    --border-color: #d1d5db;
    --border-color-translucent: rgba(0, 0, 0, 0.125);
    --border-radius: 0.375rem;
    --border-radius-sm: 0.25rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 1rem;
    --border-radius-2xl: 2rem;
    --border-radius-pill: 50rem;
    --link-color: var(--marca-600);
    --link-hover-color: var(--marca-700);
    --code-color: #f35c86;
    --highlight-bg: rgba(0, 0, 0, 0.15);
}

:root {   

 
    --nav-tabs-underline-color: #ff0000;   

    --nav-link-active-bg: rgba(var(--complementario-rgb), 0.1);
    --nav-link-active-color: var(--complementario);


    
    /* --component-active-bg: var(--marca); */


    --form-check-input-focus-border: var(--marca);
    --form-check-input-focus-box-shadow: var(--focus-ring-box-shadow);
    --form-check-input-checked-bg-color: var(--marca);


}

.nav-tabs-highlight, .nav-tabs-overline, .nav-tabs-underline {
    --nav-tabs-underline-color: var(--marca);   
}

.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);
}





/*────────────────────────────────────────────────────────
│  01) Extensiones de all.css (helpers básicos)
└──────────────────────────────────────────────────────*/
/*────────────────────────────────────────────────────────
│  Root
└──────────────────────────────────────────────────────*/

/*══  all.css  ───────────────────────────────────────────────────────────────────────────────────────
│ 
│ 
│ 🩵 AMPLIACIÓN  de  all.CSS
│ 
│ 
└──────────────────────────────────────────────────────────────────────────────────────────────────*/ 
.h-100px { height: 6rem !important; }
.h-120px { height: 7rem !important; }

.w-100px { width: 6rem !important; }
.w-120px { width: 7rem !important; }











/* DEBUG (temporal)
   h4 { color: red !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;
}
.cursor-not-allowed {
    cursor: not-allowed !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: rgba(var(--muted-d-rgb), var(--bg-opacity)) !important; 
} 
.bg-muted { 
    background-color: rgba(var(--muted-rgb), var(--bg-opacity)) !important; 
} 
.bg-muted-l { 
    background-color: rgba(var(--muted-l-rgb), var(--bg-opacity)) !important; 
} 
.bg-muted-xl { 
    background-color: rgba(var(--muted-xl-rgb), var(--bg-opacity)) !important; 
} 

.border-muted {

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






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

.bg-orange { 
    background-color: rgba(var(--orange-rgb), var(--bg-opacity)) !important;    
} 
.btn-orange { 
    color: #fff;
    background-color: rgba(var(--orange-rgb), var(--bg-opacity)) !important;    
} 
.text-orange {
    color: var(--orange) !important;
    color: rgba(var(--orange-rgb), var(--text-opacity)) !important;
}  

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

.bg-gold { 
    background-color: rgba(var(--gold-rgb), var(--bg-opacity)) !important;    
} 
.text-gold {
    color: var(--gold) !important;
    color: rgba(var(--gold-rgb), var(--text-opacity)) !important;
} 
 
.bg-skin { 
    background-color: rgba(var(--skin-rgb), var(--bg-opacity)) !important;    
} 
.text-skin {
    color: var(--skin) !important;
    color: rgba(var(--skin-rgb), var(--text-opacity)) !important;
} 



.text-gradient-google {  
    background-image: linear-gradient(45deg, #ff0000 25%, #06a13e 50%, #ffdd00 70%); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}   
.text-gradient-edge {  
    background-image: linear-gradient(45deg, #257dc5 25%, #35c96b 55%, #85ec2a 85%); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}  


 

/*==============================================================================================
║ 	 
║  Fonts  >  Brillo / Saturacion  
║ 	 
╚============================================================================================*/ 
/**═══ ─────────────────────────────
│  TEXT LIGHTEN - Base: 1.0
└────────────────────────────────*/ 
.text-lighten-1 { filter: brightness(1.08); }
.text-lighten-2 { filter: brightness(1.16); }
.text-lighten-3 { filter: brightness(1.28); }
.text-lighten-4 { filter: brightness(1.45); } 

/**═══ ─────────────────────────────
│  TEXT DARKEN - Base: 1.0
└────────────────────────────────*/ 
.text-darken-1 { filter: brightness(0.92); }
.text-darken-2 { filter: brightness(0.84); }
.text-darken-3 { filter: brightness(0.72); }
.text-darken-4 { filter: brightness(0.55); }

 
 

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




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



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

    --icon-font-size-xxxs: calc( var(--icon-font-size) / 1.8 ); 
    --icon-font-size-xxs: calc( var(--icon-font-size) / 1.5 ); 
    --icon-font-size-xs: calc( var(--icon-font-size) / 1.3 ); 
    --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
}

/*==============================================================================================
║ 	Iconmoon
╚=============================================================================================*/
[class*=" icon-"],[class^=icon-] {   
    --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;
    top: 0 !important;
    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
}


/*==============================================================================================
║ 	Emojis
╚=============================================================================================*/
.emoji {   
    --icon-font-size: 0.7rem;     /* ✅  */  

    --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;

     
    margin: 0 0.1em;        /* Espacio a los lados */ 
}
 


/*==============================================================================================
║ 	icons  >  Sizes  Classes
╚=============================================================================================*/
.fsi-xxxxs  { font-size: var(--icon-font-size-xxxxs); }
.fsi-xxxs  { font-size: var(--icon-font-size-xxxs); }
.fsi-xxs  { font-size: var(--icon-font-size-xxs); }
.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 );}

.fsi-3x  { font-size: calc( var(--icon-font-size) * 2.5 );}
.fa-3x  { font-size: calc( var(--icon-font-size) * 2.5 );}
.ph-3x  { font-size: calc( var(--icon-font-size) * 2.5 );}

.fsi-4x  { font-size: calc( var(--icon-font-size) * 3.5 );}
.fa-4x  { font-size: calc( var(--icon-font-size) * 3.5 );}
.ph-4x  { font-size: calc( var(--icon-font-size) * 3.5 );}

.fsi-5x  { font-size: calc( var(--icon-font-size) * 4.5 );}
.fa-5x  { font-size: calc( var(--icon-font-size) * 4.5 );}
.ph-5x  { font-size: calc( var(--icon-font-size) * 4.5 );}
 

  

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



 

.pulse {
  animation: pulse 2s infinite;
} 
@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}


.bounce {
  animation: bounce 0.8s infinite;
} 
@keyframes bounce {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}





/*==============================================================================================
║ 	FLEX  CLASSES
╚=============================================================================================*/
.flex-center-h {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
}
.flex-start-h {
    display: flex;
    flex-direction: row !important;
    justify-content: start !important;
    align-items: center !important;
}
.flex-center-v {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}













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




    /*────────────────────────────────────────
    │ Botones   →   button / .btn
    └───────────────────────────────────────*/  
    .btn {
        --btn-font-weight: 500;
    }




/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║	SEPARADORES (Separators Custom)
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
/*────────────────────────────────────────
│ hr-label
└───────────────────────────────────────*/ 
.hr-label{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin:1.5rem 0;
    color:#6c757d;
    font-weight:600;
    letter-spacing:.02em;
    text-transform:uppercase;
    font-size:.72rem;
} 
.hr-label::before,
.hr-label::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(to right, transparent, rgba(0,0,0,.18), transparent);
} 
.hr-label div {
    padding:.15rem 1rem;
    font-size: 0.65rem;
    border-radius:999px;
    background:rgba(0,0,0,.03);
    border:1px solid rgba(0,0,0,.06);
} 

/*────────────────────────────────────────
│ hr-dot
└───────────────────────────────────────*/   
.hr-dot{
    position:relative;
    margin:1.25rem 0;
    height:1px;
    background:linear-gradient(to right, transparent, rgba(0,0,0,.16), transparent);
} 
.hr-dot::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:8px;
    height:8px;
    border-radius:999px;
    background:#fff;
    border:2px solid rgba(0,0,0,.18);
}






/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║	NAV TABS
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/




    








/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	MAIN  SIDEBAR
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.sidebar-dark {
    --sidebar-bg: #3e4c57;  
    --sidebar-width: 17rem;
    font-size: 0.8rem;
}
.sidebar.sidebar-main {
    --sidebar-width: 16rem;
}

.sidebar-main .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;
    }
}
.sidebar-main .nav-sidebar .nav-item-header {
    /* color: #25bbb2;   */
    color: var(--marca);  
    background-color: rgba(0, 0, 0, .4);
}

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

    .sidebar-main .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);
    }
    .sidebar-main .nav-group-sub .nav-link {
        padding-left: calc(var(--nav-link-padding-x)* 1 + var(--icon-font-size));
    }
    .sidebar-main .nav-sidebar .nav-link.active { 
        /* background-color: #26a69a99 !important; */
        background-color: var(--marca-600);  
    }
    .sidebar-main .nav-group-sub .nav-group-sub .nav-link {
        padding-left: calc(var(--nav-link-padding-x)* 2 + var(--icon-font-size));
    }
    .sidebar-main .nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
        padding-left: calc(var(--nav-link-padding-x)* 3 + var(--icon-font-size));
    }


 
 
    

/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	MAIN NAVBAR
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.navbar-brand img {
    height: 32px;
}
.navbar-brand h4 {
    font-family: "Ravie";
    font-size: 18px;
    font-weight: 100;
}





/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	OFFCANVAS  -  PANNEL  RIGHT
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.offcanvas img.avatar {
    border-color: var(--dark);
    box-shadow: 0 0 10px 0px rgba(var(--dark-rgb), 0.5);
}

.offcanvas.offcanvas-end {
    --offcanvas-width: 20rem;
    width: var(--offcanvas-width);
}








/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	PAGE  HEADER
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/

/*── 📁 ──────────────────────────────────────────
│  BREADCRUMB  (Migas de pan)
└──────────────────────────────────────────────*/

.page-header .breadcrumb .breadcrumb-item {
    color: var(--muted);
}
.page-header .breadcrumb .breadcrumb-item.active { 
    color: var(--marca-500);  
}
.page-header .breadcrumb i { 
    margin-right: 0.5rem;
}



/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	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; }



 




/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	SWAL  CONFIRMACION
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.swal2-popup  .icon-custom {
    display: flex;
    justify-content: center;
    align-content: center;
}
.swal2-popup  .icon-custom  .icon-max {
    display: flex;
    /* border: 1px solid #ccc; */
}
.swal2-popup  .icon-custom  .icon-min {
    display: flex;
    margin-left: -10px; 
    align-items: center;
    /* border: 1px solid #d83535; */
}



/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	SWAL  RESPUESTA
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/






 


/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	📋 FORMULARIOS
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
  
    /*═════════════════════════════════════════════════════════════════════
    ║ 📋 → Labels
    ╚═══════════════════════════════════════════════════════════════════*/ 
    label.form-label.label-required::after{
        content:" *";
        color:#dc3545;
        font-weight:700;
    }

    /*═════════════════════════════════════════════════════════════════════
    ║ 📋 → Inputs
    ╚═══════════════════════════════════════════════════════════════════*/ 
    /* #region   */ 
    .form-control { 
        --input-padding-y: 0.5rem;
        --input-padding-x: 0.875rem;
        --input-height: calc(calc(var(--input-line-height) * 1em) + calc(var(--input-padding-y) * 2) + calc(var(--border-width) * 2));
        --input-bg: var(--white);
        /* --input-color: var(--body-color); */
        --input-color: var(--marca-600);
        --input-plaintext-color: var(--body-color);
        --input-placeholder-color: var(--gray-400);
        --input-font-weight: 500;
        --input-font-size: var(--body-font-size);
        --input-line-height: var(--body-line-height);
        --input-border-width: var(--border-width);
        --input-border-color: var(--gray-400);
        --input-border-radius: var(--border-radius);
        --input-box-shadow: 0 0 0 0 transparent;
        --input-focus-bg: var(--white);
        --input-focus-border-color: var(--component-active-bg);
        --input-focus-box-shadow: var(--focus-ring-box-shadow);
        --input-disabled-bg: var(--gray-100);
        --input-disabled-border-color: var(--gray-400);
    }  

    .form-control-sm {
        /* --input-height: calc(calc(var(--input-line-height) * 1em) + calc(var(--input-padding-y) * 2) + calc(var(--border-width) * 2));
        --input-padding-y: 0.375rem;
        --input-padding-x: 0.75rem;
        --input-font-size: var(--body-font-size);
        --input-line-height: var(--body-line-height-xs);
        --input-border-radius: var(--border-radius-sm); */
    
        height: 36px !important;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 36px;
        font-size: 0.85rem; 
    } 
    .form-control-xs {
        --input-height: calc(calc(var(--input-line-height) * 1em) + calc(var(--input-padding-y) * 2) + calc(var(--border-width) * 2));
        --input-padding-y: 0.175rem;
        --input-padding-x: 0.55rem;
        --input-font-size: var(--body-font-size-sm);
        --input-line-height: var(--body-line-height-sm);
        --input-border-radius: var(--border-radius-sm)
    } 
    .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;
    } 
    .form-control:disabled, form input:disabled {
        color: var(--muted) !important;
    }
    /* #endregion */


    /*═════════════════════════════════════════════════════════════════════
    ║ 📋 → Placeholder 
    ╚═══════════════════════════════════════════════════════════════════*/ 
    /* #region   */  
    .form-control::-webkit-input-placeholder {
        color: var(--input-placeholder-color);
        opacity: 1;
    }
    .form-control::-moz-placeholder {
        color: var(--input-placeholder-color);
        opacity: 1;
    }
    .form-control:-ms-input-placeholder {
        color: var(--input-placeholder-color);
        opacity: 1;
    }
    .form-control::-ms-input-placeholder {
        color: var(--input-placeholder-color);
        opacity: 1;
    }
    .form-control::placeholder {
        color: var(--input-placeholder-color);
        opacity: 1;
    }
    /* #endregion */

 
    
    /*═════════════════════════════════════════════════════════════════════
    ║ 📋 → Select
    ╚═══════════════════════════════════════════════════════════════════*/ 
    /* #region   */  
    .form-select {
        color: var(--marca-600);
        font-size: 0.85rem;
        font-weight: 500;
    }
    .form-select-sm {
        --form-select-padding-y: 0.285rem;
        --form-select-padding-x: 0.875rem; 
        --form-select-font-size: var(--body-font-size-sm);
        --form-select-line-height: var(--body-line-height-sm);
        --form-select-border-radius: var(--border-radius-sm);
    }  
    .form-select:disabled, form select:disabled {
        color: var(--muted) !important;
    }

    /* #endregion */
    

    /*═════════════════════════════════════════════════════════════════════
    ║ 📋 → Select2
    ╚═══════════════════════════════════════════════════════════════════*/ 
    /* #region   */   
    .select2-container {
        --s2-bg: var(--white);
        /* --s2-color: var(--body-color); */
        --s2-color: var(--marca-600);
        /* --s2-padding-y: 0.5rem; */
        --s2-padding-y: 0.375rem;
        --s2-padding-x: 0.875rem;
        --s2-placeholder-color: var(--gray-400);
        --s2-border-width: var(--border-width);
        --s2-border-color: var(--gray-400);
        --s2-border-radius: var(--border-radius);
        --s2-focus-border-color: var(--component-active-bg);
        --s2-focus-box-shadow: var(--focus-ring-box-shadow);
        /* --s2-disabled-color: var(--body-color); */
        --s2-disabled-color: var(--muted);
        --s2-disabled-bg: var(--gray-100);
        --s2-disabled-border-color: var(--gray-400);
        --s2-disabled-opacity: 0.6;
        --s2-font-size: var(--body-font-size);
        --s2-font-wight: 500;
        --s2-line-height: var(--body-line-height);
        --s2-indicator-padding: 2.625rem;
        --s2-menu-padding-y: 0.625rem;
        --s2-menu-max-height: 17rem;
        --s2-menu-bg: var(--white);
        --s2-menu-border-width: var(--border-width);
        --s2-menu-border-color: var(--border-color-translucent);
        --s2-menu-border-radius: var(--border-radius);
        --s2-menu-box-shadow: var(--box-shadow-lg);
        --s2-menu-item-spacer-y: 1px;
        --s2-menu-item-padding-x: var(--spacer);
        --s2-menu-item-padding-y: calc(var(--spacer) * 0.4);
        --s2-menu-link-color: var(--body-color);
        --s2-menu-link-disabled-color: var(--gray-500);
        --s2-menu-link-hover-color: var(--body-color);
        --s2-menu-link-hover-bg: var(--gray-200);
        /* --s2-menu-link-active-color: var(--gray-900); */
        --s2-menu-link-active-color: var(--marca-600);
        /* --s2-menu-link-active-bg: var(--gray-300); */
        --s2-menu-link-active-bg: rgba(var(--marca-rgb), 0.2);
        --s2-search-bg: var(--white);
        --s2-search-padding-y: 0.5rem;
        --s2-search-padding-x: 0.875rem;
        --s2-search-color: var(--body-color);
        --s2-search-border-width: var(--border-width);
        --s2-search-border-color: var(--gray-400);
        --s2-search-border-radius: var(--border-radius);
        --s2-search-focus-bg: var(--white);
        --s2-search-focus-border-color: var(--component-active-bg);
        --s2-search-focus-box-shadow: var(--focus-ring-box-shadow);
        --s2-pills-bg: var(--gray-300);
        --s2-pills-color: var(--body-color);
        /* --s2-pills-hover-bg: var(--component-active-bg); */
        --s2-pills-hover-bg: var(--marca-600);
        
        --s2-pills-hover-color: var(--component-active-color);
        --s2-pills-border-radius: calc(var(--border-radius) - (var(--border-width)));
        --s2-pills-spacer: 0.25rem;
        outline: 0;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        /* font-weight: 500; */

         
    } 

    .select2-selection--single {
        font-weight: var(--s2-font-wight);
    }


    .select2-selection--multiple ul.select2-selection__rendered {    
        padding-bottom: 0;
    } 
    .select2-selection--multiple .select2-selection__choice { 
        background: rgba(var(--marca-rgb), var(--bg-opacity));
        --bg-opacity: .2;
        color: var(--marca-700);
    } 
    .select2-selection--multiple .select2-search--inline:first-child .select2-search__field {
        margin-top: 2px;
        margin-bottom: 2px; 
    } 

    .select2-dropdown {
        color: var(--marca-600);
    }
    .select2-results__option {
        font-weight: var(--s2-font-wight);

    }
         
    /* #endregion */


    /*═════════════════════════════════════════════════════════════════════
    ║ ✅ → checks / switch
    ╚═══════════════════════════════════════════════════════════════════*/ 
    .form-check-input-marca {      
        --form-check-input-checked-bg-color: var(--marca)
    } 
    .form-check-input:checked {
        background-color: var(--form-check-input-checked-bg-color);
        /* border-color: var(--form-check-input-checked-border-color); */
    } 
    .form-check-input {
        --form-check-input-checked-bg-color: var(--marca);
    } 
    .form-check-input:checked {
        /* --form-check-input-checked-bg-color: var(--marca) */
    }


    /*═════════════════════════════════════════════════════════════════════
    ║ ✅ → INPUT's SIN ESTILO - transparentes
    ╚═══════════════════════════════════════════════════════════════════*/ 
    .input-inline-text{
        /* Reset visual */
        all: unset;

        /* Heredar estilo del padre */
        color: inherit;
        font: inherit;
        text-align: inherit;
        line-height: inherit;

        /* Comportamiento inline */
        display: inline-block;
        white-space: pre;

        /* Seguridad UX */
        pointer-events: none;
    }


    








/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	Accordions
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.accordion #item-template {
    display: none;
}
.accordion-button:not(.collapsed) {
    color: var(--primary);
}







/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	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;
}

.modal .btn-close {
    
     
 }


.modal-header .btn-close,
.modal-header .btn-close {
  /* filter: invert(1); */  
  opacity: 1;
  background-color: rgba(0, 0, 0, .25) !important;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 20 20' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / var(--btn-close-width) auto no-repeat;
}






/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	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;
    }
 
    




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





/*══ 📅 ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║  Daterangepicker
║	
╚═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.daterangepicker { 
    --drp-item-active-bg: var(--marca); 
}







/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	modal  >  dateRangePicker
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
form input.daterange-value,
form input.daterange-values
{ 
    width: 1px !important; 
    max-width: 35px;
    position: absolute !important;
    left: calc(50% - 10px) !important;
    bottom: 0px !important;

    padding: 0 2px !important;
    border: none !important;        
    text-align: center !important;  
    
    z-index: -1 !important; 
}
form .daterange-mobile .daterangepicker {
    position: relative; 
    top: auto !important;
    left: auto !important;
}

.daterangepicker.auto-apply .drp-buttons {
    display: none;
}








/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║	Tablas  >  DataTables
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.dataTables_wrapper .datatable-header {
    border-bottom: none;
    display: flex;
    flex-wrap: wrap; 
}
.dataTables_wrapper .datatable-header:has(:nth-child(3)) {
  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;
}


.datatable-scroll, .datatable-scroll-lg, .datatable-scroll-sm 
{
    width: 100%;
    overflow-x: auto;
}




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



table.dataTable tbody td:not(.no-flex) * {
    display: flex;
    align-items: center;
    justify-content: center;
}


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

table.dataTable thead tr.columnas th,
table.dataTable tfoot tr.columnas th {  
    text-align: left !important;
    vertical-align: middle;
    white-space: nowrap;
}

  
.table tr.columnas {
    /* border-top: none; */
    color: #fff;
    background: #3e4c57;
}
.table thead tr.filtros { 
    background: #3e4c5775;
}
.table thead tr.filtros th {
    padding: 0.25rem;
    /* 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;
}


table.dataTable.table-xs tbody tr.table-group td { 
    padding: 0.35rem 0.65rem;
}





 

.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(--marca);
    --pagination-active-border-color: var(--marca);
} 
.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 */
}



.reorder-handle {
    cursor: grab;
}
.reorder-handle::before {
    content: '⋮⋮';
    color: #999;
    margin-right: 6px;
}
.no-reorder {
    cursor: not-allowed;
}






 


/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║  
║	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(--marca);
}


.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);
}



 





/*═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
║ 
║ 
║  📋 BOTONES  (button  btn)
║	
║	
╚══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════*/
.btn-sm {
    height: 36px !important;
    font-size: 0.85rem;
}


/*────────────────────────────────────────────────────────
│  Botones editar
└──────────────────────────────────────────────────────*/
.table  i.icon-pencil6,
.btn-group  i.icon-pencil6 {
    color: var(--marca-600)  !important;
    font-size: 0.9rem  !important;
}



/*────────────────────────────────────────────────────────
│  10) Hacks / Debug / Legacy
└──────────────────────────────────────────────────────*/
/*
   Deja aquí cualquier prueba rápida (colores temporales, overrides “a saco”, etc.)
   para que no ensucie el resto del archivo.
*/