/* RANGO — Player · rediseño 2026
   Figura a sangre completa, chips de cristal, pips de progreso, gesto de deslizar
   y anillo de tiempo fino. Solo tokens de design/tokens.css. */

/* ---------- Escenario a sangre completa ---------- */
/* El escenario tiene una altura ideal (height) y CEDE espacio si el texto lo necesita: flex-shrink enorme
   frente al cuerpo, hasta un mínimo de 150 px. Solo si ni así cabe el texto, el cuerpo se desplaza. */
#screen-player .player-video {
  position: relative;
  flex: 0 1000 auto;
  min-height: 150px;
  height: 50%;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-player);   /* respaldo sin color-mix: solo el fondo del escenario */
  background:
    radial-gradient(ellipse 85% 65% at 50% 42%, color-mix(in srgb, var(--performance-blue) 16%, transparent), transparent 72%),
    var(--surface-player);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* degradado inferior: la figura se funde con el cuerpo, sin borde duro */
#screen-player .player-video::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--obsidian-black));
  pointer-events: none;
  z-index: 0;
}
/* capa que sigue al dedo; el escenario (gesto, chips, pips) permanece fijo */
#screen-player .player-swipe {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform, opacity;
}
#screen-player .player-video.dragging { cursor: grabbing; }
#screen-player #playerVisual { width: 100%; height: 100%; }
#screen-player #playerVisual > svg:not(.fig) { width: min(78%, 280px); height: auto; }
#screen-player #playerVisual .fig-wrap {
  padding: calc(28px + env(safe-area-inset-top)) var(--sp-4) 34px;
}
#screen-player #playerVisual .fig-cue { font-size: var(--fs-sm); }
#screen-player .fig-neutral { padding-bottom: var(--sp-6); }
/* escenario bajo (móvil corto o texto largo que le quita altura): el icono decorativo cede el sitio para no chocar con la etiqueta superior */
@media (max-height: 600px) {
  #screen-player .fig-neutral { padding-top: var(--sp-8); }
  #screen-player .fig-neutral svg { display: none; }
}
@supports (container-type: size) {
  #screen-player .player-video { container-type: size; container-name: rdstage; }
  @container rdstage (max-height: 230px) {
    .fig-neutral { padding-top: var(--sp-8); }
    .fig-neutral svg { display: none; }
  }
}
#screen-player .player-video-thumb { touch-action: pan-y; }

/* ---------- Chips de cristal ---------- */
#screen-player .player-video .module-tag,
#screen-player .player-video .close-x {
  position: absolute;
  z-index: 3;
  background: var(--surface-1);        /* respaldo sin color-mix: chip opaco */
  background: color-mix(in srgb, var(--obsidian-black) 48%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
}
#screen-player .player-video .module-tag {
  top: calc(18px + env(safe-area-inset-top));
  left: calc(var(--sp-4) + env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;               /* centrado con el botón cerrar de 44 px */
  padding: 0 var(--sp-3);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-1);
  max-width: calc(100% - 88px - env(safe-area-inset-left));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screen-player .player-video .module-tag::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tag-c, var(--performance-blue));
}
#screen-player .player-video .close-x {
  top: calc(var(--sp-3) + env(safe-area-inset-top));
  right: var(--sp-3);
  width: 44px; height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 150ms ease, transform 160ms var(--ease-out-strong);
}
#screen-player .player-video .close-x:active { transform: scale(0.92); }
#screen-player .player-video .close-x:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  #screen-player .player-video .close-x:hover { color: var(--text-1); }
}
@media (prefers-reduced-transparency: reduce) {
  #screen-player .player-video .module-tag,
  #screen-player .player-video .close-x {
    background: var(--surface-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Pips de progreso de la sesión ---------- */
#screen-player .player-pips {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: var(--sp-4);
  height: 6px;
  padding: 0 var(--sp-6);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
#screen-player .player-pips:empty { display: none; }
#screen-player .pip {
  flex: 0 1 auto;
  width: 6px; min-width: 3px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--text-3);
  opacity: 0.75;
  transition: width var(--dur-slow) var(--ease-out-strong), background-color var(--dur-base) ease, opacity var(--dur-base) ease;
}
#screen-player .pip.done { background: var(--recovery-teal); opacity: 1; }
#screen-player .pip.cur { width: 22px; background: var(--performance-blue); opacity: 1; }

