/* VARIABLES CSS CRÍTICAS PARA FILAMENT - CARGA FORZADA EN PRODUCCIÓN */

:root {
    /* Variables CSS Filament - Gray Palette */
    --gray-50: 249, 250, 251;
    --gray-100: 243, 244, 246;
    --gray-200: 229, 231, 235;
    --gray-300: 209, 213, 219;
    --gray-400: 156, 163, 175;
    --gray-500: 107, 114, 128;
    --gray-600: 75, 85, 99;
    --gray-700: 55, 65, 81;
    --gray-800: 31, 41, 55;
    --gray-900: 17, 24, 39;
    --gray-950: 3, 7, 18;
    
    /* Variables CSS Filament - Primary Palette (Blue) */
    --primary-50: 239, 246, 255;
    --primary-100: 219, 234, 254;
    --primary-200: 191, 219, 254;
    --primary-300: 147, 197, 253;
    --primary-400: 96, 165, 250;
    --primary-500: 59, 130, 246;
    --primary-600: 37, 99, 235;
    --primary-700: 29, 78, 216;
    --primary-800: 30, 64, 175;
    --primary-900: 30, 58, 138;
    --primary-950: 23, 37, 84;
    
    /* Variables CSS Filament - Success Palette (Green) */
    --success-50: 240, 253, 244;
    --success-100: 220, 252, 231;
    --success-200: 187, 247, 208;
    --success-300: 134, 239, 172;
    --success-400: 74, 222, 128;
    --success-500: 34, 197, 94;
    --success-600: 22, 163, 74;
    --success-700: 21, 128, 61;
    --success-800: 22, 101, 52;
    --success-900: 20, 83, 45;
    --success-950: 5, 46, 22;
    
    /* Variables CSS Filament - Warning Palette (Yellow) */
    --warning-50: 254, 252, 232;
    --warning-100: 254, 249, 195;
    --warning-200: 254, 240, 138;
    --warning-300: 253, 224, 71;
    --warning-400: 250, 204, 21;
    --warning-500: 234, 179, 8;
    --warning-600: 202, 138, 4;
    --warning-700: 161, 98, 7;
    --warning-800: 133, 77, 14;
    --warning-900: 113, 63, 18;
    --warning-950: 66, 32, 6;
    
    /* Variables CSS Filament - Danger Palette (Red) */
    --danger-50: 254, 242, 242;
    --danger-100: 254, 226, 226;
    --danger-200: 254, 202, 202;
    --danger-300: 252, 165, 165;
    --danger-400: 248, 113, 113;
    --danger-500: 239, 68, 68;
    --danger-600: 220, 38, 38;
    --danger-700: 185, 28, 28;
    --danger-800: 153, 27, 27;
    --danger-900: 127, 29, 29;
    --danger-950: 69, 10, 10;
    
    /* Variables CSS Filament - Info Palette (Cyan) */
    --info-50: 240, 249, 255;
    --info-100: 224, 242, 254;
    --info-200: 186, 230, 253;
    --info-300: 125, 211, 252;
    --info-400: 56, 189, 248;
    --info-500: 14, 165, 233;
    --info-600: 2, 132, 199;
    --info-700: 3, 105, 161;
    --info-800: 7, 89, 133;
    --info-900: 12, 74, 110;
    --info-950: 8, 47, 73;
    
    /* Variables CSS Filament - Custom Palette (alias de primary) */
    --c-50: var(--primary-50);
    --c-100: var(--primary-100);
    --c-200: var(--primary-200);
    --c-300: var(--primary-300);
    --c-400: var(--primary-400);
    --c-500: var(--primary-500);
    --c-600: var(--primary-600);
    --c-700: var(--primary-700);
    --c-800: var(--primary-800);
    --c-900: var(--primary-900);
    --c-950: var(--primary-950);
}

