/* =============================================================================
   PharmaLab - pl-charts.css (F2) - styles for PL.chart
   Every value falls back to the Halor light palette, so charts render even
   before pharmalab.css loads. Mark colors are read by JS at render time;
   text, chrome and tooltips use the tokens below.
   ========================================================================== */

.ch {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  --ch-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
}
.ch-svg {
  display: block;
  overflow: visible;
  max-width: 100%;
  border-radius: 12px;
  outline: none;
  touch-action: pan-y;
}
.ch-svg:focus-visible {
  outline: 2px solid var(--focus-ring, #0C2DC9);
  outline-offset: 6px;
}
/* Keep "R$ 1.214.951" readable under negative tracking (word-spacing also widens the no-break space) */
.ch-card-v, .ch-cv, .ch-flag b, .ch-tip-r b, .ch-capv, .ch-val, .ch-wv, .ch-fv, .ch-rv { word-spacing: .12em; }
.ch.is-clickable .ch-svg { cursor: pointer; }
.ch text { font-family: inherit; }

/* ---- text roles ---------------------------------------------------------- */
.ch-ax { font-size: 12px; font-weight: 500; fill: var(--muted, #6C7382); }
.ch-ax-sm { font-size: 11.5px; }
.ch-xl { transition: fill var(--t-fast, 160ms) ease; }
.ch-xl.is-on { fill: var(--text, #0E1116); font-weight: 600; }
.ch-axt { font-size: 11.5px; font-weight: 600; fill: var(--muted, #6C7382); letter-spacing: .01em; }
.ch-lbl { font-size: 13.5px; font-weight: 600; fill: var(--text, #0E1116); }
.ch-lbl-sm { font-size: 13px; }
.ch-sub { font-size: 12px; font-weight: 500; fill: var(--muted, #6C7382); }
.ch-sub-sm { font-size: 11.5px; }
.ch-val { font-size: 13.5px; font-weight: 600; fill: var(--text, #0E1116); }
.ch-rank { font-size: 12px; font-weight: 700; fill: var(--muted, #6C7382); }
.ch-av { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.ch-av-cap { fill: var(--text, #0E1116); }
.ch-cv { font-weight: 700; letter-spacing: -.025em; fill: var(--text, #0E1116); }
.ch-cl { font-size: 12px; font-weight: 500; fill: var(--muted, #6C7382); }
.ch-cs { font-size: 11.5px; font-weight: 600; fill: var(--text-2, #353A46); }
.ch-tl { font-size: 12px; font-weight: 600; fill: var(--text-2, #353A46); }
.ch-conv { font-size: 12px; font-weight: 700; fill: var(--text, #0E1116); }
.ch-fv { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.ch-cohv { font-size: 11.5px; font-weight: 700; }
.ch-uf { font-weight: 700; letter-spacing: .02em; pointer-events: none; }
.ch-wv { font-size: 11.5px; font-weight: 600; fill: var(--text-2, #353A46); }
.ch-capl { font-size: 12.5px; font-weight: 600; letter-spacing: .005em; pointer-events: none; }
.ch-capv { font-size: 14px; font-weight: 700; fill: var(--text, #0E1116); letter-spacing: -.01em; }
.ch-ptl, .ch-nl {
  font-size: 12px; font-weight: 600; fill: var(--text-2, #353A46);
  paint-order: stroke; stroke: var(--surface, #fff); stroke-width: 4px; stroke-linejoin: round;
}
.ch-nl { font-size: 12.5px; fill: var(--text, #0E1116); }
.ch-nv {
  font-size: 12px; font-weight: 500; fill: var(--muted, #6C7382);
  paint-order: stroke; stroke: var(--surface, #fff); stroke-width: 4px; stroke-linejoin: round;
}
.ch-q { font-size: 11px; font-weight: 600; fill: var(--muted, #6C7382); letter-spacing: .02em; }
.ch-q-on { fill: var(--primary, #0C2DC9); }
.ch-over { font-size: 11.5px; font-weight: 700; }
.ch-rl { font-weight: 600; fill: var(--text-2, #353A46); }
.ch-rl.is-on { fill: var(--text, #0E1116); }
.ch-rv { font-size: 12px; font-weight: 700; fill: var(--text, #0E1116); }
.ch-rv2 { font-weight: 500; fill: var(--muted, #6C7382); }
.ch-now { font-size: 11.5px; font-weight: 700; }
.ch-wv.is-strong { font-weight: 700; fill: var(--text, #0E1116); }
.ch-wl { font-size: 12.5px; fill: var(--text-2, #353A46); }
.ch-wl.is-strong { font-weight: 600; fill: var(--text, #0E1116); }
.ch-halo { paint-order: stroke; stroke: var(--surface, #fff); stroke-width: 4px; stroke-linejoin: round; }
.ch-flag.is-compact .ch-tip-r span { font-size: 11px; }

/* ---- marks & hover states ------------------------------------------------ */
.ch-bar, .ch-seg, .ch-dseg, .ch-mseg, .ch-link, .ch-cell, .ch-tile, .ch-pt, .ch-cap, .ch-wf, .ch-fstep, .ch-row, .ch-gr {
  transition: opacity var(--t-fast, 160ms) ease, filter var(--t-fast, 160ms) ease, stroke-width var(--t-fast, 160ms) ease;
}
.ch-hcol, .ch-mk { transition: x 140ms var(--ch-ease), y 140ms var(--ch-ease), height 140ms var(--ch-ease), cx 140ms var(--ch-ease), cy 140ms var(--ch-ease), opacity 120ms ease; pointer-events: none; }
.ch-cross { pointer-events: none; }
.ch .is-dim { opacity: .32; } /* scoped to charts: a global .is-dim used to dim page panels */
.ch-dseg.is-dim { opacity: .28; }
.ch-row .ch-rowbg, .ch-gr .ch-rowbg { opacity: 0; transition: opacity var(--t-fast, 160ms) ease; }
.ch-row.is-on .ch-rowbg, .ch-gr.is-on .ch-rowbg { opacity: 1; }
.ch-cell.is-on > rect, rect.ch-cell.is-on, .ch-tile.is-on rect {
  stroke: var(--text, #0E1116); stroke-width: 2px; paint-order: stroke;
}
.ch-tile { cursor: default; }
.ch-tile .ch-uf { transition: opacity var(--t-fast, 160ms); }
.ch-pt.is-on { stroke-width: 2.5px; filter: saturate(1.1); }
.ch-pt.is-on { fill-opacity: 1; }
.ch-link { mix-blend-mode: normal; opacity: .26; }
[data-theme="dark"] .ch-link { opacity: .34; }
.ch-link.is-on { opacity: .62; }
.ch-link.is-dim { opacity: .1; }
.ch-cap-in { transition: transform 200ms var(--ch-ease); transform-box: fill-box; }
.ch-cap.is-on .ch-cap-in { transform: translateY(-4px); }
.ch-cap.is-dim { opacity: .45; }

/* ---- in-chart flag (Ink bubble) and the shared tooltip ------------------- */
.ch-tip {
  position: fixed;
  left: 0; top: 0;
  z-index: 1200;
  min-width: 0;
  max-width: 300px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--pl-ink, #0E1116);
  color: #fff;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 12px 32px rgba(14, 17, 22, .22);
  transition: opacity 120ms ease;
}
.ch-tip.is-on { opacity: 1; }
.ch-tip small { color: rgba(255, 255, 255, .58); font-weight: 500; font-size: 12px; margin-left: 6px; }
.ch-tip-t { color: rgba(255, 255, 255, .62); font-size: 11.5px; font-weight: 500; margin-bottom: 4px; }
.ch-tip-r { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ch-tip-r + .ch-tip-r { margin-top: 3px; }
.ch-tip-r i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14); }
.ch-tip-r b { font-weight: 600; }
.ch-tip-r span { color: rgba(255, 255, 255, .62); font-weight: 500; font-size: 12px; }
.ch-tip-f { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); font-size: 11.5px; font-weight: 500; }

.ch-flag {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -100%);
  box-shadow: 0 8px 24px rgba(14, 17, 22, .18);
  transition: left 160ms var(--ch-ease), top 160ms var(--ch-ease), opacity 120ms ease;
}
.ch-flag.is-multi { padding: 9px 13px; }
.ch-flag.is-side { transform: none; }

[data-theme="dark"] .ch-tip {
  background: #232835;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px rgba(0, 0, 0, .5);
}

/* ---- pillBars floating card (Pharmly) ------------------------------------ */
.ch-card {
  position: absolute;
  z-index: 3;
  left: 0; top: 0;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 9px 12px 9px;
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 30px rgba(14, 17, 22, .12), 0 0 0 1px rgba(14, 17, 22, .04);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: left 180ms var(--ch-ease), top 180ms var(--ch-ease), opacity 140ms ease;
}
.ch-card.is-on { opacity: 1; }
.ch-card::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -5px;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(14, 17, 22, .05);
}
.ch-card-v { font-size: 15px; font-weight: 700; letter-spacing: -.015em; color: var(--text, #0E1116); line-height: 1.1; }
.ch-card-s { font-size: 11.5px; font-weight: 500; color: var(--muted, #6C7382); margin-top: -2px; }
[data-theme="dark"] .ch-card { background: var(--surface-3, #20242F); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 36px rgba(0, 0, 0, .45); }

.ch-delta {
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 7px 0 5px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  background: var(--primary-soft, #E7EBFA); color: var(--primary, #0C2DC9);
}
.ch-delta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ch-delta.down { background: var(--surface-3, #E9EAEC); color: var(--text-2, #353A46); }

/* ---- legends ------------------------------------------------------------- */
.ch-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 12.5px; font-weight: 500; color: var(--muted, #6C7382);
}
.ch-legend.is-top { margin: 0 0 16px; }
.ch-lg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ch-sw { width: 12px; height: 12px; border-radius: 4px; flex: none; display: inline-block; }
.ch-sw.is-line { width: 16px; height: 3px; border-radius: 3px; background: var(--sw); }
.ch-sw.is-dashed { background: repeating-linear-gradient(90deg, var(--sw) 0 5px, transparent 5px 8px); }

.ch-scale {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 14px;
  font-size: 12px; font-weight: 500; color: var(--muted, #6C7382);
}
.ch-scale i { width: 22px; height: 10px; border-radius: 4px; display: inline-block; }
.ch-scale span { margin: 0 6px; white-space: nowrap; }

/* donut */
.ch-donut { display: grid; justify-items: center; gap: 18px; }
.ch-donut.is-side { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 28px; }
.ch-donut.is-side .ch-svg { justify-self: center; }
.ch-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; min-width: 0; }
.ch-dl li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--text-2, #353A46);
  cursor: default; transition: background var(--t-fast, 160ms) ease;
}
.ch-dl li.is-on { background: var(--surface-2, #F3F4F6); }
.ch-dl i { width: 10px; height: 10px; border-radius: 50%; }
.ch-dl-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-dl b { font-weight: 600; color: var(--text, #0E1116); white-space: nowrap; }
.ch-dl em { font-style: normal; font-size: 12px; color: var(--muted, #6C7382); min-width: 44px; text-align: right; white-space: nowrap; }

/* meter */
.ch-ml { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ch-ml li { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted, #6C7382); padding: 2px 0; border-radius: 8px; }
.ch-ml i { width: 10px; height: 10px; border-radius: 3px; }
.ch-ml b { color: var(--text, #0E1116); font-weight: 600; }
.ch-ml em { font-style: normal; color: var(--muted, #6C7382); }
.ch-ml li.is-on span { color: var(--text, #0E1116); }

/* brMap */
.ch-map { display: grid; gap: 20px; }
.ch-map.is-side { grid-template-columns: max-content minmax(0, 440px); align-items: center; justify-content: start; gap: 48px; }
.ch-map.is-side .ch-svg { max-width: none; }
.ch-map.is-wide { grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); gap: 40px; justify-content: stretch; }
.ch-regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ch-regions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; align-items: baseline; padding: 0 10px; }
.ch-reg-n { font-size: 13.5px; font-weight: 600; color: var(--text, #0E1116); display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ch-reg-n small { font-size: 12px; font-weight: 500; color: var(--muted, #6C7382); }
.ch-regions b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; word-spacing: .12em; white-space: nowrap; }
.ch-reg-bar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 8px; background: var(--surface-2, #F3F4F6); overflow: hidden; }
.ch-reg-bar > i { display: block; height: 100%; border-radius: 8px; }
.ch-map-g { min-width: 0; }
.ch-map-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6C7382); margin: 0 0 10px 10px; }
.ch-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ch-rank li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 14px; transition: background var(--t-fast, 160ms) ease;
}
.ch-rank li.is-on { background: var(--surface-2, #F3F4F6); }
.ch-rank-uf { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.ch-rank-n { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text, #0E1116); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rank-n small { display: block; font-size: 12px; font-weight: 500; color: var(--muted, #6C7382); margin-top: 1px; }
.ch-rank b { font-size: 13.5px; font-weight: 600; color: var(--text, #0E1116); white-space: nowrap; }

/* ---- live region --------------------------------------------------------- */
.ch-live {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- skeleton & empty ---------------------------------------------------- */
.ch-skel {
  position: relative; display: flex; align-items: flex-end; gap: 10px;
  overflow: hidden; border-radius: 14px;
}
.ch-skel > span { background: var(--surface-2, #F3F4F6); border-radius: 999px; position: relative; overflow: hidden; }
.ch-skel > span::after, .ch-sk-g::after, .ch-sk-c::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ch-shimmer 1.3s ease-in-out infinite;
}
[data-theme="dark"] .ch-skel > span::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .06) 50%, transparent 80%); }
.ch-sk-b { flex: 1; height: var(--p); }
.ch-skel-rows { flex-direction: column; align-items: stretch; justify-content: space-around; gap: 14px; }
.ch-sk-r { height: 14px; width: var(--p); }
.ch-skel-circle { justify-content: center; align-items: center; }
.ch-sk-c { width: min(100%, 72%); aspect-ratio: 1; max-height: 92%; width: auto; height: 86%; border-radius: 50% !important; background: none !important; box-shadow: inset 0 0 0 18px var(--surface-2, #F3F4F6); }
.ch-skel-grid { align-items: stretch; }
.ch-sk-g { flex: 1; border-radius: 14px !important; background: repeating-linear-gradient(90deg, var(--surface-2, #F3F4F6) 0 30px, transparent 30px 36px), var(--surface) !important;
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 30px, transparent 30px 36px); mask: repeating-linear-gradient(0deg, #000 0 30px, transparent 30px 36px); }
.ch-skel-line, .ch-skel-block { align-items: stretch; }
.ch-sk-l { flex: 1; border-radius: 12px !important; }
@keyframes ch-shimmer { to { transform: translateX(100%); } }

.ch-empty {
  display: grid; place-content: center; justify-items: center; gap: 6px;
  text-align: center; padding: 16px;
  border-radius: 18px;
  background: var(--surface-2, #F3F4F6);
  color: var(--muted, #6C7382); font-size: 12.5px; font-weight: 500;
}
.ch-empty b { color: var(--text, #0E1116); font-size: 14px; font-weight: 600; }
.ch-empty-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface, #fff); color: var(--muted, #6C7382); margin-bottom: 4px; }
.ch-empty-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- entrance animation (draw-in) ---------------------------------------- */
.ch-play .ch-a-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: ch-grow 720ms var(--ch-ease) backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-a-growx { transform-box: fill-box; transform-origin: 0 50%; animation: ch-growx 760ms var(--ch-ease) backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-a-growc { transform-box: fill-box; transform-origin: 50% 50%; animation: ch-growx 700ms var(--ch-ease) backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-a-reveal { transform-box: fill-box; transform-origin: 0 50%; animation: ch-growx 1100ms cubic-bezier(.35, .1, .25, 1) backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-a-fade { animation: ch-fade 520ms ease backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-a-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: ch-pop 480ms var(--ch-ease) backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-a-draw { stroke-dasharray: 1 1; animation: ch-draw 900ms var(--ch-ease) backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-a-scale { transform-box: view-box; animation: ch-scale 720ms var(--ch-ease) backwards; animation-delay: var(--d, 0ms); }
.ch-play .ch-flag, .ch-play .ch-card { animation: ch-fade 420ms ease 620ms backwards; }
.ch-play .ch-hcol, .ch-play .ch-mk { animation: ch-fade 360ms ease 640ms backwards; }
.ch-pulse { transform-box: fill-box; transform-origin: 50% 50%; animation: ch-pulse 1.6s ease-in-out infinite; }

@keyframes ch-grow { from { transform: scaleY(0); } }
@keyframes ch-growx { from { transform: scaleX(0); } }
@keyframes ch-fade { from { opacity: 0; } }
@keyframes ch-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes ch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ch-scale { from { transform: scale(.2); opacity: 0; } }
@keyframes ch-pulse { 50% { transform: scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
  .ch *, .ch-tip, .ch-flag, .ch-card { animation: none !important; transition: none !important; }
}
.pl-reduced .ch *, .pl-reduced .ch-tip, .pl-reduced .ch-flag, .pl-reduced .ch-card { animation: none !important; transition: none !important; }

/* ---- forced colors / print ----------------------------------------------- */
@media (forced-colors: active) {
  .ch-tip { border: 1px solid CanvasText; }
  .ch-svg:focus-visible { outline-color: Highlight; }
}
@media print {
  .ch-tip, .ch-flag, .ch-card { display: none !important; }
}