/* =====================================================================
   RANGO — área NAV: 4 destinos, Inicio, Sesiones, asistente «¿Qué harás hoy?»
   y 6 zonas grandes. Solo tokens de design/tokens.css (+ color-mix sobre tokens).
   Se carga antes de rd-responsivo.css; gana por especificidad.
   ===================================================================== */

/* ---------- 1. Dock: etiquetas legibles (≥ 12 px) ---------- */
@media (max-width: 1099px) {
  .tabbar .tab { font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 767px) {
  .tabbar .tab { gap: 3px; }
  .tabbar .tab svg { width: 22px; height: 22px; }
}
@media (max-width: 374px) {
  .tabbar .tab { font-size: 12px; padding-inline: 1px; }
  .tabbar .tab span { text-overflow: clip; }
}

/* ---------- 2. Volver con texto ---------- */
.wiz-back.rd-back,
#screen-wizard .wiz-back.rd-back,
.sec-screen .wiz-back.rd-back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  width: auto; height: 44px; min-width: 44px;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  color: var(--text-1);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1;
  flex-shrink: 0;
}
.wiz-back.rd-back > span[aria-hidden] { font-size: var(--fs-lg); line-height: 1; }
.wiz-back.rd-back:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .wiz-back.rd-back:hover { border-color: color-mix(in srgb, var(--performance-blue) 50%, transparent); }
}
.rd-rec-top { padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-5) 0; }
.rd-rec-top + .recovery-hero { padding-top: var(--sp-4); }

/* ---------- 3. Inicio ---------- */
#screen-dashboard .rd-today { margin-bottom: var(--sp-4); }
#screen-dashboard .rd-today h2 {
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--text-1);
  margin: 0 0 var(--sp-2);
}
#screen-dashboard .rd-today .rd-today-meta {
  font-size: var(--fs-body); line-height: 1.45; color: var(--text-2);
  margin: 0 0 var(--sp-5);
}
#screen-dashboard .rd-btn-xl { min-height: 56px; font-size: var(--fs-lg); font-weight: 700; }
.rd-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: var(--sp-2);
  background: none; border: 0; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  color: var(--performance-blue-text, var(--text-2));
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.rd-sport-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.rd-sport-pick[hidden] { display: none; }
.rd-sport-pick .chip { min-height: 44px; }

.rd-quick {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.rd-quick-btn {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); min-width: 0; min-height: 96px;
  padding: var(--sp-3);
  background: var(--surface-1); color: var(--text-1);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  box-shadow: var(--inner-glow);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1.25; text-align: left;
  cursor: pointer; touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-out-strong), border-color var(--dur-base) ease;
}
.rd-quick-btn:active { transform: scale(0.97); }
.rd-q-txt { overflow-wrap: anywhere; hyphens: auto; }
.rd-q-ic {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--performance-blue) 16%, transparent); color: var(--performance-blue-text, var(--performance-blue));
}
.rd-q-post .rd-q-ic { background: color-mix(in srgb, var(--recovery-teal) 16%, transparent); color: var(--teal-text); }
.rd-q-daily .rd-q-ic { background: color-mix(in srgb, var(--bone-white) 8%, transparent); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) {
  .rd-quick-btn:hover { border-color: color-mix(in srgb, var(--performance-blue) 45%, transparent); }
}
@media (max-width: 359px) {
  .rd-quick { grid-template-columns: minmax(0, 1fr); }
  .rd-quick-btn { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 56px; }
}

#screen-dashboard .rd-week { margin-bottom: var(--sp-4); }
#screen-dashboard .rd-week[hidden] { display: none; }
.rd-week-line { font-size: var(--fs-body); color: var(--text-2); margin: 0; }
.rd-week-line b { font-family: var(--font-display); font-size: var(--fs-title); color: var(--teal-text); font-variant-numeric: tabular-nums; }
#screen-dashboard .rd-week .week-track { margin-top: var(--sp-3); }

