/* ═══════════════════════════════════════════════════════════════════════════
   KyoFit — sistema de diseño

   Los tokens son los mismos del front de Justicia & Reintegro (paleta Kyonnect:
   crema + tinta profunda + azul de marca, tipografías Fraunces + Inter). Se
   copian con los mismos NOMBRES de variable a propósito: si mañana J&R cambia
   un color, se traduce acá cambiando una línea y no cazando hex por el CSS.

   El tema oscuro y el claro se definen los dos completos; el claro es el que
   manda por defecto, igual que en J&R.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Paleta base (OKLCH editorial) ── */
  --background: oklch(0.975 0.012 90);   /* crema */
  --foreground: oklch(0.22 0.02 260);    /* tinta */
  --ink: oklch(0.18 0.015 260);
  --cream: oklch(0.975 0.012 90);

  /* Azul de marca Kyonnect (#003AE3) */
  --primary: oklch(0.46 0.24 264);
  --primary-foreground: oklch(0.98 0 0);

  --brand-50:  oklch(0.94 0.04 264);
  --brand-100: oklch(0.88 0.07 264);
  --brand-700: oklch(0.46 0.24 264);
  --brand-900: oklch(0.30 0.20 264);
  --brand-fg:  oklch(0.975 0.012 90);

  /* Acento teal editorial */
  --accent-50:  oklch(0.93 0.04 195);
  --accent-100: oklch(0.84 0.07 195);
  --accent-500: oklch(0.55 0.12 195);
  --accent-600: oklch(0.46 0.10 195);
  --accent-700: oklch(0.38 0.08 195);

  /* Superficies */
  --surface-0: oklch(0.975 0.012 90);
  --surface-1: oklch(1 0 0);
  --surface-2: oklch(0.965 0.014 90);

  /* Texto */
  --text-1: oklch(0.22 0.02 260);
  --text-2: oklch(0.42 0.018 260);
  --text-3: oklch(0.62 0.015 260);

  /* Bordes */
  --border: oklch(0.88 0.012 90);
  --border-strong: oklch(0.82 0.014 90);
  --hover: oklch(0.22 0.02 260 / 0.04);
  --chip-bg: oklch(0.93 0.012 90);

  /* Estado */
  --ok-50:   oklch(0.94 0.06 150);
  --ok-500:  oklch(0.62 0.16 150);
  --ok-700:  oklch(0.48 0.14 150);
  --warn-50: oklch(0.95 0.07 85);
  --warn-500: oklch(0.74 0.16 85);
  --warn-700: oklch(0.55 0.13 85);
  --danger-50: oklch(0.94 0.06 27);
  --danger-500: oklch(0.62 0.20 27);
  --danger-700: oklch(0.48 0.18 27);

  /* Navegación */
  --nav-bg: oklch(0.975 0.012 90);
  --nav-fg: oklch(0.42 0.018 260);
  --nav-section: oklch(0.62 0.015 260);
  --nav-border: oklch(0.88 0.012 90);
  --nav-hover: oklch(0.22 0.02 260 / 0.05);
  --nav-active-bg: oklch(0.22 0.02 260);
  --nav-active-fg: oklch(0.975 0.012 90);

  /* ── Tipografía: LA MARCA SON LOS TRES PRODUCTOS ──
     Jaime (2026-09-29): «no me gustan tanto las letras, siendo que no se están
     ajustando a la marca del producto». Kyodata y KyoBooks usan Fraunces +
     Inter; KyoFit era la única de las tres con Big Shoulders Display, una
     condensada de cartel. Elegido por él: Fraunces, como las otras dos.

     Fraunces YA ESTUVO acá y se quitó, con este argumento: «es un serif de
     formas irregulares y ópticas, y estaba mostrando los NÚMEROS de
     entrenamiento —carga, vatios, kilos— con letra de revista». El argumento era
     bueno y sigue en pie, así que la vuelta NO es la de antes: Fraunces se queda
     ENCERRADA en los titulares, y todos los números pasan por `--font-num`, que
     es Inter con cifras tabulares. Un número no se escribe nunca con la display.

     `--font-mono` apuntaba a JetBrains Mono, que NUNCA se cargó: base.html solo
     pedía Big Shoulders e Inter, así que todo lo mono caía en la fuente del
     sistema, otra familia en cada teléfono. Esa era la otra mitad de «esto no
     combina». Ahora la pila solo nombra fuentes que el sistema sí tiene. */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  /* Los números viven acá y NUNCA en la display: precisión, no personalidad. */
  --font-num: 'Inter', ui-sans-serif, system-ui, sans-serif;


  /* ── ESCALA TIPOGRÁFICA ──
     Antes había 37 tamaños de letra distintos repartidos entre el CSS y 311
     `style=` sueltos en las plantillas. Ese es el motivo real de que la app se
     viera desordenada: no era el color ni la fuente, era que cada página se
     inventaba su propio tamaño y ninguno coincidía con el de al lado. El ojo no
     lee «0.87 vs 0.88 rem», lee «esto está mal alineado».

     Siete pasos, y todos caen en píxel entero con raíz de 16 px: un tamaño
     fraccionario se redondea distinto en cada navegador y por eso dos textos
     que deberían ser iguales se ven distintos.

     REGLA: en la app no se escribe `font-size` con un número. Se usa un paso. */
  --t-micro: 0.75rem;    /* 12px — sellos, pies de gráfica */
  --t-xs:    0.8125rem;  /* 13px — apoyo, metadatos */
  --t-sm:    0.875rem;   /* 14px — texto secundario, tablas */
  --t-base:  0.9375rem;  /* 15px — cuerpo */
  --t-md:    1.0625rem;  /* 17px — h2 */
  --t-lg:    1.25rem;    /* 20px — cifras destacadas */
  --t-xl:    1.5rem;     /* 24px — cifras de portada */

  /* ── ESCALA DE ESPACIADO ──
     Mismo problema: márgenes de .15, .2, .25, .3, .35, .4, .45… Rejilla de 4 px.
     Que dos bloques disten 6 px u 8 px no se nota por separado; que uno diste 6
     y el otro 7 sí se nota, como suciedad. */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;

  /* Radios y sombras */
  --radius: 0.75rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-card: var(--radius);
  --radius-btn: var(--radius-md);
  --shadow-sm: 0 1px 2px oklch(0.22 0.02 260 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.22 0.02 260 / 0.08);
  --shadow-lg: 0 8px 24px oklch(0.22 0.02 260 / 0.12);

  /* El degradado del login es el mismo en los dos temas: lleva texto crema
     encima, así que tiene que ser oscuro sí o sí. Si usara --brand-700, que en
     modo oscuro se aclara para que los enlaces se lean, el panel quedaría
     fosforescente. */
  --login-a: oklch(0.30 0.20 264);
  --login-b: oklch(0.44 0.22 264);

  /* ── Deportes ──
     El color sigue a la ENTIDAD (mismo deporte = mismo color en toda la app) y
     los 8 del núcleo están validados como paleta categórica de gráficas
     (scripts/validate_palette.js del skill de dataviz: banda de luminosidad,
     piso de croma, separación CVD y piso de visión normal — PASS en claro y
     oscuro; revalidado con los 8 el 2026-08-15). El orden de apilado validado
     vive en graficas.ORDEN y NO es decorativo: la separación se comprueba entre
     pares ADYACENTES del apilado. La estática comparte el tono de la bici de
     ruta a propósito —son la misma familia— y se distingue por luminosidad, que
     es lo único que sobrevive a los tres tipos de daltonismo. Un tono nuevo
     habría chocado con la natación en protan/deutan (se probó: ΔE 2.8). */
  --FUERZA:    oklch(0.58 0.17 50);    /* naranja quemado */
  --MUAY_THAI: oklch(0.44 0.20 20);    /* rojo profundo */
  --NATACION:  oklch(0.50 0.13 235);   /* azul agua */
  --BICI:      oklch(0.57 0.13 150);   /* verde */
  --BICI_INDOOR: oklch(0.73 0.10 150); /* mismo verde, escalón claro */
  --CORRER:    oklch(0.68 0.13 85);    /* ámbar claro */
  --CARDIO:    oklch(0.47 0.19 300);   /* violeta oscuro */
  --CAMINAR:   oklch(0.64 0.12 70);    /* caramelo */
  --OTRO:      oklch(0.54 0.12 260);   /* azul pizarra */
  --MOVILIDAD: oklch(0.55 0.04 250);   /* gris azulado (no entra en gráficas) */
  --FUTBOL:     oklch(0.50 0.14 160);  /* verde cancha */
  --BALONCESTO: oklch(0.62 0.15 65);   /* naranja balón */
  --TENIS:      oklch(0.62 0.15 110);  /* verde-amarillo pelota */
  --PADEL:      oklch(0.55 0.11 195);  /* teal */
  --VOLEIBOL:   oklch(0.52 0.14 275);  /* índigo */
  --ESCALADA:   oklch(0.47 0.09 55);   /* roca */
  --SENDERISMO: oklch(0.44 0.09 150);  /* bosque */
  --REMO:       oklch(0.48 0.10 250);  /* agua profunda */
  --PATINAJE:   oklch(0.58 0.16 340);  /* magenta */
}

/* ── Tema oscuro ── */
.dark {
  color-scheme: dark;

  --background: oklch(0.18 0.015 260);
  --foreground: oklch(0.96 0.005 90);
  --ink: oklch(0.11 0.015 260);   /* los bloques de comando se despegan del fondo */
  --primary: oklch(0.6 0.22 264);

  --brand-50:  oklch(0.6 0.22 264 / 0.16);
  --brand-100: oklch(0.6 0.22 264 / 0.28);
  --brand-700: oklch(0.72 0.16 264);
  --brand-900: oklch(0.60 0.22 264);
  --brand-fg:  oklch(0.98 0 0);

  --accent-50: oklch(0.55 0.12 195 / 0.18);
  --accent-500: oklch(0.70 0.11 195);
  --accent-600: oklch(0.62 0.11 195);

  --surface-0: oklch(0.18 0.015 260);
  --surface-1: oklch(0.22 0.02 260);
  --surface-2: oklch(0.26 0.02 260);

  --text-1: oklch(0.96 0.005 90);
  --text-2: oklch(0.78 0.012 260);
  --text-3: oklch(0.58 0.015 260);

  --border: oklch(1 0 0 / 0.08);
  --border-strong: oklch(1 0 0 / 0.16);
  --hover: oklch(1 0 0 / 0.04);
  --chip-bg: oklch(1 0 0 / 0.06);

  --ok-50: oklch(0.62 0.16 150 / 0.14);
  --ok-500: oklch(0.72 0.16 150);
  --ok-700: oklch(0.80 0.14 150);
  --warn-50: oklch(0.74 0.16 85 / 0.14);
  --warn-500: oklch(0.82 0.15 85);
  --warn-700: oklch(0.88 0.13 85);
  --danger-50: oklch(0.62 0.20 27 / 0.14);
  --danger-500: oklch(0.70 0.19 27);
  --danger-700: oklch(0.80 0.16 27);

  --nav-bg: oklch(0.14 0.015 260);
  --nav-fg: oklch(0.78 0.012 260);
  --nav-section: oklch(0.58 0.015 260);
  --nav-border: oklch(1 0 0 / 0.06);
  --nav-hover: oklch(1 0 0 / 0.04);
  --nav-active-bg: oklch(1 0 0 / 0.12);
  --nav-active-fg: oklch(0.96 0.005 90);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);

  /* Deportes en oscuro: pasos propios validados contra la superficie oscura
     (no un flip automático del claro). */
  --FUERZA:    oklch(0.64 0.15 55);
  --MUAY_THAI: oklch(0.52 0.19 22);
  --NATACION:  oklch(0.59 0.13 235);
  --BICI:      oklch(0.66 0.14 150);
  /* En oscuro va al otro lado: la banda de luminosidad del tema oscuro tiene
     techo en 0.67 y la bici de ruta ya está en 0.66, así que la estática baja
     en vez de subir. Cada tema se elige contra su fondo, no se voltea. */
  --BICI_INDOOR: oklch(0.51 0.12 150);
  --CORRER:    oklch(0.66 0.13 88);
  --CARDIO:    oklch(0.56 0.17 300);
  --CAMINAR:   oklch(0.65 0.11 70);
  --OTRO:      oklch(0.58 0.12 260);
  --MOVILIDAD: oklch(0.72 0.04 250);
  --FUTBOL:     oklch(0.70 0.14 160);
  --BALONCESTO: oklch(0.75 0.14 65);
  --TENIS:      oklch(0.78 0.15 110);
  --PADEL:      oklch(0.72 0.11 195);
  --VOLEIBOL:   oklch(0.70 0.13 275);
  --ESCALADA:   oklch(0.68 0.09 55);
  --SENDERISMO: oklch(0.68 0.10 150);
  --REMO:       oklch(0.68 0.10 250);
  --PATINAJE:   oklch(0.72 0.15 340);
}

/* ── Alias del CSS viejo ──
   Las plantillas ya escritas usan var(--tenue), var(--acento)… Se mantienen
   como alias en vez de tocar seis archivos: un rename masivo solo por estética
   es la clase de cambio que rompe algo a las 11 de la noche. */
:root, .dark {
  --fondo: var(--surface-0);
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --borde: var(--border);
  --texto: var(--text-1);
  --tenue: var(--text-3);
  --acento: var(--primary);
  --ok: var(--ok-700);
  --alerta: var(--warn-700);
  --error: var(--danger-700);
}

/* ═══ Base ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; }

body {
  font-family: var(--font-body);
  /* Era 14.5px. Medio píxel: el navegador lo redondea donde quiere y el texto
     que hereda del body no coincidía nunca con el que sí traía tamaño propio.
     Ahora el cuerpo es el paso base de la escala, como todo lo demás. */
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--text-1);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La display SOLO en los titulares grandes: condensada y pesada, funciona a
   tamaño grande y se vuelve ilegible a tamaño de tarjeta. */
h1 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: 0.005em; text-transform: uppercase;
  /* Una condensada y un serif no piden lo mismo. Big Shoulders necesitaba 800
     y espaciado POSITIVO para no verse apretada; Fraunces con esos valores se ve
     hinchada y suelta. Un serif de titular pide peso 600, espaciado apenas por
     debajo de cero, y `optical-sizing` para que a 28 px engorde los remates y a
     17 px los adelgace. El interlineado sube a 1,08: los serif tienen
     ascendentes y descendentes más largos y a 1,02 se tocaban. */
  font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.08;
  font-weight: 600; letter-spacing: -.015em; font-optical-sizing: auto;
  margin-bottom: var(--s-2); color: var(--text-1);
}

/* De h2 hacia abajo manda Inter: la jerarquía la hacen peso y tamaño. */
h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-1);
}
h2 { font-size: var(--t-md); margin-bottom: var(--s-4); }
h3 { font-size: var(--t-base); }

/* CIFRAS TABULARES en todo lo que sea un número. Sin esto, cada columna de la
   app baila un píxel al cambiar de valor, y eso solo se nota como «se ve mal». */
table, .dato, .tira-num, .chip, .rejilla, .hidra-total, .pieza-cab,
input[type="number"], .hero-datos, .rs-min, .seg {
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand-700); }
code { font-family: var(--font-mono); font-size: .86em; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }

.sub { color: var(--text-2); margin-bottom: var(--s-5); font-size: var(--t-base); }
.tenue { color: var(--text-3); }

/* ═══ Estructura: riel + marco ═══════════════════════════════════════════ */

.app { display: flex; min-height: 100vh; }

.riel {
  width: 64px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  position: sticky; top: 0; height: 100vh;
}
.riel-grupo { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); }

.marca-tile {
  width: 40px; height: 40px; margin-bottom: var(--s-2);
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--brand-900); color: var(--brand-fg);
  /* Tenía DOS `letter-spacing` en la misma regla (.02em y -.03em): ganaba el
     último y el primero era ruido heredado de la condensada. Uno solo. */
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700;
  letter-spacing: -.02em; text-decoration: none;
}

/* Ojo: estos estilos van por clase y NO como `.riel a`. Un selector de
   descendiente gana en especificidad a `.marca-tile` y a `.avatar`, que también
   son hijos del riel, y les borraba el fondo y el tamaño. */
.riel-item, .riel-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-md);
  color: var(--nav-section);
  transition: background .15s, color .15s;
}
.riel-item:hover, .riel-btn:hover { background: var(--nav-hover); color: var(--text-1); }
.riel-item.activo { background: var(--nav-active-bg); color: var(--nav-active-fg); }
.riel-btn.salir:hover { color: var(--danger-500); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-500); color: #fff;
  font-size: var(--t-xs); font-weight: 600; text-decoration: none;
}
.avatar.activo { box-shadow: 0 0 0 2px var(--nav-bg), 0 0 0 4px var(--accent-500); }

.marco { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 56px; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0 var(--s-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.miga { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--text-3); }
.miga b { font-weight: 500; color: var(--text-2); }
.topbar-acciones { display: flex; align-items: center; gap: var(--s-2); }
.icono-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-2);
  border-radius: var(--radius-md); cursor: pointer;
}
.icono-btn:hover { background: var(--surface-2); }

.lienzo { flex: 1; }
.contenedor { width: min(1080px, 100% - 2.5rem); margin-inline: auto; padding: var(--s-5) 0 var(--s-7); }

.pie { color: var(--text-3); font-size: var(--t-xs); border-top: 1px solid var(--border); padding: var(--s-4) 0; }

/* ═══ Bloques ════════════════════════════════════════════════════════════ */

