/* 1. Variables del tema oscuro */
[data-theme='dark'] {
    /* Paleta monocromática */
    --primary-50: #374151;
    --primary-100: #4b5563;
    --primary-300: #9ca3af;
    --primary-500: #e5e7eb;
    --primary-600: #f9fafb;
    --primary-700: #d1d5db;

    /* Escala de grises */
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;

    /* Colores semánticos */
    --red-500: #f9fafb;
    --red-600: #e5e7eb;
    --green-500: #6b7280;
    --orange-500: #d1d5db;
}

/* 2. Estilos base */
[data-theme='dark'] {
    /* Fondo y texto base */
    body {
        background-color: var(--gray-50);
        color: var(--gray-600);
    }

    /* Tipografía */
    h1, h2, h3, h4, .header-main h1, .subtitle, .user-name, .user-role, .dashboard-section h2 {
        color: var(--gray-900);
    }
}

/* 3. Contenedores principales */
[data-theme='dark'] {
    /* Contenedores base */
    .container, .header, .main-content, .modal-footer, .kapis_conteniner,
    .header, .nav_module {
        background: var(--gray-50);
        border-color: var(--gray-200);
    }

    /* Cards y contenedores secundarios */
    .card, .modal-content, .kpi-card, .area-card, #risk-chart,
    .kpi-table-container, .kpi_item, .action-card, .map-container {
        background-color: var(--gray-100);
        border: 1px solid var(--gray-300);
        box-shadow: none;
    }

    /* Efectos hover */
    .card:hover, .kpi-card:hover, .kpi_item:hover {
        background-color: var(--gray-200);
        border-color: var(--gray-400);
    }
}

/* 4. Componentes específicos */
[data-theme='dark'] {
    /* Botones */
    .btn-primary {
        background: var(--primary-600);
        color: var(--gray-50);
        &:hover { background: var(--primary-700); }
    }

    .btn-ghost {
        color: var(--gray-600);
        border-color: var(--gray-400);
        &:hover {
            background-color: var(--gray-200);
            color: var(--gray-800);
        }
    }

    /* Tablas */
    .table-title, .data-table .table-body .cell {
        color: var(--gray-700) !important;
    }
    .header-cell { color: var(--gray-500); }
    .footer-cell { color: var(--gray-600); }
    .summary-value { color: var(--primary-500); }
    
    .table-row {
        &:hover { background-color: rgba(51, 65, 85, 0.7) !important; }
        &.high-risk-row:hover {
            background: linear-gradient(90deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05)) !important;
        }
    }

    /* Mapa de riesgo */
    #risk-map svg {
        background-color: var(--gray-50);
        text { fill: var(--gray-700); }
    }

    .map-area {
        stroke: var(--gray-50);
        stroke-width: 0.5px;
        &.risk-low { fill: #4b5563; }
        &.risk-medium { fill: #6b7280; }
        &.risk-high { fill: #9ca3af; }
        &.risk-critical { fill: #e5e7eb; }
    }
}

/* 5. Elementos de riesgo y acciones */
[data-theme='dark'] {
    .risk-critico, .risk-alto {
        color: var(--red-500);
    }

    .action-list li {
        background-color: var(--gray-200);
        border-left-color: var(--red-500);
        &:hover { background-color: var(--gray-300) !important; }
    }

    .list-item-ok {
        border-left-color: var(--green-500) !important;
        background-color: var(--gray-100) !important;
    }

    /* Elementos de puntuación */
    .center-score {
        background-color: var(--gray-300);
        color: var(--gray-800);
    }

    .list-item-ok .center-score {
        background-color: var(--gray-400);
        color: var(--gray-900);
    }
}

/* 6. Gráficos y visualizaciones */
[data-theme='dark'] {
    .bar {
        background-color: var(--red-500);
        &-wrapper { background-color: var(--gray-300); }
        &-value, &-label { color: var(--gray-600); }
    }
}

/* 7. Utilidades y ajustes específicos */
[data-theme='dark'] {
    .slider { background-color: var(--gray-300); }
    .slider:before { background-color: var(--gray-800); }

    .main-content.ergonomic-pattern {
        background-color: var(--gray-50);
        background-image: none;
    }

    .main-content::before,
    .main-content::after {
        opacity: 0.1;
    }
}