/* ═════════ Pesas: plan, rutinas, editor, entreno en vivo e historial ═════════
 * Color fijo por grupo muscular (en chips, barras e íconos de ejercicio), de
 * core/muscles.js: pecho coral, espalda azul, hombro violeta, brazo turquesa,
 * abdomen naranja, pierna verde y glúteo rosa.
 * Capas: barra de abajo 30 · barrita del entreno 31 · entreno en vivo 42 ·
 * hojas 50/51 · avisos 60 (una hoja o un aviso siempre queda encima del entreno).
 */
.mg-pecho   { --rg: #fb7185; }
.mg-espalda { --rg: #60a5fa; }
.mg-hombro  { --rg: #a78bfa; }
.mg-brazo   { --rg: #22d3ee; }
.mg-core    { --rg: #fb923c; }
.mg-pierna  { --rg: #34d399; }
.mg-gluteo  { --rg: #f472b6; }
[data-theme="light"] .mg-pecho   { --rg: #e11d48; }
[data-theme="light"] .mg-espalda { --rg: #2563eb; }
[data-theme="light"] .mg-hombro  { --rg: #7c3aed; }
[data-theme="light"] .mg-brazo   { --rg: #0e7490; }
[data-theme="light"] .mg-core    { --rg: #c2410c; }
[data-theme="light"] .mg-pierna  { --rg: #047857; }
[data-theme="light"] .mg-gluteo  { --rg: #be185d; }

/* Piezas sueltas que también salen fuera de una lista */
.li-body { flex: 1; min-width: 0; }
.li-title { font-weight: 600; }
.li-sub { font-size: var(--text-sm); color: var(--muted); }
.back-link { justify-self: start; margin-left: -8px; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.small-num { font-size: var(--text-lg); }
.tone-today { background: var(--gloss), var(--flame-grad); color: var(--on-flame); box-shadow: var(--gloss-edge); }
.pr-badge { min-height: 22px; padding: 0 8px; font-size: 0.75rem; vertical-align: 1px; }

/* Punto «en vivo»: el pulso es un anillo que crece (solo transform y opacity) */
.live-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--flame); flex-shrink: 0; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--flame); animation: live-pulse 1.8s ease-out infinite; }
.badge .live-dot { width: 8px; height: 8px; background: currentColor; }
.badge .live-dot::after { background: currentColor; }
@keyframes live-pulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.8); opacity: 0; } }

/* ───────── Músculos ───────── */
.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 24px; padding: 2px 10px; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 650;
  color: var(--rg, var(--muted));
  background: var(--gloss-soft), color-mix(in oklab, var(--rg, var(--muted)) 16%, var(--card));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12), inset 0 0 0 1px color-mix(in oklab, var(--rg, var(--muted)) 38%, transparent);
}
.mchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.mchip small { font-weight: 500; opacity: 0.75; }
.chip.mchip-pick { --pb: linear-gradient(160deg, color-mix(in oklab, var(--rg) 75%, transparent), color-mix(in oklab, var(--rg) 22%, transparent) 70%); }
.chip.mchip-pick[aria-pressed="true"] {
  border-color: transparent; color: #fff; text-shadow: 0 1px 1px oklch(0 0 0 / 0.4);
  background: var(--gloss), linear-gradient(145deg, color-mix(in oklab, var(--rg) 70%, white), color-mix(in oklab, var(--rg) 80%, black) 50%, color-mix(in oklab, var(--rg) 55%, black));
  box-shadow: var(--gloss-edge), 0 6px 16px -8px var(--rg);
}

.mbars { display: grid; gap: 10px; }
.mbar { display: grid; grid-template-columns: minmax(0, 8rem) 1fr 4ch; align-items: center; gap: 10px; font-size: var(--text-sm); }
.mbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar-track { height: 10px; border-radius: var(--radius-full); background: var(--soft); overflow: hidden; }
.mbar-track > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--rg) 65%, transparent), var(--rg));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35);
}
.mbar-pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ───────── Mi plan ───────── */
.rt-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 300px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
}
.rt-carousel::-webkit-scrollbar { display: none; }
.rt-carousel > * { display: grid; scroll-snap-align: start; }
.rt-card { position: relative; display: grid; gap: 8px; align-content: start; }
.rt-card.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--flame) 60%, transparent), var(--shadow-card); }
.rt-link { position: absolute; inset: 0; border-radius: inherit; }
.rt-link:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.rt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.rt-name { font-size: var(--text-lg); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
.rt-actions { position: relative; display: flex; justify-content: flex-end; margin-top: 6px; }

/* Fila con liga a la izquierda y la acción a la derecha */
.rt-row { cursor: default; }
.rt-row > a.li-body { display: block; align-self: stretch; padding: 4px 0; color: inherit; text-decoration: none; }

.train-quick { grid-template-columns: 1fr 1fr; gap: 10px; }
.train-quick .btn { padding: 0 0.75rem; font-size: var(--text-sm); white-space: normal; line-height: 1.2; }

.live-resume {
  display: flex; align-items: center; gap: 12px; width: 100%;
  color: inherit; text-align: left; font: inherit; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--flame), var(--shadow-card);
}

.coach-card { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.coach-card .li-icon, .pr-item .li-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
}
.coach-card .li-icon svg { width: 20px; height: 20px; }
.coach-card .li-chev { width: 18px; height: 18px; color: var(--muted); }

.today-name { font-size: var(--text-lg); font-weight: 750; letter-spacing: -0.02em; margin: 2px 0; }
[data-today] .mchips { margin-top: 8px; }
.unit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ───────── Detalle de rutina y programa ───────── */
.rt-ex-list { margin: 0; padding: 0; list-style: none; }
.rt-ex-n {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%; background: var(--soft);
  font-size: var(--text-sm); font-weight: 750; font-variant-numeric: tabular-nums;
}
.live-note-inline { color: var(--gold-ink); }

