/* =========================================================
   letsgodrop · Gráficos: estilos del kit de js/graficos.js (todo con prefijo g-)
   Usa las variables de tema de la página (--ink, --line, --fill, --card, --c-*, --brand)
   con valores de reserva, así que funciona en claro y en oscuro sin tocar nada.
   ========================================================= */

/* ---------- Variables del kit: se declaran en cada gráfico y en el tooltip, y siguen al tema de su zona ---------- */
.g, .g-tip {
  --g-ink: var(--ink, #1d1d1f);
  --g-soft: var(--ink-soft, #6e6e73);
  --g-muted: var(--ink-muted, #86868b);
  --g-line: var(--line, rgba(0, 0, 0, 0.08));
  --g-track: var(--fill, rgba(120, 120, 128, 0.12));
  --g-card: var(--card, #fff);
  --g-tip-bg: var(--ink, #1d1d1f);
  --g-tip-ink: var(--card, #fff);
  --g-focus: var(--brand, #2f6bff);
  --g-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --g-bounce: cubic-bezier(0.34, 1.32, 0.64, 1);
  --g-dur: 0.8s;
  --g-c: var(--c-blue, #0a84ff);
}
:root[data-theme="dark"] .g, :root[data-theme="dark"] .g-tip {
  --g-ink: var(--ink, #f5f5f7);
  --g-soft: var(--ink-soft, #a1a1a6);
  --g-muted: var(--ink-muted, #6e6e73);
  --g-line: var(--line, rgba(255, 255, 255, 0.1));
  --g-track: var(--fill, rgba(118, 118, 128, 0.24));
  --g-card: var(--card, #141417);
  --g-tip-bg: var(--ink, #f5f5f7);
  --g-tip-ink: var(--card, #141417);
  --g-focus: var(--brand, #4d8dff);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g, :root:not([data-theme="light"]) .g-tip {
    --g-ink: var(--ink, #f5f5f7);
    --g-soft: var(--ink-soft, #a1a1a6);
    --g-muted: var(--ink-muted, #6e6e73);
    --g-line: var(--line, rgba(255, 255, 255, 0.1));
    --g-track: var(--fill, rgba(118, 118, 128, 0.24));
    --g-card: var(--card, #141417);
    --g-tip-bg: var(--ink, #f5f5f7);
    --g-tip-ink: var(--card, #141417);
    --g-focus: var(--brand, #4d8dff);
  }
}

/* ---------- Base: aislado de lo que herede de la página ---------- */
.g {
  position: relative;
  color: var(--g-ink);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.g *, .g *::before, .g *::after, .g-tip, .g-tip * { box-sizing: border-box; }
.g [hidden] { display: none !important; }
.g svg { display: block; overflow: visible; }
.g text { font-family: inherit; font-variant-numeric: tabular-nums; }

/* ---------- Figuras de tamaño fijo y su centro ---------- */
.g-fig { position: relative; max-width: 100%; margin: 0 auto; container-type: inline-size; }
.g-fig > svg { width: 100%; height: auto; }
.g-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  font-size: var(--g-fpx, 20px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--g-ink);
}
@supports (width: 1cqw) {
  .g-center { font-size: var(--g-fcq, var(--g-fpx, 20px)); }
}
.g-center > * { max-width: var(--g-in, 70%); }
.g-center__v { display: block; white-space: nowrap; }
.g-center__l, .g-center small {
  display: block;
  margin-top: 0.3em;
  font-size: max(11px, 0.42em);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--g-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-center--gauge { justify-content: flex-end; padding-bottom: 2px; }
.g-center.is-swap > * { animation: g-swap 0.32s var(--g-ease); }
@keyframes g-swap { from { opacity: 0; transform: translateY(3px); } }

/* ---------- Anillos (ring, rings) ---------- */
.g-track, .g-arc, .g-dtrack, .g-seg, .g-hit, .g-gzone, .g-gval { fill: none; }
.g-track { stroke: var(--g-c); stroke-opacity: 0.16; stroke-linecap: round; }
.g-arc {
  stroke: var(--g-c);
  stroke-linecap: round;
  transition: stroke-dasharray var(--g-dur) var(--g-ease), opacity 0.3s ease;
}
.g-cap { opacity: 0; transition: opacity 0.2s ease; }
.g-one { transition: opacity 0.25s ease; }
.g-one.is-dim { opacity: 0.35; }
.g-hit { stroke: transparent; pointer-events: stroke; outline: none; cursor: default; }

/* ---------- Donut ---------- */
.g-dtrack { stroke: var(--g-track); transition: opacity 0.4s ease; }
.g-seg {
  stroke: var(--g-c);
  stroke-width: var(--w, 26px);
  stroke-linecap: round;
  transition: stroke-dasharray var(--g-dur) var(--g-ease), stroke-dashoffset var(--g-dur) var(--g-ease),
    stroke-width 0.25s var(--g-ease), stroke-opacity 0.25s ease, opacity 0.35s ease;
}
.g-seg.is-on { stroke-width: calc(var(--w, 26px) + 4px); }
.g--donut.is-hover .g-seg:not(.is-on) { stroke-opacity: 0.4; }

/* ---------- Barras verticales ---------- */
.g--bars { padding-top: 30px; }
.g-bars__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.g-bar { position: relative; min-width: 0; border-radius: 12px; outline: none; cursor: default; }
.g-bar:focus-visible { box-shadow: 0 0 0 2px var(--g-focus); }
.g-bar__plot { position: relative; height: var(--g-ph, 120px); transition: opacity 0.3s ease; }
.g-bar__track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: min(100%, clamp(18px, 46%, 44px));
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--g-c) 14%, transparent);
}
.g-bar__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-radius: 999px;
  background: var(--g-c);
  transition: height var(--g-dur) var(--g-bounce), filter 0.2s ease;
}
.g-bar__pv {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: bottom var(--g-dur) var(--g-bounce), opacity 0.3s ease;
}
.g-bar__val {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--g-ink);
  background: color-mix(in srgb, var(--g-c) 16%, var(--g-card));
  transition: background-color 0.25s ease, color 0.25s ease;
}
.g-bar.is-hl .g-bar__val { background: var(--g-tip-bg); color: var(--g-tip-ink); }
.g-bar__lab, .g-bar__sub { min-height: 14px; padding: 0 2px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-bar__lab { margin-top: 8px; font-size: 12px; font-weight: 500; line-height: 14px; color: var(--g-soft); }
.g-bar__sub { display: none; margin-top: 2px; font-size: 11px; line-height: 14px; color: var(--g-muted); }
.g--bars.has-sub .g-bar__sub { display: block; }
.g--bars.no-lab .g-bar__lab { display: none; }
.g--bars.has-hl .g-bar:not(.is-hl) .g-bar__plot { opacity: 0.45; }
.g--bars .g-bar.is-on .g-bar__plot { opacity: 1; }
.g-bar.is-on .g-bar__fill { filter: brightness(1.08); }
/* La línea de referencia, discontinua, con su etiqueta encima a la derecha */
.g-bars__mk {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: top var(--g-dur) var(--g-ease), opacity 0.4s ease 0.3s;
}
.g-bars__mk.is-in { opacity: 1; }
.g-bars__mk::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--g-c) 50%, transparent 0) 0 0 / 8px 100% repeat-x;
}
.g-bars__mkl {
  position: absolute;
  right: 0;
  bottom: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  white-space: nowrap;
  color: var(--g-soft);
  background: var(--g-card);
  box-shadow: 0 0 0 1px var(--g-line);
}

/* ---------- Barras horizontales ---------- */
.g-hbars__rows { display: grid; gap: 16px; }
.g-hrow__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.g-hrow__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--g-soft); }
.g-hrow__v { flex: none; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--g-ink); }
.g-hrow__track { position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: var(--g-track); }
.g-hrow__track.is-solo { background: color-mix(in srgb, var(--g-c) 14%, transparent); }
.g-hrow__fill {
  display: flex;
  gap: 2px;
  width: 0;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: var(--g-c);
  transition: width var(--g-dur) var(--g-bounce);
}
.g-hrow__fill.has-parts { background: var(--g-card); }
.g-hpart {
  flex: 0 1 0;
  min-width: 0;
  height: 100%;
  background: var(--g-c);
  outline: none;
  transition: flex-grow var(--g-dur) var(--g-ease), filter 0.2s ease;
}
.g-hpart:hover, .g-hpart:focus-visible { filter: brightness(1.1); }
.g-hpart:focus-visible { box-shadow: inset 0 0 0 2px var(--g-card); }
.g-hrow__track:has(.g-hpart:focus-visible) { box-shadow: 0 0 0 2px var(--g-focus); }

/* ---------- Leyenda (líneas con dos series o más, partes apiladas) ---------- */
.g-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--g-soft); }
.g--hbars .g-leg { margin: 14px 0 0; }
.g-leg__i { display: inline-flex; align-items: center; gap: 7px; }
.g-leg__k { flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--g-c); }
.g-leg--sq .g-leg__k { width: 9px; height: 9px; border-radius: 3px; }

/* ---------- Líneas ---------- */
.g-ln { position: relative; border-radius: 10px; outline: none; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.g-ln:focus-visible { box-shadow: 0 0 0 2px var(--g-focus); }
.g-ln__svg { width: 100%; }
.g-ln__grid line { stroke: var(--g-line); stroke-width: 1; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; }
.g-ln__grid line.is-zero { stroke: var(--g-muted); stroke-opacity: 0.6; }
.g-ln__ty, .g-ln__tx { fill: var(--g-muted); font-size: 11px; font-weight: 500; }
.g-st0 { stop-color: var(--g-c); stop-opacity: 0.28; }
.g-st1 { stop-color: var(--g-c); stop-opacity: 0; }
.g-ln__area { stroke: none; transition: opacity 0.7s var(--g-ease) 0.35s; }
.g-ln__path { fill: none; stroke: var(--g-c); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.g-ln__lone { fill: var(--g-c); stroke: none; transition: opacity 0.3s ease 0.5s; }
.g--line.is-draw .g-ln__path { transition: stroke-dashoffset 0.9s cubic-bezier(0.45, 0, 0.25, 1); }
.g-ln__refs, .g-ln__marks, .g-ln__over { transition: opacity 0.45s ease 0.75s; }
.g--line.is-pre .g-ln__path, .g--line.is-pre .g-ln__lone, .g--line.is-pre .g-ln__area,
.g--line.is-pre .g-ln__refs, .g--line.is-pre .g-ln__marks, .g--line.is-pre .g-ln__over { opacity: 0; transition: none; }
.g-ln__floor { fill: none; stroke: var(--g-c); stroke-width: 1.5px; stroke-dasharray: 4 4; }
.g-ln__mk { stroke: var(--g-c); stroke-opacity: 0.5; stroke-width: 1; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; }
.g-ln__x { stroke: var(--g-soft); stroke-opacity: 0.45; stroke-width: 1; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.15s ease; }
.g--line.is-hover .g-ln__x { opacity: 1; }
.g-dot { fill: var(--g-c); stroke: var(--g-card); stroke-width: 2px; }
.g-ln__dot { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.g--line.is-hover .g-ln__dot.is-on { opacity: 1; }
.g-ln__over { position: absolute; inset: 0; pointer-events: none; }
/* Pastillas sobre el gráfico: marcas, mínimo y etiqueta del suelo */
.g-pill {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--g-ink);
  background: var(--g-card);
  box-shadow: 0 0 0 1px var(--g-line), 0 4px 12px -6px rgba(0, 0, 0, 0.25);
}
.g-pill--tint { background: color-mix(in srgb, var(--g-c) 16%, var(--g-card)); box-shadow: none; }
.g-pill--soft { font-weight: 500; color: var(--g-soft); }

/* ---------- Indicador (gauge) ---------- */
.g-gwrap { max-width: 100%; margin: 0 auto; }
.g-gzone { stroke: var(--g-c); stroke-opacity: 0.2; stroke-linecap: round; }
.g-gval {
  stroke: var(--g-c);
  stroke-linecap: round;
  transition: stroke-dasharray var(--g-dur) var(--g-ease), stroke 0.5s ease, opacity 0.3s ease;
}
.g-knob {
  fill: var(--g-c);
  stroke: #fff;
  stroke-width: 3px;
  transform-box: view-box;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
  transition: transform var(--g-dur) var(--g-ease), fill 0.5s ease;
}
.g-gauge__ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 500; color: var(--g-muted); }

/* ---------- Tooltip: pastilla propia, encima del puntero, con fundido y un leve escalado ---------- */
.g-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  max-width: min(280px, calc(100vw - 16px));
  padding: 7px 12px 8px;
  border-radius: 15px;
  background: var(--g-tip-bg);
  color: var(--g-tip-ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 0.16s ease, transform 0.22s var(--g-ease), visibility 0s linear 0.22s;
}
.g-tip.is-below { transform: translateY(-4px) scale(0.96); transform-origin: 50% 0; }
.g-tip.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.g-tip__t { margin-bottom: 3px; font-size: 11px; opacity: 0.68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-tip__r { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.g-tip__r + .g-tip__r { margin-top: 3px; }
.g-tip__k { flex: none; width: 10px; height: 3px; border-radius: 2px; background: var(--g-c); }
.g-tip__v { font-size: 13px; font-weight: 650; }
.g-tip__l { opacity: 0.68; }
.g-tip__n { margin-top: 2px; font-size: 11px; opacity: 0.68; }

/* ---------- Navegadores sin color-mix: tintes neutros en vez de transparentes ---------- */
@supports not (color: color-mix(in srgb, red, blue)) {
  .g-bar__track, .g-hrow__track.is-solo { background: var(--g-track); }
  .g-bar__val, .g-pill--tint { background: var(--g-track); }
}

/* ---------- Sin movimiento si el sistema lo pide: estado final directo ---------- */
@media (prefers-reduced-motion: reduce) {
  .g *, .g-tip { transition: none !important; animation: none !important; }
}