:root {
  /* Blanco cálido, verde salvia y negro tinta. Los grises no son neutros del
     todo: llevan una gota de verde, que es lo que hace que la pantalla parezca
     de papel y no de hoja de cálculo. */
  --fondo:#FAF9F7; --superficie:#FFFFFF; --superficie-2:#F4F3F1; --elevada:#FFFFFF;
  --superficie-3:#EFEEEC; --superficie-4:#E9E8E6;
  --borde:#E3E2E0; --borde-fuerte:#C4C7C7;
  --texto:#1A1C1B; --apagado:#444748; --tenue:#747878;

  /* La tinta es el color de acción: botones principales en negro. */
  --acento:#000000; --acento-texto:#FFFFFF;
  /* El verde salvia manda en todo lo que está vivo: activo, hecho, en marcha. */
  --marca:#4E6358; --marca-fuerte:#3B4F45; --marca-suave:#D1E8DA; --marca-borde:#B5CCBF;
  --marca-texto:#374B41;
  /* El verde claro de la X de GimnaX. Es el salvia subido de tono, no un
     color nuevo. Sobre el papel claro da 3,66:1, que es lo que pide una
     letra grande — un verde más claro se vería precioso en el móvil de
     noche y desaparecería en la calle a pleno sol. */
  --marca-clara:#379263;
  /* El velo: color de verdad, pero tan bajo que no compite con ningún dato.
     Es lo que Joel pedía ("algo de color minimalista, como el fondo
     difuminado de la entrada") sin repetir el colorete por TODA la app que
     ya probó y no le gustó — ver la nota de .aurora-app más abajo. Aquí el
     color va DENTRO de las tarjetas, no detrás de la barra lateral. */
  --velo-marca:rgba(78,99,88,.09);
  --velo-azul:rgba(59,90,140,.055);

  /* --- Paleta viva: gradientes, brillos y sombras con color.
     Joel: "más colores, animaciones vivas, que atraiga". Todo es la misma gama
     (verde → azul), subida de tono; no se meten colores nuevos. */
  --gradiente-hero:linear-gradient(135deg, #3B4F45 0%, #379263 55%, #2E6E8C 100%);
  --gradiente-acento:linear-gradient(135deg, var(--marca) 0%, #47B87A 100%);
  --brillo-marca:#47B87A;
  --sombra-color:0 4px 20px rgba(55,146,99,.22);
  --sombra-ambar:0 4px 16px rgba(138,74,34,.18);
  --pulso:#E84057;
  --pulso-suave:rgba(232,64,87,.15);

  --verde:#3F6B55; --verde-suave:#E4EFE8;
  --ambar:#8A4A22; --ambar-suave:#FFEDE3;
  --rojo:#BA1A1A;  --rojo-suave:#FFDAD6;
  --azul:#3B5A8C;  --azul-suave:#E8EEF8;
  /* Tres tonos más para diferenciar secciones del menú (Clientes, Ejercicios/
     Progreso, Constantes) sin tocar ni un fondo ni el botón principal: solo
     insignias de icono y la pastilla activa, como Ajustes/Salud de iOS. */
  --morado:#6B4C93; --morado-suave:#EEE7F5;
  --menta:#1D7A6B;  --menta-suave:#DFF3EF;
  --cian:#2E6E86;   --cian-suave:#E3F1F5;

  --fig-cuerpo:#E3E2E0; --fig-activo:#4E6358;

  /* Bordes finos antes que sombras gordas: la sombra solo marca lo que de
     verdad flota por encima del resto. */
  --sombra:0 1px 2px rgba(26,28,27,.04);
  --sombra-hero:0 1px 2px rgba(26,28,27,.04), 0 10px 30px rgba(26,28,27,.07);
  --sombra-alta:0 18px 48px rgba(26,28,27,.18);
  /* Joel eligió las esquinas de antes: más blandas, más de app. El diseño que
     trajo las lleva a 8 px, que en un móvil se lee como una hoja de cálculo. */
  --r:14px; --r-s:9px; --r-g:18px; --r-hero:16px; --r-pastilla:999px;
  --lateral:246px;
  --fuente:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
    'Helvetica Neue',Arial,sans-serif;

  /* Una sola curva para todo lo que se mueve: sale rápido y frena suave, que
     es como se mueven las cosas de verdad. */
  --curva:cubic-bezier(.22,.8,.28,1);
  --curva-suave:cubic-bezier(.4,0,.2,1);
  --rapido:.16s; --medio:.28s; --lento:.52s;
}

/* El oscuro no es el claro con los colores dados la vuelta: el salvia se
   aclara para que siga leyéndose y el papel se vuelve carbón, no negro puro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:#101413; --superficie:#181D1B; --superficie-2:#1F2523; --elevada:#1C2220;
    --superficie-3:#252B29; --superficie-4:#2C3331;
    --borde:#2B322F; --borde-fuerte:#3F4744;
    --texto:#E8EAE8; --apagado:#B4BCB8; --tenue:#8A928E;
    --acento:#E8EAE8; --acento-texto:#101413;
    --marca:#A6CBB6; --marca-fuerte:#BFDCCB; --marca-suave:rgba(166,203,182,.14);
    --marca-borde:rgba(166,203,182,.34); --marca-texto:#A6CBB6;
    --marca-clara:#8FE3B0;
    /* De noche el velo va al revés: aclara la tarjeta en vez de teñirla, y
       más flojo todavía — sobre carbón cualquier tinte canta el doble. */
    --velo-marca:rgba(166,203,182,.075);
    --velo-azul:rgba(169,196,238,.05);
    --gradiente-hero:linear-gradient(135deg, #1A2E24 0%, #245C3E 55%, #1E3D50 100%);
    --gradiente-acento:linear-gradient(135deg, var(--marca) 0%, #8FE3B0 100%);
    --brillo-marca:#8FE3B0;
    --sombra-color:0 4px 20px rgba(143,227,176,.15);
    --sombra-ambar:0 4px 16px rgba(240,180,140,.12);
    --pulso:#FF6B7A;
    --pulso-suave:rgba(255,107,122,.12);
    --verde:#8FCBA6; --verde-suave:rgba(143,203,166,.13);
    --ambar:#F0B48C; --ambar-suave:rgba(240,180,140,.13);
    --rojo:#FFB4AB;  --rojo-suave:rgba(255,180,171,.13);
    --azul:#A9C4EE;  --azul-suave:rgba(169,196,238,.13);
    --morado:#C9AEE0; --morado-suave:rgba(201,174,224,.14);
    --menta:#7FD1C1;  --menta-suave:rgba(127,209,193,.13);
    --cian:#8FCBDE;   --cian-suave:rgba(143,203,222,.13);
    --fig-cuerpo:#2C3331; --fig-activo:#A6CBB6;
    --sombra:0 1px 2px rgba(0,0,0,.45);
    --sombra-hero:0 1px 2px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.4);
    --sombra-alta:0 18px 52px rgba(0,0,0,.6);
  }
}
:root[data-tema="oscuro"] {
  --fondo:#101413; --superficie:#181D1B; --superficie-2:#1F2523; --elevada:#1C2220;
  --superficie-3:#252B29; --superficie-4:#2C3331;
  --borde:#2B322F; --borde-fuerte:#3F4744;
  --texto:#E8EAE8; --apagado:#B4BCB8; --tenue:#8A928E;
  --acento:#E8EAE8; --acento-texto:#101413;
  --marca:#A6CBB6; --marca-fuerte:#BFDCCB; --marca-suave:rgba(166,203,182,.14);
  --marca-borde:rgba(166,203,182,.34); --marca-texto:#A6CBB6;
  --marca-clara:#8FE3B0;
  --velo-marca:rgba(166,203,182,.075);
  --velo-azul:rgba(169,196,238,.05);
  --gradiente-hero:linear-gradient(135deg, #1A2E24 0%, #245C3E 55%, #1E3D50 100%);
  --gradiente-acento:linear-gradient(135deg, var(--marca) 0%, #8FE3B0 100%);
  --brillo-marca:#8FE3B0;
  --sombra-color:0 4px 20px rgba(143,227,176,.15);
  --sombra-ambar:0 4px 16px rgba(240,180,140,.12);
  --pulso:#FF6B7A;
  --pulso-suave:rgba(255,107,122,.12);
  --verde:#8FCBA6; --verde-suave:rgba(143,203,166,.13);
  --ambar:#F0B48C; --ambar-suave:rgba(240,180,140,.13);
  --rojo:#FFB4AB;  --rojo-suave:rgba(255,180,171,.13);
  --azul:#A9C4EE;  --azul-suave:rgba(169,196,238,.13);
  --morado:#C9AEE0; --morado-suave:rgba(201,174,224,.14);
  --menta:#7FD1C1;  --menta-suave:rgba(127,209,193,.13);
  --cian:#8FCBDE;   --cian-suave:rgba(143,203,222,.13);
  --fig-cuerpo:#2C3331; --fig-activo:#A6CBB6;
  --sombra:0 1px 2px rgba(0,0,0,.45);
  --sombra-hero:0 1px 2px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.4);
  --sombra-alta:0 18px 52px rgba(0,0,0,.6);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--fondo); color:var(--texto); font-family:var(--fuente);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* Joel, tras probarlo: "no me gusta nada... tiene que ser una web
   profesional sobre nutrición" — el colorete por TODA la app (detrás de
   la barra lateral y la cabecera, mientras se apunta la comida de
   verdad) quedaba de más ahí. Se queda solo donde nació y donde sí
   encajaba: la entrada (login/registro), ver .acceso::before/::after
   más abajo. `.aurora-app` (el div de index.html) se deja sin pintar
   nada — no se toca el HTML por no rehacer el despliegue por una línea. */
.aurora-app { display:none; }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.015em; line-height:1.28; }
h1 { font-size:26px; letter-spacing:-.02em; }
h2 { font-size:20px; letter-spacing:-.01em; }
h3 { font-size:16px; font-weight:600; letter-spacing:-.005em; }

/* Escala de display. Cuanto mas grande, mas cerrado el tracking: si no, una
   cifra de 46 px parece que se desparrama. */
.display-1 { font-size:56px; font-weight:400; letter-spacing:-.03em; line-height:1.14;
  font-variant-numeric:tabular-nums; }
.display-2 { font-size:32px; font-weight:500; letter-spacing:-.022em; line-height:1.18;
  font-variant-numeric:tabular-nums; }
.display-3 { font-size:24px; font-weight:500; letter-spacing:-.015em; line-height:1.3; }
@media (max-width:900px) { .display-1 { font-size:36px; line-height:1.22; } }
@media (max-width:420px) { .display-1 { font-size:32px; } .display-2 { font-size:26px; } }

/* La linea pequena en versalitas que va encima de un titular. */
.encima {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--tenue);
}
.encima-marca { color:var(--marca); }
/* La etiqueta chiquitita en versalitas, la pieza que más se repite en todo el
   diseño: separa un dato de su nombre sin gritar. */
.etq-mini, .etq { text-transform:uppercase; letter-spacing:.075em; font-weight:600; }
/* Lo que solo se oye. Para cuando una palabra está partida en trozos por
   la pantalla (la marca GimnaX) y hay que darle al lector de pantalla la
   versión entera, sin que se vea dos veces. */
.solo-lectores {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
p { margin:0; }
a { color:var(--acento); text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--borde-fuerte); border-radius:8px; border:3px solid var(--fondo); }

/* ========================================================== ACABADO TÁCTIL
   Lo que separa "una web abierta en el móvil" de algo que parece una app:
   que TODO lo que se puede tocar conteste al tocarlo, y que no salte el
   recuadro gris que el navegador pinta por su cuenta. Estaba puesto solo
   en dos sitios sueltos y con :active en 14 de 39 elementos pinchables;
   aquí se unifica de una vez para todos. */
* { -webkit-tap-highlight-color:transparent; }

/* El doble toque para hacer zoom es un gesto de página web, no de app: en
   pantallas donde no hay nada que ampliar (todo el interfaz, no las fotos)
   solo estorba. touch-action:manipulation quita ESE gesto en concreto pero
   deja intacto el pellizco para zoom y el scroll normal, así que no se
   pierde accesibilidad. */
html,body { touch-action:manipulation; }

/* Los rótulos e iconos de la interfaz no se seleccionan al mantener el
   dedo: ese subrayado azul de "has seleccionado texto" al intentar tocar
   un botón es de las cosas que más delatan que esto es una página web.
   El contenido de verdad (nombres, cifras, notas) sí se puede copiar. */
.nav-item, .btn, .bloque-cab, .teja-rica-cab, .comer-migas, .etq-mini,
.dia-tarjeta, .rol-opcion, .fecha-nav, .cab-fila { user-select:none; -webkit-user-select:none; }

/* Respuesta al tocar, igual para todas las tarjetas pinchables. Las que ya
   tenían la suya (dia-tarjeta, hueco-tarjeta, ejer-cab...) se quedan como
   estaban: esto es para las que no contestaban nada. */
.act-card, .frec, .alimento, .rutina-tarjeta, .tarjeta-ejercicio, .nav-item {
  transition:transform var(--rapido) var(--curva), background var(--rapido) var(--curva),
             border-color var(--rapido) var(--curva);
}
.act-card:active, .frec:active, .alimento:active,
.rutina-tarjeta:active, .tarjeta-ejercicio:active, .nav-item:active { transform:scale(.985); }

/* El aro de foco, uno solo para todo: se ve al navegar con teclado y no
   aparece al tocar con el dedo (eso lo decide :focus-visible, no nosotros). */
:focus-visible { outline:2px solid var(--marca); outline-offset:2px; }
/* Los campos ya tienen el suyo (borde + halo, ver .entrada:focus): dos
   marcas de foco encima del mismo campo es peor que una. */
.entrada:focus-visible, select.entrada:focus-visible, textarea.entrada:focus-visible { outline:none; }

/* ============================================================== ESTRUCTURA
   Cada sitio con la forma que le va, que es lo que eligió Joel mirando las dos:

   - En el ORDENADOR, barra lateral. Fran va a estar ahí cobrando y montando
     rutinas: quiere la navegación siempre a la vista, con su nombre, y el
     ancho entero para las tablas. Una cabecera con seis palabras pequeñas
     arriba es más bonita y se trabaja peor.
   - En el MÓVIL, la cabecera de marca del diseño nuevo (logo, nombre y tu
     inicial) y la navegación abajo, donde llega el pulgar.

   Se pintan las dos y manda el CSS, para no andar mirando anchos desde
   JavaScript ni repintar al girar el teléfono.
   ========================================================================= */
.app { display:flex; min-height:100vh; min-height:100dvh; }

/* --- El menú se guarda ENTERO.
   O está la barra completa con sus nombres, o no está: nada de dejar una tira
   de iconos comiéndose el ancho. Escondida, la página usa la pantalla entera,
   que es justo para lo que sirve esconderla. */
.lateral {
  width:0; flex:0 0 0; background:var(--superficie);
  border-right:1px solid transparent; padding:14px 0; position:-webkit-sticky; position:sticky; top:0;
  height:100vh; height:100dvh; display:flex; flex-direction:column; gap:4px;
  align-items:stretch; overflow:hidden;
  transition:width var(--medio) var(--curva), flex-basis var(--medio) var(--curva),
             padding var(--medio) var(--curva), border-color var(--medio),
             box-shadow var(--medio) var(--curva);
}
.menu-abierto .lateral {
  width:var(--lateral); flex-basis:var(--lateral); padding:14px 12px;
  border-right-color:var(--borde);
}

/* El botón de las tres rayas, que se convierte en una equis al abrir. Vive en
   la cabecera y no dentro de la barra: si viviera dentro, al esconderse la
   barra se iría con ella y no habría forma de volver a sacarla. */
.menu-boton {
  width:40px; height:40px; flex:0 0 40px; border:none; background:none; cursor:pointer;
  border-radius:11px; display:grid; place-items:center; color:var(--texto);
  transition:background var(--rapido), transform var(--rapido) var(--curva);
}
.menu-boton:hover { background:var(--superficie-2); }
.menu-boton:active { transform:scale(.94); }
.rayas { width:18px; height:12px; position:relative; display:block; }
.rayas i {
  position:absolute; left:0; width:100%; height:1.5px; border-radius:2px;
  background:currentColor;
  transition:transform var(--medio) var(--curva), opacity var(--rapido) var(--curva),
             width var(--medio) var(--curva);
}
.rayas i:nth-child(1) { top:0; }
.rayas i:nth-child(2) { top:5.25px; width:72%; }
.rayas i:nth-child(3) { top:10.5px; }
.menu-abierto .rayas i:nth-child(1) { transform:translateY(5.25px) rotate(45deg); }
.menu-abierto .rayas i:nth-child(2) { opacity:0; transform:translateX(-8px); }
.menu-abierto .rayas i:nth-child(3) { transform:translateY(-5.25px) rotate(-45deg); }

/* La pastilla que se desliza por detrás del botón activo.
   Ojo con el orden: `.lateral > *` tiene la misma especificidad y va después,
   así que si no se apunta a la pastilla EN CONCRETO le pisa el `absolute`, la
   pastilla entra en el flujo, empuja los botones y se queda pintada donde no
   toca. Pasó, y se veía marcando la sección equivocada. */
.lateral > * { position:relative; z-index:1; }
.lateral > .nav-marca {
  position:absolute; left:0; top:0; border-radius:12px; background:var(--marca-suave);
  pointer-events:none; opacity:0; z-index:0;
  /* La posición (transform) la lleva un muelle en JS (movimiento.js), no esta
     transition: así un clic detrás de otro cambia de destino sin reiniciarse
     de golpe. Width/height/opacity sí cambian por transition normal, porque
     esos solo se mueven al abrir/cerrar el menú, no al cambiar de pestaña. */
  transition:width var(--medio) var(--curva), height var(--medio) var(--curva),
             opacity var(--rapido), background var(--rapido) var(--curva);
}
/* La pastilla cambia de tinte con la sección activa (JS le pone data-cat en
   moverMarca(), app.js) — el mismo color suave que ya lleva el icono. */
.nav-marca[data-cat="azul"]   { background:linear-gradient(135deg, color-mix(in srgb, var(--azul) 20%, transparent), color-mix(in srgb, var(--azul) 9%, transparent)); }
.nav-marca[data-cat="morado"] { background:linear-gradient(135deg, color-mix(in srgb, var(--morado) 20%, transparent), color-mix(in srgb, var(--morado) 9%, transparent)); }
.nav-marca[data-cat="marca"]  { background:linear-gradient(135deg, color-mix(in srgb, var(--marca) 20%, transparent), color-mix(in srgb, var(--marca) 9%, transparent)); }
.nav-marca[data-cat="menta"]  { background:linear-gradient(135deg, color-mix(in srgb, var(--menta) 20%, transparent), color-mix(in srgb, var(--menta) 9%, transparent)); }
.nav-marca[data-cat="ambar"]  { background:linear-gradient(135deg, color-mix(in srgb, var(--ambar) 20%, transparent), color-mix(in srgb, var(--ambar) 9%, transparent)); }
.nav-marca[data-cat="cian"]   { background:linear-gradient(135deg, color-mix(in srgb, var(--cian) 20%, transparent), color-mix(in srgb, var(--cian) 9%, transparent)); }

.velo-menu { display:none; }
.marca-logo {
  width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  background:var(--superficie); border:1px solid var(--borde);
  object-fit:contain; padding:4px; box-sizing:border-box;
}
.marca-txt b { white-space:nowrap; }
.nav-sep { flex:1; }

/* La cabecera: una franja fina con el botón del menú, la marca y tu inicial.
   Está en todas las pantallas porque es donde vive el botón, y sin botón no
   hay forma de volver a sacar la barra una vez escondida. */
.cabecera-web {
  position:-webkit-sticky; position:sticky; top:0; z-index:60;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background:color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
  /* iPhone con isleta: sin esto la franja fija queda debajo de la cámara. */
  padding-top:env(safe-area-inset-top, 0px);
}
.cab-fila { height:60px; display:flex; align-items:center; gap:10px; }
.marca-web {
  display:flex; align-items:center; gap:10px; background:none; border:none;
  cursor:pointer; padding:0; color:var(--texto); flex:1; min-width:0;
  text-align:left;
}
/* Con la barra abierta, el nombre ya está dentro de ella: en la cabecera
   sobra y se aparta para dejar la franja limpia. */
.menu-abierto .marca-web { opacity:0; pointer-events:none; }
.marca-nombre {
  font-size:15px; font-weight:600; letter-spacing:.01em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cab-avatar {
  width:32px; height:32px; border-radius:50%; border:1px solid var(--borde);
  background:var(--superficie-2); color:var(--texto); cursor:pointer;
  font-weight:600; font-size:14px; flex:0 0 32px;
}

.principal { flex:1; min-width:0; display:flex; flex-direction:column; }
.nav-item .nav-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lienzo { width:100%; padding-left:28px; padding-right:28px; }
.contenido { padding-top:24px; padding-bottom:48px; flex:1; }

/* El titular de cada pantalla, dentro del contenido y con una línea que dice
   de qué va: eso sí que se queda del diseño nuevo. */
.titular-pagina { margin-bottom:26px; }
.titular-pagina h1 {
  font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.25;
}
.titular-pagina .sub {
  color:var(--apagado); font-size:14.5px; margin-top:5px; max-width:62ch;
}
.titular-pagina[hidden] { display:none; }

/* --- Piezas de navegación que comparten la barra de abajo y el acceso.
   Ojo: `.ico-svg` la usa TODA la aplicación (los iconos en línea), no solo el
   menú: si se queda fuera, los iconos salen a su tamaño natural por todos
   lados. Ya pasó al rehacer esta sección. */
.ico-svg { width:19px; height:19px; display:block; }

.nav-item {
  display:flex; align-items:center; gap:12px; padding:0 11px; border-radius:12px;
  color:var(--apagado); font-weight:500; cursor:pointer; border:none; background:none;
  width:100%; height:44px; text-align:left; white-space:nowrap;
  transition:background var(--rapido), color var(--rapido), transform var(--rapido) var(--curva);
}
.nav-item:hover { background:var(--superficie-2); color:var(--texto); }
.nav-item:active { transform:scale(.96); }
/* Los nombres aparecen escalonados al desplegar: entran de izquierda a
   derecha, en el mismo orden en que se leen. */
.nav-item .nav-txt {
  opacity:0; transform:translateX(-8px); transition:opacity .2s var(--curva),
    transform .28s var(--curva);
}
.menu-abierto .nav-item .nav-txt { opacity:1; transform:none; }
.menu-abierto .nav-item:nth-of-type(2) .nav-txt { transition-delay:.03s; }
.menu-abierto .nav-item:nth-of-type(3) .nav-txt { transition-delay:.06s; }
.menu-abierto .nav-item:nth-of-type(4) .nav-txt { transition-delay:.09s; }
.menu-abierto .nav-item:nth-of-type(5) .nav-txt { transition-delay:.12s; }
.menu-abierto .nav-item:nth-of-type(6) .nav-txt { transition-delay:.15s; }
.menu-abierto .nav-item:nth-of-type(7) .nav-txt { transition-delay:.18s; }
/* El fondo del activo lo pone la pastilla que se desliza, no el propio botón. */
.nav-item.activo { color:var(--marca-texto); font-weight:600; background:none; }
.nav-item.activo .ico { transform:scale(1.06); }
.nav-item .ico { transition:transform var(--medio) var(--curva), opacity var(--rapido) var(--curva); }

.nav-item .ico { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; }

/* Un color por sección, solo en el icono (en su chip) y en la pastilla
   activa — nunca en el fondo del botón ni de la barra. Es el estilo
   Ajustes/Salud de iOS: la lista sigue en blanco/negro/gris, el color vive
   en el icono, con la misma insignia cuadrada-redondeada con degradado que
   ya usan las tarjetas de Constantes (.teja-rica-ico), apagada en reposo y
   a tope cuando la sección está activa o el ratón pasa por encima. Panel y
   Perfil no traen data-cat: su icono se queda suelto, sin chip, como antes. */
.nav-item .ico-chip {
  width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:grid; place-items:center;
  transition:transform var(--medio) var(--curva), opacity var(--rapido) var(--curva);
}
.nav-item[data-cat="azul"]   { --tinte-cat:var(--azul); }
.nav-item[data-cat="morado"] { --tinte-cat:var(--morado); }
.nav-item[data-cat="marca"]  { --tinte-cat:var(--marca-texto); }
.nav-item[data-cat="menta"]  { --tinte-cat:var(--menta); }
.nav-item[data-cat="ambar"]  { --tinte-cat:var(--ambar); }
.nav-item[data-cat="cian"]   { --tinte-cat:var(--cian); }
.nav-item[data-cat] .ico { color:var(--tinte-cat); }
.nav-item[data-cat] .ico-chip {
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--tinte-cat) 22%, transparent),
    color-mix(in srgb, var(--tinte-cat) 9%, transparent));
  opacity:.72;
}
.nav-item[data-cat]:hover .ico-chip, .nav-item[data-cat].activo .ico-chip { opacity:1; }
.nav-item[data-cat].activo .ico-chip { transform:scale(1.06); }
.nav-item.activo[data-cat] { color:var(--tinte-cat); }

/* La marca en la pantalla de acceso (ahí no hay cabecera todavía). */
.marca {
  display:flex; align-items:center; gap:11px; padding:4px 3px 16px; overflow:hidden;
}
.marca-txt { opacity:0; transition:opacity .2s var(--curva) .06s; }
.menu-abierto .marca-txt { opacity:1; }
.marca-txt { min-width:0; }
.marca-txt b { display:block; font-size:15px; font-weight:600; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.marca-txt span { font-size:12px; color:var(--apagado); }

/* ---------------------------------------------------------------- piezas */
/* Cada pantalla fija --tono-tarjeta al color de su sección (ver reglas
   ".pantalla-X" más abajo, junto a data-cat de app.js) y .tarjeta/.teja-rica
   lo usan aquí para un degradado MUY sutil — estilo Salud/Ajustes de iOS,
   nunca un color plano ni fuerte. Sin --tono-tarjeta (Panel, Perfil, login)
   color-mix con "transparent" no cambia nada: se quedan neutras como antes,
   sin necesitar una regla aparte. */
.tarjeta {
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--tono-tarjeta, transparent) 7%, var(--superficie)),
    color-mix(in srgb, var(--tono-tarjeta, transparent) 2%, var(--superficie)));
  border:1px solid color-mix(in srgb, var(--tono-tarjeta, transparent) 16%, var(--borde));
  border-radius:var(--r); box-shadow:var(--sombra);
}
/* El tono de cada pantalla, para el degradado de .tarjeta/.teja-rica de
   arriba — mismo mapa de color que ya usan los iconos del menú (app.js). */
.pantalla-agenda     { --tono-tarjeta:var(--azul); }
.pantalla-clientes   { --tono-tarjeta:var(--morado); }
.pantalla-rutinas    { --tono-tarjeta:var(--marca); }
.pantalla-ejercicios { --tono-tarjeta:var(--menta); }
.pantalla-cobros     { --tono-tarjeta:var(--ambar); }
.pantalla-hoy        { --tono-tarjeta:var(--marca); }
.pantalla-plan       { --tono-tarjeta:var(--azul); }
.pantalla-reservar   { --tono-tarjeta:var(--morado); }
.pantalla-comer      { --tono-tarjeta:var(--ambar); }
.pantalla-progreso   { --tono-tarjeta:var(--menta); }
.pantalla-constantes { --tono-tarjeta:var(--cian); }

.tarjeta-pad { padding:18px; }
.tarjeta-cab {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border-bottom:1px solid var(--borde);
}
.tarjeta-cab h3 { font-size:15px; }

.rejilla { display:grid; gap:16px; }
.r-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.r-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.r-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.r-auto { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

.dato { padding:16px 18px; }
.dato .etq { font-size:12px; color:var(--apagado); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; }
.dato .val { font-size:28px; font-weight:700; letter-spacing:-.03em; margin-top:6px;
  font-variant-numeric:tabular-nums; }
.dato .pie { font-size:12.5px; color:var(--tenue); margin-top:2px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-s); border:1px solid var(--borde-fuerte);
  background:var(--superficie); color:var(--texto); font-weight:600; font-size:14px;
  cursor:pointer; transition:background .13s, border-color .13s, transform .08s;
  white-space:nowrap;
  /* Sin esto, el <button> nativo puede pintar su propio fondo por encima
     del `background` de aquí arriba (visto en Chrome/Linux con el tema
     oscuro: las tarjetas salían de un gris cálido en vez de la superficie
     de verdad). Con appearance:none manda siempre el CSS, no el widget. */
  appearance:none; -webkit-appearance:none;
}
.btn:hover { background:var(--superficie-2); }
.btn:active { transform:translateY(1px); }
.btn-p { background:var(--acento); border-color:var(--acento); color:var(--acento-texto); }
.btn-p:hover { background:color-mix(in srgb, var(--acento) 88%, black); }
.btn-fantasma { border-color:transparent; background:transparent; color:var(--apagado); }
.btn-fantasma:hover { background:var(--superficie-2); color:var(--texto); }
.btn-peligro { color:var(--rojo); border-color:transparent; background:transparent; }
.btn-peligro:hover { background:var(--rojo-suave); }
.btn-s { padding:5px 10px; font-size:13px; border-radius:7px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

.eti {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:650; background:var(--superficie-2); color:var(--apagado);
  white-space:nowrap;
}
.eti-verde { background:var(--verde-suave); color:var(--verde); }
.eti-ambar { background:var(--ambar-suave); color:var(--ambar); }
.eti-rojo  { background:var(--rojo-suave);  color:var(--rojo); }
.eti-azul  { background:var(--azul-suave);  color:var(--azul); }
.eti-acento{ background:var(--marca-suave); color:var(--marca); }

.campo { display:block; margin-bottom:13px; }
.campo > span { display:block; font-size:12.5px; font-weight:650; color:var(--apagado); margin-bottom:5px; }
.entrada, select.entrada, textarea.entrada {
  width:100%; padding:9px 12px; border:1px solid var(--borde-fuerte); border-radius:var(--r-s);
  background:var(--superficie); color:var(--texto); outline:none; transition:border-color .13s, box-shadow .13s;
}
.entrada:focus {
  border-color:var(--marca);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent);
}
textarea.entrada { resize:vertical; min-height:74px; }

/* El campo de contraseña con el ojo para verla. El botón vive DENTRO del
   campo (position:relative en la caja), no al lado, para no ensanchar la
   fila ni descuadrar la etiqueta de arriba. */
.campo-clave-caja { position:relative; }
.campo-clave-caja .entrada { padding-right:40px; }
.ver-clave {
  position:absolute; right:2px; top:50%; translate:0 -50%;
  width:32px; height:32px; display:grid; place-items:center;
  border:none; background:none; color:var(--tenue); border-radius:var(--r-s);
  cursor:pointer; transition:color .13s, background .13s;
}
.ver-clave:hover { color:var(--texto); background:var(--superficie-2); }
.ver-clave .ico-svg { width:19px; height:19px; }

.tabla { width:100%; border-collapse:collapse; }
.tabla th {
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--apagado); font-weight:700; padding:9px 14px; border-bottom:1px solid var(--borde);
  white-space:nowrap;
}
.tabla td { padding:11px 14px; border-bottom:1px solid var(--borde); vertical-align:middle; }
.tabla tbody tr:last-child td { border-bottom:none; }
.tabla tbody tr.pinchable { cursor:pointer; }
.tabla tbody tr.pinchable:hover { background:var(--superficie-2); }

