/* ===================== core/graficos.css — estilos da biblioteca de gráficos (PL.graficos) =====================
   Componentes não-SVG com prefixo gf- (porte de docs/_casca/primitivas.css) usando os tokens de core/ui.css:
   --surface, --surface-2, --grid, --muted, --ink, --ink-2, --brand, --brand-light, --teal, --ok/--warn/--bad/--info (+ -bg), --radius.
   Todo token tem fallback (tema Oráculo) para o caso de o arquivo ser usado fora do app. */

/* ---------- SVG responsivo ---------- */
.gf-svg{width:100%;height:auto;display:block;max-width:100%;font-family:inherit;overflow:visible}
.gf-svg text{user-select:none;-webkit-user-select:none}
/* cursor dos alvos [data-tip]: definido em core/ui.css (help / pointer em svg) — não redefinir aqui */
.gf-svg .gf-pt{fill:transparent;stroke:none}
.gf-svg .gf-pt:hover,.gf-svg .gf-pt:focus{fill:rgba(0,0,0,.06)}
.gf-svg rect[data-tip]:hover,.gf-svg path[data-tip]:hover{filter:brightness(.92)}
/* sparkline: inline, escala até o max-width passado no estilo (padrão 2×w) */
.gf-spark{display:inline-block;vertical-align:middle;overflow:visible}

/* ---------- legenda (automática com ≥ 2 séries) ---------- */
.gf-legenda{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--ink-2, #5f5665);margin-top:6px;line-height:1.3}
.gf-legenda span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.gf-legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}

/* ---------- chips ---------- */
.gf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.gf-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--grid, #e8e3e6);background:var(--surface-2, #f3eff2);border-radius:999px;padding:2px 9px;font-size:12px;color:var(--ink-2, #5f5665);white-space:nowrap}
.gf-chip.ok{background:var(--ok-bg, #e3f4ea);color:var(--ok, #1f8a5b);border-color:transparent}
.gf-chip.warn{background:var(--warn-bg, #fdf0da);color:var(--warn, #a86a12);border-color:transparent}
.gf-chip.bad{background:var(--bad-bg, #fbe5e2);color:var(--bad, #c0392b);border-color:transparent}
.gf-chip.info{background:var(--info-bg, #e1f0f7);color:var(--info, #0f6b8f);border-color:transparent}
.gf-chip.brand{background:var(--brand-light, #efe8ed);color:var(--brand, #714B67);border-color:transparent}
.gf-chip.teal{background:var(--teal-bg, #e0f2f3);color:var(--teal, #017E84);border-color:transparent}

/* ---------- barra de progresso ---------- */
.gf-prog{margin:6px 0;min-width:0}
.gf-prog-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;margin-bottom:4px;color:var(--ink, #3b3340)}
.gf-prog-cab span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-prog-cab b{font-variant-numeric:tabular-nums;white-space:nowrap}
.gf-prog-bar{position:relative;height:8px;background:var(--surface-2, #f3eff2);border-radius:4px;overflow:visible}
.gf-prog-bar i{display:block;height:100%;border-radius:4px;background:var(--teal, #017E84);transition:width .25s ease}
.gf-prog-bar u{position:absolute;top:-3px;width:2px;height:14px;background:var(--warn, #a86a12);border-radius:1px;transform:translateX(-1px)}

/* ---------- calendário do mês ---------- */
.gf-cal{min-width:0}
.gf-cal-h{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;color:var(--muted, #8a8290);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:600}
.gf-cal-h span{text-align:center}
.gf-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.gf-cal-d{background:var(--surface, #fff);border:1px solid var(--grid, #e8e3e6);border-radius:4px;min-height:44px;padding:3px 4px;font-size:11px;min-width:0;overflow:hidden}
.gf-cal-d.vazio{background:transparent;border-color:transparent}
.gf-cal-d.hoje{border-color:var(--brand, #714B67);box-shadow:inset 0 0 0 1px var(--brand, #714B67)}
.gf-cal-d > span{color:var(--muted, #8a8290);font-variant-numeric:tabular-nums}
.gf-cal-d.hoje > span{color:var(--brand, #714B67);font-weight:700}
.gf-cal-d em{display:block;font-style:normal;background:var(--info-bg, #e1f0f7);color:var(--info, #0f6b8f);border-radius:3px;padding:0 4px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;line-height:1.5}
.gf-cal-d em.bad{background:var(--bad-bg, #fbe5e2);color:var(--bad, #c0392b)}
.gf-cal-d em.ok{background:var(--ok-bg, #e3f4ea);color:var(--ok, #1f8a5b)}
.gf-cal-d em.warn{background:var(--warn-bg, #fdf0da);color:var(--warn, #a86a12)}
.gf-cal-d em.brand{background:var(--brand-light, #efe8ed);color:var(--brand, #714B67)}
@media (max-width:899px){
  .gf-cal-d{min-height:36px;padding:2px 3px;font-size:10px}
  .gf-cal-d em{font-size:9.5px;padding:0 3px}
  .gf-cal-h{font-size:9.5px}
}

/* ---------- linha do tempo vertical ---------- */
.gf-tl{display:flex;flex-direction:column;padding-left:4px;min-width:0}
.gf-tl-i{display:flex;gap:10px;align-items:flex-start;font-size:13px;position:relative;padding-bottom:12px;min-width:0}
.gf-tl-i::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:2px;background:var(--grid, #e8e3e6)}
.gf-tl-i:last-child::before{display:none}
.gf-tl-i i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ring, #cdc6cb);background:var(--surface, #fff);flex:none;margin-top:2px;position:relative;z-index:1;box-sizing:border-box}
.gf-tl-i.ok i{background:var(--ok, #1f8a5b);border-color:var(--ok, #1f8a5b)}
.gf-tl-i.on i{background:var(--surface, #fff);border-color:var(--brand, #714B67);box-shadow:0 0 0 3px var(--brand-light, #efe8ed)}
.gf-tl-i.bad i{background:var(--bad, #c0392b);border-color:var(--bad, #c0392b)}
.gf-tl-i.warn i{background:var(--warn, #a86a12);border-color:var(--warn, #a86a12)}
.gf-tl-i.off{opacity:.6}
.gf-tl-i > div{min-width:0}
.gf-tl-i b{display:block;font-weight:600;color:var(--ink, #3b3340)}
.gf-tl-i.on b{color:var(--brand, #714B67)}
.gf-tl-i span{display:block;color:var(--muted, #8a8290);font-size:12px}

/* ---------- tooltip global ([data-tip]) ----------
   Dono: este arquivo (o elemento é criado por PL_GRAFICOS.ligarTooltip com role="tooltip"). core/ui.css também tem um
   .gf-tip mais antigo; o seletor abaixo tem especificidade maior, então vence independentemente da ordem dos <link>.
   white-space:pre-line como em ui.css: um "\n" no data-tip quebra linha. */
.gf-tip[role="tooltip"]{position:fixed;z-index:1000;pointer-events:none;background:var(--ink, #3b3340);color:#fff;font-size:12px;line-height:1.35;padding:5px 9px;border-radius:var(--radius, 6px);box-shadow:0 4px 14px rgba(40,30,38,.25);max-width:min(260px,calc(100vw - 16px));white-space:pre-line;word-break:break-word;font-variant-numeric:tabular-nums}
.gf-tip[role="tooltip"]::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.gf-tip[role="tooltip"].baixo::after{bottom:auto;top:-5px}
.gf-tip[role="tooltip"][hidden]{display:none}
@media print{.gf-tip{display:none!important}}