/* ---------- Cuerpo ---------- */
/* El cuerpo desplaza el texto; los controles (.player-dock, ver más abajo) quedan fijos al pie: el
   padding inferior lo pone el dock. --pad-x es el margen lateral, que el dock recupera con margen negativo. */
#screen-player .player-body {
  --pad-x: var(--sp-6);
  flex: 1 1 auto;                 /* base = alto del contenido: el escenario cede antes que el texto */
  scrollbar-width: none;
  padding: var(--sp-4) var(--pad-x) 0;
}
#screen-player .player-body::-webkit-scrollbar { display: none; }
#screen-player .player-step { margin-bottom: var(--sp-1); color: var(--text-3); }
#screen-player .player-body h2 { line-height: 1.2; margin-bottom: var(--sp-2); text-wrap: balance; }
#screen-player .player-body .cue { line-height: 1.5; margin-bottom: var(--sp-3); }
#screen-player .player-next { margin: 0 0 var(--sp-3); }
/* teléfonos estrechos: la etiqueta de paso («Preparación para el entreno · 2 de 14») cabe en una línea */
@media (max-width: 400px) {
  #screen-player .player-step { font-size: var(--fs-micro); letter-spacing: 0.06em; }
}
@media (max-width: 340px) {
  #screen-player .player-body { --pad-x: var(--sp-5); }
}

/* ---------- Anillo de tiempo ---------- */
#screen-player .player-ring-wrap {
  --ring: clamp(88px, 15vh, 168px);
  flex: 0 0 auto;
  width: var(--ring); height: var(--ring);
  margin: auto;
}
#screen-player .player-ring-track { stroke: var(--hairline-strong); stroke-width: 6; }
#screen-player .player-ring-progress { stroke-width: 6; }
#screen-player .player-ring-wrap .timer {
  font-size: calc(var(--ring) * 0.3);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@supports (height: 1dvh) {
  #screen-player .player-ring-wrap { --ring: clamp(88px, 15dvh, 168px); }
}
/* marco de escritorio: la altura del teléfono es la del viewport menos 90px */
@media (min-width: 521px) {
  #screen-player .player-ring-wrap {
    --ring: clamp(88px, calc((100vh - 90px) * 0.14), 128px);
  }
  @supports (height: 1dvh) {
    #screen-player .player-ring-wrap {
      --ring: clamp(88px, calc((100dvh - 90px) * 0.14), 128px);
    }
  }
}

/* ---------- Controles fijos: Pausar / Completar ejercicio SIEMPRE a la vista ----------
   rd-player.js agrupa las acciones y el pie de seguridad en .player-dock, pegado (sticky) al borde
   inferior del cuerpo. Si el texto no cabe (móvil bajo, instrucción larga) el texto se desplaza
   por debajo del dock; los botones no salen nunca de la pantalla. */
#screen-player .player-dock {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: auto calc(var(--pad-x) * -1) 0;
  padding: var(--sp-3) var(--pad-x) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface-0);
}
/* difuminado sobre el dock: solo con más texto por debajo (rd-player.js pone .has-more) */
#screen-player .player-dock::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: var(--sp-6);
  background: linear-gradient(to top, var(--surface-0), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) ease;
}
#screen-player .player-dock.has-more::before { opacity: 1; }