.tarjeta {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.tarjeta > h2 { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.rejilla { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.dato {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--s-4) var(--s-4);
}
.dato .n {
  font-family: var(--font-num);
  /* Inter necesita más peso que un serif para tener la misma presencia a este
     tamaño: a 400 el número se veía endeble. */
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dato .e {
  color: var(--text-3); font-size: var(--t-micro); margin-top: var(--s-1);
  text-transform: uppercase; letter-spacing: .08em;
}

/* ═══ Avisos ═════════════════════════════════════════════════════════════ */

.aviso {
  border-radius: var(--radius-card); padding: var(--s-4) var(--s-4); margin-bottom: var(--s-4);
  border: 1px solid; font-size: var(--t-base);
}
.aviso h3 { margin-bottom: var(--s-2); font-size: var(--t-md); }
.aviso p + p { margin-top: var(--s-2); }
.aviso.info  { background: var(--brand-50);  border-color: var(--brand-100); }
.aviso.ok    { background: var(--ok-50);     border-color: var(--ok-500); }
.aviso.warn  { background: var(--warn-50);   border-color: var(--warn-500); }
.aviso.error { background: var(--danger-50); border-color: var(--danger-500); }

pre.cmd {
  background: var(--ink); color: oklch(0.93 0.02 90);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--t-xs); margin-top: var(--s-2);
}

.progreso { height: 6px; background: var(--chip-bg); border-radius: 99px; overflow: hidden; margin: var(--s-2) 0; }
.progreso i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }

/* ═══ Tablas ═════════════════════════════════════════════════════════════ */

.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-base); min-width: 420px; }
th {
  text-align: left; color: var(--text-3); font-weight: 500; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .08em;
  padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--border);
}
td { padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); }
.punto { width: 9px; height: 9px; border-radius: 3px; background: var(--OTRO); flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--chip-bg); color: var(--text-2);
  border-radius: 99px; padding: var(--s-1) var(--s-2); font-size: var(--t-micro);
}

.barras { display: flex; gap: 2px; height: 20px; border-radius: 4px; overflow: hidden; min-width: 120px; }
.barras i { display: block; }

/* ═══ Formularios ════════════════════════════════════════════════════════ */

/* ── AJUSTES: CADA SECCIÓN ES UNA TARJETA ──
   Jaime (2026-10-05): «no sé qué estás haciendo en ajustes, que no solo se ve
   feo, sino que también se ve como malucongo cuando se llena, porque pareciera
   estático».

   El perfil son 396 líneas con 23 campos en SEIS secciones separadas solo por
   una línea de un píxel. Eso es un muro de inputs: nada agrupa, nada pesa más
   que lo de al lado, y al llenarse se vuelve una columna de texto gris — de ahí
   el «parece estático». El resto de la app usa tarjetas; ajustes era la única
   parte que no. Ahora cada sección es una tarjeta de verdad, con su título
   arriba y su propio aire. */
.seccion { padding: var(--s-5); margin-top: var(--s-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-card); }
.seccion:first-of-type { margin-top: 0; }
.seccion > h2 { margin-bottom: var(--s-2); }
.seccion > h2 + .ayuda, .seccion > h2 + p { margin-top: 0; }

/* UN CAMPO LLENO SE VE LLENO. Vacío y lleno se veían igual, así que la página no
   daba señal de que hubiera algo dentro: el borde se queda tenue cuando está
   vacío y se marca cuando tiene valor. Es la diferencia entre un formulario y
   una ficha. */
input[type=text]:placeholder-shown, input[type=number]:placeholder-shown,
textarea:placeholder-shown { border-color: var(--border); }
input[type=text]:not(:placeholder-shown), input[type=number]:not(:placeholder-shown),
input[type=date], input[type=time], select, textarea:not(:placeholder-shown) {
  border-color: var(--border-strong); background: var(--surface-0);
}

/* Y el botón de guardar deja de estar a 400 líneas de scroll: se queda pegado
   abajo mientras se edita. Un formulario largo cuyo único botón vive al final se
   siente muerto porque no hay nada que responda hasta llegar allá. */
.acciones-fijas { position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: color-mix(in oklch, var(--surface-0) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius-card); }
.acciones-fijas > .nota { margin-left: auto; }
/* ── TEXTO DE APOYO ──
   `.ayuda` se usa 80 veces en las plantillas y estaba definida SOLO como
   `.seccion > p.ayuda`: fuera de una `.seccion`, o si no era un `<p>` hijo
   directo, la clase no hacía NADA y el texto salía como cuerpo normal, del
   mismo tamaño y color que lo que estaba explicando. Eso es la causa de fondo
   de lo que reportó Jaime (2026-09-29): cada plantilla se inventó su propio
   `style="color:var(--text-3);font-size:var(--t-xs)"` para compensar, con dos
   tamaños distintos para el mismo papel, y de ahí sale la sensación de que
   «todo está a diferentes tamaños».

   Dos niveles y no más:
     .ayuda — explica algo (14 px, text-2). Es el de las 80.
     .nota  — dato al margen: unidades, fechas, «de 12 posibles» (13 px, text-3).
   El `-.6rem` de antes tampoco estaba en la rejilla de 4 px, que es justo lo
   que el resto del archivo prohíbe. */
.ayuda { color: var(--text-2); font-size: var(--t-sm); line-height: 1.5; }
.nota { color: var(--text-3); font-size: var(--t-xs); line-height: 1.45; }
/* Debajo de un título de sección el apoyo se pega al título, no al bloque. */
.seccion > p.ayuda { margin: calc(var(--s-4) * -1) 0 var(--s-4); }

/* ── FORMULARIOS ──
   Jaime (2026-09-29): «eso pasa con todos los lugares donde hay que colocar
   información». `auto-fit` COLAPSA las pistas vacías, así que el ancho de un
   campo dependía de CUÁNTOS campos tuviera el formulario: tres campos se
   repartían todo el ancho (256 px cada uno) y cinco campos caían a 188 px. En
   /cuerpo eso se ve de golpe: «Fecha / Cintura / Cuello» anchos, y al abrir «Más
   medidas» los cinco de adentro estrechos, en la misma tarjeta.

   `auto-fill` mantiene las pistas vacías: el ancho depende SOLO del espacio
   disponible, nunca del número de campos. Un campo mide igual en toda la app, y
   un grupo anidado calza con el de afuera. Es una palabra y es la causa real. */
.campos { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* La etiqueta de un campo y la de una casilla son el mismo papel y estaban a
   dos tamaños (13 y 14 px), una al lado de la otra en la misma fila. */
label.campo { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-sm); font-weight: 500; color: var(--text-2); }
label.campo .req { color: var(--primary); }
/* El apoyo de un campo usa el mismo tamaño que `.nota` en el resto de la app.
   Antes era --t-micro (12 px), un cuarto tamaño solo para los formularios. */
label.campo small { color: var(--text-3); font-size: var(--t-xs); font-weight: 400; line-height: 1.45; }
/* Una casilla dentro de la rejilla de campos: en fila, con su texto al lado,
   a la altura de los demás campos. Sin esto el navegador la estiraba en un
   cuadro vacío del ancho de la columna. */
label.campo.campo-check { flex-direction: row; flex-wrap: wrap; align-items: center; align-self: end;
  gap: var(--s-2); min-height: 44px; color: var(--text-1); }
label.campo.campo-check input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--primary); }
label.campo.campo-check small { flex-basis: 100%; }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: var(--s-2) var(--s-3);
  font: inherit; font-size: var(--t-base);
  color: var(--text-1); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--brand-50);
}
input:disabled, select:disabled { background: var(--chip-bg); color: var(--text-3); cursor: not-allowed; }
textarea { resize: vertical; min-height: 68px; }

.opciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opcion {
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: 99px; padding: var(--s-2) var(--s-3); font-size: var(--t-sm); color: var(--text-1);
}
.opcion:hover { background: var(--hover); }
.opcion input { accent-color: var(--primary); margin: 0; }
.opcion:has(input:checked) { border-color: var(--primary); background: var(--brand-50); color: var(--brand-900); }

/* Objetivo: cada disciplina (y cada día) como ficha, en vez de una tabla de
   15 × 7 casillas que en el celular se salía de la pantalla. */
.disc-lista { display: flex; flex-direction: column; gap: var(--s-2); }
.disc-ficha { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); }
.disc-apagada { opacity: .6; }
.disc-apagada:focus-within, .disc-apagada:hover { opacity: 1; }
.disc-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.disc-n { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--text-3); }
.disc-n input { width: 4.2rem; min-height: 40px; text-align: center; }
.disc-otras { margin-top: var(--s-3); }
.disc-otras > summary { cursor: pointer; color: var(--text-2); font-size: var(--t-sm); }
.disc-otras .disc-lista { margin-top: var(--s-2); }

/* Variante en lista: cuando cada opción necesita explicarse (el briefing), la
   píldora de una línea no alcanza. Se apilan y el radio se alinea arriba. */
.opciones-lista { flex-direction: column; align-items: stretch; }
.opciones-lista .opcion { align-items: flex-start; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.opciones-lista .opcion input { margin-top: var(--s-1); }
.opciones-lista .opcion small { display: block; color: var(--text-3); font-size: var(--t-xs); margin-top: var(--s-1); }
.opciones-lista .opcion:has(input:checked) small { color: var(--brand-700); }

/* Vista previa del briefing: se ve como el globo de WhatsApp para que quede
   claro que ESO es lo que va a llegar, no un resumen de lo que llegaría. */
.wa-previa {
  white-space: pre-wrap; font-size: var(--t-sm); line-height: 1.5; color: var(--text-1);
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--ok-700); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-3); margin-bottom: var(--s-4); max-height: 26rem; overflow-y: auto;
}

.tarjetas-radio { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.tarjeta-radio {
  display: block; cursor: pointer; background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-card); padding: var(--s-3) var(--s-4);
}
.tarjeta-radio:has(input:checked) { border-color: var(--primary); background: var(--brand-50); }
.tarjeta-radio b { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--t-base); }
.tarjeta-radio input { accent-color: var(--primary); }
.tarjeta-radio p { margin-top: var(--s-2); color: var(--text-2); font-size: var(--t-sm); line-height: 1.45; }

.dias { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.dias label { font-size: var(--t-xs); }

.acciones {
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--s-5); border-top: 1px solid var(--border); padding-top: var(--s-4);
}

button.primario, .boton-solido {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--brand-900); color: var(--brand-fg);
  border: 0; border-radius: var(--radius-btn);
  padding: var(--s-2) var(--s-4); font: inherit; font-size: var(--t-base); font-weight: 500;
  cursor: pointer; text-decoration: none; transition: filter .15s;
}
button.primario:hover, .boton-solido:hover { filter: brightness(1.15); }
button.primario:disabled { opacity: .5; cursor: not-allowed; }

a.boton, button.boton {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: var(--brand-700); background: transparent; border: 0;
  font: inherit; font-size: var(--t-sm); font-weight: 500;
  text-decoration: none; cursor: pointer; padding: 0;
}
a.boton:hover, button.boton:hover { text-decoration: underline; }

/* ═══ Hoy: tira de semana, anillos, RPE ══════════════════════════════════ */

