/* RUMBO · identidad "Logotipo y Diseño": azul noche, crema y la estrella dorada (= logro y meta) — mobile-first, claro/oscuro */

@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("../fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Claro: de día, en el gimnasio o en la mesa de trabajo → fondo crema, tinta azul noche */
:root {
  --bg: #F4F0E8;
  --surface: #FCFAF6;
  --surface-2: #ECE6DA;
  --ink: #0F1A33;
  --ink-2: #4E566B;
  --line: #DCD4C4;
  --primary: #0F1A33;
  --primary-hover: #1F2D52;
  --on-primary: #F4F0E8;
  --primary-soft: #E1E2E6;
  /* La estructura (raíl, "Hoy", acceso) siempre en azul noche */
  --noche: #0F1A33;
  --noche-2: #1B2849;
  --noche-linea: #2C3A5E;
  --on-noche: #F4F0E8;
  --on-noche-2: #AEB5C7;
  /* Dorado de la estrella: solo logro y meta */
  --oro: #F0B440;
  --oro-hover: #F5C462;
  --on-oro: #0F1A33;
  --oro-soft: #F6E6C2;
  --oro-tinta: #865806;
  --warn: #A4480F;
  --warn-soft: #F7E1D3;
  --danger: #B42318;
  --danger-soft: #F8DEDA;
  --focus: #3D6BE0;
  /* Símbolo (constelación + estrella) */
  --sim-punto: var(--ink);
  --sim-linea: #8B8F99;
  --sim-estrella: #C98A1A;
  --radius: 14px;
  --radius-s: 10px;
  --shadow: 0 1px 2px rgba(15, 26, 51, .06), 0 6px 18px rgba(15, 26, 51, .07);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --f-titulo: "Jost", "Futura", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --toque: 52px;           /* altura mínima de botón: se usa con una mano y con prisa */
  --nav-h: 68px;
  color-scheme: light;
  accent-color: var(--primary);
}

/* Oscuro: de noche o con poca luz → el cielo del logo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070C1A; --surface: #10192F; --surface-2: #18233F; --ink: #F4F0E8; --ink-2: #A9B0C2; --line: #24304F;
    --primary: #F4F0E8; --primary-hover: #FFFFFF; --on-primary: #0F1A33; --primary-soft: #223159;
    --noche: #0F1A33; --noche-2: #1B2849; --noche-linea: #33426B; --hero-borde: #33426B;
    --oro: #F2B84A; --oro-hover: #F7C96F; --oro-soft: #3A2F18; --oro-tinta: #F2C46A;
    --warn: #FF9E5E; --warn-soft: #3A2316; --danger: #FF8A80; --danger-soft: #3D1A22; --focus: #8FB0FF;
    --sim-punto: #F4F0E8; --sim-linea: #9A9FA8; --sim-estrella: #F0B440;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #070C1A; --surface: #10192F; --surface-2: #18233F; --ink: #F4F0E8; --ink-2: #A9B0C2; --line: #24304F;
  --primary: #F4F0E8; --primary-hover: #FFFFFF; --on-primary: #0F1A33; --primary-soft: #223159;
  --noche: #0F1A33; --noche-2: #1B2849; --noche-linea: #33426B; --hero-borde: #33426B;
  --oro: #F2B84A; --oro-hover: #F7C96F; --oro-soft: #3A2F18; --oro-tinta: #F2C46A;
  --warn: #FF9E5E; --warn-soft: #3A2316; --danger: #FF8A80; --danger-soft: #3D1A22; --focus: #8FB0FF;
  --sim-punto: #F4F0E8; --sim-linea: #9A9FA8; --sim-estrella: #F0B440;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line) transparent; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.5 var(--f-texto);
  min-height: 100dvh; caret-color: var(--primary);
}
::selection { background: var(--primary); color: var(--on-primary); }
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: 1.85rem; font-weight: 500; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.dato { font-family: var(--f-dato); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: .88rem; }
.oculto { display: none !important; }
.escondido { display: none !important; } /* no se ve, pero su valor se sigue guardando */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Marca: símbolo (constelación que sube hasta la estrella) + RUMBO ── */
.simbolo { display: block; height: auto; overflow: visible; }
.simbolo .s-linea { fill: none; stroke: var(--sim-linea); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.simbolo .s-puntos circle { fill: var(--sim-punto); r: 5.5px; }
.simbolo .s-estrella { fill: var(--sim-estrella); }
/* A tamaño pequeño los puntos y la línea engordan para que se lean (como en la versión horizontal del PDF) */
.simbolo.peq .s-linea { stroke-width: 6; }
.simbolo.peq .s-puntos circle { r: 10px; }
.logotipo { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .32em; margin-right: -.32em; line-height: 1; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.marca .simbolo { width: 30px; }
.marca .logotipo { font-size: 1.02rem; font-weight: 500; }

/* ── Estructura ── */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
.cabecera {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); min-height: 56px;
}
.cabecera .titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 1.08rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera .marca + .titulo { padding-left: 12px; border-left: 1px solid var(--line); }
/* En pantallas interiores (con "Volver") el título necesita el sitio: queda solo el símbolo */
.cabecera:has(#btn-atras:not(.oculto)) .marca .logotipo { display: none; }
h2.bloque { margin-top: 28px; }
.btn.bloque { margin-top: 16px; }
.contenido { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 16px 16px calc(var(--nav-h) + 24px); }
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; height: var(--nav-h);
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav .marca-rail { display: none; }
.nav a:not(.marca-rail) {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-2); text-decoration: none; font-size: .78rem; font-weight: 600;
}
.nav a svg { width: 24px; height: 24px; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] svg { stroke-width: 2.4; }
/* Pestaña activa en el móvil: una raya fina arriba */
.nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .nav {
    position: sticky; top: 0; height: 100dvh; width: 232px; flex-direction: column; justify-content: flex-start;
    padding: 20px 12px 12px; gap: 4px; border: 0; background: var(--noche);
    --sim-punto: #F4F0E8; --sim-linea: #9A9FA8; --sim-estrella: #F0B440; --focus: #8FB0FF;
  }
  .nav .marca-rail { display: flex; align-items: center; gap: 14px; padding: 10px 14px 24px; margin-bottom: 8px; border-bottom: 1px solid var(--noche-linea); color: var(--on-noche); text-decoration: none; }
  .nav .marca-rail .simbolo { width: 46px; height: auto; }
  .nav .marca-rail .logotipo { font-size: 1.2rem; }
  .nav a:not(.marca-rail) { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-s); font-size: .95rem; color: var(--on-noche-2); transition: background-color .15s, color .15s; }
  .nav a:not(.marca-rail):hover { color: var(--on-noche); background: var(--noche-2); }
  .nav a[aria-current="page"] { background: var(--noche-2); color: var(--on-noche); }
  .nav a[aria-current="page"]::before { top: 12px; bottom: 12px; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; background: var(--on-noche); }
  .cabecera .marca { display: none; }
  .cabecera .marca + .titulo { padding-left: 0; border-left: 0; }
  .principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .contenido { padding: 24px 24px 40px; }
}