/* ---------- Acciones: pausa a la izquierda, completar como acción principal ---------- */
#screen-player .player-actions {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2);
}
#screen-player .player-dock .player-actions { margin-top: 0; }
#screen-player .player-actions .btn { min-height: 48px; white-space: nowrap; }
#screen-player #btnPause { min-width: 100px; padding-left: var(--sp-4); padding-right: var(--sp-4); }
#screen-player #btnComplete { padding-left: var(--sp-2); padding-right: var(--sp-2); }
/* móvil estrecho: «Pausar» cede su ancho mínimo para que «Completar ejercicio» siga a su lado (así el dock mide una sola fila) */
@media (max-width: 400px) {
  #screen-player #btnPause { min-width: 0; }
}
/* 320 px: en pausa el botón dice «Reanudar» (más largo): los dos rellenos laterales se aprietan para que el icono de Completar no se salga */
@media (max-width: 340px) {
  #screen-player #btnPause { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  #screen-player #btnComplete { padding-left: var(--sp-1); padding-right: var(--sp-1); }
}
/* solo por debajo de 300 px (no hay móviles así, pero no debe romperse) se apilan */
@media (max-width: 299px) {
  #screen-player .player-actions { grid-template-columns: minmax(0, 1fr); }
  #screen-player #btnComplete { order: -1; }
}

/* ---------- Cuenta previa ---------- */
#screen-player .session-countdown-label { color: var(--text-2); }

/* ---------- Alturas ----------
   Respaldo por escalones de viewport (navegadores sin unidades de contenedor)… */
@media (max-height: 760px) {
  #screen-player .player-video { height: 42%; }
}
@media (max-height: 700px) {
  #screen-player .player-video { height: 36%; }
  #screen-player .player-body { padding-top: var(--sp-3); }
  #screen-player #playerVisual .fig-wrap { padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: 30px; }
}
@media (max-height: 600px) {
  #screen-player .player-video { height: 30%; }
  #screen-player .player-ring-wrap { --ring: 80px; }
}
/* …y, donde existen, la altura del propio player (cqh): sirve igual en el móvil y en el marco de escritorio.
   El escenario ocupa lo que sobra tras el texto (≈4 líneas de instrucción), el anillo y el dock. */
@supports (height: 1cqh) {
  #screen-player .player { container-type: size; }
  #screen-player .player-video { height: clamp(150px, calc(87cqh - 300px), 50cqh); }
  #screen-player .player-ring-wrap { --ring: clamp(80px, 13.5cqh, 150px); }
  #screen-player .player-body { padding-top: var(--sp-4); }
}
@media (max-height: 700px) {
  #screen-player .player-body .cue { line-height: 1.4; margin-bottom: var(--sp-2); }
  #screen-player .player-body h2 { margin-bottom: var(--sp-1); }
}

/* teléfono en horizontal: escenario a la izquierda, cuerpo a la derecha */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #screen-player .player { flex-direction: row; }
  #screen-player .player-video { height: 100%; width: 46%; flex: 0 0 46%; }
  #screen-player .player-video::after {
    left: auto; top: 0; height: auto; width: 34%;
    background: linear-gradient(to right, transparent, var(--obsidian-black));
  }
  #screen-player .player-body { flex: 1; min-width: 0; padding-right: calc(var(--sp-6) + env(safe-area-inset-right)); }
  #screen-player .player-ring-wrap { --ring: 64px; }
  /* apaisado: dock compacto para no tapar el anillo del timer */
  #screen-player .player-dock { padding-top: var(--sp-2); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom)); }
  #screen-player .player-actions { margin-top: var(--sp-2); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  #screen-player .player-swipe { will-change: auto; }
  #screen-player .pip { transition: none; }
  #screen-player .player-ring-progress { transition: none; }
  #screen-player .player-dock::before { transition: none; }
}

/* con vídeo de YouTube el iframe se queda con los toques: dos franjas laterales (fuera de los botones superiores) permiten deslizar */
.player-edge { position: absolute; top: 64px; bottom: 0; width: 36px; z-index: 3; display: none; touch-action: pan-y; }
.player-edge-l { left: 0; }
.player-edge-r { right: 0; }
#playerStage:has(#playerVisual iframe) .player-edge { display: block; }

/* =====================================================================
   Detalles del ejercicio (hoja inferior) · pie de seguridad
   ===================================================================== */

