/* =====================================================================
   RANGO — Vista y sesión
   · html.rd-big-text: cuerpo de 18 px y títulos en proporción (toda la app usa la escala --fs-*).
   · html.rd-big-btn: botones de 52–56 px de alto y más separación.
   · html.rd-simple: las dos anteriores + menos adornos + textos grises importantes con más contraste.
   · Bloque «Vista y sesión» de Cuenta y cronómetro con controles bajo el tiempo.
   Va ANTES de rd-responsivo.css. Solo tokens.
   ===================================================================== */

/* ---------- 1. Texto más grande ---------- */
html.rd-big-text {
  --fs-micro: 13px;
  --fs-sm: 16px;
  --fs-body: 18px;
  --fs-lg: 20px;
  --fs-title: 26px;
  --fs-screen: 34px;
  --fs-metric: 60px;
}
html.rd-big-text body { font-size: var(--fs-body); }
html.rd-big-text .stat-card b { font-size: 34px; }
html.rd-big-text #screen-account .paymethod-row { flex-wrap: wrap; row-gap: var(--sp-2); }
html.rd-big-text .row-sub,
html.rd-big-text .acc-note,
html.rd-big-text .detail-row { line-height: 1.5; }
/* el número del player crece con el anillo; la etiqueta de paso puede partirse en dos líneas */
html.rd-big-text #screen-player .player-step { letter-spacing: 0; }
/* pastillas de estado que pasan a dos líneas: radio de tarjeta en vez de píldora */
html.rd-big-text #screen-dashboard .today-status { padding-top: var(--sp-1); padding-bottom: var(--sp-1); border-radius: var(--r-sm); line-height: 1.3; }
/* barra de pestañas: en teléfonos estrechos manda rd-responsivo.css (10 px, con ellipsis);
   de 375 a 767 px la etiqueta se queda en 12 px para que las 4–5 pestañas no se pisen */
@media (min-width: 375px) and (max-width: 767px) {
  html.rd-big-text .tab { font-size: 12px; }
}

