/* Identidade do dashboard real: cores extraídas das referências do produto.
   Escopo restrito à demonstração; a moldura e a sequência animada são preservadas. */
#graficosSection{
  --gd-canvas:#02040a;
  --gd-card:#111318;
  --gd-card-pe:#111318;
  --gd-fio:rgba(255,255,255,.24);
  --gd-t1:#f5f5f7;
  --gd-t2:#b4b6bc;
  --gd-t3:#93979e;
  --gd-d1:#34d399;
  --gd-d2:#bc85f8;
  --gd-d3:#e27bb7;
  --gd-d4:#fbbf24;
  --gd-d5:#94a3b8;
  --gd-entrada:#34d399;
  --gd-saida:#f26969;
  --gd-barra:#34d399;
  --gd-salvar-fundo:#151a20;
  --gd-salvar-tinta:#f5f5f7;
}

#graficosSection .gd-janela,#graficosSection .gd-barra{background:#0b0e13}
#graficosSection .gd-barra{border-bottom-color:rgba(255,255,255,.08)}
#graficosSection .gd-endereco{background:#171a20;border-color:rgba(255,255,255,.12);color:#a0a3aa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
#graficosSection .gd-viewport{background-color:var(--gd-canvas);background-image:linear-gradient(rgba(52,211,153,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(52,211,153,.045) 1px,transparent 1px),radial-gradient(ellipse at 0 100%,rgba(4,73,59,.25),transparent 58%),radial-gradient(ellipse at 100% 0,rgba(4,73,59,.2),transparent 45%);background-size:3.8em 3.8em,3.8em 3.8em,100% 100%,100% 100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums}
#graficosSection .gd-ui-icon{display:block;flex:none;width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* A ilustração usa uma escala única; controles secundários não disputam
   espaço com os dados. O enquadramento do dispositivo permanece proporcional. */
