/* ============================================================
   SQLearning · Pestaña «Gráfico» (js/grafico.js)
   Paleta validada con la skill dataviz (validate_palette.js):
   noche sobre #0a0914 y día (pastel) sobre #f7f2f5, 5 series, todas las
   comprobaciones en verde para series vecinas (ΔE daltonismo ≥ 10).
   El texto nunca lleva el color de la serie: usa los tokens de texto.
   ============================================================ */
:root {
  --serie-0: #00a6ba;   /* cian */
  --serie-1: #b53c7f;   /* magenta */
  --serie-2: #be8832;   /* oro */
  --serie-3: #9085e9;   /* violeta (más claro: con #795bbf se confundía con el magenta, ΔE 15) */
  --serie-4: #3ca368;   /* verde */
}
:root[data-theme="light"] {
  --serie-0: #0091a3;
  --serie-1: #9d3a67;
  --serie-2: #b77f39;
  --serie-3: #6a51a4;
  --serie-4: #418954;
}
.gr-c0 { --serie: var(--serie-0); }
.gr-c1 { --serie: var(--serie-1); }
.gr-c2 { --serie: var(--serie-2); }
.gr-c3 { --serie: var(--serie-3); }
.gr-c4 { --serie: var(--serie-4); }

.gr { display: flex; flex-direction: column; gap: 12px; }
.gr-panel {
  background: var(--superficie-solida);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 12px 6px;
}
.gr-titulo { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--texto); }
.gr-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 13px; color: var(--texto-suave); }
.gr-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.gr-clave { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--serie); flex: none; }
.gr-clave-barras { height: 10px; width: 10px; border-radius: 2px; }

.gr-marco { position: relative; border-radius: 4px; }
.gr-marco:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.gr-svg { display: block; overflow: visible; }
.gr-svg text { font-family: var(--fuente); }
.gr-eje { font-size: 11px; fill: var(--texto-suave); font-variant-numeric: tabular-nums; }
.gr-etiqueta { font-size: 12px; fill: var(--texto); }
.gr-valor { font-size: 12px; fill: var(--texto); font-variant-numeric: tabular-nums; }
.gr-rejilla { stroke: var(--borde); stroke-width: 1; opacity: 0.6; }
.gr-base { stroke: var(--texto-suave); stroke-width: 1; opacity: 0.7; }
.gr-barra { fill: var(--serie); }
.gr-linea { fill: none; stroke: var(--serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Anillo del color de la superficie: los puntos se leen aunque se crucen líneas */
.gr-punto { fill: var(--serie); stroke: var(--superficie-solida); stroke-width: 2; }
.gr-guia { stroke: var(--texto-suave); stroke-width: 1; }
.gr-zona { fill: transparent; }
.gr-zona.gr-activa { fill: var(--superficie-2); }
.gr-zona-lineas { fill: transparent; }

.gr-tooltip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  min-width: 120px;
  max-width: 280px;
  padding: 8px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  font-size: 13px;
  color: var(--texto-suave);
}
.gr-tooltip[hidden] { display: none; }
.gr-tooltip-titulo { margin-bottom: 4px; color: var(--texto); font-weight: 600; overflow-wrap: anywhere; }
.gr-tooltip-fila { display: flex; align-items: center; gap: 8px; }
.gr-tooltip-fila strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.gr-tooltip-fila span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (forced-colors: active) {
  .gr-barra { fill: CanvasText; }
  .gr-linea { stroke: CanvasText; }
  .gr-punto { fill: CanvasText; stroke: Canvas; }
}