/* ═══════════════════════════════════════════════════════════════════════════
   ARETÉ — hoja única, servida tal cual (sin build step).

   CAPAS. El orden de abajo es el orden de la cascada, y es lo único que decide
   quién gana cuando dos reglas empatan en especificidad. Deja de importar quién
   está más abajo en el fichero, que es lo que hacía falta para poder reordenar
   sin miedo — y la razón por la que las capas no se introdujeron en la fase 1:
   una regla dentro de una capa pierde SIEMPRE contra una sin capa, así que
   meterlas a medias habría invertido la cascada de todo lo que se moviera.
   Ahora no queda nada fuera y entran de una vez.

     tokens      primitivos, semánticos y escalas. Ningún selector real.
     base        el reset, los selectores de elemento y las cuatro utilidades
                 de layout que quedan.
     sistema     los componentes: botón, panel, tile, fila, campo, hoja, chip,
                 badge, segmentado, cabecera de pantalla.
     pantallas   lo propio de cada pantalla. Gana al sistema por definición: una
                 pantalla ajusta su componente, nunca al revés.
     escritorio  todo lo que vive dentro de un min-width. Gana a lo anterior
                 porque es una decisión tomada con más información, no una
                 excepción.
     overrides   lo que manda por encima de todo: prefers-reduced-motion, los
                 estados de puntero y las barras de scroll.

   Regla de oro: si necesitas un valor que no es un token, o falta el token o el
   diseño está mal. El documento del sistema es DESIGN_SYSTEM.md.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer vendor, tokens, base, sistema, pantallas, escritorio, overrides;

/* La hoja de Material Symbols trae su propia base para .material-symbols-outlined
   (display y font-size:24px). Venía por <link>, es decir SIN capa, y una regla sin
   capa gana siempre a una con capa: se comía las 20 reglas de tamaño de icono de
   este fichero y la container query del segmentado Fuerza/Carrera. Entra por
   @import en `vendor`, la primera capa, para que quede debajo de todo lo nuestro. */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0") layer(vendor);

