/* ═══════════════════════════════════════════════════════════════════════════
   Arz — 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; Arz 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 ═════════════════════════════════════════════════════════
   El armazón (pestañas, chips, encabezado) está en «ARMAZÓN», más abajo. */

.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, div.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, div.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); }

/* 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) {
  .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; }
  .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); }

/* ═══ 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-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; }
.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: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-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 span { min-width: 0; color: var(--text-1); }
.ing-check:has(input:not(:checked)) span { color: var(--text-3); text-decoration: line-through; }
.ing-cant input { width: 4.5rem; min-height: 36px; padding: 2px var(--s-2); text-align: right; font-variant-numeric: tabular-nums; }
.ing-cant select { width: auto; min-height: 36px; padding: 2px var(--s-1); }
.ing-kcal:empty { display: none; }
.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-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-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».
   Arz (2026-10-13): ya no tiene piel propia (sombras, ámbar «como Fitia"):
   se ve como el resto; aquí queda solo la estructura de sus piezas. Se aplica por el grupo de la
   página (<body class="grupo-comida">), sin tocar cada plantilla. */
.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); font-weight: 600; }
.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-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 .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-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: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; }

/* ── 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);
}


/* Calor y hora: el color dice el nivel de la sensación térmica. */
.calor-barra { display: block; height: 6px; margin-top: var(--s-1); border-radius: 3px; background: var(--border); overflow: hidden; }
.calor-barra > span { display: block; height: 100%; background: currentColor; }
.calor-normal .calor-barra, .calor-precaucion .calor-barra { color: var(--ok-500); }
.calor-extrema .calor-barra { color: var(--warn-500); }
.calor-peligro .calor-barra, .calor-extremo .calor-barra { color: var(--danger-500); }
.calor-peligro .dia-fila-kcal, .calor-extremo .dia-fila-kcal { color: var(--danger-700); }
.calor-extrema .dia-fila-kcal { color: var(--warn-700); }

/* Zapatos: el precio legítimo más barato resalta; la réplica y lo viejo se apagan. */
.zapato-no > p { opacity: .8; }
.zapato-precios { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-1); }
.zapato-precios li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.zapato-precios small { flex-basis: 100%; }
.zapato-precio { font-family: var(--font-num); font-weight: 600; min-width: 6.5rem; }
.zapato-precios .es-mejor .zapato-precio { color: var(--ok-700); }
.zapato-precios .es-replica { opacity: .55; }
.zapato-precios .es-replica .zapato-precio { text-decoration: line-through; }
.zapato-precios .es-viejo .zapato-precio { color: var(--warn-700); }

/* Plano precio × calidad de los zapatos: una serie, ejes discretos. */
.plano-zapatos { margin: var(--s-3) 0 var(--s-4); }
.plano-zapatos svg { width: 100%; height: auto; display: block; overflow: visible; }
.plano-grilla { stroke: var(--border); stroke-width: 1; }
.plano-base { stroke: var(--text-3); stroke-width: 1; opacity: .5; }
.plano-eje, .plano-titulo { font: 11px var(--font-num); fill: var(--text-3); }
.plano-etiqueta { font: 600 12px var(--font-num); fill: var(--text-1); paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; }
.plano-rango { stroke: var(--accent-600); stroke-width: 2; stroke-linecap: round; opacity: .45; }
.plano-marca { fill: var(--accent-600); stroke: var(--surface-1); stroke-width: 2; }
.plano-punto.es-no .plano-marca { fill: var(--surface-1); stroke: var(--accent-600); stroke-width: 2; }
.plano-hit { fill: transparent; }
.plano-punto:hover .plano-marca { r: 8; }

/* ══ AGENDA (diseño aprobado, repo `fit`, 2026-10-11) ══════════════════════
   Línea de tiempo de 5 a 22. Lo del reloj en SÓLIDO (es un hecho), lo planeado
   en TONO claro, lo pasado a media opacidad con check, lo movido con su hora
   original tachada, la logística RAYADA pegada al bloque, el ladrillo unido y
   el calor de fondo. Las posiciones las calcula agenda_dia.vista en px; acá
   solo se pinta. Colores y tipos del diseño, con su versión oscura. */