#screen-dashboard .rd-weekly-mini {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--surface-1); border: 1px solid var(--hairline);
}
#screen-dashboard .rd-weekly-mini .card-cap { color: var(--text-3); margin-bottom: var(--sp-1); }
#screen-dashboard .rd-weekly-mini h3 { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; color: var(--text-1); margin: 0 0 2px; }
.rd-weekly-meta { font-size: var(--fs-sm); color: var(--text-3); margin: 0; line-height: 1.4; }
#screen-dashboard .rd-weekly-btn { margin: 0; min-height: 48px; }
@media (min-width: 600px) {
  #screen-dashboard .rd-weekly-mini { flex-direction: row; align-items: center; justify-content: space-between; }
  #screen-dashboard .rd-weekly-btn { width: auto; flex: none; padding: 0 var(--sp-5); }
}

/* ---------- 4. Sesiones ---------- */
.rd-seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 4px; margin: 0 0 var(--sp-4);
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-md);
}
.rd-seg-btn {
  min-width: 0; min-height: 48px; padding: var(--sp-1) var(--sp-2);
  background: transparent; border: 0; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  color: var(--text-2); text-align: center; overflow-wrap: anywhere;
  cursor: pointer; touch-action: manipulation;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.rd-seg-btn.active {
  color: var(--text-1);
  background: color-mix(in srgb, var(--performance-blue) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--performance-blue) 45%, transparent);
}
.rd-seg-panel[hidden] { display: none; }
.rd-seg-panel .mode-card { align-items: flex-start; }
.rd-seg-panel .mode-card > div > span { display: block; font-size: var(--fs-body); line-height: 1.45; color: var(--text-2); }
.rd-seg-panel .mode-card .rd-mode-cta {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-3); font-style: normal; font-weight: 700; font-size: var(--fs-body);
  color: var(--performance-blue-text, var(--performance-blue));
}
.rd-seg-panel .mode-card .rd-mode-cta span { color: inherit; font-size: inherit; }
.rd-seg-panel .mode-post .rd-mode-cta { color: var(--teal-text); }
.rd-seg-panel .mode-rehab .rd-mode-cta { color: var(--text-1); }
.rd-row-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 52px; padding: 0 var(--sp-4); margin-bottom: var(--sp-3);
  background: var(--surface-1); color: var(--text-1);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; text-align: left;
  cursor: pointer;
}
.rd-group-title { margin-top: var(--sp-6); }

/* ---------- 5. Asistente: ¿Qué harás hoy? ---------- */
.rd-cat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 600px) { .rd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opt.rd-cat {
  --ck: 18px; --ck-o: 10px;
  flex-direction: row; align-items: center; gap: var(--sp-3);
  min-height: 76px; padding: var(--sp-3) 44px var(--sp-3) var(--sp-4);
}
.rd-cat-ic {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bone-white) 6%, transparent); color: var(--text-2);
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.opt.rd-cat.sel .rd-cat-ic { background: color-mix(in srgb, var(--performance-blue) 18%, transparent); color: var(--performance-blue-text, var(--performance-blue)); }
.rd-cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-cat .opt-sub, .rd-opt-2l .opt-sub { font-size: var(--fs-sm); }

.rd-sub { margin-top: var(--sp-5); }
.rd-sub[hidden] { display: none; }
#screen-wizard .rd-sub .group-cap { margin: 0 0 var(--sp-3); }
.opt-grid.rd-opt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.opt.rd-opt-text {
  --ck: 14px; --ck-o: 6px;
  align-items: center; min-height: 52px;
  padding: var(--sp-2) 26px var(--sp-2) var(--sp-3);
  font-size: var(--fs-body); overflow-wrap: anywhere;
}
.opt.rd-opt-2l { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 64px; }
.opt.rd-opt-2l .opt-title { font-size: var(--fs-body); }
#navDailyGrid.rd-opt-list { grid-template-columns: minmax(0, 1fr); }

