/* Gráfico de línea y barras sin dependencias. Los datos viven en la <table>; chart.js dibuja el SVG.
   Colores solo de variables del tema (cambian con cada combinación de Wada): --primary, --muted-foreground,
   --foreground, --border. Sin degradados ni animación. Necesita tokens.css. */
.c-chart { margin: 0; width: 100%; max-width: 44rem; display: grid; gap: .5rem; font-family: inherit; color: var(--foreground); }
.c-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.c-chart__title { font-weight: 600; font-size: .9375rem; }
.c-chart__note { font-size: .75rem; color: var(--muted-foreground); }
.c-chart__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: var(--muted-foreground); }
.c-chart__key { display: inline-flex; align-items: center; gap: .375rem; }
.c-chart__key svg { width: 18px; height: 8px; overflow: visible; }
.c-chart__plot { position: relative; height: var(--chart-h, 240px); border-radius: calc(var(--radius) - 2px); outline: none; }
.c-chart__plot:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.c-chart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c-chart__grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.c-chart__axis { fill: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.c-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-chart__dot { stroke: var(--background); stroke-width: 2; }
.c-chart__bar { shape-rendering: crispEdges; }
.c-chart__cursor { stroke: var(--foreground); stroke-opacity: .25; stroke-width: 1; }
.c-chart__s0 { stroke: var(--primary); fill: var(--primary); }
.c-chart__s1 { stroke: var(--muted-foreground); fill: var(--muted-foreground); }
.c-chart__s2 { stroke: var(--foreground); fill: var(--foreground); }
.c-chart__line.c-chart__s1 { stroke-dasharray: 5 4; }
.c-chart__line.c-chart__s2 { stroke-dasharray: 1 4; }
.c-chart__line { fill: none; }
.c-chart__bar.c-chart__s1 { fill-opacity: .55; }
.c-chart__tip { position: absolute; top: 0; pointer-events: none; z-index: 2; min-width: 7rem; padding: .375rem .5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--popover); color: var(--popover-foreground); font-size: .75rem; line-height: 1.4; box-shadow: 0 4px 12px -4px #0000002e; white-space: nowrap; }
.c-chart__tip b { display: block; margin-bottom: .125rem; }
.c-chart__tip span { display: flex; justify-content: space-between; gap: .75rem; font-variant-numeric: tabular-nums; }
.c-chart__tip i { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .375rem; vertical-align: .05em; }
.c-chart__readout { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.c-chart__data { font-size: .75rem; color: var(--muted-foreground); }
.c-chart__data summary { cursor: pointer; width: fit-content; border-radius: 4px; }
.c-chart__data summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.c-chart__data table { margin-top: .5rem; border-collapse: collapse; font-variant-numeric: tabular-nums; color: var(--foreground); }
.c-chart__data th, .c-chart__data td { padding: .25rem .75rem .25rem 0; text-align: left; border-bottom: 1px solid var(--border); font-weight: 400; }
.c-chart__data td { text-align: right; }
.c-chart__data thead th { color: var(--muted-foreground); }
@media (forced-colors: active) { .c-chart__s0, .c-chart__s1, .c-chart__s2 { stroke: CanvasText; fill: CanvasText; } }