.avatar {
  width:34px; height:34px; border-radius:50%; flex:0 0 34px; display:grid; place-items:center;
  font-weight:700; font-size:13px; color:#fff; letter-spacing:-.02em;
}
.persona { display:flex; align-items:center; gap:10px; min-width:0; }
.persona b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.persona small { color:var(--apagado); font-size:12.5px; }

.vacio { text-align:center; padding:44px 20px; color:var(--apagado); }
.vacio .emo { font-size:34px; opacity:.5; display:block; margin-bottom:10px; }
/* Los iconos de trazo sustituyen a los emoji: se tinen del color del texto. */
.vacio .emo .ico-svg { width:32px; height:32px; margin:0 auto; stroke-width:1.4; opacity:.75; }

/* ------------------------------------------------------------------ modal */
.velo {
  position:fixed; inset:0; background:rgba(10,14,20,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:60;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation:aparecer .14s ease;
}
.modal {
  background:var(--elevada); border:1px solid var(--borde); border-radius:var(--r-g);
  box-shadow:var(--sombra-alta); width:min(620px,100%); max-height:90vh; overflow:auto;
  animation:subir .18s cubic-bezier(.2,.8,.3,1);
}
.modal-ancho { width:min(920px,100%); }
.modal-cab { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--borde); position:-webkit-sticky; position:sticky; top:0;
  background:var(--elevada); z-index:1; }
.modal-cuerpo { padding:20px; }
.modal-pie { display:flex; gap:10px; justify-content:flex-end; padding:14px 20px;
  border-top:1px solid var(--borde); position:-webkit-sticky; position:sticky; bottom:0; background:var(--elevada); }
@keyframes aparecer { from{opacity:0} to{opacity:1} }
@keyframes subir { from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none} }

