/* ===========================================================
   CampoBase — sistema de diseno (Fase 8, rediseno visual completo)
   Fuente: documento "CampoBase — Diseno visual completo" (DISENO-VISUAL-CAMPOBASE.md).
   Paleta petroleo, tipografia Alice / Inter / IBM Plex Mono,
   modo claro/oscuro, sin colores tipo semaforo salvo Bienestar/Recuperacion.
   Tipografia de titulos: Space Grotesk -> Instrument Serif -> Alice, las
   dos ultimas en la misma sesion (revision visual con el usuario). Space
   Grotesk se sintio "artificial"; Instrument Serif, ya aplicada, resulto
   casi indistinguible a los tamanos reales de la app (14-17px la mayoria
   de los titulos) porque es una serif pensada para verse grande, no para
   texto/UI. Confirmada Alice sin poder probarla contra Electron real
   todavia (ver README 5.53 para el estado exacto). Alice solo trae el
   peso 400 (ver build.js) — donde el CSS pide 600/700 el navegador lo
   engrosa el mismo.
   =========================================================== */

/* ---------- Tipografia: Alice (titulos y numeros destacados), Inter (texto), IBM Plex Mono (datos numericos de tabla) ---------- */
@font-face {
  font-family: 'Alice';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/alice-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Alice';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/alice-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0301;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('./fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0301;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0301;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0301;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('./fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0301;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('./fonts/ibm-plex-mono-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0300-0301;
}

/* ---------- Tokens: paleta "Original (petroleo)" — CampoBase-Diseno-visual-completo, seccion 2 ---------- */
:root {
  /* Modo claro (correccion tras prueba real, Fase 8): el usuario probo la
     app y encontro el blanco puro (#FFFFFF de superficie sobre #F6F6F4
     de fondo) demasiado fuerte/deslumbrante, con los bordes tan sutiles
     que las tarjetas "se perdian a la vista". Se mantiene la misma
     familia (petroleo, calida, neutra) pero con menos contraste crudo:
     superficie ligeramente marfil en vez de blanco puro, fondo un poco
     mas profundo para que las tarjetas se noten mas, bordes mas
     visibles, y texto secundario/terciario un poco mas oscuro para
     mejor lectura.
     Paleta original documentada, sin tocar: --bg: #F6F6F4; --surface:
     #FFFFFF; --text-2: #6B7280; --text-3: #9AA0A6; --border: #E7E7E3;
     --chip-bg: #F1F1EE. */
  /* Grises reforzados (Fase 8, revision visual de Evaluaciones con el
     usuario): --text-2/--text-3 se corrieron un escalon mas oscuro
     (claro) / mas claro (oscuro) cada uno — el --text-2 anterior pasa
     a ser el --text-3 nuevo, y --text-2 suma un tono fresco todavia
     mas cercano a --text. Se probo primero en una pantalla sola
     (Evaluaciones, tarjetas de historial) antes de confirmar que se
     aplicara a los dos tokens base, asi que alcanza a toda la app de
     una sola vez (fechas, etiquetas de campo, texto secundario en
     general) sin tener que tocar cada pantalla por separado.
     Valores anteriores, por si hace falta volver atras: claro
     --text-2: #5E6570 / --text-3: #85898F; oscuro --text-2: #9AA3A8 /
     --text-3: #6E7478. */
  --bg: #EFEAD9;
  --surface: #FAF6E9;
  --text: #15191D;
  --text-2: #454B54;
  --text-3: #5E6570;
  /* Acento cambiado de verde petroleo a azul acero (Fase 8, revision
     de Carga con el usuario): mismo motivo que ya llevo al modo
     oscuro a dejar el verde-azulado en la ronda 14 -- se sintio
     "generico, de IA" tambien en claro. Tono emparentado con el
     acento de oscuro (#9EC0E3) pero mas oscuro/saturado para leerse
     bien sobre el fondo calido. Valor anterior: --accent: #2B6461 /
     --accent-soft: #E3EDEC.
     --accent-soft corregido una segunda vez (ronda siguiente): el
     usuario lo encontro "perdido" contra el fondo crema -- subio de
     saturacion (de #E2ECF2 a #D2E3EC) para notarse como una forma
     propia, no solo un blanco apenas distinto. */
  --accent: #2E5E7D;
  --accent-soft: #D2E3EC;
  /* Texto sobre fondos de --accent: blanco en claro (acento oscuro),
     pero el acento de oscuro es un azul CLARO (#9EC0E3) -- texto
     blanco ahi se pierde. Bug real encontrado por el usuario en los
     botones (y, revisando, tambien afectaba chips activos, dia de hoy
     en el calendario, etc. -- todos los usos de blanco fijo sobre
     --accent). */
  --accent-contrast: #fff;
  --border: #E0D5B8;
  /* Contorno reforzado para contenedores estructurales grandes (bloques
     del Constructor de sesion): el --border normal, pensado para inputs
     y separadores finos, se perdia de vista al delimitar una region
     entera (Fase 8, revision visual de 8.25 con el usuario). */
  --border-strong: color-mix(in srgb, var(--border) 68%, var(--text) 32%);
  --chip-bg: #EAE1C7;
  --bar-soft: #CBDAD9;
  --good: #4F7A63;
  --warn: #B98A2E;
  --bad: #B23A2E;

  /* Periodizacion (Fase 8, confirmado tras varias rondas de revision):
     un color por tipo de mesociclo del modelo ATR (Acumulacion,
     Transformacion, Realizacion), mas saturados que el resto de la
     paleta a proposito -- versiones mas suaves se sintieron "apagadas".
     Un tipo de mesociclo personalizado (fuera de estos 3 nombres) usa
     --meso-default, que es el mismo acento del resto de la app. */
  --meso-acum: #1F4F4C;
  --meso-acum-soft: #E3EDEC;
  --meso-trans: #A5451F;
  --meso-trans-soft: #F1E1D6;
  --meso-real: #8C6A1C;
  --meso-real-soft: #F0E4C5;
  --meso-default: var(--accent);
  --meso-default-soft: var(--accent-soft);
  /* Colores de tipo de evento del calendario (ronda 46): 4 tonos fijos
     que elige el administrador al crear un tipo. Los tres primeros son
     los de los tipos del sistema (Competencia, Pesaje, Evaluacion). */
  --evt-1: #A5451F; --evt-1-soft: #F1E1D6;
  --evt-2: #8C6A1C; --evt-2-soft: #F0E4C5;
  --evt-3: #1F4F4C; --evt-3-soft: #E3EDEC;
  --evt-4: #6B4C8A; --evt-4-soft: #E9E1F0;
  /* Colores de categoria de ejercicio (ronda 48): 6 tonos que elige el
     entrenador; las subcategorias usan el de su principal. */
  --cat-1: #A5451F; --cat-1-soft: #F1E1D6;
  --cat-2: #8C6A1C; --cat-2-soft: #F0E4C5;
  --cat-3: #1F4F4C; --cat-3-soft: #E3EDEC;
  --cat-4: #6B4C8A; --cat-4-soft: #E9E1F0;
  --cat-5: #2E5E7D; --cat-5-soft: #D2E3EC;
  --cat-6: #8A3D5C; --cat-6-soft: #F2DCE5;

  /* alias retrocompatibles con el sistema anterior, para no tener que tocar cada
     componente que todavia usa var(--ink)/var(--line)/var(--danger) etc. */
  --ink: var(--bg);
  --line: var(--border);
  --chalk: var(--text);
  --chalk-dim: var(--text-2);
  --chalk-faint: var(--text-3);
  --pitch: var(--accent);
  --pitch-strong: var(--accent);
  --pitch-dim: var(--accent-soft);
  --track: var(--warn);
  --track-dim: color-mix(in srgb, var(--warn) 18%, transparent);
  --danger: var(--bad);
  --danger-dim: color-mix(in srgb, var(--bad) 16%, transparent);
  --surface-raised: var(--chip-bg);
  --surface-hover: var(--chip-bg);

  --font-display: 'Alice', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', 'SFMono-Regular', Menlo, monospace;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-card: 0 1px 4px rgba(21,25,29,0.045), 0 6px 16px rgba(21,25,29,0.05);
}

/* Oscuro: sigue la preferencia del sistema salvo que la persona elija un modo fijo
   en Configuracion personal (data-theme="light"|"dark" en <html>, ver lib/theme.js).
   Paleta reemplazada por completo (Fase 8, revision visual): el usuario sintio
   el tono verde-azulado original "generico, de IA, artificial" — se probaron 4
   direcciones nuevas sin ningun parentesco con esa paleta (calida/tierra,
   oxblood, tinta profunda, monocroma), se confirmo tinta profunda (negro
   azulado, no verdoso) con acento acero en vez del dorado propuesto primero,
   y despues se reforzo el contraste del texto secundario contra el fondo
   azulado. --meso-acum/trans/real (colores de tipo de mesociclo en
   Periodizacion) NO se tocaron a proposito: son una excepcion distinta y ya
   confirmada por separado al principio de "sin colores tipo semaforo" (mas
   saturados adrede), no el acento general de la app — que "meso-acum"
   coincidiera antes con el accent viejo era casualidad, no una relacion real.
   Lo mismo para --good/--warn/--bad (Bienestar), otra excepcion aparte.
   Valores anteriores, por si hace falta volver atras: --bg #15191A, --surface
   #1D2224, --text #ECEDEB, --text-2 #B8C0C5, --text-3 #9AA3A8, --accent
   #5FA9A3, --accent-soft #1C3230, --border #2A3033, --chip-bg #23282A.
   Dos correcciones mas, encontradas por el usuario probando la app real:
   1) --accent-contrast nuevo (ver el bloque de :root, mas arriba): el acento
   de oscuro quedo siendo un azul CLARO -- texto blanco fijo encima (botones,
   chips activos, etc.) se perdia. 2) --accent-soft subio de #243040 a
   #2E4C63: se usa como color de las barras "no destacadas" del grafico de
   Carga (y como fondo de insignias) y contra un fondo tan oscuro quedaba
   casi invisible -- mismo motivo que la correccion de --accent-soft en
   modo claro (ver el bloque de :root). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #10131A; --surface: #171B24; --text: #F1F3F7; --text-2: #C7CDDA; --text-3: #9BA3B5;
    --accent: #9EC0E3; --accent-soft: #2E4C63; --border: #2A3040; --chip-bg: #1D212B; --accent-contrast: #0E1017;
    --border-strong: color-mix(in srgb, var(--border) 55%, var(--text) 45%);
    --bar-soft: #2D4341; --good: #7FB08D; --warn: #D9AE5C; --bad: #D3806A;
    --meso-acum: #5FA9A3; --meso-acum-soft: #1C3230;
    --meso-trans: #E08A5C; --meso-trans-soft: #3A2A1E;
    --meso-real: #D9AE5C; --meso-real-soft: #332B18;
    --meso-default: var(--accent); --meso-default-soft: var(--accent-soft);
    --evt-1: #E08A5C; --evt-1-soft: #3A2A1E; --evt-2: #D9AE5C; --evt-2-soft: #332B18; --evt-3: #5FA9A3; --evt-3-soft: #1C3230; --evt-4: #B79AD6; --evt-4-soft: #2C2438;
    --cat-1: #E08A5C; --cat-1-soft: #3A2A1E; --cat-2: #D9AE5C; --cat-2-soft: #332B18; --cat-3: #5FA9A3; --cat-3-soft: #1C3230; --cat-4: #B79AD6; --cat-4-soft: #2C2438; --cat-5: #9EC0E3; --cat-5-soft: #2E4C63; --cat-6: #D98AAB; --cat-6-soft: #3A2230;
    --shadow-card: 0 2px 8px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.30);
  }
}
html[data-theme="dark"] {
  --bg: #10131A; --surface: #171B24; --text: #F1F3F7; --text-2: #C7CDDA; --text-3: #9BA3B5;
  --accent: #9EC0E3; --accent-soft: #2E4C63; --border: #2A3040; --chip-bg: #1D212B; --accent-contrast: #0E1017;
  --border-strong: color-mix(in srgb, var(--border) 55%, var(--text) 45%);
  --bar-soft: #2D4341; --good: #7FB08D; --warn: #D9AE5C; --bad: #D3806A;
  --meso-acum: #5FA9A3; --meso-acum-soft: #1C3230;
  --meso-trans: #E08A5C; --meso-trans-soft: #3A2A1E;
  --meso-real: #D9AE5C; --meso-real-soft: #332B18;
  --meso-default: var(--accent); --meso-default-soft: var(--accent-soft);
    --evt-1: #E08A5C; --evt-1-soft: #3A2A1E; --evt-2: #D9AE5C; --evt-2-soft: #332B18; --evt-3: #5FA9A3; --evt-3-soft: #1C3230; --evt-4: #B79AD6; --evt-4-soft: #2C2438;
    --cat-1: #E08A5C; --cat-1-soft: #3A2A1E; --cat-2: #D9AE5C; --cat-2-soft: #332B18; --cat-3: #5FA9A3; --cat-3-soft: #1C3230; --cat-4: #B79AD6; --cat-4-soft: #2C2438; --cat-5: #9EC0E3; --cat-5-soft: #2E4C63; --cat-6: #D98AAB; --cat-6-soft: #3A2230;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.30);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .15s ease, color .15s ease;
}
#root { height: 100%; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
}

/* ---------- Layout general: barra superior + contenido + tab bar (Fase 8) ---------- */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}
.topbar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.topbar__brand span { color: var(--accent); }
.topbar__org { font-family: var(--font-body); font-weight: 400; font-size: 11.5px; color: var(--text-3); }
.topbar__actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--chip-bg); border: none; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: background .12s ease;
}
.icon-btn:hover { background: var(--border); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn__dot {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bad); border: 2px solid var(--surface);
}

.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); border: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; cursor: pointer;
  flex-shrink: 0;
}

.dropdown-menu {
  position: absolute; top: 62px; right: 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card);
  padding: 6px; width: 240px; z-index: 40; display: none; flex-direction: column;
}
.dropdown-menu.dropdown-menu--open { display: flex; }
.dropdown-menu button, .dropdown-menu a.dropdown-menu__item {
  text-align: left; background: none; border: none; padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; color: var(--text); cursor: pointer; font-family: var(--font-body);
  display: block; text-decoration: none; width: 100%;
}
.dropdown-menu button:hover, .dropdown-menu a.dropdown-menu__item:hover { background: var(--chip-bg); }
.dropdown-menu__sep { height: 1px; background: var(--border); margin: 5px 4px; }
.dropdown-menu__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  padding: 8px 12px 2px; font-family: var(--font-body); font-weight: 600;
}

.notif-panel {
  position: absolute; top: 62px; right: 70px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card);
  padding: 10px; width: 280px; max-height: 360px; overflow-y: auto; z-index: 40; display: none;
}
.notif-panel.notif-panel--open { display: block; }
.notif-panel__title { font-size: 12px; font-weight: 600; margin-bottom: 6px; padding: 4px 4px 0; }
.notif-row { display: flex; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; cursor: pointer; }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--chip-bg); border-radius: 8px; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; }
.notif-row--read .notif-dot { background: var(--border); }
.notif-row__time { color: var(--text-3); font-size: 11px; margin-top: 1px; }
.notif-panel__empty { padding: 18px 8px; text-align: center; color: var(--text-3); font-size: 12.5px; }

.main-area {
  flex: 1;
  overflow-y: auto;
}

.offline-banner {
  display: block; padding: 9px 24px; font-size: 12.5px; text-align: center;
  background: var(--accent-soft); color: var(--accent); border-bottom: 1px solid var(--border);
}

/* ---------- Tab bar inferior (4 secciones fijas por rol) ---------- */
.tabbar {
  display: flex; justify-content: space-around; align-items: stretch;
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}
.tabitem {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--text-3); background: none; border: none; cursor: pointer;
  padding: 6px 14px; font-family: var(--font-body); border-radius: 12px; flex: 1; max-width: 140px;
  transition: color .12s ease;
}
.tabitem:hover { color: var(--text-2); }
.tabitem svg { width: 21px; height: 21px; }
.tabitem--active { color: var(--accent); font-weight: 600; }
.tabitem__badge {
  position: absolute; margin-left: 14px; margin-top: -4px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--bad);
}

