/* 
 * Safari SVG Text Fill Fix + Dark/Light Theme Compatibility
 * ApexCharts usa variables CSS para los labels que Safari a veces no renderiza.
 */

/* === TEMA CLARO (por defecto) === */
.apexcharts-xaxis text, 
.apexcharts-yaxis text, 
.apexcharts-legend-text,
.apexcharts-text,
.apex-charts text {
    fill: #495057 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
}

.apexcharts-datalabel,
.apexcharts-datalabel-label,
.apexcharts-datalabel-value,
.apexcharts-datalabels text {
    fill: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 2px;
    stroke-linejoin: round;
}

/* Tooltips - Tema Claro */
.apexcharts-tooltip {
    background: #ffffff !important;
    color: #343a40 !important;
    border: 1px solid #e9ecef !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}

.apexcharts-tooltip-title {
    background: #f8f9fa !important;
    color: #343a40 !important;
    border-bottom: 1px solid #e9ecef !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
}

.apexcharts-tooltip-text {
    color: #495057 !important;
}

.apexcharts-tooltip-series-group {
    padding: 4px 12px !important;
}

/* Leyendas */
.apexcharts-legend-text {
    color: #495057 !important;
    font-size: 13px !important;
}

/* === TEMA OSCURO === */
[data-bs-theme="dark"] .apexcharts-xaxis text, 
[data-bs-theme="dark"] .apexcharts-yaxis text, 
[data-bs-theme="dark"] .apexcharts-legend-text,
[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apex-charts text {
    fill: #adb5bd !important;
}

[data-bs-theme="dark"] .apexcharts-datalabel,
[data-bs-theme="dark"] .apexcharts-datalabel-label,
[data-bs-theme="dark"] .apexcharts-datalabel-value,
[data-bs-theme="dark"] .apexcharts-datalabels text {
    fill: #ffffff !important;
    stroke: rgba(0,0,0,0.7);
    stroke-width: 2.5px;
}

[data-bs-theme="dark"] .apexcharts-tooltip {
    background: #2a2f34 !important;
    color: #e9ecef !important;
    border: 1px solid #495057 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-title {
    background: #343a40 !important;
    color: #f8f9fa !important;
    border-bottom: 1px solid #495057 !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip-text {
    color: #dee2e6 !important;
}

[data-bs-theme="dark"] .apexcharts-legend-text {
    color: #adb5bd !important;
}

/* Gridlines */
.apexcharts-gridline {
    stroke: #e9ecef !important;
}

[data-bs-theme="dark"] .apexcharts-gridline {
    stroke: #3a3f44 !important;
}

/* Donut center label */
.apexcharts-pie-label {
    fill: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
