/* 
 * CSS de emergencia para dark mode en producción
 * Versión optimizada con especificidad máxima para override
 */

/* Variables CSS base - MÁXIMA PRIORIDAD */
html, body, :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;
}

/* SIDEBAR - MÁXIMA PRIORIDAD */
html.dark .fi-sidebar,
html.dark [data-sidebar],
html.dark .sidebar,
html.dark nav[role="navigation"],
html.dark aside {
    background-color: rgb(0, 0, 0) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(31, 41, 55) !important;
}

/* NAVIGATION ITEMS - SIDEBAR */
html.dark .fi-sidebar-nav,
html.dark .fi-sidebar-item,
html.dark .fi-sidebar-item,
html.dark .fi-sidebar-nav-item,
html.dark .sidebar-item,
html.dark nav a,
html.dark aside a {
    background-color: rgb(0, 0, 0) !important;
    color: rgb(209, 213, 219) !important;
    border: none !important;
}

html.dark .fi-sidebar-nav-item:hover,
html.dark .fi-sidebar-item:hover,
html.dark .sidebar-item:hover,
html.dark nav a:hover,
html.dark aside a:hover {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(249, 250, 251) !important;
}

html.dark .fi-sidebar-nav-item[aria-current="page"],
html.dark .fi-sidebar-nav-item.active,
html.dark .fi-sidebar-item.active,
html.dark .sidebar-item.active,
html.dark nav a.active,
html.dark aside a.active {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(249, 250, 251) !important;
}

/* TOPBAR/HEADER - MÁXIMA PRIORIDAD */
html.dark .fi-topbar,
html.dark .fi-header,
html.dark .topbar,
html.dark header,
html.dark [data-slot="header"],
html.dark .header {
    color: rgb(243, 244, 246) !important;
    border-bottom: 1px solid rgb(31, 41, 55) !important;
}

/* BRAND/LOGO */
html.dark .fi-brand,
html.dark .fi-logo,
html.dark .fi-sidebar-brand,
html.dark .brand,
html.dark .logo {
    color: rgb(249, 250, 251) !important;
    background-color: transparent !important;
}

/* MAIN CONTENT AREA */
html.dark .fi-main,
html.dark .fi-page,
html.dark .fi-body,
html.dark .fi-layout,
html.dark main,
html.dark .main-content {
    background-color: rgb(3, 7, 18) !important;
    color: rgb(243, 244, 246) !important;
}

/* TABLAS - HEADER */
html.dark .fi-ta-header,
html.dark .fi-table-header,
html.dark .table-header,
html.dark thead,
html.dark th,
html.dark table thead {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(229, 231, 235) !important;
    border-color: rgb(55, 65, 81) !important;
}

/* TABLAS - BODY */
html.dark .fi-ta-table,
html.dark .fi-table,
html.dark .table,
html.dark table,
html.dark tbody,
html.dark tr,
html.dark td {
    background-color: rgb(3, 7, 18) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(31, 41, 55) !important;
}

/* FILAS DE TABLA ALTERNADAS */
html.dark .fi-ta-table tbody tr:nth-child(odd),
html.dark table tbody tr:nth-child(odd),
html.dark tr:nth-child(odd) {
    background-color: rgb(17, 24, 39) !important;
}

html.dark .fi-ta-table tbody tr:nth-child(even),
html.dark table tbody tr:nth-child(even),
html.dark tr:nth-child(even) {
    background-color: rgb(3, 7, 18) !important;
}

/* HOVER EN FILAS */
html.dark .fi-ta-table tbody tr:hover,
html.dark table tbody tr:hover,
html.dark tr:hover {
    background-color: rgb(55, 65, 81) !important;
}

/* WIDGETS Y CARDS */
html.dark .fi-widget,
html.dark .fi-card,
html.dark .fi-stats-card,
html.dark .widget,
html.dark .card {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(31, 41, 55) !important;
}

/* FORMULARIOS */
html.dark .fi-input,
html.dark .fi-select,
html.dark .fi-textarea,
html.dark input,
html.dark select,
html.dark textarea {
    color: rgb(243, 244, 246) !important;
    border-color: rgb(55, 65, 81) !important;
}

html.dark .fi-input:focus,
html.dark .fi-select:focus,
html.dark .fi-textarea:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: rgb(75, 85, 99) !important;
    box-shadow: 0 0 0 1px rgb(75, 85, 99) !important;
}

/* BOTONES */
html.dark .fi-btn,
html.dark .fi-button,
html.dark button,
html.dark [role="button"] {
    color: rgb(229, 231, 235) !important;
    border-color: rgb(55, 65, 81) !important;
}

html.dark .fi-btn-primary,
html.dark .fi-button-primary,
html.dark .btn-primary {
    background-color: rgb(59, 130, 246) !important;
    color: white !important;
    border-color: rgb(59, 130, 246) !important;
}