.page {
  padding: 24px 28px 60px;
  max-width: 1040px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}
.page-subtitle {
  color: var(--text-2);
  font-size: 13px;
  margin-top: 4px;
}
.page-actions { display: flex; gap: 8px; }

/* ---------- Botones ----------
   Fase 8, revision de "feeling": pildora con sombra suave en el
   primario (crece al pasar el mouse, se achica al tocar — el
   achicamiento ya existia desde la ronda 4 de interaccion/motion, mas
   abajo en este archivo), secundario/ghost/danger con fondo de color
   suave en vez de plano o solo borde. Confirmado con el usuario en la
   revision visual del Constructor de sesion, pensado para toda la app
   por ser una clase base compartida (mismo criterio que la ronda 4). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-body);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease, filter .15s ease, transform .15s ease;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 20%, transparent); }
.btn--primary:hover:not(:disabled) { filter: brightness(1.04); box-shadow: 0 3px 9px color-mix(in srgb, var(--accent) 25%, transparent); transform: translateY(-1px); }
.btn--secondary { background: var(--chip-bg); color: var(--text); }
.btn--secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--chip-bg) 75%, var(--border-strong) 25%); }
.btn--ghost { background: var(--accent-soft); color: var(--accent); }
.btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 55%, var(--accent) 20%); }
.btn--danger { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 22%, transparent); }
.btn--sm { padding: 7px 14px; font-size: 12px; }
.btn--icon { padding: 8px 9px; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card + .card { margin-top: 14px; }
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
  text-align: left;
}
.tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tile__name { font-weight: 600; font-size: 14.5px; }
.tile__meta { font-size: 12px; color: var(--text-2); }

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

.input, .select, .textarea {
  background: var(--surface);
  /* Fase 8 (revision de Saltos): borde de los campos mas visible en
     ambos modos. Antes: 1px solid var(--border). */
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--text) 30%);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; }
.textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); }
.input--mono { font-family: var(--font-mono); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.badge--pitch { background: var(--accent-soft); color: var(--accent); }
.badge--track { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.badge--danger { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
/* "Test real" en RM de referencia: la tarjeta ya usa --accent-soft de
   fondo, asi que .badge--pitch se perdia contra ella (Fase 8, RM). */
.badge--rm-real { background: var(--surface); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.badge--neutral { background: var(--chip-bg); color: var(--text-2); border: 1px solid var(--border); }

/* ---------- Tablas ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--chip-bg); }
.table .num { font-family: var(--font-mono); }

/* ---------- Estado vacio ---------- */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.empty-state__title { color: var(--text); font-size: 15px; margin-bottom: 6px; font-weight: 600; font-family: var(--font-display); }

/* ---------- Selector de perfil / configuracion inicial ---------- */
.profile-gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 32px;
  background: var(--bg);
}
.profile-gate__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
}
.profile-gate__brand span { color: var(--accent); }
.profile-gate__section {
  width: 100%;
  max-width: 760px;
}
.profile-gate__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 12px;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: border-color .12s ease, transform .12s ease;
}
.profile-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.profile-card .avatar-badge { width: 44px; height: 44px; font-size: 16px; }
.profile-card__name { font-weight: 600; font-size: 13.5px; }
.profile-card__sub { font-size: 11px; color: var(--text-3); }
.profile-card--add {
  border-style: dashed;
  color: var(--text-2);
  justify-content: center;
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--chip-bg);
}
.profile-chip__info { flex: 1; min-width: 0; }
.profile-chip__name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-chip__role {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profile-chip__switch {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 11px;
  text-decoration: underline;
  padding: 6px 4px;
}
.profile-chip__switch:hover { color: var(--text); }

.avatar-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21,25,29,0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  overflow-y: auto;
  z-index: 50;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 560px;
  padding: 24px 26px;
}
.modal--wide { max-width: 760px; }
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.modal__close {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}
.modal__close:hover { color: var(--text); }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Calendario ---------- */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
}
.calendar-header__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; min-width: 190px; text-align: center; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar-weekday {
  text-align: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-3);
  padding-bottom: 8px;
}
.calendar-day {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  min-height: 92px; padding: 8px 8px; display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
}
.calendar-day:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.calendar-day--muted { opacity: 0.4; }
.calendar-day--today { border-color: var(--accent); }
.calendar-day--taper { background: var(--accent-soft); }
.calendar-day__num {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.calendar-day__num--today { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.calendar-day__events { display: flex; gap: 3px; flex-wrap: wrap; }
.calendar-event-icon { font-size: 12px; }

/* ---------- DateField: casilla de fecha con mini calendario emergente ---------- */
.datefield { position: relative; display: inline-block; width: 100%; }
.datefield input { cursor: pointer; }
.datefield__popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 10px;
}
.datefield__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.datefield__title { font-size: 12.5px; font-weight: 600; }
.datefield__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datefield__weekday { text-align: center; font-size: 10.5px; color: var(--text-2); padding: 2px 0; }
.datefield__day {
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  padding: 5px 0;
  cursor: pointer;
  font-family: var(--font-mono);
}
.datefield__day:hover:not(:disabled) { background: var(--chip-bg); }
.datefield__day--muted { color: var(--text-2); opacity: 0.5; }
.datefield__day--selected { background: var(--accent); color: var(--accent-contrast); }
.datefield__day--disabled { opacity: 0.25; cursor: not-allowed; }
.datefield__footer { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.session-pill {
  font-size: 10.5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 6px;
  padding: 2px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* ---------- Bloques y ejercicios del Constructor de sesion (8.25) ----------
   Confirmado con el usuario tras varias rondas de vista previa: contorno
   reforzado por bloque, filas de ejercicio en formato tabla (columnas
   propias para series/reps-tiempo/descanso en vez de una sola etiqueta),
   circuito marcado con acento lateral + etiqueta, sin fondos de color
   apilados (la primera version, con cada ejercicio en una caja con
   relleno, se sintio "tosca, aparatosa y saturante a la vista"). */
.session-block { border: 1px solid var(--border-strong); border-radius: 16px; padding: 4px 16px; }
.session-block + .session-block { margin-top: 14px; }
.session-block__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0 10px; }
.session-block__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.session-block__count { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.session-block__remove { font-size: 12px; color: var(--text-3); background: none; border: none; cursor: pointer; font-family: var(--font-body); }

.session-tbl-head { display: grid; grid-template-columns: 1fr 50px 66px 64px; gap: 8px; padding: 0 0 7px; }
.session-tbl-head span { font-size: 10.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; text-align: right; }
.session-tbl-head span:first-child { text-align: left; }
.session-tbl-row {
  display: grid; grid-template-columns: 1fr 50px 66px 64px; gap: 8px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--border); width: 100%; background: none; border-left: none; border-right: none; border-bottom: none;
  font-family: var(--font-body); cursor: pointer; text-align: left;
}
.session-tbl-row:first-of-type { border-top: 1px solid var(--border); }
.session-tbl-row__name { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.session-tbl-row__name small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--text-2); font-size: 11px; margin-top: 1px; }
.session-tbl-num { font-family: var(--font-mono); font-weight: 600; font-size: 13px; text-align: right; color: var(--text); }
.session-tbl-row__x { color: var(--text-3); font-size: 12px; flex-shrink: 0; }

.session-circuit { border-top: 1px solid var(--border); padding: 11px 0 11px 13px; border-left: 2px solid var(--accent); margin-left: 1px; margin-top: 2px; cursor: pointer; }
.session-circuit__tag { font-size: 10.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.session-circuit__rest { font-size: 11.5px; color: var(--text-2); margin-top: 6px; }

.session-add-link { color: var(--accent); font-size: 12.5px; font-weight: 600; display: inline-block; padding: 12px 0 14px; background: none; border: none; cursor: pointer; font-family: var(--font-body); }
.session-add-block { color: var(--accent); font-size: 13px; font-weight: 600; margin-top: 16px; display: inline-block; background: none; border: none; cursor: pointer; font-family: var(--font-body); }

/* Editor de ejercicio (paso 2, 8.25): divulgacion progresiva — solo
   ejercicio/formato/cantidades/carga visibles al abrir; intensidad,
   circuito y compañeros quedan detras de "Mas opciones" (principio 1
   de la seccion 3 del documento de diseno). Confirmado con el usuario
   tras mostrar el mismo problema de saturacion que tuvo el paso 1. */
.session-more-toggle { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 600; padding: 4px 0 6px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--font-body); }
.session-more-toggle svg { width: 13px; height: 13px; transition: transform .2s ease; }
.session-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.session-more-panel { padding-top: 6px; }

.member-card { border: 1px solid var(--border-strong); border-radius: 14px; padding: 13px 14px; margin-top: 12px; }
.member-card__tag { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.member-card__remove { font-size: 11px; color: var(--text-2); background: none; border: none; text-transform: none; letter-spacing: 0; font-weight: 600; cursor: pointer; font-family: var(--font-body); }

/* ---------- Evaluaciones: tarjetas de intento/par en grilla, resumen
   en vivo, y "Mas opciones" — compartido entre Saltos, Fuerza
   Isometrica y Fuerza-Velocidad (5.40-5.43). Mismos nombres de clase
   en los tres archivos para no duplicar estilos por pantalla. */
.eval-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.eval-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.eval-card__num { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--text-2); }
.eval-card__x { font-size: 11px; color: var(--text-2); background: none; border: none; cursor: pointer; font-family: var(--font-body); }
.eval-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eval-card__row + .eval-card__row { margin-top: 8px; }
.eval-card__field-label { font-size: 10.5px; color: var(--text-3); margin-bottom: 4px; }
.eval-card__group-label { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 5px; }
.eval-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .eval-card-grid { grid-template-columns: 1fr; } }

.eval-live-summary { background: color-mix(in srgb, var(--good) 16%, var(--surface) 84%); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.eval-live-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--good); font-weight: 600; }
.eval-live-summary__row + .eval-live-summary__row { margin-top: 4px; }
.eval-live-summary__row span:last-child { font-family: var(--font-mono); }
.eval-live-summary--empty { background: var(--accent-soft); color: var(--text-2); font-size: 11.5px; padding: 9px 14px; border-radius: 12px; margin-bottom: 10px; }
.eval-live-summary--warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface) 84%); }
.eval-live-summary--warn .eval-live-summary__row { color: var(--warn); }
.eval-live-summary--bad { background: color-mix(in srgb, var(--bad) 16%, var(--surface) 84%); }
.eval-live-summary--bad .eval-live-summary__row { color: var(--bad); }

.eval-more-toggle { background: none; border: none; color: var(--accent); font-size: 12.5px; font-weight: 700; padding: 4px 0 6px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--font-body); }
.eval-more-toggle svg { width: 13px; height: 13px; transition: transform .2s ease; }
.eval-more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.eval-more-panel { padding-top: 6px; }

/* ---------- Evaluaciones: historial con badge de consistencia (CV) y
   linea de cambio — 5.40/5.41 (logica) + 5.4x (interfaz). Comparten
   nombre de clase entre Saltos/Isometrica igual que las tarjetas de
   entrada de arriba. */
.eval-row-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; padding: 16px; }
.eval-row-card + .eval-row-card { margin-top: 12px; }
.eval-row-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.eval-row-card__date { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.eval-row-card__value { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-top: 2px; }
.eval-row-card__unit { font-size: 13px; font-weight: 600; color: var(--text-2); margin-left: 3px; }

.eval-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.eval-badge--good { background: color-mix(in srgb, var(--good) 16%, var(--surface) 84%); color: var(--good); }
.eval-badge--warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface) 84%); color: var(--warn); }
.eval-badge--bad { background: color-mix(in srgb, var(--bad) 16%, var(--surface) 84%); color: var(--bad); }
.eval-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Saltos SJ/CMJ/Drop Jump (Fase 8, opcion C): grafico + comparacion a
   la izquierda (fijos al desplazarse), historial a la derecha. */