.tira-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-2); }
.tira-dia {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-1); border-radius: var(--radius-md);
}
.tira-dia.hoy { background: var(--brand-50); }
.tira-nombre { font-size: var(--t-micro); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.tira-punto {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700;
  border: 2px solid var(--border-strong); color: var(--text-3);
}
.tira-punto.cumplida { background: var(--ok-500); border-color: var(--ok-500); color: #fff; }
.tira-punto.parcial  { background: var(--warn-500); border-color: var(--warn-500); color: #fff; }
.tira-punto.omitida  { background: var(--danger-50); border-color: var(--danger-500); color: var(--danger-700); }
.tira-punto.extra    { background: var(--brand-100); border-color: var(--brand-700); color: var(--brand-900); }
.tira-punto.pendiente { border-style: dashed; }
.tira-punto.libre    { border-color: var(--border); }

.anillos { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
.anillo-caja { flex: 0 1 130px; text-align: center; }
.anillo-datos {
  flex: 1 1 220px; display: grid; gap: var(--s-2); align-content: center;
  border-left: 1px solid var(--border); padding-left: var(--s-4); min-width: 200px;
}
.anillo-datos > div { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-sm); }
.anillo-datos b { font-family: var(--font-num); font-weight: 700; font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.anillo-datos span { color: var(--text-3); font-size: var(--t-xs); }

.rpe-form { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.rpe-chips { display: inline-flex; gap: var(--s-1); flex-wrap: wrap; }
.rpe-chip { cursor: pointer; }
.rpe-chip input { position: absolute; opacity: 0; }
.rpe-chip span {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--text-2);
  transition: background .1s, color .1s;
}
.rpe-chip:hover span { background: var(--hover); }
.rpe-chip input:checked + span { background: var(--brand-900); color: var(--brand-fg); border-color: var(--brand-900); }
.rpe-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ═══ Registro rápido y hoja «más» ═══════════════════════════════════════ */

.rapidas { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rapida {
  border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  padding: var(--s-3) var(--s-4); background: var(--surface-1);
}
.rapida > summary {
  cursor: pointer; font-weight: 500; font-size: var(--t-base); list-style: none;
  color: var(--brand-700);
}
.rapida > summary::-webkit-details-marker { display: none; }
.rapida[open] { border-color: var(--primary); }
.rapida .campos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.linea-compra { display: flex; align-items: center; gap: var(--s-2); }
.casilla {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: var(--t-lg); line-height: 1; color: var(--text-3);
}
.casilla:hover { color: var(--primary); }
tr.comprado { opacity: .5; }
tr.comprado .casilla { color: var(--ok-700); }
tr.comprado span { text-decoration: line-through; }

.barra-comido { margin-bottom: var(--s-3); }
.barra-comido span { display: block; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--text-2); }


/* ═══ Objetivo: hoja de ruta y semana tipo ═══════════════════════════════ */

/* Las fases NO son categorías intercambiables sino un progreso: por eso van en
   una rampa del mismo azul de marca, de claro a oscuro, y el taper aparte en
   ámbar porque es lo único que se lee distinto (bajar, no subir). */
.fase-base         { --fase: oklch(0.72 0.08 264); }
.fase-construccion { --fase: oklch(0.60 0.16 264); }
.fase-pico         { --fase: oklch(0.46 0.24 264); }
.fase-taper        { --fase: oklch(0.62 0.14 60); }
.fase-post         { --fase: oklch(0.65 0.03 260); }

.banda-evento {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-left: 4px solid var(--fase, var(--primary));
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--text-1);
}
.banda-evento:hover { border-color: var(--border-strong); }
.banda-cuenta {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--fase, var(--primary)); color: #fff;
  font-family: var(--font-num); font-weight: 700; font-size: var(--t-lg); font-variant-numeric: tabular-nums;
}
.banda-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.banda-cuerpo > b { font-size: var(--t-base); }
.banda-cuerpo > span { color: var(--text-3); font-size: var(--t-xs); }
.banda-flecha { color: var(--text-3); flex: none; }

.ruta { display: flex; flex-direction: column; gap: 3px; }
.ruta-semana {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--s-3); align-items: center;
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-md);
  border-left: 4px solid var(--fase, var(--border-strong));
  background: var(--surface-2); font-size: var(--t-sm);
}
.ruta-hoy { outline: 2px solid var(--primary); outline-offset: 1px; }
.ruta-fecha { color: var(--text-3); font-variant-numeric: tabular-nums; }
.ruta-fase { font-weight: 500; }
.ruta-faltan { color: var(--text-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.fase-etiqueta {
  display: inline-block; padding: 0 var(--s-2); border-radius: 5px;
  background: var(--fase); color: #fff; font-weight: 600; font-size: var(--t-xs);
}

.frecuencias { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.frec-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-1);
}
.frec-item.activa { border-color: var(--primary); background: var(--brand-50); }
.frec-nombre { flex: 1; font-size: var(--t-sm); }
.frec-item input { width: 62px; text-align: center; }

.opcion-mini { padding: var(--s-1) var(--s-2); font-size: var(--t-xs); gap: var(--s-1); }
.opcion-mini .punto { width: 7px; height: 7px; }

/* ═══ Cumplimiento del plan ══════════════════════════════════════════════ */

.estado-cumplida  { background: var(--ok-50);     color: var(--ok-700); }
.estado-movida    { background: var(--brand-50);  color: var(--brand-900); }
.estado-parcial   { background: var(--warn-50);   color: var(--warn-700); }
.estado-omitida   { background: var(--danger-50); color: var(--danger-700); }
.estado-pendiente { background: var(--chip-bg);   color: var(--text-3); }

.comparativa {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
  background: var(--surface-2); border-radius: var(--radius-md);
  font-size: var(--t-sm);
}
.comparativa span { color: var(--text-3); }
.comparativa.extra { border-left: 3px solid var(--border-strong); }

/* ═══ Feed de actividades ════════════════════════════════════════════════ */

.feed-dia { margin-bottom: var(--s-4); }
.feed-fecha {
  font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2);
  display: flex; align-items: center; gap: var(--s-2);
}
.fila-actividad {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  padding: var(--s-3) var(--s-3); margin-bottom: var(--s-2);
  text-decoration: none; color: var(--text-1);
  transition: border-color .12s;
}
.fila-actividad:hover { border-color: var(--border-strong); }
.fila-color { width: 4px; align-self: stretch; border-radius: 99px; flex: none; }
.fila-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.fila-cuerpo b { font-size: var(--t-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-cuerpo span { color: var(--text-3); font-size: var(--t-xs); }
.fila-rpe { flex: none; }
.fila-uca { flex: none; text-align: right; display: flex; flex-direction: column; }
.fila-uca b { font-family: var(--font-num); font-weight: 700; font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.fila-uca span { color: var(--text-3); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .07em; }

@media (max-width: 560px) { .fila-rpe { display: none; } }

/* ═══ Gráficas ═══════════════════════════════════════════════════════════ */

.leyenda { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.leyenda .pill { font-size: var(--t-xs); color: var(--text-2); }

.tooltip-viz {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--ink); color: oklch(0.96 0.005 90);
  font-size: var(--t-xs); padding: var(--s-2) var(--s-2); border-radius: 7px;
  box-shadow: var(--shadow-md); max-width: 260px;
}

.datos-tabla { margin-top: var(--s-3); }
.datos-tabla summary {
  cursor: pointer; color: var(--brand-700); font-size: var(--t-xs); font-weight: 500;
  list-style: none;
}
.datos-tabla summary::before { content: '▸ '; }
.datos-tabla[open] summary::before { content: '▾ '; }
.datos-tabla table { margin-top: var(--s-2); font-size: var(--t-sm); }

/* ═══ Guía de deportes ═══════════════════════════════════════════════════ */

.guia-cols { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.guia-cols p { margin-bottom: var(--s-2); font-size: var(--t-base); color: var(--text-2); }
.guia-cols p b { color: var(--text-1); }
.guia-numeros { display: grid; gap: var(--s-2); grid-template-columns: repeat(3, 1fr); align-content: start; }
.guia-numeros .dato { padding: var(--s-2) var(--s-3); }
.guia-numeros .n { font-size: var(--t-lg); }

@media (min-width: 860px) {
  .guia-cols { grid-template-columns: 1fr 260px; }
  .guia-numeros { grid-template-columns: 1fr; }
}

/* ═══ Login ══════════════════════════════════════════════════════════════ */

.login { display: grid; grid-template-columns: 1fr; min-height: 100vh; background: var(--surface-1); }
.login-form { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-6) var(--s-6); gap: var(--s-6); }
.login-marca { display: flex; align-items: center; gap: var(--s-2); }
.login-marca .marca-tile { margin: 0; width: 36px; height: 36px; }
/* Por clase y no `.login-marca span`: el propio tile es un span y ese selector
   le ganaba, pintándole el texto crema de color tinta sobre fondo azul. */
.login-marca .nombre {
  font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: -.02em; color: var(--text-1);
}
.login-caja { width: 100%; max-width: 380px; }
.login-kicker { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); margin-bottom: var(--s-2); }
.login-caja h1 { font-size: 2.25rem; line-height: 1.05; letter-spacing: -.03em; margin-bottom: var(--s-3); }
.login-caja h1 i { font-style: italic; color: var(--accent-600); }
.login-caja > p { color: var(--text-2); margin-bottom: var(--s-5); }
.login-caja form { display: flex; flex-direction: column; gap: var(--s-3); }
.login-caja .primario { width: 100%; margin-top: var(--s-2); }
.login-pie { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--text-3); }

.login-visual {
  display: none; position: relative; overflow: hidden;
  flex-direction: column; justify-content: space-between; gap: var(--s-6); padding: var(--s-7);
  background: linear-gradient(135deg, var(--login-a) 0%, var(--login-b) 100%);
  color: oklch(0.975 0.012 90);
}
.login-visual svg.deco { position: absolute; top: -5rem; right: -10rem; width: 620px; opacity: .09; color: #fff; }
.login-visual .rel { position: relative; }
.login-visual blockquote {
  font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.3;
  letter-spacing: -.02em; font-style: italic;
}
.login-visual .etiqueta { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin-bottom: var(--s-3); }
.login-stats {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
/* Cifras: `--font-num`, no la display. Es la regla de la app y esta era la
   única que la rompía. Con tabular-nums las tres columnas quedan parejas. */
.login-stats .v { font-family: var(--font-num); font-size: var(--t-xl); font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.login-stats .l { font-size: var(--t-micro); opacity: .75; margin-top: var(--s-1); }

@media (min-width: 900px) {
  .login { grid-template-columns: 1fr 1fr; }
  .login-form { padding: var(--s-6) var(--s-7); }
  .login-visual { display: flex; }
}

/* ═══ Responsive ═════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* En el celular el riel se va abajo: es donde llega el pulgar, y esta app se
     mira sobre todo en el gimnasio con una mano. */
  .app { flex-direction: column; }
  .riel {
    /* `top: auto` es obligatorio: la regla de escritorio deja `top: 0` y, con
       position:fixed, un top y un bottom a la vez estiran la barra a toda la
       pantalla. */
    order: 2; position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; padding: var(--s-2) var(--s-2);
    flex-direction: row; justify-content: space-around;
    border-right: 0; border-top: 1px solid var(--nav-border);
    background: var(--surface-1); z-index: 20;
  }
  .riel-grupo { flex-direction: row; gap: var(--s-1); flex: 1; justify-content: space-around; }
  .marca-tile { display: none; }
  /* Cada destino ocupa lo mismo y llega a 48 px de alto: son los blancos que
     más se tocan en toda la app y estaban en 40. */
  .riel-item { flex: 1; min-height: 48px; max-width: 4.5rem; }
  .avatar { min-height: 48px; }
  /* Solo caben 5 secciones + avatar: las secundarias viven en la hoja «más». */
  .riel .salir { display: none; }
  .contenedor { width: min(1080px, 100% - 1.5rem); padding-bottom: var(--s-7); }
  /* Las tarjetas pegadas al borde en pantallas chicas: cada rem de margen es
     ancho que se le quita al contenido, y acá el contenido son tablas. */
  .tarjeta { padding: var(--s-4) var(--s-3); }
  .rejilla { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s-2); }
  .acciones { gap: var(--s-2); }
  .acciones .primario, .acciones .boton { flex: 1 1 auto; justify-content: center; }
  .topbar { padding: 0 var(--s-4); }
  .tarjeta { padding: var(--s-4); }
  h1 { font-size: var(--t-xl); }
  .login-form { padding: var(--s-6) var(--s-5); }
  .login-caja h1 { font-size: 1.75rem; }
}

/* ═══ Gimnasio por grupo muscular ════════════════════════════════════════ */

.recetas { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.receta button {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3) var(--s-3); background: var(--surface-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  font: inherit; color: var(--text-1);
}
.receta button:hover { border-color: var(--primary); background: var(--brand-50); }
.receta-grupos { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.receta-para { color: var(--text-3); font-size: var(--t-xs); line-height: 1.4; }

.dia-vacio { border-style: dashed; box-shadow: none; }
.nivel-excelente { background: var(--ok-50); color: var(--ok-700); }
.nivel-buena     { background: var(--ok-50); color: var(--ok-700); }
.nivel-regular   { background: var(--warn-50); color: var(--warn-700); }
.nivel-pesada    { background: var(--danger-50); color: var(--danger-700); }

/* ═══ Sub-navegación de sección ══════════════════════════════════════════ */

.subnav {
  display: flex; gap: var(--s-2); overflow-x: auto;
  padding: var(--s-2) var(--s-4); background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; padding: var(--s-2) var(--s-3); border-radius: 99px;
  font-size: var(--t-sm); text-decoration: none;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border);
}
.subnav a:hover { background: var(--hover); }
.subnav a.activo {
  background: var(--brand-900); color: var(--brand-fg); border-color: transparent;
  font-weight: 500;
}

/* ═══ Capacidad de la semana ═════════════════════════════════════════════ */

.capacidad { display: grid; gap: var(--s-2); }
.cap-fila {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-3); align-items: center;
  padding: var(--s-2) var(--s-2); border-radius: var(--radius-md); background: var(--surface-2);
  font-size: var(--t-sm);
}
.cap-fila.corta { background: var(--danger-50); }
.cap-dias { color: var(--text-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

.mover { margin-top: var(--s-2); }
.mover label { font-size: var(--t-xs); color: var(--text-3); display: inline-flex; align-items: center; gap: var(--s-2); }
.mover select { width: auto; padding: var(--s-1) var(--s-2); font-size: var(--t-xs); }

.hice { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.hice button { padding: var(--s-2) var(--s-3); font-size: var(--t-sm); }
.hice label { font-size: var(--t-xs); color: var(--text-3); display: inline-flex; align-items: center; gap: var(--s-1); }
.hice input { width: 62px; padding: var(--s-1) var(--s-2); font-size: var(--t-xs); text-align: center; }

/* ═══ Pesas ══════════════════════════════════════════════════════════════ */

.ejercicio { padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.ejercicio:first-of-type { border-top: 0; padding-top: 0; }
.ejercicio-cab { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.ejercicio-cab b { font-size: var(--t-base); }
.series { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.serie {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: var(--surface-2); border-radius: var(--radius-md); padding: var(--s-1) var(--s-2);
}
.serie-n {
  width: 18px; height: 18px; display: grid; place-items: center; flex: none;
  border-radius: 50%; background: var(--chip-bg); color: var(--text-3);
  font-size: var(--t-micro); font-variant-numeric: tabular-nums;
}
.serie-x { color: var(--text-3); font-size: var(--t-xs); }
/* Anchos generosos: esto se escribe con el pulgar, sudando, entre series. */
.serie input { width: 58px; padding: var(--s-2) var(--s-1); text-align: center; font-size: var(--t-base); }

/* Excepciones de disponibilidad (/objetivo): la lista de lo que rompe la semana
   tipo. Filas, no píldoras — cada una lleva su frase y su botón de quitar. */
.lista-exc { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.exc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--warn-500); border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.exc b { font-weight: 600; font-size: var(--t-base); }
.exc small { display: block; color: var(--text-3); font-size: var(--t-xs); margin-top: var(--s-1); }

/* Plegables: lo que hay que poder consultar pero no leer cada vez. La guía tenía
   18 fichas de deportes cuando se practican 6, y el «por qué» de cada sesión
   convertía el plan de la semana en un artículo de 2.200 palabras. */
.plegable {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface-1); margin-bottom: var(--s-4);
}
.plegable > summary {
  cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 500;
  font-size: var(--t-base); color: var(--text-2); list-style: none;
  display: flex; align-items: center; gap: var(--s-2);
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before {
  content: '▸'; color: var(--text-3); font-size: var(--t-xs);
  transition: transform .15s ease;
}
.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable > summary:hover { background: var(--hover); border-radius: var(--radius-card); }
.plegable > *:not(summary) { padding: 0 var(--s-4); }
.plegable > .tarjeta { margin: 0 var(--s-4) var(--s-4); }

/* El desglose de cada sesión del plan, plegado. Distinto de `.plegable`: acá
   vive dentro de una tarjeta y tiene que ser discreto, no una caja más. */
.detalle-sesion { margin: var(--s-2) 0 var(--s-1); }
.detalle-sesion > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: var(--s-2); font-size: var(--t-xs); color: var(--text-3);
  padding: var(--s-1) var(--s-2); border-radius: 99px; background: var(--surface-2);
  border: 1px solid var(--border);
}
.detalle-sesion > summary::-webkit-details-marker { display: none; }
.detalle-sesion > summary::before { content: '▸'; font-size: var(--t-micro); transition: transform .15s ease; }
.detalle-sesion[open] > summary::before { transform: rotate(90deg); }
.detalle-sesion > summary:hover { background: var(--hover); color: var(--text-2); }

/* ═══ Jerarquía de la portada ════════════════════════════════════════════
   El problema no eran los colores: era que las diez tarjetas de «Hoy» pesaban
   exactamente lo mismo, así que el ojo no tenía dónde aterrizar y la respuesta
   a «¿qué hago hoy?» era la cuarta caja. Ahora una sola cosa manda. */

.hero {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 5px solid var(--acento, var(--primary));
  border-radius: var(--radius-card);
  padding: var(--s-5) var(--s-5) var(--s-4);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-md);
}
.hero-dia {
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--s-2);
}
.hero-titulo {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  line-height: 1.08; font-weight: 600; letter-spacing: -.015em;
  font-optical-sizing: auto; color: var(--text-1);
  letter-spacing: .005em; text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.hero-datos { color: var(--text-2); font-size: var(--t-base); }
.hero-otras {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: var(--t-base); color: var(--text-2);
}
.hero-otras span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-acciones { margin-top: var(--s-4); }
.hero-descanso { border-left-color: var(--border-strong); }
.hero-descanso .hero-titulo { color: var(--text-2); }

/* La tira: todo lo que antes eran cuatro tarjetas, en una línea que se lee de
   un vistazo y donde cada número es un enlace a su página. */
.tira-num {
  display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none;
  margin-bottom: var(--s-4); padding-bottom: var(--s-1);
}
.tira-num::-webkit-scrollbar { display: none; }
.tira-num a {
  flex: 1 0 auto; min-width: 5.5rem; text-align: center; text-decoration: none;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--s-2) var(--s-3);
}
.tira-num a:hover { border-color: var(--primary); background: var(--hover); }
.tira-num b {
  display: block; font-size: var(--t-lg); font-weight: 600; color: var(--text-1);
  line-height: 1.2;
}
.tira-num span {
  display: block; font-size: var(--t-micro); color: var(--text-3); margin-top: var(--s-1);
}
/* En el celular la tira se corta en la cuarta cifra sin que se vea que sigue
   (la barra de scroll está oculta). Mejor una rejilla de tres por fila: se ve
   todo de una y cada tile sigue siendo tocable. */
@media (max-width: 640px) {
  .tira-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .tira-num a { min-width: 0; padding: var(--s-2) var(--s-1); }
}

/* ═══ La semana en rejilla (/plan) ═══════════════════════════════════════
   Siete tarjetas apiladas eran una lista, no una semana. Cada día es una
   columna con barras proporcionales a la duración y del color de su deporte:
   la forma de la semana se ve sin leer una palabra. */
.rejilla-semana {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.5rem, 1fr);
  gap: var(--s-2); margin-bottom: var(--s-5);
  overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s-1);
}
.rejilla-semana::-webkit-scrollbar { display: none; }
.rs-dia {
  display: flex; flex-direction: column; gap: var(--s-2); text-decoration: none;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--s-2) var(--s-2);
  min-height: 8.5rem;
}
.rs-dia:hover { border-color: var(--primary); background: var(--hover); }
.rs-hoy { border-color: var(--primary); border-width: 2px; box-shadow: var(--shadow-sm); }
.rs-vacio { background: var(--surface-2); border-style: dashed; }
.rs-nombre {
  font-size: var(--t-micro); letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.rs-hoy .rs-nombre { color: var(--brand-700); }
/* Las barras se alinean abajo para que la altura se lea como cantidad. */
.rs-barras { display: flex; align-items: flex-end; gap: 3px; height: 3.2rem; }
.rs-barra { flex: 1; border-radius: 3px 3px 0 0; min-height: 12px; }
.rs-lista { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-micro); color: var(--text-2); }
.rs-lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-min { margin-top: auto; font-size: var(--t-micro); color: var(--text-3); font-weight: 600; }

/* ═══ Material: desgaste ═════════════════════════════════════════════════ */
.pieza { padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.pieza:first-of-type { border-top: 0; padding-top: 0; }
.pieza-cab { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.pieza-barra {
  height: 8px; background: var(--surface-2); border-radius: 99px;
  overflow: hidden; border: 1px solid var(--border);
}
.pieza-barra i { display: block; height: 100%; border-radius: 99px; transition: width .3s ease; }
.pieza-pie {
  display: flex; align-items: center; gap: var(--s-4); justify-content: space-between;
  margin-top: var(--s-2); font-size: var(--t-xs); color: var(--text-3);
}

/* Aviso flotante de lo que quedó en cola sin señal. Va fijo abajo para que se
   vea entrenando, y encima de la barra de navegación del celular. */
.cola-aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 5.5rem; z-index: 60; max-width: calc(100% - 2rem);
  background: var(--warn-700); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: 99px;
  font-size: var(--t-sm); font-weight: 500; box-shadow: var(--shadow-lg);
}
@media (min-width: 761px) { .cola-aviso { bottom: 1.5rem; } }

/* Alimentos del plan con sus dos acciones a la vista: fijarlo o vetarlo. Antes
   el veto vivía en la última columna de la tabla de compras, que en el celular
   se sale de pantalla — o sea que no existía. */
.ali { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
.ali-fijo { font-weight: 600; }
.ali-fijo::before { content: '📌'; font-size: var(--t-micro); }
.ali-btn {
  border: 0; background: none; cursor: pointer; padding: 0 var(--s-1);
  font-size: var(--t-xs); opacity: .25; line-height: 1;
}
.ali-btn:hover { opacity: 1; }
.ali:hover .ali-btn { opacity: .6; }

/* El bloque de core dentro de una sesión de fuerza. Sin esto era un ítem más
   de una lista de ocho y no se encontraba. */
.bloque-core {
  margin: var(--s-3) 0 var(--s-1); padding: var(--s-2) var(--s-3);
  background: var(--accent-50); border-left: 3px solid var(--accent-500);
  border-radius: var(--radius-md); font-size: var(--t-sm);
}
.bloque-core b { display: block; margin-bottom: var(--s-1); }
.bloque-core span { color: var(--text-2); }

/* La tarjeta de compartir va arriba y se nota: es lo primero que se hace el
   domingo, y el plan que no sale de la app no lo ejecuta quien cocina. */
.compartir { border-left: 3px solid var(--accent-500); }

/* ═══ Mis alimentos ══════════════════════════════════════════════════════
   La primera versión eran 44 filas de cuadraditos grises idénticos: no se
   distinguía el estado sin leer los botones, y 44 iguales seguidos son un muro.
   Ahora la FILA lleva el color del estado, y las tres opciones son un control
   segmentado —una decisión de tres— en vez de tres botones sueltos. */
.alimentos-lista { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 900px) { .alimentos-lista { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); } }

.ali-fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-2); border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--surface-2);
  cursor: default; transition: background .12s ease, border-color .12s ease;
}
.ali-fila:hover { border-color: var(--border-strong); }
.ali-fila.e-favorito { background: var(--warn-50); border-color: var(--warn-500); }
.ali-fila.e-vetado   { background: transparent; border-color: var(--border); opacity: .55; }
.ali-fila.e-vetado .ali-nombre b { text-decoration: line-through; }