/* fila "Siguiente · …" + botón Detalles */
#screen-player .player-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 36px;
  margin: calc(var(--sp-3) * -1) 0 var(--sp-2);
}
/* «Siguiente · Nombre» en una sola línea: el prefijo nunca se parte (nowrap) y, si el nombre no cabe,
   el ellipsis recorta el final del nombre. (El texto suelto del prefijo no se puede seleccionar por
   separado, así que la línea entera es un bloque nowrap con ellipsis; el prefijo va siempre primero.) */
#screen-player .player-subrow .player-next {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#screen-player .player-subrow .player-next:empty { display: none; }
#screen-player .player-details-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out-strong), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
#screen-player .player-details-btn[hidden] { display: none; }
#screen-player .player-details-btn svg { color: var(--text-2); }
/* zona táctil de 44 px sin cambiar el tamaño visual */
#screen-player .player-details-btn::after,
#screen-player .player-safe-link::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
#screen-player .player-details-btn:active { transform: scale(0.97); }
#screen-player .player-details-btn:focus-visible,
#screen-player .player-safe-link:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  #screen-player .player-details-btn:hover { background: var(--surface-2); border-color: var(--text-3); }
}

/* pie discreto */
#screen-player .player-safe {
  margin: var(--sp-2) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--text-3);
}
#screen-player .player-safe-link {
  position: relative;
  display: inline;
  padding: 0 var(--sp-1);
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--performance-blue-text, var(--text-2));
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- hoja ---------- */
.rd-sheet {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.rd-sheet[hidden] { display: none; }
.rd-sheet-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--obsidian-black) 68%, transparent);
  opacity: 0;
  transition: opacity 240ms ease;
}
.rd-sheet.open .rd-sheet-scrim { opacity: 1; }
.rd-sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 84%;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out-strong);
  outline: none;
}
.rd-sheet.open .rd-sheet-panel { transform: none; }
.rd-sheet-grab {
  flex: none;
  align-self: center;
  width: 36px; height: 4px;
  margin: var(--sp-2) 0 0;
  border-radius: var(--r-pill);
  background: var(--hairline-strong);
}
.rd-sheet-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-5);
}
.rd-sheet-heading { min-width: 0; padding-top: var(--sp-2); }
.rd-sheet-cap { margin: 0 0 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.rd-sheet-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-1);
  text-wrap: balance;
}
.rd-sheet-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out-strong), color var(--dur-fast) ease;
}
.rd-sheet-x:active { transform: scale(0.94); }
.rd-sheet-x:focus-visible,
.rd-sheet-link:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rd-sheet-x:hover { color: var(--text-1); } }
.rd-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: var(--sp-2) var(--sp-5) var(--sp-4);
}
.rd-sheet-body::-webkit-scrollbar { display: none; }
.rd-sheet-sec { padding: var(--sp-3) 0; }
.rd-sheet-sec + .rd-sheet-sec { border-top: 1px solid var(--hairline); }
.rd-sheet-sec h4 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-3);
}
.rd-sheet-sec p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-1); }
/* señales de parada: coral solo en el borde */
.rd-sheet-sec.is-stop {
  margin: var(--sp-2) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--module-advertencia);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-1);
}
.rd-sheet-sec.is-stop + .rd-sheet-sec { border-top: 0; }
.rd-sheet-sec.is-stop h4 { color: var(--text-1); }
.rd-sheet-note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); }
.rd-sheet-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.rd-sheet-foot:empty { display: none; }
.rd-sheet-foot p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.rd-sheet-link {
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--performance-blue-text, var(--text-1));
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) {
  .rd-sheet-scrim, .rd-sheet-panel { transition: none; }
}

/* =====================================================================
   Sesión sin tocar el teléfono · voz, lado, pausa para acomodarse, «No puedo hacerlo»
   ===================================================================== */

