/* ============================================================
   ATIS CARE — MINI APP DE TELEGRAM
   Un solo CSS, sin framework, sin build. Igual que la landing.

   EL SISTEMA VISUAL ES EL DE web/index.html Y NO SE REINVENTA AQUÍ:
   Epilogue 900 + Courier Prime, neón #00FF55 sobre obsidiana #050505,
   cristal líquido sobre luz ambiental, e islas claras para lo que se
   LEE de verdad. Si algo hay que cambiar de fondo, se cambia en los
   dos sitios — dos productos que se ven distintos parecen dos
   empresas.

   LO QUE SÍ CAMBIA RESPECTO A LA LANDING, Y POR QUÉ:
   · El alto de pantalla es el recurso escaso. Los tamaños de titular
     bajan un escalón y los huecos también.
   · Menos luces ambientales y menos blur: esto corre dentro de un
     WebView de Telegram, en móviles que a veces son viejos, y cuatro
     manchas de 110px de blur ahí se notan en el scroll.
   · Aparece el menú del pulgar SIEMPRE (en la landing solo en móvil):
     una Mini App es móvil por definición.
   ============================================================ */

:root{
  /* --- Marca (idénticos a la landing) --- */
  --obsidian:#050505;
  --neon:#00FF55;
  --hueso:#EDEDED;
  --humo:#9EA2A8;
  --plata:#C9CCD1;

  --linea:rgba(255,255,255,.09);
  --linea-fuerte:rgba(255,255,255,.20);

  /* --- Sobre fondo claro ---
     ⚠️ EL NEÓN NO VALE SOBRE BLANCO: #00FF55 sobre #FFF da 1,4:1 de
     contraste, que es literalmente ilegible. En las islas claras el
     acento es este verde oscuro, que mantiene la identidad y sí se
     lee (4,9:1 sobre blanco). */
  --verde:#00873A;
  --tinta:#0E1116;
  --tinta-suave:#5B6470;
  --linea-clara:rgba(0,0,0,.09);

  /* --- Los colores de dato ---
     Uno por macro y uno por semáforo. Se declaran aquí y en ningún
     otro sitio: un color repetido a mano en tres reglas es como se
     acaba con tres verdes distintos. */
  --c-kcal:#00FF55;
  --c-prot:#5BC8FF;
  --c-carb:#FFC24D;
  --c-gras:#FF7BB0;

  --verde-luz:#00FF55;
  --ambar-luz:#FFC24D;
  --rojo-luz:#FF5C5C;
  --naranja:#FF7A1A;   /* el de la landing: lo que hay que mirar */

  --radio:20px;
  --radio-chico:13px;

  /* LOS HUECOS, EN DOS MEDIDAS Y NO EN QUINCE.
     Misma regla que la landing: entre piezas de un bloque, --hueco;
     entre bloques grandes, --hueco-col. Tenerlos sueltos por el CSS
     es lo que hace que cada sección respire distinto. */
  --hueco:14px;
  --hueco-col:26px;

  /* El alto del menú del pulgar. Se usa para el padding de abajo de
     todas las pantallas: sin esto el último bloque queda debajo del
     menú y no hay forma de leerlo. */
  --alto-pulgar:84px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--obsidian);
  color:var(--hueso);
  font-family:"Epilogue",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  /* overflow-x:hidden y no `clip`: dentro del WebView de Telegram,
     `clip` rompe el position:fixed del menú en algunos Android. */
  overflow-x:hidden;
  min-height:100vh;
}

/* ============================================================
   LUZ AMBIENTAL
   Le da al cristal ALGO QUE REFRACTAR. Un cristal sobre negro plano
   no parece cristal, parece un rectángulo gris.

   Tres manchas y no cuatro, y blur de 90px y no de 110: esto se
   pinta en cada scroll dentro de un WebView. Es la diferencia entre
   deslizar suave y deslizar a tirones en un móvil de hace tres años.
   ============================================================ */
.ambiente{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambiente i{position:absolute;display:block;border-radius:50%;filter:blur(90px)}
.ambiente .a{width:380px;height:380px;background:rgba(0,255,85,.13);top:-150px;left:-110px;animation:derivar 28s ease-in-out infinite}
.ambiente .b{width:340px;height:340px;background:rgba(201,204,209,.10);top:38%;right:-140px;animation:derivar 34s ease-in-out infinite reverse}
.ambiente .c{width:320px;height:320px;background:rgba(0,255,85,.07);bottom:-120px;left:20%;animation:derivar 40s ease-in-out infinite}
@keyframes derivar{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-34px) scale(1.12)}
}

/* La rejilla: se intuye, no se lee. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--linea) 1px,transparent 1px),
    linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:88px 88px;
  opacity:.18;
  mask-image:radial-gradient(ellipse 100% 60% at 50% 0%,#000 12%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 100% 60% at 50% 0%,#000 12%,transparent 80%);
}

/* ============================================================
   CRISTAL LÍQUIDO
   Cuatro capas, que es lo que separa un cristal de un "rgba + blur":
     1. tinte en degradado (la luz no llega igual a todo el panel)
     2. backdrop-filter con SATURACIÓN (sin ella el cristal apaga el
        color de detrás y se ve sucio)
     3. borde superior iluminado por dentro = el canto del vidrio
     4. el brillo especular, aquí SOLO al pulsar (:active) — en un
        móvil no existe el hover, así que animarlo en reposo sería
        gastar GPU en algo que nadie ve.
   ============================================================ */
.cristal{
  position:relative;
  border-radius:var(--radio);
  background:linear-gradient(152deg,
      rgba(255,255,255,.115) 0%,
      rgba(255,255,255,.040) 44%,
      rgba(255,255,255,.065) 100%);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    0 18px 44px -18px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -16px 34px -24px rgba(255,255,255,.15);
  overflow:hidden;
  isolation:isolate;
}
.cristal::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  pointer-events:none;
}
.cristal > *{position:relative;z-index:3}

/* Si el navegador no sabe hacer backdrop-filter, el cristal se
   convierte en una tarjeta oscura normal y la app sigue bien. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cristal{background:rgba(20,20,20,.94)}
  .isla{background:rgba(246,248,250,.98)}
}

/* ============================================================
   ISLA CLARA
   Para lo que se LEE de verdad y no solo se mira: el informe
   semanal, el diagnóstico del entrenador, lo aprendido, el menú.
   Un párrafo largo en gris claro sobre negro cansa; en tinta sobre
   blanco, no.

   ⚠️ SIGUE SIENDO CRISTAL. En la landing esto estuvo al 97% de
   opacidad y el backdrop-filter no pintaba nada: era un panel blanco
   con un blur que costaba GPU y no se veía. 84-72% es el suelo — por
   debajo, la tinta pierde contraste sobre las zonas oscuras.
   ============================================================ */