@media (min-width:961px){
  #graficosSection .gd-macbook{width:88%;max-width:1060px}
}
/* Persistent product navigation. */
#graficosSection .gd-app-topbar{position:absolute;inset:0 0 auto;z-index:2;height:4.6em;padding:.7em 1.2em;display:flex;align-items:center;justify-content:space-between;gap:.65em}
#graficosSection .gd-app-logo{display:block;flex:none;width:5.8em;height:auto}
#graficosSection .gd-app-agents{font-size:1em;display:flex;align-items:center;gap:.1em;padding:.2em;border:1px solid var(--gd-fio);border-radius:99px;background:rgba(17,19,24,.88)}
#graficosSection .gd-app-agent{display:flex;align-items:center;gap:.3em;padding:.18em .35em .18em .18em;border:1px solid transparent;border-radius:99px;white-space:nowrap}
#graficosSection .gd-app-agent img{width:1.65em;height:1.65em;object-fit:cover;border-radius:50%}
#graficosSection .gd-app-agent>span{display:flex;flex-direction:column;gap:.2em;font-size:.64em;line-height:1.1}
#graficosSection .gd-app-agent b{font-weight:400;text-transform:uppercase;color:var(--gd-t1)}
#graficosSection .gd-app-agent small{font-size:.9em;color:var(--gd-t3)}
#graficosSection .gd-app-agent.is-selected{border-color:var(--gd-entrada);background:rgba(52,211,153,.08)}
#graficosSection .gd-app-agent.is-selected b{color:var(--gd-entrada)}
#graficosSection .gd-app-tools{display:flex;align-items:center;gap:.45em;flex:none}
#graficosSection .gd-app-theme{display:grid;place-items:center;width:2.3em;height:2.3em;border:1px solid var(--gd-fio);border-radius:50%;color:var(--gd-t1);background:rgba(21,38,38,.7)}
#graficosSection .gd-app-theme svg{width:1.35em;height:1.35em}
#graficosSection .gd-app-whatsapp{display:flex;align-items:center;gap:.55em;height:3.2857em;padding:0 1em;border-radius:99px;background:#0a5a47;color:#ecfdf5;font-size:.7em;white-space:nowrap}
#graficosSection .gd-app-whatsapp svg{width:1.3em;height:1.3em}
#graficosSection .gd-app-rail{position:absolute;left:1.1em;top:57%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:.55em;padding:.7em .3em;border:1px solid var(--gd-fio);border-radius:99px;background:rgba(17,19,24,.88)}
#graficosSection .gd-app-rail span{display:grid;place-items:center;width:2.25em;height:2.25em;border-radius:50%;color:#d5d7dd}
#graficosSection .gd-app-rail svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#graficosSection .gd-app-rail .is-selected{background:rgba(52,211,153,.1);color:var(--gd-entrada)}
#graficosSection .gd-page-position{display:none}
/* Page hierarchy and the same pill-shaped controls as the real dashboard. */
#graficosSection .gd-tela{inset:5.15em 0 0;padding:0 2em 1.2em 5em}
#graficosSection .gd-cab{align-items:center;gap:.65em;padding:0;border:0;margin:0 0 .65em}
#graficosSection .gd-back{display:grid;place-items:center;width:2em;height:2em;flex:none;border:1px solid var(--gd-fio);border-radius:50%;color:var(--gd-t2)}
#graficosSection .gd-cab-titulo{display:flex;flex-direction:column;gap:.35em;min-width:0}
#graficosSection .gd-tit{font-size:1.5em;font-weight:400;line-height:1.15;letter-spacing:-.025em}
#graficosSection .gd-title-mobile{display:none}
#graficosSection .gd-assinatura{color:var(--gd-t3);font-size:.72em;font-weight:400;line-height:1.2}
#graficosSection .gd-cab-actions{display:flex;gap:.5em;margin-left:auto;align-items:center;flex:none}
#graficosSection .gd-periodo,#graficosSection .gd-editar,#graficosSection .gd-salvar{display:flex;align-items:center;gap:.55em;margin:0;height:3em;padding:0 .9em;border:1px solid var(--gd-fio);border-radius:99px;background:rgba(21,26,32,.85);font-size:.72em;font-weight:400;line-height:1.2;color:var(--gd-t1);white-space:nowrap}
#graficosSection .gd-periodo{gap:.6em}
#graficosSection .gd-periodo svg:first-child,#graficosSection .gd-periodo svg:last-child{width:.85em;color:var(--gd-t2)}
#graficosSection .gd-viewbar{display:flex;align-items:center;justify-content:space-between;flex:none;gap:.75em;margin-bottom:.75em}
#graficosSection .gd-view-tabs{display:flex;align-items:center;gap:.15em;padding:.2em;border:1px solid var(--gd-fio);border-radius:99px;background:#111318;color:var(--gd-t2);font-size:.75em;line-height:1.2;white-space:nowrap}
#graficosSection .gd-view-tabs>span{padding:.65em .9em;border-radius:99px}
#graficosSection .gd-view-tabs .is-active{color:#052219;background:var(--gd-entrada)}
#graficosSection .gd-view-tabs .gd-add-view{border:1px dashed rgba(255,255,255,.2);background:#22252c;padding:.55em .9em}
#graficosSection .gd-widget-count{padding:.65em 1em;border:1px solid var(--gd-fio);border-radius:99px;background:rgba(21,26,32,.85);font-size:.7em;color:var(--gd-t2);white-space:nowrap}
/* Widget proportions and typography. */
#graficosSection .gd-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75em}
#graficosSection .gd-kpis--dois{grid-template-columns:repeat(2,minmax(0,1fr))}
#graficosSection .gd-kpi,#graficosSection .gd-carta{border-radius:1.1em;background:rgba(17,19,24,.94);box-shadow:none}
#graficosSection .gd-kpi{height:7.4em;padding:.8em .85em}
#graficosSection .gd-kpi .gd-whead{margin-bottom:.45em}
#graficosSection .gd-kpi .gd-wtit{font-size:.82em}
#graficosSection .gd-kpi .gd-wsub{font-size:.64em}
#graficosSection .gd-kpi .gd-wtxt{gap:.18em}
#graficosSection .gd-whead{gap:.4em;margin-bottom:.65em}
#graficosSection .gd-wtit{font-weight:400;font-size:.88em;line-height:1.2;letter-spacing:-.01em}
#graficosSection .gd-wsub{font-size:.66em;font-weight:400}
#graficosSection .gd-menu i{background:#93979e}
#graficosSection .gd-alca i{background:#4e535b}
#graficosSection .gd-num,#graficosSection .gd-kpi--forte .gd-num{font-size:1.65em;font-weight:400;line-height:1.1;letter-spacing:-.035em;margin:auto 0 .25em}
#graficosSection .gd-var{font-weight:400;font-size:.62em;padding:.35em .6em}
#graficosSection .gd-var--alta{color:var(--gd-entrada);background:rgba(52,211,153,.1)}
#graficosSection .gd-var--baixa{color:var(--gd-saida);background:rgba(242,105,105,.1)}
#graficosSection .gd-var--neutra{color:#aab9c0;background:rgba(170,185,192,.09)}
#graficosSection .gd-sparkline{position:absolute;right:.85em;bottom:.8em;width:3.1em;height:1.3em;overflow:visible;color:var(--gd-entrada)}
#graficosSection .gd-sparkline polyline{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#graficosSection .gd-sparkline--saida{color:var(--gd-saida)}
#graficosSection .gd-account{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35em .25em;font-size:.64em;color:var(--gd-t3);margin-top:.5em;line-height:1.1}
#graficosSection .gd-account b{font-weight:400;color:var(--gd-t1)}
#graficosSection .gd-account>i{grid-column:1/-1;height:.23em;background:linear-gradient(90deg,var(--gd-entrada) var(--gd-account),#26292f var(--gd-account));border-radius:99px}
#graficosSection .gd-account--negative b{color:var(--gd-saida)}
#graficosSection .gd-account--negative>i{background:linear-gradient(90deg,var(--gd-saida) var(--gd-account),#26292f var(--gd-account))}
#graficosSection .gd-kpis--overview{margin-bottom:.75em}
#graficosSection .gd-kpi--accounts .gd-whead{margin-bottom:.2em}
#graficosSection .gd-kpi--accounts .gd-wsub{display:none}
#graficosSection .gd-carta{padding:.85em}
/* Charts use the product colors and restrained grid lines. */
#graficosSection .gd-grade{border-top-style:solid;border-top-color:rgba(255,255,255,.06)}
#graficosSection .gd-grade--chao{border-top-color:rgba(255,255,255,.14)}
#graficosSection .gd-ycol span,#graficosSection .gd-eixo,#graficosSection .gd-ponto{font-weight:400}
#graficosSection .gd-bar{border-radius:.3em .3em 0 0}
#graficosSection .gd-carta--fluxo .gd-pontinhos{position:absolute;right:1.2em;top:1em;margin:0;gap:1em}
#graficosSection .gd-carta--fluxo .gd-menu{display:none}
#graficosSection .gd-carta--fluxo .gd-ponto{font-size:.7em}
#graficosSection .gd-legend-line{width:1.5em;height:0;border-top:1px dashed var(--gd-t1)}
#graficosSection .gd-trendline{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
#graficosSection .gd-trendline polyline{fill:none;stroke:#f5f5f7;stroke-width:1.2;stroke-dasharray:4 2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#graficosSection .gd-trendline svg{display:block;width:100%;height:100%;overflow:visible}
#graficosSection .gd-trend-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:#f5f5f7;transform:translate(-50%,-50%)}
#graficosSection .gd-palco[data-fase="monta"] .is-vez .gd-trendline{animation:gd-linha-produto 1s .9s both}
@keyframes gd-linha-produto{from{clip-path:inset(-10% 100% -10% 0);opacity:0}to{clip-path:inset(-10% -2% -10% 0);opacity:1}}
#graficosSection .gd-duas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75em}
#graficosSection .gd-category-body{container-type:size;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:.7em;flex:1;min-height:0}
#graficosSection .gd-donut{width:min(100%,100cqh);height:auto;min-height:0;max-width:100%;max-height:100%;aspect-ratio:1;margin:auto}
#graficosSection .gd-donut-meio b{font-size:min(1.15em,12cqh);font-weight:400;letter-spacing:-.03em}
#graficosSection .gd-donut-meio em{font-size:min(.55em,5.8cqh);font-weight:400}
#graficosSection .gd-category-legend{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:0;min-width:0;height:100%}
#graficosSection .gd-category-key{display:grid;grid-template-columns:.45em minmax(0,1fr) auto;gap:.3em .45em;align-items:center;align-content:center;font-size:.78em;line-height:1.2;color:var(--gd-t2)}
#graficosSection .gd-category-key>i{width:.55em;height:.55em;border-radius:50%;background:var(--gd-category)}
#graficosSection .gd-category-key>b{font-weight:400;color:var(--gd-t1)}
#graficosSection .gd-category-key>em{display:block;grid-column:2/-1;height:.28em;border-radius:99px;background:#24272e;overflow:hidden}
#graficosSection .gd-category-key>em>i{display:block;width:var(--gd-share);height:100%;background:var(--gd-category)}
#graficosSection .gd-carta--donut .gd-nota{display:none}
#graficosSection .gd-lista{display:grid;grid-template-rows:repeat(5,minmax(0,1fr));gap:0}
#graficosSection .gd-item{display:grid;grid-template-columns:1em minmax(0,1fr) auto;align-content:center;column-gap:.55em;row-gap:.3em;border:0;padding:.15em 0;font-size:.78em;line-height:1.2}
#graficosSection .gd-item:nth-child(1){--gd-categoria:var(--gd-d1)}
#graficosSection .gd-item:nth-child(2){--gd-categoria:var(--gd-d2)}
#graficosSection .gd-item:nth-child(3){--gd-categoria:var(--gd-d3)}
#graficosSection .gd-item:nth-child(4){--gd-categoria:var(--gd-d4)}
#graficosSection .gd-item:nth-child(5){--gd-categoria:var(--gd-d5)}
#graficosSection .gd-rank{font-weight:400;color:var(--gd-t3)}
#graficosSection .gd-item-fat{display:none}
#graficosSection .gd-item-val{width:auto;font-weight:400;white-space:nowrap}
#graficosSection .gd-item-trilho{grid-column:2/-1;display:block;height:.28em;overflow:hidden;border-radius:99px;background:#24272e}
#graficosSection .gd-item-trilho i{display:block;width:var(--gd-fracao);height:100%;border-radius:inherit;background:var(--gd-categoria)}