.ali-nombre { display: flex; flex-direction: column; min-width: 0; gap: var(--s-1); }
.ali-nombre b { font-weight: 600; font-size: var(--t-base); }
.ali-nombre small { color: var(--text-3); font-size: var(--t-micro); }

/* Control segmentado: un solo bloque con tres celdas pegadas. */
.seg {
  display: inline-flex; flex: none; border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border-strong); background: var(--surface-1);
}
.seg-op { display: block; }
.seg-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-op > span {
  display: grid; place-items: center; width: 2.4rem; height: 2.1rem;
  font-size: var(--t-base); opacity: .3; cursor: pointer; user-select: none;
  border-left: 1px solid var(--border);
}
.seg-op:first-child > span { border-left: 0; }
.seg-op > span:hover { background: var(--hover); opacity: .7; }
.seg-op input:checked + span { opacity: 1; background: var(--brand-900); }
.seg-op input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; }

.leyenda-seg { margin-left: auto; font-size: var(--t-micro); color: var(--text-3); font-weight: 400; }

/* ═══ Objetivos táctiles ═════════════════════════════════════════════════
   Medido: casi nada llegaba a 44 px. Los botones quedaban en ~35, el control
   segmentado en 34 y los iconos de acción en 12. Esta app se usa con el pulgar,
   de pie, a veces sudado — y un objetivo de 12 px no se acierta.
   44 px es el mínimo de las guías de Apple y Google, y no es una sugerencia
   estética: por debajo de eso la gente falla el toque y culpa a la app. */
button, .boton, .primario, a.boton, input[type="submit"] {
  min-height: 44px;
}
.seg-op > span { height: 44px; width: 2.9rem; }
.ali-btn { min-width: 44px; min-height: 44px; font-size: var(--t-md); opacity: .5; }
.riel-item, .riel-btn, .avatar, .marca-tile { min-height: 44px; min-width: 44px; }
.casilla { min-width: 44px; min-height: 44px; }
.opcion { min-height: 44px; }
.rpe-chip span { min-width: 42px; min-height: 42px; }

/* En el celular los campos crecen: además, por debajo de 16 px de texto iOS
   hace zoom solo al enfocar un input y descoloca la pantalla entera. */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .campo input, .campo select, .campo textarea { padding: var(--s-3) var(--s-3); }
  .seg-op > span { width: 3.2rem; }
}

/* ═══ Barra de guardar pegada ════════════════════════════════════════════
   En un formulario largo, el botón de guardar al final obliga a recorrer toda
   la página para confirmar un cambio de una línea. Se queda abajo, visible. */
.guardar-fijo {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  background: var(--surface-1); border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-4); margin: var(--s-4) -1rem 0;
  box-shadow: 0 -4px 12px oklch(0.22 0.02 260 / 0.06);
}
.guardar-fijo .primario { flex: 1 1 auto; justify-content: center; }
@media (max-width: 760px) {
  /* Encima de la barra de navegación inferior, no debajo. */
  .guardar-fijo { bottom: 4.5rem; border-radius: var(--radius-card); margin-inline: 0;
                  border: 1px solid var(--border-strong); }
}

/* ═══ Acciones de una sesión del plan ════════════════════════════════════
   Eran dos <select> sueltos por sesión: 28 controles en la página, compitiendo
   con el contenido. El plan tiene que LEERSE como un plan; las acciones
   aparecen cuando se buscan. */
.acciones-sesion { margin-top: var(--s-2); }
.acciones-sesion > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3); border-radius: 99px;
  font-size: var(--t-sm); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
}
.acciones-sesion > summary::-webkit-details-marker { display: none; }
.acciones-sesion > summary::before { content: '⚙'; font-size: var(--t-base); }
.acciones-sesion > summary:hover { background: var(--hover); color: var(--text-1); }
.acciones-cuerpo {
  display: grid; gap: var(--s-3); margin-top: var(--s-3); padding: var(--s-3);
  background: var(--surface-2); border-radius: var(--radius-md);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: end;
}

/* Secciones de configuración plegadas: el resumen dice cómo estás configurado
   sin abrir nada, que es a lo que uno viene casi siempre. */
.seccion-config > summary { padding: var(--s-3) var(--s-4); min-height: 44px; }
.seccion-config > summary b { font-size: var(--t-base); color: var(--text-1); }
.seccion-config > summary span {
  display: block; font-size: var(--t-xs); color: var(--text-3);
  font-weight: 400; margin-top: var(--s-1);
}
.seccion-config > summary { display: flex; align-items: flex-start; }
.seccion-config > summary::before { margin-top: var(--s-1); }
.seccion-config > .tarjeta { box-shadow: none; border: 0; }

/* ═══ Recetas ════════════════════════════════════════════════════════════════
   Ojo con el nombre: `.receta` ya existe arriba y es OTRA cosa — las
   combinaciones de grupos musculares del gimnasio. Los platos van por
   `.plato` para que tocar uno no rompa el otro.

   Toda la ficha es el botón, no un enlace de 12 px dentro de ella. Esa fue
   justo la queja: «los botones, sus espacios, dónde están ubicados». Un plato
   es una tarjeta entera de al menos 44 px de alto y se toca donde sea. */

.platos { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plato {
  display: flex; flex-direction: column; gap: var(--s-2); width: 100%;
  min-height: 44px; padding: var(--s-3) var(--s-3); text-align: left;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-card); font: inherit; color: var(--text-1);
}
button.plato { cursor: pointer; }
button.plato:hover { border-color: var(--primary); background: var(--brand-50); }
button.plato:active { transform: scale(.995); }
.plato-elegido { border-color: var(--primary); border-width: 2px; background: var(--brand-50); }
.plato > b { font-size: var(--t-base); font-weight: 600; line-height: 1.3; }
.plato-macros { font-size: var(--t-xs); color: var(--text-2); }
.plato-macros b { color: var(--text-1); }
.plato-ing { font-size: var(--t-xs); color: var(--text-3); line-height: 1.45; }
.plato-pie {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-1); font-size: var(--t-xs); color: var(--text-3);
}
.no-gusta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
/* El total del plan del día: la cuenta que Jaime tuvo que hacer a mano. */
.total-dia { border-top: 3px solid var(--ok-500); }
.total-dia.total-fuera { border-top-color: var(--danger-500, #dc2626); }
.total-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.total-cab b { font-size: var(--t-md); }
.total-alerta { color: #fff; background: var(--danger-500, #dc2626); }
.total-filas { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.total-fila { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--radius-md); }
.total-fila span { font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.total-fila b { font-family: var(--font-num); font-size: var(--t-lg); font-variant-numeric: tabular-nums; color: var(--text-1); }
.total-fila small { font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--text-3); }
.total-fila.total-ok { box-shadow: inset 3px 0 0 var(--ok-500); }
.total-fila.total-alto, .total-fila.total-bajo { box-shadow: inset 3px 0 0 var(--danger-500, #dc2626); background: color-mix(in srgb, var(--danger-500, #dc2626) 8%, var(--surface-2)); }
.total-fila.total-info { box-shadow: inset 3px 0 0 var(--border-strong); }
.total-aviso { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--text-1); }
.total-nutri td { font-weight: 700; border-top: 2px solid var(--border-strong); }
.total-nutri .total-alto, .total-nutri .total-bajo { color: var(--danger-500, #dc2626); }
.fijos-lista { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0; padding: 0; list-style: none; }
.fijos-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); background: var(--surface-2); border-radius: var(--radius-md); }
.fijo-nuevo { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); align-items: end; margin-top: var(--s-3); }
.fijo-nuevo .acciones { margin: 0; }
@media (max-width: 560px) { .fijo-nuevo { grid-template-columns: 1fr; } }
.tope-recetas .campo { max-width: 32rem; }
.tope-linea { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-2); }
.tope-linea input { width: 5rem; }
.envase { font-weight: 400; white-space: nowrap; color: var(--text-3); }
.entrenar-sesiones { margin: var(--s-2) 0 var(--s-3); }
.sup-lista { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); padding: 0; list-style: none; }
.sup-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); background: var(--surface-2); border-radius: var(--radius-md); }
.sup-lista li > div { flex: 1 1 16rem; min-width: 0; }
.sup-lista small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--text-3); }

/* «cambiar» dentro del plan: pequeño, pero con área de toque real por padding. */
.cambiar {
  display: inline-block; margin-left: var(--s-2); padding: var(--s-1) var(--s-2);
  font-size: var(--t-xs); text-decoration: none; white-space: nowrap;
  color: var(--primary); background: var(--brand-50); border-radius: 99px;
}
.cambiar:hover { background: var(--brand-100, var(--hover)); }

.pasos { margin-top: var(--s-1); }
.pasos > summary {
  cursor: pointer; padding: var(--s-1) 0; font-size: var(--t-xs); color: var(--text-2);
  list-style: none;
}
.pasos > summary::-webkit-details-marker { display: none; }
.pasos > summary::before { content: '▸ '; }
.pasos[open] > summary::before { content: '▾ '; }
.pasos p { font-size: var(--t-xs); color: var(--text-2); line-height: 1.5; padding: var(--s-1) 0 var(--s-1); }

.lista-simple { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.lista-simple li { font-size: var(--t-sm); line-height: 1.45; }

.boton.peligro { color: var(--danger-700); border-color: var(--danger-200, var(--border-strong)); }

/* ═══ JERARQUÍA DE BLOQUES ═══════════════════════════════════════════════════
   El problema no era el color de las tarjetas, era que TODAS pesaban igual. La
   portada apilaba diez cajas blancas idénticas: lo que tienes que hacer hoy se
   veía exactamente igual de importante que el pie de «última actividad». Con
   todo gritando, nada se oye, y el resultado se lee como «no entiendo esta
   pantalla».

   Tres niveles, y basta. Más niveles es volver al mismo ruido por otra vía.

     .destacada  — a lo que vienes. Uno por pantalla, nunca dos.
     .tarjeta    — el cuerpo de la página.
     .apagada    — apoyo. Sin sombra y sobre el fondo, para que RETROCEDA.

   La diferencia se hace con superficie y sombra, no con color de marca: teñir
   de azul lo importante compite con los colores de deporte, que sí llevan
   información. */

.tarjeta.destacada {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  padding: var(--s-5);
}
.tarjeta.destacada > h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }

.tarjeta.apagada {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
}
.tarjeta.apagada > h2 { font-size: var(--t-sm); font-weight: 600; color: var(--text-2); }

/* Un rótulo de grupo: separa «lo de hoy» de «los datos». Sin él, diez bloques
   seguidos son una lista sin estructura por mucho que cada uno esté bien. */
.grupo-titulo {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.grupo-titulo::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.grupo-titulo:first-child { margin-top: 0; }

/* Los avisos tenían todos el mismo tamaño de caja aunque unos son urgentes y
   otros son informativos. El informativo pasa a ser una línea, no un bloque. */
.aviso.leve {
  padding: var(--s-3) var(--s-4);
  box-shadow: none;
}
.aviso.leve h3 { font-size: var(--t-sm); }
.aviso.leve p { font-size: var(--t-xs); }

/* Atajos de página: la fila de enlaces que saca de un callejón sin salida.
   Cinco páginas (pesas, material, compras, progreso, guía) no llevaban a
   ninguna otra: se entraba y la única salida era el riel o el botón de atrás.
   Un módulo al que solo se llega, pero del que no se sigue, se siente roto
   aunque funcione. */
.atajos {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: calc(var(--s-5) * -1 + var(--s-2)) 0 var(--s-5);
}

/* ═══ ¿Llegas a la carrera? ═══════════════════════════════════════════════════
   Tres filas, una por disciplina, cada una con el color de su deporte. Se lee
   de un vistazo cuál va bien y cuál no, que es exactamente lo que hay que saber
   todos los días cuando hay una fecha en el calendario. */

.prep-lista { display: flex; flex-direction: column; gap: var(--s-3); }
.prep-fila {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3); border-radius: var(--radius-md);
  background: var(--surface-2);
}
.prep-punto {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  margin-top: .35rem;
}
.prep-cuerpo { flex: 1; min-width: 0; }
.prep-cab { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.prep-detalle { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }
.prep-aviso { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--warn-700); line-height: 1.5; }
.prep-reparto {
  margin-top: var(--s-4); padding: var(--s-3);
  font-size: var(--t-sm); line-height: 1.55; color: var(--text-2);
  background: var(--warn-50); border-radius: var(--radius-md);
}
/* La que va mal se marca en el borde, no con fondo rojo: el fondo de color
   compite con los colores de deporte, que sí llevan información. */
.prep-no_llegas { box-shadow: inset 3px 0 0 var(--danger-500); }
.prep-justo     { box-shadow: inset 3px 0 0 var(--warn-500); }
.prep-vas_bien  { box-shadow: inset 3px 0 0 var(--ok-500); }

/* Las dos medidas que hacen falta y que el primer texto mezclaba: la salida
   larga y el volumen semanal. Jaime preguntó «¿72 en la semana o en una
   salida?» — si hay que preguntarlo, el texto estaba mal. Van lado a lado y
   con etiqueta, que es la forma de que no se vuelvan a confundir. */
.prep-dos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2); margin-top: var(--s-2);
}
.prep-medida {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.prep-etiq {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.prep-cifra { font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.prep-cifra small { font-size: var(--t-sm); font-weight: 400; color: var(--text-3); }
.prep-nota { font-size: var(--t-micro); color: var(--text-3); line-height: 1.4; }

/* Un dato que probablemente esté mal. Ámbar, no rojo: es una pregunta, no un
   error — puede que de verdad hiciera las dos cosas. */
.aviso-perfil { box-shadow: inset 3px 0 0 var(--warn-500); }
.aviso-perfil h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); }
.aviso-perfil p { margin: 0 0 var(--s-3); font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; }

/* Lo que tomó en la salida: tres medidas, y en ámbar la que quedó corta. */
.avit h3 { margin: 0 0 var(--s-3); font-size: var(--t-md); }
.avit-corto { box-shadow: inset 3px 0 0 var(--warn-500); }
.avit-form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.avit-item { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); }
.avit-item input { width: 4.5rem; }
.avit-item small { display: block; color: var(--text-3); font-size: var(--t-xs); }

/* Movilidad: al terminar la sesión y antes de dormir. Lista corta con la
   dosis y el error que la arruina, en gris debajo. */