.avisos-flotantes { position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:90; align-items:center; pointer-events:none; }
.aviso-flotante {
  background:var(--texto); color:var(--fondo); padding:10px 18px; border-radius:999px;
  font-weight:600; font-size:14px; box-shadow:var(--sombra-alta);
  /* La entrada y el descartar deslizando los lleva un muelle en JS
     (movimiento.js, avisar() en ui.js) — por eso no hay animation aquí ni
     transition en transform/opacity, que solo estorbarían al muelle. */
  pointer-events:auto;
}
.aviso-flotante.malo { background:var(--rojo); color:#fff; }

/* ---------------------------------------------------------------- agenda */
.semana { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.dia-col { min-width:0; }
.dia-cab { text-align:center; padding:8px 4px 10px; }
.dia-cab .dn { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--apagado); font-weight:700; }
.dia-cab .df { font-size:19px; font-weight:700; margin-top:2px; }
.dia-cab.hoy .df { color:var(--marca); }
.dia-cab.hoy .dn { color:var(--marca); }
.dia-lista { display:flex; flex-direction:column; gap:7px; min-height:60px; }

.hueco {
  background:var(--superficie); border:1px solid var(--borde); border-left:3px solid var(--borde-fuerte);
  border-radius:var(--r-s); padding:9px 10px; cursor:pointer; transition:border-color .13s, transform .08s;
}
.hueco:hover { border-color:var(--marca-borde); transform:translateY(-1px); }
.hueco .hh { font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.hueco .ht { font-size:12px; color:var(--apagado); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; margin-top:1px; }
.hueco .hp { font-size:11.5px; margin-top:6px; font-weight:650; }
.hueco.lleno { border-left-color:var(--rojo); }
.hueco.libre { border-left-color:var(--verde); }
.hueco.parcial { border-left-color:var(--ambar); }
.hueco.voy { border-left-color:var(--marca); background:var(--marca-suave); }
.hueco.pasada { opacity:.55; }

.pilas { display:flex; gap:-6px; }
.pila { display:flex; }
.pila .avatar { width:24px; height:24px; flex:0 0 24px; font-size:10px;
  border:2px solid var(--superficie); margin-left:-7px; }
.pila .avatar:first-child { margin-left:0; }

/* Ocupacion de una hora, sin nombres: puntos llenos = plazas cogidas. */
.aforo {
  display:flex; align-items:center; gap:8px; margin-top:8px;
  font-size:12px; color:var(--apagado); font-weight:600;
}
.plazas { display:inline-flex; gap:3px; }
.plaza {
  width:8px; height:8px; border-radius:50%; display:inline-block;
  background:var(--borde-fuerte); opacity:.55;
}
.plaza.ocupada { background:var(--marca); opacity:1; }
.hueco.lleno .plaza.ocupada { background:var(--rojo); }

/* -------------------------------------------------------------- ejercicio */
.ejer {
  border:1px solid var(--borde); border-radius:var(--r); overflow:hidden; background:var(--superficie);
}
.ejer + .ejer { margin-top:10px; }
/* La cabecera de un ejercicio: numero, texto y, a la derecha, el consejo y el
   "como se hace". Antes iba todo en una fila y en un movil el nombre se partia
   en tres lineas para dejarle sitio a una etiqueta de dos palabras. */
.ejer-cab {
  display:flex; align-items:flex-start; gap:12px; padding:14px 15px;
  transition:background var(--rapido);
}
.ejer-num {
  width:28px; height:28px; border-radius:8px; background:var(--acento); color:var(--acento-texto);
  display:grid; place-items:center; font-weight:600; font-size:13px; flex:0 0 28px;
  font-variant-numeric:tabular-nums; margin-top:1px;
}
.ejer-txt { flex:1; min-width:0; }
.ejer-cab b { font-weight:600; letter-spacing:-.01em; display:block; line-height:1.35; }
.ejer-cab small { display:block; color:var(--apagado); font-size:12.5px; margin-top:2px; }
.ejer-cab .ejer-antes { color:var(--tenue); font-size:12px; }
.ejer-lado {
  display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:0 0 auto;
}
.ejer-cab.pinchable:hover { background:var(--superficie-2); }
.ejer-cab.pinchable:active { background:var(--superficie-3); }
.ver-como {
  font-size:12px; font-weight:650; color:var(--marca); white-space:nowrap; flex:0 0 auto;
}
/* En el móvil no cabe el texto, pero tiene que verse que se puede tocar. */
@media (max-width:560px) {
  .ver-como { font-size:0; }
  .ver-como::after { content:'?'; font-size:13px; display:grid; place-items:center;
    width:22px; height:22px; border-radius:50%; border:1.5px solid var(--marca); }
}
.series { display:flex; flex-wrap:wrap; gap:8px; padding:0 15px 14px; }
.serie {
  display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:var(--r-s);
  border:1px solid var(--borde); background:var(--superficie-2); font-size:13px;
}
.serie.hecha { border-color:var(--verde); background:var(--verde-suave); color:var(--verde); font-weight:650; }
.serie input {
  width:60px; padding:3px 6px; border:1px solid var(--borde-fuerte); border-radius:6px;
  background:var(--superficie); text-align:center; font-size:13px; font-variant-numeric:tabular-nums;
}
.serie .sn { font-weight:700; color:var(--apagado); font-size:11.5px; }

/* ------------------------------------------------------ fichas de tecnica */
.caja-figura {
  display:grid; place-items:center; border-radius:9px; background:var(--superficie-2);
  overflow:hidden;
}
.figura { display:block; }
.figura-grande {
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px;
  background:var(--superficie-2); border-radius:var(--r); margin-bottom:16px;
}
.pie-figura { font-size:11.5px; color:var(--tenue); text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; }
.etq-mini {
  font-size:11.5px; font-weight:700; color:var(--apagado); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:4px;
}
.pasos { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.pasos li { padding-left:2px; }
.pasos li::marker { color:var(--marca); font-weight:700; }
.aviso-tecnica {
  padding:12px 14px; background:var(--ambar-suave); border-radius:var(--r-s); font-size:13.5px;
}
.aviso-tecnica b { color:var(--ambar); display:block; margin-bottom:3px; }

.tarjeta-ejercicio {
  display:flex; gap:12px; align-items:center; padding:11px 13px; cursor:pointer;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  transition:border-color .13s, transform .08s;
}
.tarjeta-ejercicio:hover { border-color:var(--marca-borde); transform:translateY(-1px); }
.tarjeta-ejercicio .nom { font-weight:600; }
.tarjeta-ejercicio .meta { font-size:12.5px; color:var(--apagado); margin-top:2px; }
.estrella { background:none; border:none; cursor:pointer; font-size:17px; padding:2px 4px;
  filter:grayscale(1); opacity:.35; transition:filter .13s, opacity .13s; }
.estrella.on { filter:none; opacity:1; }

.fichas-filtro { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  padding:5px 12px; border-radius:999px; border:1px solid var(--borde-fuerte);
  background:var(--superficie); font-size:13px; font-weight:600; cursor:pointer;
  color:var(--apagado); white-space:nowrap;
}
.chip:hover { background:var(--superficie-2); }
.chip.on { background:var(--acento); border-color:var(--acento); color:var(--acento-texto); }

/* Filas del editor de rutinas */
.fila-ejercicio { display:flex; gap:7px; align-items:center; margin-bottom:7px; }
.elige-ejercicio {
  flex:2; min-width:0; display:flex; align-items:center; gap:9px; padding:6px 9px;
  border:1px solid var(--borde-fuerte); border-radius:var(--r-s); background:var(--superficie);
  cursor:pointer; text-align:left;
}
.elige-ejercicio:hover { border-color:var(--marca); }
.elige-ejercicio b { display:block; font-weight:600; font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.elige-ejercicio small { color:var(--apagado); font-size:12px; }
.cabecera-columnas {
  display:flex; gap:7px; font-size:11px; color:var(--tenue); text-transform:uppercase;
  letter-spacing:.05em; font-weight:700; margin-bottom:5px;
}
.cabecera-columnas span:nth-child(1) { flex:2; }
.cabecera-columnas span:nth-child(2) { width:58px; text-align:center; }
.cabecera-columnas span:nth-child(3) { width:88px; text-align:center; }
.cabecera-columnas span:nth-child(4) { width:86px; text-align:center; }
.cabecera-columnas span:nth-child(5) { width:76px; }
.acc-fila { display:flex; gap:4px; flex:none; }

/* La casilla de reps acepta también tiempo ("45s", "1:30"). Cuando lo que hay
   escrito suena a tiempo, se enciende un relojito dentro: el entrenador ve de
   un vistazo que a ese ejercicio le va a salir un cronómetro al cliente. */
.celda-reps { position:relative; width:88px; flex:0 0 88px; display:block; }
.celda-reps .entrada { width:100%; }
.celda-reloj {
  position:absolute; right:5px; top:50%; transform:translateY(-50%) scale(.6);
  font-size:12px; line-height:1; opacity:0; pointer-events:none;
  transition:opacity .15s, transform .18s var(--curva);
}
.celda-reps.es-tiempo .celda-reloj { opacity:1; transform:translateY(-50%) scale(1); }
.celda-reps.es-tiempo .entrada {
  padding-right:19px; border-color:var(--marca);
  background:color-mix(in srgb, var(--marca) 7%, var(--superficie));
}

/* Una superserie en el editor: caja con galón de color a la izquierda,
   agrupando 2+ ejercicios que se hacen uno detrás de otro sin descanso.
   Las filas de dentro pierden el margen-abajo individual (los separa el
   padding de la caja, no cada fila) para que se lean como un solo bloque. */
.superserie-caja {
  border:1px solid var(--marca-borde); border-left:3px solid var(--marca);
  border-radius:var(--r-s); padding:9px 9px 2px; margin-bottom:9px;
  background:color-mix(in srgb, var(--marca-suave) 35%, transparent);
}
.superserie-cab {
  display:flex; align-items:center; gap:7px; margin-bottom:7px;
  font-size:11.5px; font-weight:700; color:var(--marca-texto);
  text-transform:uppercase; letter-spacing:.04em;
}
.superserie-cab .ico-svg { width:14px; height:14px; }
.superserie-cab .btn { margin-left:auto; text-transform:none; letter-spacing:normal; font-weight:600; }
/* Joel: "se tiene que ver como que ambos forman parte de uno" — antes cada
   ejercicio de la superserie seguía siendo su propia tarjeta con su propio
   borde, así que se leía igual que dos ejercicios sueltos cualquiera. Ahora
   comparten una sola caja con un divisor a rayas entre ellos, en vez de dos
   cajas dentro de una tercera. El número también se comparte (2A/2B, ver
   editorRutina() en admin.js) en vez de que cada uno tenga el suyo. */
.superserie-filas {
  border:1px solid var(--marca-borde); border-radius:var(--r-s); overflow:hidden;
  background:var(--superficie);
}
.superserie-filas .fila-ejercicio { margin-bottom:0; padding:6px 9px; }
.superserie-filas .fila-ejercicio + .fila-ejercicio { border-top:1px dashed var(--marca-borde); }
.superserie-filas .elige-ejercicio { border:none; background:transparent; padding:0; }
.ejer-num-superserie { background:var(--marca); color:#fff; }
/* La misma caja, pero para la vista del cliente (envuelve tarjetas .ejer
   completas, no filas finas del editor): un solo borde compartido, con las
   tarjetas de dentro sin el suyo propio, separadas por el mismo divisor a
   rayas — para que en plena serie se note que van juntas, sin descanso. */
.superserie-cliente {
  padding:0; margin:0 0 14px; border:1px solid var(--marca-borde);
  border-radius:var(--r); overflow:hidden; background:var(--superficie);
}
.superserie-cliente .superserie-cab {
  padding:10px 15px; margin:0;
  background:color-mix(in srgb, var(--marca-suave) 45%, transparent);
}
.superserie-cliente .ejer-en-superserie { border:none; border-radius:0; background:transparent; }
.superserie-cliente .ejer-en-superserie + .ejer-en-superserie {
  margin-top:0; border-top:1px dashed var(--marca-borde);
}

/* ---------------------------------------------------------------- acceso
   La única pantalla de toda la app que no es una herramienta de trabajo:
   es la puerta. Aquí sí se puede gastar algo de color y movimiento que en
   el panel de un entrenador (con datos reales todo el día delante) estaría
   de más — pero SIEMPRE con la misma paleta de siempre (marca/ámbar/azul),
   nunca colores nuevos que desentonen en cuanto entras de verdad. */
.acceso {
  min-height:100vh; min-height:100dvh; display:grid; place-items:center;
  padding:max(20px, env(safe-area-inset-top, 0px))
          max(20px, env(safe-area-inset-right, 0px))
          max(20px, env(safe-area-inset-bottom, 0px))
          max(20px, env(safe-area-inset-left, 0px));
  background:var(--fondo); position:relative; overflow:hidden; isolation:isolate;
}
/* Tres manchas de color muy grandes y muy difuminadas, a la deriva. No son
   "decoración de más": dan la sensación de que la pantalla respira antes
   de que haya nada que tocar. En oscuro los mismos tonos ya vienen más
   claros por las propias variables, así que no hace falta tocar nada aquí. */
.acceso::before, .acceso::after, .acceso-caja::before {
  content:""; position:absolute; z-index:-1; border-radius:50%;
  filter:blur(70px); opacity:.4; pointer-events:none;
}
.acceso::before {
  width:60vmax; height:60vmax; left:-20vmax; top:-24vmax;
  background:radial-gradient(circle, var(--marca) 0%, transparent 70%);
  animation:deriva-1 26s ease-in-out infinite alternate;
}
.acceso::after {
  width:52vmax; height:52vmax; right:-18vmax; bottom:-22vmax;
  background:radial-gradient(circle, var(--azul) 0%, transparent 70%);
  animation:deriva-2 32s ease-in-out infinite alternate;
}
.acceso-caja { position:relative; width:min(400px,100%); animation:entra-caja .6s var(--curva) both; }
.acceso-caja::before {
  width:34vmax; height:34vmax; left:50%; top:38%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--ambar) 0%, transparent 72%); opacity:.22;
  animation:deriva-3 22s ease-in-out infinite alternate;
}
@keyframes deriva-1 { to { transform:translate(6vmax,8vmax) scale(1.08); } }
@keyframes deriva-2 { to { transform:translate(-7vmax,-5vmax) scale(1.12); } }
@keyframes deriva-3 { to { transform:translate(-50%,-50%) translate(3vmax,-4vmax) scale(1.15); } }
@keyframes entra-caja { from { opacity:0; transform:translateY(14px) scale(.98); } }

.acceso-marca { text-align:center; margin-bottom:26px; }
.acceso-marca .marca-logo { width:56px; height:56px; border-radius:16px; margin:0 auto 14px; padding:6px; }
.acceso-marca h1 { font-size:24px; }
.acceso-marca p { color:var(--apagado); font-size:14px; margin-top:5px; }

/* --- La marca GimnaX ------------------------------------------------------
   El nombre de la WEB, que no es el nombre del gimnasio de nadie: por eso
   vive solo aquí, en las pantallas de antes de entrar, y en cuanto te
   identificas manda el escudo y el nombre del gimnasio de verdad.

   Entra girando letra a letra y frena. La X gira más vueltas que las demás,
   llega la última y aterriza con un destello: es la letra que da nombre a
   todo esto, así que es la que se queda mirando. Dura 1,7 s de principio a
   fin — una vez, al abrir, y nunca más. */
.acceso-marca h1.gimnax {
  font-size:clamp(40px, 12vw, 56px); font-weight:700; letter-spacing:-.035em;
  line-height:1.08; color:var(--texto);
  /* Sin perspectiva, un rotateY es un simple aplastarse horizontal: las
     letras no girarían, se encogerían y volverían. */
  perspective:900px;
}
.gimnax-letras { display:inline-block; }
.gimnax i {
  font-style:normal; display:inline-block; transform-origin:50% 55%;
  animation:marca-gira .95s var(--curva) both;
  animation-delay:calc(var(--n) * .07s);
}
@keyframes marca-gira {
  from { opacity:0; transform:rotateY(-450deg) translateY(10px) scale(.72); }
  55%  { opacity:1; }
  to   { opacity:1; transform:none; }
}
/* La X: su propio giro, más largo y con más vueltas, y el destello al
   parar. Va en UN solo fotogramado y no en dos animaciones sueltas porque
   las dos tocarían `transform` y la segunda le pisaría el giro a la primera. */
.gimnax .equis {
  color:var(--marca-clara);
  animation:marca-gira-equis 1.35s var(--curva) .35s both;
}
@keyframes marca-gira-equis {
  0%   { opacity:0; transform:rotateY(-810deg) translateY(10px) scale(.7); text-shadow:none; }
  55%  { opacity:1; }
  74%  { transform:rotateY(0) translateY(0) scale(1.18);
         text-shadow:0 0 26px var(--marca-clara); }
  to   { opacity:1; transform:none; text-shadow:0 0 0 transparent; }
}
/* El renglón de debajo espera a que la palabra pare: si entra a la vez,
   el ojo no sabe dónde mirar y el giro se pierde. */
.acceso-marca h1.gimnax + p { animation:entra-pantalla .5s var(--curva) 1.15s both; }

/* Logo ya asentado (marcaGimnaX(true) en app.js): mismo aspecto final, sin
   el keyframe de entrada — para Entrar y las pantallas después de la de
   Rol, que ya lo vieron girar una vez. */
.gimnax.quieto i, .gimnax.quieto .equis { animation:none; opacity:1; transform:none; }
.gimnax.quieto .equis { text-shadow:none; }
.acceso-marca h1.gimnax.quieto + p { animation:none; }

.pistas { margin-top:16px; padding:13px 15px; border:1px dashed var(--borde-fuerte);
  border-radius:var(--r-s); font-size:12.5px; color:var(--apagado); }
.pistas b { color:var(--texto); }

/* Pantalla de "¿entrenador o socio?": sin escudo (todavía no hay UN
   gimnasio concreto), así que el título ocupa el sitio del logo — pero en
   vez de dejarlo plano, el nombre genérico lleva un degradado sutil de la
   marca, para que no parezca que falta el logo, sino que está hecho así. */
.acceso-marca-generica { margin-bottom:26px; }
.acceso-marca-generica h1 {
  font-size:28px;
  background:linear-gradient(92deg, var(--marca-fuerte) 15%, var(--azul) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rol-opciones { display:flex; flex-direction:column; gap:10px; }
.rol-opcion {
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:15px 16px; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r); box-shadow:var(--sombra); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  opacity:0; transform:translateY(10px); animation:entra-fila .5s var(--curva) forwards;
  transition:border-color var(--rapido) var(--curva), background var(--rapido) var(--curva),
    transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.rol-opciones .rol-opcion:nth-child(1) { animation-delay:.08s; }
.rol-opciones .rol-opcion:nth-child(2) { animation-delay:.16s; }
@keyframes entra-fila { to { opacity:1; transform:translateY(0); } }
.rol-opcion:hover {
  border-color:var(--marca-borde); box-shadow:var(--sombra-hero); transform:translateY(-2px);
}
.rol-opcion:active { transform:translateY(0); }
.rol-opcion-ico {
  flex:0 0 auto; width:46px; height:46px; border-radius:var(--r-s); display:grid; place-items:center;
  background:var(--marca-suave); color:var(--marca-texto);
  transition:transform var(--rapido) var(--curva);
}
.rol-opcion:nth-child(2) .rol-opcion-ico { background:var(--azul-suave); color:var(--azul); }
.rol-opcion:hover .rol-opcion-ico { transform:scale(1.08) rotate(-4deg); }
.rol-opcion-ico .ico-svg { width:24px; height:24px; }
.rol-opcion-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rol-opcion-tit { font-size:15.5px; font-weight:650; color:var(--texto); }
.rol-opcion-pie { font-size:13px; color:var(--apagado); }

/* El botón principal de la entrada, un pelín más vivo que un .btn-p normal:
   un brillo que cruza al pasar el ratón. Sutil, una vez, no un bucle. */
.acceso .btn-p { position:relative; overflow:hidden; }
.acceso .btn-p::after {
  content:""; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
}
.acceso .btn-p:hover::after { translate:120% 0; transition:translate .6s var(--curva-suave); }

@media (prefers-reduced-motion: reduce) {
  .acceso::before, .acceso::after, .acceso-caja::before { animation:none; }
  .acceso-caja, .rol-opcion { animation:none; opacity:1; transform:none; }
  .acceso .btn-p::after { display:none; }
  /* La marca se queda puesta, con su X verde, pero sin el giro: a quien
     marea el movimiento, una palabra dando vueltas es justo lo peor. */
  .gimnax i, .gimnax .equis, .acceso-marca h1.gimnax + p {
    animation:none; opacity:1; transform:none; text-shadow:none;
  }
}

/* ----------------------------------------------------------------- movil */
@media (max-width:900px) {
  /* Safari en iPhone hace zoom él solo al tocar un campo con letra menor de
     16px — y luego, al quitar el foco, no siempre vuelve a dejar la
     pantalla como estaba: todo se descuadra un momento. No es "más grande
     los campos", es que a partir de 16px Safari ni se plantea hacer zoom.
     Con !important porque hay sitios (.dh-campos, .dh-tramo) que ya traen
     su propio font-size más pequeño para caber en poco ancho. */
  .entrada, select.entrada, textarea.entrada { font-size:16px !important; }

  .r-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .r-3, .r-2 { grid-template-columns:1fr; }
  /* En el móvil la barra se abre POR ENCIMA del contenido, con un velo detrás.
     Si empujara, la pantalla entera se movería 250 px cada vez y eso marea. */
  .lateral {
    position:fixed; top:0; bottom:0; left:0; z-index:70;
    width:0; flex-basis:0; height:auto; padding:12px 0;
  }
  .menu-abierto .lateral {
    width:min(78vw, 280px); flex-basis:min(78vw, 280px);
    padding:calc(12px + env(safe-area-inset-top, 0px)) 12px
            calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow:var(--sombra-alta);
  }

  .velo-menu {
    display:block; position:fixed; inset:0; z-index:65;
    background:rgba(16,20,19,.42); opacity:0; pointer-events:none;
    transition:opacity var(--medio) var(--curva);
  }
  .menu-abierto .velo-menu { opacity:1; pointer-events:auto; }

  /* En el móvil el nombre no se aparta al abrir: la barra va por encima, así
     que la cabecera sigue viéndose por detrás y quedaría un hueco raro. */
  .menu-abierto .marca-web { opacity:1; pointer-events:auto; }
  .lienzo { padding-left:16px; padding-right:16px; }
  .cab-fila { height:60px; gap:12px; }
  .marca-logo { width:30px; height:30px; flex:0 0 30px; border-radius:9px; padding:3px; }
  .marca-nombre { font-size:14px; }
  .contenido { padding-top:20px; padding-bottom:calc(48px + env(safe-area-inset-bottom)); }
  .titular-pagina { margin-bottom:18px; }
  .titular-pagina h1 { font-size:25px; }
  .titular-pagina .sub { font-size:14px; }
  .semana { grid-template-columns:1fr; gap:14px; }
  .dia-cab { text-align:left; display:flex; align-items:baseline; gap:9px;
    border-bottom:1px solid var(--borde); }
  h1 { font-size:22px; }
  .modal { width:100%; max-height:92vh; border-radius:var(--r-g) var(--r-g) 0 0; }
  .velo { align-items:flex-end; padding:0; }
  /* Esconder columnas hacía desaparecer el importe y el botón de cobrar.
     En tableta la tabla se desliza; en móvil cada fila se convierte en ficha. */
  .tarjeta:has(> .tabla) { overflow-x:auto; }
  .tabla { min-width:560px; }
  .tabla th, .tabla td { white-space:nowrap; }
}
/* En pantalla de móvil cada fila de tabla pasa a ser una ficha apilada:
   así no se pierde ni el importe ni el botón, y no hay que deslizar. */
@media (max-width:640px) {
  .tarjeta:has(> .tabla) { overflow-x:visible; }
  .tabla { min-width:0; display:block; }
  .tabla thead { display:none; }
  .tabla tbody, .tabla tr { display:block; width:100%; }
  .tabla tr {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
    padding:13px 15px; border-bottom:1px solid var(--borde);
  }
  .tabla tbody tr:last-child { border-bottom:none; }
  .tabla td { display:block; border:none; padding:0; white-space:normal; text-align:left !important; }
  .tabla td:first-child { flex:1 0 100%; }
  .tabla td:empty { display:none; }
}

@media (min-width:901px) { .solo-movil { display:none !important; } }

.grafica-envoltorio { position:relative; }
.grafica { width:100%; height:auto; display:block; }
.grafica-captura { cursor:crosshair; touch-action:pan-y; }
/* .grafica-linea/.grafica-area/.grafica-punto se pintan con los atributos
   fill/stroke que pone la propia gráfica; estas clases solo existen para que
   `activarGraficas` (ui.js) las encuentre y las anime. */
.grafica-linea, .grafica-area, .grafica-punto { vector-effect:non-scaling-stroke; }
/* El trazo lleva un halo de su propio color (--c lo pone la gráfica en el
   style de cada línea): es lo que separa una gráfica "de hoja de cálculo"
   de una que parece de una app de verdad. */
.grafica-linea { filter:drop-shadow(0 2px 7px color-mix(in srgb, var(--c) 45%, transparent)); }
.grafica-punto { opacity:.55; }
/* El último punto es el de HOY: más grande, con un halo que late despacio
   para que el ojo vaya solo al dato de ahora. */
.grafica-ultimo { fill:var(--c); stroke:var(--superficie); stroke-width:2; }
.grafica-halo { fill:var(--c); opacity:.28; transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: no-preference) {
  .grafica-halo { animation:halo-late 2.4s ease-in-out infinite; }
}
@keyframes halo-late {
  0%, 100% { transform:scale(1); opacity:.28; }
  50%      { transform:scale(1.55); opacity:.06; }
}
.grafica-cursor { transition:opacity .15s ease; }
.grafica-tooltip {
  position:absolute; top:6px; transform:translateX(-50%); pointer-events:none;
  background:var(--superficie-2); border:1px solid var(--borde); border-radius:8px;
  padding:5px 10px; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap;
  display:flex; gap:7px; align-items:baseline; box-shadow:var(--sombra); z-index:2;
}
.grafica-tooltip .gt-fecha { color:var(--tenue); font-size:11px; }
.leyenda { display:flex; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--apagado); margin-top:8px; }
.leyenda i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; }
.cargando { display:grid; place-items:center; padding:60px; color:var(--apagado); }
.filtro-barra { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.buscador { flex:1; min-width:180px; max-width:340px; }

/* Bloque plegable: el detalle del aviso de privacidad, que no aplaste la pantalla. */
.plegable > summary {
  cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--marca);
  padding: 9px 0; list-style: none; display: flex; align-items: center; gap: 6px;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before { content: '›'; transition: transform .15s; font-size: 17px; }
.plegable[open] > summary::before { transform: rotate(90deg); }

/* =================================================== tira compacta de datos
   Cuatro cifras ocupaban dos tercios de la pantalla del movil en cuatro
   tarjetas gigantes. Ahora es una sola tarjeta dividida. */
.tira-datos {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden;
}
.tira-datos > div { padding:12px 15px; border-left:1px solid var(--borde); min-width:0; }
.tira-datos > div:first-child { border-left:none; }
.tira-datos .etq {
  font-size:11px; color:var(--apagado); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tira-datos .val {
  font-size:22px; font-weight:700; letter-spacing:-.03em; margin-top:3px;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.tira-datos .pie {
  font-size:11.5px; color:var(--tenue); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:700px) {
  .tira-datos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tira-datos > div:nth-child(odd) { border-left:none; }
  .tira-datos > div:nth-child(n+3) { border-top:1px solid var(--borde); }
  .tira-datos .val { font-size:20px; }
}

/* ------------------------------------------------------------- avisos con icono */
.aviso-fila {
  display:flex; gap:12px; align-items:center; padding:11px 18px;
  border-bottom:1px solid var(--borde); cursor:pointer; transition:background .13s;
}
.aviso-fila:last-child { border-bottom:none; }
.aviso-fila:hover { background:var(--superficie-2); }
.aviso-ico {
  width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:var(--superficie-2); color:var(--apagado);
}
.aviso-ico .ico-svg { width:17px; height:17px; }
.aviso-ico.rojo  { background:linear-gradient(135deg, color-mix(in srgb, var(--rojo) 24%, transparent), color-mix(in srgb, var(--rojo) 10%, transparent)); color:var(--rojo); }
.aviso-ico.ambar { background:linear-gradient(135deg, color-mix(in srgb, var(--ambar) 24%, transparent), color-mix(in srgb, var(--ambar) 10%, transparent)); color:var(--ambar); }
.aviso-ico.azul  { background:linear-gradient(135deg, color-mix(in srgb, var(--azul) 24%, transparent), color-mix(in srgb, var(--azul) 10%, transparent)); color:var(--azul); }
.aviso-ico.marca { background:linear-gradient(135deg, color-mix(in srgb, var(--marca) 24%, transparent), color-mix(in srgb, var(--marca) 10%, transparent)); color:var(--marca); }
.aviso-fila .txt { flex:1; min-width:0; overflow:hidden; }
/* El recado que deja el cliente al reservar puede ocupar dos líneas: es lo que
   Fran tiene que leer ANTES de la sesión, no algo que se corte con puntos. */
.fila-asistencia .persona small,
#apuntados .persona small {
  white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35;
  color:var(--marca-texto);
}
/* Sin esto el nombre largo se sale de su hueco y pinta encima de la etiqueta. */
.aviso-fila .txt > .persona { max-width:100%; }
.aviso-fila .txt small { display:block; color:var(--apagado); font-size:12.5px; margin-top:1px; }

/* ------------------------------------------------- filtros que no aplasten
   En el movil las dos filas de chips ocupaban media pantalla antes del
   primer ejercicio. Ahora cada fila se desliza de lado en una sola linea. */
@media (max-width:900px) {
  .fichas-filtro {
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
    /* Se difumina el borde derecho para que se vea que hay mas a un lado. */
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
            mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  .fichas-filtro::-webkit-scrollbar { display:none; }
  .fichas-filtro .chip { flex:0 0 auto; }
  .filtro-barra .buscador { max-width:none; }
}
@media (max-width:640px) {
  /* El buscador entero en su fila; la cuenta y el boton comparten la siguiente. */
  .filtro-barra .buscador { flex:1 0 100%; max-width:none; }
}

/* ============================================ la figura anatomica, en grande
   Era un sello de 60 px en gris y es lo unico que esta app tiene y nadie mas.
   Ahora los musculos se encienden uno detras de otro al abrir la ficha. */
.figuras { display:flex; gap:18px; justify-content:center; align-items:flex-end; flex-wrap:wrap; }
.figura-col { display:flex; flex-direction:column; align-items:center; gap:7px; }
.musculos-chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.musculos-chips .eti { font-size:11.5px; }

@keyframes encender {
  from { opacity:0; transform:scale(.9); }
  60%  { opacity:1; }
  to   { opacity:1; transform:none; }
}
.figura .luz {
  animation:encender .55s cubic-bezier(.2,.85,.3,1) both;
  transform-origin:50% 50%; transform-box:fill-box;
}
@media (prefers-reduced-motion:reduce) { .figura .luz { animation:none; } }

/* -------------------------------------------------- mapa del cuerpo del dia */
.mapa-cuerpo {
  display:flex; gap:20px; align-items:center; padding:18px;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  box-shadow:var(--sombra);
}
.mapa-cuerpo .figuras { flex:0 0 auto; gap:12px; }
.mapa-cuerpo .mapa-txt { flex:1; min-width:0; }
.mapa-cuerpo .musculos-chips { justify-content:flex-start; }
@media (max-width:560px) {
  .mapa-cuerpo { flex-direction:column; align-items:stretch; gap:14px; padding:16px; }
  .mapa-cuerpo .figuras { justify-content:center; }
  .mapa-cuerpo .mapa-txt { text-align:center; }
  .mapa-cuerpo .musculos-chips { justify-content:center; }
}

/* ==================================================== modo gimnasio
   Pantalla completa, un ejercicio cada vez y botones para dedos sudados.
   Es donde el cliente pasa 45 minutos: aqui no cabe nada pequeno. */
.entrenar {
  position:fixed; inset:0; z-index:80; background:var(--fondo);
  display:flex; flex-direction:column;
  animation:subir .2s cubic-bezier(.2,.8,.3,1);
}
.entrenar-cab {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  padding-top:calc(10px + env(safe-area-inset-top));
  border-bottom:1px solid var(--borde); background:var(--superficie);
}
.entrenar-tit { flex:1; min-width:0; text-align:center; }
.entrenar-tit b { display:block; font-size:15px; font-weight:650; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entrenar-tit small { color:var(--apagado); font-size:12px; }

.entrenar-cuerpo {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 16px 20px; max-width:620px; width:100%; margin:0 auto;
}
.entrenar-figura {
  display:grid; place-items:center; background:var(--superficie-2);
  border-radius:var(--r); padding:14px; margin-bottom:14px; min-height:180px;
}
.entrenar-figura img { max-height:230px; width:auto; max-width:100%;
  object-fit:contain; border-radius:var(--r-s); }
.entrenar-nombre { font-size:22px; text-align:center; }
.entrenar-pauta { text-align:center; color:var(--apagado); font-size:13.5px;
  margin-top:4px; margin-bottom:16px; }

/* ------------------------------------------------- el consejo de hoy */
.consejo {
  border:1px solid var(--borde); border-left:3px solid var(--borde-fuerte);
  border-radius:var(--r-s); padding:12px 14px; margin-bottom:12px;
  background:var(--superficie);
}
.consejo-cab { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.consejo-ico { display:grid; place-items:center; }
.consejo-ico .ico-svg { width:18px; height:18px; }
.consejo-txt { font-size:13.5px; line-height:1.5; color:var(--apagado); }
.consejo-txt b { color:var(--texto); }
.consejo.sube  { border-left-color:var(--marca); background:var(--marca-suave); }
.consejo.sube .consejo-cab { color:var(--marca); }
.consejo.baja  { border-left-color:var(--ambar); background:var(--ambar-suave); }
.consejo.baja .consejo-cab { color:var(--ambar); }
.consejo.igual { border-left-color:var(--borde-fuerte); }
.consejo.aviso { border-left-color:var(--ambar); background:var(--ambar-suave); }

/* ------------------------------------------------ las series, en grande */
.series-grandes { display:flex; flex-direction:column; gap:10px; }

/* Cada serie es una ficha de dos filas: arriba "1a serie" y el boton de
   hecha, abajo las dos ruedas. Asi los dedos tienen sitio de sobra y no hay
   forma de que se parta en un movil estrecho. */
.serie-grande {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  padding:12px; border:1px solid var(--borde); border-radius:var(--r);
  background:var(--superficie); transition:border-color .15s, background .15s;
}
.serie-grande.hecha { border-color:var(--verde); background:var(--verde-suave); }
.serie-n {
  font-weight:700; color:var(--apagado); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em;
}
.serie-pasos { grid-column:1 / -1; display:flex; gap:10px; }

.paso { display:flex; align-items:center; flex:1 1 0; min-width:0; position:relative; }
.paso-btn {
  width:44px; height:50px; flex:0 0 44px; border:1px solid var(--borde-fuerte);
  background:var(--superficie); color:var(--texto); font-size:23px; font-weight:600;
  cursor:pointer; display:grid; place-items:center; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.paso-btn:first-child { border-radius:var(--r-s) 0 0 var(--r-s); }
.paso-btn:last-of-type { border-radius:0 var(--r-s) var(--r-s) 0; }
.paso-btn:active { background:var(--superficie-2); }
.paso input {
  width:100%; min-width:0; height:50px; text-align:center; border:1px solid var(--borde-fuerte);
  border-left:none; border-right:none; background:var(--superficie); color:var(--texto);
  font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; outline:none;
  -moz-appearance:textfield; padding:0 2px;
}
.paso input::-webkit-outer-spin-button, .paso input::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0;
}
.paso input:focus { border-color:var(--marca); }
.paso-etq {
  position:absolute; left:0; right:0; bottom:3px; text-align:center; font-size:9.5px;
  color:var(--tenue); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  pointer-events:none;
}
/* --------------------------------- series de TIEMPO (plancha, isométricos)
   Aquí no se escribe nada: un botón redondo que cuenta hacia atrás y cierra
   la serie solo. El peso, si lo hay, se queda al lado y pequeño. */
.crono { grid-column:1 / -1; display:flex; align-items:center; gap:14px; }
.crono-aro {
  position:relative; flex:0 0 auto; width:150px; height:150px; padding:0; border:none;
  background:transparent; cursor:pointer; display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent; margin:0 auto;
}
.crono-aro svg { width:100%; height:100%; transform:rotate(-90deg); }
.crono-fondo { fill:none; stroke:var(--superficie-2); stroke-width:8; }
.crono-linea {
  fill:none; stroke:var(--marca); stroke-width:8; stroke-linecap:round;
  transition:stroke-dashoffset 1s linear;
}
.crono-txt { position:absolute; inset:0; display:grid; place-content:center; gap:2px; text-align:center;
  padding:0 18px; }
.crono-txt b { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.crono-txt small { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--tenue);
  font-weight:700; white-space:nowrap; }
/* Mientras corre, el aro late: se ve de reojo desde el suelo. */
.serie-grande.corriendo .crono-linea { stroke:var(--verde); }
.serie-grande.corriendo .crono-aro { animation:crono-late 2s ease-in-out infinite; }
@keyframes crono-late { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }
.serie-grande.hecha .crono-linea { stroke:var(--verde); }
.crono .paso-lado { flex:0 0 112px; }
/* El botón de "Saltar" de una serie de tiempo es secundario: el protagonista
   es el aro, no el botón. */
.serie-tiempo .btn-hecha {
  background:transparent; color:var(--apagado); border-color:var(--borde-fuerte);
}
.serie-tiempo.hecha .btn-hecha { background:var(--verde); border-color:var(--verde); color:#fff; }
@media (prefers-reduced-motion:reduce) {
  .serie-grande.corriendo .crono-aro { animation:none; }
}
/* En un móvil estrecho el aro y el peso no caben al lado: el aro manda y el
   peso se va debajo, a lo ancho. */
@media (max-width:420px) {
  .crono { flex-direction:column; gap:10px; }
  .crono .paso-lado { flex:0 0 auto; width:100%; }
}

.btn-hecha {
  height:38px; min-width:88px; padding:0 16px; border-radius:var(--r-s);
  border:1px solid var(--acento); background:var(--acento); color:var(--acento-texto);
  font-weight:700; font-size:14px; cursor:pointer;
}
.serie-grande.hecha .btn-hecha {
  background:var(--verde); border-color:var(--verde); color:#fff;
}

.entrenar-pie {
  display:flex; gap:9px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--borde); background:var(--superficie);
  max-width:620px; width:100%; margin:0 auto;
}
.entrenar-pie .btn { height:46px; }

/* ------------------------------------------------------- el descanso */
/* Ojo: `display:grid` gana a `[hidden]`, asi que hay que apagarlo a mano o el
   velo del descanso tapa la pantalla entera desde el primer momento. */
.descanso[hidden] { display:none; }
.descanso {
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:color-mix(in srgb, var(--fondo) 96%, transparent);
  animation:aparecer .16s ease;
}
/* El desenfoque es un adorno: si el navegador no lo hace, el fondo ya tapa. */
@supports (backdrop-filter:blur(6px)) { .descanso { backdrop-filter:blur(6px); } }
.descanso-caja { display:flex; flex-direction:column; align-items:center; gap:16px;
  position:relative; }
/* El numero va centrado DENTRO del aro, no colgado de la esquina de la capa. */
.descanso-txt { position:absolute; top:60px; left:0; right:0; text-align:center; }
.aro { width:190px; height:190px; transform:rotate(-90deg); }
.aro-fondo { fill:none; stroke:var(--superficie-2); stroke-width:7; }
.aro-linea {
  fill:none; stroke:var(--marca); stroke-width:7; stroke-linecap:round;
  transition:stroke-dashoffset 1s linear;
}
.descanso-num { font-size:40px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.03em; }
.descanso-botones { display:flex; gap:9px; }
.descanso-botones .btn { height:42px; padding:0 18px; }

/* ---------------------------------------------------------- el final */
.final { text-align:center; padding:30px 10px; }
.final-ico { color:var(--verde); margin-bottom:12px; }
.final-ico .ico-svg { width:56px; height:56px; margin:0 auto; stroke-width:1.5; }
.final h2 { font-size:24px; }
.final p { color:var(--apagado); margin-top:6px; }
.final-datos {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px;
}
.final-datos > div {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  padding:14px 8px;
}
.final-datos b { display:block; font-size:26px; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; }
.final-datos span { font-size:11.5px; color:var(--apagado); }
.final-nota { margin-top:18px; font-size:13.5px; }

/* ------------------------------------- el boton de empezar, en la rutina */
.empezar {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:52px; font-size:16px; font-weight:700; margin-top:14px;
}
.empezar .ico-svg { width:20px; height:20px; }

/* La cabecera de tarjeta con selector y boton no cabe de una linea en movil:
   se deja envolver, pero sin obligar al titulo a comerse una fila el solo. */
@media (max-width:640px) {
  .tarjeta-cab { flex-wrap:wrap; }
  .tarjeta-cab > h3 { min-width:0; }
}
/* Un pie que si puede ocupar dos lineas: la comparacion con el mes pasado
   se cortaba justo donde estaba el dato ("que el 6 d..."). */
.tira-datos .pie-largo { white-space:normal; overflow:visible; line-height:1.35; }

/* ======================================================== la tarjeta grande
   La jerarquia se hace con UNA tarjeta que manda y el resto calladas. Si
   todas llevan el mismo borde de 1 px y la misma sombra, el ojo no sabe
   donde mirar: eso era lo que hacia que la app pareciese un panel. */
/* La tarjeta grande de arriba lleva el mismo aire difuminado que la entrada,
   pero servido dentro de la propia tarjeta: dos manchas muy flojas, una de
   salvia por la izquierda y otra azulada por la derecha, encima del blanco
   de siempre. Van como background-image y no como ::before a propósito —
   un pseudoelemento obligaría a poner z-index a todo lo de dentro, y
   .hero-linea ya se sale de la caja con márgenes negativos. */
.hero {
  background:
    radial-gradient(135% 105% at 6% -25%, var(--velo-marca), transparent 60%),
    radial-gradient(115% 100% at 104% 4%, var(--velo-azul), transparent 56%),
    var(--superficie);
  border-radius:var(--r-hero); border:none;
  box-shadow:var(--sombra-hero); padding:26px 24px;
}
.hero + * { margin-top:18px; }
.hero .saludo { color:var(--apagado); font-size:15px; font-weight:550; }
.hero h2 { margin-top:2px; }
.hero-pauta { color:var(--apagado); font-size:14px; margin-top:7px; }
.hero .btn-p { height:52px; font-size:16px; width:100%; margin-top:20px; border-radius:13px; }
.hero-linea { height:1px; background:var(--borde); margin:22px -24px 0; }

/* La fila de abajo del hero: racha y semana, uno al lado del otro. */
.hero-pie { display:flex; align-items:flex-start; gap:16px; padding-top:18px; }
.hero-pie > * { flex:1; min-width:0; }
.hero-sep { flex:0 0 1px; align-self:stretch; background:var(--borde); }

/* Un dato con su cifra grande y su explicacion debajo. */
.cifra { display:flex; align-items:center; gap:12px; min-width:0; }
.cifra-txt { min-width:0; }
.cifra-txt .n { font-size:26px; font-weight:700; letter-spacing:-.035em; line-height:1.05;
  font-variant-numeric:tabular-nums; }
.cifra-txt .q { font-size:11.5px; color:var(--apagado); margin-top:3px; line-height:1.35; }

/* -------------------------------------------------------------- el anillo */
.anillo { flex:0 0 auto; transform:rotate(-90deg); }
.anillo-fondo { fill:none; stroke:var(--superficie-2); }
.anillo-linea { fill:none; stroke:var(--marca); stroke-linecap:round;
  transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.3,1); }
.anillo-caja { position:relative; display:grid; place-items:center; flex:0 0 auto; }
.anillo-caja .dentro {
  position:absolute; font-size:14px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------ tarjeta callada */
/* Para lo secundario: sin sombra, solo un fondo un punto distinto. */
.quieta {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  box-shadow:none;
}

/* --------------------------------------------------- micro-animaciones */
@keyframes entrar { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.entra { animation:entrar .42s cubic-bezier(.2,.8,.3,1) both; }
.entra-1 { animation-delay:.04s; } .entra-2 { animation-delay:.09s; }
.entra-3 { animation-delay:.14s; } .entra-4 { animation-delay:.19s; }
.entra-5 { animation-delay:.24s; }
@media (prefers-reduced-motion:reduce) {
  .entra { animation:none; }
  .anillo-linea { transition:none; }
}

/* Botones principales con mas presencia: 9 px de alto no invitan a tocar. */
.btn { padding:10px 16px; }
.btn-p { font-weight:650; }

/* El nombre del gimnasio como marca arriba, sin gritar: la tarjeta grande
   de debajo es la que manda. */
.marca-cabecera { font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--apagado); }

/* El mapa del cuerpo va DENTRO de una tarjeta: si trae su propio borde y su
   sombra se ve un marco dentro de otro. */
.tarjeta > .tarjeta-pad > .mapa-cuerpo,
.quieta > .tarjeta-pad > .mapa-cuerpo {
  border:none; box-shadow:none; background:var(--superficie-2); padding:16px;
}

/* ---------------------------------------------------- la semana en una tira */
.tira-semana { display:flex; gap:7px; margin-top:12px; }
.dia-punto {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11px; font-weight:700; color:var(--tenue); letter-spacing:.04em;
}
.dia-punto i {
  display:block; width:100%; height:34px; border-radius:9px;
  background:var(--superficie-2); border:1px solid var(--borde);
}
.dia-punto.puesto i { border-color:var(--borde-fuerte); border-style:dashed; }
.dia-punto.hecho i { background:var(--marca); border-color:var(--marca); }
.dia-punto.hecho { color:var(--marca); }
.dia-punto.hoy i { box-shadow:0 0 0 2px var(--fondo), 0 0 0 3.5px var(--borde-fuerte); }

/* -------------------------------------------------------- mejores marcas */
/* El contenedor de las marcas: sin él, la primera fila se pega al título. */
.marcas { display:flex; flex-direction:column; }
.marca-fila {
  display:flex; align-items:center; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--borde);
}
.marca-fila:last-child { border-bottom:none; }
.marca-nom { flex:1; min-width:0; }
.marca-nom b { font-weight:600; display:block; }
.marca-nom small { color:var(--tenue); font-size:12px; }
.marca-peso {
  font-size:22px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:var(--marca); white-space:nowrap;
}
.marca-peso span { font-size:12px; font-weight:600; margin-left:3px; color:var(--apagado); }
/* Tres cifras en el pie del hero no caben a 26 px en un movil: "79.1 kg" se
   partia por la mitad. Se encogen, que siguen mandando igual.
   El corte es a 560 y no a 480 porque la tira de iconos de la izquierda se
   come 56 px: un movil de 390 se comporta como una pantalla de 334. */
@media (max-width:560px) {
  .hero-pie { gap:12px; }
  .hero-pie .cifra-txt .n { font-size:20px; }
  .hero-pie .cifra-txt .q { font-size:12px; line-height:1.35; }
  /* Siete días en 334 px salen a 45 px cada uno: el estado se encoge y se
     recorta dentro de su pastilla en vez de pisar a la de al lado. */
  .dia-tarjeta { padding:8px 1px; }
  .dia-tarjeta .ee { font-size:8px; overflow:hidden; }
  .dias-tira { gap:4px; }
}

/* Un hueco vacio con algo que decir, no solo un icono gris. */
.vacio .emo {
  width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
  background:var(--superficie-2); display:grid; place-items:center; opacity:1;
}
.vacio .emo .ico-svg { width:26px; height:26px; opacity:.75; margin:0; }
.vacio-txt { font-weight:650; color:var(--texto); font-size:15px; }
.vacio-pie { font-size:13px; color:var(--apagado); margin-top:5px; max-width:300px;
  margin-left:auto; margin-right:auto; line-height:1.45; }

/* ============================================== el catalogo, en mosaico
   Era una lista con un sello de 60 px al lado del nombre. El dibujo es lo
   mejor que tiene esta app: aqui manda el. */
.mosaico { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(154px,1fr)); }
@media (max-width:400px) { .mosaico { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); } }

.ficha-ejercicio {
  position:relative; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r); overflow:hidden; cursor:pointer;
  transition:border-color .14s, transform .1s, box-shadow .14s;
}
.ficha-ejercicio:hover {
  border-color:var(--marca-borde); transform:translateY(-2px); box-shadow:var(--sombra);
}
.ficha-dibujo {
  display:grid; place-items:center; background:var(--superficie-2);
  height:132px; padding:8px;
}
.ficha-dibujo img { max-height:100%; max-width:100%; object-fit:contain; }
.ficha-txt { padding:11px 12px 13px; }
.ficha-txt .nom {
  font-weight:650; font-size:13.5px; line-height:1.3; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ficha-txt .meta { font-size:11.5px; color:var(--apagado); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ficha-ejercicio .estrella {
  position:absolute; top:5px; right:5px; z-index:1; font-size:16px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
}
.ficha-ejercicio .estrella.on { background:var(--superficie); box-shadow:var(--sombra); }

/* ==========================================================================
   EL MOVIMIENTO
   Nada se mueve por adorno: cada animación dice algo. Que ha llegado algo
   nuevo, que lo que has tocado se ha enterado, o que queda tiempo por delante.
   Todo pasa por la misma curva y todo se apaga si el móvil pide menos
   animación, que es una opción de accesibilidad, no un capricho.
   ========================================================================== */

/* --- La entrada de una pantalla. Las tarjetas no aparecen de golpe: suben
   escalonadas, y el ojo las lee en el orden en que importan. */
@keyframes surgir {
  from { opacity:0; transform:translateY(14px) scale(.985); }
  to   { opacity:1; transform:none; }
}
.surge { animation:surgir var(--lento) var(--curva) both; }
.surge-1 { animation-delay:.05s; } .surge-2 { animation-delay:.10s; }
.surge-3 { animation-delay:.15s; } .surge-4 { animation-delay:.20s; }
.surge-5 { animation-delay:.25s; } .surge-6 { animation-delay:.30s; }

/* Cambiar de pantalla: lo de dentro entra un pelín desde abajo. Da sensación
   de que la app responde antes incluso de que carguen los datos. */
@keyframes entra-pantalla {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}
/* `backwards` y no `both`: con `both` el transform se quedaba puesto al
   acabar y la caja de la pantalla se convertía en el marco de todo lo
   `position:fixed` de dentro. La barra de «Confirmar mi hora» de Reservar,
   que tiene que flotar abajo, se iba al final de la página. */
.contenido > * { animation:entra-pantalla .34s var(--curva) backwards; }

/* --- Lo que se toca se entera. Un botón que no se hunde parece roto. */
.btn, .nav-item, .mos-ficha, .aviso-fila, .medio-mini, .serie-ficha {
  -webkit-tap-highlight-color:transparent;
}
.btn { transition:transform var(--rapido) var(--curva), background var(--rapido),
                 border-color var(--rapido), box-shadow var(--rapido); }
.btn:active:not(:disabled) { transform:scale(.965); }
.mos-ficha { transition:transform var(--medio) var(--curva), box-shadow var(--medio),
                        border-color var(--medio); }
.mos-ficha:active { transform:scale(.98); }

/* --- El pulso del punto verde: "esto está pasando ahora". */
@keyframes latido {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.45; transform:scale(.82); }
}
.punto-vivo {
  width:7px; height:7px; border-radius:50%; background:var(--marca);
  display:inline-block; animation:latido 2.1s var(--curva-suave) infinite;
}

/* --- Esqueleto de carga. Mejor que un "Cargando…" centrado: se ve la forma
   de lo que va a venir y la pantalla no pega un salto al llegar los datos. */
@keyframes brillo { from { background-position:-260px 0; } to { background-position:340px 0; } }
.hueso {
  border-radius:var(--r-s);
  background:linear-gradient(90deg, var(--superficie-2) 0%, var(--superficie-3) 42%,
                                    var(--superficie-2) 84%);
  background-size:600px 100%;
  animation:brillo 1.25s linear infinite;
  height:14px; margin:9px 0;
}
.hueso.alto { height:22px; } .hueso.titular { height:34px; width:62%; }
.hueso.corto { width:38%; } .hueso.medio { width:66%; }
.hueso-tarjeta {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  padding:18px; margin-bottom:14px;
}

/* --- Números que suben solos hasta su valor: el dato se mira porque se mueve. */
[data-contar] { font-variant-numeric:tabular-nums; }

/* --- El anillo que se dibuja. */
@keyframes trazar { to { stroke-dashoffset:var(--hasta); } }

/* --- Cuando algo sale bien: un aro que crece y se va. */
@keyframes onda-ok {
  from { transform:scale(.4); opacity:.55; }
  to   { transform:scale(2.4); opacity:0; }
}
.onda-ok {
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid var(--marca); animation:onda-ok .75s var(--curva) forwards;
}

@media (prefers-reduced-motion:reduce) {
  .lateral, .nav-marca, .nav-item, .nav-txt, .rayas i, .velo-menu, .marca-txt {
    transition:none !important;
  }
  .surge, .contenido > *, .punto-vivo, .hueso, .onda-ok,
  [class*="entra"], .marca-halo, .tejas > .teja {
    animation:none !important; transition:none !important; opacity:1 !important;
    transform:none !important; background-position:0 0 !important;
  }
}

/* ==========================================================================
   FOTOS Y VIDEOS DE UN EJERCICIO
   El entrenador sube lo que quiera y el cliente lo ve cuando le toca ese
   ejercicio. Es la diferencia entre leer "sentadilla búlgara" y saber hacerla.
   ========================================================================== */

/* La tira de miniaturas, con scroll de lado y sin barra a la vista. */
.medios-tira {
  display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.medios-tira::-webkit-scrollbar { display:none; }
.medio-mini {
  position:relative; flex:0 0 auto; width:124px; height:88px; border-radius:var(--r-s);
  overflow:hidden; background:var(--superficie-2); border:1px solid var(--borde);
  cursor:pointer; scroll-snap-align:start; padding:0;
  transition:transform var(--medio) var(--curva), border-color var(--medio);
}
.medio-mini:hover { transform:translateY(-2px); border-color:var(--marca-borde); }
.medio-mini:active { transform:scale(.97); }
.medio-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.medio-mini .sin-portada {
  width:100%; height:100%; display:grid; place-items:center; color:var(--tenue);
  background:var(--superficie-3);
}
/* El triángulo de reproducir, sobre un velo para que se lea encima de todo. */
.medio-play {
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.42));
}
.medio-play span {
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; color:#111; box-shadow:0 2px 10px rgba(0,0,0,.3);
  transition:transform var(--medio) var(--curva);
}
.medio-mini:hover .medio-play span { transform:scale(1.12); }
.medio-pie {
  position:absolute; left:0; right:0; bottom:0; padding:12px 8px 5px; font-size:11px;
  color:#fff; background:linear-gradient(180deg, transparent, rgba(0,0,0,.72));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
}
.medio-dur {
  position:absolute; right:5px; top:5px; background:rgba(0,0,0,.68); color:#fff;
  font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:var(--r-pastilla);
  font-variant-numeric:tabular-nums;
}
.medio-portada-marca {
  position:absolute; left:5px; top:5px; background:var(--marca); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--r-pastilla);
}

/* El visor a pantalla completa. */
.visor {
  position:fixed; inset:0; z-index:120; background:rgba(10,12,11,.94);
  display:flex; flex-direction:column; animation:aparecer var(--medio) var(--curva);
}
.visor-marco {
  flex:1; display:grid; place-items:center; padding:14px; min-height:0;
}
.visor-marco img, .visor-marco video {
  max-width:100%; max-height:100%; border-radius:var(--r-s); display:block;
  background:#000; animation:surgir .4s var(--curva);
}
.visor-cab {
  display:flex; align-items:center; gap:12px; padding:14px 16px; color:#fff;
  padding-top:max(14px, env(safe-area-inset-top));
}
.visor-cab b { font-size:15px; font-weight:600; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.visor-cab .cerrar {
  width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.14);
  color:#fff; display:grid; place-items:center; cursor:pointer; flex:0 0 38px;
}
.visor-pie {
  display:flex; gap:8px; padding:10px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-x:auto; scrollbar-width:none;
}
.visor-pie::-webkit-scrollbar { display:none; }
.visor-punto {
  flex:0 0 auto; width:56px; height:40px; border-radius:7px; overflow:hidden; padding:0;
  border:2px solid transparent; background:rgba(255,255,255,.1); cursor:pointer;
  opacity:.6; transition:opacity var(--rapido), border-color var(--rapido);
}
.visor-punto.activo { border-color:#fff; opacity:1; }
.visor-punto img { width:100%; height:100%; object-fit:cover; }

/* El gestor de la biblioteca, en la ficha del ejercicio. */
.medios-rejilla {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); gap:12px;
}
.medio-tarjeta {
  position:relative; border:1px solid var(--borde); border-radius:var(--r-s);
  overflow:hidden; background:var(--superficie-2);
}
.medio-tarjeta .lienzo { position:relative; aspect-ratio:4/3; }
.medio-tarjeta img { width:100%; height:100%; object-fit:cover; display:block; }
.medio-acciones {
  display:flex; gap:6px; padding:7px; border-top:1px solid var(--borde);
  background:var(--superficie);
}
.medio-acciones .btn { padding:5px 8px; font-size:12px; flex:1; justify-content:center; }
.zona-soltar {
  border:1.5px dashed var(--borde-fuerte); border-radius:var(--r-s); padding:22px 16px;
  text-align:center; color:var(--apagado); background:var(--superficie-2);
  transition:border-color var(--rapido), background var(--rapido), transform var(--rapido);
}
.zona-soltar.encima {
  border-color:var(--marca); background:var(--marca-suave); color:var(--marca-texto);
  transform:scale(1.01);
}
.barra-subida {
  height:4px; border-radius:var(--r-pastilla); background:var(--superficie-3);
  overflow:hidden; margin-top:10px;
}
.barra-subida i {
  display:block; height:100%; width:0; background:var(--marca);
  transition:width .2s linear;
}

/* En el modo gimnasio el vídeo manda: ocupa el ancho y se ve desde lejos. */
.entrenar-medio {
  border-radius:var(--r-s); overflow:hidden; background:#000; margin-bottom:12px;
  position:relative;
}
.entrenar-medio video, .entrenar-medio img { width:100%; display:block; max-height:38vh;
  object-fit:contain; background:#000; }

/* --- El panel en el móvil: primero lo que hay que HACER.
   En pantalla ancha la agenda va a la izquierda y los avisos a la derecha, que
   es como se lee de un vistazo. Apilado, si los avisos van detrás de toda la
   agenda con sus clientes, no se ven nunca: en el móvil suben arriba. */
@media (max-width:900px) {
  .rejilla.r-2 > .col-avisos { order:-1; }
}
.aviso-fila.de-mas { display:none; }
.marca-video {
  position:absolute; left:8px; top:8px; z-index:2; width:24px; height:24px;
  border-radius:50%; color:#fff; display:grid; place-items:center;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
  /* Va encima de una foto/vídeo: necesita quedar opaca para leerse, así que
     el degradado es entre dos tonos sólidos, no el color-mix con transparent
     que usan las insignias sobre fondo de tarjeta. */
  background:linear-gradient(135deg, var(--menta), color-mix(in srgb, var(--menta) 70%, black));
}
.marca-video .ico-svg { width:12px; height:12px; }
.meta-medios { color:var(--marca) !important; font-weight:600; font-size:11.5px; }

/* ------------------------------------------- el recado del entrenador
   La idea es del diseño nuevo: un mensaje con cara y nombre, no una nota
   gris. Es lo que hace que la app suene a persona. */
.recado {
  margin-top:16px; background:var(--marca-suave); border:1px solid var(--marca-borde);
  border-radius:var(--r); padding:16px;
}
.recado-cab { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.recado-cab .avatar { width:40px; height:40px; font-size:16px; flex:0 0 40px; }
.recado-cab b { display:block; font-size:15px; letter-spacing:-.01em; color:var(--texto); }
.recado-cab span {
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--marca-texto);
}
.recado-globo {
  background:var(--superficie); border-radius:var(--r-s); padding:13px 15px;
  font-size:14.5px; line-height:1.6; box-shadow:var(--sombra);
}
:root[data-tema="oscuro"] .recado-globo,
:root:not([data-tema="claro"]) .recado-globo { background:var(--superficie-2); }

/* ------------------------------------------------- cómo va la sesión */
.avance {
  margin-top:16px; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r); padding:14px 16px;
  display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center;
}
.avance-txt .etq-mini { display:block; margin-bottom:2px; }
.avance-txt b { font-size:16px; letter-spacing:-.01em; }
.avance-pct {
  font-size:22px; font-weight:600; color:var(--marca); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.avance-barra {
  grid-column:1 / -1; height:7px; border-radius:var(--r-pastilla);
  background:var(--superficie-3); overflow:hidden; margin-top:8px;
}
.avance-barra i {
  display:block; height:100%; background:var(--marca); border-radius:inherit;
  transition:width .9s var(--curva);
}

/* ------------------------------------- el consejo suelto de un ejercicio */
.consejo-ejercicio {
  margin:2px 15px 10px; padding:9px 12px; border-radius:var(--r-s);
  background:var(--marca-suave); color:var(--marca-texto); font-size:13px; line-height:1.5;
}
.consejo-ejercicio b { color:var(--marca-texto); }

/* --- Vino / Faltó: un mando de dos, no dos botones sueltos.
   Sueltos y con un separador flexible en medio, en un móvil se partían: el
   nombre arriba, "Vino" a la derecha y "Faltó" solo en la línea siguiente. */
.fila-asistencia {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.fila-asistencia .persona { flex:1; min-width:120px; }
.asistencia {
  display:inline-flex; flex:0 0 auto; margin-left:auto;
  border:1px solid var(--borde); border-radius:var(--r-pastilla); overflow:hidden;
  background:var(--superficie);
}
.asistencia button {
  border:none; background:none; padding:7px 14px; font-size:13px; font-weight:600;
  color:var(--apagado); cursor:pointer; transition:background var(--rapido), color var(--rapido);
}
.asistencia button + button { border-left:1px solid var(--borde); }
.asistencia button:hover { background:var(--superficie-2); color:var(--texto); }
.asistencia button.on { background:var(--marca); color:#fff; }
.asistencia button.no { background:var(--rojo-suave); color:var(--rojo); }
:root[data-tema="oscuro"] .asistencia button.on,
:root:not([data-tema="claro"]) .asistencia button.on { color:var(--fondo); }

/* --- Las series del ejercicio que se está haciendo ahora mismo. */
.series-cab {
  display:flex; align-items:center; gap:12px; margin:18px 0 10px;
}
.series-cab .etq-mini { color:var(--tenue); white-space:nowrap; }
.series-barra {
  flex:1; height:5px; border-radius:var(--r-pastilla); background:var(--superficie-3);
  overflow:hidden;
}
.series-barra i {
  display:block; height:100%; width:0; background:var(--marca); border-radius:inherit;
  transition:width .5s var(--curva);
}
.serie-grande { position:relative; }

/* Al dar a "Hecha": la ficha da un tirón hacia dentro y suelta un aro. */
@keyframes acusar {
  0%   { transform:scale(1); }
  38%  { transform:scale(.965); }
  100% { transform:scale(1); }
}
.serie-grande.recien { animation:acusar .42s var(--curva); }
.final-ico { animation:surgir .6s var(--curva) both; }
.final-datos > div { animation:surgir .55s var(--curva) both; }
.final-datos > div:nth-child(2) { animation-delay:.09s; }
.final-datos > div:nth-child(3) { animation-delay:.18s; }
@media (prefers-reduced-motion:reduce) {
  .serie-grande.recien, .final-ico, .final-datos > div { animation:none !important; }
}

/* --- La chapita de "esto está pasando hoy", con su punto latiendo. */
.saludo-fila {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.chapa-viva {
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px;
  border-radius:var(--r-pastilla); background:var(--marca-suave); color:var(--marca-texto);
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.075em;
  white-space:nowrap;
}

/* ==========================================================================
   RESERVAR: elegir día, elegir hora, confirmar
   Antes era una lista larga donde la mitad de las tarjetas ponían "Completa"
   en rojo: una pared roja para lo que debería apetecer. Ahora son tres pasos,
   como en el diseño que trajo Joel: primero el día, luego la hora, y al final
   un resumen que se lee antes de confirmar.
   ========================================================================== */

.paso-cab { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.paso-n {
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:var(--marca-suave); color:var(--marca-texto);
  display:grid; place-items:center; font-weight:600; font-size:13.5px;
}
.paso-cab b { display:block; font-size:16px; font-weight:600; letter-spacing:-.005em; }
/* Ojo: tiene que ir apuntado al hijo del div, no a cualquier span de dentro.
   `.paso-cab span` pisaba al `.paso-n` (más específico por el elemento) y el
   número se salía del círculo, pequeño y gris. */
.paso-cab > div > span { display:block; font-size:13px; color:var(--apagado); }

/* --- La tira de días. */
.semana-nav { display:flex; align-items:center; gap:8px; }
.semana-nav > .btn { flex:0 0 auto; padding:8px 10px; }
.dias-tira {
  flex:1; min-width:0; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px;
}
.dia-tarjeta {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 2px;
  border:1px solid transparent; border-radius:var(--r-s); background:var(--superficie-2);
  cursor:pointer; color:var(--texto); transition:background var(--rapido),
    transform var(--rapido) var(--curva), border-color var(--rapido);
}
.dia-tarjeta:hover { background:var(--superficie-3); }
.dia-tarjeta:active { transform:scale(.95); }
.dia-tarjeta .dd {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tenue);
}
.dia-tarjeta .nn { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
/* Dos líneas siempre reservadas: así "6 libres" cabe partido y las siete
   pastillas siguen midiendo lo mismo, en vez de recortarse con puntos
   suspensivos ("Cerr…" no dice nada). */
.dia-tarjeta .ee {
  font-size:9px; font-weight:600; color:var(--marca); letter-spacing:0;
  line-height:1.15; min-height:2.3em; text-align:center; hyphens:none;
}
.dia-tarjeta.apagado { opacity:.45; }
.dia-tarjeta.apagado .ee { color:var(--tenue); }
.dia-tarjeta.elegido {
  background:var(--acento); color:var(--acento-texto); border-color:var(--acento);
}
.dia-tarjeta.elegido .dd { color:rgba(255,255,255,.62); }
:root[data-tema="oscuro"] .dia-tarjeta.elegido .dd,
:root:not([data-tema="claro"]) .dia-tarjeta.elegido .dd { color:rgba(0,0,0,.5); }
.dia-tarjeta.elegido .ee { color:var(--marca-suave); }

/* --- Los huecos del día, partidos en mañana y tarde. */
.grupo-huecos + .grupo-huecos { margin-top:18px; }
.grupo-cab {
  display:flex; align-items:center; gap:9px; margin-bottom:10px; color:var(--texto);
}
.grupo-cab b { font-size:14px; font-weight:600; }
/* Insignia de mañana/tarde, mismo patrón de degradado que .teja-rica-ico
   pero más chica: aquí va en una línea de texto, no en una tarjeta entera. */
.grupo-ico {
  width:24px; height:24px; flex:0 0 24px; border-radius:8px; display:flex;
  align-items:center; justify-content:center;
}
.grupo-ico .ico-svg { width:14px; height:14px; }
.grupo-ico.ico-azul   { background:linear-gradient(135deg, color-mix(in srgb, var(--azul) 24%, transparent), color-mix(in srgb, var(--azul) 10%, transparent)); color:var(--azul); }
.grupo-ico.ico-morado { background:linear-gradient(135deg, color-mix(in srgb, var(--morado) 24%, transparent), color-mix(in srgb, var(--morado) 10%, transparent)); color:var(--morado); }
.huecos-rejilla {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:10px;
}
.hueco-tarjeta {
  text-align:left; padding:13px 14px; border-radius:var(--r-s); cursor:pointer;
  background:var(--superficie); border:1px solid var(--borde); color:var(--texto);
  display:flex; flex-direction:column; gap:7px;
  transition:border-color var(--rapido), background var(--rapido),
             transform var(--rapido) var(--curva), box-shadow var(--rapido);
}
.hueco-tarjeta:hover:not(.lleno) { border-color:var(--marca-borde); background:var(--superficie-2); }
.hueco-tarjeta:active:not(.lleno) { transform:scale(.985); }
.hueco-tarjeta.activo {
  border-color:var(--acento); background:var(--superficie); box-shadow:var(--sombra-hero);
}
.hueco-tarjeta.lleno { opacity:.5; cursor:default; }

/* La hora elegida se rellena ENTERA. Antes solo cambiaba el borde a negro y
   una etiqueta de 10 px: tocabas una hora, la pantalla se repintaba y te
   quedabas sin saber si habias acertado. */
.hueco-tarjeta.activo {
  background:var(--marca); border-color:var(--marca); color:#fff;
  box-shadow:var(--sombra-hero);
}
.hueco-tarjeta.activo .hueco-que,
.hueco-tarjeta.activo .aforo span { color:rgba(255,255,255,.82); }
.hueco-tarjeta.activo .hueco-flecha { color:#fff; font-weight:700; font-size:19px; }
.hueco-tarjeta.activo .plaza { background:rgba(255,255,255,.35); }
.hueco-tarjeta.activo .plaza.ocupada { background:#fff; }
.hueco-tarjeta.activo .chapa-elegida { background:rgba(255,255,255,.2); color:#fff; }

/* Y ademas se dice con palabras, que el color solo no lo lee todo el mundo. */
.elegida-aviso {
  display:flex; gap:11px; align-items:flex-start; margin-top:14px;
  padding:13px 15px; border-radius:var(--r-s);
  background:var(--marca-suave); color:var(--marca-texto);
  font-size:14.5px; line-height:1.5;
}
.elegida-aviso b { font-weight:700; }
.ea-ok {
  flex:0 0 24px; height:24px; border-radius:50%; background:var(--marca); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}
.elegida-aviso.recien { animation:destello .9s var(--curva); }
@keyframes destello {
  0%   { transform:scale(.97); box-shadow:0 0 0 0 var(--marca-borde); }
  40%  { transform:scale(1); box-shadow:0 0 0 7px transparent; }
  100% { transform:scale(1); box-shadow:0 0 0 0 transparent; }
}

/* La barra de abajo. Con 18 horas al dia el boton de confirmar quedaba
   enterrado al final de la lista y habia que bajar a buscarlo. */
.barra-confirmar {
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:var(--superficie); border-top:1px solid var(--borde);
  box-shadow:0 -6px 24px rgba(26,28,27,.10);
  animation:sube-barra .22s var(--curva);
}
@keyframes sube-barra { from { transform:translateY(100%); } to { transform:none; } }
.bc-que { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.bc-que b { font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; }
.bc-que span {
  font-size:12.5px; color:var(--apagado); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.barra-confirmar .btn { flex:0 0 auto; min-height:48px; font-size:15px; padding:12px 22px; }
/* Que la barra no tape el ultimo hueco de la lista. */
body:has(.barra-confirmar) .contenido { padding-bottom:92px; }
@media (min-width:900px) { .barra-confirmar { left:var(--lateral); } }

.hueco-fila { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hueco-hora {
  font-size:16px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hueco-que { font-size:13px; color:var(--apagado); min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.hueco-flecha { color:var(--tenue); font-size:14px; flex:0 0 auto; }
.hueco-tarjeta.activo .hueco-flecha { color:var(--marca); font-weight:700; }
.chapa {
  flex:0 0 auto; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; padding:3px 8px; border-radius:var(--r-pastilla);
  background:var(--marca-suave); color:var(--marca-texto); white-space:nowrap;
}
.chapa-lleno { background:var(--superficie-3); color:var(--tenue); }
.chapa-elegida { background:var(--acento); color:var(--acento-texto); }
.chapa-voy { background:var(--marca); color:#fff; }
:root[data-tema="oscuro"] .chapa-voy,
:root:not([data-tema="claro"]) .chapa-voy { color:var(--fondo); }

/* --- El resumen de abajo, que es lo que se lee antes de confirmar. */
.resumen-reserva { padding:18px; }
.resumen-linea {
  padding:10px 0; border-bottom:1px solid var(--borde);
}
.resumen-linea b { display:block; font-size:15px; font-weight:600; letter-spacing:-.005em; }
.resumen-linea small { display:block; color:var(--apagado); font-size:13px; margin-top:2px; }
.resumen-etq {
  display:block; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; color:var(--tenue); margin-bottom:3px;
}
.resumen-reserva .campo textarea { resize:none; }
.resumen-pie {
  text-align:center; color:var(--tenue); font-size:12.5px; margin-top:10px;
}

/* En pantalla ancha, los pasos a la izquierda y el resumen pegado a la
   derecha, como en el diseño: se elige y se ve el resultado sin bajar. */
@media (min-width:1000px) {
  .reservar-doble {
    display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
    gap:18px; align-items:start;
  }
  .reservar-doble > .col-resumen { position:-webkit-sticky; position:sticky; top:18px; margin-top:0 !important; }
}

/* ==========================================================================
   RUTINAS: plantillas, rutinas a medida y el plan de la semana
   ========================================================================== */

.seccion-rutinas {
  display:block; margin:26px 0 12px; color:var(--tenue);
}
.seccion-rutinas:first-of-type { margin-top:4px; }
/* Todas las tarjetas de una fila, a la misma altura: si no, con títulos de
   una y de dos líneas la rejilla queda a diente de sierra. */
.rutina-tarjeta {
  position:relative; display:flex; flex-direction:column; height:100%;
}
.rutina-tarjeta > p { flex:1; }
.rutina-duena {
  position:absolute; top:12px; right:12px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; padding:3px 9px;
  border-radius:var(--r-pastilla); background:var(--marca-suave); color:var(--marca-texto);
}
.rutina-tarjeta h3 { padding-right:80px; }

/* Una "carpeta" por cliente en las rutinas hechas a medida: si no, con
   varios clientes con varias rutinas cada uno queda todo desparramado. */
.rutinas-carpeta {
  border:1px solid var(--borde); border-radius:var(--r); padding:14px 16px 16px;
  margin-bottom:16px;
}
.rutinas-carpeta-cab {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.rutinas-carpeta-cab b { font-size:14.5px; }

/* La chapa de "esta rutina es de fulano" arriba del editor. */
.chapa-duena {
  display:flex; align-items:center; gap:9px; padding:10px 13px; margin-bottom:16px;
  border-radius:var(--r-s); background:var(--marca-suave); color:var(--marca-texto);
  font-size:13.5px;
}
.chapa-duena .ico-svg { width:17px; height:17px; }

/* Botón grande de opción, para elegir entre dos caminos. */
.opcion-grande {
  width:100%; display:block; text-align:left; padding:14px 16px; height:auto;
  border-radius:var(--r-s);
}
.opcion-grande b { display:block; font-size:14.5px; }
.opcion-grande small {
  display:block; color:var(--apagado); font-weight:400; margin-top:3px; font-size:13px;
}

/* La lista de plantillas para copiar. */
.copiar-lista { display:flex; flex-direction:column; gap:8px; }
.copiar-fila {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--borde); border-radius:var(--r-s);
  background:var(--superficie); cursor:pointer; text-align:left; color:var(--texto);
  transition:border-color var(--rapido), background var(--rapido),
             transform var(--rapido) var(--curva);
}
.copiar-fila:hover { border-color:var(--marca-borde); background:var(--superficie-2); }
.copiar-fila:active { transform:scale(.99); }
.copiar-fila b { display:block; font-weight:600; }
.copiar-fila small { color:var(--apagado); font-size:12.5px; }
.copiar-flecha { color:var(--marca); font-size:12.5px; font-weight:600; white-space:nowrap; }
.separador-o {
  display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--tenue);
  font-size:12px;
}
.separador-o::before, .separador-o::after {
  content:''; flex:1; height:1px; background:var(--borde);
}

/* ------------------------------------------------ el plan de la semana */
.semana-plan {
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px;
}
.dia-plan {
  border:1px solid var(--borde); border-radius:var(--r-s); padding:9px 8px;
  background:var(--superficie-2); display:flex; flex-direction:column; gap:6px;
  transition:border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}
.dia-plan.con-rutina { border-color:var(--marca-borde); background:var(--marca-suave); }
.dia-plan-cab { display:flex; align-items:center; justify-content:space-between; }
.dia-plan-cab b {
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tenue);
}
.dia-plan.con-rutina .dia-plan-cab b { color:var(--marca-texto); }
.dia-plan-x {
  border:none; background:none; cursor:pointer; color:var(--marca-texto);
  font-size:11px; padding:0 2px; line-height:1;
}
.dia-plan-sel {
  display:flex; align-items:center; gap:4px; width:100%; min-height:34px;
  padding:6px 8px; border:1px solid var(--borde); border-radius:var(--r-s);
  background:var(--superficie); color:var(--tenue); font:inherit; font-size:12.5px;
  text-align:left; cursor:pointer;
}
.dia-plan-sel span {
  flex:1; min-width:0; overflow:hidden; line-height:1.25; hyphens:auto;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.dia-plan .dia-plan-pie { white-space:normal; display:flex; flex-wrap:wrap; gap:3px 5px; align-items:center; }
.origen {
  display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:1px 6px; border-radius:99px; font-size:10px; font-weight:700; letter-spacing:.02em;
}
.o-suya { background:var(--marca); color:var(--superficie); }
.o-plantilla { background:var(--superficie-2); color:var(--apagado); border:1px solid var(--borde); }
.o-otro {
  background:color-mix(in srgb, var(--ambar, #B7791F) 18%, transparent);
  color:color-mix(in srgb, var(--ambar, #B7791F) 80%, var(--texto));
}
.dia-plan-sel i { font-style:normal; font-size:10px; opacity:.6; }
.dia-plan-sel.elegida { color:var(--texto); font-weight:600; border-color:var(--marca-borde); }
.dia-plan-sel:hover, .dia-plan-sel:focus-visible { border-color:var(--marca); outline:none; }

/* El selector de rutina del plan: desplegable colgado del día (ordenador)
   u hoja desde abajo (móvil). */
.elige-rut-velo {
  position:fixed; inset:0; z-index:5; display:flex; align-items:flex-end;
  background:rgba(0,0,0,.32); animation:aparecer .12s ease;
}
.elige-rut-velo.es-flotante { background:rgba(0,0,0,.12); display:block; }
.elige-rut {
  display:flex; width:100%; max-height:88vh; background:var(--elevada);
  border:1px solid var(--borde); border-radius:18px 18px 0 0; box-shadow:var(--sombra-alta);
  overflow:hidden;
}
.es-flotante .elige-rut { position:fixed; border-radius:14px; max-height:none; }
.elige-rut-izq { flex:1 1 56%; min-width:0; display:flex; flex-direction:column; }
.elige-rut-cab {
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px;
}
.elige-rut-cab small {
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tenue);
}
.elige-rut-cab b { font-size:16px; }
.elige-rut-buscador {
  position:relative; margin:0 12px 8px;
}
.elige-rut-buscador span {
  position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--tenue); font-size:16px;
}
.elige-rut-buscar {
  width:100%; padding:9px 12px 9px 32px; border:1px solid var(--borde); border-radius:10px;
  background:var(--superficie-2); color:var(--texto); font:inherit; font-size:14px;
}
.elige-rut-buscar:focus { outline:none; border-color:var(--marca); background:var(--superficie); }
.elige-rut-lista { flex:1; overflow-y:auto; padding:0 8px 10px; overscroll-behavior:contain; }
.elige-rut-grupo { margin-top:8px; }
.elige-rut-grupo h4 {
  position:-webkit-sticky; position:sticky; top:0; z-index:1; margin:0; padding:7px 8px 5px;
  background:var(--elevada); display:flex; gap:6px; align-items:center;
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--tenue);
}
.elige-rut-grupo h4 small {
  font-size:10px; font-weight:600; padding:1px 6px; border-radius:99px; letter-spacing:0;
  background:var(--superficie-2); color:var(--apagado);
}
.elige-rut-grupo h4 em {
  margin-left:auto; font-style:normal; font-weight:500; text-transform:none; letter-spacing:0;
  font-size:11px; color:var(--tenue);
}
.g-suyas h4 span { color:var(--marca-texto); }
.g-suyas h4 small { background:var(--marca-suave); color:var(--marca-texto); }
.g-otros h4 span { color:var(--ambar); }
.elige-rut-op {
  display:flex; flex-direction:column; gap:3px; width:100%; min-height:44px;
  padding:8px 10px; border:none; border-radius:9px; background:none;
  color:var(--texto); font:inherit; text-align:left; cursor:pointer;
}
.elige-rut-op.activa { background:var(--superficie-2); }
.elige-rut-op:focus-visible { outline:2px solid var(--marca); outline-offset:-2px; }
.elige-rut-op.es-actual { box-shadow:inset 3px 0 0 var(--marca); }
.g-suyas .elige-rut-op:not(.es-actual) { box-shadow:inset 3px 0 0 var(--marca-borde); }
.elige-rut-nom { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.elige-rut-ya {
  font-style:normal; font-size:10.5px; font-weight:700; color:var(--marca-texto);
  background:var(--marca-suave); padding:1px 7px; border-radius:99px;
}
.elige-rut-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:12px; color:var(--tenue);
}
.elige-rut-meta b { font-weight:600; color:var(--apagado); }
.elige-rut-chip {
  font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:99px;
  background:var(--superficie-2); border:1px solid var(--borde); color:var(--apagado);
}
.elige-rut-op.activa .elige-rut-chip { background:var(--superficie); }
.elige-rut-desc {
  font-size:12px; color:var(--tenue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.elige-rut-descanso .elige-rut-nom { font-weight:500; color:var(--apagado); }
.g-otros details { border-radius:9px; }
.g-otros details[open] { background:color-mix(in srgb, var(--superficie-2) 50%, transparent); }
.g-otros summary {
  display:flex; align-items:center; gap:9px; padding:7px 10px; min-height:42px;
  cursor:pointer; list-style:none; font-size:13.5px; font-weight:500; border-radius:9px;
}
.g-otros summary::-webkit-details-marker { display:none; }
.g-otros summary::after { content:'▸'; margin-left:auto; color:var(--tenue); font-size:11px; }
.g-otros details[open] > summary::after { content:'▾'; }
.g-otros summary:hover { background:var(--superficie-2); }
.g-otros summary small { color:var(--tenue); font-size:12px; }
.g-otros summary span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-otros details .elige-rut-op { padding-left:44px; }
.elige-rut-ava { width:24px; height:24px; font-size:10px; flex:none; }
.elige-rut-nada { padding:18px 10px; color:var(--tenue); font-size:13.5px; text-align:center; }
.elige-rut-teclas {
  padding:8px 14px; border-top:1px solid var(--borde); font-size:11.5px; color:var(--tenue);
}
.elige-rut-teclas kbd {
  font:inherit; font-size:10.5px; padding:0 5px; border:1px solid var(--borde-fuerte);
  border-bottom-width:2px; border-radius:4px; color:var(--apagado);
}
/* La vista previa (solo ordenador). */
.elige-rut-vista {
  flex:1 1 44%; min-width:0; overflow-y:auto; padding:16px 16px 14px;
  background:var(--superficie-2); border-left:1px solid var(--borde);
}
.elige-rut-vista-cab h5 { margin:8px 0 4px; font-size:17px; line-height:1.25; }
.elige-rut-vista-cab p { margin:0 0 8px; font-size:12.5px; color:var(--apagado); line-height:1.45; }
.elige-rut-vista .elige-rut-chip { background:var(--superficie); }
.elige-rut-ejs { margin:14px 0 0; padding:0; list-style:none; counter-reset:ej; }
.elige-rut-ejs li {
  counter-increment:ej; display:grid; grid-template-columns:22px 1fr; column-gap:6px;
  padding:7px 0; border-top:1px solid var(--borde); font-size:13px;
}
.elige-rut-ejs li::before {
  content:counter(ej); grid-row:span 2; font-size:11px; font-weight:700; color:var(--tenue);
  padding-top:1px;
}
.elige-rut-ejs li small { grid-column:2; font-size:11.5px; color:var(--tenue); }
.elige-rut-ejs li.cargando { display:block; color:var(--tenue); font-size:12.5px; }
.elige-rut-ejs li.cargando::before { content:none; }
.elige-rut-aviso {
  margin:12px 0 0; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.4;
  background:var(--ambar-suave); color:var(--ambar);
}
.elige-rut-vacia { color:var(--apagado); font-size:13px; }
/* La recomendada y los avisos de lesión. */
.g-reco {
  margin:8px 2px 4px; padding:2px 2px 8px; border-radius:11px;
  background:var(--marca-suave); border:1px solid var(--marca-borde);
}
.g-reco h4 { background:transparent; position:static; }
.g-reco h4 span { color:var(--marca-texto); }
.g-reco .elige-rut-op.activa { background:color-mix(in srgb, var(--superficie) 70%, transparent); }
.elige-rut-porque { margin:0 10px; font-size:12px; line-height:1.45; color:var(--marca-texto); }
.chip-ojo { background:var(--ambar-suave); border-color:transparent; color:var(--ambar); }
.elige-rut-op.activa .chip-ojo { background:var(--ambar-suave); }
.aviso-ojo b, .aviso-reco b { font-weight:700; }
.aviso-reco { background:var(--marca-suave); color:var(--marca-texto); }
.dia-plan-ojo {
  font-size:10.5px; font-weight:700; color:var(--ambar); background:var(--ambar-suave);
  padding:2px 6px; border-radius:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.elige-rut-vacia b { display:block; font-size:17px; color:var(--texto); margin-bottom:6px; }
.dia-plan-pie {
  font-size:11px; color:var(--marca-texto); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dia-plan-pie.vacio-pie { color:var(--tenue); font-weight:400; }

.plan-abajo {
  display:flex; gap:14px; flex-wrap:wrap; margin-top:18px;
}
.plan-abajo .campo { flex:1; min-width:170px; }
.plan-resumen {
  margin-top:14px; padding:13px 15px; border-radius:var(--r-s);
  background:var(--superficie-2); font-size:13.5px; line-height:1.6; color:var(--apagado);
}
.plan-resumen b { color:var(--texto); }

/* En el móvil los siete días no caben en fila: se apilan de dos en dos. */
@media (max-width:760px) {
  .semana-plan { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:420px) {
  .semana-plan { grid-template-columns:1fr; }
}

/* ==========================================================================
   EL PANEL DE MANDO
   Cuatro cifras que contestan a lo que un entrenador se pregunta a las siete
   de la mañana, y la semana en barras. Cada cifra lleva su comparación: sola
   no dice nada.
   ========================================================================== */

.tejas {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:14px; margin-top:18px;
}
/* En el móvil, dos por fila. Una teja por fila son cuatro pantallazos de
   scroll antes de llegar a lo que hay que hacer hoy. */
@media (max-width:760px) {
  .tejas { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .teja { padding:13px 13px; }
  .teja-cifra { font-size:23px; }
  .teja-que { font-size:9.5px; letter-spacing:.06em; }
  .teja-pie, .teja-nota { font-size:11px; }
}
@media (max-width:400px) {
  .teja-cifra { font-size:20px; }
}
.teja {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  padding:16px 17px; display:flex; flex-direction:column; gap:3px;
  transition:border-color var(--medio) var(--curva), transform var(--medio) var(--curva),
             box-shadow var(--medio) var(--curva);
}
/* La tarjeta entera levanta un poco al pasar el ratón — antes decía
   "transition:transform" pero nada tocaba transform nunca, así que no
   pasaba nada. Es lo mismo que ya hacían las tarjetas de la entrada. */
.teja:hover { border-color:var(--borde-fuerte); transform:translateY(-2px); box-shadow:var(--sombra-hero); }
/* Las tejas entraban todas juntas, porque la animación estaba puesta en la
   rejilla (.tejas.entra) y no en cada una: el bloque subía de una pieza y no
   se notaba nada. Ahora sube cada una detrás de la anterior, que es lo que
   hace que la pantalla parezca que se monta sola.
   OJO con el relleno: aquí va `backwards` y NO `both`. Con `both` el último
   fotograma (transform:none) se queda pegado para siempre, y como una
   animación gana a una regla normal, .teja:hover dejaría de levantar la
   tarjeta. Con `backwards` solo se pinta el estado inicial durante la
   espera y al acabar la animación suelta el transform. */
.tejas > .teja { animation:surgir .46s var(--curva) backwards; }
.tejas > .teja:nth-child(1) { animation-delay:.06s; }
.tejas > .teja:nth-child(2) { animation-delay:.13s; }
.tejas > .teja:nth-child(3) { animation-delay:.20s; }
.tejas > .teja:nth-child(4) { animation-delay:.27s; }
.tejas > .teja:nth-child(5) { animation-delay:.34s; }
.tejas > .teja:nth-child(n+6) { animation-delay:.40s; }
.teja-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.teja-que {
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tenue);
}
/* El icono de cada tarjeta, en su pastilla de color — se pinta del mismo
   tono que la cifra (ver .teja.verde/.ambar/.rojo .teja-ico más abajo), o
   del verde salvia de siempre si la tarjeta no tiene un estado concreto. */
.teja-ico {
  flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--marca-suave); color:var(--marca-texto);
}
.teja-ico .ico-svg { width:15px; height:15px; }
.teja.verde .teja-ico { background:linear-gradient(135deg, color-mix(in srgb, var(--verde) 24%, transparent), color-mix(in srgb, var(--verde) 10%, transparent)); color:var(--verde); }
.teja.ambar .teja-ico { background:linear-gradient(135deg, color-mix(in srgb, var(--ambar) 24%, transparent), color-mix(in srgb, var(--ambar) 10%, transparent)); color:var(--ambar); }
.teja.rojo  .teja-ico { background:linear-gradient(135deg, color-mix(in srgb, var(--rojo) 24%, transparent), color-mix(in srgb, var(--rojo) 10%, transparent)); color:var(--rojo); }
.teja-cifra {
  font-size:30px; font-weight:500; letter-spacing:-.025em; line-height:1.15;
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.teja-cifra.verde { color:var(--verde); }
.teja-cifra.ambar { color:var(--ambar); }
.teja-cifra.rojo  { color:var(--rojo); }
.teja-u { font-size:16px; font-weight:600; margin-left:4px; color:var(--apagado); }
.teja-barra {
  height:5px; border-radius:var(--r-pastilla); background:var(--superficie-3);
  overflow:hidden; margin:8px 0 4px;
}
.teja-barra i {
  display:block; height:100%; background:var(--marca); border-radius:inherit;
  transition:width 1s var(--curva);
}
/* La barra seguía siempre verde aunque la cifra de arriba estuviera en
   ámbar o en rojo — un "75% de ocupación" en ámbar con la barra en verde
   debajo se contradice a sí mismo. Ahora hacen juego. */
.teja.verde .teja-barra i { background:var(--verde); }
.teja.ambar .teja-barra i { background:var(--ambar); }
.teja.rojo  .teja-barra i { background:var(--rojo); }
.teja-pie { font-size:12.5px; color:var(--apagado); line-height:1.5; }
.teja-nota { display:block; color:var(--tenue); font-size:12px; }

/* La flecha de tendencia. */
.tend { font-weight:600; font-size:12.5px; white-space:nowrap; }
.tend.bien  { color:var(--verde); }
.tend.mal   { color:var(--ambar); }
.tend.igual { color:var(--tenue); font-weight:500; }

/* ---------------------------------------------------- la semana en barras */
.tarjeta-semana { margin-top:16px; }
.barras {
  display:flex; align-items:flex-end; gap:8px; margin-top:16px;
  height:calc(var(--alto) + 26px);
}
.barra-col {
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px;
}
.barra-caja {
  position:relative; width:100%; height:var(--alto); display:flex; align-items:flex-end;
  justify-content:center;
}
/* El hueco de detrás son las plazas que había: se ve lo que se llenó y lo que
   se quedó vacío sin tener que leer ningún número. */
.barra-tope {
  position:absolute; bottom:0; left:0; right:0; border-radius:6px 6px 0 0;
  background:var(--superficie-3);
}
@keyframes crecer-barra { from { height:0; } to { height:var(--h); } }
.barra-valor {
  position:relative; width:100%; border-radius:6px 6px 0 0; background:var(--marca);
  height:var(--h); animation:crecer-barra .7s var(--curva) both;
}
.barra-col.hoy .barra-valor { background:var(--acento); }
.barra-cifra {
  position:absolute; bottom:100%; left:0; right:0; text-align:center;
  font-size:11px; font-weight:600; color:var(--apagado); padding-bottom:3px;
  font-variant-numeric:tabular-nums;
}
.barra-etq {
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tenue);
}
.barra-col.hoy .barra-etq { color:var(--texto); }
.leyenda-barras {
  display:flex; gap:16px; margin-top:14px; font-size:12px; color:var(--apagado);
}
.leyenda-barras span { display:flex; align-items:center; gap:6px; }
.leyenda-barras i { width:10px; height:10px; border-radius:3px; display:block; }
.leyenda-barras i.lleno { background:var(--marca); }
.leyenda-barras i.hueco { background:var(--superficie-3); }

@media (prefers-reduced-motion:reduce) {
  .barra-valor { animation:none; }
  .teja-barra i, .meta-barra i { transition:none; }
}

/* ==========================================================================
   OBJETIVOS
   Con su barra y su frase. El avance no se escribe a mano: sale de las
   medidas, de las series apuntadas o de las asistencias.
   ========================================================================== */

.metas { display:flex; flex-direction:column; }
.meta {
  padding:14px 18px; border-bottom:1px solid var(--borde);
}
.meta:last-child { border-bottom:none; }
.meta-cab { display:flex; align-items:flex-start; gap:12px; }
.meta-txt { flex:1; min-width:0; }
.meta-txt b { display:block; font-weight:600; letter-spacing:-.005em; }
.meta-txt small { display:block; color:var(--apagado); font-size:12.5px; margin-top:2px; }
.meta-pct {
  font-size:17px; font-weight:600; color:var(--marca); font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.meta-barra {
  height:7px; border-radius:var(--r-pastilla); background:var(--superficie-3);
  overflow:hidden; margin:10px 0 8px;
}
.meta-barra i {
  display:block; height:100%; background:var(--marca); border-radius:inherit;
  transition:width 1.1s var(--curva);
}
/* La previsión («a este ritmo llega el…»), solo en la ficha del entrenador. */
.meta-prevision {
  margin-top:8px; padding:7px 10px; border-radius:8px; font-size:12.5px; line-height:1.45;
  background:var(--superficie-2); color:var(--apagado);
}
.meta-prevision.tono-bien { background:var(--marca-suave); color:var(--marca-texto); }
.meta-prevision.tono-ojo { background:var(--ambar-suave); color:var(--ambar); }
.meta-prevision.tono-mal { background:var(--rojo-suave); color:var(--rojo); }
.meta-pie {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:11.5px; color:var(--tenue);
}
.meta.lograda { background:var(--verde-suave); }
.meta.lograda .meta-pct { color:var(--verde); font-size:20px; }
.meta.lograda .meta-barra i { background:var(--verde); }
.meta.apurada .meta-pct { color:var(--ambar); }
.meta.apurada .meta-barra i { background:var(--ambar); }
.meta.apurada .meta-pie { color:var(--ambar); font-weight:600; }

/* ------------------------------------------------------------- la libreta */
.libreta-nueva { display:flex; flex-direction:column; gap:8px; }
.libreta-nueva textarea { resize:vertical; min-height:56px; }
.libreta-acciones { display:flex; gap:8px; }
.libreta-acciones select { flex:1; }
.nota-fila {
  display:flex; gap:12px; align-items:flex-start; padding:11px 18px;
  border-top:1px solid var(--borde);
}
.nota-fecha {
  flex:0 0 52px; font-size:11.5px; font-weight:600; color:var(--tenue);
  padding-top:2px; font-variant-numeric:tabular-nums;
}
.nota-txt { flex:1; min-width:0; font-size:13.5px; line-height:1.55; }
.nota-etq {
  display:inline-block; margin-right:7px; padding:1px 8px; border-radius:var(--r-pastilla);
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  background:var(--superficie-3); color:var(--apagado); vertical-align:1px;
}
.nota-etq.etq-lesion   { background:var(--rojo-suave);  color:var(--rojo); }
.nota-etq.etq-animo    { background:var(--marca-suave); color:var(--marca-texto); }
.nota-etq.etq-tecnica  { background:var(--azul-suave);  color:var(--azul); }
.nota-etq.etq-objetivo { background:var(--ambar-suave); color:var(--ambar); }

.pista-tipo {
  font-size:12.5px; color:var(--apagado); margin:-6px 0 14px; line-height:1.5;
}

/* La tira de cuatro cifras de la ficha del cliente. */
.tira-cliente {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--borde);
}
.tira-cliente > div { min-width:0; }
.tira-cliente b {
  display:block; font-size:19px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tira-cliente b.flojo { color:var(--ambar); }
.tira-cliente span {
  display:block; font-size:11px; color:var(--tenue); line-height:1.3; margin-top:2px;
}
@media (max-width:560px) {
  .tira-cliente { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 10px; }
}

/* ------------------------------------------------ la semana del cliente */
.semana-mia {
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px;
  padding:14px 15px 16px;
}
.dia-mio {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px;
  border:1px solid var(--borde); border-radius:var(--r-s); background:var(--superficie-2);
  cursor:pointer; color:var(--texto); min-width:0;
  transition:transform var(--rapido) var(--curva), border-color var(--rapido),
             background var(--rapido);
}
.dia-mio:active { transform:scale(.95); }
.dm-dia {
  font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tenue);
}
.dm-num { font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }
.dm-marca { font-size:11px; height:13px; line-height:1; color:var(--tenue); }
.dm-que {
  font-size:8.5px; color:var(--tenue); max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; line-height:1.25;
}
/* Hecho, puesto, perdido y libre: se distingue sin leer nada. */
.dia-mio.hecho {
  background:var(--marca); border-color:var(--marca); color:#fff;
}
.dia-mio.hecho .dm-dia, .dia-mio.hecho .dm-que, .dia-mio.hecho .dm-marca { color:rgba(255,255,255,.82); }
.dia-mio.puesto { background:var(--marca-suave); border-color:var(--marca-borde); }
.dia-mio.puesto .dm-marca, .dia-mio.puesto .dm-que { color:var(--marca-texto); }
.dia-mio.perdido { border-style:dashed; opacity:.72; }
.dia-mio.es-hoy { box-shadow:0 0 0 2px var(--acento); }
:root[data-tema="oscuro"] .dia-mio.hecho .dm-dia,
:root:not([data-tema="claro"]) .dia-mio.hecho .dm-dia { color:rgba(0,0,0,.6); }
:root[data-tema="oscuro"] .dia-mio.hecho,
:root:not([data-tema="claro"]) .dia-mio.hecho { color:var(--fondo); }

/* Un objetivo en el que va hacia atrás: ni verde ni ámbar, esto hay que
   mirarlo. La barra se queda a cero, así que el color lo dice todo. */
.meta.al-reves { background:var(--rojo-suave); }
.meta.al-reves .meta-pct { color:var(--rojo); }
.meta.al-reves .meta-txt small { color:var(--rojo); font-weight:600; }

/* La chapa de "estás en la lista de espera". */
.chapa-espera { background:var(--ambar-suave); color:var(--ambar); }
/* Una hora llena deja de ser un botón muerto: lleva el de esperar. */
.hueco-tarjeta.lleno { opacity:.85; cursor:default; }
.hueco-tarjeta.lleno .btn { opacity:1; }

/* La lista de espera dentro de la ficha de una sesión. */
.caja-espera {
  margin:0 18px 14px; padding:12px 14px; border-radius:var(--r-s);
  background:var(--ambar-suave); border:1px solid var(--ambar-suave);
}
.espera-fila {
  display:flex; align-items:center; gap:10px; padding:7px 0; flex-wrap:wrap;
}
.espera-fila + .espera-fila { border-top:1px solid rgba(0,0,0,.06); }
.espera-puesto {
  flex:0 0 26px; font-weight:600; font-size:12.5px; color:var(--ambar);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------- movimientos de la agenda
   Quién se ha apuntado y quién se ha caído desde la última vez que Fran miró.
   En la agenda ya se ven las caras, pero nada le decía que algo había
   cambiado. */
.movimientos { display:flex; flex-direction:column; }
.mov-fila {
  display:flex; align-items:flex-start; gap:11px; padding:10px 18px;
  border-bottom:1px solid var(--borde);
}
.mov-fila:last-child { border-bottom:none; }
.mov-fila.nuevo { background:var(--azul-suave); }
.mov-signo {
  flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:13px; margin-top:1px;
}
.mov-signo.alta { background:var(--marca-suave); color:var(--marca-texto); }
.mov-signo.baja { background:var(--rojo-suave); color:var(--rojo); }
.mov-txt { min-width:0; flex:1; }
.mov-txt b { font-weight:600; font-size:14px; display:block; }
.mov-txt small { display:block; color:var(--apagado); font-size:12px; line-height:1.45; }
.mov-nota { color:var(--marca-texto) !important; font-style:italic; margin-top:2px; }
.eti-azul { background:var(--azul-suave); color:var(--azul); }

/* ==========================================================================
   COMER
   Lo primero que se ve es lo que te QUEDA, no lo que has comido: «te quedan
   620 kcal» se entiende sin pensar; «llevas 1.280 de 1.900» hay que restarlo.
   ========================================================================== */

/* --- cabecera de la pantalla ------------------------------------------- */
.comer-cabecera {
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;
}
.comer-migas {
  display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:var(--tenue);
}
.comer-titulo-fila { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:5px; }
.comer-h1 { font-size:25px; font-weight:600; letter-spacing:-.02em; margin:0; }
.chip-vivo {
  display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border-radius:99px;
  background:var(--superficie-2); font-size:11.5px; font-weight:600; color:var(--apagado);
}
.chip-vivo i { width:7px; height:7px; border-radius:99px; background:var(--tenue); }
.chip-vivo.bien { background:var(--marca-suave); color:var(--marca-texto); }
.chip-vivo.bien i { background:var(--marca); animation:parpadeo 2s ease-in-out infinite; }
.chip-vivo.medio { background:var(--ambar-suave); color:var(--ambar); }
.chip-vivo.medio i { background:var(--ambar); }
.chip-vivo.mal { background:var(--rojo-suave); color:var(--rojo); }
.chip-vivo.mal i { background:var(--rojo); }
/* Este parpadeo se llamaba `latido` igual que el del punto verde de arriba
   (el de .punto-vivo). Dos @keyframes con el mismo nombre NO se mezclan: gana
   el último del fichero, así que este de aquí se estaba comiendo en silencio
   el `scale` del otro y el punto llevaba meses parpadeando sin latir. */
@keyframes parpadeo { 0%,100% { opacity:1 } 50% { opacity:.35 } }
.comer-sub { color:var(--apagado); font-size:13.5px; margin:7px 0 0; max-width:62ch; line-height:1.55; }
.comer-acciones { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fecha-nav {
  display:flex; align-items:center; gap:4px; background:var(--superficie-2);
  border-radius:var(--r-s); padding:3px;
}
.fecha-nav span { font-size:13px; font-weight:600; padding:0 8px; min-width:64px; text-align:center; }
.fn-b {
  border:none; background:none; cursor:pointer; color:var(--apagado); font-size:16px;
  width:28px; height:28px; border-radius:7px; line-height:1;
}
.fn-b:hover { background:var(--superficie-3); color:var(--texto); }
.comer-acciones .btn .ico-svg { width:15px; height:15px; margin-right:5px; vertical-align:-2px; }

/* --- hero calorico + macros -------------------------------------------- */
.comer-top { display:grid; grid-template-columns:5fr 7fr; gap:16px; margin-top:18px; }
@media (max-width:1100px) { .comer-top { grid-template-columns:1fr; } }
/* El hero de bolsillo (anillo + macros en columna) es solo para el móvil
   estrecho — ver el @media(max-width:640px) más abajo. En cualquier otro
   ancho se queda oculto y manda la tarjeta grande de siempre. */
.comer-mini { display:none; }

.hero-kcal {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-hero);
  box-shadow:var(--sombra); padding:18px 20px; display:flex; flex-direction:column;
}
.hk-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.hk-etq {
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--apagado);
}
.hk-cifra { display:flex; align-items:baseline; gap:7px; margin-top:5px; }
.hk-cifra b { font-size:30px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.hk-cifra span { font-size:11.5px; color:var(--tenue); }
.hk-pct {
  flex:0 0 auto; font-size:11px; font-weight:600; padding:4px 10px; border-radius:99px;
  background:var(--marca-suave); color:var(--marca-texto); white-space:nowrap;
}
.hk-pct.pasado { background:var(--ambar-suave); color:var(--ambar); }
.hk-cuerpo { display:flex; align-items:center; gap:20px; margin:16px 0; flex-wrap:wrap; }
.hk-desglose { flex:1; min-width:200px; display:flex; flex-direction:column; gap:8px; }
.hkd { background:var(--superficie-2); border-radius:var(--r-s); padding:9px 11px; }
.hkd-fila { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; }
.hkd-fila span { display:flex; align-items:center; gap:6px; color:var(--apagado); min-width:0; }
.hkd-fila b { font-variant-numeric:tabular-nums; white-space:nowrap; }
.hkd-fila b.verde { color:var(--marca-texto); }
.hkd-fila b.azul { color:var(--azul); }
.hkd-fila b.ambar { color:var(--ambar); }
.hkd-fila i { width:7px; height:7px; border-radius:99px; flex:0 0 auto; }
.pt-gris { background:var(--borde-fuerte); }
.pt-verde { background:var(--marca); }
.pt-azul { background:var(--azul); }
.pt-ambar { background:var(--ambar); }
.hkd-barra { height:4px; border-radius:99px; background:var(--superficie-3); overflow:hidden; margin-top:5px; }
.hkd-barra i { display:block; height:100%; background:var(--borde-fuerte); border-radius:99px; }
.hkd-barra i.verde { background:var(--marca); }
.hkd-barra i.azul { background:var(--azul); }
.hkd-barra i.ambar { background:var(--ambar); }
.hkd-nota { display:block; font-size:10.5px; color:var(--tenue); margin-top:4px; line-height:1.4; }
.hk-pie {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding-top:12px; border-top:1px solid var(--borde); font-size:12px; color:var(--apagado);
}

.macros-zona { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-content:start; }
@media (max-width:760px) { .macros-zona { grid-template-columns:1fr; } }
.macro-card {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-hero);
  box-shadow:var(--sombra); padding:15px 16px; display:flex; flex-direction:column;
}
.macro-card-cab { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.macro-card-etq {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.macro-card-pct { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px; }
.macro-card-etq.prot, .macro-card-pct.prot { color:var(--marca-texto); }
.macro-card-pct.prot { background:var(--marca-suave); }
.macro-card-etq.carb, .macro-card-pct.carb { color:var(--azul); }
.macro-card-pct.carb { background:var(--azul-suave); }
.macro-card-etq.gras, .macro-card-pct.gras { color:var(--ambar); }
.macro-card-pct.gras { background:var(--ambar-suave); }
.macro-card-cifra { display:flex; align-items:baseline; gap:5px; margin-top:9px; }
.macro-card-cifra b { font-size:25px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.macro-card-cifra span { font-size:12.5px; color:var(--tenue); }
.macro-card-frase { font-size:12px; color:var(--apagado); line-height:1.5; margin:7px 0 0; flex:1; }
.macro-card-frase b { color:var(--texto); }
.macro-card-barra {
  height:10px; border-radius:99px; background:var(--superficie-3); overflow:hidden; margin-top:12px;
  padding:2px;
}
.macro-card-barra i {
  display:block; height:100%; border-radius:99px; max-width:100%;
  animation:barra-crece 1s var(--curva) both;
}
/* Las barras se llenan de 0 a su valor al entrar en la pantalla. La regla de
   @keyframes gana a la anchura que trae cada barra en su style, así que no
   hace falta tocar el HTML ni encadenar transiciones desde JS. */
@keyframes barra-crece { from { width:0; } }
.macro-card-barra.prot i { background:linear-gradient(90deg, color-mix(in srgb, var(--marca) 55%, transparent), var(--marca)); }
.macro-card-barra.carb i { background:linear-gradient(90deg, color-mix(in srgb, var(--azul) 55%, transparent), var(--azul)); }
.macro-card-barra.gras i { background:linear-gradient(90deg, color-mix(in srgb, var(--ambar) 55%, transparent), var(--ambar)); }
.macro-card-pie {
  display:flex; justify-content:space-between; gap:8px; margin-top:8px;
  font-size:10.5px; color:var(--tenue); font-variant-numeric:tabular-nums;
}

.anchas { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px) { .anchas { grid-template-columns:1fr; } }
.ancha {
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-hero);
  background:var(--superficie); border:1px solid var(--borde); box-shadow:var(--sombra);
}
.ancha-ico {
  width:38px; height:38px; flex:0 0 38px; border-radius:11px; background:var(--superficie-2);
  color:var(--apagado); display:flex; align-items:center; justify-content:center;
}
.ancha-ico.ico-ambar { background:linear-gradient(135deg, color-mix(in srgb, var(--ambar) 24%, transparent), color-mix(in srgb, var(--ambar) 10%, transparent)); color:var(--ambar); }
.ancha-ico.ico-cian  { background:linear-gradient(135deg, color-mix(in srgb, var(--cian) 24%, transparent), color-mix(in srgb, var(--cian) 10%, transparent)); color:var(--cian); }
.ancha-ico .ico-svg { width:19px; height:19px; }
.ancha-txt { flex:1; min-width:0; }
.ancha-etq {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--tenue);
}
.ancha-cifra { font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px; }
.ancha-cifra small { font-size:11.5px; font-weight:400; color:var(--tenue); }
.ancha-chip {
  flex:0 0 auto; font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:7px;
  background:var(--superficie-2); color:var(--apagado); text-align:center;
}
.ancha-chip.ok { background:var(--marca-suave); color:var(--marca-texto); }
.ancha-chip.medio { background:var(--ambar-suave); color:var(--ambar); }

/* --- zona de registro rapido ------------------------------------------- */
.registro {
  margin-top:16px; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r-hero); box-shadow:var(--sombra); padding:16px 18px;
}
.registro-cab { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.registro-titulo { display:flex; align-items:center; gap:11px; }
.registro-ico {
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--marca) 24%, transparent),
    color-mix(in srgb, var(--marca) 10%, transparent));
  color:var(--marca-texto); display:flex; align-items:center; justify-content:center;
}
.registro-ico .ico-svg { width:18px; height:18px; }
.registro-titulo h3 { margin:0; font-size:15.5px; }
.registro-titulo span { font-size:12px; color:var(--tenue); }
.registro-tabs { display:flex; gap:3px; background:var(--superficie-2); border-radius:var(--r-s); padding:3px; }
.rt {
  border:none; background:none; cursor:pointer; font:inherit; font-size:12.5px;
  padding:5px 12px; border-radius:7px; color:var(--apagado);
}
.rt.on { background:var(--superficie); color:var(--marca-texto); font-weight:600; box-shadow:var(--sombra); }
.registro-fila { display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.registro-busca { position:relative; flex:1; min-width:220px; }
.registro-busca .entrada { padding-left:38px; width:100%; }
.rb-ico {
  position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--tenue);
  pointer-events:none; display:flex;
}
.rb-ico .ico-svg { width:17px; height:17px; }
.registro-fila select { flex:0 0 auto; min-width:150px; }
.resultados { display:flex; flex-direction:column; gap:5px; margin-top:10px; }
.resultados:empty { display:none; }
.res {
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  text-align:left; border:1px solid var(--borde); background:var(--superficie-2);
  border-radius:var(--r-s); padding:9px 12px; cursor:pointer; font:inherit;
}
.res:hover { border-color:var(--marca); }
.res-txt { min-width:0; }
.res-txt b { display:block; font-size:13.5px; }
.res-txt small { font-size:11.5px; color:var(--tenue); }
.res-txt i { font-style:normal; opacity:.7; }
.res-mas { flex:0 0 auto; color:var(--marca-texto); font-size:18px; font-weight:600; }
.res-nada { padding:12px; text-align:center; color:var(--tenue); font-size:13px; }
.frecuentes { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:12px; }
.frec-etq {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tenue);
}
.frec {
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--borde);
  background:var(--superficie-2); border-radius:8px; padding:6px 11px; cursor:pointer;
  font:inherit; font-size:12.5px;
}
.frec:hover { border-color:var(--marca); }
.frec:disabled { opacity:.5; cursor:default; }
.frec-kcal { font-size:10.5px; color:var(--marca-texto); font-weight:600; }

/* --- diario + lateral --------------------------------------------------- */
.comer-main { display:grid; grid-template-columns:8fr 4fr; gap:16px; margin-top:16px; }
@media (max-width:1100px) { .comer-main { grid-template-columns:1fr; } }
.diario { display:flex; flex-direction:column; gap:12px; }
.diario-cab { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.diario-titulo { display:flex; align-items:center; gap:9px; }
.diario-titulo h3 { margin:0; font-size:16px; }
.diario-titulo .ico-svg { width:19px; height:19px; color:var(--marca-texto); }
.diario-cab > span { font-size:11px; color:var(--tenue); text-transform:uppercase; letter-spacing:.05em; }

.bloque {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-hero);
  box-shadow:var(--sombra); overflow:hidden;
}
.bloque.previsto { border-style:dashed; box-shadow:none; background:none; }
.bloque-cab {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 15px;
}
.bloque:not(.previsto) .bloque-cab { border-bottom:1px solid var(--borde); }
.bloque-titulo { display:flex; align-items:center; gap:10px; }
.bloque-titulo h4 { margin:0; font-size:14.5px; font-weight:600; }
.bloque-hora {
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; padding:3px 9px;
  border-radius:7px; background:var(--superficie-2); color:var(--apagado);
}
.eti-previsto {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 8px; border-radius:6px; background:var(--superficie-2); color:var(--tenue);
}
.bloque-macros {
  display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--apagado);
  font-variant-numeric:tabular-nums; flex-wrap:wrap;
}
.bloque-macros b { font-size:13px; color:var(--texto); }
.bloque-macros .prot { color:var(--marca-texto); }
.bloque-macros .carb { color:var(--azul); }
.bloque-macros .gras { color:var(--ambar); }
.bloque-nada { color:var(--tenue); font-style:italic; }
.bloque-mas {
  border:none; background:var(--marca-suave); color:var(--marca-texto); cursor:pointer;
  width:26px; height:26px; border-radius:8px; font-size:17px; line-height:1; font-weight:600;
}
.bloque-mas:hover { background:var(--marca-borde); }

.ing-lista { display:flex; flex-direction:column; }
.ing-fila {
  display:flex; align-items:center; gap:12px; padding:10px 15px;
  border-bottom:1px solid var(--borde);
}
.ing-fila:last-child { border-bottom:none; }
.ing-fila:hover { background:var(--superficie-2); }
.ing-txt { flex:1; min-width:0; }
.ing-txt b { display:block; font-size:13.5px; font-weight:500; }
.ing-txt small { font-size:11.5px; color:var(--tenue); }
.ing-cifras { flex:0 0 auto; text-align:right; }
.ing-cifras b { display:block; font-size:13px; font-variant-numeric:tabular-nums; }
.ing-cifras small { font-size:10.5px; color:var(--tenue); font-variant-numeric:tabular-nums; }
.ing-x {
  flex:0 0 auto; border:none; background:none; cursor:pointer; color:var(--tenue);
  font-size:13px; padding:4px 6px; border-radius:6px;
}
.ing-x:hover { background:var(--rojo-suave); color:var(--rojo); }

.comer-lado { display:flex; flex-direction:column; gap:12px; }
.lado-tarjeta {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-hero);
  box-shadow:var(--sombra); padding:14px 16px;
}
.lado-tarjeta.consejo { background:var(--marca-suave); border-color:var(--marca-borde); }
.lado-cab {
  display:flex; align-items:center; gap:9px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--apagado); margin-bottom:10px;
}
/* Insignia de cada bloque del lateral de Comer, mismo patrón de degradado
   que .teja-rica-ico pero más chica: va en una línea de texto, no en una
   tarjeta entera. */
.lado-ico {
  width:22px; height:22px; flex:0 0 22px; border-radius:7px; display:flex;
  align-items:center; justify-content:center;
}
.lado-ico .ico-svg { width:13px; height:13px; }
.lado-ico.ico-azul   { background:linear-gradient(135deg, color-mix(in srgb, var(--azul) 24%, transparent), color-mix(in srgb, var(--azul) 10%, transparent)); color:var(--azul); }
.lado-ico.ico-cian   { background:linear-gradient(135deg, color-mix(in srgb, var(--cian) 24%, transparent), color-mix(in srgb, var(--cian) 10%, transparent)); color:var(--cian); }
.lado-ico.ico-marca  { background:linear-gradient(135deg, color-mix(in srgb, var(--marca) 24%, transparent), color-mix(in srgb, var(--marca) 10%, transparent)); color:var(--marca-texto); }
.lado-ico.ico-morado { background:linear-gradient(135deg, color-mix(in srgb, var(--morado) 24%, transparent), color-mix(in srgb, var(--morado) 10%, transparent)); color:var(--morado); }
.lado-caja { background:var(--superficie-2); border-radius:var(--r-s); padding:11px 13px; }
.lado-fila {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12.5px; color:var(--apagado); padding:3px 0;
}
.lado-fila b { color:var(--texto); font-variant-numeric:tabular-nums; }
.lado-fila b.verde { color:var(--marca-texto); }
.lado-barra {
  height:5px; border-radius:99px; background:var(--superficie-3); overflow:hidden; margin-top:9px;
}
.lado-barra i { display:block; height:100%; border-radius:99px; background:var(--marca); }
.lado-texto { font-size:12.5px; color:var(--apagado); line-height:1.55; margin:9px 0 0; }
.lado-texto b { color:var(--texto); }
.lado-tarjeta.consejo .lado-texto { color:var(--marca-texto); }
.lado-tarjeta .semana-comer { padding:0; }

.kcal-anillo { position:relative; flex:0 0 auto; }
.kcal-anillo svg { display:block; transform:rotate(-90deg); }
.ka-fondo { fill:none; stroke:var(--superficie-3); }
.ka-linea {
  fill:none; stroke:var(--marca); transition:stroke-dashoffset 1.1s var(--curva);
}
.ka-linea.pasado { stroke:var(--ambar); }
.ka-dentro {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; pointer-events:none;
}
.ka-dentro b {
  font-size:34px; font-weight:600; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.ka-dentro span { font-size:11px; color:var(--tenue); margin-top:4px; max-width:96px; }

/* --- la semana, con la nota de cada día */
.semana-comer {
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; padding:14px 15px 16px;
}
.dia-comer {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px;
  border:1px solid var(--borde); border-radius:var(--r-s); background:var(--superficie-2);
  cursor:pointer; color:var(--texto); transition:transform var(--rapido) var(--curva);
}
.dia-comer:active { transform:scale(.95); }
.dc-dia { font-size:9.5px; font-weight:600; text-transform:uppercase; color:var(--tenue); }
.dc-num { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.dc-nota { font-size:11px; font-weight:600; color:var(--tenue); }
.dia-comer.bien  { background:var(--marca-suave); border-color:var(--marca-borde); }
.dia-comer.bien .dc-nota { color:var(--marca-texto); }
.dia-comer.medio { background:var(--ambar-suave); border-color:var(--ambar-suave); }
.dia-comer.medio .dc-nota { color:var(--ambar); }
.dia-comer.mal   { background:var(--rojo-suave); border-color:var(--rojo-suave); }
.dia-comer.mal .dc-nota { color:var(--rojo); }
.dia-comer.es-hoy { box-shadow:0 0 0 2px var(--acento); }
.dia-comer.mirando { outline:2px solid var(--marca); outline-offset:1px; }

/* --- las comidas apuntadas */
.momento .tarjeta-cab { padding-bottom:10px; }
.comidas { display:flex; flex-direction:column; }
.comida {
  display:flex; align-items:center; gap:12px; padding:11px 18px;
  border-top:1px solid var(--borde);
}
.comida-txt { flex:1; min-width:0; }
.comida-txt b { display:block; font-weight:600; font-size:14px; }
.comida-txt small { display:block; color:var(--tenue); font-size:12px; margin-top:1px; }
.comida-kcal {
  font-weight:600; font-variant-numeric:tabular-nums; font-size:15px; flex:0 0 auto;
}
.comida-x {
  border:none; background:none; color:var(--tenue); cursor:pointer; font-size:13px;
  padding:4px 2px; flex:0 0 auto;
}
.comida-x:hover { color:var(--rojo); }
.momento-vacio {
  padding:4px 18px 16px; color:var(--tenue); font-size:13px;
}

/* --- buscar un alimento */
.lista-alimentos { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.alimento {
  display:flex; align-items:center; gap:12px; padding:11px 13px; cursor:pointer;
  border:1px solid var(--borde); border-radius:var(--r-s); background:var(--superficie);
  text-align:left; color:var(--texto);
  transition:border-color var(--rapido), background var(--rapido);
}
.alimento:hover { border-color:var(--marca-borde); background:var(--superficie-2); }
.alimento-txt { flex:1; min-width:0; }
.alimento-txt b { display:block; font-weight:600; font-size:14px; }
.alimento-txt small { display:block; color:var(--tenue); font-size:12px; margin-top:1px; }
.alimento-txt small i, .tuyo { font-style:normal; opacity:.75; }
.tuyo {
  font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; padding:1px 6px;
  border-radius:var(--r-pastilla); background:var(--marca-suave); color:var(--marca-texto);
  margin-left:5px; vertical-align:1px;
}
.alimento-mas {
  flex:0 0 30px; height:30px; border-radius:50%; background:var(--marca-suave);
  color:var(--marca-texto); display:grid; place-items:center; font-size:17px; font-weight:600;
}

/* --- cuántos gramos */
.cuanto { display:flex; flex-direction:column; }
.cuanto-cifra { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.cuanto-cifra input {
  width:120px; font-size:26px; font-weight:600; text-align:center;
  font-variant-numeric:tabular-nums;
}
.cuanto-unidad { display:flex; gap:6px; }
.cuanto-unidad .chip i { font-style:normal; opacity:.7; font-size:11px; }
.cuanto-rapido { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
/* "2 unidades son 360 g": al apuntar por piezas, los macros de abajo salen de
   un peso que no se ve en ninguna parte. Esta línea lo deja a la vista para
   que nadie tenga que fiarse de que la cuenta es la que cree. */
.cuanto-equivale { margin-top:10px; font-size:13px; color:var(--tenue); }
.cuanto-equivale:empty { display:none; }
/* La hora y, al editar, en qué comida va: dos filas de etiqueta + campo. */
.cuanto-hora {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px;
}
.cuanto-hora > span { font-size:14px; color:var(--tenue); font-weight:600; }
.cuanto-hora .entrada { width:auto; min-width:130px; font-size:16px; text-align:left; }
.cuanto-macros {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--borde);
}
.cm { text-align:center; min-width:0; }
.cm b {
  display:block; font-size:20px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cm span { font-size:10.5px; color:var(--tenue); text-transform:uppercase; letter-spacing:.05em; }

@media (max-width:560px) {
  .comer-cifras { gap:16px; justify-content:center; }
  .kcal-anillo svg { width:140px; height:140px; }
  .ka-dentro b { font-size:28px; }
  .cuanto-macros { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
}

/* ------------------------------------ el plan de comidas, lado entrenador */
.plan-cifras {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
}
.plan-cifras b {
  display:block; font-size:20px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.plan-cifras span { font-size:10.5px; color:var(--tenue); text-transform:uppercase;
  letter-spacing:.05em; }
.ayuda-plan { font-size:12.5px; margin:-4px 0 12px; }
.ayuda-plan .cuadra { color:var(--verde); font-weight:600; }
.ayuda-plan .no-cuadra { color:var(--ambar); font-weight:600; }
.atajos-plan {
  padding:13px 14px; border-radius:var(--r-s); background:var(--superficie-2);
}

/* Los cuatro numeros de la dieta. El que se ajusta solo se marca: es la unica
   manera de que Fran entienda por que ese cambia cuando el escribe en otro. */
.plan-macros { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:12px; }
@media (max-width:640px) { .plan-macros { grid-template-columns:1fr 1fr; } }
.plan-macro { margin-bottom:0; }
.plan-macro > span { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.plan-macro-caja { position:relative; }
.plan-macro-caja .entrada { padding-right:38px; font-variant-numeric:tabular-nums; }
.plan-u {
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--tenue); pointer-events:none;
}
.plan-auto {
  font-style:normal; font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--marca);
}
.plan-macro.auto .entrada {
  border-color:var(--marca-borde); background:color-mix(in srgb, var(--marca) 7%, var(--superficie));
}
.plan-porkg { display:block; font-style:normal; font-size:11px; color:var(--tenue); margin-top:4px;
  font-variant-numeric:tabular-nums; }

.plan-ajusta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.plan-ajusta-chips { display:flex; gap:6px; flex-wrap:wrap; }
.plan-ajusta-chips .chip { padding:4px 10px; font-size:12px; }

.ayuda-plan .aviso-plan {
  display:block; margin-top:6px; color:var(--ambar); font-weight:500; line-height:1.45;
}
.plan-sin-peso {
  padding:11px 13px; border-radius:var(--r-s); background:var(--superficie-2);
  color:var(--apagado); font-size:12.5px; line-height:1.5;
}

/* ------------------------------------------------ el plan que le viene */
.semana-flechas { display:flex; align-items:center; gap:4px; }
.semana-flechas .btn { padding:2px 8px; min-width:0; }

.plan-dias { display:flex; flex-direction:column; }
.plan-dia {
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 2px;
  background:none; border:0; border-top:1px solid var(--borde); cursor:pointer;
  text-align:left; color:inherit; font:inherit;
}
.plan-dia:first-child { border-top:0; }
.plan-dia:hover { background:var(--superficie-2); }
.pd-cuando {
  flex:0 0 44px; display:flex; flex-direction:column; align-items:center;
  line-height:1.15; padding:5px 0; border-radius:var(--r-s);
  background:var(--superficie-2);
}
.pd-cuando b { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--apagado); font-weight:700; }
.pd-cuando span { font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; }
.pd-que { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pd-que b { font-size:14px; font-weight:600; }
.pd-que small { font-size:12px; color:var(--apagado); }
.pd-cuanto { flex:0 0 auto; font-size:12px; color:var(--tenue); white-space:nowrap; }
.plan-mas { margin:10px 2px 0; font-size:12.5px; color:var(--tenue); }

/* -------------------------------------------- graficos del panel */
/* Mapa de calor: un solo tono, mas oscuro es mas lleno. El numero va DENTRO de
   la celda porque los tonos claros no llegan a 3:1 contra el fondo y el color
   solo no se podria leer. */
.calor { overflow-x:auto; }
.calor-rejilla {
  display:grid; grid-template-columns:auto repeat(var(--cols), minmax(38px, 1fr));
  gap:2px; min-width:320px;
}
.calor-esq { }
.calor-dia, .calor-hora {
  font-size:11px; font-weight:650; color:var(--apagado); display:flex;
  align-items:center; justify-content:center;
}
.calor-hora { justify-content:flex-end; padding-right:8px;
  font-variant-numeric:tabular-nums; }
.calor-celda {
  aspect-ratio:1.55; border-radius:4px; display:flex; align-items:center;
  justify-content:center; font-size:11.5px; font-weight:650;
  font-variant-numeric:tabular-nums; cursor:default; outline:none;
  transition:transform var(--rapido) var(--curva);
}
.calor-celda:hover, .calor-celda:focus-visible { transform:scale(1.08); z-index:1;
  box-shadow:0 0 0 2px var(--superficie), 0 2px 8px rgba(26,28,27,.16); }
.calor-celda.vacia { background:transparent; border:1px dashed var(--borde); }
.calor-leyenda {
  display:flex; align-items:center; gap:4px; margin-top:12px;
  font-size:11px; color:var(--tenue);
}
.calor-leyenda i { width:22px; height:9px; border-radius:3px; display:block; }

/* Barras del dinero: una sola serie, asi que un solo color y sin leyenda. */
.barras-mes { display:flex; align-items:flex-end; gap:8px; height:150px; padding-top:6px; }
.bm-col { flex:1; display:flex; flex-direction:column; height:100%; cursor:default;
  outline:none; }
.bm-valor { height:20px; display:flex; align-items:flex-end; justify-content:center;
  font-size:11.5px; font-weight:650; color:var(--apagado); }
.bm-barra {
  width:100%; margin-top:auto; background:var(--marca); border-radius:4px 4px 0 0;
  transition:opacity var(--rapido);
}
/* El mes en curso va rayado: aun no ha terminado y compararlo con los enteros
   sin decirlo seria hacerse trampas. */
.bm-barra.en-curso {
  background:repeating-linear-gradient(45deg, var(--marca) 0 5px,
             color-mix(in srgb, var(--marca) 55%, var(--superficie)) 5px 10px);
}
.bm-col:hover .bm-barra, .bm-col:focus-visible .bm-barra { opacity:.82; }
.bm-etq { padding-top:7px; text-align:center; font-size:11.5px; color:var(--tenue); }

.teja-chispa { display:flex; align-items:center; gap:8px; margin-top:8px;
  color:var(--marca); }
.teja-chispa i { font-style:normal; font-size:10.5px; color:var(--tenue); }
.chispa { display:block; overflow:visible; }

/* Una sola pista para toda la pagina: una por celda serian cientos de nodos. */
.pista-globo {
  position:fixed; z-index:90; max-width:250px; padding:8px 11px;
  border-radius:var(--r-s); background:var(--texto); color:var(--fondo);
  font-size:12.5px; line-height:1.45; pointer-events:none;
  box-shadow:0 6px 20px rgba(26,28,27,.22);
}

/* --------------------------------------------- la pantalla «Mi plan» */
/* Escrita para alguien que no usa aplicaciones: letra grande, botones anchos
   con lo que hacen escrito dentro, y nada que dependa de adivinar que algo se
   toca. El color de zona esta, pero de adorno: lo que manda es lo escrito. */

.proxima {
  padding:26px 24px 22px; border-radius:var(--r-g); background:var(--superficie);
  border:1px solid var(--borde); box-shadow:var(--sombra-hero);
  position:relative; overflow:hidden; text-align:center;
}
.proxima::before {
  content:''; position:absolute; left:0; right:0; top:0; height:5px; background:var(--zona);
}
.px-cuando {
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--zona);
}
.px-nombre {
  margin:8px 0 10px; font-size:30px; font-weight:650; letter-spacing:-.02em; line-height:1.12;
}
.px-que { margin:0 auto 6px; max-width:38ch; font-size:16px; line-height:1.55;
  color:var(--apagado); }
.px-que b { color:var(--texto); font-weight:650; }
.px-figuras { display:flex; justify-content:center; gap:6px; margin:6px 0 18px; }
@media (max-width:560px) { .px-nombre { font-size:25px; } .px-que { font-size:15px; } }

/* Los botones de esta pantalla son grandes a proposito: un dedo de verdad, no
   un raton. 48 px es el minimo que se toca sin fallar. */
.btn-grande { font-size:16px; padding:14px 26px; min-height:50px; border-radius:var(--r); }
.btn-ancho {
  width:100%; justify-content:center; font-size:15px; padding:12px 18px; min-height:48px;
  border-radius:var(--r-s); margin-top:12px;
}

.plan-frase {
  margin:16px 2px 0; font-size:15px; line-height:1.6; color:var(--apagado); text-align:center;
}
.plan-frase b { color:var(--texto); font-weight:650; }

.titulo-semana {
  margin:0 2px 12px; font-size:17px; font-weight:650; letter-spacing:-.01em;
}
.dias-plan { display:flex; flex-direction:column; gap:12px; }

.dia-plan {
  padding:16px 18px 18px; border-radius:var(--r); background:var(--superficie);
  border:1px solid var(--borde); position:relative; overflow:hidden;
}
.dia-plan::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--zona);
}
.dia-plan.es-hoy { border-color:var(--zona); box-shadow:var(--sombra-hero); }
.dia-plan.hecha { background:var(--superficie-2); }
.dp-cuerpo { display:flex; gap:14px; align-items:center; }
.dp-figura { flex:0 0 auto; }
.dp-texto { flex:1; min-width:0; }
.dp-cuando {
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--zona); margin-bottom:3px;
}
.dp-hecha { color:var(--verde); }
.dp-texto h4 { margin:0 0 4px; font-size:18px; font-weight:650; line-height:1.2; }
.dp-texto p { margin:0; font-size:14.5px; line-height:1.5; color:var(--apagado); }
.dp-recado {
  margin-top:13px; padding:12px 14px; border-radius:var(--r-s);
  background:var(--superficie-2); font-size:14.5px; line-height:1.55;
}
.dp-recado span {
  display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tenue); margin-bottom:3px;
}

.dp-lista { margin-top:14px; }
.ej-fila { display:flex; gap:12px; align-items:flex-start; padding:11px 0;
  border-top:1px solid var(--borde); }
.ej-n {
  flex:0 0 26px; height:26px; border-radius:50%; background:var(--superficie-2);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--apagado);
}
.ej-txt { flex:1; min-width:0; }
.ej-txt b { display:block; font-size:15.5px; font-weight:600; line-height:1.3; }
.ej-txt small { display:block; margin-top:2px; font-size:14px; color:var(--apagado); }

.plan-resumen-cifras { display:flex; gap:8px; padding:4px 2px 2px; }
.plan-resumen-cifras div { flex:1; text-align:center; }
.plan-resumen-cifras b {
  display:block; font-size:22px; font-weight:650; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.plan-resumen-cifras span {
  font-size:10.5px; color:var(--tenue); text-transform:uppercase; letter-spacing:.05em;
}

.plan-bloque { border-top:1px solid var(--borde); }
.plan-bloque:first-child { border-top:0; }
.plan-bloque .plan-dia { border-top:0; }
.plan-bloque.es-hoy { background:color-mix(in srgb, var(--marca) 6%, transparent); }
.pd-flecha {
  flex:0 0 auto; color:var(--tenue); font-size:19px; line-height:1;
  transition:transform .15s var(--curva);
}
.plan-bloque.abierto .pd-flecha { transform:rotate(90deg); }

.plan-detalle { padding:2px 2px 14px; }
.plan-recado {
  padding:10px 12px; margin-bottom:10px; border-radius:var(--r-s);
  background:var(--superficie-2); font-size:13px; line-height:1.5;
}
.plan-ejercicios { margin:0 0 12px; padding:0 0 0 22px; }
.plan-ejercicios li { margin-bottom:7px; }
.pe-nombre { display:block; font-size:13.5px; font-weight:600; }
.pe-nombre i {
  font-style:normal; font-size:10.5px; font-weight:600; color:var(--tenue);
  text-transform:uppercase; letter-spacing:.04em; margin-left:6px;
}
.pe-pauta { display:block; font-size:12.5px; color:var(--apagado);
  font-variant-numeric:tabular-nums; }

.vacio-grande { text-align:center; padding:34px 22px; }
.vacio-grande svg { width:38px; height:38px; color:var(--tenue); margin-bottom:12px; }
.vacio-grande-ico {
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--azul) 24%, transparent), color-mix(in srgb, var(--azul) 10%, transparent));
}
.vacio-grande-ico svg { width:28px; height:28px; margin:0; color:var(--azul); }
.vacio-grande h3 { margin:0 0 6px; font-size:17px; }
.vacio-grande p { margin:0 auto 16px; max-width:34ch; color:var(--apagado);
  font-size:13.5px; line-height:1.55; }

/* --------------------------------------------------- escaner de codigos */
.busca-con-escaner { display:flex; gap:8px; align-items:stretch; }
.busca-con-escaner .buscador { flex:1; min-width:0; }
.btn-escanear {
  flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:9px 14px;
  border:1px solid var(--borde-fuerte); border-radius:var(--r-s);
  background:var(--superficie); color:var(--texto); font-weight:600; font-size:13.5px;
  cursor:pointer; white-space:nowrap;
}
.btn-escanear:hover { background:var(--superficie-2); border-color:var(--marca-borde); }
.btn-escanear span { letter-spacing:-1px; font-size:15px; color:var(--marca); }
@media (max-width:520px) {
  /* En un movil estrecho el boton se queda solo con las barritas: el texto
     «Escanear» partia la fila y dejaba el buscador en un palmo. */
  .btn-escanear { font-size:0; gap:0; padding:9px 12px; }
  .btn-escanear span { font-size:17px; }
}

.escaner { position:relative; border-radius:var(--r-s); overflow:hidden; background:#000; }
.escaner video {
  width:100%; max-height:56vh; display:block; object-fit:cover; background:#000;
}
/* La mira no recorta nada: solo le dice a la persona donde poner el codigo.
   Sin ella la gente enfoca el bote entero y no lee. */
.escaner-mira {
  position:absolute; left:8%; right:8%; top:50%; height:22%; transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.9); border-radius:10px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.35);
}
.escaner-pie {
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:16px 14px 11px;
  color:#fff; font-size:13px; line-height:1.45; text-align:center;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.75));
}
.escaner-pie.cansado { background:rgba(0,0,0,.8); }
.escaner-motivo {
  padding:11px 13px; margin:0 0 14px; border-radius:var(--r-s);
  background:var(--superficie-2); color:var(--apagado); font-size:13px; line-height:1.5;
}

/* ------------------------------------------------- fotos de progreso */
.fotos-tira {
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none;
}
.fotos-tira::-webkit-scrollbar { display:none; }
.foto-mini {
  position:relative; flex:0 0 auto; width:104px; height:140px; padding:0;
  border-radius:var(--r-s); overflow:hidden; border:1px solid var(--borde);
  background:var(--superficie-2); cursor:pointer;
  transition:transform var(--medio) var(--curva), border-color var(--medio);
}
.foto-mini:hover { transform:translateY(-2px); border-color:var(--marca-borde); }
.foto-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-pie {
  position:absolute; left:0; right:0; bottom:0; padding:14px 6px 5px; font-size:10.5px;
  color:#fff; background:linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  font-weight:600;
}
.comparar-fotos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-lado { min-width:0; display:flex; flex-direction:column; gap:8px; }
.cf-lado img {
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-s);
  background:var(--superficie-2);
}
.cf-pie { display:flex; align-items:baseline; gap:8px; }
.cf-pie b { font-size:14px; }
.cf-pie span { color:var(--apagado); font-size:13px; }
.comparar-resumen {
  margin-top:16px; padding:13px 15px; border-radius:var(--r-s);
  background:var(--superficie-2); text-align:center; font-size:14px; color:var(--apagado);
}
.comparar-resumen b { color:var(--texto); }
.comparar-resumen b.baja { color:var(--marca); }
.comparar-resumen b.sube { color:var(--ambar); }

/* --------------------------------------------------- horario de apertura */
.dia-horario {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 13px;
  border:1px solid var(--borde); border-radius:var(--r-s); margin-bottom:8px;
  background:var(--superficie-2);
  transition:background var(--rapido), border-color var(--rapido);
}
.dia-horario.abierto { background:var(--superficie); border-color:var(--marca-borde); }
.dh-nombre { display:flex; align-items:center; gap:9px; flex:0 0 130px; cursor:pointer; }
.dh-nombre input { width:auto; }
.dh-nombre b { font-weight:600; font-size:14px; }
.dh-campos { display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1; }
.dh-campos .entrada { width:auto; min-width:96px; padding:6px 8px; font-size:13px; }
.dh-sep { color:var(--tenue); font-size:13px; }
.dh-huecos {
  font-size:11.5px; font-weight:600; color:var(--marca-texto); white-space:nowrap;
}
.dh-cerrado { color:var(--tenue); font-size:13px; }

/* Un dia puede abrir en VARIOS tramos (de 9 a 14 y de 17 a 21), asi que la
   fila del dia deja de ser una linea y pasa a ser un bloque. */
.dia-horario { align-items:flex-start; }
.dh-tramos { flex:1 1 260px; display:flex; flex-direction:column; gap:6px; }
.dh-tramo { display:flex; align-items:center; gap:6px; }
.dh-tramo .entrada { width:auto; min-width:98px; padding:6px 8px; font-size:13px; }
.dh-cuantos {
  flex:1; font-size:11.5px; font-weight:600; color:var(--marca-texto); white-space:nowrap;
}
.dh-etq {
  display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--tenue);
  font-weight:650; text-transform:uppercase; letter-spacing:.04em;
}
/* Las horas que van a salir, escritas. Es la unica manera de que Fran vea lo
   que esta montando ANTES de guardarlo y de crear cien sesiones. */
.dh-horas {
  flex:0 0 100%; display:flex; gap:4px; flex-wrap:wrap; margin-top:2px;
  padding-top:9px; border-top:1px dashed var(--borde);
}
.dh-horas span {
  padding:2px 7px; border-radius:var(--r-pastilla); background:var(--superficie-2);
  font-size:11px; color:var(--apagado); font-variant-numeric:tabular-nums;
}
.dh-horas span.mas { background:none; color:var(--tenue); }
@media (max-width:640px) {
  .dh-tramos { flex-basis:100%; }
  .dh-campos { flex-basis:100%; }
}
.tarifas-rapidas { margin-top:14px; padding:12px 13px; border-radius:var(--r-s);
  background:var(--superficie-2); }
@media (max-width:640px) {
  .dh-nombre { flex:0 0 100%; }
  .dh-campos .entrada { flex:1; min-width:80px; }
}

/* La raya de "lo normal en ese día", cruzando las semanas anteriores. */
.barra-espera {
  position:absolute; left:-2px; right:-2px; height:0;
  border-top:2px dashed var(--borde-fuerte); pointer-events:none;
}
.leyenda-barras i.raya {
  height:0; border-top:2px dashed var(--borde-fuerte); border-radius:0; width:14px;
}
.prevision-nota {
  margin-top:14px; padding:11px 13px; border-radius:var(--r-s);
  background:var(--superficie-2); font-size:13px; color:var(--apagado); line-height:1.55;
}
.prevision-nota b { color:var(--texto); }
.prevision-nota b.flojo { color:var(--ambar); }
.prevision-nota b.bien { color:var(--verde); }

/* --------------------------------------------- apuntarse el peso, cliente */
.pesarse { display:flex; gap:8px; align-items:center; }
.pesarse .entrada {
  flex:1; min-width:0; text-align:center; font-size:22px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.pesarse .btn { flex:0 0 auto; min-width:48px; font-size:19px; padding:0; height:46px; }
.peso-menos, .peso-mas { font-variant-numeric:tabular-nums; }
.pesarse .btn.btn-p { min-width:auto; font-size:14px; padding:0 16px; }

/* ============================================== constantes (garmin) */
.coach-hero {
  position:relative; overflow:hidden; border-left:4px solid var(--borde-fuerte);
}
.coach-hero.n-fuerte     { border-left-color:var(--marca); }
.coach-hero.n-suave      { border-left-color:var(--ambar); }
.coach-hero.n-descanso   { border-left-color:var(--rojo); }
.coach-hero.n-aprendiendo,
.coach-hero.n-sin_datos  { border-left-color:var(--borde-fuerte); }
.coach-eti {
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; padding:3px 10px; border-radius:99px;
  background:var(--superficie-2); color:var(--apagado);
}
.coach-hero.n-fuerte .coach-eti   { background:var(--marca-suave); color:var(--marca-texto); }
.coach-hero.n-suave .coach-eti    { background:var(--ambar-suave); color:var(--ambar); }
.coach-hero.n-descanso .coach-eti { background:var(--rojo-suave); color:var(--rojo); }
.coach-titulo { font-size:23px; font-weight:600; letter-spacing:-.01em; margin-top:10px; line-height:1.25; }
.coach-porque { color:var(--apagado); font-size:14.5px; margin-top:8px; line-height:1.55; max-width:52ch; }
.coach-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.coach-chip {
  font-size:12px; font-variant-numeric:tabular-nums; color:var(--texto);
  background:var(--superficie-2); border-radius:8px; padding:5px 10px;
}
.coach-de-ayer { font-size:12px; color:var(--tenue); margin-top:10px; }

.grafica-nota {
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tenue); margin-top:8px;
}
.grafica-nota-punto { width:6px; height:6px; border-radius:1.5px; background:var(--marca); display:inline-block; }

/* ------------------------------------------------------------ tejas ricas */
.tejas-ricas { align-items:stretch; }
.teja-rica {
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--tono-tarjeta, transparent) 7%, var(--superficie)),
    color-mix(in srgb, var(--tono-tarjeta, transparent) 2%, var(--superficie)));
  border:1px solid color-mix(in srgb, var(--tono-tarjeta, transparent) 16%, var(--borde));
  border-radius:var(--r-hero);
  padding:16px 18px; display:flex; flex-direction:column; box-shadow:var(--sombra);
}
.teja-media { justify-content:center; }
.teja-rica-cab { display:flex; align-items:center; gap:9px; }
.teja-rica-ico {
  width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; background:var(--superficie-2); color:var(--apagado);
}
.teja-rica-ico .ico-svg { width:16px; height:16px; }
/* Degradado de dos paradas en vez de un plano: es lo que distingue una
   insignia de categoría "Ajustes/Salud" de iOS de un simple cuadro de color. */
.teja-rica-ico.ico-rojo   { background:linear-gradient(135deg, color-mix(in srgb, var(--rojo) 24%, transparent), color-mix(in srgb, var(--rojo) 10%, transparent)); color:var(--rojo); }
.teja-rica-ico.ico-azul   { background:linear-gradient(135deg, color-mix(in srgb, var(--azul) 24%, transparent), color-mix(in srgb, var(--azul) 10%, transparent)); color:var(--azul); }
.teja-rica-ico.ico-marca  { background:linear-gradient(135deg, color-mix(in srgb, var(--marca) 24%, transparent), color-mix(in srgb, var(--marca) 10%, transparent)); color:var(--marca-texto); }
.teja-rica-ico.ico-morado { background:linear-gradient(135deg, color-mix(in srgb, var(--morado) 24%, transparent), color-mix(in srgb, var(--morado) 10%, transparent)); color:var(--morado); }
.teja-rica-ico.ico-menta  { background:linear-gradient(135deg, color-mix(in srgb, var(--menta) 24%, transparent), color-mix(in srgb, var(--menta) 10%, transparent)); color:var(--menta); }
.teja-rica-ico.ico-cian   { background:linear-gradient(135deg, color-mix(in srgb, var(--cian) 24%, transparent), color-mix(in srgb, var(--cian) 10%, transparent)); color:var(--cian); }
.teja-rica-ico.ico-ambar  { background:linear-gradient(135deg, color-mix(in srgb, var(--ambar) 24%, transparent), color-mix(in srgb, var(--ambar) 10%, transparent)); color:var(--ambar); }
.teja-rica-ico.ico-verde  { background:linear-gradient(135deg, color-mix(in srgb, var(--verde) 24%, transparent), color-mix(in srgb, var(--verde) 10%, transparent)); color:var(--verde); }
.teja-rica-etq {
  flex:1; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--apagado);
}
.teja-rica-badge {
  font-size:11px; color:var(--tenue); background:var(--superficie-2); padding:3px 9px;
  border-radius:99px; white-space:nowrap;
}
.teja-rica-cifra { display:flex; align-items:baseline; gap:6px; margin:12px 0 4px; }
.teja-rica-cifra b { font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.teja-rica-cifra span { font-size:12.5px; color:var(--tenue); }
.teja-rica-pie { font-size:12px; color:var(--tenue); margin-top:auto; padding-top:6px; }
.teja-rica-rango {
  display:flex; justify-content:space-between; font-size:11px; color:var(--tenue);
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.teja-rica-chispa { display:block; margin-top:6px; }
.teja-rica-chispa .chispa { width:100%; height:46px; }
.teja-rica-barra-fina {
  height:6px; background:var(--superficie-2); border-radius:99px; overflow:hidden; margin-top:4px;
}
.teja-rica-barra-fina div {
  height:100%; border-radius:99px; animation:barra-crece 1s var(--curva) both;
  background:linear-gradient(90deg, color-mix(in srgb, var(--marca) 50%, transparent), var(--marca));
}

.teja-sub {
  font-size:10.5px; font-weight:700; color:var(--tenue); text-transform:uppercase;
  letter-spacing:.05em; margin-top:16px;
}
.teja-rica-fila { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.teja-rica-fila .teja-rica-cifra { margin-bottom:0; }
.teja-dato-der { font-size:12px; color:var(--marca-texto); font-weight:600; white-space:nowrap; }
.teja-meta { display:flex; justify-content:space-between; font-size:11.5px; color:var(--tenue); margin-top:10px; }
.teja-meta-pct { color:var(--marca-texto); font-weight:600; }

.chip-q {
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:99px; white-space:nowrap;
}
.chip-q.ok { background:var(--marca-suave); color:var(--marca-texto); }
.chip-q.medio { background:var(--ambar-suave); color:var(--ambar); }
.chip-q.mal { background:var(--rojo-suave); color:var(--rojo); }
.fuerte { color:var(--marca-texto); font-weight:600; }

.mini-barras { display:flex; align-items:flex-end; gap:6px; height:54px; margin-top:8px; }
.mini-barra-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.mini-barra {
  position:relative; width:100%; border-radius:4px 4px 0 0; background:var(--superficie-3);
  transition:background .15s;
}
.mini-barra.es-hoy { background:var(--marca); }
.mini-globo {
  position:absolute; top:-19px; left:50%; transform:translateX(-50%); opacity:0;
  background:var(--texto); color:var(--superficie); font-size:9.5px; font-weight:600;
  padding:1px 5px; border-radius:5px; white-space:nowrap; pointer-events:none;
  transition:opacity .12s ease; font-variant-numeric:tabular-nums;
}
.mini-barra-col:hover .mini-globo { opacity:1; }
.mini-dia { font-size:9px; color:var(--tenue); margin-top:4px; }
.mini-dia.es-hoy { color:var(--marca-texto); font-weight:700; }

.teja-rica-chispa { display:block; margin-top:10px; }
.teja-rica-chispa .chispa { width:100%; height:52px; }
.teja-puntos {
  display:flex; gap:14px; font-size:11px; color:var(--apagado); margin-top:8px;
  font-variant-numeric:tabular-nums; flex-wrap:wrap;
}
.teja-puntos span { display:flex; align-items:center; gap:5px; }
.teja-puntos i { width:6px; height:6px; border-radius:99px; flex:0 0 auto; }
.pt-ok { background:var(--marca); }
.pt-rojo { background:var(--rojo); }
.pt-mal { background:var(--ambar); }

/* Lo de anoche contra su media: el contexto que convierte "7 h 15" en una
   decisión ("duerme lo de siempre" o "esta noche ha dormido hora y media
   menos de lo suyo"). */
.sueno-contexto { font-size:12px; color:var(--tenue); margin-top:2px; }
.sueno-contexto b { color:var(--apagado); font-variant-numeric:tabular-nums; }
.sueno-contexto b.peor { color:var(--ambar); }
.sueno-contexto b.mejor { color:var(--marca-texto); }
/* El veredicto para el entrenador: apretar hoy o no. */
.sueno-veredicto {
  display:flex; align-items:center; gap:8px; margin-top:11px;
  padding:8px 11px; border-radius:var(--r-s); font-size:12.5px; font-weight:600;
  background:var(--superficie-2); color:var(--apagado);
}
.sueno-veredicto i { width:8px; height:8px; border-radius:99px; flex:0 0 auto; background:var(--tenue); }
.sueno-veredicto.ok { background:var(--marca-suave); color:var(--marca-texto); }
.sueno-veredicto.ok i { background:var(--marca); }
.sueno-veredicto.medio { background:var(--ambar-suave); color:var(--ambar); }
.sueno-veredicto.medio i { background:var(--ambar); }
.sueno-veredicto.mal { background:var(--rojo-suave); color:var(--rojo); }
.sueno-veredicto.mal i { background:var(--rojo); }

.sueno-fases {
  display:flex; height:9px; border-radius:99px; overflow:hidden; gap:1px;
  background:var(--superficie-2); margin-top:14px;
}
.sueno-leyenda { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin-top:10px; font-size:11.5px; }
.sueno-leyenda span { display:flex; align-items:center; gap:5px; color:var(--apagado); }
.sueno-leyenda i { width:7px; height:7px; border-radius:2px; flex:0 0 auto; }
.sueno-leyenda b { margin-left:auto; color:var(--texto); font-variant-numeric:tabular-nums; }

.teja-partida { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; }

.medidor-caja { width:150px; flex:0 0 auto; }
.medidor-rotulos {
  display:flex; justify-content:space-between; font-size:9px; color:var(--tenue);
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px;
}
.medidor-bloques { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; height:10px; }
.medidor-bloques .bl { border-radius:3px; background:var(--superficie-3); }
.medidor-bloques .bl.lleno.z0 { background:var(--marca); }
.medidor-bloques .bl.lleno.z1 { background:var(--marca-fuerte); }
.medidor-bloques .bl.lleno.z2 { background:var(--ambar); }
.medidor-bloques .bl.lleno.z3 { background:#C4483B; }
.medidor-bloques .bl.lleno.z4 { background:var(--rojo); }
.medidor-pie {
  text-align:right; font-size:11px; color:var(--apagado); margin-top:4px;
  font-variant-numeric:tabular-nums;
}

.teja-tira {
  display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px;
  background:var(--superficie-2); border-radius:var(--r-s); padding:9px 12px;
  font-size:12px; color:var(--apagado);
}

.cruce-filas { display:flex; flex-direction:column; }
.cruce-fila {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:12px 0;
  border-top:1px solid var(--borde);
}
.cruce-fila:first-child { border-top:none; }
.cruce-etiqueta { font-size:13.5px; font-weight:600; flex:0 0 auto; min-width:140px; }
.cruce-valores { font-size:13px; color:var(--apagado); font-variant-numeric:tabular-nums; flex:1; min-width:200px; }
.cruce-valores b { color:var(--texto); font-weight:600; }
.cruce-vs { margin:0 6px; color:var(--tenue); font-size:11px; text-transform:uppercase; }

.detalle-cab { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.detalle-titulo { font-size:19px; font-weight:600; letter-spacing:-.01em; margin:8px 0 0; }
.detalle-subt {
  font-size:12px; font-weight:700; color:var(--apagado); text-transform:uppercase;
  letter-spacing:.05em; margin:20px 0 0;
}

.detalle-figuras { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.detalle-figuras > div {
  background:var(--superficie-2); border-radius:var(--r-s); padding:9px 11px;
  display:flex; flex-direction:column; gap:2px;
}
.detalle-figuras span { font-size:10px; color:var(--tenue); text-transform:uppercase; letter-spacing:.03em; }
.detalle-figuras b { font-size:15.5px; font-variant-numeric:tabular-nums; }
.detalle-figuras > div.fuerte b { color:var(--marca-texto); }
@media (max-width:480px) { .detalle-figuras { grid-template-columns:1fr 1fr; } }

.detalle-caja {
  margin-top:16px; background:var(--superficie-2); border-radius:var(--r-hero); padding:14px 16px;
}
.detalle-caja-cab {
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--apagado);
}
.detalle-caja-extra { font-weight:500; text-transform:none; letter-spacing:0; color:var(--tenue); font-size:12px; }
.detalle-caja .perfil:first-of-type { margin-top:0; }

.zonas { display:flex; flex-direction:column; gap:7px; }
.zona-fila { display:flex; align-items:center; gap:10px; font-size:12px; }
.zona-nombre { flex:0 0 108px; font-weight:600; font-variant-numeric:tabular-nums; }
.zona-barra { flex:1; height:9px; background:var(--superficie-3); border-radius:99px; overflow:hidden; }
.zona-barra > div { height:100%; border-radius:99px; }
.zona-tiempo { flex:0 0 52px; text-align:right; font-variant-numeric:tabular-nums; color:var(--texto); }
.zona-nombre.z0, .zona-barra .z0 { color:var(--marca); }
.zona-barra .z0 { background:var(--marca); }
.zona-nombre.z1, .zona-barra .z1 { color:var(--marca-fuerte); }
.zona-barra .z1 { background:var(--marca-fuerte); }
.zona-nombre.z2, .zona-barra .z2 { color:var(--ambar); }
.zona-barra .z2 { background:var(--ambar); }
.zona-nombre.z3, .zona-barra .z3 { color:#C4483B; }
.zona-barra .z3 { background:#C4483B; }
.zona-nombre.z4, .zona-barra .z4 { color:var(--rojo); }
.zona-barra .z4 { background:var(--rojo); }
.ruta-caja {
  position:relative; margin-top:16px; background:var(--superficie-3); border-radius:var(--r-s);
  overflow:hidden; aspect-ratio:16/10; min-height:220px;
}
.ruta-cargando {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--tenue); font-size:13px;
}
.ruta-caja.sin-mapa::after {
  content:'No se ha podido cargar el mapa'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:var(--tenue); font-size:13px;
}

/* El mapa hereda la esquina redondeada del hueco que lo contiene, y sus
   controles (zoom, atribución) se rebajan para que no compitan con el resto
   de la interfaz, que no usa esquinas cuadradas ni sombras duras. */
.ruta-caja .leaflet-container { width:100%; height:100%; background:var(--superficie-3); font:inherit; }
.ruta-caja .leaflet-control-zoom { border:none; box-shadow:var(--sombra); }
.ruta-caja .leaflet-control-zoom a {
  background:var(--superficie); color:var(--texto); border-color:var(--borde) !important;
}
.ruta-caja .leaflet-control-attribution {
  background:rgba(0,0,0,.45); color:#fff; font-size:10px; padding:1px 6px; border-radius:6px 0 0 0;
}
.ruta-caja .leaflet-control-attribution a { color:#fff; }

.ruta-leyenda {
  display:flex; align-items:center; gap:8px; margin-top:8px;
  font-size:11px; color:var(--tenue);
}
.ruta-leyenda-barra {
  flex:1; height:5px; border-radius:99px;
  background:linear-gradient(90deg, #3B82C4, #4E9B6E, #D9A62E, #C4483B);
}

.perfil { margin-top:14px; }
.perfil-cab { display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; }
.perfil-titulo { font-weight:700; color:var(--apagado); text-transform:uppercase;
  font-size:11px; letter-spacing:.05em; }
.perfil-rango { color:var(--tenue); font-variant-numeric:tabular-nums; }
.perfil .chispa { width:100%; height:56px; margin-top:4px; }

/* -------------------------------------------------------- tarjetas de actividad */
.act-cards { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.act-card {
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-s);
  padding:14px 16px; cursor:pointer; transition:border-color .15s ease, transform .15s ease;
  display:flex; flex-direction:column; gap:10px;
}
.act-card:hover, .act-card:focus-visible {
  border-color:var(--marca); transform:translateY(-2px); outline:none;
}
.act-card-cab { display:flex; align-items:center; gap:8px; }
.act-card-ico {
  width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:var(--marca-suave);
  color:var(--marca-texto); display:flex; align-items:center; justify-content:center;
}
.act-card-ico .ico-svg { width:16px; height:16px; }
.act-card-fecha { font-size:11.5px; color:var(--tenue); flex:1; }
.act-card-flecha { color:var(--tenue); opacity:0; transition:opacity .15s ease; }
.act-card:hover .act-card-flecha { opacity:1; color:var(--marca); }
.act-card-titulo { font-size:14.5px; font-weight:600; margin:0; line-height:1.3; }
.act-card-cifras { display:flex; gap:10px; }
.act-card-cifras > div {
  flex:1; min-width:0; background:var(--superficie-2); border-radius:8px; padding:7px 9px;
}
.act-card-cifras span {
  display:block; font-size:10px; color:var(--tenue); text-transform:uppercase; letter-spacing:.04em;
}
.act-card-cifras b { font-size:14px; font-variant-numeric:tabular-nums; }
.act-card-pie {
  display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--apagado);
  font-variant-numeric:tabular-nums; padding-top:2px; border-top:1px dashed var(--borde);
}
.act-card-pie:empty { display:none; }

/* ==========================================================================
   PANTALLAS APRETADAS EN EL MÓVIL (Comer y Progreso)
   Las dos se miran a diario y las dos se bajaban mucho para leerlas enteras:
   Comer porque los 3 macros se apilaban en vez de ir en fila, Progreso
   porque cada tarjeta llevaba el mismo hueco de escritorio (16px) multiplicado
   por seis tarjetas seguidas. Va aparte y solo en móvil para no tocar nada
   del escritorio. La clase .pantalla-<ruta> la pone app.js al cambiar de
   ruta — no hace falta marcar cada plantilla a mano.
   ========================================================================== */
@media (max-width:640px) {
  /* --- Comer: la cabecera (plan · título · "te quedan X kcal" · botones)
     era casi tan alta como la pantalla entera: al entrar no se veía ni un
     trozo del gráfico de calorías sin bajar. Apretada a lo esencial —
     migas fuera (ya sale el objetivo dentro del propio gráfico un poco
     más abajo), título más pequeño, la frase de "te quedan" en una sola
     línea aunque se corte. */
  .pantalla-comer .comer-migas { display:none; }
  .pantalla-comer .comer-cabecera > div:first-child { min-width:0; } /* que el hijo pueda cortarse */
  .pantalla-comer .comer-titulo-fila { margin-top:0; gap:8px; }
  .pantalla-comer .comer-h1 { font-size:19px; }
  .pantalla-comer .chip-vivo { font-size:10.5px; padding:3px 9px; }
  .pantalla-comer .comer-sub {
    margin-top:3px; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pantalla-comer .comer-acciones { margin-top:8px; gap:7px; }
  .pantalla-comer .comer-acciones .btn { padding:7px 12px; font-size:13px; }

  /* --- Comer: Joel — "las proteinas hidratos y grasa a lo mejor en modo
     columna a la derecha de las calorias totales, optimizar espacios".
     El anillo de siempre + los tres macros en una columna estrecha a su
     lado (.comer-mini, con el HTML ya preparado en nutricion.js) en vez
     de la tarjeta de calorías grande y las tres tarjetas de macro enteras
     apiladas debajo — eso se queda para el escritorio, que ahí sí sobra
     ancho. En el móvil se ven las dos cosas a la vez, sin bajar. */
  .pantalla-comer .comer-mini {
    display:flex; align-items:center; gap:16px;
    background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-hero);
    box-shadow:var(--sombra); padding:14px 18px; margin-top:12px;
  }
  .pantalla-comer .comer-mini .kcal-anillo svg { width:102px; height:102px; }
  .pantalla-comer .comer-mini .ka-dentro b { font-size:22px; }
  .pantalla-comer .comer-mini .ka-dentro span { font-size:9.5px; max-width:76px; }
  .pantalla-comer .cm-macros { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
  /* Cada macro en su propia banda tintada de su color: así se distinguen
     de un vistazo sin tener que leer el rótulo. */
  .pantalla-comer .cm-macro { padding:7px 9px; border-radius:9px; }
  .pantalla-comer .cm-macro.prot { background:var(--marca-suave); }
  .pantalla-comer .cm-macro.carb { background:var(--azul-suave); }
  .pantalla-comer .cm-macro.gras { background:var(--ambar-suave); }
  .pantalla-comer .cm-macro-fila {
    display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12.5px;
  }
  .pantalla-comer .cm-macro-etq { font-weight:650; }
  .pantalla-comer .cm-macro-etq.prot { color:var(--marca-texto); }
  .pantalla-comer .cm-macro-etq.carb { color:var(--azul); }
  .pantalla-comer .cm-macro-etq.gras { color:var(--ambar); }
  .pantalla-comer .cm-macro-cifra { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; }
  .pantalla-comer .cm-macro-cifra small { color:var(--tenue); font-weight:400; }
  .pantalla-comer .cm-macro-barra {
    position:relative; height:7px; border-radius:99px; margin-top:5px;
    background:color-mix(in srgb, var(--texto) 8%, transparent);
  }
  .pantalla-comer .cm-macro-barra i {
    display:block; height:100%; border-radius:99px; max-width:100%;
    animation:barra-crece 1s var(--curva) both;
  }
  .pantalla-comer .cm-macro-barra.prot i {
    background:linear-gradient(90deg, color-mix(in srgb, var(--marca) 55%, transparent), var(--marca));
  }
  .pantalla-comer .cm-macro-barra.carb i {
    background:linear-gradient(90deg, color-mix(in srgb, var(--azul) 55%, transparent), var(--azul));
  }
  .pantalla-comer .cm-macro-barra.gras i {
    background:linear-gradient(90deg, color-mix(in srgb, var(--ambar) 55%, transparent), var(--ambar));
  }

  /* La tarjeta grande de calorías y las tres tarjetas de macro (ya
     contadas en .comer-mini de arriba) se quitan de en medio; la fibra y
     el gasto real se quedan, que es información distinta, no repetida. */
  .pantalla-comer .comer-top { margin-top:10px; gap:10px; }
  .pantalla-comer .hero-kcal { display:none; }
  .pantalla-comer .macros-zona { grid-template-columns:1fr; gap:8px; }
  .pantalla-comer .macros-zona > .macro-card { display:none; }
  /* A dos columnas no cabía: "Gasto real del día" se partía palabra a
     palabra y la pastilla de "conéctalo en Constantes" se salía de la
     tarjeta. Apiladas a todo el ancho, que es como está pensada .ancha. */
  .pantalla-comer .anchas { grid-template-columns:1fr; gap:8px; }

  /* --- Progreso: mismo hueco de escritorio (16px) entre seis tarjetas
     seguidas, sin tocar el JS — se comprime aquí por el propio inline
     style que ya escribe cada tarjeta. */
  .pantalla-progreso [style*="margin-top:16px"] { margin-top:9px !important; }
  .pantalla-progreso .hero { padding:18px 16px; }
  .pantalla-progreso .hero-linea { margin:14px -16px 0; }
  .pantalla-progreso .hero-pie { padding-top:12px; gap:10px; }
  .pantalla-progreso .tarjeta-pad { padding:13px 15px; }

  /* --- Constantes: Joel — "lo veo todo como una lista interminable".
     Cierto: cada tarjeta de Garmin es rica de verdad (cabecera, cifra
     grande, barra, y a veces un mini-gráfico de 7 días encima) y en el
     móvil van todas apiladas en una sola columna, una detrás de otra.
     Meterlas de dos en dos no es seguro sin verlo en un móvil real (cada
     una trae su propio grosor y algunas ya se parten en dos por dentro:
     .teja-partida), así que la mejora segura es la otra mitad de la
     ecuación: que cada tarjeta ocupe MENOS alto. */
  .pantalla-constantes .rejilla { gap:10px; }
  .pantalla-constantes .teja-rica { padding:14px 15px; }
  .pantalla-constantes .teja-rica-cifra { margin:9px 0 3px; }
  .pantalla-constantes .teja-rica-cifra b { font-size:22px; }
  /* El desglose de 7 días de Pasos: el número grande y el % ya lo resumen;
     el mini-gráfico debajo era el bloque más alto y menos imprescindible
     de toda la pantalla. */
  .pantalla-constantes .mini-barras, .pantalla-constantes .teja-sub { display:none; }
  .pantalla-constantes [style*="margin-top:16px"] { margin-top:10px !important; }
  .pantalla-constantes [style*="margin-top:14px"] { margin-top:10px !important; }
}

/* ==========================================================================
   COLOR Y VIDA EN TODA LA WEB
   Lo pidió Joel el 13-sep-2026: «lo quiero en todas las pantallas, un nivel
   de detalle brutal, con más color y más vida».

   Dos reglas que me pongo yo para no repetir el error de la otra vez (el
   velo de color por toda la app le pareció poco serio y lo tiré):
   1. El color va DENTRO de las piezas — cabeceras, iconos, barras, bordes —
      nunca de fondo de pantalla. Una web de nutrición tiene que seguir
      pareciendo una web de nutrición.
   2. Esto va al FINAL del fichero a propósito. Todo lo de arriba sigue
      exactamente igual; aquí solo se añade encima. Si algo de esto molesta,
      se borra este bloque entero y la web vuelve a ser la de antes.

   Y todo se apaga de golpe con prefers-reduced-motion, abajo del todo.
   ========================================================================== */

/* --- El color de cada pantalla -------------------------------------------
   Un solo acento por pantalla, heredado desde #pantalla, del que tiran
   después las cabeceras, los iconos y las barras. No hay tonos nuevos: son
   los cuatro de la paleta de siempre repartidos por sentido — lo que tiene
   que ver con el calendario es azul, lo que tiene que ver con el dinero es
   verde, la comida ámbar, y lo demás el verde salvia de la marca. */
:root {
  --acc:var(--marca); --acc-2:var(--marca-clara); --acc-suave:var(--marca-suave);
  --paso:42ms;                  /* lo que espera cada fila detrás de la anterior */
}
.pantalla-agenda, .pantalla-reservar, .pantalla-plan,
.pantalla-progreso, .pantalla-constantes, .pantalla-recordatorios {
  --acc:var(--azul); --acc-2:#6f93cf; --acc-suave:var(--azul-suave);
}
.pantalla-cobros { --acc:var(--verde); --acc-2:#6aa588; --acc-suave:var(--verde-suave); }
.pantalla-comer  { --acc:var(--ambar); --acc-2:#c7844f; --acc-suave:var(--ambar-suave); }

/* --- El motor del escalonado ---------------------------------------------
   Que una lista entre de golpe es lo que hace que una web parezca muerta.
   Lo suyo sería numerar cada fila desde el JS, pero son 8.500 líneas
   repartidas en 13 ficheros y ni quiero tocarlos todos ni que el próximo
   que añada una lista tenga que acordarse de numerarla.

   Así que el número lo pone el CSS: cada elemento de la página recibe su
   posición entre hermanos en --i, y luego cada lista que quiera escalonarse
   solo tiene que multiplicar. A partir del doceavo ya no se espera más: si
   una tabla trae 200 clientes, el último no puede tardar 8 segundos. */
body :nth-child(1)  { --i:0; }  body :nth-child(2)  { --i:1; }
body :nth-child(3)  { --i:2; }  body :nth-child(4)  { --i:3; }
body :nth-child(5)  { --i:4; }  body :nth-child(6)  { --i:5; }
body :nth-child(7)  { --i:6; }  body :nth-child(8)  { --i:7; }
body :nth-child(9)  { --i:8; }  body :nth-child(10) { --i:9; }
body :nth-child(11) { --i:10; } body :nth-child(n+12) { --i:11; }

/* Las listas que escalonan. OJO con el relleno: `backwards` y NUNCA `both`.
   Con `both` el último fotograma (transform:none) se queda pegado para
   siempre, y una animación gana a una regla normal: el :hover de la fila
   dejaría de levantarla. Ya me pasó con las tejas del panel. */
:is(
  /* socio */
  .metas, .marcas, .semana-mia, .plan-dias, .dias-tira, .huecos-rejilla,
  .series, .series-grandes, .dias-plan, .tira-semana, .semana-comer,
  .ing-lista, .macros-zona, .anchas, .cm-macros, .hk-desglose, .frecuentes,
  .act-cards, .cruce-filas, .coach-chips, .zonas,
  /* entrenador */
  .movimientos, .semana, .dia-lista, .mosaico, .medios-rejilla, .fotos-tira,
  .copiar-lista, .semana-plan, .fichas-filtro, .tira-datos, .plan-macros,
  .dia-horario, .rutinas-carpeta,
  /* comunes */
  /* rol-opciones NO va aquí: sus botones ya tienen entra-fila forwards y
     meterlos en surgir backwards borra su forward-fill → quedan opacity:0 */
  .rejilla, .tabla tbody, .comparar-fotos
) > * {
  animation:surgir .44s var(--curva) backwards;
  animation-delay:calc(var(--i, 0) * var(--paso));
}
/* Dentro de una lista escalonada, lo que ya traía su propia entrada manda:
   si no, la animación de fuera le pisa el retardo a la de dentro. */
:is(.rejilla, .tabla tbody) > [class*="entra"] { animation-name:entrar; }

/* Y las pantallas que nunca tuvieron entrada (agenda, clientes, ficha,
   rutinas, cobros, ejercicios, perfil…): sus bloques suben escalonados
   igual que los del panel. Se deja fuera lo que ya lleva clase .entra,
   porque un selector con # gana siempre y le borraría su retardo. */
#pantalla > *:not([class*="entra"]) {
  animation:surgir .46s var(--curva) backwards;
  animation-delay:calc(var(--i, 0) * 60ms);
}

/* --- La cabecera de cada tarjeta, con su color ---------------------------
   Un galón de 4 px a la izquierda del título. Es el detalle que más se
   repite en toda la web (todas las tarjetas tienen cabecera), así que es
   el que más cambia la sensación general por menos sitio ocupado. */
.tarjeta-cab h3, .modal-cab h3 {
  position:relative; padding-left:13px;
}
.tarjeta-cab h3::before, .modal-cab h3::before {
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:4px; height:15px; border-radius:3px;
  background:linear-gradient(180deg, var(--acc), var(--acc-2));
}
/* El titulillo en versalitas de las secciones sueltas, del mismo color. */
.etq-mini { color:var(--acc); }

/* El título de la pantalla, con su raya de color debajo. */
.titular-pagina h1 { position:relative; }
.titular-pagina h1::after {
  content:""; position:absolute; left:0; bottom:-7px; height:3px; width:34px;
  border-radius:3px; background:linear-gradient(90deg, var(--acc), transparent);
  animation:raya-crece .6s var(--curva) backwards; animation-delay:.1s;
}
@keyframes raya-crece { from { width:0; opacity:0; } }

/* --- Las tarjetas se enteran de que las miras -----------------------------
   Sin levantarlas: una tarjeta que se mueve sola cuando pasas el ratón por
   encima para leerla cansa. Solo el borde se tiñe y la sombra crece. Las
   que SÍ se pinchan (.pinchable) esas sí suben, porque ahí el movimiento
   está diciendo algo: "esto se toca". */
.tarjeta, .quieta {
  transition:border-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva),
             transform var(--medio) var(--curva);
}
.tarjeta:hover, .quieta:hover { border-color:var(--marca-borde); box-shadow:var(--sombra-hero); }
.tarjeta.pinchable:hover, .quieta.pinchable:hover { transform:translateY(-3px); }
.tarjeta.pinchable:active, .quieta.pinchable:active { transform:translateY(0) scale(.99); }

/* El hero, con una línea de color de punta a punta arriba. Va como una capa
   más del fondo y no como ::before por lo mismo que ya explica el bloque de
   .hero: un pseudoelemento obligaría a poner z-index a todo lo de dentro. */
.hero {
  background:
    linear-gradient(90deg, var(--acc), var(--acc-2) 55%, transparent) top left/100% 3px no-repeat,
    radial-gradient(135% 105% at 6% -25%, var(--velo-marca), transparent 60%),
    radial-gradient(115% 100% at 104% 4%, var(--velo-azul), transparent 56%),
    var(--superficie);
}

/* --- Las tejas del panel, con más cuerpo --------------------------------- */
.teja { position:relative; overflow:hidden; }
/* Galón de color arriba, que se estira solo al entrar. */
.teja::before {
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--marca), transparent 85%);
  transform-origin:left; animation:estira-galon .7s var(--curva) backwards;
  animation-delay:calc(.25s + var(--i, 0) * 70ms);
}
.teja.verde::before { background:linear-gradient(90deg, var(--verde), transparent 85%); }
.teja.ambar::before { background:linear-gradient(90deg, var(--ambar), transparent 85%); }
.teja.rojo::before  { background:linear-gradient(90deg, var(--rojo),  transparent 85%); }
@keyframes estira-galon { from { transform:scaleX(0); } }
.teja-ico { transition:transform var(--medio) var(--curva); }
.teja:hover .teja-ico { transform:scale(1.12) rotate(-6deg); }
/* La cifra grande, con el mismo degradado del icono. Un número plano en
   negro sobre blanco es lo que hacía que el panel pareciera una hoja de
   cálculo. */
.teja.verde .teja-cifra { color:var(--verde); }
.teja.ambar .teja-cifra { color:var(--ambar); }
.teja.rojo  .teja-cifra { color:var(--rojo); }

/* --- Las barras de progreso, con degradado ------------------------------
   Todas las de la web de una vez: las del panel, las de macros, las del
   día de comer, las del lateral de constantes. */
.teja-barra i, .avance-barra i, .macro-card-barra i, .hkd-barra i,
.lado-barra i, .series-barra i, .cm-macro-barra i, .meta-barra i,
.teja-rica-barra-fina i {
  background-image:linear-gradient(90deg,
    color-mix(in srgb, currentColor 0%, transparent), rgba(255,255,255,.35));
  background-blend-mode:overlay;
}

/* --- El anillo, con un halo de su propio color -------------------------- */
.anillo-linea, .ka-linea, .aro-linea {
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--marca) 40%, transparent));
}

/* --- Botones ------------------------------------------------------------
   El brillo que cruza el botón principal ya estaba en la pantalla de
   entrada y quedaba bien; ahora lo lleva toda la web. Es un barrido, no un
   bucle: pasa una vez cuando pones el ratón encima y se acabó. */
.btn-p { position:relative; overflow:hidden; }
.btn-p::after {
  content:""; position:absolute; inset:0; translate:-120% 0; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent);
}
.btn-p:hover::after { translate:120% 0; transition:translate .6s var(--curva-suave); }
.btn-p:hover:not(:disabled) { box-shadow:0 4px 14px color-mix(in srgb, var(--acento) 22%, transparent); }
.btn-fantasma:hover, .btn-s:hover { border-color:var(--marca-borde); }

/* --- Las etiquetas de estado, con borde propio --------------------------
   Sin borde, sobre una tarjeta clara, la pastilla se difuminaba con el
   fondo y perdía la mitad de su fuerza. */
.eti { border:1px solid transparent; }
.eti-verde { border-color:color-mix(in srgb, var(--verde) 26%, transparent); }
.eti-ambar { border-color:color-mix(in srgb, var(--ambar) 26%, transparent); }
.eti-rojo  { border-color:color-mix(in srgb, var(--rojo)  26%, transparent); }
.eti-azul  { border-color:color-mix(in srgb, var(--azul)  26%, transparent); }
.eti-acento{ border-color:var(--marca-borde); }

/* --- El avatar, que deje de ser un círculo gris ------------------------- */
.avatar {
  background-image:linear-gradient(145deg,
    color-mix(in srgb, var(--marca) 26%, var(--superficie-2)), var(--superficie-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--marca) 22%, transparent);
  transition:transform var(--medio) var(--curva);
}
.persona:hover .avatar, tr.pinchable:hover .avatar { transform:scale(1.08); }

/* --- Las filas de una tabla ---------------------------------------------
   Al pasar por encima, un galón del color de la pantalla a la izquierda.
   Va con box-shadow por dentro y no con border-left porque un borde movería
   todo el contenido de la fila 3 px a la derecha al pasar el ratón. */
.tabla tbody tr.pinchable {
  transition:background var(--rapido), box-shadow var(--rapido);
}
.tabla tbody tr.pinchable:hover {
  background:var(--acc-suave);
  box-shadow:inset 3px 0 0 var(--acc);
}

/* --- Cuando no hay nada que enseñar --------------------------------------
   Una pantalla vacía es la primera que ve un cliente nuevo. Que el icono
   respire y tenga un halo de color detrás cuesta cuatro líneas y es la
   diferencia entre "esto está roto" y "esto está listo para empezar". */
.vacio .emo { position:relative; display:inline-grid; place-items:center;
  width:66px; height:66px; border-radius:50%;
  background:radial-gradient(circle, var(--acc-suave), transparent 70%);
  animation:flota 3.6s ease-in-out infinite;
}
@keyframes flota { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.vacio .emo .ico-svg { color:var(--acc); opacity:.9; }

/* --- Los chips de filtro ------------------------------------------------- */
.chip { transition:background var(--rapido), border-color var(--rapido),
                   color var(--rapido), transform var(--rapido) var(--curva); }
.chip:hover { transform:translateY(-1px); border-color:var(--marca-borde); }
.chip.on { box-shadow:0 3px 10px color-mix(in srgb, var(--acento) 26%, transparent); }

/* --- El menú lateral ----------------------------------------------------- */
.nav-item .ico { transition:transform var(--medio) var(--curva), color var(--rapido); }
.nav-item:hover .ico { transform:translateX(2px) scale(1.1); }
.nav-item.activo .ico { color:var(--marca); }

/* --- Pantalla del socio: los detalles que pidió --------------------------
   Es la que más mira él, así que aquí se afina de una en una. */

/* Los días de la semana: el que ya has entrenado se tiñe de verde y el de
   hoy lleva un aro que respira, para encontrarlo sin leer. */
.dia-mio, .dia-punto, .dia-comer, .plan-dia, .dia-tarjeta, .hueco-tarjeta {
  transition:transform var(--rapido) var(--curva), border-color var(--rapido),
             background var(--rapido), box-shadow var(--rapido);
}
.dia-mio:hover, .dia-comer:hover, .plan-dia:hover,
.dia-tarjeta:hover, .hueco-tarjeta:not(.lleno):hover { transform:translateY(-2px); }
.dia-mio.hecho { background:var(--verde-suave); border-color:color-mix(in srgb, var(--verde) 30%, transparent); }
.dia-mio.es-hoy, .dia-comer.es-hoy, .dia-punto.hoy {
  box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 45%, transparent);
}

/* La tarjeta de la próxima sesión: el color del grupo muscular que toca ya
   venía en --zona; aquí solo se hace visible con un galón arriba. */
.proxima { position:relative; overflow:hidden; }
.proxima::before {
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg, var(--zona, var(--marca)), transparent 80%);
  transform-origin:left; animation:estira-galon .8s var(--curva) .2s backwards;
}

/* Una serie apuntada: se pone verde y da un respingo. El respingo ya lo
   hacía .recien desde el JS; lo que faltaba era el color. */
.serie.hecha, .serie-grande.hecha {
  background:color-mix(in srgb, var(--verde-suave) 70%, transparent);
}
.serie.hecha .sn, .serie-grande.hecha .serie-n { color:var(--verde); }

/* El ejercicio que despliegas. */
.ejer-cab { transition:background var(--rapido), box-shadow var(--rapido); }
.ejer-cab.pinchable:hover { box-shadow:inset 3px 0 0 var(--acc); }

/* Las tarjetas ricas de Constantes y las de actividades: mismo trato que
   las tejas del panel, que son hermanas. */
.teja-rica, .act-card, .macro-card {
  transition:transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva),
             border-color var(--medio) var(--curva);
}
.teja-rica:hover, .act-card:hover, .macro-card:hover {
  transform:translateY(-2px); box-shadow:var(--sombra-hero); border-color:var(--marca-borde);
}
.teja-rica-ico, .act-card-ico { transition:transform var(--medio) var(--curva); }
.teja-rica:hover .teja-rica-ico, .act-card:hover .act-card-ico { transform:scale(1.12) rotate(-6deg); }

/* Las tres tarjetas de macros, cada una con su color. Proteína, hidratos y
   grasa son tres cosas distintas y hasta ahora eran tres cajas iguales. */
.macro-card { border-top:3px solid var(--borde); }
.macros-zona > .macro-card:nth-child(1) { border-top-color:var(--marca); }
.macros-zona > .macro-card:nth-child(2) { border-top-color:var(--azul); }
.macros-zona > .macro-card:nth-child(3) { border-top-color:var(--ambar); }

/* --- Los avisos flotantes, que entren rodando de lado ------------------- */
.aviso-flotante { animation:entra-aviso .34s var(--curva) backwards; }
@keyframes entra-aviso { from { opacity:0; transform:translateY(10px) scale(.96); } }

/* --- La rejilla de ejercicios y de medios -------------------------------- */
.ficha-ejercicio, .tarjeta-ejercicio, .medio-tarjeta, .rutina-tarjeta {
  transition:transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva),
             border-color var(--medio) var(--curva);
}
.ficha-ejercicio:hover, .tarjeta-ejercicio:hover,
.medio-tarjeta:hover, .rutina-tarjeta:hover {
  transform:translateY(-3px); box-shadow:var(--sombra-hero); border-color:var(--marca-borde);
}

/* ==========================================================================
   PALETA VIVA — animaciones, gradientes, brillos y la tarjeta de constantes.
   Joel: "más colores, animaciones vivas, que la página Hoy no sea solo qué
   toca sino un resumen de ti". Todo ENCIMA de lo que hay: la estructura no
   se toca.
   ========================================================================== */

/* --- 1. Hero con gradiente intenso y shimmer ----------------------------- */
.hero {
  background:
    var(--gradiente-hero),
    var(--superficie);
  color:#fff;
  position:relative; overflow:hidden;
}
.hero .saludo, .hero .hero-pauta { color:rgba(255,255,255,.78); }
.hero .encima { color:rgba(255,255,255,.6); }
.hero .encima-marca { color:rgba(255,255,255,.85); }
.hero h2 { color:#fff; }
.hero .cifra-txt .n { color:#fff; }
.hero .cifra-txt .q { color:rgba(255,255,255,.7); }
.hero .hero-sep { background:rgba(255,255,255,.18); }
.hero .hero-linea { background:rgba(255,255,255,.15); }
.hero .chapa-viva {
  background:rgba(255,255,255,.18); color:#fff;
}
.hero .punto-vivo { background:#fff; }
.hero .anillo-fondo { stroke:rgba(255,255,255,.2); }
.hero .anillo-linea { stroke:#fff; }
.hero .dentro { color:#fff; }

/* El shimmer: un brillo que cruza la tarjeta al cargarla. Sutil, una vez. */
.hero::after {
  content:""; position:absolute; inset:0; translate:-100% 0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%,
                                     rgba(255,255,255,.14) 52%, transparent 60%);
  animation:shimmer-hero 2.2s var(--curva) .6s forwards; pointer-events:none;
}
@keyframes shimmer-hero { to { translate:200% 0; } }

/* --- 2. Botón "Empezar" con gradiente vivo ------------------------------- */
.hero .btn-p {
  background:var(--gradiente-acento); border-color:transparent; color:#fff;
  position:relative; overflow:hidden;
  box-shadow:var(--sombra-color);
  transition:transform var(--rapido) var(--curva), box-shadow var(--rapido);
}
.hero .btn-p:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(55,146,99,.35);
}
.hero .btn-p::after {
  content:""; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
}
.hero .btn-p:hover::after { translate:120% 0; transition:translate .55s var(--curva-suave); }

/* --- 3. Chapita "Hoy a las X" con halo ---------------------------------- */
.chapa-viva {
  position:relative;
}
.chapa-viva::before {
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  background:var(--marca-suave); filter:blur(6px); opacity:.6; z-index:-1;
}

/* --- 4. Días entrenados con gradiente ------------------------------------ */
.dia-punto.hecho i {
  background:var(--gradiente-acento); border-color:transparent;
}
.dia-mio.hecho {
  background:var(--gradiente-acento); border-color:transparent;
}

/* --- 5. Día de hoy con ring animado (glow pulse) ------------------------ */
.dia-punto.hoy i {
  box-shadow:0 0 0 2px var(--fondo), 0 0 0 3.5px var(--brillo-marca),
             0 0 12px rgba(71,184,122,.3);
  animation:glow-hoy 2.4s ease-in-out infinite;
}
@keyframes glow-hoy {
  0%,100% { box-shadow:0 0 0 2px var(--fondo), 0 0 0 3.5px var(--brillo-marca),
                       0 0 12px rgba(71,184,122,.25); }
  50%     { box-shadow:0 0 0 2px var(--fondo), 0 0 0 4px var(--brillo-marca),
                       0 0 20px rgba(71,184,122,.45); }
}

/* --- 6. Anillo de progreso — ya tiene gradiente SVG inline -------------- */

/* --- 7. Barra de avance de la sesión con gradiente animado -------------- */
.avance-barra i {
  background:linear-gradient(90deg, var(--marca), var(--brillo-marca), var(--marca));
  background-size:200% 100%;
  animation:barra-brilla 3s ease-in-out infinite;
}
@keyframes barra-brilla {
  0%,100% { background-position:0% 0; }
  50%     { background-position:100% 0; }
}

/* --- 8. Números que llegan con color de acento al final ----------------- */
[data-contar].contado { color:var(--brillo-marca); transition:color .4s var(--curva); }
.hero [data-contar].contado { color:#fff; }

/* --- 9. Tarjeta de constantes vitales (NUEVA) --------------------------- */
.constantes {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--borde); border:1px solid var(--borde); border-radius:var(--r);
  overflow:hidden; margin-top:16px;
}
.const-item {
  background:var(--superficie); padding:16px 14px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
}
.const-ico {
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
}
.const-ico .ico-svg { width:20px; height:20px; }
.const-ico.pulso { background:var(--pulso-suave); color:var(--pulso); }
.const-ico.estres { background:var(--ambar-suave); color:var(--ambar); }
.const-ico.sueno { background:var(--azul-suave); color:var(--azul); }
.const-ico.bateria { background:var(--marca-suave); color:var(--marca); }
.const-val {
  font-size:22px; font-weight:700; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.const-val small { font-size:12px; font-weight:600; color:var(--apagado); }
.const-etq {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tenue);
}
/* Mini barra de estrés: verde/ámbar/rojo según nivel. */
.const-barra {
  width:100%; max-width:56px; height:4px; border-radius:99px;
  background:var(--superficie-3); overflow:hidden;
}
.const-barra i {
  display:block; height:100%; border-radius:inherit;
  transition:width .8s var(--curva);
}
.const-barra i.bajo { background:var(--verde); }
.const-barra i.medio { background:var(--ambar); }
.const-barra i.alto { background:var(--rojo); }
/* Mini anillo de Body Battery. */
.const-anillo { position:relative; display:grid; place-items:center; }
.const-anillo .dentro {
  position:absolute; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
/* Texto de invitación cuando no hay datos. */
.const-invitar {
  grid-column:1 / -1; padding:18px; text-align:center;
  color:var(--apagado); font-size:13.5px;
}
.const-invitar b { color:var(--texto); display:block; margin-top:4px; }
@media (max-width:560px) {
  .constantes { grid-template-columns:repeat(2,1fr); }
}

/* --- 10. Corazón que late ------------------------------------------------ */
@keyframes latir {
  0%,100% { transform:scale(1); }
  14%     { transform:scale(1.3); }
  28%     { transform:scale(1); }
  42%     { transform:scale(1.18); }
}
.corazon-late {
  display:inline-block; transform-origin:center;
  animation:latir 1s ease-in-out infinite;
}
/* La velocidad del corazón se controla con --bpm en el style del elemento.
   60 bpm = 1s, 80 bpm = 0.75s, 100 bpm = 0.6s */
.corazon-late { animation-duration:var(--latido, 1s); }

/* --- 11. Pantalla de acceso: hover más vivo en las opciones -------------- */
.rol-opcion:hover {
  background:linear-gradient(135deg, var(--marca-suave) 0%, var(--superficie) 100%);
}
.rol-opcion:nth-child(2):hover {
  background:linear-gradient(135deg, var(--azul-suave) 0%, var(--superficie) 100%);
}
/* Shimmer en el botón "Entrar" del acceso. */
.acceso .btn-p {
  background:var(--gradiente-acento); border-color:transparent;
  box-shadow:var(--sombra-color);
}

/* --- 12. Tejas del admin con gradiente sutil ----------------------------- */
.teja.verde {
  background:linear-gradient(145deg, var(--verde-suave), var(--superficie));
  border-color:color-mix(in srgb, var(--verde) 22%, var(--borde));
}
.teja.ambar {
  background:linear-gradient(145deg, var(--ambar-suave), var(--superficie));
  border-color:color-mix(in srgb, var(--ambar) 22%, var(--borde));
}
.teja.rojo {
  background:linear-gradient(145deg, var(--rojo-suave), var(--superficie));
  border-color:color-mix(in srgb, var(--rojo) 22%, var(--borde));
}

/* --- 13. Sesiones del panel con franja lateral de color ------------------- */
.sesion-franja {
  border-left:3.5px solid var(--marca); padding-left:14px !important;
}
.sesion-franja.llena { border-left-color:var(--rojo); }

/* --- 14. Avisos del panel con glow --------------------------------------- */
.aviso-ico.rojo  { box-shadow:0 0 12px var(--rojo-suave); }
.aviso-ico.ambar { box-shadow:0 0 12px var(--ambar-suave); }
.aviso-ico.azul  { box-shadow:0 0 12px var(--azul-suave); }
.aviso-ico.marca { box-shadow:0 0 12px var(--marca-suave); }
.aviso-ico { width:34px; height:34px; flex:0 0 34px; }
.aviso-ico .ico-svg { width:19px; height:19px; }

/* --- Y se apaga todo -----------------------------------------------------
   Quien tenga puesto "reducir movimiento" en su móvil ve exactamente la
   misma web, con los mismos colores, pero quieta. El color no es una
   animación: eso se queda. */
@media (prefers-reduced-motion:reduce) {
  #pantalla > *, .vacio .emo, .teja::before, .proxima::before,
  .titular-pagina h1::after, .aviso-flotante,
  :is(.metas, .marcas, .semana-mia, .plan-dias, .dias-tira, .huecos-rejilla,
      .series, .series-grandes, .dias-plan, .tira-semana, .semana-comer,
      .ing-lista, .macros-zona, .anchas, .cm-macros, .hk-desglose, .frecuentes,
      .act-cards, .cruce-filas, .coach-chips, .zonas, .movimientos, .semana,
      .dia-lista, .mosaico, .medios-rejilla, .fotos-tira, .copiar-lista,
      .semana-plan, .fichas-filtro, .tira-datos, .plan-macros, .dia-horario,
      .rutinas-carpeta, .rejilla, .tabla tbody, .comparar-fotos) > * {
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .tarjeta, .quieta, .teja-rica, .act-card, .macro-card, .chip,
  .ficha-ejercicio, .tarjeta-ejercicio, .medio-tarjeta, .rutina-tarjeta,
  .dia-mio, .dia-punto, .dia-comer, .plan-dia, .dia-tarjeta, .hueco-tarjeta,
  .avatar, .teja-ico, .teja-rica-ico, .act-card-ico, .nav-item .ico {
    transition:none !important; transform:none !important;
  }
  .btn-p::after { display:none; }
  /* Las animaciones nuevas de la paleta viva. */
  .hero::after, .corazon-late, .dia-punto.hoy i,
  .avance-barra i, .chapa-viva::before { animation:none !important; }
  .corazon-late { transform:none !important; }
  .dia-punto.hoy i { box-shadow:0 0 0 2px var(--fondo), 0 0 0 3.5px var(--borde-fuerte) !important; }
}


/* ==========================================================================
   CAPA APPLE (26-sep) — color estilo iOS / macOS, en un solo bloque.
   Joel: "le falta color... sutil y chulo, estilo iOS y macOS". Todo lo de
   aquí es AÑADIDO al final: no reescribe nada de arriba, así que quitar este
   bloque entero devuelve la web a como estaba.
   Qué hay: (1) los colores de sistema de Apple, (2) papel con un velo de
   color fijo detrás, (3) cristal esmerilado en cabecera y menú, (4) el menú
   con iconos en cuadradito de color como Ajustes de iOS, (5) tarjetas con
   tinte del color de su pantalla, (6) foco azul de iOS en los campos.
   ========================================================================== */
:root {
  --ios-azul:#007AFF;    --ios-verde:#34C759;   --ios-naranja:#FF9500;
  --ios-rosa:#FF2D55;    --ios-morado:#AF52DE;  --ios-turquesa:#32ADE6;
  --ios-indigo:#5856D6;  --ios-amarillo:#FFCC00; --ios-gris:#8E8E93;
  --ios-menta:#00C7BE;
  /* La parte alta del degradado de cada cuadradito: el color, subido de luz. */
  --ios-azul-2:#4DA3FF;   --ios-verde-2:#6EE08A;  --ios-naranja-2:#FFB84D;
  --ios-rosa-2:#FF6482;   --ios-morado-2:#CE86F2; --ios-turquesa-2:#7DD3F5;
  --ios-indigo-2:#8B8AEA; --ios-gris-2:#B4B4BA;   --ios-menta-2:#5EE0D9;
  --cristal:color-mix(in srgb, var(--superficie) 72%, transparent);
  --cristal-borde:color-mix(in srgb, var(--texto) 9%, transparent);
  --foco-ios:rgba(0,122,255,.22);
  --papel-a:rgba(0,122,255,.075); --papel-b:rgba(175,82,222,.06);
  --papel-c:rgba(52,199,89,.055);
  --tinte:11%; --hero-luz:68%; --hero-medio:100%;   /* cuánto del color de la pantalla se cuela en la tarjeta */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ios-azul:#0A84FF;   --ios-verde:#30D158;  --ios-naranja:#FF9F0A;
    --ios-rosa:#FF375F;   --ios-morado:#BF5AF2; --ios-turquesa:#64D2FF;
    --ios-indigo:#5E5CE6; --ios-amarillo:#FFD60A; --ios-gris:#98989D;
    --ios-menta:#63E6E2;
    --cristal:color-mix(in srgb, var(--superficie) 66%, transparent);
    --cristal-borde:color-mix(in srgb, #fff 9%, transparent);
    --foco-ios:rgba(10,132,255,.35);
    --papel-a:rgba(10,132,255,.13); --papel-b:rgba(191,90,242,.10);
    --papel-c:rgba(48,209,88,.08);
    --tinte:14%; --hero-luz:46%; --hero-medio:74%;
  }
}
:root[data-tema="oscuro"] {
  --ios-azul:#0A84FF;   --ios-verde:#30D158;  --ios-naranja:#FF9F0A;
  --ios-rosa:#FF375F;   --ios-morado:#BF5AF2; --ios-turquesa:#64D2FF;
  --ios-indigo:#5E5CE6; --ios-amarillo:#FFD60A; --ios-gris:#98989D;
  --ios-menta:#63E6E2;
  --cristal:color-mix(in srgb, var(--superficie) 66%, transparent);
  --cristal-borde:color-mix(in srgb, #fff 9%, transparent);
  --foco-ios:rgba(10,132,255,.35);
  --papel-a:rgba(10,132,255,.13); --papel-b:rgba(191,90,242,.10);
  --papel-c:rgba(48,209,88,.08);
  --tinte:14%; --hero-luz:46%; --hero-medio:74%;
}

/* Respaldo: en producción no existían estas variables. */
:root { --acc:var(--marca); --acc-2:var(--marca); --acc-suave:var(--marca-suave); }
/* --- (1) Cada pantalla con su color de sistema ---------------------------
   Sustituye al azul/verde/ámbar de antes: de aquí tiran cabeceras, iconos y
   barras de cada pantalla (ver "El color de cada pantalla" más arriba). */
.pantalla-hoy, .pantalla-panel   { --acc:var(--ios-verde);   --acc-2:var(--ios-verde-2);   --acc-suave:color-mix(in srgb, var(--ios-verde) 14%, transparent); }
.pantalla-plan, .pantalla-rutinas { --acc:var(--ios-indigo);  --acc-2:var(--ios-indigo-2);  --acc-suave:color-mix(in srgb, var(--ios-indigo) 14%, transparent); }
.pantalla-reservar, .pantalla-agenda { --acc:var(--ios-azul);   --acc-2:var(--ios-azul-2);    --acc-suave:color-mix(in srgb, var(--ios-azul) 14%, transparent); }
.pantalla-progreso               { --acc:var(--ios-morado);  --acc-2:var(--ios-morado-2);   --acc-suave:color-mix(in srgb, var(--ios-morado) 14%, transparent); }
.pantalla-comer, .pantalla-clientes { --acc:var(--ios-naranja); --acc-2:var(--ios-naranja-2); --acc-suave:color-mix(in srgb, var(--ios-naranja) 15%, transparent); }
.pantalla-cobros                 { --acc:var(--ios-verde);   --acc-2:var(--ios-verde-2);    --acc-suave:color-mix(in srgb, var(--ios-verde) 14%, transparent); }
.pantalla-ejercicios             { --acc:var(--ios-turquesa);--acc-2:var(--ios-turquesa-2); --acc-suave:color-mix(in srgb, var(--ios-turquesa) 15%, transparent); }
.pantalla-perfil                 { --acc:var(--ios-gris);    --acc-2:var(--ios-gris-2);     --acc-suave:color-mix(in srgb, var(--ios-gris) 16%, transparent); }

/* --- (2) El papel, con un velo de color fijo detrás ----------------------
   Tres manchas enormes y muy lavadas (azul, morado, verde) que NO se mueven
   con el scroll, como el fondo de pantalla que se cuela por el cristal en
   iOS. Con el contenido siempre encima y tan bajito que ningún dato compite
   con él. (La nota de más arriba, la del colorete que no gustó, era una
   mancha por detrás de todo Y que se movía; esto ni se mueve ni tapa.) */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vmax 46vmax at 4% -6%,  var(--papel-a), transparent 70%),
    radial-gradient(52vmax 42vmax at 104% 8%, var(--papel-b), transparent 70%),
    radial-gradient(60vmax 50vmax at 60% 112%, var(--papel-c), transparent 70%);
}
body:has(.pantalla-constantes)::before { opacity:0; }
html { background:var(--fondo); }
body { background:transparent; position:relative; z-index:0; }

/* --- (3) Cristal esmerilado: cabecera y menú ------------------------------ */
.cabecera-web {
  background:var(--cristal);
  backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:var(--cristal-borde);
}
.lateral {
  background:var(--cristal);
  backdrop-filter:saturate(180%) blur(26px); -webkit-backdrop-filter:saturate(180%) blur(26px);
}
.menu-abierto .lateral { border-right-color:var(--cristal-borde); }
.cab-avatar {
  background:linear-gradient(145deg, var(--ios-azul-2), var(--ios-indigo));
  color:#fff; border:none; box-shadow:0 2px 8px rgba(88,86,214,.32);
}

/* --- (4) El menú, como Ajustes de iOS: cuadradito de color por pestaña ---- */
.nav-item:not([data-cat]) .ico {
  width:30px; height:30px; flex:0 0 30px; border-radius:8px; color:#fff;
  background:linear-gradient(160deg, var(--n2,var(--ios-gris-2)), var(--n1,var(--ios-gris)));
  box-shadow:0 1px 2px rgba(0,0,0,.16), inset 0 .5px 0 rgba(255,255,255,.45);
}
.nav-item:not([data-cat]) .ico .ico-svg { width:17px; height:17px; }
.nav-item:not([data-cat]) { gap:13px; padding:0 8px; height:46px; border-radius:12px; }
.nav-item[data-ruta="hoy"], .nav-item[data-ruta="panel"]      { --n1:var(--ios-verde);   --n2:var(--ios-verde-2); }
.nav-item[data-ruta="plan"], .nav-item[data-ruta="rutinas"]   { --n1:var(--ios-indigo);  --n2:var(--ios-indigo-2); }
.nav-item[data-ruta="reservar"], .nav-item[data-ruta="agenda"]{ --n1:var(--ios-azul);    --n2:var(--ios-azul-2); }
.nav-item[data-ruta="comer"], .nav-item[data-ruta="clientes"] { --n1:var(--ios-naranja); --n2:var(--ios-naranja-2); }
.nav-item[data-ruta="progreso"]   { --n1:var(--ios-morado);   --n2:var(--ios-morado-2); }
.nav-item[data-ruta="constantes"] { --n1:var(--ios-rosa);     --n2:var(--ios-rosa-2); }
.nav-item[data-ruta="ejercicios"] { --n1:var(--ios-turquesa); --n2:var(--ios-turquesa-2); }
.nav-item[data-ruta="cobros"]     { --n1:var(--ios-menta);    --n2:var(--ios-menta-2); }
.nav-item#salir { --n1:#E0483F; --n2:#FF8078; }
.nav-item:hover { background:color-mix(in srgb, var(--texto) 6%, transparent); }
.nav-item.activo { color:var(--texto); }
.nav-item.activo:not([data-cat]) .ico { transform:scale(1.04); box-shadow:0 3px 10px color-mix(in srgb, var(--n1,var(--ios-gris)) 45%, transparent), inset 0 .5px 0 rgba(255,255,255,.5); }

/* --- (5) Tarjetas: cristal claro con el tinte de SU pantalla --------------- */
#pantalla:not(.pantalla-constantes) :is(.tarjeta, .quieta, .comer-mini, .ancha, .registro, .lado-tarjeta, .resumen-reserva) {
  border-radius:18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc) var(--tinte), var(--superficie)) 0%, var(--superficie) 62%);
  border-color:color-mix(in srgb, var(--acc) 14%, var(--borde));
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px color-mix(in srgb, var(--acc) 26%, transparent);
}
#pantalla:not(.pantalla-constantes) .tarjeta-cab { border-bottom-color:color-mix(in srgb, var(--acc) 12%, var(--borde)); }
#pantalla:not(.pantalla-constantes) .hero { box-shadow:0 14px 34px -14px color-mix(in srgb, var(--acc) 55%, transparent); }

/* El hero y el botón principal cogen el color de su pantalla (iOS: el botón de
   acción es del color de la app, no negro). Constantes queda tal cual. */
#pantalla:not(.pantalla-constantes) {
  --gradiente-hero:linear-gradient(135deg, color-mix(in srgb, var(--acc) var(--hero-luz), #000) 0%, color-mix(in srgb, var(--acc) var(--hero-medio), #000) 58%, color-mix(in srgb, var(--acc-2) 55%, var(--acc)) 100%);
}
#pantalla:not(.pantalla-constantes) .btn-p {
  background:linear-gradient(160deg, var(--acc-2), var(--acc)); border-color:transparent;
  color:#fff; box-shadow:0 4px 14px -4px color-mix(in srgb, var(--acc) 60%, transparent), inset 0 .5px 0 rgba(255,255,255,.4);
}
#pantalla:not(.pantalla-constantes) .btn-p:hover:not(:disabled) {
  background:linear-gradient(160deg, var(--acc-2), var(--acc)); filter:brightness(1.06);
}
/* Etiquetas de estado y chips: el color de sistema en vez del gris-verdoso. */
#pantalla:not(.pantalla-constantes) .chip.on {
  background:linear-gradient(145deg, var(--acc-2), var(--acc)); border-color:transparent;
  color:#fff; box-shadow:0 3px 10px -2px color-mix(in srgb, var(--acc) 50%, transparent);
}

/* --- (6) Foco azul de iOS en los campos ---------------------------------- */
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--ios-azul) !important;
  box-shadow:0 0 0 4px var(--foco-ios) !important;
}
::selection { background:color-mix(in srgb, var(--ios-azul) 28%, transparent); }
:root { accent-color:var(--ios-azul); }