/* FUERZA LAS VARIABLES EN DARK MODE */
html.dark,
html.dark body,
.dark {
    /* Inherit all variables from :root */
    --gray-50: 249, 250, 251;
    --gray-100: 243, 244, 246;
    --gray-200: 229, 231, 235;
    --gray-300: 209, 213, 219;
    --gray-400: 156, 163, 175;
    --gray-500: 107, 114, 128;
    --gray-600: 75, 85, 99;
    --gray-700: 55, 65, 81;
    --gray-800: 31, 41, 55;
    --gray-900: 17, 24, 39;
    --gray-950: 3, 7, 18;
    
    --primary-50: 239, 246, 255;
    --primary-100: 219, 234, 254;
    --primary-200: 191, 219, 254;
    --primary-300: 147, 197, 253;
    --primary-400: 96, 165, 250;
    --primary-500: 59, 130, 246;
    --primary-600: 37, 99, 235;
    --primary-700: 29, 78, 216;
    --primary-800: 30, 64, 175;
    --primary-900: 30, 58, 138;
    --primary-950: 23, 37, 84;
    
    --success-50: 240, 253, 244;
    --success-100: 220, 252, 231;
    --success-200: 187, 247, 208;
    --success-300: 134, 239, 172;
    --success-400: 74, 222, 128;
    --success-500: 34, 197, 94;
    --success-600: 22, 163, 74;
    --success-700: 21, 128, 61;
    --success-800: 22, 101, 52;
    --success-900: 20, 83, 45;
    --success-950: 5, 46, 22;
    
    --warning-50: 254, 252, 232;
    --warning-100: 254, 249, 195;
    --warning-200: 254, 240, 138;
    --warning-300: 253, 224, 71;
    --warning-400: 250, 204, 21;
    --warning-500: 234, 179, 8;
    --warning-600: 202, 138, 4;
    --warning-700: 161, 98, 7;
    --warning-800: 133, 77, 14;
    --warning-900: 113, 63, 18;
    --warning-950: 66, 32, 6;
    
    --danger-50: 254, 242, 242;
    --danger-100: 254, 226, 226;
    --danger-200: 254, 202, 202;
    --danger-300: 252, 165, 165;
    --danger-400: 248, 113, 113;
    --danger-500: 239, 68, 68;
    --danger-600: 220, 38, 38;
    --danger-700: 185, 28, 28;
    --danger-800: 153, 27, 27;
    --danger-900: 127, 29, 29;
    --danger-950: 69, 10, 10;
    
    --info-50: 240, 249, 255;
    --info-100: 224, 242, 254;
    --info-200: 186, 230, 253;
    --info-300: 125, 211, 252;
    --info-400: 56, 189, 248;
    --info-500: 14, 165, 233;
    --info-600: 2, 132, 199;
    --info-700: 3, 105, 161;
    --info-800: 7, 89, 133;
    --info-900: 12, 74, 110;
    --info-950: 8, 47, 73;
}

/* CLASES AUXILIARES PARA USAR VARIABLES CSS CON RGBA */
.bg-gray-50 { background-color: rgba(var(--gray-50), 1) !important; }
.bg-gray-100 { background-color: rgba(var(--gray-100), 1) !important; }
.bg-gray-200 { background-color: rgba(var(--gray-200), 1) !important; }
.bg-gray-300 { background-color: rgba(var(--gray-300), 1) !important; }
.bg-gray-400 { background-color: rgba(var(--gray-400), 1) !important; }
.bg-gray-500 { background-color: rgba(var(--gray-500), 1) !important; }
.bg-gray-600 { background-color: rgba(var(--gray-600), 1) !important; }
.bg-gray-700 { background-color: rgba(var(--gray-700), 1) !important; }
.bg-gray-800 { background-color: rgba(var(--gray-800), 1) !important; }
.bg-gray-900 { background-color: rgba(var(--gray-900), 1) !important; }
.bg-gray-950 { background-color: rgba(var(--gray-950), 1) !important; }

.text-gray-50 { color: rgba(var(--gray-50), 1) !important; }
.text-gray-100 { color: rgba(var(--gray-100), 1) !important; }
.text-gray-200 { color: rgba(var(--gray-200), 1) !important; }
.text-gray-300 { color: rgba(var(--gray-300), 1) !important; }
.text-gray-400 { color: rgba(var(--gray-400), 1) !important; }
.text-gray-500 { color: rgba(var(--gray-500), 1) !important; }
.text-gray-600 { color: rgba(var(--gray-600), 1) !important; }
.text-gray-700 { color: rgba(var(--gray-700), 1) !important; }
.text-gray-800 { color: rgba(var(--gray-800), 1) !important; }
.text-gray-900 { color: rgba(var(--gray-900), 1) !important; }
.text-gray-950 { color: rgba(var(--gray-950), 1) !important; }

/* CLASES DARK MODE - LAS MÁS CRÍTICAS - COLORES OSCUROS */
.dark .bg-gray-50,
html.dark .bg-gray-50 { background-color: rgb(31, 41, 55) !important; }

.dark .bg-gray-100,
html.dark .bg-gray-100 { background-color: rgb(31, 41, 55) !important; }

.dark .bg-gray-200,
html.dark .bg-gray-200 { background-color: rgb(55, 65, 81) !important; }

.dark .bg-gray-300,
html.dark .bg-gray-300 { background-color: rgb(75, 85, 99) !important; }

.dark .bg-gray-400,
html.dark .bg-gray-400 { background-color: rgb(107, 114, 128) !important; }

.dark .bg-gray-500,
html.dark .bg-gray-500 { background-color: rgb(107, 114, 128) !important; }

.dark .bg-gray-600,
html.dark .bg-gray-600 { background-color: rgb(75, 85, 99) !important; }

.dark .bg-gray-700,
html.dark .bg-gray-700 { background-color: rgb(55, 65, 81) !important; }

.dark .bg-gray-800,
html.dark .bg-gray-800 { background-color: rgb(31, 41, 55) !important; }

.dark .bg-gray-900,
html.dark .bg-gray-900 { background-color: rgb(17, 24, 39) !important; }

.dark .bg-gray-950,
html.dark .bg-gray-950 { background-color: rgb(3, 7, 18) !important; }

/* CLASES DARK MODE - TEXTO - COLORES CLAROS */
.dark .text-gray-50,
html.dark .text-gray-50 { color: rgb(249, 250, 251) !important; }

