/* Gráficos v2 — estilos portáveis. As cores vêm da PELE da instância (tokens
   `--viz-*` publicados por `clientes/<slug>/pele.py`, como no app.js); os hex
   aqui são só o ÚLTIMO recurso quando a pele não publica o token — e são os do
   sistema visual Semantix (roxo único acento), para uma instância sem pele de
   gráfico continuar igual. v4 (04/10/2026): a Volks publica Dark Blue / Lake /
   Sky / Tin Grey e os gráficos novos passaram a obedecer. */
.g2 {
  --g2-heroi: var(--viz-heroi, var(--viz-s1, #6D28D9));
  --g2-heroi-2: var(--viz-hi, #7C3AED);
  --g2-ctx: var(--viz-neutro, #CFCADD);
  --g2-ctx-forte: var(--viz-s2, #A49DB8);
  --g2-tinta: var(--tinta, #161326);
  --g2-tinta-2: var(--viz-neutro-txt, var(--muted, #4B465F));
  --g2-mudo: var(--muted, #6E6787);
  --g2-grade: var(--viz-grade, var(--viz-eixo, #E8E5F4));
  --g2-alta: var(--viz-sobe, #047857);
  --g2-queda: var(--viz-desce, #B91C1C);
  --g2-claro: var(--viz-claro, #F3EEFF);
  position: relative; font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--g2-tinta);
}
.g2-svg { display: block; overflow: visible; }

/* ---- cabeçalho: a conclusão e o número-chave ------------------------------ */
.g2-cab { margin-bottom: 10px; }
.g2-titulo { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: -.005em; text-wrap: balance; }
.g2-regua { margin: 3px 0 0; font: 500 10.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--g2-mudo); letter-spacing: .02em; }
.g2-chave { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.g2-chave-num { font-size: 30px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.g2-chave-var {
  font: 600 12px ui-monospace, "SF Mono", monospace; padding: 2px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums; background: var(--g2-claro); color: var(--g2-tinta-2);
}
.g2-chave-var.alta { color: var(--g2-alta); background: color-mix(in srgb, var(--g2-alta) 12%, white); }
.g2-chave-var.queda { color: var(--g2-queda); background: color-mix(in srgb, var(--g2-queda) 12%, white); }
.g2-chave-rot { font-size: 12px; color: var(--g2-mudo); }

/* ---- marcas ---------------------------------------------------------------- */
.g2-grade { stroke: var(--g2-grade); stroke-width: 1; }
.g2-base { stroke: var(--g2-grade); stroke-width: 1; }
.g2-eixo-y, .g2-eixo-x { font: 500 10.5px ui-monospace, "SF Mono", monospace; fill: var(--g2-mudo); font-variant-numeric: tabular-nums; }
.g2-eixo-y { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.g2-eixo-x.heroi { fill: var(--g2-heroi); font-weight: 700; }
.g2-ref { stroke: var(--g2-ctx-forte); stroke-width: 1; stroke-dasharray: 3 4; }
.g2-ref-rot { font: 500 10.5px ui-monospace, monospace; fill: var(--g2-mudo);
              paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.g2-linha { fill: none; stroke: var(--g2-heroi); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round;
            transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }
.g2-linha.fina { stroke-width: 1.75; }
.g2-linha.projetada { stroke-dasharray: 5 5; stroke-width: 2; opacity: .8; }
.g2-area { fill: rgba(109, 40, 217, .06); }
.g2-faixa { fill: rgba(109, 40, 217, .10); }
.g2-ponto { fill: #fff; stroke: var(--g2-heroi); stroke-width: 2; }
.g2-ponto.heroi { fill: var(--g2-heroi); }
.g2-ponto.projetado, .g2-ponto.parcial { fill: #fff; stroke-dasharray: 2 2; }
.g2-rot { font: 600 11.5px "Geist", system-ui, sans-serif; fill: var(--g2-tinta-2); font-variant-numeric: tabular-nums;
          paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.g2-rot.heroi { fill: var(--g2-tinta); font-weight: 700; }
.g2-cruz { stroke: var(--g2-ctx-forte); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; pointer-events: none; }
.g2-alvo { fill: var(--g2-heroi); stroke: #fff; stroke-width: 2; pointer-events: none; opacity: 0; }
.g2-svg:hover .g2-cruz, .g2-svg:hover .g2-alvo { opacity: 1; }
.g2-hit { fill: transparent; cursor: crosshair; }

/* barras: contexto em cinza, herói em roxo; cresce da base ao entrar */
.g2-barra path, .g2-barra rect { fill: var(--g2-ctx); transition: fill .15s; transform-box: fill-box; }
.g2-barra path { transform-origin: 50% 100%; }
.g2-barra.h rect { transform-origin: 0 50%; }
.g2-barra.heroi path, .g2-barra.heroi rect { fill: var(--g2-heroi); }
.g2-barra.hover path, .g2-barra.hover rect { fill: var(--g2-ctx-forte); }
.g2-barra.heroi.hover path, .g2-barra.heroi.hover rect { fill: var(--g2-heroi-2); }
.g2:not(.g2-entrou) .g2-barra path { transform: scaleY(0); }
.g2:not(.g2-entrou) .g2-barra.h rect { transform: scaleX(0); }
.g2-barra path, .g2-barra rect { transition: transform .6s cubic-bezier(.2, .8, .2, 1) var(--atraso, 0ms), fill .15s; }
.g2-trilho { fill: var(--g2-grade); }
.g2-mom { font: 600 10px ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
.g2-mom.alta { fill: var(--g2-alta); } .g2-mom.queda { fill: var(--g2-queda); }
.g2-mom:not(.heroi) { opacity: .75; }
.g2-cat { font: 500 12.5px "Geist", system-ui, sans-serif; fill: var(--g2-tinta-2); }
.g2-cat.heroi { fill: var(--g2-tinta); font-weight: 650; }
.g2-val { font: 600 12px ui-monospace, "SF Mono", monospace; fill: var(--g2-tinta-2); font-variant-numeric: tabular-nums; }
.g2-val.heroi { fill: var(--g2-tinta); font-weight: 700; }
.g2-share { fill: var(--g2-mudo); font-weight: 500; }

/* número */
.g2-numero { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.g2-num-v { font-size: 40px; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1; }
.g2-num-meta { display: flex; gap: 8px; align-items: baseline; }
.g2-num-base { font-size: 12px; color: var(--g2-mudo); }

/* tooltip: valor exato */
.g2-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 120px;
  padding: 8px 10px; border-radius: 10px; background: var(--g2-tinta); color: #fff;
  font: 500 11.5px/1.45 "Geist", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 30px -12px rgba(22, 19, 38, .5);
}
.g2-tip b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.g2-tip div:first-of-type { font-size: 14px; font-weight: 650; }
.g2-fonte { margin: 8px 0 0; font: 500 10px ui-monospace, monospace; color: var(--g2-mudo); }

@media (prefers-reduced-motion: reduce) {
  .g2-linha, .g2-barra path, .g2-barra rect { transition: none; }
}

/* ---- todos os valores visíveis (01/10/2026): comuns leves, destaque forte ---- */
.g2-rot.leve { font: 500 10.5px ui-monospace, "SF Mono", Menlo, monospace; fill: var(--g2-tinta-2); }
.g2-ponto.leve { fill: #fff; stroke: var(--g2-heroi); stroke-width: 1.5; opacity: .85; }

/* ---- legenda explícita: cada codificação nomeada ---------------------------- */
.g2-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 2px; font-size: 11.5px; color: var(--g2-tinta-2); }
.g2-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.g2-legenda i { display: inline-block; flex: 0 0 auto; }
.g2-leg-linha { width: 18px; height: 0; border-top: 2px solid var(--g2-heroi); }
.g2-leg-tracejada { width: 18px; height: 0; border-top: 2px dashed var(--g2-heroi); }
.g2-leg-faixa { width: 14px; height: 10px; border-radius: 2px; background: rgba(109, 40, 217, .14); }
.g2-leg-media { width: 18px; height: 0; border-top: 1.5px dashed var(--g2-mudo); }
.g2-leg-parcial { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed var(--g2-heroi); background: #fff; }
.g2-leg-destaque { width: 9px; height: 9px; border-radius: 50%; background: var(--g2-heroi); }
.g2-leg-barra { width: 12px; height: 10px; border-radius: 2px; background: var(--g2-ctx); }
.g2-leg-alta { width: 12px; height: 10px; position: relative; }
.g2-leg-alta::before { content: "+%"; position: absolute; left: -2px; top: -4px; font: 600 9px ui-monospace, monospace; color: var(--g2-alta); }
.g2-spark-pontas { display: flex; justify-content: space-between; font: 500 10.5px ui-monospace, monospace; color: var(--g2-tinta-2); margin-top: 2px; }

/* ---- one-pager: barras projetadas, comparação, cascata (01/10/2026) -------- */
.g2-bigode { stroke: var(--g2-heroi); stroke-width: 1.4; }
.g2-barra.projetada path { transform-origin: 50% 100%; }
.g2-seg { font: 600 9.5px ui-monospace, "SF Mono", monospace; fill: var(--g2-tinta); font-variant-numeric: tabular-nums; }
.g2-seg.claro { fill: #fff; }
.g2-seg.fora { fill: var(--g2-tinta-2); font-weight: 500; }
.g2-barra rect { transform-origin: 50% 100%; }
.g2:not(.g2-entrou) .g2-barra:not(.h) rect { transform: scaleY(0); }
.g2-barra.cascata.inicio rect { fill: var(--g2-ctx-forte); }
.g2-barra.cascata.fim rect { fill: var(--g2-heroi); }
.g2-barra.cascata.sobe rect { fill: var(--g2-alta); }
.g2-barra.cascata.desce rect { fill: var(--g2-queda); }
.g2-conector { stroke: var(--g2-ctx-forte); stroke-width: 1; stroke-dasharray: 2 2; }
.g2-rot.sobe { fill: var(--g2-alta); } .g2-rot.desce { fill: var(--g2-queda); }
.g2-leg-hachura { width: 12px; height: 10px; border-radius: 2px; border: 1px dashed var(--g2-heroi-2);
  background: repeating-linear-gradient(45deg, var(--g2-claro) 0 2px, var(--g2-heroi-2) 2px 3.5px); }
.g2-leg-bigode { width: 2px; height: 12px; background: var(--g2-heroi); position: relative; }
.g2-leg-bigode::before, .g2-leg-bigode::after { content: ""; position: absolute; left: -4px; width: 10px; height: 1.5px; background: var(--g2-heroi); }
.g2-leg-bigode::before { top: 0; } .g2-leg-bigode::after { bottom: 0; }
.g2-leg-serie0, .g2-leg-serie1, .g2-leg-serie2 { width: 12px; height: 10px; border-radius: 2px; }
.g2-leg-serie0 { background: var(--viz-s1, #6D28D9); } .g2-leg-serie1 { background: var(--viz-s2, #A78BFA); } .g2-leg-serie2 { background: var(--viz-s3, #CFCADD); }
.g2-leg-total, .g2-leg-nota { width: 0; height: 0; }
.g2-leg-inicio { width: 12px; height: 10px; border-radius: 2px; background: var(--g2-ctx-forte); }
.g2-leg-fim { width: 12px; height: 10px; border-radius: 2px; background: var(--g2-heroi); }
.g2-leg-sobe { width: 12px; height: 10px; border-radius: 2px; background: var(--g2-alta); }
.g2-leg-desce { width: 12px; height: 10px; border-radius: 2px; background: var(--g2-queda); }
.g2-leg-barra { background: var(--g2-ctx); }

/* ---- COMPACTO (palco, 01/10/2026): o cartão do palco tem ~260 px de altura e
   pode ter dois gráficos lado a lado — o cabeçalho vira UMA faixa: conclusão e
   régua à esquerda, número-chave à direita; legenda numa linha. ------------- */
.g2-compacto .g2-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: end; margin-bottom: 6px; }
.g2-compacto .g2-titulo { font-size: 13.5px; grid-column: 1; }
.g2-compacto .g2-regua { grid-column: 1; margin-top: 2px; font-size: 10px; }
.g2-compacto .g2-chave { grid-column: 2; grid-row: 1 / span 2; margin: 0; flex-wrap: nowrap; gap: 8px; }
.g2-compacto .g2-chave-num { font-size: 24px; }
.g2-compacto .g2-chave-rot { display: none; }
.g2-compacto .g2-legenda { margin: 4px 0 0; font-size: 10.5px; gap: 4px 12px; }
.g2-compacto .g2-fonte { display: none; }