/* ============================================================
   Gráficos SVG y el trazado animado de curvas
   ------------------------------------------------------------
   Capa: componente
   Reúne, en este orden: grafico.css, grafico-animacion.css
   ============================================================ */

/* ═══════════════════════════════════════════════════
   GRÁFICOS SVG
═══════════════════════════════════════════════════ */
.grafico-wrap {
  position: relative;
  text-align: center; margin: 24px auto;
  max-width: 320px;
  background: var(--svg-fondo);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s, transform .3s;
}
.grafico-wrap:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
body.dark-mode .grafico-wrap { background: var(--grafico-bg, var(--card2)); }
.grafico-wrap svg { max-width: 100%; }
.grafico-svg { display: block; width: 100%; height: auto; }
.grafico-label {
  font-family: var(--font-mono);
  font-size: .7rem; color: var(--gray); margin-top: 8px;
}
/* Fade-in para imágenes en gráficos */
.grafico-wrap img {
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .7s ease, transform .7s ease;
  border-radius: var(--radius-sm); max-width: 100%;
}
.grafico-wrap img.visible { opacity: 1; transform: translateY(0) scale(1); }
.grafico-wrap img:hover { transform: scale(1.02); box-shadow: var(--shadow); }

/* ═══════════════════════════════════════════════════
   ANIMACIÓN DE TRAZADO DE CURVAS SVG · v2.1
   Las curvas con .curva-animada se "dibujan solas" al entrar en viewport.
   El JS prepara dasharray/dashoffset y la clase .trazar dispara la animación.
═══════════════════════════════════════════════════ */
.grafico-svg path.curva-animada {
  transition: stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1);
}

/* ── Replay táctil-y-mouse · v2.1 ──
   Mejoras iOS:
   - touch-action: manipulation elimina delay de 300ms
   - tap-highlight-color en transparente (sin gris feo)
   - El SVG no captura el evento: lo captura el wrap completo
   - Hint visual ↻ en mobile para indicar que es tocable */
.grafico-wrap.replay-ready {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.grafico-wrap.replay-ready .grafico-svg {
  pointer-events: none; /* el SVG no se come el tap */
}
.grafico-wrap.replaying {
  box-shadow: 0 0 0 3px var(--accent), var(--shadow);
  transition: box-shadow .15s ease;
}

/* Feedback en touch (reemplaza al :hover) */
@media (hover: none) {
  .grafico-wrap.replay-ready:active {
    transform: scale(.98);
    transition: transform .15s ease;
  }
  /* Hint visual ↻ en esquina: solo en touch, indica "tocá para reproducir" */
  .grafico-wrap.replay-ready::after {
    content: '↻';
    position: absolute;
    top: 8px; right: 10px;
    font-size: .95rem;
    color: var(--accent-strong);
    opacity: .55;
    pointer-events: none;
    transition: opacity .2s, transform .3s;
  }
  html.dark-mode .grafico-wrap.replay-ready::after, body.dark-mode .grafico-wrap.replay-ready::after { color: var(--accent); }
  .grafico-wrap.replaying::after {
    opacity: 1;
    transform: rotate(360deg);
  }
}

@media(prefers-reduced-motion: reduce) {
  .grafico-svg path.curva-animada { transition: none !important; stroke-dashoffset: 0 !important; }
}