/* Gráficos e indicadores do Dyn360 Insights. Séries validadas para daltonismo e contraste nos dois temas (--s1..--s4). */
:root{--s1:#2A9AD0;--s2:#BF8618;--s3:#8A6CE8;--s4:#CF4F86;--heat:#34B2E3}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--s1:#157AA6;--s2:#B07A10;--s3:#7253D6;--s4:#B8336E;--heat:#157AA6}}
:root[data-theme="light"]{--s1:#157AA6;--s2:#B07A10;--s3:#7253D6;--s4:#B8336E;--heat:#157AA6}

/* ---------- painel de gráfico ---------- */
.pn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;min-width:0;display:flex;flex-direction:column;gap:14px}
.pn-h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px}
.pn-h h2{font-size:15px;letter-spacing:-.01em}
.pn-h p{color:var(--dim);font-size:12.5px;margin-top:3px;max-width:62ch}
.pn-h .eyebrow{display:block;margin-bottom:4px}
.pn-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.pn-big b{font-family:var(--f-display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em;color:var(--strong);font-variant-numeric:tabular-nums}
.pn-big span{color:var(--muted);font-size:13px}
.pn-f{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.pn-f b{color:var(--fg);font-weight:600}
.legend i.ln{height:3px;border-radius:2px;width:14px}

/* ---------- faixa de KPIs ---------- */
.kfx{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kf{position:relative;padding:16px 18px 0;display:flex;flex-direction:column;gap:6px;min-width:0;border-left:1px solid var(--line);cursor:default}
.kf:first-child{border-left:0}
.kf-l{font-size:12.5px;line-height:1.3;color:var(--muted);font-weight:500;display:flex;align-items:flex-start;gap:7px;min-height:33px}
.kf-l i{margin-top:4px}
.kf-l i{width:8px;height:8px;border-radius:2px;flex:none}
.kf-n{font-family:var(--f-display);font-weight:800;font-size:32px;line-height:1.05;letter-spacing:-.03em;color:var(--strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.kf-n small{font-size:14px;font-weight:700;color:var(--dim);margin-left:4px;letter-spacing:0}
.kf-s{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--dim);min-height:20px}
.kf-d{font-family:var(--f-mono);font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:6px;white-space:nowrap}
.kf-d.up{color:var(--ok);background:var(--ok-soft)} .kf-d.down{color:var(--crit);background:var(--crit-soft)} .kf-d.flat{color:var(--dim);background:var(--panel-2)}
.kf-sp{display:block;width:calc(100% + 36px);margin:2px -18px 0;height:34px}
.kf:not(:has(.kf-sp)){padding-bottom:16px}
@media (hover:hover){.kf:hover{background:var(--panel-2)}}
@media (max-width:1100px){.kfx{grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr))}.kf{border-top:1px solid var(--line)}}
@media (max-width:720px){.kfx{grid-template-columns:repeat(2,minmax(0,1fr))}.kf:nth-child(odd){border-left:0}.kf-n{font-size:27px}
  .kf:last-child:nth-child(odd){grid-column:span 2}}

/* ---------- área / linha ---------- */
.gx,.gb{display:flex;flex-direction:column;gap:6px;min-width:0}
.g-plot{position:relative;height:var(--h,240px);margin-top:6px}
.g-plot>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-grid span{position:absolute;left:0;right:0;border-top:1px solid var(--line);height:0}
.g-grid span:first-child{border-top-color:var(--line-2)}
.g-grid em{position:absolute;left:0;bottom:2px;font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--dim);background:var(--panel);padding-right:6px;line-height:1}
.g-grid span:first-child em{display:none}
.g-x{position:relative;height:16px;font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}
.g-x span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.gx .g-x span.ini{transform:none} .gx .g-x span.fim{transform:translateX(-100%)}
.gx-xh{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2);opacity:0;pointer-events:none;transition:opacity .12s}
.gx-dots i{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,50%);box-shadow:0 0 0 2px var(--panel);pointer-events:none}
.gx-hits{position:absolute;inset:0}
.gx-hits i{position:absolute;top:0;bottom:0;cursor:crosshair}
.g-mx{position:absolute;transform:translate(-50%,-10px) translateY(-100%);font-family:var(--f-mono);font-size:10.5px;color:var(--dim);white-space:nowrap;pointer-events:none;text-align:center;line-height:1.25}
.g-mx b{display:block;font-family:var(--f-display);font-size:13px;color:var(--strong)}
.g-mx::after{content:"";position:absolute;left:50%;bottom:-8px;width:7px;height:7px;border-radius:50%;background:var(--s1);transform:translateX(-50%);box-shadow:0 0 0 2px var(--panel)}
.g-mx.dir{transform:translate(-100%,-10px) translateY(-100%);text-align:right} .g-mx.dir::after{left:auto;right:-3px;transform:none}
.g-mx.esq{transform:translate(0,-10px) translateY(-100%);text-align:left} .g-mx.esq::after{left:-3px;transform:none}

