/* lb-charts.css — lo que ApexCharts no sabe pintar con los tokens del tema.
 *
 * El globo, el título del globo y la leyenda se dibujan con estilos propios de la librería y se quedan
 * blancos en modo oscuro; hay que traerlos a los tokens a la fuerza. Va como hoja GLOBAL y no como CSS
 * aislado del componente porque estos nodos los crea la librería en el DOM, fuera del alcance del
 * atributo de aislamiento que Blazor sólo pone en el marcado que él renderiza. */

.lb-chart { width: 100%; }

/* Estado vacío: lo escribe el módulo JS cuando todo viene en cero, en vez de dejar que la librería pinte
   un marco vacío con ejes de mentira. */
.lb-chart-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    height: 100%;
    padding: 24px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
}

.apexcharts-tooltip {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-sm) !important;
}

.apexcharts-tooltip-title {
    background: var(--card-2) !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink-2) !important;
    font-weight: 600 !important;
}

/* En dona y pastel la librería pone el color de la rebanada como estilo EN LÍNEA sobre este grupo, y un
   estilo en línea le gana a cualquier regla: de ahí el !important. Sin esto, una rebanada oscura deja el
   texto negro sobre negro. (`fillSeriesColor:false` ya lo evita del lado del JS; esto es el cinturón,
   porque el color en línea vuelve a aparecer en algunas rutas de actualización.) */
.apexcharts-tooltip-series-group,
.apexcharts-tooltip-series-group.apexcharts-active {
    background: var(--card) !important;
    color: var(--ink) !important;
}

.apexcharts-tooltip-text,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-y-group {
    color: var(--ink) !important;
}

.apexcharts-xaxistooltip {
    background: var(--card) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
.apexcharts-xaxistooltip:before { border-bottom-color: var(--line) !important; }
.apexcharts-xaxistooltip:after  { border-bottom-color: var(--card) !important; }

.apexcharts-legend-text { color: var(--ink-2) !important; font-family: var(--font) !important; }

/* La librería mete un <title> en el SVG y el navegador enseña SU globo encima del nuestro. El módulo lo
   quita al montar y al actualizar; esto es el cinturón por si alguno se escapa. */
.apexcharts-canvas svg title { display: none; }