.pieza-ref { margin: var(--s-1) 0 0; font-size: var(--t-sm); color: var(--text-2); }
.pieza-editar { margin-top: var(--s-2); font-size: var(--t-sm); }
.pieza-editar summary { cursor: pointer; color: var(--text-2); }
.pieza-editar .campos { margin-top: var(--s-2); }
.cuidado-dep { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); font-size: var(--t-base); }
.cuidado { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: var(--s-2) var(--s-3); margin: 0; font-size: var(--t-sm); }
.cuidado dt { font-weight: 600; color: var(--text-1); }
.cuidado dd { margin: 0; color: var(--text-2); line-height: 1.5; }
@media (max-width: 560px) { .cuidado { grid-template-columns: 1fr; gap: 0 } .cuidado dd { margin-bottom: var(--s-2); } }
.compra-prio { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-base); }
.compra-prio.prio-no { color: var(--text-3); }
.compra-lista { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.compra-lista li { padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--radius-md); }
.compra-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); font-size: var(--t-sm); }
.compra-precio { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-2); }
.compra-lista p { margin: 2px 0 0; font-size: var(--t-xs); line-height: 1.5; color: var(--text-2); }
.compra-lista small { font-size: var(--t-xs); color: var(--text-3); }
.movilidad { font-size: var(--t-sm); }
.movilidad summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.movilidad summary .chip { margin-left: auto; }
.movilidad-hecha { opacity: .85; }
.movilidad-semana { display: flex; gap: var(--s-1); margin: var(--s-2) 0 0; }
.movilidad-semana span { display: grid; place-items: center; width: 26px; height: 26px; font-size: var(--t-micro); font-weight: 700; border-radius: 50%; }
.movilidad-semana .si { color: #fff; background: var(--ok-500); }
.movilidad-semana .no { color: var(--text-3); background: var(--surface-2); border: 1px dashed var(--border-strong); }
.movilidad-semana .futuro { color: var(--text-3); background: transparent; border: 1px solid var(--border); }
.movilidad ul { margin: var(--s-2) 0; padding-left: var(--s-4); }
.movilidad li { margin-bottom: var(--s-1); }
.movilidad li small { display: block; color: var(--text-3); font-size: var(--t-xs); line-height: 1.45; }
details.movilidad > summary { cursor: pointer; }
div.movilidad { margin-top: var(--s-3); padding: var(--s-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Qué llevar en la salida larga: lista corta con producto, contenido y
   precio. Va dentro del detalle plegable: se consulta el día antes, no
   cada vez que se mira la semana. */
.compra-salida { margin-top: var(--s-3); padding: var(--s-3); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--t-sm); }
.compra-salida ul { margin: var(--s-1) 0 var(--s-2); padding-left: var(--s-4); }
.compra-salida li { margin-bottom: 2px; }
.compra-salida li small { display: block; color: var(--text-3); font-size: var(--t-xs); }
/* Dónde se compra: lo pidió Jaime («tienes que colocarme eso»). Va en gris
   y pequeño porque se lee una vez, cuando toca ir a comprar. */
small.donde { display: block; color: var(--text-3); font-size: var(--t-micro); line-height: 1.4; }
.compra-salida > small { color: var(--text-2); font-size: var(--t-xs); line-height: 1.5; }
.cronograma { margin: var(--s-2) 0 0; padding-left: var(--s-4); font-size: var(--t-xs); color: var(--text-2); line-height: 1.6; }
.cronograma b { color: var(--text-1); font-variant-numeric: tabular-nums; }

/* El plan de comida del día de la carrera, plegado bajo los cortes. */
.plan-carrera summary { cursor: pointer; font-size: var(--t-sm); }
.tramo-carrera { margin-top: var(--s-3); font-size: var(--t-sm); }
.tramo-carrera > small { color: var(--text-3); font-size: var(--t-xs); }
.tramo-carrera ul { margin: var(--s-1) 0; padding-left: var(--s-4); }
.tramo-carrera li.puesto { color: var(--text-2); font-style: italic; }

/* Los cortes de la carrera: tres filas, dos escenarios, un margen por celda.
   El margen va en color porque es lo único que hay que leer: +3 en ámbar y
   +46 en verde dicen más que cualquier párrafo. */
.cortes { width: 100%; min-width: 0; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
/* Cuatro columnas caben en un celular si se aprietan: la regla general de
   tablas (min-width 420 px) cortaba «un día bueno» sin que se viera que
   había más a la derecha. */
@media (max-width: 480px) {
  .cortes th { white-space: normal; padding-right: var(--s-1); }
  .cortes td { padding-right: var(--s-1); font-size: var(--t-xs); }
  .cortes small { display: block; margin-left: 0; }
}
.cortes th { text-align: left; font-weight: 600; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 0 var(--s-2) var(--s-1) 0; }
.cortes td { padding: var(--s-1) var(--s-2) var(--s-1) 0; border-top: 1px solid var(--border); white-space: nowrap; color: var(--text-1); }
.cortes td:first-child { color: var(--text-2); }
.cortes small { margin-left: var(--s-1); font-size: var(--t-xs); font-weight: 600; }
.cortes small.bien  { color: var(--ok-700); }
.cortes small.justo { color: var(--warn-700); }
.cortes small.mal   { color: var(--danger-700); }

/* ═══ Hidratación y bebidas ══════════════════════════════════════════════════
   Esto se veía mal por un motivo tonto y concreto: las clases existían en la
   plantilla y NUNCA se escribió el CSS. Los seis botones de bebida eran botones
   por defecto del navegador —gris, esquinas cuadradas, tamaños distintos según
   el largo del texto— dentro de una tarjeta que sí estaba diseñada. Por eso
   desentonaba tanto: no era un mal diseño, era la ausencia de diseño en medio
   de uno. */

/* «Toca pesarte»: una fila, kg y % de grasa, sin abrir nada. */
.pesar-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-2); margin-bottom: var(--s-2); }
.pesar-cab h2 { margin: 0; }
.pesar-nota { color: var(--text-3); font-size: var(--t-xs); }
.pesar-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.pesar-form label { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--text-3); }
.pesar-form input { width: 6rem; min-height: 44px; text-align: center; font-size: var(--t-md); }
.pesar-form input[type="time"], .pesar-form input[type="date"] { width: 9rem; font-size: var(--t-base); }
.pesar-form input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--primary); }
.pesar-ayunas { font-size: var(--t-sm) !important; color: var(--text-1) !important; }
.pesar-mas { flex: 1 1 100%; }
.pesar-mas > summary { cursor: pointer; color: var(--text-3); font-size: var(--t-xs); }
.pesar-mas .pesar-form { margin-top: var(--s-2); }
.pesar-nota-campo { flex: 1 1 100%; width: auto !important; text-align: left !important; font-size: var(--t-sm) !important; }

/* Leer la báscula por Bluetooth (bascula.js). */
.bascula-btn { min-height: 44px; }
.bascula-estado { flex: 1 1 100%; margin: var(--s-1) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-2); font-size: var(--t-sm); }
.bascula-estado.bascula-ok { background: var(--ok-50); color: var(--ok-700); font-weight: 600; }

/* Hidratación al estilo del diario de comida (2026-09-18). Jaime: «el principal
   de qué he bebido hoy… los botones no se ven bien». La rejilla de 8 cajas
   blancas daba filas de alturas distintas («Bebida deportiva» partía en dos)
   y no había dónde ver ni quitar lo anotado. Ahora: la cifra grande, lo de
   hoy como fichas con ✕, y los tragos como píldoras parejas. */
.hidra-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.hidra-cab h2 { margin: 0; }
.hidra-total { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-1); font-variant-numeric: tabular-nums; }
.hidra-total b { font-size: var(--t-xl); font-weight: 700; color: var(--text-1); }
.hidra-sodio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-2);
  margin-top: var(--s-3); font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.hidra-sodio b { color: var(--text-1); }
.hidra-sodio small { color: var(--text-3); font-size: var(--t-xs); }
.hidra-barra-fina { height: 6px; margin-top: var(--s-1); }
.hidra-lectura { color: var(--text-2); font-size: var(--t-sm); margin: var(--s-3) 0; }
.hidra-hoy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.hidra-etiqueta { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.hidra-bebida { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 36px; padding: 0 var(--s-1) 0 var(--s-3);
  border-radius: 999px; background: var(--brand-50); font-size: var(--t-sm); }
.hidra-bebida small { color: var(--text-3); font-size: var(--t-xs); }
.hidra-quitar { width: 32px; height: 32px; border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: var(--t-xs); border-radius: 50%; }
.hidra-quitar:hover { color: var(--danger-700); background: var(--hover); }
.hidra-vacio { color: var(--text-3); font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.hidra-base { margin-top: var(--s-3); font-size: var(--t-xs); }

.tragos { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tragos form { display: contents; }
.trago {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 40px; padding: 0 var(--s-3); cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--text-1); white-space: nowrap;
  background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 999px;
  transition: background .12s, border-color .12s;
}
.trago small { font-weight: 400; color: var(--text-3); font-size: var(--t-xs); }
.trago:hover { border-color: var(--NATACION); background: var(--brand-50); }
.trago:active { transform: scale(.97); }
.trago-ico { font-size: var(--t-base); line-height: 1; }

/* El icono de tema, que tampoco tenía regla y heredaba lo que pillara. */
.ico-luna { display: block; }

/* Fichas del recetario: la misma caja que el botón, pero sin ser botón. */
.plato-ficha { cursor: default; }
.plato-ficha:hover { border-color: var(--border-strong); background: var(--surface-1); }

/* ═══ Comer hoy ══════════════════════════════════════════════════════════════
   La página que faltaba. `/nutricion` planifica siete días en tablas y está
   bien para el domingo de mercado; a la hora de comer nadie quiere una tabla de
   la semana. La prueba de que faltaba: con la app corriendo desde agosto había
   UNA comida registrada en toda la historia. No es que no coma — es que anotar
   costaba encontrar el día correcto dentro de una tabla de siete. */

.restante {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}
.restante-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-3) var(--s-2);
  background: var(--surface-2); border-radius: var(--radius-md);
}
.restante-cifra {
  font-size: var(--t-xl); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.restante-etiq { font-size: var(--t-micro); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }

.comida { padding: var(--s-4); }
.comida-hecha { box-shadow: inset 3px 0 0 var(--ok-500); }
.comida-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2);
}
.comida-nombre { font-size: var(--t-md); font-weight: 600; }
.comida-macros { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.comida-macros b { color: var(--text-1); }
.comida-plato { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }

/* Los ingredientes como lista con la cantidad a la derecha: se lee como una
   receta de verdad, no como una fila de tabla. */
.comida-ing { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.comida-ing li {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-1) 0; font-size: var(--t-sm);
  border-bottom: 1px dashed var(--border);
}
.comida-ing li:last-child { border-bottom: 0; }
.comida-ing li span { color: var(--text-2); }
.comida-ing li b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.comida-acciones {
  display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--border);
}
.comida-acciones form { display: contents; }
/* El editor de la comida, estilo Fitia: casilla, nombre, cantidad y calorías. */
.comida-editor { margin: 0; }
.ing-fila { border-bottom: 1px dashed var(--border); }
.comida-ing.editable li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre cant" "kcal kcal"; align-items: center; gap: 2px var(--s-2); }
.ing-check { grid-area: nombre; display: flex; align-items: center; gap: var(--s-2); min-width: 0; cursor: pointer; }
.ing-check input { flex: none; width: 20px; height: 20px; margin: 0; }
.ing-check span { min-width: 0; color: var(--text-1); }
.ing-check span small { font-size: var(--t-xs); color: var(--text-3); }
.ing-check:has(input:not(:checked)) span { color: var(--text-3); text-decoration: line-through; }
.ing-cant { grid-area: cant; display: inline-flex; align-items: center; gap: var(--s-1); }
.ing-cant input { width: 4.5rem; min-height: 36px; padding: 2px var(--s-2); text-align: right; font-variant-numeric: tabular-nums; }
.ing-cant small { min-width: 3.2rem; font-size: var(--t-xs); color: var(--text-3); }
.ing-cant select { width: auto; min-height: 36px; padding: 2px var(--s-1); }
.ing-kcal { grid-area: kcal; padding-left: 28px; font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--text-3); }
.ing-kcal:empty { display: none; }
.ing-nueva { grid-template-areas: "nombre cant" "kcal kcal"; }
.ing-buscar { grid-area: nombre; min-height: 36px; }
.comida-suma { margin: var(--s-2) 0 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--text-2); }
.comida-suma b { color: var(--text-1); }
.comida-otras { margin-top: var(--s-2); padding-top: 0; border-top: 0; }

.anotado { display: flex; align-items: center; gap: var(--s-3); }
.anotado > span:first-child { flex: 1; min-width: 0; }
.anotado-macros { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anotado form { display: contents; }

/* ═══ Barras de reparto de zonas ═════════════════════════════════════════════
   Cada barra lleva una marca del objetivo. Sin la marca es un porcentaje sin
   referencia: «32 % en Z3» no dice nada a nadie hasta que se ve dónde debería
   estar. La comparación es el dato, no el número. */
.barras-zona { display: flex; flex-direction: column; gap: var(--s-4); }
.bz-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); margin-bottom: var(--s-1); font-size: var(--t-sm);
}
.bz-cab span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.bz-cab span b { color: var(--text-1); }
.bz-pista {
  position: relative; height: 10px; border-radius: 99px;
  background: var(--surface-2); overflow: visible;
}
.bz-pista i { display: block; height: 100%; border-radius: 99px; }
.bz-marca {
  position: absolute; top: -3px; width: 2px; height: 16px;
  background: var(--text-1); border-radius: 1px;
}
.bz-nota { display: block; margin-top: var(--s-1); font-size: var(--t-micro); color: var(--text-3); }

/* El pulso objetivo en el plan. Es un chip que además ENLAZA: el número solo
   dice qué hacer, pero no por qué ese número — y «por qué» es donde está la
   diferencia entre seguir un plan y entenderlo. */
.chip-pulso {
  text-decoration: none; color: var(--danger-700);
  background: var(--danger-50); font-variant-numeric: tabular-nums;
}
.chip-pulso:hover { background: var(--danger-100, var(--danger-50)); }

/* El contenedor de cada barra. Existe para agrupar, pero se le da regla propia
   en vez de dejarlo huérfano: una clase sin CSS es indistinguible de una que se
   olvidó, y así fue como los botones de bebida acabaron siendo botones grises
   del navegador dentro de una tarjeta diseñada. */
.bz { display: block; }

/* ═══ Sensores ═══════════════════════════════════════════════════════════════
   Lo que NO llega tiene que verse igual de claro que lo que sí. Un hueco
   silencioso se confunde con un cero: «no tengo potencia» se lee igual que
   «voy a 0 vatios» si nadie lo dice. */
.sensores { display: flex; flex-direction: column; gap: var(--s-3); }
.sensor {
  padding: var(--s-3); border-radius: var(--radius-md);
  background: var(--surface-2);
}
.sensor-completo     { box-shadow: inset 3px 0 0 var(--ok-500); }
.sensor-intermitente { box-shadow: inset 3px 0 0 var(--warn-500); }
.sensor-ausente      { box-shadow: inset 3px 0 0 var(--border-strong); opacity: .9; }
.sensor-cab { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sensor-n { margin-left: auto; font-size: var(--t-micro); color: var(--text-3); font-variant-numeric: tabular-nums; }
.sensor-para { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }
.sensor-como { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }

/* Los pasos de emparejado: numerados y con aire. Una lista de cinco pasos
   apretada se lee como un párrafo y no se sigue. */
.pasos-lista {
  margin: var(--s-2) 0 0; padding-left: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--text-2); line-height: 1.5;
}

/* ═══ Dictar ═════════════════════════════════════════════════════════════════
   El botón de hablar es grande porque se usa con las manos sudadas, entre
   serie y serie, mirando poco. Y el resultado se enseña ANTES de guardar: un
   peso mal oído que se guarda solo es peor que no anotar nada, porque después
   parece un dato medido. */
.dictar-fila { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.dictar-btn { min-height: 48px; padding: var(--s-2) var(--s-4); font-size: var(--t-base); }
.dictar-activo {
  border-color: var(--danger-500); background: var(--danger-50); color: var(--danger-700);
  animation: dictar-latido 1.2s ease-in-out infinite;
}
@keyframes dictar-latido { 50% { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .dictar-activo { animation: none; } }
.dictar-estado { font-size: var(--t-sm); color: var(--text-3); }
.dictar-resultado {
  margin-top: var(--s-4); padding: var(--s-3);
  background: var(--surface-2); border-radius: var(--radius-md);
}
.dictar-titulo { font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--s-2); }
.dictar-duda {
  margin-top: var(--s-2); padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm); line-height: 1.5;
  color: var(--warn-700); background: var(--warn-50); border-radius: var(--radius-md);
}
.dictar-est { color: var(--text-3); font-size: var(--t-xs); }

/* ═══ Sesiones que se quedaron sin hacer ═════════════════════════════════════
   Una sesión omitida con su etiqueta roja y nada más es un reproche que sigue
   ahí toda la semana. Eso no ayuda a entrenar, ayuda a abandonar. Acá se dice
   qué hacer — y «déjala ir» se ve tan legítimo como «recupérala», porque la
   mitad de las veces es la respuesta correcta. */