.isla{
  position:relative;
  border-radius:var(--radio);
  background:linear-gradient(155deg,rgba(255,255,255,.86),rgba(240,244,248,.74));
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    0 22px 52px -20px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--tinta);
  overflow:hidden;
  isolation:isolate;
}
.isla > *{position:relative;z-index:3}
.isla h2,.isla h3{color:var(--tinta)}
.isla .apunte{color:var(--tinta-suave)}
.isla b,.isla strong{color:var(--verde)}
.isla .etiqueta{color:var(--verde)}
.isla .etiqueta::before{background:var(--verde);box-shadow:none}
.isla .fila{border-bottom-color:var(--linea-clara)}
.isla .fila > span:first-child{color:var(--tinta-suave)}
.isla .fila strong,.isla .fila > span:last-child{color:var(--tinta)}
.isla .dato{color:var(--verde)}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h1,h2,h3,.grotesk{
  font-family:"Epilogue",-apple-system,Helvetica,Arial,sans-serif;
  font-weight:900;text-transform:uppercase;
  letter-spacing:-1.4px;line-height:.96;
}
h1{font-size:30px}
h2{font-size:22px;letter-spacing:-1.1px}
h3{font-size:15px;letter-spacing:-.6px}

.mono{font-family:"Courier Prime",ui-monospace,Menlo,monospace}
.neon{color:var(--neon)}
.apunte{color:var(--humo);font-size:14px;line-height:1.62}

/* Toda negrita dentro de texto corrido, en verde. Regla de marca: si
   algo está en negrita es porque importa, y lo que importa se ve. */
p b,p strong,.apunte b,.apunte strong{color:var(--neon);font-weight:700}

/* La etiqueta de sección: el punto y la palabra en monoespaciada. Es
   la pieza que más "marca" da por menos píxeles. */
.etiqueta{
  font-family:"Courier Prime",ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--neon);display:inline-flex;align-items:center;gap:8px;
  margin-bottom:8px;
}
.etiqueta::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 9px var(--neon);flex:none;
}

/* LA CIFRA GRANDE. Lo que se lee de un vistazo desde lejos, que en
   una app de esto es casi siempre UN número. */
.cifra{
  font-family:"Epilogue",Helvetica,Arial,sans-serif;
  font-weight:900;letter-spacing:-2.4px;line-height:.9;
  font-size:44px;color:var(--hueso);
}
.cifra small{
  display:block;font-family:"Courier Prime",monospace;font-weight:400;
  font-size:11px;letter-spacing:1.2px;color:var(--humo);
  text-transform:uppercase;margin-top:8px;line-height:1.35;
}
.isla .cifra{color:var(--tinta)}
.isla .cifra small{color:var(--tinta-suave)}

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.wrap{
  position:relative;z-index:1;
  max-width:560px;margin:0 auto;
  padding:0 16px;
}

.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 0 16px;
}
.top .marca{display:flex;flex-direction:column;gap:5px;min-width:0}
.top h1{font-size:26px}
.top .hoy-es{
  font-family:"Courier Prime",monospace;font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--humo);
}
/* El pulso: la única señal de "esto está vivo" en la cabecera. */
.pulso{width:8px;height:8px;border-radius:50%;background:var(--neon);
  animation:latir 2.4s ease-in-out infinite;flex:none}
@keyframes latir{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,85,.45)}
  50%{opacity:.5;box-shadow:0 0 0 8px rgba(0,255,85,0)}
}

/* --- Las pantallas --- */
.pantalla{display:none;padding-bottom:calc(var(--alto-pulgar) + env(safe-area-inset-bottom,0px))}
.pantalla.activa{display:block}

/* CADA BLOQUE ES UNA SECCIÓN, Y SE SEPARAN CON --hueco-col.
   El encargo era "contenido separado por páginas/secciones bien
   legibles": una pila de tarjetas todas a la misma distancia se lee
   como una lista, no como secciones. */
.bloque{margin-bottom:var(--hueco-col)}
.bloque > * + *{margin-top:var(--hueco)}
.tarjeta{padding:18px}
.tarjeta.ancha{padding:20px 18px 22px}

/* ============================================================
   ANIMACIÓN DE ENTRADA AL HACER SCROLL
   Cada sección sube y aparece cuando entra en pantalla.

   ⚠️ EL ESTADO POR DEFECTO ES VISIBLE, y el JS es quien esconde
   (.revelable) antes de observar. Si se hiciera al revés y el JS
   fallara —o el navegador no tuviera IntersectionObserver— la app se
   quedaría entera en opacidad 0: una pantalla en blanco que responde
   a los toques. Es el fallo más caro que puede tener una animación
   de scroll, así que el CSS no lo permite.
   ============================================================ */
.revelable{opacity:0;transform:translateY(22px)}
.revelable.dentro{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .revelable,.revelable.dentro{opacity:1;transform:none;transition:none}
  .ambiente i{animation:none}
  .pulso{animation:none}
}

/* ============================================================
   EL FILTRO DE PLAZO (Seguimiento)
   Hoy · 7 días · 30 días. Va ARRIBA del todo y pegado, porque es lo
   que decide qué estás mirando: si se queda fuera de pantalla al
   bajar, dejas de saber de qué plazo son las cifras que lees.
   ============================================================ */