.rt-day { padding: 0; }
.rt-day > summary { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 16px; cursor: pointer; list-style: none; }
.rt-day > summary::-webkit-details-marker { display: none; }
.rt-day > summary .li-chev { width: 20px; height: 20px; color: var(--muted); transition: transform 300ms var(--ease-spring); }
.rt-day[open] > summary .li-chev { transform: rotate(180deg); }
.rt-day > summary .mchips { margin-top: 8px; }
.rt-day-list { margin: 0 12px 12px; padding: 0; list-style: none; }

/* El botón de la pantalla, siempre a la mano encima de la barra de abajo */
.sticky-cta {
  position: sticky; z-index: 5;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
  padding-top: 12px;
}
.has-live-bar .sticky-cta { bottom: calc(var(--nav-h) + var(--safe-bottom) + 86px); }

/* ───────── Editor de rutina ───────── */
.ed-ex { display: grid; gap: 12px; }
.ed-ex-head { display: flex; align-items: center; gap: 12px; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-grid > :last-child { grid-column: 1 / -1; }
.ed-grid .stepper { gap: 6px; }
.ed-grid .stepper .input { max-width: 64px; padding: 0 4px; }
.ed-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; color: var(--muted); }
.ed-range .input { text-align: center; padding: 0 6px; }
@media (min-width: 560px) {
  .ed-grid { grid-template-columns: auto 1fr 1fr; }
  .ed-grid > :last-child { grid-column: auto; }
}

/* ───────── Buscador de ejercicios ───────── */
.picker-list { min-height: 180px; }
.ex-add { flex-shrink: 0; }   /* el trazo sale de --ic-ink (oscuro sobre dorado) */

/* ───────── Récords ───────── */
.pr-list { display: grid; gap: 12px; }
.pr-item { display: flex; align-items: center; gap: 12px; }
.pr-cup {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; font-size: 1.3rem;
  background: var(--warn-bg); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15);
}

/* ───────── Entreno guardado ───────── */
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats-3 .stat { padding: 12px; }
.stats-3 .stat-num { font-size: var(--text-lg); white-space: nowrap; }
.stats-3 .eyebrow { letter-spacing: 0.14em; }
.wk-ex { gap: 8px; }
.sets-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sets-table th { padding: 0 8px 6px; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.sets-table td { padding: 8px; border-top: 1px solid var(--line); }
.sets-table th:first-child, .sets-table td:first-child { width: 44px; padding-left: 0; }
.sets-table tr.is-warmup td { color: var(--muted); }

/* Número de serie: C calentamiento (ámbar), F al fallo (rojo), D drop set (azul) */
.set-num {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 10px; background: var(--soft); color: var(--ink);
  font: 750 var(--text-sm)/1 var(--font); font-variant-numeric: tabular-nums;
}
.set-num.t-warmup  { background: var(--warn-bg); color: var(--warn); }
.set-num.t-failure { background: var(--bad-bg);  color: var(--bad); }
.set-num.t-drop    { background: var(--info-bg); color: var(--info); }

/* ═════════ Entreno en vivo: pantalla completa ═════════ */
.live-open body { overflow: hidden; }
.live {
  position: fixed; inset: 0; z-index: 42;
  display: flex; flex-direction: column;
  padding-top: var(--safe-top);
  background: var(--page);
  animation: live-in 420ms var(--ease-out-expo);
}
@keyframes live-in { from { transform: translateY(28px); opacity: 0; } }

.live-top {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 6px 12px 6px 4px; border-bottom: 1px solid var(--line);
}
.live-clock { display: grid; justify-items: center; min-width: 0; line-height: 1.15; }
.live-clock strong { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-clock small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--muted); }

/* Tira de ejercicios: pestañas con filo y brillo. La de ahora lleva filo dorado y
 * resplandor; las terminadas se quedan doradas; las que faltan, discretas. Las
 * orillas se desvanecen para que se note que hay más a los lados. */
.live-strip {
  position: relative; display: flex; gap: 8px; flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none;
  padding: 12px 16px 14px; scroll-padding-inline: 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--flame) 5%, transparent), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent);
}
.live-strip::-webkit-scrollbar { display: none; }
.lx {
  position: relative; display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  max-width: 200px; min-height: 44px; padding: 0 16px 0 6px;
  border: 1px solid transparent; border-radius: var(--radius-full);
  background-image: var(--gloss-soft), linear-gradient(var(--card), var(--card)), linear-gradient(160deg, var(--line-strong), var(--line) 60%);
  background-clip: padding-box, padding-box, border-box;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07), 0 6px 16px -12px oklch(0 0 0 / 0.8);
  color: var(--muted);
  font: 650 var(--text-sm)/1.2 var(--font); letter-spacing: -0.006em; cursor: pointer;
  transition: transform 300ms var(--ease-spring), color 200ms;
}
.lx:active { transform: scale(0.96); }
.lx-n {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--gloss-soft), var(--soft); color: var(--ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.1), inset 0 0 0 1px var(--line);
  font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: transform 300ms var(--ease-spring);
}
.lx-n svg { width: 16px; height: 16px; stroke-width: 2.6; }
.lx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx.is-on {
  color: var(--ink);
  background-image: var(--gloss-soft),
    linear-gradient(color-mix(in oklab, var(--flame) 14%, var(--card)), color-mix(in oklab, var(--flame) 6%, var(--card))),
    var(--flame-grad);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), 0 10px 24px -12px var(--flame), 0 0 0 4px color-mix(in oklab, var(--flame) 12%, transparent);
}
.lx.is-on .lx-n, .lx.is-done .lx-n {
  background: var(--gloss), var(--flame-grad); color: var(--on-flame); box-shadow: var(--gloss-edge);
}
.lx.is-on .lx-n { transform: scale(1.06); }
.lx.is-done:not(.is-on) {
  color: var(--flame-ink);
  background-image: var(--gloss-soft),
    linear-gradient(color-mix(in oklab, var(--flame) 9%, var(--card)), color-mix(in oklab, var(--flame) 9%, var(--card))),
    linear-gradient(160deg, color-mix(in oklab, var(--flame) 55%, transparent), color-mix(in oklab, var(--flame) 15%, transparent));
}
.lx-add { padding: 0 16px; color: var(--flame-ink); }
.lx-add::before {
  content: ""; position: absolute; inset: 3px; border-radius: inherit; pointer-events: none;
  border: 1.5px dashed color-mix(in oklab, var(--flame) 40%, transparent);
}
.lx-add svg { width: 16px; height: 16px; }
@media (hover: hover) { .lx:hover { color: var(--ink); } .lx:hover .lx-n { transform: scale(1.08); } }