.rescate {
  padding: var(--s-3); margin-bottom: var(--s-2);
  background: var(--surface-2); border-radius: var(--radius-md);
}
.rescate-si { box-shadow: inset 3px 0 0 var(--ok-500); }
.rescate-no { box-shadow: inset 3px 0 0 var(--border-strong); }
.rescate-cab { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.rescate-porque {
  margin: var(--s-2) 0; font-size: var(--t-sm);
  color: var(--text-2); line-height: 1.5;
}

/* ═══ Lo que hizo fuera del plan ═════════════════════════════════════════════
   Iba al FINAL del bloque del día, debajo de todas las sesiones y sus
   formularios plegables. Jaime escribió «hice entrenamiento de bici y no lo
   metiste en ninguna parte»: el dato estaba, a 2.800 caracteres del título del
   día. Un dato que no se encuentra es un dato que no existe.

   Ahora va arriba y en verde: lo que hizo se celebra, no se archiva como una
   nota al pie. */
.hecho-extra {
  padding: var(--s-3); margin-bottom: var(--s-3);
  background: var(--ok-50); border-radius: var(--radius-md);
  box-shadow: inset 3px 0 0 var(--ok-500);
}
.hecho-cab { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.hecho-nota {
  margin-top: var(--s-1); font-size: var(--t-sm);
  color: var(--text-2); line-height: 1.5;
}

/* ═══ Esquemas de movimiento ═════════════════════════════════════════════════
   Dibujados con `currentColor` para que hereden el color del texto y funcionen
   en los dos temas sin una sola línea extra. Son esquemas, no fotos: las del
   catálogo libre son de 2010 —pared roja, flash duro— y al lado de esta paleta
   se ven como un anuncio pegado encima. Jaime pidió que no se viera
   antiestético y ese era exactamente el problema. */
.pat-icono { flex: none; color: var(--text-3); }
.ejercicio-cab:hover .pat-icono { color: var(--primary); }

/* La clave técnica no describe el ejercicio —él lleva meses haciéndolos— sino
   el error que de verdad se comete y cuesta caro. Por eso va discreta: se lee
   la primera vez y después se ignora sin estorbar. */
.clave-tecnica {
  margin: var(--s-1) 0 var(--s-2); padding-left: var(--s-3);
  font-size: var(--t-xs); line-height: 1.5; color: var(--text-3);
  border-left: 2px solid var(--border);
}

/* ═══ Carreras ═══════════════════════════════════════════════════════════════
   La competencia en una página: recorrido con altimetría, cómo se corre cada
   tramo, los cortes y qué se come. Cada recorrido es una tarjeta con pestañas:
   el trazado (sin calles: la forma, dónde sube y dónde se gira) con su
   altimetría enlazada, el plan km a km y cómo correrlo. */
.titulo-seccion { margin: var(--s-6) 0 var(--s-3); font-size: var(--t-lg); }
.carrera-hero h1 { margin: var(--s-1) 0 var(--s-2); }
.carrera-cuando { margin: 0; color: var(--text-2); font-size: var(--t-base); }
.carrera-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
.recorrido + .recorrido { margin-top: var(--s-3); }
.recorrido-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.recorrido-cab h3 { margin: 0; font-size: var(--t-md); }
.recorrido-texto { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--t-sm); line-height: 1.55; }
.mapa-inicio { fill: var(--ok-500); stroke: var(--surface-0); stroke-width: 2; }
.recorrido { border-top: 3px solid var(--c, var(--border-strong)); }
.recorrido-km { font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--text-3); }
.recorrido-tiempo { margin-left: auto; font-family: var(--font-num); font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-1); }
/* Los datos: rótulo chico arriba, la cifra, y su contexto debajo. */
.recorrido-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.recorrido-datos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); background: var(--surface-2); border-radius: var(--radius-md); }
.recorrido-datos span { font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.recorrido-datos b { font-family: var(--font-num); font-size: var(--t-md); font-variant-numeric: tabular-nums; color: var(--text-1); }
.recorrido-datos small { font-size: var(--t-xs); color: var(--text-3); }
.recorrido-datos .dato-ancho { grid-column: 1 / -1; }
.recorrido-datos b.dato-texto { font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600; }

/* Pestañas. Sin JavaScript no hay botones y los tres paneles se ven seguidos. */
.pestanas { margin-top: var(--s-4); }
.pestanas-lista { display: none; }
.pestanas.activas .pestanas-lista { display: flex; gap: var(--s-1); margin-bottom: var(--s-3); overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
.pestanas-lista button { flex: none; min-height: 0; margin: 0 0 -1px; padding: var(--s-2) var(--s-3); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; color: var(--text-2); cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; }
.pestanas-lista button:hover { color: var(--text-1); background: none; }
.pestanas-lista button[aria-selected="true"] { font-weight: 600; color: var(--text-1); border-bottom-color: var(--c, var(--accent-500)); }
.pestanas:not(.activas) .pestana-panel + .pestana-panel { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }

/* El trazado. Lo dibuja el servidor en una caja con la proporción del
   recorrido; las marcas y los eventos van en HTML por porcentaje, para que no
   crezcan con la pantalla. Los colores de pendiente son los de la leyenda. */
.mapa-carrera { padding: var(--s-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.mapa-caja { position: relative; width: min(100%, calc(440px * var(--ar, 1.33))); aspect-ratio: var(--ar, 1.33); margin: 0 auto; }
.traza { display: block; width: 100%; height: 100%; overflow: visible; }
.traza path { fill: none; stroke: var(--c, var(--accent-500)); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.traza-linea { stroke: var(--c, var(--accent-500)); }
.traza .pend-0 { stroke: #0284c7; }
.traza .pend-1 { stroke: #16a34a; }
.traza .pend-2 { stroke: #eab308; }
.traza .pend-3 { stroke: #ea580c; }
.traza .pend-4 { stroke: #dc2626; }
.traza .traza-resalte { stroke: var(--text-1); stroke-width: 16; opacity: .2; }
.traza .traza-resalte[hidden] { display: none; }
.mapa-km, .mapa-evento, .mapa-salida, .mapa-meta, .mapa-cursor { position: absolute; transform: translate(-50%, -50%); }
.mapa-km { display: grid; place-items: center; height: 18px; padding: 0 5px; font-family: var(--font-num); font-size: var(--t-micro); font-weight: 700; line-height: 1; color: var(--text-1); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 999px; pointer-events: none; }
.mapa-evento { display: grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 0; font-size: var(--t-xs); line-height: 1; color: var(--text-1); cursor: pointer; background: var(--surface-1); border: 2px solid var(--ev, var(--text-3)); border-radius: 50%; box-shadow: var(--shadow-sm); }
.mapa-evento:hover, .mapa-evento:focus-visible { z-index: 2; transform: translate(-50%, -50%) scale(1.15); }
.mapa-salida, .mapa-meta { width: 14px; height: 14px; border: 2px solid var(--surface-1); border-radius: 50%; box-shadow: var(--shadow-sm); pointer-events: none; }
.mapa-salida { background: var(--ok-500); }
.mapa-meta { background: var(--text-1); }
.mapa-cursor { z-index: 3; width: 14px; height: 14px; background: var(--c, var(--accent-500)); border: 2px solid var(--surface-1); border-radius: 50%; box-shadow: var(--shadow-md); pointer-events: none; }
.mapa-tip { position: absolute; z-index: 4; padding: var(--s-1) var(--s-2); font-size: var(--t-xs); line-height: 1.4; white-space: nowrap; color: var(--text-1); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; }
.mapa-tip.abajo { transform: translate(-50%, 12px); }
.mapa-cursor[hidden], .mapa-tip[hidden] { display: none; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); font-size: var(--t-xs); color: var(--text-3); }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.mapa-leyenda i { width: 16px; height: 4px; border-radius: 2px; }
.leyenda-baja { background: #0284c7; }
.leyenda-llano { background: #16a34a; }
.leyenda-suave { background: #eab308; }
.leyenda-sube { background: #ea580c; }
.leyenda-fuerte { background: #dc2626; }
.leyenda-nota { margin-left: auto; font-style: italic; }
.ev-comer { --ev: var(--warn-500); }
.ev-giro { --ev: var(--text-1); }
.ev-subida { --ev: #ea580c; }
.ev-vuelta { --ev: var(--accent-500); }
.ev-boya { --ev: var(--NATACION); }

/* La altimetría. El dibujo se estira; los textos, el cursor y el punto van en
   HTML para que no crezcan ni se deformen con el ancho de la pantalla. */
.perfil-contenedor { margin-top: var(--s-4); color: var(--c, var(--accent-500)); }
.perfil-lienzo { position: relative; height: 150px; touch-action: pan-y; cursor: crosshair; }
.recorrido-perfil { display: block; width: 100%; height: 100%; overflow: visible; }
.perfil-rejilla { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.perfil-area { stroke: none; }
.perfil-linea { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.perfil-m { position: absolute; padding: 0 4px; font-family: var(--font-num); font-size: var(--t-micro); color: var(--text-3); background: color-mix(in oklch, var(--surface-1) 85%, transparent); border-radius: 3px; transform: translateY(-120%); pointer-events: none; }
.perfil-ejes { position: relative; height: 1.25rem; margin-top: 2px; }
.perfil-ejes span { position: absolute; top: 0; font-family: var(--font-num); font-size: var(--t-micro); color: var(--text-3); transform: translateX(-50%); }
.perfil-cursor { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--text-2); pointer-events: none; }
.perfil-banda { position: absolute; top: 0; bottom: 0; background: color-mix(in oklch, var(--text-1) 9%, transparent); border-inline: 1px solid color-mix(in oklch, var(--text-1) 25%, transparent); pointer-events: none; }
.perfil-banda[hidden] { display: none; }
.perfil-punto { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: currentColor; border: 2px solid var(--surface-1); border-radius: 50%; box-shadow: var(--shadow-sm); pointer-events: none; }
.perfil-tip { position: absolute; top: -6px; z-index: 2; padding: var(--s-1) var(--s-2); font-size: var(--t-xs); line-height: 1.4; white-space: nowrap; color: var(--text-1); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); transform: translate(-50%, -100%); pointer-events: none; }
.perfil-cursor[hidden], .perfil-punto[hidden], .perfil-tip[hidden] { display: none; }
.perfil-ayuda { margin: var(--s-1) 0 0; font-size: var(--t-xs); color: var(--text-3); }

/* El plan km a km: el borde es el terreno, a la derecha la hora de llegada. */
.plan-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin: 0 0 var(--s-3); font-size: var(--t-xs); color: var(--text-3); }
.plan-total b { font-family: var(--font-num); font-size: var(--t-lg); color: var(--text-1); }
.plan-km { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.plan-fila { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto 3.5rem; grid-template-areas: "km terreno datos llega" "que que que que" "eventos eventos eventos eventos"; gap: 2px var(--s-3); align-items: baseline; padding: var(--s-2) var(--s-3); cursor: pointer; background: var(--surface-2); border-left: 4px solid var(--terreno, var(--border-strong)); border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: background .12s ease; }
.plan-fila:hover { background: color-mix(in oklch, var(--terreno, var(--border-strong)) 10%, var(--surface-2)); }
.plan-fila:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.plan-fila.activa { background: color-mix(in oklch, var(--terreno, var(--border-strong)) 16%, var(--surface-1)); box-shadow: inset 0 0 0 1px var(--terreno, var(--border-strong)); }
.terreno-plano { --terreno: #16a34a; }
.terreno-subida { --terreno: #ea580c; }
.terreno-bajada { --terreno: #0284c7; }
.terreno-ondulado { --terreno: #eab308; }
.pf-km { grid-area: km; font-family: var(--font-num); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
.pf-terreno { grid-area: terreno; font-size: var(--t-sm); font-weight: 600; color: var(--text-2); }
.pf-datos { grid-area: datos; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--text-2); }
.pf-llega { grid-area: llega; font-family: var(--font-num); font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-1); }
.pf-que { grid-area: que; margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--text-3); }
.pf-eventos { grid-area: eventos; display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: 2px; }
.pf-evento { display: inline-flex; align-items: center; padding: 1px var(--s-2); font-size: var(--t-xs); color: var(--text-1); background: color-mix(in oklch, var(--ev, var(--text-3)) 16%, var(--surface-1)); border-radius: var(--radius-md); }
@media (max-width: 560px) {
  .plan-fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "km llega" "terreno datos" "que que" "eventos eventos"; }
}
/* Dónde sube: lo que convierte la altimetría en un plan que se puede seguir. */
.subidas { margin-top: var(--s-3); font-size: var(--t-sm); }
.subidas ul { margin-top: var(--s-1); }
.recorrido-subir { margin-top: var(--s-3); font-size: var(--t-sm); }
.recorrido-subir summary { cursor: pointer; color: var(--text-2); }
.recorrido-subir form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.opcion-linea { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-2); }
.tramo h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); }
.tramo h3 small { color: var(--text-3); font-weight: 400; font-size: var(--t-sm); }
.tramo-datos { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-sm); color: var(--text-2); }
.tramo-datos b { margin-right: var(--s-1); color: var(--text-1); }
.parciales { margin-top: var(--s-3); }
.parciales td { font-variant-numeric: tabular-nums; }
.tramo-claves { margin-top: var(--s-3); }
/* Según cómo llegue: la regla que aplica hoy en negro, las demás en gris. */
.segun { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--t-sm); }
.segun ul { margin-top: var(--s-2); }
.segun li { color: var(--text-3); }
.segun li.aplica { color: var(--text-1); }
.opcion-linea select { width: auto; }
.checklist h3 { margin: var(--s-3) 0 var(--s-1); font-size: var(--t-base); }
.checklist h3:first-child { margin-top: 0; }
.checklist ul { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.checklist label { display: flex; align-items: flex-start; gap: var(--s-2); }

/* ═══ Calendario ═════════════════════════════════════════════════════════════
   Mes y semana con los colores de cada disciplina de toda la app. Relleno =
   hecha; borde punteado = pendiente; tachada = omitida. En el celular el mes
   pasa a puntos: siete columnas de texto no caben en 400 px. */
.cal-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.cal-nav { display: flex; align-items: center; gap: var(--s-2); }
.cal-nav h1 { margin: 0; min-width: 9ch; font-size: var(--t-lg); text-align: center; }
.cal-vistas { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cal-vistas a { padding: var(--s-1) var(--s-3); border-radius: var(--radius-md); font-size: var(--t-sm); color: var(--text-2); text-decoration: none; }
.cal-vistas a.activo { background: var(--surface-0); color: var(--text-1); box-shadow: var(--shadow-sm); }
.cal-cuenta { margin: 0 0 var(--s-3); }
.cal-scroll { overflow-x: auto; }
/* El mes tiene que caber entero: con la regla general de tablas (420 px) el
   domingo quedaba fuera de la pantalla del celular. */
.cal-mes { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-mes th { padding-bottom: var(--s-1); font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cal-fase-col { width: 4.5rem; vertical-align: top; font-size: var(--t-micro); color: var(--text-3); }
.cal-fase-col small { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cal-fase { display: inline-block; padding: 1px var(--s-1); border-radius: 4px; font-size: var(--t-micro); font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.fase-base .cal-fase, .cal-fase.fase-base { background: var(--brand-50); color: var(--brand-700); }
.fase-construccion .cal-fase, .cal-fase.fase-construccion { background: var(--accent-50); color: var(--accent-700); }
.fase-pico .cal-fase, .cal-fase.fase-pico { background: var(--warn-50); color: var(--warn-700); }
.fase-taper .cal-fase, .cal-fase.fase-taper { background: var(--ok-50); color: var(--ok-700); }
.fase-post .cal-fase, .cal-fase.fase-post { background: var(--surface-2); color: var(--text-3); }
.fase-ninguna .cal-fase-col { color: var(--text-3); }
.cal-dia { height: 5.5rem; padding: var(--s-1); overflow: hidden; vertical-align: top; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cal-dia.fuera { opacity: .45; }
.cal-dia.hoy, .cal-sdia.hoy { border-color: var(--accent-500); box-shadow: inset 0 0 0 1px var(--accent-500); }
.cal-dia.es-carrera, .cal-sdia.es-carrera { background: var(--warn-50); border-color: var(--warn-500); }
.cal-num { display: block; margin-bottom: 2px; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); text-decoration: none; }
.cal-item { display: flex; align-items: center; gap: 3px; margin-top: 2px; padding: 1px 4px; overflow: hidden; white-space: nowrap; font-size: var(--t-micro); line-height: 1.3; color: var(--text-1); background: color-mix(in oklch, var(--c, var(--text-3)) 16%, transparent); border-left: 3px solid var(--c, var(--text-3)); border-radius: 4px; }
.cal-txt { overflow: hidden; text-overflow: ellipsis; }
.cal-simbolo { flex: none; }
.cal-item.e-cumplida, .cal-sitem.e-cumplida { background: color-mix(in oklch, var(--c, var(--text-3)) 24%, transparent); }
/* Un pendiente y un cumplido son la MISMA cosa en dos estados, así que
   comparten silueta: barra de color a la izquierda y fondo. Lo que cambia es la
   intensidad del fondo y que la barra va punteada. Antes el pendiente llevaba
   una caja punteada entera y el cumplido solo la barra: dos formas distintas
   una encima de la otra, y eso es lo que se lee como desorden. */
.cal-item.e-pendiente, .cal-sitem.e-pendiente {
  background: color-mix(in oklch, var(--c, var(--text-3)) 7%, transparent);
  border-left-style: dashed;
}
.cal-item.e-parcial, .cal-sitem.e-parcial { background: linear-gradient(90deg, color-mix(in oklch, var(--c, var(--text-3)) 24%, transparent) 50%, transparent 50%); }
.cal-item.e-omitida .cal-txt, .cal-sitem.e-omitida b { color: var(--text-3); text-decoration: line-through; }
.cal-item.t-carrera, .cal-sitem.t-carrera { font-weight: 600; color: var(--surface-0); background: var(--warn-500); border-left-color: var(--warn-700); }
.cal-item.t-prep, .cal-sitem.t-prep b { font-weight: 700; }
.cal-item.t-extra, .cal-sitem.t-extra { border-left-style: dotted; }
.cal-item.t-nota, .cal-sitem.t-nota { font-style: italic; color: var(--text-3);
  background: none; border-left-color: var(--border-strong); }
@media (max-width: 640px) {
  .cal-mes { border-spacing: 2px; }
  .cal-fase-col { width: 2.4rem; }
  .cal-fase-col .cal-fase { display: none; }
  .cal-dia { height: 3.6rem; padding: 2px; }
  .cal-item { display: inline-block; width: 8px; height: 8px; margin: 1px; padding: 0; border: 0; border-radius: 50%; background: var(--c, var(--text-3)); }
  .cal-item .cal-txt, .cal-item .cal-simbolo { display: none; }
  .cal-item.e-pendiente { background: transparent; border: 0; box-shadow: inset 0 0 0 1.5px var(--c, var(--text-3)); }
  .cal-item.e-omitida { opacity: .35; }
  .cal-item.t-carrera { background: var(--warn-500); }
  .cal-item.t-nota { display: none; }
}
/* `repeat(7, …)` metía los siete días en columnas de ~120 px y «45 min · ✓
   cumplida» se partía en tres líneas. Con auto-fit la semana pasa de 7 a 4, a 2
   y a 1 según el ancho y los días no pierden su orden. */
.cal-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s-2); }
.cal-sdia { display: flex; flex-direction: column; gap: var(--s-1); min-height: 8rem; padding: var(--s-2); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); }
@media (max-width: 900px) { .cal-sdia { min-height: 0; } }
.cal-sdia-cab { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--t-sm); }
.cal-sdia-cab small { font-size: var(--t-xs); color: var(--text-3); }
.cal-sitem { display: flex; flex-direction: column; padding: var(--s-1) var(--s-2); font-size: var(--t-sm); color: var(--text-1); text-decoration: none; background: color-mix(in oklch, var(--c, var(--text-3)) 14%, transparent); border-left: 3px solid var(--c, var(--text-3)); border-radius: 6px; }
.cal-sitem small { font-size: var(--t-xs); line-height: 1.35; color: var(--text-2); }
.cal-sitem b { line-height: 1.3; }
.cal-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-3) 0; font-size: var(--t-xs); color: var(--text-2); }
.cal-muestra { display: inline-block; width: 12px; height: 8px; vertical-align: middle; border: 1px dashed var(--text-3); border-radius: 2px; }
.cal-totales h3 { margin: 0 0 var(--s-3); font-size: var(--t-md); }
.cal-barra { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); font-size: var(--t-sm); }
@media (max-width: 480px) { .cal-barra { grid-template-columns: 1fr auto; } .cal-barra-pista { grid-column: 1 / -1; order: 3; } }
.cal-barra-nombre { display: flex; align-items: center; gap: var(--s-2); }
.cal-barra-pista { position: relative; height: 10px; overflow: hidden; background: var(--surface-2); border-radius: 5px; }
.cal-barra-plan, .cal-barra-hecho { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.cal-barra-plan { background: var(--border-strong); }
.cal-barra small { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ═══ Carreras: índice y cabeceras ═══════════════════════════════════════════
   Una carrera se reconoce por tres cosas antes que por su nombre: la fecha, el
   logo (o, si no hay, la forma de su recorrido) y el lugar. La tarjeta pone
   eso primero. El color del borde es el de su disciplina principal. */
.carreras-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.carreras-cab h1 { margin: 0; }
.carreras-cab p { margin: var(--s-1) 0 0; }
.carrera-destacada, .carrera-cabecera { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 0; overflow: hidden; color: inherit; text-decoration: none; border-top: 4px solid var(--c, var(--accent-500)); }
.carrera-destacada, .carrera-tarjeta { transition: box-shadow .15s ease, transform .15s ease; }
.carrera-destacada:hover, .carrera-tarjeta:hover, .carrera-fila:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
@media (max-width: 720px) { .carrera-destacada, .carrera-cabecera { grid-template-columns: 1fr; } }
.carrera-visual { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--accent-500)) 16%, var(--surface-1)), var(--surface-1)); }
.carrera-visual.grande { aspect-ratio: auto; min-height: 220px; }
/* En el celular, con nueve carreras en la lista, cada tarjeta con su mapa de
   16/9 obligaba a hacer scroll eterno. Se baja la altura del visual y la
   cabecera sin mapa ni logo (solo iniciales) deja de ser un cajón vacío. */
@media (max-width: 640px) {
  .carrera-tarjeta .carrera-visual { aspect-ratio: 21 / 9; }
  .carrera-visual.grande { min-height: 150px; }
  .carrera-visual.solo-iniciales { aspect-ratio: 5 / 1; min-height: 0; }
}
.carrera-visual.solo-iniciales.grande { min-height: 0; padding: var(--s-4) 0; }
.carrera-visual > img { width: 100%; height: 100%; max-height: 320px; object-fit: contain; padding: var(--s-4); background: var(--surface-0); }
.carrera-visual > .traza { width: 84%; height: 84%; max-height: 260px; overflow: visible; }
.carrera-visual .traza path { stroke-width: 5; }
/* Sobre la imagen: la fecha y la cuenta. */
.visual-fecha, .visual-cuenta { position: absolute; top: var(--s-2); z-index: 2; padding: 3px var(--s-2); font-size: var(--t-xs); font-weight: 600; line-height: 1.2; border-radius: 999px; box-shadow: var(--shadow-sm); }
.visual-fecha { left: var(--s-2); color: var(--text-1); background: var(--surface-1); }
.visual-fecha b { font-family: var(--font-num); }
.visual-cuenta { right: var(--s-2); color: #fff; background: var(--c, var(--accent-500)); }
.carrera-iniciales { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: .04em; color: var(--c, var(--accent-600)); }
.cd-texto, .carrera-cab-texto { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); }
.cd-arriba { display: flex; align-items: flex-start; gap: var(--s-4); }
.cd-arriba h2 { margin: var(--s-1) 0; font-size: var(--t-xl); line-height: 1.15; }
.cd-abajo { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.cuenta-grande { font-size: var(--t-sm); color: var(--text-2); }
.cuenta-grande b { margin-right: var(--s-1); font-family: var(--font-num); font-size: var(--t-xl); color: var(--text-1); }
.ver-mas { font-size: var(--t-sm); font-weight: 600; color: var(--accent-600); }
.fecha-tile { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; min-width: 3.6rem; padding: var(--s-2); line-height: 1; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.fecha-tile.grande { min-width: 4.4rem; padding: var(--s-2) var(--s-3); }
.ft-mes { font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-600); }
.ft-dia { margin: 2px 0; font-family: var(--font-num); font-size: var(--t-lg); font-weight: 700; color: var(--text-1); }
.fecha-tile.grande .ft-dia { font-size: var(--t-xl); }
.ft-anio { font-size: var(--t-micro); font-variant-numeric: tabular-nums; color: var(--text-3); }
.carrera-lugar { display: flex; align-items: center; gap: var(--s-1); margin: 0; font-size: var(--t-sm); color: var(--text-2); }
.pin { flex: none; color: var(--text-3); }
.carrera-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.chip-dep { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--s-2); font-size: var(--t-xs); font-weight: 600; color: var(--text-1); background: color-mix(in oklch, var(--c, var(--text-3)) 14%, transparent); border-radius: 999px; }
.chip-dep::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--text-3)); }
.carreras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.carrera-tarjeta { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-decoration: none; border-top: 3px solid var(--c, var(--accent-500)); }
.ct-texto { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
.ct-texto h3 { margin: 0; font-size: var(--t-md); line-height: 1.2; }
.carreras-lista { display: flex; flex-direction: column; gap: var(--s-2); }
.carrera-fila { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.cf-texto { flex: 1; min-width: 0; }
.cf-texto b { display: block; }
.resultado { font-family: var(--font-num); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; color: var(--text-1); }
.carreras-vacio { padding: var(--s-6) var(--s-4); text-align: center; }
.carrera-cab-texto h1 { margin: 0; line-height: 1.1; }
.carrera-fecha-larga { margin: 0; font-size: var(--t-base); font-weight: 600; color: var(--text-1); }
.carrera-fecha-larga::first-letter { text-transform: uppercase; }
.chip-cuenta { align-self: flex-start; }
.carrera-notas { margin: var(--s-3) 0 0; }
/* .volver: ver «Navegar entre días y semanas, volver, buscar», más abajo. */

/* ─── Fitia ─────────────────────────────────────────────────────────────────
   Diario del día, búsqueda de la tabla nutricional y la conexión. */
.fitia-cabeza { display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.fitia-cabeza h2 { margin: 0; }
.fitia-nota { color: var(--text-3); font-size: var(--t-sm); margin: var(--s-2) 0; }
.fitia-comida { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-sm); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-2); }
.fitia-items { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-md); }
.fitia-items li { display: grid; grid-template-columns: 1.5em 1fr auto; gap: var(--s-2);
  align-items: baseline; padding: var(--s-2) var(--s-3); }
.fitia-items li + li { border-top: 1px solid var(--border); }
.fitia-marca { color: var(--text-2); text-align: center; }
.fitia-planeado, .fitia-planeado .fitia-marca { color: var(--text-3); }
.fitia-kcal { color: var(--text-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fitia-buscar { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-3) 0; }
.fitia-buscar input, .fitia-buscar .buscador { flex: 1 1 14rem; min-width: 0; }
.fitia-conectar > summary { cursor: pointer; font-weight: 600; font-size: var(--t-md); list-style: none; }
.fitia-conectar > summary::-webkit-details-marker { display: none; }
.fitia-conectar > summary::before { content: '▸ '; color: var(--text-3); }
.fitia-conectar[open] > summary::before { content: '▾ '; }
.fitia-conectar h3 { margin: var(--s-4) 0 var(--s-2); }
.fitia-pasos { margin: 0 0 var(--s-3); padding-left: 1.25em; color: var(--text-2); font-size: var(--t-sm); }
.fitia-pasos li + li { margin-top: var(--s-2); }
.fitia-codigo { font-family: var(--font-mono); font-size: var(--t-xs); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--s-2) var(--s-3);
  margin-top: var(--s-2); white-space: pre-wrap; word-break: break-all; }
.fitia-desconectar { margin-top: var(--s-4); }

/* ─── Lista de compras ──────────────────────────────────────────────────────
   Jaime (2026-09-15): «no me gusta cómo salen los listados, se ven muy
   horribles». Era una tabla de seis columnas: en el celular el nombre quedaba
   en tres renglones, la casilla era un ☐ de texto y el costo quedaba fuera de
   la pantalla. Ahora cada producto es una fila: casilla, nombre y costo, y
   debajo cuánto comprar. */
.compras-semanas { margin: 0 0 var(--s-4); border: 0; padding: 0; }
.compras-resumen { display: flex; flex-direction: column; gap: var(--s-3); }
.compras-progreso { display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); flex-wrap: wrap; }
.compras-grande { font-size: var(--t-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.compras-progreso small { display: block; color: var(--text-3); font-size: var(--t-sm); }
.compras-barra { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.compras-barra span { display: block; height: 100%; background: var(--ok-700); border-radius: inherit;
  transition: width .2s; }
.compras-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-2) var(--s-4); margin: 0; }
.compras-cifras dt { color: var(--text-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
.compras-cifras dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.compras-pasillo h2 { margin-bottom: var(--s-1); }
.compras-items { list-style: none; margin: 0; padding: 0; }
.compras-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-2); padding: var(--s-2) 0; }
.compras-item + .compras-item { border-top: 1px solid var(--border); }
.compras-item-simple { grid-template-columns: 1fr; }
.compras-marcar { margin: 0; }
.compras-casilla { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; }
.compras-casilla span { width: 24px; height: 24px; border: 2px solid var(--border-strong); border-radius: 7px;
  display: grid; place-items: center; transition: background .15s, border-color .15s; }
.compras-casilla:hover span { border-color: var(--primary); }
.comprado .compras-casilla span { background: var(--ok-700); border-color: var(--ok-700); }
.comprado .compras-casilla span::after { content: '✓'; color: var(--surface-1); font-size: var(--t-sm);
  font-weight: 800; line-height: 1; }
.compras-cuerpo { min-width: 0; }
.compras-linea { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.compras-nombre { font-weight: 600; }
.compras-costo { color: var(--text-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compras-detalle { color: var(--text-2); font-size: var(--t-sm); }
.compras-detalle b { color: var(--text-1); font-weight: 600; }
.comprado .compras-nombre { text-decoration: line-through; color: var(--text-3); }
.comprado .compras-cuerpo, .comprado .compras-acciones { opacity: .55; }
.compras-acciones { display: flex; }
.compras-accion { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 0;
  background: none; border-radius: var(--radius-md); cursor: pointer; font-size: var(--t-md);
  text-decoration: none; opacity: .6; }
.compras-accion:hover { opacity: 1; background: var(--surface-2); }
.compras-ayuda > summary { cursor: pointer; font-weight: 600; }
.compras-ayuda[open] > summary { margin-bottom: var(--s-2); }
.compras-todo { margin: 0; }

/* ═══ Navegar entre días y semanas, volver, buscar ═══════════════════════════
   Jaime (2026-09-15): «las barras de devolverse de todo el sistema se ven
   feas… también las de buscar». Una sola barra para moverse, un solo botón de
   volver y un solo cuadro de búsqueda, iguales en toda la app. */
.navegar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-1); margin: 0 0 var(--s-4);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.navegar-btn {
  display: inline-flex; align-items: center; gap: var(--s-1); flex: 0 0 auto;
  min-height: 44px; padding: 0 var(--s-3); border-radius: var(--radius-md);
  color: var(--text-2); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  transition: background .15s, color .15s;
}
.navegar-btn:hover { background: var(--hover); color: var(--text-1); }
.navegar-apagado { opacity: .3; }
.navegar-centro {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex: 1 1 auto;
  min-width: 0; flex-wrap: wrap; text-align: center;
}
.navegar-centro b { font-size: var(--t-base); font-weight: 700; color: var(--text-1); }
.navegar-hoy {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3);
  border-radius: 999px; background: var(--brand-50); color: var(--brand-700);
  font-size: var(--t-xs); font-weight: 600; text-decoration: none;
}
.navegar-hoy:hover { background: var(--brand-100); }
@media (max-width: 520px) {
  .navegar-btn span { display: none; }
  .navegar-btn { padding: 0 var(--s-2); min-width: 44px; justify-content: center; }
}

.volver {
  display: inline-flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-3);
  min-height: 36px; padding: 0 var(--s-3) 0 var(--s-2); border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--text-2); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
}
.volver:hover { background: var(--hover); color: var(--text-1); border-color: var(--border-strong); }

.buscador { position: relative; display: flex; align-items: center; width: 100%; }
.buscador svg { position: absolute; left: var(--s-3); color: var(--text-3); pointer-events: none; }
.buscador input {
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3) var(--s-2) 2.6rem;
  border-radius: 999px; background: var(--surface-1); border: 1px solid var(--border-strong);
  font-size: var(--t-base);
}
.buscador input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-50); outline: 0; }
.buscador input::-webkit-search-cancel-button { cursor: pointer; }

/* ─── Elegir un ejercicio (pesas) ─────────────────────────────────────────── */
.elegir-ej { display: flex; flex-direction: column; gap: var(--s-2); }
.elegir-ej-elegido { display: flex; align-items: center; gap: var(--s-2); margin: 0;
  color: var(--ok-700); font-size: var(--t-sm); }
.elegir-ej-elegido b { color: var(--text-1); font-size: var(--t-base); }
.elegir-ej-grupos { max-height: 19rem; overflow: auto; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-0); }
.elegir-ej-grupo + .elegir-ej-grupo { margin-top: var(--s-3); }
.elegir-ej-grupo h4 { margin: 0 0 var(--s-1); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.elegir-ej-lista { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.elegir-ej-op { min-height: 36px; padding: var(--s-1) var(--s-3); border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-1);
  font: inherit; font-size: var(--t-sm); cursor: pointer; text-align: left; }
.elegir-ej-op:hover { border-color: var(--primary); color: var(--primary); }
.elegir-ej-nada { margin: var(--s-2) 0 0; }

/* Los atajos bajo el título («Ver el plan», «Cambiar mis rutinas»): eran texto
   azul suelto; ahora son píldoras como el botón de volver, para que se vean
   como botones y no como frases. */
.atajos a.boton {
  min-height: 36px; padding: 0 var(--s-3); border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-2);
}
.atajos a.boton:hover { background: var(--hover); color: var(--text-1); border-color: var(--border-strong); text-decoration: none; }