/* botón de voz: chip de cristal junto a «Salir» */
#screen-player .player-video .rd-voice-btn {
  position: absolute;
  z-index: 3;
  top: calc(var(--sp-3) + env(safe-area-inset-top));
  right: calc(var(--sp-3) + 44px + var(--sp-2));
  width: 44px; height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  background: color-mix(in srgb, var(--obsidian-black) 48%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--text-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out-strong);
}
#screen-player .player-video .rd-voice-btn[hidden] { display: none; }
#screen-player .player-video .rd-voice-btn.on {
  color: var(--text-1);
  border-color: color-mix(in srgb, var(--performance-blue) 60%, transparent);
  background: color-mix(in srgb, var(--performance-blue) 22%, var(--obsidian-black));
}
#screen-player .player-video .rd-voice-btn:active { transform: scale(0.92); }
#screen-player .player-video .rd-voice-btn:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
/* la etiqueta de fase deja sitio a los dos botones de la derecha */
#screen-player .player-video:has(.rd-voice-btn:not([hidden])) .module-tag {
  max-width: calc(100% - 140px - env(safe-area-inset-left));
}
@media (prefers-reduced-transparency: reduce) {
  #screen-player .player-video .rd-voice-btn { background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* «Lado 1 de 2»: pastilla sobre los pips, legible sobre la figura */
#screen-player .player-video .rd-side {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--sp-4) + 6px + var(--sp-2));
  transform: translateX(-50%);
  margin: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--recovery-teal) 45%, transparent);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  background: color-mix(in srgb, var(--obsidian-black) 70%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-1);
  white-space: nowrap;
  pointer-events: none;
}
#screen-player .player-video .rd-side[hidden] { display: none; }
#screen-player.rd-side-2 .player-video .rd-side { border-color: var(--recovery-teal); }
/* con la pastilla de lado, la figura deja sitio abajo; en escenarios bajos la pista «Sigue la descripción» cede su sitio */
#screen-player .player-video:has(.rd-side:not([hidden])) #playerVisual .fig-wrap { padding-bottom: 72px; }
@supports (container-type: size) {
  @container rdstage (max-height: 230px) {
    .player-video:has(.rd-side:not([hidden])) .fig-neutral-hint { display: none; }
  }
}
@media (max-height: 600px) {
  #screen-player .player-video:has(.rd-side:not([hidden])) .fig-neutral-hint { display: none; }
}

/* pausa guiada: tiempo para acomodarse y cambio de lado (misma capa que la cuenta previa) */
#screen-player .rd-pause { gap: var(--sp-3); }
#screen-player .rd-pause-cap {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--teal-text);
}
#screen-player .rd-pause-title {
  margin: 0;
  max-width: 320px;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-1);
  text-wrap: balance;
}
#screen-player .rd-pause-title[hidden] { display: none; }
#screen-player .rd-pause-num { margin: var(--sp-2) 0; }
#screen-player .rd-pause-hint { margin: 0; color: var(--text-2); max-width: 280px; }
#screen-player .rd-pause .btn { max-width: 320px; min-height: 48px; margin-top: var(--sp-2); }
@media (max-height: 600px) {
  #screen-player .rd-pause .session-countdown-num { font-size: 72px; }
}

/* pie del dock: «No puedo hacerlo» junto a «Señales de alerta» */
#screen-player .player-safe .player-cant-link { display: block; margin: var(--sp-1) auto 0; }
#screen-player .player-safe-link[hidden] { display: none; }

