:root{
  /* NEGRO + colores vivos */
  --bg:#000000; --bg2:#0a0c10; --card:#0e1116; --card2:#141922;
  --line:#232a36; --line2:#2f394a;
  --tx:#f4f7fb; --tx2:#a7b2c2; --tx3:#6f7b8c;
  --accent:#22e07a; --accent2:#0f2a1c;
  --glow:0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.6);
  --r:18px;
  /* Los colores del torque: uno por articulación, más el de los flexores
     cuando la carga cruza al otro lado. Viven aquí y no en el laboratorio
     porque los usan las dos pantallas — tenerlos solo allí dejaba los
     trazos de la app sin color, y una línea sin color no se dibuja. */
  --q0:#38bdf8; --c:#fbbf24; --f:#c084fc;
  --marca:#ff6b52; --cuerpo:#c3ccda;
}
:root[data-theme="light"]{
  --bg:#f5f6f8; --bg2:#ffffff; --card:#ffffff; --card2:#f2f4f7;
  --line:#e3e6ec; --line2:#d2d8e0;
  --tx:#0d1117; --tx2:#4d5765; --tx3:#8992a0;
  --accent:#12a35c; --accent2:#e6f7ee;
  --glow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.07);
  --q0:#0284c7; --c:#b45309; --f:#7c3aed;
  --marca:#e0452a; --cuerpo:#2b3647;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--tx);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-size:15px;line-height:1.45;padding-bottom:118px;
  -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(900px 480px at 15% -8%, rgba(34,224,122,.10), transparent 62%),
    radial-gradient(760px 420px at 92% 4%, rgba(56,189,248,.09), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* La pantalla solo se mueve hacia arriba y hacia abajo: `pan-y` descarta el
   arrastre lateral, y al no ser `auto` ni `manipulation` tampoco hay zoom por
   doble o triple toque. `pinch-zoom` mantiene vivo el pellizco. */
/* `overscroll-behavior:none` quita el rebote elástico en los dos ejes: era
   lo que hacía que la barra inferior pareciera despegarse del contenido. */
html,body{touch-action:pan-y pinch-zoom;overflow-x:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;
  touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.hidden{display:none !important}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:10px;padding:12px 0}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand img{height:28px;width:auto;display:block}
.brand .wm{font-size:15px;font-weight:500;letter-spacing:.14em;line-height:1;
  display:flex;flex-direction:column;gap:2px;color:var(--tx)}
.brand .wm b{font-weight:800;letter-spacing:.06em;font-size:16px}
/* El logo tiene dos versiones: la de trazo claro para fondos oscuros y
   la de trazo oscuro para fondos claros. Vale para la cabecera y el acceso. */
:root[data-theme="dark"] .lg-light{display:none !important}
:root[data-theme="light"] .lg-dark{display:none !important}
.spacer{flex:1}
.iconbtn{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);font-size:15px;position:relative}
.iconbtn:active{transform:scale(.93)}
.iconbtn .pip{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg)}

.datebar{display:flex;align-items:center;gap:8px;padding:0 0 12px}
.datebar .nav{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--tx2)}
.dlabel{flex:1;text-align:center}
.dlabel b{display:block;font-size:15px;letter-spacing:-.02em}
.dlabel span{display:block;font-size:11.5px;color:var(--tx3)}
.today-btn{font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:10px;background:var(--accent2);color:var(--accent)}

/* ---------- Saludo ---------- */
.saludo{display:flex;align-items:center;gap:11px;margin:14px 0 13px}
.ava{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(from 200deg,#22e07a,#38bdf8,#a78bfa,#22e07a);
  color:#05070a;font-weight:800;font-size:17px;box-shadow:inset 0 0 0 3px var(--bg)}
.saludo .who{min-width:0;flex:1}
.saludo .who small{display:block;font-size:12px;color:var(--tx3);line-height:1.3}
.saludo .who b{display:block;font-size:19px;letter-spacing:-.03em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);font-size:15px;color:var(--tx2)}
.icon-btn:active{transform:scale(.93)}

/* ---------- Tarjeta de la semana ---------- */
.spot{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 15px 12px;position:relative;overflow:hidden;box-shadow:var(--glow)}
.spot > *{position:relative;z-index:1}
.spot-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.spot-top .lapso{font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 7px;
  border-radius:7px;background:#38bdf829;color:#38bdf8}
.spot-top b{font-size:15.5px;letter-spacing:-.02em}
.spot-top .rumbo{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 8px;border-radius:99px;white-space:nowrap}
.spot h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em}
.spot .sub{margin:2px 0 0;font-size:12px;color:var(--tx3)}
.spot-grid{display:flex;align-items:flex-end;gap:12px;margin-top:8px}
.spot-grid svg{flex:1;min-width:0;height:46px}
.spot-num{text-align:right;flex:none;line-height:1}
.spot-num b{font-size:32px;font-weight:800;letter-spacing:-.04em}
.spot-num span{display:block;font-size:10px;color:var(--tx3);margin-top:3px}
.spot-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}

