/* ============================================================================
   FASE I — Vista de entrenamiento activo (el "player" a pantalla completa).
   Estilo iOS premium: oscuro, glass, acento naranja, tap targets grandes.
   ============================================================================ */

/* Mientras el player está abierto: bloquea el scroll del shell y oculta el
   panel flotante de descanso (el player tiene su propio timer grande). */
body.aw-open { overflow: hidden; }
body.aw-open .rest-panel { display: none !important; }

.aw-overlay {
  position: fixed; inset: 0; z-index: 55;
  background: var(--bg);
  display: none; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.aw-overlay.show {
  display: flex;
  animation: awIn 300ms cubic-bezier(.2,.8,.2,1);
}
@keyframes awIn {
  from { opacity: 0; transform: translateY(3%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Cabecera ----- */
.aw-top {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 10px;
}
.aw-min {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  width: 38px; height: 38px; border-radius: 12px; font-size: 20px;
  cursor: pointer; flex-shrink: 0; line-height: 1;
}
.aw-min:active { transform: scale(.92); }
.aw-top-mid { flex: 1; min-width: 0; text-align: center; }
.aw-elapsed {
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.aw-routine {
  font-size: 11px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-top-actions { display: flex; gap: 6px; flex-shrink: 0; }
.aw-cancel {
  background: transparent; border: 0; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 8px 6px; font-weight: 600;
}
.aw-cancel:active { color: var(--bad); }
.aw-finish {
  background: var(--accent); color: #1a0a00; border: 0;
  border-radius: 10px; padding: 9px 14px; font-size: 13px;
  font-weight: 700; cursor: pointer; letter-spacing: .3px;
}
.aw-finish:active { transform: scale(.96); }

/* ----- Progreso (pos · dots · contador) ----- */
.aw-progress {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 16px 12px;
}
.aw-pos-chip {
  background: var(--accent-bg); color: var(--accent-2);
  border: 1px solid var(--accent); border-radius: 8px;
  padding: 4px 8px; font-size: 12px; font-weight: 700;
  min-width: 34px; text-align: center; font-variant-numeric: tabular-nums;
}
.aw-dots {
  flex: 1; display: flex; gap: 6px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.aw-dots::-webkit-scrollbar { display: none; }
.aw-dot {
  flex: 1; min-width: 14px; height: 6px; border-radius: 3px;
  background: var(--line); border: 0; padding: 0; cursor: pointer;
  transition: background .2s, transform .12s;
}
.aw-dot.done { background: var(--good); }
.aw-dot.cur  { background: var(--accent); transform: scaleY(1.6); }
.aw-dot.cur.done { background: var(--accent); }
.aw-counter {
  font-size: 11px; color: var(--muted); flex-shrink: 0;
  font-variant-numeric: tabular-nums; min-width: 56px; text-align: right;
}

/* ----- Carrusel ----- */
.aw-stage { flex: 1; overflow: hidden; position: relative; }
.aw-track {
  display: flex; height: 100%;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.aw-page {
  flex: 0 0 100%; height: 100%; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 24px;
}

/* ----- Cabecera del ejercicio ----- */
.aw-ex-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 6px 0 16px;
}
.aw-ex-titles { flex: 1; min-width: 0; }
.aw-ex-name-row {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.aw-ex-name {
  font-size: 22px; font-weight: 800; line-height: 1.15;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aw-ex-meta { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* === Botón "Tips" del ejercicio · pill horizontal === */
.aw-ex-tips {
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent-2);
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.aw-ex-tips:hover {
  background: rgba(255,107,0,.10);
  border-color: var(--accent);
  color: var(--accent);
}
.aw-ex-tips:active { transform: scale(.94); }
/* Indicador naranja arriba-derecha cuando ya hay notas guardadas. */
.aw-ex-tips.has-tips {
  background: rgba(255,107,0,.08);
  border-color: rgba(255,107,0,.45);
  color: var(--accent);
}
.aw-ex-tips.has-tips::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  background: var(--accent);
  border: 2px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,107,0,.6);
}

/* === Modal de notas técnicas — vive dentro del .modal global === */
.tips-sub {
  font-size: 13px;
  color: var(--accent-2);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.15px;
}
.tips-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 12px;
  line-height: 1.55;
  letter-spacing: 0.1px;
}
.tips-textarea {
  width: 100%;
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  min-height: 160px;
  outline: none;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none;
}
.tips-textarea:focus {
  border-color: var(--accent);
  background: var(--panel-2);
}
.tips-textarea::placeholder {
  color: var(--muted);
  font-style: italic;
}
.aw-ex-last { text-align: right; flex-shrink: 0; font-size: 12px; }
.aw-last-cap {
  display: block; font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px;
}
.aw-ex-last b { color: var(--text); font-weight: 700; font-size: 13px; }
/* Variante UNILATERAL del chip ÚLTIMA: dos líneas I / D apiladas (fix bug 1).
   Compacto, alineado a la derecha, con la inicial del lado coloreada (I cyan,
   D naranja) para casar con las pastillas de las sub-filas del set. */
.aw-ex-last b.split {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 12px; line-height: 1.25;
}
.aw-ex-last .aw-last-side {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.aw-ex-last .aw-last-side i {
  font-style: normal; font-weight: 800; margin-right: 3px;
}
.aw-ex-last .aw-last-side.i i { color: #60a5fa; }
.aw-ex-last .aw-last-side.d i { color: var(--accent-2); }

/* ----- Series (Módulo 2: fila limpia + check circular) ----- */
.aw-sets { display: flex; flex-direction: column; gap: 8px; }

/* Cabecera de columnas: una sola vez, alineada con la grid de la fila.
   (Adiós a los labels flotantes que se superponían entre filas.)
   - Modo NORMAL: 6 cols (n · kg · reps · rpe · check · del)
   - Modo SPLIT (Manos separadas): 6 cols pero distintas — RPE se oculta
     para dar espacio a L y R sin sacrificar legibilidad de los inputs.
     (n · kg · L · R · check · del).
   Distribución 2fr / 2fr / 1.2fr entre KG, REPS y RPE — KG y REPS exactamente
   iguales (no pueden colapsar uno al otro), RPE algo más estrecho (es input
   subjetivo y opcional, no necesita la misma anchura). minmax(0,…) impide
   que el contenido intrínseco de los inputs fuerce overflow horizontal. */
.aw-set-head,
.aw-set {
  display: grid;
  /* KG algo más ancho que REPS (2.3 vs 2) para alojar pesos de 3 dígitos
     (135, 137, 200 kg) sin recortar; RPE se estrecha (1fr) por ser opcional. */
  grid-template-columns: 28px minmax(0,2.3fr) minmax(0,2fr) minmax(0,1fr) 50px 22px;
  gap: 8px; align-items: center;
}
/* === Modo UNILATERAL ESTRICTO (sub-filas I/D apiladas) ===
 * El header sigue siendo de 1 fila pero con 6 columnas alineadas con la
 * grid del set: [#] [tag] [KG] [REPS] [✓] [×].
 * El set en sí usa 2 filas auto con grid-template-areas para mapear los
 * elementos: número y acciones span ambas filas; cada lado ocupa su row. */
.aw-set-head.split {
  grid-template-columns: 28px 22px minmax(0,1fr) minmax(0,1fr) 50px 22px;
  gap: 6px;
}
.aw-set.split {
  grid-template-columns: 28px 22px minmax(0,1fr) minmax(0,1fr) 50px 22px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "n il ikg irp chk del"
    "n dl dkg drp chk del";
  gap: 6px 6px;
  padding: 8px 10px;
  row-gap: 6px;
}
.aw-set.split .aw-set-n { align-self: center; }
.aw-set.split .aw-check { align-self: center; }
.aw-set.split .aw-set-del { align-self: center; }
.aw-side-tag{
  /* La etiqueta I/D se pinta como una "perlita" cuadrada compacta junto
     a la sub-fila, en el mismo lenguaje visual que el número de serie. */
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 30px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .5px;
  color: var(--muted);
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.aw-side-i { color: #60a5fa; border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.06); }
.aw-side-d { color: var(--accent-2); border-color: rgba(255,164,92,.35); background: rgba(255,164,92,.06); }
.aw-set.split.is-completed .aw-side-tag { color: var(--good); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.06); }
.aw-side-kg, .aw-side-reps { min-width: 0; }
.aw-set-head { padding: 0 10px 2px; }
.aw-set-head span {
  font-size: 10px; color: var(--muted); text-align: center;
  text-transform: uppercase; letter-spacing: .8px;
}
.aw-set {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 10px;
  transition: border-color .15s, background .15s;
}
.aw-set.next { border-color: var(--accent); }
.aw-set.is-completed {
  background: var(--good-bg); border-color: var(--good-border);
}
.aw-set-n {
  text-align: center; font-weight: 800; font-size: 14px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.aw-set.is-completed .aw-set-n { color: var(--good); }

/* Inputs sin borde "ruidoso": el borde aparece solo al enfocar */
.aw-in {
  width: 100%; background: var(--neutral-bg); border: 1px solid transparent;
  border-radius: 8px; color: var(--text); padding: 12px 4px;
  text-align: center; font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; -webkit-appearance: none;
}
.aw-in:focus { outline: none; border-color: var(--accent); background: var(--panel-2); }
.aw-in.aw-rpe { font-size: 14px; }
.aw-in:disabled { opacity: .55; }
/* Serie completada: inputs bloqueados temporalmente */
.aw-set.is-completed .aw-in { opacity: .6; pointer-events: none; }

/* ===========================================================================
   Stepper de reps: [− N +] sin teclado nativo.
   ---------------------------------------------------------------------------
   REWRITE v57 — FLEXBOX robusto (adiós al grid que desbordaba).

   Bug raíz (IMG_5882/5883): el modelo anterior era
     grid-template-columns: 36px 1fr 36px
   Un track `1fr` es en realidad `minmax(auto, 1fr)`: se NIEGA a encogerse
   por debajo del ancho intrínseco de su contenido. En columnas REPS
   estrechas, el track central crecía para meter el número y empujaba el
   grid completo MÁS ANCHO que su contenedor → la celda derecha (el botón
   "+") quedaba parcialmente fuera, bajo el borde. Por eso el "+" se veía
   pegado/recortado contra el border, y con 2 dígitos (10, 12) sería peor.

   Solución definitiva (lo que pidió el usuario):
     - display:flex; justify-content:space-between; align-items:stretch
     - padding horizontal 6px → respiración garantizada desde el border
     - botones: tamaño FIJO cuadrado (flex:0 0 30px), glyph centrado con
       flex; NUNCA crecen ni se pegan al borde absoluto.
     - valor central: flex:1 1 0 + min-width:0 → SÍ puede encogerse, así
       que jamás empuja a los botones fuera del contenedor.
   align-items:stretch mantiene los botones a altura completa (tap target
   cómodo en el gym) sin deformar el glyph (está centrado por flex). */
.aw-stepper {
  display: flex; align-items: stretch; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  gap: 0;
  background: var(--neutral-bg); border: 1px solid transparent;
  border-radius: 8px;
  padding: 2px 5px;                              /* 5px lateral = respiración del "+" */
  min-height: 44px;
}
.aw-set.next .aw-stepper { border-color: var(--accent); }
.aw-stepper .aw-step {
  flex: 0 0 26px;                                /* cuadrado fijo, no crece ni encoge */
  min-width: 26px; min-height: 26px;
  background: transparent; border: 0; color: var(--accent-2);
  font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
  border-radius: 6px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: background .12s, transform .1s;
}
.aw-stepper .aw-step:active { transform: scale(.9); background: rgba(255,122,47,.18); }
.aw-stepper .aw-step:disabled { opacity: .4; cursor: not-allowed; }
.aw-stepper .aw-step-val {
  flex: 1 1 0; min-width: 0;                     /* shrinkable → nunca desborda */
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; user-select: none;
  transition: color .15s, opacity .15s;
}
/* Ghost de "última" — cuando la celda está vacía pero hay histórico para
   esta fila, mostramos el valor de la semana pasada en tono muted como
   referencia. Mismo lenguaje visual que un placeholder de <input>. */
.aw-stepper .aw-step-val.placeholder {
  color: var(--muted);
  font-weight: 600;
  opacity: 0.6;
}
.aw-set.is-completed .aw-stepper { opacity: .65; }
.aw-set.is-completed .aw-stepper .aw-step-val { color: var(--good); }

/* Variante MINI del reps stepper — usada en modo split para que dos
   steppers (L y R) quepan en el ancho asignado a la columna REPS.
   Buttons 18px en vez de 34px → cabe 18+18+gap = ~40px y deja ~25px
   para el valor numérico en una columna 1fr de ~67px. */
/* Variante MINI (modo split, dos steppers L|R en la columna REPS). Hereda
   el modelo flex del padre; solo encoge los botones para que dos quepan en
   el ancho asignado. padding lateral 4px (algo menos que el grande). */
.aw-stepper.aw-stepper-mini {
  padding: 1px 4px;
  gap: 1px;
}
.aw-stepper.aw-stepper-mini .aw-step {
  flex: 0 0 24px;
  min-width: 24px; min-height: 24px;
  font-size: 14px;
  font-weight: 700;
}
.aw-stepper.aw-stepper-mini .aw-step-val { font-size: 14px; }

/* === Strip "Peso corporal" — prominente, acento naranja === */
.aw-bw-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin: 4px 0 8px;
  background: rgba(255,107,0,.07);
  border: 1px solid rgba(255,107,0,.30);
  border-radius: 12px;
}
.aw-bw-main { flex: 1; min-width: 0; }
.aw-bw-title {
  font-size: 14px; font-weight: 800; color: var(--accent);
  letter-spacing: .2px;
}
.aw-bw-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Pastilla "PC" que reemplaza el stepper de KG en modo peso corporal.
   Misma altura que .aw-w-stepper para no romper la alineación de la fila. */
.aw-bw-cell {
  width: 100%; min-width: 0;
  min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  background: var(--neutral-bg);
  border: 1px dashed rgba(255,107,0,.45);
  border-radius: 8px;
  color: var(--accent-2);
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, transform .1s;
}
.aw-bw-cell:hover { background: rgba(255,107,0,.08); border-color: var(--accent); }
.aw-bw-cell:active { transform: scale(.96); }
.aw-set.is-completed .aw-bw-cell { opacity: .6; pointer-events: none; }

/* === Toggle "Manos separadas" — strip + iOS-style switch === */
.aw-split-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin: 4px 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.awst-label {
  flex: 1;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: .3px;
  font-weight: 600;
}
.awst-label .awst-help {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: .1px;
  font-weight: 400;
}
.aw-switch {
  position: relative;
  width: 40px; height: 24px;
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  transition: background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.aw-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.3, 1.4, .4, 1), background .2s;
}
.aw-switch.on {
  background: rgba(255,107,0,.18);
  border-color: var(--accent);
}
.aw-switch.on::after {
  transform: translateX(16px);
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(255,107,0,.4);
}
.aw-switch:active::after { transform: scale(.95); }
.aw-switch.on:active::after { transform: translateX(16px) scale(.95); }

/* ===========================================================================
   Stepper INLINE de KG · [−] [input] [+]
   ---------------------------------------------------------------------------
   El input mantiene su edición manual (tap en el centro → teclado decimal),
   pero las flechas laterales permiten ±2.5 kg sin desplegar el teclado.
   Visual: un solo bordeado exterior, buttons borderless por dentro → se ve
   como UN componente, no como tres elementos sueltos.
   ============================================================================ */
/* REWRITE v57 — mismo modelo robusto que .aw-stepper para simetría visual
   exacta entre KG y REPS. Clave: QUITAMOS `overflow:hidden` (era lo que
   recortaba el glyph "+" contra el borde) y añadimos padding lateral 6px
   para que los botones respiren. Las esquinas redondeadas las da el
   border-radius del wrapper; el input tiene fondo transparente, así que
   no necesita el overflow:hidden para nada. */
.aw-w-stepper {
  display: flex; align-items: stretch; justify-content: space-between;
  width: 100%; min-width: 0; box-sizing: border-box;
  gap: 0;
  background: var(--neutral-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 5px;                                /* 5px lateral = respiración del "+" */
  min-height: 44px;                              /* MATCH .aw-stepper (REPS) */
  transition: border-color .15s, background .15s;
}
.aw-w-stepper:focus-within {
  border-color: var(--accent);
  background: var(--panel-2);
}
.aw-set.next .aw-w-stepper { border-color: var(--accent); }

/* El input ocupa el centro flexible. min-width:0 → puede encogerse sin
   empujar los botones fuera. text-align center para casar con el stepper
   de reps. */
.aw-w-stepper .aw-in {
  flex: 1 1 0; min-width: 0;
  padding: 12px 2px;
  font-size: 16px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: font-size .1s;
}
/* Escalado dinámico por nº de dígitos (fix overflow IMG_6101/6102): pesos de
   3 dígitos (137) bajan un punto y aprietan el tracking; 4+ (1000, 137.5)
   bajan más. El JS (fitWeightFont) togglea estas clases al teclear/±. */
.aw-w-stepper .aw-in.dig3 { font-size: 15px; letter-spacing: -.3px; }
.aw-w-stepper .aw-in.dig4 { font-size: 13px; letter-spacing: -.5px; }
.aw-w-stepper .aw-in:focus {
  background: transparent;
  border-color: transparent;
}

.aw-w-step {
  /* Cuadrado fijo 24px (un pelín más estrecho que los 26 de REPS) para
     liberar ~4px al input central y alojar pesos de 3 dígitos. Glyph
     centrado por flex; nunca se pega al borde (padding lateral del wrapper). */
  flex: 0 0 24px;
  min-width: 24px; min-height: 24px;
  background: transparent;
  border: 0;
  color: var(--accent-2);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  padding: 0;
  border-radius: 6px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, transform .1s;
}
.aw-w-step:hover { color: var(--accent); }
.aw-w-step:active {
  background: rgba(255,107,0,.18);
  transform: scale(.88);
}
.aw-w-step:disabled { opacity: .35; cursor: default; }

/* Serie completada: stepper bloqueado igual que el input — no quiero
   subir/bajar peso de una serie ya cerrada. */
.aw-set.is-completed .aw-w-stepper { opacity: .65; }
.aw-set.is-completed .aw-w-step { pointer-events: none; opacity: .5; }

/* Aviso sub-rango: borde naranja sutil cuando reps < límite inferior */
.aw-set.is-under{
  border-color: rgba(255,122,47,.55);
  box-shadow: inset 0 0 0 1px rgba(255,122,47,.10);
}
.aw-set.is-under .aw-stepper{ background: rgba(255,122,47,.06); }
.aw-set.is-under .aw-step-val{ color: var(--accent-2); }
/* Si además está completa (verde), prevalece el verde para no marearse */
.aw-set.is-completed.is-under{ border-color: var(--good-border); }
.aw-set.is-completed.is-under .aw-stepper{ background: transparent; }
.aw-set.is-completed.is-under .aw-step-val{ color: var(--good); }

/* Botón de acción circular (Set completado) */
.aw-check {
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 2px solid var(--line);
  color: transparent; font-size: 20px; font-weight: 900;
  cursor: pointer; justify-self: center;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s cubic-bezier(.2,.8,.2,1),
              background .18s, border-color .18s, color .12s;
}
.aw-check:active { transform: scale(.88); }
.aw-set.next .aw-check { border-color: var(--accent); }
.aw-set.is-completed .aw-check {
  background: var(--good); border-color: var(--good); color: #04210f;
  animation: awCheckPop .3s cubic-bezier(.2,.8,.2,1.4);
}
@keyframes awCheckPop {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.aw-set-del {
  background: transparent; border: 0; color: var(--muted);
  font-size: 16px; width: 22px; height: 38px; cursor: pointer;
  border-radius: 6px; opacity: .5;
}
.aw-set-del:active { background: var(--bad-bg); color: var(--bad); }
.aw-set.is-completed .aw-set-del { visibility: hidden; }

.aw-add {
  width: 100%; margin-top: 12px;
  background: transparent; color: var(--accent-2);
  border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer;
  letter-spacing: .3px;
}
.aw-add:active { transform: scale(.99); }

.aw-notes-wrap { margin-top: 14px; }
.aw-notes {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; font-size: 14px; -webkit-appearance: none;
}
.aw-notes:focus { outline: none; border-color: var(--accent); }

.aw-empty {
  text-align: center; color: var(--muted); padding: 60px 20px; font-size: 15px;
}

/* ----- Timer grande de descanso ----- */
.aw-rest {
  display: flex; align-items: center; gap: 16px;
  margin: 0 14px 12px; padding: 14px 16px;
  background: linear-gradient(135deg, #171a21, #1e222b);
  border: 1px solid var(--accent); border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: awRestIn 240ms cubic-bezier(.2,.8,.2,1);
}
.aw-rest[hidden] { display: none; }
@keyframes awRestIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aw-rest-ring {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  position: relative;
  background: conic-gradient(var(--accent) 0deg, var(--line) 0);
}
.aw-rest-ring::before {
  content: ""; position: absolute; inset: 7px;
  background: #15181f; border-radius: 50%;
}
.aw-rest-time {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
  z-index: 1;
}
.aw-rest-mid { flex: 1; min-width: 0; }
.aw-rest-name {
  font-size: 13px; font-weight: 700; color: var(--accent-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 8px;
}
.aw-rest-actions { display: flex; gap: 6px; }
.aw-rest-actions button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 13px;
  font-weight: 700; cursor: pointer;
}
.aw-rest-actions button:active { transform: scale(.94); }
.aw-rest-actions .skip {
  background: var(--accent-bg); border-color: var(--accent); color: var(--accent-2);
}

/* ----- Pie (anterior · preview siguiente / terminar) ----- */
.aw-foot {
  display: flex; align-items: stretch; gap: 10px;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.aw-prev {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  width: 52px; border-radius: 12px; font-size: 22px; cursor: pointer;
  flex-shrink: 0; line-height: 1;
}
.aw-prev:active { transform: scale(.94); }
.aw-next {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 12px; padding: 12px 16px;
  cursor: pointer; min-width: 0;
}
.aw-next:active { transform: scale(.99); }
.aw-next.finish {
  background: var(--accent); border-color: transparent; color: #1a0a00;
}
/* === Modo "return" === botón te lleva a un ejercicio que saltaste.
   Visualmente entre el "Siguiente" neutro y el "Terminar" solid orange:
   borde y texto accent, fondo translúcido naranja. Comunica
   "atención pendiente" sin gritarlo. */
.aw-next.return {
  background: rgba(255,107,0,.10);
  border-color: rgba(255,107,0,.40);
  color: var(--accent-2);
}
.aw-next.return .aw-next-cap { color: var(--accent-2); opacity: .85; }
.aw-next.return .aw-next-arrow {
  color: var(--accent);
  font-size: 16px;        /* ↶ es ligeramente más ancho que › */
}
/* Modo "start" en el warmup: CTA primaria igual que finish — el usuario
   está a un tap de empezar el entrenamiento real. */
.aw-next.start {
  background: var(--accent); border-color: transparent; color: #1a0a00;
}
.aw-next.start .aw-next-arrow { color: #1a0a00; }

/* Modo "stay" = sólo el ejercicio actual está pendiente. No hay nada a
   donde navegar — el botón queda deshabilitado para evitar tap accidental
   en "Terminar" sin haber completado las series del ejercicio en curso. */
.aw-next.stay,
.aw-next:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--muted);
}
.aw-next.stay .aw-next-cap { color: var(--muted); }
.aw-next.stay .aw-next-name { color: var(--text-2); }

/* ============================================================================
   Página de CALENTAMIENTO — pages[0] del player
   ----------------------------------------------------------------------------
   Pantalla dedicada full-screen, centrada, jerarquía clara:
   icono pulsante → título grande → subtítulo → tarjetas con tips →
   botón de check. Sin elementos competidores: el usuario decide cuándo
   está listo para empezar la primera serie.
   ============================================================================ */
.aw-page-warmup {
  padding: 30px 22px 28px;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  overflow-y: auto;
}
.aw-warmup-hero {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.aw-warmup-icon {
  font-size: 64px; line-height: 1;
  filter: saturate(1.15);
  animation: aw-warmup-pulse 2.4s ease-in-out infinite;
}
@keyframes aw-warmup-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.aw-warmup-title {
  font-size: 28px; font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.aw-warmup-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.aw-warmup-tips {
  list-style: none;
  padding: 0; margin: 0;
  max-width: 340px; width: 100%;
  display: flex; flex-direction: column;
  gap: 8px;
}
.aw-warmup-tips li {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 13px;
  color: var(--text-2);
  text-align: left;
  display: flex; align-items: center; gap: 12px;
  letter-spacing: 0.1px;
}
.aw-warmup-tips li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.aw-warmup-check {
  background: var(--panel-2);
  border: 1.5px dashed var(--accent);
  color: var(--accent-2);
  border-radius: 14px;
  padding: 14px 24px;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
  max-width: 340px; width: 100%;
  transition: background .18s, border-style .18s, color .18s, transform .12s;
}
.aw-warmup-check:hover {
  background: rgba(255,107,0,.06);
  border-style: solid;
}
.aw-warmup-check.on {
  background: rgba(52,211,153,.12);
  border: 1.5px solid var(--good);
  color: var(--good);
}
.aw-warmup-check:active { transform: scale(.985); }
.aw-next-cap {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px; flex-shrink: 0;
}
.aw-next-name {
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aw-next.finish .aw-next-name { letter-spacing: .3px; }
.aw-next-arrow { font-size: 18px; color: var(--muted); flex-shrink: 0; }

/* ----- Módulo 4: botón "Cambiar ej." + hoja contextual ----- */
.aw-change {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--accent-2);
  border-radius: 12px; padding: 12px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; white-space: nowrap; line-height: 1;
}
.aw-change:active { transform: scale(.96); }

/* La hoja vive DENTRO de #activeWorkout (no usa .modal-bg global porque el
   overlay del player va por encima de z-index del modal). */
.aw-sheet-bg {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: awFadeIn .18s ease;
}
@keyframes awFadeIn { from { opacity: 0; } to { opacity: 1; } }
.aw-sheet {
  width: 100%; max-width: 540px;
  background: var(--panel); border: 1px solid var(--line);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  max-height: 82%; display: flex; flex-direction: column; overflow: hidden;
  animation: awSheetUp .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes awSheetUp {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}
.aw-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.aw-sheet-head h3 { margin: 0; font-size: 16px; }
.aw-sheet-x {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  width: 32px; height: 32px; border-radius: 8px; font-size: 16px; cursor: pointer;
}
.aw-sheet-body {
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.aw-sheet-cap {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px; margin: 12px 2px 8px;
}
.aw-sheet-cap:first-child { margin-top: 0; }
.aw-sheet-note {
  font-size: 11.5px; color: var(--muted); line-height: 1.4;
  margin: 0 2px 10px;
}
.aw-sheet-jump { display: flex; flex-direction: column; gap: 6px; }
.aw-sheet-list { display: flex; flex-direction: column; gap: 6px; }
.aw-sheet-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer;
}
.aw-sheet-row:active { transform: scale(.99); }
.aw-sheet-row:hover { border-color: var(--accent); }
.aw-sheet-row-name { font-size: 14px; font-weight: 600; min-width: 0; }
.aw-sheet-row-tag { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.aw-sheet-search {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px; font-size: 14px; margin-bottom: 8px; -webkit-appearance: none;
}
.aw-sheet-search:focus { outline: none; border-color: var(--accent); }
.aw-sheet-empty {
  text-align: center; color: var(--muted); font-size: 13px; padding: 16px;
}

/* ============================================================================
   OVERRIDE de carga para la PRÓXIMA SESIÓN · "Next Workout Override"
   ----------------------------------------------------------------------------
   Strip horizontal debajo del head del ejercicio. Label compacto "Próxima
   sesión" + dos flechas minimalistas ▲ / ▼.
     - ▲ on  → fondo accent naranja, halo glow → "forzar progreso"
     - ▼ on  → fondo muted warm tint → "forzar regresión controlada"
   Estado mutually-exclusive (solo una puede estar on). Tap doble cancela.
   ============================================================================ */
.aw-override {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 6px;
  padding: 8px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 40px;
}
.awo-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}
.awo-spacer { flex: 1; }
.awo-arrow {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s,
              transform .12s, box-shadow .2s;
}
.awo-arrow:hover { border-color: rgba(255,255,255,.18); color: var(--text-2); }
.awo-arrow:active { transform: scale(.92); }

/* ▲ activado → progreso forzado (acento naranja saturado) */
.awo-up.on {
  background: rgba(255,107,0,.16);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(255,107,0,.4),
    0 4px 12px rgba(255,107,0,.22);
}
/* ▼ activado → regresión deliberada (muted warm/amber, sin alarma) */
.awo-down.on {
  background: rgba(255,164,92,.10);
  border-color: rgba(255,164,92,.45);
  color: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(255,164,92,.28);
}
/* = activado → freeze/lock. Azul cielo: comunica "neutral/congelado",
   visualmente distinto de ▲ (naranja saturado) y ▼ (ámbar tenue) para
   que los tres modos sean inmediatamente identificables. */
.awo-flat.on {
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.50);
  color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(96,165,250,.35);
}

/* ============================================================================
 * Bi-serie (superset) — chip de la página del player
 *
 * Se inyecta como primer hijo de cada .aw-page que forma parte de un par.
 * Comunica al usuario en qué tramo del flujo está (A o B) y cuál es su
 * compañero. El acento naranja delgado a la izquierda evoca la "cuerda"
 * que une A y B en el editor de Día.
 * ========================================================================== */
.aw-ss-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: rgba(255,107,0,.08);
  border: 1px solid rgba(255,107,0,.32);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  font-size: 12px; line-height: 1.2;
  box-sizing: border-box;
}
.aw-ss-chip .aw-ss-tag {
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.aw-ss-chip .aw-ss-sub {
  color: var(--text-2, var(--muted));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

/* ============================================================================
 * Modal de Ajustes por ejercicio · v55
 * Diseño: 4-5 secciones tipográficamente fuertes, cada una con un control
 * táctil grande. Chips para presets y un switch iOS-style para boolean.
 * El modal hereda layout de .modal-bg / .modal global; aquí pintamos el body.
 * ========================================================================== */
.exset-body{
  display: flex; flex-direction: column; gap: 22px;
  padding: 4px 2px 16px;
  /* min-height:0 → como flex-item del .modal (columna), permite encoger por
     debajo de su contenido y que overflow-y:auto (heredado de .modal-body)
     active el scroll vertical. Sin esto el body crecía y el fondo se cortaba. */
  min-height: 0;
}
.exset-exname{
  color: var(--accent-2);
  font-weight: 700;
}
.exset-section{
  display: flex; flex-direction: column; gap: 10px;
}
.exset-h4{
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
}
.exset-sub{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.exset-chip-row{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.exset-chip{
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.exset-chip:hover{
  background: rgba(255,107,0,.06);
  border-color: rgba(255,107,0,.35);
}
.exset-chip:active{ transform: scale(.96); }
.exset-chip.on{
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0a00;
  box-shadow: 0 0 0 1px rgba(255,107,0,.35), 0 4px 10px rgba(255,107,0,.18);
}
/* Tipo de progresión: lista vertical con label + descripción */
.exset-type-list{
  display: flex; flex-direction: column; gap: 6px;
}
.exset-type{
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s, transform .1s;
}
.exset-type:active{ transform: scale(.99); }
.exset-type.on{
  background: rgba(255,107,0,.10);
  border-color: var(--accent);
}
.exset-type-label{
  font-size: 14px; font-weight: 700;
  color: var(--text);
}
.exset-type.on .exset-type-label{ color: var(--accent); }
.exset-type-sub{
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
}
/* Switch iOS-style igual que en active workout (.aw-switch ya existe); las
 * filas con switch + texto las pintamos como un row sin background propio. */
.exset-switch-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 0 2px;
  cursor: pointer;
}
.exset-switch-label{
  font-size: 13px; font-weight: 700; color: var(--text);
}
.exset-switch-sub{
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px;
}

/* Botón "Ajustes" en el header del player — mismo lenguaje visual que .aw-ex-tips
 * pero con icono de engranaje para distinguirlo a primera vista. */
.aw-ex-settings{
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--accent-2);
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.aw-ex-settings:hover{
  background: rgba(255,107,0,.10);
  border-color: var(--accent);
  color: var(--accent);
}
.aw-ex-settings:active{ transform: scale(.92); }