/* Gráficos (js/modelo/graficos.js). Cores das séries validadas pelo validador da skill dataviz
   (claro e escuro, CVD ok): conversas = índigo da marca, orçamentos = laranja, guias = verde-água.
   Texto nunca usa a cor da série: valores e rótulos ficam na tinta do texto. */
:root {
  --g1: #3949ab; --g2: #eb6834; --g3: #1baf7a; --gdin: #3949ab;
  --g-grade: color-mix(in srgb, var(--ink) 9%, transparent);
  --g-base: color-mix(in srgb, var(--ink) 22%, transparent);
}
:root[data-theme="dark"] { --g1: #7986cb; --g2: #d95926; --g3: #199e70; --gdin: #7986cb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g1: #7986cb; --g2: #d95926; --g3: #199e70; --gdin: #7986cb; } }
/* Moderno: as séries seguem a paleta da unidade (conversas = acento), sem cor própria. HubMed mantém as de cima. */
:root:not([data-visual]) { --g1: var(--accent); --g2: var(--warn); --g3: var(--ok); --gdin: var(--accent); }
/* Menor corpo de texto do sistema (rótulos de gráfico). Pedido para tokens.css: mover esta linha para lá. */
:root { --fs-min: 11px; }
.g-s1 { --gc: var(--g1); } .g-s2 { --gc: var(--g2); } .g-s3 { --gc: var(--g3); } .g-din { --gc: var(--gdin); }

.g-linha { position: relative; min-height: 0; }
.g-svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: inherit; touch-action: pan-y; }
.g-grade { stroke: var(--g-grade); stroke-width: 1; shape-rendering: crispEdges; }
.g-base { stroke: var(--g-base); stroke-width: 1; shape-rendering: crispEdges; }
.g-eixo { fill: var(--ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
:root:not([data-visual]) .g-eixo { font-size: var(--fs-1, 12px); }
.g-traco { fill: none; stroke: var(--gc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-area { fill: var(--gc); opacity: .12; stroke: none; }
.g-coluna { fill: var(--gc); opacity: .85; transition: opacity 120ms; }
.g-svg:hover .g-coluna { opacity: .55; }
.g-ponto { fill: var(--gc); stroke: var(--surface); stroke-width: 2; }
.g-fim { fill: var(--ink-soft); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
:root:not([data-visual]) .g-fim { font-size: var(--fs-1, 12px); }
.g-cursor { stroke: var(--g-base); stroke-width: 1; pointer-events: none; }
.g-vazio { fill: var(--ink-faint); font-size: 12px; }
.g-balao {
  position: absolute; top: 4px; z-index: 5; display: flex; flex-direction: column; gap: 3px; min-width: 150px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16), 0 0 0 1px var(--line); font-size: 12px; pointer-events: none;
}
:root:not([data-visual]) .g-balao { box-shadow: var(--elev-3, var(--shadow)); font-size: var(--fs-1, 12px); }
.g-balao > b { font-weight: 600; color: var(--ink-soft); font-size: 11px; }
.g-balao > b::first-letter { text-transform: uppercase; }
.g-balao > span { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; }
.g-balao strong { font-variant-numeric: tabular-nums; font-weight: 700; }
.g-sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; background: var(--gc); }
.g-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.g-leg + .g-leg { margin-left: 12px; }

.g-mini { display: block; width: 100%; height: 100%; overflow: visible; }
.g-mini-traco { fill: none; stroke: var(--gc); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.g-mini-area { fill: var(--gc); opacity: .14; }
.g-mini-ponto { fill: var(--gc); }
/* Pico e vale da sparkline: pontos de 6 px de traço de comprimento zero (não deformam com o esticar do SVG). */
.g-mini-pico, .g-mini-vale { fill: none; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.g-mini-pico { stroke: var(--gc); }
.g-mini-vale { stroke: var(--ink-faint); }
.g-mini-caixa { position: relative; display: block; width: 100%; height: 100%; }
.g-mini-rot {
  position: absolute; transform: translate(-50%, calc(-100% - 3px)); padding: 0 3px; border-radius: var(--radius-xs, 6px);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  font-size: var(--fs-min, 11px); line-height: 13px; font-weight: 650; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.g-mini-rot.is-ini { transform: translate(-6px, calc(-100% - 3px)); }
.g-mini-rot.is-fim { transform: translate(calc(-100% + 6px), calc(-100% - 3px)); }

/* Marcas do gráfico de evolução: pico (ponto cheio) e vale (ponto vazado), com o valor. */
.g-marca { stroke: var(--surface); stroke-width: 2; }
.g-pico { fill: var(--gc); }
.g-vale { fill: var(--surface); stroke: var(--gc); stroke-width: 2; }
.g-marca-rot { fill: var(--ink-soft); font-size: var(--fs-min, 11px); font-weight: 650; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

.g-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.g-barras li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
.g-barras-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-barras-trilho, .g-medidor { position: relative; display: block; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.g-barras-trilho > i, .g-medidor > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: var(--gc); transition: width 500ms var(--ease); }
.g-barras-valor { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2ch; text-align: right; }
.g-vazio-bloco { display: grid; place-items: center; min-height: 64px; padding: 12px; color: var(--ink-faint); font-size: 12.5px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .g-barras-trilho > i, .g-medidor > i { transition: none; } }