/* ---------- 2. Botones más grandes ---------- */
html.rd-big-btn .btn { min-height: 54px; padding-top: 14px; padding-bottom: 14px; }
html.rd-big-btn .btn + .btn { margin-top: var(--sp-3); }
html.rd-big-btn .player-actions .btn + .btn,
html.rd-big-btn .rd-alt-actions .btn + .btn { margin-top: 0; }
html.rd-big-btn .chip { min-height: 52px; padding-left: var(--sp-5); padding-right: var(--sp-5); }
html.rd-big-btn .chip-row { gap: var(--sp-3); }
html.rd-big-btn .row-action,
html.rd-big-btn .row { min-height: 60px; }
html.rd-big-btn .wiz-back { min-width: 52px; min-height: 52px; }
html.rd-big-btn select,
html.rd-big-btn .admin-select,
html.rd-big-btn .timer-num-input,
html.rd-big-btn .field input { min-height: 52px; }
html.rd-big-btn .tab { min-height: 52px; }
/* player: dock con botones de 56 px; los chips de cristal y «Detalles» llegan a 52 px de zona táctil */
html.rd-big-btn #screen-player .player-actions { gap: var(--sp-3); }
html.rd-big-btn #screen-player .player-actions .btn { min-height: 56px; }
html.rd-big-btn #screen-player .player-video .close-x,
html.rd-big-btn #screen-player .player-video .rd-voice-btn { width: 52px; height: 52px; }
html.rd-big-btn #screen-player .player-video .rd-voice-btn { right: calc(var(--sp-3) + 52px + var(--sp-2)); }
html.rd-big-btn #screen-player .player-video:has(.rd-voice-btn:not([hidden])) .module-tag { max-width: calc(100% - 156px - env(safe-area-inset-left)); }
html.rd-big-btn #screen-player .player-details-btn { min-height: 44px; }
html.rd-big-btn #screen-player .player-details-btn::after,
html.rd-big-btn #screen-player .player-safe-link::after { width: max(100%, 52px); height: max(100%, 52px); }
html.rd-big-btn #screen-player .player-safe { margin-top: var(--sp-3); }
html.rd-big-btn .rd-sheet-x { width: 52px; height: 52px; }
html.rd-big-btn .rd-sheet-link { min-height: 52px; }
html.rd-big-btn .rd-cant-opt { min-height: 60px; }
html.rd-big-btn .rd-cant-opts { gap: var(--sp-3); }
html.rd-big-btn .rd-alt-actions { gap: var(--sp-3); }
html.rd-big-btn .rd-alt-actions .btn,
html.rd-big-btn .rd-btn-stop,
html.rd-big-btn #screen-player .rd-pause .btn,
html.rd-big-btn .session-countdown .btn { min-height: 56px; }
/* botones de icono del cronómetro: 52 px, uno a cada esquina para no tapar la etiqueta de fase */
html.rd-big-btn .timer-fs-btn { width: 52px; height: 52px; }
html.rd-big-btn #timerRecBtn { right: auto !important; left: 14px; }
html.rd-big-btn .timer-display-card #timerPhaseLabel { padding: 0 60px; min-height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; }
/* chips y botones de icono con alto propio en otras áreas: :is(#id) iguala su especificidad */
html.rd-big-btn :is(#screen-dashboard, #screen-feedback, #screen-wizard, #screen-session, #screen-prepare, #screen-recovery, #screen-account, #screen-timer) .chip { min-height: 52px; }
html.rd-big-btn .account-btn { min-width: 52px; min-height: 52px; }
html.rd-big-btn #trendChartWrap .pro-lock,
html.rd-big-btn .hist-limit .pro-lock { min-height: 52px; }
html.rd-big-btn .rd-tfold-sum { min-height: 60px; }
/* 320 px: con botones grandes «Pausar» y «Completar ejercicio» se apilan en vez de apretarse */
@media (max-width: 359px) {
  html.rd-big-btn #screen-player .player-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sp-2); }
  html.rd-big-btn #screen-player #btnComplete { font-size: var(--fs-sm); }
}

/* ---------- 3. Vista sencilla: menos adornos, más contraste ---------- */
html.rd-simple {
  --text-2: color-mix(in srgb, var(--bone-white) 88%, transparent);
  --text-3: color-mix(in srgb, var(--bone-white) 76%, transparent);
  --inner-glow: 0 0 0 0 transparent;
}
/* textos grises importantes con color fijo en la base */
html.rd-simple .detail-row,
html.rd-simple .today-card p,
html.rd-simple .player-body .cue,
html.rd-simple .session-countdown-label,
html.rd-simple .fig-neutral-hint { color: var(--text-2); }
html.rd-simple .player-step,
html.rd-simple .row-sub,
html.rd-simple .row-value,
html.rd-simple .group-title,
html.rd-simple .greet-cap { color: var(--text-2); }
/* fuera brillos y decoraciones que no informan */
html.rd-simple body { background: var(--surface-0); }
html.rd-simple .card-hero::before,
html.rd-simple .admin-hero-tile::before,
html.rd-simple #screen-player .player-dock::before { display: none; }
html.rd-simple #screen-player .player-video { background: var(--surface-player); }
html.rd-simple .btn-blue { background: var(--performance-blue); background: color-mix(in srgb, var(--performance-blue) 86%, black); }
html.rd-simple .fig-neutral svg,
html.rd-simple .fig-neutral-hint { display: none; }
/* teléfono bajo: la etiqueta de paso cede su línea (los pips y la pausa ya dicen «2 de 4») */
@media (max-height: 640px) {
  html.rd-simple #screen-player .player-step { display: none; }
}
/* chips de cristal opacos: más legibles sobre la figura */
html.rd-simple #screen-player .player-video .module-tag,
html.rd-simple #screen-player .player-video .close-x,
html.rd-simple #screen-player .player-video .rd-voice-btn:not(.on),
html.rd-simple #screen-player .player-video .rd-side {
  background: var(--surface-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--hairline-strong);
}
html.rd-simple #screen-player .player-video .rd-side { border-color: var(--recovery-teal); }