/* hoja: motivos y alternativa */
.rd-cant-lead { margin: 0 0 var(--sp-3); font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.rd-cant-opts { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.rd-cant-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out-strong), border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.rd-cant-opt .go-arrow { color: var(--text-3); font-size: var(--fs-lg); }
.rd-cant-opt:active { transform: scale(0.98); }
.rd-cant-opt:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rd-cant-opt:hover { border-color: var(--performance-blue); background: var(--surface-3); }
}
.rd-sheet-body .rd-cant-open { margin: var(--sp-3) 0 var(--sp-1); min-height: 48px; }
.rd-alt-meta { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
.rd-alt-actions { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-1); }
.rd-alt-actions .btn { min-height: 48px; }
.rd-alt-none { margin-top: 0; }
/* «Me molesta»: aviso de seguridad (coral SOLO aquí) */
.rd-sheet-sec.rd-cant-warn { margin-top: 0; }
.rd-sheet-sec.rd-cant-warn h4 { color: var(--coral-text); }
.rd-btn-stop {
  margin-top: var(--sp-3);
  min-height: 48px;
  background: transparent;
  color: var(--coral-text);
  border: 1px solid color-mix(in srgb, var(--module-advertencia) 60%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .rd-btn-stop:hover { background: color-mix(in srgb, var(--module-advertencia) 10%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  #screen-player .player-video .rd-voice-btn, .rd-cant-opt { transition: none; }
  #screen-player .rd-pause-num.pulse { animation: none; }
}

/* «¿Lo quitamos de tus próximas sesiones?» y Cuenta › Ejercicios que no quieres (rd-excluidos.js) */
.rd-excl { margin: 0 0 var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); }
.rd-excl-q { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.rd-excl .chip { min-height: 44px; }
.rd-excl-done { margin-top: var(--sp-2); }
/* coral solo para el aviso de molestias repetidas */
.rd-excl-pain {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--module-advertencia);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-1);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--coral-text);
}
.rd-excl-row { align-items: center; gap: var(--sp-3); }
.rd-excl-row .row-main { flex: 1; min-width: 0; }
.rd-excl-back { flex: 0 0 auto; width: auto; min-height: 40px; padding-inline: var(--sp-3); white-space: nowrap; }
.rd-excl-empty { padding: var(--sp-3) var(--sp-4); margin: 0; }
#rdExclList .rd-excl-pain { margin: var(--sp-3) var(--sp-4) var(--sp-1); }

/* Compartir sesión (rd-compartir.js): vista previa de la tarjeta y opciones */
#screen-feedback .fb-share { width: 100%; min-height: 48px; margin: var(--sp-4) 0 var(--sp-2); }
.sh-pad { display: flex; flex-direction: column; gap: var(--sp-3); }
.sh-pad .app-title { margin-bottom: 0; }
.sh-preview {
  align-self: center;
  width: min(100%, 300px);
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md, 16px);
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
}
.sh-preview[data-format="post"] { aspect-ratio: 4 / 5; width: min(100%, 340px); }
/* fondo transparente: tablero para que se vea qué parte queda vacía */
.sh-preview.is-clear {
  background-color: var(--graphite);
  background-image: linear-gradient(45deg, var(--hairline) 25%, transparent 25%, transparent 75%, var(--hairline) 75%),
    linear-gradient(45deg, var(--hairline) 25%, transparent 25%, transparent 75%, var(--hairline) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}
.sh-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* sticker: alto según el diseño, sobre el damero de «transparente» */
.sh-preview[data-format="sticker"] { aspect-ratio: auto; width: min(100%, 360px); height: auto; padding: var(--sp-3); }
.sh-preview[data-format="sticker"] img { height: auto; }
/* tinta oscura: el damero claro deja ver cómo queda sobre una foto clara */
.sh-preview.is-clear.is-ink-dark { background-color: var(--bone-white); }
.sh-sticker-opts, .sh-card-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.sh-sticker-opts[hidden], .sh-card-opts[hidden] { display: none; }
.sh-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.sh-opts .group-cap { margin: var(--sp-2) 0 0; }
.sh-opts .chip { min-height: 44px; }
.sh-photo-btn { min-height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-note { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); }
.sh-pad > .btn-blue { min-height: 52px; }

/* ---- sesión guardada sin conexión (cola) y borrar historial ---- */
.rd-cola-aviso {
  position: fixed; left: var(--sp-4); right: var(--sp-4);
  bottom: calc(100px + env(safe-area-inset-bottom, 0px)); /* encima de la barra de navegación */
  z-index: 60; margin: 0 auto; max-width: 420px;
  padding: var(--sp-3) var(--sp-4); border-radius: 14px;
  background: var(--surface-3); color: var(--text-1); border: 1px solid var(--hairline);
  font-size: var(--fs-sm); line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
#screen-account .rd-history-zone .btn { margin-top: 0; }
#screen-account .rd-history-zone .acc-danger-confirm { margin-top: var(--sp-3); }