@layer tokens {

:root.dark nav{background:rgba(19,19,19,.6);box-shadow:var(--shadow-3)}
:root.dark header{background:rgba(19,19,19,.4)}
:root.dark body{-webkit-font-smoothing:auto}
:root.dark select,:root.dark input[type="date"],:root.dark input[type="number"],:root.dark input[type="text"],:root.dark textarea{color-scheme:dark}
:root.dark .timer-start{color:var(--color-on-fill)}
:root.dark #shareCard{background:linear-gradient(145deg,#201f1f 0%,#131313 100%)}
:root.dark .run-share-card{background:linear-gradient(145deg,#201f1f 0%,#131313 100%)}
:root.dark .card-brand{color:var(--color-text-secondary)}
:root.dark .quiron-header{background:rgba(19,19,19,.4)}
:root.dark .q-assistant{background:var(--color-surface-2)}
:root.dark .q-code{background:rgba(0,0,0,.35)}
:root.dark .q-chip{background:var(--color-surface-2)}
:root.dark .q-proposal{background:var(--color-surface-2)}
:root.dark .q-prop-detail{background:rgba(0,0,0,.25)}

}

@layer base {

/* ── 1.2 SEMÁNTICOS · tema claro ────────────────────────────────────────────
   CONTRASTE MEDIDO (WCAG 2.1, ratio real con el alfa compuesto sobre cada
   fondo; fondos: bg #f4f2f0 · surface #fff · surface2 #ebe8e5 · high #f0eeeb):

     --color-text-primary   15,39 · 17,19 · 14,08 · 14,84   (AA y AAA)
     --color-text-secondary  4,96 ·  5,34 ·  4,68 ·  4,85   (AA de texto)
     --color-text-tertiary   3,36 ·  3,53 ·  3,23 ·  3,30   (AA no textual)
     --color-action-primary  4,29 ·  4,79 ·  3,93 ·  4,14
     blanco sobre la acción primaria: 4,79 (AA)

   El alfa .80/.64 de secondary/tertiary está calibrado al límite: con .78 el
   secundario caía a 4,46 sobre surface2 y fallaba por tres centésimas justo en
   las tarjetas. Si tocas un color, vuelve a medir y escribe la cifra aquí. */
:root{
  --color-surface-0:var(--sand-50);       /* lienzo de la página */
  --color-surface-1:var(--sand-0);        /* tarjeta, panel */
  --color-surface-2:var(--sand-200);      /* campo, chip, pista */
  --color-surface-3:var(--sand-100);      /* hover de una superficie 1 */
  --color-surface-glass:rgba(255,255,255,.75);
  --color-text-primary:var(--brown-900);
  --color-text-secondary:rgba(var(--brown-700-rgb),.80);
  --color-text-tertiary:rgba(var(--brown-700-rgb),.64);
  --color-text-inverse:var(--sand-0);
  --color-border-subtle:rgba(92,68,64,.08);
  --color-border-ghost:rgba(0,0,0,.06);
  /* Acción. Dos tokens y no uno: el relleno del botón y el acento tipográfico
     tienen requisitos de contraste opuestos, y en oscuro divergen (§1.3). */
  --color-action-primary:var(--red-600);       /* relleno del botón primario */
  --color-action-primary-fg:var(--sand-0);     /* texto sobre ese relleno */
  --color-accent-text:var(--red-600);          /* acento como texto o icono */
  --color-accent-soft:var(--red-200);
  --color-accent-wash:rgba(var(--red-600-rgb),.08);   /* fondo teñido */
  --color-accent-glow:rgba(var(--red-500-rgb),.12);   /* sombra de la acción */
  --color-state-success:var(--green-600);
  --color-state-danger:var(--crimson-600);
  --color-state-warning:var(--amber-700);
  --color-state-info:var(--cyan-600);
  /* Dominio: fuerza es la marca, carrera es el cian. No son estados. */
  --color-domain-strength:var(--red-600);
  --color-domain-running:var(--cyan-600);
  --color-scrim:rgba(0,0,0,.5);
  --color-focus-ring:rgba(var(--red-600-rgb),.3);
  /* Texto e iconos SOBRE un relleno saturado (acento, éxito, error, zona de
     pulso). Es blanco en los dos temas a propósito: no es "el color inverso del
     texto" —ése cambia con el tema— sino el que contrasta contra un color
     saturado, y esos no se aclaran en modo oscuro. */
  --color-on-fill:var(--sand-0);
  --color-accent-wash-strong:rgba(var(--red-600-rgb),.16);
  /* Fondos teñidos de estado: la forma de marcar una tarjeta o una fila sin
     recurrir nunca a una barra de acento lateral. */
  --color-success-wash:rgba(22,163,74,.12);
  --color-danger-wash:rgba(220,38,38,.10);
  --color-info-wash:rgba(8,145,178,.12);
  --color-warning-wash:rgba(161,98,7,.12);
  /* Paleta CATEGÓRICA de los modos de ejercicio (EMOM, superserie, escalera,
     workout…). No son estados ni dominios: son categorías sin orden, y por eso
     tienen su propia familia. Se usan solo como texto sobre su propio wash, que
     es donde una etiqueta de categoría informa sin gritar. */
  --cat-violet:#7b3fb8; --cat-violet-wash:rgba(123,63,184,.10);
  --cat-orange:#b45309; --cat-orange-wash:rgba(180,83,9,.10);
  --cat-amber:#a16207;  --cat-amber-wash:rgba(161,98,7,.12);
  --cat-indigo:#4340c4; --cat-indigo-wash:rgba(67,64,196,.10);
  /* La pantalla de bloqueo de la carrera es negra de verdad: se usa para que la
     pantalla del móvil no consuma batería en el bolsillo. No sigue el tema. */
  --color-blackout:#000;
  --color-blackout-text:#5a5a5a;
  --color-blackout-hint:#464646;
  /* El editor de compartir es una superficie OSCURA en los dos temas: encima se
     previsualiza una imagen, y un lienzo claro falsearía cómo va a quedar. Por
     eso tiene su propia familia y no sigue --color-surface-*. */
  --color-overlay-scrim:rgba(0,0,0,.92);
  --color-overlay-1:rgba(255,255,255,.06);
  --color-overlay-2:rgba(255,255,255,.1);
  --color-overlay-3:rgba(255,255,255,.2);
  --color-overlay-text:rgba(255,255,255,.6);
  --color-overlay-text-dim:rgba(255,255,255,.5);
  /* La pista de que queda tabla por ver hacia ese lado. */
  --color-scroll-cue:rgba(0,0,0,.10);
  /* Las dos tarjetas de compartir son una IMAGEN que se exporta y se manda por
     WhatsApp: se dibujan claras en los dos temas a propósito, porque la ve
     alguien que no tiene tu tema puesto. Es la única excepción declarada al
     sistema de superficies, y por eso sus gradientes van con literales. */
  --share-card-from:#fff;
  --share-card-to:#f4f2f0;
  --share-card-run-to:#f0f2f8;
}
/* ── 1.6 SHELL Y MEDIDAS ────────────────────────────────────────────────────
   Geometría de la shell. Todo lo que dependa del ancho del contenido o de la
   altura/anchura de la navegación va por estas variables: el ancho estaba
   escrito a mano en seis sitios y cualquier cambio dejaba descentrados los
   elementos fijos (.detail-btn-bar, .share-editor-overlay, nav).
   Los valores por breakpoint están en "Escritorio: shell y rail".
   --rail-w es también de dónde sale el colapso del rail: nadie escribe 232 ni
   64 a mano en ningún sitio. */
:root{
  --shell:100%;--nav-h:84px;--rail-w:0px;
  --rail-w-open:232px;--rail-w-icon:64px;
  /* Medidas máximas por tipo de contenido: no todo debe ocupar la shell. */
  --measure-prose:46rem;   /* texto seguido: 45-75 caracteres */
  --measure-form:520px;    /* un formulario no se ensancha nunca */
  --measure-panel:560px;   /* filas etiqueta-valor y series */
  --measure-table:100%;    /* una tabla vale más cuantas más columnas se vean */
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
/* `hidden` es el interruptor del sistema para ocultar algo, y hasta ahora no
   funcionaba: la regla del navegador es display:none con especificidad cero, así
   que cualquier `display:flex` de una clase la ganaba. Se veía en
   `.quiron-setup[hidden]{display:none}`, un parche puntual para el mismo
   problema. Con esto, `el.hidden = true` oculta de verdad en toda la app y deja
   de hacer falta manosear `style.display` desde JS. */
[hidden]{display:none!important}
body{font-family:var(--font);background:var(--color-surface-0);color:var(--color-text-primary);min-height:100dvh;padding-bottom:var(--nav-h);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
nav{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl) var(--radius-xl) 0 0;display:flex;z-index:var(--z-nav);padding:8px 8px 0;padding-bottom:max(8px,env(safe-area-inset-bottom))}
nav button{flex:1;background:none;border:none;color:var(--color-text-secondary);padding:6px 4px 4px;font-family:var(--font);font-size:var(--fs-xs);font-weight:500;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:all var(--dur-base);border-radius:var(--radius-lg)}
nav button svg{width:24px;height:24px;stroke-width:1.8}
header{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;background:var(--color-surface-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:var(--z-header)}
header h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
header h1 span{color:var(--color-accent-text)}
/* La .context-bar ya no existe: sus chips viven en la cabecera de la pantalla
   (.page-head-ctx). Era estado disfrazado de barra de navegación, y sticky. */
.section{display:none;padding:16px 20px}
.section.active{display:block;animation:fadeIn var(--dur-base) ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
label{display:block;font-size:var(--fs-base);color:var(--color-text-secondary);margin-bottom:5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
/* Y su neutralización en lo migrado. La regla de arriba es de elemento y sus
   versalitas se HEREDAN: un .field o una .listrow-name que sean un <label>
   convertían en mayúsculas su propia ayuda y su mensaje de error. Va con
   :where() para no aportar especificidad, así que cualquier clase del sistema le
   gana. Se borra con la última pantalla sin migrar. */
:where([data-ds],.sheet) label{display:block;font:inherit;color:inherit;
  margin-bottom:0;text-transform:none;letter-spacing:normal}
select,input[type="date"],input[type="number"],input[type="text"],input[type="password"]{width:100%;background:var(--color-surface-2);border:none;color:var(--color-text-primary);font-family:var(--font);font-size:var(--fs-lg);padding:12px 14px;border-radius:var(--radius-md);outline:none;-webkit-appearance:none;transition:background var(--dur-base)}
select:focus,input:focus{background:var(--color-surface-1);box-shadow:0 0 0 2px var(--color-focus-ring)}
input[type="number"]{font-size:var(--fs-xl);text-align:center;font-weight:600}
textarea{width:100%;background:var(--color-surface-2);border:none;color:var(--color-text-primary);font-family:var(--font);font-size:var(--fs-lg);padding:12px 14px;border-radius:var(--radius-md);outline:none;resize:vertical;min-height:60px;transition:background var(--dur-base)}
textarea:focus{background:var(--color-surface-1);box-shadow:0 0 0 2px var(--color-focus-ring)}
.row{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.row>*{flex:1}
.mb{margin-bottom:var(--sp-3)}
.mb2{margin-bottom:var(--sp-5)}
/* Los enlaces del sistema: acento y subrayado discreto, sin el azul del
   navegador. Van aquí y no en una clase porque un <a> es un <a>. */
a{color:var(--color-accent-text);text-decoration-thickness:1px;text-underline-offset:2px}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* Título de bloque. `.sec-title-accent` era rojo y aparecía hasta seis veces por
   pantalla: un acento que titula secciones deja de acentuar acciones. Ahora es
   el mismo gris de etiqueta del sistema, y la clase sobrevive como alias vacío
   hasta que se borre de las plantillas. */
.sec-title{font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--sp-2)}
.sec-title-accent{color:var(--color-text-secondary)}
.sec-title-mt{margin-top:var(--sp-5)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes hrd-pop{0%{transform:scale(1)}50%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes prPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes status-blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes autopause-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes hr-pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* ── 1.7 SEMÁNTICOS · tema oscuro ───────────────────────────────────────────
   Solo se redefine la capa semántica: los alias de §1.3 la siguen solos.

   CONTRASTE MEDIDO (fondos: bg #131313 · surface #201f1f · surface2 #2a2a2a ·
   high #353534):

     --color-text-primary   14,42 · 12,76 · 11,14 · 9,53   (AA y AAA)
     --color-text-secondary  7,02 ·  6,42 ·  5,76 · 5,07   (AA de texto)
     --color-text-tertiary   4,85 ·  4,57 ·  4,21 · 3,80   (AA de texto)
     --color-accent-text     5,87 ·  5,20 ·  4,54 · 3,88

   Y la corrección que trae este pase: el relleno de la acción primaria era
   #ff5545 con texto blanco, y eso son **3,16:1** — falla el AA de texto en el
   botón más importante de la app. El acento tipográfico se queda en #ff5545
   (5,87:1 sobre el lienzo, que sí pasa) y el relleno baja a #d4372c, donde el
   blanco da **4,79:1** y el propio botón conserva 3,88:1 contra el fondo, por
   encima del 3,0 que pide 1.4.11 para un componente. Es exactamente el motivo
   por el que la acción tiene dos tokens y no uno. */
:root.dark{
  --color-surface-0:var(--ink-900);
  --color-surface-1:var(--ink-800);
  --color-surface-2:var(--ink-700);
  --color-surface-3:var(--ink-600);
  --color-surface-glass:rgba(32,31,31,.85);
  --color-text-primary:var(--ash-50);
  --color-text-secondary:rgba(var(--rose-200-rgb),.78);
  --color-text-tertiary:rgba(var(--rose-200-rgb),.62);
  --color-text-inverse:var(--ink-900);
  /* En oscuro no hay borde: la separación la da el salto de superficie. */
  --color-border-subtle:transparent;
  --color-border-ghost:rgba(var(--brown-700-rgb),.15);
  --color-action-primary:var(--red-600);
  --color-action-primary-fg:var(--sand-0);
  --color-accent-text:var(--red-500);
  --color-accent-soft:var(--red-200);
  --color-accent-wash:rgba(var(--red-500-rgb),.14);
  --color-accent-wash-strong:rgba(var(--red-500-rgb),.26);
  --color-success-wash:rgba(48,209,88,.16);
  --color-danger-wash:rgba(255,69,58,.16);
  --color-info-wash:rgba(104,211,252,.16);
  --color-warning-wash:rgba(224,168,46,.16);
  --cat-violet:#c48fe8; --cat-violet-wash:rgba(196,143,232,.16);
  --cat-orange:#f5a35a; --cat-orange-wash:rgba(245,163,90,.16);
  --cat-amber:#e0a82e;  --cat-amber-wash:rgba(224,168,46,.16);
  --cat-indigo:#9a97ff; --cat-indigo-wash:rgba(154,151,255,.16);
  --color-accent-glow:rgba(var(--red-500-rgb),.3);
  --color-state-success:var(--green-400);
  --color-state-danger:var(--crimson-400);
  --color-state-warning:#e0a82e;
  --color-state-info:var(--cyan-300);
  --color-domain-strength:var(--red-500);
  --color-domain-running:var(--cyan-300);
  --color-scrim:rgba(0,0,0,.6);
  --color-on-fill:var(--sand-0);
  --color-focus-ring:rgba(var(--red-500-rgb),.45);
  --shadow-2:0 6px 20px rgba(0,0,0,.35);
  --shadow-panel:-12px 0 40px rgba(0,0,0,.5);
}
@keyframes seFadeIn{from{opacity:0}to{opacity:1}}
@keyframes qdots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes exPict2{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes exPict3{0%,33.32%{opacity:1}33.33%,100%{opacity:0}}
@keyframes exPict4{0%,24.99%{opacity:1}25%,100%{opacity:0}}
@keyframes radarPulse{0%,100%{opacity:1}50%{opacity:.45}}
/* El anillo de foco del design system también para campos y enlaces: hoy los
   inputs usaban un box-shadow propio que además se dispara con el ratón. */
select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--color-accent-text);outline-offset:2px}
select{cursor:pointer}
@keyframes slideInRight{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
/* ── Tablas de historial (J8, J9) ─────────────────────────
   Fecha, peso, reps, volumen son columnas. Como lista de pares etiqueta-valor
   había que releer qué era cada número en cada fila; en tabla la cabecera lo
   dice una vez y los números se comparan en vertical. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* position:relative no es decoración: dentro de la tabla hay .sr-only, que es
     position:absolute. Sin un ancestro posicionado, su bloque contenedor es el
     del documento, así que se colocaba en su posición estática —a ~1.090px, ya
     dentro de la parte desplazada de la tabla— pero medida contra la página. La
     página entera se podía arrastrar 255px a la derecha en Cuerpo, sin que nada
     se viera fuera de sitio. Cualquier contenedor de scroll de esta hoja lleva
     position:relative por la misma razón. */
  position:relative;
  /* Sombras que solo aparecen del lado por el que queda tabla por ver. Con
     background-attachment local las dos primeras capas viajan con el scroll y
     tapan a las otras dos cuando ya no hay nada más hacia ese lado. */
  background:
    linear-gradient(to right, var(--color-surface-0) 30%, transparent) left / 28px 100% no-repeat,
    linear-gradient(to left, var(--color-surface-0) 30%, transparent) right / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, var(--color-scroll-cue), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, var(--color-scroll-cue), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* ── Atajos de teclado (J6) ───────────────────────────────
   Un atajo que no se descubre no existe: de ahí la hoja con `?` y la fila en
   Ajustes, que solo aparece donde hay teclado físico. */
.kbd-only{display:none}

}

@layer sistema {

/* El plegado del rail solo existe donde hay rail: por debajo de 1024 la nav es
   la barra inferior y no hay nada que plegar. */
#railToggle{display:none}
/* ── 3.1 BOTONES ────────────────────────────────────────────────────────────
   Taxonomía en tres ejes independientes: jerarquía, tamaño y ancho.

   JERARQUÍA  .btn (primario) · .btn--secondary · .btn--ghost · .btn--danger
   TAMAÑO     .btn--sm · (md por defecto) · .btn--lg
   ANCHO      auto por defecto · .btn--block cuando de verdad toca
   ICONO      .btn--icon (cuadrado, exige aria-label)

   Dos decisiones que cambian lo que había:

   1. `.btn` ya NO es `width:100%`. Un "Iniciar sesión" de 1.100px en un
      monitor no es un botón, es una valla. El ancho completo es la excepción
      declarada de la acción principal de una hoja móvil, y se pide con
      `.btn--block`.
   2. El tamaño por defecto es **md** (12/20, cuerpo md). El viejo defecto era
      lg (16/24, cuerpo lg), que es el tamaño de una acción de hoja, no el de
      un botón cualquiera.

   Los ~100 botones de las pantallas sin migrar llevan `btn--lg btn--block`
   añadidos en este pase: hacen explícito lo que antes recibían implícitos, y
   así el aspecto no cambia en ninguna pantalla que todavía no se ha rediseñado.
   Cada pantalla que se migra los borra donde no aplican. Contarlos
   (`grep -c 'btn--block'`) es la barra de progreso de la fase 2.

   PRESUPUESTO DEL ACENTO: como máximo **una** acción primaria en rojo por
   vista. La segunda acción es --secondary; la tercera, --ghost. Un acento que
   aparece diez veces por pantalla ya no acentúa. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--color-action-primary);color:var(--color-action-primary-fg);border:none;
  font-family:var(--font);font-size:var(--fs-md);font-weight:700;
  padding:var(--pad-y-md) var(--pad-x-md);border-radius:var(--radius-lg);
  cursor:pointer;width:auto;min-height:44px;
  transition:transform var(--dur-instant),opacity var(--dur-fast),background var(--dur-fast);
  box-shadow:var(--shadow-action)}
.btn:active{transform:scale(.97);opacity:.85}
/* Secundario: mismo peso de forma, cero peso de color. */
.btn--secondary,.btn-outline{background:var(--color-surface-2);color:var(--color-text-primary);font-weight:500;box-shadow:none}
.btn--secondary:active,.btn-outline:active{background:var(--color-surface-3);opacity:.85}
/* Terciario: solo texto. Para lo que no compite con nada. */
.btn--ghost{background:none;color:var(--color-text-secondary);font-weight:600;box-shadow:none}
.btn--ghost:active{background:var(--color-surface-2);opacity:1}
/* Peligro: rojo de estado, no rojo de marca, y nunca en la misma vista que la
   acción primaria si se puede evitar. */
.btn--danger,.btn-danger{background:var(--color-state-danger);color:var(--color-text-inverse);box-shadow:none}
/* Tamaños */
.btn--sm,.btn-sm{padding:var(--pad-y-sm) var(--pad-x-sm);font-size:var(--fs-base);width:auto;min-height:44px}
/* --lg no lleva min-height: en escritorio el relleno se aprieta a 12/20 (§5) y
   un mínimo de 52 dejaría los botones más altos de lo que están hoy. */
.btn--lg{padding:var(--pad-y-lg) var(--pad-x-lg);font-size:var(--fs-lg)}
/* Ancho */
.btn--block{width:100%}
/* Icono. El aria-label no es opcional: sin él es un botón sin nombre. */
.btn--icon{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:var(--radius-md);gap:0}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* ── 3.3 ROLES TIPOGRÁFICOS ─────────────────────────────────────────────────
   Para no volver a escribir `font-size:var(--fs-lg);font-weight:700` a mano.
   Cada clase ata tamaño + peso + interlineado + tracking, y las que muestran
   cifras traen las tabulares puestas: una columna de números que baila al
   cambiar de dígito no se compara de un vistazo, y este producto son números. */
.t-display{font:var(--type-display);letter-spacing:var(--track-display)}
.t-title-lg{font:var(--type-title-lg);letter-spacing:var(--track-title-lg)}
.t-title{font:var(--type-title);letter-spacing:var(--track-title)}
.t-body{font:var(--type-body);letter-spacing:var(--track-body)}
.t-body-strong{font:var(--type-body-strong);letter-spacing:var(--track-body-strong)}
.t-caption{font:var(--type-caption);letter-spacing:var(--track-caption);color:var(--color-text-secondary)}
.t-label{font:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-text-secondary)}
.t-metric{font:var(--type-metric);letter-spacing:var(--track-metric);font-variant-numeric:tabular-nums}
.t-metric-lg{font:var(--type-metric-lg);letter-spacing:var(--track-metric-lg);font-variant-numeric:tabular-nums}
/* ── 3.4 SECTIONHEADER ──────────────────────────────────────────────────────
   Título de pantalla + su única acción primaria. El subtítulo es contexto
   (cuándo se midió por última vez, qué programa está activo), no adorno: si no
   hay nada que decir, se omite el elemento. */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--gap-tight);flex-wrap:wrap;margin-bottom:var(--gap-group)}
.page-head-txt{min-width:0}
.page-title{font:var(--type-title-lg);letter-spacing:var(--track-title-lg);text-transform:uppercase}
.page-sub{font:var(--type-caption);color:var(--color-text-secondary);margin-top:2px}
/* ── 3.5 PANEL (Card) ───────────────────────────────────────────────────────
   La superficie 1 con su cabecera. Es el contenedor de lectura por defecto:
   una tarjeta de resultado, una tabla, una lista. No lleva sombra — la
   separación la da el salto de superficie, y en oscuro las sombras no separan
   nada. Nunca marca estado con una banda lateral: lo hace el fondo o un chip. */
.panel{background:var(--color-surface-1);border-radius:var(--radius-xl);
  padding:var(--pad-card);margin-bottom:var(--gap-stack)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--gap-tight);margin-bottom:var(--sp-3)}
.panel-title{font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--sp-3)}
.panel-note{font:var(--type-caption);color:var(--color-text-secondary);margin-top:var(--sp-3);
  padding-bottom:var(--pad-card)}
.panel:not(.panel--rows)>.panel-note:last-child{padding-bottom:0}
/* Sin relleno: para cuando el hijo ya trae el suyo (una tabla con scroll). */
.panel--flush{padding:0;overflow:hidden}
.panel--flush .panel-title{padding:var(--pad-card) var(--pad-card) 0}
/* ── 3.6 METRICTILE ─────────────────────────────────────────────────────────
   La cifra grande: peso, kcal, un PR. Etiqueta arriba, cifra tabular abajo,
   y una variación opcional. Crece **en número por fila**, nunca de tamaño: es
   el mismo componente en el móvil y en el monitor. */
/* 132px y no 148: en un móvil de 375 la columna útil son 303px, y a 148 los
   tiles caían de dos a uno por fila justo en la pantalla donde más importa la
   densidad. Con 132 entran dos en 375 y siguen entrando ocho en 1440. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--gap-tight)}
.tile{background:var(--color-surface-2);border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4)}
.tile-label{font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary)}
.tile-value{font:var(--type-metric);letter-spacing:var(--track-metric);
  font-variant-numeric:tabular-nums;margin-top:2px}
.tile-unit{font:var(--type-caption);color:var(--color-text-secondary);margin-left:3px}
.tile-delta{font:var(--type-caption);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.tile-delta--up{color:var(--color-state-success)}
.tile-delta--down{color:var(--color-state-info)}
.tile-delta--flat{color:var(--color-text-secondary)}
.tile--empty .tile-value{color:var(--color-text-secondary);font:var(--type-body);letter-spacing:0}
/* ── 3.7 LISTROW ────────────────────────────────────────────────────────────
   Nombre a la izquierda, valor a la derecha. Es el patrón más repetido del
   producto y hasta ahora estaba reescrito en quince sitios con quince nombres. */
.listrow{display:flex;align-items:baseline;gap:var(--gap-tight);
  padding:var(--sp-2) 0;border-top:1px solid var(--color-border-ghost)}
.listrow:first-child{border-top:none}
.listrow-name{flex:1;min-width:0;font:var(--type-body-strong);
  text-transform:none;letter-spacing:normal;color:var(--color-text-primary);margin-bottom:0}
.listrow-value{font:var(--type-body-strong);font-variant-numeric:tabular-nums;text-align:right}
.listrow-meta{font:var(--type-caption);color:var(--color-text-secondary)}
/* La fila con descripción y control. La anatomía es SIEMPRE la misma —icono
   opcional · nombre · descripción · control a la derecha— y ese "siempre" es
   justo lo que faltaba en Ajustes: había filas con la etiqueta como <label>,
   otras con <div>, y el control unas veces dentro y otras fuera. */
.listrow--control{align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;min-height:56px}
.listrow-main{flex:1;min-width:0}
.listrow-desc{font:var(--type-caption);color:var(--color-text-secondary);margin-top:2px}
.listrow-control{flex-shrink:0}
/* Apilada: para el control que no cabe al lado (un grupo de campos, un selector
   de cinco opciones). Sigue siendo la misma fila, no otro componente. */
.listrow--stack{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
/* La fila que ES un botón. Ocupa toda la anchura de su contenedor, se ilumina
   con el puntero y termina en chevron: la señal de "esto lleva a algún sitio".
   El objetivo táctil mínimo son 52px, por encima de los 44 exigidos, porque una
   fila entera invita a tocar en cualquier punto. */
.listrow--action{width:100%;align-items:center;gap:var(--sp-3);min-height:52px;
  padding:var(--sp-3) 0;background:none;border:none;text-align:left;
  font-family:var(--font);color:var(--color-text-primary);cursor:pointer;
  transition:background var(--dur-fast)}
/* La fila que es un <a> y no un <button>: se comporta como fila, no como enlace.
   El subrayado y el color de acento son para el enlace dentro de un párrafo. */
a.listrow--action{text-decoration:none}
.listrow--action:active{background:var(--color-surface-2)}
.listrow-icon{width:28px;height:28px;border-radius:var(--radius-xs);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-surface-2);color:var(--color-text-secondary)}
.listrow-icon svg{width:16px;height:16px;stroke:currentColor}
.listrow-chevron{flex-shrink:0;color:var(--color-text-tertiary);font-size:var(--fs-xl);font-weight:300}
/* Lo destructivo se marca con el color del texto y del icono, nunca con una
   banda lateral ni con un relleno rojo que compita con la acción primaria. */
.listrow--danger{color:var(--color-state-danger)}
.listrow--danger .listrow-icon{background:var(--color-state-danger);color:var(--color-text-inverse)}
/* El panel que contiene filas. Sin relleno vertical propio —lo ponen las filas—
   y con el horizontal aplicado a cada una, para que el fondo del hover llegue
   hasta el borde de la tarjeta y no se quede flotando dentro. */
.panel--rows{padding:0 var(--pad-card)}
.panel--rows>.panel-title{padding-top:var(--pad-card)}
.panel--rows>.listrow--action{padding-inline:var(--pad-card);margin-inline:calc(var(--pad-card) * -1);
  width:calc(100% + var(--pad-card) * 2)}
/* ── 3.7b CHIP Y BADGE ──────────────────────────────────────────────────────
   La distinción, que hasta ahora no existía: un **Chip** es interactivo (filtra,
   selecciona, se puede pulsar); un **Badge** informa y no se toca. Estaban
   mezclados en .prof-chip, .q-chip, .zp-chip, .run-plan-pill, .dash-act-chip,
   .prev-badge y .ex-mode-badge, con la misma pinta y comportamientos distintos.

   Un Badge nunca es rojo salvo que el rojo signifique algo (tu limitante, un
   récord): el presupuesto del acento cuenta también las etiquetas. */
.badge{display:inline-flex;align-items:center;gap:4px;
  font:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;
  padding:2px var(--sp-2);border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--color-surface-2);color:var(--color-text-secondary)}
.badge--accent{background:var(--color-action-primary);color:var(--color-action-primary-fg)}
.badge--success{background:var(--color-surface-2);color:var(--color-state-success)}
.badge--warning{background:var(--color-surface-2);color:var(--color-state-warning)}
.badge--info{background:var(--color-surface-2);color:var(--color-state-info)}
/* Chip: objetivo táctil real de 44, porque se pulsa. */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:var(--pad-y-sm) var(--pad-x-sm);border-radius:var(--radius-pill);
  background:var(--color-surface-1);border:1px solid var(--color-border-subtle);
  font-family:var(--font);font-size:var(--fs-base);font-weight:600;
  color:var(--color-text-primary);cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.chip:active{background:var(--color-surface-2)}
.chip.is-on{background:var(--color-accent-wash);border-color:var(--color-accent-soft);
  color:var(--color-accent-text)}
/* ── 3.8 CAMPOS ─────────────────────────────────────────────────────────────
   Etiqueta encima siempre. Con la etiqueta a la izquierda y el campo a la
   derecha, en un monitor quedan cientos de píxeles de vacío entre una etiqueta
   y el campo al que pertenece y la asociación se pierde en la segunda fila. */
/* El reset del `label` global. La regla de elemento `label{...}` de la base pone
   versalitas y tracking, y `text-transform` se hereda: un .field que ES un
   <label> convertía en mayúsculas su propia ayuda y su mensaje de error. La
   etiqueta pone lo suyo en .field-label, que es donde toca. */
.field{display:block;margin-bottom:var(--sp-3);
  text-transform:none;letter-spacing:normal;font-weight:400;
  font-size:var(--fs-md);color:var(--color-text-primary)}
.field-label{display:block;font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:4px}
.field-hint{display:block;font:var(--type-caption);color:var(--color-text-secondary);margin-top:4px}
.field-error{display:block;font:var(--type-caption);color:var(--color-state-danger);margin-top:4px}
/* Un formulario no se ensancha nunca más allá de su medida. */
.form{max-width:var(--measure-form)}
/* ── 3.9 MODAL / BOTTOMSHEET ────────────────────────────────────────────────
   El mismo componente y la misma API: hoja que sube desde abajo en el móvil,
   diálogo centrado en escritorio. Cambia la presentación, no el contrato.
   `.sheet.open` lo muestra; el `role="dialog"` y el `aria-modal` van en el
   HTML porque el componente no decide si es modal, lo decide quien lo usa. */
.sheet{position:fixed;inset:0;z-index:var(--z-overlay);display:none;
  align-items:flex-end;justify-content:center;background:var(--color-scrim)}
.sheet.open{display:flex}
.sheet-panel{display:flex;flex-direction:column;width:100%;max-width:var(--measure-form);
  max-height:92dvh;background:var(--color-surface-0);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  animation:sheetUp var(--dur-slow) var(--ease-sheet)}
.sheet-head{display:flex;align-items:center;gap:var(--gap-tight);
  padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.sheet-title{flex:1;font:var(--type-title-lg);letter-spacing:var(--track-title-lg)}
.sheet-body{flex:1;overflow-y:auto;padding:var(--sp-2) var(--sp-4) var(--sp-4)}
.sheet-foot{display:flex;gap:var(--gap-tight);padding:var(--sp-3) var(--sp-4)
  calc(var(--sp-4) + env(safe-area-inset-bottom));border-top:1px solid var(--color-border-ghost)}
/* La acción principal de una hoja móvil: éste es el caso para el que existe
   .btn--block, y prácticamente el único. */
.sheet-foot .btn--block{flex:1}
/* ── 3.10 BANNER DE ESTADO ──────────────────────────────────────────────────
   Fondo teñido e icono. NUNCA una banda de acento lateral: en una tarjeta, en
   una fila o en una alerta, la barra de color a la izquierda está prohibida en
   este sistema — el ojo la lee como decoración de borde, no como estado. */
.banner{display:flex;align-items:center;gap:var(--gap-tight);
  background:var(--color-accent-wash);border-radius:var(--radius-lg);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.banner-text{flex:1;min-width:0;font:var(--type-caption);
  font-weight:600;color:var(--color-accent-text)}
.banner .material-symbols-outlined{font-size:20px;color:var(--color-accent-text);flex-shrink:0}
/* ── 3.11 SEGMENTED / TABS ──────────────────────────────────────────────────
   Un único componente donde había tres con CSS casi idéntico y tres nombres:
   .str-subnav, .run-subnav y .train-mode. La pastilla activa se marca con fondo
   y peso; nunca con una banda de acento ni con un subrayado de color.

   .subnav es el bloque de navegación secundaria de una sección: el modo arriba
   y sus destinos debajo. En móvil son dos segmentados apilados; en ≥1024 se
   convierte en la columna izquierda de la pantalla (§5). */
.subnav{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--gap-stack)}
.subnav-tabs{display:flex;background:var(--color-surface-2);
  border-radius:var(--radius-pill);padding:2px;gap:2px}
.subnav-tabs>button{flex:1;background:none;border:none;
  color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-base);
  font-weight:600;padding:var(--sp-2) 4px;min-height:44px;border-radius:var(--radius-pill);
  cursor:pointer;transition:background var(--dur-base),color var(--dur-base)}
.subnav-tabs>button.active{background:var(--color-surface-1);
  color:var(--color-text-primary);box-shadow:var(--shadow-1)}
/* Variante neutra: para lo informativo que no es una llamada a la acción. */
.banner--neutral{background:var(--color-surface-2)}
.banner--neutral .banner-text,.banner--neutral .material-symbols-outlined{color:var(--color-text-secondary)}
.banner--neutral .banner-text b{color:var(--color-text-primary)}
/* Los chips de contexto (programa, fase, semana) son .chip del sistema. */
/* El grupo de estado de una cabecera: modo, plan, fase. Un solo hijo del
   .page-head, para que el space-between reparta UN hueco entre identidad y
   estado en vez de repartir dos entre tres piezas sueltas. */
.page-head-state{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.page-head-ctx{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.page-head-ctx .chip svg{color:var(--color-text-tertiary);flex-shrink:0}
/* Stats grid: son MetricTile del sistema (§3.6); no queda nada propio. */

/* Empty state */
.empty-state{text-align:center;color:var(--color-text-secondary);font:var(--type-body);padding:var(--sp-10) var(--sp-5)}
/* ── Quirón, tu coach ─────────────────────────────────────── */
/* Quirón ya no es un FAB: es la sexta entrada de la navegación (§7.1 del
   DESIGN_SYSTEM). Lo que queda aquí es el separador que lo distingue de los
   cinco destinos de datos, y el atenuado de la pestaña que estaba activa
   mientras Quirón manda. */
.nav-quiron{position:relative}
.nav-dimmed{opacity:.55}
@media(min-width:1024px){
/* Quirón, al pie del rail y separado del resto por un filete: los cinco de
   arriba son pantallas con tus datos; éste es una conversación. */
.nav-quiron{margin-top:auto;border-top:.5px solid var(--color-border-subtle);
  padding-top:var(--sp-4)!important;margin-bottom:var(--sp-2)}
}
/* El .set-runner no lleva nada: ya centra sus hijos en 520px y la fase de
   trabajo ya va centrada en vertical (.sr-phase{flex:1;justify-content:center}).
   Ensancharlo o meterle una segunda columna sería una regresión. */

/* ── Densidad y tipografía ──────────────────────────────── */
@media(min-width:1024px){
/* Un texto de 14px a 60cm se percibe como uno de ~8px a 35cm: el tamaño que ya
   se corrigió para el móvil vuelve a quedarse corto en un monitor. Se sube un
   escalón redefiniendo los tokens — html{font-size} descoordinaría los px
   literales de iconos, toggles y radios. */
:root{--fs-2xs:.75rem;--fs-xs:.8125rem;--fs-sm:.875rem;--fs-base:.9375rem;--fs-md:1.0625rem;--fs-lg:1.1875rem;--fs-xl:1.5rem;--fs-2xl:1.75rem;--fs-3xl:2.5rem;--fs-4xl:3.25rem}
/* La densidad también sale del token, no de una regla por componente: con ratón
   el relleno de tarjeta se aprieta y la separación entre bloques se abre, que es
   lo contrario de lo que hace el móvil. Un componente que usa --pad-card y
   --gap-* cambia de densidad sin escribir un solo media query propio. */
:root{--pad-card:var(--sp-5);--gap-stack:var(--sp-4);--gap-group:var(--sp-6);--gap-section:var(--sp-8)}
body{line-height:1.5}
.dash-greeting-title,.dash-streak-value,.prof-level,.sr-name,.run-live-timer,.timer-display{line-height:1.15}
/* Con ratón el objetivo puede apretarse; lo que se gana es información por
   pantalla. Los controles del runner, el timer y la carrera se quedan en 44px:
   se usan con prisa y sudor, y comparten CSS con el móvil. */
.btn{padding:12px 20px}
.dash-card{padding:var(--sp-4)}
}
/* Estado vacío con salida: un texto que dice "no hay nada" y no ofrece la
   acción que lo llena deja al usuario en un callejón. */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.empty-state .btn{width:auto;margin-top:var(--sp-2)}
.empty-state-sub{font-size:var(--fs-base);color:var(--color-text-secondary)}
/* Título de categoría. .group-title es del sistema y lo comparten Ajustes,
   Perfil y Entrenar; .settings-group-title queda como alias mientras algún
   sitio lo use. */
.group-title,.settings-group-title{font:var(--type-title-lg);letter-spacing:var(--track-title-lg);
  color:var(--color-text-primary);margin-bottom:var(--sp-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

}

@layer pantallas {

/* ═══════════════════════════════════════════════════════════════════════════
   ARETÉ — hoja única, servida tal cual (sin build step). Índice:

     1. TOKENS      primitivos · semánticos · alias heredados · escalas
     2. BASE        reset, tipografía, shell, campos
     3. SISTEMA     botones, rail colapsable, roles tipográficos
     4. PANTALLAS   Cuerpo (migrada) y el resto, por migrar
     5. ESCRITORIO  shell, rail, rejillas de ≥640/1024/1440

   El documento del sistema es DESIGN_SYSTEM.md. Regla de oro: si necesitas un
   valor que no es un token, o falta el token o el diseño está mal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1.1 PRIMITIVOS ─────────────────────────────────────────────────────────
   Valores crudos, sin significado. No se usan en ningún componente: solo aquí
   debajo, para dar de alta un token semántico. Si un componente escribe
   var(--red-600) es que falta un semántico. */
:root{
  /* Rojo Areté. 600 es el de marca; 500 el que aguanta el fondo oscuro. */
  --red-200:#ffb4aa; --red-500:#ff5545; --red-600:#d4372c;
  --red-500-rgb:255,85,69; --red-600-rgb:212,55,44;
  /* Neutros cálidos (papel) */
  --sand-0:#fff; --sand-50:#f4f2f0; --sand-100:#f0eeeb; --sand-200:#ebe8e5;
  --brown-900:#1c1b1b; --brown-700-rgb:93,63,59;
  /* Neutros de tinta (noche) */
  --ink-900:#131313; --ink-800:#201f1f; --ink-700:#2a2a2a; --ink-600:#353534;
  --ash-50:#e5e2e1; --rose-200-rgb:231,189,183;
  /* Estado y dominio */
  --green-600:#16a34a; --green-400:#30d158;
  --crimson-600:#dc2626; --crimson-400:#ff453a;
  --amber-700:#a16207; --cyan-600:#0891b2; --cyan-300:#68d3fc;
}
/* ── 1.3 (los alias heredados, borrados) ────────────────────────────────────
   Aquí vivían --bg, --surface, --surface2, --text, --text2, --text3, --accent,
   --green, --red, --teal, --radius y compañía, apuntando a la capa semántica
   mientras duraba la migración. Ya no queda ningún uso ni en app.css ni en las
   plantillas de js/: se han borrado, que era la condición para dar la migración
   por terminada. Si vuelve a aparecer uno de esos nombres es que alguien ha
   copiado código de un commit viejo. */

/* ── 1.4 TIPOGRAFÍA ─────────────────────────────────────────────────────────
   La escala. La app se lee con el móvil en el suelo, sudado y entre series: el
   suelo es 11px y el cuerpo 14px. En ≥1024 la escala sube un escalón entera
   (§5), no se redefine html{font-size} — eso descoordinaría los px literales de
   iconos, toggles y radios. */
:root{
  --font:'Inter',-apple-system,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-2xs:.6875rem;--fs-xs:.75rem;--fs-sm:.8125rem;--fs-base:.875rem;--fs-md:1rem;
  --fs-lg:1.125rem;--fs-xl:1.375rem;--fs-2xl:1.625rem;--fs-3xl:2.25rem;--fs-4xl:3rem;

  /* ROLES. Atan tamaño + peso + interlineado; el tracking viaja aparte porque
     el shorthand `font` no lo admite. Para no escribir las dos líneas a mano
     están las clases .t-* (§3), que además ponen las cifras tabulares donde
     tocan. El shorthand `font` resetea font-variant-numeric: por eso --type-
     metric SIEMPRE se aplica con .t-metric o con su tabular-nums al lado. */
  --type-display:800 var(--fs-3xl)/1.1 var(--font);      --track-display:-.04em;
  --type-title-lg:800 var(--fs-xl)/1.2 var(--font);      --track-title-lg:-.03em;
  --type-title:700 var(--fs-lg)/1.25 var(--font);        --track-title:-.01em;
  --type-body:400 var(--fs-md)/1.5 var(--font);          --track-body:0;
  --type-body-strong:600 var(--fs-md)/1.45 var(--font);  --track-body-strong:0;
  --type-caption:500 var(--fs-sm)/1.45 var(--font);      --track-caption:0;
  --type-label:600 var(--fs-xs)/1.3 var(--font);         --track-label:.06em;
  --type-metric:800 var(--fs-2xl)/1.1 var(--font);       --track-metric:-.02em;
  --type-metric-lg:800 var(--fs-3xl)/1 var(--font);      --track-metric-lg:-.03em;
}
/* ── 1.5 ESPACIO, RADIO, SOMBRA, PROFUNDIDAD, MOVIMIENTO ────────────────────*/
:root{
  /* Escala base */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;

  /* Espaciado DE COMPONENTE: el relleno interno por tamaño de control. Un
     botón sm y un chip sm comparten estos dos valores, no se los inventan. */
  --pad-y-sm:8px;  --pad-x-sm:14px;
  --pad-y-md:12px; --pad-x-md:20px;
  --pad-y-lg:16px; --pad-x-lg:24px;
  --pad-card:var(--sp-4);

  /* Espaciado DE LAYOUT: la densidad cambia por breakpoint desde aquí (§5), no
     regla a regla. */
  --gap-tight:var(--sp-2);     /* elementos de una misma fila */
  --gap-stack:var(--sp-3);     /* tarjetas de una misma lista */
  --gap-group:var(--sp-5);     /* bloques de una misma sección */
  --gap-section:var(--sp-8);   /* entre secciones y entre columnas */

  /* Radios. Eran 24 valores sueltos; son seis. */
  --radius-xs:6px; --radius-sm:8px; --radius-md:10px;
  --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --radius:var(--radius-lg);   /* alias heredado */

  /* Sombras. Elevación, no decoración: 1 = pegado, 2 = flotando, 3 = sobre
     todo lo demás. La de acción tiñe con el acento y es solo del primario. */
  --shadow-1:0 1px 3px rgba(0,0,0,.08);
  --shadow-2:0 6px 20px rgba(0,0,0,.06);
  --shadow-3:0 8px 32px rgba(0,0,0,.25);
  --shadow-action:0 8px 24px var(--color-accent-glow);
  --shadow-panel:-12px 0 40px rgba(0,0,0,.12);

  /* Profundidad. Eran 18 números repartidos por la hoja; ahora tienen nombre y
     el nombre dice qué tapa a qué. Nada nuevo se escribe fuera de esta escala. */
  --z-raised:1;
  --z-sticky-action:40;     /* el botón de guardar pegado al pie */
  --z-sticky-dots:45;       /* los puntos de ejercicio */
  --z-sticky-mini:46;       /* el mini-timer */
  --z-sticky-timer:50;      /* la barra de timer */
  --z-sticky-context:55;    /* la barra de contexto */
  --z-header:60;
  --z-runner:90;            /* el runner de sesión, a pantalla completa */
  --z-sheet:95;             /* hojas inferiores (test de dominio) */
  --z-nav:100;              /* nav inferior y rail */
  --z-overlay:200;          /* modales y el panel de Quirón */
  --z-overlay-top:210;      /* barras acopladas a un modal */
  --z-toast:250;
  --z-toast-top:260;
  --z-alert:300;            /* celebración de PR, banner de actualización */
  --z-immersive:500;        /* carrera en vivo */
  --z-immersive-top:600;    /* bloqueo de pantalla */

  /* Movimiento. Eran 22 duraciones sin criterio. Cuatro escalones y tres
     curvas; todo lo nuevo respeta prefers-reduced-motion (§final). */
  --dur-instant:.1s;   /* respuesta al dedo: :active */
  --dur-fast:.15s;     /* cambio de color, hover */
  --dur-base:.2s;      /* entrada de panel, cambio de pestaña */
  --dur-slow:.3s;      /* hoja inferior, barrido lateral */
  --dur-slower:.5s;    /* barra que se rellena, anillo que se dibuja */
  --dur-spin:.8s;      /* una vuelta del indicador de carga */
  --dur-pulse:1.5s;    /* respiración de un estado en curso */
  --ease-standard:ease-out;
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --ease-linear:linear;
}
nav button.active{color:var(--color-on-fill);background:var(--color-accent-text);box-shadow:var(--shadow-action)}
nav button .material-symbols-outlined{font-size:24px}
.header-logo{width:24px;height:24px;border-radius:var(--radius-xs)}
.save-bar{margin-top:var(--sp-3)}
.save-bar-notes-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.save-bar-notes-label{font-size:var(--fs-xs);color:var(--color-text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.save-bar-notes-toggle{background:none;border:none;color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-md);font-weight:600;padding:4px 0 4px 16px;cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.save-bar-notes-body{margin-bottom:8px}
.save-bar-notes-body textarea{min-height:72px;resize:vertical;width:100%}
/* Guardar es secundario y la sombra deja de ir teñida de acento: la primaria de
   la vista de registro es "Empezar sesión", y dos rellenos rojos a ancho
   completo en la misma pantalla es exactamente lo que prohíbe el §2.3. */
#saveWorkoutBtn{position:sticky;bottom:max(var(--nav-h),env(safe-area-inset-bottom,0px) + var(--nav-h));z-index:var(--z-sticky-action);box-shadow:var(--shadow-2)}
.ex-dots{display:none;justify-content:center;gap:6px;padding:4px 0 8px;position:sticky;top:82px;z-index:var(--z-sticky-dots);background:var(--color-surface-0)}
.ex-dots.visible{display:flex}
.ex-dot{width:8px;height:8px;border-radius:50%;background:var(--color-border-subtle);transition:background var(--dur-base),transform var(--dur-base);cursor:pointer}
.ex-dot.active{background:var(--color-text-primary);transform:scale(1.3)}
.session-overview-card{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:16px;margin-bottom:var(--sp-3)}
.so-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3)}
.so-name{font-size:var(--fs-xl);font-weight:700}
.so-count{font-size:var(--fs-sm);color:var(--color-text-secondary)}
.so-list{display:flex;flex-direction:column;gap:var(--sp-1)}
.so-ex{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--color-surface-2);border-radius:var(--radius-lg)}
.so-ex-name{font-size:var(--fs-md);font-weight:600}
.so-ex-target{font-size:var(--fs-sm);color:var(--color-text-secondary);font-weight:500}
.so-last{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-top:var(--sp-3);text-align:center}
.so-draft{font-size:var(--fs-sm);color:var(--color-accent-text);margin-top:var(--sp-1);text-align:center}
.so-start{margin-top:var(--sp-3)}
.so-ex-hiit{flex-direction:column;align-items:stretch;padding:8px 12px;background:var(--color-surface-2);border-radius:var(--radius-lg)}
.so-ex-hiit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.so-hiit-list{display:flex;flex-direction:column;gap:2px;padding-top:4px;border-top:1px solid var(--color-border-subtle)}
.so-hiit-ex{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--color-text-secondary);padding:3px 0}
.so-hiit-ex span:first-child{color:var(--color-text-primary)}
.str-plan-header{margin-bottom:var(--sp-3)}
.str-plan-select{width:100%}
.str-plan-desc{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-bottom:var(--sp-3);line-height:1.4}
.str-plan-session{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:16px;margin-bottom:var(--sp-3)}
.str-plan-session-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-2)}
.str-plan-session-name{font-size:var(--fs-lg);font-weight:700}
.str-plan-session-count{font-size:var(--fs-sm);color:var(--color-text-secondary)}
.str-plan-ex-list{display:flex;flex-direction:column;gap:var(--sp-1)}
.str-plan-start-btn{margin-top:var(--sp-2)}
.str-plan-custom{margin-bottom:var(--sp-4)}
.str-plan-custom-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-2)}
.str-plan-custom-title{font-size:var(--fs-md);font-weight:700}
.str-plan-custom-empty{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:16px;font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.5;display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.str-plan-session-custom{border:1px solid var(--color-accent-soft)}
.str-plan-custom-actions{display:flex;gap:8px;margin-top:var(--sp-2)}
.str-plan-custom-actions .btn{flex:1;margin-top:0}
.str-plan-custom-more{background:none;border:none;color:var(--color-accent-text);font-size:var(--fs-sm);font-weight:600;padding:var(--sp-2);width:100%;cursor:pointer}
.draft-guard-text{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.5;margin-bottom:var(--sp-4)}
.draft-guard-actions{display:flex;flex-direction:column;gap:8px}
.run-plan-session-card{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:16px;margin-bottom:var(--sp-3)}
.run-plan-session-header{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-2)}
.ex-card{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:16px;margin-bottom:var(--sp-3)}
.ex-card .ex-name{font-size:var(--fs-md);font-weight:700;margin-bottom:3px}
.ex-card .ex-target{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-bottom:var(--sp-2);font-weight:500}
.ex-card .sets-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:var(--sp-2) 10px;align-items:center}
.ex-card .set-label{font-size:var(--fs-sm);color:var(--color-text-secondary);text-align:center;font-weight:600;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid var(--color-border-subtle);background:var(--color-surface-1);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);padding:0;font-family:var(--font)}
.ex-card .set-label:active{transform:scale(.92)}
.ex-card .set-label.set-done{background:var(--color-success-wash);border-color:var(--color-state-success);color:var(--color-state-success)}
/* La serie en curso se marca con TINTA, no con el rojo de marca. Había un
   círculo rojo por ejercicio —cinco por sesión— gritando lo mismo que el botón
   primario de la vista, y "aquí vas" no es una acción. Anillo y texto en
   --color-text-primary: 15,39:1 en claro y 14,42:1 en oscuro sobre la tarjeta,
   muy por encima del 3,0 que pide 1.4.11 para un indicador no textual. */