/* ---------- 4. Cuenta · «Vista y sesión» ---------- */
#screen-account .rd-viewprefs .rd-pref { align-items: center; }
#screen-account .rd-viewprefs .row-sub { color: var(--text-2); line-height: 1.45; }
#screen-account .rd-viewprefs .rd-pref[hidden] { display: none; }
#screen-account .rd-viewprefs .rd-pref:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: -2px; }
.rd-switch {
  position: relative;
  flex: none;
  width: 46px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  transition: background-color var(--dur-base) ease;
}
.rd-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform var(--dur-base) var(--ease-out-strong), background-color var(--dur-base) ease;
}
[aria-checked="true"] > .rd-switch { background: var(--performance-blue); box-shadow: none; }
[aria-checked="true"] > .rd-switch::after { transform: translateX(18px); background: var(--bone-white); }
#screen-account .rd-pref-settle { align-items: flex-start; }
#screen-account .rd-settle-chips { margin-top: var(--sp-3); }
#screen-account .rd-settle-chips .chip { min-width: 60px; }
html.rd-big-btn .rd-switch { width: 56px; height: 34px; }
html.rd-big-btn .rd-switch::after { width: 28px; height: 28px; }
html.rd-big-btn [aria-checked="true"] > .rd-switch::after { transform: translateX(22px); }

/* ---------- 5. Cronómetro: tiempo + Empezar/Pausar siempre a la vista ---------- */
#screen-timer .timer-display-card { margin-bottom: 0; }
#screen-timer .rd-tctl {
  margin-top: var(--sp-3);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-2);
}
#screen-timer .rd-tctl .btn { width: 100%; margin: 0; }
html.rd-big-btn #screen-timer .rd-tctl { gap: var(--sp-3); }
.phone.timer-immersive #screen-timer .rd-tctl { grid-template-columns: minmax(0, 1fr); }
#screen-timer .rd-tamrap { margin-top: var(--sp-3); }
#screen-timer .rd-tamrap[hidden] { display: none; }
/* el anillo cede altura en pantallas bajas para que los controles entren sin desplazar */
#screen-timer .timer-ring-wrap {
  width: min(220px, 60vmin, calc(100vh - 380px));
  height: min(220px, 60vmin, calc(100vh - 380px));
  min-width: 132px; min-height: 132px;
}
@supports (height: 1dvh) {
  #screen-timer .timer-ring-wrap {
    width: min(220px, 60vmin, calc(100dvh - 380px));
    height: min(220px, 60vmin, calc(100dvh - 380px));
  }
}
#screen-timer .timer-big-num { font-size: clamp(2rem, 11vmin, 3.6rem); }
@media (max-height: 640px) {
  #screen-timer .timer-display-card { padding-top: var(--sp-4); padding-bottom: var(--sp-3); }
  #screen-timer .timer-ring-wrap { margin-top: var(--sp-1); }
  #screen-timer .app-title { margin-bottom: var(--sp-3); }
}
.phone.timer-immersive #screen-timer .timer-ring-wrap { width: min(78vmin, 340px); height: min(78vmin, 340px); }

/* sección plegable con modo, preparación y tiempos */
#screen-timer .rd-tfold {
  margin-top: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--inner-glow);
}
#screen-timer .rd-tfold-sum {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-md);
  touch-action: manipulation;
}
#screen-timer .rd-tfold-sum::-webkit-details-marker { display: none; }
#screen-timer .rd-tfold-sum:focus-visible { outline: 2px solid var(--performance-blue); outline-offset: 2px; }
#screen-timer .rd-tfold-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#screen-timer .rd-tfold-t { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
#screen-timer .rd-tfold-v { font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-timer .rd-tfold-chev { flex: none; color: var(--text-2); transition: transform var(--dur-base) var(--ease-out-strong); }
#screen-timer .rd-tfold[open] .rd-tfold-chev { transform: rotate(180deg); }
#screen-timer .rd-tfold-body { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--hairline); }
#screen-timer .rd-tfold-cap { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
#screen-timer .rd-tfold-body .seg { flex-wrap: wrap; }
#screen-timer .rd-tfold-prep { flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
#screen-timer .rd-tfold-body .timer-config { margin: var(--sp-3) 0 0; background: var(--surface-2); }
#screen-timer .rd-tfold-body .admin-field-row { flex-wrap: wrap; gap: var(--sp-2); }
#screen-timer .rd-tfold-body .admin-select { max-width: 100%; }
/* deja hueco a la barra de pestañas del teléfono */
@media (max-width: 767px) {
  #screen-timer .screen-pad { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .rd-switch, .rd-switch::after, #screen-timer .rd-tfold-chev { transition: none; }
}