/* Avance del entreno: una línea dorada debajo de las pestañas */
.live-progress { flex-shrink: 0; height: 2px; margin-top: -1px; background: var(--line); }
.live-progress > span {
  display: block; height: 100%; background: var(--flame-grad); box-shadow: 0 0 10px var(--flame);
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 600ms var(--ease-out-expo);
}

.live-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 28px;
}
.live-body > * { max-width: 640px; margin-inline: auto; }
.live-ex { display: grid; gap: 10px; }
.live-ex h2 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.025em; }
.live-note { padding: 10px 12px; border-radius: 12px; background: var(--card-2); box-shadow: inset 3px 0 0 var(--gold); font-size: var(--text-sm); }
.live-last { font-size: var(--text-sm); color: var(--muted); }
.live-last strong { color: var(--ink); }

/* Series: # · última · peso · reps · esfuerzo · ✓ (columnas en --cols) */
.set-grid { display: grid; gap: 4px; margin: 4px 0; }
.set-row {
  display: grid; grid-template-columns: var(--cols); align-items: center; gap: 6px;
  min-height: 52px; padding: 4px 6px; border-radius: 14px;
  transition: background-color 250ms;
}
.set-head {
  min-height: 0; padding-block: 0 2px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.set-head > span { text-align: center; }
.set-head > span:nth-child(2) { text-align: left; }
.set-row .set-num { width: 34px; height: 40px; cursor: pointer; }
.set-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-in {
  width: 100%; height: 44px; padding: 0 4px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--card-2); color: var(--ink);
  font: 700 1.0625rem/1 var(--font); font-variant-numeric: tabular-nums; text-align: center;
}
.set-in::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); font-weight: 600; }
.set-in:focus { outline: none; border-color: var(--flame); box-shadow: 0 0 0 3px color-mix(in oklab, var(--flame) 25%, transparent); }
.set-eff {
  height: 44px; padding: 0;
  border: 1px dashed var(--line-strong); border-radius: 12px;
  background: transparent; color: var(--muted);
  font: 700 var(--text-sm)/1 var(--font); cursor: pointer;
}
.set-eff.has-value { border-style: solid; background: var(--card-2); color: var(--ink); }
.set-check {
  display: grid; place-items: center; width: 48px; height: 44px;
  border: 0; border-radius: 12px; background: var(--soft); color: var(--muted);
  cursor: pointer; transition: transform 300ms var(--ease-spring), background-color 200ms;
}
.set-check svg { width: 22px; height: 22px; }
.set-check:active { transform: scale(0.9); }
.set-row.is-done .set-in { border-color: transparent; background: transparent; }

.set-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 6px 12px; }
.set-chips-hint { flex-basis: 100%; }
.set-chips .chip { min-width: 44px; justify-content: center; }

/* Descanso: la barra se vacía hacia la izquierda */
.rest {
  position: relative; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--info) 10%, var(--card));
}
.rest-fill {
  position: absolute; inset: 0; transform-origin: left;
  background: color-mix(in oklab, var(--info) 20%, transparent);
  transition: transform 500ms linear;
}
.rest > :not(.rest-fill) { position: relative; }
.rest-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 650; color: var(--info); }
.rest-label svg { width: 16px; height: 16px; }
.rest-left { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rest-actions { display: flex; gap: 6px; margin-left: auto; }
.rest-btn {
  display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--ink) 10%, transparent); color: var(--ink);
  font: 700 var(--text-sm)/1 var(--font); cursor: pointer;
}
.rest-btn svg { width: 18px; height: 18px; }
.rest-btn:active { transform: scale(0.94); }
.live > .rest:last-child { padding-bottom: calc(10px + var(--safe-bottom)); }

.live-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--card);
}

/* Resumen y guardado */
.live-sum { max-width: 560px; padding-bottom: var(--safe-bottom); }
.live > .live-body:only-child { padding-top: 48px; }
.sum-hero { display: grid; justify-items: center; gap: 6px; padding-top: 8px; text-align: center; }
.sum-icon {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  font-size: 2.3rem;
  background: color-mix(in oklab, var(--flame) 16%, var(--card));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), 0 14px 32px -14px var(--flame);
  animation: pop-in 650ms var(--ease-spring) both;
}
.sum-icon.is-ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), 0 14px 32px -14px var(--ok); }
.sum-icon svg { width: 38px; height: 38px; }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }
.live-switch { padding: 12px 14px; border-radius: 14px; background: var(--card-2); }

/* Se acabó el descanso: destello (iPhone no vibra desde la web) */
.live.flash::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: var(--flame); opacity: 0;
  animation: flash 900ms ease-out;
}
@keyframes flash { 15%, 55% { opacity: 0.28; } 35%, 100% { opacity: 0; } }
.live-bar.flash { animation: nudge 900ms var(--ease-spring); }
@keyframes nudge { 20%, 60% { transform: scale(1.04); } 40%, 100% { transform: none; } }

/* Barrita del entreno minimizado, arriba de la navegación: dorada, con brillo
 * que pasa y la flecha en un círculo oscuro, para que se vea que sigue abierto. */