/* ── Fondo de cada sección: una escena nocturna detrás del contenido, velada con el color del fondo
   para que el texto se lea siempre (más velo abajo, donde se acumula el contenido) ── */
/* Modo claro: la escena nocturna es el "cielo" de la cabecera (sin velo, texto en crema); el resto de la página, crema limpio.
   Modo oscuro: la escena ocupa todo el fondo, velada con el azul de la página (más velo abajo, donde se acumula el contenido). */
.fondo-seccion {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none;
  background-size: cover; background-position: center bottom;
}
.fondo-seccion::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 70%);
}
.cabecera[data-fondo] {
  background-color: var(--noche); background-size: cover; background-position: center 35%;
  color: var(--on-noche); border-bottom-color: transparent; backdrop-filter: none;
  --sim-punto: #F4F0E8; --sim-linea: #9A9FA8; --sim-estrella: #F0B440; --focus: #8FB0FF;
}
.cabecera[data-fondo] .marca, .cabecera[data-fondo] .btn-icono { color: var(--on-noche); }
.cabecera[data-fondo] .btn-icono:hover { background: rgba(244, 240, 232, .12); }
.cabecera[data-fondo] .marca + .titulo { border-left-color: rgba(244, 240, 232, .25); }
/* Ordenador, modo claro: la escena entera alrededor y el contenido sobre una hoja crema */
@media (min-width: 900px) {
  .fondo-seccion { display: block; }
  .fondo-seccion::after { background: linear-gradient(180deg, rgba(15, 26, 51, .1) 0%, rgba(15, 26, 51, .35) 100%); }
  .cabecera[data-fondo] { background: rgba(15, 26, 51, .55); backdrop-filter: blur(10px); }
  .app:has(.fondo-seccion) .contenido {
    background: var(--bg); border-radius: 18px; margin: 8px auto 32px; padding: 28px 32px 36px;
    box-shadow: 0 2px 6px rgba(8, 14, 30, .25), 0 24px 60px rgba(8, 14, 30, .35);
  }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fondo-seccion::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 70%); }
  :root:not([data-theme="light"]) .app:has(.fondo-seccion) .contenido { background: none; border-radius: 0; margin: 0 auto; padding: 24px 24px 40px; box-shadow: none; }
}
@media (min-width: 900px) {
  :root[data-theme="dark"] .fondo-seccion::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 70%); }
  :root[data-theme="dark"] .app:has(.fondo-seccion) .contenido { background: none; border-radius: 0; margin: 0 auto; padding: 24px 24px 40px; box-shadow: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fondo-seccion { display: block; }
  :root:not([data-theme="light"]) .cabecera[data-fondo] { background-image: none; background-color: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom-color: var(--line); }
}
:root[data-theme="dark"] .fondo-seccion { display: block; }
:root[data-theme="dark"] .cabecera[data-fondo] { background-image: none; background-color: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom-color: var(--line); }
@media (min-width: 900px) { .fondo-seccion { left: 232px; } }
.modo-foco .fondo-seccion { display: none; }
.fondo-seccion[data-fondo="panel"], .cabecera[data-fondo="panel"] { background-image: url("../img/fondos/panel.webp"); }
.fondo-seccion[data-fondo="clientes"], .cabecera[data-fondo="clientes"] { background-image: url("../img/fondos/clientes.webp"); }
.fondo-seccion[data-fondo="ejercicios"], .cabecera[data-fondo="ejercicios"] { background-image: url("../img/fondos/ejercicios.webp"); }
.fondo-seccion[data-fondo="plantillas"], .cabecera[data-fondo="plantillas"] { background-image: url("../img/fondos/plantillas.webp"); }
.fondo-seccion[data-fondo="cuenta"], .cabecera[data-fondo="cuenta"] { background-image: url("../img/fondos/cuenta.webp"); }
.fondo-seccion[data-fondo="hoy"], .cabecera[data-fondo="hoy"] { background-image: url("../img/fondos/hoy.webp"); }
.fondo-seccion[data-fondo="calendario"], .cabecera[data-fondo="calendario"] { background-image: url("../img/fondos/calendario.webp"); }
.fondo-seccion[data-fondo="progreso"], .cabecera[data-fondo="progreso"] { background-image: url("../img/fondos/progreso.webp"); }
.fondo-seccion[data-fondo="perfil"], .cabecera[data-fondo="perfil"] { background-image: url("../img/fondos/perfil.webp"); }