/* ---------- Sueño ---------- */
.sleepcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--glow);position:relative;overflow:hidden}
:root[data-theme="dark"] .sleepcard{background:
  linear-gradient(140deg,rgba(129,140,248,.13),transparent 58%),var(--card);border-color:#2a3350}
.sl-top{display:flex;align-items:center;gap:14px}
.sl-score{width:66px;height:66px;border-radius:20px;flex:none;display:grid;place-items:center;
  background:#818cf818;border:1px solid #818cf844;font-size:22px;font-weight:800;letter-spacing:-.04em;color:#a5b4fc}
.sl-t b{display:block;font-size:15px;letter-spacing:-.02em}
.sl-t span{display:block;font-size:12.5px;color:var(--tx2);margin-top:2px}
.sl-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.sl-meta div{flex:1 1 88px;min-width:0;background:var(--card2);border:1px solid var(--line);
  border-radius:12px;padding:9px 11px}
.sl-meta b{display:block;font-size:15px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.sl-meta span{display:block;font-size:10px;line-height:1.3;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere;hyphens:auto}
.sl-cta{width:100%;margin-top:13px;padding:13px;border-radius:13px;font-weight:700;font-size:14.5px;
  background:linear-gradient(92deg,#818cf8,#a78bfa);color:#0a0c10}

/* ---------- Tarjetas hábito ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.hcard{--a:var(--accent);background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;box-shadow:var(--glow);position:relative;overflow:hidden;transition:border-color .2s}
:root[data-theme="dark"] .hcard{background:linear-gradient(150deg,color-mix(in srgb,var(--a) 9%,transparent),transparent 60%),var(--card)}
.hcard.done{border-color:color-mix(in srgb,var(--a) 55%,transparent)}
.hcard .bar{position:absolute;left:0;bottom:0;height:3px;background:var(--a);
  box-shadow:0 0 12px var(--a);transition:width .35s cubic-bezier(.4,0,.2,1)}
.hh{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
.emoji{font-size:20px;line-height:1.15;width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--a) 15%,transparent);border:1px solid color-mix(in srgb,var(--a) 30%,transparent)}
.hname{font-weight:700;font-size:14.5px;letter-spacing:-.02em}
.hgoal{font-size:11.5px;color:var(--tx3);margin-top:1px}
.streak{margin-left:auto;font-size:11px;font-weight:700;color:var(--tx3);white-space:nowrap}
.streak.on{color:#fbbf24}
.hval{font-size:25px;font-weight:800;letter-spacing:-.04em;line-height:1}
.hval small{font-size:12px;font-weight:500;color:var(--tx3);margin-left:3px;letter-spacing:0}
.row{display:flex;align-items:center;gap:8px;margin-top:11px}
.stepper{display:flex;align-items:center;gap:6px;margin-left:auto}
.sbtn{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:var(--card2);
  display:grid;place-items:center;font-size:18px;font-weight:700;color:var(--tx2)}
.sbtn:active{transform:scale(.9)}
.sbtn.plus{background:var(--a);color:#05070a;border-color:transparent;box-shadow:0 4px 16px color-mix(in srgb,var(--a) 35%,transparent)}
.toggle{width:48px;height:48px;border-radius:15px;border:2px solid var(--line);background:var(--card2);
  display:grid;place-items:center;font-size:21px;margin-left:auto;transition:.18s;color:var(--tx3)}
.toggle.on{background:var(--a);border-color:var(--a);color:#05070a;box-shadow:0 6px 20px color-mix(in srgb,var(--a) 40%,transparent)}
.dots{display:flex;gap:4px;margin-top:10px}
.dot{flex:1;height:5px;border-radius:3px;background:var(--line)}
.dot.f{background:var(--a)}
.dot.p{background:var(--a);opacity:.4}

/* ---------- Secciones ---------- */
section{margin:22px 0}
.stitle{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--tx3)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  box-shadow:var(--glow);overflow:hidden;max-width:100%}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:13px;
  min-width:0;overflow:hidden}
.stat b{display:block;font-size:23px;font-weight:800;letter-spacing:-.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:11px;color:var(--tx3);display:block;overflow-wrap:anywhere}
.chart{display:flex;align-items:flex-end;gap:4px;height:130px;padding-top:8px;
  overflow:hidden;max-width:100%}
.cb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;height:100%;overflow:hidden}
.cbar{width:100%;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 45%,transparent));
  border-radius:6px 6px 3px 3px;min-height:3px;max-height:100%;flex:0 1 auto;transition:height .3s}