.live-bar {
  /* Cápsula corta al centro, arriba del círculo de Entrenar (que sobresale de la barra) */
  position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px);
  z-index: 31; overflow: hidden;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 26px);
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 6px 0 16px;
  border: 0; border-radius: var(--radius-full);
  background-image: var(--gloss), linear-gradient(135deg, #fff0a8, var(--flame-from) 18%, var(--flame) 55%, var(--flame-to));
  box-shadow: var(--gloss-edge),
    0 0 0 1px color-mix(in oklab, var(--flame-to) 80%, transparent),
    0 14px 30px -12px var(--flame),
    0 0 36px -10px color-mix(in oklab, var(--flame) 70%, transparent);
  color: var(--on-flame); font: 500 var(--text-sm)/1.3 var(--font); text-align: left; cursor: pointer;
  animation: rise-in 400ms var(--ease-spring) both;
}
.live-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / 0.55) 50%, transparent 65%);
  transform: translateX(-120%); animation: go-shine 3.2s ease-in-out 0.8s infinite;
}
.live-bar:active { transform: scale(0.98); }
.live-bar .live-dot, .live-bar .live-dot::after { background: var(--on-flame); }
.live-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-bar-label { font-weight: 700; }
.live-bar .muted { color: color-mix(in oklab, var(--on-flame) 70%, transparent); font-weight: 600; }
.live-bar [data-bar-clock] { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-bar-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--gloss-soft), var(--on-flame); color: var(--flame);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 4px 10px -4px oklch(0 0 0 / 0.6);
}
.live-bar-ico svg { width: 20px; height: 20px; }
.has-live-bar .m-main { padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 100px); }
.has-live-bar .toasts { bottom: calc(var(--nav-h) + var(--safe-bottom) + 86px); }

/* ───────── Coach ───────── */
@media (min-width: 900px) {
  .coach-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .live, .live-bar, .sum-icon { animation-duration: 1ms; }
  .live-dot::after, .live.flash::after, .live-bar.flash, .live-bar::after { animation: none; }
}

/* ───────── Qué trabaja cada ejercicio ─────────
 * Miniatura del cuerpo con los músculos del ejercicio: el principal lleno de su
 * color de grupo y los que ayudan más tenues. Sale en la Biblioteca, el buscador
 * y la rutina; la ficha trae las dos figuras completas.
 */
.ex-thumb-box {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 54px; border-radius: 14px; overflow: hidden;
  background: var(--gloss-soft), radial-gradient(90% 70% at 50% 40%, color-mix(in oklab, var(--rg) 22%, var(--card-2)), var(--card-2));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.1), inset 0 0 0 1px color-mix(in oklab, var(--rg) 30%, transparent);
}
.ex-thumb { width: 100%; height: 100%; }
.ex-m { fill: transparent; }
.ex-m.is-main { fill: var(--rg); }
.ex-m.is-help { fill: color-mix(in oklab, var(--rg) 50%, var(--bm-none)); }
.ex-thumb-box .rt-ex-n {
  position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; font-size: 0.6875rem;
  background: var(--gloss), var(--flame-grad); color: var(--on-flame); box-shadow: var(--gloss-edge);
}
@media (hover: hover) { .ex-item:hover .ex-thumb, .rt-ex:hover .ex-thumb { transform: scale(1.08); } }
.ex-thumb { transition: transform 400ms var(--ease-spring); }
.rt-ex { cursor: pointer; }

.ex-info h3 { font-size: var(--text-base); }
.ex-map { display: grid; gap: 6px; padding: 10px 8px 12px; border-radius: var(--radius-field); background: var(--card-2); }
.ex-video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-field); background: var(--card-2); }
.ex-map .body-map { max-width: 300px; }
.bm-m.is-main { fill: var(--rg); }
.bm-m.is-help { fill: color-mix(in oklab, var(--rg) 45%, var(--bm-none)); }
.bm-sw.ex-sw-main { background: var(--rg); }
.bm-sw.ex-sw-help { background: color-mix(in oklab, var(--rg) 45%, var(--bm-none)); }
.ex-muscle .ex-mdot { --ic: color-mix(in oklab, var(--rg) 85%, black); width: 14px; height: 14px; border-radius: 50%; align-self: flex-start; margin-top: 4px; }
.ex-muscle .li-title .badge { min-height: 22px; padding: 0 8px; font-size: 0.72rem; margin-left: 4px; vertical-align: 1px; }
.ex-main-badge { color: #fff; background: var(--gloss), color-mix(in oklab, var(--rg) 80%, black); box-shadow: var(--gloss-edge); }
.ex-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ex-tips li { display: flex; gap: 8px; align-items: flex-start; }
.ex-tips svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ok); }

/* Filtros de la Biblioteca: cada zona con su color, como los de las clases */
.chip.grp-chip {
  --pf: color-mix(in oklab, var(--rg) 16%, var(--card-2));
  --pb: linear-gradient(160deg, var(--rg), color-mix(in oklab, var(--rg) 28%, transparent) 70%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.1), 0 8px 18px -14px var(--rg);
}
.chip.grp-chip:hover { --pb: linear-gradient(160deg, var(--rg), color-mix(in oklab, var(--rg) 55%, transparent) 70%); }
.chip.grp-chip.is-on {
  border-color: transparent; color: #fff; text-shadow: 0 1px 1px oklch(0 0 0 / 0.4);
  background: var(--gloss), linear-gradient(145deg, color-mix(in oklab, var(--rg) 70%, white), color-mix(in oklab, var(--rg) 80%, black) 50%, color-mix(in oklab, var(--rg) 55%, black));
  box-shadow: var(--gloss-edge), 0 8px 18px -8px var(--rg);
}
@media (prefers-reduced-motion: reduce) { .ex-thumb { transition: none; } }

/* ───────── Mi plan: lo de hoy, grande ─────────
 * Una sola tarjeta manda: qué toca hoy y el botón para empezar. Un resplandor
 * dorado respira detrás, las miniaturas de los ejercicios entran una por una y
 * el botón late suave. Solo transform/opacity; con «reducir movimiento» se quedan quietos.
 */