.filtro{
  position:sticky;top:0;z-index:60;
  display:flex;gap:3px;margin-bottom:var(--hueco-col);
  padding:4px;border-radius:var(--radio-chico);
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--linea);
}
.filtro button{
  flex:1;border:0;cursor:pointer;padding:10px 6px;
  border-radius:calc(var(--radio-chico) - 3px);
  background:none;color:var(--humo);
  font-family:"Courier Prime",ui-monospace,monospace;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  transition:color .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.filtro button.activo{
  color:#00220B;font-weight:700;
  background:linear-gradient(180deg,#4DFF8C,var(--neon));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

/* Lo que no toca en el plazo elegido, fuera del flujo.
   `display:none` y no `opacity`: un bloque invisible pero presente se
   sigue pudiendo pulsar y sigue ocupando sitio. */
.bloque.fuera-de-plazo{display:none}
/* "Lo que me falta" es de AHORA: mirando un día pasado no pinta nada. */
.bloque.en-otro-dia{display:none}

/* ============================================================
   IR A OTRO DÍA (Hoy)
   Flechas arriba y deslizar las tarjetas del día. `pan-y` deja el
   scroll vertical al navegador y nos pasa solo el gesto de lado.
   ============================================================ */
.navegar-dia{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:calc(var(--hueco-col) * .6);
}
.navegar-dia .flecha{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid var(--linea-fuerte);background:rgba(255,255,255,.05);
  color:var(--hueso);font-size:24px;line-height:1;padding:0 0 3px;
  -webkit-tap-highlight-color:transparent;transition:opacity .2s,background .2s;
}
.navegar-dia .flecha:active{background:rgba(255,255,255,.14)}
.navegar-dia .flecha:disabled{opacity:.25;cursor:default}
.dia-actual{
  font-family:"Courier Prime",monospace;font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--hueso);text-align:center;
}
.deslizable{touch-action:pan-y}

/* ============================================================
   EL SEMÁFORO DEL DÍA
   Es SEMÁFORO y no nota — ver analisis/readiness.py. Por eso aquí no
   hay ningún número: hay una luz, una frase y los motivos. Un
   "73/100" suena preciso y no lo es.
   ============================================================ */
.semaforo{display:flex;gap:16px;align-items:flex-start;padding:18px}
.luz{
  width:56px;height:56px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:24px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
}
.luz.verde{background:radial-gradient(circle at 34% 30%,rgba(0,255,85,.5),rgba(0,255,85,.13));
  box-shadow:0 0 26px rgba(0,255,85,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.luz.ambar{background:radial-gradient(circle at 34% 30%,rgba(255,194,77,.5),rgba(255,194,77,.13));
  box-shadow:0 0 26px rgba(255,194,77,.32),inset 0 1px 0 rgba(255,255,255,.4)}
.luz.rojo{background:radial-gradient(circle at 34% 30%,rgba(255,92,92,.5),rgba(255,92,92,.13));
  box-shadow:0 0 26px rgba(255,92,92,.32),inset 0 1px 0 rgba(255,255,255,.4)}
.semaforo .dice{min-width:0}
.semaforo .consejo{font-weight:700;font-size:16.5px;letter-spacing:-.3px;line-height:1.4}
.semaforo ul{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:5px}
.semaforo li{
  font-family:"Courier Prime",monospace;font-size:12px;color:var(--humo);
  padding-left:14px;position:relative;line-height:1.5;
}
.semaforo li::before{content:"·";position:absolute;left:4px;color:var(--neon);font-weight:700}

/* ============================================================
   BARRAS DE MACROS
   El ancho va en una variable CSS y el texto NUNCA se recorta: la
   barra se queda al 100% cuando te pasas, pero la cifra sigue
   diciendo la verdad y la barra se raya para que se note.
   ============================================================ */
.macro + .macro{margin-top:11px}
.macro-fila{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.macro-nombre{
  font-family:"Courier Prime",monospace;font-size:10.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--humo);
}
.macro-cifras{font-family:"Courier Prime",monospace;font-size:12px;color:var(--humo)}
.macro-cifras b{font-family:"Epilogue",sans-serif;font-weight:900;font-size:15px;
  letter-spacing:-.5px;color:var(--hueso)}
.pista{height:9px;border-radius:99px;background:rgba(255,255,255,.075);
  overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.pista > span{
  display:block;height:100%;width:var(--pct,0%);border-radius:99px;
  transition:width .9s cubic-bezier(.22,.61,.36,1);
}
.macro.kcal .pista > span{background:linear-gradient(90deg,rgba(0,255,85,.5),var(--c-kcal))}
.macro.prot .pista > span{background:linear-gradient(90deg,rgba(91,200,255,.5),var(--c-prot))}
.macro.carb .pista > span{background:linear-gradient(90deg,rgba(255,194,77,.5),var(--c-carb))}
.macro.gras .pista > span{background:linear-gradient(90deg,rgba(255,123,176,.5),var(--c-gras))}
.macro.kcal .macro-cifras b{color:var(--c-kcal)}
.macro.prot .macro-cifras b{color:var(--c-prot)}
.macro.carb .macro-cifras b{color:var(--c-carb)}
.macro.gras .macro-cifras b{color:var(--c-gras)}
/* Pasarse SE VE: la barra se raya en diagonal. */
.macro.pasado .pista > span{
  background-image:repeating-linear-gradient(45deg,
    rgba(0,0,0,.28) 0 5px,transparent 5px 10px);
}

/* La cabecera de "hoy": lo comido y lo que queda. */
.hoy-cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--linea);
}
.hoy-cabecera .cifra{font-size:48px}
.restante{text-align:right;font-family:"Courier Prime",monospace;font-size:10.5px;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--humo);line-height:1.5}
.restante b{display:block;font-family:"Epilogue",sans-serif;font-weight:900;
  font-size:21px;letter-spacing:-1px;color:var(--neon)}
.restante.pasado b{color:var(--c-gras)}

/* ============================================================
   LISTA DE COMIDAS
   ============================================================ */
.comida{
  display:grid;grid-template-columns:38px 26px 1fr auto;align-items:center;
  gap:9px;padding:11px 0;border-bottom:1px solid var(--linea);
}
.comida:last-child{border-bottom:0;padding-bottom:0}
.comida-hora{font-family:"Courier Prime",monospace;font-size:11px;color:var(--humo)}
.comida-emoji{font-size:17px;text-align:center}
.comida-que{font-size:14.5px;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.comida-kcal{font-family:"Epilogue",sans-serif;font-weight:900;font-size:16px;
  letter-spacing:-.6px;color:var(--neon);white-space:nowrap}
.comida-kcal.sin-dato{color:var(--c-carb)}
.comida[data-comida]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.comida[data-comida]:active{background:rgba(255,255,255,.05)}

/* El desglose de una comida, dentro del modal (que centra el texto). */
.desglose{text-align:left;max-height:60vh;overflow-y:auto}
.desglose-cuando{font-family:"Courier Prime",monospace;font-size:11px;color:var(--humo);
  text-align:center;margin-bottom:12px}
.desglose-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  flex-wrap:wrap;padding:10px 0 12px;border-bottom:1px solid var(--linea);font-size:13px}
.desglose-kcal{font-family:"Epilogue",sans-serif;font-weight:900;font-size:24px;letter-spacing:-1px}
.desglose-alimento{padding:10px 0;border-bottom:1px solid var(--linea)}
.desglose-fila{display:flex;justify-content:space-between;gap:10px}
.desglose-nombre{min-width:0;overflow-wrap:anywhere}
.desglose-marca{color:var(--humo);font-size:12px;margin-left:4px}
.desglose-gramos{font-family:"Courier Prime",monospace;white-space:nowrap}
.desglose-macros{font-size:12.5px;margin-top:2px}
.desglose-macros b,.desglose-total b{color:inherit}
.desglose-leyenda{text-align:center;margin-top:10px}

/* ============================================================
   FILAS DE DATO
   El patrón que más se repite: etiqueta a la izquierda, dato a la
   derecha. Una sola definición para toda la app.
   ============================================================ */
.fila{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--linea);font-size:14.5px;
}
.fila:last-child{border-bottom:0}
.fila > span:first-child{color:var(--humo);font-size:13.5px;min-width:0}
.fila > span:last-child,.fila strong{
  font-family:"Courier Prime",monospace;font-size:13.5px;
  color:var(--hueso);text-align:right;white-space:nowrap;font-weight:400;
}
.fila strong{font-family:"Epilogue",sans-serif;font-weight:900;font-size:15px;letter-spacing:-.4px}

.dato{color:var(--neon);font-weight:700}

/* Aviso: lo que hay que saber sí o sí. */
.aviso{
  margin-top:12px;padding:11px 13px;border-radius:var(--radio-chico);
  background:rgba(255,194,77,.10);border:1px solid rgba(255,194,77,.28);
  color:#FFD98A;font-size:13px;line-height:1.5;
}
.aviso.malo{background:rgba(255,92,92,.10);border-color:rgba(255,92,92,.30);color:#FFA9A9}
.aviso.bueno{background:rgba(0,255,85,.09);border-color:rgba(0,255,85,.26);color:#8CFFB6}
.isla .aviso{background:rgba(255,176,0,.14);border-color:rgba(180,120,0,.3);color:#7A5200}
.isla .aviso.malo{background:rgba(255,60,60,.10);border-color:rgba(190,40,40,.3);color:#9A1B1B}
.isla .aviso.bueno{background:rgba(0,135,58,.10);border-color:rgba(0,135,58,.28);color:#04521F}

/* Chip: un dato suelto con su etiqueta. Van en rejilla. */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px;margin-top:14px}
.chip{
  padding:11px 12px;border-radius:var(--radio-chico);
  background:rgba(255,255,255,.05);border:1px solid var(--linea);
}
.chip .k{font-family:"Courier Prime",monospace;font-size:9.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--humo);display:block;line-height:1.4}
.chip .v{font-family:"Epilogue",sans-serif;font-weight:900;font-size:19px;
  letter-spacing:-.9px;color:var(--hueso);display:block;margin-top:5px;line-height:1.1}
.chip .v small{font-family:"Courier Prime",monospace;font-weight:400;font-size:10px;
  letter-spacing:.6px;color:var(--humo);margin-left:3px}
.isla .chip{background:rgba(0,0,0,.045);border-color:var(--linea-clara)}
.isla .chip .k{color:var(--tinta-suave)}
.isla .chip .v{color:var(--tinta)}
.isla .chip .v small{color:var(--tinta-suave)}

/* ============================================================
   GRÁFICAS EN SVG
   Se dibujan en el navegador con los puntos que manda el servidor
   (/api/peso/serie y /api/carga/serie) — LOS MISMOS que dibuja el
   PNG de matplotlib que va al chat. Aquí solo hay pintura.

   El trazo se anima con stroke-dasharray, que es la única forma de
   "dibujar una línea" sin JS por fotograma.
   ============================================================ */
.grafica-svg{display:block;width:100%;height:auto;overflow:visible}
.g-rejilla{stroke:rgba(255,255,255,.08);stroke-width:1}
.g-eje{font-family:"Courier Prime",monospace;font-size:9px;fill:var(--humo)}
.g-punto{fill:rgba(255,255,255,.28)}
.g-media{fill:none;stroke:var(--naranja);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,122,26,.45))}
.g-tramo{fill:none;stroke-width:2.2;stroke-linecap:round}
.g-tramo.hacia{stroke:var(--neon);filter:drop-shadow(0 0 5px rgba(0,255,85,.4))}
.g-tramo.contra{stroke:var(--rojo-luz);filter:drop-shadow(0 0 5px rgba(255,92,92,.4))}
.g-tramo.neutro{stroke:rgba(255,255,255,.35)}
.g-area-tramo.hacia{fill:url(#degradado-hacia)}
.g-area-tramo.contra{fill:url(#degradado-contra)}
.g-area-tramo.neutro{fill:url(#degradado-neutro)}
.g-partida{fill:none;stroke:var(--plata);stroke-width:2}
.g-barra{fill:rgba(255,255,255,.20)}
.g-barra.alta{fill:rgba(0,255,85,.45)}
.g-ratio{fill:none;stroke:var(--c-prot);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-banda-ok{fill:rgba(0,255,85,.09)}
.g-alarma{stroke:var(--rojo-luz);stroke-width:1.2;stroke-dasharray:4 4;opacity:.75}
.g-etiqueta{font-family:"Courier Prime",monospace;font-size:10px;fill:var(--hueso)}

/* ⚠️ EL TRAZO SE ANIMA DESDE JS, NO DESDE AQUÍ, Y ES A PROPÓSITO.
   La versión obvia era `.dentro .trazo{animation:...}` con el path
   naciendo en stroke-dashoffset completo (o sea, INVISIBLE) y la clase
   `.dentro` puesta por el observador de scroll. El problema: si el
   observador no llega a correr —navegador sin IntersectionObserver, un
   fallo antes en el JS, o el panel oculto mientras se prueba, donde
   Chrome no avanza las transiciones— la línea se queda invisible PARA
   SIEMPRE. Y una gráfica en blanco no parece un fallo, parece que no
   tienes datos: el peor tipo de error, el que no se ve.

   Así que el path nace VISIBLE y es el JS quien lo esconde justo antes
   de animarlo. Si algo se rompe, se rompe la animación, nunca el dato. */
.trazo{transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .trazo{transition:none;stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

.leyenda{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;
  font-family:"Courier Prime",monospace;font-size:10.5px;color:var(--humo);
}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:12px;height:3px;border-radius:2px;display:block;flex-shrink:0}

/* ============================================================
   LA SEMANA, DÍA A DÍA
   El número grande es el TOTAL de los 7 días, no la media: cuidarse
   de lunes a jueves y liarla el finde da la misma semana que no
   cuidarse, y día a día los dos parecen "un mal día suelto".
   ============================================================ */
.tabla-semana{margin-top:14px}
.dia-fila{
  display:grid;grid-template-columns:34px 1fr 44px 66px 34px 12px;
  align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid var(--linea);
}
.dia-fila.cabecera,.dia-fila.total{border-bottom:0}
.dia-fila.cabecera span{
  font-family:"Courier Prime",monospace;font-size:9px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--humo);
}
.dia-fila.total{border-top:1px solid var(--linea-fuerte);margin-top:5px;padding-top:11px}
/* La fila del TOTAL no lleva barra: comparar la suma de la semana contra
   el objetivo de UN día no significa nada. Pero la celda vacía seguía
   pintando el carril gris, y un carril sin relleno se lee como un 0%. */
.dia-fila.total .dia-barra{background:none}
/* Lo mismo en la cabecera: ahí la celda lleva el texto "vs 2353", no una barra. */
.dia-fila.cabecera .dia-barra{background:none;height:auto;overflow:visible}
.dia-nombre{font-family:"Courier Prime",monospace;font-size:11px;color:var(--humo);text-transform:uppercase}
.dia-fila.total .dia-nombre{color:var(--neon);font-weight:700}
.dia-barra{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.dia-barra i{display:block;height:100%;width:var(--pct,0%);border-radius:99px;
  background:linear-gradient(90deg,rgba(0,255,85,.45),var(--neon));
  transition:width .8s cubic-bezier(.22,.61,.36,1)}
.dia-fila.pasado .dia-barra i{background:linear-gradient(90deg,rgba(255,123,176,.45),var(--c-gras))}
.dia-fila.vacio .dia-barra{opacity:.4}
.dia-kcal{font-family:"Epilogue",sans-serif;font-weight:900;font-size:13.5px;
  letter-spacing:-.5px;text-align:right}
.dia-fila.vacio .dia-kcal{color:var(--humo);font-weight:400}
.dia-macros{font-family:"Courier Prime",monospace;font-size:10px;text-align:right;color:var(--humo)}
.m-p{color:var(--c-prot)}.m-c{color:var(--c-carb)}.m-g{color:var(--c-gras)}
.dia-entreno{font-size:12px;text-align:right;white-space:nowrap;overflow:hidden}
.tabla-semana.sin-objetivo .dia-barra{visibility:hidden}

/* Pulsar un día abre lo que se comió debajo. La flecha de la última
   columna es lo que dice que la fila se puede tocar. */
.dia-fila.pulsable{cursor:pointer;-webkit-tap-highlight-color:transparent;
  border-radius:8px;transition:background .15s}
.dia-fila.pulsable:active,.dia-fila.pulsable.abierta{background:rgba(255,255,255,.05)}
.dia-abrir{font-size:13px;color:var(--humo);text-align:center;transition:transform .2s}
.dia-fila.abierta .dia-abrir{transform:rotate(90deg);color:var(--neon)}
.dia-detalle{padding:4px 0 10px 12px;border-left:2px solid var(--linea-fuerte);
  margin:2px 0 6px}
.dia-detalle .comida{padding:8px 0}
.dia-detalle .apunte{font-size:13px;padding:6px 0}

/* ============================================================
   SEMANA A SEMANA (los 30 días)
   Una fila por semana. La marca de la derecha es un semáforo de
   REGISTRO, no de resultado: dice si esa semana tiene datos con los
   que opinar, que es lo primero que hay que saber antes de comparar
   una semana con otra.
   ============================================================ */
.tabla-semanas{margin-top:14px}
.fila-semana{
  display:grid;grid-template-columns:1fr 76px 44px 44px 6px;
  align-items:center;gap:9px;padding:11px 0;
  border-bottom:1px solid var(--linea);
}
.fila-semana:last-child{border-bottom:0}
.fila-semana.cabecera{
  border-bottom:1px solid var(--linea-fuerte);padding-bottom:7px;
}
.fila-semana.cabecera span{
  font-family:"Courier Prime",monospace;font-size:9px;letter-spacing:.9px;
  text-transform:uppercase;color:var(--humo);
}
.sem-rango{font-family:"Courier Prime",monospace;font-size:11.5px;color:var(--hueso);line-height:1.35}
.sem-rango small{color:var(--humo);font-size:11.5px}
.sem-media{text-align:right}
.sem-media b{font-family:"Epilogue",sans-serif;font-weight:900;font-size:17px;
  letter-spacing:-.7px;color:var(--neon);display:block;line-height:1.1}
.sem-media b.sin{color:var(--humo)}
.sem-media small{font-family:"Courier Prime",monospace;font-size:9px;
  color:var(--humo);letter-spacing:.5px}
.sem-dias,.sem-entreno{
  text-align:right;font-family:"Epilogue",sans-serif;font-weight:900;
  font-size:14px;letter-spacing:-.4px;color:var(--hueso);
}
.sem-dias small,.sem-entreno small{
  font-family:"Courier Prime",monospace;font-weight:400;font-size:9px;
  color:var(--humo);letter-spacing:.4px;
}
/* La semana con poco registro se apaga: sus cifras son ciertas pero no
   representan la semana, y darles el mismo peso visual que a una
   completa invita a compararlas como si fueran lo mismo. */
.fila-semana.floja .sem-rango,
.fila-semana.floja .sem-dias,
.fila-semana.floja .sem-entreno{opacity:.55}
.sem-marca{width:6px;height:26px;border-radius:99px;display:block}
.sem-marca.ok{background:var(--neon);box-shadow:0 0 8px rgba(0,255,85,.5)}
.sem-marca.medio{background:var(--c-carb)}
.sem-marca.mal{background:rgba(255,255,255,.16)}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:0;cursor:pointer;border-radius:var(--radio-chico);
  font-family:"Epilogue",sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:-.3px;font-size:15px;padding:17px 22px;
  background:linear-gradient(180deg,#4DFF8C,var(--neon) 55%,#00D948);
  color:#00220B;
  box-shadow:0 12px 28px -12px rgba(0,255,85,.6),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .16s ease,box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.978);box-shadow:0 6px 16px -10px rgba(0,255,85,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.fantasma{
  background:rgba(255,255,255,.07);color:var(--hueso);
  border:1px solid var(--linea-fuerte);box-shadow:none;
}
.btn .icono{font-size:19px}

/* Cambiar el nombre, en la ficha de "Tú" */
.ficha-nombre{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn.btn-nombre{width:auto;font-size:12px;padding:9px 14px}
.ficha-nombre-botones{display:flex;gap:9px}
.campo-nombre{flex:1 1 180px;min-width:0;font:inherit;font-size:17px;color:var(--hueso);
  background:rgba(255,255,255,.06);border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-chico);padding:11px 13px}
.btn-sub{
  display:block;text-align:center;margin-top:9px;
  font-family:"Courier Prime",monospace;font-size:10.5px;letter-spacing:.8px;
  color:var(--humo);
}

/* ============================================================
   MENÚ DEL PULGAR
   Abajo del todo, donde llega el pulgar sin recolocar la mano.

   ⚠️ El padding de abajo lleva env(safe-area-inset-bottom): la barra
   de gestos del iPhone vive ahí, y sin esto el menú queda debajo de
   ella y se pulsa el gesto en vez del botón.
   ============================================================ */
.pulgar{
  position:fixed;left:10px;right:10px;bottom:10px;top:auto;z-index:900;
  max-width:540px;margin:0 auto;
  border-radius:var(--radio);
  background:rgba(10,10,10,.66);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 38px -14px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.22);
  padding:5px 5px calc(5px + env(safe-area-inset-bottom,0px));
}
.pulgar ul{display:flex;list-style:none;gap:1px}
.pulgar li{flex:1;min-width:0}
/* El engranaje ocupa lo justo: es un icono, no una palabra, y
   robarle sitio a las seis etiquetas para que respire no compensa. */
.pulgar li.ajustes{flex:0 0 40px}
/* Escondido de verdad. El navegador ya esconde lo que lleva `hidden`,
   pero aquí se declara porque de ello depende que una puerta de
   administración no se vea: si algún día una regla de al lado le pone
   un `display`, este `hidden` dejaría de esconder nada en silencio. */
.pulgar li[hidden]{display:none}
.pulgar button{
  display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;
  border:0;background:none;cursor:pointer;padding:8px 1px;
  color:var(--humo);font-family:"Courier Prime",ui-monospace,monospace;
  font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;
  border-radius:calc(var(--radio-chico) - 2px);
  transition:color .2s,background .2s;
  -webkit-tap-highlight-color:transparent;
}
.pulgar button .ico{font-size:15px;line-height:1}
.pulgar button.activo{color:var(--neon);background:rgba(0,255,85,.10)}
.pulgar li.ajustes button{font-size:14px;padding:11px 0}

/* ============================================================
   EL AVISO CON EL RESULTADO (modal)
   Registrar una foto SIEMPRE termina en uno de estos avisos. El
   silencio dejaba a la persona sin saber si su comida había entrado.
   ============================================================ */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:end center;padding:16px}
.modal[hidden]{display:none}
.modal-fondo{position:absolute;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:aparecer .25s ease}
.modal-caja{
  position:relative;width:100%;max-width:420px;padding:26px 22px 22px;
  margin-bottom:calc(env(safe-area-inset-bottom,0px));
  border-radius:24px;text-align:center;
  background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.3);
  animation:subir .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.modal-icono{font-size:40px;line-height:1;margin-bottom:12px}
.modal-caja h3{font-size:20px;margin-bottom:10px}
.modal-cuerpo{color:var(--humo);font-size:14.5px;line-height:1.6}
.modal-cuerpo b{color:var(--neon)}
.modal-acciones{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.modal-x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--linea);background:rgba(255,255,255,.06);color:var(--humo);
  font-size:14px;cursor:pointer;line-height:1;
}
body.con-modal{overflow:hidden}
details{margin-top:10px;text-align:left}
summary{cursor:pointer;font-size:12px;color:var(--humo)}

/* Estado de carga: el esqueleto late. Un "Cargando…" en gris no dice
   si está pasando algo o si se ha quedado colgado. */
.cargando{height:14px;border-radius:99px;background:rgba(255,255,255,.07);
  animation:latido 1.35s ease-in-out infinite}
.cargando + .cargando{margin-top:10px;width:70%}
.isla .cargando{background:rgba(0,0,0,.07)}
@keyframes latido{0%,100%{opacity:.45}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.cargando{animation:none}}

/* ============================================================
   PANTALLA GRANDE (1440×900 y similares)
   Una Mini App se usa en el móvil, pero también se abre en Telegram
   Desktop y ahí una columna de 560 px en medio de 1440 se ve
   desamparada. Dos columnas y el menú centrado.
   ============================================================ */
@media (min-width:900px){
  :root{--hueco:16px;--hueco-col:32px}

  /* 760 px Y NO EL ANCHO ENTERO, a propósito. La tentación en una
     pantalla de 1440 es repartir el contenido en dos columnas y llenarla.
     Aquí sale mal por dos razones: la mitad de esta app son BARRAS y
     gráficas, y estiradas a 1.000 px un 61% de proteína se lee igual que
     un 8% — la forma deja de significar nada; y el orden de las secciones
     es una respuesta encadenada (¿cómo vengo? → ¿cuánto llevo? → ¿qué he
     comido?) que en dos columnas se lee en zigzag.

     Además el sitio real donde esto se abre en un ordenador es el panel
     de Telegram Desktop, que anda por los 400 px. Una columna centrada y
     legible es lo mismo que se ve en el móvil, un poco más holgado. */
  .wrap{max-width:760px;padding:0 28px}
  .top h1{font-size:34px}
  .pulgar{max-width:620px;left:0;right:0}
  .pulgar button{font-size:9.5px;padding:10px 2px}
  .pantalla{padding-bottom:110px}
}

/* ============================================================
   EL DIARIO DE FUERZA  (2026-09-05)

   Se diseña para una situación muy concreta: de pie, con una mano, con
   el pulso a 140 y treinta segundos de descanso. De ahí salen todas las
   decisiones de aquí:

   · Los objetivos táctiles son de 44 px o más. Nada de "✕" de 16 px.
   · Los números se escriben en campos GRANDES y con teclado numérico
     (inputmode en el HTML), porque la alternativa es teclear 82,5 en un
     campo de 60 px con el dedo sudado.
   · El botón de apuntar la serie está SIEMPRE a la derecha del mismo
     par de campos, en todos los ejercicios, para que se pueda dar sin
     mirar.
   · La referencia de la última vez va en gris y arriba: se consulta,
     no se toca.
   ============================================================ */

/* La hoja a pantalla completa. */
.hoja{
  position:fixed;inset:0;z-index:1200;
  display:flex;flex-direction:column;
  background:var(--obsidian);
  padding-top:env(safe-area-inset-top,0px);
}
.hoja[hidden]{display:none}

.hoja-top{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px 13px;
  border-bottom:1px solid var(--linea);
  background:rgba(5,5,5,.94);
  backdrop-filter:blur(14px);
}
.hoja-titulo{display:flex;flex-direction:column;gap:2px;min-width:0}
.hoja-titulo strong{font-size:18px;letter-spacing:-.4px}
.hoja-sub{
  font-family:"Courier Prime",monospace;font-size:11px;letter-spacing:.6px;
  color:var(--humo);text-transform:uppercase;
}
.hoja-x{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  border:1px solid var(--linea-fuerte);background:transparent;
  color:var(--hueso);font-size:16px;line-height:1;
}
.hoja-x:active{background:rgba(255,255,255,.08)}

.hoja-cuerpo{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px 24px;
}
.hoja-pie{
  display:flex;flex-direction:column;gap:9px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--linea);
  background:rgba(5,5,5,.94);
  backdrop-filter:blur(14px);
}

/* El botón grande de la pestaña Entreno. */
.btn-diario{font-size:16px;padding:17px 18px}

/* ---------- Una tarjeta de ejercicio dentro del día ---------- */
.ejercicio{
  border:1px solid var(--linea);border-radius:var(--radio);
  background:rgba(255,255,255,.028);
  padding:14px 14px 12px;margin-bottom:12px;
}
.ejercicio-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ejercicio h3{font-size:16.5px;letter-spacing:-.4px;text-transform:capitalize}
.musculo{
  font-family:"Courier Prime",monospace;font-size:9.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--humo);
  border:1px solid var(--linea);border-radius:999px;padding:3px 8px;white-space:nowrap;
}
.ejercicio .antes{
  font-family:"Courier Prime",monospace;font-size:11.5px;color:var(--humo);
  margin-top:7px;line-height:1.5;
}
.ejercicio .antes b{color:var(--plata);font-weight:400}

/* Las series ya apuntadas. */
.serie{
  display:grid;grid-template-columns:26px 1fr auto 44px;align-items:center;gap:8px;
  padding:9px 0;border-bottom:1px solid var(--linea);
}
.serie:last-of-type{border-bottom:0}
.serie .n{
  font-family:"Courier Prime",monospace;font-size:11px;color:var(--humo);text-align:center;
}
.serie .peso{font-weight:900;font-size:16px;letter-spacing:-.4px}
.serie .peso small{font-weight:400;font-size:11.5px;color:var(--humo);letter-spacing:0}
.serie .rpe{
  font-family:"Courier Prime",monospace;font-size:11px;color:var(--humo);
}
.serie.calienta .peso{color:var(--humo);font-weight:400}
.serie.calienta .n::after{content:"c";color:var(--ambar-luz)}
.serie .quitar{
  width:44px;height:44px;border:0;background:transparent;color:var(--humo);font-size:15px;
}
.serie .quitar:active{color:var(--rojo-luz)}
.serie.record .peso{color:var(--neon)}

/* La fila de apuntar: dos campos gordos y un botón. */
.apuntar{
  display:grid;grid-template-columns:1fr 1fr 62px 52px;gap:7px;
  margin-top:11px;align-items:end;
}
.apuntar.sin-peso{grid-template-columns:1fr 62px 52px}
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo label{
  font-family:"Courier Prime",monospace;font-size:9.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--humo);padding-left:2px;
}
.campo input{
  width:100%;height:50px;border-radius:var(--radio-chico);
  border:1px solid var(--linea-fuerte);background:rgba(255,255,255,.05);
  color:var(--hueso);font-family:"Epilogue",sans-serif;font-weight:900;
  font-size:19px;letter-spacing:-.5px;text-align:center;
  -moz-appearance:textfield;
}
.campo input::-webkit-outer-spin-button,
.campo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.campo input:focus{outline:0;border-color:var(--neon);background:rgba(0,255,85,.06)}
.campo input::placeholder{color:rgba(158,162,168,.5);font-weight:400}
.mas{
  height:50px;border-radius:var(--radio-chico);border:0;
  background:var(--neon);color:#03210E;font-size:24px;font-weight:900;line-height:1;
}
.mas:active{transform:scale(.96)}
.mas[disabled]{opacity:.35}

.ejercicio-pie{display:flex;gap:8px;margin-top:11px}
.mini{
  flex:1;min-height:38px;border-radius:var(--radio-chico);
  border:1px solid var(--linea);background:transparent;color:var(--humo);
  font-family:"Courier Prime",monospace;font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;
}
.mini:active{background:rgba(255,255,255,.06)}
.mini.activo{color:var(--neon);border-color:rgba(0,255,85,.45)}

/* La gráfica de progreso de un ejercicio, plegada bajo su tarjeta. */
.progreso-ej{margin-top:12px;border-top:1px solid var(--linea);padding-top:12px}
.progreso-ej .veredicto{font-size:13.5px;line-height:1.55;color:var(--plata)}

/* ---------- El selector de ejercicios ---------- */
.hoja-buscar{padding:12px 16px;border-bottom:1px solid var(--linea)}
.hoja-buscar input{
  width:100%;height:48px;border-radius:var(--radio-chico);
  border:1px solid var(--linea-fuerte);background:rgba(255,255,255,.05);
  color:var(--hueso);font-family:"Epilogue",sans-serif;font-size:16px;
  padding:0 15px;
}
.hoja-buscar input:focus{outline:0;border-color:var(--neon)}

.grupo-titulo{
  font-family:"Courier Prime",monospace;font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--neon);
  margin:18px 0 8px;padding-left:2px;
}
.grupo-titulo:first-child{margin-top:0}
.opcion{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:52px;padding:12px 14px;margin-bottom:7px;
  border:1px solid var(--linea);border-radius:var(--radio-chico);
  background:rgba(255,255,255,.028);color:var(--hueso);
  font-family:"Epilogue",sans-serif;font-size:15.5px;text-align:left;
  text-transform:capitalize;
}
.opcion:active{border-color:var(--neon);background:rgba(0,255,85,.07)}
.opcion .marca-basico{
  font-family:"Courier Prime",monospace;font-size:9px;letter-spacing:1.1px;
  color:var(--neon);text-transform:uppercase;flex:0 0 auto;
}
.opcion .cuando{
  font-family:"Courier Prime",monospace;font-size:10px;color:var(--humo);
  text-transform:none;flex:0 0 auto;
}

/* ---------- El volumen por músculo ---------- */
.vol{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.vol-fila{display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:10px}
.vol-fila .m{
  font-family:"Courier Prime",monospace;font-size:10.5px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--humo);
}
.vol-fila .n{
  font-family:"Epilogue",sans-serif;font-weight:900;font-size:15px;
  letter-spacing:-.4px;text-align:right;
}
.vol-pista{position:relative;height:9px;border-radius:99px;background:rgba(255,255,255,.07)}
/* ⚠️ SIN `overflow:hidden`. Lo tenía, y recortaba justo las dos
   referencias que hacen legible la cifra: la banda del rango productivo
   y la marca del techo. Un "12 series" sin nada contra lo que
   compararlo no dice absolutamente nada a quien lo lee. */
.vol-zona{
  position:absolute;top:0;bottom:0;border-radius:2px;
  background:rgba(0,255,85,.16);
}
.vol-barra{
  position:absolute;top:0;bottom:0;left:0;border-radius:99px;
  background:var(--humo);width:0;transition:width .7s cubic-bezier(.22,1,.36,1);
}
.vol-tope{
  position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;
  background:var(--linea-fuerte);
}
.vol-fila.productivo .vol-barra{background:var(--neon)}
.vol-fila.productivo .n{color:var(--neon)}
.vol-fila.por_encima .vol-barra{background:var(--rojo-luz)}
.vol-fila.por_encima .n{color:var(--rojo-luz)}
.vol-fila.minimo .vol-barra{background:var(--ambar-luz)}


/* Un día de la lista del historial.
   ⚠️ VA ACOTADO A #tarjeta-dias. Estaba a secas, y como `.dia-fila` es
   también la fila de la tabla de 7 días (Seguimiento), este `display:flex`
   le pisaba la rejilla: las barras medían 0 y las columnas se repartían
   según el contenido, así que un día con emoji de entreno se descuadraba
   respecto a los demás. */
#tarjeta-dias .dia-fila{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;padding:11px 0;
  border-bottom:1px solid var(--linea);background:transparent;color:var(--hueso);
  font-family:"Epilogue",sans-serif;text-align:left;
}
#tarjeta-dias .dia-fila:last-child{border-bottom:0}
#tarjeta-dias .dia-fila .cuando{font-size:14.5px;font-weight:500}
#tarjeta-dias .dia-fila .que{
  font-family:"Courier Prime",monospace;font-size:11px;color:var(--humo);
  text-align:right;line-height:1.5;
}

/* El aviso de récord. Aparece y se va solo: celebrar sin estorbar. */
.record-aviso{
  position:fixed;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:1400;padding:14px 16px;border-radius:var(--radio);
  background:rgba(0,255,85,.13);border:1px solid rgba(0,255,85,.42);
  backdrop-filter:blur(14px);
  color:var(--hueso);font-size:14.5px;line-height:1.5;
  animation:subir-aviso .28s cubic-bezier(.22,1,.36,1);
}
.record-aviso.malo{
  background:rgba(255,92,92,.13);border-color:rgba(255,92,92,.42);
}
@keyframes subir-aviso{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .record-aviso{animation:none}
  .vol-barra{transition:none}
}

/* ⚠️ EL MODAL, POR ENCIMA DE LAS HOJAS.
   `.modal` nació con z-index 1000, cuando lo único que había encima del
   contenido era él. Las hojas del diario están a 1200, así que al pedir
   el esfuerzo desde dentro de un entreno el modal se pintaba DETRÁS: el
   botón "Terminar entreno" parecía no hacer nada, y el fondo oscuro
   tampoco se veía porque también quedaba debajo. Un fallo que no da
   ningún error y que solo se ve mirando la pantalla. */
.modal{z-index:1500}

/* Subtítulo dentro de una tarjeta ("Van cortos", "Qué te encaja mejor").
   No existía: lo introdujeron los bloques de micros y movimiento. */
.sub{
  margin:16px 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;opacity:.55;
}
.sub:first-child{margin-top:0}

/* ══════════════════════════════════════════════════════════════
   LO QUE ME FALTA · MICRONUTRIENTES · MOVIMIENTO   (2026-09-06)

   Mismo lenguaje visual que el resto: cristal, plata para lo
   secundario, y color SOLO en lo que hay que mirar.
   ══════════════════════════════════════════════════════════════ */

/* --- Las tareas --- */
.tareas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.tarea{display:flex;gap:12px;align-items:flex-start}
.icono-tarea{
  flex:0 0 34px;height:34px;display:grid;place-items:center;
  border-radius:10px;font-size:16px;line-height:1;
  background:rgba(255,159,64,.14);border:1px solid rgba(255,159,64,.28);
}
.titulo-tarea{margin:0 0 3px;font-weight:600;font-size:15px;line-height:1.3}
.tarea .apunte{margin:0}

/* --- Micronutrientes --- */
.micros{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.micro{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07);
}
.micro:last-child{border-bottom:0;padding-bottom:0}
.micro-nombre{font-size:14px}
.micro-cifra{font-variant-numeric:tabular-nums;font-size:14px;opacity:.85}
.micro-cifra small{opacity:.6;margin-left:3px}
/* El porcentaje es LO QUE HAY QUE MIRAR: es lo único con color. */
.micro-pct{
  font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;
  min-width:48px;text-align:right;
}
.micro.corto .micro-pct{color:#FFB870}
.micro.pasado .micro-pct{color:#FFA9A9}

/* --- Deportes propuestos --- */
.deportes{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:12px}
.deportes li{display:flex;flex-direction:column;gap:3px}
.deportes b{font-size:15px}
.deportes .apunte{margin:0}

/* ⭐ La lista de la compra interactiva (2026-09-11): tachar lo comprado y
   sustituir lo que no gusta. La casilla es un cuadro dibujado, no un
   emoji: los emojis los pinta el sistema y cada móvil ve uno distinto. */
.compra-fila{
  display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--linea);font-size:14px;
}
.compra-fila:last-child{border-bottom:0}
.compra-que{color:var(--humo);min-width:0;overflow-wrap:anywhere}
.compra-precio{font-family:"Courier Prime",monospace;font-size:13px;color:var(--hueso);white-space:nowrap}
.compra-fila .sustituir{grid-column:2 / 4;justify-self:start;margin-top:2px}
.compra-fila .alternativas{grid-column:1 / 4}
.tachar{
  width:24px;height:24px;border-radius:7px;border:1.5px solid var(--plata);
  background:transparent;position:relative;padding:0;
}
.compra-fila.comprado .tachar{background:var(--neon);border-color:var(--neon)}
.compra-fila.comprado .tachar::after{
  content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid #04120A;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.compra-fila.comprado .compra-que{text-decoration:line-through;opacity:.5}
.compra-fila.comprado .compra-precio{opacity:.4}