.ex-card .set-label.active-set{border-color:var(--color-text-primary);background:var(--color-surface-2);color:var(--color-text-primary);font-weight:700}
.ex-card input{padding:12px 8px;font-size:var(--fs-xl);text-align:center;border-radius:var(--radius-sm);min-height:44px}
.ex-card .sets-header{font-size:var(--fs-xs);color:var(--color-text-secondary);text-align:center;text-transform:uppercase;letter-spacing:.5px;padding-bottom:2px;font-weight:600}
.ex-card .prev-data{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-top:10px;padding-top:8px;font-weight:500}
/* "Anterior: 100×5 · 100×5" iba en verde. El verde es estado, y lo que hiciste
   la última vez no es ni bueno ni malo: es el dato contra el que comparas. En
   tinta, con la etiqueta en secundario, se lee la comparación sin teñirla. */
.ex-card .prev-data span{color:var(--color-text-primary);font-weight:600}
.prev-badge{display:inline-flex;align-items:center;font-size:var(--fs-2xs);font-weight:700;color:var(--color-text-secondary);background:var(--color-surface-2);border-radius:var(--radius-md);padding:2px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.prev-badge--record{color:var(--cat-amber);background:var(--cat-amber-wash)}
.timer-bar{z-index:var(--z-sticky-timer);background:var(--color-surface-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:10px 16px;display:none;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.timer-bar.active{display:flex}
.timer-mode-toggle{display:flex;background:var(--color-surface-2);border-radius:var(--radius-pill);padding:2px;gap:2px}
.timer-mode{background:none;border:none;color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-sm);font-weight:600;padding:5px 10px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-base),color var(--dur-base)}
.timer-mode.active{background:var(--color-surface-1);color:var(--color-text-primary);box-shadow:var(--shadow-1)}
.timer-presets{display:flex;gap:var(--sp-1)}
.timer-display{font-size:var(--fs-2xl);font-weight:700;flex:1;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color var(--dur-slow)}
.timer-display.warning{color:var(--color-accent-text)}
.timer-display.done{color:var(--color-state-success);animation:pulse var(--dur-slower) ease-in-out 3}
.timer-btn{background:var(--color-surface-2);border:none;color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-base);font-weight:600;padding:10px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-base),color var(--dur-base);min-height:44px}
.timer-btn:active{background:var(--color-surface-3)}
/* El preset elegido se marca con superficie y peso, no en rojo: el descanso es
   una herramienta de la vista, no su acción principal (§2.3). */
.timer-btn.active-dur{background:var(--color-surface-3);color:var(--color-text-primary);font-weight:700}
.timer-custom-btn{font-size:var(--fs-base);padding:7px 10px}
.timer-custom-input{display:none;width:70px;background:var(--color-surface-1);border:1.5px solid var(--color-text-primary);color:var(--color-text-primary);font-family:var(--font);font-size:var(--fs-2xl);font-weight:700;text-align:center;padding:4px 6px;border-radius:var(--radius-md);font-variant-numeric:tabular-nums;outline:none}
.timer-custom-input.visible{display:block}
/* El play del descanso deja de ser un disco rojo. Era el rojo más grande y más
   arriba de Entrenar compitiendo con la acción primaria de la vista, y arrancar
   un descanso no es la acción primaria de nada. En reposo es superficie 2 con
   la tinta del texto (15,39:1 en claro, 14,42:1 en oscuro); corriendo se
   invierte a tinta sólida, que es la señal más fuerte disponible sin gastar
   acento — y el glifo ya cambia de ▶ a ⏹. */
.timer-start{width:44px;height:44px;border-radius:50%;background:var(--color-surface-2);border:none;color:var(--color-text-primary);font-size:var(--fs-xl);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur-instant),background var(--dur-fast),color var(--dur-fast);flex-shrink:0}
.timer-start:active{transform:scale(.9)}
.timer-start.running{background:var(--color-text-primary);color:var(--color-text-inverse)}
.timer-reset{width:44px;height:44px;border-radius:50%;background:var(--color-surface-2);border:none;color:var(--color-text-secondary);font-size:var(--fs-xl);display:none;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur-instant);flex-shrink:0}
.timer-reset:active{transform:scale(.9)}
.timer-bar.mode-stopwatch .timer-presets{display:none}
.timer-bar.mode-stopwatch .timer-custom-input{display:none}
.timer-bar.mode-stopwatch .timer-reset{display:flex}
.timer-bar.mode-countdown .timer-reset{display:none}
.mini-timer{display:none;position:sticky;top:82px;z-index:var(--z-sticky-mini);background:var(--color-surface-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-pill);padding:4px 12px 4px 16px;margin:0 auto var(--sp-2);align-items:center;justify-content:center;gap:var(--sp-2);width:fit-content;box-shadow:var(--shadow-1);cursor:pointer;transition:opacity var(--dur-base)}
.mini-timer.visible{display:flex}
.mini-timer-time{font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums}
.mini-timer-time.warning{color:var(--color-state-danger);animation:pulse var(--dur-slower) ease-in-out infinite}
.mini-timer-stop{background:var(--color-state-danger);color:var(--color-on-fill);border:none;width:28px;height:28px;border-radius:50%;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.cal-container{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:16px;margin-bottom:var(--sp-3)}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-header .cal-title{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em}
.cal-header .cal-count{font-size:var(--fs-xs);color:var(--color-text-secondary);text-align:right;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.cal-header .cal-count span{display:block;font-size:var(--fs-2xl);font-weight:700;color:var(--color-text-primary);letter-spacing:-.02em}
/* El plegable del calendario. Su summary es un control real: 44px de objetivo
   táctil y un chevron que gira, como el resto de la app. */
.cal-fold{margin-bottom:var(--sp-3)}
.cal-fold>summary{list-style:none;cursor:pointer;min-height:44px;
  display:flex;align-items:center;gap:var(--sp-2);
  font:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--color-text-secondary)}
.cal-fold>summary::-webkit-details-marker{display:none}
.cal-fold>summary::before{content:'›';font-size:var(--fs-xl);font-weight:300;line-height:1;
  transition:transform var(--dur-fast)}
.cal-fold[open]>summary::before{transform:rotate(90deg)}
.cal-nav{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);justify-content:center}
.cal-nav button{background:var(--color-surface-2);border:none;color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-md);font-weight:600;padding:8px 18px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-base)}
.cal-nav button:active{background:var(--color-surface-3)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal-grid .cal-dow{font-size:var(--fs-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;padding-bottom:8px;font-weight:600}
.cal-grid .cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);border-radius:50%;color:var(--color-text-secondary);font-weight:500;transition:background var(--dur-base)}
.cal-grid .cal-day.has-workout{background:var(--color-accent-text);color:var(--color-on-fill);font-weight:700;cursor:pointer}
.cal-grid .cal-day.has-workout:active{background:var(--red-200);transform:scale(.9)}
.cal-grid .cal-day.today{box-shadow:inset 0 0 0 1.5px var(--color-text-tertiary)}
.cal-grid .cal-day.today.has-workout{box-shadow:inset 0 0 0 2px var(--color-on-fill)}
.cal-grid .cal-day.empty{color:transparent}
/* El separador de mes. Pegajoso: al recorrer una lista larga, el mes que estás
   mirando sigue escrito arriba, que es lo único que orienta cuando todas las
   tarjetas se parecen. Va sobre el fondo de la página —no sobre surface-1— para
   que la tarjeta que pasa por debajo no se transparente a través de él. */
.hi-month{position:sticky;top:0;z-index:1;
  background:var(--color-surface-0);padding:var(--sp-3) 0 var(--sp-2);
  font:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--color-text-secondary)}
.hi-month:first-child{padding-top:0}
.history-item{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:14px;margin-bottom:var(--sp-2);cursor:pointer;transition:transform var(--dur-instant)}
.history-item:active{transform:scale(.98)}
/* Una fecha no es un acento. Eran seis rojos apilados en la primera pantalla de
   Historial —uno por tarjeta— por poner en color de marca el dato más repetido
   de la lista. En tinta y en negrita sigue siendo lo primero que se lee de cada
   tarjeta, que es para lo que estaba el color. */
/* Un escalón por encima del cuerpo. La fecha es el objetivo de escaneo de la
   lista, y a --fs-base con peso 700 pesaba exactamente lo mismo que los cinco
   nombres de ejercicio de debajo: seis cosas compitiendo por ser la identidad
   de la tarjeta. */
.history-item .hi-date{font-size:var(--fs-md);color:var(--color-text-primary);font-weight:700;letter-spacing:-.01em}
.history-item .hi-session{font-size:var(--fs-base);color:var(--color-text-secondary);font-weight:500;margin-top:1px}
.history-item .hi-summary{font-size:var(--fs-base);color:var(--color-text-primary);margin-top:6px;line-height:1.4}
/* Nombre a la izquierda, series a la derecha: el mismo ListRow que el resto del
   producto (§6.x). Las cifras en tabulares para que las columnas de dos
   sesiones distintas se puedan comparar de un vistazo. */
/* Dos columnas reales, no `space-between`. Empujar el nombre a un extremo y sus
   series al otro deja un vacío que crece con la tarjeta: 306px incluso con el
   tope de --measure-panel puesto. A esa distancia el ojo pierde la línea entre
   "Peso Muerto" y su 95×5, que es justo lo que la fila tenía que resolver.
   La columna de nombres mide lo que mida el más largo de la tarjeta y las
   series arrancan pegadas a ella; como comparten rejilla, siguen alineadas
   entre sí de una fila a otra, que era la otra mitad del objetivo. */
.hi-rows{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);
  column-gap:var(--sp-4);row-gap:2px;margin-top:2px}
.hi-row{display:contents}
.hi-ex{color:var(--color-text-primary);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-sets{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.hi-pr{font-size:var(--fs-2xs);background:var(--color-accent-text);color:var(--color-on-fill);
  padding:2px 6px;border-radius:var(--radius-sm);font-weight:700;margin-left:6px}
.history-item .hi-plan{font-size:.6rem;color:var(--color-text-secondary);background:var(--color-surface-2);padding:1px 6px;border-radius:var(--radius-xs);font-weight:600;white-space:nowrap}
/* Editar una fila nunca es la acción primaria de una vista: no es a lo que has
   venido (§8). Era el mismo argumento que ya se aplicó en el historial corporal
   con un override local; se aplica de una vez en el componente y el override de
   Cuerpo pasa a ser redundante en vez de la única excepción. */
.hi-edit-btn{background:var(--color-surface-2);color:var(--color-text-primary);border:none;font-family:var(--font);font-size:var(--fs-sm);font-weight:700;padding:5px 12px;border-radius:var(--radius-lg);cursor:pointer;margin-top:var(--sp-2);transition:background var(--dur-base)}
.hi-edit-btn:active{opacity:.7}
.load-more-btn{display:block;width:100%;background:var(--color-surface-2);border:none;color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-base);font-weight:600;padding:12px;border-radius:var(--radius-lg);cursor:pointer;margin-top:var(--sp-1);transition:background var(--dur-base)}
.load-more-btn:active{background:var(--color-border-subtle)}
/* .calc-result se queda: Cuerpo ya no lo usa (ahora son MetricTiles), pero los
   1RM y los récords de Ajustes sí, y Ajustes no se migra en esta fase. */
.calc-result{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:14px;margin-bottom:var(--sp-2)}
.calc-result .cr-label{font-size:var(--fs-xs);color:var(--color-text-secondary);text-transform:uppercase;font-weight:600;letter-spacing:.5px}
.calc-result .cr-value{font-size:var(--fs-2xl);font-weight:700;color:var(--color-accent-text);letter-spacing:-.02em;margin-top:2px}
.calc-result .cr-sub{font-size:var(--fs-base);color:var(--color-text-secondary);margin-top:2px}
/* ── 4.1 CUERPO ─────────────────────────────────────────────────────────────
   Pantalla migrada. Todo lo que sigue usa tokens y los componentes de §3; no
   hay un solo color, radio, espacio ni duración escrito a mano.

   Las once medidas, en rejilla y con la etiqueta encima. En fila con el campo
   a la derecha, en un monitor quedaban ~370px de vacío entre una etiqueta y su
   campo: la asociación se pierde a partir de la segunda fila. */
.measure-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--gap-tight)}
.measure-grid .field{margin-bottom:0}
.measure-grid input{text-align:center}
.body-measures-hint{margin-bottom:var(--sp-3)}
/* Proporciones: fila de lectura con barra de progreso. El estado (dentro de
   rango / corto / pasado) lo dice el color de la barra y del valor, nunca una
   banda lateral. */
.prop-row{padding:var(--sp-2) 0;border-top:1px solid var(--color-border-ghost)}
.prop-row:first-child{border-top:none}
.prop-label{font:var(--type-caption);color:var(--color-text-secondary)}
.prop-value{font:var(--type-title);letter-spacing:var(--track-title);
  font-variant-numeric:tabular-nums;margin:2px 0 var(--sp-2)}
.prop-target{font:var(--type-caption);color:var(--color-text-secondary)}
.prop-bar{height:4px;background:var(--color-surface-2);border-radius:var(--radius-pill);overflow:hidden}
.prop-fill{height:100%;border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease-standard)}
.prop-row--ok .prop-value{color:var(--color-state-success)}
.prop-row--ok .prop-fill{background:var(--color-state-success)}
.prop-row--low .prop-value{color:var(--color-text-primary)}
.prop-row--low .prop-fill{background:var(--color-text-tertiary)}
.prop-row--high .prop-value{color:var(--color-state-info)}
.prop-row--high .prop-fill{background:var(--color-state-info)}
.prop-row--empty .prop-value{font:var(--type-body);color:var(--color-text-secondary);letter-spacing:0}
.prop-warn{margin:0 0 var(--sp-3)}
/* Altura y edad: parámetros del cálculo, no captura. Se ven como lo que son —
   ajustes discretos al pie de su panel, no un formulario más. */
.body-calc-args{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--gap-tight);margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--color-border-ghost);max-width:var(--measure-form)}
.body-calc-args .field{margin-bottom:0}
/* El presupuesto del acento, aplicado. "Editar" aparece una vez por fila del
   historial: en rojo eran diez acciones primarias compitiendo con la única que
   lo es de verdad ("Registrar medidas"). Editar una fila es secundario por
   definición — no es lo que has venido a hacer a esta pantalla.
   El selector va con .body-history delante porque .hi-edit-btn se declara más
   abajo en la hoja y es la que sigue mandando en el historial de fuerza, que
   todavía no está migrado. */
.body-history .hi-edit-btn{background:var(--color-surface-2);color:var(--color-text-primary);
  font-weight:600;border-radius:var(--radius-md);padding:6px 12px;min-height:44px;margin-top:0}
.modal-overlay{position:fixed;inset:0;background:var(--color-scrim);z-index:var(--z-overlay);display:none;align-items:center;justify-content:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.modal-overlay.open{display:flex}
.modal{background:var(--color-surface-1);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:8px 20px 24px;width:100%;max-width:500px;max-height:75vh;overflow-y:auto;animation:slideUp var(--dur-slow)}
.detail-btn-bar{position:fixed;bottom:0;left:0;right:0;padding:10px 10px calc(14px + env(safe-area-inset-bottom));display:flex;gap:6px;background:var(--color-surface-1);z-index:var(--z-overlay-top);box-shadow:var(--shadow-1)}
.modal::before{content:'';display:block;width:36px;height:5px;background:var(--color-text-tertiary);border-radius:var(--radius-pill);margin:8px auto 16px}
.modal h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-4);letter-spacing:-.01em}
.phase-option{display:flex;align-items:center;gap:14px;padding:14px;background:var(--color-surface-2);border-radius:var(--radius-lg);margin-bottom:var(--sp-2);cursor:pointer;transition:background var(--dur-base),transform var(--dur-instant);border:1.5px solid transparent}
.phase-option:active{transform:scale(.98)}
.phase-option.selected{border-color:var(--color-accent-text);background:var(--color-accent-wash)}
.phase-option .po-num{width:34px;height:34px;border-radius:50%;background:var(--color-surface-1);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-lg)}
.phase-option.selected .po-num{background:var(--color-accent-text);color:var(--color-on-fill)}
.phase-option .po-text{font-size:var(--fs-md)}
.phase-option .po-title{font-weight:700;margin-bottom:1px}
.phase-option .po-desc{color:var(--color-text-secondary);font-size:var(--fs-base)}
.delete-zone{margin-top:var(--sp-6);padding-top:16px}
/* ── 4.2 AJUSTES ────────────────────────────────────────────────────────────
   Migrada. Las filas son .listrow del sistema (§3.7); aquí solo queda lo propio
   de esta pantalla.

   Ajustes es un índice con subpáginas. Las subpáginas son hermanas dentro de la
   misma sección y se alternan con .active, igual que los .str-panel de Entrenar:
   no hay router ni transiciones que mantener, y el DOM de cada una sigue vivo
   —los ids que el JS ya tenía cogidos no cambian de sitio. */
.set-page{display:none}
.set-page.active{display:block}
/* El foco aterriza en el título al abrir una subpágina, para que el lector de
   pantalla anuncie dónde está. Es foco programático sobre algo que no se pulsa:
   el anillo sobraría. */
.set-page .page-title[tabindex]:focus{outline:none}
/* La cabecera de subpágina: volver + título. El botón de volver es el primer
   elemento tabulable, como en cualquier pila de navegación. */
.set-subhead{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--gap-section)}
.set-back{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--color-surface-1);border:none;border-radius:var(--radius-md);
  color:var(--color-text-primary);cursor:pointer;transition:background var(--dur-fast)}
.set-back:hover{background:var(--color-surface-2)}
.set-back svg{width:20px;height:20px}
/* El valor actual a la derecha de cada fila del índice. Es lo que convierte una
   lista de puertas cerradas en algo que se lee de un vistazo: sin esto, plegar
   los ajustes en subpáginas solo escondería. */
.listrow-status{flex-shrink:1;min-width:0;font:var(--type-caption);
  color:var(--color-text-secondary);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Sin configurar" no es un valor: es la ausencia de uno, y se lee distinto. */
.listrow-status--off{color:var(--color-text-tertiary);font-style:italic}
/* Lo que exige saber de APIs se pliega. Cerrado por defecto: quien no sepa qué
   es una Base URL no debería verla para configurar el coach. */
.set-advanced{margin-bottom:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--color-border-ghost)}
.set-advanced>summary{list-style:none;cursor:pointer;min-height:44px;
  display:flex;align-items:center;gap:var(--sp-2);
  font:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--color-text-secondary)}
.set-advanced>summary::-webkit-details-marker{display:none}
.set-advanced>summary::before{content:'›';font-size:var(--fs-xl);font-weight:300;line-height:1;
  transition:transform var(--dur-fast)}
.set-advanced[open]>summary::before{transform:rotate(90deg)}
.set-advanced[open]>summary{margin-bottom:var(--sp-3)}
.settings-card-danger{margin-top:var(--gap-group)}
.zones-preview{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding-bottom:var(--pad-card)}
.zp-chip{font:var(--type-label);letter-spacing:var(--track-label);color:var(--color-text-inverse);
  padding:3px var(--sp-2);border-radius:var(--radius-sm);white-space:nowrap}
.zp-hint{font:var(--type-caption);color:var(--color-text-secondary);font-style:italic}
@media(min-width:640px){
body{max-width:var(--shell);margin:0 auto}
/* right:auto y width:100%: con left:50% y el right:0 de la regla base, la nav
   se quedaba en media pantalla (384px en un viewport de 768) y el max-width no
   llegaba a aplicarse nunca. */
nav{width:100%;max-width:var(--shell);left:50%;right:auto;transform:translateX(-50%)}
.modal-overlay{justify-content:center;align-items:center}
/* Un modal centrado en un monitor no es una hoja inferior: radio completo y
   fadeIn. El ancho no cambia — un formulario de una entrada no se ensancha. */
.modal{border-radius:var(--radius-lg);animation:fadeIn var(--dur-base) ease-out}
.detail-modal .modal,.run-detail-modal .modal{max-width:500px!important;max-height:90vh!important;border-radius:var(--radius-lg)!important;margin:auto}
.detail-btn-bar{max-width:500px;left:50%;transform:translateX(-50%);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.share-editor-overlay{max-width:500px;left:50%;right:auto;transform:translateX(-50%);border-radius:var(--radius-lg)}
}
@media(min-width:1024px){
/* La shell deja de constreñir al body: el rail ocupa la izquierda y el
   contenido se centra en lo que queda. */
body{max-width:none;margin:0;padding-left:var(--rail-w)}
header,main>.section{max-width:var(--shell);margin-inline:auto}
header{padding-inline:var(--sp-6)}
.section{padding:var(--sp-6) var(--sp-8)}
/* nav → rail. El HTML no cambia: ya era un flex de 5 botones icono+etiqueta. */
nav{top:0;bottom:0;left:0;right:auto;width:var(--rail-w);max-width:none;height:100dvh;transform:none;flex-direction:column;justify-content:flex-start;gap:var(--sp-1);border-radius:0;border-right:.5px solid var(--color-border-subtle);padding:var(--sp-5) var(--sp-3) var(--sp-5)}
nav button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:var(--sp-3);padding:11px 14px;font-size:var(--fs-md);font-weight:600;min-height:44px}
nav button svg{width:22px;height:22px;flex-shrink:0}
/* El plegado del rail. La transición la desactiva la regla global de
   prefers-reduced-motion, igual que el resto de la hoja. */
nav{transition:width var(--dur-base) var(--ease-standard)}
body{transition:padding-left var(--dur-base) var(--ease-standard)}
/* Arriba, no abajo: el pie del rail es de Quirón.
   Y es un CONTROL, no un destino: era el primer ítem de la lista, con la misma
   caja, el mismo alto y la misma etiqueta que "Hoy" o "Entrenar", así que
   competía con ellos por la mirada antes de que empezara la navegación de
   verdad. Ahora es un cuadrado de 44 alineado al borde del rail, con la
   etiqueta solo para el lector de pantalla y el nombre en `title` (lo escribe
   rail.js con el atajo). Se lee como el asa del panel, que es lo que es. */
#railToggle{display:flex;align-items:center;justify-content:center;
  align-self:flex-end;width:44px;height:44px;flex:0 0 auto;padding:0;
  margin-bottom:var(--sp-4);color:var(--color-text-tertiary)}