/* ═══ El diario de comida, al estilo Fitia ═══════════════════════════════════
   Jaime (2026-09-16): «se ve un poco maluco… que se vea más ajustada a ese
   estilo». De las pantallas de Fitia: tarjetas blancas muy redondeadas sobre
   crema, el número grande «comido / meta», un arco con el rango, barras de
   macros verdes (grasa en amarillo), y cada alimento con ícono, porción, kcal y
   una casilla redonda verde. */
.dia-resumen {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 24px;
  padding: var(--s-4) var(--s-4) var(--s-3); margin-bottom: var(--s-4); text-align: center;
  box-shadow: 0 6px 24px oklch(0.3 0.05 80 / 0.06);
}
.dia-kcal { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dia-kcal b { color: var(--text-1); }
.dia-kcal span { font-size: var(--t-sm); font-weight: 500; color: var(--text-3); }
.dia-arco { width: min(100%, 22rem); height: auto; display: block; margin: var(--s-1) auto 0; }
.dia-arco-fondo { fill: none; stroke: var(--chip-bg); stroke-width: 12; stroke-linecap: round; }
.dia-arco-lleno { fill: none; stroke: var(--warn-500); stroke-width: 12; stroke-linecap: round; }
.dia-arco-ok { stroke: var(--ok-500); }
.dia-arco-pasado { stroke: var(--danger-500); }
.dia-arco-marca { stroke: var(--border-strong); stroke-width: 2; }
.dia-arco-meta { fill: var(--surface-1); stroke: var(--ok-500); stroke-width: 3; }
.dia-rango { display: flex; justify-content: space-between; width: min(100%, 20rem); margin: -6px auto var(--s-3);
  color: var(--text-3); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.dia-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.dia-macro { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dia-macro-nombre { font-size: var(--t-xs); color: var(--text-3); }
.dia-macro-cifra { font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.dia-macro-cifra b { color: var(--text-1); }
.dia-barra { display: block; width: 100%; height: 8px; margin-top: 4px; background: var(--chip-bg); border-radius: 999px; overflow: hidden; }
.dia-barra span { display: block; height: 100%; background: var(--ok-500); border-radius: inherit; }
.dia-macro-grasa .dia-barra span { background: var(--warn-500); }
.dia-nota { margin: var(--s-3) 0 0; color: var(--text-2); font-size: var(--t-sm); }

.dia-comida {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 24px;
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
}
.dia-comida-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.dia-comida-cab h2 { margin: 0; font-size: var(--t-md); }
.dia-comida-kcal { color: var(--text-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia-comida-kcal b { color: var(--text-1); font-size: var(--t-base); }
.dia-plato { margin: 2px 0 0; color: var(--text-3); font-size: var(--t-xs); }
.dia-filas { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.dia-fila { display: grid; grid-template-columns: 2rem 1fr auto 44px 32px; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; }
.dia-fila + .dia-fila { border-top: 1px solid var(--border); }
.dia-emoji { font-size: var(--t-lg); line-height: 1; text-align: center; }
.dia-nombre { min-width: 0; font-weight: 500; }
.dia-nombre small { display: block; color: var(--text-3); font-size: var(--t-xs); font-weight: 400; }
.dia-fila-kcal { color: var(--text-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* El apoyo de los dos lados de una tejetica tiene que ser la MISMA letra: el
   de la izquierda era --t-xs y el de la derecha heredaba --t-sm del padre, y
   13 px al lado de 14 px se lee como suciedad, no como jerarquía. */
.dia-fila-kcal small { color: var(--text-3); font-size: var(--t-xs); font-weight: 400; }
.dia-accion { margin: 0; display: contents; }
.dia-check { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dia-check span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center;
  transition: background .15s, border-color .15s; }
.dia-check:hover span { border-color: var(--ok-500); }
.comido .dia-check span { background: var(--ok-500); border-color: var(--ok-500); }
.comido .dia-check span::after { content: '✓'; color: #fff; font-weight: 800; font-size: var(--t-sm); line-height: 1; }
.comido .dia-nombre, .comido .dia-fila-kcal { color: var(--text-1); }
.dia-fila:not(.comido) .dia-nombre { color: var(--text-2); }
.dia-quitar { width: 32px; height: 44px; border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: var(--t-sm); opacity: .5; }
.dia-quitar:hover { opacity: 1; color: var(--danger-700); }

.dia-agregar { margin-top: var(--s-2); }
.dia-agregar > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--s-3); border-radius: 999px; background: var(--warn-50); color: var(--text-1); font-weight: 600; font-size: var(--t-sm); }
.dia-agregar > summary::-webkit-details-marker { display: none; }
.dia-agregar > summary:hover { background: var(--warn-500); }
.dia-buscar { display: flex; gap: var(--s-2); margin: var(--s-3) 0 var(--s-2); }
.dia-buscar .buscador { flex: 1 1 auto; }
.dia-boton { min-height: 44px; padding: 0 var(--s-4); border: 0; border-radius: 999px; background: var(--warn-500);
  color: var(--text-1); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.dia-boton:hover { filter: brightness(1.05); }
.dia-resultados-titulo { margin: var(--s-3) 0 var(--s-1); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.dia-resultados { list-style: none; margin: 0; padding: 0; }
.dia-resultados li { padding: var(--s-2) 0; border-top: 1px solid var(--border); }
.dia-resultado-cab { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); }
.dia-porciones { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.dia-porcion { min-height: 36px; padding: var(--s-1) var(--s-3); border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface-1); font: inherit; font-size: var(--t-xs); cursor: pointer; }
.dia-porcion b { color: var(--text-1); }
.dia-porcion:hover { border-color: var(--warn-500); background: var(--warn-50); }
.dia-a-mano { margin-top: var(--s-3); }
.dia-a-mano > summary { cursor: pointer; color: var(--text-3); font-size: var(--t-xs); }
.dia-mano { display: grid; grid-template-columns: 1fr 5rem 5rem auto; gap: var(--s-2); margin-top: var(--s-2); }
.dia-mano input { min-width: 0; }
@media (max-width: 520px) { .dia-mano { grid-template-columns: 1fr 1fr; } .dia-mano input[name="nombre"] { grid-column: 1 / -1; } }
.dia-comida-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--border); }
.dia-comida-pie .pasos { flex: 1 1 100%; }
.dia-fuente { color: var(--text-3); font-size: var(--t-xs); margin: var(--s-4) 0 0; }
details.total-dia > summary { cursor: pointer; list-style: none; }
details.total-dia > summary::-webkit-details-marker { display: none; }

/* ═══ Toda la sección Comida, con el mismo estilo que Comer hoy ═══════════════
   Jaime (2026-09-16): «todo lo de nutrición debería tener un estilo similar».
   Tarjetas muy redondeadas con sombra suave, botones en píldora (el principal
   en amarillo, como en Fitia), chips redondos. Se aplica por el grupo de la
   página (<body class="grupo-comida">), sin tocar cada plantilla. */
.grupo-comida .tarjeta, .grupo-comida .plegable, .grupo-comida .navegar {
  border-radius: 24px; box-shadow: 0 6px 24px oklch(0.3 0.05 80 / 0.05);
}
.grupo-comida button.primario, .grupo-comida .boton-solido {
  background: var(--warn-500); color: var(--text-1); border-radius: 999px; font-weight: 700;
}
.grupo-comida button.primario:hover { filter: brightness(1.05); }
.grupo-comida a.boton, .grupo-comida button.boton {
  min-height: 36px; padding: 0 var(--s-3); border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-2); font-size: var(--t-sm);
}
.grupo-comida a.boton:hover, .grupo-comida button.boton:hover { background: var(--hover); color: var(--text-1); text-decoration: none; border-color: var(--border-strong); }
.grupo-comida button.boton.peligro { color: var(--danger-700); }
.grupo-comida .aviso a.boton { display: inline-flex; }
.grupo-comida .chip { border-radius: 999px; }
.grupo-comida .cambiar { min-height: 32px; display: inline-flex; align-items: center; padding: 0 var(--s-3); background: var(--warn-50); color: var(--text-1); font-weight: 600; }
.grupo-comida .cambiar:hover { background: var(--warn-500); }
.grupo-comida .pasos > summary { color: var(--text-3); }

/* Comer hoy: el pie de cada comida («Cambiar plato», «No me gusta») como
   píldoras, no como frases azules. */
.dia-comida-pie a.boton, .dia-comida-pie button.boton { min-height: 36px; }
.dia-comida-pie form { margin: 0; }

/* El plan de la semana: cada comida como en Comer hoy, sin casillas. */
.plan-comida { padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.plan-comida:first-of-type { border-top: 0; }
.plan-comida h3 { margin: 0; font-size: var(--t-base); }
.plan-comida-hecha { opacity: .6; }
.plan-plato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: var(--s-1) 0; font-size: var(--t-sm); color: var(--text-2); }
.plan-plato b { color: var(--text-1); }
.dia-fila-plan { grid-template-columns: 2rem 1fr auto; }
/* ── TEJETICAS DE DATOS ──
   Jaime (2026-09-29): «las tejeticas donde sale fecha, cintura, cuello
   usualmente están a diferentes tamaños, no están alineadas».

   La causa exacta: la columna del valor era `auto`, o sea que MEDÍA LO QUE
   MIDIERA SU CONTENIDO — distinto en cada fila. «78,5 cm» y «103 cm» no
   arrancaban en la misma vertical, y con un `small` debajo el desajuste se
   duplicaba. Eso no es una tabla, es texto suelto a la derecha.

   Ahora la columna del valor tiene ANCHO FIJO (`--col-valor`), el número va
   alineado a la derecha con cifras tabulares, y el `small` de abajo se alinea
   con él. Las filas caen en la misma rejilla aunque el valor sea «5» o
   «1.899». El ancho se puede subir por tarjeta donde los valores son largos. */
.dia-fila-semana { grid-template-columns: 1fr var(--col-valor, 7.5rem); }
/* El NÚMERO no se parte («73,8 kg» nunca queda «73,8» arriba y «kg» abajo),
   pero el apoyo de abajo SÍ puede envolver: en Cuerpo dice «22,6 % grasa · 55 %
   agua · 30 kg músculo» y con `nowrap` heredado se salía de la tarjeta. */
.dia-fila-semana > .dia-fila-kcal { text-align: right; }
.dia-fila-semana > .dia-fila-kcal small { display: block; white-space: normal; }
/* El nombre y el valor arrancan arriba, no centrados: si un lado tiene dos
   líneas y el otro una, centrar los descuadra a los dos. */
.dia-fila-semana { align-items: start; }
.dia-fila-semana > .dia-nombre,
.dia-fila-semana > .dia-fila-kcal { line-height: 1.35; }
.dia-fila-semana .dia-nombre { color: var(--text-1); text-decoration: none; }
.dia-fila-semana .dia-nombre small .punto { display: inline-block; width: 7px; height: 7px; margin-left: 2px; vertical-align: middle; }
.dia-fila-hoy .dia-nombre { color: var(--brand-700); }
.dia-fila-plan .dia-nombre { color: var(--text-1); }
.dia-fijo { font-size: var(--t-xs); }
.total-nutri { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3);
  margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: 999px; background: var(--ok-50);
  font-size: var(--t-sm); color: var(--text-2); }
.total-nutri.total-fuera { background: var(--warn-50); }
.total-nutri-cifras { font-variant-numeric: tabular-nums; }
.total-nutri-cifras b { color: var(--text-1); }

/* Recetas: la tarjeta de cada plato como la de Fitia («🔥 380 kcal | 20P | 48C | 12G»). */
.grupo-comida .plato { border-radius: 20px; padding: var(--s-3) var(--s-4); }
.grupo-comida .plato-macros { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); font-size: var(--t-sm); }
.grupo-comida .plato-macros b { font-size: var(--t-base); }
.grupo-comida .plato-macros::before { content: '🔥'; }
.grupo-comida .plato-elegido { border-color: var(--warn-500); background: var(--warn-50); }
.grupo-comida button.plato:hover { border-color: var(--warn-500); }
.grupo-comida .plato-pie { margin-top: var(--s-2); }

/* La porción de cada fila se toca para cambiar la cantidad; y cada fila dice
   sus macros («no me aparecen las cantidades por alimento de proteína, carbos
   y grasa»). */
.dia-fila-kcal { text-align: right; }
.dia-fila-kcal small { display: block; color: var(--text-3); font-size: var(--t-micro); font-weight: 400; }
.dia-cant > summary { list-style: none; cursor: pointer; color: var(--text-3); font-size: var(--t-xs); font-weight: 400; }
.dia-cant > summary::-webkit-details-marker { display: none; }
.dia-cant > summary span { color: var(--warn-700); }
.dia-cant > summary:hover { color: var(--text-1); }
.dia-cant-form { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--t-xs); color: var(--text-2); }
.dia-cant-form input { width: 5.5rem; min-height: 40px; }
.dia-cant-form .dia-boton { min-height: 40px; padding: 0 var(--s-3); }

/* Mis alimentos, Lista de compras y Fitia, en el mismo estilo. */
.grupo-comida .dato { border-radius: 20px; }
.grupo-comida .ali-fila { border-radius: 16px; background: var(--surface-1); border-color: var(--border); padding: var(--s-2) var(--s-3); }
.grupo-comida .ali-fila.e-favorito { background: var(--warn-50); border-color: var(--warn-500); }
.grupo-comida .ali-fila.e-vetado { background: var(--surface-2); opacity: .6; }
.grupo-comida .seg { border-color: var(--border); }
.grupo-comida .seg-op input:checked + span { background: var(--surface-2); opacity: 1; }
.grupo-comida .seg-op:first-child input:checked + span { background: var(--warn-500); }
.grupo-comida .seg-op:last-child input:checked + span { background: var(--chip-bg); opacity: .8; }
.grupo-comida .compras-casilla span { border-radius: 50%; width: 28px; height: 28px; }
.grupo-comida .compras-item { grid-template-columns: auto 2rem 1fr auto; }
.grupo-comida .compras-item-simple { grid-template-columns: 2rem 1fr; }
.grupo-comida .compras-progreso .boton { min-height: 40px; }

/* «Me la comí toda»: lo normal es comerse la comida completa, no alimento por
   alimento. Verde cuando queda algo; apagado cuando ya está toda marcada. */
.dia-toda { display: block; margin: var(--s-3) 0 0; }
.dia-toda-boton { min-height: 40px; background: var(--ok-50); color: var(--ok-700); border: 1px solid var(--ok-500); }
.dia-toda-boton:hover { background: var(--ok-500); color: #fff; filter: none; }
.dia-toda-hecha { background: var(--surface-2); border-color: var(--border); color: var(--text-3); font-weight: 600; }
.dia-toda-hecha:hover { background: var(--hover); color: var(--text-2); }

.dia-comida-kcal { text-align: right; }
.dia-comida-kcal small { display: block; color: var(--text-3); font-size: var(--t-micro); }
.dia-comida-kcal small span { opacity: .8; }

/* ── AGENDA POR HORAS ──
   Jaime (2026-10-04): «tengo que hacer un calendario… para ajustar a mis horas
   de trabajo, de estudio, de lectura, de entrenamiento». Cada día es un bloque
   con su propia separación, no una tabla: en el teléfono una rejilla de 7×18
   horas no se lee, y la pregunta real («¿a qué hora cabe?») se responde día a
   día. El día de HOY se marca con la barra de la izquierda, no con fondo: el
   fondo pelea con los puntos de color de cada deporte. */
.agenda-dia { padding-top: var(--s-4); }
.agenda-dia + .agenda-dia { border-top: 1px solid var(--border); }
.agenda-dia > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-1); }
.agenda-dia > h3 > small { font-weight: 400; }
.agenda-hoy { border-left: 3px solid var(--primary); margin-left: calc(var(--s-3) * -1);
  padding-left: var(--s-3); }

/* ── EL PANEL QUE SE ABRE EN UNA SESIÓN ──
   Jaime (2026-10-04): «el diseño de las tarjetas de natación, bici, etc… se
   abren como feo y todo».

   Tenía razón y la causa era estructural, no de color. Dentro de un
   `<details>` se apilaban CUATRO sub-bloques —los bloques de la sesión, el por
   qué, la movilidad y la compra— y cada uno traía su propio tamaño de letra, su
   propia sangría y sus propios márgenes. Peor: la lista de bloques se CERRABA
   para meter el core en un div y se volvía a abrir con márgenes distintos, así
   que al abrir la tarjeta la sangría daba un salto a mitad de la lista.

   Ahora el panel tiene un ritmo vertical único (un solo `gap`), la lista es UNA
   y el core es un ítem destacado dentro de ella. Lo que se abre se lee como una
   sola cosa, no como cuatro pegadas. */
.detalle-sesion[open] > summary { margin-bottom: var(--s-3); }
.detalle-sesion[open] { display: flex; flex-direction: column; gap: var(--s-3); }
.detalle-sesion[open] > * { margin: 0; }

.bloques-sesion { list-style: none; margin: 0; padding: 0; font-size: var(--t-base); }
.bloques-sesion > li { padding: var(--s-2) 0; }
.bloques-sesion > li + li { border-top: 1px solid var(--border); }
.bloques-sesion > li > b { display: block; margin-bottom: 2px; }
.bloques-sesion > li > span { color: var(--text-2); }
/* El core se destaca sin romper la lista: barra de color y fondo, no un bloque
   aparte. Dentro de la lista era «un ejercicio más entre ocho» y no se
   encontraba; fuera de ella partía la sangría en dos. */
.bloques-sesion > li.es-core {
  margin: var(--s-1) 0; padding: var(--s-2) var(--s-3);
  background: var(--accent-50); border-left: 3px solid var(--accent-500);
  border-radius: var(--radius-md); font-size: var(--t-sm);
}
.bloques-sesion > li.es-core + li { border-top: 0; }
.porque-sesion { font-style: normal; }

/* Y los dos sub-bloques comparten caja, en vez de que uno sea una tarjeta y el
   otro texto suelto. */
.detalle-sesion .movilidad, .detalle-sesion .compra-salida {
  margin: 0; padding: var(--s-3); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--t-sm);
}

/* ── LA AGENDA COMO COLUMNA DE HORAS ──
   Jaime (2026-10-04): «es importante hacer una agenda no improvisada pero muy
   bien diseñada para tener el día y ya saber de qué hora a qué hora estoy
   trabajando». La primera versión era una lista ordenada por hora, y una lista
   no responde eso: hay que leerla y sumar. Acá cada cosa OCUPA el alto de su
   duración, así que el día ocupado se ve macizo y los ratos libres se ven como
   huecos, sin leer un número.

   Posición y alto van en PORCENTAJE (los calcula `agenda.rejilla`), así que la
   altura de la pista es lo único que decide el CSS y escala sola. */
.agenda-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3); }
.agenda-cab > h2 { margin: 0; }
.agenda-nav { display: flex; gap: var(--s-2); }