@media (prefers-reduced-transparency: reduce) {
  .cabecera-web, .lateral { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--superficie); }
}

/* La pastilla que se desliza en el menú, del color de la pestaña activa. */
.lateral:has(.nav-item[data-ruta="hoy"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-verde) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="panel"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-verde) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="plan"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-indigo) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="rutinas"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-indigo) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="reservar"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-azul) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="agenda"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-azul) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="comer"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-naranja) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="clientes"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-naranja) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="progreso"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-morado) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="constantes"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-rosa) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="ejercicios"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-turquesa) 16%, transparent); }
.lateral:has(.nav-item[data-ruta="cobros"].activo) > .nav-marca { background:color-mix(in srgb, var(--ios-menta) 16%, transparent); }

/* ==========================================================================
   CRISTAL EN EL HERO (28-sep) — Fran: "el verde y el azul son muy intensos,
   ¿más suave, con fondos difuminados?". Solo toca el .hero (cabecera "Hoy" /
   "Reservar" / etc. — el color de cada pantalla lo sigue dando --acc, ver
   arriba): pasa de fondo sólido con letra blanca a un velo de --cristal con
   blur, letra normal. Las tejas del panel y el avatar de cabecera se quedan
   TAL CUAL estaban (aprobado así explícitamente) — no se tocan aquí.
   Añadido al final, como la capa de arriba: quitar este bloque devuelve el
   hero al gradiente sólido de antes. */
.hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 16%, var(--cristal)) 0%, var(--cristal) 78%),
    var(--fondo);
  backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid color-mix(in srgb, var(--acc) 16%, var(--cristal-borde));
  color:var(--texto);
}
.hero .saludo, .hero .hero-pauta { color:var(--apagado); }
.hero .encima { color:var(--tenue); }
.hero .encima-marca { color:var(--texto); }
.hero h2 { color:var(--texto); }
.hero .cifra-txt .n { color:var(--texto); }
.hero .cifra-txt .q { color:var(--apagado); }
.hero .hero-sep, .hero .hero-linea { background:var(--borde); }
.hero .chapa-viva { background:color-mix(in srgb, var(--acc) 16%, transparent); color:color-mix(in srgb, var(--acc) 65%, var(--texto)); }
.hero .punto-vivo { background:var(--acc); }
.hero .anillo-fondo { stroke:var(--borde); }
.hero .anillo-linea { stroke:var(--acc); }
.hero .dentro { color:var(--texto); }
.hero [data-contar].contado { color:var(--acc); }
/* Botón "Empezar"/"Reservar": se queda como el único acento sólido de la
   tarjeta, pero mezclado con --texto en vez del brillo puro de antes. */
.hero .btn-p {
  background:color-mix(in srgb, var(--acc) 88%, var(--texto)); color:var(--superficie);
  box-shadow:0 2px 10px -4px color-mix(in srgb, var(--acc) 45%, transparent);
}
.hero .btn-p:hover {
  box-shadow:0 4px 16px -4px color-mix(in srgb, var(--acc) 55%, transparent);
}
.hero .btn-p::after { background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); }
#pantalla:not(.pantalla-constantes) .hero {
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 26px -16px color-mix(in srgb, var(--acc) 45%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
  .hero { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--superficie); }
}