.jump-two-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.jump-two-col__left { position: sticky; top: 12px; }
.jump-two-col__left .card + .card { margin-top: 0; }
@media (max-width: 900px) { .jump-two-col { grid-template-columns: 1fr; } .jump-two-col__left { position: static; } }
/* Comparacion puntual: lista para agregar fechas (Fase 8, variante 3). */
.pc-add-list { margin-top: 8px; padding: 6px; max-height: 200px; overflow-y: auto; }
.pc-add-item { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; border-top: 1px solid var(--border); cursor: pointer; padding: 8px 10px; color: var(--text); font: inherit; }
.pc-add-item:first-child { border-top: none; }
.pc-add-item:hover { background: var(--chip-bg); }
.pc-chip-x { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
/* Tabla de RFD del formulario de Fuerza Isometrica (Fase 8, opcion B):
   antes .rfd-head/.rfd-row no tenian estilos y la tabla se veia rota. */
.rfd-table { display: flex; flex-direction: column; gap: 6px; }
.rfd-table__head, .rfd-table__row { display: grid; grid-template-columns: 90px 1fr 110px; gap: 8px; align-items: center; }
.rfd-table__head { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.rfd-table__t { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
/* Fila compacta nombre + unidad + boton (Tests simples, Fase 8). */
.inline-add-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; align-items: center; }
/* Unidad dentro de un campo numerico (Tests simples, Fase 8). */
.input-with-unit { position: relative; }
.input-with-unit__unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: 13px; font-weight: 600; pointer-events: none; }
/* Tests simples (Fase 8, opcion B): una tarjeta por test en grilla;
   la tarjeta abierta ocupa el ancho completo. */
.simple-test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.simple-test-grid .eval-row-card + .eval-row-card { margin-top: 0; }
.simple-test-card--open { grid-column: 1 / -1; }
.eval-change-line { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; flex-wrap: wrap; }
.eval-change-line strong { font-family: var(--font-mono); font-size: 13.5px; }
.eval-change-line .muted { color: var(--text-2); font-weight: 500; }

.eval-detail-toggle { display: flex; align-items: center; gap: 5px; background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 700; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); width: 100%; cursor: pointer; font-family: var(--font-body); }
.eval-detail-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.eval-detail-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.eval-detail-panel { margin-top: 12px; }
.eval-detail-row { padding: 9px 0; border-top: 1px solid var(--border); }
.eval-detail-row:first-child { border-top: none; }
.eval-detail-row__n { font-size: 11px; color: var(--text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; display: block; }
.eval-detail-row__simple { display: flex; justify-content: space-between; align-items: center; }
.eval-detail-row__simple-val { font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.eval-detail-row__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.eval-detail-col__label { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.eval-detail-col__value { font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.eval-detail-col--accent .eval-detail-col__value { color: var(--accent); }

/* ---------- Carga (8.6/8.7): fila de periodo con sRPE destacado ----------
   Confirmado con el usuario tras varias rondas de vista previa: fecha +
   sRPE a la izquierda, un divisor fino, y el resto (Duracion/RPE/
   Sesiones) en columnas propias con etiqueta chica a la derecha.
   Mismos campos para diario/semanal/mensual, solo cambia la magnitud
   de los numeros -- groupSessions nunca arma una fila vacia. */
.load-row { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 13px 16px; display: flex; align-items: stretch; gap: 16px; }
.load-row + .load-row { margin-top: 7px; }
.load-row__left { display: flex; flex-direction: column; justify-content: center; min-width: 44px; }
.load-row__date { font-size: 10.5px; color: var(--text-2); font-weight: 600; margin-bottom: 2px; }
.load-row__srpe { font-family: var(--font-display); font-size: 26px; line-height: 1; }
.load-row__divider { width: 1px; background: var(--border); flex-shrink: 0; }
.load-row__right { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.load-row__col-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.load-row__col-val { font-family: var(--font-mono); font-size: 18px; color: var(--text); font-weight: 600; }

/* ---------- Campos de ejercicio dentro del editor (formulario de sesion) ----------
   La fila del bloque (fondo + borde) se reemplazo por .session-tbl-row /
   .session-circuit arriba; esto sigue en pie para agrupar los campos
   dentro del editor (series, reps, descanso, carga...). */
.exercise-entry__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.exercise-entry__row:last-child { margin-bottom: 0; }
.exercise-entry__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

/* Chips de categoria / toggles binarios / selector de RPE — un unico componente
   visual reutilizado en toda la app (documento, seccion 5, "Chips de categoria") */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-body);
}
.chip-toggle--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* Segmented control (Diario/Semanal/Mensual, etc.) — track con la opcion activa
   "flotando" en superficie, en vez de una fila de chips sueltos */
.segmented {
  display: inline-flex;
  background: var(--chip-bg);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.segmented .chip-toggle {
  border: none;
  background: transparent;
  color: var(--text-2);
  border-radius: 9px;
  padding: 7px 14px;
}
.segmented .chip-toggle--active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  font-weight: 600;
}

.intensity-field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px 9px;
}
.intensity-field label { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.intensity-field input {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  width: 52px;
  font-size: 12px;
}
.intensity-field input:focus { outline: none; }
.intensity-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ---------- Utilidades ---------- */
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.scroll-x { overflow-x: auto; }

/* ---------- Barra de progreso (compliance, objetivos) ---------- */
.progress-track {
  width: 100%;
  height: 8px;
  background: var(--chip-bg);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.2s ease;
}

/* ---------- Banda de mesociclo (5.10 / elemento distintivo, seccion 4) ---------- */
.meso-band {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--accent);
}
.meso-band__row { display: flex; gap: 3px; }
.meso-band__segment {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}
.meso-band__segment--filled { background: #fff; }
.meso-band__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #fff;
}
.meso-band__type { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.meso-band__pos { font-size: 12px; opacity: 0.85; font-family: var(--font-mono); }

/* ---------- Recuperacion (5.7) / Bienestar (5.6) — unica excepcion de semaforo ---------- */
.recovery-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.recovery-dot--good { background: var(--good); }
.recovery-dot--warn { background: var(--warn); }
.recovery-dot--bad { background: var(--bad); }

.recovery-bar {
  width: 22px;
  border-radius: 4px 4px 0 0;
}
.recovery-bar--good { background: var(--good); }
.recovery-bar--warn { background: var(--warn); }
.recovery-bar--bad { background: var(--bad); }
.recovery-bar--empty { background: var(--border); }

.pill-status {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px;
  font-family: var(--font-mono); font-weight: 600;
}
.pill-status--good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.pill-status--warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.pill-status--bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }

/* ---------- Inicio (8.1 / 8.2) ---------- */
.greeting { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.date-line { font-size: 13.5px; color: var(--text-2); margin-top: 2px; margin-bottom: 18px; }
.section-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
  margin: 20px 0 10px; font-weight: 600;
}
.section-title:first-of-type { margin-top: 0; }
.item-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow-card);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; cursor: pointer;
  border-top-style: solid; border-right-style: solid; border-bottom-style: solid;
  width: 100%; text-align: left; font-family: var(--font-body);
}
.item-card__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
.item-card__meta { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.item-card__time { font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 600; flex-shrink: 0; }
.attn-card {
  border-radius: 14px; padding: 13px 15px; margin-bottom: 8px; display: flex;
  justify-content: space-between; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  text-align: left; font-family: inherit; cursor: pointer;
}
.attn-card__text { font-size: 13px; }

/* ---------- Toggle / switch (capsula con circulo deslizante) ---------- */
.toggle-switch {
  position: relative;
  width: 42px;
  height: 25px;
  border-radius: 999px;
  background: var(--border-strong);
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.toggle-switch--on { background: var(--accent); }
.toggle-switch--on::after { transform: translateX(17px); }
.toggle-switch:disabled { opacity: .5; cursor: default; }
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.toggle-row__text { flex: 1; }
.toggle-row__desc { display: block; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* ===========================================================
   Interaccion / motion (Fase 8, ronda 4) — pedido explicito del usuario:
   "que se sienta suave al momento de tocar botones, entrar a secciones y
   demas, para que se sienta una aplicacion profesional y de calidad".
   Todo lo de aca es puramente visual (timing/easing), no cambia ningun
   comportamiento ni dato — se aplica solo, en las 31 pantallas, porque
   se engancha a las clases ya compartidas (.btn, .card, .tile, etc.),
   mismo mecanismo de herencia por CSS que el resto del sistema.
   =========================================================== */
html { scroll-behavior: smooth; }

/* Respeta a quien prefiere menos movimiento (accesibilidad) antes que
   nada: sin esto, alguien con "reduce motion" activado en el sistema
   igual recibiria todas las animaciones de abajo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Feedback tactil: todo lo que se toca responde con un "squish" chico
   e inmediato, como cualquier app nativa pulida. */
.btn, .chip-toggle, .icon-btn, .avatar-btn, .tabitem, .item-card, .attn-card,
.tile, .profile-card, .pill-btn, .toggle-switch, .calendar-day, .segmented .chip-toggle,
.dropdown-menu button, .notif-row, .datefield__day {
  transition: transform .1s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, opacity .15s ease;
}
.btn:active:not(:disabled), .chip-toggle:active:not(:disabled), .icon-btn:active, .avatar-btn:active,
.item-card:active, .tile:active, .profile-card:active, .pill-btn:active, .calendar-day:active {
  transform: scale(0.96);
}
.tabitem { transition: color .15s ease; }
.tabitem svg { transition: transform .15s ease; }
.tabitem:active svg { transform: scale(0.88); }
.tabitem--active svg { transform: scale(1.06); }

/* El circulo del toggle se "estira" un poco al mantenerlo presionado,
   como los switches nativos de iOS/Android, antes de asentarse del
   lado que corresponda. */
.toggle-switch::after { transition: transform .18s cubic-bezier(.34,1.56,.64,1), width .12s ease; }
.toggle-switch:active::after { width: 23px; }
.toggle-switch--on:active::after { transform: translateX(13px); }

/* Tarjetas clicables (tile ya tenia lift; se suma a item-card / attn-card
   para que toda fila tocable en Inicio/Sesion/listas se sienta igual). */
.item-card:hover, .attn-card:hover { border-color: var(--accent); }
.tile:hover { box-shadow: var(--shadow-card); }

/* Entrada de pantalla: cada vez que se monta un .page nuevo (cambiar de
   pestana, abrir el perfil de un atleta, etc.) aparece con un fundido +
   deslizamiento muy chico, en vez de aparecer de golpe. */
@keyframes pageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.page { animation: pageIn .36s cubic-bezier(.34,1.56,.64,1); }

/* Menu de avatar y panel de notificaciones: entran con fundido +
   deslizamiento corto en vez de aparecer de golpe. */
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
.dropdown-menu--open, .notif-panel--open { animation: menuIn .26s cubic-bezier(.34,1.56,.64,1); transform-origin: top right; }

/* Modal: el fondo se desvanece, la tarjeta entra con un leve rebote de
   escala (mismo cubic-bezier que el toggle, para que se sienta parte
   del mismo sistema). */
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.modal-overlay { animation: overlayIn .2s ease; }
.modal { animation: modalIn .34s cubic-bezier(.34,1.56,.64,1); }

/* Barras de progreso y de carga: ya tenian transition de width, se le
   suma un easing mas suave que el linear por defecto. */
.progress-fill { transition: width .35s cubic-bezier(.22,1,.36,1); }
.meso-band__segment { transition: background .2s ease; }

/* ===========================================================
   Periodizacion (Fase 8, confirmado tras revision visual): anillo de
   progreso del mesociclo activo, chips para cambiar de mesociclo, y
   lista de microciclos con icono por rol.
   =========================================================== */
.meso-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.meso-hero__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.meso-hero__dir { font-size: 12px; font-weight: 600; margin-top: 2px; }
.meso-hero__status { font-size: 11px; color: var(--text-2); margin-top: 5px; }
.meso-ring { position: relative; flex-shrink: 0; }
.meso-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; }

.meso-chips { display: flex; gap: 8px; margin-bottom: 16px; }
.meso-chip { flex: 1; background: var(--chip-bg); border: none; border-radius: 12px; padding: 8px; text-align: center; cursor: pointer; opacity: .6; font-family: var(--font-body); }
.meso-chip--active { opacity: 1; }
.meso-chip__name { font-size: 10.5px; font-weight: 600; }
.meso-chip__weeks { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); margin-top: 1px; }

.micro-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.micro-item { display: flex; align-items: center; gap: 13px; background: var(--surface); border-radius: 14px; padding: 13px 14px; margin-bottom: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.05); position: relative; cursor: pointer; border: none; width: 100%; text-align: left; font-family: var(--font-body); }
.micro-item:last-child { margin-bottom: 0; }
.micro-item--done { opacity: .5; }
.micro-item--now { border: 2px solid var(--accent); }
.micro-item__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.micro-item__icon svg { width: 21px; height: 21px; }
.micro-item__name { font-size: 13.5px; font-weight: 600; }
.micro-item__dates { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.micro-item__role { margin-left: auto; font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; }
.micro-item__now-tag { position: absolute; top: -8px; right: 12px; background: var(--accent); color: var(--accent-contrast); font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }

/* ===========================================================
   Calendario (Fase 8, confirmado tras revision visual): vista mensual
   (lineas finas + barra de color por dia) y vista semanal en linea de
   tiempo, con una transicion suave entre ambas.
   =========================================================== */
.cal-view-stage { position: relative; overflow: hidden; transition: height .28s cubic-bezier(.22,1,.36,1); }
.cal-view { transition: opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1); }
.cal-view--leaving { opacity: 0; transform: translateY(-6px); position: absolute; top: 0; left: 0; right: 0; }
.cal-view--entering { opacity: 0; transform: translateY(8px); }

.calmonth-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calmonth-day { border-top: 1px solid var(--border); padding: 8px 4px 7px; min-height: 58px; position: relative; cursor: pointer; }
.calmonth-day--muted { opacity: .35; }
.calmonth-num { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-2); }
.calmonth-num--today { color: var(--accent); }
.calmonth-heat { position: absolute; bottom: 0; left: 4px; right: 4px; height: 4px; border-radius: 2px; }
.calmonth-events { display: flex; gap: 2px; margin-top: 2px; }

.calweek-row { display: flex; gap: 14px; position: relative; padding-bottom: 18px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-body); }
.calweek-row::before { content: ''; position: absolute; left: 17px; top: 34px; bottom: -4px; width: 1px; background: var(--border); }
.calweek-row:last-child::before { display: none; }
.calweek-marker { width: 34px; height: 34px; border-radius: 50%; background: var(--chip-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); flex-shrink: 0; z-index: 1; }
.calweek-marker--today { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.calweek-content { flex: 1; padding-top: 6px; }
.calweek-dayname { font-size: 10.5px; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; letter-spacing: .04em; }
.calweek-session { font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; margin-bottom: 5px; }
.calweek-empty { font-size: 11.5px; color: var(--text-3); }

/* ---------- Responsive: pantallas angostas ---------- */
@media (max-width: 640px) {
  .page { padding: 18px 16px 50px; }
  .topbar { padding: 12px 16px; }
  .dropdown-menu { right: 16px; width: calc(100vw - 32px); max-width: 280px; }
  .notif-panel { right: 60px; width: calc(100vw - 100px); max-width: 300px; }
}

/* Periodizacion — vista del plan (Fase 8, propuesta C confirmada). */
.pz-tl-meso { position: absolute; top: 0; height: 18px; border: none; background: transparent; padding: 0; cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap; font-size: 11.5px; font-weight: 700; font-family: var(--font-body); }
.pz-tl-week { position: absolute; border-radius: 7px; cursor: pointer; padding: 0; font-size: 10px; font-weight: 700; font-family: var(--font-mono); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.pz-tl-unplanned { position: absolute; border-radius: 6px; border: 1px dashed var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--text-3); overflow: hidden; white-space: nowrap; }
.pz-tl-taper { position: absolute; border-radius: 6px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-3) 35%, transparent) 0 4px, transparent 4px 9px); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-2); font-weight: 600; overflow: hidden; }
.pz-tl-today { position: absolute; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; white-space: nowrap; background: var(--text); color: var(--surface); padding: 1px 6px; border-radius: 6px; }
.pz-tl-month { position: absolute; font-size: 10.5px; color: var(--text-3); border-left: 1px solid var(--border); padding-left: 4px; height: 18px; }
.pz-role-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--text-2); white-space: nowrap; }
.pz-week-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pz-week-card { text-align: left; padding: 12px; border-radius: 12px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-body); color: var(--text); }
.pz-week-card--now { background: var(--accent-soft); border: 2px solid var(--accent); }
.pz-week-card--done { opacity: .6; }
.pz-week-card__n { font-size: 12px; font-weight: 700; color: var(--text-3); }
.pz-week-card--now .pz-week-card__n, .pz-week-card__now { color: var(--accent); }
.pz-week-card__now { font-size: 10px; font-weight: 700; }
.pz-goal { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
.pz-goal__bar { height: 6px; background: var(--chip-bg); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.pz-goal__bar > div { height: 100%; background: var(--accent); }
/* Lista de planes (Fase 8, opcion A). */
.pz-plan-card { padding: 16px; margin-bottom: 10px; cursor: pointer; }
.pz-plan-card--past { opacity: .72; }
.pz-plan-card__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.pz-role-pill--accent { background: var(--accent-soft); color: var(--accent); }
.pz-section-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 8px; }
.pz-mini-tl { position: relative; height: 14px; margin-top: 10px; }
.pz-mini-tl__track { position: absolute; left: 0; right: 0; top: 4px; height: 6px; background: var(--chip-bg); border-radius: 99px; }
.pz-mini-tl__meso { position: absolute; top: 4px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text-3) 45%, var(--surface)); }
.pz-mini-tl__today { position: absolute; top: 0; width: 2px; height: 14px; background: var(--text); border-radius: 1px; }

.plan-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .plan-form-grid { grid-template-columns: 1fr; } }

