:root{--bg:#0b0f0d;--card:#141a17;--card2:#1b2320;--line:#26302b;--tx:#eef3f0;--mut:#8b9a92;--green:#34d399;--green2:#10b981;--orange:#fb923c;--orange2:#f97316;--blue:#60a5fa;--pink:#f472b6;--yellow:#facc15;--red:#f87171;--r:20px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:0 0 calc(84px + env(safe-area-inset-bottom));background:radial-gradient(120% 50% at 50% -10%,#123526 0%,transparent 60%),var(--bg);background-attachment:fixed}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
header{position:sticky;top:0;z-index:5;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(var(--bg) 70%,#0b0f0dcc 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hello{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.greet{font-size:26px;font-weight:800;letter-spacing:-.5px}
.date-lbl{color:var(--mut);font-size:14px;margin-top:2px}
.logo{width:40px;height:40px;border-radius:12px;box-shadow:0 4px 14px #0008}
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#1a211e;border-radius:12px;padding:3px;margin-bottom:12px}
.seg button{position:relative;z-index:1;padding:8px 0;font-size:14px;font-weight:600;color:var(--mut);transition:color .25s}
.seg button.on{color:var(--tx)}
.seg-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:9px;background:linear-gradient(135deg,#25332d,#2c3c35);box-shadow:0 2px 8px #0006;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.seg.x .seg-pill{transform:translateX(100%)}
.days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.days::-webkit-scrollbar{display:none}
.day{flex:1 0 42px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:all .25s}
.day small{font-size:11px;color:var(--mut);text-transform:uppercase}
.day b{font-size:17px}
.day i{width:5px;height:5px;border-radius:50%;background:transparent}
.day.has i{background:var(--orange)}
.day.today b{color:var(--green)}
.day.on{background:linear-gradient(160deg,var(--green2),#059669);border-color:transparent;transform:translateY(-2px);box-shadow:0 6px 18px #10b98155}
.day.on small,.day.on b{color:#fff}.day.on.has i{background:#fff}
main{padding:4px 16px 16px}
.view{animation:viewIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0;animation:cardIn .5s both cubic-bezier(.2,.8,.2,1)}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut);margin:0 0 12px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
h2 em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--tx);font-weight:600}
.hero{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:150px;height:150px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{stroke:#ffffff10}
.ring .val{transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .ctr b{font-size:30px;font-weight:800;letter-spacing:-1px}
.ring .ctr span{font-size:12px;color:var(--mut)}
.stats{flex:1;display:flex;flex-direction:column;gap:10px}
.stat small{display:block;font-size:12px;color:var(--mut)}
.stat b{font-size:20px;font-weight:700}.stat b u{text-decoration:none;font-size:12px;color:var(--mut);font-weight:500;margin-left:2px}
.g{color:var(--green)}.o{color:var(--orange)}.rd{color:var(--red)}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.macro{text-align:center}
.macro .ring{width:84px;height:84px;margin:0 auto 6px}
.macro .ring .ctr b{font-size:17px;letter-spacing:0}
.macro .ring .ctr span{font-size:10px}
.macro .lbl{font-size:13px;font-weight:600}.macro .sub{font-size:11px;color:var(--mut)}
.act{display:flex;align-items:center;gap:12px}
.act-ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,#f9731633,#fb923c11);border:1px solid #fb923c44}
.act-t{flex:1;min-width:0}.act-t b{display:block;font-size:15px;line-height:1.3}.act-t small{color:var(--mut);font-size:12px}
.net{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.net div{background:#ffffff06;border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.net small{display:block;font-size:11px;color:var(--mut);margin-bottom:2px}.net b{font-size:17px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.4px}
.badge.plan{background:#60a5fa1f;color:var(--blue);border:1px solid #60a5fa44}
.badge.done{background:#34d3991f;color:var(--green);border:1px solid #34d39944}
.badge.est{background:#facc151a;color:var(--yellow);border:1px solid #facc1540}
.meal{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);animation:cardIn .45s both}
.meal:first-of-type{border-top:0;padding-top:2px}
.meal-thumb{width:54px;height:54px;border-radius:14px;flex:none;object-fit:cover;background:linear-gradient(135deg,#1f2a25,#16201b);display:grid;place-items:center;font-size:24px}
.meal-b{flex:1;min-width:0}
.meal-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.meal-d{font-weight:600;font-size:15px;line-height:1.3}
.meal-k{font-weight:800;color:var(--orange);white-space:nowrap}.meal-k u{text-decoration:none;font-size:11px;color:var(--mut);font-weight:500}
.meal-time{font-size:12px;color:var(--mut);margin:2px 0 6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:99px;background:#ffffff0a}
.chip.p{color:var(--pink);background:#f472b61a}.chip.c{color:var(--yellow);background:#facc151a}.chip.f{color:var(--blue);background:#60a5fa1a}
.chart svg{width:100%;height:auto;display:block}
.chart .bar{transform-origin:bottom;transform-box:fill-box;animation:grow .9s both cubic-bezier(.2,.8,.2,1)}
@keyframes grow{from{transform:scaleY(0)}}
.chart text{fill:var(--mut);font-size:11px;font-family:inherit}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:18px;padding:14px;animation:cardIn .5s both}
.kpi small{color:var(--mut);font-size:12px}.kpi b{display:block;font-size:24px;font-weight:800;margin-top:4px;letter-spacing:-.5px}.kpi b u{text-decoration:none;font-size:12px;color:var(--mut);font-weight:500}
.wk-row{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:14px}.wk-row:first-of-type{border:0}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph{border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);animation:cardIn .5s both}
.ph img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#1a221e}
.ph div{padding:8px 10px}.ph b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ph small{font-size:11px;color:var(--mut)}
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--green),var(--orange),transparent);border-radius:2px;opacity:.5}
.tl-i{position:relative;margin-bottom:12px;animation:cardIn .5s both}
.tl-i::before{content:"";position:absolute;left:-20px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--blue)}
.tl-i.done::before{background:var(--green);border-color:var(--green);box-shadow:0 0 10px var(--green)}
.tl-i.sel .card{border-color:#34d39966;box-shadow:0 0 0 1px #34d39933}
.tl-i .card{margin:0}
.tl-date{font-size:12px;color:var(--mut);margin-bottom:4px}
.tl-t{font-weight:700;font-size:15px;margin:6px 0 8px}
.tl-m{display:flex;gap:14px;font-size:13px;color:var(--mut)}.tl-m b{color:var(--tx);font-size:16px}
.tl-n{font-size:12px;color:var(--mut);margin-top:6px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;border-radius:var(--r);border:2px dashed #34d39955;background:radial-gradient(circle at 50% 40%,#34d3991a,transparent 70%);text-align:center;position:relative;overflow:hidden}
.drop .big{font-size:44px}.drop b{font-size:16px}.drop small{color:var(--mut);font-size:13px}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop input{position:absolute;inset:0;opacity:0}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:14px;font-weight:700;font-size:15px;background:#ffffff0d;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .15s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(135deg,var(--green2),#059669);border:0;box-shadow:0 8px 22px #10b98140;color:#fff}
.btn.acc{background:linear-gradient(135deg,var(--orange2),#ea580c);border:0;box-shadow:0 8px 22px #f9731640;color:#fff}
.btn.full{width:100%;margin-top:12px}
.btn:disabled{opacity:.45}
.btn input{position:absolute;inset:0;opacity:0}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #fff5;border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.fld{display:block;margin-top:10px}.fld span{display:block;font-size:12px;color:var(--mut);margin-bottom:4px}
.fld input,.fld textarea{width:100%;padding:12px;border-radius:12px;background:#0f1412;border:1px solid var(--line);color:var(--tx);font:inherit;font-size:16px;outline:none;transition:border-color .2s}
.fld input:focus,.fld textarea:focus{border-color:var(--green)}
.fld textarea{min-height:64px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.note{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.4}
.msg{margin-top:12px;padding:12px;border-radius:12px;font-size:14px;animation:cardIn .4s both}
.msg.ok{background:#34d3991a;color:var(--green);border:1px solid #34d39944}.msg.err{background:#f871711a;color:var(--red);border:1px solid #f8717144}
.empty{text-align:center;padding:28px 12px;color:var(--mut)}
.empty .em{font-size:44px;display:inline-block;animation:float 3s ease-in-out infinite}
.empty b{display:block;color:var(--tx);font-size:16px;margin:8px 0 4px}.empty small{font-size:13px}
@keyframes float{50%{transform:translateY(-6px)}}
.sk{background:linear-gradient(90deg,#1a221e 25%,#24302a 50%,#1a221e 75%);background-size:200% 100%;animation:shim 1.2s infinite;border-radius:14px}
@keyframes shim{to{background-position:-200% 0}}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#0d1210e6;backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-top:1px solid #ffffff10}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:#6b7a72;font-size:10.5px;font-weight:600;transition:color .25s}
.tab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.tab.active{color:var(--green)}.tab.active svg{transform:translateY(-2px) scale(1.08)}
.tab[data-tab=subir].active{color:var(--orange)}
@media (min-width:600px){main,header{max-width:520px;margin:0 auto}}