.ag {
  --ag-bg: #F6F4EF; --ag-sup: #FFFFFF; --ag-tinta: #1C1B19; --ag-2: #625D55; --ag-3: #8E887E;
  --ag-linea: #E4DFD6; --ag-hora: #ECE8E0; --ag-ahora: #D2481F; --ag-calor: 214, 110, 50;
  --ag-link: #2459B8; --ag-caliente: #A9542A;
  color: var(--ag-tinta); font-family: var(--font-body); font-variant-numeric: tabular-nums;
}
.ag .cat-swim  { --s: #2459B8; --t: #E3ECFB; --i: #173E82; }
.ag .cat-bike  { --s: #1F7A52; --t: #DDF0E5; --i: #145638; }
.ag .cat-run   { --s: #B4501A; --t: #FBE7D8; --i: #7F3610; }
.ag .cat-str   { --s: #6A48C9; --t: #ECE6FA; --i: #47308F; }
.ag .cat-work  { --s: #5E5850; --t: #ECE8E1; --i: #3E3A34; }
.ag .cat-study { --s: #7A6A55; --t: #F0E9DE; --i: #4E4232; }
.ag .cat-life  { --s: #8A847A; --t: #F2EFE9; --i: #4A463F; }
/* Google: blanco con borde #C9D2DD (diseño fit, LEEME) */
.ag .cat-gcal  { --s: #C9D2DD; --t: #FFFFFF; --i: #1C1B19; }
.dark .ag {
  --ag-bg: #141311; --ag-sup: #1E1D1A; --ag-tinta: #EEEBE5; --ag-2: #A8A298; --ag-3: #7D776E;
  --ag-linea: #2E2B27; --ag-hora: #23211E; --ag-ahora: #F07A4A; --ag-link: #9DB9F0; --ag-caliente: #E39A6B;
}
.dark .ag .cat-swim  { --s: #3567C4; --t: #1B2842; --i: #BCD0F6; }
.dark .ag .cat-bike  { --s: #22825A; --t: #152D24; --i: #A9DEC2; }
.dark .ag .cat-run   { --s: #B5531B; --t: #36231A; --i: #F3C4A2; }
.dark .ag .cat-str   { --s: #6C4ED0; --t: #272040; --i: #D0C1F5; }
.dark .ag .cat-work  { --s: #5E5850; --t: #252320; --i: #DAD4C9; }
.dark .ag .cat-study { --s: #7A6A55; --t: #2A2620; --i: #E0D3C0; }
.dark .ag .cat-life  { --s: #8A847A; --t: #211F1C; --i: #D2CCC2; }
.dark .ag .cat-gcal  { --s: #4A5563; --t: #1E1D1A; --i: #EEEBE5; }

/* Cabecera, tira de días y tarjeta de cambios */
.ag-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: var(--s-3); margin-bottom: var(--s-4); }
.ag-cab-der { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ag-fecha { font-size: 13px; color: var(--ag-2); }
.ag-h1 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 36px; text-transform: none;
  letter-spacing: -0.5px; line-height: 1.05; }
.ag-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  padding: 7px 11px; border-radius: 99px; background: var(--ag-sup); border: 1px solid var(--ag-linea); }
.ag-vista { display: flex; padding: 3px; border-radius: 12px; background: var(--ag-hora); }
.ag-vista a { display: flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 9px;
  text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--ag-2); }
.ag-vista a[aria-current] { background: var(--ag-sup); color: var(--ag-tinta); font-weight: 600; }
.ag-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--s-4); }
.ag-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px;
  min-height: 44px; border-radius: 14px; text-decoration: none; color: var(--ag-tinta); }
.ag-dia-l { font-size: 11px; font-weight: 500; opacity: .75; }
.ag-dia-n { font-size: 17px; font-weight: 600; }
.ag-dia.es-hoy .ag-dia-n { color: var(--ag-ahora); }
.ag-dia-carga { width: calc(4px + var(--n) * 4px); height: 4px; border-radius: 2px; background: var(--ag-2); opacity: .55; }
.ag-dia.es-sel { background: var(--ag-tinta); color: var(--ag-bg); }
.ag-dia.es-sel .ag-dia-n { color: inherit; }
.ag-dia.es-sel .ag-dia-carga { background: var(--ag-bg); opacity: 1; }
.ag-card { padding: 16px; border-radius: 18px; background: var(--ag-sup); border: 1px solid var(--ag-linea);
  margin-bottom: var(--s-4); }
.ag-card-t { margin: 0 0 12px; font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.ag-cambios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; line-height: 1.35; }
.ag-cambios li { display: flex; gap: 8px; align-items: baseline; }
.ag-cambios b { font-weight: 600; }
.ag-cambios a { color: var(--ag-link); }
.ag-punto { width: 8px; height: 8px; border-radius: 4px; flex: none; background: var(--s); display: inline-block; }

/* La línea de tiempo */
.ag-linea { position: relative; margin: 0 0 var(--s-5); }
/* En el teléfono la barra de abajo es fija: que no tape la noche. */
@media (max-width: 760px) { .ag { padding-bottom: 96px; } }
.ag-hora-l { position: absolute; left: 52px; right: 0; height: 1px; background: var(--ag-hora); }
.ag-hora { position: absolute; left: 0; width: 44px; transform: translateY(-7px); text-align: right;
  font: 500 11px/14px var(--font-num); color: var(--ag-3); }
.ag-temp { position: absolute; left: 0; width: 44px; transform: translateY(8px); text-align: right;
  font: 500 10px/12px var(--font-num); color: var(--ag-3); }
.ag-temp.es-caliente { color: var(--ag-caliente); }
.ag-calor { position: absolute; left: 52px; right: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ag-calor), 0) 0%, rgba(var(--ag-calor), .10) 25%,
    rgba(var(--ag-calor), .15) 50%, rgba(var(--ag-calor), .10) 75%, rgba(var(--ag-calor), 0) 100%); }
.dark .ag-calor { background: linear-gradient(180deg, rgba(var(--ag-calor), 0) 0%, rgba(var(--ag-calor), .12) 25%,
    rgba(var(--ag-calor), .17) 50%, rgba(var(--ag-calor), .12) 75%, rgba(var(--ag-calor), 0) 100%); }
.ag-bloque, .ag-logi, .ag-fantasma {
  position: absolute; box-sizing: border-box; overflow: hidden;
  top: calc(var(--top) + 1px); height: calc(var(--alto) - 2px);
  left: calc(58px + (100% - 58px) * var(--carril, 0) / var(--carriles, 1));
  width: calc((100% - 58px) / var(--carriles, 1) - 2px);
}
.ag-bloque { all: unset; position: absolute; box-sizing: border-box; overflow: hidden; cursor: default;
  top: calc(var(--top) + 1px); height: calc(var(--alto) - 2px);
  left: calc(58px + (100% - 58px) * var(--carril, 0) / var(--carriles, 1));
  width: calc((100% - 58px) / var(--carriles, 1) - 2px);
  display: flex; flex-direction: column; justify-content: flex-start; padding: 7px 10px;
  border-radius: 10px; background: var(--t); color: var(--i); border: 1px solid rgba(0, 0, 0, .05);
  font-family: var(--font-body); text-decoration: none; }
button.ag-bloque, a.ag-bloque { cursor: pointer; }
button.ag-bloque:focus-visible, a.ag-bloque:focus-visible { outline: 2px solid var(--s); outline-offset: 1px; }
.dark .ag-bloque { border-color: rgba(255, 255, 255, .06); }
.ag-bloque.es-compacto { justify-content: center; padding: 0 10px; }
.ag-bloque.es-hecho { background: var(--s); color: #fff; border: none; }
.ag-bloque.es-pasado { opacity: .5; }
.ag-bloque.es-hecho.es-pasado { opacity: .82; }
.ag-bloque.es-perdida { opacity: .7; border-style: dashed; }
.ag-bloque.ladrillo-arriba { border-radius: 10px 10px 0 0; height: calc(var(--alto) - 1px); }
.ag-bloque.ladrillo-abajo { border-radius: 0 0 10px 10px; top: var(--top); height: calc(var(--alto) - 1px);
  border-top: 1px dashed rgba(0, 0, 0, .14); }
.dark .ag-bloque.ladrillo-abajo { border-top-color: rgba(255, 255, 255, .18); }
.ag-b-fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ag-b-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-b-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; opacity: .9; }
.ag-b-pill { font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 99px; background: var(--s); color: #fff; }
.ag-b-esp { flex: 1; }
.ag-b-meta { font-size: 12px; white-space: nowrap; opacity: .85; }
.ag-b-check { flex: none; }
.ag-b-sub { font-size: 12px; line-height: 1.35; margin-top: 2px; opacity: .9; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ag-logi { top: var(--top); height: var(--alto); border-radius: 0 0 8px 8px; display: flex; align-items: center;
  padding: 0 10px; color: var(--ag-2); font-size: 10.5px; font-weight: 500;
  background: repeating-linear-gradient(135deg, var(--t) 0 5px, transparent 5px 10px); }
.ag-logi.es-pasado { opacity: .55; }
.ag-fantasma { border: 1.5px dashed var(--ag-linea); border-radius: 10px; display: flex; align-items: center;
  justify-content: flex-end; padding: 0 10px; color: var(--ag-3); font-size: 11px; text-align: right; }
.ag-ahora { position: absolute; left: 52px; right: 0; height: 2px; background: var(--ag-ahora); z-index: 3; }
.ag-ahora::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px;
  border-radius: 5px; background: var(--ag-ahora); }
.ag-ahora-l { position: absolute; left: 4px; width: 40px; transform: translateY(-9px); text-align: center;
  font: 600 11px/18px var(--font-num); color: #fff; background: var(--ag-ahora); border-radius: 9px; z-index: 3; }

/* Lo que quedó fuera del día */
.ag-bandeja { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: var(--s-3);
  border-radius: 18px; background: var(--ag-sup); border: 1px dashed var(--ag-linea); }
.ag-bandeja-i { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center;
  justify-content: center; background: var(--ag-hora); }
.ag-bandeja-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.ag-bandeja-txt small { font-size: 13px; color: var(--ag-2); }
.ag-bandeja form { margin: 0; }

/* Botones de la agenda */
.ag-btn-pri, .ag-btn-sec { all: unset; cursor: pointer; box-sizing: border-box; min-height: 52px; padding: 0 14px;
  border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500; text-align: center; width: 100%; }
.ag-btn-pri { background: var(--ag-tinta); color: var(--ag-bg); font-weight: 600; }
.ag-btn-sec { border: 1px solid var(--ag-linea); color: var(--ag-tinta); }
.ag-btn-sec.es-suave { color: var(--ag-2); }
.ag-bandeja .ag-btn-sec, .ag-cab .ag-btn-sec { width: auto; min-height: 40px; font-size: 13px; font-weight: 600; }
.ag-btn-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; border: 1px solid var(--ag-linea); background: var(--ag-sup); color: var(--ag-tinta);
  text-decoration: none; font-size: 20px; }

/* La hoja de acciones de un bloque */
.ag-hoja { border: none; margin: auto auto 0; width: 100%; max-width: 520px; box-sizing: border-box;
  padding: 10px 20px 24px; border-radius: 28px 28px 0 0; background: var(--ag-sup); color: var(--ag-tinta); }
@media (min-width: 640px) { .ag-hoja { margin: auto; border-radius: 24px; } }
.ag-hoja::backdrop { background: rgba(20, 19, 17, .38); }
.ag-hoja-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--ag-linea); margin: 0 auto 14px; }
.ag-hoja-cab { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ag-hoja-tipo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; color: var(--ag-2); }
.ag-hoja-cab h2 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.15; }
.ag-hoja-cab p { margin: 0; font-size: 14px; color: var(--ag-2); }
.ag-hoja-logi { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px;
  background: var(--ag-bg); font-size: 13px; margin-bottom: 14px; }
.ag-hoja-logi div { display: flex; justify-content: space-between; }
.ag-hoja-logi .es-total { font-weight: 600; padding-top: 6px; border-top: 1px solid var(--ag-linea); }
.ag-hoja-calor { margin: 0 0 14px; font-size: 13px; color: var(--ag-2); }
.ag-hoja-calor.es-caliente { color: var(--ag-caliente); }
.ag-hoja-nota { margin: 0 0 14px; font-size: 13px; color: var(--ag-2); }
.ag-hoja-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ag-hoja-botones form { margin: 0; }
.ag-otra { grid-column: span 1; }
.ag-otra[open] { grid-column: 1 / -1; }
.ag-otra summary { list-style: none; }
.ag-otra summary::-webkit-details-marker { display: none; }
.ag-otra-horas { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ag-2); }
.ag-otra-horas > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-otra-horas form { margin: 0; display: flex; gap: 6px; }
.ag-otra-horas button { all: unset; cursor: pointer; box-sizing: border-box; min-height: 44px; min-width: 60px;
  padding: 0 14px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; background: var(--ag-bg); color: var(--ag-tinta); }
.ag-otra-libre input[type="time"] { min-height: 44px; border-radius: 12px; }
.ag-otro-dia { grid-column: 1 / -1; display: flex; gap: 8px; align-items: end; }
.ag-otro-dia label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ag-2); }
.ag-otro-dia select { min-height: 44px; border-radius: 12px; }
.ag-hoja-cerrar { all: unset; cursor: pointer; display: block; margin: 14px auto 0; padding: 8px 16px;
  font-size: 13px; color: var(--ag-2); }

/* La semana (escritorio) */
.ag-semana { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-5); }
.ag-lado { flex: 1 1 220px; max-width: 260px; display: flex; flex-direction: column; gap: var(--s-4); }
.ag-lado-t { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ag-3); }
.ag-leyenda, .ag-colores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 6px; font-size: 12.5px; color: var(--ag-2); }
.ag-colores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; color: var(--ag-tinta); }
.ag-leyenda li, .ag-colores li { display: flex; align-items: center; gap: 8px; }
.ag-muestra { width: 22px; height: 12px; border-radius: 3px; flex: none; }
.ag-muestra.es-solido { background: #2459B8; }
.ag-muestra.es-tono { background: #E3ECFB; border: 1px solid rgba(0, 0, 0, .06); }
.ag-muestra.es-rayado { background: repeating-linear-gradient(135deg, #E3ECFB 0 4px, transparent 4px 8px); }
.ag-muestra.es-calor { background: rgba(214, 110, 50, .18); }
.ag-resumen { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 13.5px; padding: 3px 0; }
.ag-resumen span { color: var(--ag-2); }
.ag-sem-main { flex: 999 1 560px; min-width: 0; }
.ag-sem-rejilla { overflow-x: auto; border-radius: 18px; background: var(--ag-sup); border: 1px solid var(--ag-linea); }
.ag-sem-cabeza, .ag-sem-cuerpo { display: grid; grid-template-columns: 52px repeat(7, minmax(110px, 1fr)); min-width: 820px; }
.ag-sem-cabeza { border-bottom: 1px solid var(--ag-linea); }
.ag-sem-dia { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 10px;
  border-left: 1px solid var(--ag-hora); text-decoration: none; color: var(--ag-tinta); }
.ag-sem-dia.es-hoy b { color: #fff; background: var(--ag-tinta); border-radius: 8px; padding: 0 7px; }
.dark .ag-sem-dia.es-hoy b { color: var(--ag-bg); }
.ag-sem-nombre { font-size: 13px; color: var(--ag-2); }
.ag-sem-nombre b { font-size: 18px; color: var(--ag-tinta); }
.ag-sem-carga { height: 4px; border-radius: 2px; background: var(--ag-hora); overflow: hidden; }
.ag-sem-carga span { display: block; height: 4px; border-radius: 2px; background: var(--ag-2); }
.ag-sem-dia small { font-size: 11.5px; color: var(--ag-2); }
.ag-sem-cuerpo { position: relative; }
.ag-sem-horas { position: relative; }
.ag-sem-horas .ag-hora { left: 0; width: 44px; font-size: 10.5px; }
.ag-sem-col { margin: 0; border-left: 1px solid var(--ag-hora); }
.ag-sem-col .ag-hora-l, .ag-sem-col .ag-calor, .ag-sem-col .ag-ahora { left: 0; }
.ag-sem-col .ag-ahora::before { display: none; }
.ag-sem-col.es-hoy { background: rgba(251, 250, 247, .6); }
.dark .ag-sem-col.es-hoy { background: rgba(255, 255, 255, .02); }
.ag-sem-col .ag-bloque, .ag-sem-col .ag-logi { left: 3px; width: calc(100% - 6px);
  left: calc(3px + (100% - 6px) * var(--carril, 0) / var(--carriles, 1));
  width: calc((100% - 6px) / var(--carriles, 1) - 1px); padding: 4px 6px; border-radius: 7px; }
.ag-sem-col .ag-bloque.es-compacto { padding: 0 6px; }
.ag-sem-col .ag-b-t { font-size: 11.5px; }
.ag-sem-col .ag-b-sub { font-size: 10.5px; }
.ag-sem-col .ag-bloque.es-movido { outline: 1.5px solid var(--s); outline-offset: -1.5px; }
.ag-sem-libre { position: absolute; left: 8px; right: 8px; top: 40%; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ag-3); }
.ag-plana { margin-bottom: 0; }

/* ─── Agenda, fase 2 (2026-10-12): Nuevo, Ajustes, Mes, arrastrar ─────────── */
.ag .cat-other    { --s: #B9B2A6; --t: #F4F1EC; --i: #4A463F; }
.ag .cat-agregado { --s: transparent; --t: var(--ag-sup); --i: var(--ag-tinta); }
.dark .ag .cat-other { --s: #8F887C; --t: #24221F; --i: #D2CCC2; }
.ag .ag-punto.cat-agregado { box-shadow: inset 0 0 0 1.5px #4D5F75; }
.dark .ag .ag-punto.cat-agregado { box-shadow: inset 0 0 0 1.5px #9DB0C6; }

/* La línea de dormir y lo que choca */
.ag-dormir { position: absolute; left: 52px; right: 0; height: 0; border-top: 2px dashed var(--ag-3); z-index: 2; }
.ag-dormir span { position: absolute; right: 0; top: -22px; font-size: 11.5px; font-weight: 600; color: var(--ag-2);
  background: var(--ag-bg); padding: 0 6px; border-radius: 6px; }
.ag-sem-col .ag-dormir { left: 0; }
.ag-bloque.es-choque { outline: 2px solid var(--ag-ahora); outline-offset: -2px; }
.ag-b-pill.es-choque { background: var(--ag-ahora); color: #fff; }
.ag-bloque.es-reserva { background: repeating-linear-gradient(135deg, var(--t) 0 8px, var(--ag-sup) 8px 16px);
  border-style: dashed; }
.ag-hoja-aviso { margin: 4px 0 0; font-size: 13px; color: var(--ag-ahora) !important; }

/* Arrastrar */
.ag-bloque[data-ref] { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; }
.ag-bloque.es-arrastre { cursor: grabbing; z-index: 6; box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  transform: scale(1.02); opacity: 1 !important; }
.ag-arrastre-hora { position: absolute; right: 8px; bottom: 4px; font: 700 12px var(--font-num);
  background: var(--ag-tinta); color: var(--ag-bg); padding: 2px 6px; border-radius: 6px; }

/* Botón flotante «+» (TabBar.dc.html) */
.dark .ag-fab { background: #3567C4; }
@media (max-width: 760px) { .ag-fab { bottom: 84px; right: 16px; } }

.ag-bandeja.es-decidir { align-items: flex-start; }
.ag-bandeja-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ag-bandeja-acc form { display: flex; gap: 6px; }
.ag-bandeja-acc input[type="time"] { min-height: 40px; border-radius: 12px; }
.ag-bandeja-acc .ag-otra-libre button { all: unset; cursor: pointer; min-height: 40px; padding: 0 12px; border-radius: 12px;
  background: var(--ag-tinta); color: var(--ag-bg); font-size: 13px; font-weight: 600; display: flex; align-items: center; }
.ag-bandeja-acc .ag-btn-sec { width: auto; min-height: 40px; font-size: 13px; }

/* Controles comunes de formulario */
.ag-etq { display: block; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ag-3); margin: 0 0 8px; padding: 0; }
.ag-etq-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ag-num { font-family: var(--font-num); font-size: 13px; color: var(--ag-2); }
.ag-ayuda { font-size: 13px; color: var(--ag-2); margin: 8px 0 0; }
.ag-ayuda a, .ag-nuevo a, .ag-fila small a, .ag-fecha a { color: var(--ag-link); }
.ag input[type="text"], .ag input[type="time"], .ag input[type="date"], .ag input[type="number"], .ag select {
  box-sizing: border-box; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ag-linea);
  background: var(--ag-sup); color: var(--ag-tinta); font: 500 15px var(--font-body); font-variant-numeric: tabular-nums; }
.ag-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 14px; background: var(--ag-hora); }
.ag-seg input, .ag-chip-op input, .ag-tipo input, .ag-semana-sel input { position: absolute; opacity: 0; pointer-events: none; }
.ag-seg label { position: relative; cursor: pointer; }
.ag-seg span { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: var(--ag-2); }
.ag-seg input:checked + span { background: var(--ag-sup); color: var(--ag-tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ag-seg input:focus-visible + span, .ag-chip-op input:focus-visible + span, .ag-tipo:focus-within,
.ag-semana-sel input:focus-visible + span { outline: 2px solid var(--ag-link); outline-offset: 2px; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-chip-op { position: relative; cursor: pointer; text-decoration: none; }
.ag-chip-op span { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px;
  font-size: 13.5px; font-weight: 500; background: var(--ag-hora); color: var(--ag-tinta); }
.ag-chip-op.es-chico span { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.ag-chip-op input:checked + span, .ag-chip-op.es-on span { background: var(--ag-tinta); color: var(--ag-bg); font-weight: 600; }

/* Nuevo bloque */
.ag-nuevo { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ag-nuevo .ag-card { margin: 0; }
.ag-nuevo-cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.ag-nuevo-cab a { font-size: 15px; text-decoration: none; }
.ag-nuevo-cab .ag-h1 { font-size: 24px; margin: 0; }
.ag-texto { width: 100%; min-height: 52px !important; font-size: 17px !important; }
.ag-entendi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--ag-2); }
.ag-entendi #fichas { display: contents; }
.ag-ficha { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 8px;
  background: var(--ag-hora); color: var(--ag-tinta); font-size: 12.5px; font-weight: 600; }
.ag-ejemplos { margin: 10px 0 0; font-size: 12px; color: var(--ag-3); }
.ag-nuevo #nombre { width: 100%; }
.ag-tipos { border: 1px solid var(--ag-linea); }
.ag-tipos-rej { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ag-tipo { position: relative; cursor: pointer; min-height: 64px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; border-radius: 14px; font-size: 12.5px; font-weight: 500;
  border: 1.5px solid var(--ag-linea); background: var(--ag-sup); }
.ag-tipo .ag-punto { width: 10px; height: 10px; border-radius: 5px; }
.ag-tipo:has(input:checked) { border-color: var(--s); font-weight: 600; background: var(--ag-bg); }
.ag-cuando { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ag-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ag-2); }
.ag-campo[hidden] { display: none; }
.ag-dur > div { display: flex; align-items: center; gap: 6px; }
.ag-dur input { width: 76px; text-align: center; }
.ag-semana-sel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ag-semana-sel label { position: relative; cursor: pointer; }
.ag-semana-sel span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px;
  font-size: 14px; font-weight: 600; background: var(--ag-hora); color: var(--ag-2); }
.ag-semana-sel input:checked + span { background: var(--ag-tinta); color: var(--ag-bg); }
.ag-gcal { display: flex; gap: 12px; align-items: flex-start; color: var(--ag-2); }
.ag-gcal div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ag-tinta); }
.ag-gcal small { font-size: 12.5px; color: var(--ag-2); }
.ag-nuevo-pie { position: sticky; bottom: 12px; z-index: 5; }
@media (max-width: 760px) { .ag-nuevo-pie { bottom: 76px; } }
.ag-agregar { flex-direction: column; gap: 2px; min-height: 60px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.ag-agregar small { font-size: 12.5px; font-weight: 500; opacity: .8; }
#sec-lugar[hidden] { display: none; }

/* Ajustes */
.ag-ajustes { max-width: 640px; }
.ag-sec { margin: 24px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ag-3); }
.ag-lista { border-radius: 18px; background: var(--ag-sup); border: 1px solid var(--ag-linea); overflow: hidden; }
.ag-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  min-height: 56px; box-sizing: border-box; border-bottom: 1px solid var(--ag-linea); font-size: 15px;
  color: var(--ag-tinta); text-decoration: none; }
.ag-fila:last-child { border-bottom: 0; }
.ag-fila > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-fila small { font-size: 12.5px; color: var(--ag-2); line-height: 1.35; }
.ag-fila-col { flex-direction: column; align-items: stretch; }
.ag-fila-link svg { flex: none; color: var(--ag-3); }
.ag-switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 14px;
  background: #D9D3C9; position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.ag-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .15s; }
.ag-switch:checked { background: #1F7A52; }
.ag-switch:checked::after { left: 21px; }
.ag-switch:disabled { opacity: .6; cursor: default; }
.ag-switch:focus-visible { outline: 2px solid var(--ag-link); outline-offset: 2px; }
.dark .ag-switch:not(:checked) { background: #3A3631; }
.ag-lugar { padding: 12px 16px; border-bottom: 1px solid var(--ag-linea); display: flex; flex-direction: column; gap: 8px; }
.ag-lugar[hidden] { display: none; }
.ag-lugar-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ag-2); }
.ag-lugar-fila input[type="text"] { flex: 1 1 160px; }
.ag-lugar-fila input[type="number"] { width: 64px; text-align: center; }
.ag-quitar { margin-left: auto; font-size: 13px; color: var(--ag-2); display: flex; align-items: center; gap: 4px; }
#mas-lugar { margin: 8px 16px 12px; width: calc(100% - 32px); min-height: 44px; }
.ag-guardar { margin-top: 16px; }
.ag-estado { flex: none; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  background: var(--ag-hora); color: var(--ag-2); }
.ag-estado.es-ok { background: #DDF0E5; color: #145638; }
.dark .ag-estado.es-ok { background: #152D24; color: #A9DEC2; }
.ag-ics { width: 100%; margin-top: 6px; font-size: 13px !important; }
.ag-btn-ico.es-activo { background: var(--ag-tinta); color: var(--ag-bg); border-color: var(--ag-tinta); }
.ag-mini { all: unset; cursor: pointer; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--text-2); margin-right: 4px; }
.ag-mini.es-flex { background: #DDF0E5; color: #145638; border-color: transparent; }

/* Mes */
.ag-mes { max-width: 640px; }
.ag-filtros { margin-bottom: 12px; }
.ag-mes-cal { padding: 12px; }
.ag-mes-sem, .ag-mes-rej { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ag-mes-sem span { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ag-3); padding: 4px 0 8px; }
.ag-mes-dia { height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 12px; text-decoration: none; color: var(--ag-tinta); }
.ag-mes-dia.es-pasado:not(.es-sel) { opacity: .5; }
.ag-mes-n { font-size: 15px; font-weight: 500; font-family: var(--font-num); }
.ag-mes-dia.es-hoy .ag-mes-n { color: var(--ag-ahora); font-weight: 700; }
.ag-mes-dia.es-sel { background: var(--ag-tinta); color: var(--ag-bg); }
.ag-mes-dia.es-sel .ag-mes-n { color: inherit; font-weight: 700; }
.ag-mes-puntos { display: flex; gap: 3px; min-height: 5px; }
.ag-mes-puntos .ag-punto { width: 5px; height: 5px; border-radius: 3px; }
.ag-mes-dia.es-sel .ag-punto { background: var(--ag-bg); box-shadow: none; }
.ag-mes-cab-dia { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 0 8px; }
.ag-mes-cab-dia a { color: var(--ag-link); font-size: 14px; }
.ag-h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; text-transform: none; }
.ag-mes-lista { padding: 4px 16px; }
.ag-mes-fila { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--ag-linea); }
.ag-mes-fila:last-child { border-bottom: 0; }
.ag-mes-fila .ag-num { width: 44px; flex: none; }
.ag-mes-fila .ag-punto { width: 10px; height: 10px; border-radius: 5px; }
.ag-mes-t { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-mes-tag { font-size: 12px; color: var(--ag-2); flex: none; }
.ag-fila > span:first-child { flex: 1 1 auto; }
.ag-fila > input[type="time"], .ag-fila > select { flex: none; width: 140px; }
.ag-lugar-fila label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ag-asa { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; cursor: ns-resize; touch-action: none; }
.ag-asa::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; margin-left: -13px;
  border-radius: 2px; background: currentColor; opacity: .25; }
.ag-bloque.es-estirando { z-index: 6; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); opacity: 1 !important; }
.ag-bloque.es-destino { outline: 2px dashed var(--ag-link); outline-offset: 2px; }
.ag-bloque.es-fijada { border-left: 3px solid var(--s); }
.ag-hoja-ajuste { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: 14px; background: var(--ag-bg); }
.ag-ajuste-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0; font-size: 14px; }
.ag-ajuste-fila label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-ajuste-fila input[type="number"] { width: 76px; text-align: center; }
.ag-ajuste-fila select { max-width: 200px; }
.ag-ajuste-fila button { all: unset; cursor: pointer; min-height: 40px; padding: 0 14px; border-radius: 12px;
  background: var(--ag-tinta); color: var(--ag-bg); font-size: 13px; font-weight: 600; display: flex; align-items: center; }
.ag-hoja-ajuste .ag-ayuda { margin: 2px 0 0; font-size: 12px; }
.ag-casi { margin: 8px 0 0; }
.ag-casi button { all: unset; cursor: pointer; min-height: 40px; padding: 0 14px; border-radius: 12px;
  background: var(--ag-tinta); color: var(--ag-bg); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }

/* Google Calendar (2026-10-13): lo de todo el día va arriba de la línea. */
.ag-todo-dia { margin: 0 0 10px; }
.ag-todo-dia .ag-ficha { background: var(--t); color: var(--i); }
.ag-gcal-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ag-gcal-acc form { margin: 0; }
.ag-gcal-aviso { text-decoration: none; margin-bottom: 12px; }

/* ═══ Inicio por módulos (2026-10-13, diseño Inicio.dc.html + Galeria.dc.html) ═══ */
.in { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; padding-bottom: 32px; }
.in-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 4px 4px; }
.in-h1 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.4px; line-height: 1.1; text-transform: none; color: var(--ag-tinta); }
.in-editar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; text-decoration: none; background: var(--ag-sup); color: var(--ag-tinta); border: 1px solid var(--ag-linea); flex: none; }
.in-editar.es-on { background: var(--ag-tinta); color: var(--ag-bg); border-color: var(--ag-tinta); }
.in-ayuda { margin: 0; padding: 0 4px; font-size: 13.5px; color: var(--ag-2); }
.in-mod { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.in-mod-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.in-mod-cab .ag-card-t { margin: 0; }
.in-mod-cab a, .in-link { font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ag-link); }
.in-eti { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ag-3); }
.in-meta { font-size: 12.5px; color: var(--ag-2); }
.in-sub { font-size: 12.5px; color: var(--ag-2); }
.in-sep { height: 1px; background: var(--ag-linea); opacity: .7; }
.in-barra { height: 6px; border-radius: 3px; background: var(--ag-hora); overflow: hidden; }
.in-barra > div { height: 6px; border-radius: 3px; background: var(--s, var(--ag-tinta)); }
.in-ahora-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.in .in-ahora-n { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ag-tinta); }
.in .in-ahora-h { font-size: 13px; color: var(--ag-2); }
.in-sig { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.in-sig-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--t, var(--ag-hora)); border: 2px solid var(--s, var(--ag-linea)); box-sizing: border-box; }
.in-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.in-fila-txt b { font-size: 14.5px; font-weight: 600; }
.in-fila-txt small { font-size: 12.5px; color: var(--ag-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-ses { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.in-ses-f { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-height: 28px; }
.in-ses-t { flex: 1; min-width: 0; }
.in-punto { width: 10px; height: 10px; border-radius: 5px; flex: none; box-sizing: border-box; border: 2px solid var(--s, var(--ag-3)); }
.in-punto.es-lleno { background: var(--s, var(--ag-3)); }
.in-ok { font-size: 12px; font-weight: 600; }
.in-pend { font-size: 12px; font-weight: 500; color: var(--ag-2); }
.in-vol { display: grid; grid-template-columns: 70px minmax(0, 1fr) 92px; align-items: center; gap: 10px; font-size: 13px; }
.in-vol > span:last-child { text-align: right; color: var(--ag-2); }
.in-llegas { display: grid; grid-template-columns: 10px 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.in-llegas-v small { color: var(--ag-3); }
.in-nivel { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.in-nivel.es-distancia_rota, .in-nivel.es-sin_datos { background: var(--ag-hora); color: var(--ag-2); }
.in-calor { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; align-items: end; height: 70px; }
.in-calor-b { border-radius: 3px; }
.in-calor-b.es-ahora { outline: 2px solid var(--ag-tinta); outline-offset: 1px; }
.in-calor-ejes { display: flex; justify-content: space-between; font-size: 11px; color: var(--ag-3); margin-top: -6px; }
.in-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.in-chip { font-size: 12.5px; font-weight: 500; padding: 6px 10px; border-radius: 99px; }
.in-hab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.in-hab form { margin: 0; }
.in-hab-b { all: unset; cursor: pointer; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; box-sizing: border-box; }
.in-hab-b:disabled { cursor: default; }
.in-hab-b:focus-visible .in-hab-anillo { outline: 2px solid var(--ag-link); outline-offset: 2px; }
.in-hab-anillo { width: 56px; height: 56px; border-radius: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--h); color: var(--h); font-size: 12px; font-weight: 600; }
.in-hab-b.es-hecho .in-hab-anillo { background: var(--h); color: var(--ag-bg); }
.in-hab-n { font-size: 12px; text-align: center; line-height: 1.25; }
.in-carga { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 84px; }
.in-carga-d { display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; height: 84px; }
.in-carga-h { font-size: 10.5px; color: var(--ag-2); }
.in-carga-b { width: 100%; max-width: 26px; border-radius: 6px; background: var(--ag-linea); }
.in-carga-l { font-size: 12px; font-weight: 500; color: var(--ag-2); }
.in-carga-l.es-hoy { font-weight: 700; color: var(--ag-tinta); }
.in-grande { font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.in-grande small { font-family: var(--font-body, inherit); font-size: 14px; color: var(--ag-2); font-weight: 400; }
.in-pend-f { margin: 0; }
.in-check { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 14px; width: 100%; box-sizing: border-box; }
.in-check-c { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ag-tinta); box-sizing: border-box; flex: none; }
.in-check.es-hecho .in-check-c { background: var(--ag-tinta); }
.in-check.es-hecho span:last-child { color: var(--ag-3); text-decoration: line-through; }
.in-pend-nuevo { display: flex; gap: 8px; margin-top: 4px; }
.in-pend-nuevo input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ag-linea); background: var(--ag-bg); color: var(--ag-tinta); font: inherit; font-size: 14px; }
.in-pend-nuevo .ag-btn-sec, .in-nota .ag-btn-sec { min-height: 44px; flex: none; width: auto; }
.in-nota { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.in-nota textarea { box-sizing: border-box; width: 100%; resize: vertical; padding: 12px; border-radius: 12px; border: 1px solid var(--ag-linea); background: var(--ag-bg); color: var(--ag-tinta); font: 14px/1.4 inherit; }
.in-nota .ag-btn-sec { align-self: flex-end; }
.in-meta-mod { flex-direction: row; align-items: center; justify-content: space-between; }
.in-energia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.in-energia > div { display: flex; flex-direction: column; gap: 2px; }
.in-energia b { font-size: 22px; font-family: var(--font-display); font-weight: 500; }
.in-energia small { font-size: 12px; color: var(--ag-2); }
.in-lista-ed { display: flex; flex-direction: column; gap: 10px; }
.in-fila-ed { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 12px; border-radius: 16px; background: var(--ag-sup); border: 1px solid var(--ag-linea); }
.in-fila-ed.es-off { opacity: .6; }
.in-fila-ed form { margin: 0; }
.in-ico { width: 12px; height: 12px; border-radius: 4px; flex: none; background: var(--s); margin-right: 4px; }
.in-flecha { all: unset; cursor: pointer; width: 32px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ag-2); }
.in-flecha:disabled { opacity: .3; cursor: default; }
.in-sw { all: unset; cursor: pointer; box-sizing: border-box; width: 46px; height: 28px; border-radius: 14px; padding: 3px; display: flex; justify-content: flex-start; }
.in-sw.es-on { justify-content: flex-end; }
.in-sw span { width: 22px; height: 22px; border-radius: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.in-sw:focus-visible, .in-flecha:focus-visible { outline: 2px solid var(--ag-link); outline-offset: 2px; }
.in-mas { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 16px; border: 1.5px dashed var(--ag-linea); text-decoration: none; color: var(--ag-tinta); font-size: 14.5px; font-weight: 600; }
.in-mas.es-suave { border: 0; min-height: 44px; font-weight: 500; font-size: 13px; color: var(--ag-2); }
.in-gal-cab { display: flex; align-items: center; gap: 4px; }
.in-gal-cab .in-h1 { flex: 1; margin: 0; font-size: 26px; }
.in-atras { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ag-tinta); }
.in-cats { display: flex; gap: 6px; overflow-x: auto; }
.in-cat { flex: none; min-height: 38px; padding: 0 14px; box-sizing: border-box; display: flex; align-items: center; border-radius: 99px; font-size: 13.5px; font-weight: 500; background: var(--ag-sup); color: var(--ag-tinta); border: 1px solid var(--ag-linea); text-decoration: none; }
.in-cat.es-on { background: var(--ag-tinta); color: var(--ag-bg); border-color: var(--ag-tinta); font-weight: 600; }
.in-gal { padding: 0; overflow: hidden; }
.in-gal-f { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--ag-linea); }
.in-gal-f:last-child { border-bottom: 0; }
.in-gal-f form { margin: 0; }
.in-gal-ico { width: 36px; height: 36px; border-radius: 11px; flex: none; background: var(--s); }
.in-gal-b { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--ag-bg); color: var(--ag-tinta); border: 1px solid var(--ag-linea); }
.in-gal-b.es-on { border-color: transparent; }
.in-aviso { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.in-atajos { display: flex; gap: 8px; overflow-x: auto; }
.in-atajos a { flex: none; min-height: 40px; padding: 0 14px; display: flex; align-items: center; border-radius: 99px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ag-tinta); background: var(--ag-sup); border: 1px solid var(--ag-linea); }
.in-pesar .tarjeta { margin: 0; }
.pesar-como summary { cursor: pointer; font-size: var(--t-sm); color: var(--text-2); }
.in-pesar .tarjeta { border-radius: 18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARMAZÓN (2026-10-13): 4 pestañas abajo, chips de la sección arriba, Ajustes en
   el engranaje. Solo estructura: el color sale de los tokens de Arz. (Aquí
   vivía la capa «SISTEMA FIT», que redefinía todos los colores con la paleta del
   diseño anterior y que la capa ARZ ya pisaba entera: se borró.)
   ═══════════════════════════════════════════════════════════════════════════ */
body { background: var(--surface-0); color: var(--text-1); }
.tarjeta, .dato { box-shadow: none; background: var(--surface-1); }
.aviso { border-radius: 14px; }
.app { display: block; }
.marco { display: flex; flex-direction: column; min-height: 100vh; }
.cab-app { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px max(16px, calc((100% - 1080px) / 2)); background: color-mix(in srgb, var(--surface-0) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.chips-seccion { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.chips-seccion::-webkit-scrollbar { display: none; }
/* Con la ventana angosta no cabían y no había cómo ver el resto (Jaime,
   2026-10-14). Con mouse, bajan a otra fila; con el dedo se deslizan, y el
   borde desvanecido avisa que hay más. */
@media (hover: hover) and (pointer: fine) { .chips-seccion { flex-wrap: wrap; overflow: visible; padding-block: 2px; } }
@media not all and (hover: hover) and (pointer: fine) {
  .chips-seccion { -webkit-mask-image: linear-gradient(90deg, var(--arz-bg) calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, var(--arz-bg) calc(100% - 28px), transparent); padding-right: 24px; }
}
.chip-sec { flex: none; min-height: 36px; padding: 0 14px; display: flex; align-items: center; border-radius: 99px;
  font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--text-1); background: var(--surface-1);
  border: 1px solid var(--border); white-space: nowrap; }
.cab-acciones { display: flex; align-items: center; gap: 2px; flex: none; }
.cab-acciones .icono-btn { width: 40px; height: 40px; border-radius: 12px; color: var(--text-2); }
.contenedor { width: min(1080px, 100% - 32px); padding: 20px 0 130px; }
.pie { border-top: 0; text-align: center; }
.tabbar { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; justify-content: center; align-items: center; gap: 10px; pointer-events: none; padding: 0 16px; }
.tabbar > * { pointer-events: auto; }
.tabbar-pill { display: flex; gap: 2px; padding: 5px; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px;
  min-height: 48px; padding: 0 6px; border-radius: 18px; text-decoration: none; font-size: 11px; font-weight: 500;
  color: var(--text-2); }
.tab:focus-visible, .tabbar-fab:focus-visible, .chip-sec:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tabbar-fab { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 29px;
  flex: none; text-decoration: none; }
@media (max-width: 360px) { .tab { min-width: 54px; } .tabbar-fab { width: 52px; height: 52px; } }
/* Hoja de acciones como en Acciones.dc.html: primero lo que se hace, lo fino plegado. */
.ag-hoja-mas { border-top: 1px solid var(--ag-linea); padding-top: 10px; }
.ag-hoja-mas > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center;
  justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ag-tinta); }
.ag-hoja-mas > summary::-webkit-details-marker { display: none; }
.ag-hoja-mas > summary::after { content: "›"; font-size: 20px; color: var(--ag-3); transition: transform .15s; }
.ag-hoja-mas[open] > summary::after { transform: rotate(90deg); }
.ag-hoja-pista { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ag-2); margin: 4px 0 0; }
.ag-hoja-mas .ag-ajuste-fila button { background: var(--ag-sup); color: var(--ag-tinta); border: 1px solid var(--ag-linea); box-sizing: border-box; }
.ag-hoja-mas .ag-hoja-ajuste { margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA ARZ (2026-10-13) — la marca propia
   Jaime: «no quiero que sea con Kyo… que sea algo mío, pero que no suene
   genérico». Eligió el nombre Arz (cedro) y la dirección «Cedro en claro,
   Pista en oscuro». La fuente de verdad es diseno/arz/ (tokens.json + README);
   app/static/arz.css trae esos tokens como --arz-* y los componentes .arz-*.

   Esta capa va AL FINAL y, como la capa FIT de arriba, redefine las variables
   viejas con los valores de Arz: así las 40 plantillas cambian sin tocar su
   HTML. Cuando una plantilla se reescriba con componentes .arz-*, deja de
   depender de esto. La capa FIT de arriba queda pisada y se puede borrar
   cuando se confirme que nada la necesita.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --background: #EDF1EC; --foreground: #10241C; --ink: #10241C; --cream: #EDF1EC;
  --surface-0: #EDF1EC; --surface-1: #FFFFFF; --surface-2: #E3E9E3;
  --text-1: #10241C; --text-2: #4C5F56; --text-3: var(--arz-ink-3);
  --border: #D3DCD5; --border-strong: #C2CEC5; --hover: rgba(16, 36, 28, .04); --chip-bg: #E3E9E3;
  --primary: #1E6B4D; --primary-foreground: #FFFFFF;
  --brand-50: #DCEFE3; --brand-100: #BFE2CD; --brand-700: #1E6B4D; --brand-900: #0F3D2E; --brand-fg: #FFFFFF;
  --accent-50: #FBE6D8; --accent-100: #F5CBB0; --accent-500: #E2763A; --accent-600: #C4612E; --accent-700: #8A3F15;
  --ok-50: #DCEFE3; --ok-500: #1E7A4F; --ok-700: #145638;
  --warn-50: #FBF0D6; --warn-500: #D9A43B; --warn-700: #6B4E0F;
  --danger-50: #F9DEDB; --danger-500: #B3261E; --danger-700: #8C1D17;
  --nav-bg: #EDF1EC; --nav-fg: #4C5F56; --nav-border: #D3DCD5; --nav-active-bg: #0F3D2E; --nav-active-fg: #EDF1EC;
  --login-a: #0F3D2E; --login-b: #1E6B4D;
  /* Deportes del núcleo con los colores de Arz. El trote pasa a ámbar y la
     fuerza a violeta. OJO: la paleta categórica estaba validada con
     validate_palette.js; hay que volver a correrlo con estos valores. */
  /* Revisado 2026-10-13 con validate_palette.js (todos los pares, claro y
     oscuro): fuerza pasó de violeta a morado (con natación daba ΔE 1,4 en
     deuteranopía) y muay thai a un rojo frambuesa (con trote no llegaba a 15 con
     vista normal). El rodillo es bici (guía: «Bici, ruta y rodillo») y CARDIO
     y lo que no tiene color propio caen en «Otros» = ink-3. Siempre por token. */
  --NATACION: var(--arz-sport-swim); --BICI: var(--arz-sport-bike); --BICI_INDOOR: var(--arz-sport-bike);
  --CORRER: var(--arz-sport-run); --FUERZA: var(--arz-sport-strength); --MUAY_THAI: var(--arz-sport-muaythai);
  --MOVILIDAD: var(--arz-sport-mobility); --CAMINAR: var(--arz-sport-mobility);
  --CARDIO: var(--arz-ink-3); --OTRO: var(--arz-ink-3);
  /* Letra: Sora para titulares y cifras; Plus Jakarta Sans para el texto. */
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-num: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --radius: 18px; --radius-card: 18px; --radius-btn: 16px; --radius-md: 16px;
  --shadow-sm: none; --shadow-md: none;
}
.dark {
  --background: #0D0E0C; --foreground: #F2F3EE; --ink: #F2F3EE; --cream: #0D0E0C;
  --surface-0: #0D0E0C; --surface-1: #171915; --surface-2: #1F221D;
  --text-1: #F2F3EE; --text-2: #9EA397; --text-3: var(--arz-ink-3);
  --border: #2A2D26; --border-strong: #353931; --hover: rgba(242, 243, 238, .05); --chip-bg: #1F221D;
  --primary: #3CCB7F; --primary-foreground: #0D0E0C;
  --brand-50: #12321F; --brand-100: #1A4A2E; --brand-700: #A9DEC2; --brand-900: #D7F1E2; --brand-fg: #0D0E0C;
  --accent-50: #2A3209; --accent-100: #3B4710; --accent-500: #D4F53C; --accent-600: #C2E22F; --accent-700: #E6FF7A;
  --ok-50: #12321F; --ok-500: #3CCB7F; --ok-700: #A9DEC2;
  --warn-50: #3A2F14; --warn-500: #F2B84B; --warn-700: #F7D58E;
  --danger-50: #3D1A19; --danger-500: #FF6B6B; --danger-700: #FFB3B0;
  --nav-bg: #0D0E0C; --nav-fg: #9EA397; --nav-border: #2A2D26; --nav-active-bg: #A9DEC2; --nav-active-fg: #0D0E0C;
  --NATACION: var(--arz-sport-swim); --BICI: var(--arz-sport-bike); --BICI_INDOOR: var(--arz-sport-bike);
  --CORRER: var(--arz-sport-run); --FUERZA: var(--arz-sport-strength); --MUAY_THAI: var(--arz-sport-muaythai);
  --MOVILIDAD: var(--arz-sport-mobility); --CAMINAR: var(--arz-sport-mobility);
  --CARDIO: var(--arz-ink-3); --OTRO: var(--arz-ink-3);
  --shadow-sm: none; --shadow-md: none;
}
h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.4px; }
.tarjeta > h2, .tarjeta > .tarjeta-cab h2, .tarjeta h2:first-child { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
/* Las tarjetas se separan por el fondo, no por borde ni sombra. */
.tarjeta, .dato { border: 0; border-radius: var(--arz-radius-lg); }

/* Armazón con la marca: pestaña activa en cedro, el + en la acción. */
.chip-sec.es-on, .cab-acciones .icono-btn.es-on { background: var(--arz-brand); border-color: var(--arz-brand); color: var(--arz-bg); }
.tabbar-pill, .dark .tabbar-pill { background: var(--arz-surface); border: 0; box-shadow: var(--arz-shadow-float); border-radius: var(--arz-radius-xl); }
.tab.es-on { background: var(--arz-brand); color: var(--arz-bg); font-weight: 700; }
.tab:focus-visible, .tabbar-fab:focus-visible, .chip-sec:focus-visible { outline-color: var(--arz-brand-2); }
.tabbar-fab, .dark .tabbar-fab { background: var(--arz-action); color: var(--arz-on-action); box-shadow: var(--arz-shadow-action); }
button.primario, .primario { background: var(--arz-action); color: var(--arz-on-action); border-color: var(--arz-action); }

/* Agenda: mismos estados, colores de Arz. Tinte y tinta salen del color sólido. */
.ag, .dark .ag {
  --ag-bg: var(--arz-bg); --ag-sup: var(--arz-surface); --ag-tinta: var(--arz-ink); --ag-2: var(--arz-ink-2); --ag-3: var(--arz-ink-3);
  --ag-linea: var(--arz-line); --ag-hora: var(--arz-surface-2); --ag-ahora: var(--arz-action); --ag-link: var(--arz-brand-2);
  --ag-caliente: var(--arz-heat);
}
.ag .cat-swim, .dark .ag .cat-swim { --s: var(--arz-sport-swim); }
.ag .cat-bike, .dark .ag .cat-bike { --s: var(--arz-sport-bike); }
.ag .cat-run, .dark .ag .cat-run { --s: var(--arz-sport-run); }
.ag .cat-str, .dark .ag .cat-str { --s: var(--arz-sport-strength); }
.ag .cat-work, .dark .ag .cat-work { --s: var(--arz-ink-2); }
.ag .cat-study, .dark .ag .cat-study, .ag .cat-life, .dark .ag .cat-life { --s: var(--arz-ink-3); }
.ag [class*="cat-"]:not(.cat-gcal), .dark .ag [class*="cat-"]:not(.cat-gcal) {
  --t: color-mix(in oklab, var(--s) 15%, var(--ag-sup)); --i: color-mix(in oklab, var(--s) 55%, var(--ag-tinta));
}
.ag .cat-gcal, .dark .ag .cat-gcal { --s: color-mix(in oklab, var(--arz-gcal) 45%, var(--ag-sup)); --t: var(--ag-sup); --i: var(--ag-tinta); }

/* ── ARZ · revisión de contraste (2026-10-13) ─────────────────────────────────
   Medido texto por texto en 18 pantallas, claro y oscuro (scripts/revisar-contraste.py).
   Regla de la guía: sobre `action` va `on-action`; `action` solo en LA acción y el +;
   los colores de deporte solo identifican deporte; los de estado no decoran. */

/* Botones. Comida tenía su botón principal en ámbar (warn) con texto claro: en
   oscuro daba 1,6:1. El principal pasa a action; los botones de cada fila de
   Comer (Guardar, Buscar, Anotar) son secundarios: una acción por pantalla. */
.grupo-comida button.primario, .grupo-comida .boton-solido { background: var(--arz-action); color: var(--arz-on-action); }
.dia-boton { background: var(--arz-surface-2); color: var(--arz-ink); }
.grupo-comida .cambiar { background: var(--arz-surface-2); color: var(--arz-ink); }
.grupo-comida .cambiar:hover, .grupo-comida .seg-op:first-child input:checked + span { background: var(--arz-line); }
.grupo-comida .plato-elegido, .grupo-comida .ali-fila.e-favorito { border-color: var(--arz-brand-2); background: color-mix(in oklab, var(--arz-brand-2) 10%, var(--arz-surface)); }
.grupo-comida button.plato:hover { border-color: var(--arz-brand-2); }

/* Agenda: la hora actual y «hoy» no son la acción. Van en brand-2 con texto surface. */
.ag, .dark .ag { --ag-ahora: var(--arz-brand-2); }
.ag-ahora-l { color: var(--arz-surface); }
.ag-dia.es-hoy .ag-dia-n { color: var(--arz-brand); }
.ag-dia.es-sel .ag-dia-n { color: inherit; }
/* «Movido»/«Choca»: el blanco sobre colores de deporte no alcanza en oscuro. */
.ag-b-pill { background: var(--ag-sup); color: var(--ag-tinta); box-shadow: inset 0 0 0 1px var(--s); }
.ag-b-pill.es-choque { background: var(--arz-danger); color: var(--arz-surface); box-shadow: none; }

/* Carreras: la cuenta y los enlaces iban en cobre sobre blanco (4,1:1) o blanco sobre el color del evento. */
.visual-cuenta { background: var(--arz-brand); color: var(--arz-bg); }
.ver-mas, .ft-mes { color: var(--arz-brand-2); }

/* Inicio por módulos: los colores escritos a mano pasan a tokens. */
.in .cat-agenda { --s: var(--arz-ink); } .in .cat-entreno { --s: var(--arz-brand-2); }
.in .cat-vida { --s: var(--arz-sport-swim); } .in .cat-clima { --s: var(--arz-heat); }
.dark .in .cat-agenda { --s: var(--arz-ink); }
.in-ok { color: var(--arz-ok); } .dark .in-ok { color: var(--arz-ok); }
.in-nivel.es-vas_bien, .dark .in-nivel.es-vas_bien { background: color-mix(in oklab, var(--arz-ok) 14%, var(--arz-surface)); color: var(--arz-ok); }
.in-nivel.es-justo, .dark .in-nivel.es-justo { background: color-mix(in oklab, var(--arz-warn) 14%, var(--arz-surface)); color: var(--arz-warn); }
.in-nivel.es-no_llegas, .dark .in-nivel.es-no_llegas { background: color-mix(in oklab, var(--arz-danger) 12%, var(--arz-surface)); color: var(--arz-danger); }
.in-calor-b { background: color-mix(in oklab, var(--arz-ok) 45%, var(--arz-surface)); }
.in-calor-b.es-bien { background: color-mix(in oklab, var(--arz-heat) 45%, var(--arz-surface)); }
.in-calor-b.es-evitar { background: var(--arz-heat); }
.in-calor-b.es-sin { background: var(--arz-surface-2); }
.in-chip.es-mejor, .in-chip.es-bien, .dark .in-chip.es-mejor, .dark .in-chip.es-bien { background: color-mix(in oklab, var(--arz-ok) 14%, var(--arz-surface)); color: var(--arz-ok); }
.in-chip.es-evitar, .dark .in-chip.es-evitar { background: color-mix(in oklab, var(--arz-heat) 16%, var(--arz-surface)); color: var(--arz-ink); }
.hab-lectio { --h: var(--arz-ink-2); } .hab-agua { --h: var(--arz-sport-swim); }
.hab-estirar { --h: var(--arz-sport-mobility); } .hab-dormir { --h: var(--arz-ink); }
.in-hab-anillo { color: var(--arz-ink); }
.in-hab-b.es-hecho .in-hab-anillo { color: var(--arz-surface); }
.in-carga-b { background: var(--arz-surface-2); }
.in-carga-b.es-tope { background: var(--arz-brand-2); } .in-carga-b.es-hoy { background: var(--arz-ink); }
.in-sw { background: var(--arz-line); } .in-sw.es-on { background: var(--arz-brand-2); }
.in-sw span { background: var(--arz-surface); }
.in-gal-b.es-on, .dark .in-gal-b.es-on { background: color-mix(in oklab, var(--arz-ok) 14%, var(--arz-surface)); color: var(--arz-ok); }
.in-aviso { border: 1px solid var(--arz-warn); }

/* `hidden` tiene que ganarle al display de la clase (scripts/revisar-css.py). */
.ag-bandeja-i[hidden], .ag-btn-sec[hidden], .dia-arco[hidden], .elegir-ej-elegido[hidden], .navegar-btn[hidden] { display: none; }

/* Fases del plan: escala del cedro (base → construcción → pico, cada vez más
   intensa; afinamiento baja; post en gris). Antes eran azules sueltos con
   texto blanco encima (1:1 medido en Objetivo). */
.fase-base         { --fase: color-mix(in oklab, var(--arz-brand-2) 30%, var(--arz-surface)); --fase-txt: var(--arz-ink); }
.fase-construccion { --fase: var(--arz-brand-2); --fase-txt: var(--arz-surface); }
.fase-pico         { --fase: var(--arz-brand); --fase-txt: var(--arz-surface); }
.fase-taper        { --fase: color-mix(in oklab, var(--arz-brand-2) 55%, var(--arz-surface)); --fase-txt: var(--arz-ink); }
.fase-post         { --fase: var(--arz-surface-2); --fase-txt: var(--arz-ink-2); }
.fase-etiqueta, .banda-cuenta { background: var(--fase); color: var(--fase-txt, var(--arz-surface)); }

/* Guía: «nada de bordes de color a la izquierda de las tarjetas». La fase se
   sigue viendo en su etiqueta y en un punto junto al nombre. */
.banda-evento, .ruta-semana, .wa-previa, .exc, .hero, .bloque-core, .bloques-sesion > li.es-core,
.compartir, .comparativa.extra { border-left: 0; }
.ruta-semana { border: 0; }
.ruta-fase::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: var(--fase, var(--arz-line)); vertical-align: 1px; }
.bloque-core, .bloques-sesion > li.es-core { background: var(--arz-surface-2); }
/* Leyenda de «Fatiga y base»: la base es la línea sólida en brand-2 y la fatiga
   la punteada en ink-2 (antes usaba el rojo de muay thai, que es un deporte). */
