/* gym-exercise-guide.css — Ficha de técnica/biomecánica (carta VIVA, visual primero).
   Todo se coreografía al mismo compás de 2.4s (la repetición). Usa los tokens de GymFit;
   incluye fallbacks por si se renderiza fuera de la app (página de previsualización). */

.guide { display: flex; flex-direction: column; gap: 16px; }

/* Zona viva: héroe + claves al mismo ritmo, pausables a la vez */
.guide-live { display: flex; flex-direction: column; gap: 12px; }

/* ───── Héroe animado ───── */
.guide-stage { position: relative; }
.guide-demo {
  position: relative;
  width: 100%;
  aspect-ratio: 850 / 567;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-2, #1c1c22);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
}
.guide-demo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* El fotograma superior (posición final) se desvanece dentro/fuera → simula la repetición. */
.guide-demo-img--top {
  animation: guideRep 2.4s ease-in-out infinite;
  will-change: opacity;
}
@keyframes guideRep {
  0%, 18%   { opacity: 0; }
  42%, 58%  { opacity: 1; }
  82%, 100% { opacity: 0; }
}

.guide-demo-loop {
  position: absolute; right: 10px; top: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; color: #fff;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
}

/* Botón pausar/reanudar */
.guide-playpause {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  font-size: 15px; color: #fff;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease;
}
.guide-playpause:hover { background: rgba(0, 0, 0, .7); transform: scale(1.06); }
.guide-playpause:focus-visible { outline: 2px solid var(--accent, #6aa7ff); outline-offset: 2px; }

/* Pausa global de la coreografía (solo el bucle del héroe; las claves son one-shot) */
.guide-live.is-paused .guide-demo-img--top { animation-play-state: paused; opacity: 1; }

/* ───── Claves rápidas: aparecen UNA A UNA al abrir la ficha (una sola vez, sin bucle) ───── */
.guide-cues { display: grid; gap: 8px; }
.guide-cue {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2, #1c1c22);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  opacity: 0;
  animation: cueReveal 1s ease forwards;
  animation-delay: calc(var(--cue-i, 0) * 0.9s);
}
@keyframes cueReveal {
  0%   { opacity: 0; transform: translateY(6px); border-color: var(--border, rgba(255,255,255,.08)); }
  60%  { opacity: 1; transform: none; border-color: var(--accent, #6aa7ff); }
  100% { opacity: 1; transform: none; border-color: var(--border, rgba(255,255,255,.08)); }
}
.guide-cue-dot {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 800;
  color: var(--accent-ink, #06121f);
  background: var(--accent, #6aa7ff);
  transition: transform .2s ease;
}
.guide-cue-txt { font-size: 15px; font-weight: 600; color: var(--text, #eef0f3); line-height: 1.3; }

/* ───── Músculos ───── */
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-chip {
  font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  background: var(--surface-2, #1c1c22);
  color: var(--text-2, #c7ccd4);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
  text-transform: capitalize;
}
.guide-chip--primary { background: var(--accent-soft, rgba(106, 167, 255, .15)); color: var(--accent, #6aa7ff); border-color: transparent; }
.guide-chip--ghost { background: transparent; color: var(--text-3, #9aa0aa); }

/* ───── Nota del coach ───── */
.guide-note {
  border-left: 3px solid var(--accent, #6aa7ff);
  background: var(--surface-2, #1c1c22);
  border-radius: 0 12px 12px 0;
  padding: 10px 14px;
}
.guide-note-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent, #6aa7ff); margin-bottom: 4px; }
.guide-note-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text, #eef0f3); }

/* ───── Pestañas (detalle bajo demanda) ───── */
.guide-tabs { display: flex; flex-direction: column; gap: 14px; }
.guide-tabbar {
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2, #1c1c22);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.guide-tab {
  flex: 1;
  appearance: none; border: 0; cursor: pointer;
  padding: 9px 8px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--text-2, #c7ccd4);
  background: transparent;
  transition: background .18s ease, color .18s ease;
}
.guide-tab:hover { color: var(--text, #eef0f3); }
.guide-tab.is-active { background: var(--accent, #6aa7ff); color: var(--accent-ink, #06121f); }
.guide-tab:focus-visible { outline: 2px solid var(--accent, #6aa7ff); outline-offset: 2px; }

.guide-panel { animation: guideFadeIn .22s ease; }
@keyframes guideFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Pasos numerados */
.guide-steps {
  margin: 0; padding-left: 0; list-style: none;
  counter-reset: guide-step;
  display: flex; flex-direction: column; gap: 10px;
}
.guide-steps li {
  counter-increment: guide-step;
  position: relative; padding-left: 36px;
  font-size: 14.5px; line-height: 1.6; color: var(--text, #eef0f3);
}
.guide-steps li::before {
  content: counter(guide-step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; border-radius: 50%;
  background: var(--accent, #6aa7ff); color: var(--accent-ink, #06121f);
}

/* Errores comunes */
.guide-mistakes { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.guide-mistakes li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.55; color: var(--text-2, #c7ccd4); }
.guide-mistakes li::before { content: '✕'; position: absolute; left: 5px; top: 1px; font-weight: 700; color: var(--danger, #e0607a); }

/* Respira y cuida */
.guide-care { display: flex; flex-direction: column; gap: 8px; }
.guide-line { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.guide-line-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.guide-line-text { color: var(--text, #eef0f3); }
.guide-line--breath { background: var(--surface-2, #1c1c22); }
.guide-line--breath .guide-line-label { color: var(--text-3, #9aa0aa); }
.guide-line--safety { background: var(--warn-soft, rgba(224, 160, 72, .12)); }
.guide-line--safety .guide-line-label { color: var(--warn, #e0a048); }

/* ───── Mapa muscular ───── */
.mm {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-2, #1c1c22);
  border: 1px solid var(--border, rgba(255, 255, 255, .08));
}
.mm-figs { display: flex; justify-content: center; gap: 18px; }
.mm-svg { width: 92px; height: auto; display: block; }
.mm-base { fill: var(--mm-body, #34363f); }
.mm-region {
  fill: var(--mm-body, #34363f);
  transition: fill .35s ease;
}
.mm-region.is-secondary { fill: var(--mm-sec, #3f6aa8); }
.mm-region.is-primary {
  fill: var(--accent, #6aa7ff);
  animation: mmPulse 2.4s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes mmPulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }

.mm-legend { display: flex; flex-direction: column; gap: 5px; }
.mm-legend-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2, #c7ccd4);
  text-transform: capitalize;
}
.mm-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.mm-dot--primary { background: var(--accent, #6aa7ff); }
.mm-dot--secondary { background: var(--mm-sec, #3f6aa8); }

/* ───── Botón info (icono limpio, sin caja) — entreno, editor, cambiar ───── */
.guide-info-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  color: var(--text-3, #9aa0aa);
  transition: color .15s ease, background .15s ease;
}
.guide-info-btn:hover { color: var(--accent, #6aa7ff); background: var(--accent-soft, rgba(106, 167, 255, .12)); }
.guide-info-btn:focus-visible { outline: 2px solid var(--accent, #6aa7ff); outline-offset: 2px; }

/* Píldora «Cómo se hace» — descanso */
.guide-info-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  background: var(--accent-soft, rgba(106, 167, 255, .15));
  color: var(--accent, #6aa7ff);
  transition: filter .15s ease;
}
.guide-info-pill:hover { filter: brightness(1.08); }
.guide-info-pill:focus-visible { outline: 2px solid var(--accent, #6aa7ff); outline-offset: 2px; }

/* Respeto a "reducir movimiento": sin coreografía, todo estático y legible. */
@media (prefers-reduced-motion: reduce) {
  .guide-demo-img--top { animation: none; opacity: 1; }
  .guide-cue { animation: none; opacity: 1; }
  .mm-region.is-primary { animation: none; }
  .guide-demo-loop, .guide-playpause { display: none; }
  .guide-panel { animation: none; }
}

/* Badge de aviso por lesión en los pickers de ejercicio (Fase 3b, s198). Discreto:
   solo avisa, no bloquea. El texto real lo da aria-label/title (no solo el icono/color). */
.injury-badge {
  flex: none;
  font-size: 13px;
  line-height: 1;
  color: var(--bad);
  cursor: default;
}