/* ── Componentes ── */
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.tarjeta + .tarjeta, .bloque + .bloque { margin-top: 16px; }
.pila > * + * { margin-top: 12px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.acciones { justify-content: flex-end; }
.fila-sep { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.dos-col { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .dos-col { grid-template-columns: 1fr 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--toque); padding: 0 20px; border-radius: var(--radius-s); border: 2px solid transparent;
  font: 600 1rem var(--f-texto); cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--ease-out);
  background: var(--primary); color: var(--on-primary);
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.sec { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn.sec:hover { background: var(--primary-soft); }
.btn.fantasma { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); border-color: var(--line); }
.btn.fantasma:hover { border-color: var(--ink-2); }
.btn.peligro { background: var(--danger); color: #fff; }
/* Dorado = logro y meta: empezar, marcar hecho, terminar */
.btn.oro { background: var(--oro); color: var(--on-oro); font-family: var(--f-titulo); font-weight: 600; letter-spacing: .01em; }
.btn.oro:hover { background: var(--oro-hover); }
.btn.bloque-ancho { width: 100%; }
.btn.peq { min-height: 40px; padding: 0 14px; font-size: .92rem; }
.btn-icono { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; }
.btn-icono:hover { background: var(--surface-2); }
.btn-icono svg { width: 24px; height: 24px; }

label.campo { display: block; }
.campo > span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.campo .ayuda { display: block; font-weight: 400; color: var(--ink-2); font-size: .85rem; margin-top: 4px; }
.campo .error { display: block; color: var(--danger); font-size: .88rem; margin-top: 4px; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: var(--toque); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font: 400 1rem var(--f-texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-2); }
input[type=number] { font-family: var(--f-dato); }
textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 10px 0; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--primary); flex-shrink: 0; }

.segmentos { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.segmentos button { flex: 1 0 auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 600 .92rem var(--f-texto); cursor: pointer; white-space: nowrap; }
.segmentos button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Biblioteca: pestañas de entrenamiento (con scroll lateral en el móvil) y filtros por grupo */
.pestanas-ent button { flex: 0 0 auto; }
.pestanas-ent.apagado { opacity: .45; }
/* En el móvil los grupos van en una fila que se desliza con el dedo; en pantallas grandes, en varias filas */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip-filtro { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.chip-filtro {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: 600 .9rem var(--f-texto); cursor: pointer;
}
.chip-filtro:hover { border-color: var(--primary); }
.chip-filtro[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.grupo-ej + .grupo-ej { margin-top: 24px; }
.titulo-grupo { font-size: 1.05rem; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.mas-filtros summary { cursor: pointer; font-weight: 600; color: var(--primary); min-height: 44px; display: flex; align-items: center; }
.mas-filtros[open] summary { margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.ep { background: var(--primary); color: var(--on-primary); }
.chip.es { background: var(--primary-soft); color: var(--ink); }
.chip.ec { background: var(--surface-2); color: var(--ink-2); }
.chip.vmp { background: var(--primary-soft); color: var(--ink); }
.chip.hecho { background: var(--oro); color: var(--on-oro); }
.chip.aviso { background: var(--warn-soft); color: var(--warn); }
.chip.estimado { background: var(--warn-soft); color: var(--warn); }
.chip.medido { background: var(--primary-soft); color: var(--ink); }

.aviso { padding: 12px 14px; border-radius: var(--radius-s); background: var(--warn-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.aviso.info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.aviso.error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li + li { border-top: 1px solid var(--line); }
.lista a.item, .lista .item { display: flex; align-items: center; gap: 12px; padding: 14px 4px; text-decoration: none; color: var(--ink); min-height: 64px; }
.lista a.item:hover { background: var(--surface-2); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--noche); color: var(--on-noche); display: grid; place-items: center; font: 500 .95rem var(--f-titulo); letter-spacing: .06em; flex-shrink: 0; }
.item .principal-txt { flex: 1; min-width: 0; }
.item .principal-txt strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tarjeta de ejercicio */
.ej-card { display: flex; gap: 12px; align-items: center; padding: 10px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ej-card:hover { border-color: var(--ink-2); }
.ej-card .miniatura { width: 72px; height: 72px; flex-shrink: 0; border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.ej-card .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.ej-card .txt { min-width: 0; flex: 1; }
.ej-card .txt strong { display: block; line-height: 1.25; margin-bottom: 4px; }

/* Visor de "GIF": dos fotogramas alternando o un GIF/vídeo propio */
.media { position: relative; background: #fff; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.media.fotogramas img:nth-child(2) { animation: alterna 2s steps(1) infinite; }
@keyframes alterna { 0% { opacity: 0; } 50% { opacity: 1; } }
.media.vacia { display: grid; place-items: center; color: var(--ink-2); background: var(--surface-2); }
.media .credito { position: absolute; bottom: 0; right: 0; padding: 2px 8px; font-size: .7rem; background: rgba(255,255,255,.85); color: #4E566B; border-top-left-radius: 8px; }

.indicaciones h4 { font-size: 1rem; margin: 1em 0 .4em; color: var(--ink); }
.indicaciones ul { padding-left: 1.2em; margin: 0 0 .8em; }
.indicaciones li { margin-bottom: .3em; }
.editor-barra { display: flex; gap: 4px; margin-bottom: 6px; }
.editor { min-height: 160px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.editor:focus { border-color: var(--primary); outline: none; }

/* Tablas de datos */
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.tabla th { text-align: left; font: 600 .78rem var(--f-titulo); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 6px 8px; border-bottom: 1.5px solid var(--line); }
.tabla td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tabla input { min-height: 44px; padding: 8px; }
.tabla-scroll { overflow-x: auto; }

/* Pantalla de acceso: el cielo del logo */
.acceso {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--noche); color: var(--on-noche);
  --sim-punto: #F4F0E8; --sim-linea: #9A9FA8; --sim-estrella: #F0B440;
}
.acceso .caja > :not(.tarjeta) { --focus: #8FB0FF; }
.acceso .caja { width: 100%; max-width: 420px; }
.acceso .logo { display: flex; flex-direction: column; align-items: center; gap: 22px; margin: 8px 0 10px; }
.acceso .logo .simbolo { width: min(132px, 36vw); }
.acceso .logo .logotipo { font-size: 2rem; }
.acceso .lema { color: var(--on-noche-2); margin-bottom: 28px; text-align: center; }
.acceso .caja > p, .acceso .caja > h1, .acceso .caja > h2 { color: var(--on-noche); }
.acceso .caja > p a { color: var(--on-noche); }
.acceso .tarjeta { color: var(--ink); border-color: transparent; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }

/* Aviso flotante */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-weight: 600; max-width: calc(100% - 32px); box-shadow: var(--shadow); animation: entra .2s var(--ease-out); }
.toast.error { background: var(--danger); color: #fff; }
@keyframes entra { from { opacity: 0; transform: translate(-50%, 8px); } }

dialog { border: 0; border-radius: var(--radius); padding: 20px; max-width: min(460px, calc(100% - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(8, 14, 30, .35); }
dialog::backdrop { background: rgba(11, 19, 40, .6); }

/* "Hoy": la sesión del día sobre azul noche, con el botón dorado al alcance del pulgar */
.hoy-hero { background: var(--noche); color: var(--on-noche); border: 1px solid var(--hero-borde, transparent); border-radius: var(--radius); padding: 20px; --sim-punto: #F4F0E8; --focus: #8FB0FF; }
h1.con-meta, h2.con-meta { margin-bottom: 2px; }
.con-meta + .meta { margin-top: 0; }
.hoy-hero .meta { margin-bottom: 4px; }
.hoy-hero h1 { color: inherit; }
.cargando { padding: 40px 0; text-align: center; color: var(--ink-2); }
.vacio { padding: 32px 16px; text-align: center; color: var(--ink-2); }

/* ── Fase 2: calendario, ciclos y sesiones ── */
:root {
  --t-fuerza: #2F55A4; --t-resistencia: #C0562A; --t-pliometria: #6E4FB8;
  --t-flexibilidad: #3F7F55; --t-velocidad: #B3354A; --t-cambio_direccion: #1F7F86;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --t-fuerza: #7FA2F0; --t-resistencia: #F08A5D; --t-pliometria: #B29CF2; --t-flexibilidad: #7CC08E; --t-velocidad: #F27A8A; --t-cambio_direccion: #5CC3C9; }
}
:root[data-theme="dark"] { --t-fuerza: #7FA2F0; --t-resistencia: #F08A5D; --t-pliometria: #B29CF2; --t-flexibilidad: #7CC08E; --t-velocidad: #F27A8A; --t-cambio_direccion: #5CC3C9; }
.t-fuerza { --t: var(--t-fuerza); } .t-resistencia { --t: var(--t-resistencia); } .t-pliometria { --t: var(--t-pliometria); }
.t-flexibilidad { --t: var(--t-flexibilidad); } .t-velocidad { --t: var(--t-velocidad); } .t-cambio_direccion { --t: var(--t-cambio_direccion); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--t, var(--ink-2)); flex-shrink: 0; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }

.cal-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-cabecera .mes { font: 600 1.2rem var(--f-titulo); flex: 1; min-width: 150px; }
.cal-cabecera .mes::first-letter { text-transform: uppercase; }
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-mes .dsem { text-align: center; font: 600 .74rem var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 4px 0; }
.cal-dia {
  min-height: 64px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 4px;
  display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0;
}
.cal-dia.fuera { opacity: .45; }
.cal-dia.hoy { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-dia.en-ciclo { background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.cal-dia .num { font: 600 .8rem var(--f-dato); }
.cal-dia.soltar { outline: 3px dashed var(--primary); outline-offset: -3px; }
.mini-ses { display: flex; align-items: center; gap: 5px; font-size: .72rem; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mini-ses::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--t, var(--ink-2)); }
.mini-ses .txt { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .cal-dia { min-height: 52px; }
  .mini-ses .txt { display: none; }
  .mini-ses::before { width: 8px; height: 8px; }
}

.dia-fila { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.dia-fila:first-child { border-top: 0; }
.dia-fila .etq { font-weight: 600; font-size: .9rem; }
.dia-fila .etq small { display: block; font: 500 .8rem var(--f-dato); color: var(--ink-2); }
.dia-fila.soltar { outline: 3px dashed var(--primary); outline-offset: 2px; border-radius: 8px; }
/* Tarjeta de sesión: el tipo de entrenamiento se marca con una barrita de color dentro de la tarjeta */
.ses-card {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 52px;
}
.ses-card::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 4px; border-radius: 2px; background: var(--t, var(--line)); }
.ses-card + .ses-card { margin-top: 6px; }
.fila-sep > .ses-card { flex: 1; min-width: 0; }
.girar { transform: scaleX(-1); display: inline-flex; }
.ses-card[draggable="true"] { cursor: grab; }
.ses-card .principal-txt { flex: 1; min-width: 0; }
.ses-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado { font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.estado.pendiente { background: var(--surface-2); color: var(--ink-2); }
.estado.hecha { background: var(--oro); color: var(--on-oro); }
.estado.parcial { background: var(--warn-soft); color: var(--warn); }
.estado.no_hecha { background: var(--danger-soft); color: var(--danger); }
.estado.en_curso { background: var(--primary-soft); color: var(--ink); }
.btn-mas-dia { border: 1px dashed var(--line); background: transparent; color: var(--ink-2); border-radius: 10px; min-height: 40px; width: 100%; cursor: pointer; font: 600 .88rem var(--f-texto); }
.btn-mas-dia:hover { border-color: var(--primary); color: var(--primary); }

.semana-ciclo { padding: 12px 16px; }
.semana-ciclo + .semana-ciclo { margin-top: 12px; }
.semana-ciclo h3 { margin: 0; }
.rejilla-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.rejilla-semana .col { min-height: 80px; border-radius: 10px; background: var(--surface-2); padding: 6px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rejilla-semana .col.soltar { outline: 3px dashed var(--primary); outline-offset: -3px; }
.rejilla-semana .col .dnom { font: 600 .74rem var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.rejilla-semana .ses-card { padding: 6px 8px 6px 14px; min-height: 0; font-size: .8rem; }
.rejilla-semana .ses-card::before { left: 5px; top: 7px; bottom: 7px; width: 3px; }
.rejilla-semana .ses-card + .ses-card { margin-top: 0; }
@media (max-width: 760px) {
  .rejilla-semana { grid-template-columns: 1fr; }
  .rejilla-semana .col { min-height: 0; display: grid; grid-template-columns: 70px 1fr; align-items: start; background: transparent; padding: 4px 0; border-top: 1px solid var(--line); border-radius: 0; }
  .rejilla-semana .col .dnom { text-align: left; padding-top: 6px; }
  .rejilla-semana .col .pila-dia { display: flex; flex-direction: column; gap: 6px; }
  .rejilla-semana .ses-card { font-size: .9rem; padding: 8px 10px 8px 16px; }
}
.pila-dia { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.avisos-lista { list-style: none; margin: 0; padding: 0; }
.avisos-lista li { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); border-radius: 8px; font-size: .92rem; }
.avisos-lista li.info { border-color: color-mix(in srgb, var(--primary) 25%, transparent); background: var(--primary-soft); }
.avisos-lista li + li { margin-top: 6px; }

.fase { margin-top: 20px; }
.fase > h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.bloque-ses { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px; }
.bloque-ses + .bloque-ses { margin-top: 10px; }
.presc { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.presc:first-of-type { border-top: 0; }
.presc .miniatura { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--surface-2); flex-shrink: 0; }
.presc .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.presc .cuerpo { flex: 1; min-width: 0; }
.presc .resumen { font: 500 .88rem var(--f-dato); color: var(--ink); margin-top: 2px; }
.presc .vista-cliente { margin-top: 6px; font-size: .85rem; color: var(--ink-2); padding: 6px 10px; background: var(--surface-2); border-radius: 8px; }
.presc .acciones-presc { display: flex; gap: 2px; flex-shrink: 0; }
.presc .acciones-presc .btn-icono { min-width: 38px; min-height: 38px; font-size: 1.05rem; }
.orden-letra { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--noche); color: var(--on-noche); font: 600 .78rem var(--f-dato); margin-right: 6px; }

dialog.grande { width: min(720px, calc(100% - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
dialog .cabecera-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.tabla-modelo input { width: 76px; min-height: 40px; padding: 6px 8px; }
.tabla-tramos input { width: 84px; min-height: 40px; padding: 6px 8px; }
.opciones-tarjeta { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.opcion-t { display: block; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.opcion-t:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.opcion-t input { margin-right: 6px; accent-color: var(--primary); }
.bloque-txt { display: block; }
.dias-check { display: flex; gap: 6px; flex-wrap: wrap; }
.dias-check label { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 700; }
.dias-check label:has(input:checked) { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.dias-check input { position: absolute; opacity: 0; pointer-events: none; }
.grupo-campos { border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.grupo-campos legend { font: 600 1rem var(--f-titulo); padding: 0 6px; }
.rejilla-campos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.por-serie { grid-column: 1 / -1; display: grid; gap: 6px; }
.por-serie .fila-serie { display: grid; grid-template-columns: 5.5rem 1fr 1fr; gap: 8px; align-items: end; }
.por-serie .num-serie { font-weight: 600; padding-bottom: 10px; }

/* ── Fase 3: cliente (Hoy, calendario, modo sesión) ── */
.hoy-hero h2 { color: inherit; font-size: 1.6rem; font-weight: 500; }
.hoy-hero + .hoy-hero { margin-top: 12px; }
.hoy-hero .chip:not(.hecho) { background: var(--noche-2); color: var(--on-noche); }
.hoy-hero .muted, .hoy-hero .small { color: var(--on-noche-2); }
.hoy-hero a:not(.btn) { color: var(--on-noche); }
.lista-ej { margin: 0; padding-left: 1.1em; color: var(--on-noche); }
.lista-ej li::marker { color: var(--on-noche-2); }
.btn-grande { min-height: 64px; font-size: 1.15rem; }
.btn.fantasma-claro { background: transparent; color: var(--on-noche); border-color: color-mix(in srgb, var(--on-noche) 45%, transparent); }
.btn.fantasma-claro:hover { border-color: var(--on-noche); background: var(--noche-2); }
.enlace-claro { display: block; color: var(--on-noche); text-align: center; font-size: .92rem; }
.semana-cliente { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 72px; }
.dia-mini.hoy { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.dia-mini .marcas { display: flex; gap: 3px; min-height: 12px; align-items: center; }
.dia-mini .punto.hecha { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--oro); }
.dia-mini .punto.no_hecha { opacity: .35; }
.presc-cliente .miniatura { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--surface-2); flex-shrink: 0; }
.presc-cliente .miniatura img { width: 100%; height: 100%; object-fit: cover; }

.modo-foco .nav { display: none; }
.modo-foco .contenido { padding-bottom: 120px; }
.modo-sesion { max-width: 640px; margin: 0 auto; }
.modo-sesion.centrado { text-align: center; padding-top: 40px; }
.ms-cabecera { margin-bottom: 10px; }
.progreso { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progreso span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s var(--ease-out); }
.ms-titulo { font-size: 1.7rem; font-weight: 500; margin-top: 14px; }
.lineas { margin: 8px 0; padding-left: 1.1em; font-size: 1.05rem; }
.lineas li { margin-bottom: 4px; }
.indic summary { cursor: pointer; font-weight: 700; color: var(--primary); min-height: 44px; display: flex; align-items: center; }
.serie { display: grid; gap: 10px; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-top: 10px; }
.serie.hecha { grid-template-columns: auto 1fr auto; align-items: center; border-color: var(--oro); background: var(--oro-soft); }
.num-serie { font-weight: 700; }
.resumen-serie { font-size: .92rem; }
.campos-serie { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.campo.mini > span { font-size: .8rem; }
.campo.mini input { font: 600 1.25rem var(--f-dato); text-align: center; min-height: 56px; }
.recamara { border: 0; padding: 0; margin: 0; }
.recamara legend { font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.chips-num { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-num label { position: relative; }
.chips-num input { position: absolute; opacity: 0; pointer-events: none; }
.chips-num span { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 12px; font: 600 1.05rem var(--f-dato); cursor: pointer; background: var(--surface); transition: background-color .12s ease, border-color .12s ease; }
.chips-num input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chips-num input:focus-visible + span { outline: 3px solid var(--focus); }
.chips-num.borg span { min-width: 42px; height: 44px; }
.btn-ok { min-height: 60px; font-size: 1.15rem; }
.ms-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.ms-nav .btn { flex: 1; min-height: 56px; }
.ms-nav .btn:last-child { flex: 2; }
.barra-descanso { position: fixed; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 30; padding: 0 12px; }
.barra-descanso-in { max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--noche); color: var(--on-noche); box-shadow: 0 8px 30px rgba(8, 14, 30, .35); --focus: #8FB0FF; }
.barra-descanso-in.fin { background: var(--oro); color: var(--on-oro); }
.barra-descanso-in .progreso { grid-column: 1 / -1; background: rgba(244, 240, 232, .18); }
.barra-descanso-in .progreso span { background: var(--on-noche); }
.barra-descanso .btn.fantasma { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.grande-num { font: 500 2.6rem/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.intervalos { text-align: center; padding: 16px; border-radius: var(--radius); background: var(--primary-soft); display: grid; gap: 8px; }
.seg-actual { font: 600 1.15rem var(--f-titulo); }
.seg-actual.pausa { color: var(--ink-2); }
.intervalos .grande-num { font-size: 3.6rem; }
.acciones-int { justify-content: center; }
.acciones-int .btn { min-height: 56px; min-width: 130px; }
.sensaciones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sensaciones label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); }
.sensaciones input { position: absolute; opacity: 0; pointer-events: none; }
.sensaciones label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.sensaciones .emoji { font-size: 1.9rem; }
.seg-radio { flex: 1; position: relative; }
.seg-radio input { position: absolute; opacity: 0; }
.seg-radio span { display: grid; place-items: center; min-height: 48px; border-radius: 9px; font-weight: 700; cursor: pointer; }
.seg-radio input:checked + span { background: var(--surface); box-shadow: var(--shadow); }
.emoji-grande { font-size: 4rem; }
.registro-presc { margin-top: 6px; font-size: .85rem; padding: 6px 10px; border-radius: 8px; background: var(--oro-soft); }
.registro-presc.no { background: var(--surface-2); color: var(--ink-2); }
.registro-cliente.con-molestias { border-color: var(--danger); }
.comentario { margin: 0; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; font-style: italic; }
#f-fin fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#f-fin legend { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .media.fotogramas img:nth-child(2) { animation-duration: 4s; }
  .toast { animation: none; }
}

/* ── Fase 4: gráficas, tests, progreso y panel ── */
.grafica { margin: 0; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica .rejilla-g { stroke: var(--line); stroke-width: 1; }
.grafica .eje { stroke: var(--ink-2); stroke-width: 1.2; }
.grafica .eje-txt { fill: var(--ink-2); font: 500 12px var(--f-dato); }
.grafica .eje-tit { fill: var(--ink-2); font: 600 12px var(--f-texto); }
.grafica .trazo { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafica .trazo.discontinua { stroke-dasharray: 6 5; stroke-width: 2; }
.grafica .punto-g { fill: var(--surface); stroke: currentColor; stroke-width: 2.5; }
.grafica .punto-g.alerta { fill: var(--danger); stroke: var(--danger); }
.grafica .punto-g.pendiente { stroke-dasharray: 2 2; }
/* Progresión de los tests como constelación: puntos unidos por una línea fina que sube hasta la estrella (la última marca) */
.grafica.constelacion .rejilla-g { stroke-dasharray: 1 5; }
.grafica.constelacion .eje { stroke: var(--line); stroke-width: 1; }
.grafica .linea-c { fill: none; stroke: var(--sim-linea); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.grafica .estrella-c { fill: var(--sim-estrella); }
.grafica .punto-c { fill: var(--sim-punto); }
.grafica .punto-c.alerta { fill: var(--danger); }
.grafica .punto-c.pendiente { fill: var(--surface); stroke: var(--sim-punto); stroke-width: 1.5; }
.grafica .halo-c { fill: var(--surface); }
/* Segunda serie (p. ej. CMJ junto a SJ): mismos puntos y línea, en su color */
.grafica .serie-color .linea-c { stroke: currentColor; stroke-dasharray: 5 4; }
.grafica .serie-color .punto-c { fill: currentColor; }
/* Al aparecer, la línea se traza de un punto al siguiente y la estrella se enciende al final */
@media (prefers-reduced-motion: no-preference) {
  .grafica.constelacion .linea-c { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traza .9s var(--ease-out) .1s forwards; }
  .grafica.constelacion .serie-color .linea-c { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .grafica.constelacion .punto-c { opacity: 0; animation: enciende .3s ease-out .15s forwards; }
  .grafica.constelacion .estrella-c { opacity: 0; transform-box: fill-box; transform-origin: 50% 70%; transform: scale(.6); animation: brilla .45s var(--ease-out) .75s forwards; }
}
@keyframes traza { to { stroke-dashoffset: 0; } }
@keyframes enciende { to { opacity: 1; } }
@keyframes brilla { to { opacity: 1; transform: scale(1); } }
.serie-0 { color: var(--primary); }
.serie-1 { color: #C0562A; }
.serie-2 { color: #6E4FB8; }
.serie-previa-0 { color: #7E8496; }
.serie-previa-1 { color: #A3A7B4; }
.serie-previa-2 { color: #C3C5CC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .serie-1 { color: #F08A5D; }
  :root:not([data-theme="light"]) .serie-2 { color: #B29CF2; }
  :root:not([data-theme="light"]) .serie-previa-0 { color: #8A93AD; }
  :root:not([data-theme="light"]) .serie-previa-1 { color: #6A7491; }
  :root:not([data-theme="light"]) .serie-previa-2 { color: #4E5875; }
}
:root[data-theme="dark"] .serie-1 { color: #F08A5D; }
:root[data-theme="dark"] .serie-2 { color: #B29CF2; }
:root[data-theme="dark"] .serie-previa-0 { color: #8A93AD; }
:root[data-theme="dark"] .serie-previa-1 { color: #6A7491; }
:root[data-theme="dark"] .serie-previa-2 { color: #4E5875; }
.leyenda-g { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); margin-top: 4px; }
.leyenda-g span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-g i { display: inline-block; width: 18px; height: 0; border-top: 3px solid currentColor; }
.leyenda-g i.discontinua { border-top-style: dashed; }

.dato.grande { font-size: 1.6rem; }
.dato.mal, .mal { color: var(--danger); }
.formula { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-s); font: 500 .88rem/1.5 var(--f-dato); overflow-wrap: anywhere; }
.formula .small { display: block; font-family: var(--f-texto); }
.tabla.compacta { font-size: .88rem; }
.tabla.compacta td, .tabla.compacta th { padding: 5px 6px; white-space: nowrap; }
.tabla tr.extrapolado td { color: var(--ink-2); }
.chip.error { background: var(--danger-soft); color: var(--danger); }
.btn.izq { justify-content: flex-start; text-align: left; }
.pila-peq { display: grid; gap: 6px; }
.filas-cargas { display: grid; gap: 6px; }
.fila-carga { display: grid; grid-template-columns: 2rem 1fr 1fr; gap: 8px; align-items: center; }
.fila-carga.cab { min-height: 0; }
.fila-carga input { min-width: 0; }
.segmentos-radio { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.segmentos-radio legend { font-weight: 600; margin-bottom: 6px; }
.segmentos-radio label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; }
.segmentos-radio label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.botones-ficha { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .botones-ficha { grid-template-columns: 2fr 1fr 1fr; } }

.barra-pct { display: inline-block; flex: 1 1 auto; min-width: 70px; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.barra-pct .relleno { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 999px; }
details.tarjeta > summary { cursor: pointer; list-style: none; }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta[open] > summary { margin-bottom: 8px; }
.semanas-cumpl li { gap: 10px; padding: 6px 0; }
.semanas-cumpl li > .fila { flex: 1 1 auto; justify-content: flex-end; max-width: 60%; }

/* Panel: en el móvil, una columna en el orden original; desde 900 px, dos columnas independientes con 16 px entre tarjetas */
.panel-rejilla { display: flex; flex-direction: column; gap: 16px; }
.panel-col { display: contents; }
.o-0 { order: 0; } .o-1 { order: 1; } .o-2 { order: 2; } .o-3 { order: 3; }
.o-4 { order: 4; } .o-5 { order: 5; } .o-6 { order: 6; } .o-7 { order: 7; }
@media (min-width: 900px) {
  .panel-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .panel-col { display: flex; flex-direction: column; gap: 16px; }
}
.panel-caja h2 { font-size: 1.1rem; margin: 0 0 8px; }
.panel-caja .item { gap: 8px; }
.panel-caja.error .chip.error, .panel-caja .chip.error { background: var(--danger-soft); color: var(--danger); }
.comentarios .item.con-molestias { background: var(--danger-soft); border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.comentarios .principal-txt > span { display: block; }

.tabla-zonas .par { display: inline-flex; align-items: center; gap: 4px; }
.tabla-zonas input { width: 68px; min-height: 40px; padding: 6px; }
.leyenda-g i.solo-punto { width: 10px; height: 10px; border: 2.5px solid currentColor; border-radius: 50%; }
details.tarjeta > .barra-pct { display: block; width: 100%; height: 12px; margin: 6px 0 4px; }

/* ── Fase 5: app instalable ── */
.cabecera { padding-top: calc(10px + env(safe-area-inset-top)); }
.acceso { padding-top: calc(24px + env(safe-area-inset-top)); }
.barra-conexion { position: sticky; top: 0; z-index: 40; padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--warn); color: #fff; font-size: .88rem; font-weight: 600; text-align: center; }
:root[data-theme="dark"] .barra-conexion { color: #1F1006; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barra-conexion { color: #1F1006; } }
.sin-conexion .cabecera { padding-top: 10px; }
.barra-version { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: var(--radius); background: var(--noche); color: var(--on-noche); box-shadow: 0 8px 30px rgba(8, 14, 30, .3); font-weight: 600; animation: sube .25s var(--ease-out); --focus: #8FB0FF; }
.barra-version span { flex: 1; }
.barra-version .btn-icono { color: inherit; }
.barra-version .btn.claro { background: var(--on-noche); color: #0F1A33; }
.barra-version .btn.claro:hover { background: #FFFFFF; }
.barra-version .btn-icono:hover { background: var(--noche-2); }
@media (min-width: 900px) { .barra-version { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }
.modo-foco .barra-version { bottom: calc(86px + env(safe-area-inset-bottom)); }
@keyframes sube { from { opacity: 0; transform: translateY(10px); } }

/* ── Fase 5: pulido ── */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
a, button, .btn, label, summary, select { touch-action: manipulation; }
.nav, .btn, .btn-icono, .chips-num span, .segmentos button { -webkit-user-select: none; user-select: none; }
/* Cargando: indicador giratorio + texto */
.cargando { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cargando::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--primary); animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
/* Entrada suave de cada pantalla */
.contenido.entra > * { animation: aparece .22s var(--ease-out) both; }
.contenido.entra > *:nth-child(2) { animation-delay: .03s; }
.contenido.entra > *:nth-child(3) { animation-delay: .06s; }
.contenido.entra > *:nth-child(n+4) { animation-delay: .09s; }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
/* Respuesta inmediata al tocar */
.item:active, .ses-card:active, .ej-card:active, .dia-mini:active, .cal-dia:active { transform: scale(.985); }
.btn-icono, .item, .ses-card, .ej-card, .dia-mini, .cal-dia { transition: background-color .15s ease, border-color .15s ease, transform .16s var(--ease-out); }
.lista .item { transition: background-color .15s ease; }
a.item:hover { background: var(--surface-2); }
/* Estados vacíos un poco más amables */
.vacio { border-radius: var(--radius); }
.tarjeta.vacio p { margin: 0 0 12px; }
.tarjeta.vacio p:last-child { margin-bottom: 0; }
/* Pantalla de error sin conexión al abrir */
.sin-red { text-align: center; }
.sin-red .btn { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .contenido.entra > * { animation: none; }
  .cargando::before { animation-duration: 2.4s; }
  .barra-version { animation: none; }
  .btn:active, .item:active, .ses-card:active { transform: none; }
}

/* ── Biblioteca: tres filtros y casillas de músculos / material ── */
.filtros-bib { display: grid; gap: 10px; grid-template-columns: 1fr; border: 0; margin: 0; min-width: 0; }
@media (min-width: 640px) { .filtros-bib { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } .filtros-bib #quitar-filtros { grid-column: 1 / -1; justify-self: start; } }
.musculos-txt { display: block; color: var(--ink-2); margin-top: 2px; }
.chips-marca { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chips-marca legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.chips-marca label { position: relative; }
.chips-marca input { position: absolute; opacity: 0; pointer-events: none; }
.chips-marca span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .9rem; background: var(--surface); }
.chips-marca input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chips-marca input:focus-visible + span { outline: 3px solid var(--focus); }