/* ---------- barras ---------- */
.gb-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:var(--g,4px)}
.gb-c{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0;cursor:default}
.gb-st{width:100%;display:flex;flex-direction:column-reverse;gap:2px;min-height:0;transition:filter .15s}
.gb-st i{display:block;min-height:2px;border-radius:0}
.gb-st i:last-child{border-radius:4px 4px 0 0}
.gb-c.zero .gb-st{height:2px!important;background:var(--line-2);border-radius:2px}
.gb-c:not(.on) .gb-st{opacity:.62} .gb-cols:not(:has(.on)) .gb-c .gb-st{opacity:1}
@media (hover:hover){.gb-c:hover .gb-st{opacity:1;filter:brightness(1.15)}}
.gb-ref{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed var(--muted);z-index:2;pointer-events:none}
.gb-ref em{position:absolute;right:0;bottom:3px;font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--fg);background:var(--panel);padding:0 0 0 6px}

/* ---------- rosca ---------- */
.gd{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.gd-anel{position:relative;width:150px;aspect-ratio:1}
.gd-anel svg{width:100%;height:100%;display:block}
.gd-anel circle{fill:none;stroke-width:13;cursor:default}
.gd-anel .gd-base{stroke:var(--panel-2)}
.gd-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.gd-c b{font-family:var(--f-display);font-weight:800;font-size:26px;color:var(--strong);line-height:1;font-variant-numeric:tabular-nums}
.gd-c span{font-size:11px;color:var(--dim);margin-top:3px}
.gd-leg{display:grid;gap:2px}
.gd-leg div{display:grid;grid-template-columns:10px minmax(0,1fr) auto 38px;gap:9px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.gd-leg div:first-child{border-top:0}
.gd-leg i{width:10px;height:10px;border-radius:3px}
.gd-leg b{font-family:var(--f-mono);font-weight:600;color:var(--strong);font-size:12.5px}
.gd-leg em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--dim);text-align:right}
@media (max-width:480px){.gd{grid-template-columns:1fr;justify-items:center}.gd-leg{width:100%}}

/* ---------- mapa de calor ---------- */
.gh{display:grid;grid-template-columns:32px repeat(24,minmax(0,1fr)) 64px;gap:3px;align-items:center;font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}
.gh-c{aspect-ratio:1.15;border-radius:4px;background:color-mix(in oklab,var(--heat) calc(var(--v)*100%),var(--panel-2));cursor:default}
.gh-c.pk{outline:2px solid var(--strong);outline-offset:1px}
.gh-c.ag{box-shadow:inset 0 0 0 2px var(--wine-hot)}
@media (hover:hover){.gh-c:hover{outline:2px solid var(--accent);outline-offset:1px}}
.gh-t{height:34px;display:flex;align-items:flex-end;cursor:default}
.gh-t i{display:block;width:100%;background:color-mix(in oklab,var(--heat) 55%,var(--panel-2));border-radius:3px 3px 0 0;min-height:2px}
.gh-tt{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;align-self:end;padding-left:8px}
.gh-r{font-size:11px;color:var(--muted)} .gh-r.hoje{color:var(--wine-text);font-weight:600}
.gh-d{position:relative;height:16px;padding-left:8px;display:flex;align-items:center;gap:6px;cursor:default}
.gh-d i{display:block;height:8px;border-radius:0 3px 3px 0;background:color-mix(in oklab,var(--heat) 55%,var(--panel-2));flex:none;max-width:32px}
.gh-d b{font-weight:600;color:var(--fg);font-size:10.5px}
.gh-h{text-align:center;font-size:10px}
.gh-leg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:11.5px;color:var(--dim);margin-top:4px}
.gh-leg>i{width:90px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--panel-2),var(--heat))}
.gh-leg .sp{flex:1}
.gh-leg .pk-l{display:inline-flex;align-items:center;gap:6px;color:var(--fg)} .gh-leg .pk-l i{width:11px;height:11px;border-radius:3px;outline:2px solid var(--strong);background:var(--heat)}
@media (max-width:720px){.gh{grid-template-columns:24px repeat(24,minmax(0,1fr)) 0;gap:2px}.gh-d,.gh-tt{visibility:hidden;overflow:hidden;padding:0;width:0}.gh-t{height:24px}.gh-c{border-radius:2px;aspect-ratio:.8}.gh-r{font-size:10px}}