#railToggle>span:not(.material-symbols-outlined){position:absolute;width:1px;
  height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:root.rail-collapsed #railToggle{align-self:center}
#railToggle .material-symbols-outlined{transition:transform var(--dur-base) var(--ease-standard)}
:root.rail-collapsed #railToggle .material-symbols-outlined{transform:rotate(180deg)}
/* Modo icono: se va la etiqueta, el icono se centra y el objetivo sigue
   midiendo 44. El nombre del destino no se pierde — pasa a `title`, que lo
   pone rail.js al plegar. */
:root.rail-collapsed nav{padding-inline:var(--sp-2)}
:root.rail-collapsed nav button{justify-content:center;padding:11px 0;gap:0}
:root.rail-collapsed nav button>span:not(.material-symbols-outlined){
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* El FAB de Quirón se ancla más abajo, con el resto de sus reglas. */
/* Los fijos anclados a la columna se centran contando con el rail. */
.detail-btn-bar,.share-editor-overlay{left:calc(50% + var(--rail-w)/2)}
.toast-container,.toast-restore{left:calc(50% + var(--rail-w)/2)}
.toast-container{bottom:var(--sp-6)}
}
/* Static inline styles extracted from HTML */
/* "Cargada tu última Sesión B (07/06)" es INFORMACIÓN NEUTRA, y llevaba el
   lenguaje visual de una alerta: rojo sobre rosa, con borde teñido. Nada ha
   salido mal — la app está diciendo de dónde vienen las cifras que ves. Pasa a
   superficie 2 con texto secundario (4,68:1 sobre surface2 en claro, 5,76:1 en
   oscuro): se lee, no interrumpe, y devuelve el rojo a la única acción que lo
   merece en esta vista. */
#prefillBanner{display:none;background:var(--color-surface-2);border-radius:var(--radius-lg);padding:10px 14px;margin-bottom:var(--sp-3);align-items:center;justify-content:space-between;gap:var(--sp-2)}
#prefillText{font-size:var(--fs-md);color:var(--color-text-secondary);font-weight:600}
.prefill-clear{background:none;border:none;color:var(--color-text-secondary);font-size:var(--fs-base);font-weight:600;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);white-space:nowrap}
/* #bodyEditBanner ya no tiene reglas propias: es un .banner del sistema (§3.10)
   y se oculta con el atributo `hidden`, no con un display:none escrito a mano. */
.cal-nav-today{flex:1;text-align:center}
.history-filter-wrap{margin-top:var(--sp-3)}
/* Los dos filtros comparten fila mientras quepan: son la misma decisión —qué
   subconjunto miro— y apilarlos los convertía en dos pasos. */
.history-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.history-filters .history-filter-wrap{margin-top:0}
.date-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  background:var(--color-surface-2);border-radius:var(--radius);padding:8px 8px 8px 14px;
  margin-bottom:var(--sp-3);font-size:var(--fs-base);color:var(--color-text-secondary);font-weight:500}
#importFile{display:none}
/* La pastilla mide 50×30, pero el objetivo son 44: el área de toque se estira
   con padding transparente y la pastilla se dibuja dentro con un ::before. Un
   interruptor de 30px de alto es el control más pequeño de la app y está en la
   pantalla que se toca con el móvil en la mano. */
.toggle-btn{width:50px;height:44px;min-height:44px;border:none;background:none;
  position:relative;cursor:pointer;padding:0;flex-shrink:0}
.toggle-btn::before{content:'';position:absolute;top:7px;left:0;width:50px;height:30px;
  border-radius:var(--radius-pill);background:var(--color-surface-2);
  transition:background var(--dur-base)}
.toggle-btn::after{content:'';position:absolute;top:10px;left:3px;width:24px;height:24px;
  border-radius:var(--radius-md);background:var(--color-on-fill);box-shadow:var(--shadow-1);
  transition:transform var(--dur-base)}
.toggle-btn.active::before{background:var(--color-state-success)}
.toggle-btn.active::after{transform:translateX(20px)}
.offline-banner{position:fixed;top:0;left:0;right:0;background:var(--color-state-danger);color:var(--color-on-fill);font-family:var(--font);font-size:var(--fs-base);font-weight:600;text-align:center;padding:4px 12px;z-index:var(--z-overlay);transform:translateY(-100%);transition:transform var(--dur-slow) ease}
.offline-banner.visible{transform:translateY(0)}
.sync-indicator{font-size:var(--fs-sm);color:var(--color-text-secondary);display:none;align-items:center;gap:var(--sp-1)}
.sync-indicator.visible{display:flex}
.sync-indicator.syncing{color:var(--color-accent-text)}
.sync-indicator.syncing::before{content:'';width:10px;height:10px;border:2px solid var(--color-accent-text);border-top-color:transparent;border-radius:50%;animation:spin var(--dur-spin) linear infinite}
.sync-indicator.ok{color:var(--color-state-success)}
.sync-indicator.error{color:var(--color-state-danger)}
.drive-status{font:var(--type-caption);padding:var(--sp-2) 0;margin:0;text-align:center}
.drive-status:empty{display:none}
.drive-success{background:var(--color-success-wash);color:var(--color-state-success)}
.drive-error{background:var(--color-danger-wash);color:var(--color-state-danger)}
#driveBackupBtn:disabled,#driveRestoreBtn:disabled,#driveRevisionsBtn:disabled{opacity:.5;pointer-events:none}
/* Share card (detail modal) */
.detail-modal .modal{padding:0;overflow:hidden;width:100%;max-width:100%;max-height:100vh;display:flex;flex-direction:column;border-radius:0}
#shareCard{background:linear-gradient(145deg,var(--share-card-from) 0%,var(--share-card-to) 100%);padding:28px 20px 16px;position:relative;flex:1;display:flex;flex-direction:column;justify-content:center}
.share-bubble-1{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:var(--color-accent-wash)}
.share-bubble-2{position:absolute;bottom:-60px;left:-30px;width:160px;height:160px;border-radius:50%;background:var(--color-accent-wash)}
#shareCardInner{position:relative;z-index:var(--z-raised)}
.share-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);flex-direction:column;text-align:center;gap:6px}
#detailDate{font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--color-accent-text)}
#detailSession{font-weight:800;letter-spacing:-.02em;color:var(--color-text-primary);margin-top:2px}
#detailPhase{font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--color-accent-wash);color:var(--color-accent-text);padding:4px 10px;border-radius:var(--radius-md)}
#detailExercises{display:flex;flex-direction:column;gap:var(--sp-2)}
.detail-ex-name{font-size:var(--fs-lg);font-weight:700;color:var(--color-accent-text);margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:6px}
.detail-ex-accent{width:3px;height:14px;background:var(--color-accent-text);border-radius:var(--radius-pill);display:inline-block}
.detail-pr-tag{font-size:var(--fs-2xs);background:var(--color-accent-text);color:var(--color-on-fill);padding:2px 6px;border-radius:var(--radius-xs);font-weight:700;margin-left:4px}
.detail-sets{display:flex;flex-direction:column;gap:var(--sp-1);align-items:center}
.detail-set-row{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);font-size:var(--fs-lg)}
.detail-set-num{color:var(--color-text-secondary);font-weight:600;width:22px;text-align:right}
.detail-set-kg{color:var(--color-text-primary);font-weight:600;min-width:52px;text-align:right}
.detail-set-reps{color:var(--color-text-secondary)}
.detail-set-single{font-size:var(--fs-lg);color:var(--color-text-primary);text-align:center;font-weight:600}
.detail-stat{flex:1;text-align:center}
.detail-stat-value{font-size:var(--fs-2xl);font-weight:800;color:var(--color-text-primary);letter-spacing:-.02em}
.detail-stat-label{font-size:var(--fs-sm);color:var(--color-text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
#detailNotes{display:none;padding-top:10px;color:var(--color-text-secondary);font-style:italic;text-align:center}
#detailStats{display:flex;gap:0;padding-top:12px}
.share-footer{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-3);padding-top:8px;border-top:.5px solid var(--color-border-ghost)}
.card-brand{color:var(--color-text-tertiary);font-weight:500;letter-spacing:.3px}
.card-brand span{color:var(--color-accent-text)}
.card-url{color:var(--color-text-tertiary)}
/* Detail button bar */
#detailBtnBar{display:none}
.detail-btn-bar .btn{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:12px 8px;font-size:var(--fs-base)}
.detail-close-btn{font-size:var(--fs-md)}
.detail-share-btn{background:var(--color-accent-text);color:var(--color-on-fill);font-weight:700}
#deleteBtn{background:var(--color-state-danger);color:var(--color-on-fill);border:none;border-radius:var(--radius-md);font-weight:700}
/* PR celebration */
#prCelebration{display:none;position:fixed;inset:0;z-index:var(--z-alert);background:var(--color-scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center}
.pr-card{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:28px 24px;max-width:320px;width:90%;text-align:center;animation:slideUp var(--dur-slower) ease}
.pr-icon{font-size:var(--fs-3xl);margin-bottom:var(--sp-2)}
.pr-title{font-size:var(--fs-xl);font-weight:800;color:var(--color-text-primary);margin-bottom:4px}
.pr-subtitle{font-size:var(--fs-md);color:var(--color-text-secondary);margin-bottom:var(--sp-4)}
#prList{text-align:left}
.pr-confirm-btn{margin-top:var(--sp-4);background:var(--color-accent-text);color:var(--color-on-fill);font-weight:700;font-size:var(--fs-lg)}
/* Progress section */
.progress-label{font-size:var(--fs-base);font-weight:600;color:var(--color-text-secondary);margin-bottom:6px;display:block}
#progressExercise{width:100%;padding:12px;border-radius:var(--radius-lg);border:none;background:var(--color-surface-2);color:var(--color-text-primary);font-family:var(--font);font-size:var(--fs-lg);font-weight:600}
#progressChart{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:16px;border:none;min-height:240px;position:relative}
#progressStats{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
#progressHistory{margin-top:var(--sp-4)}
.progress-select-wrap{margin-bottom:var(--sp-4)}
/* Exercise mode cards */
.ex-mode-badge{display:inline-block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:var(--radius-sm);margin-bottom:6px}
.ex-mode-badge.interval{background:var(--color-info-wash);color:var(--color-state-info)}
.ex-mode-badge.tabata{background:var(--color-danger-wash);color:var(--color-state-danger)}
.ex-mode-badge.rounds{background:var(--color-accent-wash);color:var(--color-accent-text)}
.ex-mode-badge.ladder,.ex-mode-badge.pyramid{background:var(--cat-amber-wash);color:var(--cat-amber)}
.ex-mode-badge.amrap{background:var(--color-success-wash);color:var(--color-state-success)}
.ex-mode-badge.emom{background:var(--cat-violet-wash);color:var(--cat-violet)}
.ex-mode-badge.superset{background:var(--cat-orange-wash);color:var(--cat-orange)}
.ex-mode-badge.hiit{background:var(--color-accent-wash);color:var(--color-accent-text)}
.ex-mode-badge.workout{background:var(--cat-indigo-wash);color:var(--cat-indigo)}
.ex-mode-info{font-size:var(--fs-base);color:var(--color-text-secondary);margin-bottom:var(--sp-2);line-height:1.4}
.ex-mode-desc{font-size:var(--fs-base);color:var(--color-text-secondary);margin-bottom:var(--sp-2);line-height:1.4;font-style:italic}
.workout-totals{margin-bottom:8px;padding:8px 10px;background:var(--color-surface-2);border-radius:var(--radius-lg)}
.workout-totals-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin-bottom:4px}
.workout-totals .round-list{margin:0}
.workout-round{margin-bottom:4px}
.workout-round summary.workout-round-title{font-size:var(--fs-base);font-weight:600;color:var(--color-text-secondary);cursor:pointer;padding:4px 0;list-style:none}
.workout-round summary.workout-round-title::before{content:'▸ ';color:var(--color-text-tertiary)}
.workout-round[open] summary.workout-round-title::before{content:'▾ '}
.workout-round .round-list{margin:0 0 4px 12px}
.round-list{margin:6px 0 10px;padding-left:0;list-style:none}
.round-item{font-size:var(--fs-base);color:var(--color-text-primary);padding:4px 0;display:flex;justify-content:space-between}
.round-item:last-child{border-bottom:none}
.round-item .ri-name{font-weight:600}
.round-item .ri-reps{color:var(--color-text-secondary);font-size:var(--fs-base)}
.tabata-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);margin:6px 0 10px}
.tabata-round{font-size:var(--fs-xs);text-align:center;padding:5px 2px;background:var(--color-surface-2);border-radius:var(--radius-xs);font-weight:600;line-height:1.3}
.tabata-round .tr-num{font-size:var(--fs-2xs);color:var(--color-text-secondary);display:block}
/* Exercise inline timer */
.ex-timer-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;margin:8px 0;border-radius:var(--radius-lg);border:1.5px dashed var(--color-border-subtle);background:none;color:var(--color-text-secondary);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:all var(--dur-base)}
.ex-timer-btn:active{transform:scale(.97)}
.ex-timer-btn.hiit-start{background:var(--color-accent-text);color:var(--color-on-fill);border:none;padding:14px 16px;font-size:var(--fs-lg)}
input.partial{border-color:var(--color-text-tertiary);color:var(--color-text-secondary)}
.ex-timer-btn.hiit-start:active{opacity:.85;transform:scale(.97)}
.ex-timer{margin:8px 0;padding:12px;border-radius:var(--radius-lg);text-align:center;transition:background var(--dur-slow),border-color var(--dur-slow)}
.ex-timer.work{background:var(--color-success-wash);border:1.5px solid var(--color-state-success)}
.ex-timer.rest{background:var(--color-danger-wash);border:1.5px solid var(--color-state-danger)}
.ex-timer.neutral{background:var(--color-surface-2);border:1.5px solid transparent}
.ex-timer-phase{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.ex-timer.work .ex-timer-phase{color:var(--color-state-success)}
.ex-timer.rest .ex-timer-phase{color:var(--color-state-danger)}
.ex-timer.neutral .ex-timer-phase{color:var(--color-text-secondary)}
.ex-timer-display{font-size:var(--fs-3xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.ex-timer-round{font-size:var(--fs-base);color:var(--color-text-secondary);margin-top:var(--sp-1)}
.ex-timer-label{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-top:2px;font-weight:500}
.ex-timer-bar{height:4px;border-radius:var(--radius-pill);background:var(--color-surface-2);margin:8px 0 4px;overflow:hidden}
.ex-timer-bar-fill{height:100%;border-radius:var(--radius-pill);transition:width var(--dur-base) linear}
.ex-timer.work .ex-timer-bar-fill{background:var(--color-state-success)}
.ex-timer.rest .ex-timer-bar-fill{background:var(--color-state-danger)}
.ex-timer.neutral .ex-timer-bar-fill{background:var(--color-accent-text)}
.ex-timer-actions{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.ex-timer-stop{padding:12px 20px;min-height:44px;border-radius:var(--radius-pill);border:none;font-size:var(--fs-base);font-weight:700;cursor:pointer}
.ex-timer.work .ex-timer-stop{background:var(--color-state-success);color:var(--color-on-fill)}
.ex-timer.rest .ex-timer-stop{background:var(--color-state-danger);color:var(--color-on-fill)}
.ex-timer.neutral .ex-timer-stop{background:var(--color-text-secondary);color:var(--color-on-fill)}
.ex-timer-round-btn{padding:12px 16px;min-height:48px;border-radius:var(--radius-pill);border:1.5px solid var(--color-accent-text);background:none;color:var(--color-accent-text);font-size:var(--fs-base);font-weight:700;cursor:pointer}
.ex-timer-round-btn:active{background:var(--color-accent-text);color:var(--color-on-fill)}
.ex-timer.paused{opacity:.9;border-style:dashed}
.ex-timer.paused .ex-timer-phase::after{content:' · PAUSADO';color:var(--color-text-tertiary);font-size:var(--fs-2xs)}
.ex-timer-resume{padding:12px 0;min-height:44px;border-radius:var(--radius-pill);background:var(--color-accent-text);border:none;color:var(--color-on-fill);font-size:var(--fs-base);font-weight:700;cursor:pointer;flex:1}
.ex-timer-resume:active{opacity:.85}
.ex-timer.paused .ex-timer-stop{background:var(--color-text-tertiary);color:var(--color-on-fill);min-height:44px}
.hiit-ex-list{margin:8px 0 4px;padding:0}
.hiit-ex-item{display:flex;justify-content:space-between;align-items:center;padding:7px 6px;border-bottom:1px solid var(--color-border-subtle);font-size:var(--fs-base);color:var(--color-text-secondary);transition:all var(--dur-base)}
.hiit-ex-item.active{color:var(--color-accent-text);font-weight:700;border-bottom-color:var(--color-accent-text)}
.hiit-ex-item.done{color:var(--color-text-tertiary);text-decoration:line-through;opacity:.45}
.hiit-ex-item .hiit-ex-reps{font-size:var(--fs-sm);color:inherit;margin-left:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hiit-ex-btn{padding:12px 20px;min-height:44px;border-radius:var(--radius-pill);background:var(--color-accent-text);border:none;color:var(--color-on-fill);font-size:var(--fs-base);font-weight:700;cursor:pointer;flex:1}
.hiit-ex-btn:active{opacity:.85}
.ex-timer.hiit-work .ex-timer-stop{flex:1;min-height:44px;background:var(--color-surface-1);color:var(--color-text-secondary);border:1.5px solid var(--color-border-subtle)}
.ex-timer.hiit-done{background:var(--color-success-wash);border:1.5px solid var(--color-state-success)}
.ex-timer.hiit-done .ex-timer-phase{color:var(--color-state-success);font-size:var(--fs-sm);letter-spacing:1px}
.ex-timer.hiit-done .ex-timer-display{color:var(--color-state-success)}
/* Modo foco: fuera todo el cromo. La lista cambia con la reorganización de
   Entrenar — antes eran la barra de contexto y la sub-nav; ahora son la cabecera
   de la pantalla y el bloque de navegación secundaria. */
body.hiit-focus header{display:none}
body.hiit-focus nav{display:none}
body.hiit-focus #secTrain>.page-head{display:none}
body.hiit-focus .subnav{display:none}
body.hiit-focus{padding-bottom:0}
body.hiit-focus .round-list{display:none}
body.hiit-focus .ex-mode-info{display:none}
/* HIIT work/rest phase states */
.ex-timer.hiit-work{background:var(--color-success-wash);border:2px solid var(--color-state-success);border-radius:var(--radius-lg);padding:16px 16px 12px;text-align:center}
.ex-timer.hiit-work .ex-timer-phase{color:var(--color-state-success);font-size:var(--fs-xs);letter-spacing:2px;display:flex;justify-content:space-between;align-items:center}
.ex-timer.hiit-work .ex-timer-display{display:none}
.ex-timer.hiit-rest{background:var(--color-surface-2);border:1.5px solid var(--color-accent-text);border-radius:var(--radius-lg);padding:20px 16px 16px;text-align:center}
.ex-timer.hiit-rest .ex-timer-phase{color:var(--color-accent-text);font-size:var(--fs-xs);letter-spacing:2px;display:flex;justify-content:space-between;align-items:center}
.hiit-session-elapsed{font-size:var(--fs-xs);font-weight:600;letter-spacing:.5px;color:var(--color-text-secondary);font-variant-numeric:tabular-nums;opacity:.75}
.ex-timer.hiit-rest .ex-timer-display{font-size:var(--fs-4xl);color:var(--color-text-primary);line-height:1;margin:8px 0}
.hiit-rest-next{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-bottom:12px}
.hiit-rest-next strong{color:var(--color-text-primary);font-weight:700}
.hiit-skip-btn{width:100%;padding:16px;min-height:52px;border-radius:var(--radius-lg);border:1.5px solid var(--color-accent-text);background:none;color:var(--color-accent-text);font-family:var(--font);font-size:var(--fs-lg);font-weight:700;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.hiit-skip-btn:active{background:var(--color-accent-text);color:var(--color-on-fill);transform:scale(.97)}
.hiit-rounds-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:10px}
.hrd{width:10px;height:10px;border-radius:50%;border:2px solid var(--color-state-success);background:transparent;transition:background var(--dur-base),transform var(--dur-base)}
.hrd.filled{background:var(--color-state-success)}
.hrd.just-completed{animation:hrd-pop var(--dur-slow) ease-out}
/* Circuit variant — usa --accent (rojo) en lugar de --green */
.ex-timer.circuit-work{background:var(--color-accent-wash);border:2px solid var(--color-accent-text);border-radius:var(--radius-lg);padding:16px 16px 12px;text-align:center}
.ex-timer.circuit-work .ex-timer-phase{color:var(--color-accent-text);font-size:var(--fs-xs);letter-spacing:2px;display:flex;justify-content:space-between;align-items:center}
.ex-timer.circuit-work .ex-timer-display{display:none}
.ex-timer.circuit-work .ex-timer-stop{flex:1;min-height:44px;background:var(--color-surface-1);color:var(--color-text-secondary);border:1.5px solid var(--color-border-subtle)}
.ex-timer.circuit-work .hrd{border-color:var(--color-accent-text)}
.ex-timer.circuit-work .hrd.filled{background:var(--color-accent-text)}
.ex-timer.circuit-work .hiit-ex-item.active{color:var(--color-accent-text);border-bottom-color:var(--color-accent-text)}
.hiit-illus{display:flex;justify-content:center;align-items:center;min-height:0;margin:2px 0}
.hiit-illus:empty{display:none}
.hiit-illus .ex-pict{width:96px;height:96px}
.hiit-ex-item.rest-step{color:var(--color-text-tertiary);font-style:italic}
.hiit-ex-item.rest-step.active{color:var(--color-accent-text);font-style:normal;border-bottom-color:var(--color-accent-text)}
.ex-timer.step-rest{background:var(--color-surface-2);border-color:var(--color-accent-text)}
.ex-timer.step-rest .ex-timer-phase{color:var(--color-accent-text)}
.hiit-side-cue{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--radius-sm);background:var(--color-accent-text);color:var(--color-on-fill);font-size:var(--fs-xs);font-weight:700;letter-spacing:.3px}
.hiit-rest-adj{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.hiit-rest-tip{font-size:var(--fs-sm);color:var(--color-text-secondary);line-height:1.4;margin:0 0 12px;padding:0 4px}
.ex-timer.hiit-prep{background:var(--color-surface-2);border:2px solid var(--color-state-success);border-radius:var(--radius-lg);padding:20px 16px 16px;text-align:center}
.ex-timer.hiit-prep .ex-timer-phase{color:var(--color-state-success);font-size:var(--fs-xs);letter-spacing:2px}
.hiit-prep-count{font-size:4rem;font-weight:800;line-height:1;margin:6px 0;font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.hiit-prep-next{font-size:var(--fs-sm);color:var(--color-text-secondary);margin:8px 0 14px}
.hiit-prep-next strong{color:var(--color-text-primary)}
.hiit-prep-skip{width:100%;padding:14px;min-height:48px;border-radius:var(--radius-lg);border:1.5px solid var(--color-state-success);background:none;color:var(--color-state-success);font-family:var(--font);font-size:var(--fs-base);font-weight:700;cursor:pointer}
.hiit-prep-skip:active{background:var(--color-state-success);color:var(--color-on-fill);transform:scale(.97)}
.ex-timer.circuit-done{background:var(--color-accent-wash);border:1.5px solid var(--color-accent-text)}
.ex-timer.circuit-done .ex-timer-phase{color:var(--color-accent-text);font-size:var(--fs-sm);letter-spacing:1px}
.ex-timer.circuit-done .ex-timer-display{color:var(--color-accent-text)}
/* Toast notifications */
.toast-container{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);pointer-events:none}
.toast{background:var(--color-text-primary);color:var(--color-surface-0);font-family:var(--font);font-size:var(--fs-md);font-weight:600;padding:10px 20px;border-radius:var(--radius-pill);opacity:0;transform:translateY(20px);transition:opacity var(--dur-base),transform var(--dur-base);pointer-events:auto;max-width:90vw;text-align:center}
.toast.visible{opacity:1;transform:translateY(0)}
.toast-success{background:var(--color-state-success);color:var(--color-on-fill)}
.toast-error{background:var(--color-state-danger);color:var(--color-on-fill)}
.update-banner{position:fixed;top:0;left:0;right:0;background:var(--color-accent-text);color:var(--color-on-fill);font-family:var(--font);font-size:var(--fs-md);font-weight:600;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;z-index:var(--z-alert);gap:var(--sp-3)}
.update-banner button{background:var(--color-on-fill);color:var(--color-accent-text);border:none;border-radius:var(--radius-sm);padding:6px 16px;font-family:var(--font);font-size:var(--fs-md);font-weight:700;cursor:pointer;flex-shrink:0}
.toast-info{background:var(--color-text-primary);color:var(--color-surface-0)}
.toast-action{background:none;border:none;color:inherit;font-family:var(--font);font-size:var(--fs-md);font-weight:800;text-decoration:underline;cursor:pointer;margin-left:8px;padding:0}
.toast-restore{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(30px);z-index:var(--z-toast-top);background:var(--color-surface-2);color:var(--color-text-primary);font-family:var(--font);border-radius:var(--radius-lg);padding:16px;max-width:92vw;width:360px;box-shadow:var(--shadow-3);opacity:0;transition:opacity var(--dur-slow),transform var(--dur-slow)}
.toast-restore.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-restore-msg{font-size:var(--fs-md);line-height:1.4;margin-bottom:var(--sp-3)}
.toast-restore-actions{display:flex;gap:var(--sp-2);justify-content:flex-end}
.toast-restore-actions button{border:none;border-radius:var(--radius-md);padding:8px 18px;font-family:var(--font);font-size:var(--fs-md);font-weight:700;cursor:pointer}
.toast-restore-yes{background:var(--color-state-success);color:var(--color-on-fill)}
.toast-restore-no{background:var(--color-surface-1);color:var(--color-text-secondary)}
/* ── Campos precargados ───────────────────────────────────
   Eran catorce rectángulos rosados por sesión: el fondo teñido de acento
   repetido campo a campo convertía el rojo de marca en textura y hacía que una
   sesión sin empezar pareciera un formulario con errores.
   Lo que hay que decir es "esto es una propuesta, todavía no lo has
   confirmado", y eso se dice con la TIPOGRAFÍA (cifra en secundario en vez de
   en tinta) y con el trazo discontinuo, no con color. Al escribir encima, JS ya
   quita la clase y la cifra pasa a tinta: el cambio de peso visual es la
   confirmación. El discontinuo va en --color-text-tertiary (3,36:1 en claro,
   4,85:1 en oscuro sobre el lienzo), por encima del 3,0 de 1.4.11. */
input.prefilled{background:var(--color-surface-2);border:1px dashed var(--color-text-tertiary);color:var(--color-text-secondary)}
input.prefilled:focus{background:var(--color-surface-1);border:1px solid transparent;color:var(--color-text-primary)}
/* Custom programs list */
/* Los planes importados son filas del sistema con un badge y una acción de
   borrado en terciario: en rojo, cada plan traía su propia acción destructiva
   compitiendo con todo lo demás de la pantalla. */
.custom-prog-item{display:flex;align-items:center;gap:var(--gap-tight);
  padding:var(--sp-3) 0;border-top:1px solid var(--color-border-ghost);min-height:52px}
.custom-prog-name{flex:1;min-width:0;font:var(--type-body-strong)}
.custom-prog-desc{font:var(--type-caption);color:var(--color-text-secondary)}
.custom-prog-badge{flex-shrink:0;font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;background:var(--color-surface-2);color:var(--color-text-secondary);
  padding:2px var(--sp-2);border-radius:var(--radius-pill)}
.custom-prog-del{flex-shrink:0;background:none;border:none;color:var(--color-state-danger);
  font:var(--type-caption);font-weight:600;cursor:pointer;padding:var(--sp-2);
  min-height:44px;font-family:var(--font)}
/* Program selector modal */
.prog-modal-item{display:flex;align-items:center;gap:var(--sp-2);padding:12px;border-radius:var(--radius-lg);cursor:pointer;transition:background var(--dur-fast)}
.prog-modal-item:active{background:var(--color-surface-2)}
.prog-modal-item.active{background:var(--color-accent-wash);border:1px solid var(--color-accent-soft)}
.prog-modal-name{font-size:var(--fs-lg);font-weight:700;color:var(--color-text-primary)}
.prog-modal-desc{font-size:var(--fs-base);color:var(--color-text-secondary);margin-top:2px}
/* ── Running Section ─────────────────────────────────── */


/* Sub-navigation: ver §3.11 (Segmented). */

/* Panels */
.run-panel{display:none}
.run-panel.active{display:block;animation:fadeIn var(--dur-base) var(--ease-standard)}
.str-panel{display:none}
.str-panel.active{display:block;animation:fadeIn var(--dur-base) var(--ease-standard)}
/* Segment cards */
.run-seg-bar{display:flex;height:10px;border-radius:var(--radius-pill);overflow:hidden;margin-bottom:14px}
.run-seg-bar-block{min-width:2px}
.run-seg-bar-gap{width:3px;background:var(--color-surface-0);flex-shrink:0}
/* La zona del segmento la marca el chip de color de `.run-seg-zone`, no una
   banda de acento en el borde. */
.run-segment-card{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:14px;margin-bottom:var(--sp-2)}
.run-seg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.run-seg-name{font-size:var(--fs-md);font-weight:700}
.run-seg-zone{font-size:var(--fs-xs);font-weight:700;color:var(--color-on-fill);padding:2px 8px;border-radius:var(--radius-md)}
.run-seg-info{font-size:var(--fs-base);color:var(--color-text-secondary);margin-bottom:var(--sp-2);font-weight:500}
.run-seg-inputs{display:flex;gap:var(--sp-2)}
.run-seg-inputs>div{flex:1}
.run-seg-inputs input{padding:8px 6px;font-size:var(--fs-lg);text-align:center;border-radius:var(--radius-sm)}
/* Pace display */
.run-pace-display{text-align:center;font-size:var(--fs-xl);font-weight:700;color:var(--color-accent-text);margin:-4px 0 16px;display:none}
/* Summary section */
.run-summary{margin-top:var(--sp-2)}
/* Context bar for running */
.run-context-bar{margin-bottom:var(--sp-2)}
/* History cards */
.run-history-card{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:14px;margin-bottom:var(--sp-2)}
.run-hist-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.run-hist-date{font-size:var(--fs-base);color:var(--color-text-secondary);font-weight:600}
.run-hist-type{flex-shrink:0}
.run-hist-session{font-size:var(--fs-md);font-weight:700;margin-bottom:2px}
.run-hist-details{font-size:var(--fs-md);font-weight:600;color:var(--color-text-primary)}
.run-hist-extras{font-size:var(--fs-base);color:var(--color-text-secondary);margin-top:var(--sp-1);font-weight:500}
.run-hist-actions{display:flex;gap:6px;margin-top:10px}
.run-hist-actions button{font-size:var(--fs-base);padding:6px 12px}
/* Weekly bar chart */
.run-chart{min-height:160px;margin-bottom:var(--sp-2)}
.run-bar-chart{display:flex;align-items:flex-end;gap:var(--sp-1);height:150px;padding:0 4px}
.run-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.run-bar-value{font-size:var(--fs-2xs);font-weight:700;color:var(--color-text-secondary);margin-bottom:4px}
.run-bar{width:100%;background:var(--color-accent-text);border-radius:var(--radius-xs) var(--radius-xs) 0 0;min-height:3px;transition:height var(--dur-slow)}
.run-bar-label{font-size:var(--fs-2xs);color:var(--color-text-secondary);margin-top:var(--sp-1);font-weight:600}
/* Pace evolution SVG chart */
.run-pace-svg{width:100%;height:120px;display:block}
.run-pace-labels{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--color-text-secondary);font-weight:600;margin-top:-4px}
.run-pace-dates{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--color-text-secondary);margin-top:2px}
/* ── Running: Goal card ──────────────────────────────── */
.run-goal-card{background:var(--color-surface-1);border-radius:var(--radius-xl);
  padding:var(--pad-card);margin-bottom:var(--gap-stack)}
.run-goal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.run-goal-title{font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary)}
.run-goal-settings{background:none;border:none;color:var(--color-text-secondary);
  cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md)}
.run-goal-body{display:flex;align-items:center;gap:var(--sp-4)}
.run-goal-ring{position:relative;width:100px;height:100px;flex-shrink:0}
.run-goal-ring svg{width:100%;height:100%}
.run-goal-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.run-goal-current{font:var(--type-metric);letter-spacing:var(--track-metric);
  font-variant-numeric:tabular-nums;color:var(--color-text-primary);line-height:1}
.run-goal-unit{font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary)}
.run-goal-info{flex:1}
.run-goal-target{font:var(--type-body-strong);color:var(--color-text-primary);margin-bottom:4px}
.run-goal-sessions{font:var(--type-caption);color:var(--color-text-secondary)}
.run-plan-pills{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.run-plan-pill{font:var(--type-label);letter-spacing:var(--track-label);
  padding:3px var(--sp-2);border-radius:var(--radius-pill);
  background:var(--color-surface-2);color:var(--color-text-secondary)}
.run-plan-pill.done{background:var(--color-success-wash);color:var(--color-state-success)}
.run-goal-nogoal{font:var(--type-caption);color:var(--color-text-secondary);text-align:center;padding:var(--sp-3) 0}
/* ── Running: Personal Records card ──────────────────── */
.run-next-card{background:var(--color-surface-1);border-radius:var(--radius-xl);
  padding:var(--pad-card);margin-bottom:var(--gap-stack)}
.run-next-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-2)}
.run-next-label{font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary)}
.run-next-week{font:var(--type-caption);color:var(--color-text-secondary)}
.run-next-name{font:var(--type-title-lg);letter-spacing:var(--track-title-lg);margin-bottom:4px}
.run-next-desc{font:var(--type-caption);color:var(--color-text-secondary);margin-bottom:var(--sp-3)}
.run-prs-card{background:var(--color-surface-1);border-radius:var(--radius-xl);
  padding:var(--pad-card);margin-bottom:var(--gap-stack)}