.dark .text-gray-100,
html.dark .text-gray-100 { color: rgb(243, 244, 246) !important; }

.dark .text-gray-200,
html.dark .text-gray-200 { color: rgb(229, 231, 235) !important; }

.dark .text-gray-300,
html.dark .text-gray-300 { color: rgb(209, 213, 219) !important; }

.dark .text-gray-400,
html.dark .text-gray-400 { color: rgb(156, 163, 175) !important; }

.dark .text-gray-500,
html.dark .text-gray-500 { color: rgb(107, 114, 128) !important; }

.dark .text-gray-600,
html.dark .text-gray-600 { color: rgb(75, 85, 99) !important; }

.dark .text-gray-700,
html.dark .text-gray-700 { color: rgb(55, 65, 81) !important; }

.dark .text-gray-800,
html.dark .text-gray-800 { color: rgb(31, 41, 55) !important; }

.dark .text-gray-900,
html.dark .text-gray-900 { color: rgb(17, 24, 39) !important; }

.dark .text-gray-950,
html.dark .text-gray-950 { color: rgb(3, 7, 18) !important; }

/* CLASES PARA OTROS COLORES EN DARK MODE */
.dark .bg-primary-50,
html.dark .bg-primary-50 { background-color: rgba(var(--primary-50), 1) !important; }

.dark .bg-primary-100,
html.dark .bg-primary-100 { background-color: rgba(var(--primary-100), 1) !important; }

.dark .bg-primary-200,
html.dark .bg-primary-200 { background-color: rgba(var(--primary-200), 1) !important; }

.dark .bg-primary-300,
html.dark .bg-primary-300 { background-color: rgba(var(--primary-300), 1) !important; }

.dark .bg-primary-400,
html.dark .bg-primary-400 { background-color: rgba(var(--primary-400), 1) !important; }

.dark .bg-primary-500,
html.dark .bg-primary-500 { background-color: rgba(var(--primary-500), 1) !important; }

.dark .bg-primary-600,
html.dark .bg-primary-600 { background-color: rgba(var(--primary-600), 1) !important; }

.dark .bg-primary-700,
html.dark .bg-primary-700 { background-color: rgba(var(--primary-700), 1) !important; }

.dark .bg-primary-800,
html.dark .bg-primary-800 { background-color: rgba(var(--primary-800), 1) !important; }

.dark .bg-primary-900,
html.dark .bg-primary-900 { background-color: rgba(var(--primary-900), 1) !important; }

.dark .bg-primary-950,
html.dark .bg-primary-950 { background-color: rgba(var(--primary-950), 1) !important; }

/* OVERRIDE FINAL PARA BG-GRAY EN DARK MODE - AL FINAL PARA MÁXIMA PRIORIDAD */
html.dark body .bg-gray-50,
html.dark .bg-gray-50,
.dark .bg-gray-50,
body.dark .bg-gray-50,
[class*="dark"] .bg-gray-50,
html.dark [class~="bg-gray-50"]:not([class*="text"]) {
    background-color: rgb(31, 41, 55) !important;
}

html.dark body .bg-gray-100,
html.dark .bg-gray-100,
.dark .bg-gray-100,
body.dark .bg-gray-100,
[class*="dark"] .bg-gray-100,
html.dark [class~="bg-gray-100"]:not([class*="text"]) {
    background-color: rgb(31, 41, 55) !important;
}

html.dark body .bg-gray-200,
html.dark .bg-gray-200,
.dark .bg-gray-200,
body.dark .bg-gray-200,
[class*="dark"] .bg-gray-200,
html.dark [class~="bg-gray-200"]:not([class*="text"]) {
    background-color: rgb(55, 65, 81) !important;
}

html.dark body .bg-gray-300,
html.dark .bg-gray-300,
.dark .bg-gray-300,
body.dark .bg-gray-300,
[class*="dark"] .bg-gray-300,
html.dark [class~="bg-gray-300"]:not([class*="text"]) {
    background-color: rgb(75, 85, 99) !important;
}

/* NUCLEAR OPTION - SOBRESCRIBE TODO CON ATRIBUTOS */
html.dark [class*="bg-gray-50"],
html.dark [class*="bg-gray-100"] {
    background-color: rgb(31, 41, 55) !important;
}

html.dark [class*="bg-gray-200"] {
    background-color: rgb(55, 65, 81) !important;
}

html.dark [class*="bg-gray-300"] {
    background-color: rgb(75, 85, 99) !important;
}

/* OVERRIDE ESPECÍFICO PARA FILAS DE AGRUPACIÓN EN TABLAS FILAMENT */
html.dark .fi-ta-group-header,
html.dark .fi-ta-grouping-header,
html.dark tr[class*="fi-ta-group"],
html.dark tr[class*="group-header"],
html.dark .fi-table tr.bg-gray-50,
html.dark table tr.bg-gray-50,
html.dark .fi-ta-table tr.bg-gray-50 {
    background-color: rgb(31, 41, 55) !important;
}

html.dark .fi-ta-group-header .bg-gray-50,
html.dark .fi-ta-grouping-header .bg-gray-50 {
    background-color: rgb(31, 41, 55) !important;
}