/* ---------- ranking ---------- */
.gr{display:grid;gap:12px}
.gr-r{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:center;cursor:default}
.gr-p{font-family:var(--f-mono);font-size:11.5px;color:var(--dim);grid-row:span 2}
.gr-nm{min-width:0}
.gr-nm b{display:block;font-size:13.5px;color:var(--strong);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-nm span{font-size:11.5px;color:var(--dim)}
.gr-v{font-family:var(--f-mono);font-size:13px;color:var(--strong);font-weight:600;text-align:right;white-space:nowrap}
.gr-v small{display:block;color:var(--dim);font-size:10.5px;font-weight:400}
.gr-b{grid-column:2/-1;height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden}
.gr-b i{display:block;height:100%;border-radius:4px}

/* ---------- bullet de lotação ---------- */
.gbl{display:grid;gap:16px}
.gbl-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;cursor:default}
.gbl-nm b{display:block;font-size:13.5px;color:var(--strong);font-weight:600}
.gbl-nm span,.gbl-v span{font-size:11.5px;color:var(--dim)}
.gbl-v{text-align:right} .gbl-v b{display:block;font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--strong);line-height:1}
.gbl-t{grid-column:1/-1;position:relative;height:14px;border-radius:4px;background:var(--panel-2)}
.gbl-t .m{position:absolute;left:0;top:3px;bottom:3px;border-radius:3px}
.gbl-t .pk{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--strong)}
.gbl-t .lim{position:absolute;top:-5px;bottom:-5px;width:0;border-left:2px dashed var(--crit)}
.gbl-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--dim)}
.gbl-leg span{display:inline-flex;align-items:center;gap:6px}
.gbl-leg i{display:inline-block;width:12px;height:8px;border-radius:2px;background:var(--s1)}
.gbl-leg i.pk{width:3px;height:12px;background:var(--strong)} .gbl-leg i.lim{width:0;height:12px;border-left:2px dashed var(--crit);background:none}

/* ---------- faixas 100 % ---------- */
.gf{display:grid;gap:14px}
.gf-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}
.gf-leg span{display:inline-flex;align-items:center;gap:6px} .gf-leg i{width:10px;height:10px;border-radius:3px}
.gf-r{display:grid;gap:6px}
.gf-nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px} .gf-nm b{font-size:13.5px;color:var(--strong);font-weight:600} .gf-nm span{font-size:11.5px;color:var(--dim)}
.gf-b{display:flex;gap:2px;height:22px;border-radius:5px;overflow:hidden}
.gf-b i{display:grid;place-items:center;font-style:normal;font-family:var(--f-mono);font-size:10.5px;font-weight:600;color:#fff;min-width:3px;cursor:default;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ---------- anel ---------- */
.ga{display:flex;align-items:center;gap:12px}
.ga svg{width:58px;height:58px;flex:none}
.ga circle{fill:none;stroke-width:10;stroke-linecap:round}
.ga .ga-b{stroke:var(--panel-2)}
.ga b{display:block;font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--strong);line-height:1.1}
.ga span{font-size:11.5px;color:var(--dim)}

/* ---------- leituras ---------- */
.gl{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:l}
.gl li{counter-increment:l;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--fg)}
.gl li:first-child{border-top:0;padding-top:2px}
.gl li::before{content:counter(l,decimal-leading-zero);font-family:var(--f-mono);font-size:11.5px;color:var(--accent);font-weight:600;padding-top:2px}
.gl li b{color:var(--strong);font-weight:600}
.gl li .up{color:var(--ok);font-weight:600} .gl li .down{color:var(--crit);font-weight:600}

