@caribeng/ui 22.1.0 → 22.2.0

package/fesm2022/caribeng-ui-chart.mjs

@@ -1,367 +1,2662 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, Injectable, input, ChangeDetectionStrategy, Component, Directive, forwardRef, booleanAttribute, numberAttribute, output, contentChildren, viewChild, inject, ElementRef, computed, DestroyRef, afterNextRender, effect, untracked, ViewEncapsulation } from '@angular/core';
+import { injectCbTranslation } from '@caribeng/ui';
 
-const DEFAULT_PALETTE = [
-    'var(--cb-color-primary-500, #0077b6)',
-    'var(--cb-color-secondary-500, #f59e0b)',
-    'var(--cb-color-success-500, #10b981)',
-    'var(--cb-color-danger-500, #ef4444)',
-    'var(--cb-color-info-500, #0ea5e9)',
+// Tipos públicos del gráfico y modelo interno de la escena que dibuja cada renderer.
+// --- Modelo interno -----------------------------------------------------------------
+const PALETTE = [
+    'var(--cb-color-primary-500)',
+    'var(--cb-color-warning-500)',
+    'var(--cb-color-success-500)',
+    'var(--cb-color-danger-500)',
+    'var(--cb-color-info-500)',
+    'var(--cb-color-help-500)',
 ];
+const paletteColor = (i) => PALETTE[i % PALETTE.length];
+/** Ancho lógico del lienzo; el SVG escala al ancho del contenedor. */
+const W = 520;
+const emptyScene = () => ({ shapes: [], hits: [], items: [], legend: [], table: { head: null, rows: [] } });
+
+/** Estado compartido por las gráficas de un `<cb-chart-group>`. */
+class CbChartGroupState {
+    constructor() {
+        /** Valor de X activo (cursor) en cualquiera de las gráficas. */
+        this.key = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+        /** Ventana visible común del eje X (zoom y desplazamiento). */
+        this.window = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartGroupState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartGroupState }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartGroupState, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Agrupa gráficas del modo composable que comparten el eje X: el cursor, el
+ * tooltip y el zoom se sincronizan (p. ej. precio, volumen y spread).
+ *
+ * @example
+ * ```html
+ * <cb-chart-group ariaLabel="PRIM/USD">
+ *   <cb-chart [data]="velas" zoom [height]="260"><cb-chart-candlestick x="ts" /></cb-chart>
+ *   <cb-chart [data]="velas" zoom [height]="100"><cb-chart-bar x="ts" y="volumen" /></cb-chart>
+ * </cb-chart-group>
+ * ```
+ */
+class CbChartGroup {
+    constructor() {
+        /** Nombre accesible del conjunto. */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbChartGroup, isStandalone: true, selector: "cb-chart-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "cb-chart-group" }, providers: [CbChartGroupState], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:grid;gap:var(--cb-space-2, .5rem);width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-chart-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CbChartGroupState], host: {
+                        class: 'cb-chart-group',
+                        role: 'group',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                    }, template: `<ng-content />`, styles: [":host{display:grid;gap:var(--cb-space-2, .5rem);width:100%}\n"] }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Base de las series del modo composable (`<cb-chart>` con hijos). Cada serie lee
+ * de `data` (la del gráfico o la suya) los campos que indique.
+ */
+class CbChartSeries {
+    constructor() {
+        /** Nombre en la leyenda, el tooltip y la tabla accesible. */
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Campo con el valor del eje X (categoría, número o fecha). */
+        this.x = input('x', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+        this.color = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Eje Y de la serie. */
+        this.axis = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+        /** Datos propios; si se omite, usa los del gráfico. */
+        this.data = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartSeries, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartSeries, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartSeries, decorators: [{
+            type: Directive
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+/** Barras. Las series con el mismo `stack` se apilan. */
+class CbChartBar extends CbChartSeries {
+    constructor() {
+        super(...arguments);
+        this.kind = 'bar';
+        /** Campo del valor. */
+        this.y = input('y', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+        /** Grupo de apilado: las barras con el mismo valor se apilan. */
+        this.stack = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartBar, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartBar, isStandalone: true, selector: "cb-chart-bar", inputs: { y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartBar) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartBar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cb-chart-bar',
+                    providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartBar) }],
+                }]
+        }], propDecorators: { y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }] } });
+/** Línea. */
+class CbChartLine extends CbChartSeries {
+    constructor() {
+        super(...arguments);
+        this.kind = 'line';
+        this.y = input('y', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+        this.curve = input('linear', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+        /** Trazo discontinuo (p. ej. para una proyección o una media). */
+        this.dashed = input(false, { ...(ngDevMode ? { debugName: "dashed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Dibuja un punto en cada dato. */
+        this.points = input(true, { ...(ngDevMode ? { debugName: "points" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartLine, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartLine, isStandalone: true, selector: "cb-chart-line", inputs: { y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, dashed: { classPropertyName: "dashed", publicName: "dashed", isSignal: true, isRequired: false, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartLine) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartLine, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cb-chart-line',
+                    providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartLine) }],
+                }]
+        }], propDecorators: { y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], dashed: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashed", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
+/** Área: una línea con relleno hasta el 0 (o hasta la serie de debajo si se apila). */
+class CbChartArea extends CbChartSeries {
+    constructor() {
+        super(...arguments);
+        this.kind = 'area';
+        this.y = input('y', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+        this.curve = input('linear', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+        /** Grupo de apilado: las áreas con el mismo valor se apilan. */
+        this.stack = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartArea, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartArea, isStandalone: true, selector: "cb-chart-area", inputs: { y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartArea) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cb-chart-area',
+                    providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartArea) }],
+                }]
+        }], propDecorators: { y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }] } });
+/** Dispersión: un punto por registro. */
+class CbChartScatter extends CbChartSeries {
+    constructor() {
+        super(...arguments);
+        this.kind = 'scatter';
+        this.y = input('y', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+        /** Radio de los puntos. */
+        this.size = input(5, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartScatter, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartScatter, isStandalone: true, selector: "cb-chart-scatter", inputs: { y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartScatter) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartScatter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cb-chart-scatter',
+                    providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartScatter) }],
+                }]
+        }], propDecorators: { y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+/** Banda entre un mínimo y un máximo (rango, intervalo de confianza…). */
+class CbChartRangeArea extends CbChartSeries {
+    constructor() {
+        super(...arguments);
+        this.kind = 'rangeArea';
+        this.low = input('low', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "low" }] : /* istanbul ignore next */ []));
+        this.high = input('high', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
+        this.curve = input('linear', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartRangeArea, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartRangeArea, isStandalone: true, selector: "cb-chart-range-area", inputs: { low: { classPropertyName: "low", publicName: "low", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "high", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartRangeArea) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartRangeArea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cb-chart-range-area',
+                    providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartRangeArea) }],
+                }]
+        }], propDecorators: { low: [{ type: i0.Input, args: [{ isSignal: true, alias: "low", required: false }] }], high: [{ type: i0.Input, args: [{ isSignal: true, alias: "high", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }] } });
+/** Velas japonesas u OHLC (apertura, máximo, mínimo y cierre). */
+class CbChartCandlestick extends CbChartSeries {
+    constructor() {
+        super(...arguments);
+        this.kind = 'candlestick';
+        this.open = input('open', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.high = input('high', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
+        this.low = input('low', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "low" }] : /* istanbul ignore next */ []));
+        this.close = input('close', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "close" }] : /* istanbul ignore next */ []));
+        /** `candle`: cuerpo relleno; `ohlc`: barra con marcas de apertura y cierre. */
+        this.variant = input('candle', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /** Color cuando cierra por encima de la apertura. */
+        this.upColor = input('var(--cb-color-success-500)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upColor" }] : /* istanbul ignore next */ []));
+        /** Color cuando cierra por debajo. */
+        this.downColor = input('var(--cb-color-danger-500)', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "downColor" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartCandlestick, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartCandlestick, isStandalone: true, selector: "cb-chart-candlestick", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "high", isSignal: true, isRequired: false, transformFunction: null }, low: { classPropertyName: "low", publicName: "low", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, upColor: { classPropertyName: "upColor", publicName: "upColor", isSignal: true, isRequired: false, transformFunction: null }, downColor: { classPropertyName: "downColor", publicName: "downColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartCandlestick) }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartCandlestick, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cb-chart-candlestick',
+                    providers: [{ provide: CbChartSeries, useExisting: forwardRef(() => CbChartCandlestick) }],
+                }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], high: [{ type: i0.Input, args: [{ isSignal: true, alias: "high", required: false }] }], low: [{ type: i0.Input, args: [{ isSignal: true, alias: "low", required: false }] }], close: [{ type: i0.Input, args: [{ isSignal: true, alias: "close", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], upColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "upColor", required: false }] }], downColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "downColor", required: false }] }] } });
+/** Configuración de un eje: posición, tipo, rango, formato y título. */
+class CbChartAxis {
+    constructor() {
+        /** `bottom` es el eje X; `left` y `right`, los ejes Y. */
+        this.position = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /** Solo para el eje X. */
+        this.type = input('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.min = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Título del eje. */
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Formato de las marcas (por defecto, el `valueFormat` del gráfico en los ejes Y). */
+        this.format = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /** Líneas de rejilla en las marcas (por defecto, solo el eje Y principal). */
+        this.grid = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartAxis, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartAxis, isStandalone: true, selector: "cb-chart-axis", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartAxis, decorators: [{
+            type: Directive,
+            args: [{ selector: 'cb-chart-axis' }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }] } });
+/** Línea de referencia (meta, umbral, media…) en un valor de un eje. */
+class CbChartReferenceLine {
+    constructor() {
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** `left` / `right`: línea horizontal en ese eje Y; `x`: línea vertical. */
+        this.axis = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.color = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartReferenceLine, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartReferenceLine, isStandalone: true, selector: "cb-chart-reference-line", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartReferenceLine, decorators: [{
+            type: Directive,
+            args: [{ selector: 'cb-chart-reference-line' }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+/** Franja de referencia entre dos valores de un eje (rango objetivo, horario…). */
+class CbChartReferenceBand {
+    constructor() {
+        this.from = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+        this.to = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "to" }] : /* istanbul ignore next */ []));
+        this.axis = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+        this.label = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.color = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartReferenceBand, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartReferenceBand, isStandalone: true, selector: "cb-chart-reference-band", inputs: { from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: true, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: true, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartReferenceBand, decorators: [{
+            type: Directive,
+            args: [{ selector: 'cb-chart-reference-band' }]
+        }], propDecorators: { from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: true }] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: true }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+/** Anotación: marca un punto (x, y) con una etiqueta, p. ej. "Máximo de la sesión". */
+class CbChartAnnotation {
+    constructor() {
+        /** Valor de X (número, fecha o categoría). */
+        this.x = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []));
+        /** Valor en el eje Y. */
+        this.y = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []));
+        this.axis = input('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.color = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartAnnotation, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbChartAnnotation, isStandalone: true, selector: "cb-chart-annotation", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChartAnnotation, decorators: [{
+            type: Directive,
+            args: [{ selector: 'cb-chart-annotation' }]
+        }], propDecorators: { x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+/**
+ * Calcula una escala legible que contiene `[min, max]`, con unas `count`
+ * divisiones de tamaño 1, 2, 2.5 o 5 × 10ⁿ. Siempre incluye el 0.
+ */
+function niceScale(min, max, count = 4) {
+    let lo = Math.min(0, min);
+    let hi = Math.max(0, max);
+    if (lo === hi)
+        hi = lo + 1;
+    const rough = (hi - lo) / Math.max(1, count);
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const residual = rough / magnitude;
+    const nice = residual > 5 ? 10 : residual > 2.5 ? 5 : residual > 2 ? 2.5 : residual > 1 ? 2 : 1;
+    const step = nice * magnitude;
+    lo = Math.floor(lo / step) * step;
+    hi = Math.ceil(hi / step) * step;
+    const ticks = [];
+    for (let v = lo; v <= hi + step / 2; v += step)
+        ticks.push(round(v));
+    return { min: round(lo), max: round(hi), step, ticks };
+}
+/** Elimina el ruido de coma flotante (0.30000000000000004 → 0.3). */
+function round(value) {
+    return Math.round(value * 1e9) / 1e9;
+}
+/** Punto de una circunferencia; el ángulo 0 está arriba y crece en sentido horario. */
+function polar(cx, cy, r, angle) {
+    const rad = ((angle - 90) * Math.PI) / 180;
+    return [round(cx + r * Math.cos(rad)), round(cy + r * Math.sin(rad))];
+}
+/**
+ * Trazado SVG de un sector (torta, `inner = 0`) o de un anillo (dona) entre dos
+ * ángulos en grados. Un sector completo (360°) se dibuja como dos mitades.
+ */
+function arcPath(cx, cy, outer, inner, start, end) {
+    const sweep = Math.min(359.999, end - start);
+    if (sweep <= 0)
+        return '';
+    const stop = start + sweep;
+    const large = sweep > 180 ? 1 : 0;
+    const [x1, y1] = polar(cx, cy, outer, start);
+    const [x2, y2] = polar(cx, cy, outer, stop);
+    if (inner <= 0) {
+        return `M ${cx} ${cy} L ${x1} ${y1} A ${outer} ${outer} 0 ${large} 1 ${x2} ${y2} Z`;
+    }
+    const [x3, y3] = polar(cx, cy, inner, stop);
+    const [x4, y4] = polar(cx, cy, inner, start);
+    return `M ${x1} ${y1} A ${outer} ${outer} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${inner} ${inner} 0 ${large} 0 ${x4} ${y4} Z`;
+}
+/** Trazado de una polilínea (`closed` la cierra, para polígonos). */
+function polyline(points, closed = false) {
+    if (!points.length)
+        return '';
+    return points.map((p, i) => `${i ? 'L' : 'M'} ${p.x} ${p.y}`).join(' ') + (closed ? ' Z' : '');
+}
+/**
+ * Reparte un rectángulo en celdas de área proporcional a cada valor, lo más
+ * cuadradas posible (algoritmo "squarified" de Bruls, Huizing y van Wijk).
+ * Devuelve las celdas en el mismo orden que `values`; los valores ≤ 0 quedan vacíos.
+ */
+function squarify(values, rect) {
+    const result = values.map(() => null);
+    const total = values.reduce((sum, v) => sum + Math.max(0, v), 0);
+    if (total <= 0 || rect.w <= 0 || rect.h <= 0)
+        return result;
+    const scale = (rect.w * rect.h) / total;
+    const order = values
+        .map((v, i) => ({ i, area: Math.max(0, v) * scale }))
+        .filter((n) => n.area > 0)
+        .sort((a, b) => b.area - a.area);
+    let free = { ...rect };
+    let row = [];
+    const worst = (r, side) => {
+        const sum = r.reduce((s, n) => s + n.area, 0);
+        const max = Math.max(...r.map((n) => n.area));
+        const min = Math.min(...r.map((n) => n.area));
+        return Math.max((side * side * max) / (sum * sum), (sum * sum) / (side * side * min));
+    };
+    const layout = (r) => {
+        const sum = r.reduce((s, n) => s + n.area, 0);
+        const horizontal = free.w >= free.h;
+        const thickness = sum / (horizontal ? free.h : free.w);
+        let offset = 0;
+        for (const n of r) {
+            const length = n.area / thickness;
+            result[n.i] = horizontal
+                ? { x: round(free.x), y: round(free.y + offset), w: round(thickness), h: round(length) }
+                : { x: round(free.x + offset), y: round(free.y), w: round(length), h: round(thickness) };
+            offset += length;
+        }
+        free = horizontal
+            ? { x: free.x + thickness, y: free.y, w: free.w - thickness, h: free.h }
+            : { x: free.x, y: free.y + thickness, w: free.w, h: free.h - thickness };
+    };
+    for (const node of order) {
+        const side = Math.min(free.w, free.h);
+        if (!row.length || worst([...row, node], side) <= worst(row, side)) {
+            row.push(node);
+        }
+        else {
+            layout(row);
+            row = [node];
+        }
+    }
+    if (row.length)
+        layout(row);
+    return result;
+}
+
+/**
+ * Marco de un gráfico cartesiano: área de dibujo, posiciones, rejilla, ejes y
+ * franjas por categoría que reciben el ratón.
+ */
+function frame(ctx, scale, horizontal) {
+    const pad = ctx.sparkline
+        ? { t: 6, r: 6, b: 6, l: 6 }
+        : horizontal
+            ? { t: 12, r: 20, b: 28, l: 96 }
+            : { t: 16, r: 16, b: 28, l: 60 };
+    const h = ctx.height;
+    const plot = {
+        left: pad.l,
+        right: ctx.width - pad.r,
+        top: pad.t,
+        bottom: h - pad.b,
+        width: ctx.width - pad.l - pad.r,
+        height: h - pad.t - pad.b,
+    };
+    const labels = ctx.data.labels;
+    const band = (horizontal ? plot.height : plot.width) / Math.max(1, labels.length);
+    const valuePos = (v) => {
+        const ratio = (v - scale.min) / (scale.max - scale.min || 1);
+        return round(horizontal ? plot.left + ratio * plot.width : plot.bottom - ratio * plot.height);
+    };
+    const bandCenter = (i) => round((horizontal ? plot.top : plot.left) + band * (i + 0.5));
+    const shapes = [];
+    if (!ctx.sparkline) {
+        for (const value of scale.ticks) {
+            const pos = valuePos(value);
+            const cls = value === 0 ? 'cb-chart__grid cb-chart__grid--zero' : 'cb-chart__grid';
+            const text = ctx.format(value);
+            if (horizontal) {
+                shapes.push({ k: 'line', cls, x1: pos, y1: plot.top, x2: pos, y2: plot.bottom });
+                shapes.push({ k: 'text', cls: 'cb-chart__axis', x: pos, y: h - 8, text, anchor: 'middle' });
+            }
+            else {
+                shapes.push({ k: 'line', cls, x1: plot.left, y1: pos, x2: plot.right, y2: pos });
+                shapes.push({ k: 'text', cls: 'cb-chart__axis', x: plot.left - 8, y: pos, text, anchor: 'end', baseline: 'central' });
+            }
+        }
+        // Con muchas categorías se muestran solo algunas etiquetas para que no se pisen.
+        const every = horizontal ? 1 : Math.ceil(labels.length / 10);
+        labels.forEach((text, index) => {
+            if (index % every)
+                return;
+            const pos = bandCenter(index);
+            shapes.push(horizontal
+                ? { k: 'text', cls: 'cb-chart__axis', x: plot.left - 8, y: pos, text, anchor: 'end', baseline: 'central' }
+                : { k: 'text', cls: 'cb-chart__axis', x: pos, y: h - 8, text, anchor: 'middle' });
+        });
+    }
+    const hits = labels.map((_, index) => horizontal
+        ? { k: 'rect', item: index, x: plot.left, y: round(plot.top + band * index), w: plot.width, h: round(band) }
+        : { k: 'rect', item: index, x: round(plot.left + band * index), y: plot.top, w: round(band), h: plot.height });
+    return { plot, band, valuePos, bandCenter, shapes, hits };
+}
+/** Barras (verticales u horizontales), líneas, áreas y combinados. */
+function renderCartesian(ctx) {
+    const { type, data, stacked } = ctx;
+    const horizontal = type === 'horizontalBar';
+    const n = data.labels.length;
+    const series = data.datasets
+        .map((ds, index) => ({
+        index,
+        label: ds.label,
+        data: ds.data,
+        color: ds.color ?? paletteColor(index),
+        asLine: type === 'line' || type === 'area' || (type === 'bar' && ds.type === 'line'),
+    }))
+        .filter((s) => !ctx.hidden.has(s.index));
+    const barSeries = type === 'bar' || type === 'horizontalBar' ? series.filter((s) => !s.asLine) : [];
+    const lineSeries = series.filter((s) => s.asLine);
+    // Series que se apilan (barras, o áreas en `area`).
+    const stackSeries = !stacked ? [] : type === 'area' ? lineSeries : barSeries;
+    const values = [];
+    const stacking = new Set(stackSeries);
+    for (const s of series)
+        if (!stacking.has(s))
+            values.push(...s.data.slice(0, n));
+    for (let i = 0; i < n; i++) {
+        let pos = 0;
+        let neg = 0;
+        for (const s of stacking) {
+            const v = s.data[i] ?? 0;
+            if (v >= 0)
+                pos += v;
+            else
+                neg += v;
+        }
+        values.push(pos, neg);
+    }
+    const scale = niceScale(Math.min(0, ...values), Math.max(0, ...values), ctx.sparkline ? 2 : 4);
+    const f = frame(ctx, scale, horizontal);
+    const { plot, band, valuePos, bandCenter } = f;
+    // --- Barras ---
+    const bars = [];
+    if (barSeries.length) {
+        const groupSize = stacked ? Math.min(48, band * 0.6) : Math.min(band * 0.75, 36 * barSeries.length);
+        const slot = stacked ? groupSize : groupSize / barSeries.length;
+        const zero = valuePos(0);
+        data.labels.forEach((_, i) => {
+            const start = bandCenter(i) - groupSize / 2;
+            let pos = 0;
+            let neg = 0;
+            barSeries.forEach((s, si) => {
+                const v = s.data[i] ?? 0;
+                let from = 0;
+                if (stacked) {
+                    from = v >= 0 ? pos : neg;
+                    if (v >= 0)
+                        pos += v;
+                    else
+                        neg += v;
+                }
+                const a = stacked ? valuePos(from) : zero;
+                const b = valuePos(from + v);
+                const offset = round(start + (stacked ? 0 : slot * si) + 1);
+                const thickness = round(Math.max(2, slot - 2));
+                const lo = Math.min(a, b);
+                const length = round(Math.max(1, Math.abs(b - a)));
+                bars.push(horizontal
+                    ? { category: i, x: lo, y: offset, w: length, h: thickness, color: s.color, horizontal }
+                    : { category: i, x: offset, y: lo, w: thickness, h: length, color: s.color, horizontal });
+            });
+        });
+    }
+    // --- Líneas y áreas (acumuladas si se apilan) ---
+    const stackLines = type === 'area' && stacked;
+    const totals = data.labels.map(() => 0);
+    const linePoints = lineSeries.map((s) => {
+        const base = [...totals];
+        const points = data.labels.map((_, i) => {
+            const v = (s.data[i] ?? 0) + (stackLines ? totals[i] : 0);
+            if (stackLines)
+                totals[i] = v;
+            return { x: bandCenter(i), y: valuePos(v) };
+        });
+        const floor = base.map((b, i) => ({ x: bandCenter(i), y: valuePos(stackLines ? b : 0) }));
+        return { series: s, points, floor };
+    });
+    const shapes = [...f.shapes];
+    if (type === 'area') {
+        for (const { series: s, points, floor } of linePoints) {
+            const d = [polyline(points), ...[...floor].reverse().map((p) => `L ${p.x} ${p.y}`), 'Z'].join(' ');
+            shapes.push({ k: 'path', cls: 'cb-chart__area', d, fill: s.color });
+        }
+    }
+    for (const bar of bars) {
+        shapes.push({
+            k: 'rect',
+            cls: bar.horizontal ? 'cb-chart__bar cb-chart__bar--horizontal' : 'cb-chart__bar',
+            item: bar.category,
+            x: bar.x,
+            y: bar.y,
+            w: bar.w,
+            h: bar.h,
+            rx: ctx.sparkline ? 1 : 3,
+            fill: bar.color,
+        });
+    }
+    // La guía vertical se dibuja aparte (va debajo de las líneas): ver ChartItem.cursor.
+    const lineShapes = [];
+    for (const { series: s, points } of linePoints) {
+        lineShapes.push({ k: 'path', cls: 'cb-chart__line', d: polyline(points), stroke: s.color, pathLength: 1 });
+        points.forEach((pt, i) => lineShapes.push({ k: 'circle', cls: 'cb-chart__point', item: i, cx: pt.x, cy: pt.y, r: ctx.sparkline ? 0 : 3, rActive: 5, fill: s.color }));
+    }
+    // --- Elementos navegables: una categoría con el valor de cada serie ---
+    const items = data.labels.map((label, i) => {
+        const rows = series.map((s) => ({ label: s.label, value: ctx.format(s.data[i] ?? 0), color: s.color }));
+        const tops = [
+            ...bars.filter((b) => b.category === i).map((b) => (horizontal ? b.x + b.w : b.y)),
+            ...linePoints.map((l) => (horizontal ? 0 : (l.points[i]?.y ?? plot.top))),
+        ];
+        return horizontal
+            ? { index: i, label, title: label, rows, x: Math.max(plot.left, ...tops), y: bandCenter(i) }
+            : {
+                index: i,
+                label,
+                title: label,
+                rows,
+                x: bandCenter(i),
+                y: Math.min(plot.bottom, ...tops),
+                cursor: { x: bandCenter(i), y1: plot.top, y2: plot.bottom },
+            };
+    });
+    return {
+        shapes,
+        front: lineShapes,
+        hits: f.hits,
+        items,
+        legend: data.datasets.map((ds, index) => ({ index, label: ds.label, color: ds.color ?? paletteColor(index) })),
+        table: seriesTable(ctx),
+    };
+}
+/** Cascada: variaciones que suben o bajan desde el acumulado anterior, con subtotales. */
+function renderWaterfall(ctx) {
+    const ds = ctx.data.datasets[0];
+    const labels = ctx.data.labels;
+    const sums = new Set(ds?.sums ?? []);
+    const up = 'var(--cb-color-success-500)';
+    const down = 'var(--cb-color-danger-500)';
+    const total = ds?.color ?? 'var(--cb-color-primary-500)';
+    // Tramos [desde, hasta] de cada barra.
+    let running = 0;
+    const steps = labels.map((label, i) => {
+        if (sums.has(i))
+            return { label, from: 0, to: running, delta: running, sum: true };
+        const delta = ds?.data[i] ?? 0;
+        const from = running;
+        running += delta;
+        return { label, from, to: running, delta, sum: false };
+    });
+    const values = steps.flatMap((s) => [s.from, s.to]);
+    const scale = niceScale(Math.min(0, ...values), Math.max(0, ...values), ctx.sparkline ? 2 : 4);
+    const f = frame(ctx, scale, false);
+    const { band, valuePos, bandCenter, plot } = f;
+    const width = Math.min(48, band * 0.6);
+    const shapes = [...f.shapes];
+    const items = [];
+    steps.forEach((s, i) => {
+        const a = valuePos(s.from);
+        const b = valuePos(s.to);
+        const color = ds?.colors?.[i] ?? (s.sum ? total : s.delta >= 0 ? up : down);
+        const x = round(bandCenter(i) - width / 2);
+        const y = Math.min(a, b);
+        shapes.push({ k: 'rect', cls: 'cb-chart__bar', item: i, x, y, w: round(width), h: round(Math.max(1, Math.abs(b - a))), rx: 3, fill: color });
+        // Conector con la barra siguiente, a la altura del acumulado.
+        if (i < steps.length - 1 && !ctx.sparkline) {
+            shapes.push({ k: 'line', cls: 'cb-chart__connector', x1: round(x + width), y1: b, x2: round(bandCenter(i + 1) - width / 2), y2: b });
+        }
+        const rows = s.sum
+            ? [{ label: ctx.text.total, value: ctx.format(s.to), color }]
+            : [
+                { label: ctx.text.change, value: (s.delta > 0 ? '+' : '') + ctx.format(s.delta), color },
+                { label: ctx.text.total, value: ctx.format(s.to), color: total },
+            ];
+        items.push({ index: i, label: s.label, title: s.label, rows, x: bandCenter(i), y: y, cursor: { x: bandCenter(i), y1: plot.top, y2: plot.bottom } });
+    });
+    return {
+        shapes,
+        hits: f.hits,
+        items,
+        legend: [],
+        table: {
+            head: [ctx.text.change, ctx.text.total],
+            rows: steps.map((s) => ({ label: s.label, cells: [s.sum ? '' : ctx.format(s.delta), ctx.format(s.to)] })),
+        },
+    };
+}
+/** Tabla accesible: una fila por categoría y una columna por serie. */
+function seriesTable(ctx) {
+    const { labels, datasets } = ctx.data;
+    return {
+        head: datasets.map((ds) => ds.label),
+        rows: labels.map((label, i) => ({ label, cells: datasets.map((ds) => ctx.format(ds.data.at(i) ?? 0)) })),
+    };
+}
+
+/** Torta, dona y barras radiales: un elemento por categoría del primer dataset. */
+function renderCircular(ctx) {
+    const { labels, datasets } = ctx.data;
+    const ds = datasets[0];
+    const colorOf = (i) => ds?.colors?.[i] ?? paletteColor(i);
+    const legend = labels.map((label, index) => ({ index, label, color: colorOf(index) }));
+    const table = { head: null, rows: labels.map((label, i) => ({ label, cells: [ctx.format(ds?.data.at(i) ?? 0)] })) };
+    if (!ds)
+        return { shapes: [], hits: [], items: [], legend, table };
+    const cx = ctx.width / 2;
+    const cy = ctx.height / 2;
+    const outer = Math.max(20, Math.min(cy - 10, 110));
+    const visible = labels
+        .map((label, index) => ({ index, label, value: Math.max(0, ds.data[index] ?? 0), color: colorOf(index) }))
+        .filter((item) => !ctx.hidden.has(item.index));
+    const shapes = [];
+    const items = [];
+    const add = (item, percent, path, tipAngle, tipRadius) => {
+        const pos = items.length;
+        shapes.push({ k: 'path', cls: 'cb-chart__slice', item: pos, d: path, fill: item.color });
+        const [x, y] = polar(cx, cy, tipRadius, tipAngle);
+        const value = `${ctx.format(item.value)} (${ctx.percent(percent)})`;
+        items.push({ index: item.index, label: item.label, title: item.label, rows: [{ label: '', value, color: item.color }], x, y });
+    };
+    if (ctx.type === 'radialBar') {
+        const gap = 4;
+        const thickness = Math.max(6, Math.min(16, (outer * 0.6) / Math.max(1, visible.length) - gap));
+        const max = ctx.max || 1;
+        // Las pistas van primero, debajo de todos los anillos.
+        visible.forEach((_, i) => {
+            const r = outer - i * (thickness + gap);
+            shapes.push({ k: 'path', cls: 'cb-chart__track', d: arcPath(cx, cy, r, r - thickness, 0, 360) });
+        });
+        visible.forEach((item, i) => {
+            const r = outer - i * (thickness + gap);
+            const percent = Math.min(1, item.value / max);
+            add(item, percent, arcPath(cx, cy, r, r - thickness, 0, 360 * percent), (360 * percent) / 2, r - thickness / 2);
+        });
+        const center = visible.length === 1 ? { x: cx, y: cy, text: ctx.percent(Math.min(1, visible[0].value / max)) } : undefined;
+        return { shapes, hits: [], items, legend, table, center };
+    }
+    const total = visible.reduce((sum, item) => sum + item.value, 0) || 1;
+    const inner = ctx.type === 'doughnut' ? outer * 0.6 : 0;
+    let angle = 0;
+    for (const item of visible) {
+        const sweep = (item.value / total) * 360;
+        const start = angle;
+        angle += sweep;
+        add(item, item.value / total, arcPath(cx, cy, outer, inner, start, start + sweep), start + sweep / 2, (outer + inner) / 2 || outer * 0.6);
+    }
+    const center = ctx.type === 'doughnut' ? { x: cx, y: cy, text: ctx.format(visible.reduce((sum, item) => sum + item.value, 0)) } : undefined;
+    return { shapes, hits: [], items, legend, table, center };
+}
+/** Medidor semicircular: el primer valor del primer dataset entre `min` y `max`, con franjas opcionales. */
+function renderGauge(ctx) {
+    const ds = ctx.data.datasets[0];
+    const label = ctx.data.labels[0] ?? ds?.label ?? '';
+    const value = ds?.data[0] ?? 0;
+    const min = ctx.min;
+    const max = ctx.max > min ? ctx.max : min + 1;
+    const ratio = Math.min(1, Math.max(0, (value - min) / (max - min)));
+    const color = ds?.color ?? ds?.colors?.[0] ?? bandColor(ctx, value) ?? paletteColor(0);
+    const cx = ctx.width / 2;
+    const outer = Math.max(30, Math.min(ctx.width / 2 - 24, ctx.height - 44));
+    const cy = round(Math.min(ctx.height - 24, 16 + outer + (ctx.height - 40 - outer) / 2));
+    const thickness = Math.max(10, outer * 0.22);
+    const inner = outer - thickness;
+    const angleOf = (v) => -90 + 180 * Math.min(1, Math.max(0, (v - min) / (max - min)));
+    const shapes = [{ k: 'path', cls: 'cb-chart__track', d: arcPath(cx, cy, outer, inner, -90, 90) }];
+    // Franjas: un aro fino por fuera del medidor.
+    for (const band of ctx.bands) {
+        const d = arcPath(cx, cy, outer + 8, outer + 3, angleOf(band.from), angleOf(band.to));
+        if (d)
+            shapes.push({ k: 'path', cls: 'cb-chart__band', d, fill: band.color });
+    }
+    shapes.push({ k: 'path', cls: 'cb-chart__slice', item: 0, d: arcPath(cx, cy, outer, inner, -90, -90 + 180 * ratio), fill: color });
+    if (!ctx.sparkline) {
+        const [x0, y0] = polar(cx, cy, inner + thickness / 2, -90);
+        const [x1, y1] = polar(cx, cy, inner + thickness / 2, 90);
+        shapes.push({ k: 'text', cls: 'cb-chart__axis', x: x0, y: y0 + 16, text: ctx.format(min), anchor: 'middle' });
+        shapes.push({ k: 'text', cls: 'cb-chart__axis', x: x1, y: y1 + 16, text: ctx.format(max), anchor: 'middle' });
+    }
+    const [tx, ty] = polar(cx, cy, outer, angleOf(value));
+    return {
+        shapes,
+        hits: [],
+        items: [{ index: 0, label, title: label, rows: [{ label: '', value: `${ctx.format(value)} (${ctx.percent(ratio)})`, color }], x: tx, y: ty }],
+        legend: [],
+        table: { head: null, rows: [{ label, cells: [ctx.format(value)] }] },
+        center: { x: cx, y: round(cy - inner * 0.28), text: ctx.format(value), sub: label },
+    };
+}
+/** Color de la franja que contiene el valor (para colorear el medidor según umbrales). */
+function bandColor(ctx, value) {
+    return ctx.bands.find((b) => value >= Math.min(b.from, b.to) && value <= Math.max(b.from, b.to))?.color;
+}
+
+/** Intensidad (0–1) → color entre la superficie y el color base. */
+function heat(base, t) {
+    return `color-mix(in srgb, ${base} ${Math.round(12 + 88 * t)}%, var(--cb-color-surface-raised))`;
+}
+/** Mapa de calor: columnas = `labels`, filas = datasets; el color indica el valor. */
+function renderHeatmap(ctx) {
+    const { labels, datasets } = ctx.data;
+    const rows = datasets;
+    const cols = labels.length;
+    const values = rows.flatMap((ds) => ds.data.slice(0, cols));
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const span = max - min || 1;
+    const base = rows[0]?.color ?? 'var(--cb-color-primary-600)';
+    const pad = ctx.sparkline ? { t: 2, r: 2, b: 2, l: 2 } : { t: 8, r: 8, b: 44, l: 96 };
+    const plot = { left: pad.l, top: pad.t, width: ctx.width - pad.l - pad.r, height: ctx.height - pad.t - pad.b };
+    const cw = plot.width / Math.max(1, cols);
+    const ch = plot.height / Math.max(1, rows.length);
+    const gap = cw > 8 && ch > 8 ? 2 : 0;
+    const shapes = [];
+    const hits = [];
+    const items = [];
+    rows.forEach((ds, r) => {
+        if (!ctx.sparkline) {
+            shapes.push({ k: 'text', cls: 'cb-chart__axis', x: plot.left - 8, y: round(plot.top + ch * (r + 0.5)), text: ds.label, anchor: 'end', baseline: 'central' });
+        }
+        labels.forEach((col, c) => {
+            const v = ds.data[c] ?? 0;
+            const t = (v - min) / span;
+            const x = round(plot.left + cw * c + gap / 2);
+            const y = round(plot.top + ch * r + gap / 2);
+            const w = round(Math.max(1, cw - gap));
+            const h = round(Math.max(1, ch - gap));
+            const item = items.length;
+            const fill = ds.colors?.[c] ?? heat(base, t);
+            shapes.push({ k: 'rect', cls: 'cb-chart__cell', item, x, y, w, h, rx: 2, fill });
+            if (!ctx.sparkline && w >= 34 && h >= 18) {
+                shapes.push({
+                    k: 'text',
+                    cls: t > 0.55 ? 'cb-chart__label cb-chart__label--inverse' : 'cb-chart__label',
+                    x: round(x + w / 2),
+                    y: round(y + h / 2),
+                    text: ctx.format(v),
+                    anchor: 'middle',
+                    baseline: 'central',
+                });
+            }
+            hits.push({ k: 'rect', item, x, y, w, h });
+            items.push({
+                index: item,
+                label: `${ds.label} · ${col}`,
+                title: `${ds.label} · ${col}`,
+                rows: [{ label: '', value: ctx.format(v), color: fill }],
+                x: round(x + w / 2),
+                y,
+            });
+        });
+    });
+    if (!ctx.sparkline) {
+        const every = Math.ceil(cols / 12);
+        labels.forEach((text, c) => {
+            if (c % every)
+                return;
+            shapes.push({ k: 'text', cls: 'cb-chart__axis', x: round(plot.left + cw * (c + 0.5)), y: plot.top + plot.height + 16, text, anchor: 'middle' });
+        });
+        // Escala de color: mínimo, degradado en pasos y máximo.
+        const y = ctx.height - 12;
+        const steps = 8;
+        const sw = 18;
+        const x0 = round(ctx.width - pad.r - steps * sw - 40);
+        shapes.push({ k: 'text', cls: 'cb-chart__axis', x: x0 - 6, y, text: ctx.format(min), anchor: 'end', baseline: 'central' });
+        for (let i = 0; i < steps; i++) {
+            shapes.push({ k: 'rect', cls: 'cb-chart__scale', x: x0 + i * sw, y: y - 5, w: sw, h: 10, fill: heat(base, i / (steps - 1)) });
+        }
+        shapes.push({ k: 'text', cls: 'cb-chart__axis', x: x0 + steps * sw + 6, y, text: ctx.format(max), anchor: 'start', baseline: 'central' });
+    }
+    return {
+        shapes,
+        hits,
+        items,
+        columns: cols,
+        legend: [],
+        table: { head: labels, rows: rows.map((ds) => ({ label: ds.label, cells: labels.map((_, c) => ctx.format(ds.data[c] ?? 0)) })) },
+    };
+}
+/** Treemap: rectángulos de área proporcional a cada valor del primer dataset. */
+function renderTreemap(ctx) {
+    const { labels, datasets } = ctx.data;
+    const ds = datasets[0];
+    const colorOf = (i) => ds?.colors?.[i] ?? paletteColor(i);
+    const legend = labels.map((label, index) => ({ index, label, color: colorOf(index) }));
+    const table = { head: null, rows: labels.map((label, i) => ({ label, cells: [ctx.format(ds?.data.at(i) ?? 0)] })) };
+    if (!ds)
+        return { shapes: [], hits: [], items: [], legend, table };
+    const values = labels.map((_, i) => (ctx.hidden.has(i) ? 0 : Math.max(0, ds.data[i] ?? 0)));
+    const total = values.reduce((sum, v) => sum + v, 0) || 1;
+    const pad = ctx.sparkline ? 1 : 4;
+    const cells = squarify(values, { x: pad, y: pad, w: ctx.width - pad * 2, h: ctx.height - pad * 2 });
+    // Orden de lectura: de mayor a menor.
+    const order = labels.map((_, i) => i).filter((i) => cells[i]).sort((a, b) => values[b] - values[a]);
+    const shapes = [];
+    const hits = [];
+    const items = [];
+    for (const i of order) {
+        const cell = cells[i];
+        const item = items.length;
+        const color = colorOf(i);
+        shapes.push({ k: 'rect', cls: 'cb-chart__cell cb-chart__cell--tree', item, x: cell.x, y: cell.y, w: cell.w, h: cell.h, rx: 3, fill: color });
+        if (!ctx.sparkline && cell.w >= 56 && cell.h >= 34) {
+            shapes.push({ k: 'text', cls: 'cb-chart__label cb-chart__label--inverse cb-chart__label--strong', x: cell.x + 8, y: cell.y + 16, text: labels[i], anchor: 'start' });
+            shapes.push({ k: 'text', cls: 'cb-chart__label cb-chart__label--inverse', x: cell.x + 8, y: cell.y + 32, text: ctx.format(values[i]), anchor: 'start' });
+        }
+        hits.push({ k: 'rect', item, x: cell.x, y: cell.y, w: cell.w, h: cell.h });
+        items.push({
+            index: i,
+            label: labels[i],
+            title: labels[i],
+            rows: [{ label: '', value: `${ctx.format(values[i])} (${ctx.percent(values[i] / total)})`, color }],
+            x: round(cell.x + cell.w / 2),
+            y: cell.y,
+        });
+    }
+    return { shapes, hits, items, legend, table };
+}
+
+/** Radar: un eje por categoría y un polígono por serie. */
+function renderRadar(ctx) {
+    const { labels, datasets } = ctx.data;
+    const n = labels.length;
+    const series = datasets
+        .map((ds, index) => ({ index, label: ds.label, data: ds.data, color: ds.color ?? paletteColor(index) }))
+        .filter((s) => !ctx.hidden.has(s.index));
+    const values = series.flatMap((s) => s.data.slice(0, n));
+    const scale = niceScale(Math.min(0, ...values), Math.max(0, ...values), ctx.sparkline ? 2 : 4);
+    const cx = ctx.width / 2;
+    const cy = ctx.height / 2;
+    const radius = Math.max(20, Math.min(cy - (ctx.sparkline ? 6 : 24), cx - (ctx.sparkline ? 6 : 90)));
+    const step = 360 / Math.max(1, n);
+    const r = (v) => (radius * (v - scale.min)) / (scale.max - scale.min || 1);
+    const point = (v, i) => {
+        const [x, y] = polar(cx, cy, r(v), i * step);
+        return { x, y };
+    };
+    const shapes = [];
+    if (!ctx.sparkline) {
+        // Anillos poligonales de la escala y radios de cada eje.
+        for (const tick of scale.ticks) {
+            if (tick === scale.min)
+                continue;
+            shapes.push({ k: 'path', cls: 'cb-chart__grid', d: polyline(labels.map((_, i) => point(tick, i)), true), fill: 'none' });
+        }
+        labels.forEach((label, i) => {
+            const end = point(scale.max, i);
+            shapes.push({ k: 'line', cls: 'cb-chart__grid', x1: cx, y1: cy, x2: end.x, y2: end.y });
+            const [lx, ly] = polar(cx, cy, radius + 12, i * step);
+            const angle = (i * step) % 360;
+            const anchor = angle === 0 || angle === 180 ? 'middle' : angle < 180 ? 'start' : 'end';
+            const baseline = angle === 0 ? 'auto' : angle === 180 ? 'hanging' : 'central';
+            shapes.push({ k: 'text', cls: 'cb-chart__axis', x: lx, y: ly, text: label, anchor, baseline });
+        });
+        for (const tick of scale.ticks) {
+            if (tick === scale.min)
+                continue;
+            const p = point(tick, 0);
+            shapes.push({ k: 'text', cls: 'cb-chart__axis cb-chart__axis--tick', x: p.x + 4, y: p.y, text: ctx.format(tick), anchor: 'start', baseline: 'central' });
+        }
+    }
+    const front = [];
+    for (const s of series) {
+        const pts = labels.map((_, i) => point(s.data[i] ?? 0, i));
+        shapes.push({ k: 'path', cls: 'cb-chart__area', d: polyline(pts, true), fill: s.color });
+        front.push({ k: 'path', cls: 'cb-chart__line', d: polyline(pts, true), stroke: s.color, pathLength: 1 });
+        pts.forEach((p, i) => front.push({ k: 'circle', cls: 'cb-chart__point', item: i, cx: p.x, cy: p.y, r: ctx.sparkline ? 0 : 3, rActive: 5, fill: s.color }));
+    }
+    // Cada eje es un elemento: su sector recibe el ratón.
+    const hits = labels.map((_, i) => ({ k: 'path', item: i, d: arcPath(cx, cy, radius + 8, 0, i * step - step / 2, i * step + step / 2) }));
+    const items = labels.map((label, i) => {
+        const peak = Math.max(scale.min, ...series.map((s) => s.data[i] ?? 0));
+        const p = point(peak, i);
+        return {
+            index: i,
+            label,
+            title: label,
+            rows: series.map((s) => ({ label: s.label, value: ctx.format(s.data[i] ?? 0), color: s.color })),
+            x: p.x,
+            y: p.y,
+        };
+    });
+    return {
+        shapes,
+        front,
+        hits,
+        items,
+        legend: datasets.map((ds, index) => ({ index, label: ds.label, color: ds.color ?? paletteColor(index) })),
+        table: seriesTable(ctx),
+    };
+}
+/** Área polar: sectores de igual ángulo cuyo radio depende del valor. */
+function renderPolarArea(ctx) {
+    const { labels, datasets } = ctx.data;
+    const ds = datasets[0];
+    const colorOf = (i) => ds?.colors?.[i] ?? paletteColor(i);
+    const visible = labels
+        .map((label, index) => ({ index, label, value: Math.max(0, ds?.data[index] ?? 0), color: colorOf(index) }))
+        .filter((item) => !ctx.hidden.has(item.index));
+    const scale = niceScale(0, Math.max(0, ...visible.map((v) => v.value)), ctx.sparkline ? 2 : 4);
+    const cx = ctx.width / 2;
+    const cy = ctx.height / 2;
+    const radius = Math.max(20, Math.min(cy - 10, 110));
+    const r = (v) => (radius * v) / (scale.max || 1);
+    const step = 360 / Math.max(1, visible.length);
+    const shapes = [];
+    const items = [];
+    visible.forEach((item, i) => {
+        const start = i * step;
+        shapes.push({ k: 'path', cls: 'cb-chart__slice cb-chart__slice--polar', item: i, d: arcPath(cx, cy, r(item.value), 0, start, start + step), fill: item.color });
+        const [x, y] = polar(cx, cy, Math.max(r(item.value), 12) * 0.7, start + step / 2);
+        items.push({ index: item.index, label: item.label, title: item.label, rows: [{ label: '', value: ctx.format(item.value), color: item.color }], x, y });
+    });
+    if (!ctx.sparkline) {
+        // Anillos de la escala encima de los sectores, para leer los valores.
+        for (const tick of scale.ticks) {
+            if (tick <= 0)
+                continue;
+            shapes.push({ k: 'circle', cls: 'cb-chart__ring', cx, cy, r: round(r(tick)), rActive: round(r(tick)) });
+            shapes.push({ k: 'text', cls: 'cb-chart__axis cb-chart__axis--tick', x: cx + 4, y: round(cy - r(tick)), text: ctx.format(tick), anchor: 'start', baseline: 'hanging' });
+        }
+    }
+    return {
+        shapes,
+        hits: [],
+        items,
+        legend: labels.map((label, index) => ({ index, label, color: colorOf(index) })),
+        table: { head: null, rows: labels.map((label, i) => ({ label, cells: [ctx.format(ds?.data.at(i) ?? 0)] })) },
+    };
+}
+
+/** Un renderer por tipo: recibe el contexto y devuelve la escena a dibujar. */
+const CHART_RENDERERS = {
+    bar: renderCartesian,
+    horizontalBar: renderCartesian,
+    line: renderCartesian,
+    area: renderCartesian,
+    waterfall: renderWaterfall,
+    pie: renderCircular,
+    doughnut: renderCircular,
+    radialBar: renderCircular,
+    gauge: renderGauge,
+    radar: renderRadar,
+    polarArea: renderPolarArea,
+    heatmap: renderHeatmap,
+    treemap: renderTreemap,
+};
+
+/** Escala numérica legible. Con `includeZero` en false se ajusta al rango (útil para precios). */
+function linearTicks(min, max, count = 4, includeZero = true) {
+    let lo = includeZero ? Math.min(0, min) : min;
+    let hi = includeZero ? Math.max(0, max) : max;
+    if (!Number.isFinite(lo) || !Number.isFinite(hi))
+        return { min: 0, max: 1, ticks: [0, 1] };
+    if (lo === hi) {
+        const pad = Math.abs(lo) * 0.1 || 1;
+        lo -= includeZero && lo >= 0 ? 0 : pad;
+        hi += pad;
+    }
+    const rough = (hi - lo) / Math.max(1, count);
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const residual = rough / magnitude;
+    const nice = residual > 5 ? 10 : residual > 2.5 ? 5 : residual > 2 ? 2.5 : residual > 1 ? 2 : 1;
+    const step = nice * magnitude;
+    lo = Math.floor(lo / step) * step;
+    hi = Math.ceil(hi / step) * step;
+    const ticks = [];
+    for (let v = lo; v <= hi + step / 2; v += step)
+        ticks.push(round(v));
+    return { min: round(lo), max: round(hi), ticks };
+}
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+/** Intervalos "redondos" para un eje de tiempo, del más fino al más grueso. */
+const INTERVALS = [
+    { ms: SECOND, unit: 'second' },
+    { ms: 5 * SECOND, unit: 'second' },
+    { ms: 15 * SECOND, unit: 'second' },
+    { ms: 30 * SECOND, unit: 'second' },
+    { ms: MINUTE, unit: 'minute' },
+    { ms: 5 * MINUTE, unit: 'minute' },
+    { ms: 15 * MINUTE, unit: 'minute' },
+    { ms: 30 * MINUTE, unit: 'minute' },
+    { ms: HOUR, unit: 'hour' },
+    { ms: 3 * HOUR, unit: 'hour' },
+    { ms: 6 * HOUR, unit: 'hour' },
+    { ms: 12 * HOUR, unit: 'hour' },
+    { ms: DAY, unit: 'day' },
+    { ms: 2 * DAY, unit: 'day' },
+    { ms: 7 * DAY, unit: 'week' },
+    { ms: 30 * DAY, unit: 'month' },
+    { ms: 91 * DAY, unit: 'month' },
+    { ms: 365 * DAY, unit: 'year' },
+];
+/** Marcas de un eje de tiempo con unas `count` divisiones y la unidad para formatearlas. */
+function timeTicks(min, max, count = 6) {
+    const span = Math.max(1, max - min);
+    const target = span / Math.max(1, count);
+    const interval = INTERVALS.find((i) => i.ms >= target) ?? INTERVALS[INTERVALS.length - 1];
+    const ticks = [];
+    if (interval.unit === 'month' || interval.unit === 'year') {
+        const months = interval.unit === 'year' ? 12 * Math.max(1, Math.round(target / (365 * DAY))) : Math.max(1, Math.round(interval.ms / (30 * DAY)));
+        const d = new Date(min);
+        d.setDate(1);
+        d.setHours(0, 0, 0, 0);
+        if (interval.unit === 'year')
+            d.setMonth(0);
+        while (d.getTime() < min)
+            d.setMonth(d.getMonth() + months);
+        while (d.getTime() <= max && ticks.length < 200) {
+            ticks.push(d.getTime());
+            d.setMonth(d.getMonth() + months);
+        }
+    }
+    else {
+        // Alineado al intervalo en hora local (días a medianoche, horas en punto).
+        const offset = new Date(min).getTimezoneOffset() * MINUTE;
+        const start = Math.ceil((min - offset) / interval.ms) * interval.ms + offset;
+        for (let t = start; t <= max && ticks.length < 200; t += interval.ms)
+            ticks.push(t);
+    }
+    return { ticks, unit: interval.unit };
+}
+/** Formato de una marca de tiempo según la unidad del eje. */
+function timeFormat(locale, unit) {
+    const options = unit === 'second'
+        ? { hour: '2-digit', minute: '2-digit', second: '2-digit' }
+        : unit === 'minute' || unit === 'hour'
+            ? { hour: '2-digit', minute: '2-digit' }
+            : unit === 'day' || unit === 'week'
+                ? { day: 'numeric', month: 'short' }
+                : unit === 'month'
+                    ? { month: 'short', year: '2-digit' }
+                    : { year: 'numeric' };
+    const format = new Intl.DateTimeFormat(locale, options).format;
+    return (t) => format(t);
+}
+/** Formato largo (tooltip y tabla) de un instante. */
+function timeFormatLong(locale, unit) {
+    const options = unit === 'second' || unit === 'minute' || unit === 'hour'
+        ? { dateStyle: 'medium', timeStyle: unit === 'second' ? 'medium' : 'short' }
+        : { dateStyle: 'medium' };
+    const format = new Intl.DateTimeFormat(locale, options).format;
+    return (t) => format(t);
+}
+
+/** Número de un campo (`Date` → milisegundos, texto numérico → número); `null` si no hay dato. */
+function num(v) {
+    if (typeof v === 'number')
+        return Number.isFinite(v) ? v : null;
+    if (v instanceof Date)
+        return v.getTime();
+    if (typeof v === 'string' && v.trim() !== '') {
+        const n = Number(v);
+        return Number.isFinite(n) ? n : null;
+    }
+    return null;
+}
+/** Trazado de una serie según la curva: recta, suave (monótona, no se sale de los datos) o escalonada. */
+function curvePath(pts, curve) {
+    if (pts.length < 2 || curve === 'linear')
+        return polyline(pts);
+    if (curve === 'step') {
+        return pts.map((p, i) => (i ? `H ${p.x} V ${p.y}` : `M ${p.x} ${p.y}`)).join(' ');
+    }
+    // Monótona en X (Fritsch–Carlson): suaviza sin crear picos que no están en los datos.
+    const n = pts.length;
+    const m = [];
+    for (let i = 0; i < n - 1; i++) {
+        const dx = pts[i + 1].x - pts[i].x;
+        m.push(dx ? (pts[i + 1].y - pts[i].y) / dx : 0);
+    }
+    const t = [m[0]];
+    for (let i = 1; i < n - 1; i++)
+        t.push(m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2);
+    t.push(m[n - 2]);
+    for (let i = 0; i < n - 1; i++) {
+        if (m[i] === 0) {
+            t[i] = 0;
+            t[i + 1] = 0;
+            continue;
+        }
+        const a = t[i] / m[i];
+        const b = t[i + 1] / m[i];
+        const h = a * a + b * b;
+        if (h > 9) {
+            const s = 3 / Math.sqrt(h);
+            t[i] = s * a * m[i];
+            t[i + 1] = s * b * m[i];
+        }
+    }
+    let d = `M ${pts[0].x} ${pts[0].y}`;
+    for (let i = 0; i < n - 1; i++) {
+        const p = pts[i];
+        const q = pts[i + 1];
+        const dx = (q.x - p.x) / 3;
+        d += ` C ${round(p.x + dx)} ${round(p.y + t[i] * dx)} ${round(q.x - dx)} ${round(q.y - t[i + 1] * dx)} ${q.x} ${q.y}`;
+    }
+    return d;
+}
+/** Gráfico composable: series, ejes y referencias declarados como hijos de `<cb-chart>`. */
+function renderComposed(ctx) {
+    const spec = ctx.composed;
+    const all = spec.series;
+    const visible = all.filter((s) => !ctx.hidden.has(s.index));
+    const axisOf = (pos) => spec.axes.find((a) => a.position === pos);
+    const xAxis = axisOf('bottom');
+    // --- Eje X: tipo y claves --------------------------------------------------------------
+    const rawXs = all.flatMap((s) => s.records.map((r) => r[s.x]));
+    let xType = xAxis?.type ?? 'auto';
+    if (xType === 'auto') {
+        xType = rawXs.some((v) => v instanceof Date)
+            ? 'time'
+            : rawXs.some((v) => typeof v === 'number') && rawXs.every((v) => v == null || typeof v === 'number')
+                ? 'linear'
+                : 'category';
+    }
+    const categories = [];
+    const catIndex = new Map();
+    const toX = (v, register) => {
+        if (xType === 'category') {
+            if (v == null)
+                return null;
+            const k = String(v);
+            if (!catIndex.has(k)) {
+                if (!register)
+                    return null;
+                catIndex.set(k, categories.length);
+                categories.push(k);
+            }
+            return catIndex.get(k) + 0.5;
+        }
+        if (xType === 'time' && typeof v === 'string') {
+            const t = Date.parse(v);
+            return Number.isFinite(t) ? t : null;
+        }
+        return num(v);
+    };
+    // Puntos de cada serie (todas, para que el dominio no cambie al ocultar una).
+    const points = new Map();
+    for (const s of all) {
+        const pts = [];
+        for (const r of s.records) {
+            const key = toX(r[s.x], true);
+            if (key === null)
+                continue;
+            pts.push({ key, y: num(r[s.y]), low: num(r[s.low]), high: num(r[s.high]), open: num(r[s.open]), close: num(r[s.close]), base: 0, top: 0 });
+        }
+        pts.sort((a, b) => a.key - b.key);
+        points.set(s, pts);
+    }
+    const keys = [...new Set(all.flatMap((s) => points.get(s).map((p) => p.key)))].sort((a, b) => a - b);
+    if (!keys.length)
+        return { shapes: [], hits: [], items: [], legend: legendOf(all), table: { head: null, rows: [] } };
+    const hasBands = visible.some((s) => s.kind === 'bar' || s.kind === 'candlestick');
+    let minGap = Infinity;
+    for (let i = 1; i < keys.length; i++)
+        minGap = Math.min(minGap, keys[i] - keys[i - 1]);
+    let full;
+    if (xType === 'category') {
+        full = [0, categories.length];
+        minGap = 1;
+    }
+    else {
+        if (!Number.isFinite(minGap))
+            minGap = Math.abs(keys[0]) * 0.1 || 1;
+        const pad = hasBands ? minGap / 2 : 0;
+        full = keys[0] === keys[keys.length - 1] ? [keys[0] - minGap, keys[0] + minGap] : [keys[0] - pad, keys[keys.length - 1] + pad];
+    }
+    const span = full[1] - full[0];
+    // Ventana visible: la elegida con zoom, los últimos `xWindow` o todo.
+    let d0 = full[0];
+    let d1 = full[1];
+    const win = spec.window;
+    if (win) {
+        const w = Math.min(Math.max(win.end - win.start, minGap), span);
+        d0 = win.pinned ? full[1] - w : Math.min(Math.max(win.start, full[0]), full[1] - w);
+        d1 = d0 + w;
+    }
+    else if (spec.xWindow && spec.xWindow < span) {
+        d0 = full[1] - spec.xWindow;
+    }
+    const inView = (k) => k >= d0 - 1e-9 && k <= d1 + 1e-9;
+    // --- Área de dibujo -------------------------------------------------------------------
+    const refsOn = (axis) => spec.refs.some((r) => r.axis === axis);
+    const usesRight = all.some((s) => s.axis === 'right') || !!axisOf('right') || refsOn('right');
+    const usesLeft = all.some((s) => s.axis === 'left') || !!axisOf('left') || refsOn('left');
+    const yLabels = spec.axes.some((a) => a.label && a.position !== 'bottom');
+    const pad = ctx.sparkline
+        ? { t: 6, r: 6, b: 6, l: 6 }
+        : { t: yLabels ? 30 : 16, r: usesRight ? 60 : 16, b: xAxis?.label ? 46 : 30, l: usesLeft ? 60 : 16 };
+    const plot = {
+        left: pad.l,
+        right: ctx.width - pad.r,
+        top: pad.t,
+        bottom: ctx.height - pad.b,
+        width: Math.max(10, ctx.width - pad.l - pad.r),
+        height: Math.max(10, ctx.height - pad.t - pad.b),
+    };
+    const xPos = (k) => round(plot.left + ((k - d0) / (d1 - d0 || 1)) * plot.width);
+    // --- Apilado ---------------------------------------------------------------------------
+    const stacks = new Map();
+    for (const s of visible) {
+        for (const p of points.get(s)) {
+            const v = p.y ?? 0;
+            if ((s.kind === 'bar' || s.kind === 'area') && s.stack) {
+                const id = `${s.axis}:${s.stack}`;
+                if (!stacks.has(id))
+                    stacks.set(id, new Map());
+                const totals = stacks.get(id).get(p.key) ?? { pos: 0, neg: 0 };
+                p.base = v >= 0 ? totals.pos : totals.neg;
+                if (v >= 0)
+                    totals.pos += v;
+                else
+                    totals.neg += v;
+                stacks.get(id).set(p.key, totals);
+                p.top = p.base + v;
+            }
+            else {
+                p.base = 0;
+                p.top = v;
+            }
+        }
+    }
+    // --- Ejes Y ----------------------------------------------------------------------------
+    const tickCount = ctx.sparkline ? 2 : Math.max(2, Math.round(plot.height / 55));
+    const yScale = (axis) => {
+        const values = [];
+        for (const s of visible) {
+            if (s.axis !== axis)
+                continue;
+            for (const p of points.get(s)) {
+                if (!inView(p.key))
+                    continue;
+                if (s.kind === 'rangeArea' || s.kind === 'candlestick')
+                    values.push(...[p.low, p.high].filter((v) => v !== null));
+                else if (p.y !== null)
+                    values.push(p.top, p.base);
+            }
+        }
+        for (const r of spec.refs) {
+            if (r.axis !== axis)
+                continue;
+            for (const v of [r.value, r.from, r.to]) {
+                const n = num(v);
+                if (n !== null)
+                    values.push(n);
+            }
+        }
+        const conf = axisOf(axis);
+        const zero = visible.some((s) => s.axis === axis && (s.kind === 'bar' || s.kind === 'area'));
+        const lo = conf?.min ?? (values.length ? Math.min(...values) : 0);
+        const hi = conf?.max ?? (values.length ? Math.max(...values) : 1);
+        const scale = linearTicks(lo, hi, tickCount, zero && conf?.min === undefined);
+        const min = conf?.min ?? scale.min;
+        const max = conf?.max ?? scale.max;
+        return { min, max, ticks: scale.ticks.filter((t) => t >= min - 1e-9 && t <= max + 1e-9), format: conf?.format ?? ctx.format };
+    };
+    const scales = { left: yScale('left'), right: yScale('right') };
+    const yPos = (axis, v) => {
+        const { min, max } = scales[axis];
+        return round(plot.bottom - ((v - min) / (max - min || 1)) * plot.height);
+    };
+    // --- Formatos del eje X -----------------------------------------------------------------
+    let unit = 'day';
+    let xTicks = [];
+    const xCount = Math.max(2, Math.floor(plot.width / 90));
+    if (xType === 'time')
+        ({ ticks: xTicks, unit } = timeTicks(d0, d1, xCount));
+    else if (xType === 'linear')
+        xTicks = linearTicks(d0, d1, xCount, false).ticks.filter((t) => t >= d0 && t <= d1);
+    const xFormatShort = xType === 'time' ? timeFormat(ctx.locale, unit) : xType === 'linear' ? (xAxis?.format ?? ctx.format) : (k) => categories[Math.floor(k)] ?? '';
+    // En el tooltip y la tabla la fecha se escribe completa, con la unidad de los datos.
+    const dataUnit = minGap < 60_000 ? 'second' : minGap < 86_400_000 ? 'minute' : 'day';
+    const xFormatLong = xType === 'time' ? timeFormatLong(ctx.locale, dataUnit) : xFormatShort;
+    // --- Rejilla y ejes ------------------------------------------------------------------
+    const shapes = [];
+    const primary = all.some((s) => s.axis === 'left') || !usesRight ? 'left' : 'right';
+    if (!ctx.sparkline) {
+        for (const axis of ['left', 'right']) {
+            if (axis === 'left' ? !usesLeft : !usesRight)
+                continue;
+            const scale = scales[axis];
+            const grid = axisOf(axis)?.grid ?? axis === primary;
+            for (const tick of scale.ticks) {
+                const y = yPos(axis, tick);
+                if (grid)
+                    shapes.push({ k: 'line', cls: tick === 0 ? 'cb-chart__grid cb-chart__grid--zero' : 'cb-chart__grid', x1: plot.left, y1: y, x2: plot.right, y2: y });
+                shapes.push(axis === 'left'
+                    ? { k: 'text', cls: 'cb-chart__axis', x: plot.left - 8, y, text: scale.format(tick), anchor: 'end', baseline: 'central' }
+                    : { k: 'text', cls: 'cb-chart__axis', x: plot.right + 8, y, text: scale.format(tick), anchor: 'start', baseline: 'central' });
+            }
+            const label = axisOf(axis)?.label;
+            if (label) {
+                shapes.push(axis === 'left'
+                    ? { k: 'text', cls: 'cb-chart__axis cb-chart__axis-title', x: 8, y: plot.top - 14, text: label, anchor: 'start' }
+                    : { k: 'text', cls: 'cb-chart__axis cb-chart__axis-title', x: ctx.width - 8, y: plot.top - 14, text: label, anchor: 'end' });
+            }
+        }
+        shapes.push({ k: 'line', cls: 'cb-chart__baseline', x1: plot.left, y1: plot.bottom, x2: plot.right, y2: plot.bottom });
+        if (xType === 'category') {
+            const shown = categories.map((text, i) => ({ text, k: i + 0.5 })).filter((c) => inView(c.k));
+            const longest = Math.max(1, ...shown.map((c) => c.text.length));
+            const every = Math.max(1, Math.ceil((shown.length * (longest * 6.4 + 12)) / plot.width));
+            shown.forEach((c, i) => {
+                if (i % every)
+                    return;
+                shapes.push({ k: 'text', cls: 'cb-chart__axis', x: xPos(c.k), y: plot.bottom + 18, text: c.text, anchor: 'middle' });
+            });
+        }
+        else {
+            for (const tick of xTicks) {
+                const x = xPos(tick);
+                if (axisOf('bottom')?.grid)
+                    shapes.push({ k: 'line', cls: 'cb-chart__grid', x1: x, y1: plot.top, x2: x, y2: plot.bottom });
+                shapes.push({ k: 'line', cls: 'cb-chart__tick', x1: x, y1: plot.bottom, x2: x, y2: plot.bottom + 4 });
+                shapes.push({ k: 'text', cls: 'cb-chart__axis', x, y: plot.bottom + 18, text: xFormatShort(tick), anchor: 'middle' });
+            }
+        }
+        if (xAxis?.label) {
+            shapes.push({ k: 'text', cls: 'cb-chart__axis cb-chart__axis-title', x: round(plot.left + plot.width / 2), y: plot.bottom + 38, text: xAxis.label, anchor: 'middle' });
+        }
+    }
+    // --- Referencias: franjas detrás de los datos, líneas delante ---------------------------
+    const data = [];
+    const front = [];
+    const refPos = (axis, v) => {
+        if (axis === 'x') {
+            const k = toX(v, false);
+            return k === null ? null : xPos(k);
+        }
+        const n = num(v);
+        return n === null ? null : yPos(axis, n);
+    };
+    for (const r of spec.refs) {
+        if (r.kind === 'band') {
+            const a = refPos(r.axis, r.from);
+            const b = refPos(r.axis, r.to);
+            if (a === null || b === null)
+                continue;
+            const fill = r.color ?? 'var(--cb-color-primary-500)';
+            if (r.axis === 'x') {
+                data.push({ k: 'rect', cls: 'cb-chart__ref-band', x: Math.min(a, b), y: plot.top, w: Math.abs(b - a), h: plot.height, fill });
+                if (r.label)
+                    front.push({ k: 'text', cls: 'cb-chart__ref-label', x: Math.min(a, b) + 4, y: plot.top + 12, text: r.label, anchor: 'start', fill: r.color });
+            }
+            else {
+                data.push({ k: 'rect', cls: 'cb-chart__ref-band', x: plot.left, y: Math.min(a, b), w: plot.width, h: Math.abs(b - a), fill });
+                if (r.label)
+                    front.push({ k: 'text', cls: 'cb-chart__ref-label', x: plot.right - 4, y: Math.min(a, b) + 12, text: r.label, anchor: 'end', fill: r.color });
+            }
+        }
+    }
+    // --- Series -----------------------------------------------------------------------------
+    const barLike = visible.filter((s) => s.kind === 'bar');
+    const slots = [...new Set(barLike.map((s) => (s.stack ? `${s.axis}:${s.stack}` : `#${s.index}`)))];
+    const bandPx = (minGap / (d1 - d0 || 1)) * plot.width;
+    const groupW = Math.min(bandPx * 0.75, 40 * Math.max(1, slots.length));
+    const slotW = groupW / Math.max(1, slots.length);
+    const pointTop = new Map();
+    const noteTop = (k, y) => pointTop.set(k, Math.min(pointTop.get(k) ?? plot.bottom, y));
+    for (const s of visible) {
+        const pts = points.get(s);
+        // Un punto fuera de la ventana a cada lado, para que las líneas lleguen al borde.
+        const first = Math.max(0, pts.findIndex((p) => p.key >= d0) - 1);
+        let last = pts.length - 1;
+        for (let i = pts.length - 1; i >= 0; i--)
+            if (pts[i].key <= d1) {
+                last = Math.min(pts.length - 1, i + 1);
+                break;
+            }
+        const win = pts.slice(first, last + 1);
+        const axis = s.axis;
+        if (s.kind === 'bar') {
+            const slot = slots.indexOf(s.stack ? `${s.axis}:${s.stack}` : `#${s.index}`);
+            for (const p of win) {
+                if (p.y === null)
+                    continue;
+                const a = yPos(axis, p.base);
+                const b = yPos(axis, p.top);
+                const x = round(xPos(p.key) - groupW / 2 + slot * slotW + 1);
+                const item = keys.indexOf(p.key);
+                data.push({ k: 'rect', cls: 'cb-chart__bar', item, x, y: Math.min(a, b), w: round(Math.max(1, slotW - 2)), h: round(Math.max(1, Math.abs(b - a))), rx: slotW > 8 ? 2 : 0, fill: s.color });
+                noteTop(p.key, Math.min(a, b));
+            }
+        }
+        else if (s.kind === 'area' || s.kind === 'line') {
+            const valid = win.filter((p) => p.y !== null);
+            const top = valid.map((p) => ({ x: xPos(p.key), y: yPos(axis, p.top) }));
+            if (s.kind === 'area' && top.length) {
+                const floor = valid.map((p) => ({ x: xPos(p.key), y: yPos(axis, p.base) })).reverse();
+                data.push({ k: 'path', cls: 'cb-chart__area', d: `${curvePath(top, s.curve)} L ${floor.map((p) => `${p.x} ${p.y}`).join(' L ')} Z`, fill: s.color });
+            }
+            front.push({ k: 'path', cls: s.dashed ? 'cb-chart__line cb-chart__line--dashed' : 'cb-chart__line', d: curvePath(top, s.curve), stroke: s.color, pathLength: s.dashed ? undefined : 1 });
+            valid.forEach((p, i) => {
+                noteTop(p.key, top[i].y);
+                if (s.kind === 'line' && !s.points && !ctx.sparkline)
+                    return;
+                front.push({ k: 'circle', cls: 'cb-chart__point', item: keys.indexOf(p.key), cx: top[i].x, cy: top[i].y, r: ctx.sparkline || !s.points ? 0 : 3, rActive: 5, fill: s.color });
+            });
+        }
+        else if (s.kind === 'rangeArea') {
+            const valid = win.filter((p) => p.low !== null && p.high !== null);
+            const hi = valid.map((p) => ({ x: xPos(p.key), y: yPos(axis, p.high) }));
+            const lo = valid.map((p) => ({ x: xPos(p.key), y: yPos(axis, p.low) }));
+            if (hi.length) {
+                const back = curvePath([...lo].reverse(), s.curve).replace(/^M/, 'L');
+                data.push({ k: 'path', cls: 'cb-chart__area cb-chart__area--range', d: `${curvePath(hi, s.curve)} ${back} Z`, fill: s.color });
+                front.push({ k: 'path', cls: 'cb-chart__line cb-chart__line--thin', d: curvePath(hi, s.curve), stroke: s.color });
+                front.push({ k: 'path', cls: 'cb-chart__line cb-chart__line--thin', d: curvePath(lo, s.curve), stroke: s.color });
+                hi.forEach((p, i) => noteTop(valid[i].key, p.y));
+            }
+        }
+        else if (s.kind === 'scatter') {
+            for (const p of win) {
+                if (p.y === null)
+                    continue;
+                const cx = xPos(p.key);
+                const cy = yPos(axis, p.y);
+                noteTop(p.key, cy);
+                front.push({ k: 'circle', cls: 'cb-chart__point cb-chart__point--scatter', item: -1, cx, cy, r: s.size, rActive: s.size + 2, fill: s.color });
+            }
+        }
+        else {
+            const w = Math.max(1, Math.min(bandPx * 0.65, 18));
+            for (const p of win) {
+                if (p.open === null || p.close === null || p.high === null || p.low === null)
+                    continue;
+                const up = p.close >= p.open;
+                const color = up ? s.upColor : s.downColor;
+                const x = xPos(p.key);
+                const item = keys.indexOf(p.key);
+                const yo = yPos(axis, p.open);
+                const yc = yPos(axis, p.close);
+                data.push({ k: 'line', cls: 'cb-chart__wick', x1: x, y1: yPos(axis, p.high), x2: x, y2: yPos(axis, p.low), stroke: color });
+                if (s.variant === 'ohlc') {
+                    data.push({ k: 'line', cls: 'cb-chart__wick', x1: round(x - w / 2), y1: yo, x2: x, y2: yo, stroke: color });
+                    data.push({ k: 'line', cls: 'cb-chart__wick', x1: x, y1: yc, x2: round(x + w / 2), y2: yc, stroke: color });
+                }
+                else {
+                    data.push({ k: 'rect', cls: 'cb-chart__candle', item, x: round(x - w / 2), y: Math.min(yo, yc), w: round(w), h: round(Math.max(1, Math.abs(yc - yo))), fill: color });
+                }
+                noteTop(p.key, yPos(axis, p.high));
+            }
+        }
+    }
+    for (const r of spec.refs) {
+        if (r.kind !== 'line')
+            continue;
+        const pos = refPos(r.axis, r.value);
+        if (pos === null)
+            continue;
+        const stroke = r.color;
+        if (r.axis === 'x') {
+            front.push({ k: 'line', cls: 'cb-chart__ref-line', x1: pos, y1: plot.top, x2: pos, y2: plot.bottom, stroke });
+            if (r.label)
+                front.push({ k: 'text', cls: 'cb-chart__ref-label', x: pos + 4, y: plot.top + 12, text: r.label, anchor: 'start', fill: r.color });
+        }
+        else {
+            front.push({ k: 'line', cls: 'cb-chart__ref-line', x1: plot.left, y1: pos, x2: plot.right, y2: pos, stroke });
+            if (r.label)
+                front.push({ k: 'text', cls: 'cb-chart__ref-label', x: plot.left + 4, y: pos - 5, text: r.label, anchor: 'start', fill: r.color });
+        }
+    }
+    // Anotaciones: un punto con su etiqueta encima (o debajo si no cabe).
+    const notes = new Map();
+    for (const r of spec.refs) {
+        if (r.kind !== 'note' || !r.label || r.y === undefined)
+            continue;
+        const k = toX(r.value, false);
+        if (k === null || !inView(k))
+            continue;
+        const axis = r.axis === 'right' ? 'right' : 'left';
+        const x = xPos(k);
+        const y = yPos(axis, r.y);
+        const color = r.color ?? 'var(--cb-color-text)';
+        front.push({ k: 'circle', cls: 'cb-chart__note-dot', cx: x, cy: y, r: 4, rActive: 4, fill: color });
+        const below = y < plot.top + 22;
+        front.push({ k: 'text', cls: 'cb-chart__note', x, y: below ? y + 18 : y - 10, text: r.label, anchor: 'middle', fill: r.color });
+        notes.set(k, [...(notes.get(k) ?? []), { label: r.label, color }]);
+    }
+    // --- Elementos navegables ------------------------------------------------------------
+    const t = ctx.text;
+    const rowsAt = (k) => {
+        const rows = [];
+        for (const s of visible) {
+            const p = points.get(s).find((q) => q.key === k);
+            if (!p)
+                continue;
+            const fmt = scales[s.axis].format;
+            if (s.kind === 'candlestick') {
+                if (p.open === null || p.close === null || p.high === null || p.low === null)
+                    continue;
+                const color = p.close >= p.open ? s.upColor : s.downColor;
+                rows.push({ label: `${s.name} · ${t.open}`, value: fmt(p.open), color }, { label: t.high, value: fmt(p.high), color }, { label: t.low, value: fmt(p.low), color }, { label: t.close, value: fmt(p.close), color });
+            }
+            else if (s.kind === 'rangeArea') {
+                if (p.low !== null && p.high !== null)
+                    rows.push({ label: s.name, value: `${fmt(p.low)} – ${fmt(p.high)}`, color: s.color });
+            }
+            else if (p.y !== null) {
+                rows.push({ label: s.name, value: fmt(p.y), color: s.color });
+            }
+        }
+        for (const note of notes.get(k) ?? [])
+            rows.push({ label: note.label, value: '', color: note.color });
+        return rows;
+    };
+    const scatterOnly = visible.length > 0 && visible.every((s) => s.kind === 'scatter');
+    const items = [];
+    const hits = [];
+    if (scatterOnly) {
+        // Cada punto es un elemento.
+        for (const s of visible) {
+            for (const p of points.get(s)) {
+                if (p.y === null || !inView(p.key))
+                    continue;
+                const item = items.length;
+                const x = xPos(p.key);
+                const y = yPos(s.axis, p.y);
+                const label = `${s.name} · ${xFormatLong(p.key)}`;
+                items.push({
+                    index: item,
+                    label,
+                    title: s.name,
+                    rows: [
+                        { label: xAxis?.label ?? 'X', value: xFormatLong(p.key), color: s.color },
+                        { label: axisOf(s.axis)?.label ?? 'Y', value: scales[s.axis].format(p.y), color: s.color },
+                    ],
+                    x,
+                    y,
+                });
+                hits.push({ k: 'rect', item, x: x - s.size - 3, y: y - s.size - 3, w: 2 * s.size + 6, h: 2 * s.size + 6 });
+            }
+        }
+        // Los puntos se resaltan por su posición en `items`.
+        let n = 0;
+        for (const shape of front)
+            if (shape.k === 'circle' && shape.item === -1)
+                shape.item = n++;
+    }
+    else {
+        const shown = keys.filter(inView);
+        shown.forEach((k, i) => {
+            const x = xPos(k);
+            const prev = i ? (xPos(shown[i - 1]) + x) / 2 : plot.left;
+            const next = i < shown.length - 1 ? (xPos(shown[i + 1]) + x) / 2 : plot.right;
+            const position = items.length;
+            const title = xFormatLong(k);
+            items.push({ index: keys.indexOf(k), key: k, label: title, title, rows: rowsAt(k), x, y: pointTop.get(k) ?? plot.top, cursor: { x, y1: plot.top, y2: plot.bottom } });
+            hits.push({ k: 'rect', item: position, x: round(Math.max(plot.left, prev)), y: plot.top, w: round(Math.max(1, Math.min(plot.right, next) - Math.max(plot.left, prev))), h: plot.height });
+        });
+        // Barras, velas y puntos se resaltan por la posición de su clave en `items`.
+        const position = new Map(shown.map((k, i) => [keys.indexOf(k), i]));
+        for (const shape of [...data, ...front]) {
+            if (shape.item !== undefined && shape.item >= 0)
+                shape.item = position.get(shape.item);
+        }
+    }
+    return {
+        shapes,
+        data,
+        front,
+        hits,
+        items,
+        legend: legendOf(all),
+        table: {
+            head: all.map((s) => s.name),
+            rows: keys.map((k) => ({
+                label: xFormatLong(k),
+                cells: all.map((s) => {
+                    const p = points.get(s).find((q) => q.key === k);
+                    const fmt = scales[s.axis].format;
+                    if (!p)
+                        return '';
+                    if (s.kind === 'candlestick') {
+                        return [p.open, p.high, p.low, p.close].some((v) => v === null)
+                            ? ''
+                            : `${t.open} ${fmt(p.open)}, ${t.high} ${fmt(p.high)}, ${t.low} ${fmt(p.low)}, ${t.close} ${fmt(p.close)}`;
+                    }
+                    if (s.kind === 'rangeArea')
+                        return p.low === null || p.high === null ? '' : `${fmt(p.low)} – ${fmt(p.high)}`;
+                    return p.y === null ? '' : fmt(p.y);
+                }),
+            })),
+        },
+        clip: { x: plot.left, y: plot.top - 6, w: plot.width, h: plot.height + 12 },
+        zoomed: d0 > full[0] + span * 1e-9 || d1 < full[1] - span * 1e-9,
+        domain: full,
+        window: [d0, d1],
+        step: minGap,
+    };
+}
+function legendOf(series) {
+    return series.map((s) => ({ index: s.index, label: s.name, color: s.kind === 'candlestick' ? s.upColor : s.color }));
+}
+
+let nextId = 0;
 /**
- * Chart de CaribeNG: gráficos vectoriales SVG accesibles sin dependencias externas
- * (soporta tipos `bar`, `line`, `doughnut` y `pie`).
+ * Chart de CaribeNG: gráficos SVG accesibles y sin dependencias.
+ *
+ * - Cartesianos: `bar`, `horizontalBar`, `line`, `area` y `waterfall` (cascada).
+ * - Circulares: `pie`, `doughnut`, `radialBar` y `gauge` (medidor).
+ * - Radiales: `radar` y `polarArea`. Matrices: `heatmap` y `treemap`.
+ * - `stacked` apila barras y áreas; en `bar`, una serie con `type: 'line'` se dibuja como línea.
+ * - `sparkline` quita ejes, rejilla y leyenda (minigráfico para tarjetas o tablas).
+ * - `valueFormat` y `locale` formatean los valores.
+ * - Tooltip con ratón y teclado (flechas), leyenda que oculta series y una tabla de
+ *   datos para lectores de pantalla.
+ *
+ * Cada tipo lo dibuja un renderer (`renderers/`) que devuelve una escena: formas,
+ * zonas de clic y elementos navegables. Este componente solo la pinta.
+ *
+ * @example
+ * ```html
+ * <cb-chart type="bar" [data]="ventas" [valueFormat]="{ style: 'currency', currency: 'COP' }" />
+ * <cb-chart type="radar" [data]="evaluacion" />
+ * <cb-chart type="gauge" [data]="{ labels: ['Cumplimiento'], datasets: [{ label: 'Meta', data: [72] }] }" />
+ * ```
  */
 class CbChart {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.instructionsId = `cb-chart-${++nextId}-help`;
+        this.clipId = `cb-chart-${nextId}-clip`;
         this.type = input('bar', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * Datos. En el modo rápido, `{ labels, datasets }`. En el modo composable (con
+         * series hijas como `<cb-chart-line>`), un array de registros.
+         */
         this.data = input({ labels: [], datasets: [] }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Alto del gráfico en píxeles; el ancho se adapta al contenedor. */
         this.height = input(220, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
         this.showLegend = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Gráfico de datos', /* @ts-ignore */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.gridLines = computed(() => {
-            const plotTop = 18;
-            const plotBottom = Math.max(60, this.height() - 32);
-            const step = (plotBottom - plotTop) / 3;
-            return [plotTop, plotTop + step, plotTop + step * 2, plotBottom];
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "gridLines" }] : /* istanbul ignore next */ []));
-        this.maxValue = computed(() => {
-            const all = this.data().datasets.flatMap((d) => d.data);
-            return Math.max(1, ...all, 0);
+        /** Apila las series de barras o áreas. */
+        this.stacked = input(false, { ...(ngDevMode ? { debugName: "stacked" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Minigráfico sin ejes, rejilla ni leyenda. */
+        this.sparkline = input(false, { ...(ngDevMode ? { debugName: "sparkline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Formato de los valores (ejes, tooltip y tabla). */
+        this.valueFormat = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+        /** Locale BCP 47 para el formato (por defecto, el del navegador). */
+        this.locale = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        /** Valor mínimo del medidor (`gauge`). */
+        this.min = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Valor que representa el 100 % en `radialBar` y el máximo del medidor (`gauge`). */
+        this.max = input(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Franjas de color del medidor (`gauge`), p. ej. `[{ from: 0, to: 40, color: 'red' }]`. */
+        this.bands = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bands" }] : /* istanbul ignore next */ []));
+        /** Animación de entrada (se desactiva sola con `prefers-reduced-motion`). */
+        this.animate = input(true, { ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Modo composable: zoom y desplazamiento en el eje X (rueda, arrastre, `+` / `-` / `0`). */
+        this.zoom = input(false, { ...(ngDevMode ? { debugName: "zoom" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Modo composable: muestra al inicio solo los últimos `xWindow` del eje X (ms en un
+         * eje de tiempo, categorías…). Con datos en tiempo real la vista avanza con ellos.
+         */
+        this.xWindow = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "xWindow" }] : /* istanbul ignore next */ []));
+        /** Clic o Enter sobre una categoría, un segmento o una celda. */
+        this.itemSelect = output();
+        /** Series, ejes y referencias declarados como hijos (modo composable). */
+        this.seriesDefs = contentChildren(CbChartSeries, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "seriesDefs" }] : /* istanbul ignore next */ []));
+        this.axisDefs = contentChildren(CbChartAxis, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axisDefs" }] : /* istanbul ignore next */ []));
+        this.lineDefs = contentChildren(CbChartReferenceLine, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lineDefs" }] : /* istanbul ignore next */ []));
+        this.bandDefs = contentChildren(CbChartReferenceBand, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bandDefs" }] : /* istanbul ignore next */ []));
+        this.noteDefs = contentChildren(CbChartAnnotation, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noteDefs" }] : /* istanbul ignore next */ []));
+        /** Posición del elemento activo en `scene().items`. */
+        this.active = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        /** Series o elementos ocultos desde la leyenda. */
+        this.hidden = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        /** Ventana elegida con zoom (modo composable, sin grupo). */
+        this.localWindow = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "localWindow" }] : /* istanbul ignore next */ []));
+        /** Ancho real del área del gráfico (px); hasta medirlo, el ancho lógico por defecto. */
+        this.width = signal(W, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.plotRef = viewChild.required('plot');
+        this.dragging = null;
+        this.group = inject(CbChartGroupState, { optional: true });
+        this.document = inject(DOCUMENT);
+        this.host = inject(ElementRef);
+        this.name = computed(() => this.ariaLabel() ?? this.t().chart, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.composed = computed(() => this.seriesDefs().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "composed" }] : /* istanbul ignore next */ []));
+        this.zoomEnabled = computed(() => this.zoom() && this.composed() && !this.sparkline(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zoomEnabled" }] : /* istanbul ignore next */ []));
+        /** Datos del modo rápido (en el composable, `data` es un array de registros). */
+        this.chartData = computed(() => {
+            const data = this.data();
+            return Array.isArray(data) ? { labels: [], datasets: [] } : data;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-        this.xLabels = computed(() => {
-            const labels = this.data().labels;
-            if (!labels.length)
-                return [];
-            const plotLeft = 48;
-            const plotWidth = 440;
-            const step = plotWidth / labels.length;
-            return labels.map((text, index) => ({
-                index,
-                text,
-                x: plotLeft + step * index + step / 2,
-            }));
+        ...(ngDevMode ? [{ debugName: "chartData" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => {
+            if (this.composed())
+                return !this.composedSpec().series.some((s) => s.records.length);
+            const { labels, datasets } = this.chartData();
+            return !datasets.length || (this.type() !== 'gauge' && !labels.length);
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "xLabels" }] : /* istanbul ignore next */ []));
-        this.bars = computed(() => {
-            const { labels, datasets } = this.data();
-            if (!labels.length || !datasets.length)
-                return [];
-            const plotTop = 18;
-            const plotBottom = Math.max(60, this.height() - 32);
-            const plotHeight = plotBottom - plotTop;
-            const plotLeft = 48;
-            const plotWidth = 440;
-            const groupWidth = plotWidth / labels.length;
-            const barWidth = Math.max(8, Math.min(34, (groupWidth - 16) / datasets.length));
-            const max = this.maxValue();
-            const result = [];
-            labels.forEach((lbl, li) => {
-                const groupStart = plotLeft + groupWidth * li + (groupWidth - barWidth * datasets.length) / 2;
-                datasets.forEach((ds, di) => {
-                    const val = Math.max(0, ds.data[li] ?? 0);
-                    const h = (val / max) * plotHeight;
-                    const color = ds.color ?? DEFAULT_PALETTE[di % DEFAULT_PALETTE.length];
-                    result.push({
-                        key: `${di}-${li}`,
-                        x: Number((groupStart + di * barWidth).toFixed(2)),
-                        y: Number((plotBottom - h).toFixed(2)),
-                        w: Number(Math.max(4, barWidth - 3).toFixed(2)),
-                        h: Number(Math.max(2, h).toFixed(2)),
-                        color,
-                        title: `${ds.label} (${lbl}): ${val}`,
-                    });
-                });
-            });
-            return result;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
-        this.lines = computed(() => {
-            const { labels, datasets } = this.data();
-            if (!labels.length || !datasets.length)
-                return [];
-            const plotTop = 18;
-            const plotBottom = Math.max(60, this.height() - 32);
-            const plotHeight = plotBottom - plotTop;
-            const plotLeft = 48;
-            const plotWidth = 440;
-            const step = plotWidth / labels.length;
-            const max = this.maxValue();
-            return datasets.map((ds, di) => {
-                const color = ds.color ?? DEFAULT_PALETTE[di % DEFAULT_PALETTE.length];
-                const points = labels.map((lbl, li) => {
-                    const val = Math.max(0, ds.data[li] ?? 0);
-                    const x = Number((plotLeft + step * li + step / 2).toFixed(2));
-                    const y = Number((plotBottom - (val / max) * plotHeight).toFixed(2));
-                    return {
-                        key: `${di}-${li}`,
-                        x,
-                        y,
-                        title: `${ds.label} (${lbl}): ${val}`,
-                    };
-                });
+        ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        this.numberFormat = computed(() => this.formatter(this.valueFormat()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
+        this.percentFormat = computed(() => new Intl.NumberFormat(this.locale(), { style: 'percent', maximumFractionDigits: 1 }).format, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "percentFormat" }] : /* istanbul ignore next */ []));
+        /** Lo declarado en los hijos, como datos planos para el renderer. */
+        this.composedSpec = computed(() => {
+            const defs = this.seriesDefs();
+            if (!defs.length)
+                return undefined;
+            const shared = this.data();
+            const records = Array.isArray(shared) ? shared : [];
+            const series = defs.map((d, index) => {
+                const field = (name) => (name in d ? d[name]() : name);
                 return {
-                    label: ds.label,
-                    color,
-                    points,
-                    pointsAttr: points.map((p) => `${p.x},${p.y}`).join(' '),
+                    kind: d.kind,
+                    index,
+                    name: d.name() || `${index + 1}`,
+                    color: d.color() ?? paletteColor(index),
+                    axis: d.axis(),
+                    records: d.data() ?? records,
+                    x: d.x(),
+                    y: field('y'),
+                    low: field('low'),
+                    high: field('high'),
+                    open: field('open'),
+                    close: field('close'),
+                    curve: 'curve' in d ? d.curve() : 'linear',
+                    dashed: 'dashed' in d ? d.dashed() : false,
+                    points: 'points' in d ? d.points() : true,
+                    stack: 'stack' in d ? d.stack() : undefined,
+                    size: 'size' in d ? d.size() : 5,
+                    variant: 'variant' in d ? d.variant() : 'candle',
+                    upColor: 'upColor' in d ? d.upColor() : '',
+                    downColor: 'downColor' in d ? d.downColor() : '',
                 };
             });
+            return {
+                series,
+                axes: this.axisDefs().map((a) => ({
+                    position: a.position(),
+                    type: a.type(),
+                    min: a.min(),
+                    max: a.max(),
+                    label: a.label(),
+                    format: a.format() === undefined ? undefined : this.formatter(a.format()),
+                    grid: a.grid(),
+                })),
+                refs: [
+                    ...this.bandDefs().map((b) => ({ kind: 'band', axis: b.axis(), from: b.from(), to: b.to(), label: b.label(), color: b.color() })),
+                    ...this.lineDefs().map((l) => ({ kind: 'line', axis: l.axis(), value: l.value(), label: l.label(), color: l.color() })),
+                    ...this.noteDefs().map((n) => ({ kind: 'note', axis: n.axis(), value: n.x(), y: n.y(), label: n.label(), color: n.color() })),
+                ],
+                window: this.zoomEnabled() ? this.window() : null,
+                xWindow: this.xWindow(),
+            };
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
-        this.circularRadius = computed(() => this.type() === 'pie' ? 38 : 62, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "circularRadius" }] : /* istanbul ignore next */ []));
-        this.circularSegments = computed(() => {
-            const { labels, datasets } = this.data();
-            const first = datasets[0];
-            if (!first || !first.data.length)
-                return [];
-            const r = this.circularRadius();
-            const circumference = 2 * Math.PI * r;
-            const total = Math.max(1, first.data.reduce((sum, v) => sum + Math.max(0, v), 0));
-            let accumulated = 0;
-            return first.data.map((raw, idx) => {
-                const val = Math.max(0, raw);
-                const len = (val / total) * circumference;
-                const offset = -accumulated;
-                accumulated += len;
-                const lbl = labels[idx] ?? `Item ${idx + 1}`;
-                return {
-                    key: `${idx}-${lbl}`,
-                    color: DEFAULT_PALETTE[idx % DEFAULT_PALETTE.length],
-                    dashArray: `${len.toFixed(2)} ${(circumference - len).toFixed(2)}`,
-                    dashOffset: offset.toFixed(2),
-                    title: `${lbl}: ${val}`,
-                };
-            });
+        ...(ngDevMode ? [{ debugName: "composedSpec" }] : /* istanbul ignore next */ []));
+        this.context = computed(() => {
+            const t = this.t();
+            return {
+                type: this.type(),
+                data: this.chartData(),
+                width: this.width(),
+                height: this.height(),
+                sparkline: this.sparkline(),
+                stacked: this.stacked(),
+                hidden: this.hidden(),
+                min: this.min(),
+                max: this.max(),
+                bands: this.bands(),
+                format: this.numberFormat(),
+                percent: this.percentFormat(),
+                locale: this.locale(),
+                text: { total: t.chartTotal, change: t.chartChange, open: t.chartOpen, high: t.chartHigh, low: t.chartLow, close: t.chartClose },
+                composed: this.composedSpec(),
+            };
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "circularSegments" }] : /* istanbul ignore next */ []));
-        this.legendItems = computed(() => {
-            const { labels, datasets } = this.data();
-            if (this.type() === 'doughnut' || this.type() === 'pie') {
-                return labels.map((label, idx) => ({
-                    label,
-                    color: DEFAULT_PALETTE[idx % DEFAULT_PALETTE.length],
-                }));
-            }
-            return datasets.map((ds, idx) => ({
-                label: ds.label,
-                color: ds.color ?? DEFAULT_PALETTE[idx % DEFAULT_PALETTE.length],
-            }));
+        ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+        /** Lo que se dibuja: lo calcula el renderer del tipo (o el composable si hay series hijas). */
+        this.scene = computed(() => {
+            if (this.isEmpty())
+                return emptyScene();
+            if (this.composed())
+                return renderComposed(this.context());
+            const render = CHART_RENDERERS[this.type()] ?? CHART_RENDERERS.bar;
+            return render(this.context());
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "scene" }] : /* istanbul ignore next */ []));
+        /**
+         * Elemento resaltado: el activo de este gráfico o, en un grupo, el del mismo
+         * valor de X activo en otra gráfica.
+         */
+        this.shown = computed(() => {
+            const local = this.active();
+            if (local !== null)
+                return local;
+            const key = this.group?.key();
+            if (key === null || key === undefined)
+                return null;
+            const i = this.scene().items.findIndex((item) => item.key === key);
+            return i < 0 ? null : i;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+        this.activeItem = computed(() => {
+            const i = this.shown();
+            return i === null ? null : (this.scene().items[i] ?? null);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
+        this.tooltip = computed(() => {
+            const item = this.activeItem();
+            if (!item)
+                return null;
+            return {
+                title: item.title,
+                rows: item.rows,
+                left: clamp((item.x / this.width()) * 100, 12, 88),
+                top: (item.y / this.height()) * 100,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        // --- Zoom (modo composable) ----------------------------------------------------------
+        /** Ventana elegida con zoom: la del grupo si lo hay, si no la propia. */
+        this.window = computed(() => (this.group ? this.group.window() : this.localWindow()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []));
+        /** Lo que anuncia el lector de pantalla al recorrer el gráfico con el teclado (solo el propio). */
+        this.announcement = computed(() => {
+            const i = this.active();
+            const item = i === null ? null : this.scene().items[i];
+            if (!item)
+                return '';
+            return `${item.title}: ${item.rows.map((r) => (r.label && r.value ? `${r.label} ${r.value}` : r.label || r.value)).join(', ')}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(([entry]) => {
+                const w = Math.round(entry.contentRect.width);
+                if (w > 0)
+                    this.width.set(w);
+            });
+            observer.observe(this.plotRef().nativeElement);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+        // En un grupo, el valor de X activo aquí se comparte con las demás gráficas.
+        effect(() => {
+            const i = this.active();
+            const group = this.group;
+            if (!group)
+                return;
+            untracked(() => group.key.set(i === null ? null : (this.scene().items[i]?.key ?? null)));
+        });
+    }
+    formatter(vf) {
+        return typeof vf === 'function' ? vf : new Intl.NumberFormat(this.locale(), vf ?? { maximumFractionDigits: 2 }).format;
+    }
+    setWindow(window) {
+        this.active.set(null);
+        if (this.group)
+            this.group.window.set(window);
+        else
+            this.localWindow.set(window);
+    }
+    /** Acerca (`factor` < 1) o aleja la ventana alrededor de `anchor` (0–1 dentro del área). */
+    zoomBy(factor, anchor = 0.5) {
+        const { domain, window, step } = this.scene();
+        if (!this.zoomEnabled() || !domain || !window)
+            return;
+        const [f0, f1] = domain;
+        const [a, b] = window;
+        const w = b - a;
+        const next = clamp(w * factor, Math.min(f1 - f0, (step ?? (f1 - f0) / 100) * 2), f1 - f0);
+        const start = clamp(a + w * anchor - next * anchor, f0, f1 - next);
+        const end = start + next;
+        this.setWindow({ start, end, pinned: end >= f1 - (f1 - f0) * 1e-6 });
+    }
+    /** Vuelve a la vista inicial (todo, o los últimos `xWindow`). */
+    resetZoom() {
+        this.setWindow(null);
+    }
+    /** Posición del ratón dentro del área de dibujo (0–1). */
+    pointerFraction(event) {
+        const clip = this.scene().clip;
+        const svg = event.currentTarget;
+        const rect = svg.getBoundingClientRect();
+        if (!clip || !rect.width)
+            return 0.5;
+        const x = ((event.clientX - rect.left) * this.width()) / rect.width;
+        return clamp((x - clip.x) / clip.w, 0, 1);
+    }
+    onWheel(event) {
+        if (!this.zoomEnabled() || !event.deltaY)
+            return;
+        event.preventDefault();
+        this.zoomBy(event.deltaY < 0 ? 0.8 : 1.25, this.pointerFraction(event));
+    }
+    onPointerDown(event) {
+        const window = this.scene().window;
+        if (!this.zoomEnabled() || !this.scene().zoomed || !window || event.button !== 0)
+            return;
+        this.dragging = { x: event.clientX, window };
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+    }
+    onPointerMove(event) {
+        const drag = this.dragging;
+        const { clip, domain } = this.scene();
+        if (!drag || !clip || !domain)
+            return;
+        const svg = event.currentTarget;
+        const scale = this.width() / (svg.getBoundingClientRect().width || this.width());
+        const [a, b] = drag.window;
+        const w = b - a;
+        const shift = (((drag.x - event.clientX) * scale) / clip.w) * w;
+        const start = clamp(a + shift, domain[0], domain[1] - w);
+        this.setWindow({ start, end: start + w, pinned: start + w >= domain[1] - w * 1e-6 });
+    }
+    /** Clases de una forma: atenuada si hay otro elemento activo, resaltada si es el activo. */
+    shapeClass(s) {
+        const active = this.shown();
+        if (s.item === undefined || active === null)
+            return s.cls;
+        if (s.item === active)
+            return `${s.cls} cb-is-active`;
+        return s.k === 'circle' ? s.cls : `${s.cls} cb-is-dim`;
+    }
+    // --- Exportar ------------------------------------------------------------------------
+    /**
+     * El gráfico como SVG autocontenido: estilos y colores resueltos (incluido el tema),
+     * fondo y leyenda. Solo en el navegador.
+     */
+    toSvg() {
+        const svg = this.plotRef().nativeElement.querySelector('svg');
+        if (!svg)
+            return '';
+        const view = this.document.defaultView;
+        const clone = svg.cloneNode(true);
+        const source = [svg, ...Array.from(svg.querySelectorAll('*'))];
+        const target = [clone, ...Array.from(clone.querySelectorAll('*'))];
+        source.forEach((el, i) => {
+            const style = view?.getComputedStyle(el);
+            const out = target[i];
+            if (!style)
+                return;
+            const props = EXPORT_STYLES.map((p) => `${p}:${style.getPropertyValue(p)}`).filter((d) => !d.endsWith(':'));
+            out.setAttribute('style', `${props.join(';')};animation:none;transition:none`);
+            out.removeAttribute('class');
+            out.removeAttribute('_ngcontent');
+        });
+        clone.querySelectorAll('[data-hit]').forEach((el) => el.remove());
+        // Leyenda y fondo: el SVG exportado se ve igual que la tarjeta.
+        const host = this.host.nativeElement;
+        const hostStyle = view?.getComputedStyle(host);
+        const legend = this.showLegend() && !this.sparkline() ? this.scene().legend.filter((l) => !this.hidden().has(l.index)) : [];
+        const width = this.width();
+        const legendH = legend.length ? 28 : 0;
+        const height = this.height() + legendH;
+        const ns = 'http://www.w3.org/2000/svg';
+        clone.setAttribute('xmlns', ns);
+        clone.setAttribute('width', String(width));
+        clone.setAttribute('height', String(height));
+        clone.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        clone.removeAttribute('aria-hidden');
+        const bg = this.document.createElementNS(ns, 'rect');
+        bg.setAttribute('width', '100%');
+        bg.setAttribute('height', '100%');
+        bg.setAttribute('fill', hostStyle?.backgroundColor || '#fff');
+        clone.insertBefore(bg, clone.firstChild);
+        const text = hostStyle?.color || '#000';
+        const font = hostStyle?.fontFamily || 'sans-serif';
+        let x = 8;
+        for (const item of legend) {
+            const swatch = this.document.createElementNS(ns, 'circle');
+            swatch.setAttribute('cx', String(x + 5));
+            swatch.setAttribute('cy', String(this.height() + 14));
+            swatch.setAttribute('r', '5');
+            swatch.setAttribute('fill', resolveColor(item.color, host, view));
+            const label = this.document.createElementNS(ns, 'text');
+            label.setAttribute('x', String(x + 14));
+            label.setAttribute('y', String(this.height() + 18));
+            label.setAttribute('style', `fill:${text};font:12px ${font}`);
+            label.textContent = item.label;
+            clone.append(swatch, label);
+            x += 26 + item.label.length * 7;
+        }
+        const title = this.document.createElementNS(ns, 'title');
+        title.textContent = this.name();
+        clone.insertBefore(title, clone.firstChild);
+        return new XMLSerializer().serializeToString(clone);
+    }
+    /** El gráfico como imagen PNG (`scale` multiplica la resolución). */
+    toPng(scale = 2) {
+        const svg = this.toSvg();
+        const width = Number(/width="(\d+)"/.exec(svg)?.[1] ?? this.width());
+        const height = Number(/height="(\d+)"/.exec(svg)?.[1] ?? this.height());
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }));
+            image.onload = () => {
+                const canvas = this.document.createElement('canvas');
+                canvas.width = Math.round(width * scale);
+                canvas.height = Math.round(height * scale);
+                const ctx = canvas.getContext('2d');
+                if (!ctx)
+                    return reject(new Error('Canvas 2D no disponible'));
+                ctx.scale(scale, scale);
+                ctx.drawImage(image, 0, 0, width, height);
+                URL.revokeObjectURL(url);
+                canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('No se pudo generar el PNG'))), 'image/png');
+            };
+            image.onerror = () => {
+                URL.revokeObjectURL(url);
+                reject(new Error('No se pudo dibujar el SVG'));
+            };
+            image.src = url;
+        });
+    }
+    /** Descarga el gráfico como PNG o SVG. */
+    async download(format = 'png', fileName = 'chart') {
+        const blob = format === 'svg' ? new Blob([this.toSvg()], { type: 'image/svg+xml;charset=utf-8' }) : await this.toPng();
+        const url = URL.createObjectURL(blob);
+        const a = this.document.createElement('a');
+        a.href = url;
+        a.download = `${fileName}.${format}`;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+    // --- Interacción --------------------------------------------------------------------
+    hover(item) {
+        if (item !== undefined)
+            this.active.set(item);
+    }
+    onFocus() {
+        if (this.active() === null && this.scene().items.length)
+            this.active.set(0);
+    }
+    onKeydown(event) {
+        const count = this.scene().items.length;
+        if (!count)
+            return;
+        const cols = this.scene().columns;
+        const cur = this.active() ?? -1;
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = (cur + 1) % count;
+                break;
+            case 'ArrowLeft':
+                next = cur <= 0 ? count - 1 : cur - 1;
+                break;
+            case 'ArrowDown':
+                next = cols ? Math.min(count - 1, cur < 0 ? 0 : cur + cols) : (cur + 1) % count;
+                break;
+            case 'ArrowUp':
+                next = cols ? Math.max(0, cur - cols) : cur <= 0 ? count - 1 : cur - 1;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = count - 1;
+                break;
+            case 'Enter':
+                if (cur >= 0)
+                    this.select(cur);
+                return;
+            case 'Escape':
+                next = null;
+                break;
+            case '+':
+            case '=':
+            case '-':
+            case '0': {
+                if (!this.zoomEnabled())
+                    return;
+                event.preventDefault();
+                if (event.key === '0')
+                    return this.resetZoom();
+                const item = this.activeItem();
+                const clip = this.scene().clip;
+                const anchor = item && clip ? clamp((item.x - clip.x) / clip.w, 0, 1) : 0.5;
+                return this.zoomBy(event.key === '-' ? 1.5 : 1 / 1.5, anchor);
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.active.set(next);
+    }
+    select(position) {
+        const item = position === undefined ? undefined : this.scene().items[position];
+        if (item)
+            this.itemSelect.emit({ index: item.index, label: item.label });
+    }
+    /** Oculta o muestra una serie (o un elemento en los circulares). */
+    toggle(index) {
+        this.active.set(null);
+        this.hidden.update((set) => {
+            const next = new Set(set);
+            if (next.has(index))
+                next.delete(index);
+            else
+                next.add(index);
+            return next;
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChart, isStandalone: true, selector: "cb-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cb-chart" }, ngImport: i0, template: `
-    <svg
-      class="cb-chart__svg"
-      [attr.viewBox]="'0 0 520 ' + height()"
-      role="img"
-      [attr.aria-label]="ariaLabel()"
-    >
-      @if (type() === 'bar' || type() === 'line') {
-        @for (lineY of gridLines(); track lineY) {
-          <line
-            class="cb-chart__grid-line"
-            x1="40"
-            [attr.y1]="lineY"
-            x2="496"
-            [attr.y2]="lineY"
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbChart, isStandalone: true, selector: "cb-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, bands: { classPropertyName: "bands", publicName: "bands", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, xWindow: { classPropertyName: "xWindow", publicName: "xWindow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class.cb-chart--sparkline": "sparkline()", "class.cb-chart--animate": "animate()" }, classAttribute: "cb-chart" }, queries: [{ propertyName: "seriesDefs", predicate: CbChartSeries, isSignal: true }, { propertyName: "axisDefs", predicate: CbChartAxis, isSignal: true }, { propertyName: "lineDefs", predicate: CbChartReferenceLine, isSignal: true }, { propertyName: "bandDefs", predicate: CbChartReferenceBand, isSignal: true }, { propertyName: "noteDefs", predicate: CbChartAnnotation, isSignal: true }], viewQueries: [{ propertyName: "plotRef", first: true, predicate: ["plot"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #shapeTpl let-s>
+      @switch (s.k) {
+        @case ('rect') {
+          <svg:rect
+            [attr.class]="shapeClass(s)"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.width]="s.w"
+            [attr.height]="s.h"
+            [attr.rx]="s.rx"
+            [attr.fill]="s.fill"
+            (mouseenter)="hover(s.item)"
+            (click)="select(s.item)"
           />
         }
-
-        @if (type() === 'bar') {
-          @for (bar of bars(); track bar.key) {
-            <rect
-              class="cb-chart__bar"
-              [attr.x]="bar.x"
-              [attr.y]="bar.y"
-              [attr.width]="bar.w"
-              [attr.height]="bar.h"
-              rx="4"
-              [attr.fill]="bar.color"
-            >
-              <title>{{ bar.title }}</title>
-            </rect>
-          }
+        @case ('path') {
+          <svg:path
+            [attr.class]="shapeClass(s)"
+            [attr.d]="s.d"
+            [attr.fill]="s.fill"
+            [attr.stroke]="s.stroke"
+            [attr.pathLength]="s.pathLength"
+            (mouseenter)="hover(s.item)"
+            (click)="select(s.item)"
+          />
+        }
+        @case ('circle') {
+          <svg:circle
+            [attr.class]="shapeClass(s)"
+            [attr.cx]="s.cx"
+            [attr.cy]="s.cy"
+            [attr.r]="s.item !== undefined && shown() === s.item ? s.rActive : s.r"
+            [attr.fill]="s.fill"
+          />
+        }
+        @case ('line') {
+          <svg:line [attr.class]="s.cls" [attr.x1]="s.x1" [attr.y1]="s.y1" [attr.x2]="s.x2" [attr.y2]="s.y2" [attr.stroke]="s.stroke" />
         }
+        @case ('text') {
+          <svg:text
+            [attr.class]="s.cls"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.text-anchor]="s.anchor"
+            [attr.dominant-baseline]="s.baseline"
+            [attr.fill]="s.fill"
+          >{{ s.text }}</svg:text>
+        }
+      }
+    </ng-template>
 
-        @if (type() === 'line') {
-          @for (series of lines(); track series.label) {
-            <polyline
-              fill="none"
-              [attr.stroke]="series.color"
-              stroke-width="2.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              [attr.points]="series.pointsAttr"
-            />
-            @for (pt of series.points; track pt.key) {
-              <circle
-                [attr.cx]="pt.x"
-                [attr.cy]="pt.y"
-                r="4"
-                [attr.fill]="series.color"
-              >
-                <title>{{ pt.title }}</title>
-              </circle>
+    <div
+      #plot
+      class="cb-chart__plot"
+      tabindex="0"
+      role="group"
+      [attr.aria-label]="name()"
+      [attr.aria-describedby]="instructionsId"
+      (keydown)="onKeydown($event)"
+      (focus)="onFocus()"
+      (blur)="active.set(null)"
+    >
+      <svg
+        class="cb-chart__svg"
+        [class.cb-chart__svg--pannable]="scene().zoomed"
+        [attr.viewBox]="'0 0 ' + width() + ' ' + height()"
+        aria-hidden="true"
+        (mouseleave)="active.set(null)"
+        (wheel)="onWheel($event)"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="dragging = null"
+        (pointercancel)="dragging = null"
+        (dblclick)="resetZoom()"
+      >
+        @if (scene().clip; as clip) {
+          <defs>
+            <clipPath [attr.id]="clipId">
+              <rect [attr.x]="clip.x" [attr.y]="clip.y" [attr.width]="clip.w" [attr.height]="clip.h" />
+            </clipPath>
+          </defs>
+        }
+        @if (isEmpty()) {
+          <text class="cb-chart__empty" [attr.x]="width() / 2" [attr.y]="height() / 2" text-anchor="middle">{{ t().noData }}</text>
+        } @else {
+          @for (s of scene().shapes; track $index) {
+            <ng-container *ngTemplateOutlet="shapeTpl; context: { $implicit: s }" />
+          }
+          <g [attr.clip-path]="scene().clip ? 'url(#' + clipId + ')' : null">
+            @for (s of scene().data ?? []; track $index) {
+              <ng-container *ngTemplateOutlet="shapeTpl; context: { $implicit: s }" />
+            }
+            @if (activeItem()?.cursor; as c) {
+              <line class="cb-chart__cursor" [attr.x1]="c.x" [attr.y1]="c.y1" [attr.x2]="c.x" [attr.y2]="c.y2" />
+            }
+            @for (s of scene().front ?? []; track $index) {
+              <ng-container *ngTemplateOutlet="shapeTpl; context: { $implicit: s }" />
+            }
+          </g>
+          @if (scene().center; as center) {
+            <text class="cb-chart__center" [attr.x]="center.x" [attr.y]="center.y" text-anchor="middle" dominant-baseline="central">
+              {{ center.text }}
+            </text>
+            @if (center.sub) {
+              <text class="cb-chart__center-sub" [attr.x]="center.x" [attr.y]="center.y + 22" text-anchor="middle" dominant-baseline="central">
+                {{ center.sub }}
+              </text>
+            }
+          }
+          <!-- Zonas invisibles por elemento: reciben el ratón y el clic. -->
+          @for (hit of scene().hits; track $index) {
+            @if (hit.k === 'rect') {
+              <rect
+                data-hit
+                class="cb-chart__hit"
+                [attr.x]="hit.x"
+                [attr.y]="hit.y"
+                [attr.width]="hit.w"
+                [attr.height]="hit.h"
+                (mouseenter)="hover(hit.item)"
+                (click)="select(hit.item)"
+              />
+            } @else {
+              <path data-hit class="cb-chart__hit" [attr.d]="hit.d" (mouseenter)="hover(hit.item)" (click)="select(hit.item)" />
             }
           }
         }
+      </svg>
 
-        @for (lbl of xLabels(); track lbl.index) {
-          <text
-            class="cb-chart__axis-label"
-            [attr.x]="lbl.x"
-            [attr.y]="height() - 8"
-            text-anchor="middle"
-          >
-            {{ lbl.text }}
-          </text>
-        }
-      } @else {
-        @for (seg of circularSegments(); track seg.key) {
-          <circle
-            cx="260"
-            [attr.cy]="height() / 2"
-            [attr.r]="circularRadius()"
-            fill="transparent"
-            [attr.stroke]="seg.color"
-            [attr.stroke-width]="type() === 'pie' ? circularRadius() * 2 : 34"
-            [attr.stroke-dasharray]="seg.dashArray"
-            [attr.stroke-dashoffset]="seg.dashOffset"
-            [attr.transform]="'rotate(-90 260 ' + height() / 2 + ')'"
-          >
-            <title>{{ seg.title }}</title>
-          </circle>
-        }
+      @if (tooltip(); as tip) {
+        <div class="cb-chart__tooltip" aria-hidden="true" [style.left.%]="tip.left" [style.top.%]="tip.top">
+          <strong class="cb-chart__tooltip-title">{{ tip.title }}</strong>
+          @for (row of tip.rows; track $index) {
+            <span class="cb-chart__tooltip-row">
+              <span class="cb-chart__swatch" [style.background]="row.color"></span>
+              {{ row.label }}
+              <strong class="cb-chart__tooltip-value">{{ row.value }}</strong>
+            </span>
+          }
+        </div>
+      }
+      @if (zoomEnabled() && window()) {
+        <button type="button" class="cb-chart__reset" (click)="resetZoom()">{{ t().chartResetZoom }}</button>
       }
-    </svg>
+    </div>
 
-    @if (showLegend() && legendItems().length > 0) {
-      <ul class="cb-chart__legend" aria-label="Leyenda del gráfico">
-        @for (item of legendItems(); track item.label) {
-          <li class="cb-chart__legend-item">
-            <span class="cb-chart__swatch" [style.background]="item.color"></span>
-            <span>{{ item.label }}</span>
+    @if (showLegend() && !sparkline() && scene().legend.length) {
+      <ul class="cb-chart__legend" [attr.aria-label]="t().chartLegend">
+        @for (item of scene().legend; track item.index) {
+          <li>
+            <button
+              type="button"
+              class="cb-chart__legend-item"
+              [class.cb-is-hidden]="hidden().has(item.index)"
+              [attr.aria-pressed]="!hidden().has(item.index)"
+              (click)="toggle(item.index)"
+            >
+              <span class="cb-chart__swatch" [style.background]="item.color"></span>
+              {{ item.label }}
+            </button>
           </li>
         }
       </ul>
     }
-  `, isInline: true, styles: [".cb-chart{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);width:100%;padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-border-subtle, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-surface-card, #ffffff);font-family:var(--cb-font-sans, inherit)}.cb-chart__svg{width:100%;height:auto;overflow:visible}.cb-chart__grid-line{stroke:var(--cb-border-subtle, #e2e8f0);stroke-dasharray:3 3}.cb-chart__axis-label{fill:var(--cb-text-secondary, #64748b);font-size:11px}.cb-chart__bar{transition:opacity .15s ease}.cb-chart__bar:hover{opacity:.85}.cb-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-4, 1rem);margin:0;padding:0;list-style:none}.cb-chart__legend-item{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--cb-text-xs, .75rem);color:var(--cb-text-secondary, #475569)}.cb-chart__swatch{width:.65rem;height:.65rem;border-radius:999px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+
+    <span class="cb-chart__sr" [id]="instructionsId">{{ t().chartInstructions }} {{ zoomEnabled() ? t().chartZoomInstructions : '' }}</span>
+    <span class="cb-chart__sr" aria-live="polite" aria-atomic="true">{{ announcement() }}</span>
+    <!-- Los mismos datos como tabla, para lectores de pantalla. -->
+    <table class="cb-chart__sr">
+      <caption>{{ name() }}</caption>
+      @if (scene().table.head; as head) {
+        <thead>
+          <tr>
+            <td></td>
+            @for (col of head; track $index) {
+              <th scope="col">{{ col }}</th>
+            }
+          </tr>
+        </thead>
+      }
+      <tbody>
+        @for (row of scene().table.rows; track $index) {
+          <tr>
+            <th scope="row">{{ row.label }}</th>
+            @for (cell of row.cells; track $index) {
+              <td>{{ cell }}</td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;width:100%;padding:var(--cb-space-4, 1rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text);background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem)}:host(.cb-chart--sparkline){padding:0;background:transparent;border:0}.cb-chart__plot{position:relative;border-radius:var(--cb-radius-md, .5rem);outline:none}.cb-chart__plot:focus-visible{box-shadow:0 0 0 2px var(--cb-color-focus-ring)}.cb-chart__svg{display:block;width:100%;height:auto;overflow:visible}.cb-chart__grid{stroke:var(--cb-color-border);stroke-dasharray:3 3}.cb-chart__grid--zero{stroke:var(--cb-color-border-strong);stroke-dasharray:none}.cb-chart__axis{fill:var(--cb-color-text-muted);font-size:11px;font-variant-numeric:tabular-nums}.cb-chart__empty{fill:var(--cb-color-text-muted);font-size:13px}.cb-chart__bar,.cb-chart__slice{transition:opacity var(--cb-duration-fast, .12s) ease}.cb-is-dim{opacity:.35}.cb-chart__line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}:host(.cb-chart--sparkline) .cb-chart__line{stroke-width:2}.cb-chart__area{opacity:.22}.cb-chart__point{stroke:var(--cb-color-surface-raised);stroke-width:2}.cb-chart__cursor{stroke:var(--cb-color-border-strong);stroke-dasharray:4 3}.cb-chart__track{fill:var(--cb-color-surface-subtle)}.cb-chart__center{fill:var(--cb-color-text);font-size:20px;font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-chart__center-sub{fill:var(--cb-color-text-muted);font-size:12px}.cb-chart__hit{fill:transparent;cursor:pointer}.cb-chart__axis--tick{font-size:9px}.cb-chart__baseline,.cb-chart__tick{stroke:var(--cb-color-border-strong)}.cb-chart__axis-title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-chart__ref-line{stroke:var(--cb-color-text-muted);stroke-width:1.25;stroke-dasharray:5 4}.cb-chart__ref-label{fill:var(--cb-color-text-muted);font-size:11px;font-weight:var(--cb-font-weight-medium, 500);paint-order:stroke;stroke:var(--cb-color-surface-raised);stroke-width:3px;stroke-linejoin:round}.cb-chart__ref-band{opacity:.1}.cb-chart__line--dashed{stroke-dasharray:6 4}.cb-chart__line--thin{stroke-width:1.25}.cb-chart__area--range{opacity:.18}.cb-chart__point--scatter{fill-opacity:.75;stroke-width:1;cursor:pointer}.cb-chart__wick{stroke-width:1.25}.cb-chart__candle{transition:opacity var(--cb-duration-fast, .12s) ease}.cb-chart__svg--pannable{cursor:grab;touch-action:pan-y}.cb-chart__svg--pannable:active{cursor:grabbing}.cb-chart__reset{position:absolute;top:0;right:0;padding:.2rem .55rem;font:inherit;font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text);background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm, .25rem);cursor:pointer}.cb-chart__reset:hover{background:var(--cb-color-surface-hover)}.cb-chart__reset:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-chart__note-dot{stroke:var(--cb-color-surface-raised);stroke-width:2}.cb-chart__note{fill:var(--cb-color-text);font-size:11px;font-weight:var(--cb-font-weight-semibold, 600);paint-order:stroke;stroke:var(--cb-color-surface-raised);stroke-width:4px;stroke-linejoin:round;pointer-events:none}.cb-chart__connector{stroke:var(--cb-color-border-strong);stroke-dasharray:3 3}.cb-chart__band{opacity:.85}.cb-chart__ring{fill:none;stroke:var(--cb-color-surface-raised);stroke-opacity:.7;pointer-events:none}.cb-chart__slice--polar{stroke:var(--cb-color-surface-raised);stroke-width:1.5}.cb-chart__cell{cursor:pointer;transition:opacity var(--cb-duration-fast, .12s) ease}.cb-chart__cell--tree{stroke:var(--cb-color-surface-raised);stroke-width:2}.cb-chart__cell.cb-is-active{stroke:var(--cb-color-text);stroke-width:2}.cb-chart__label{fill:var(--cb-color-text);font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}.cb-chart__label--inverse{fill:#fff;paint-order:stroke;stroke:#00000059;stroke-width:3px;stroke-linejoin:round}.cb-chart__label--strong{font-size:12px;font-weight:var(--cb-font-weight-semibold, 600)}@media(forced-colors:active){.cb-chart__cell,.cb-chart__bar,.cb-chart__slice{stroke:CanvasText;stroke-width:1}.cb-chart__label,.cb-chart__label--inverse{fill:CanvasText}}.cb-chart__slice{cursor:pointer}.cb-chart__tooltip{position:absolute;z-index:1;display:grid;gap:.15rem;min-width:7rem;padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text);white-space:nowrap;pointer-events:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);box-shadow:var(--cb-shadow-md);transform:translate(-50%,calc(-100% - 10px))}.cb-chart__tooltip-title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-chart__tooltip-row{display:flex;align-items:center;gap:.4rem}.cb-chart__tooltip-value{margin-left:auto;padding-left:var(--cb-space-3, .75rem);font-variant-numeric:tabular-nums}.cb-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);margin:0;padding:0;list-style:none}.cb-chart__legend-item{display:inline-flex;align-items:center;gap:.4rem;padding:.15rem .4rem;font:inherit;font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm, .25rem);cursor:pointer}.cb-chart__legend-item:hover{background-color:var(--cb-color-surface-hover)}.cb-chart__legend-item:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-chart__legend-item.cb-is-hidden{text-decoration:line-through;opacity:.55}.cb-chart__swatch{flex:none;width:.65rem;height:.65rem;border-radius:999px}.cb-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host(.cb-chart--animate) .cb-chart__bar{transform-box:fill-box;transform-origin:bottom;animation:cb-chart-grow-y .5s var(--cb-ease, ease) both}:host(.cb-chart--animate) .cb-chart__bar--horizontal{transform-origin:left;animation-name:cb-chart-grow-x}:host(.cb-chart--animate) .cb-chart__line{stroke-dasharray:1;animation:cb-chart-draw .7s var(--cb-ease, ease) both}:host(.cb-chart--animate) .cb-chart__area,:host(.cb-chart--animate) .cb-chart__slice,:host(.cb-chart--animate) .cb-chart__cell{animation:cb-chart-fade .5s var(--cb-ease, ease) both}@keyframes cb-chart-grow-y{0%{transform:scaleY(0)}}@keyframes cb-chart-grow-x{0%{transform:scaleX(0)}}@keyframes cb-chart-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes cb-chart-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){:host(.cb-chart--animate) .cb-chart__bar,:host(.cb-chart--animate) .cb-chart__line,:host(.cb-chart--animate) .cb-chart__area,:host(.cb-chart--animate) .cb-chart__slice,:host(.cb-chart--animate) .cb-chart__cell{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbChart, decorators: [{
             type: Component,
-            args: [{ selector: 'cb-chart', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+            args: [{ selector: 'cb-chart', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [NgTemplateOutlet], host: {
                         class: 'cb-chart',
+                        '[class.cb-chart--sparkline]': 'sparkline()',
+                        '[class.cb-chart--animate]': 'animate()',
                     }, template: `
-    <svg
-      class="cb-chart__svg"
-      [attr.viewBox]="'0 0 520 ' + height()"
-      role="img"
-      [attr.aria-label]="ariaLabel()"
-    >
-      @if (type() === 'bar' || type() === 'line') {
-        @for (lineY of gridLines(); track lineY) {
-          <line
-            class="cb-chart__grid-line"
-            x1="40"
-            [attr.y1]="lineY"
-            x2="496"
-            [attr.y2]="lineY"
+    <ng-template #shapeTpl let-s>
+      @switch (s.k) {
+        @case ('rect') {
+          <svg:rect
+            [attr.class]="shapeClass(s)"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.width]="s.w"
+            [attr.height]="s.h"
+            [attr.rx]="s.rx"
+            [attr.fill]="s.fill"
+            (mouseenter)="hover(s.item)"
+            (click)="select(s.item)"
           />
         }
-
-        @if (type() === 'bar') {
-          @for (bar of bars(); track bar.key) {
-            <rect
-              class="cb-chart__bar"
-              [attr.x]="bar.x"
-              [attr.y]="bar.y"
-              [attr.width]="bar.w"
-              [attr.height]="bar.h"
-              rx="4"
-              [attr.fill]="bar.color"
-            >
-              <title>{{ bar.title }}</title>
-            </rect>
-          }
+        @case ('path') {
+          <svg:path
+            [attr.class]="shapeClass(s)"
+            [attr.d]="s.d"
+            [attr.fill]="s.fill"
+            [attr.stroke]="s.stroke"
+            [attr.pathLength]="s.pathLength"
+            (mouseenter)="hover(s.item)"
+            (click)="select(s.item)"
+          />
+        }
+        @case ('circle') {
+          <svg:circle
+            [attr.class]="shapeClass(s)"
+            [attr.cx]="s.cx"
+            [attr.cy]="s.cy"
+            [attr.r]="s.item !== undefined && shown() === s.item ? s.rActive : s.r"
+            [attr.fill]="s.fill"
+          />
+        }
+        @case ('line') {
+          <svg:line [attr.class]="s.cls" [attr.x1]="s.x1" [attr.y1]="s.y1" [attr.x2]="s.x2" [attr.y2]="s.y2" [attr.stroke]="s.stroke" />
         }
+        @case ('text') {
+          <svg:text
+            [attr.class]="s.cls"
+            [attr.x]="s.x"
+            [attr.y]="s.y"
+            [attr.text-anchor]="s.anchor"
+            [attr.dominant-baseline]="s.baseline"
+            [attr.fill]="s.fill"
+          >{{ s.text }}</svg:text>
+        }
+      }
+    </ng-template>
 
-        @if (type() === 'line') {
-          @for (series of lines(); track series.label) {
-            <polyline
-              fill="none"
-              [attr.stroke]="series.color"
-              stroke-width="2.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              [attr.points]="series.pointsAttr"
-            />
-            @for (pt of series.points; track pt.key) {
-              <circle
-                [attr.cx]="pt.x"
-                [attr.cy]="pt.y"
-                r="4"
-                [attr.fill]="series.color"
-              >
-                <title>{{ pt.title }}</title>
-              </circle>
+    <div
+      #plot
+      class="cb-chart__plot"
+      tabindex="0"
+      role="group"
+      [attr.aria-label]="name()"
+      [attr.aria-describedby]="instructionsId"
+      (keydown)="onKeydown($event)"
+      (focus)="onFocus()"
+      (blur)="active.set(null)"
+    >
+      <svg
+        class="cb-chart__svg"
+        [class.cb-chart__svg--pannable]="scene().zoomed"
+        [attr.viewBox]="'0 0 ' + width() + ' ' + height()"
+        aria-hidden="true"
+        (mouseleave)="active.set(null)"
+        (wheel)="onWheel($event)"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="dragging = null"
+        (pointercancel)="dragging = null"
+        (dblclick)="resetZoom()"
+      >
+        @if (scene().clip; as clip) {
+          <defs>
+            <clipPath [attr.id]="clipId">
+              <rect [attr.x]="clip.x" [attr.y]="clip.y" [attr.width]="clip.w" [attr.height]="clip.h" />
+            </clipPath>
+          </defs>
+        }
+        @if (isEmpty()) {
+          <text class="cb-chart__empty" [attr.x]="width() / 2" [attr.y]="height() / 2" text-anchor="middle">{{ t().noData }}</text>
+        } @else {
+          @for (s of scene().shapes; track $index) {
+            <ng-container *ngTemplateOutlet="shapeTpl; context: { $implicit: s }" />
+          }
+          <g [attr.clip-path]="scene().clip ? 'url(#' + clipId + ')' : null">
+            @for (s of scene().data ?? []; track $index) {
+              <ng-container *ngTemplateOutlet="shapeTpl; context: { $implicit: s }" />
+            }
+            @if (activeItem()?.cursor; as c) {
+              <line class="cb-chart__cursor" [attr.x1]="c.x" [attr.y1]="c.y1" [attr.x2]="c.x" [attr.y2]="c.y2" />
+            }
+            @for (s of scene().front ?? []; track $index) {
+              <ng-container *ngTemplateOutlet="shapeTpl; context: { $implicit: s }" />
+            }
+          </g>
+          @if (scene().center; as center) {
+            <text class="cb-chart__center" [attr.x]="center.x" [attr.y]="center.y" text-anchor="middle" dominant-baseline="central">
+              {{ center.text }}
+            </text>
+            @if (center.sub) {
+              <text class="cb-chart__center-sub" [attr.x]="center.x" [attr.y]="center.y + 22" text-anchor="middle" dominant-baseline="central">
+                {{ center.sub }}
+              </text>
+            }
+          }
+          <!-- Zonas invisibles por elemento: reciben el ratón y el clic. -->
+          @for (hit of scene().hits; track $index) {
+            @if (hit.k === 'rect') {
+              <rect
+                data-hit
+                class="cb-chart__hit"
+                [attr.x]="hit.x"
+                [attr.y]="hit.y"
+                [attr.width]="hit.w"
+                [attr.height]="hit.h"
+                (mouseenter)="hover(hit.item)"
+                (click)="select(hit.item)"
+              />
+            } @else {
+              <path data-hit class="cb-chart__hit" [attr.d]="hit.d" (mouseenter)="hover(hit.item)" (click)="select(hit.item)" />
             }
           }
         }
+      </svg>
 
-        @for (lbl of xLabels(); track lbl.index) {
-          <text
-            class="cb-chart__axis-label"
-            [attr.x]="lbl.x"
-            [attr.y]="height() - 8"
-            text-anchor="middle"
-          >
-            {{ lbl.text }}
-          </text>
-        }
-      } @else {
-        @for (seg of circularSegments(); track seg.key) {
-          <circle
-            cx="260"
-            [attr.cy]="height() / 2"
-            [attr.r]="circularRadius()"
-            fill="transparent"
-            [attr.stroke]="seg.color"
-            [attr.stroke-width]="type() === 'pie' ? circularRadius() * 2 : 34"
-            [attr.stroke-dasharray]="seg.dashArray"
-            [attr.stroke-dashoffset]="seg.dashOffset"
-            [attr.transform]="'rotate(-90 260 ' + height() / 2 + ')'"
-          >
-            <title>{{ seg.title }}</title>
-          </circle>
-        }
+      @if (tooltip(); as tip) {
+        <div class="cb-chart__tooltip" aria-hidden="true" [style.left.%]="tip.left" [style.top.%]="tip.top">
+          <strong class="cb-chart__tooltip-title">{{ tip.title }}</strong>
+          @for (row of tip.rows; track $index) {
+            <span class="cb-chart__tooltip-row">
+              <span class="cb-chart__swatch" [style.background]="row.color"></span>
+              {{ row.label }}
+              <strong class="cb-chart__tooltip-value">{{ row.value }}</strong>
+            </span>
+          }
+        </div>
+      }
+      @if (zoomEnabled() && window()) {
+        <button type="button" class="cb-chart__reset" (click)="resetZoom()">{{ t().chartResetZoom }}</button>
       }
-    </svg>
+    </div>
 
-    @if (showLegend() && legendItems().length > 0) {
-      <ul class="cb-chart__legend" aria-label="Leyenda del gráfico">
-        @for (item of legendItems(); track item.label) {
-          <li class="cb-chart__legend-item">
-            <span class="cb-chart__swatch" [style.background]="item.color"></span>
-            <span>{{ item.label }}</span>
+    @if (showLegend() && !sparkline() && scene().legend.length) {
+      <ul class="cb-chart__legend" [attr.aria-label]="t().chartLegend">
+        @for (item of scene().legend; track item.index) {
+          <li>
+            <button
+              type="button"
+              class="cb-chart__legend-item"
+              [class.cb-is-hidden]="hidden().has(item.index)"
+              [attr.aria-pressed]="!hidden().has(item.index)"
+              (click)="toggle(item.index)"
+            >
+              <span class="cb-chart__swatch" [style.background]="item.color"></span>
+              {{ item.label }}
+            </button>
           </li>
         }
       </ul>
     }
-  `, styles: [".cb-chart{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);width:100%;padding:var(--cb-space-4, 1rem);border:1px solid var(--cb-border-subtle, #e2e8f0);border-radius:var(--cb-radius-lg, .75rem);background:var(--cb-surface-card, #ffffff);font-family:var(--cb-font-sans, inherit)}.cb-chart__svg{width:100%;height:auto;overflow:visible}.cb-chart__grid-line{stroke:var(--cb-border-subtle, #e2e8f0);stroke-dasharray:3 3}.cb-chart__axis-label{fill:var(--cb-text-secondary, #64748b);font-size:11px}.cb-chart__bar{transition:opacity .15s ease}.cb-chart__bar:hover{opacity:.85}.cb-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-4, 1rem);margin:0;padding:0;list-style:none}.cb-chart__legend-item{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--cb-text-xs, .75rem);color:var(--cb-text-secondary, #475569)}.cb-chart__swatch{width:.65rem;height:.65rem;border-radius:999px}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+    <span class="cb-chart__sr" [id]="instructionsId">{{ t().chartInstructions }} {{ zoomEnabled() ? t().chartZoomInstructions : '' }}</span>
+    <span class="cb-chart__sr" aria-live="polite" aria-atomic="true">{{ announcement() }}</span>
+    <!-- Los mismos datos como tabla, para lectores de pantalla. -->
+    <table class="cb-chart__sr">
+      <caption>{{ name() }}</caption>
+      @if (scene().table.head; as head) {
+        <thead>
+          <tr>
+            <td></td>
+            @for (col of head; track $index) {
+              <th scope="col">{{ col }}</th>
+            }
+          </tr>
+        </thead>
+      }
+      <tbody>
+        @for (row of scene().table.rows; track $index) {
+          <tr>
+            <th scope="row">{{ row.label }}</th>
+            @for (cell of row.cells; track $index) {
+              <td>{{ cell }}</td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, styles: [":host{display:flex;flex-direction:column;gap:var(--cb-space-3, .75rem);box-sizing:border-box;width:100%;padding:var(--cb-space-4, 1rem);font-family:var(--cb-font-sans, inherit);color:var(--cb-color-text);background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, .75rem)}:host(.cb-chart--sparkline){padding:0;background:transparent;border:0}.cb-chart__plot{position:relative;border-radius:var(--cb-radius-md, .5rem);outline:none}.cb-chart__plot:focus-visible{box-shadow:0 0 0 2px var(--cb-color-focus-ring)}.cb-chart__svg{display:block;width:100%;height:auto;overflow:visible}.cb-chart__grid{stroke:var(--cb-color-border);stroke-dasharray:3 3}.cb-chart__grid--zero{stroke:var(--cb-color-border-strong);stroke-dasharray:none}.cb-chart__axis{fill:var(--cb-color-text-muted);font-size:11px;font-variant-numeric:tabular-nums}.cb-chart__empty{fill:var(--cb-color-text-muted);font-size:13px}.cb-chart__bar,.cb-chart__slice{transition:opacity var(--cb-duration-fast, .12s) ease}.cb-is-dim{opacity:.35}.cb-chart__line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}:host(.cb-chart--sparkline) .cb-chart__line{stroke-width:2}.cb-chart__area{opacity:.22}.cb-chart__point{stroke:var(--cb-color-surface-raised);stroke-width:2}.cb-chart__cursor{stroke:var(--cb-color-border-strong);stroke-dasharray:4 3}.cb-chart__track{fill:var(--cb-color-surface-subtle)}.cb-chart__center{fill:var(--cb-color-text);font-size:20px;font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-chart__center-sub{fill:var(--cb-color-text-muted);font-size:12px}.cb-chart__hit{fill:transparent;cursor:pointer}.cb-chart__axis--tick{font-size:9px}.cb-chart__baseline,.cb-chart__tick{stroke:var(--cb-color-border-strong)}.cb-chart__axis-title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-chart__ref-line{stroke:var(--cb-color-text-muted);stroke-width:1.25;stroke-dasharray:5 4}.cb-chart__ref-label{fill:var(--cb-color-text-muted);font-size:11px;font-weight:var(--cb-font-weight-medium, 500);paint-order:stroke;stroke:var(--cb-color-surface-raised);stroke-width:3px;stroke-linejoin:round}.cb-chart__ref-band{opacity:.1}.cb-chart__line--dashed{stroke-dasharray:6 4}.cb-chart__line--thin{stroke-width:1.25}.cb-chart__area--range{opacity:.18}.cb-chart__point--scatter{fill-opacity:.75;stroke-width:1;cursor:pointer}.cb-chart__wick{stroke-width:1.25}.cb-chart__candle{transition:opacity var(--cb-duration-fast, .12s) ease}.cb-chart__svg--pannable{cursor:grab;touch-action:pan-y}.cb-chart__svg--pannable:active{cursor:grabbing}.cb-chart__reset{position:absolute;top:0;right:0;padding:.2rem .55rem;font:inherit;font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text);background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm, .25rem);cursor:pointer}.cb-chart__reset:hover{background:var(--cb-color-surface-hover)}.cb-chart__reset:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-chart__note-dot{stroke:var(--cb-color-surface-raised);stroke-width:2}.cb-chart__note{fill:var(--cb-color-text);font-size:11px;font-weight:var(--cb-font-weight-semibold, 600);paint-order:stroke;stroke:var(--cb-color-surface-raised);stroke-width:4px;stroke-linejoin:round;pointer-events:none}.cb-chart__connector{stroke:var(--cb-color-border-strong);stroke-dasharray:3 3}.cb-chart__band{opacity:.85}.cb-chart__ring{fill:none;stroke:var(--cb-color-surface-raised);stroke-opacity:.7;pointer-events:none}.cb-chart__slice--polar{stroke:var(--cb-color-surface-raised);stroke-width:1.5}.cb-chart__cell{cursor:pointer;transition:opacity var(--cb-duration-fast, .12s) ease}.cb-chart__cell--tree{stroke:var(--cb-color-surface-raised);stroke-width:2}.cb-chart__cell.cb-is-active{stroke:var(--cb-color-text);stroke-width:2}.cb-chart__label{fill:var(--cb-color-text);font-size:11px;font-variant-numeric:tabular-nums;pointer-events:none}.cb-chart__label--inverse{fill:#fff;paint-order:stroke;stroke:#00000059;stroke-width:3px;stroke-linejoin:round}.cb-chart__label--strong{font-size:12px;font-weight:var(--cb-font-weight-semibold, 600)}@media(forced-colors:active){.cb-chart__cell,.cb-chart__bar,.cb-chart__slice{stroke:CanvasText;stroke-width:1}.cb-chart__label,.cb-chart__label--inverse{fill:CanvasText}}.cb-chart__slice{cursor:pointer}.cb-chart__tooltip{position:absolute;z-index:1;display:grid;gap:.15rem;min-width:7rem;padding:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text);white-space:nowrap;pointer-events:none;background:var(--cb-color-surface-raised);border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, .5rem);box-shadow:var(--cb-shadow-md);transform:translate(-50%,calc(-100% - 10px))}.cb-chart__tooltip-title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-chart__tooltip-row{display:flex;align-items:center;gap:.4rem}.cb-chart__tooltip-value{margin-left:auto;padding-left:var(--cb-space-3, .75rem);font-variant-numeric:tabular-nums}.cb-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cb-space-2, .5rem) var(--cb-space-3, .75rem);margin:0;padding:0;list-style:none}.cb-chart__legend-item{display:inline-flex;align-items:center;gap:.4rem;padding:.15rem .4rem;font:inherit;font-size:var(--cb-text-xs, .75rem);color:var(--cb-color-text-muted);background:none;border:none;border-radius:var(--cb-radius-sm, .25rem);cursor:pointer}.cb-chart__legend-item:hover{background-color:var(--cb-color-surface-hover)}.cb-chart__legend-item:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-chart__legend-item.cb-is-hidden{text-decoration:line-through;opacity:.55}.cb-chart__swatch{flex:none;width:.65rem;height:.65rem;border-radius:999px}.cb-chart__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host(.cb-chart--animate) .cb-chart__bar{transform-box:fill-box;transform-origin:bottom;animation:cb-chart-grow-y .5s var(--cb-ease, ease) both}:host(.cb-chart--animate) .cb-chart__bar--horizontal{transform-origin:left;animation-name:cb-chart-grow-x}:host(.cb-chart--animate) .cb-chart__line{stroke-dasharray:1;animation:cb-chart-draw .7s var(--cb-ease, ease) both}:host(.cb-chart--animate) .cb-chart__area,:host(.cb-chart--animate) .cb-chart__slice,:host(.cb-chart--animate) .cb-chart__cell{animation:cb-chart-fade .5s var(--cb-ease, ease) both}@keyframes cb-chart-grow-y{0%{transform:scaleY(0)}}@keyframes cb-chart-grow-x{0%{transform:scaleX(0)}}@keyframes cb-chart-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes cb-chart-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){:host(.cb-chart--animate) .cb-chart__bar,:host(.cb-chart--animate) .cb-chart__line,:host(.cb-chart--animate) .cb-chart__area,:host(.cb-chart--animate) .cb-chart__slice,:host(.cb-chart--animate) .cb-chart__cell{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], bands: [{ type: i0.Input, args: [{ isSignal: true, alias: "bands", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], xWindow: [{ type: i0.Input, args: [{ isSignal: true, alias: "xWindow", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], seriesDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbChartSeries), { isSignal: true }] }], axisDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbChartAxis), { isSignal: true }] }], lineDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbChartReferenceLine), { isSignal: true }] }], bandDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbChartReferenceBand), { isSignal: true }] }], noteDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbChartAnnotation), { isSignal: true }] }], plotRef: [{ type: i0.ViewChild, args: ['plot', { isSignal: true }] }] } });
+/** Propiedades que se copian como estilo en línea al exportar. */
+const EXPORT_STYLES = [
+    'fill',
+    'fill-opacity',
+    'stroke',
+    'stroke-width',
+    'stroke-opacity',
+    'stroke-dasharray',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'paint-order',
+    'opacity',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-variant-numeric',
+];
+/** Resuelve un color con variables CSS (`var(--x)`) al valor del tema actual. */
+function resolveColor(color, host, view) {
+    if (!color.includes('var(') || !view)
+        return color;
+    const probe = host.ownerDocument.createElement('span');
+    probe.style.color = color;
+    host.append(probe);
+    const value = view.getComputedStyle(probe).color;
+    probe.remove();
+    return value || color;
+}
+function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CbChart };
+export { CbChart, CbChartAnnotation, CbChartArea, CbChartAxis, CbChartBar, CbChartCandlestick, CbChartGroup, CbChartGroupState, CbChartLine, CbChartRangeArea, CbChartReferenceBand, CbChartReferenceLine, CbChartScatter, CbChartSeries };