/* ==========================================================================
   INSTALAR LA APP (instalar.js)
   ========================================================================== */
/* La barra que ofrece instalarla, una vez que ya se está usando desde el
   navegador del móvil. Discreta, abajo, y se va con «×» (dos semanas). */
.oferta-instalar {
  position:fixed; z-index:80; left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px) + var(--alto-pestanas, 0px));
  display:flex; align-items:center; gap:11px; padding:10px 8px 10px 10px;
  border-radius:18px; background:color-mix(in srgb, var(--superficie) 94%, transparent);
  border:1px solid var(--borde); box-shadow:var(--sombra-alta);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:translateY(calc(100% + 30px)); opacity:0;
  transition:transform var(--lento) var(--curva), opacity var(--medio);
}
.oferta-instalar.visible { transform:none; opacity:1; }
.oferta-instalar img { width:40px; height:40px; border-radius:11px; flex:0 0 40px; }
.oferta-instalar-txt { flex:1; min-width:0; line-height:1.3; }
.oferta-instalar-txt b { display:block; font-size:14px; }
.oferta-instalar-txt small { display:block; font-size:12px; color:var(--apagado); }
.oferta-instalar-no {
  width:32px; height:32px; flex:0 0 32px; border:none; background:none; border-radius:10px;
  font-size:20px; line-height:1; color:var(--tenue); cursor:pointer;
}
.oferta-instalar-no:hover { background:var(--superficie-2); }

