/* Gráficos: área con degradado, barras apiladas, globos, barras con degradado y «toca para ver el detalle» (mesa de ayuda, Panel, Finanzas gerencial, portal).
   Solo usa las variables de color de tokens.css (editables en Ajustes › Apariencia). */

/* ---- Gráficos: área con degradado, globo, barras con degradado (mesa de ayuda, Panel, Finanzas gerencial, portal) ---- */
.vz-svg .vz-ln{ stroke-width:2.4 }
.vz-svg .vz-cross{ stroke:var(--vz-2); stroke-width:1.2; stroke-dasharray:3 3 }
.vz-svg .vz-dot,
.vz-svg .vz-hdot{ stroke:var(--panel); stroke-width:2 }
.vz-key i.vz-sq{ border-radius:50% }
.vz-tip{ background:var(--tip); color:var(--tip-ink); border:0; border-radius:10px; box-shadow:0 14px 30px -12px color-mix(in srgb,var(--ink) 50%,transparent); padding:9px 12px }
.vz-tip-t{ color:color-mix(in srgb,var(--tip-ink) 70%,transparent) }
.vz-tip-r span{ color:color-mix(in srgb,var(--tip-ink) 80%,transparent) }
.vz-tip-k{ width:8px; height:8px; border-radius:50% }
.vz-hbar i{ height:14px; border-radius:0 7px 7px 0; background:linear-gradient(90deg,color-mix(in srgb,var(--vz-1) 30%,var(--panel)),var(--vz-1)) }
.vz-hbar{ border-left-color:var(--line) }
.vz-card .meter i{ position:relative; overflow:hidden }
.vz-card .meter i::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 70%,transparent),transparent) }

/* Panel */
.tchart-hit .tg-guia{ stroke:var(--vz-2); stroke-width:1.2; stroke-dasharray:3 3; opacity:0 }
.tchart-hit .tg-pt{ opacity:0; stroke:var(--panel); stroke-width:2 }
.tchart-hit:hover .tg-guia,
.tchart-hit:hover .tg-pt{ opacity:1 }
.tg-ln{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.tchart-hit.tchart-hit:hover rect:first-child{ fill:transparent }
.chart-tip{ border-radius:10px }
.tb-cifra{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:-2px 0 6px }
.tb-cifra b{ font-family:var(--mono); font-size:24px; font-weight:600; letter-spacing:-.02em; font-feature-settings:"tnum" }
.tb-cifra span{ font-size:12px; font-weight:600; color:var(--ok) }
.tb-cifra span.dn{ color:var(--danger) }
.tb-cifra small{ font-size:12px; color:var(--muted) }

/* Finanzas gerencial (P&G y flujo de caja) */
.chart .gl-ln{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.chart .gl-ut{ stroke-width:2.8 }
.chart .gl-hit{ fill:transparent }
.chart .gl-guia{ stroke:var(--line-strong); stroke-dasharray:3 3; opacity:0 }
.chart .gl-pt{ opacity:0; stroke:var(--panel); stroke-width:2 }
.chart .gl-tip{ opacity:0; pointer-events:none }
.chart .gl-tip rect{ fill:var(--tip) }
.chart .gl-tip text{ fill:var(--tip-ink); font-size:11px }
.chart .gl-tip .gl-t{ font-weight:700; fill:color-mix(in srgb,var(--tip-ink) 70%,transparent) }
.chart .gl-col:hover .gl-guia,
.chart .gl-col:hover .gl-pt,
.chart .gl-col:hover .gl-tip{ opacity:1 }
.leyenda i{ border-radius:50% }

.vz-hrow.vz-pick{ cursor:pointer; border-radius:8px; padding-left:4px; padding-right:4px }
.vz-hrow.vz-pick:hover,.vz-hrow.vz-pick:focus-visible{ background:var(--panel-2); outline:none }
.vz-tip-h{ margin-top:6px; padding-top:5px; border-top:1px solid color-mix(in srgb,var(--tip-ink) 22%,transparent); font-size:11px; color:color-mix(in srgb,var(--tip-ink) 75%,transparent) }
.vz-svg .vz-pick{ cursor:pointer }
.vz-card>h2{ font-size:15px; font-weight:700; margin:0 0 12px }