.punto.es-base { background: var(--primary); border-radius: 99px; }
.punto.es-fatiga { width: 14px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--text-2); align-self: center; }
.rescate-si, .rescate-no { box-shadow: none; }

/* Login: el cedro y «arz» en minúsculas (marca/README.md). El cobre del titular
   era `action` usado como decoración: pasa a brand-2. */
.login-marca .marca-simbolo { display: block; }
.login-marca .marca-oscuro, .dark .login-marca .marca-claro { display: none; }
.dark .login-marca .marca-oscuro { display: block; }
.login-marca .nombre { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.6px; color: var(--arz-brand); text-transform: none; }
.login-caja h1 i { color: var(--arz-brand-2); }

/* ── Análisis (2026-10-13) ─────────────────────────────────────────────────── */
.an-forma { display: flex; flex-direction: column; gap: var(--arz-space-4, 16px); }
.an-forma-cab { display: flex; align-items: flex-end; gap: var(--arz-space-4, 16px); flex-wrap: wrap; }
.an-eti { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--arz-ink-2); }
.an-num { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -1px;
  font-variant-numeric: tabular-nums; color: var(--arz-ink); }
.an-num.es-ok { color: var(--arz-ok); } .an-num.es-warn { color: var(--arz-warn); } .an-num.es-danger { color: var(--arz-danger); }
.an-lectura { flex: 1; min-width: 180px; margin: 0 0 6px; color: var(--arz-ink-2); }
.an-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--arz-space-3, 12px); margin-bottom: 4px; }
.an-trio > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--arz-radius-md, 16px); background: var(--arz-surface-2); }
.an-trio b { font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--arz-ink); }
.an-trio b.es-ok { color: var(--arz-ok); } .an-trio b.es-warn { color: var(--arz-warn); } .an-trio b.es-danger { color: var(--arz-danger); }
.an-trio small { font-size: 12px; color: var(--arz-ink-2); }
.an-sub { margin: var(--arz-space-4, 16px) 0 4px; font-size: 13px; font-weight: 700; color: var(--arz-ink-2); }
.an-records { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.an-records a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--arz-line); }
.an-records li:last-child a { border-bottom: 0; }
.an-records .cat-swim { --s: var(--arz-sport-swim); } .an-records .cat-bike { --s: var(--arz-sport-bike); } .an-records .cat-run { --s: var(--arz-sport-run); }
.an-rec-que { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.an-rec-que small { font-size: 12.5px; color: var(--arz-ink-2); }
.an-rec-val { font-family: var(--font-display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-mas > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.an-mas > summary::-webkit-details-marker { display: none; }
.an-mas > summary h2 { margin: 0; }
.an-mas[open] > summary { margin-bottom: var(--arz-space-4, 16px); }
.in-forma { display: flex; align-items: center; gap: 14px; }
.in-forma > div { display: flex; flex-direction: column; }
.in-forma .in-sub { flex: 1; margin: 0; }
.in-grande.es-ok { color: var(--arz-ok); } .in-grande.es-warn { color: var(--arz-warn); } .in-grande.es-danger { color: var(--arz-danger); }
.cab-acciones .salir:hover { color: var(--arz-danger); }
/* Títulos de pantalla: Sora 30/34 sin mayúsculas (la regla vieja de h1 las ponía). */
h1 { text-transform: none; font-size: 30px; line-height: 34px; letter-spacing: -0.6px; }
.an-num small { font-size: 20px; font-weight: 700; }
.an-rec-que > span { display: block; }

/* El «*» de obligatorio va en la MISMA línea que su texto. label.campo apila sus
   hijos en columna y el asterisco quedaba como fila propia: el campo de ese
   label bajaba un renglón respecto a sus vecinos (Jaime, 2026-10-13: «aparece un
   * … y eso hace que el campo esté por debajo de los otros, en todas partes»). */
label.campo .campo-etq { display: block; }
label.campo .req { color: var(--arz-brand-2); margin-left: 2px; }

/* Campos: TODOS iguales (guía de Arz: radio 16, campos sobre surface-2). Antes
   texto y número salían grises sin borde y fecha, hora y listas blancos con
   borde y otra altura: en una misma fila no cuadraban. Lleno o vacío se
   distingue por el borde, no por el fondo. */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=date], input[type=time], select, textarea {
  min-height: 48px; padding: 0 14px; box-sizing: border-box;
  background: var(--arz-surface-2); color: var(--arz-ink);
  border: 1px solid transparent; border-radius: var(--arz-radius-md);
  font-family: var(--font-body); font-size: 15px;
}
textarea { padding: 12px 14px; }
input[type=text]:not(:placeholder-shown), input[type=number]:not(:placeholder-shown), input[type=email]:not(:placeholder-shown),
input[type=date], input[type=time], select, textarea:not(:placeholder-shown) { border-color: var(--arz-line); background: var(--arz-surface-2); }
input::placeholder, textarea::placeholder { color: var(--arz-ink-3); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--arz-brand-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--arz-brand-2) 22%, transparent); }
input:disabled, select:disabled { opacity: .6; }
/* Filas de campos alineadas aunque una etiqueta ocupe dos líneas: cada label
   reparte texto / campo / ayuda en las filas COMPARTIDAS de la rejilla (subgrid).
   Solo para labels de hasta 3 piezas; los raros siguen en columna. */