.cbar.sleep{background:linear-gradient(180deg,#a78bfa,#818cf866)}
.cbar.empty{background:var(--line)}
.cbl{font-size:9.5px;color:var(--tx3);white-space:nowrap;flex:none;max-width:100%;overflow:hidden}
.hlbl{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:10.5px;
  color:var(--tx3);margin-top:10px;max-width:100%}
.hlbl b{width:11px;height:11px;border-radius:3px;display:inline-block}

/* Avisos del panel del entrenador */
.avisos{background:color-mix(in srgb,#f59e0b 10%,transparent);
  border:1px solid color-mix(in srgb,#f59e0b 32%,transparent);
  border-radius:12px;padding:10px 12px;margin-bottom:14px}
.avisos p{margin:0 0 5px;font-size:12.5px;line-height:1.45}
.avisos p:last-child{margin-bottom:0}

/* Plan del mes */
.plsem{border:1px solid var(--line);border-radius:14px;padding:12px 13px;margin-bottom:10px;
  background:var(--card2)}
.plsem.descarga{border-color:color-mix(in srgb,#a78bfa 40%,transparent);
  background:color-mix(in srgb,#a78bfa 10%,transparent)}
.pl-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pl-h b{font-size:14px;font-weight:800;letter-spacing:-.02em}
.pl-h span{font-size:11.5px;font-weight:700;color:var(--tx3);flex:none}
.plsem p{margin:5px 0 9px;font-size:12px;color:var(--tx2);line-height:1.45}
.pl-dias{display:flex;flex-wrap:wrap;gap:5px}
.pl-dias span{font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:8px;
  background:var(--card);border:1px solid var(--line);color:var(--tx2)}
.pl-dias span i{font-style:normal;color:var(--tx3);margin-right:5px}

/* La biblioteca y la ficha se abren encima de la ventana de entrenamiento. */
#bibModal{z-index:110}
#fiModal{z-index:120}

/* Biblioteca de ejercicios */
.exnom{flex:1;min-width:0;text-align:left;font-size:15px;font-weight:700;padding:4px 0;
  border-bottom:1px dashed var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exnom.vacio{color:var(--tx3);font-weight:600}
.exinfo{flex:none;width:26px;height:26px;border-radius:8px;font-size:14px;
  color:var(--tx3);background:var(--card2);border:1px solid var(--line)}
.exinfo:active{color:var(--accent);border-color:var(--accent)}
.chipsg{display:flex;gap:6px;overflow-x:auto;padding:10px 0 12px;margin:0 -2px}
.chipsg::-webkit-scrollbar{display:none}
.chipg{--g:var(--accent);flex:none;font-size:12px;font-weight:700;padding:7px 12px;
  border-radius:99px;border:1px solid var(--line);background:var(--card2);color:var(--tx3)}
.chipg.on{border-color:var(--g);background:color-mix(in srgb,var(--g) 15%,transparent);color:var(--g)}
.bibi{display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line)}
.bibi:last-child{border-bottom:none}
.bibsel{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 0}
.bibsel .pt{width:9px;height:9px;border-radius:3px;flex:none}
.bibsel .tx{min-width:0}
.bibsel .tx b{display:block;font-size:14px;font-weight:700;line-height:1.25}
.bibsel .tx span{display:block;font-size:11.5px;color:var(--tx3)}
/* El torque máximo de cada ejercicio, al elegirlo: para saber qué estás
   eligiendo antes de elegirlo. */
.bibnota{font-size:11.5px;line-height:1.45;color:var(--tx3);margin:8px 0 0}
.chispa{flex:none;width:46px;height:22px;display:block;color:var(--tx)}
.bibtq{flex:none;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--tx2);white-space:nowrap}
.bibtq i{font-style:normal;font-size:9.5px;font-weight:700;color:var(--tx3);margin-left:2px}
/* Qué trabaja cada ejercicio, en la propia hoja del entrenamiento. */
.exmec{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;
  font-size:11.5px;line-height:1.4;color:var(--tx3);padding:2px 0 8px}
.exmec b{color:var(--tx2);font-weight:700}
.exmec > span{flex:1;min-width:0}
.exmec i{font-style:normal;font-size:10px;color:var(--tx3);flex:none}
.exmec.abierta{color:var(--tx2)}
/* El panel en vivo: el esquema, la curva y los números moviéndose. */
.mecpanel{background:var(--card2);border:1px solid var(--line);border-radius:14px;
  padding:10px 12px 12px;margin:0 0 10px}
.mecdos{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center}
.mecfig svg, .meccur svg{width:100%;height:auto;display:block;color:var(--tx)}
/* Las lecturas como en una lámina: el número grande, debajo qué mide, y
   el color que lo ata a su línea en la curva. */
.meclec{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.meclec > span{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:7px 9px;font-size:11px;color:var(--tx3);font-weight:600;min-width:0}
.meclec u{display:block;width:16px;height:3px;border-radius:2px;margin-bottom:4px}
.meclec b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx)}
.meclec em{display:block;font-style:normal;font-size:10.5px;line-height:1.35;
  margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.meclec .a u{background:var(--q0)} .meclec .b u{background:var(--c)}
.meclec .a b{color:var(--q0)} .meclec .b b{color:var(--c)}
/* El control del recorrido con su botón: ver el movimiento es lo que
   explica la curva. */
.reproduce{display:flex;align-items:center;gap:9px;margin:8px 0 2px}
.reproduce .mecsl{flex:1;min-width:0;margin:0}
.play{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--accent);
  font-size:11px;line-height:1;padding-left:2px}
.play.on{background:var(--accent);color:#fff;border-color:var(--accent);padding-left:0}
.mecsl{width:100%;margin:8px 0 2px;accent-color:var(--accent)}
.mecpie{margin:0;font-size:11px;color:var(--tx3);line-height:1.45}
.mecpie b{color:var(--tx2)}
.mecpor{margin:0;font-size:12px;color:var(--tx2);line-height:1.5}
.meclab{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;
  color:var(--accent);text-decoration:none}
@media (max-width:420px){ .mecdos{grid-template-columns:1fr} }
/* El bloque de mecánica dentro de la ficha. */
.fibloque.mec .mecfila{display:flex;align-items:baseline;gap:6px;margin:6px 0}
.fibloque.mec .mecfila b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx)}
.fibloque.mec .mecfila i{font-style:normal;font-size:11px;font-weight:700;color:var(--tx3)}
.fibloque.mec .mecfila span{font-size:12.5px;color:var(--tx2);font-weight:600}
.fibloque.mec p{margin:8px 0 0;font-size:12.5px;color:var(--tx2);line-height:1.5}
.fibloque.mec p.porque{color:var(--tx3);font-size:12px}
#bibLista{max-height:46vh;overflow-y:auto;overscroll-behavior:contain}

/* Ficha del ejercicio */
.fidibujo{text-align:center;background:var(--card2);border:1px solid var(--line);
  border-radius:15px;padding:14px 10px 10px;margin-bottom:12px}
.fidibujo .cuerpo{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;
  color:var(--tx)}   /* el cuerpo, neutro: el color es solo del músculo */
.fidibujo span{display:block;font-size:10.5px;color:var(--tx3);margin-top:4px}
.fibloque{border-radius:13px;padding:12px 13px;margin-bottom:10px;border:1px solid var(--line)}
.fibloque span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:6px}
.fibloque p{margin:0;font-size:13.5px;line-height:1.5}
.fibloque ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
.fibloque li{margin-bottom:5px}
.fibloque li:last-child{margin-bottom:0}
.fibloque.sentir{background:var(--accent2);
  border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.fibloque.sentir span{color:var(--accent)}
.fibloque.errores{background:var(--card2)}
.fibloque.errores span{color:#fb7185}

/* El siguiente paso pendiente, encima de la tarjeta de entrenamiento */
.pista{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 14px;border-radius:14px;margin-bottom:9px;
  background:color-mix(in srgb,#38bdf8 11%,var(--card));
  border:1px solid color-mix(in srgb,#38bdf8 34%,transparent)}
.pista:active{transform:scale(.99)}
.pista .n{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#38bdf8;background:color-mix(in srgb,#38bdf8 16%,transparent)}
.pista .tx{flex:1;min-width:0}
.pista .tx b{display:block;font-size:14px;font-weight:700}
.pista .tx span{display:block;font-size:12px;color:var(--tx2)}

/* Tarjeta de entrenamiento en la pantalla de Hoy */
.entrenar{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:17px 16px;border-radius:var(--r);box-shadow:var(--glow);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);transition:.15s}
.entrenar:active{transform:scale(.985)}
.entrenar .ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-size:22px;background:var(--accent2);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.entrenar .tx{flex:1;min-width:0}
.entrenar .tx b{display:block;font-size:16px;letter-spacing:-.025em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entrenar .tx span{display:block;font-size:12.5px;color:var(--tx2);margin-top:2px}
.entrenar .go{flex:none;font-size:12.5px;font-weight:800;color:var(--accent)}
.entrenar.hecho{background:var(--card);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}

/* Test de nivel */
.nvq{font-size:16px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;line-height:1.3}
.nvayuda{font-size:12px;color:var(--tx3);margin:0 0 12px}
.nvop{display:block;width:100%;text-align:left;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--card2);font-size:14px;font-weight:600;
  margin-top:8px;transition:.15s}
.nvop.on{border-color:var(--accent);background:var(--accent2);color:var(--accent);font-weight:800}
.nvres{text-align:center;padding:18px 14px;border-radius:15px;background:var(--accent2);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.nvres .em{font-size:40px;line-height:1}
.nvres b{display:block;font-size:21px;letter-spacing:-.03em;margin-top:8px;color:var(--accent)}
.nvres span{display:block;font-size:13px;color:var(--tx2);margin-top:4px}
.nvres p{margin:12px 0 0;font-size:13px;color:var(--tx2);line-height:1.5}
.btn:disabled{opacity:.45}

/* Consulta */
.preguntas{display:flex;flex-direction:column;gap:8px}
.preg{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;padding:12px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--card2);font-size:13.5px;font-weight:700}
.preg i{font-style:normal;color:var(--tx3);font-size:17px;flex:none}
.preg:active{border-color:var(--accent);background:var(--accent2);color:var(--accent)}
.cn-bloque{border-radius:13px;padding:12px 13px;margin-bottom:10px}
.cn-bloque span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:5px}
.cn-bloque p{margin:0;font-size:13.5px;line-height:1.5}
.cn-ref{display:block;margin-top:9px;padding:9px 10px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);
  font-size:11.5px;line-height:1.45;color:var(--tx2);text-decoration:none}
.cn-ref .et{display:block;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.cn-ref.libro{color:var(--tx3);font-style:italic}
.cn-ref:active{border-color:var(--accent)}
.cn-bloque.dato{background:var(--card2);border:1px solid var(--line)}
.cn-bloque.dato span{color:var(--tx3)}
.cn-bloque.accion{background:var(--accent2);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.cn-bloque.accion span{color:var(--accent)}
.cn-bloque.accion p{font-weight:700}
.cn-bloque.porque{background:var(--card2);border:1px solid var(--line)}
.cn-bloque.porque span{color:var(--tx3)}
.cn-bloque.porque p{color:var(--tx2)}

/* Selector de periodo del informe */
.periodos{display:flex;gap:6px;background:var(--card2);border:1px solid var(--line);
  border-radius:13px;padding:4px;margin:14px 0 14px}
.periodos button{flex:1;padding:9px 6px;border-radius:10px;font-size:13px;font-weight:700;
  color:var(--tx3);transition:.15s}
.periodos button.on{background:var(--card);color:var(--tx);
  box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* Ejercicio por ejercicio en el informe */
.exrow{padding:10px 0;border-bottom:1px solid var(--line)}
.exrow:last-child{border-bottom:none}
.exr-h{display:flex;align-items:center;gap:8px}
.exr-h .pt{width:9px;height:9px;border-radius:3px;flex:none}
.exr-h b{flex:1;min-width:0;font-size:13.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exr-h .v{font-size:13px;font-weight:800;flex:none;font-variant-numeric:tabular-nums}
.exr-d{font-size:11.5px;color:var(--tx3);margin:3px 0 0 17px}
.exr-d i{font-style:normal;font-weight:800;margin-left:6px}

/* ---------- Volumen por grupo muscular ---------- */
.vg{padding:11px 0;border-bottom:1px solid var(--line)}
.vg:last-of-type{border-bottom:none}
.vg-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vg-top b{font-size:14px;font-weight:700}
.vg-top span{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.vg-top span i{font-style:normal;font-size:11px;font-weight:600;color:var(--tx3)}
.vg-bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:7px 0 5px}
.vg-bar i{display:block;height:100%;border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.vg-pie{font-size:11px;font-weight:700}

/* El grupo muscular del ejercicio, dentro de la ficha de entrenamiento */
.exgrp{display:flex;align-items:center;gap:9px;margin:2px 0 9px}
.exgrp select{--g:var(--accent);font:inherit;font-size:12px;font-weight:700;
  color:var(--g);background:color-mix(in srgb,var(--g) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--g) 34%,transparent);
  border-radius:9px;padding:5px 8px;appearance:none;-webkit-appearance:none}
.exgrp > span{font-size:11.5px;color:var(--tx3);font-weight:700}

/* ---------- Tabs ---------- */
nav.tabs{position:fixed;bottom:0;left:0;right:0;z-index:60;
  transform:translateZ(0);backface-visibility:hidden;
  background:color-mix(in srgb,var(--bg2) 88%,transparent);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
nav.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;
  border-radius:13px;font-size:10.5px;font-weight:700;color:var(--tx3);transition:.15s}
nav.tabs button i{font-style:normal;font-size:19px;line-height:1}
nav.tabs button.on{color:var(--accent);background:var(--accent2)}
/* El "+" toma el color de acento y su texto el del fondo, así contrasta
   igual de bien sobre el verde claro del tema oscuro y el verde oscuro del claro. */
nav.tabs .fab{flex:none;width:54px;height:54px;border-radius:50%;margin:-28px 6px 0;
  display:grid;place-items:center;font-size:28px;font-weight:300;line-height:1;
  background:var(--accent);color:var(--bg2);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.45),0 0 0 5px var(--bg)}
nav.tabs .fab:active{transform:scale(.93)}

/* ---------- Modales ---------- */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.66);display:none;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.modal.open{display:flex}
.sheet{background:var(--bg2);border:1px solid var(--line);border-bottom:none;width:100%;max-width:520px;
  border-radius:24px 24px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  max-height:90vh;overflow:auto;animation:up .28s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}

/* Los hábitos son una lista larga: la ventana se queda a media pantalla y se
   desplaza por dentro, así se ve que es una ventana y no otra pantalla.
   El título se queda arriba mientras la lista corre por debajo. */
#raModal .sheet{max-height:70vh;overscroll-behavior:contain}
#raModal .sheet h3{position:sticky;top:-22px;z-index:2;background:var(--bg2);
  margin:-4px 0 0;padding:4px 0 2px}
#raModal .sheet .sub{position:sticky;top:8px;z-index:2;background:var(--bg2);
  margin:0 0 12px;padding-bottom:10px}
@media(min-width:560px){.modal{align-items:center}.sheet{border-radius:22px;border-bottom:1px solid var(--line)}}
.sheet h3{margin:0 0 4px;font-size:19px;letter-spacing:-.03em}
.sheet .sub{margin:0 0 18px;font-size:13px;color:var(--tx2)}
label.f{display:block;margin-bottom:14px}
label.f span{display:block;font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:6px}
.inp{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);outline:none;font-size:15px}
.inp:focus{border-color:var(--accent)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{width:100%;padding:14px;border-radius:13px;background:var(--accent);color:#05070a;font-weight:800;font-size:15px;margin-top:6px}
.btn.grape{background:linear-gradient(92deg,#818cf8,#a78bfa)}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--tx);font-weight:700}
.btn.danger{background:transparent;color:#f87171;border:1px solid #f8717155;font-weight:700}
.epick{display:flex;gap:6px;flex-wrap:wrap}
.epick button{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);font-size:19px}
.epick button.on{border-color:var(--accent);background:var(--accent2);box-shadow:inset 0 0 0 1px var(--accent)}
.cpick{display:flex;gap:8px;flex-wrap:wrap}
.cpick button{width:32px;height:32px;border-radius:10px;border:2px solid transparent}
.cpick button.on{border-color:var(--tx);box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--tx)}

/* escalas 1-5 */
.scale{display:flex;gap:7px}
.scale button{flex:1;aspect-ratio:1;min-height:56px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:23px;transition:.15s}
.scale button small{font-size:9px;color:var(--tx3);font-weight:700}
.scale button.on{border-color:#a78bfa;background:#a78bfa1f;box-shadow:inset 0 0 0 1px #a78bfa}
.hours{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px}
.hours b{font-size:26px;font-weight:800;letter-spacing:-.04em;min-width:74px}
.hours .stepper{margin-left:auto}

/* ---------- Listas ---------- */
.hrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:none}
.hrow .m{font-size:19px;width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--card2);border:1px solid var(--line)}
.hrow .t{flex:1;min-width:0}
.hrow .t b{display:block;font-size:14.5px;font-weight:700}
.hrow .t span{font-size:12px;color:var(--tx3)}
.mini{font-size:12.5px;padding:7px 11px;border-radius:10px;border:1px solid var(--line);background:var(--card2);font-weight:700}
.empty{text-align:center;color:var(--tx3);padding:34px 16px;font-size:14px}
.hist{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.hist:last-child{border-bottom:none}
.hd{font-size:12.5px;font-weight:700;width:152px;flex:none}
.hp{flex:1;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.hp i{display:block;height:100%;background:linear-gradient(92deg,var(--accent),#38bdf8);border-radius:4px}
.hn{font-size:12px;color:var(--tx3);width:44px;text-align:right}

/* switch */
.sw{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sw:last-of-type{border-bottom:none}
.sw .t{flex:1}
.sw .t b{display:block;font-size:14.5px;font-weight:700}
.sw .t span{font-size:12px;color:var(--tx3)}
.knob{width:50px;height:30px;border-radius:99px;background:var(--line);position:relative;flex:none;transition:.2s}
.knob:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;transition:.2s cubic-bezier(.3,1.4,.5,1)}
.knob.on{background:var(--accent)}
.knob.on:after{transform:translateX(20px)}

.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(12px);
  background:var(--tx);color:var(--bg2);padding:11px 17px;border-radius:99px;font-size:13.5px;font-weight:700;
  opacity:0;transition:.25s;z-index:200;pointer-events:none;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.banner{display:flex;align-items:center;gap:11px;background:linear-gradient(92deg,#22e07a18,#38bdf818);
  border:1px solid #22e07a44;border-radius:15px;padding:12px 14px;margin:14px 0}
.banner .t{flex:1;font-size:13px}
.banner .t b{display:block;font-size:14px}
.banner button{font-size:12.5px;font-weight:800;padding:9px 13px;border-radius:10px;background:var(--accent);color:#05070a;white-space:nowrap}
.banner .x{background:transparent;color:var(--tx3);padding:6px}
.steps{counter-reset:st;margin:0;padding:0;list-style:none}
.steps li{counter-increment:st;position:relative;padding:0 0 12px 34px;font-size:13.5px;color:var(--tx2);line-height:1.5}
.steps li:before{content:counter(st);position:absolute;left:0;top:0;width:23px;height:23px;border-radius:50%;
  background:var(--accent2);color:var(--accent);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.steps li b{color:var(--tx)}
.code{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--tx2);
  word-break:break-all;max-height:120px;overflow:auto;margin-top:8px}

/* ---------- Entrenamiento ---------- */
.exbox{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:12px;margin-bottom:10px}
.exhead{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.exhead input{flex:1;background:transparent;border:none;outline:none;font-size:15px;font-weight:700;padding:2px 0;
  border-bottom:1px dashed var(--line)}
.exhead input:focus{border-bottom-color:var(--accent)}
.exdel{color:var(--tx3);font-size:16px;padding:4px 6px}
.setrow{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.setn{width:22px;height:22px;flex:none;font-size:11px;font-weight:800;color:var(--tx3);text-align:center;
  background:none;border:0;padding:0;border-radius:50%;cursor:pointer}
/* Serie prevista por el plan: está escrita, pero todavía no la has hecho. */
.setrow.prop .setn{color:var(--accent);border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.setrow.prop .fld input{border-style:dashed;color:var(--tx3)}
.setrow.prop .eq{font-weight:600;opacity:.7}
.setrow .fld{flex:1;position:relative}
.setrow .fld input{width:100%;padding:9px 34px 9px 11px;border-radius:11px;border:1px solid var(--line);
  background:var(--card2);outline:none;font-size:15px;font-weight:700;text-align:left}
.setrow .fld input:focus{border-color:var(--accent)}
.setrow .fld span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--tx3);pointer-events:none}
.setrow .eq{font-size:11px;color:var(--tx3);width:62px;text-align:right;flex:none;font-weight:700}
/* El RIR es estrecho a propósito: cabe junto al peso y las repeticiones
   sin empujar nada fuera de la pantalla del teléfono. */
.setrow .fld.rir{flex:0 0 74px}
.setrow .fld.rir input{padding-right:30px;text-align:center}
@media(max-width:400px){ .setrow .eq{display:none} }

/* Objetivo de entrenamiento */
.obj{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 12px;border-radius:13px;border:1px solid var(--line);
  background:var(--card2);margin-bottom:8px;transition:border-color .15s}
.obj.on{border-color:var(--accent);background:var(--accent2)}
.obj .em{width:36px;height:36px;border-radius:11px;flex:none;display:grid;
  place-items:center;font-size:17px;background:var(--card);border:1px solid var(--line)}
.obj.on .em{border-color:transparent}
.obj .tx{flex:1;min-width:0}
.obj .tx b{display:block;font-size:14px;font-weight:700}
.obj .tx span{display:block;font-size:11.5px;color:var(--tx3)}
.obj .ck{flex:none;font-size:15px;font-weight:800;color:var(--accent);width:16px;text-align:center}
.objdet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}
.objdet div{background:var(--card2);border:1px solid var(--line);border-radius:11px;
  padding:9px;text-align:center;min-width:0}
.objdet b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em}
.objdet span{display:block;font-size:9.5px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* Rutina */
.dsem{display:flex;gap:8px;flex-wrap:wrap}
.dsem button{flex:1 1 70px;padding:12px 8px;border-radius:12px;border:1px solid var(--line);
  background:var(--card2);font-size:13.5px;font-weight:700}
.dsem button:active{border-color:var(--accent);background:var(--accent2);color:var(--accent)}
.rutdia{border:1px solid var(--line);border-radius:13px;padding:11px 12px;margin-bottom:8px;background:var(--card2)}
.rutdia.on{border-color:var(--accent);background:var(--accent2)}
.rd-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rd-h b{font-size:13.5px;font-weight:700}
.rd-h span{font-size:11px;font-weight:700;color:var(--tx3);flex:none}
.rd-ex{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.rd-ex span{--g:var(--accent);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:7px;
  color:var(--g);background:color-mix(in srgb,var(--g) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--g) 28%,transparent)}

/* La etiqueta del objetivo dentro de la ficha de entrenamiento */
.objtag{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:-6px 0 12px;
  padding:8px 11px;border-radius:11px;background:var(--accent2);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.objtag b{font-size:12.5px;font-weight:800;color:var(--accent)}
.objtag span{font-size:11.5px;color:var(--tx2)}

/* Propuesta de sesión progresiva */
.prop{border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border-radius:15px;padding:13px;margin-bottom:12px}
.prop-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.prop-top b{display:block;font-size:14.5px;letter-spacing:-.02em}
.prop-top span{display:block;font-size:11.5px;color:var(--tx3)}
.prop-ex{padding:9px 0;border-top:1px solid var(--line)}
.prop-h{display:flex;align-items:baseline;gap:7px}
.prop-h i{font-style:normal;font-size:13px;color:var(--accent);flex:none}
.prop-h b{font-size:13.5px;font-weight:700;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prop-h span{font-size:12px;font-weight:800;color:var(--tx2);flex:none;
  font-variant-numeric:tabular-nums}
.prop-ex p{margin:3px 0 0;font-size:11.5px;color:var(--tx3);line-height:1.4}

/* Resumen y evaluación del ejercicio */
.exmet{display:flex;gap:8px;margin-top:9px}
.exmet div{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:11px;
  padding:8px 10px;text-align:center;min-width:0}
.exmet b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em}
.exmet span{display:block;font-size:9.5px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.exeval{width:100%;margin-top:9px;font-size:12.5px;font-weight:700;padding:9px;
  border-radius:11px;border:1px dashed var(--line);color:var(--tx2);background:var(--card2)}
.eps{font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px;white-space:nowrap;flex:none}

/* Deslizadores de la evaluación */
.evq{margin-bottom:16px}
.evq b{display:block;font-size:14px;font-weight:700}
.evq p{margin:1px 0 8px;font-size:12px;color:var(--tx3)}
.evq input[type=range]{width:100%;accent-color:var(--accent);height:26px}
.evesc{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx3);
  font-weight:700;margin-top:-4px}
.evtxt{font-size:12px;font-style:italic;color:var(--tx2);background:var(--card2);
  border-radius:9px;padding:7px 10px;margin-top:7px}
.evver{display:flex;align-items:center;gap:10px;border-radius:13px;padding:12px;margin:4px 0 14px}
.evver .lv{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:none}
.evver b{display:block;font-size:13.5px}
.evver span{display:block;font-size:11.5px;color:var(--tx2)}
.evver .pt{margin-left:auto;font-size:12px;font-weight:800;flex:none}
.exfoot{display:flex;align-items:center;gap:8px;margin-top:4px}
.addset{font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:10px;background:var(--card2);border:1px solid var(--line)}
.exsub{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--accent)}
.total{display:flex;align-items:center;gap:14px;background:linear-gradient(100deg,#22e07a1f,#38bdf81a);
  border:1px solid #22e07a44;border-radius:16px;padding:15px;margin:14px 0}
.total b{font-size:29px;font-weight:800;letter-spacing:-.04em;line-height:1}
.total span{font-size:11.5px;color:var(--tx2);display:block}
.total .side{margin-left:auto;text-align:right;font-size:12px;color:var(--tx2);line-height:1.5}

/* ---------- Alimentación ---------- */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;transition:.15s}
.tag.on{border-color:#2dd4bf;background:#2dd4bf1f;color:#5eead4;box-shadow:inset 0 0 0 1px #2dd4bf}
.risk{display:flex;align-items:center;gap:12px;border-radius:16px;padding:14px;margin:14px 0;border:1px solid}
.risk .lv{width:52px;height:52px;border-radius:15px;flex:none;display:grid;place-items:center;font-size:24px}
.risk b{display:block;font-size:15px;letter-spacing:-.02em}
.risk span{font-size:12.5px;color:var(--tx2)}
.rk-ok{background:#22e07a12;border-color:#22e07a44}
.rk-warn{background:#fbbf2412;border-color:#fbbf2455}
.rk-bad{background:#fb718518;border-color:#fb718566}
.meter{height:8px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:9px}
.meter i{display:block;height:100%;border-radius:5px;transition:width .3s}
.mini-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--tx3);margin-top:6px;font-weight:700}
.cardbtn{width:100%;margin-top:11px;padding:11px;border-radius:12px;font-weight:700;font-size:13.5px;
  background:var(--card2);border:1px solid var(--line);color:var(--tx)}


/* ---------- Actividad física ---------- */
.actrow{padding:12px 0;border-bottom:1px solid var(--line)}
.actrow:last-child{border-bottom:none}
.actrow .cab{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.actrow .cab b{font-size:14.5px;font-weight:700}
.actrow .campos{display:flex;gap:8px;flex-wrap:wrap}
.actrow .grupo{display:flex;align-items:center;gap:6px;background:var(--card2);
  border:1px solid var(--line);border-radius:12px;padding:4px 8px}
.actrow .grupo.km{padding:4px 10px}
.actrow input{width:56px;padding:7px 4px;border:none;background:transparent;outline:none;
  font-size:16px;font-weight:800;text-align:center;color:var(--tx)}
.actrow .grupo:focus-within{border-color:#f97316}
.actrow .u{font-size:11.5px;color:var(--tx3);font-weight:700}


/* ---------- Salud ---------- */
.sl-meta.libre div{flex:1 1 76px}
.fcrow{padding:11px 0;border-bottom:1px solid var(--line)}
.fcrow:last-of-type{border-bottom:none}
.fcrow span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--tx3);margin-bottom:3px}
.fcrow b{display:block;font-size:14px;font-weight:600;line-height:1.45;white-space:pre-wrap}
.fcgrupo{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);margin:16px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
.fcgrupo:first-child{margin-top:0;padding-top:0;border-top:none}
.fcnota{font-size:12px;color:var(--tx3);line-height:1.5;margin:0 0 12px}
.fcprog{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.flags{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.flag{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:600;line-height:1.4;
  border-radius:13px;padding:11px 13px;border:1px solid}
.flag span{font-size:15px;line-height:1.2}
.flag.alta{background:#fb718514;border-color:#fb718555;color:#fda4af}
.flag.media{background:#fbbf2412;border-color:#fbbf2455;color:#fcd34d}
.flag.info{background:#38bdf812;border-color:#38bdf855;color:#7dd3fc}
.wbars{display:flex;align-items:flex-end;gap:5px;height:140px;padding-top:8px}
.wb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.wb i{display:block;width:100%;border-radius:6px 6px 3px 3px;min-height:4px}
.wb.peso i{background:linear-gradient(180deg,#2dd4bf,#2dd4bf55)}
.wb span{font-size:9.5px;color:var(--tx3);white-space:nowrap}


.hgoal .pts{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  background:color-mix(in srgb,var(--a) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--a) 30%,transparent);
  color:var(--a);font-weight:800;font-size:10.5px;vertical-align:1px;white-space:nowrap}
.hgoal .pts i{font-style:normal;font-weight:600;opacity:.62}


/* ---------- Calendario mensual ---------- */
.mescab{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.mescab .nav{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;color:var(--tx2);flex:none}
.mestit{flex:1;text-align:center;min-width:0}
.mestit b{display:block;font-size:19px;letter-spacing:-.025em;text-transform:capitalize;line-height:1.15}
.mestit span{display:block;font-size:11.5px;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:6px}
.dow span{text-align:center;font-size:10px;font-weight:800;color:var(--tx3);letter-spacing:.05em}
.mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
/* Días en blanco y el color solo en las etiquetas, para que el mes se lea
   por lo que hay dentro y no por un degradado de fondo. */
.mes{gap:3px}
.dia{min-height:64px;border-radius:8px;background:var(--card2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  position:relative;padding:3px;min-width:0;overflow:hidden;text-align:left}
.dia .num{font-size:11px;font-weight:800;color:var(--tx);line-height:1.2;padding:1px 2px;
  display:flex;align-items:center;gap:3px}
.dia .num small{font-size:8px;font-weight:700;color:var(--tx3);margin-left:auto}
.dia.vacio{background:transparent}
.dia.vacio .num{color:var(--tx3)}
.dia.fuera{opacity:0;pointer-events:none}
.dia.hoy{border-color:var(--tx);box-shadow:inset 0 0 0 1px var(--tx)}
.dia:active{opacity:.7}
.et{font-size:8.5px;font-weight:800;line-height:1.35;border-radius:3px;padding:1px 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.et.turno{background:var(--t);color:#0a0d12}
.et.nota{background:var(--line);color:var(--tx2)}
.et.mas{background:transparent;color:var(--tx3);padding-left:2px}
@media(max-width:400px){ .dia{min-height:58px} .et{font-size:8px} }

/* ---------- Agenda por horas ---------- */
.hora{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid var(--line)}
.hora:last-child{border-bottom:none}
.hora b{width:44px;flex:none;font-size:11.5px;font-weight:800;color:var(--tx3);
  font-variant-numeric:tabular-nums}
.hora.llena b{color:var(--accent)}
.hora input{flex:1;min-width:0;padding:9px 11px;border-radius:11px;border:1px solid transparent;
  background:var(--card2);outline:none;font-size:14px}
.hora input:focus{border-color:var(--accent)}
.hora input::placeholder{color:var(--tx3);opacity:.5}


/* ---------- Turnos ---------- */
.turnos{display:flex;flex-wrap:wrap;gap:7px}
.tchip{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:700}
.tchip .pt{width:11px;height:11px;border-radius:50%;flex:none;background:var(--t)}
.tchip.on{border-color:var(--t);background:color-mix(in srgb,var(--t) 16%,transparent);color:var(--t)}
.tedit{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}
.tedit:last-of-type{border-bottom:none}
.tedit input[type=text]{flex:1;min-width:0;padding:9px 11px;border-radius:11px;
  border:1px solid var(--line);background:var(--card2);outline:none;font-size:14px;font-weight:600}
.tedit input[type=color]{width:38px;height:38px;flex:none;padding:0;border:1px solid var(--line);
  border-radius:11px;background:var(--card2);cursor:pointer}
.tedit input[type=text]:focus{border-color:var(--accent)}


/* ---------- Calendario en blanco ----------
   Redefinimos los tokens dentro de la tarjeta: todo lo de dentro
   (días, etiquetas, leyenda) se adapta solo, sin tocar sus reglas. */
.panel.cal{
  --card2:#ffffff;
  --line:#e4e7ec;
  --tx:#12161c;
  --tx2:#4d5765;
  --tx3:#8b94a1;
  background:#ffffff;
  border-color:#d9dde4;
  color:#12161c;
}
.panel.cal .dia{background:#ffffff;border-color:#e4e7ec}
.panel.cal .dia.vacio{background:#fafbfc}
.panel.cal .dia.hoy{border-color:#12161c;box-shadow:inset 0 0 0 1px #12161c}
.panel.cal .et.nota{background:#eef0f4;color:#4d5765}
.panel.cal .dow span{color:#8b94a1}


/* ---------- Calendario a pantalla completa ---------- */
@media(max-width:700px){
  /* Sin margen negativo: con el titulo grande, subirlo lo metia debajo de la
     cabecera pegajosa y le cortaba el borde de arriba. */
  #view-hist{margin-top:0;padding-top:16px}
  #view-hist section{margin:0}
  /* El encabezado se alinea con la primera columna del calendario y el
     nombre del mes manda: grande y a la izquierda, la navegacion al lado. */
  #view-hist .mescab{margin:0 -8px 4px;padding:0;gap:4px}
  #view-hist .mestit{order:0;text-align:left;padding-left:1px}
  #view-hist .mestit b{font-size:22px;letter-spacing:-.03em;line-height:1.25}
  #view-hist .mestit span{font-size:11.5px;margin-top:2px}
  #view-hist .mescab #mesPrev{order:1}
  #view-hist .mescab #mesNext{order:2}
  #view-hist .mescab #mesHoy{order:3}
  /* rompemos el margen lateral de la página para llegar a los bordes */
  #view-hist .panel.cal{
    max-width:none;
    width:auto;
    margin:10px -16px 0;
    border-radius:0;
    border-left:none;
    border-right:none;
    padding:12px 8px calc(10px + env(safe-area-inset-bottom));
  }
  #view-hist .mes{gap:2px}
  #view-hist .dia{min-height:0;border-radius:7px}
}
.mes{grid-auto-rows:1fr}

@media(max-width:700px){
  body:has(#view-hist:not(.hidden)){padding-bottom:0}
}

/* ---- Peso corporal pedido donde hace falta ---- */
.pesoq{margin:14px 0 0;padding:13px 14px;border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.pesoq.aviso{border-color:color-mix(in srgb,#f59e0b 45%,transparent);
  background:color-mix(in srgb,#f59e0b 9%,transparent)}
.pesoq label{display:block;font-size:13px;font-weight:800;color:var(--tx);margin-bottom:4px}
.pesoq p{margin:0 0 10px;font-size:12px;line-height:1.45;color:var(--tx2)}
.pesof{display:flex;align-items:center;gap:8px}
.pesof .inp{flex:1;min-width:0;margin:0}
.pesof>span{font-size:12px;font-weight:700;color:var(--tx3);flex:none}

/* ---- Cierre del ciclo de cuatro semanas ---- */
.cierre{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin-bottom:10px;
  padding:15px 16px;border-radius:var(--r);background:var(--card);
  border:1px solid color-mix(in srgb,#f59e0b 42%,transparent);transition:.15s}
.cierre:active{transform:scale(.985)}
.cierre .ic{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-size:20px;background:color-mix(in srgb,#f59e0b 13%,transparent)}
.cierre .tx{flex:1;min-width:0}
.cierre .tx b{display:block;font-size:15px;letter-spacing:-.02em;line-height:1.25;color:#b45309}
.cierre .tx span{display:block;font-size:12.5px;color:var(--tx2);margin-top:2px}
.cierre .go{flex:none;font-size:12.5px;font-weight:800;color:#b45309}
[data-theme="dark"] .cierre .tx b,[data-theme="dark"] .cierre .go{color:#fbbf24}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cierre .tx b,
  :root:not([data-theme="light"]) .cierre .go{color:#fbbf24}
}

/* Cambio de peso entre el principio y el final del ciclo */
.pesodelta{display:flex;align-items:baseline;gap:8px;margin-top:9px;font-size:12.5px;color:var(--tx2)}
.pesodelta b{font-size:15px;letter-spacing:-.02em;color:var(--tx)}
.pl-dias span.pasado{opacity:.4;text-decoration:line-through}

/* Lo que el deportista escribió, en la ficha del panel */
.notasdep{margin:0 0 14px;padding:12px 14px;border-radius:13px;border:1px solid var(--line);
  background:var(--card2)}
.notasdep b{display:block;font-size:12.5px;margin-bottom:6px;color:var(--tx2)}
.notasdep p{margin:0 0 5px;font-size:13px;line-height:1.45;color:var(--tx)}
.notasdep p:last-child{margin-bottom:0}
.notasdep i{font-style:normal;font-weight:700;color:var(--tx3);margin-right:6px}

/* Quién pide atención, en la lista del panel */
.atn{display:inline-block;font-size:11px;font-weight:700;line-height:1.3;
  padding:3px 8px;border-radius:999px;margin:0 4px 3px 0;white-space:nowrap;
  color:var(--c,#fbbf24);background:color-mix(in srgb,var(--c,#fbbf24) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c,#fbbf24) 34%,transparent)}
.atns{margin-top:4px}
.tabla tr.urge td:first-child{box-shadow:inset 3px 0 0 #fb7185}

/* La tabla del panel marca dos columnas para esconder en el teléfono, pero la
   regla no existía: en pantalla estrecha había que arrastrar la tabla de lado
   para llegar al sueño. */
@media (max-width:640px){
  .tabla th.ocultar-movil, .tabla td.ocultar-movil{display:none}
}

/* Material extra: banco, barra fija, bandas */
.matex{margin-top:10px;display:grid;gap:8px}
.matx{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:11px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--card2);transition:.15s}
.matx.on{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.matx .ck{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--tx3);border:1px solid var(--line)}
.matx.on .ck{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.matx .tx{min-width:0}
.matx .tx b{display:block;font-size:13.5px;letter-spacing:-.01em}
.matx .tx span{display:block;font-size:11.5px;color:var(--tx3);margin-top:1px}
#bibMaterial{margin-bottom:6px}