.agenda-rejilla { display: grid; grid-template-columns: 3.4rem repeat(7, minmax(0, 1fr));
  gap: var(--s-1); }
.agenda-horas { position: relative; height: 34rem; margin-top: 1.9rem; }
.agenda-horas > span { position: absolute; right: var(--s-2); transform: translateY(-50%);
  font-size: var(--t-micro); color: var(--text-3); font-variant-numeric: tabular-nums; }

.agenda-col { min-width: 0; }
.agenda-col-cab { display: flex; flex-direction: column; align-items: center; line-height: 1.2;
  padding-bottom: var(--s-1); font-size: var(--t-xs); }
.agenda-col-cab > small { color: var(--text-3); font-size: var(--t-micro);
  font-variant-numeric: tabular-nums; }
.agenda-col.es-hoy .agenda-col-cab { color: var(--primary); font-weight: 700; }

.agenda-pista { position: relative; height: 34rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.agenda-col.es-hoy .agenda-pista { border-color: var(--primary); }
.agenda-linea { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }

.agenda-pieza { position: absolute; left: 2px; right: 2px; overflow: hidden;
  padding: 2px 4px; border-radius: 4px; font-size: var(--t-micro); line-height: 1.25;
  border-left: 3px solid var(--c, var(--text-3));
  background: color-mix(in oklch, var(--c, var(--text-3)) 16%, var(--surface-1)); }
.agenda-pieza > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-pieza > small { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* El entreno pesa más que un bloque de agenda: es lo que la app está para
   colocar. Y la hora FIJA se marca de lleno, porque no se negocia. */
.agenda-pieza.es-entreno { background: color-mix(in oklch, var(--c, var(--text-3)) 26%, var(--surface-1));
  border-left-width: 4px; font-weight: 500; }
.agenda-pieza.es-fija { box-shadow: inset 0 0 0 1px var(--c, var(--text-3)); }

/* En el teléfono siete columnas de horas no se leen: se pasa a un día por fila,
   con la columna de horas a la izquierda y la pista más baja. */
@media (max-width: 760px) {
  .agenda-rejilla { grid-template-columns: 3.4rem 1fr; }
  .agenda-horas { display: none; }
  .agenda-col { display: grid; grid-template-columns: 3.4rem 1fr; gap: var(--s-2);
    grid-column: 1 / -1; align-items: start; }
  .agenda-col-cab { align-items: flex-start; padding-top: var(--s-2); }
  .agenda-pista { height: 11rem; }
  .agenda-pieza { font-size: var(--t-xs); }
}