/* Asistente de mesociclo (Fase 8, opcion B). */
.meso-form-step { flex: 1; border: none; background: transparent; padding: 0; cursor: pointer; }
.meso-form-strip__cell { flex: 1; height: 34px; border-radius: 7px; background: var(--accent); color: var(--accent-contrast, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-family: var(--font-mono); gap: 2px; }
.meso-form-week { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* Detalle de la semana (Fase 8, opcion A). */
.week-load-row { display: grid; grid-template-columns: 110px 1fr 60px; gap: 10px; align-items: center; margin-bottom: 6px; }
.week-load-row__track { height: 10px; background: var(--chip-bg); border-radius: 6px; overflow: hidden; }
.week-load-row__track > div { height: 100%; border-radius: 6px; }
.week-days { display: grid; gap: 6px; }
.week-day { min-height: 150px; padding: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.week-day--today { border: 2px solid var(--accent); }
.week-day__name { font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.week-day--today .week-day__name { color: var(--accent); }
.week-day__wellness { font-size: 12px; font-weight: 700; }
.week-day__add { margin-top: auto; font-size: 11px; }
.week-session { padding: 6px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; margin-bottom: 4px; }
.week-session--done { background: var(--accent-soft); border-color: transparent; }
@media (max-width: 760px) { .week-days { grid-template-columns: 1fr !important; } .week-day { min-height: 0; } }

/* Formulario de objetivo (Fase 8, opcion A). */
.goal-var-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: var(--font-body); color: var(--text); text-align: left; width: 100%; }
.goal-var-option--selected { border: 2px solid var(--accent); background: var(--accent-soft); }

/* Tira del mesociclo en editar / agregar semana (Fase 8, opcion B). */
.micro-form-strip__cell { flex: 1; min-width: 0; height: 40px; border-radius: 7px; background: var(--chip-bg); color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; font-family: var(--font-mono); gap: 2px; }
.micro-form-strip__cell--on { background: var(--accent); color: var(--accent-contrast, #fff); }
.micro-form-strip__cell--new { border: 1px dashed var(--accent); }
/* Planificacion del club (Fase 8, opcion B). */
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.club-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.club-plan-grid .pz-plan-card { margin-bottom: 0; }

/* ---------- Nota de una evaluacion (Fase 8, ronda 28, opcion A: linea con icono) ---------- */
.eval-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.eval-note__icon { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--text-3); }
.eval-note__body { min-width: 0; }
.eval-note__text { white-space: pre-line; overflow-wrap: anywhere; }
.eval-note__text--clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.eval-note__more { background: none; border: none; padding: 0; margin-top: 3px; color: var(--accent); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; }
.eval-note__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.eval-note--compact { gap: 6px; margin-top: 3px; padding-top: 0; border-top: none; font-size: 12px; line-height: 1.4; }
.eval-note--compact .eval-note__icon { width: 13px; height: 13px; }

/* ---------- Panel del entrenador en Inicio (Fase 8, opcion B + version 1) ---------- */
.panel-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
.panel-cols--even { grid-template-columns: 1fr 1fr; }
.panel-cols .card + .card { margin-top: 0; }
@media (max-width: 900px) { .panel-cols, .panel-cols--even { grid-template-columns: 1fr; } }
.panel-grid-wrap { overflow-x: auto; }
.panel-grid { width: 100%; border-collapse: collapse; }
.panel-grid th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 600; padding: 8px 2px; text-align: center; }
.panel-grid th:first-child { text-align: left; padding-left: 0; }
.panel-grid__num { font-size: 11px; }
.panel-grid td { padding: 7px 2px; border-top: 1px solid var(--border); text-align: center; }
.panel-grid td:first-child { text-align: left; padding-left: 0; }
.panel-grid__section td { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; padding-top: 12px; border-top: none; }
.panel-grid__row { cursor: pointer; transition: background .15s ease; }
.panel-grid__row:hover td, .panel-grid__row:focus-visible td { background: var(--chip-bg); }
.panel-grid__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel-grid__name { font-size: 13px; font-weight: 600; }
.panel-av { width: 24px; height: 24px; border-radius: 50%; background: var(--chip-bg); color: var(--text-2); font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.panel-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.panel-dot--ok { background: var(--accent); }
.panel-dot--missing { border: 2px solid var(--warn); }
.panel-dot--off { width: 5px; height: 5px; background: var(--border-strong); opacity: .5; }
.panel-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); margin-top: 10px; }
.panel-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.panel-date { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.panel-date:nth-child(2) { border-top: none; }
.panel-date__when { width: 58px; flex: none; }
.panel-date__dow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.panel-date__day { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.panel-date__icon { width: 30px; height: 30px; border-radius: 9px; background: var(--chip-bg); display: grid; place-items: center; flex: none; }
.panel-date__icon svg { width: 15px; height: 15px; color: var(--text-2); }
.panel-date__icon--accent { background: var(--accent-soft); }
.panel-date__icon--accent svg { color: var(--accent); }
.panel-date__type { font-size: 11px; color: var(--text-3); }
.panel-date__title { font-weight: 600; font-size: 13.5px; }
.panel-date__meta { font-size: 12px; color: var(--text-2); }
.panel-date__in { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.panel-daypick { display: flex; gap: 6px; flex-wrap: wrap; }
.panel-daypick .chip-toggle { min-width: 46px; justify-content: center; }


/* ---------- Animaciones, variante B "Expresiva" (Fase 8, README 5.60) ----------
   Confirmada con vista previa: movimientos de 0.3 a 0.36 s con un pequeno
   rebote al llegar. Pantallas, menus y ventanas: ver arriba (pageIn,
   menuIn, modalIn). prefers-reduced-motion sigue anulando todo. */
:root { --motion-spring: cubic-bezier(.34,1.56,.64,1); }

/* Contenido de una pestana o seccion al cambiar (.motion-tab lleva key). */
@keyframes motionTab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.motion-tab { animation: motionTab .3s var(--motion-spring) backwards; }

/* Listas: las tarjetas entran en cascada (55 ms entre una y otra, hasta
   la octava; el resto entra junto con la octava). */
@keyframes motionItem { from { opacity: 0; transform: translateY(10px); } }
.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card {
  animation: motionItem .34s var(--motion-spring) backwards;
}
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card):nth-child(2) { animation-delay: 55ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card):nth-child(3) { animation-delay: 110ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card):nth-child(4) { animation-delay: 165ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card):nth-child(5) { animation-delay: 220ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card):nth-child(6) { animation-delay: 275ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card):nth-child(7) { animation-delay: 330ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card):nth-child(n+8) { animation-delay: 385ms; }

/* Despliegues ("ver detalle", "Más opciones"): components/ui/Reveal.jsx. */
.reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s var(--motion-spring), opacity .2s ease; }
.reveal--open { grid-template-rows: 1fr; opacity: 1; }
.reveal__inner { overflow: hidden; min-height: 0; }

/* Indicador deslizante de los selectores (lib/motion.js pone la posicion
   de la opcion activa en --pill-*). Mismo aspecto que la opcion activa
   de siempre; solo que ahora se desliza. */
.segmented, [data-slide] { position: relative; isolation: isolate; }
.segmented.has-pill::before, [data-slide].has-pill::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: var(--pill-left); top: var(--pill-top); width: var(--pill-w); height: var(--pill-h);
}
.segmented.pill-ready::before, [data-slide].pill-ready::before {
  transition: left .34s var(--motion-spring), top .34s var(--motion-spring), width .34s var(--motion-spring), height .34s var(--motion-spring);
}
.segmented.has-pill > .chip-toggle, [data-slide].has-pill > .chip-toggle { position: relative; z-index: 1; }
.segmented.has-pill::before { background: var(--surface); border-radius: 9px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.segmented.has-pill > .chip-toggle--active { background: transparent; box-shadow: none; }
[data-slide].has-pill::before { background: var(--accent); border-radius: 999px; }
[data-slide].has-pill > .chip-toggle { background: transparent; }
[data-slide].has-pill > .chip-toggle--active { border-color: transparent; }

/* ---------- Transicion entre contenidos (ui/SwapTransition.jsx, README 5.61) ----------
   Sin rebote: curva que solo frena al final, para que cambiar de mes,
   semana o Diario/Semanal/Mensual se sienta suave. */
.swap-stage { position: relative; }
.swap-layer--out { position: absolute; inset: 0 0 auto 0; pointer-events: none; animation: swapOut var(--swap-dur) cubic-bezier(.22,1,.36,1) forwards; }
.swap-layer--in-a { animation: swapInA var(--swap-dur) cubic-bezier(.22,1,.36,1) backwards; }
.swap-layer--in-b { animation: swapInB var(--swap-dur) cubic-bezier(.22,1,.36,1) backwards; }
.swap-stage--slide .swap-layer--out { animation-name: swapSlideOut; }
.swap-stage--slide .swap-layer--in-a { animation-name: swapSlideInA; }
.swap-stage--slide .swap-layer--in-b { animation-name: swapSlideInB; }
@keyframes swapOut { to { opacity: 0; } }
@keyframes swapInA { from { opacity: 0; } }
@keyframes swapInB { from { opacity: 0; } }
@keyframes swapSlideOut { to { opacity: 0; transform: translateX(calc(var(--swap-dir) * -24px)); } }
@keyframes swapSlideInA { from { opacity: 0; transform: translateX(calc(var(--swap-dir) * 24px)); } }
@keyframes swapSlideInB { from { opacity: 0; transform: translateX(calc(var(--swap-dir) * 24px)); } }

/* ---------- Informes (Fase 8, opcion B "Tarjetas", README 5.61) ---------- */
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.report-grid .card + .card { margin-top: 0; }
@media (max-width: 700px) { .report-grid { grid-template-columns: 1fr; } }
.report-card { cursor: pointer; padding: 16px; }
.report-card:hover { border-color: var(--accent); }
.report-card__title { font-weight: 600; font-size: 14.5px; }
.report-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.report-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.report-mini__v { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.report-mini__u { font-size: 11px; color: var(--text-3); margin-left: 2px; }
.report-mini__l { font-size: 10.5px; color: var(--text-3); margin-top: 2px; line-height: 1.3; }
.report-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.report-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 700px) { .report-tiles { grid-template-columns: repeat(2, 1fr); } }
.report-tile { background: var(--chip-bg); border-radius: 12px; padding: 10px 12px; }
.report-tile__v { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.report-tile__u { font-size: 12px; color: var(--text-2); margin-left: 3px; font-family: var(--font-body); font-weight: 600; }
.report-tile__l { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.report-tile__d { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.report-interp { margin-top: 18px; background: var(--bg); }
.report-interp__text { font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.report-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.report-foot .btn svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.report-step { display: flex; gap: 10px; align-items: baseline; margin: 18px 0 8px; flex-wrap: wrap; }
.report-step:first-child { margin-top: 4px; }
.report-step__n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.report-step__t { font-weight: 600; font-size: 14px; }
.report-step__aside { font-size: 12px; color: var(--text-3); margin-left: auto; }
.report-vchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; cursor: pointer; font-family: var(--font-body); color: var(--text); }
.report-vchip--on { border-color: var(--accent); background: var(--accent-soft); }
.report-vchip__box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: inline-grid; place-items: center; flex: none; }
.report-vchip--on .report-vchip__box { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.report-vchip__box svg { width: 11px; height: 11px; }
.report-vchip__val { font-family: var(--font-mono); font-weight: 600; color: var(--text-2); }
.report-link { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0; font-family: var(--font-body); }

/* ---------- Cambio vs. evaluacion anterior en Informes (opcion B "Punto", README 5.62) ---------- */
.change-mark { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.change-mark__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-3); margin-left: 5px; }
.change-mark__dot--real { background: var(--good); border-color: var(--good); }
.change-legend { font-size: 11.5px; color: var(--text-3); margin: 10px 0 0; }

/* ---------- Perfil del atleta (Fase 8, opcion B "Resumen arriba", README 5.63) ---------- */
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.profile-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.profile-stat__v { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.profile-stat__u { font-size: 12px; color: var(--text-2); margin-left: 3px; font-family: var(--font-body); font-weight: 600; }
.profile-stat__l { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.profile-cols .card { margin-bottom: 0 !important; }
.profile-cols .card + .card { margin-top: 0; }
@media (max-width: 900px) { .profile-cols { grid-template-columns: 1fr; } }
.profile-stack { display: grid; gap: 14px; }
.profile-rows { display: grid; }
.profile-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.profile-row:first-child { border-top: none; padding-top: 2px; }
.profile-row svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.profile-row__l { color: var(--text-2); width: 120px; flex: none; font-size: 12.5px; }
.profile-text { font-size: 13.5px; line-height: 1.55; margin: 0; white-space: pre-wrap; }
.profile-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0; font-family: var(--font-body); }
.profile-link svg { width: 13px; height: 13px; }
.profile-actions { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.profile-actions .btn svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }

/* ---------- Ficha del atleta: pestaña Sesiones (Fase 8, 5.63, variante F1) ---------- */
.ss-planbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ss-planbar__select { width: auto; min-width: 280px; max-width: 100%; }
.ss-mesos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ss-meso { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 8px 12px; cursor: pointer; text-align: left; font: inherit; color: var(--text); transition: border-color .15s ease, background-color .15s ease; }
.ss-meso:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ss-meso:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ss-meso--sel { border-color: var(--accent); background: var(--accent-soft); }
.ss-meso__name { font-weight: 600; font-size: 13px; }
.ss-meso__meta { font-size: 11.5px; color: var(--text-2); font-family: var(--font-mono); margin-top: 2px; }
.wk { margin-bottom: 14px; }
.card.wk + .card.wk { margin-top: 0; }
.wk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 6px; }
.wk-title { font-weight: 600; font-size: 13.5px; }
.wk-title__main { display: inline-flex; align-items: center; gap: 6px; }
.wk-sub { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; font-weight: 400; }
.wk-sum { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); white-space: nowrap; }
.wk-empty { font-size: 13px; color: var(--text-3); padding: 8px 2px 2px; }
.wk-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.wk-row:hover .wk-row__title { color: var(--accent); }
.wk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.wk-row__day { width: 70px; flex: none; font-size: 12.5px; color: var(--text-2); }
.wk-row__title { flex: 1; min-width: 0; font-weight: 600; }
.wk-row__type { font-size: 12.5px; }
.wk-row__right { font-size: 12.5px; width: 110px; text-align: right; flex: none; }
.ss-dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; border: 2px solid var(--accent); }
.ss-dot--done { background: var(--accent); }
.ss-chev { color: var(--text-3); width: 16px; height: 16px; flex: none; }

/* ---------- Constructor de sesion, disposicion B2 "Resumen e indice"
   (Fase 8, ronda 34, confirmada con vista previa). Izquierda: resumen de
   los datos, indice de bloques, estimacion y notas. Derecha: bloques o
   el editor del ejercicio. ---------- */
.sb-modal-xl { max-width: 1120px; }
.sb-two { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; align-items: start; }
.sb-side { background: color-mix(in srgb, var(--chip-bg) 55%, var(--surface)); border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 4px; position: sticky; top: 0; min-width: 0; }
.sb-side__sep { height: 1px; background: var(--border); margin: 6px 0 14px; }
.sb-main { min-width: 0; }
.sb-main__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.sb-main__sub { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.sb-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--accent); font-weight: 600; font-size: 12.5px; padding: 0 0 8px; cursor: pointer; font-family: var(--font-body); }
.sb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-segmented-block { display: flex; }
.sb-segmented-block .chip-toggle { flex: 1; }
.sb-summary__name { font-size: 12px; color: var(--text-2); font-weight: 600; }
.sb-summary__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.sb-summary__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sb-summary__when { font-size: 12.5px; color: var(--text-2); margin-top: 8px; }
.sb-linkbtn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--accent); font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: var(--font-body); padding: 2px 0; flex-shrink: 0; }
.sb-index { display: flex; flex-direction: column; margin: -2px 0 6px; }
.sb-index__row { display: flex; justify-content: space-between; gap: 8px; background: none; border: none; border-radius: 8px; padding: 7px 8px; margin: 0 -8px; font-size: 13.5px; color: var(--text); cursor: pointer; font-family: var(--font-body); text-align: left; }
.sb-index__row:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.sb-index__row .mono { color: var(--text-2); font-weight: 600; font-size: 12px; }
.sb-srpe { display: flex; justify-content: space-between; align-items: center; background: var(--accent-soft); border-radius: 12px; padding: 9px 14px; }
.sb-srpe__l { font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.sb-srpe__v { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--accent); }
.sb-srpe__v small { font-size: 11px; font-weight: 500; }
.sb-block-anchor { scroll-margin-top: 16px; }
.sb-block-anchor + .sb-block-anchor { margin-top: 14px; }
.sb-addblock { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
/* Casillas rotuladas del editor de ejercicio */
.sb-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.sb-cell { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border-strong); border-radius: 12px; padding: 7px 11px 6px; background: var(--surface); cursor: text; transition: border-color .15s ease; min-width: 0; }
.sb-cell:focus-within { border-color: var(--accent); }
.sb-cell__l { font-size: 10.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; }
.sb-cell__in { border: none; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: 16px; font-weight: 600; width: 100%; padding: 0; }
.sb-cell__in:focus { outline: none; }
.sb-cell__hint { font-size: 11px; color: var(--text-3); }
/* Correccion (ronda 34): el circuito es un <button> y mostraba el fondo y
   el borde por defecto del navegador (cuadro gris a media anchura). */