.campos > label.campo:not(:has(> :nth-child(4))) {
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--s-1); align-content: start;
}
.campos > label.campo > .campo-etq { align-self: end; }

/* Perfil: dato que Arz mide solo (no se escribe). Misma altura que un campo. */
.campos > div.campo { display:grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--s-1); align-content:start }
.campos > div.campo > .campo-etq { align-self:end }
.campo-valor { min-height:48px; display:flex; align-items:center; margin:0; font-family: var(--font-num); font-size: var(--t-lg); color: var(--text) }
/* Agenda: movilidad y pistola (recuperacion.py). Token de la guía: sport-mobility. */
.ag .cat-mob, .dark .ag .cat-mob { --s: var(--arz-sport-mobility); }

/* ── Inicio: módulos que vienen de la portada vieja (2026-10-14) ─────────────
   Mismo armazón que el resto de .in-mod; nada de tarjetas dentro de tarjetas. */
.in-ses-det > summary { list-style: none; cursor: pointer; }
.in-ses-det > summary::-webkit-details-marker { display: none; }
.in-ses-det[open] > summary { margin-bottom: 6px; }
.in-ses-det .hice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.in-ses-det .hice label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ag-2); }
.in-ses-det .hice input[type="number"] { width: 72px; min-height: 40px; }
.in-bloques { margin: 6px 0; padding-left: 18px; font-size: 13px; color: var(--ag-2); display: flex; flex-direction: column; gap: 4px; }
.in-bloques b { color: var(--ag-tinta); font-weight: 600; }
.in-tragos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.in-tragos .ag-btn-sec { width: 100%; justify-content: space-between; }
.in-tragos form { margin: 0; }
.in-tragos .ag-btn-sec { display: inline-flex; align-items: center; gap: 6px; }
.in-tragos small { color: var(--ag-3); }
.in-plegable > summary { cursor: pointer; }
.in-plegable[open] > summary { margin-bottom: 8px; }
.in-plegable .in-ses-f { margin-top: 6px; }
.in-plegable form { margin: 0; }
.in-avisos { border-left: 3px solid var(--arz-warn, var(--ag-caliente)); }
.in-aviso-l { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ag-tinta); }
.in-aviso-l + .in-aviso-l { padding-top: 10px; border-top: 1px solid var(--ag-linea); }
.in-aviso-l .ag-btn-sec { margin-top: 6px; }
.in-noches { display: flex; gap: 6px; }
.in-noches span { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; border: 2px solid var(--ag-linea); color: var(--ag-2); }
.in-noches .es-si { background: var(--arz-sport-mobility); border-color: var(--arz-sport-mobility); color: var(--ag-sup); }
.in-noches .es-futuro { opacity: .5; }
.in-rpe { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ag-linea); }
.in-rpe .in-ses-t { text-decoration: none; color: inherit; font-weight: 600; font-size: 13.5px; }
.in-rpe .rpe-chips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.in-rpe .rpe-chip span { min-width: 0; min-height: 36px; width: 100%; padding: 0; font-size: 13px; }
.in-rpe .ag-btn-sec, .in-tragos .ag-btn-sec { min-height: 40px; padding: 0 12px; font-size: 13px; }
.in-rpe .ag-btn-sec { align-self: flex-start; }
.in-rpe { align-items: stretch; text-align: left; }
.in-rpe .rpe-chips { width: 100%; }
.in-tragos .ag-btn-sec { display: flex; align-items: center; text-align: left; white-space: nowrap; }
.in-tragos .ag-btn-sec small { margin-left: auto; }
.in-mod-cab .in-meta { white-space: nowrap; }
.in-tragos .ic { flex: none; }

