:root{
  --bg:#0e0f12; --card:#181a20; --card2:#21242c; --text:#f2f3f5; --mute:#8b8f99;
  --green:#34c759; --red:#ff453a; --yellow:#ffd60a; --accent:#ff7a1a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* solo los controles táctiles evitan la selección de texto; nunca un ancestro de los inputs */
button,.chip,.cat,.ex,.att,.grid .d,.photo,.ph-img,.video-pick,.star,.viewer,.w-set .chk{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,system-ui,sans-serif}
body{padding-top:env(safe-area-inset-top)}
#app{padding:16px 16px calc(96px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto}
h1{font-size:26px;margin:4px 0 14px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

/* nav */
#nav{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;justify-content:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(14,15,18,.92);
  backdrop-filter:blur(14px);border-top:1px solid #23262e}
#nav button{flex:1;max-width:150px;background:var(--card);border-radius:14px;padding:8px 0;font-size:12px;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:2px}
#nav button span{font-weight:700;font-size:16px}
#nav button.on{background:var(--accent);color:#fff}

/* streak */
.streak{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 14px}
.streak .flame{font-size:54px;line-height:1}
.streak .num{font-size:56px;font-weight:800}
.streak .lbl{font-size:12px;color:var(--mute);text-align:center;margin-top:-6px;margin-bottom:10px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:16px}
.week div{height:34px;border-radius:9px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mute);font-weight:600}
.week div.today{outline:2px solid #fff;outline-offset:1px}
.g{background:var(--green)!important;color:#0a2a12!important}
.r{background:var(--red)!important;color:#3a0906!important}
.y{background:var(--yellow)!important;color:#3a3000!important}

/* today */
.today-card{background:var(--card);border-radius:18px;padding:14px;margin-bottom:14px}
.today-card .day{font-size:13px;color:var(--mute);text-transform:capitalize}
.today-card .plan{font-size:22px;font-weight:700;margin:2px 0 12px}
.att{width:100%;padding:14px;border-radius:14px;background:var(--card2);font-weight:700;font-size:17px;transition:.15s}
.att.done{background:var(--green);color:#06210e}
.att:active{transform:scale(.98)}
.hint{font-size:11px;color:var(--mute);text-align:center;margin-top:6px}

/* calendar */
.cal{background:var(--card);border-radius:18px;padding:14px}
.cal h3{margin:0 0 10px;font-size:15px;text-transform:capitalize;display:flex;justify-content:space-between;align-items:center}
.cal h3 small{color:var(--mute);font-weight:400;font-size:11px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.grid .dn{font-size:10px;color:var(--mute);text-align:center}
.grid .d{aspect-ratio:1;border-radius:8px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mute)}
.grid .d.today{outline:2px solid #fff;outline-offset:1px}
.grid .d.empty{background:none}
.legend{display:flex;gap:12px;justify-content:center;font-size:11px;color:var(--mute);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}

/* categories */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cat{background:var(--card);border-radius:18px;padding:22px 10px;font-weight:700;font-size:17px;text-align:center}
.cat small{display:block;color:var(--mute);font-weight:400;font-size:12px;margin-top:4px}
.cat:active{background:var(--card2)}
.back{color:var(--accent);font-size:16px;margin-bottom:6px;padding:4px 0}
.ex{display:flex;gap:12px;background:var(--card);border-radius:16px;padding:10px;margin-bottom:10px;align-items:center}
.ex .img{width:84px;height:84px;border-radius:12px;background:var(--card2);flex:none;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:11px}
.ex .info{flex:1;min-width:0}
.ex .nm{font-weight:700;font-size:16px}
.ex .ln{font-size:13px;color:var(--mute);margin-top:2px}
.ex .ln b{color:var(--text)}
.fab{position:fixed;right:20px;bottom:calc(92px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--accent);font-size:30px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.empty-msg{color:var(--mute);text-align:center;margin-top:40px}

/* sheet */
.sheet{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;z-index:40}
.sheet.hidden{display:none}
.panel{background:var(--card);width:100%;max-width:520px;margin:0 auto;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:88vh;max-height:88dvh;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.panel.full{height:88vh}
.panel h2{margin:0 0 12px;font-size:18px}
.panel label{display:block;font-size:12px;color:var(--mute);margin:12px 0 4px}
.panel input,.panel select,.panel textarea{width:100%;background:var(--card2);border:0;border-radius:12px;padding:12px;color:var(--text);font:inherit;font-size:16px;user-select:text}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--card2);padding:9px 14px;border-radius:20px;font-size:14px}
.chip.on{background:var(--accent);color:#fff}
.row{display:flex;gap:10px;margin-top:16px}
.btn{flex:1;padding:13px;border-radius:12px;background:var(--card2);font-weight:600}
.btn.pri{background:var(--accent);color:#fff}
.btn.del{color:var(--red)}
.opt{display:block;width:100%;text-align:left;padding:14px;border-radius:12px;background:var(--card2);margin-bottom:8px;font-weight:600}
.photo{height:130px;border-radius:12px;background:var(--card2) center/cover;display:flex;align-items:center;justify-content:center;color:var(--mute)}
.month-block{margin-bottom:18px}
.month-block h3{margin:0 0 8px;font-size:14px;text-transform:capitalize}
.stat{font-size:12px;color:var(--mute);font-weight:400}

/* PR y estrellas */
.pr-row{display:flex;align-items:center;gap:10px}
.pr-row>div{flex:1}
.pr-row>span{font-size:20px;color:var(--mute);padding-bottom:16px}
.pr-row small{display:block;text-align:center;color:var(--mute);font-size:11px;margin-top:4px}
.pr-row input{text-align:center;font-size:22px;font-weight:700}
.stars{display:flex;gap:2px;margin-left:-6px}
.star{font-size:40px;line-height:1;color:#3a3e49;-webkit-text-fill-color:#3a3e49;padding:6px 6px;touch-action:manipulation;cursor:pointer;display:inline-block}
.star.on{color:var(--yellow);-webkit-text-fill-color:var(--yellow)}
.stars-ro{color:var(--yellow);letter-spacing:1px}
.stars-ro i{font-style:normal;color:var(--card2)}

/* rutinas / calendario editable */
.grid .d{position:relative;cursor:pointer}
.grid .d u{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.cal h3{cursor:pointer}
.ex-list{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ex .ex-list{margin:8px 0 0}
.ex-list span{background:var(--card2);border-radius:10px;padding:4px 9px;font-size:12px;color:var(--mute)}

/* registro */
.month-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin:0 -16px;padding-left:16px;padding-right:16px}
.month-tabs .chip{flex:none;text-transform:capitalize}
.reg-card{display:flex;gap:14px;background:var(--card);border-radius:18px;padding:14px}
.reg-left{flex:1;min-width:0;display:flex;flex-direction:column}
.reg-title{font-size:13px;color:var(--mute);text-transform:capitalize;margin-bottom:8px}
.meas{display:flex;align-items:baseline;gap:6px;padding:9px 0;border-bottom:1px solid var(--card2);font-size:15px}
.meas span{flex:1;color:var(--mute)}
.meas b{font-size:17px}
.delta{color:var(--accent);font-size:11px;min-width:30px;text-align:right}
.fotos-link{margin-top:auto;padding-top:14px;text-align:left;color:var(--accent);font-weight:700;font-size:17px;text-decoration:underline}
.video-box{flex:1;min-height:280px;border-radius:16px;background:var(--card2);display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:13px;overflow:hidden}
.video-box video{width:100%;height:100%;object-fit:cover;background:#000}
.meas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.meas-grid input{text-align:center;font-size:20px;font-weight:700}
.meas-grid small,.photo-grid small{display:block;text-align:center;color:var(--mute);font-size:11px;margin-top:4px}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph-img{aspect-ratio:3/4;border-radius:12px;background:var(--card2) center/cover;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:12px}
.video-pick{padding:16px;border-radius:12px;background:var(--card2);text-align:center;color:var(--mute);font-size:14px}
.video-pick.on{color:var(--green)}

/* visor de fotos */
.viewer{position:fixed;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;will-change:transform}
.viewer-x{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);font-size:18px;color:#fff;z-index:2}
.ph-img:not(.pick){cursor:zoom-in}

/* figura corporal */
.reg-left{flex:1.35}
.video-box{flex:1}
.body-wrap{position:relative;aspect-ratio:448/646;line-height:0;cursor:pointer}
.bl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zone{opacity:0;transition:opacity .15s}
.zone.on{opacity:1}
.readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-height:44px;margin-top:10px;font-size:15px}
.readout b{font-size:20px}
.readout .mute{color:var(--mute)}
.readout .delta{flex-basis:100%;text-align:left;min-width:0}
.fotos-link{margin-top:6px;padding-top:8px}

/* iniciar rutina */
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px}
.plan-row .plan{margin:0;min-width:0}
.go{flex:none;background:var(--accent);color:#fff;font-weight:700;padding:9px 18px;border-radius:20px;font-size:15px}
.go:active{transform:scale(.96)}
.today-card .ex-list{margin-top:-2px}
.workout{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.w-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.w-name{font-size:22px;font-weight:800}
.w-time{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.w-x{width:40px;height:40px;border-radius:50%;background:var(--card2);font-size:16px}
.w-body{flex:1;overflow:auto;padding:0 16px 16px}
.w-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #23262e}
.w-foot .btn{width:100%;font-size:17px;padding:15px}
.w-ex{background:var(--card);border-radius:18px;padding:14px;margin-bottom:12px}
.w-ex-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.w-ex-head .ln{font-size:12px;color:var(--mute);flex:none}
.w-cols,.w-set{display:grid;grid-template-columns:44px 1fr 1fr 48px;gap:8px;align-items:center}
.w-cols{font-size:11px;color:var(--mute);text-align:center;margin-bottom:6px}
.w-set{margin-bottom:8px;text-align:center;color:var(--mute);font-weight:700}
.w-set input{width:100%;background:var(--card2);border:0;border-radius:10px;padding:10px 4px;color:var(--text);font:inherit;font-size:18px;font-weight:700;text-align:center;user-select:text}
.w-set .chk{height:42px;border-radius:10px;background:var(--card2);font-size:20px;color:#06210e}
.w-set .chk.l1{background:var(--red)}
.w-set .chk.l2{background:var(--yellow)}
.w-set .chk.l3{background:var(--green)}
.w-ex>.nm{font-size:18px;margin-bottom:8px}
.w-info{display:grid;gap:8px;margin-bottom:12px}
.w-info>div{background:var(--card2);border-radius:12px;padding:9px 12px;display:flex;flex-direction:column;gap:2px}
.w-info span{font-size:11px;color:var(--mute)}
.w-info b{font-size:15px;line-height:1.35}
.w-legend{font-size:11px;color:var(--mute);text-align:center;margin:0 0 12px}
.w-set.done input{opacity:.55}
.w-btns{display:flex;gap:8px;margin-top:2px}
.w-btns button{flex:1}
.w-del{padding:10px;border-radius:10px;background:var(--card2);color:var(--mute);font-weight:600}
.w-del:disabled{opacity:.35}
.w-add{width:100%;padding:10px;border-radius:10px;background:var(--card2);color:var(--mute);font-weight:600}

/* historial */
.hist-btn{width:100%;margin-top:14px;display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:18px;padding:16px;font-weight:700;font-size:16px}
.hist-btn small{color:var(--mute);font-weight:400;font-size:13px}
.log-month{font-size:13px;color:var(--mute);text-transform:capitalize;margin:16px 2px 8px;display:flex;justify-content:space-between}
.log-day{background:var(--card);border-radius:16px;margin-bottom:10px;overflow:hidden}
.log-sum{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;text-align:left}
.log-date{font-size:12px;color:var(--mute);text-transform:capitalize}
.log-title{font-size:18px;font-weight:700;margin-top:2px}
.log-meta{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:8px;flex:none}
.chev{font-size:22px;transition:transform .15s}
.log-day.open .chev{transform:rotate(90deg)}
.log-detail{display:none;padding:0 14px 14px}
.log-day.open .log-detail{display:block}
.log-ex{padding:10px 0;border-top:1px solid var(--card2)}
.log-ex .nm{font-size:15px;font-weight:600;margin-bottom:6px}
.log-sets{display:flex;flex-wrap:wrap;gap:6px}
.set-chip{background:var(--card2);border-radius:10px;padding:5px 10px;font-size:13px;font-weight:600;border-left:4px solid var(--card2)}
.set-chip.l1{border-left-color:var(--red)}
.set-chip.l2{border-left-color:var(--yellow)}
.set-chip.l3{border-left-color:var(--green)}

.ed-ses{margin-top:6px}
.ed-ses .w-ex{background:var(--card2)}
.ed-ses .w-set input,.ed-ses .w-btns button,.ed-ses .w-add{background:var(--card)}
.ed-ses .w-set .chk{background:var(--card)}
.ed-ses .w-set .chk.l1{background:var(--red)}.ed-ses .w-set .chk.l2{background:var(--yellow)}.ed-ses .w-set .chk.l3{background:var(--green)}

/* navegación de mes + resúmenes */
.mhead{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px}
.mnav{width:40px;height:40px;border-radius:12px;background:var(--card2);font-size:24px;line-height:1}
.mtitle{flex:1;text-align:center;font-weight:700;font-size:16px;text-transform:capitalize}
.mtitle small{display:block;color:var(--mute);font-weight:400;font-size:11px;text-transform:none;margin-top:1px}
.stats{margin-top:14px}
.stats-label{font-size:12px;color:var(--mute);margin-bottom:8px;text-transform:capitalize}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-box{background:var(--card2);border-radius:12px;padding:10px 4px;text-align:center}
.stat-box b{display:block;font-size:22px}
.stat-box span{font-size:11px;color:var(--mute)}
.stat-box.ok b{color:var(--green)}.stat-box.bad b{color:var(--red)}
.stats-note{font-size:12px;color:var(--mute);text-align:center;margin-top:8px}
.month-block .stats{display:none}
.panel>.stats{margin:0 0 16px;background:var(--card2);border-radius:14px;padding:12px}
.panel>.stats .stat-box{background:var(--card)}

.acct-mail{background:var(--card2);border-radius:12px;padding:12px;font-weight:600;word-break:break-all}

/* cambiar / mover ejercicios */
.w-ex{position:relative}
.w-ex-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.w-ex-top .nm{margin:0;min-width:0}
.w-tools{display:flex;gap:6px;flex:none}
.tool{width:34px;height:34px;border-radius:10px;background:var(--card2);color:var(--mute);font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
.ed-ses .tool{background:var(--card)}
.tool.grip{touch-action:none;cursor:grab;font-size:20px}
.tool:active{color:var(--text)}
.sorting .w-ex{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.sorting .w-ex.dragging{transition:none;z-index:6;box-shadow:0 14px 34px rgba(0,0,0,.55);outline:2px solid var(--accent)}
.sorting .w-ex.dragging.dropping{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.picker{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:60;background:rgba(0,0,0,.6);display:flex;align-items:flex-end}
.picker-panel{background:var(--card);width:100%;max-width:520px;margin:0 auto;border-radius:22px 22px 0 0;padding:18px 16px calc(24px + env(safe-area-inset-bottom));max-height:80vh;max-height:80dvh;display:flex;flex-direction:column}
.picker-panel h2{margin:0 0 4px;font-size:18px}
.picker-body{overflow:auto;flex:1;-webkit-overflow-scrolling:touch}
.chip:disabled{opacity:.35}

.go.done,.go:disabled{background:var(--card2);color:var(--green);opacity:1}
.peso-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:8px;border-top:1px solid var(--card2);font-size:15px}
.peso-line span{color:var(--mute)}
.peso-line b{font-size:18px}
.log-actions{display:flex;gap:8px;margin-top:12px}
.log-actions .btn{padding:11px;font-size:14px}

.log-empty{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;background:var(--card2);border-radius:12px;font-size:12px;color:var(--mute)}
.log-empty .btn{flex:none;padding:8px 12px;font-size:13px}