.session-circuit { width: 100%; background: none; border-right: none; border-bottom: none; text-align: left; font-family: var(--font-body); color: inherit; border-radius: 0; }
/* Columnas algo mas anchas para "1 min 30 s" */
.session-tbl-head, .session-tbl-row { grid-template-columns: 1fr 50px 84px 84px; }
@media (max-width: 900px) {
  .sb-two { grid-template-columns: 1fr; }
  .sb-side { position: static; }
}
/* ---------- Detalle de la sesion, variante A (Fase 8, ronda 35, confirmada con vista previa) ---------- */
.sd-actions-stack { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.sd-load { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.sd-load-row { display: grid; grid-template-columns: 1fr 90px 90px; font-size: 13.5px; padding: 4px 0; align-items: baseline; }
.sd-load-row .mono { text-align: right; font-weight: 600; }
.sd-load-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.sd-load-head span { text-align: right; }
.sd-realcol { color: var(--accent); }
.sd-notes { font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; }
.sd-blocks .session-block + .session-block { margin-top: 14px; }
.sd-name { display: inline-flex; align-items: center; gap: 6px; }
.sd-check { color: var(--accent); flex-shrink: 0; }
.sd-changed { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; }
.sd-last { display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px; }
.sd-chev { color: var(--text-3); transition: transform .2s ease; }
.sd-row--open .sd-chev { transform: rotate(180deg); }
.sd-more { padding: 0 0 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sd-real { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 6px 10px; }
.sd-line { color: var(--text-2); }
.sd-line b, .sd-real b { font-weight: 600; }

/* ---------- Bienestar, variante W3 (Fase 8, ronda 35, confirmada con
   vista previa): circulos 1-5 (ficha 8.15) y puntaje que se llena con
   cada respuesta. ---------- */
.wb-intro { font-size: 13.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 16px; }
.wb-circles { display: flex; gap: 8px; }
.wb-c { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-family: var(--font-mono); font-weight: 600; font-size: 16px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--motion-spring, ease); }
.wb-c:hover { border-color: var(--accent); }
.wb-c--below { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.wb-c--on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); transform: scale(1.08); }
.wb-anchors { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.wb-rows { display: flex; flex-direction: column; }
.wb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.wb-row:first-child { border-top: none; }
.wb-row__label { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.wb-meter__l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.wb-meter__v { font-family: var(--font-mono); font-size: 30px; font-weight: 600; transition: color .3s ease; }
.wb-meter__v small { font-size: 13px; color: var(--text-3); font-weight: 500; }
.wb--good { color: var(--good); } .wb--warn { color: var(--warn); } .wb--bad { color: var(--bad); }
.wb-meter__bar { height: 10px; border-radius: 99px; background: var(--chip-bg); overflow: hidden; margin-top: 8px; }
.wb-meter__fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width .45s var(--motion-spring, ease), background-color .3s ease; }
.wb-meter__fill--good { background: var(--good); } .wb-meter__fill--warn { background: var(--warn); } .wb-meter__fill--bad { background: var(--bad); }
.wb-meter__s { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
@media (max-width: 900px) {
  .wb-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Modo sesion en vivo, variante A1 + T1 (Fase 8, ronda 35,
   confirmada con vista previa). Izquierda: cronometro, avance y lista
   del dia. Derecha: la fase actual. ---------- */
.lv-banner { display: block; padding: 8px 12px; margin-bottom: 12px; text-align: left; }
.lv-clock-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.lv-clock { font-family: var(--font-mono); font-size: 40px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lv-progress { height: 6px; border-radius: 99px; background: var(--chip-bg); overflow: hidden; margin-top: 10px; }
.lv-progress > div { height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s var(--motion-spring, ease); }
.lv-list { display: flex; flex-direction: column; }
.lv-list--compact { margin-bottom: 8px; }
.lv-list__block { margin: 10px 0 4px; }
.lv-list > div:first-child .lv-list__block { margin-top: 0; }
.lv-unit { display: block; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--border); padding: 7px 6px; margin: 0 -6px; width: calc(100% + 12px); border-radius: 0; color: var(--text); font-family: var(--font-body); cursor: pointer; transition: background .15s ease; }
.lv-unit:hover { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.lv-unit--circuit { position: relative; padding-left: 20px; }
.lv-unit--circuit::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); }
.lv-unit__tag { font-size: 10.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.lv-unit--done { color: var(--text-3); }
.lv-unit--current .lv-unit__name { color: var(--accent); }
.lv-unit__row { display: flex; gap: 10px; align-items: flex-start; }
.lv-unit__row + .lv-unit__row { margin-top: 6px; }
.lv-unit__main { min-width: 0; }
.lv-unit__name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
.lv-unit--done .lv-unit__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.lv-unit__presc { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.lv-ic { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-grid; place-items: center; flex-shrink: 0; margin-top: 1px; background: var(--surface); transition: background .25s ease, border-color .25s ease; }
.lv-ic--done { background: var(--text-3); border-color: var(--text-3); color: var(--surface); }
.lv-ic--cur { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.la-sq { display: flex; gap: 3px; margin-top: 5px; }
.la-sq__i { width: 16px; height: 6px; border-radius: 3px; background: var(--chip-bg); border: 1px solid var(--border-strong); transition: background .3s ease, border-color .3s ease; }
.la-sq__i--done { background: var(--accent); border-color: var(--accent); }
.la-sq__i--cur { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.la-next-tag { font-size: 10.5px; font-weight: 700; color: var(--accent); margin: 4px 0 0 28px; text-transform: uppercase; letter-spacing: .04em; }
.la-picked, .la-picked:hover { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); border-radius: 8px; }
.lv-phase__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.lv-phase__name { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.15; margin: 4px 0 8px; }
.lv-phase__of { font-size: 13.5px; color: var(--text-2); margin: -4px 0 10px; }
.la-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin: 4px 0 12px; }
.la-strip__s { border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); transition: background .3s ease, border-color .3s ease, color .3s ease; }
.la-strip__s--done { background: var(--chip-bg); color: var(--text-2); }
.la-strip__s--cur { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
.la-strip__s--pend { color: var(--text-3); }
.la-strip__n { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.la-strip__v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.lv-presc { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-bottom: 12px; }
.lv-presc__cell { border: 1px solid var(--border-strong); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-presc__cell span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.lv-presc__cell b { font-family: var(--font-mono); font-size: 26px; font-weight: 600; overflow-wrap: anywhere; }
.lv-presc__cell small { font-size: 13px; color: var(--text-2); font-weight: 500; }
.lv-phase__actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.lv-phase__actions--center { justify-content: center; }
.lv-bigbtn { padding: 14px 26px; font-size: 15px; }
.lv-ring { display: flex; justify-content: center; margin: 6px 0 10px; }
.lv-ring .meso-ring { position: relative; }
.lv-ring .meso-ring__value { position: absolute; inset: 0; display: grid; place-items: center; }
.lv-ring__t { font-family: var(--font-mono); font-size: 48px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lv-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.lv-turn__who { border-radius: 14px; padding: 12px 14px; background: var(--accent-soft); color: var(--accent); display: flex; flex-direction: column; gap: 2px; transition: background .3s ease, color .3s ease; }
.lv-turn__who span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.lv-turn__who b { font-family: var(--font-display); font-size: 20px; }
.lv-turn__who--off { background: var(--chip-bg); color: var(--text); }
.lv-turn__who--off span { color: var(--text-2); }
.la-nextcard { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 14px; color: var(--text-2); }
.la-nextcard__l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.la-nextcard__n { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 15px; }
.la-nextcard__p { font-size: 12.5px; }
.lv-preview-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.lv-preview-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.lv-preview-row__n { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.lv-preview-row__p { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-2); }
.lv-finish-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.lv-finish-t { font-family: var(--font-mono); font-size: 40px; font-weight: 600; }
.la-srpe { display: flex; flex-direction: column; align-items: flex-end; background: var(--accent-soft); border-radius: 14px; padding: 10px 16px; }
/* Tarjeta de tecnica (T1): video o imagen + observacion tecnica */
.tv-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 4px 0 10px; }
.tv-card--novideo, .tv-card--nonotes { grid-template-columns: 1fr; }
.tv-card--nonotes .tv-player { max-width: 320px; }
.tv-card .tv-obs { display: flex; flex-direction: column; justify-content: center; }
.tv-obs { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border-radius: 0 14px 14px 0; padding: 12px 16px; }
.tv-obs__l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.tv-obs__t { font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.tv-obs--big .tv-obs__t { font-size: 17px; font-weight: 500; }
.tv-player { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; border-radius: 14px; overflow: hidden; }
.tv-player__screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--text) 82%, var(--accent)), color-mix(in srgb, var(--text) 92%, transparent)); }
.tv-player__play { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .2s var(--motion-spring, ease); }
.tv-player:hover .tv-player__play { transform: scale(1.08); }
.tv-player__src { position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--surface) 85%, transparent); }
.tv-player--image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
@media (max-width: 900px) {
  .tv-card { grid-template-columns: 1fr; }
}

/* ---------- Animaciones del Modo sesion y del Bienestar: variante M2
   "Expresiva" (Fase 8, ronda 35, confirmada con vista previa). ---------- */
@keyframes lvUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lvSlide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes lvPop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes lvFlash { 0% { background: var(--accent); color: var(--accent-contrast); } 100% { } }
@keyframes lvTick { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.1); } }
@keyframes lvNum { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lv-ring svg circle:last-child { transition: stroke-dashoffset 1s linear; }
.lv-phase { animation: lvSlide .42s var(--motion-spring) backwards; }
.lv-phase .lv-presc__cell { animation: lvUp .4s var(--motion-spring) backwards; }
.lv-phase .lv-presc__cell:nth-child(2) { animation-delay: 50ms; }
.lv-phase .lv-presc__cell:nth-child(3) { animation-delay: 100ms; }
.lv-phase .lv-presc__cell:nth-child(4) { animation-delay: 150ms; }
.lv-phase .tv-card, .lv-phase .la-nextcard { animation: lvUp .45s .15s var(--motion-spring) backwards; }
.la-strip__s--just { animation: lvPop .5s var(--motion-spring), lvFlash .8s ease; }
.lv-phase--ending .lv-ring__t { display: inline-block; animation: lvTick 1s ease infinite; }
.wb-c--on { animation: lvPop .4s var(--motion-spring); }
.lv-unit--done .lv-ic, .lv-unit--current .lv-ic { animation: lvPop .45s var(--motion-spring); }
.lv-num-change { display: inline-block; animation: lvNum .3s var(--motion-spring); }
.wb-row { animation: lvUp .4s var(--motion-spring) backwards; }
.wb-row:nth-child(2) { animation-delay: 50ms; } .wb-row:nth-child(3) { animation-delay: 100ms; }
.wb-row:nth-child(4) { animation-delay: 150ms; } .wb-row:nth-child(5) { animation-delay: 200ms; }

/* ===== Antropometria (Fase 8, ronda 36; diseño "A final" + triangulo T2 + formulario F2) ===== */
.an-wrap { max-width: 1080px; }
.an-visible { max-width: 420px; margin-bottom: 16px; }
.an-date { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.an-delta { font-size: 12px; font-weight: 600; color: var(--accent); }
.an-a { display: grid; gap: 24px; }
.an-a--final { grid-template-columns: 1fr 1.3fr 1fr; align-items: stretch; }
.an-a__col { display: flex; flex-direction: column; gap: 10px; }
.an-fig { border: 1px solid var(--border-strong); border-radius: 16px; padding: 12px 16px; background: var(--surface); }
.an-fig__l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.an-fig__v { font-family: var(--font-mono); font-size: 28px; font-weight: 600; margin-top: 2px; }
.an-fig__v small { font-size: 13px; color: var(--text-2); font-weight: 500; }
.an-fig__d { font-size: 12px; margin-top: 2px; }
.an-final__chart { display: flex; flex-direction: column; }
.an-final__chart .an-chart { flex: 1; }
.an-empty-note { font-size: 12.5px; margin: auto 0; text-align: center; }
.an-somato { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.an-somato__row { display: grid; grid-template-columns: 82px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; }
.an-somato__l { color: var(--text-2); }
.an-somato__bar { height: 8px; border-radius: 99px; background: var(--chip-bg); overflow: hidden; }
.an-somato__bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.an-somato__v { text-align: right; font-weight: 600; }
.an-somato__code { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.an-notes { font-size: 13.5px; color: var(--text-2); margin: 14px 0 0; }
.an-hist { border: 1px solid var(--border-strong); border-radius: 16px; padding: 4px 16px; }
.an-hist__head, .an-hist__row { display: grid; grid-template-columns: 1fr 80px 100px 80px 80px 100px 130px; gap: 8px; align-items: center; }
.an-hist__head { padding: 10px 0 8px; font-size: 10.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.an-hist__row { padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.an-hist__row .mono { font-weight: 600; }
.an-hist__act { display: flex; gap: 6px; justify-content: flex-end; }
.an-chip { display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: 999px; padding: 4px 10px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.an-icon { border: none; background: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 6px; }
.an-icon:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.an-chart { width: 100%; height: auto; display: block; }
/* Composicion del peso */
.comp { border: 1px solid var(--border-strong); border-radius: 16px; padding: 14px 16px; background: var(--surface); }
.comp__t { display: flex; justify-content: space-between; align-items: baseline; }
.comp__w { font-size: 20px; font-weight: 600; }
.comp__bar { display: flex; gap: 3px; height: 26px; margin: 10px 0; }
.comp__bar span { border-radius: 6px; }
.comp__legend { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.comp__legend div { display: flex; align-items: center; gap: 8px; }
.comp__legend b { margin-left: auto; font-weight: 600; }
.comp__dot { width: 10px; height: 10px; border-radius: 3px; }
.comp--muscle { background: var(--accent); }
.comp--fat { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.comp--bone { background: var(--text-2); }
.comp--rest { background: var(--chip-bg); }
/* Triangulo del somatotipo (T2) */
.tri-fill { fill: color-mix(in srgb, var(--accent-soft) 45%, transparent); stroke: var(--text-2); stroke-width: 1.6; stroke-linejoin: round; }
.tri-guide { fill: none; stroke: color-mix(in srgb, var(--text-2) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.tri-lab { font-size: 12px; font-weight: 700; fill: var(--text); font-family: var(--font-body); }
.tri-old { fill: var(--surface); stroke: var(--text-2); stroke-width: 1.8; }
.tri-last { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.tri-trail { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tri-badge { fill: var(--accent); }
.tri-badge__t { font-size: 12px; font-weight: 700; fill: var(--accent-contrast); font-family: var(--font-mono); }
/* Nueva medicion (F2) */
.sb-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.sb-steps .chip-toggle { flex: 1; gap: 8px; padding: 9px 12px; justify-content: center; }
.sb-steps__n { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: color-mix(in srgb, currentColor 16%, transparent); }
.nf-tri { margin: 6px 0 12px; }
.nf-chg { font-weight: 700; color: var(--accent); }
.nf-chg--none { color: var(--text-3); font-weight: 500; }
.nf-big .sb-cell__in { font-size: 22px; }
.nf-step-somato { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.nf-step-somato .sb-cells { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .an-a--final { grid-template-columns: 1fr; }
  .nf-step-somato { grid-template-columns: 1fr; }
  .an-hist { overflow-x: auto; }
  .an-hist__head, .an-hist__row { min-width: 680px; }
}

/* ===== Sesiones del atleta y permiso para ejecutar (Fase 8, ronda 37) ===== */
.aw-list { display: flex; flex-direction: column; gap: 8px; }
.aw-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 16px; gap: 12px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 14px; padding: 11px 14px; cursor: pointer; font-family: var(--font-body); color: var(--text); }
.aw-item:hover { border-color: var(--accent); }
.aw-item__time { font-weight: 600; font-size: 14px; }
.aw-item__main { display: flex; flex-direction: column; min-width: 0; }
.aw-item__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-item__sub { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-item--compact { padding: 8px 12px; border-radius: 12px; grid-template-columns: 46px minmax(0, 1fr) auto 14px; }
.aw-item--compact .aw-item__title { font-size: 14px; }
.aw-item--done .aw-item__title { color: var(--text-2); }
.aw-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--chip-bg); color: var(--text-2); }
.aw-pill--done { background: var(--accent-soft); color: var(--accent); }
.aw-chev { color: var(--text-3); }
.aw-event { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 10px; background: var(--chip-bg); margin-bottom: 8px; }
.aw-inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; }
.aw-week { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.aw-day { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.aw-day__head { display: flex; align-items: baseline; gap: 8px; }
.aw-day__num { font-size: 20px; font-weight: 700; }
.aw-day__name { font-size: 13px; color: var(--text-2); font-weight: 600; }
.aw-day__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aw-day--past { opacity: .55; }
.aw-day--today .aw-day__num { color: var(--accent); }
.aw-today { font-size: 10.5px; font-weight: 700; color: var(--accent-contrast); background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.aw-cal-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.aw-daypanel { border: 1px solid var(--border-strong); border-radius: 18px; padding: 16px 18px; background: var(--surface); position: sticky; top: 0; }
.aw-daypanel__date { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.calmonth-day--selected { background: var(--accent-soft); border-radius: 10px; }
.calweek-row--selected .calweek-dayname { color: var(--accent); }
.exec-locked { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--chip-bg); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.exec-locked svg { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 900px) {
  .aw-inicio, .aw-cal-two { grid-template-columns: 1fr; }
  .aw-day { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- Vista previa del PDF de sesion (ronda 39) ---------- */
.pdfp { background: var(--chip-bg); border-radius: var(--radius); padding: 12px; max-height: 68vh; overflow-y: auto; display: flex; justify-content: center; }
.pdfp__sheet { position: relative; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(21, 25, 29, .18); border-radius: 2px; flex: none; }
.pdfp__sheet iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; display: block; }

/* ---------- Objetivos (ronda 40, variante C "Por estado") ---------- */
.gl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.gl-card--late { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.gl-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gl-card__title { font-weight: 600; font-size: 14px; line-height: 1.35; }
.gl-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font-size: 12px; color: var(--text-2); }
.gl-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gl-meta--late { color: var(--warn); font-weight: 600; }
.gl-vis { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px var(--font-body); color: var(--text-3); background: none; border: 1px dashed var(--border-strong); border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.gl-vis--on { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.gl-pill--bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.gl-ok { color: var(--accent); margin-right: 6px; }
.gl-link { background: none; border: none; padding: 0; margin-top: 8px; font: 500 12.5px var(--font-body); color: var(--accent); cursor: pointer; }
.gl-closed { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.gl-closed__main { min-width: 0; }
.gl-closed__title { font-size: 13.5px; font-weight: 500; }
.gl-closed__note { font-size: 12.5px; color: var(--text-2); margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--border-strong); }
.gl-strip { background: var(--chip-bg); border-radius: 16px; padding: 14px; margin-bottom: 18px; }
.gl-strip__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gl-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.gl-mini__label { font-size: 12.5px; font-weight: 600; line-height: 1.3; min-height: 32px; }
.gl-mini__nums { margin-top: 4px; font-size: 18px; font-weight: 600; }
.gl-mini__nums .faint { font-size: 12px; font-weight: 500; }
.gl-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.gl-col { display: flex; flex-direction: column; gap: 8px; }
.gl-col__head { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.gl-col .gl-closed { flex-direction: column; }
@media (max-width: 900px) { .gl-board { grid-template-columns: 1fr; } }
.gl-mini__edit { padding: 4px 6px; flex: none; }
.gl-vis:disabled, .gl-link:disabled { opacity: .6; cursor: default; }

/* ---------- Salud (ronda 41, variante C "Línea de tiempo") ---------- */
.hl-card__zone { font-weight: 600; font-size: 15px; }
.hl-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 12px; color: var(--text-2); }
.hl-facts span { display: inline-flex; align-items: center; gap: 4px; }
.hl-return { color: var(--accent); font-weight: 600; }
.hl-dx { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 13px; }
.hl-dx svg { flex: none; margin-top: 2px; color: var(--text-3); }
.hl-dx--none { color: var(--text-3); font-style: italic; }
.hl-hist { display: flex; flex-direction: column; gap: 12px; }
.hl-hist__head { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 4px; }
.hl-add { width: 26px; height: 26px; }
.hl-hist__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 13.5px; color: inherit; background: none; border: 0; border-radius: 8px; padding: 6px 6px; cursor: pointer; }
.hl-hist__row:hover { background: var(--chip-bg); }
.hl-hist__pen { color: var(--text-3); opacity: 0; flex: none; }
.hl-hist__row:hover .hl-hist__pen { opacity: 1; }
.hl-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hl-side { background: var(--chip-bg); border-radius: 16px; padding: 14px; }
.hl-side .hl-hist__group + .hl-hist__group { padding-top: 10px; border-top: 1px solid var(--border); }
.hl-state { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; border-left: 4px solid var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.hl-state b { font-size: 15px; }
.hl-state span { font-size: 12.5px; color: var(--text-2); }
.hl-state--activa { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); }
.hl-state--en_recuperacion { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.hl-timeline { position: relative; padding-left: 4px; }
.hl-tl { position: relative; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0 0 16px 18px; cursor: pointer; }
.hl-tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 0; width: 2px; background: var(--border); }
.hl-tl:last-child::before { display: none; }
.hl-tl__dot { position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.hl-tl--activa .hl-tl__dot { background: var(--bad); border-color: var(--bad); }
.hl-tl--en_recuperacion .hl-tl__dot { background: var(--warn); border-color: var(--warn); }
.hl-tl__date { font-size: 12px; color: var(--text-2); padding-top: 2px; }
.hl-tl__body { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.hl-tl:hover .hl-tl__body { border-color: var(--border-strong); }
.hl-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.hl-rec { background: var(--chip-bg); border-radius: 14px; padding: 14px; align-self: start; }
.hl-link { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.hl-link__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; cursor: pointer; }
.hl-link__main:disabled { cursor: default; }
.hl-link__main:not(:disabled):hover { border-color: var(--border-strong); }
.hl-link__label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
@media (max-width: 900px) { .hl-two, .hl-detail { grid-template-columns: 1fr; } }
.hl-timeline .empty-state { margin-left: 0; }


/* ---------- Formularios de atleta y grupo (ronda 42, variante C "Pasos") ---------- */
.fp-modal-md { max-width: 760px; }
.fp-sub { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 6px 0 8px; }
.fp-steps { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.fp-step { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 8px; text-align: left; font: 500 12.5px var(--font-body); color: var(--text-3); background: none; border: 0; border-bottom: 2px solid var(--border); padding: 6px 2px 8px; cursor: pointer; }
.fp-step--on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.fp-step--done { color: var(--text-2); border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.fp-step__n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--chip-bg); }
.fp-step--on .fp-step__n { background: var(--accent); color: var(--accent-contrast); }
.fp-step--done .fp-step__n { background: var(--accent-soft); color: var(--accent); }
.fp-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; background: var(--surface); color: var(--text-3); margin-bottom: 8px; }
.fp-search input { flex: 1; border: 0; background: none; font: inherit; color: var(--text); outline: none; }
.fp-members { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.fp-member { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.fp-member--on { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.fp-member__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }
.fp-member__name small { display: block; font-size: 11.5px; color: var(--warn); font-weight: 500; }
.fp-member__check { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--accent-contrast); flex: none; }
.fp-member--on .fp-member__check { background: var(--accent); border-color: var(--accent); }
.fp-step--bad { border-bottom-color: var(--bad); }
.fp-step--bad .fp-step__n { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.fp-body { min-height: 300px; }
.fp-req { color: var(--bad); margin-left: 2px; }


/* ---------- Recuperacion (ronda 43, variante C "Grafico") ---------- */
.rc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rc-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.rc-tile__l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 4px; }
.rc-tile__s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.rc-tile__big { font-family: var(--font-mono); font-size: 26px; font-weight: 600; line-height: 1.1; }
.rc-tile__big .faint { font-size: 15px; }
.rc-score { display: inline-block; font-family: var(--font-mono); font-weight: 600; font-size: 13px; padding: 2px 9px; border-radius: 999px; }
.rc-score--big { font-size: 26px; padding: 0; background: none !important; line-height: 1.1; }
.rc-score--good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.rc-score--warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.rc-score--bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.rc-score--none { color: var(--text-3); }
.rc-two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rc-two .card + .card, .rc-stack .card + .card { margin-top: 0; }
.rc-stack { display: flex; flex-direction: column; gap: 14px; }
.rc-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--text-2); }
.rc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rc-items { display: flex; flex-direction: column; gap: 8px; }
.rc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 42px; align-items: center; gap: 10px; font-size: 13px; }
.rc-item__l { color: var(--text-2); }
.rc-item__v { text-align: right; font-size: 12.5px; }
.rc-dots { display: inline-flex; gap: 4px; }
.rc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--chip-bg); border: 1px solid var(--border); }
.rc-dot--good { background: var(--good); border-color: var(--good); } .rc-dot--warn { background: var(--warn); border-color: var(--warn); } .rc-dot--bad { background: var(--bad); border-color: var(--bad); }
.rc-hbar { display: block; width: 110px; height: 7px; border-radius: 4px; background: var(--chip-bg); overflow: hidden; }
.rc-hbar__f { display: block; height: 100%; border-radius: 4px; }
.rc-hbar__f--good { background: var(--good); } .rc-hbar__f--warn { background: var(--warn); } .rc-hbar__f--bad { background: var(--bad); }
.rc-list { display: flex; flex-direction: column; gap: 4px; }
.rc-list__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 110px 80px; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 10px; padding: 6px; cursor: pointer; }
.rc-list__row:hover { background: var(--chip-bg); }
.rc-list__name { font-size: 13.5px; font-weight: 500; }
.rc-list__today { text-align: right; }
@media (max-width: 900px) { .rc-two { grid-template-columns: 1fr; } }
.rc-list__row--pending { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.rc-pending { display: inline-block; font-size: 11px; font-weight: 700; color: var(--warn); border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); border-radius: 999px; padding: 2px 8px; }
.rc-spark { display: block; min-width: 0; }
.club-grid .card--click { cursor: pointer; }
.club-grid .card--click:hover { border-color: var(--border-strong); }


/* ---------- Sesion en curso a nivel de la app (ronda 44) ---------- */
.live-host .modal-overlay { z-index: 60; }
.live-bar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--live-bar-top, 0px) + 10px); z-index: 55; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: inherit; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); animation: liveBarIn .45s cubic-bezier(.34, 1.56, .64, 1); }
.live-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: livePulse 1.8s infinite; }
.live-bar--stopped .live-bar__dot { background: var(--warn); animation: none; }
.live-bar__txt { display: flex; flex-direction: column; text-align: left; min-width: 0; line-height: 1.2; }
.live-bar__txt b { font-size: 13px; }
.live-bar__txt span { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.live-bar__time { font-size: 18px; font-weight: 600; padding: 0 4px; }
.live-bar__go { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--bg) 16%, transparent); padding: 6px 10px 6px 14px; border-radius: 999px; }
.has-live-bar .main-area { padding-top: 66px; }
.lv-cancel { color: var(--text-3); }
.lv-cancel:hover { color: var(--danger); }
@keyframes liveBarIn { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-bar, .live-bar__dot { animation: none; } }

/* Pestanas del grupo (Fase 8, ronda 44) */
/* ---------- Pagina de grupo: Carga, Evaluaciones, Sesiones (prototipo) ---------- */
.gt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.gt-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.gt-tile span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.gt-tile b { font-size: 26px; font-weight: 600; line-height: 1.15; }
.gt-tile b small { font-size: 13px; color: var(--text-3); font-weight: 500; }
.gt-tile > small { font-size: 12px; color: var(--text-2); }
.gt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.gt-two .card + .card { margin-top: 0; }
.gt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gt-table th { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: left; padding: 0 8px 8px 0; }
.gt-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--border); }
.gt-table__avg td { font-weight: 600; color: var(--text-2); background: color-mix(in srgb, var(--chip-bg) 60%, transparent); }
.gt-muted td { opacity: .7; }
.gt-mini { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.gt-mini i { display: block; width: 8px; background: var(--accent); border-radius: 2px 2px 1px 1px; }
.gt-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.gt-picker__g { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gt-picker__l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); width: 130px; }
.gt-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); margin-top: 8px; }
.gt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gt-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.gt-st { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.gt-st--done { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.gt-st--plan { background: var(--chip-bg); color: var(--text-2); }
.gt-st--missed { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.gt-st--done-bg { background: color-mix(in srgb, var(--good) 45%, var(--surface)) !important; height: 10px !important; width: 10px !important; border-radius: 3px !important; }
.gt-st--plan-bg { background: var(--chip-bg) !important; border: 1px solid var(--border-strong); height: 10px !important; width: 10px !important; border-radius: 3px !important; }
.gt-st--missed-bg { background: color-mix(in srgb, var(--bad) 35%, var(--surface)) !important; height: 10px !important; width: 10px !important; border-radius: 3px !important; }
.gt-week { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; font-size: 12.5px; }
.gt-week th { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-align: left; padding: 0 4px 4px; }
.gt-week th:first-child { width: 120px; }
.gt-week td { vertical-align: top; height: 52px; }
.gt-week__today { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); border-radius: 8px; }
.gt-cell { display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; font: inherit; color: inherit; border: 0; border-radius: 8px; padding: 5px 7px; cursor: pointer; }
.gt-cell span { font-size: 12px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-cell small { font-size: 11px; color: var(--text-2); font-family: var(--font-mono); }
.gt-cell--done { background: color-mix(in srgb, var(--good) 20%, var(--surface)); }
.gt-cell--plan { background: var(--surface); border: 1px solid var(--border); }
.gt-cell--missed { background: color-mix(in srgb, var(--bad) 14%, var(--surface)); }
.gt-agenda { display: flex; flex-direction: column; gap: 10px; }
.gt-day { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; }
.gt-day__h { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-2); padding-top: 8px; }
.gt-day__n { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1; }
.gt-day--today .gt-day__n { color: var(--accent); }
.gt-day__b { display: flex; flex-direction: column; gap: 8px; }
.gt-sess { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; }
.gt-sess__h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gt-sess__who { display: flex; gap: 6px; flex-wrap: wrap; }
.gt-who { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font-body); color: inherit; border: 1px solid var(--border); background: var(--chip-bg); border-radius: 999px; padding: 3px 10px 3px 3px; cursor: pointer; }
.gt-who--done { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.gt-who--done svg { color: var(--good); }
.gt-who--missed { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
@media (max-width: 900px) { .gt-two { grid-template-columns: 1fr; } }
.gt-cell--live { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.gt-cellstack { display: flex; flex-direction: column; gap: 4px; }
.gt-cellstack .gt-cell { height: auto; min-height: 40px; }
.gt-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.gt-sw--done { background: color-mix(in srgb, var(--good) 45%, var(--surface)); }
.gt-sw--plan { background: var(--surface); border: 1px solid var(--border-strong, var(--border)); }
.gt-sw--live { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.gt-sw--missed { background: color-mix(in srgb, var(--bad) 35%, var(--surface)); }
.gt-table__click { cursor: pointer; transition: background .15s ease; }
.gt-table__click:hover { background: var(--surface-2, color-mix(in srgb, var(--text) 4%, transparent)); }

/* Sesion para todo el grupo (Fase 8, ronda 45, variante A) */
.gs-att { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.gs-att__row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.gs-avs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gs-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--chip-bg); }
.gs-changes { padding: 12px; margin-top: 4px; }
.gs-changes__title { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.gs-tab td, .gs-tab th { padding: 5px 6px; white-space: nowrap; }
.gs-tab__group td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.gs-in { width: 64px; font: inherit; font-family: var(--font-mono); font-size: 13px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.gs-in:focus { outline: none; border-color: var(--accent); }
.gs-in--ch { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.gs-off td { opacity: .5; }
.gs-note { display: block; font-size: 12.5px; line-height: 1.5; padding: 10px 12px; margin: 12px 0; border-radius: 12px; background: var(--accent-soft); color: var(--text); }
.gs-addlist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.gs-prow { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; font: inherit; font-size: 13px; color: inherit; text-align: left; padding: 5px 6px; border-radius: 10px; cursor: pointer; }
.gs-prow:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.gs-panel__row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.gs-panel__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===========================================================
   Calendario del entrenador — Fase 8, ronda 46 (roadmap punto 8).
   Variante A con el mensual A2 "Cuadricula" (vista previa confirmada
   el 29-09-2026): cuadricula con bordes, encabezado de dias con fondo,
   otros meses con rayado, taper con franja superior y etiqueta, hoy con
   fondo y anillo. Panel de la semana actual a la derecha en Mensual.
   =========================================================== */
.page--wide { max-width: 1320px; }
.calx-filter { min-width: 170px; }
.calx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.calx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.calx-layout--full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) { .calx-layout { grid-template-columns: minmax(0, 1fr); } }
.calx-main { min-width: 0; }

.calx-month { border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--surface); }
.calx-month__head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--chip-bg); }
.calx-month__wd { padding: 9px 0; text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.calx-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calx-cell {
  min-height: 96px; min-width: 0; padding: 6px; display: flex; flex-direction: column; gap: 3px;
  background: transparent; border: 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .15s ease;
}
.calx-cell:nth-child(7n) { border-right: 0; }
.calx-cell:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.calx-cell--muted { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--chip-bg) 70%, transparent) 6px 7px); }
.calx-cell--muted .calx-cell__num, .calx-cell--muted .calx-pill, .calx-cell--muted .calx-more { opacity: .45; }
.calx-cell--taper { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); box-shadow: inset 0 3px 0 var(--accent); }
.calx-cell--today { background: color-mix(in srgb, var(--accent-soft) 85%, var(--surface)); }
.calx-cell__head { display: flex; align-items: center; gap: 4px; }
.calx-cell__num { font-family: var(--font-display); font-size: 14px; color: var(--text-2); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.calx-cell--today .calx-cell__num { background: var(--accent); color: var(--accent-contrast); font-weight: 700; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.calx-cell__tag { margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.calx-pill {
  display: block; font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--accent-soft); color: var(--text); border-left: 3px solid var(--accent);
}
.calx-pill--event { font-weight: 500; }
.calx-more { font-size: 10.5px; color: var(--text-3); padding-left: 4px; }
.calx-legend { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
.calx-legend__sw { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); box-shadow: inset 0 2px 0 var(--accent); border: 1px solid var(--border); }

.calx-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .calx-week { grid-template-columns: minmax(0, 1fr); } }
.calx-week__col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 8px; min-height: 240px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calx-week__col--today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.calx-week__col--taper { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.calx-week__head { display: flex; align-items: baseline; gap: 6px; background: none; border: 0; padding: 0 2px 4px; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.calx-week__head b { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.calx-week__head span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.calx-week__col--today .calx-week__head b { color: var(--accent); }

.calx-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-width: 0;
  padding: 7px 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
  text-align: left; font: inherit; font-size: 12px; line-height: 1.35; color: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.calx-card:hover { border-color: var(--accent); }
.calx-card--event { border-left-width: 3px; }
.calx-card__time { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.calx-card__name { font-weight: 500; overflow-wrap: anywhere; }
.calx-card__sub { font-size: 11px; color: var(--text-2); }
.calx-status { display: inline-block; margin-top: 3px; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--chip-bg); color: var(--text-2); }
.calx-status--done { background: var(--accent-soft); color: var(--text); }
.calx-status--live { background: var(--accent); color: var(--accent-contrast); }
.calx-status--missed { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.calx-empty { font-size: 12px; color: var(--text-3); padding-left: 2px; }

.calx-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.calx-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.calx-panel__head h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.icon-btn--sm { width: 26px; height: 26px; }
.icon-btn--sm svg { width: 15px; height: 15px; }
.calx-link { border: 0; background: none; color: var(--accent); font: 500 12px var(--font-body); cursor: pointer; padding: 2px 4px; }
.calx-next { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 0; text-align: left; font: inherit; cursor: pointer; }
.calx-next small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.calx-next b { font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.calx-next span { font-size: 12px; }
.calx-panel__day { display: flex; flex-direction: column; gap: 5px; }
.calx-panel__dayname { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.calx-panel__dayname.is-today { color: var(--accent); font-weight: 600; }

.calx-list { display: flex; flex-direction: column; gap: 6px; }
.calx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); font: inherit; font-size: 13px; color: inherit; text-align: left; cursor: pointer; }
.calx-row:hover { border-color: var(--accent); }
.calx-row--static { cursor: default; }
.calx-row--static:hover { border-color: var(--border); }
.calx-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; }
.calx-kv dt { color: var(--text-3); }
.calx-kv dd { margin: 0; }
.calx-typebadge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.calx-typechip { display: inline-flex; align-items: center; gap: 6px; }
.calx-typechip--add { border-style: dashed; color: var(--text-2); }
.calx-swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.calx-swatches { display: flex; gap: 8px; }
.calx-swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--border); }
.calx-swatches button.is-on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); }
.calx-typeedit { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--accent); background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .calx-cell, .calx-card { transition: none; } }

/* ===========================================================
   Pagina Sesion del entrenador — Fase 8, ronda 47 (roadmap punto 9).
   Variante B con las pestanas a la derecha (vista previa confirmada el
   29-09-2026): Hoy a la izquierda, Pendientes / Proximos 7 dias /
   Realizadas a la derecha.
   =========================================================== */
.sh-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .sh-layout { grid-template-columns: minmax(0, 1fr); } }
.sh-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sh-box__head { display: flex; align-items: center; gap: 8px; }
.sh-box__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.sh-count { font-family: var(--font-mono); font-size: 11px; background: var(--chip-bg); color: var(--text-2); padding: 1px 8px; border-radius: 999px; }
.sh-empty { font-size: 13px; color: var(--text-3); margin: 4px 2px; }
.sh-today { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.sh-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); min-height: 170px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sh-card:hover { border-color: var(--accent); }
.sh-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-card--live { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sh-card--done { opacity: .78; }
.sh-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sh-card__time { font-family: var(--font-mono); font-size: 15px; color: var(--accent); }
.sh-card__name { font-family: var(--font-display); font-size: 17px; overflow-wrap: anywhere; }
.sh-card__sub { font-size: 12.5px; color: var(--text-2); }
.sh-card__meta { font-size: 11.5px; color: var(--text-3); }
.sh-card__action { margin-top: auto; padding-top: 10px; }
.sh-card__action .btn { display: inline-flex; align-items: center; gap: 6px; }
.sh-pill { display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--text-2); white-space: nowrap; }
.sh-pill--done { background: var(--accent-soft); color: var(--text); }
.sh-pill--live { background: var(--accent); color: var(--accent-contrast); }
.sh-pill--rpe { background: var(--evt-2-soft); color: var(--evt-2); }
.sh-pill--missed { background: var(--evt-1-soft); color: var(--evt-1); }
.sh-tabs { display: flex; }
.sh-tabs .chip-toggle { flex: 1; justify-content: center; padding-left: 8px; padding-right: 8px; }
.sh-list { display: flex; flex-direction: column; gap: 8px; }
.sh-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s ease; }
.sh-row:hover { border-color: var(--accent); }
.sh-row__date { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); min-width: 44px; }
.sh-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sh-row__main b { font-weight: 500; font-size: 13px; }
.sh-row__main small { font-size: 11.5px; color: var(--text-2); }
.sh-row__data { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); text-align: right; }
@media (prefers-reduced-motion: reduce) { .sh-card, .sh-row { transition: none; } }