@keyframes today-breathe { 50% { transform: translate3d(-6%, 4%, 0) scale(1.12); opacity: 0.75; } }
@keyframes today-ring { 0% { transform: scale(0.96); opacity: 0.7; } 100% { transform: scale(1.12, 1.45); opacity: 0; } }
@keyframes today-in { from { opacity: 0; transform: translateX(-10px) scale(0.8); } }
.today-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; padding: 20px;
  background: radial-gradient(130% 90% at 100% 0%, color-mix(in oklab, var(--flame) 20%, transparent), transparent 62%), var(--card);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--flame) 45%, transparent), 0 18px 40px -22px color-mix(in oklab, var(--flame) 70%, transparent), var(--shadow-card);
}
.today-glow {
  position: absolute; z-index: -1; top: -90px; right: -80px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--flame) 38%, transparent), transparent);
  animation: today-breathe 7s ease-in-out infinite; will-change: transform;
}
.today-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.today-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.today-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.today-meta span { display: inline-flex; align-items: center; gap: 6px; }
.today-meta svg { width: 16px; height: 16px; color: var(--gold-ink); }
.today-stack { display: flex; align-items: center; padding: 4px 0 2px 2px; }
.today-stack > * { box-shadow: 0 0 0 3px var(--card), 0 8px 16px -8px oklch(0 0 0 / 0.8); animation: today-in 520ms var(--ease-spring) both; }
.today-stack > * + * { margin-left: -12px; }
.today-stack > :nth-child(2) { animation-delay: 70ms; } .today-stack > :nth-child(3) { animation-delay: 140ms; }
.today-stack > :nth-child(4) { animation-delay: 210ms; } .today-stack > :nth-child(5) { animation-delay: 280ms; }
.today-more {
  display: grid; place-items: center; width: 46px; height: 54px; border-radius: 14px;
  background: var(--soft); font-weight: 750; font-size: var(--text-sm); color: var(--muted);
}
.today-hero .mchips { margin-top: 2px; }
.today-go { position: relative; min-height: 54px; margin-top: 6px; font-size: var(--text-base); }
.today-go::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 70%, transparent);
  animation: today-ring 2.4s var(--ease-out-expo) infinite;
}
.today-see { justify-self: center; background: transparent; }
.today-sub { margin: 0; color: var(--muted); }
.today-sub strong { color: var(--ink); }
.today-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.today-badge {
  --ic: var(--flame); --ic-ink: var(--on-flame);
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--gloss), linear-gradient(145deg, color-mix(in oklab, var(--ic) 58%, white), var(--ic) 50%, color-mix(in oklab, var(--ic) 72%, black));
  color: var(--ic-ink); box-shadow: var(--gloss-edge), 0 10px 26px -10px var(--ic);
  animation: m-pop 680ms var(--ease-spring) both 120ms;
}
.today-badge svg { width: 28px; height: 28px; stroke-width: 2.6; }
.today-hero.is-done { background: radial-gradient(130% 90% at 100% 0%, rgb(16 185 129 / 0.2), transparent 62%), var(--card); box-shadow: inset 0 0 0 1.5px rgb(52 211 153 / 0.4), var(--shadow-card); }
.today-hero.is-done .today-glow { background: radial-gradient(closest-side, rgb(52 211 153 / 0.3), transparent); }
.today-hero.is-done .today-badge { --ic: #16a34a; --ic-ink: #fff; }
.today-hero.is-rest { background: radial-gradient(130% 90% at 100% 0%, rgb(139 92 246 / 0.2), transparent 62%), var(--card); box-shadow: inset 0 0 0 1.5px rgb(139 92 246 / 0.35), var(--shadow-card); }
.today-hero.is-rest .today-glow { background: radial-gradient(closest-side, rgb(139 92 246 / 0.3), transparent); }
.today-hero.is-rest .today-badge { --ic: #7c3aed; --ic-ink: #fff; }
.today-next {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 12px;
  border-top: 1px dashed color-mix(in oklab, var(--ink) 14%, transparent);
}

/* Los demás días: una tira chica y callada. Son tuyos, pero no roban la vista. */
.plan-days { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius-card); background: color-mix(in oklab, var(--card) 60%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 7%, transparent); }
.plan-days-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.plan-days-name { font-size: var(--text-base); font-weight: 700; margin-top: 2px; }
.day-strip {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 40px; padding: 0 14px 0 5px;
  border-radius: var(--radius-full); background: var(--soft); color: var(--ink); text-decoration: none;
  font-size: var(--text-sm); font-weight: 600; transition: transform 300ms var(--ease-spring);
}
.day-pill:active { transform: scale(0.95); }
.day-pill-n {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--ink) 10%, transparent); font-size: 0.75rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.day-pill-n svg { width: 15px; height: 15px; stroke-width: 3; }
.day-pill.is-next { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--flame) 65%, transparent); }
.day-pill.is-next .day-pill-n { background: var(--gloss), var(--flame-grad); color: var(--on-flame); }
.day-pill.is-done .day-pill-n { background: #16a34a; color: #fff; }
.day-pill.is-done .day-pill-name { color: var(--muted); }

/* Historial: lo tuyo de antes, en gris para que no compita con lo de hoy */
.train-history .label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.train-history .label svg { width: 16px; height: 16px; }
.train-history > .muted { margin-top: -6px; }
.train-history .list-item .li-icon { --ic: #4b5059; --ic-ink: #e9eaee; width: 32px; height: 32px; border-radius: 10px; }
.train-history .list-item .li-icon svg { width: 16px; height: 16px; }

/* ───────── La foto del ejercicio ─────────
 * El dibujo haciendo el ejercicio, en 4:3 y sobre negro como la foto, para que
 * se vea completo. Mientras no haya, el cuerpo con sus músculos. */
.ex-thumb-box.is-lg { width: 56px; height: 66px; border-radius: 16px; }
.ex-thumb-box.has-photo { width: 64px; height: 48px; background: #000; }
.ex-thumb-box.is-lg.has-photo { width: 76px; height: 57px; }
.ex-photo { width: 100%; height: 100%; object-fit: cover; }
.ed-ex-head .ex-thumb-box .rt-ex-n, .live-ex-head .ex-thumb-box .rt-ex-n { width: 22px; height: 22px; }

/* Ficha del ejercicio: arriba el video (o el cuerpo latiendo hasta que llegue) */
@keyframes demo-beat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.035); } }
.ex-demo {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-field);
  background: var(--gloss-soft), radial-gradient(80% 70% at 50% 45%, color-mix(in oklab, var(--rg) 26%, var(--card-2)), var(--card-2));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rg) 30%, transparent);
}
.ex-demo .ex-video { width: 100%; height: 100%; border-radius: 0; }
.ex-demo-fig { display: grid; place-items: center; width: 42%; height: 88%; animation: demo-beat 1.6s ease-in-out infinite; }
.ex-demo-fig .ex-thumb { width: 100%; height: 100%; }
.ex-demo-tag {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px 0 8px; border-radius: var(--radius-full);
  background: oklch(0 0 0 / 0.55); color: #fff; font-size: 0.78rem; font-weight: 650;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12);
}
.ex-demo-tag svg { width: 14px; height: 14px; }
.ex-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ex-steps li { display: flex; gap: 10px; align-items: flex-start; animation: m-rise 480ms var(--ease-out-expo) both; }
.ex-steps li:nth-child(2) { animation-delay: 60ms; } .ex-steps li:nth-child(3) { animation-delay: 120ms; } .ex-steps li:nth-child(n+4) { animation-delay: 180ms; }
.ex-step-n {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--gloss), var(--flame-grad); color: var(--on-flame); box-shadow: var(--gloss-edge);
  font-size: 0.78rem; font-weight: 800;
}