/* ─── Entreno (2026-10-15): los días primero, hoy abierto ──────────────────
   Jaime: «¿cambiarías algo del diseño de los días?». La página medía 9.000 px y
   los días llegaban después de 1.700 px de avisos y cifras. */
.plan-fase { margin: calc(-1 * var(--arz-space-2)) 0 var(--arz-space-3); font-size: 13.5px; color: var(--arz-ink-2); }
.dia-plan { padding: 0; }
.dia-plan > summary { list-style: none; cursor: pointer; padding: var(--arz-space-4); }
.dia-plan > summary::-webkit-details-marker { display: none; }
.dia-plan > summary h2 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dia-plan > summary h2::after { content: "›"; margin-left: auto; color: var(--arz-ink-3); transition: transform .15s; }
.dia-plan[open] > summary h2::after { transform: rotate(90deg); }
.dia-plan-res { display: flex; flex-wrap: wrap; gap: 4px 12px; flex-basis: 100%; order: 3; font: 400 13.5px var(--arz-font-body); color: var(--arz-ink-2); }
.dia-plan[open] .dia-plan-res { display: none; }
.dia-plan-ses { display: inline-flex; align-items: center; gap: 6px; }
.dia-plan > :not(summary) { margin-left: var(--arz-space-4); margin-right: var(--arz-space-4); }
.dia-plan > :last-child { margin-bottom: var(--arz-space-4); }
.dia-plan-comer { margin-top: calc(-1 * var(--arz-space-2)); font-size: 13.5px; }
.dia-plan.es-hoy { outline: 2px solid var(--arz-brand-2); outline-offset: -2px; }
.plan-avisos h2 { margin-bottom: var(--arz-space-2); }
.plan-aviso { border-top: 1px solid var(--arz-line); }
.plan-aviso > summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 600; display: flex; gap: 10px; }
.plan-aviso > summary::-webkit-details-marker { display: none; }
.plan-aviso > summary::after { content: "›"; margin-left: auto; color: var(--arz-ink-3); }
.plan-aviso[open] > summary::after { transform: rotate(90deg); }
.plan-aviso.es-grave > summary { color: var(--arz-danger); }
.plan-aviso > :not(summary) { margin-bottom: var(--arz-space-3); }
.plan-numeros > summary { list-style: none; cursor: pointer; }
.plan-numeros > summary::-webkit-details-marker { display: none; }
.plan-numeros > summary h2 { margin: 0; }
.plan-numeros[open] > summary h2 { margin-bottom: var(--arz-space-3); }

/* ─── Utilidades (2026-10-15): lo que era style="" repetido en las plantillas.
   Llevan !important porque reemplazan estilos en línea, que ganaban a todo; sin
   eso, un `.ayuda { margin: 0 }` les quitaría el margen. Los colores salen de
   los tokens (la capa ARZ los redefine), nunca sueltos. */
.u-mt2 { margin-top: var(--s-2) !important; }
.u-mt3 { margin-top: var(--s-3) !important; }
.u-mt4 { margin-top: var(--s-4) !important; }
.u-mb2 { margin-bottom: var(--s-2) !important; }
.u-mb3 { margin-bottom: var(--s-3) !important; }
.u-mb4 { margin-bottom: var(--s-4) !important; }
.u-tenue { color: var(--text-3) !important; }
.u-sec { color: var(--text-2) !important; }
.u-peligro { color: var(--danger-700) !important; }
.u-ojo { color: var(--warn-700) !important; }
.u-marca { color: var(--brand-700) !important; }
.u-inline { display: inline !important; }
.u-base { font-size: var(--t-base) !important; }
.u-fin { align-self: end !important; }
.u-ancho { grid-column: 1 / -1 !important; }