/* ---------- gráficos (graficos.js): solo variables de app.css, así se ven bien en claro y oscuro ---------- */
.gr{position:relative;--gr-ease:cubic-bezier(.22,.8,.24,1)}
.gr-lienzo{width:100%;min-width:0}
.gr svg{display:block;overflow:visible;-webkit-tap-highlight-color:transparent}
.gr svg:focus{outline:none}
.gr svg:focus-visible{outline:2px solid var(--acento);outline-offset:4px;border-radius:6px}
.gr text{fill:var(--muted);font:500 11px Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.gr .gr-x{font-size:11.5px}
.gr-grilla{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.gr-cero{stroke:var(--line-3);stroke-width:1}
.gr-guia{stroke:var(--line-3);stroke-width:1;stroke-dasharray:2 3}
.gr-hit{fill:transparent;cursor:pointer}

/* barras: crecen desde la línea del cero */
.gr-barra{transform-box:fill-box;transform-origin:50% 100%;transition:transform .75s var(--gr-ease) var(--d,0ms),opacity .2s}
.gr-barra.neg{transform-origin:50% 0}
.gr-in .gr-barra{transform:scaleY(0);transition:none}
.gr-foco .gr-barra:not(.on){opacity:.35}

/* línea: se dibuja de izquierda a derecha; los puntos aparecen después */
.gr-linea{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--gr-ease) .25s}
.gr-punto{fill:var(--surface);stroke-width:2;transition:opacity .3s var(--d,0ms),r .15s}
.gr-in .gr-punto{opacity:0;transition:none}
.gr-punto.on{r:5.5}

/* barras horizontales */
.gr-pista{fill:var(--surface-3)}
.gr-barrah{transform-box:fill-box;transform-origin:0 50%;transition:transform .8s var(--gr-ease) var(--d,0ms),opacity .2s}
.gr-in .gr-barrah{transform:scaleX(0);transition:none}
.gr .gr-nom{fill:var(--ink);font-size:13px;font-weight:600}
.gr .gr-val{fill:var(--ink-2);font-size:12.5px}
.gr-foco .gr-fila:not(.on) .gr-barrah{opacity:.4}

/* leyenda */
.gr-ley{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;font-size:12.5px;color:var(--ink-2)}
.gr-ley span{display:inline-flex;align-items:center;gap:7px}
.gr-ley i{width:10px;height:10px;border-radius:3px}
.gr-ley i.l{width:16px;height:3px;border-radius:2px}

/* dona */
.gr-dona-in{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap}
.gr-dona-svg{position:relative;flex:0 0 auto;width:min(220px,62vw);margin:0 auto}
.gr-dona-fondo{fill:none;stroke:var(--surface-3)}
.gr-arco{fill:none;cursor:pointer;transition:stroke-dasharray .9s var(--gr-ease) var(--d,0ms),opacity .2s,stroke-width .2s}
.gr-foco .gr-arco:not(.on){opacity:.28}
.gr-arco.on{stroke-width:34px !important}
.gr-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 22%}
.gr-centro small{font-size:12px;color:var(--muted);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-centro b{font-family:"Bricolage Grotesque",sans-serif;font-size:24px;line-height:1.15;font-variant-numeric:tabular-nums}
.gr-centro span{font-size:12px;color:var(--ink-2);min-height:15px}
.gr-dona-ley{flex:1 1 240px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.gr-dona-ley button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i n m" "i p m";align-items:center;gap:1px 10px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--ink);font:500 14px Inter,sans-serif;text-align:left;cursor:pointer;transition:background .15s,opacity .2s}
.gr-dona-ley button:hover,.gr-dona-ley button.on{background:var(--surface-2)}
.gr-dona-ley button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--line-3)}
.gr-foco .gr-dona-ley button:not(.on){opacity:.55}
.gr-dona-ley i{grid-area:i;width:11px;height:11px;border-radius:3px}
.gr-dona-ley .n{grid-area:n;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-dona-ley .p{grid-area:p;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.gr-dona-ley .m{grid-area:m;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* tooltip */
.gr-tip{position:fixed;z-index:60;min-width:150px;max-width:260px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);box-shadow:var(--sombra-menu);font-size:13px;color:var(--ink);pointer-events:none;display:flex;flex-direction:column;gap:5px}
.gr-tip[hidden]{display:none}
.gr-tip b{font-size:13px;margin-bottom:1px}
.gr-tip span{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.gr-tip i{flex:0 0 auto;width:9px;height:9px;border-radius:3px}
.gr-tip em{margin-left:auto;padding-left:12px;font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* tabla para lectores de pantalla */
.gr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion:reduce){.gr-barra,.gr-linea,.gr-punto,.gr-barrah,.gr-arco{transition:none}}