/* En vivo: la miniatura al lado del nombre abre «Cómo se hace» */
.live-ex-head { display: flex; align-items: center; gap: 12px; }
.live-ex-thumb { padding: 0; border: 0; background: none; border-radius: 16px; cursor: pointer; transition: transform 300ms var(--ease-spring); }
.live-ex-thumb:active { transform: scale(0.94); }
.live-ex-thumb:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.live-ex-head h2 { flex: 1; min-width: 0; }

/* En vivo: la animación grande arriba del ejercicio. En el celular va de orilla a
 * orilla para que la técnica se vea bien; «Ocultar» la quita para quien ya se la sabe. */
.live-demo {
  position: relative; overflow: hidden; margin-bottom: 4px;
  border-radius: 1.25rem; box-shadow: 0 18px 40px -26px oklch(0 0 0 / 0.9), 0 0 0 1px var(--line);
}
.live-demo .ex-demo { border-radius: 0; box-shadow: none; }
.live-demo-hide {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; padding: 0 12px 0 8px;
  border: 0; border-radius: var(--radius-full);
  background: oklch(0 0 0 / 0.6); color: #fff;
  font: 650 0.78rem/1 var(--font); cursor: pointer;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.16);
  transition: transform 300ms var(--ease-spring);
}
.live-demo-hide::before { content: ""; position: absolute; inset: -6px; }
.live-demo-hide svg { width: 16px; height: 16px; }
.live-demo-hide:active { transform: scale(0.94); }
@media (max-width: 520px) {
  .live-demo { margin: -16px -16px 4px; border-radius: 0; box-shadow: 0 1px 0 var(--line); }
}

/* Lo terminado se queda dorado: la serie, el ejercicio en la tira y la etiqueta «Completo» */
.live-done {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  min-height: 28px; padding: 0 10px 0 7px; border-radius: var(--radius-full);
  background-image: var(--gloss), var(--flame-grad); color: var(--on-flame);
  box-shadow: var(--gloss-edge); font-size: 0.75rem; font-weight: 750;
}
.live-done.is-new { animation: m-pop 520ms var(--ease-spring) both; }
.live-done svg { width: 14px; height: 14px; }

.set-row.is-done { background: color-mix(in oklab, var(--flame) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--flame) 26%, transparent); }
.set-row.is-new .set-check svg { animation: check-pop 560ms var(--ease-spring); }
@keyframes check-pop { 0% { transform: scale(0.3) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }

/* ───────── Piel premium del entreno en vivo ─────────
 * La misma de las pestañas: brillo arriba, filo en degradado y sombra suave.
 * Cada color solo cambia --pf (relleno), --pb (filo) y --pc (texto):
 * gris para lo neutro (series, kilos, reps, descanso), dorado para lo que avanza
 * (palomita, técnica), negro para el RIR y rojo para quitar. */
.live .set-num, .live .set-in, .live .set-eff, .live .set-check {
  --pf: var(--card-2);
  --pb: linear-gradient(160deg, var(--line-strong), var(--line) 60%);
  --pc: var(--ink);
  border: 1px solid transparent;
  background-image: var(--gloss-soft), linear-gradient(var(--pf), var(--pf)), var(--pb);
  background-clip: padding-box, padding-box, border-box;
  background-origin: border-box;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 6px 16px -12px oklch(0 0 0 / 0.8);
  color: var(--pc);
  transition: transform 300ms var(--ease-spring), box-shadow 200ms;
}

/* Dorado: la palomita (las herramientas usan la piel de components.css) */
.live .set-check {
  --pf: color-mix(in oklab, var(--flame) 13%, var(--card));
  --pb: var(--flame-grad);
  --pc: var(--flame-ink);
}
.live .set-check { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12), 0 8px 18px -12px var(--flame); }
.live .set-row.is-done .set-check {
  background-image: var(--gloss), var(--flame-grad), var(--flame-grad);
  color: var(--on-flame);
  box-shadow: var(--gloss-edge), 0 4px 10px -8px var(--flame);
}