/* ===========================================================
   Reproductor de video de ejercicios — Fase 8, ronda 48 (punto 10).
   =========================================================== */
.vp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vp__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0f1419; }
.vp__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp__frame--image { background: var(--chip-bg); border: 1px solid var(--border); padding: 0; cursor: zoom-in; aspect-ratio: auto; max-height: 360px; }
.vp__frame--image img { display: block; width: 100%; height: 100%; max-height: 360px; object-fit: contain; }
.vp__poster { position: absolute; inset: 0; border: 0; padding: 0; background: linear-gradient(135deg, #1d2a35, #2e5e7d); color: #fff; cursor: pointer; display: grid; place-items: center; }
.vp__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.vp__play { position: relative; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.94); color: #15191d; display: grid; place-items: center; box-shadow: 0 4px 18px rgba(0,0,0,.35); transition: transform .15s ease; }
.vp__poster:hover .vp__play { transform: scale(1.06); }
.vp__src { position: absolute; left: 12px; bottom: 10px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 999px; }
.vp__ext { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--text-3); font: 500 11.5px var(--font-body); cursor: pointer; padding: 0; }
.vp__ext:hover { color: var(--accent); }
.vp--compact .vp__play { width: 44px; height: 44px; }
.vp-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--accent-soft); color: var(--accent); cursor: pointer; flex-shrink: 0; }
.vp-btn:hover { background: var(--accent); color: var(--accent-contrast); }
.vp-modal { z-index: 400; }
@media (prefers-reduced-motion: reduce) { .vp__play { transition: none; } }

