/* ════════════════════════════════════════════
   workout-player.css — WellCore 5 Componentes
   NO compilar con Vite: servir vía asset()
   ════════════════════════════════════════════ */

:root {
  --wc-amber:        #F59E0B;
  --wc-emerald:      #10B981;
  --wc-emerald-light:#34D399;
  --wc-violet:       #8B5CF6;
  --wc-gold:         #EAB308;
}

/* ════════════════════════════════════════════
   ★★★ COMP 1 — COMPLETED EXERCISE (collapsed) ★★★
   ════════════════════════════════════════════ */
.ex-completed {
  display:flex; align-items:center; gap:14px;
  border-radius:16px; border:1px solid rgba(16,185,129,0.20);
  background:linear-gradient(90deg, rgba(16,185,129,0.04), var(--wc-bg-tertiary));
  border-left:3px solid var(--wc-emerald);
  padding:14px 16px; cursor:pointer;
  transition:all 0.2s;
}
.ex-completed:hover {
  background:linear-gradient(90deg, rgba(16,185,129,0.08), var(--wc-bg-tertiary));
}
.ex-completed-check {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--wc-emerald); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.ex-completed-left {
  display:flex; align-items:center; gap:8px; flex:1; min-width:0;
}
.ex-completed-right {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.ex-completed-name {
  font-family:var(--font-display, 'Bebas Neue', Impact, sans-serif);
  font-size:15px; letter-spacing:0.04em;
  color:var(--wc-text); text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pr-pill {
  display:inline-flex; align-items:center; gap:3px;
  border-radius:20px; padding:2px 8px;
  font-size:10px; font-weight:900; line-height:1; color:#000;
  background:linear-gradient(135deg, #facc15, #f59e0b);
  letter-spacing:0.06em; white-space:nowrap;
}
.ex-completed-stats {
  font-size:11px; color:var(--wc-text-tertiary);
  font-family:var(--font-data, 'Barlow', sans-serif);
  white-space:nowrap;
}

/* ════════════════════════════════════════════
   ★★★ COMP 2 — PR OBJETIVO BANNER ★★★
   ════════════════════════════════════════════ */
.pr-target {
  margin-top:10px;
  border-radius:10px;
  padding:8px 12px;
  background:linear-gradient(90deg, rgba(234,179,8,0.18), rgba(245,158,11,0.06));
  border:1px solid rgba(234,179,8,0.35);
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:#FCD34D; font-weight:600;
  font-family:var(--font-data, 'Barlow', sans-serif);
}
.pr-target strong { color:#FBBF24; font-weight:800; }
.pr-target .sub { color:#FCD34D; font-weight:500; opacity:0.85; }

/* ════════════════════════════════════════════
   ★★★ COMP 3 — VOICE LOGGER (rediseñado) ★★★
   ════════════════════════════════════════════ */
.voice-btn-new {
  display:flex; width:100%; align-items:center; justify-content:center; gap:10px;
  border-radius:12px; border:1px dashed rgba(220,38,38,0.4);
  background:rgba(220,38,38,0.04); padding:12px;
  font-size:13px; font-weight:600; color:var(--wc-accent, #DC2626);
  transition:all 0.2s; cursor:pointer;
  font-family:inherit;
}
.voice-btn-new:hover {
  border-style:solid; background:rgba(220,38,38,0.10);
  border-color:rgba(220,38,38,0.6);
}
.voice-btn-new:disabled {
  opacity:0.6; cursor:not-allowed;
}
.voice-btn-new svg { width:16px; height:16px; flex-shrink:0; }

/* ════════════════════════════════════════════
   ★★★ COMP 4 — ISOMETRIC SET ROWS ★★★
   ════════════════════════════════════════════ */
.set-table-iso { border-top:1px solid var(--wc-border, rgba(255,255,255,0.08)); }
.set-header-iso {
  display:grid; gap:10px; align-items:center;
  grid-template-columns: 40px 1fr 44px;
  padding:8px 12px;
  background:rgba(139,92,246,0.05);
}
.set-header-iso-cell {
  text-align:center; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em; color:#A78BFA;
}
.iso-row {
  display:grid; gap:10px; align-items:center;
  grid-template-columns: 40px 1fr 44px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.iso-row:last-child { border-bottom:none; }
.iso-row.done .iso-num-box { color:var(--wc-emerald-light); }
.iso-num-box {
  font-family:var(--font-data, 'Barlow', sans-serif);
  font-size:18px; font-weight:700;
  color:var(--wc-accent, #DC2626); text-align:center;
}
.iso-action-btn {
  height:48px; width:100%; border-radius:12px;
  background:var(--wc-bg, #09090B); border:1px solid var(--wc-border, rgba(255,255,255,0.08));
  color:var(--wc-text, #FAFAFA);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600;
  transition:all 0.2s; cursor:pointer; font-family:inherit;
}
.iso-action-btn svg { width:14px; height:14px; color:var(--wc-text-tertiary, rgba(250,250,250,0.40)); }
.iso-action-btn:hover { border-color:var(--wc-accent, #DC2626); color:var(--wc-accent, #DC2626); }
.iso-action-btn:hover svg { color:var(--wc-accent, #DC2626); }
.iso-action-btn.running {
  background:rgba(220,38,38,0.10); border-color:var(--wc-accent, #DC2626); color:var(--wc-accent, #DC2626);
  animation:pulseBg 1.5s ease-in-out infinite;
}
@keyframes pulseBg {
  0%,100% { background:rgba(220,38,38,0.10); }
  50%      { background:rgba(220,38,38,0.18); }
}
.iso-check-btn {
  height:36px; width:36px; border-radius:12px;
  background:var(--wc-bg, #09090B); border:1px solid var(--wc-border, rgba(255,255,255,0.08));
  color:var(--wc-text-tertiary, rgba(250,250,250,0.40));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s;
}
.iso-check-btn svg { width:14px; height:14px; }
.iso-row.done .iso-check-btn {
  background:var(--wc-emerald); border-color:var(--wc-emerald); color:#fff;
}

/* ════════════════════════════════════════════
   ★★★ COMP 5 — BOTTOM BAR (4 cols + mini progress) ★★★
   ════════════════════════════════════════════ */
.bottom-bar-fixed {
  position:fixed; bottom:0; left:0; right:0; z-index:55;
  background:rgba(9,9,11,0.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--wc-border, rgba(255,255,255,0.08));
}
.bottom-mini-progress {
  height:3px; width:100%;
  background:var(--wc-bg-secondary, #111113);
  overflow:hidden;
}
.bottom-mini-progress-fill {
  height:100%;
  background:linear-gradient(90deg, var(--wc-accent, #DC2626), #f87171);
  transition:width 0.6s ease;
}
.bottom-bar-inner { padding:12px 16px max(env(safe-area-inset-bottom, 0px), 16px); }
.bottom-stats {
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0;
  margin-bottom:12px;
}
.bstat { text-align:center; padding:0 8px; position:relative; }
.bstat + .bstat::before {
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:1px; height:32px;
  background:var(--wc-border, rgba(255,255,255,0.08));
}
.bstat-num {
  font-family:var(--font-display, 'Bebas Neue', Impact, sans-serif);
  font-size:22px; color:var(--wc-text, #FAFAFA); line-height:1; font-weight:700;
}
.bstat-num.amber { color:var(--wc-amber); }
.bstat-num.red   { color:var(--wc-accent, #DC2626); }
.bstat-lbl {
  margin-top:4px; font-size:9px; color:var(--wc-text-tertiary, rgba(250,250,250,0.40));
  text-transform:uppercase; letter-spacing:0.12em; font-weight:600;
}
.action-row-wc { display:flex; align-items:center; gap:10px; }
.btn-abandon {
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  border-radius:12px; border:1px solid rgba(220,38,38,0.40);
  padding:12px 16px; font-size:13px; font-weight:500;
  color:var(--wc-text-secondary, rgba(250,250,250,0.64));
  background:transparent; cursor:pointer; transition:all 0.2s; font-family:inherit;
}
.btn-abandon:hover { border-color:rgba(220,38,38,0.70); color:#f87171; }
.btn-abandon svg { height:16px; width:16px; }
.btn-finish {
  flex:1; border-radius:14px; padding:14px;
  background:var(--wc-accent, #DC2626); color:#fff; border:none;
  font-family:var(--font-display, 'Bebas Neue', Impact, sans-serif);
  font-size:18px; letter-spacing:0.16em; text-transform:uppercase;
  box-shadow:0 10px 25px rgba(220,38,38,0.20);
  cursor:pointer; transition:all 0.2s;
}
.btn-finish:hover { background:var(--wc-accent-hover, #B91C1C); }
.btn-finish:disabled { background:var(--wc-bg-secondary, #111113); color:var(--wc-text-tertiary, rgba(250,250,250,0.40)); box-shadow:none; cursor:not-allowed; }