/* Dashboards e Sistemas: painel tipo SaaS com filtros reais, de várias fontes para um painel, o que entra no painel. */
.dashboards{background:var(--o-ink)}

.d-hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,88px) 0 clamp(64px,8vw,104px);background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(204,41,41,.16),transparent 70%),var(--o-ink)}
.d-hero-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,48px)}
.d-hero h1{font-size:clamp(42px,5.6vw,78px);line-height:.98;letter-spacing:-.05em}
.d-hero .o-lede{margin-top:0}

.d-app{position:relative;display:grid;grid-template-columns:64px 1fr;border-radius:var(--o-r-l);overflow:hidden;background:var(--o-paper);color:var(--o-text-d);
  box-shadow:0 60px 110px -60px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
.d-side{display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px 0;background:var(--o-ink);color:#71717a}
.d-side svg{width:20px;height:20px}
.d-side svg:first-of-type{color:#fff}
.d-logo{width:28px;height:28px;border-radius:9px;background:var(--o-red);margin-bottom:8px}
.d-main{padding:clamp(14px,2vw,24px);min-width:0}
.d-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:16px}
.d-top > b{font-family:var(--font-head);font-size:20px}
.d-filters{display:flex;flex-wrap:wrap;gap:8px}
.d-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--o-white);border:1px solid var(--o-line-l)}
.d-seg button{min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;font-size:13.5px;font-weight:600;color:var(--o-muted-d);cursor:pointer;transition:all var(--o-t1)}
.d-seg button[aria-pressed="true"]{background:var(--o-ink);color:#fff}
.d-upd{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--o-ok)}
.d-upd i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:d-ping 2.2s ease-out infinite}
@keyframes d-ping{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
.d-kpis{min-width:0}
.d-kpi-rail{--rail-w:62%}
.d-kpi-rail .o-rail-track{--rail-gap:10px}
@media (min-width:761px){.d-kpi-rail .o-rail-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;padding:0}}
@media (min-width:761px) and (max-width:1100px){.d-kpi-rail .o-rail-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
.d-more{display:none}
.d-kpi{padding:14px;border-radius:14px;background:var(--o-white);border:1px solid var(--o-line-l)}
.d-kpi small{display:block;font-size:12.5px;color:var(--o-muted-d)}
.d-kpi b{display:block;margin:4px 0 2px;font-family:var(--font-head);font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .4s}
.d-kpi em{font-style:normal;font-size:12.5px;color:var(--o-ok)}
.d-kpi.hl{background:var(--o-ink);border-color:var(--o-ink);color:#fff}
.d-kpi.hl small{color:var(--o-muted-l)}
.d-kpi.hl b{color:var(--o-red-hi)}
.d-kpi.hl em{color:var(--o-muted-l)}
.flash .d-kpi b{animation:d-flash .5s var(--o-ease)}
@keyframes d-flash{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.d-kpi b.bump{color:var(--o-ok)}
.d-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:10px;margin-top:10px}
.d-card{padding:16px;border-radius:14px;background:var(--o-white);border:1px solid var(--o-line-l)}
.d-card > p{margin-bottom:12px;font-size:13.5px;font-weight:600;color:var(--o-muted-d)}
.d-chart svg{width:100%;height:150px;display:block}
.d-area{fill:rgba(204,41,41,.12);transition:d .6s var(--o-ease)}
.d-line{fill:none;stroke:var(--o-red);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:d .6s var(--o-ease)}
.d-axis{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--o-muted-d)}
.d-origins{list-style:none;display:grid;gap:12px}
.d-origins li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:13.5px}
.d-origins i{grid-column:1/-1;height:7px;border-radius:5px;background:linear-gradient(90deg,var(--o-red),#ff8a8a);width:var(--w)}
.d-origins b{grid-row:1;grid-column:2;font-family:var(--font-head)}
.d-sellers ul{list-style:none;display:grid;gap:12px}
.d-sellers li{display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;font-size:13.5px}
.d-av{grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--o-ink);color:#fff;font-size:12px;font-weight:700}
.d-sellers b{font-weight:600}
.d-sellers em{font-style:normal;font-family:var(--font-head);font-weight:700;color:var(--o-ok)}
.d-sl-bar{grid-column:2/4;grid-row:2;height:6px;border-radius:4px;background:var(--o-paper-2);overflow:hidden}
.d-sl-bar i{display:block;height:100%;width:var(--w);background:var(--o-ink);border-radius:4px}
.d-sellers small{display:none}

/* de várias fontes para um painel */
.d-cons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.d-cons .o-head{margin-bottom:24px}
.d-facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.d-facts li{display:flex;flex-direction:column;padding:16px;border-radius:14px;background:var(--o-white);border:1px solid var(--o-line-l)}
.d-facts s{font-size:14px;color:var(--o-muted-d)}
.d-facts b{font-family:var(--font-head);font-size:24px;letter-spacing:-.02em;color:var(--o-red-ink)}
.d-facts span{font-size:13.5px;color:var(--o-muted-d)}
.d-merge{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0;min-height:360px}
.d-srcs{list-style:none;display:grid;gap:10px;z-index:1}
.d-srcs li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--o-white);border:1px solid var(--o-line-l);font-size:14.5px;font-weight:600}
.d-srcs svg{width:18px;height:18px}
.d-srcs svg:not([stroke]) path{fill:var(--o-text-d)}
.d-merge-lines{width:100%;height:100%;min-height:340px}
.d-merge-lines path{fill:none;stroke:rgba(204,41,41,.45);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:5 6;animation:d-flow 1.4s linear infinite}
@keyframes d-flow{to{stroke-dashoffset:-22}}
.d-merge-out{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 20px;border-radius:18px;background:var(--o-ink);color:#fff;text-align:center;box-shadow:0 30px 50px -30px rgba(20,20,22,.7)}
.d-merge-out svg{width:40px;height:40px;color:#ff8a8a}
.d-merge-out b{font-family:var(--font-head);font-size:18px}
.d-merge-out small{font-size:13px;color:var(--o-muted-l)}

/* como funciona */
.d-process{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.d-process li{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--o-r-l);background:var(--o-white);border:1px solid var(--o-line-l)}
.d-p-n{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--o-red-ink)}
.d-process b{font-family:var(--font-head);font-size:20px}
.d-process p{font-size:15px;line-height:1.55;color:var(--o-muted-d)}
.d-p-ok{margin-top:auto;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 10px;border-radius:999px;background:rgba(21,128,61,.1);color:var(--o-ok);font-size:13px;font-weight:600}
.d-p-ok svg{width:13px;height:13px}
.d-top .o-tag{margin-left:2px}

@media (max-width:1100px){.d-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.d-chart{grid-column:1/-1}}
@media (max-width:960px){.d-hero-top,.d-cons{grid-template-columns:1fr}.d-process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .d-app{grid-template-columns:1fr}
  .d-side{display:none}
  .d-main{min-width:0}
  .d-kpi b{font-size:30px}
  .d-extra{display:none}
  .d-app.more .d-extra{display:block}
  .d-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:10px;border-radius:12px;border:1.5px solid rgba(20,20,22,.2);background:var(--o-white);font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--o-text-d);cursor:pointer}
  .d-chart svg{height:110px}
  .d-grid{grid-template-columns:1fr}
  .d-upd{margin-left:0}
  .d-merge{grid-template-columns:1fr;min-height:0;gap:14px}
  .d-merge-lines{display:none}
  .d-srcs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .d-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .d-facts li{padding:12px 10px}
  .d-facts b{font-size:19px}
  .d-facts span{font-size:13px;line-height:1.3}
  .d-process{gap:8px}
  .d-process li{padding:16px}
  .d-process b{font-size:17px}
  .d-process p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.d-upd i,.d-merge-lines path,.flash .d-kpi b{animation:none}.d-area,.d-line{transition:none}}
/* trilho de KPIs vive num card claro dentro da seção escura: cores do tema claro */
.d-app .o-rail-count{color:var(--o-muted-d)}
.d-app .o-rail-count b{color:var(--o-text-d)}
.d-app .o-rail-dots button::after{background:rgba(20,20,22,.18)}
.d-app .o-rail-dots button[aria-current="true"]::after{background:var(--o-red)}
.d-app .o-rail-btn{background:var(--o-white);border-color:rgba(20,20,22,.16);color:var(--o-text-d)}
.d-app .o-rail-hint{color:var(--o-red-ink)}
.d-app .o-rail-ui{margin-top:6px}