/* ===============================================================
 * Chart de precios — área/línea + opcional velas + volumen + KPIs
 * Inspirado en PokemonPriceTracker: KPI strip arriba, gráfica grande.
 * =============================================================== */
.chart-wrap {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
}
.chart-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.chart-toolbar__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.chart-toolbar__title small { color: var(--text-3); font-weight: 500; font-size: 12px; }

/* Tabs EUR/USD + rango temporal */
.chart-tabs { display: flex; gap: 4px; background: var(--bg-deep); padding: 4px; border-radius: var(--r-sm); }
.chart-tab {
  padding: 6px 14px;
  border-radius: var(--r-xs);
  font-size: 12px; font-weight: 600;
  color: var(--text-3); background: transparent;
  border: 0;
  font-family: inherit;
}
.chart-tab--active { background: var(--bg-raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--poke-gold); }
.chart-tab:hover { color: var(--text); }

/* Nota honesta de moneda: histórico EUR escaso → mostramos USD como referencia */
.chart-curr-note {
  font-size: var(--fs-caption); color: var(--text-3); line-height: 1.5;
  margin: 8px 0 2px; padding: 6px 10px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
}
.chart-curr-note[hidden] { display: none; }

/* KPI strip horizontal sobre el gráfico */
.chart-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.chart-kpi { display: flex; flex-direction: column; gap: 4px; }
.chart-kpi__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); font-weight: 700;
}
.chart-kpi__value {
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* SVG wrapper */
.chart-svg-wrap { position: relative; width: 100%; }
.chart-svg { width: 100%; height: 380px; display: block; }
.chart-svg text { font-family: var(--font-mono); font-size: 12px; fill: var(--text-2); font-weight: 600; }
.chart-svg text.axis-x { font-size: 12px; fill: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.chart-svg .grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-svg .axis-line { stroke: var(--border-h); stroke-width: 1; }
.chart-svg .candle-up { fill: var(--up); stroke: var(--up); }
.chart-svg .candle-down { fill: var(--down); stroke: var(--down); }
.chart-svg .candle-wick { stroke-width: 1.3; }

/* Tooltip */
.chart-tooltip {
  position: absolute;
  background: var(--poke-ink);
  border: 1px solid var(--border-h);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
  box-shadow: var(--shadow-3);
  opacity: 0;
  min-width: 180px;
  transition: opacity var(--t-fast);
}
.chart-tooltip.is-visible { opacity: 1; }
.chart-tooltip strong { color: var(--poke-gold); font-size: 12px; }
.chart-tooltip .row { display: flex; justify-content: space-between; gap: 14px; margin-top: 3px; }
.chart-tooltip .row span:first-child { color: var(--text-3); }

/* Crosshair vertical */
.chart-crosshair {
  position: absolute;
  width: 1px;
  background: var(--poke-gold);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity var(--t-fast);
}
.chart-crosshair.is-visible { opacity: .6; }

/* Estado vacío */
.chart-empty {
  height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  color: var(--text-3);
  font-size: 14px;
  border: 2px dashed var(--border);
  border-radius: var(--r-md);
  text-align: center;
  padding: var(--space-6);
}
/* Estado "en construcción" (R2): mismo layout que el vacío pero con un acento cálido
   que comunica "en progreso", no "error". El primer span es el título. */
.chart-building > span:first-of-type { color: var(--poke-gold, #d4a23a); font-weight: 600; }

/* Responsive móvil */
@media (max-width: 560px) {
  .chart-wrap { padding: var(--space-3); }
  /* altura se mantiene (= H del viewBox) para no distorsionar con meet */
  .chart-kpis { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-2); }
  .chart-kpi__value { font-size: 16px; }
  .chart-tab { padding: 6px 10px; }
}