/* 99-grafic.css - „Grafic detaliat" propriu (inc/sections/x-grafic.php, assets/js/x-grafic.js).   LOT 151
 * Fereastra e cea a temei (.mds-tvmodal, .mds-tvmodal__box din mds-asset.css); aici doar
 * interiorul. Culorile si marimile sunt ale temei: --mds-*, textul 13/12/18px ca in banda
 * din hero (93-hero-pret.css), comutatorul ca .xvm__tabs. */
.xgr{ display:flex; flex-direction:column; gap:12px; padding:18px 18px 12px; }
.xgr__cap{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; padding-right:44px; }
.xgr__nume{ font:600 18px/1.2 var(--mds-sans); color:var(--mds-tx); }
.xgr__val{ font:600 18px/1.2 var(--mds-sans); color:var(--mds-tx); font-variant-numeric:tabular-nums; }
.xgr__var{ font:400 13px/1.2 var(--mds-sans); font-variant-numeric:tabular-nums; }
.xgr__var--sus{ color:var(--mds-pos); }
.xgr__var--jos{ color:var(--mds-neg); }
.xgr__tabs{ display:flex; gap:5px; padding:4px; border-radius:var(--mds-r-pill); background:var(--mds-line);
  width:fit-content; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.xgr__tabs::-webkit-scrollbar{ display:none; }
.xgr__tab{ padding:8px 14px; border:0; border-radius:var(--mds-r-pill); background:transparent;
  font:600 13px/1.2 var(--mds-sans); color:var(--mds-tx-2); cursor:pointer; white-space:nowrap; }
.xgr__tab:hover{ color:var(--mds-tx); }
.xgr__tab[aria-pressed="true"]{ background:var(--mds-interior); color:var(--mds-tx); }
.xgr__tab:focus-visible{ outline:2px solid var(--mds-line-3); outline-offset:2px; }
.xgr__zona{ position:relative; flex:1 1 auto; min-height:220px; }
.xgr__svg{ position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; }
.xgr__grila line{ stroke:var(--mds-line); stroke-width:1; }
.xgr__grila text{ font:400 12px/1 var(--mds-sans); fill:var(--mds-tx-3); font-variant-numeric:tabular-nums; }
.xgr__linie{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.xgr__linie.xgr--sus{ stroke:var(--mds-pos); }
.xgr__linie.xgr--jos{ stroke:var(--mds-neg); }
.xgr__g0.xgr--sus{ stop-color:var(--mds-pos); stop-opacity:.22; }
.xgr__g0.xgr--jos{ stop-color:var(--mds-neg); stop-opacity:.22; }
.xgr__g1{ stop-opacity:0; }
.xgr__g1.xgr--sus{ stop-color:var(--mds-pos); }
.xgr__g1.xgr--jos{ stop-color:var(--mds-neg); }
.xgr__ver{ stroke:var(--mds-line-3); stroke-width:1; stroke-dasharray:3 3; }
.xgr__pct{ stroke:var(--mds-bg); stroke-width:2; }
.xgr__pct.xgr--sus{ fill:var(--mds-pos); }
.xgr__pct.xgr--jos{ fill:var(--mds-neg); }
.xgr__stare{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 24px;
  text-align:center; font:400 13px/1.5 var(--mds-sans); color:var(--mds-tx-2); pointer-events:none; }
.xgr__stare[hidden], .xgr__tip[hidden]{ display:none; }
.xgr__tip{ position:absolute; top:0; padding:6px 10px; border:1px solid var(--mds-line-2); border-radius:var(--mds-r-sm);
  background:var(--mds-card-hover); font:400 12px/1.2 var(--mds-sans); color:var(--mds-tx); white-space:nowrap;
  pointer-events:none; font-variant-numeric:tabular-nums; }
@media (max-width:600px){
  .mds-tvmodal.xgr-modal{ padding:10px; }
  .xgr{ padding:14px 12px 10px; }
  .xgr__tab{ padding:8px 11px; }
}