/* ===========================================================
   Biblioteca de ejercicios — Fase 8, ronda 48 (roadmap punto 10).
   Variante B2 (pestanas + subcategorias, lista y detalle) y
   Categorias en tarjetas con color. --c / --cs = color de la categoria.
   =========================================================== */
.xl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: 10px; }
.xl-tabs button { display: inline-flex; align-items: baseline; gap: 6px; border: 0; background: none; color: var(--text-2); font: 500 13.5px var(--font-body); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s ease, border-color .15s ease; }
.xl-tabs button small { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.xl-tabs button:hover { color: var(--text); }
.xl-tabs button.is-on { color: var(--text); border-bottom-color: var(--c, var(--accent)); }
.xl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); align-self: center; }
.xl-subs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.xl-subs button { border: 0; background: transparent; color: var(--text-2); font: 500 12.5px var(--font-body); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.xl-subs button small { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.xl-subs button.is-on { background: var(--cs); color: var(--text); }
.xl-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.xl-toolbar .input { flex: 1; }
.xl-toolbar .chip-toggle { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.xl-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .xl-layout { grid-template-columns: minmax(0, 1fr); } }
.xl-list { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 290px); overflow: auto; }
.xl-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px 9px 12px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid var(--c); background: var(--bg); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.xl-row:hover { border-color: var(--c); }
.xl-row.is-on { box-shadow: 0 0 0 1px var(--c); border-color: var(--c); }
.xl-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.xl-row__main b { font-weight: 500; font-size: 13.5px; overflow-wrap: anywhere; }
.xl-row__main small { font-size: 11.5px; color: var(--text-2); }
.xl-vid { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.xl-tag { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--text-2); white-space: nowrap; }
.xl-tag--plyo { background: var(--cat-2-soft); color: var(--cat-2); }
.xl-detail { position: sticky; top: 12px; }
.xl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.xl-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.xl-card__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.xl-novideo { aspect-ratio: 16 / 9; max-height: 140px; border-radius: 12px; border: 1px dashed var(--border); display: grid; place-items: center; color: var(--text-3); font-size: 12.5px; }
.xl-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; }
.xl-kv dt { color: var(--text-3); }
.xl-kv dd { margin: 0; }
.xl-catpill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--cs); color: var(--c); font-weight: 500; font-size: 12.5px; }
.xl-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-2); }
.xl-form__sec { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-top: 1px solid var(--border); padding-top: 10px; margin: 6px 0 8px; }
.xl-form__foot { justify-content: space-between; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }
.xl-detect { font-size: 12px; color: var(--good); }
.xl-newcat { display: flex; flex-direction: column; gap: 6px; }
.xl-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.xl-colors button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.xl-colors button.is-on { box-shadow: 0 0 0 2px var(--text); }
.xc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.xc-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--c); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit; }
.xc-card__head { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.xc-card__title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.xc-card__title b { font-family: var(--font-display); font-weight: 400; font-size: 17px; overflow-wrap: break-word; }
.xc-card__title small { font-family: var(--font-mono); font-size: 11px; color: var(--c); }
.xc-swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--c); flex-shrink: 0; margin-top: 5px; }
.xc-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); background: var(--cs); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.xc-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 2px 5px 8px; border-radius: 8px; }
.xc-sub:hover { background: var(--bg); }
.xc-sub span:first-child { flex: 1; min-width: 0; }
.xc-empty { font-size: 12px; color: var(--text-3); padding: 4px 2px; }
.xc-icon { border: 0; background: transparent; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-grid; place-items: center; }
.xc-icon:hover { background: var(--chip-bg); color: var(--text); }
.xc-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--c); font: 500 12.5px var(--font-body); cursor: pointer; padding: 6px 0 0; }
.xc-card--add { border: 1px dashed var(--border-strong); border-top: 1px dashed var(--border-strong); align-items: center; justify-content: center; flex-direction: row; gap: 6px; color: var(--text-2); cursor: pointer; min-height: 130px; font-weight: 500; }
.xc-card--add:hover { color: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .xl-tabs button, .xl-row { transition: none; } }

/* Selector de ejercicios en columnas (ronda 48, punto 10). */
.xp { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: var(--surface); }
.xp__search { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.xp__search .input { flex: 1; }
.xp__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.xp-col { display: flex; flex-direction: column; min-width: 0; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); max-height: 340px; overflow: hidden; }
.xp-col__head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 9px 12px; background: var(--cs); border-bottom: 3px solid var(--c); }
.xp-col__head b { color: var(--c); font-size: 13.5px; }
.xp-col__head small { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.xp-col__body { display: flex; flex-direction: column; gap: 4px; padding: 8px; overflow: auto; }
.xp-group { display: flex; flex-direction: column; gap: 4px; }
.xp-group__title { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c); padding: 8px 4px 2px; }
.xp-item { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 2px; border-radius: 8px; background: var(--surface); transition: box-shadow .12s ease; }
.xp-item:hover { box-shadow: inset 3px 0 0 var(--c); }
.xp-item.is-on { box-shadow: inset 0 0 0 1px var(--c), inset 3px 0 0 var(--c); }
.xp-item__pick { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; font: 13px var(--font-body); color: var(--text); padding: 7px 8px; cursor: pointer; overflow-wrap: anywhere; }
.xp-picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-left: 5px solid var(--c); border-radius: 12px; background: var(--surface); }
.xp-picked__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.xp-picked__main b { font-weight: 600; font-size: 14px; }
.xp-picked__main small { font-size: 12px; color: var(--c); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .xp-item { transition: none; } }

/* Ronda 49: en modo oscuro la banda de mesociclo del atleta se veia
   demasiado fuerte (acento celeste lleno con texto blanco). Se usa el
   acento suave de fondo, texto normal y el acento solo en el avance.
   El modo claro no cambia. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .meso-band { background: var(--accent-soft); }
  html:not([data-theme="light"]) .meso-band__header { color: var(--text); }
  html:not([data-theme="light"]) .meso-band__segment { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  html:not([data-theme="light"]) .meso-band__segment--filled { background: var(--accent); }
}
html[data-theme="dark"] .meso-band { background: var(--accent-soft); }
html[data-theme="dark"] .meso-band__header { color: var(--text); }
html[data-theme="dark"] .meso-band__segment { background: color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-theme="dark"] .meso-band__segment--filled { background: var(--accent); }

/* Ronda 49: eventos en Inicio del atleta con el color de su tipo. */
.aw-evt { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); border-left: 3px solid var(--c); background: var(--surface); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.aw-evt:hover { border-color: var(--c); }
.aw-evt b { font-weight: 600; font-size: 14px; }
.aw-evt small { font-size: 12px; color: var(--c); }