/* El récord recién batido se marca con fondo teñido, nunca con banda lateral. */
.run-pr-item.new-pr{background:var(--color-accent-wash);animation:prPulse var(--dur-slower) ease}
/* ── Running: acciones de entrada ─────────────────────
   Importar es la vía principal y la única acción primaria de la pantalla; el
   registro manual y la carrera libre son terciarias. Son .btn del sistema; lo
   único propio es que la principal ocupe el ancho. */
/* La acción principal ocupa el ancho, pero no más allá de la medida de un
   formulario: en un monitor, 940px de botón no son un botón. */
.run-start-btn{margin-bottom:var(--sp-2);max-width:var(--measure-form)}
.run-start-btn svg{flex-shrink:0}
.run-secondary-actions{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:var(--sp-2)}
.run-secondary-sep{width:1px;height:20px;background:var(--color-border-subtle)}
/* ── Running: UI Lock (black screen keep-alive) ──────── */
.run-ui-lock{display:none;position:fixed;inset:0;z-index:var(--z-immersive-top);background:var(--color-blackout);flex-direction:column;align-items:center;justify-content:center;color:var(--color-blackout-text);user-select:none;-webkit-user-select:none;touch-action:none}
.run-ui-lock.active{display:flex}
.run-ui-lock-content{text-align:center}
.run-ui-lock-content .material-symbols-outlined{font-size:48px}
.run-ui-lock-content p{margin:8px 0 0;font-size:var(--fs-base);font-weight:600}
.run-ui-lock-hint{font-size:var(--fs-sm)!important;font-weight:400!important;color:var(--color-blackout-hint)}
.run-ui-lock-progress{position:absolute;bottom:0;left:0;height:4px;background:var(--color-accent-text);width:0;transition:width var(--dur-instant) linear}
/* ── Running: GPS gap warning in summary ─────────────── */
.run-sum-gap-warn{background:var(--color-warning-wash);border-radius:var(--radius-lg);padding:10px 14px;font:var(--type-caption);color:var(--color-state-warning);text-align:center;margin-bottom:var(--sp-3)}
/* ── Running: GPS Tracking Overlay ───────────────────── */
.run-tracking-overlay{display:none;position:fixed;inset:0;z-index:var(--z-immersive);background:var(--color-surface-0);flex-direction:column;overflow:hidden}
.run-tracking-overlay.active{display:flex}
.run-live{display:flex;flex-direction:column;height:100%;position:relative}
.run-live-top{display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 16px 8px;background:var(--color-surface-1)}
.run-live-data{display:contents}
.run-live-btn{background:var(--color-surface-2);border:none;width:52px;min-height:44px;height:auto;border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px 4px;cursor:pointer;color:var(--color-text-primary)}
.run-live-btn:active{opacity:.7}
.run-live-btn-label{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.3px;line-height:1;white-space:nowrap;color:inherit;opacity:.8}
.run-live-controls{display:flex;gap:var(--sp-2);align-items:flex-start}
.run-live-center-status{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0}
.run-stop-btn{background:var(--color-state-danger);color:var(--color-on-fill)}
.run-stop-btn .run-live-btn-label{opacity:1}
.run-live-status{font-size:var(--fs-md);font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--color-accent-text)}
.run-live-status.paused{color:var(--color-state-danger);animation:status-blink 1.5s ease-in-out infinite}
.run-live-timer{font-size:var(--fs-4xl);font-weight:800;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.03em;padding:8px 0 4px;color:var(--color-text-primary)}
.run-live-metrics{display:flex;justify-content:center;gap:var(--sp-8);padding:0 20px 12px}
.run-live-metric{text-align:center}
.run-live-metric-value{font-size:var(--fs-3xl);font-weight:800;color:var(--color-text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.run-live-metric-label{font-size:var(--fs-xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}
.run-live-splits{padding:0 16px;max-height:80px;overflow-y:auto;margin-bottom:var(--sp-2)}
.run-live-split{display:flex;justify-content:space-between;padding:4px 8px;font-size:var(--fs-base);font-weight:600;border-bottom:.5px solid var(--color-border-subtle)}
.run-live-split-km{color:var(--color-text-secondary)}
.run-live-split-pace{color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.run-live-map{flex:1;min-height:150px;background:var(--color-surface-2);position:relative}
.run-live-map .leaflet-container{height:100%;width:100%}
.run-live-bottom{display:flex;justify-content:center;padding:16px 20px max(16px,env(safe-area-inset-bottom));background:var(--color-surface-1)}
.run-pause-btn{width:64px;height:64px;border-radius:50%;background:var(--color-accent-text);border:none;color:var(--color-on-fill);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur-instant);box-shadow:var(--shadow-action)}
.run-pause-btn:active{transform:scale(.92)}
.run-pause-btn.paused svg{display:none}
.run-pause-btn.paused::after{content:'';width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent var(--color-on-fill);margin-left:4px}
/* Auto-pause toggle */
.run-autopause-btn.active{background:var(--color-state-success);color:var(--color-on-fill)}
/* Timer blink on auto-pause */
.run-live-timer.auto-paused{animation:autopause-blink 1.2s ease-in-out infinite}
/* HR monitor button states */
.run-hr-btn.connected{background:var(--color-state-danger);color:var(--color-on-fill)}
.run-hr-btn.connected svg{fill:currentColor}
.run-hr-btn.connecting{animation:hr-pulse 1s ease-in-out infinite}
.run-live-hr .run-live-metric-value{transition:color var(--dur-slow);font-variant-numeric:tabular-nums}
.run-live-hr .run-live-metric-label{transition:color var(--dur-slow);font-variant-numeric:tabular-nums}
.run-type-hr-btn.hr-connected{border-color:var(--color-state-success);color:var(--color-state-success)}
/* HR detail section */
.run-detail-hr-section{margin-top:var(--sp-3)}
.run-detail-hr-title{font-size:var(--fs-base);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;margin-top:var(--sp-3)}
.run-detail-hr-graph{background:var(--color-surface-2);border-radius:var(--radius-sm);padding:8px;overflow:hidden}
.hr-zone-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.hr-zone-bar-label{font-size:var(--fs-base);font-weight:700;width:20px;text-align:center}
.hr-zone-bar-track{flex:1;height:14px;background:var(--color-surface-2);border-radius:var(--radius-xs);overflow:hidden}
.hr-zone-bar-fill{height:100%;border-radius:var(--radius-xs);transition:width var(--dur-slow)}
.hr-zone-bar-time{font-size:var(--fs-base);font-weight:600;color:var(--color-text-primary);width:36px;text-align:right;font-variant-numeric:tabular-nums}
.hr-zone-bar-pct{font-size:var(--fs-sm);color:var(--color-text-secondary);width:28px;text-align:right}
/* ── Run type picker modal ───────────────────────────── */
.run-type-picker{max-width:400px}
.run-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin:12px 0}
.run-type-card{padding:12px;border:2px solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:border-color var(--dur-fast),background var(--dur-fast)}
.run-type-card.selected{border-color:var(--color-accent-text);background:color-mix(in srgb,var(--color-accent-text) 10%,transparent)}
.run-type-card-name{font-weight:600;font-size:var(--fs-lg);margin-bottom:2px}
.run-type-card-desc{font-size:var(--fs-base);color:var(--color-text-secondary);line-height:1.3}
.run-type-card-zone{display:inline-block;font-size:var(--fs-sm);padding:1px 6px;border-radius:var(--radius-xs);color:var(--color-on-fill);margin-top:var(--sp-1);font-weight:600}
.run-type-extra{margin-top:var(--sp-2)}
.run-type-extra label{font-size:var(--fs-md);color:var(--color-text-secondary)}
.run-type-extra input{width:100%;margin-top:var(--sp-1)}
/* ── Live type panel & badge ─────────────────────────── */
.run-live-type-badge{font-size:var(--fs-sm);padding:2px 8px;border-radius:var(--radius-xs);color:var(--color-on-fill);font-weight:600;display:none}
.run-live-type-badge.visible{display:inline-block}
.run-live-type-panel{padding:0 16px;min-height:0;transition:min-height var(--dur-base)}
.run-live-type-panel:empty{display:none}
/* Session progress bar */
.run-session-progress{display:flex;gap:var(--sp-1);padding:8px 16px;align-items:center}
.run-session-seg{flex:1;height:28px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600;color:var(--color-on-fill);opacity:.35;transition:opacity var(--dur-slow),transform var(--dur-base);overflow:hidden;white-space:nowrap;padding:0 6px}
.run-session-seg.active{opacity:1;transform:scaleY(1.15)}
.run-session-seg.done{opacity:.5}
/* Steady segment panel */
.run-type-steady-seg{padding:6px 0}
.run-type-steady-info{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:var(--fs-md)}
.run-type-steady-name{font-weight:600;color:var(--color-text-primary)}
.run-type-steady-remaining{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-xl)}
.run-type-steady-bar{height:4px;background:var(--color-border-subtle);border-radius:var(--radius-pill);overflow:hidden}
.run-type-steady-bar-fill{height:100%;border-radius:var(--radius-pill);transition:width var(--dur-slower) linear}
.run-seg-skip-btn{display:block;margin:10px auto 0;background:var(--color-surface-2);border:none;color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-base);font-weight:600;padding:8px 20px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-base)}
/* Type panel: zone bar */
.run-type-zone-bar{display:flex;align-items:center;gap:var(--sp-2);padding:8px 12px;border-radius:var(--radius-sm);font-size:var(--fs-lg);font-weight:600;color:var(--color-on-fill)}
.run-type-zone-bar .zone-label{opacity:.85;font-weight:400}
/* Type panel: pace comparison (tempo) */
.run-type-pace-compare{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:8px 0}
.run-type-pace-target{text-align:center}
.run-type-pace-target-value{font-size:var(--fs-xl);font-weight:700}
.run-type-pace-target-label{font-size:var(--fs-base);color:var(--color-text-secondary)}
.run-type-pace-delta{font-size:var(--fs-2xl);font-weight:700;padding:4px 12px;border-radius:var(--radius-sm)}
.run-type-pace-delta.faster{color:var(--color-state-success);background:var(--color-success-wash)}
.run-type-pace-delta.slower{color:var(--color-state-danger);background:var(--color-danger-wash)}
/* Type panel: competition progress */
.run-type-race{text-align:center;padding:6px 0}
.run-type-race-remaining{font-size:var(--fs-2xl);font-weight:700}
.run-type-race-label{font-size:var(--fs-base);color:var(--color-text-secondary)}
.run-type-race-eta{font-size:var(--fs-lg);color:var(--color-text-secondary);margin-top:var(--sp-1)}
.run-type-race-bar{height:6px;background:var(--color-border-subtle);border-radius:var(--radius-pill);margin-top:6px;overflow:hidden}
.run-type-race-bar-fill{height:100%;background:var(--color-accent-text);border-radius:var(--radius-pill);transition:width var(--dur-slower)}
/* Type panel: intervals */
.run-type-interval{text-align:center;padding:6px 0}
.run-type-interval-rep{font-size:var(--fs-2xl);font-weight:700}
.run-type-interval-phase{font-size:var(--fs-lg);font-weight:600;padding:3px 12px;border-radius:var(--radius-xs);display:inline-block;margin-top:var(--sp-1)}
.run-type-interval-phase.work{background:var(--cat-orange);color:var(--color-on-fill)}
.run-type-interval-phase.rest{background:var(--color-state-success);color:var(--color-on-fill)}
.run-type-interval-seg{font-size:var(--fs-base);color:var(--color-text-secondary);margin-top:var(--sp-1)}
.run-type-interval-lap-btn{margin-top:var(--sp-2);padding:8px 24px;border:2px solid var(--color-accent-text);border-radius:var(--radius-sm);background:transparent;color:var(--color-accent-text);font-weight:700;font-size:var(--fs-lg);cursor:pointer}
/* Type panel: cuestas */
.run-type-elev{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);padding:8px 0}
.run-type-elev-value{font-size:var(--fs-2xl);font-weight:700}
.run-type-elev-label{font-size:var(--fs-base);color:var(--color-text-secondary)}
/* ── Running: Post-run summary ───────────────────────── */
.run-summary-screen{padding:max(16px,env(safe-area-inset-top)) 20px 20px;overflow-y:auto;height:100%}
.run-summary-header{font-size:var(--fs-xl);font-weight:800;text-align:center;margin-bottom:var(--sp-4);color:var(--color-text-primary)}
.run-summary-big-stats{display:flex;justify-content:center;gap:var(--sp-6);margin-bottom:var(--sp-4)}
.run-summary-stat{text-align:center}
.run-summary-stat-value{font-size:var(--fs-2xl);font-weight:800;color:var(--color-text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.run-summary-stat-label{font-size:var(--fs-xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}
.run-summary-map{height:200px;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--sp-4);background:var(--color-surface-2)}
.run-summary-map .leaflet-container{height:100%;width:100%;border-radius:var(--radius-lg)}
.run-summary-splits-title{font-size:var(--fs-base);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin-bottom:var(--sp-2)}
.run-summary-splits{margin-bottom:var(--sp-4)}
.run-split-row{display:flex;align-items:center;gap:var(--sp-2);padding:8px 0;border-bottom:.5px solid var(--color-border-subtle)}
.run-split-row:last-child{border-bottom:none}
.run-split-km{font-size:var(--fs-base);font-weight:700;color:var(--color-text-secondary);width:40px}
.run-split-pace{font-size:var(--fs-lg);font-weight:700;color:var(--color-text-primary);width:auto;min-width:60px;font-variant-numeric:tabular-nums}
.run-split-hr{font-size:var(--fs-base);color:var(--color-state-danger);margin-left:4px;font-weight:600}
.run-split-bar{flex:1;height:6px;background:var(--color-surface-2);border-radius:var(--radius-pill);overflow:hidden}
.run-split-fill{height:100%;border-radius:var(--radius-pill);transition:width var(--dur-slow)}
.run-split-fast{background:var(--color-state-success)}
.run-split-mid{background:var(--color-accent-text)}
.run-split-slow{background:var(--color-state-danger)}
.run-summary-form{margin-top:var(--sp-2)}
/* ── Running: History cards with map thumbnail ───────── */
.run-history-card{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:14px;margin-bottom:var(--sp-2);cursor:pointer;transition:transform var(--dur-instant)}
.run-history-card:active{transform:scale(.98)}
.run-hist-body{display:flex;gap:var(--sp-3)}
.run-hist-minimap{width:64px;height:64px;border-radius:var(--radius-sm);background:var(--color-surface-2);flex-shrink:0;overflow:hidden;position:relative}
.run-hist-minimap canvas{width:100%;height:100%}
.run-hist-content{flex:1;min-width:0}
.run-hist-splits{font-size:var(--fs-xs);color:var(--color-text-secondary);margin-top:var(--sp-1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── Running: Detail modal ───────────────────────────── */
.run-detail-modal .modal{padding-top:0;overflow:hidden}
#runShareCard{background:linear-gradient(145deg,var(--share-card-from) 0%,var(--share-card-run-to) 100%);padding:20px 20px 12px;position:relative;overflow:hidden}
#runShareCardInner{position:relative;z-index:var(--z-raised)}
#runShareCard .share-footer{margin-top:var(--sp-2)}
#runShareCard + div{padding:0 16px 16px}
.run-detail-header{text-align:center;margin-bottom:var(--sp-4)}
.run-detail-date{font-size:var(--fs-base);font-weight:600;color:var(--color-accent-text);text-transform:uppercase;letter-spacing:.5px}
.run-detail-type{display:inline-block;font-size:var(--fs-xs);font-weight:700;color:var(--color-accent-text);background:var(--color-accent-wash);padding:2px 10px;border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:.3px;margin-top:var(--sp-1)}
.run-detail-session-name{font-size:var(--fs-md);font-weight:700;margin-top:var(--sp-1)}
.run-detail-stats{display:flex;justify-content:center;gap:var(--sp-5);padding:12px 0;border-top:.5px solid var(--color-border-subtle);border-bottom:.5px solid var(--color-border-subtle);margin-bottom:var(--sp-3)}
.run-detail-stat{text-align:center}
.run-detail-stat-value{font-size:var(--fs-xl);font-weight:800;color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.run-detail-stat-label{font-size:var(--fs-2xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}
.run-detail-map{height:180px;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--sp-3);background:var(--color-surface-2)}
.run-detail-map .leaflet-container{height:100%;width:100%;border-radius:var(--radius-lg)}
.run-detail-splits{margin-bottom:var(--sp-2)}
.run-detail-notes{font-size:var(--fs-md);color:var(--color-text-secondary);font-style:italic;padding:8px 0}
/* ── Running: Manual splits input ────────────────────── */
.run-manual-splits{margin-bottom:var(--sp-3)}
.run-split-input-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:6px}
.run-split-input-label{font-size:var(--fs-base);font-weight:600;color:var(--color-text-secondary);width:40px}
.run-split-input-row input{flex:1;padding:8px 10px;font-size:var(--fs-lg)}
.run-split-input-row .run-split-remove{background:none;border:none;color:var(--color-state-danger);font-size:var(--fs-base);cursor:pointer;padding:4px 8px}
/* ── Onboarding ─────────────────────────────────────────── */
.onboarding-overlay{position:fixed;inset:0;background:var(--color-scrim);z-index:var(--z-alert);display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.onboarding-overlay.visible{display:flex}
.onboarding-card{background:var(--color-surface-1);border-radius:var(--radius-pill);padding:40px 28px 28px;max-width:340px;width:90%;text-align:center}
.onboarding-step{display:none}
.onboarding-step.active{display:block}
.onboarding-icon{font-size:var(--fs-4xl);margin-bottom:var(--sp-4)}
.onboarding-card h2{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--sp-2)}
.onboarding-card p{font-size:var(--fs-md);color:var(--color-text-secondary);line-height:1.5;margin-bottom:var(--sp-5)}
.onboarding-dots{display:flex;justify-content:center;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.onboarding-dot{width:8px;height:8px;border-radius:50%;background:var(--color-border-subtle)}
.onboarding-dot.active{background:var(--color-accent-text)}
/* ── Wizard / Stepper ───────────────────────────────────── */
.wizard{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.wiz-header{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:var(--sp-5)}
.wiz-step-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--color-border-subtle);background:none;color:var(--color-text-tertiary);font-family:var(--font);font-size:var(--fs-md);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:default;transition:all var(--dur-base);flex-shrink:0}
.wiz-step-dot.active{border-color:var(--color-accent-text);background:var(--color-accent-text);color:var(--color-on-fill);cursor:default}
.wiz-step-dot.done{border-color:var(--color-state-success);background:var(--color-state-success);color:var(--color-on-fill);cursor:pointer}
.wiz-step-line{flex:1;height:2px;background:var(--color-border-subtle);max-width:40px;transition:background var(--dur-base)}
.wiz-step-line.done{background:var(--color-state-success)}
.wiz-title{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--sp-4);letter-spacing:-.01em}
.wiz-body{min-height:120px;margin-bottom:var(--sp-5)}
.wiz-footer{display:flex;gap:var(--sp-2)}
.wiz-footer .btn{flex:1;padding:12px;font-size:var(--fs-md)}
.wiz-cancel{flex:0 0 auto !important;width:auto;padding:12px var(--sp-4) !important}
.wiz-back{flex:0 0 auto !important;width:auto;padding:12px var(--sp-4) !important}
/* ── Sortable list ──────────────────────────────────────── */
.sortable-dragging{position:fixed;z-index:var(--z-nav);opacity:.9;box-shadow:var(--shadow-3);pointer-events:none;transition:none}
.sortable-placeholder{background:var(--color-surface-2);border:2px dashed var(--color-border-subtle);border-radius:var(--radius-lg);opacity:.5}
/* ── 4.4 HOY ────────────────────────────────────────────────────────────────
   Migrada. El bento de anillos se queda —es identidad, no sedimento—; lo que
   cambia es el peso relativo de las cosas. */
.dash-greeting{margin-bottom:var(--gap-group)}
.dash-greeting-label{font:var(--type-label);letter-spacing:.15em;text-transform:uppercase;
  color:var(--color-text-secondary);margin-bottom:var(--sp-1)}
.dash-greeting-title{font:var(--type-display);letter-spacing:var(--track-display)}
.dash-greeting-quote{font:var(--type-caption);color:var(--color-text-secondary);
  font-style:italic;margin-top:var(--sp-2)}
.dash-week-title{margin-top:var(--gap-group)}
.dash-bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-stack);margin-bottom:var(--gap-group)}
.dash-card{background:var(--color-surface-1);border-radius:var(--radius-xl);padding:var(--pad-card);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.dash-card-wide{grid-column:span 2}
.dash-card-label{font:var(--type-label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--color-text-secondary);align-self:flex-start;display:flex;align-items:center;gap:4px}
.dash-card-label .material-symbols-outlined{font-size:14px}
.dash-ring-wrap{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center}
.dash-ring{width:80px;height:80px}
.dash-ring-fill{transition:stroke-dashoffset var(--dur-slow) var(--ease-standard)}
.dash-ring-value{position:absolute;font:var(--type-body-strong);font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--color-text-primary);text-align:center}
/* La racha en tinta. "0 días" en rojo lee como un error, y no lo es: es un
   hecho neutro que la propia tarjeta remata con "Empieza hoy". Las cifras
   destacadas en rojo eran, literalmente, uno de los usos que el §2.3 señala
   como la causa de que el acento dejara de acentuar. */
.dash-streak-value{font:var(--type-metric);letter-spacing:var(--track-metric);
  font-variant-numeric:tabular-nums;color:var(--color-text-primary)}
.dash-streak-sub{font:var(--type-caption);color:var(--color-text-secondary)}
/* UNA acción primaria. Antes eran dos rellenos saturados —rojo y cian— con la
   misma sombra tintada y el mismo peso: la pantalla no decía qué hacer, decía
   "elige". Ahora Fuerza es la primaria y Carrera la secundaria; hacen lo mismo
   que hacían. El color de dominio de la carrera sobrevive en su icono, que es
   donde informa sin convertirse en un segundo acento a pantalla completa. */
.dash-cta-group{display:flex;gap:var(--gap-stack);margin-bottom:var(--gap-group)}
.dash-cta{flex:1;font-weight:800}
.dash-cta-run .material-symbols-outlined{color:var(--color-domain-running)}
.dash-activity{margin-bottom:var(--gap-group)}
.dash-activity-scroll{display:flex;gap:var(--gap-stack);overflow-x:auto;
  padding-bottom:var(--sp-2);-ms-overflow-style:none;scrollbar-width:none}
.dash-activity-scroll::-webkit-scrollbar{display:none}
.dash-act-card{background:var(--color-surface-1);border-radius:var(--radius-xl);
  padding:var(--pad-card);min-width:200px;flex-shrink:0}
.dash-act-name{font:var(--type-body-strong);font-weight:700;margin-bottom:var(--sp-1);
  display:flex;align-items:center;gap:6px}
/* El tipo de actividad y el récord se marcan con el icono y un badge, nunca con
   una banda de acento en el borde. */
.dash-act-card .dash-act-icon{font-size:16px}
.dash-act-card.dash-act-run .dash-act-icon{color:var(--color-domain-running)}
.dash-act-card.has-pr .dash-act-icon{color:var(--color-accent-text)}
.dash-act-chip{margin-bottom:var(--sp-1)}
.dash-act-detail{font:var(--type-caption);color:var(--color-text-secondary)}
.dash-act-time{font:var(--type-caption);font-size:var(--fs-xs);color:var(--color-text-secondary);margin-top:var(--sp-2)}
.dash-empty{font:var(--type-caption);color:var(--color-text-secondary);text-align:center;padding:var(--sp-8) 0}
/* Theme selector highlight */
/* Selector de tema: un Segmented de tres opciones. El activo se marca con fondo
   y peso, no con un borde de acento — es un control, no un estado de alarma. */
.theme-options{display:flex;gap:2px;flex-shrink:0;background:var(--color-surface-2);
  border-radius:var(--radius-pill);padding:2px}
.theme-opt{background:none;border:none;border-radius:var(--radius-pill);
  padding:var(--sp-2) var(--sp-3);min-height:44px;font-family:var(--font);
  font-size:var(--fs-base);font-weight:600;color:var(--color-text-secondary);
  cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.theme-opt.active{background:var(--color-surface-1);color:var(--color-text-primary);box-shadow:var(--shadow-1)}
/* ── Share Editor ─────────────────────────────────────────── */
.share-editor-overlay{position:fixed;inset:0;background:var(--color-overlay-scrim);z-index:var(--z-toast);display:none;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.share-editor-overlay.open{display:flex;animation:seFadeIn var(--dur-base) ease-out}
.se-header{display:flex;align-items:center;padding:8px 16px;min-height:48px;flex-shrink:0}
.se-close-btn{width:44px;height:44px;border-radius:50%;background:var(--color-overlay-2);border:none;color:var(--color-on-fill);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-fast)}
.se-close-btn:active{background:var(--color-overlay-3)}
.se-preview-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 20px;min-height:0;position:relative}
.se-preview-wrap canvas{max-width:100%;max-height:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-3);transition:opacity var(--dur-fast) ease}
.se-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.se-loading.hidden{display:none}
.se-spinner{width:32px;height:32px;border:3px solid var(--color-overlay-2);border-top-color:var(--color-accent-text);border-radius:50%;animation:spin var(--dur-spin) linear infinite}
.se-controls{flex-shrink:0;padding:12px 20px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.se-toggles-row{display:flex;gap:12px;justify-content:center;align-items:center}
.se-format-toggle,.se-theme-toggle{display:flex;background:var(--color-overlay-1);border-radius:var(--radius-md);padding:3px}
.se-format-btn,.se-theme-btn{flex:1;background:none;border:none;color:var(--color-overlay-text-dim);font-family:var(--font);font-size:var(--fs-md);font-weight:600;padding:8px 20px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--dur-fast);min-height:36px;white-space:nowrap}
.se-format-btn.active,.se-theme-btn.active{background:var(--color-accent-text);color:var(--color-on-fill)}
.se-presets{display:flex;gap:8px;justify-content:center}
.se-preset-chip{background:var(--color-overlay-1);border:1.5px solid var(--color-overlay-2);color:var(--color-overlay-text);font-family:var(--font);font-size:var(--fs-md);font-weight:600;padding:10px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--dur-fast);min-height:44px;display:flex;align-items:center}
.se-preset-chip.active{border-color:var(--color-accent-text);color:var(--color-on-fill);background:var(--color-accent-wash-strong)}
.se-preset-chip:active{transform:scale(.96)}
.se-preset-chip.hidden{display:none}
.se-action-row{display:flex;gap:8px}
.se-share-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px}
.se-copy-btn,.se-download-btn{display:flex;align-items:center;justify-content:center;width:52px;padding:0;border-radius:var(--radius-lg);flex-shrink:0}
.se-share-btn .material-symbols-outlined{font-size:20px}
.se-share-btn:disabled{opacity:.5;pointer-events:none}
.quiron-panel{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--color-surface-0);display:none;flex-direction:column}
.quiron-panel.open{display:flex;animation:fadeIn var(--dur-fast) ease-out}
.quiron-header{display:flex;align-items:center;gap:8px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:var(--color-surface-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.quiron-title{flex:1;display:flex;align-items:center;gap:6px;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em}
.quiron-title svg{width:21px;height:21px;color:var(--color-accent-text);stroke-width:2}
.quiron-sub{font-size:var(--fs-sm);font-weight:500;color:var(--color-text-secondary);text-transform:none;letter-spacing:0}
.quiron-hbtn{background:var(--color-surface-2);border:none;color:var(--color-text-primary);width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer}
.quiron-hbtn .material-symbols-outlined{font-size:20px}
.quiron-msgs{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px}
/* Radio fijo, no pill: con --radius-pill (999px) un mensaje largo se convierte
   en una elipse y el texto se sale de la viñeta. */
.q-bubble{max-width:88%;padding:10px 14px;border-radius:var(--radius-xl);font-size:var(--fs-md);line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.q-user{align-self:flex-end;background:var(--color-accent-text);color:var(--color-on-fill);border-bottom-right-radius:6px}
.q-assistant{align-self:flex-start;background:var(--color-surface-1);border:1px solid var(--color-border-subtle);border-bottom-left-radius:6px}
.q-code{background:var(--color-surface-2);border-radius:var(--radius-md);padding:10px 12px;margin:8px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.q-li{padding-left:4px}
.q-typing{color:var(--color-text-secondary);font-style:italic}
.q-typing::after{content:'';display:inline-block;width:1em;animation:qdots 1.2s steps(4) infinite}
.q-err{color:var(--color-state-danger);font-size:var(--fs-base)}
.quiron-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px}
.q-chip{background:var(--color-surface-1);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);font-family:var(--font);font-size:var(--fs-base);font-weight:500;padding:8px 14px;border-radius:var(--radius-pill);cursor:pointer}
.q-chip:active{background:var(--color-surface-2);opacity:.85}
.q-continue{align-self:flex-start;color:var(--color-accent-text);border-color:var(--color-accent-soft)}
/* Cupo de la demo: barra + una línea. La barra mide lo que QUEDA (metáfora de batería,
   se vacía de derecha a izquierda), y solo aparece pasada la mitad del cupo. */
.quiron-quota{display:flex;flex-direction:column;gap:5px;padding:0 16px 8px}
.quiron-quota-bar{height:4px;border-radius:var(--radius-pill);background:var(--color-surface-2);overflow:hidden}
.quiron-quota-bar>span{display:block;height:100%;border-radius:inherit;background:var(--color-accent-text);transition:width .25s ease}
.quiron-quota-txt{margin:0;font-size:var(--fs-sm);line-height:1.4;color:var(--color-text-secondary)}
.quiron-quota-link{background:none;border:none;padding:0;font:inherit;color:var(--color-accent-text);text-decoration:underline;cursor:pointer}
.quiron-quota--low .quiron-quota-bar>span{background:#f59e0b}
.quiron-quota--low .quiron-quota-txt{color:var(--color-text-primary)}
.quiron-inputbar{display:flex;align-items:flex-end;gap:8px;padding:8px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
/* Mismo motivo que .q-bubble: con pill, al crecer hasta max-height el radio
   escala a la mitad de la altura y el campo se deforma en elipse. */
.quiron-inputbar textarea{flex:1;min-height:44px;max-height:120px;border-radius:var(--radius-xl);padding:12px 16px;font-size:var(--fs-md);resize:none}
#quironSendBtn{width:44px;height:44px;border-radius:50%;border:none;background:var(--color-accent-text);color:var(--color-on-fill);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
#quironSendBtn .material-symbols-outlined{font-size:22px}
#quironSendBtn.q-stop{background:var(--color-text-secondary)}
.quiron-setup{padding:24px;text-align:center;color:var(--color-text-secondary);font-size:var(--fs-md);display:flex;flex-direction:column;gap:10px;align-items:center}
.quiron-setup strong{color:var(--color-text-primary)}
.quiron-setup-icon{font-size:2rem}
.quiron-setup .btn{width:auto}
.quiron-setup[hidden]{display:none}
.quiron-history-modal{z-index:var(--z-overlay-top)}
.quiron-history-item{display:flex;align-items:center;gap:8px;padding:12px;border-radius:var(--radius-md);background:var(--color-surface-2);margin-bottom:8px;cursor:pointer}
.qh-text{flex:1;min-width:0}
.qh-title{font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qh-meta{font-size:var(--fs-xs);color:var(--color-text-secondary);margin-top:2px}
.qh-del{background:none;border:none;color:var(--color-text-tertiary);font-size:var(--fs-md);padding:8px;cursor:pointer;flex-shrink:0}
.quiron-history-empty{color:var(--color-text-secondary);font-size:var(--fs-base);text-align:center;padding:16px 8px}
.q-report-choice{align-self:flex-start;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--color-text-secondary)}
.q-report-choice span{width:100%}
/* ── Propuesta de plan de Quirón (Fase 5.0) ───────────────── */
.q-proposal{align-self:stretch;background:var(--color-surface-1);border:1px solid var(--color-accent-soft);border-radius:var(--radius-lg);padding:14px;margin:2px 0 6px;display:flex;flex-direction:column;gap:10px}
.q-proposal.applied{border-color:var(--color-border-subtle);opacity:.85}
.q-prop-head{display:flex;align-items:flex-start;gap:10px}
.q-prop-head .material-symbols-outlined{color:var(--color-accent-text);font-size:22px;flex-shrink:0}
.q-prop-titles{min-width:0}
.q-prop-title{font-size:var(--fs-lg);font-weight:700;line-height:1.2}
.q-prop-tag{font-size:var(--fs-sm);color:var(--color-text-secondary);margin-top:2px}
.q-prop-summary{font-size:var(--fs-md);color:var(--color-text-primary);line-height:1.45}
.q-prop-toggle{align-self:flex-start;background:none;border:none;color:var(--color-accent-text);font-family:var(--font);font-size:var(--fs-base);font-weight:600;padding:0;cursor:pointer}
.q-prop-detail{display:flex;flex-direction:column;gap:4px;background:var(--color-surface-2);border-radius:var(--radius-md);padding:10px 12px}
.q-prop-line{font-size:var(--fs-base);color:var(--color-text-primary);line-height:1.4}
.q-prop-actions{display:flex;gap:8px}
.q-prop-actions .btn{flex:1}
.q-prop-actions-3{flex-wrap:wrap}
.q-prop-actions-3 .q-prop-discard,.q-prop-actions-3 .q-prop-save{flex:1 1 40%}
.q-prop-actions-3 .q-prop-start{flex:1 1 100%}
.q-proposal.applied .q-prop-apply{background:var(--color-state-success);box-shadow:none}
#quironAttachBtn{width:40px;height:44px;background:none;border:none;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
#quironAttachBtn .material-symbols-outlined{font-size:24px}
#quironAttachBtn:active{opacity:.6}
.q-img-chip{display:inline-flex;align-items:center;gap:6px}
.q-img-chip .material-symbols-outlined{font-size:18px;vertical-align:middle}
/* ══ Ilustraciones de ejercicio ══════════════════════════
   Flipbook de N fotogramas: cada uno visible 1/N del ciclo, repartido por
   retardo negativo. Fondo transparente, así que no necesitan ficha. */
.ex-pict{position:relative;display:inline-block;flex-shrink:0;width:52px;height:52px;vertical-align:middle}
.ex-pict img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;border-radius:0}
.ex-pict.sm{width:34px;height:34px}
.ex-pict.lg{width:168px;height:168px}
.ex-pict.f1 img{animation:none;opacity:1}
.ex-pict.f2 img{animation:exPict2 2.4s steps(1,end) infinite}
.ex-pict.f3 img{animation:exPict3 3s steps(1,end) infinite}
.ex-pict.f4 img{animation:exPict4 3.2s steps(1,end) infinite}
.ex-pict.f2 img:nth-child(2){animation-delay:-1.2s}
.ex-pict.f3 img:nth-child(2){animation-delay:-1s}
.ex-pict.f3 img:nth-child(3){animation-delay:-2s}
.ex-pict.f4 img:nth-child(2){animation-delay:-.8s}
.ex-pict.f4 img:nth-child(3){animation-delay:-1.6s}
.ex-pict.f4 img:nth-child(4){animation-delay:-2.4s}
.ex-pict img:only-child{animation:none;opacity:1}
.ex-card .ex-name{display:flex;align-items:center;gap:8px}
/* ══ Runner de sesión ════════════════════════════════════ */
/* --color-action-primary y no --color-accent-text: es un RELLENO. En oscuro,
   accent-text es #ff5545 y el blanco encima da 3,16:1 — falla el AA de texto.
   Con action-primary (#d4372c) da 4,79:1. Es el mismo arreglo que ya llevaba el
   .btn del sistema; este botón se creaba desde JS y se quedó fuera. */
/* Secundario, no primario. En el estado de registro la acción que cierra el
   trabajo es guardar: el modo guiado es una forma de recorrer la sesión, no el
   final de nada. Tenerlo en rojo gastaba la única primaria de la vista (§9.1)
   en la puerta de entrada y dejaba "Guardar sesión" pareciendo inerte. */
.start-runner-btn{display:block;width:100%;background:var(--color-surface-2);color:var(--color-text-primary);border:none;font-family:var(--font);font-size:var(--fs-lg);font-weight:500;padding:15px;border-radius:var(--radius-lg);cursor:pointer;min-height:52px;margin-bottom:var(--sp-3);-webkit-tap-highlight-color:transparent}
.start-runner-btn:active{background:var(--color-surface-3);opacity:.85}
body.session-focus header,body.session-focus nav,
body.session-focus #secTrain>.page-head,body.session-focus .subnav{display:none}
body.session-focus{padding-bottom:0;overflow:hidden}
.set-runner{position:fixed;inset:0;z-index:var(--z-runner);background:var(--color-surface-0);display:flex;flex-direction:column;padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform var(--dur-slow) cubic-bezier(.32,.72,0,1);will-change:transform;visibility:hidden}
.set-runner.up{transform:translateY(0);visibility:visible}
.set-runner>*{width:100%;max-width:520px;margin-left:auto;margin-right:auto}
.sr-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.09em;margin-bottom:var(--sp-2)}
.sr-top span{display:flex;align-items:center;gap:6px;min-width:0}
.sr-ex .ex-pict{width:26px;height:26px}
.sr-progress{display:flex;gap:3px;margin-bottom:var(--sp-3)}
.sr-progress i{flex:1;height:4px;border-radius:var(--radius-pill);background:var(--color-surface-2)}
.sr-progress i.d{background:var(--color-state-success)}
.sr-progress i.a{background:var(--color-accent-text)}
.sr-phase{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2)}
.set-runner.is-work .sr-work,.set-runner.is-rest .sr-rest,.set-runner.is-done .sr-done{display:flex}
/* Cierre de sesión: lo que acaba de producir el entreno, antes de guardarlo. */
.sr-done{gap:var(--sp-4);overflow-y:auto;justify-content:flex-start;padding-top:var(--sp-8)}
/* En el cierre la cabecera ya no aplica: el ejercicio y la serie son pasado. */
.set-runner.is-done .sr-top{visibility:hidden}
.sr-done-title{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;text-align:center}
.sr-done-sub{font-size:var(--fs-lg);font-weight:600;color:var(--color-text-secondary);margin-top:calc(var(--sp-4) * -1 + 2px)}
.sr-done-stats{display:flex;gap:var(--sp-8);margin-top:var(--sp-2)}
.sr-done-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.sr-done-stat b{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sr-done-stat span{font-size:var(--fs-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em}
.sr-done-prs{width:100%;display:flex;flex-direction:column;gap:var(--sp-2)}
.sr-done-pr{display:flex;align-items:center;gap:var(--sp-2);background:var(--color-surface-1);border-radius:var(--radius-lg);padding:12px 14px}
.sr-done-pr-chip{flex-shrink:0;padding:2px 8px;border-radius:var(--radius-md);background:var(--color-accent-text);color:var(--color-on-fill);font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.sr-done-pr-ex{flex:1;min-width:0;font-size:var(--fs-md);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-done-pr-kg{flex-shrink:0;font-size:var(--fs-md);font-weight:800;color:var(--color-state-success);font-variant-numeric:tabular-nums}
.sr-done-more{text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--color-text-secondary)}
.sr-done-vol{font-size:var(--fs-md);color:var(--color-text-secondary);text-align:center}
.sr-done-vol b{color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.sr-done-delta.up{color:var(--color-state-success);font-weight:700}
.sr-done-delta.down{color:var(--color-text-secondary);font-weight:700}
.sr-name{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;text-align:center}
.sr-load{display:flex;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-2)}
.sr-load label{display:flex;flex-direction:column;align-items:center;gap:2px}
.sr-load span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-secondary);font-weight:700}
.set-runner .sr-in{width:122px;flex:0 0 auto;padding:10px 4px;font-size:3rem;font-weight:800;text-align:center;border-radius:var(--radius-lg);border:none;background:var(--color-surface-1);color:var(--color-text-primary);font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.04em;min-height:76px}
.set-runner .sr-in:focus{outline:2px solid var(--color-accent-text);outline-offset:1px}
.sr-x{font-size:1.6rem;color:var(--color-text-secondary);font-weight:700;margin-top:16px}
.sr-prev{font-size:var(--fs-base);color:var(--color-text-secondary);font-weight:600;margin-top:var(--sp-3);min-height:1.2em}
.sr-ring{position:relative;width:220px;height:220px}
.sr-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.sr-track{fill:none;stroke:var(--color-surface-2);stroke-width:10}
.sr-prog{fill:none;stroke:var(--color-accent-text);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset var(--dur-slow) linear,stroke var(--dur-slow)}
.sr-ring.ending .sr-prog{stroke:var(--color-state-success)}
.sr-ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sr-time{font-size:3.4rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1}
.sr-lbl{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-secondary);margin-top:4px}
.sr-adj{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.sr-adj-btn{background:var(--color-surface-1);border:1px solid var(--color-border-ghost);color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-base);font-weight:700;padding:9px 16px;border-radius:var(--radius-pill);min-height:44px;cursor:pointer}
.sr-adj-btn:active{transform:scale(.95)}
.sr-did{background:var(--color-surface-1);border-radius:var(--radius-lg);padding:12px 14px;display:flex;align-items:center;gap:10px;width:100%;margin-top:var(--sp-3);border:1px solid var(--color-border-ghost)}
.sr-did-who{flex:1;min-width:0}
.sr-did-k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);font-weight:700}
.sr-did-v{font-size:var(--fs-md);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-runner .sr-did-in{width:62px;flex:0 0 auto;padding:9px 4px;font-size:var(--fs-xl);font-weight:700;text-align:center;border-radius:var(--radius-md);min-height:44px;border:none;background:var(--color-surface-2);color:var(--color-text-primary);font-family:var(--font);font-variant-numeric:tabular-nums}
.sr-did-x{font-size:var(--fs-md);color:var(--color-text-secondary);font-weight:700}
.sr-tip{font-size:var(--fs-base);color:var(--color-text-secondary);text-align:center;margin-top:var(--sp-2);line-height:1.45}
.sr-next{font-size:var(--fs-base);color:var(--color-text-secondary);text-align:center;font-weight:600;margin-top:var(--sp-2)}
.sr-next b{color:var(--color-text-primary)}
.sr-cta{width:100%;background:var(--color-accent-text);color:var(--color-on-fill);border:none;font-family:var(--font);font-size:var(--fs-lg);font-weight:700;padding:16px;border-radius:var(--radius-lg);cursor:pointer;min-height:54px;box-shadow:var(--shadow-action);margin-top:var(--sp-3)}
.sr-cta:active{transform:scale(.985);opacity:.9}
.sr-cta.ready{background:var(--color-state-success);box-shadow:none}
.sr-sub{width:100%;background:none;border:none;color:var(--color-text-secondary);font-family:var(--font);font-size:var(--fs-base);font-weight:600;padding:12px;cursor:pointer;min-height:44px}
/* ══ El parche de contraste de la sesión, borrado ════════
   Aquí vivía un bloque que subía el alfa a .78 en claro para "Kg", "Reps" y las
   etiquetas de serie, con el argumento de que --text2 daba 2,86:1 y fallaba AA.
   Ya no es cierto —seguramente no lo era desde la recalibración del token— y
   medido hoy el parche hacía lo contrario de lo que decía:

     sobre blanco:  --color-text-secondary (alfa .80) = 5,34:1
                    el parche             (alfa .78) = 5,06:1

   El parche BAJABA el contraste. Su propio comentario pedía revisarlo a nivel
   de sistema; esto es esa revisión. Sin él, estas etiquetas usan el token, que
   da entre 4,68:1 y 5,34:1 en claro y entre 5,07:1 y 7,02:1 en oscuro sobre las
   cuatro superficies. Todas pasan el AA de texto. */

/* ── 4.5 ENTRENAR ───────────────────────────────────────────────────────────
   Migrada, y con la reorganización de navegación de §7.2 del documento.
   Fuerza y carrera son dos MODOS dentro de "Entrenar", no dos secciones; el
   modo activo se marca por fondo y peso, nunca por una banda de acento. */
/* Sin `container-type:inline-size`. Lo llevaba para esconder los iconos cuando
   el segmentado vivía en el carril de 168px, pero `container-type` aplica
   `contain:inline-size`: el elemento deja de dimensionarse por su contenido. En
   la cabecera eso dejaba la pastilla en 6px —los dos paddings— con los botones
   desbordándola, que es de dónde salía la rayita gris a su izquierda. El carril
   ya no existe y con él se va la container query. */
.train-mode{display:flex;gap:var(--sp-1);background:var(--color-surface-2);
  border-radius:var(--radius-pill);padding:3px}
/* min-width:0 y no la anchura del texto. Con `flex:1` a secas la base de cada
   botón es su contenido, así que en el carril de 168px del escritorio los dos
   pedían 175 y "Carrera" se salía de la pastilla por 13px. El icono es lo
   primero que sobra cuando no cabe: la etiqueta es la que identifica el modo. */
.train-mode-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
  background:none;border:none;border-radius:var(--radius-pill);padding:9px 4px;min-height:44px;
  cursor:pointer;font-family:var(--font);font-size:var(--fs-base);font-weight:700;
  color:var(--color-text-secondary);transition:background var(--dur-base),color var(--dur-base)}