/* desplegables (Movimiento específico / Elegir zona específica) */
.rd-disclose {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  margin: var(--sp-4) 0 0;
  background: var(--surface-1); color: var(--text-1);
  border: 1px dashed var(--hairline-strong); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.rd-disclose[hidden] { display: none; }
.rd-disclose-txt { flex: 1; min-width: 0; }
.rd-disclose-txt small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.rd-chev { flex: none; color: var(--text-3); transition: transform var(--dur-base) var(--ease-out-strong); }
.rd-disclose[aria-expanded="true"] .rd-chev { transform: rotate(180deg); }
.rd-disclose[aria-expanded="true"] { border-style: solid; }
.rd-disclose-panel { margin-top: var(--sp-3); }
.rd-disclose-panel[hidden] { display: none; }
.rd-disclose-panel .search { margin-bottom: var(--sp-3); }

/* candado Pro: visible solo cuando la opción está bloqueada para este plan */
.rd-lock {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-style: normal; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em;
  color: var(--activation-lime);
  background: color-mix(in srgb, var(--activation-lime) 14%, transparent);
}
.rd-lock svg { margin-right: 0 !important; }
[data-pro][data-locked="0"] .rd-lock { display: none; }
.opt-time .rd-lock-mini { padding: 1px 6px; margin-top: 2px; }

/* movimientos de gimnasio: nombre en español y el inglés debajo */
#moveGrid .mv-en { display: block; margin-top: 2px; font-size: var(--fs-micro); font-weight: 500; color: var(--text-3); }

/* ---------- 6. Zonas grandes ---------- */
.rd-bigzone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 600px) { .rd-bigzone-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opt.rd-bz {
  --ck: 16px; --ck-o: 8px;
  flex-direction: row; align-items: center; gap: var(--sp-3);
  min-height: 72px; padding: var(--sp-2) 28px var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
}
.rd-bz-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.opt.rd-bz-none { grid-column: 1 / -1; min-height: 52px; justify-content: center; text-align: center; color: var(--text-2); }
.bz-fig { flex: none; }
.bz-base { stroke: var(--text-3); stroke-width: 2; }
.bz-hl { stroke: color-mix(in srgb, var(--performance-blue) 70%, var(--surface-1)); stroke-width: 3.4; }
.bz-hl .bz-dot { fill: color-mix(in srgb, var(--performance-blue) 70%, var(--surface-1)); stroke: none; }
.opt.rd-bz.sel .bz-hl { stroke: var(--performance-blue); }
.opt.rd-bz.sel .bz-hl .bz-dot { fill: var(--performance-blue); }

/* ---------- 7. Tiempo: 3 + 3 (gratis arriba, Pro abajo) ---------- */
#timeGroup.opt-grid-time { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#timeGroup .opt-time { min-height: 72px; }

/* equipo: «Mancuernas» se partía a mitad de palabra sin guion a 320 px */
#eqGroup .opt-eq .opt-label { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* equipo con candado: en 2 columnas la insignia «Pro» no cabe junto al nombre (se partía letra a letra);
   basta el candado de la esquina que pone RdPro.lock */
#eqGroup .opt-eq .rd-lock-mini { display: none; }
#eqGroup .opt-eq .opt-label { min-width: 0; flex: 1 1 auto; }
@media (max-width: 374px) {
  #eqGroup .opt-eq { gap: var(--sp-2); padding-left: var(--sp-2); padding-right: var(--sp-2); }
  #eqGroup .opt-eq .row-icon { width: 28px; height: 28px; }
  #eqGroup .opt-eq .opt-label { font-size: var(--fs-sm); letter-spacing: -0.01em; }
}

/* CTA fijo del asistente: en teléfonos estrechos el relleno lateral es 16 px (rd-responsivo);
   el margen negativo de 20 px desbordaba 4 px por cada lado */
@media (max-width: 374px) {
  #screen-wizard .wiz-cta { margin-left: calc(var(--sp-4) * -1); margin-right: calc(var(--sp-4) * -1); padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ---------- 8. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .rd-quick-btn, .rd-seg-btn, .rd-chev, .rd-cat-ic { transition: none; }
  .rd-quick-btn:active, .wiz-back.rd-back:active { transform: none; }
}