:root{
  --inf:#eb6834; --sup:#2a78d6; --cor:#1baf7a;
  --bg:#fcfcfb; --card:#fff; --ink:#0b0b0b; --ink2:#52514e; --ink3:#898781;
  --line:rgba(11,11,11,.10); --trk:rgba(11,11,11,.10);
  --ok:#0ca30c; --warn:#eda100;
  --pad:16px; --r:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --inf:#d95926; --sup:#3987e5; --cor:#199e70;
    --bg:#111110; --card:#1a1a19; --ink:#fff; --ink2:#c3c2b7; --ink3:#898781;
    --line:rgba(255,255,255,.12); --trk:rgba(255,255,255,.12);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:400 16px/1.45 -apple-system,system-ui,"Segoe UI",sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:contain;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* header */
.top{position:sticky;top:0;z-index:10;background:var(--bg);padding:calc(env(safe-area-inset-top) + 10px) var(--pad) 0}
.who{display:flex;gap:8px;align-items:center}
.chip{border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:14px;font-weight:500;background:var(--card)}
.chip.ghost{color:var(--ink2);font-weight:400}
.day{font-size:26px;font-weight:500;margin:10px 0 2px;letter-spacing:-.01em}
.sub{color:var(--ink3);font-size:13px}
.tabs{display:flex;gap:20px;margin-top:12px;border-bottom:1px solid var(--line)}
.tab{padding:8px 0 10px;font-size:15px;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}

main{padding:var(--pad);max-width:640px;margin:0 auto}

/* tarjeta de ejercicio */
.ex{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.ex.done{opacity:.55}
.exhead{display:flex;gap:12px;padding:12px;align-items:stretch;width:100%;text-align:left}
.bar{width:4px;border-radius:2px;flex:none}
.bar.inferior{background:var(--inf)} .bar.superior{background:var(--sup)} .bar.core{background:var(--cor)}
.bar.cardio{background:var(--ink3)}
.thumb{width:76px;height:76px;flex:none;border-radius:8px;overflow:hidden;background:var(--trk);position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.thumb img.b{animation:xf 3s ease-in-out infinite}
@keyframes xf{0%,42%{opacity:0}58%,100%{opacity:1}}
.thumb .noimg{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:var(--ink3);font-size:11px;text-align:center;padding:4px}
.exmain{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.exname{font-weight:500;line-height:1.25}
.exlabel{font-size:11px;color:var(--ink3);letter-spacing:.03em}
.exsetup{font-size:13px;color:var(--ink2);line-height:1.35}
.exdose{font-size:14px;font-variant-numeric:tabular-nums;margin-top:2px}
.exdose b{font-weight:500}
.tickwrap{display:flex;align-items:center;padding-right:4px}
.tick{width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:19px;color:var(--ink3)}
.tick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.flag{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--trk);color:var(--ink2)}
.flag.sub{background:color-mix(in oklab,var(--warn) 22%,transparent)}

/* detalle */
.det{border-top:1px solid var(--line);padding:12px 12px 14px;display:none}
.ex.open .det{display:block}
.det .big{width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#fff;position:relative;margin-bottom:12px}
.det .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.blk{margin:0 0 10px}
.blk h4{margin:0 0 2px;font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase}
.blk p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.blk.hi p{color:var(--ink)}

/* modificadores */
.mods{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.nums{display:flex;gap:8px}
.num{flex:1}
.num label{display:block;font-size:11px;color:var(--ink3);margin-bottom:3px}
.num input{width:100%;height:42px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
  font:500 17px/1 -apple-system,system-ui,sans-serif;text-align:center;font-variant-numeric:tabular-nums;padding:0}
.num input:focus{outline:2px solid var(--sup);outline-offset:-1px}
.reasons{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rs{font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink2)}
.rs.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.note{width:100%;margin-top:10px;min-height:56px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  color:var(--ink);font:inherit;font-size:14px;padding:10px;resize:vertical}
.act{display:flex;gap:8px;margin-top:10px}
.btn{flex:1;height:44px;border-radius:8px;border:1px solid var(--line);font-size:15px;font-weight:500;background:var(--card)}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* semana */
.rings{display:flex;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 12px}
.ring{flex:1;text-align:center}
.ring svg{width:100%;max-width:82px}
.ring .rn{font-size:14px;margin-top:5px}
.ring .rv{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.state{font-size:11px;margin-top:2px}
.state.growth{color:var(--ok)} .state.maint{color:var(--ink3)} .state.over{color:var(--warn)}
.mus{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-top:10px;padding:4px 14px}
.mrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow .dot{width:8px;height:8px;border-radius:50%;flex:none}
.mrow .mn{flex:1;font-size:14px}
.mrow .mv{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.mbar{height:4px;border-radius:2px;background:var(--trk);width:72px;flex:none;overflow:hidden}
.mbar i{display:block;height:100%;border-radius:2px}
h3.sec{font-size:13px;color:var(--ink3);font-weight:500;margin:20px 0 8px;letter-spacing:.03em;text-transform:uppercase}

.empty{color:var(--ink3);font-size:14px;padding:24px 0;text-align:center}
.pack{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:var(--bg);font-size:13px;padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));text-align:center;z-index:20}

/* calendario */
.cal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calhead .m{font-size:15px;font-weight:500}
.calhead button{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);font-size:16px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dw{text-align:center;font-size:11px;color:var(--ink3);padding-bottom:4px}
.cell{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink2);border:1px solid transparent}
.cell.off{color:var(--ink3);opacity:.35}
.cell.has{background:var(--trk);color:var(--ink);font-weight:500}
.cell.today{border-color:var(--ink)}
.cell.sel{background:var(--ink);color:var(--bg)}
.cell .dots{display:flex;gap:2px;height:6px}
.cell .dots i{width:6px;height:6px;border-radius:50%;display:block}
.dayp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-top:10px;padding:12px 14px}
.dayp h4{margin:0 0 2px;font-size:16px;font-weight:500}
.dayp .meta{font-size:12px;color:var(--ink3);margin-bottom:10px}
.pr{display:flex;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.pr:last-child{border-bottom:0}
.pr .pn{flex:1}
.pr .pv{font-variant-numeric:tabular-nums;color:var(--ink2);font-size:13px}
.pr .pd{font-size:12px;color:var(--warn)}
.subs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.subx{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 5px;font-size:13px}
.subx img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff}

/* sesión */
.sess{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:12px;
  display:flex;flex-direction:column;gap:8px}
.sess .btn{width:100%}
.shint{font-size:12px;color:var(--ink3);text-align:center}
.sinfo{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500}
.dotlive{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.confirm{border-top:1px solid var(--line);padding-top:10px}
.confirm p{margin:0 0 6px;font-size:14px;color:var(--ink2)}

/* navegación de días */
.dnav{display:flex;align-items:center;gap:8px}
.dnav .dttl{flex:1;min-width:0}
.dnav .nav{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:10px;font-size:20px;line-height:1;color:var(--ink2)}
.backToday{margin-top:6px;font-size:12px;color:var(--sup);padding:2px 0}

/* pendientes de la semana */
.mrow.dim{opacity:.45}
.owsub{font-size:12px;color:var(--ink3);margin-top:1px}
.plus{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%;font-size:20px;line-height:1;color:var(--ink2)}
.mrow.dim .plus{color:var(--ink3)}

/* saltado */
.ex.skip{opacity:.6}
.ex.skip .exname{text-decoration:line-through;text-decoration-thickness:1px}
.tick.sk{border-style:dashed;color:var(--ink3)}
.flag.sk{background:color-mix(in oklab,var(--warn) 25%,transparent)}

/* agregar ejercicio */
.addbtn{width:100%;margin-top:14px;border-style:dashed}
.srch{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
  font:inherit;font-size:15px;padding:0 12px;margin:10px 0 4px}