/* TÍTULOS */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .fi-heading,
html.dark .heading {
    color: rgb(249, 250, 251) !important;
}

/* BREADCRUMBS */
html.dark .fi-breadcrumbs,
html.dark .breadcrumbs,
html.dark .breadcrumb {
    color: rgb(156, 163, 175) !important;
}

html.dark .fi-breadcrumb-item a,
html.dark .breadcrumb a {
    color: rgb(209, 213, 219) !important;
}

html.dark .fi-breadcrumb-item a:hover,
html.dark .breadcrumb a:hover {
    color: rgb(249, 250, 251) !important;
}

/* MODALES */
html.dark .fi-modal,
html.dark .modal,
html.dark [role="dialog"] {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(31, 41, 55) !important;
}

/* DROPDOWN */
html.dark .fi-dropdown,
html.dark .dropdown {
    color: rgb(243, 244, 246) !important;
    border-color: rgb(31, 41, 55) !important;
}

html.dark .fi-dropdown-item:hover,
html.dark .dropdown-item:hover {
    background-color: rgb(55, 65, 81) !important;
}

/* SEARCH/INPUT GLOBALES */
html.dark .fi-global-search,
html.dark .global-search {
    background-color: rgb(13 14 15 / 0%) !important;
    border-color: rgb(55, 65, 81) !important;
}

html.dark .fi-global-search input,
html.dark .global-search input {
    background-color: rgb(13 14 15 / 0%) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(55, 65, 81) !important;
}

html.dark .fi-global-search input::placeholder,
html.dark .global-search input::placeholder {
    color: rgb(156, 163, 175) !important;
}

/* OVERRIDE ESPECÍFICO PARA CLASES DE TAILWIND */
html.dark .bg-white,
html.dark .bg-gray-50 {
    background-color: rgb(3, 7, 18) !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* NOTIFICACIONES */
html.dark .fi-notification,
html.dark .notification {
    background-color: rgb(31, 41, 55) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(55, 65, 81) !important;
}

/* PAGINACIÓN */
html.dark .fi-pagination,
html.dark .pagination {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(243, 244, 246) !important;
}

html.dark .fi-pagination-item,
html.dark .pagination-item {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(55, 65, 81) !important;
}

html.dark .fi-pagination-item:hover,
html.dark .pagination-item:hover {
    background-color: rgb(55, 65, 81) !important;
}

/* STATS OVERVIEW */
html.dark .fi-stats-overview-card {
    background-color: rgb(17, 24, 39) !important;
    border-color: rgb(31, 41, 55) !important;
}

html.dark .fi-stats-overview-card-value {
    color: rgb(249, 250, 251) !important;
}

html.dark .fi-stats-overview-card-description {
    color: rgb(156, 163, 175) !important;
}

/* SECTIONS */
html.dark .fi-section,
html.dark .section {
    background-color: rgb(17, 24, 39) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(31, 41, 55) !important;
}

/* TABS */
html.dark .fi-tabs,
html.dark .tabs {
    background-color: rgb(17, 24, 39) !important;
}

html.dark .fi-tab,
html.dark .tab {
    color: rgb(156, 163, 175) !important;
}

html.dark .fi-tab.active,
html.dark .tab.active {
    color: rgb(249, 250, 251) !important;
    border-bottom-color: rgb(59, 130, 246) !important;
}

/* ICONS */
html.dark .fi-icon,
html.dark .icon,
html.dark svg {
    color: currentColor !important;
}

/* ASEGURAR MÁXIMA ESPECIFICIDAD */
html.dark body,
html.dark body * {
    color-scheme: dark !important;
}

/* OVERRIDE PARA ELEMENTOS QUE SIGUEN EN MODO CLARO */
/* ESPECIFICIDAD MÁXIMA CON html body */

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

/* OVERRIDE ESPECÍFICO PARA TABLAS Y AGRUPACIONES */
html body.dark .fi-ta-group-header,
html body.dark .fi-ta-grouping-header,
html body.dark table tr.bg-gray-50,
html body.dark table tr[class*="bg-gray"],
html body.dark table thead,
html.dark body .fi-ta-group-header,
html.dark body .fi-ta-grouping-header,
html.dark body table tr.bg-gray-50,
html.dark body table tr[class*="bg-gray"],
html.dark body table thead,
html.dark .fi-ta-group-header,
html.dark .fi-ta-grouping-header,
html.dark table tr.bg-gray-50,
html.dark table tr[class*="bg-gray"],
html.dark table thead {
    background-color: rgb(31, 41, 55) !important;
    color: rgb(229, 231, 235) !important;
}

html.dark [class*="text-white"] {
    color: rgb(249, 250, 251) !important;
}

html.dark [class*="text-black"] {
    color: rgb(243, 244, 246) !important;
}