/* Acceso de entrenadores — Fase 8, ronda 49 (roadmap punto 11). */
.cp-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.cp-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cp-state h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.cp-state p { margin: 0; font-size: 13.5px; max-width: 340px; }
.cp-state .stack { width: 100%; }
.cp-state__icon { font-size: 28px; line-height: 1; }
.cp-state__icon--ok { color: var(--good); }
.cp-state__icon--bad { color: var(--bad); }
.cp-kv { display: grid; grid-template-columns: auto auto; gap: 4px 14px; font-size: 13px; margin: 4px 0; text-align: left; }
.cp-kv dt { color: var(--text-3); }
.cp-kv dd { margin: 0; }
.ar-card { border-left: 4px solid var(--accent); }
.ar-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ar-count { font-family: var(--font-mono); font-size: 11px; background: var(--evt-1-soft); color: var(--evt-1); padding: 1px 8px; border-radius: 999px; }
.ar-note { margin-left: auto; font-size: 12px; }
.ar-list { display: flex; flex-direction: column; gap: 10px; }
.ar-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.ar-item__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ar-item__who { display: flex; flex-direction: column; min-width: 0; }
.ar-item__who small { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.ar-item__row { display: flex; gap: 10px; font-size: 13px; }
.ar-item__row span { color: var(--text-3); }
.ar-item__msg { margin: 0; font-size: 13px; color: var(--text-2); background: var(--surface); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
.ar-opts { display: flex; flex-direction: column; gap: 10px; }
.ar-opt { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.ar-opt small { font-size: 12px; color: var(--text-2); }
.ar-opt.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: default; }

/* ===========================================================
   Configuracion personal — Fase 8, ronda 50 (puntos 12 y 18),
   variante B "Perfil a la izquierda".
   =========================================================== */
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .st-layout { grid-template-columns: minmax(0, 1fr); } }
.st-stack { display: flex; flex-direction: column; gap: 16px; }
.st-stack .card + .card { margin-top: 0; }
.st-profile { display: flex; flex-direction: column; gap: 12px; }
.st-profile .field { margin-bottom: 0; }
.st-photo { display: flex; align-items: center; gap: 16px; }
.st-photo__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.st-photo__actions small { font-size: 11.5px; }
.st-sub { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); border-top: 1px solid var(--border); padding-top: 10px; }
.st-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .st-three { grid-template-columns: minmax(0, 1fr); } }
.st-save { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-ok { font-size: 12.5px; color: var(--good); }
.st-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.st-line:first-of-type { border-top: 0; }
.st-line > div { display: flex; flex-direction: column; min-width: 0; }
.st-line span { font-size: 12px; }
.st-line b { font-weight: 500; overflow-wrap: anywhere; }
.st-coaches { display: flex; flex-direction: column; gap: 8px; }
.st-coach { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.st-coach__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-coach__text small { font-size: 12px; color: var(--text-2); }
.st-coach__text p { margin: 4px 0 0; font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.aw-coaches { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.aw-coaches .st-coach { padding: 6px 12px 6px 6px; border-radius: 999px; align-items: center; }
.avatar-img { border-radius: 50%; object-fit: cover; display: inline-block; flex-shrink: 0; background: var(--chip-bg); }
.avatar-initials { border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.avatar-btn--photo { padding: 0; overflow: hidden; }
.avatar-btn--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crop { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.crop__stage { position: relative; width: 260px; height: 260px; max-width: 100%; border-radius: 12px; overflow: hidden; cursor: grab; touch-action: none; background: var(--chip-bg); }
.crop__stage:active { cursor: grabbing; }
.crop__stage canvas { display: block; }
.crop__circle { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); border: 2px solid #fff; pointer-events: none; }
.crop__zoom { width: 260px; max-width: 100%; }

/* ---------- Inicio (Fase 8, ronda 51, roadmap punto 13) ---------- */
.hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hm-head .date-line { margin-bottom: 0; }
.hm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-actions--left { justify-content: flex-start; }
.hm-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hm-ath { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hm-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hm-col > .card { margin: 0; }
.hm-col .meso-band { margin: 0; }
.hm-today, .hm-list { display: flex; flex-direction: column; gap: 8px; }
.hm-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.hm-row:hover { border-color: var(--accent); }
.hm-row--done { opacity: .75; }
.hm-row__time { font-family: var(--font-mono); color: var(--accent); font-size: 14px; min-width: 48px; }
.hm-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hm-row__main b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-row__main small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-row .btn { flex-shrink: 0; gap: 4px; }
.hm-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--evt-1-soft); color: var(--evt-1); }
.hm-attn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hm-attn:hover { border-color: var(--accent); }
.hm-attn__txt { display: flex; flex-direction: column; min-width: 0; }
.hm-attn__txt b { font-weight: 600; font-size: 14px; }
.hm-attn__txt small { font-size: 12px; color: var(--text-2); }
.hm-well { display: flex; flex-direction: column; gap: 8px; }
.hm-well__top { display: flex; align-items: baseline; gap: 8px; }
.hm-well__top b { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.hm-well__top span { font-size: 13px; color: var(--text-2); }
.hm-well__bar { height: 8px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.hm-well__bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.hm-well__miss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hm-name { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.hm-name:hover { border-color: var(--accent); color: var(--accent); }
.hm-chip { align-self: flex-start; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 0; }
.hm-chip--ok { background: var(--accent-soft); color: var(--accent); }
.hm-chip--warn { background: var(--evt-2-soft); color: var(--evt-2); cursor: pointer; }
.hm-chip--warn:hover { filter: brightness(.96); }
.hm-ath .aw-coaches { margin: 0; }
.hm-week { display: flex; flex-direction: column; gap: 12px; }
.hm-week__day { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.hm-week__day > b { font-size: 13.5px; font-weight: 600; padding-top: 9px; }
.hm-week__today { color: var(--accent); }
.hm-week__items { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 900px) { .hm-layout, .hm-ath { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hm-row { flex-wrap: wrap; }
  .hm-row__main { flex-basis: calc(100% - 60px); }
  .hm-row .sh-pill { margin-left: 60px; }
  .hm-row .btn { margin-left: auto; }
  .hm-week__day { grid-template-columns: 1fr; gap: 4px; }
  .hm-week__day > b { padding-top: 0; }
}

/* Punto 16 (ronda 52): la banda de mesociclo del Inicio del atleta abre la Periodización. */
.meso-band--link { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.meso-band--link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.meso-band--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===========================================================
   Punto 19 (Fase 8, ronda 52): sensación y animaciones más suaves y
   expresivas en toda la app (propuesta confirmada con vista previa).
   Onda y sonido al tocar: lib/feel.js. prefers-reduced-motion (arriba)
   sigue anulando todo.
   =========================================================== */
:root { --motion-spring-soft: cubic-bezier(.22, 1.3, .36, 1); }

/* Onda al tocar */
.fx-host { position: relative; }
.fx-rippling { overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); pointer-events: none; animation: fxRipple .6s cubic-bezier(.22, 1, .36, 1) forwards; z-index: 0; }
.btn--primary > .fx-ripple, .btn--danger > .fx-ripple { background: #fff; opacity: .32; }
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* Botones: se levantan al pasar el mouse, se hunden al tocar y rebotan al soltar. */
.btn, .chip-toggle, .icon-btn, .avatar-btn, .pill-btn {
  transition: transform .28s var(--motion-spring), background-color .18s ease, border-color .18s ease, box-shadow .22s ease, color .18s ease, opacity .18s ease;
}
.btn--primary:hover:not(:disabled), .btn--danger:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn--danger:hover:not(:disabled) { box-shadow: 0 6px 16px color-mix(in srgb, var(--danger, var(--bad)) 28%, transparent); }
.btn:active:not(:disabled), .chip-toggle:active:not(:disabled), .icon-btn:active, .avatar-btn:active, .pill-btn:active {
  transform: scale(.94); transition-duration: .08s;
}

/* Tarjetas que se tocan: leve elevación al pasar el mouse y hundimiento al tocar. */
.item-card, .attn-card, .tile, .sh-card, .sh-row, .hm-row, .hm-attn, .aw-item, .aw-evt, .report-card, .micro-item, .xl-card, .xc-card, .panel-date, .gl-card, .gl-mini {
  transition: transform .3s var(--motion-spring), box-shadow .25s ease, border-color .18s ease, background-color .18s ease;
}
:is(.item-card, .sh-card, .sh-row, .hm-row, .hm-attn, .aw-item, .aw-evt, .report-card, .micro-item, .xl-card, .xc-card, .tile):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
:is(.item-card, .attn-card, .sh-card, .sh-row, .hm-row, .hm-attn, .aw-item, .aw-evt, .report-card, .micro-item, .xl-card, .xc-card, .tile):active { transform: scale(.975); transition-duration: .08s; }

/* Pantallas y contenido de pestañas */
@keyframes pageIn { from { opacity: 0; transform: translateY(20px) scale(.992); } to { opacity: 1; transform: none; } }
.page { animation: pageIn .45s var(--motion-spring-soft); }
@keyframes motionTab { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.motion-tab { animation: motionTab .38s var(--motion-spring) backwards; }

/* Ventanas y menús */
@keyframes modalIn { 0% { opacity: 0; transform: translateY(24px) scale(.86); } 60% { opacity: 1; } 100% { transform: none; } }
.modal { animation: modalIn .5s var(--motion-spring); }
@keyframes overlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; } }
.modal-overlay { animation: overlayIn .25s ease; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }
.dropdown-menu--open, .notif-panel--open { animation: menuIn .34s var(--motion-spring); }

/* Listas en cascada: todas las tarjetas y filas de listas entran una tras otra. */
@keyframes motionItem { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card,
.sh-card, .sh-row, .hm-row, .hm-attn, .hm-week__day, .aw-item, .aw-evt, .gl-card, .gl-closed, .gl-mini, .pz-goal,
.notif-row, .report-card, .micro-item, .xl-card, .xc-card, .gt-tile, .st-coach, .ar-card {
  animation: motionItem .5s var(--motion-spring) backwards;
}
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card, .sh-card, .sh-row, .hm-row, .hm-attn, .hm-week__day, .aw-item, .aw-evt, .gl-card, .gl-closed, .gl-mini, .pz-goal, .notif-row, .report-card, .micro-item, .xl-card, .xc-card, .gt-tile, .st-coach, .ar-card):nth-child(2) { animation-delay: 70ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card, .sh-card, .sh-row, .hm-row, .hm-attn, .hm-week__day, .aw-item, .aw-evt, .gl-card, .gl-closed, .gl-mini, .pz-goal, .notif-row, .report-card, .micro-item, .xl-card, .xc-card, .gt-tile, .st-coach, .ar-card):nth-child(3) { animation-delay: 140ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card, .sh-card, .sh-row, .hm-row, .hm-attn, .hm-week__day, .aw-item, .aw-evt, .gl-card, .gl-closed, .gl-mini, .pz-goal, .notif-row, .report-card, .micro-item, .xl-card, .xc-card, .gt-tile, .st-coach, .ar-card):nth-child(4) { animation-delay: 210ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card, .sh-card, .sh-row, .hm-row, .hm-attn, .hm-week__day, .aw-item, .aw-evt, .gl-card, .gl-closed, .gl-mini, .pz-goal, .notif-row, .report-card, .micro-item, .xl-card, .xc-card, .gt-tile, .st-coach, .ar-card):nth-child(5) { animation-delay: 280ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card, .sh-card, .sh-row, .hm-row, .hm-attn, .hm-week__day, .aw-item, .aw-evt, .gl-card, .gl-closed, .gl-mini, .pz-goal, .notif-row, .report-card, .micro-item, .xl-card, .xc-card, .gt-tile, .st-coach, .ar-card):nth-child(6) { animation-delay: 350ms; }
:is(.item-card, .attn-card, .eval-row-card, .stack > .card, .panel-date, .pz-plan-card, .sh-card, .sh-row, .hm-row, .hm-attn, .hm-week__day, .aw-item, .aw-evt, .gl-card, .gl-closed, .gl-mini, .pz-goal, .notif-row, .report-card, .micro-item, .xl-card, .xc-card, .gt-tile, .st-coach, .ar-card):nth-child(n+7) { animation-delay: 420ms; }
/* Las cajas de Inicio y Sesión también entran en cascada. */
.hm-col > *, .sh-layout > *, .hm-ath > * { animation: motionItem .5s var(--motion-spring) backwards; }
.hm-col > :nth-child(2), .sh-layout > :nth-child(2), .hm-ath > :nth-child(2) { animation-delay: 90ms; }
.hm-col > :nth-child(3), .hm-ath > :nth-child(3) { animation-delay: 180ms; }

/* Confirmaciones: los sellos de "hecho" aparecen con un pop y un anillo. */
@keyframes fxPop { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fxRing { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
.sh-pill--done, .aw-pill--done, .hm-chip--ok, .gl-ok, .pz-role-pill--accent, .badge--pitch {
  display: inline-block; animation: fxPop .55s var(--motion-spring) backwards, fxRing .8s ease-out .15s;
}
@keyframes lvPop { 0% { transform: scale(.3); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Números que cambian */
@keyframes fxNum { from { opacity: 0; transform: translateY(-12px) scale(.9); } to { opacity: 1; transform: none; } }
[data-num] { display: inline-block; }
[data-num], .fx-num, .gt-tile b, .eval-row-card__value, .meso-ring__value, .gl-mini__nums .mono { animation: fxNum .45s var(--motion-spring) backwards; }
.fx-num { animation: fxNum .45s var(--motion-spring); }
.lv-num-change { animation: fxNum .4s var(--motion-spring); }

/* Barras de progreso: se llenan con rebote suave. */
.progress-fill, .hm-well__bar i, .pz-goal__bar > div { transition: width .6s var(--motion-spring-soft); animation: fxGrow .7s var(--motion-spring-soft) backwards; transform-origin: left; }
@keyframes fxGrow { from { transform: scaleX(0); } }

/* Pestañas de la barra inferior: el ícono activo salta al elegirlo. */
.tabitem--active svg { animation: fxPop .45s var(--motion-spring); }

/* ---------- Punto 20: marca PX Lab App ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.topbar__brand .brand, .topbar__brand .brand > span { color: var(--text); }
.topbar__brand .brand .brand__accent { color: var(--accent); }
.brand__icon { width: 64px; height: 64px; border-radius: 15px; display: block; }
.brand--gate { flex-direction: column; gap: 14px; }
.brand__icon svg { width: 100%; height: 100%; display: block; }
.st-push-note { font-size: 12px; margin: 10px 0 0; }

/* ---------- Punto 20: app instalada en el celular ----------
   Con la app a pantalla completa (viewport-fit=cover) el contenido llega
   hasta la muesca y la barra de inicio del iPhone; estos márgenes lo
   mantienen visible. En escritorio env() vale 0 y no cambia nada. */
.app-shell { height: 100vh; height: 100dvh; }
.topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-left: calc(24px + env(safe-area-inset-left, 0px)); padding-right: calc(24px + env(safe-area-inset-right, 0px)); }
@media (max-width: 640px) {
  .topbar { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
}
.profile-gate { padding-top: calc(40px + env(safe-area-inset-top, 0px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.modal-overlay { padding-top: calc(60px + env(safe-area-inset-top, 0px)); padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
/* Sin el resaltado gris de iOS al tocar (la app ya tiene su propia onda). */
html { -webkit-tap-highlight-color: transparent; }

/* ---------- Punto 20: ajustes a pantalla de celular ----------
   Solo en pantallas angostas; el escritorio no cambia. */
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table { min-width: 100%; }

@media (max-width: 640px) {
  /* Selectores de pestañas: si no caben, se deslizan con el dedo (la
     opción elegida se trae a la vista sola, ver lib/motion.js). */
  .segmented { display: flex; max-width: 100%; width: max-content; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented > .chip-toggle { flex-shrink: 0; white-space: nowrap; }

  /* Ventanas: más ancho útil. */
  .modal-overlay { padding-left: 10px; padding-right: 10px; }
  .modal { padding: 20px 16px; }

  /* Bloques de una sesión (detalle y PDF en pantalla): columnas que caben. */
  .session-tbl-head, .session-tbl-row { grid-template-columns: minmax(0, 1fr) 40px 64px 58px; gap: 6px; }
  .session-tbl-head span { font-size: 9.5px; letter-spacing: .02em; }
  .session-tbl-row__name { overflow-wrap: anywhere; }
  .session-tbl-num { font-size: 12.5px; }

  /* Tablas que se apilan: cada fila es una tarjeta con sus etiquetas. */
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .table--stack tr:last-child { border-bottom: none; }
  .table--stack td { border: none; padding: 3px 2px; overflow-wrap: anywhere; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 1px; }
  .table--stack td:first-child { font-weight: 600; }
  .table--stack td:first-child::before { display: none; }
  .table--stack tr:hover td { background: transparent; }

  /* Asistencia: nombre y tipo arriba, los tres botones abajo a todo el ancho. */
  .att-table thead { display: none; }
  .att-table, .att-table tbody { display: block; width: 100%; }
  .att-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .att-table tr:last-child { border-bottom: none; }
  .att-table td { display: block; border: none; padding: 0; }
  .att-table tr:hover td { background: transparent; }
  .att-table__name { font-weight: 600; overflow-wrap: anywhere; }
  .att-table__type { text-align: right; font-size: 12.5px; }
  .att-table__actions { grid-column: 1 / -1; }
  .att-table__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .att-table__btns .btn { justify-content: center; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 640px) {
  /* Filas con elementos a los dos extremos: si no caben, bajan de línea. */
  .row--between { flex-wrap: wrap; row-gap: 8px; }
  /* Encabezado del calendario (mes o semana con sus flechas). */
  .calendar-header { gap: 10px; }
  .calendar-header__title { min-width: 0; }
}
@media (max-width: 640px) {
  /* Pasos de los asistentes (1 · 2 · 3): los tres siempre caben. */
  .sb-steps .chip-toggle { flex: 1 1 0; min-width: 0; gap: 5px; padding: 8px 6px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; }
  .sb-steps__n { flex-shrink: 0; }
}
@media (max-width: 640px) {
  .segmented.seg-more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .segmented.seg-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
  .segmented.seg-more-left.seg-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}