/* Negro: el RIR (o RPE) */
.live .set-eff {
  --pf: color-mix(in oklab, #000 62%, var(--card));
  --pc: var(--muted);
}
.live .set-eff.has-value { --pc: var(--ink); }

/* Gris: número de serie, kilos y reps. La letra de la serie conserva su color. */
.live .set-num.t-warmup  { --pc: var(--warn); }
.live .set-num.t-failure { --pc: var(--bad); }
.live .set-num.t-drop    { --pc: var(--info); }
.live .set-in:focus { outline: none; --pb: var(--flame-grad); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 3px color-mix(in oklab, var(--flame) 22%, transparent); }
.live .set-row.is-done .set-in { --pf: color-mix(in oklab, var(--flame) 6%, var(--card)); }

/* Añadir serie: acero, para no confundirse con el dorado de «Siguiente ejercicio»;
 * el + va en un círculo dorado. */
.live-add-set {
  background-image: var(--gloss-soft), var(--oxford);
  color: var(--oxford-ink); box-shadow: var(--oxford-edge);
  font-weight: 700; gap: 10px;
}
.live-add-set:hover { background-image: var(--gloss-soft), var(--oxford-hi); }
.live-add-set .live-go-ico { width: 30px; height: 30px; background: var(--gloss), var(--flame-grad); color: var(--on-flame); box-shadow: var(--gloss-edge); }
.live-add-set .live-go-ico svg { width: 16px; height: 16px; }

/* Añadir y quitar serie, lado a lado: quitar es el hermano discreto (gris, + en rojo suave) */
.live-set-btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.live-set-btns .btn { min-width: 0; padding-inline: 10px; }
.live-drop-set {
  gap: 8px; font-weight: 700; color: var(--ink);
  border: 1px solid transparent;
  background-image: var(--gloss-soft), linear-gradient(var(--card-2), var(--card-2)), linear-gradient(160deg, var(--line-strong), var(--line) 60%);
  background-clip: padding-box, padding-box, border-box; background-origin: border-box;
}
.live-drop-set .live-go-ico { width: 26px; height: 26px; background: color-mix(in oklab, var(--bad) 16%, transparent); color: var(--bad); }
.live-drop-set .live-go-ico svg { width: 14px; height: 14px; }
.live-drop-set:disabled { opacity: 0.45; }
.live-swipe-hint { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: -2px; }

/* Deslizar para borrar: la fila se corre y destapa el botón rojo de atrás */
.set-swipe { position: relative; border-radius: 14px; overflow: hidden; }
.set-swipe .set-row {
  position: relative; z-index: 1; touch-action: pan-y;
  background-color: var(--page);
  transition: transform 260ms var(--ease-out-expo), background-color 250ms;
}
.set-swipe .set-row.is-done { background: color-mix(in oklab, var(--flame) 12%, var(--page)); }
.set-swipe.is-dragging .set-row { transition: none; }
.set-del {
  position: absolute; inset: 0 0 0 auto; width: 120px;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 18px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #f0506e, #c81e3f); color: #fff;
  font: 700 var(--text-sm)/1 var(--font);
  opacity: 0; transition: opacity 150ms;
}
.set-del svg { width: 18px; height: 18px; }
.set-swipe.is-dragging .set-del, .set-swipe.is-open .set-del { opacity: 1; }

/* El botón de seguir: grande, con brillo que pasa y la flecha que empuja cuando ya acabaste */
.live-foot { gap: 10px; }
.live-prev {
  flex-shrink: 0; width: 60px; min-height: 60px; padding: 0; color: var(--ink);
  border: 1px solid transparent;
  background-image: var(--gloss-soft), linear-gradient(var(--card-2), var(--card-2)), linear-gradient(160deg, var(--line-strong), var(--line) 60%);
  background-clip: padding-box, padding-box, border-box; background-origin: border-box;
}
.live-go {
  position: relative; overflow: hidden; flex: 1;
  justify-content: space-between; min-height: 60px; padding: 0 9px 0 22px;
  font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em;
  background-image: var(--gloss), linear-gradient(135deg, #fff0a8, var(--flame-from) 18%, var(--flame) 55%, var(--flame-to));
  /* Lo que más brilla de la pantalla: aro dorado, sombra larga y un halo */
  box-shadow: var(--gloss-edge),
    0 0 0 1px color-mix(in oklab, var(--flame-to) 80%, transparent),
    0 0 0 5px color-mix(in oklab, var(--flame) 16%, transparent),
    0 18px 38px -14px var(--flame),
    0 0 48px -12px color-mix(in oklab, var(--flame) 75%, transparent);
}
.live-go::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / 0.5) 50%, transparent 65%);
  transform: translateX(-120%); animation: go-shine 3.2s ease-in-out 0.8s infinite;
}
@keyframes go-shine { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.live-go-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--gloss-soft), var(--on-flame); color: var(--flame);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 4px 10px -4px oklch(0 0 0 / 0.6);
  transition: transform 300ms var(--ease-spring);
}
.live-go-ico svg { width: 20px; height: 20px; }
.live-go:hover .live-go-ico { transform: translateX(3px) scale(1.06); }
.live-go.is-ready .live-go-ico { animation: go-nudge 1.4s var(--ease-spring) infinite; }
@keyframes go-nudge { 0%, 55%, 100% { transform: translateX(0); } 25% { transform: translateX(5px); } }

/* Editor: el ejercicio que acabas de agregar entra con un brinco y su foto aparece */
.ed-ex.is-new { animation: m-rise 560ms var(--ease-out-expo) both; }
.ed-ex.is-new .ex-thumb-box { animation: m-pop 620ms var(--ease-spring) both 120ms; }

@media (prefers-reduced-motion: reduce) {
  .today-glow, .today-go::before, .ex-demo-fig, .live-go::after, .live-go-ico, .set-check svg, .live-done { animation: none !important; }
  .today-go::before { opacity: 0; }
}

/* ───────── Sube tu rutina (importar de un documento) ───────── */
.import-card .li-icon { --ic: var(--brand-ui); --ic-ink: #fff; }

/* El botón de archivo: el nombre de lo elegido a la izquierda y la pill a la derecha */
.imp-drop {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border-radius: 1rem; cursor: pointer;
  background: var(--card-2); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow 200ms ease;
}
.imp-drop:hover, .imp-drop:focus-within { box-shadow: inset 0 0 0 2px var(--flame); }
.imp-drop .li-body { min-width: 0; flex: 1; }
.imp-drop .li-sub { overflow-wrap: anywhere; }
.imp-drop .pill { flex-shrink: 0; }
.imp-drop-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  color: var(--flame-ink); background: color-mix(in oklab, var(--flame) 14%, transparent);
}
.imp-drop-icon svg { width: 22px; height: 22px; }
.imp-text { min-height: 120px; resize: vertical; font-family: inherit; line-height: 1.45; }