.train-mode-btn .material-symbols-outlined{font-size:18px}
/* En la cabecera el segmentado se mide por su contenido. `flex:1 1 0` era para
   repartir el ancho FIJO del carril de 168px; dentro de un flex sin ancho que
   repartir la pastilla se colapsaba y "Fuerza" y "Carrera" salían impresos uno
   encima del otro.
   Y todo el grupo a 48. Eran 50 el modo, 44 los chips y 48 las pestañas: tres
   alturas que no cuadraban entre sí en la misma cabecera. Se iguala por ARRIBA
   —48 y no 44— porque bajar el modo a 44 por fuera dejaba su botón en 40, por
   debajo del objetivo táctil de 44 que el sistema exige. Aquí nadie baja de 44:
   el modo es una pastilla de 2px de inset sobre botones de 44, los chips suben
   los cuatro píxeles que les faltaban, y la fila de pestañas ya medía 48. */
.page-head-state .train-mode{flex:0 0 auto;width:max-content;padding:2px}
.page-head-state .train-mode-btn{flex:0 0 auto;min-height:44px;padding:8px var(--sp-4)}
.page-head-state .chip{min-height:48px}
.train-mode-btn.active{background:var(--color-surface-1);color:var(--color-text-primary);box-shadow:var(--shadow-1)}
.train-panel{display:none}
.train-panel.active{display:block}
/* ── Perfil: los 7 dominios ──────────────────────────────*/
/* ── 4.3 PERFIL ─────────────────────────────────────────────────────────────
   Migrada. El nivel grande es la única cifra en acento de la pantalla: es el
   dato que resume el producto entero. */