#graficosSection .gd-pilula{background:#12221f;border-color:rgba(124,174,155,.3);box-shadow:0 12px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05)}
#graficosSection .gd-balao{stroke:var(--gd-entrada)}
#graficosSection .gd-enviar{background:var(--gd-entrada);border-color:transparent}
#graficosSection .gd-enviar svg{stroke:#06231b}
#graficosSection .gd-cursor{background:var(--gd-entrada)}
/* O campo vazio precisa ser pintado antes de uma nova digitação. */
#graficosSection .gd-campo{justify-content:flex-start;scroll-behavior:auto}
#graficosSection .gd-campo.is-longo{justify-content:flex-end}
#graficosSection .gd-texto{opacity:1;transition:none}
#graficosSection .gd-palco[data-pilula="vazia"] .gd-campo{visibility:hidden}
#graficosSection .gd-palco[data-pilula="vazia"] .gd-texto{opacity:1;transition:none}
#graficosSection .gd-w::after{display:none}


/* A compact product view preserves legibility within the tablet illustration. */
@media (max-width:960px){
  #graficosSection .gd-app-topbar{height:4.5em;padding:.7em 1em;gap:.8em}
  #graficosSection .gd-app-logo{width:7em}
  #graficosSection .gd-app-agents{font-size:1em;margin-left:auto}
  #graficosSection .gd-app-agent:not(.is-selected),#graficosSection .gd-app-tools,#graficosSection .gd-app-rail,#graficosSection .gd-page-position{display:none}
  #graficosSection .gd-app-agent>span{font-size:.8em}
  #graficosSection .gd-app-agent img{width:2.25em;height:2.25em}
  #graficosSection .gd-tela{inset:4.5em 0 0;padding:.8em 1em 1em}
  #graficosSection .gd-cab{margin-bottom:.7em;gap:.5em}
  #graficosSection .gd-back,#graficosSection .gd-title-desktop,#graficosSection .gd-assinatura,#graficosSection .gd-periodo,#graficosSection .gd-editar{display:none}
  #graficosSection .gd-title-mobile{display:inline}
  #graficosSection .gd-cab-titulo{gap:.4em}
  #graficosSection .gd-tit{font-size:1.16em;font-weight:500;letter-spacing:-.02em}
  #graficosSection .gd-cab-actions{margin-left:auto}
  #graficosSection .gd-salvar{font-size:.75em;height:2.6em;padding:0 .75em}
  #graficosSection .gd-viewbar{margin-bottom:.7em}
  #graficosSection .gd-view-tabs{font-size:.68em}
  #graficosSection .gd-view-tabs>span{padding:.55em .7em}
  #graficosSection .gd-view-tabs .gd-add-view,#graficosSection .gd-widget-count{display:none}
  #graficosSection .gd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #graficosSection .gd-kpis--overview,#graficosSection .gd-kpi--accounts{display:none}
  #graficosSection .gd-tela--fluxo .gd-kpi--forte{grid-column:1/-1}
  #graficosSection .gd-kpi,#graficosSection .gd-carta{border-radius:1.1em}
  #graficosSection .gd-kpi{height:auto}
  #graficosSection .gd-num,#graficosSection .gd-kpi--forte .gd-num{font-size:1.6em;margin:.2em 0 0}
  #graficosSection .gd-tela--fluxo .gd-kpi{padding:.75em}
  #graficosSection .gd-sparkline{display:none}
  #graficosSection .gd-carta--fluxo .gd-pontinhos{position:static;margin-top:.6em;gap:.8em}
  #graficosSection .gd-carta--fluxo .gd-ponto{font-size:.64em}
  #graficosSection .gd-carta--fluxo .gd-ponto:last-child{display:none}
  #graficosSection .gd-trendline{display:none}
  #graficosSection .gd-duas{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.9fr) minmax(0,1.15fr)}
  #graficosSection .gd-carta--donut{display:flex}
  #graficosSection .gd-category-body{container-type:normal;display:flex;min-height:0}
  #graficosSection .gd-category-legend{display:none}
  #graficosSection .gd-donut{display:flex;align-items:center;justify-content:center;gap:1.2em;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;margin:auto}
  #graficosSection .gd-donut svg{flex:0 0 6.2em;width:6.2em;height:6.2em;max-height:100%}
  #graficosSection .gd-donut-meio{position:static;inset:auto;transform:none;text-align:left}
  #graficosSection .gd-wtit{font-size:.95em}
  #graficosSection .gd-item{grid-template-columns:1em minmax(0,1fr) auto;font-size:.92em;line-height:1.2;column-gap:.55em;row-gap:.22em;padding:.12em 0}
  #graficosSection .gd-item-val{margin-left:0}
  #graficosSection .gd-donut-meio b{font-size:1.5em}
  #graficosSection .gd-donut-meio em{font-size:.8em}
}
@media (max-width:420px){
  #graficosSection .gd-tela--transf .gd-tit{max-width:12em}
  #graficosSection .gd-salvar .gd-ui-icon{display:none}
}
@media (prefers-reduced-motion:reduce){
  #graficosSection .gd-palco .gd-trendline{animation:none!important;clip-path:none;opacity:1}
}