/* Mientras lee: una barra que avanza sola (no sabemos cuánto falta) */
.imp-reading { display: grid; justify-items: center; gap: 8px; padding: 28px 18px; text-align: center; }
.imp-reading-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 6px;
  color: #fff; background: var(--gloss), linear-gradient(145deg, color-mix(in oklab, var(--brand-ui) 60%, white), var(--brand-ui));
  animation: imp-float 2.4s var(--ease-out-expo) infinite alternate;
}
.imp-reading-icon svg { width: 30px; height: 30px; }
.imp-bar { width: min(260px, 100%); height: 8px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: var(--soft); }
.imp-bar span {
  display: block; width: 40%; height: 100%; border-radius: inherit;
  background: var(--flame-grad);
  animation: imp-slide 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes imp-slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes imp-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .imp-bar span, .imp-reading-icon { animation: none; } .imp-bar span { width: 100%; opacity: .5; } }

.imp-warn { box-shadow: inset 3px 0 0 var(--warn), inset 0 0 0 1px var(--line); }
.imp-warn svg { color: var(--warn); }
.imp-warn ul { margin: 6px 0 0; padding-left: 1.2rem; }
.imp-warn li + li { margin-top: 4px; }

/* Cada día: su número (o el día de la semana) y el nombre editable */
.imp-day-head { display: flex; align-items: center; gap: 10px; }
.imp-day-head .input { flex: 1; min-width: 0; font-weight: 700; }
.imp-day-n {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 12px; flex-shrink: 0;
  font-weight: 800; font-size: var(--text-sm); color: var(--on-flame);
  background: var(--gloss), var(--flame-grad);
  box-shadow: var(--gloss-edge);
}
.imp-list .list-item { align-items: flex-start; }
.imp-ex .li-body { min-width: 0; }
.imp-ex .li-title { overflow-wrap: anywhere; }
.imp-ex .pill { align-self: center; flex-shrink: 0; }
.imp-tag {
  display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 2px;
  padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
}
.imp-tag svg { width: 12px; height: 12px; }
.imp-tag.is-ok  { background: var(--ok-bg);   color: var(--ok); }
.imp-tag.is-new { background: var(--warn-bg); color: var(--warn); }
.imp-note { font-style: italic; }
.ex-item.is-on { box-shadow: inset 3px 0 0 var(--ok); }
/* En celular «Cambiar» queda en su círculo: el nombre del ejercicio necesita el ancho */
@media (max-width: 480px) {
  .imp-change { padding: 4px; gap: 0; }
  .imp-change-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ───────── Cardio (fuera de la rutina) ─────────
 * Rubí como su color fijo: el corazón. Las máquinas son botones grandes de 3 en
 * 3; el timer es lo más grande de la tarjeta. */
.cardio-card { --cardio: #e11d48; }
.li-icon.ic-ruby { --ic: #e11d48; --ic-ink: #fff; }
.cardio-eyebrow { color: color-mix(in oklab, var(--cardio, #e11d48) 70%, var(--ink)); display: inline-flex; align-items: center; gap: 6px; }
.cardio-machines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cardio-machine {
  display: grid; justify-items: center; gap: 6px; min-height: 84px; padding: 12px 4px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-field);
  background: var(--gloss-soft), var(--card-2); color: var(--ink);
  font: 600 var(--text-sm)/1.2 var(--font); cursor: pointer; text-align: center;
  transition: transform 300ms var(--ease-spring), border-color 200ms;
}
.cardio-machine:hover { border-color: color-mix(in oklab, var(--cardio) 60%, transparent); }
.cardio-machine:hover .cardio-machine-ico svg { transform: scale(1.1); }
.cardio-machine:active { transform: scale(0.95); }
.cardio-machine:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.cardio-machine-ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gloss), linear-gradient(145deg, color-mix(in oklab, var(--cardio) 58%, white), var(--cardio) 50%, color-mix(in oklab, var(--cardio) 72%, black));
  box-shadow: var(--gloss-edge); color: #fff;
}
.cardio-machine-ico svg { width: 22px; height: 22px; transition: transform 300ms var(--ease-spring); }
.cardio-skip { justify-self: center; }
.cardio-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cardio-title { display: flex; align-items: center; gap: 10px; font-size: var(--text-lg); }
.cardio-title .li-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.cardio-title .li-icon svg { width: 22px; height: 22px; }
.cardio-timer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radius-field); background: var(--card-2);
  border: 1px solid var(--line);
}
.cardio-timer strong { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cardio-timer.is-running { border-color: color-mix(in oklab, var(--cardio) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cardio) 16%, transparent); }
.cardio-timer.is-running strong { color: color-mix(in oklab, var(--cardio) 55%, var(--ink)); }
.cardio-timer-btn svg { width: 18px; height: 18px; }
.cardio-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cardio-fields .field:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.cardio-rows { display: grid; gap: 4px; }
.cardio-row { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.cardio-row .li-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; }
.cardio-row .li-icon svg { width: 18px; height: 18px; }
.cardio-row .li-body { flex: 1; min-width: 0; }
.cardio-row .li-title { font-weight: 600; }
.cardio-row .li-sub { font-size: var(--text-sm); color: var(--muted); }
.cardio-add { justify-self: start; }
.cardio-ask-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.cardio-ask-ico svg { width: 32px; height: 32px; }
.cardio-prefs { display: grid; gap: 8px; }
.cardio-pref { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .cardio-machine, .cardio-machine-ico svg { transition: none; }
}
.cardio-week { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.cardio-week .li-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.cardio-week .li-icon svg { width: 22px; height: 22px; }
.cardio-week-num { display: grid; justify-items: end; font-size: 1.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cardio-week-num small { font-size: var(--text-sm); font-weight: 700; }
.cardio-week-num .muted { font-weight: 500; letter-spacing: 0; }
.cardio-bars .mbar { grid-template-columns: minmax(0, 6.5rem) 1fr 7ch; }
.cardio-bars .mbar-track > span { background: var(--viz-3); }