.prof-head{text-align:center;margin-bottom:var(--sp-2)}
/* El §9.1 ya decía que en Perfil "el rojo se reserva para tu limitante", pero el
   numeral del nivel seguía siendo rojo y era el rojo más grande de la pantalla:
   competía con el badge TU LIMITANTE, con la línea del radar, con la etiqueta
   del dominio limitante y con "Medir". En tinta, el nivel sigue siendo el dato
   que domina —lo dice su tamaño— y el rojo vuelve a significar una sola cosa. */
.prof-level{font:var(--type-display);font-size:var(--fs-4xl);letter-spacing:var(--track-display);
  line-height:1;color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.prof-level-name{font:var(--type-label);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--color-text-secondary);margin-top:var(--sp-1)}
.prof-limited{font:var(--type-body);color:var(--color-text-secondary);margin-top:var(--sp-3)}
.prof-limited b{color:var(--color-text-primary);font-weight:700}
.prof-provisional{display:block;font:var(--type-caption);color:var(--color-text-secondary);margin-top:var(--sp-1)}
.prof-domains-title{margin-top:var(--gap-group)}
/* Las etiquetas salen del viewBox: el padding lateral evita que se corten en
   pantallas estrechas, que es donde se mira esto. */
.radar-wrap{max-width:360px;margin:0 auto var(--sp-4);padding:0 34px}
.radar-wrap svg{width:100%;height:auto;overflow:visible}
.radar-worst{animation:radarPulse 2s ease-in-out infinite}
.prof-next-card{margin-bottom:var(--gap-group)}
.prof-next-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.prof-next-name{font:var(--type-body-strong)}
.prof-next-why{font:var(--type-caption);color:var(--color-text-secondary);margin-top:2px}
.prof-next-btn{flex-shrink:0}
/* Cada dominio es un panel plegable: la cabecera es la fila-acción del sistema
   y el cuerpo, filas etiqueta-valor. */
.prof-domain{background:var(--color-surface-1);border-radius:var(--radius-lg);
  margin-bottom:var(--gap-tight);overflow:hidden}
.prof-domain-head{width:100%;display:flex;align-items:center;gap:var(--sp-3);
  background:none;border:none;padding:var(--sp-3) var(--pad-card);min-height:56px;
  cursor:pointer;text-align:left;font-family:var(--font);color:var(--color-text-primary);
  transition:background var(--dur-fast)}
.prof-domain-head:active{background:var(--color-surface-2)}
.prof-domain-icon{font-size:22px;flex-shrink:0}
.prof-domain-main{flex:1;min-width:0}
.prof-domain-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:var(--type-body-strong);font-weight:700}
.prof-domain-bar{display:block;height:4px;border-radius:var(--radius-pill);
  background:var(--color-surface-2);margin-top:6px;overflow:hidden}
.prof-domain-bar .fill{display:block;height:100%;border-radius:var(--radius-pill);
  transition:width var(--dur-slow) var(--ease-standard)}
.prof-domain-lvl{flex-shrink:0;font:var(--type-metric);font-size:var(--fs-xl);
  letter-spacing:var(--track-metric);font-variant-numeric:tabular-nums}
.prof-domain-body{display:none;padding:0 var(--pad-card) var(--pad-card)}
.prof-domain.open .prof-domain-body{display:block}
.prof-domain-why{font:var(--type-caption);color:var(--color-text-secondary);margin-bottom:var(--sp-3)}
.prof-metric-src{flex-shrink:0}
.prof-metric-val{min-width:62px}
.prof-metric-lvl{font:var(--type-caption);font-weight:800;color:var(--color-text-secondary);
  min-width:24px;text-align:right;font-variant-numeric:tabular-nums}
.prof-metric-none .listrow-name,.prof-metric-none .listrow-value{color:var(--color-text-secondary)}
.prof-domain-rule{font:var(--type-caption);color:var(--color-text-secondary);margin-top:var(--sp-3)}
.prof-domain-proto{font:var(--type-caption);color:var(--color-text-secondary);
  background:var(--color-surface-2);border-radius:var(--radius-lg);
  padding:var(--sp-3);margin-top:var(--sp-3)}
.prof-domain-body .btn{margin-top:var(--sp-3)}
.prof-calib{font:var(--type-caption);font-size:var(--fs-xs);color:var(--color-text-secondary);
  margin-top:var(--gap-stack);text-align:center}
.prof-note .banner{margin-top:var(--gap-stack)}
/* ── Hoja de test de dominio ─────────────────────────────
   Es un .sheet del sistema (§3.9): hoja inferior en móvil, diálogo centrado en
   escritorio. Solo quedan aquí las particularidades del test. */
.dtest-icon{font-size:24px;flex-shrink:0}
.dtest-proto{background:var(--color-surface-1);margin-bottom:var(--gap-stack)}
.dtest-proto-text{font:var(--type-caption);color:var(--color-text-secondary)}
/* El campo del test es grande a propósito: se rellena una vez cada seis semanas
   y con el número recién medido en la cabeza. */
.dtest-field-input{display:flex;align-items:center;gap:var(--sp-2)}
.dtest-field-input input{flex:1;min-width:0;padding:var(--pad-y-md);font-size:var(--fs-xl);
  font-weight:700;text-align:center;border-radius:var(--radius-md);border:none;
  background:var(--color-surface-1);color:var(--color-text-primary);font-family:var(--font);
  font-variant-numeric:tabular-nums;min-height:52px}
.dtest-field-unit{flex-shrink:0;font:var(--type-body-strong);color:var(--color-text-secondary);min-width:34px}
.dtest-result{text-align:center}
.dtest-res-lvl{font:var(--type-display);font-size:var(--fs-4xl);letter-spacing:var(--track-display);line-height:1}
.dtest-res-name{font:var(--type-body-strong);color:var(--color-text-secondary);margin-top:var(--sp-2)}
.dtest-res-delta{font:var(--type-caption);font-weight:700;margin-top:var(--sp-3)}
.dtest-res-delta.up{color:var(--color-state-success)}
.dtest-res-delta.down{color:var(--color-text-secondary)}
.dtest-res-metrics{margin:var(--gap-group) 0;text-align:left}
.dtest-res-mlvl{font:var(--type-caption);font-weight:800;color:var(--color-text-secondary);
  min-width:24px;text-align:right;font-variant-numeric:tabular-nums}
.dtest-res-note{font:var(--type-caption);color:var(--color-text-secondary);margin-bottom:var(--sp-3)}
.dtest-res-next{font:var(--type-caption);font-weight:700;color:var(--color-text-secondary);margin:var(--gap-stack) 0}
.run-import-hint{font-size:var(--fs-sm);color:var(--color-text-secondary);text-align:center;line-height:1.5;margin-top:var(--sp-3)}
#runImportBtn .material-symbols-outlined{font-size:22px}
/* Nivel en "Hoy": un resumen que lleva al Perfil, no un segundo radar. */
.dash-level{display:flex;align-items:center;gap:var(--sp-3);width:100%;
  background:var(--color-surface-1);border:none;border-radius:var(--radius-xl);
  padding:var(--pad-card);cursor:pointer;text-align:left;font-family:var(--font);
  color:var(--color-text-primary);min-height:64px;transition:background var(--dur-fast)}
.dash-level:active{opacity:.85}
/* El número de nivel en tinta y no en rojo, por dos razones. La primera es el
   presupuesto: en Hoy competía con el botón Fuerza, con la racha y con los
   arcos de dominio. La segunda es que unos numerales romanos estrechos en rojo
   pegados al borde izquierdo de una tarjeta se leen como una barra de acento
   lateral, que es justo lo que el sistema prohíbe (§2.4) — aunque aquí sean
   contenido y no decoración. El rojo del perfil se reserva para el limitante. */
.dash-level-num{flex-shrink:0;font:var(--type-metric-lg);letter-spacing:var(--track-metric-lg);
  font-variant-numeric:tabular-nums;color:var(--color-text-primary);min-width:44px;text-align:center}
.dash-level-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dash-level-txt b{font:var(--type-body-strong);font-weight:700}
.dash-level-txt span{font:var(--type-caption);color:var(--color-text-secondary)}
.dash-level-go{flex-shrink:0;color:var(--color-text-secondary);font-size:22px}
/* ── Hoy: bento en una fila, actividad en columna ────────── */
@media(min-width:1024px){
/* La quinta fila, vacía, absorbe el alto sobrante: sin ella, la actividad —que
   es más alta que la columna izquierda— reparte su exceso entre las filas que
   cruza y abre un hueco entre la racha y los CTA. */
#secDashboard.active{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto auto 1fr;gap:0 var(--gap-section);align-items:start}
.dash-greeting{grid-column:1/-1}
#dashLevel,.dash-week-title,.dash-bento,.dash-cta-group{grid-column:1}
.dash-activity{grid-column:2;grid-row:2/-1}
.dash-activity>.group-title{margin-top:0}
/* Deja de ser carrusel: con ratón no hay swipe y la barra estaba oculta, así
   que no había forma de saber que había más tarjetas a la derecha. */
.dash-activity-scroll{flex-direction:column;overflow-x:visible}
.dash-activity-scroll>*{width:auto;flex-shrink:1}
}
/* ── Perfil: el radar deja de ser un sello de correos ───── */
@media(min-width:1024px){
#secProfile.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto 1fr;gap:0 var(--gap-section);align-items:start}
#secProfile>.page-head{grid-column:1/-1}
.prof-head{grid-area:2/1}
.radar-wrap{grid-area:3/1}
.prof-next{grid-area:4/1}
.prof-domains-title{grid-area:2/2;margin-top:0}
/* La lista arrancaba en la fila 3 —la del radar— y quedaba a 120px por debajo
   de su propio título, con un hueco en blanco entre los dos que no separaba
   nada: la fila 2 la marca la altura de .prof-head, que es mucho más alta que
   un título. Empieza donde acaba su título y se estira hasta abajo. */
#profDomains{grid-area:3/2/span 2}
.prof-domains-title{align-self:end}
.prof-note{grid-area:5/2}
/* width:100% explícito: con margin-inline:auto un grid item deja de estirarse y
   se queda en su ancho de contenido — el radar volvía a 340px. */
.radar-wrap{width:100%;max-width:520px;padding:0 var(--sp-5)}
}
/* ── Entrenar/Fuerza · Actividad ──────────────────────────
   LA JERARQUÍA DE ESTA PANTALLA, escrita (§7.4 del documento).

   Actividad tiene dos estados y no comparten jerarquía:

   ANTES de empezar manda LA SESIÓN DE HOY. Lo único que hay que decidir es si
   entrenas eso o cambias de sesión, así que la pantalla es una columna: los dos
   campos que la eligen y la tarjeta que la describe, con una sola acción.
   Nada más. La versión anterior repartía el ancho en tres carriles y ninguno
   tenía con qué llenarlo.

   DURANTE el registro manda LA LISTA DE EJERCICIOS. Deja de ser una columna de
   560px junto a 500 de nada y pasa a ser una rejilla que crece EN NÚMERO por
   fila (§2.1): a 1440 son dos tarjetas por fila y la sesión entera cabe casi sin
   scroll, que es justo lo que un monitor puede dar y un móvil no. El resto
   —fecha, sesión, de dónde vienen los datos, el descanso— es una tira de
   contexto de una línea encima, no una columna propia.

   El cronómetro de descanso no aparece hasta aquí (setFormVisible), y aquí es
   un control de la tira, no una tarjeta de cristal arriba del todo. */
@media(min-width:1024px){
#strTrain.active{display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--gap-stack);align-items:start;justify-items:stretch}
/* Estado A — vista previa. Una sola columna, CENTRADA. Alineada a la izquierda
   dejaba ~370px de hueco a su derecha que no era aire: era un carril vacío. */
#strTrain.active:not(:has(#exerciseList > *)){justify-items:center}
#strTrain.active:not(:has(#exerciseList > *))>*{width:100%;max-width:var(--measure-panel)}
/* Estado B — registro. Una sola columna de BLOQUES a ancho completo; la
   densidad no la da repartir el ancho en carriles, la da la rejilla de
   ejercicios. El intento de sentar el crono al lado de los dos campos no
   sobrevive a la aritmética: la tira del descanso mide ~535px de contenido
   irreducible (modo + tres presets + display + play) y junto a un formulario de
   520 pide 1.087 en una columna que a 1440 son 915. Se le daba menos y se
   comía el <select> de Sesión. Va en su propia línea, alineada a la derecha,
   que es donde una herramienta no compite con lo que estás decidiendo. */
#strTrain.active:has(#exerciseList > *)>.row{max-width:var(--measure-form)}
/* Y deja de ser una TARJETA. Sin fondo ni cristal es lo que siempre fue: una
   fila de controles —modo, presets, display, play— sobre el lienzo. Un
   temporizador de descanso no necesita una superficie propia para existir, y
   dársela era lo que lo convertía en el elemento más pesado de la pantalla. */
#strTrain.active:has(#exerciseList > *)>.timer-bar{background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding-inline:0;
  /* Y no se estira. La tira ocupaba la columna entera y .timer-display lleva
     flex:1, así que el número se centraba en 466px de vacío: los presets
     acababan en un sitio y su propio display aparecía 240px más allá, con el
     play en el borde opuesto. Un grupo de controles partido por dentro. Ancho
     de contenido y anclada al mismo borde derecho que los botones. */
  width:fit-content;margin-left:auto}
#strTrain.active:has(#exerciseList > *)>.timer-bar .timer-display{flex:0 0 auto;
  min-width:4.5ch;padding-inline:var(--sp-2)}
/* Las tarjetas de ejercicio: auto-fill, no un ancho fijo. 400px de mínimo es
   donde una fila `S1 · kg · reps` deja de tener sentido si se aprieta más — y
   el máximo sigue siendo --measure-panel por tarjeta, que es lo que impide que
   la etiqueta de serie se separe de sus campos (§2.1). */
#exerciseList{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
  gap:var(--gap-stack);align-items:start}
#exerciseList>*{margin-bottom:0;max-width:var(--measure-panel)}
/* Los dos botones de la vista se alinean al MISMO borde, arriba y abajo de la
   rejilla, y dejan de ser vallas de ancho completo (§5.1): "Empezar sesión" es
   la primaria y "Guardar sesión" su secundaria al terminar. */
#startRunnerBtn{width:auto;min-width:240px;justify-self:end;margin-bottom:0}
#strTrain>.save-bar{justify-self:end;max-width:var(--measure-form)}
#strTrain>.save-bar #saveWorkoutBtn{width:auto;min-width:240px;margin-left:auto;display:block}
/* Los cinco puntos son un SCROLL SPY de una lista vertical. Con las tarjetas en
   rejilla de dos columnas el recorrido deja de ser lineal y el indicador deja
   de poder decir dónde estás; además flotaba arriba a la derecha sin nada a lo
   que anclarse. En escritorio no informa de nada, así que no se dibuja. */
.ex-dots{display:none}
.ex-dots.visible{display:none}
}
/* ── Quirón ───────────────────────────────────────────────
   Dos cosas, y la primera es una decisión del sistema que se había perdido sin
   que se notara.

   El §7.1 dice, y el CSS decía, que el panel arranca donde acaba el rail: "el
   chat no es un modal que tape la navegación, es una superficie más de la app".
   Pero la regla vivía en la capa `sistema` y `.quiron-panel{inset:0}` vive en
   `pantallas`, que gana por capa aunque tenga menos especificidad. El
   `left:var(--rail-w)` llevaba muerto desde que la hoja se organizó en capas, y
   el panel tapaba el rail entero. Aquí, en `escritorio`, gana — que además es
   donde el §4.4 dice que va todo lo que vive dentro de un min-width.

   Y el estado vacío estaba anclado abajo, con 640px de nada por encima, porque
   .quiron-msgs se quedaba con todo el espacio libre del flex. Un estado vacío
   se centra en su superficie: es lo único que hay en ella. */
@media(min-width:1024px){
.quiron-panel{left:var(--rail-w)}
}
/* Con el setup a la vista, .quiron-msgs (flex:1) se quedaba con TODO el espacio
   libre y empujaba el estado vacío contra el borde de abajo. Sin sitio que
   repartir, sus márgenes automáticos no podían centrarlo. */
.quiron-panel:has(.quiron-setup:not([hidden])) .quiron-msgs{flex:0 0 auto}
.quiron-setup{margin-block:auto}
/* ── Entrenar/Carrera · Actividad ─────────────────────────
   "Importar del reloj" era un relleno rojo de 520px alineado a la izquierda
   debajo de dos paneles de 915: ni acompañaba al contenido ni era un botón,
   era el resto de un ancho completo de móvil. Ancho automático y centrado con
   lo que hay debajo, que es su alternativa ("Registro manual"). */
@media(min-width:1024px){
.run-start-btn{width:auto;min-width:260px;margin-inline:auto}
}
/* ── Entrenar/Fuerza · Plan ───────────────────────────────
   Mismo fallo que Actividad y misma cura. Las seis sesiones del plan eran seis
   tarjetas de 915px apiladas, cada una rematada por un "Iniciar sesión" rojo a
   ancho completo: seis vallas del color de la marca en una pantalla cuyo
   trabajo es enseñarte el plan, no arrancarlo. Las tarjetas pasan a rejilla
   —crecen en número por fila, no de tamaño— y el botón deja de ser primario y
   de ocupar el ancho: es la acción de una tarjeta, no la de la vista. */
@media(min-width:1024px){
#strPlanContent{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
  gap:var(--gap-stack);align-items:start}
#strPlanContent>.str-plan-session{margin-bottom:0;max-width:var(--measure-panel)}
.str-plan-header,.str-plan-desc{grid-column:1/-1}
.str-plan-start-btn.btn--block{width:auto;min-width:200px;margin-left:auto;display:block}
}
/* ── Entrenar/Fuerza · Historial: calendario y lista a la vez ──
   A 1440, no a 1024, y el motivo es aritmético. Historial no dispone del ancho
   de la ventana: vive dentro del panel de Entrenar, que ya cede 168px a la
   navegación secundaria. Con la shell en 880 quedan ~664px, y partirlos en
   260 (calendario) + 24 + resto dejaba la lista en 332px — el 29% de la
   pantalla para el único contenido de la vista, con 772px de cromo por delante.
   A ese ancho las series de una sesión de cinco (57.5×3 · 57.5×3 · …) rompían a
   una segunda línea que quedaba huérfana, sin el nombre del ejercicio al lado.
   El reparto en dos columnas es bueno cuando hay dos columnas que repartir: a
   1440 la lista se queda con 632px y todo eso desaparece. Por debajo, el
   calendario se apila encima de la lista y le devuelve el ancho entero. */
