/* demo-grafico: eixo, grade, barras, fantasma, meta, tendência, balão, alternador e rosca */
.gr{display:flex;flex-direction:column;gap:22px;contain:inline-size}
.gr-topo{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.gr-kpi{display:flex;flex-direction:column;gap:2px}
.gr-kpi small{font-size:18px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.8px}
.gr-kpi b{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.gr-var{display:flex;align-items:center;gap:6px;font-size:20px;font-weight:700;padding:6px 12px;border-radius:6px;align-self:flex-end;margin-bottom:4px}
.gr-var svg{width:22px;height:22px}
.gr-var small{font-size:18px;font-weight:500;color:var(--muted);margin-left:4px}
.gr-var.sobe{background:#E6F4EA;color:#1E7B3A}
.gr-var.desce{background:#FDECEC;color:#B42318}
.gr-leg{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.gr-leg span{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--muted);font-weight:600}
.gr-leg .sw{display:block;width:18px;height:12px;border-radius:3px;background:var(--cor)}
.gr-leg .sw.ant{background:#E3E8EE;border:1px dashed #9AA6B2}
.gr-leg .sw.meta{height:0;border-top:3px dashed #C0711A;border-radius:0;background:none}
.gr-leg .sw.tend{height:0;border-top:3px dashed var(--ink);border-radius:0;background:none;opacity:.7}
.gr-seg{position:relative;display:flex;border:1px solid var(--line);border-radius:8px;background:#F3F5F8;padding:4px}
.gr-seg b{position:relative;z-index:1;width:92px;text-align:center;font-size:18px;font-weight:700;color:var(--muted);padding:6px 0}
.gr-seg b.on{color:var(--ink)}
.gr-segp{position:absolute;left:4px;top:4px;bottom:4px;width:92px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 6px rgba(20,32,42,.08)}
.gr-meio{display:flex;gap:26px;align-items:stretch;padding-top:12px}
.gr-esq{flex:1;min-width:0}
.gr-area{display:flex;height:360px}
.gr-y{position:relative;width:104px;flex-shrink:0}
.gr-y span{position:absolute;right:14px;transform:translateY(50%);font-size:18px;color:var(--muted);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.gr-y span.an{margin-bottom:0}
.gr-plot{position:relative;flex:1}
.gr-gl{position:absolute;left:0;right:0;height:1px;background:#E9EDF1;transform-origin:0 50%;transform:scaleX(0)}
.gr-ex{position:absolute;left:0;right:0;bottom:0;height:2px;background:#C9D1DA;transform-origin:0 50%;transform:scaleX(0);z-index:2}
.gr-ey{position:absolute;left:0;top:0;bottom:0;width:2px;background:#C9D1DA;transform-origin:50% 100%;transform:scaleY(0);z-index:2}
.gr-cols{position:absolute;inset:0 0 0 2px;display:flex;gap:26px;padding:0 14px}
.gr-col{flex:1;position:relative;height:100%}
.gr-pilha{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.gr-ant{position:absolute;left:0;right:0;bottom:0;height:0;background:#EEF1F5;border:1px dashed #A9B4C0;border-bottom:0;border-radius:6px 6px 0 0}
.gr-ant+.gr-pilha .gr-bar{width:62%}
.gr-bar{width:100%;height:0;background:var(--cor);border-radius:6px 6px 0 0;flex-shrink:0}
.gr-val{font-style:normal;font-size:19px;font-weight:700;color:var(--ink);margin-bottom:8px;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0}
.gr-meta{position:absolute;left:0;right:0;height:0;z-index:3}
.gr-meta i{position:absolute;left:0;right:0;top:-1px;border-top:3px dashed #C0711A;transform-origin:0 50%;transform:scaleX(0)}
.gr-meta span{position:absolute;left:12px;bottom:6px;background:#FFF4E0;color:#8A4F00;border:1px solid #F1D3A4;font-size:18px;font-weight:700;padding:3px 10px;border-radius:6px;white-space:nowrap}
.gr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3;pointer-events:none}
.gr-tend{stroke:var(--ink);stroke-width:3;stroke-dasharray:10 8;vector-effect:non-scaling-stroke;opacity:0;stroke-linecap:round}
.gr-lin{fill:none;stroke:var(--cor);stroke-width:5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;opacity:0}
.gr-areaf{fill:var(--cor);stroke:none;opacity:0}
.gr-ptw{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none}
.gr-pt{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--cor);transform:translate(-50%,-50%) scale(0)}
.gr-tipw{position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0}
.gr-faixaw{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}
.gr-faixa{position:absolute;left:0;top:0;bottom:0;transform:translateX(-50%);background:#F1F4F7;border-radius:6px}
.gr-tip{position:absolute;left:0;bottom:22px;background:var(--ink);color:#fff;border-radius:8px;padding:9px 14px;white-space:nowrap;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 20px rgba(20,32,42,.18)}
.gr-tip:after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.gr-tip b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.gr-tip span{font-size:18px;font-weight:600;color:#C9D1DA}
.gr-tip span.sobe{color:#8FD9A8}
.gr-tip span.desce{color:#F5A3A3}
.gr-x{display:flex;margin-left:106px;padding:12px 14px 0;gap:26px}
.gr-x span{flex:1;text-align:center;font-size:19px;color:var(--muted);font-weight:600}
.gr-rosca{width:250px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:#FCFDFD}
.gr-rt{font-size:18px;font-weight:700;color:var(--ink);line-height:1.25}
.gr-rw{position:relative;width:180px;height:180px;align-self:center}
.gr-rw svg{width:100%;height:100%;transform:rotate(-90deg)}
.gr-rf{fill:none;stroke:#EEF1F5;stroke-width:26}
.gr-rs{fill:none;stroke:var(--cor);stroke-width:26;stroke-dasharray:0 100}
.gr-rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gr-rc b{font-size:32px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.gr-rc small{font-size:18px;color:var(--muted);font-weight:600}
.gr-rl{display:flex;flex-direction:column;gap:8px}
.gr-rl div{display:flex;align-items:center;gap:10px;font-size:18px}
.gr-rl i{width:14px;height:14px;border-radius:3px;background:var(--cor);flex-shrink:0}
.gr-rl span{flex:1;color:var(--ink);font-weight:500}
.gr-rl b{font-weight:700;font-variant-numeric:tabular-nums}