/* ============================================================
   New Saúde — Editorial charts (SVG-based)
   Single voltage: Cadmium Red. Hairline grid on cream.
   ============================================================ */

/* ---------- Bar comparison (horizontal) — elegant ---------- */
.bar-chart{display:flex;flex-direction:column;gap:14px;font-family:var(--font-family--sans)}
.bar-row{display:grid;grid-template-columns:200px 1fr 110px;gap:24px;align-items:center;font-size:13px;padding:18px 0;border-bottom:1px solid var(--border-soft)}
.bar-row:last-child{border-bottom:none}
.bar-row .b-label{color:var(--fg-body);font-weight:500;font-size:14px}
.bar-row .b-track{height:6px;background:var(--bg-tint);border-radius:99px;overflow:visible;position:relative}
.bar-row .b-fill{height:100%;background:var(--primary);border-radius:99px;display:flex;align-items:center;padding:0;color:transparent;font-size:0;white-space:nowrap;transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1);position:relative}
.bar-row .b-fill::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:14px;height:14px;background:var(--primary);border-radius:50%;border:3px solid var(--surface)}
.bar-row.in .b-fill{transform:scaleX(1)}
.bar-row .b-fill.muted{background:#000}
.bar-row .b-fill.muted::after{background:#000}
.bar-row .b-value{font-family:var(--font-family--display);font-style:italic;font-weight:400;color:#000;font-size:28px;letter-spacing:-.02em;text-align:right;line-height:1}

/* ---------- Big stat with sparkline — editorial ---------- */
.stat-spark{display:flex;flex-direction:column;gap:12px;padding:40px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-12);position:relative;overflow:hidden}
.stat-spark .lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.stat-spark .num{font-family:var(--font-family--display);font-style:italic;font-size:80px;font-weight:400;color:#000;line-height:1;letter-spacing:-.04em;display:inline-flex;align-items:baseline}
.stat-spark .num em{font-family:var(--font-family--sans);font-style:normal;font-size:20px;font-weight:500;color:var(--primary);margin-left:10px;letter-spacing:0}
.stat-spark .delta{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#117a4d;font-weight:600;letter-spacing:.02em}
.stat-spark .delta.down{color:var(--primary)}
.stat-spark .spark{width:100%;height:72px;margin-top:16px}
.stat-spark .spark path.line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2.4s cubic-bezier(.2,.7,.2,1)}
.stat-spark.in .spark path.line{stroke-dashoffset:0}
.stat-spark .spark path.area{fill:url(#sparkGrad);opacity:0;transition:opacity 1s cubic-bezier(.2,.7,.2,1) 1s}
.stat-spark.in .spark path.area{opacity:1}
.stat-spark .spark circle{fill:var(--primary);opacity:0;transition:opacity .3s ease-out 2.2s}
.stat-spark.in .spark circle{opacity:1;filter:drop-shadow(0 0 6px rgba(234,44,0,.4))}

/* ---------- Donut ---------- */
.donut-wrap{display:flex;align-items:center;gap:48px}
.donut-svg{flex-shrink:0;width:200px;height:200px;transform:rotate(-90deg)}
.donut-svg circle{fill:none;stroke-width:24;stroke-linecap:butt;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.donut-svg .track{stroke:var(--bg-tint)}
.donut-svg .seg{stroke-dashoffset:1000}
.donut-svg.in .seg{stroke-dashoffset:var(--final,0)}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:14px}
.donut-legend .row{display:grid;grid-template-columns:14px 1fr auto;gap:14px;align-items:center;font-size:14px;padding-bottom:14px;border-bottom:1px solid var(--border-soft)}
.donut-legend .row:last-child{border-bottom:none}
.donut-legend .swatch{width:14px;height:14px;border-radius:3px}
.donut-legend .label{color:var(--fg-body);font-weight:500}
.donut-legend .value{font-family:var(--font-family--sans);font-weight:600;color:#000;font-size:16px;letter-spacing:-.01em}

/* ---------- Adoption curve (line + dots) ---------- */
.curve-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-12);padding:32px}
.curve-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.curve-head h3{font-size:20px;letter-spacing:-.02em;color:#000;font-weight:500;margin:0}
.curve-head .meta{font-size:12px;color:var(--fg-muted);font-weight:500}
.curve-svg{width:100%;height:240px;display:block}
.curve-svg .grid{stroke:var(--border-soft);stroke-width:1;stroke-dasharray:2 3}
.curve-svg .axis{stroke:var(--border);stroke-width:1}
.curve-svg .axis-label{font-family:var(--font-family--sans);font-size:11px;fill:var(--fg-muted)}
.curve-svg .area{fill:var(--primary);fill-opacity:.08;opacity:0;transition:opacity 1s ease-out .6s}
.curve-svg .line{fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2.2s cubic-bezier(.2,.7,.2,1)}
.curve-svg .dot{fill:#fff;stroke:var(--primary);stroke-width:2;opacity:0;transition:opacity .3s ease-out 2s}
.curve-svg .anno{fill:var(--primary);font-size:11px;font-weight:600;font-family:var(--font-family--sans);opacity:0;transition:opacity .4s ease-out 2.2s}
.curve-card.in .curve-svg .line{stroke-dashoffset:0}
.curve-card.in .curve-svg .area,.curve-card.in .curve-svg .dot,.curve-card.in .curve-svg .anno{opacity:1}

/* ---------- Mini gauge (KPI ring) — editorial ---------- */
.gauge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gauge{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-12);padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.gauge svg{width:120px;height:120px;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:4;stroke-linecap:round}
.gauge .track{stroke:var(--border-soft)}
.gauge .fill{stroke:var(--primary);stroke-dasharray:339;stroke-dashoffset:339;transition:stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 0 6px rgba(234,44,0,.18))}
.gauge.in .fill{stroke-dashoffset:var(--final,0)}
.gauge .v{font-family:var(--font-family--display);font-style:italic;font-weight:400;font-size:40px;color:#000;letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:baseline}
.gauge .v em{font-family:var(--font-family--sans);font-style:normal;font-size:18px;color:var(--primary);font-weight:500;margin-left:2px}
.gauge .l{font-size:12px;color:var(--fg-muted);font-weight:500;line-height:1.4;max-width:18ch}
@media (max-width:900px){.gauge-grid{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  .bar-row .b-fill,.stat-spark .spark path,.donut-svg .seg,.curve-svg .line,.gauge .fill{transition:none}
  .bar-row .b-fill{transform:none}
  .donut-svg .seg{stroke-dashoffset:var(--final,0)}
  .curve-svg .line{stroke-dashoffset:0}
  .gauge .fill{stroke-dashoffset:var(--final,0)}
}