@media(min-width:1440px){
/* La última fila, vacía, absorbe el alto sobrante de la lista, que es mucho más
   alta que el calendario y si no reparte su exceso entre las filas que cruza. */
/* La columna del calendario se ajusta a lo que el calendario mide (~260), no a
   380. Con 380 y el panel centrado dentro, 162px de esa columna estaban vacíos
   mientras la lista —que es el contenido— se quedaba en 212 y truncaba los
   nombres de los ejercicios. El filtro no puede ocupar más que aquello que
   filtra. */
#strHistory.active,#runHistory.active{display:grid;grid-auto-flow:row dense;grid-template-columns:minmax(0,260px) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;gap:var(--sp-3) var(--sp-6);align-items:start}
#strHistory>.cal-fold,#runHistory>.cal-fold{grid-column:1}
/* Los filtros cruzan las dos columnas. Metidos en la de 260 se apilaban en
   vertical —.history-filters es auto-fit de 150px y ahí solo cabe uno— y dejaban
   a su derecha un hueco del ancho de la lista. Deciden qué se ve en las DOS
   columnas, calendario incluido, así que abarcarlas es lo que además dice. */
#strHistory>.history-filters,#runHistory>.history-filter-wrap{grid-column:1/-1}
/* Con columna propia el plegado no aporta: el calendario ya no le quita sitio a
   la lista. calendar.js lo abre, y aquí se retira el control que sobra. */
.cal-fold>summary{display:none}
#runHistoryList{grid-column:2;grid-row:1/-1}
/* La barra de "estás viendo un día" va en la columna de la lista, encima de
   ella: es donde se lee el efecto del filtro. Oculta, la fila se colapsa. */
#historyDateFilter{grid-column:2;grid-row:1}
#historyList{grid-column:2;grid-row:2/-1}
}
/* ── Entrenar/Fuerza · Progreso ─────────────────────────── */
@media(min-width:1024px){
/* 200 y no 300. Progreso es la única pantalla con DOS carriles de navegación
   —los destinos de Entrenar y el selector de ejercicio— antes del primer dato:
   a 300 sumaban 468px de cromo lateral y la tabla, que es donde de verdad se
   compara, empezaba pasada la mitad de la pantalla. La lista sigue siendo
   lateral y no una fila de chips porque escala: con treinta ejercicios en el
   histórico, una fila que envuelve son cuatro líneas de cromo. */
#strProgress.active{display:grid;grid-auto-flow:row dense;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--sp-4) var(--gap-section);align-items:start}
.progress-select-wrap{grid-column:1}
/* La tabla del historial se va a la columna ancha: cuantas más columnas se
   vean, más vale. */
#progressHistory{grid-column:2}
#progressChart,#progressStats{grid-column:2}
#progressChart{grid-row:2}
#progressStats{grid-row:3}
#progressHistory{grid-row:4}
/* La lista de ejercicios ocupa el alto de las tres, y así no arrastra a la
   columna derecha cuando hay muchos. */
.progress-select-wrap{grid-row:2/span 3}
/* Los 1RM cruzan las dos columnas y encabezan la pantalla: son el resumen de
   "cómo voy" y valen para todos los ejercicios, no para el que esté elegido.
   Sin fila propia caían al final del grid, flotando entre las dos columnas. */
#rmCard{grid-column:1/-1;grid-row:1}
}
/* ── Ajustes: una columna, y a lo ancho de una lista ────── */
@media(min-width:1024px){
/* Las dos columnas tenían sentido con ocho bloques de contenido independientes.
   El índice no es contenido: es una lista de estado, y en una lista el orden
   vertical ES la jerarquía. A dos columnas, "Borrar todos los datos" caía en lo
   alto de la derecha —lo primero que veía el ojo— y "Apariencia" se leía antes
   que "Entrenamiento". Vuelve a una columna, con el ancho de una lista y no el
   de la pantalla: una fila de 1.100px con dos palabras en cada extremo obliga a
   cruzar el monitor entero para emparejar el ajuste con su valor. */
#secSettings .set-page{max-width:680px}
#secSettings .panel{break-inside:avoid}
}
/* ── Importar arrastrando (J3) ──────────────────────────── */
#runTrain.is-dropping{outline:2px dashed var(--color-accent-text);outline-offset:6px;border-radius:var(--radius-lg);background:var(--color-accent-glow)}
#runTrain.is-dropping *{pointer-events:none}
/* ── .ex-dot: objetivo de clic real ─────────────────────────
   Eran <span> de 8×8 sin foco: el peor objetivo de la app con ratón (WCAG 2.2
   SC 2.5.8 pide 24×24) e inexistentes para el teclado. Ahora son <button> con
   el punto de 8px dibujado dentro de un área de 24. */
.ex-dot{width:24px;height:24px;border-radius:50%;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur-base)}
.ex-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--color-border-subtle);transition:background var(--dur-base),transform var(--dur-base)}
.ex-dot.active::after{background:var(--color-text-primary);transform:scale(1.3)}
.ex-dots{gap:0}
/* Campos cortos de Ajustes. Estaban en un style inline de 80px: con la escala
   de escritorio el placeholder "mm:ss" ya no cabía.
   Va con el elemento delante a propósito: `input[type="text"]{width:100%}` es
   (0,1,1) por el selector de atributo y le gana a una clase suelta. */
input.sc-input-sm{width:92px;flex:none;text-align:center}
/* ── Ajustes: dos niveles ─────────────────────────────────
   Agrupar los ocho bloques en categorías arregló la jerarquía pero no el
   tamaño: seguían abiertos a la vez, 1.300px de scroll con las preferencias,
   los datos de solo lectura, las acciones puntuales y la configuración de APIs
   compitiendo por la misma mirada. Ahora las categorías siguen viéndose —los
   .settings-group son el índice— y el contenido se fue a subpáginas.

   El acordeón que se descartó entonces sigue descartado por la misma razón: un
   ajuste plegado esconde su estado. Lo que hace legítimo el segundo nivel aquí
   es que cada fila del índice lo enseña (.listrow-status), así que se pliega el
   control, nunca la información. */
.settings-group{margin-bottom:var(--gap-section)}
.settings-group:last-of-type{margin-bottom:var(--gap-stack)}
/* ── Historial en escritorio: panel, no modal (J4) ────────
   Tapar el 100% de un monitor de 1500px para enseñar el detalle de una sesión
   —cuando el calendario y la lista están justo detrás y siguen siendo útiles—
   es el antipatrón clásico. A partir de 1024 el detalle se acopla a la derecha
   y el maestro sigue vivo: se puede recorrer la lista con el detalle abierto.
   Deja de ser un diálogo modal, y `showDetail` lo dice en el aria-modal para
   que el foco no quede encerrado en él. */
@media(min-width:1024px){
.detail-modal,.run-detail-modal{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  justify-content:flex-end;align-items:stretch;
  /* El scrim deja de existir, así que el overlay no puede comerse los clics
     de lo que hay debajo: solo el panel los recibe. */
  pointer-events:none;
}
.detail-modal .modal,.run-detail-modal .modal{
  pointer-events:auto;
  max-width:420px!important;width:420px;
  max-height:none!important;height:100dvh;
  margin:0!important;border-radius:0!important;
  box-shadow:var(--shadow-panel);
  animation:slideInRight var(--dur-base) ease-out;
  /* Sitio para la barra de acciones, que se acopla al pie del panel. */
  padding-bottom:76px;
}

.detail-btn-bar{
  left:auto;right:0;transform:none;
  width:420px;max-width:420px;
  border-radius:0;
  box-shadow:none;border-top:.5px solid var(--color-border-subtle);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
}
/* Cuatro acciones en 420px: el icono de compartir sobra cuando la etiqueta ya
   lo dice, y con la escala de escritorio "Compartir" se recortaba. */
.detail-btn-bar .btn{padding:10px 6px;font-size:var(--fs-sm);gap:4px}
.detail-btn-bar .detail-share-btn .material-symbols-outlined{display:none}
}
/* La fila cuyo detalle está abierto en el panel. */
.history-item.selected,.run-history-card.selected{background:var(--color-surface-3);outline:2px solid var(--color-accent-text);outline-offset:-2px}
/* width:max-content + min-width:100%: una tabla con `width:100%` y celdas
   `nowrap` resuelve el 100% contra el contenedor de scroll y luego lo desborda
   con su contenido, y ese desbordamiento se propaga hasta el viewport — la
   página entera se podía arrastrar 255px a la derecha en Cuerpo. Así la tabla
   mide lo que mide, el contenedor la desplaza, y nada se escapa. */
.progress-history,.body-history{width:max-content;min-width:100%;
  border-collapse:collapse;font-size:var(--fs-base)}
.progress-history caption{text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;padding-bottom:var(--sp-2)}
.progress-history th,.body-history th{font-size:var(--fs-xs);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:6px 8px;border-bottom:1px solid var(--color-border-subtle);white-space:nowrap}
.progress-history td,.body-history td{padding:8px;border-bottom:.5px solid var(--color-border-subtle);white-space:nowrap}
.progress-history tbody tr:last-child td,.body-history tbody tr:last-child td{border-bottom:none}
/* Los números, a la derecha y con cifras de ancho fijo: así se comparan de un
   vistazo en vez de leerse uno a uno. */
.ph-num,.bh-num{text-align:right;font-variant-numeric:tabular-nums}
/* Con el elemento delante: `.progress-history th` es (0,1,1) y le ganaba a la
   clase suelta, así que las cabeceras quedaban a la izquierda de sus números. */
.progress-history th.ph-num,.body-history th.bh-num{text-align:right}
.ph-date,.bh-date{color:var(--color-text-secondary);font-weight:500}
.body-history .bh-date{text-align:left;font-size:var(--fs-base);text-transform:none;letter-spacing:0;color:var(--color-text-secondary);border-bottom:.5px solid var(--color-border-subtle);padding:8px}
.ph-pr{font-size:var(--fs-2xs);background:var(--color-accent-text);color:var(--color-on-fill);padding:1px 6px;border-radius:var(--radius-xs);font-weight:700;vertical-align:1px}
.progress-history tr.is-pr td{background:var(--color-accent-glow)}
.bh-action{text-align:right}
.bh-action .hi-edit-btn{margin-top:0}
/* ── Progreso: lista de ejercicios en vez de desplegable (J5) ── */
.progress-ex-list{display:none}
.shortcut-list{display:flex;flex-direction:column;gap:2px;margin:var(--sp-3) 0 var(--sp-4)}
.shortcut-row{display:flex;align-items:center;gap:var(--sp-3);padding:8px 0;border-bottom:.5px solid var(--color-border-subtle)}
.shortcut-row:last-child{border-bottom:none}
.shortcut-row dt{flex:0 0 96px}
.shortcut-row dd{flex:1;font-size:var(--fs-md);color:var(--color-text-secondary)}
.shortcut-list kbd{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm);font-weight:600;background:var(--color-surface-2);color:var(--color-text-primary);border-radius:var(--radius-xs);padding:3px 8px;white-space:nowrap}

}

@layer escritorio {

@media(min-width:640px){
.sheet{align-items:center}
.sheet-panel{border-radius:var(--radius-xl);max-height:88vh;animation:fadeIn var(--dur-base) var(--ease-standard)}
}
/* ── Escritorio: shell y rail ─────────────────────────────
   640: la columna se ensancha, la nav sigue abajo.
   1024: la nav se convierte en rail lateral y libera --nav-h de alto en las
         cinco secciones; es el ancho mínimo donde rail + dos columnas legibles
         entran sin comprimir el contenido.
   1440: tercera columna donde aporta; el contenido no crece más de 1180px.
   El @media(min-width:700px) de la carrera en vivo es aparte a propósito: es un
   overlay sin nav y su umbral responde a que quepan panel y mapa. */
@media(min-width:640px){:root{--shell:600px}}
@media(min-width:1024px){:root{--shell:880px;--nav-h:0px;--rail-w:var(--rail-w-open)}}
@media(min-width:1440px){:root{--shell:1180px}}
/* ── 3.2 RAIL COLAPSABLE ────────────────────────────────────────────────────
   El rail se pliega a modo icono. Y colapsarlo tiene que **servir para algo**:
   si la shell no creciera, los 168px liberados se convertirían en margen y el
   usuario habría hecho un clic para nada. Por eso la shell recupera
   exactamente lo que suelta el rail. Todo sale de --rail-w y de --rail-w-open/
   --rail-w-icon: ni 232 ni 64 se escriben a mano en ninguna otra regla. */
@media(min-width:1024px){
:root.rail-collapsed{--rail-w:var(--rail-w-icon);
  --shell:calc(880px + var(--rail-w-open) - var(--rail-w-icon))}
}
@media(min-width:1440px){
:root.rail-collapsed{--shell:calc(1180px + var(--rail-w-open) - var(--rail-w-icon))}
}
/* ── Running: Desktop layout ─────────────────────────── */
@media(min-width:700px){
.run-live{flex-direction:row;max-width:1200px;margin:0 auto}
.run-live-data{display:flex;flex-direction:column;width:380px;min-width:340px;max-width:420px;background:var(--color-surface-1);border-right:.5px solid var(--color-border-subtle);overflow-y:auto}
.run-live-map{flex:1;min-height:unset;height:100vh}
.run-live-top{padding:16px;flex-wrap:wrap}
.run-live-timer{font-size:var(--fs-3xl)}
.run-live-metrics{flex-direction:column;gap:var(--sp-3);padding:0 20px 16px}
.run-live-metric{display:flex;align-items:baseline;justify-content:space-between;text-align:left}
.run-live-metric-value{font-size:var(--fs-2xl)}
.run-live-metric-label{font-size:var(--fs-base)}
.run-live-splits{max-height:none;flex:1}
.run-live-bottom{padding:16px 20px;border-top:.5px solid var(--color-border-subtle);margin-top:auto}
.run-pause-btn{width:56px;height:56px}
}
/* ═══ ESCRITORIO ══════════════════════════════════════════
   Todo lo que sigue solo aplica de 640px hacia arriba. Por debajo, la app se
   queda exactamente como estaba: el diseño móvil es correcto y ensancharlo
   sería una regresión. Referencia: auditoria-desktop-2026-08.md
   ═══════════════════════════════════════════════════════ */

/* ── Quirón: medida de línea ──────────────────────────────
   El panel ocupa todo el ancho (inset:0) y las burbujas iban al 88%: en un
   monitor eso son ~200 caracteres por línea. El óptimo está en 45-75. Es la
   superficie donde el usuario lee más texto seguido de toda la app. */
@media(min-width:640px){
.quiron-msgs,.quiron-chips,.quiron-inputbar,.quiron-setup{width:100%;max-width:var(--measure-prose);margin-inline:auto}
.q-bubble{max-width:min(88%,34rem)}
.quiron-header{padding-inline:max(16px,calc(50% - var(--measure-prose)/2))}
}
/* ── Rejillas que solo cambian de conteo ────────────────── */
@media(min-width:1024px){
.run-stats-grid,.run-prs-grid,.run-type-grid{grid-template-columns:repeat(4,1fr)}
}
/* El bento de Hoy NO entra aquí, y es la excepción que hay que explicar: no
   ocupa el ancho de la pantalla sino la columna izquierda del dashboard, que a
   partir de 1024 es un `minmax(0,1.35fr)` frente a la actividad reciente. Con
   la shell en 880 esa columna mide 450px y las cuatro tarjetas piden 523 — y
   como el track es minmax(0,·) no crece: desbordaba 73px por la derecha y
   "Carreras" se metía 40px dentro de Actividad reciente.
   Las cuatro caben cuando la shell pasa a 1180, no antes. Hasta ahí se queda el
   2×2 de la base, que a 450px da tarjetas de 219 — de sobra para un anillo de
   80 y su etiqueta. Medir la rejilla contra la ventana cuando lo que la
   contiene es una columna es el fallo; el número 1440 sale de esa columna. */
@media(min-width:1440px){
.dash-bento{grid-template-columns:repeat(4,1fr)}
.dash-card-wide{grid-column:span 4}
}
/* ── Entrenar: navegación secundaria lateral (§7.2) ───────
   Las tres barras apiladas del móvil se convierten aquí en una columna: el modo
   arriba, sus cuatro destinos debajo, y el contenido ocupa todo lo demás. El
   cromo vertical antes del primer dato pasa de ~180px a cero.
   El destino activo se marca con fondo y peso, NO en rojo: el rojo del rail ya
   dice en qué sección estás, y un segundo rojo diciendo lo mismo un nivel más
   abajo deja de informar. */
/* Liberar ancho no es repartirlo: la tarjeta del historial son filas de nombre a
   la izquierda y series a la derecha, y `--measure-panel` existe exactamente
   para eso. Sin tope se fue a 816px y el nombre y sus series quedaban en
   extremos opuestos con un vacío en medio — el mismo defecto que la lista de
   212px, por el otro lado. El ancho recuperado es para la rejilla de ejercicios
   y la gráfica de progreso, que sí saben qué hacer con él. */
#historyList,#runHistoryList{max-width:var(--measure-panel)}
/* La columna de 168px se retiró: aquí iban las reglas que volteaban las pestañas
   a vertical en ≥1024. La navegación secundaria de Entrenar es la misma fila
   horizontal en todos los anchos —el `.subnav-tabs` de la base— y la sección
   vuelve a ser flujo normal en una columna.

   El razonamiento está en el HTML, junto a #trainSubnav, y en DESIGN_SYSTEM §7.2b:
   el carril lateral se justificaba por las ~180px verticales de TRES barras
   apiladas, y esa misma reorganización eliminó dos. Con una sola barra el
   intercambio se invierte — 48px verticales una vez contra 168 horizontales
   permanentes— y en esta pantalla el eje vertical es el barato.
   El modo Fuerza/Carrera se fue a la cabecera con el resto del estado. */
@media(min-width:1024px){
/* Las pestañas no se estiran a lo ancho de la pantalla: son cuatro palabras
   cortas, y un segmentado de 900px con el texto flotando en el centro de cada
   cuarto no se lee como un control. Ancho de contenido, alineado al principio. */
.subnav-tabs{align-self:start;width:max-content;max-width:100%}
.subnav-tabs>button{flex:0 0 auto;padding-inline:var(--sp-5)}
}
/* ── Cuerpo (migrada) ────────────────────────────────────
   Dos columnas de paneles. Ni la cabecera ni el estado ni el historial se
   parten: la cabecera porque es una sola línea, el estado y el historial
   porque son rejillas que ya crecen en número por fila — es exactamente el
   principio de "el escritorio gana densidad, no tamaño". Lo único que se
   reparte son los dos paneles de lectura, que sí son bloques independientes. */
@media(min-width:1024px){
#secBody.active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 var(--gap-section);align-items:start}
#secBody>.page-head,#secBody>.body-now,#secBody>.body-hist-full{grid-column:1/-1}
}
/* ── Formularios: un campo por línea, sin estirar ───────── */
@media(min-width:1024px){
#strTrain>.row,#runTrain .row{max-width:var(--measure-form)}
.progress-select-wrap select,.history-filter-wrap select,.str-plan-select{max-width:var(--measure-form)}
}
/* Los 1RM de Ajustes: la regla que había aquí era de cuando #rmPanel contenía
   cinco .calc-result sueltos. Hoy contiene UN .tiles, y una rejilla de tres
   columnas alrededor de un solo hijo lo metía en el primer tercio: los cinco
   1RM se apilaban en una columna de 164px dentro de un panel de 510, con dos
   tercios en blanco al lado. Es el mismo hueco por reparto que Entrenar, en
   pequeño y por una regla que se quedó vieja.
   Se borra: .tiles ya es auto-fill y crece en número por fila (§5.6), que es
   exactamente lo que esta regla intentaba hacer a mano y por breakpoint. */
@media(min-width:1024px){input.sc-input-sm{width:96px}}
/* El calendario no crece con la columna: las celdas de día se vuelven círculos
   enormes y el mes deja de leerse como una rejilla. */
@media(min-width:640px){
#calendarPanel,#runCalendarPanel{max-width:420px;margin-inline:auto}
}
@media(min-width:1024px){
/* margin-inline:0 además de max-width: el auto heredado del breakpoint de 640
   dejaba el calendario flotando en el centro de su columna en vez de alineado
   con los filtros que tiene encima. */
#calendarPanel,#runCalendarPanel{margin-inline:0}
/* Apilado encima de la lista, el calendario cambia de papel: deja de ser una
   columna hermana para ser lo que hay ANTES del contenido, y su alto se lo come
   a la primera pantalla. A 420px de ancho las celdas son de 52 (aspect-ratio:1)
   y el mes entero mide 470: la lista arrancaba fuera del viewport y no se veía
   ni una sesión sin scroll — peor que el problema que esto venía a arreglar.
   A 300 las celdas quedan en 37, el mes en ~300, y la primera sesión entra.
   Sigue siendo un filtro: no puede ocupar más que aquello que filtra. */
#calendarPanel,#runCalendarPanel,.cal-nav{max-width:300px}
.cal-nav{margin-inline:0;margin-bottom:var(--sp-2)}
.cal-container{padding:12px}
.cal-header{margin-bottom:8px}
.cal-grid .cal-day{font-size:var(--fs-sm)}
}
/* Con columna propia vuelve a ser una columna hermana, no un preámbulo: recupera
   los 260 de su carril y la densidad normal. */
@media(min-width:1440px){
#calendarPanel,#runCalendarPanel,.cal-nav{max-width:none}
.cal-nav{margin-bottom:var(--sp-4)}
.cal-container{padding:16px}
.cal-header{margin-bottom:14px}
.cal-grid .cal-day{font-size:var(--fs-md)}
}
@media(min-width:1024px){
.progress-select-wrap .progress-label,.progress-select-wrap select{display:none}
.progress-ex-list{display:flex;flex-direction:column;gap:2px}
.progress-ex{background:none;border:none;border-radius:var(--radius-md);padding:9px 12px;text-align:left;font-family:var(--font);font-size:var(--fs-md);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
/* El ejercicio elegido era un relleno rojo a ancho de columna: el objeto más
   pesado de Progreso, y no es una acción — es una selección de lista. El §5.8
   ya lo dice para el segmentado ("fondo y peso, nunca una banda de acento") y
   aquí se aplicaba lo contrario, además con el rojo que la gráfica, el PR y la
   fila destacada ya estaban usando. Fondo y peso, como sus vecinos. */
.progress-ex.active{background:var(--color-surface-2);color:var(--color-text-primary);font-weight:700}
}

}

@layer overrides {

@media(hover:hover) and (pointer:fine){
.listrow--action:hover{background:var(--color-surface-3)}
.listrow--action:hover .listrow-chevron{color:var(--color-accent-text)}
}
@media(hover:hover) and (pointer:fine){
.chip:hover{background:var(--color-surface-3);border-color:var(--color-accent-soft)}
}
@media(prefers-reduced-motion:reduce){.sheet-panel{animation:none}}
@media(hover:hover) and (pointer:fine){
.body-history .hi-edit-btn:hover{background:var(--color-surface-3)}
}
/* Scrollbar. En táctil el sistema ya la gestiona y esconderla es correcto; con
   ratón es la única señal de cuánto documento queda por debajo, y hay secciones
   de más de 2.000px. La regla anterior era global y solo ponía width:0, así que
   las barras horizontales aparecían igual: ni siquiera era consistente. */
@media(pointer:coarse){::-webkit-scrollbar{width:0;height:0}}
@media(pointer:fine){
*{scrollbar-width:thin;scrollbar-color:var(--color-text-tertiary) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-text-tertiary);border-radius:var(--radius-pill);border:3px solid transparent;background-clip:content-box}
}
/* En móvil, Entrenar se queda sin título de pantalla. No es un olvido: la barra
   inferior ya dice "Entrenar" a dos centímetros, y el subtítulo repetía el modo
   que está en el segmentado justo debajo. Sumados eran ~65px de cromo para
   contar dos veces algo que ya se sabe, y esta pantalla es justo la que no
   podía permitírselos. En ≥1024 vuelve, porque ahí sí hay sitio y la cabecera
   es la que sostiene el contexto que antes era una barra sticky. */
@media(max-width:1023.98px){
#secTrain>.page-head{margin-bottom:var(--gap-stack)}
#secTrain>.page-head>.page-head-txt{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (prefers-reduced-motion:reduce){
  .ex-pict img{animation:none!important}
  .ex-pict img:first-child{opacity:1}
}
@media (prefers-reduced-motion:reduce){.set-runner{transition:none}}
@media (prefers-reduced-motion:reduce){.radar-worst{animation:none}}
/* ── Estados de puntero ───────────────────────────────────
   No había una sola declaración :hover en toda la hoja: los 37 :active eran el
   único feedback, y con ratón :active dura lo que dura el clic. Resultado: nada
   reaccionaba hasta después de pulsar.
   Siempre bajo @media(hover:hover): un :hover suelto se queda pegado en táctil
   después de tocar, y esto es una PWA que se instala en el móvil. */
@media(hover:hover) and (pointer:fine){
.btn:hover{filter:brightness(1.06)}
.btn-outline:hover{background:var(--color-surface-3)}
nav button:hover:not(.active){color:var(--color-text-primary);background:var(--color-surface-2)}
.so-ex:hover,.history-item:hover,.run-history-card:hover{background:var(--color-surface-3)}
.dash-card:hover,.dash-level:hover{box-shadow:var(--shadow-2)}
.dash-level:hover .dash-level-go{color:var(--color-accent-text)}
.q-chip:hover,.timer-btn:hover,.se-preset-chip:hover{background:var(--color-surface-2);border-color:var(--color-accent-soft)}
.str-tab:hover:not(.active),.run-tab:hover:not(.active),.train-mode-btn:hover:not(.active){color:var(--color-text-primary)}
.cal-day.has-workout:hover{outline:2px solid var(--color-accent-soft);outline-offset:1px}

.quiron-hbtn:hover,.cal-nav button:hover,.prefill-clear:hover{background:var(--color-surface-3);color:var(--color-accent-text)}
.toggle-btn:hover{filter:brightness(.97)}
.ex-dot:hover{background:var(--color-accent-soft)}
a:hover{opacity:.8}
}
@media(prefers-reduced-motion:reduce){.detail-modal .modal,.run-detail-modal .modal{animation:none}}
@media(hover:hover) and (pointer:fine){
.progress-ex:hover:not(.active){background:var(--color-surface-2);color:var(--color-text-primary)}
}
/* La fila de atajos ahora ES el botón, no el panel que lo envolvía: devolverle
   `display:block` la rompería en dos líneas (icono arriba, texto debajo). */
@media(pointer:fine){.kbd-only{display:block}.listrow--action.kbd-only{display:flex}}

}