/* Los tres pasos del iPhone, con el número en su círculo. */
.pasos-instalar { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pasos-instalar li { display:flex; align-items:flex-start; gap:12px; font-size:15px; line-height:1.5; }
.pasos-instalar li > span {
  flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--marca-suave); color:var(--marca-texto); font-weight:700; font-size:14px;
}
.pasos-instalar-nota { margin:16px 0 0; font-size:13px; color:var(--tenue); }

/* Desde «¿Cómo quieres entrar?», volver a la web pública. */
.volver-portada { margin:4px auto 0; display:table; color:var(--tenue); text-decoration:none; }

/* El distintivo de un gimnasio sin logo propio: sus iniciales sobre el
   degradado de la marca (ver logoGimnasio en app.js). */
.marca-iniciales {
  display:grid; place-items:center; padding:0; border:none;
  background:var(--gradiente-hero); color:#fff; font-weight:750;
  font-size:13px; letter-spacing:.02em; line-height:1;
}
.acceso-marca .marca-iniciales { font-size:20px; }

/* ==========================================================================
   LA BARRA DE ABAJO (móvil)
   Las cuatro secciones de cada día donde llega el pulgar, como en cualquier
   app del móvil; el resto, en «Más» (el menú de siempre). El color de cada
   sección vive en la pastilla del icono activo, igual que en la barra
   lateral: nunca en el fondo de la barra.
   ========================================================================== */