/* ---------- micro (câmeras) ---------- */
.gm{display:inline-flex;align-items:flex-end;gap:2px;height:26px;width:96px;vertical-align:middle}
.gm i{flex:1;border-radius:2px 2px 0 0;min-height:2px}
.gcl{display:grid;gap:5px;min-width:150px}
.gcl-b{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;background:var(--panel-2)}
.gcl-b i{display:block;min-width:3px}
.gcl-l{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11.5px;color:var(--muted)}
.gcl-l span{display:inline-flex;align-items:center;gap:5px} .gcl-l i{width:7px;height:7px;border-radius:2px}

/* ---------- estados ---------- */
.estado{display:grid;justify-items:center;text-align:center;gap:6px;padding:30px 18px;border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--dim);font-size:12.5px}
.estado .est-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);color:var(--muted);margin-bottom:4px}
.estado b{font-family:var(--f-display);font-size:14px;color:var(--strong)}
.estado span:not(.est-ic){max-width:46ch}
.estado .btn{margin-top:8px}
.estado.erro{border-color:color-mix(in srgb,var(--crit) 45%,transparent);background:var(--crit-soft)} .estado.erro .est-ic{color:var(--crit)}
.sk{border-radius:var(--r-lg);background:linear-gradient(90deg,var(--panel) 30%,var(--panel-2) 50%,var(--panel) 70%);background-size:300% 100%;animation:sk 1.3s linear infinite;border:1px solid var(--line)}
.sk-h{height:64px}.sk-kf{height:126px}.sk-b{height:320px}
@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- tooltip ---------- */
.gtip{position:fixed;z-index:120;pointer-events:none;background:var(--raise);border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;box-shadow:0 14px 34px rgba(0,0,0,.35);
  font-size:12px;min-width:140px;max-width:280px;display:grid;gap:3px}
.gtip b{font-family:var(--f-display);font-size:12.5px;color:var(--strong);margin-bottom:2px}
.gtip span{color:var(--muted)}
.gtip div{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:8px;align-items:center}
.gtip div i{width:9px;height:9px;border-radius:2px} .gtip div span{color:var(--fg)} .gtip div em{font-style:normal;font-family:var(--f-mono);color:var(--strong);font-weight:600}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---------- KPI com gráfico de fundo ---------- */
.kf{overflow:hidden;padding-bottom:16px;min-height:132px}
.kf.com-bg{padding-bottom:46px}
.kf>*:not(.kf-bg):not(.kf-pt){position:relative;z-index:1}
.kf-bg{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none}
svg.kf-bg{width:100%}
.kf-pt{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent);transform:translate(-4px,50%);z-index:1;pointer-events:none}
.kf-bb{display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:0 10px;height:46%}
.kf-bb i{flex:1;min-width:0;max-width:22px;border-radius:3px 3px 0 0;background:color-mix(in oklab,var(--c) 30%,transparent)}
.kf-bb i.on{background:var(--c)}
.kf-mt{height:auto;bottom:16px;left:18px;right:18px;height:8px;border-radius:4px;background:color-mix(in oklab,var(--c) 14%,var(--panel-2))}
.kf-mt i{display:block;height:100%;border-radius:4px;background:var(--c)}
.kf-rot{position:absolute!important;right:12px;top:14px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.kf .kf-l{padding-right:42px}
@media (hover:hover){.kf.com-bg:hover .kf-bb i{background:color-mix(in oklab,var(--c) 45%,transparent)}.kf.com-bg:hover .kf-bb i.on{background:var(--c)}}
/* altura fixa do fundo: o gráfico fica abaixo do texto, nunca por trás dele */
.kf.com-bg{padding-bottom:58px}
.kf-bg{height:50px}
.kf-bb{height:42px;bottom:6px}
.kf-mt{bottom:22px}
.kf .kf-l{padding-right:0}
.kf-rot{top:auto!important;bottom:6px;right:10px;padding:1px 5px;border-radius:4px;background:color-mix(in srgb,var(--panel) 78%,transparent);z-index:2!important}
.kf-mt~.kf-rot{bottom:4px}
.kf-bg.kf-mt{height:8px;bottom:24px}