.pestanas { display:none; }
@media (max-width:900px) {
  :root:has(.pestanas) { --alto-pestanas:calc(64px + env(safe-area-inset-bottom, 0px)); }
  .pestanas {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    height:var(--alto-pestanas);
    padding:5px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px)
            max(6px, env(safe-area-inset-left, 0px));
    background:color-mix(in srgb, var(--superficie) 93%, transparent);
    backdrop-filter:saturate(1.6) blur(18px); -webkit-backdrop-filter:saturate(1.6) blur(18px);
    border-top:1px solid var(--borde);
  }
  .pestana {
    flex:1; min-width:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; border:none; background:none; padding:0;
    color:var(--tenue); font:inherit; font-size:11px; font-weight:600; letter-spacing:.01em;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:color var(--rapido);
  }
  .pestana .ico {
    width:54px; height:30px; border-radius:15px; display:grid; place-items:center;
    transition:background var(--medio) var(--curva), transform var(--rapido) var(--curva);
  }
  .pestana .ico .ico-svg { width:21px; height:21px; }
  .pestana-txt { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pestana:active .ico { transform:scale(.9); }
  .pestana.activo { color:var(--tinte-cat, var(--marca-texto)); }
  .pestana.activo .ico {
    background:color-mix(in srgb, var(--tinte-cat, var(--marca)) 17%, transparent);
    animation:pestana-enciende .38s var(--curva);
  }
  @keyframes pestana-enciende { from { transform:scaleX(.55); opacity:.4; } }
  .pestana[data-cat="azul"]   { --tinte-cat:var(--azul); }
  .pestana[data-cat="morado"] { --tinte-cat:var(--morado); }
  .pestana[data-cat="marca"]  { --tinte-cat:var(--marca-texto); }
  .pestana[data-cat="menta"]  { --tinte-cat:var(--menta); }
  .pestana[data-cat="ambar"]  { --tinte-cat:var(--ambar); }
  .pestana[data-cat="cian"]   { --tinte-cat:var(--cian); }
  .pestana .rayas { width:18px; }

  /* Lo de abajo del contenido no puede quedar escondido detrás de la barra. */
  :root:has(.pestanas) .contenido {
    padding-bottom:calc(40px + var(--alto-pestanas));
  }
  /* La barra de confirmar la reserva va justo encima de las pestañas. */
  :root:has(.pestanas) .barra-confirmar {
    bottom:var(--alto-pestanas); padding-bottom:12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pestana.activo .ico { animation:none; }
}

/* AJUSTES PARA COMPACTAR MÓVIL (TICKET: HACERLO MÁS PEQUEÑO PARA VER MÁS) */
@media (max-width:900px) {
  /* Reducir márgenes y paddings generales */
  .lienzo { padding-left: 14px; padding-right: 14px; }
  .contenido { padding-top: 14px; padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .titular-pagina { margin-bottom: 12px; }
  .titular-pagina h1 { font-size: 22px; }
  .titular-pagina .sub { font-size: 13px; }
  .cab-fila { height: 50px; } /* antes 60px */
  
  /* Fuentes base ligeramante más pequeñas */
  body { font-size: 14.5px; }
  .btn { padding: 8px 14px; font-size: 14.5px; }
  .hero .btn-p { height: 46px; font-size: 15px; margin-top: 14px; }
  
  /* Piezas grandes compactas */
  .hero { padding: 18px 20px; }
  .hero-icono { width: 50px; height: 50px; }
  .hero h1 { font-size: 24px; }
}


/* FIX IPHONE: pasar a fixed para evitar el temblor del sticky en scroll */
@media (max-width:900px) {
  .cabecera-web {
    position: fixed !important; 
    top: 0; left: 0; right: 0; 
  }
  .contenido { 
    padding-top: calc(50px + env(safe-area-inset-top, 0px) + 14px) !important; 
  }
}

/* Entrenar en vivo: una ronda de superserie agrupa la misma serie de A y B. */
.ronda-superserie { border: 1.5px solid var(--acento, #6c5ce7); border-radius: 16px; padding: 10px 10px 2px; margin-bottom: 14px; }
.ronda-superserie > .etq-mini { margin-bottom: 8px; }
.ronda-superserie .serie-grande { margin-bottom: 10px; }