/* FitCal — liquid glass, editorial.
   Sistema: tipografía (Geist + Instrument Serif para los números), una sola esfera protagonista,
   superficies de vidrio con pocas capas y movimiento con intención. */

:root{

  --ink:#0e1b17;--ink2:#54675f;--ink3:#8a9b94;
  --glass:rgba(255,255,255,.42);--glass-hi:rgba(255,255,255,.64);
  --edge:rgba(255,255,255,.85);--edge-lo:rgba(255,255,255,.22);
  --hair:rgba(14,27,23,.09);--field:rgba(255,255,255,.55);--track:rgba(14,27,23,.09);
  --shadow:0 1px 1px rgba(20,50,60,.04),0 12px 32px -8px rgba(28,64,80,.16);
  --accent:#12a47e;--accent2:#3b83c9;--on-accent:#06211a;--danger:#d4604a;
  --p:#e0795f;--c:#dfa83a;--f:#5b8fd6;
  --m-desayuno:#e9b44c;--m-almuerzo:#3fb99a;--m-cena:#7a8fe6;--m-snack:#dc7fb4;
  --bg0:#e3ecea;
  --mesh:radial-gradient(60% 50% at 12% 8%,#bfe9dc 0,transparent 70%),radial-gradient(55% 50% at 92% 14%,#c9d8f7 0,transparent 70%),radial-gradient(60% 55% at 78% 96%,#f6dccf 0,transparent 70%),radial-gradient(50% 45% at 6% 88%,#d4e8c8 0,transparent 70%);
  --bg-img:url("assets/bg-light.webp");
  --orb-fill:rgba(255,255,255,.28);
  --grain:.06;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
  color-scheme:light;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.2%,1.043 21.6%,1.055 24.3%,1.044 28.6%,1.011 34.2%,.998 41.6%,.998 50.3%,1)}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e9f2ee;--ink2:#9db1a8;--ink3:#6f847b;
  --glass:rgba(22,32,32,.5);--glass-hi:rgba(58,76,74,.44);
  --edge:rgba(255,255,255,.2);--edge-lo:rgba(255,255,255,.06);
  --hair:rgba(255,255,255,.09);--field:rgba(255,255,255,.07);--track:rgba(255,255,255,.11);
  --shadow:0 1px 1px rgba(0,0,0,.3),0 16px 40px -10px rgba(0,0,0,.55);
  --accent:#35d3a6;--accent2:#6aa8f0;--danger:#f08a74;
  --p:#f0907a;--c:#efc15a;--f:#7fabee;
  --bg0:#0c1413;
  --mesh:radial-gradient(60% 50% at 12% 8%,#0f4a3f 0,transparent 70%),radial-gradient(55% 50% at 92% 14%,#1a2f5c 0,transparent 70%),radial-gradient(60% 55% at 78% 96%,#4a2a26 0,transparent 70%),radial-gradient(50% 45% at 6% 88%,#1d3d27 0,transparent 70%);
  --bg-img:url("assets/bg-dark.webp");
  --orb-fill:rgba(255,255,255,.05);
  --grain:.09;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#e9f2ee;--ink2:#9db1a8;--ink3:#6f847b;
  --glass:rgba(22,32,32,.5);--glass-hi:rgba(58,76,74,.44);
  --edge:rgba(255,255,255,.2);--edge-lo:rgba(255,255,255,.06);
  --hair:rgba(255,255,255,.09);--field:rgba(255,255,255,.07);--track:rgba(255,255,255,.11);
  --shadow:0 1px 1px rgba(0,0,0,.3),0 16px 40px -10px rgba(0,0,0,.55);
  --accent:#35d3a6;--accent2:#6aa8f0;--danger:#f08a74;
  --p:#f0907a;--c:#efc15a;--f:#7fabee;
  --bg0:#0c1413;
  --mesh:radial-gradient(60% 50% at 12% 8%,#0f4a3f 0,transparent 70%),radial-gradient(55% 50% at 92% 14%,#1a2f5c 0,transparent 70%),radial-gradient(60% 55% at 78% 96%,#4a2a26 0,transparent 70%),radial-gradient(50% 45% at 6% 88%,#1d3d27 0,transparent 70%);
  --bg-img:url("assets/bg-dark.webp");
  --orb-fill:rgba(255,255,255,.05);
  --grain:.09;
  color-scheme:dark;
}

/* Tipografías: el texto y los números/títulos se eligen por separado (Personalizar). */
:root,[data-body="geist"]{--sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[data-body="manrope"]{--sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[data-body="hanken"]{--sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[data-body="nunito"]{--sans:"Nunito",ui-rounded,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[data-body="dmsans"]{--sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[data-body="system"]{--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
:root,[data-display="instrument"]{--serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;--dw:400;--brand-style:italic;--brand-scale:1}
[data-display="fraunces"]{--serif:"Fraunces","Iowan Old Style",Georgia,serif;--dw:400;--brand-style:normal;--brand-scale:.92}
[data-display="dmserif"]{--serif:"DM Serif Display","Iowan Old Style",Georgia,serif;--dw:400;--brand-style:normal;--brand-scale:.92}
[data-display="fredoka"]{--serif:"Fredoka",ui-rounded,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--dw:500;--brand-style:normal;--brand-scale:.88}
[data-display="geistmono"]{--serif:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--dw:300;--brand-style:normal;--brand-scale:.74}
[data-display="manrope"]{--serif:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--dw:300;--brand-style:normal;--brand-scale:.88}
[data-display="same"]{--serif:var(--sans);--dw:500;--brand-style:normal;--brand-scale:.88}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{font-size:calc(16px*var(--fs,1));-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg0);color:var(--ink);font:400 .9375rem/1.45 var(--sans);
  letter-spacing:-.005em;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}

/* Fondo: imagen (o malla) con deriva lenta + grano fino para quitarle lo "digital" */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg0)}
.bg::before{content:"";position:absolute;inset:-7%;background:var(--bg-img) center/cover no-repeat,var(--mesh);animation:drift 48s ease-in-out infinite alternate;will-change:transform}
html[data-bg="mesh"] .bg::before{background:var(--mesh)}
html[data-bg="solid"] .bg::before{background:none;animation:none}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Vidrio ---------- */
.glass,.sheet{position:relative;border:1px solid var(--edge);border-radius:var(--rad,28px);
  background:linear-gradient(145deg,var(--glass-hi),var(--glass) 60%);
  -webkit-backdrop-filter:blur(var(--blur,26px)) saturate(170%);backdrop-filter:blur(var(--blur,26px)) saturate(170%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--edge),inset 0 -1px 0 var(--edge-lo)}
.glass::before,.sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.3),transparent 55%);opacity:.5}
.glass>*,.sheet>*{position:relative}
.sheet{padding:calc(20px*var(--dens,1))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.sheet{background:var(--glass-hi)}}

/* ---------- Encabezado y pestañas ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;padding:12px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.bar{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 22px;border-radius:999px;transition:box-shadow .3s,background .3s}
.top.scrolled .bar{box-shadow:var(--shadow),0 18px 40px -12px rgba(0,0,0,.25),inset 0 1px 0 var(--edge)}
.brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--brand-style,italic) var(--dw,400) calc(1.65rem*var(--brand-scale,1))/1.1 var(--serif);letter-spacing:-.01em}
.date-nav{display:flex;flex:none;align-items:center;gap:4px}
.date-nav input{width:118px;min-height:38px;padding:0 2px;border:0;background:transparent;text-align:center;font-weight:500;font-size:15px}
@media (min-width:560px){.date-nav input{width:auto}}
.icon-btn{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--edge-lo);background:var(--field);color:var(--ink);cursor:pointer;transition:transform .25s var(--spring),background .2s}
.icon-btn:hover{background:var(--glass-hi)}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg,.search svg,.tabs svg,.scan svg,.star svg,.add svg,.x svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg{width:18px;height:18px}
.icon-btn.sm{width:32px;height:32px}.icon-btn.sm svg{width:15px;height:15px}

.tabs{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom,0px));display:flex;gap:2px;padding:5px;border-radius:999px;
  border:1px solid var(--edge);background:linear-gradient(145deg,var(--glass-hi),var(--glass) 70%);
  -webkit-backdrop-filter:blur(var(--blur,26px)) saturate(170%);backdrop-filter:blur(var(--blur,26px)) saturate(170%);
  box-shadow:var(--shadow),inset 0 1px 0 var(--edge)}
.tab-ind{position:absolute;top:5px;bottom:5px;left:var(--x,5px);width:var(--w,70px);border-radius:999px;background:var(--field);box-shadow:inset 0 0 0 1px var(--edge-lo),0 2px 10px -2px rgba(0,0,0,.18);transition:left .5s var(--spring),width .5s var(--spring)}
.tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:68px;padding:7px 10px;border:0;border-radius:999px;background:transparent;color:var(--ink2);font-size:.68rem;font-weight:500;cursor:pointer;transition:color .25s}
.tabs button svg{width:22px;height:22px}
.tabs button.on{color:var(--accent)}
.badge{position:absolute;top:3px;right:14px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:.62rem;font-weight:600;line-height:17px;text-align:center;animation:pop .5s var(--spring)}
@media (min-width:900px){
  .tabs{top:calc(env(safe-area-inset-top,0px) + 17px);bottom:auto;padding:4px;box-shadow:none;background:var(--field);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--edge-lo)}
  .tab-ind{top:4px;bottom:4px;background:var(--glass-hi);box-shadow:inset 0 0 0 1px var(--edge-lo),0 2px 8px -2px rgba(0,0,0,.15)}
  .tabs button{flex-direction:row;gap:8px;min-width:0;padding:8px 16px;font-size:.86rem}
  .tabs button svg{width:17px;height:17px}
  .badge{top:2px;right:6px}
}

/* ---------- Estructura ---------- */
main{max-width:1120px;margin:0 auto;display:grid;gap:calc(16px*var(--dens,1));padding:20px max(16px,env(safe-area-inset-right,0px)) calc(112px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));align-items:start}
.col-left,.col-right{display:contents}
.titlebar{padding:6px 6px 2px}
.titlebar h1{font:var(--dw,400) 2.5rem/1 var(--serif);letter-spacing:-.015em}
.titlebar p{margin-top:6px;color:var(--ink2);font-size:.88rem}
.titlebar p::first-letter{text-transform:uppercase}
h2,.label{font-size:.8rem;font-weight:500;color:var(--ink2);letter-spacing:.01em}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;min-height:34px}

/* Vistas: en móvil se ve una; en PC "Hoy" y "Buscar" van juntas */
.v-hoy,.v-buscar,.v-progreso,.v-amigos{display:none}
body[data-view="hoy"] .v-hoy,body[data-view="buscar"] .v-buscar,body[data-view="progreso"] .v-progreso,body[data-view="amigos"] .v-amigos{display:var(--show,block)}
.hero{--show:flex}

@media (min-width:900px){
  main{grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:calc(20px*var(--dens,1)) calc(28px*var(--dens,1));padding-top:28px;padding-bottom:40px}
  .titlebar{grid-column:1/-1}
  .col-left,.col-right{display:grid;gap:calc(16px*var(--dens,1));align-content:start}
  .col-left{position:sticky;top:96px}
  body[data-view="hoy"] .v-buscar,body[data-view="buscar"] .v-hoy{display:var(--show,block)}
  body[data-view="progreso"] main{grid-template-columns:1fr 1fr}
  body[data-view="amigos"] main{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
  #chartCard{grid-column:1/-1}
  .credit{grid-column:1/-1}
}

/* ---------- Héroe: la esfera ---------- */
.hero{flex-direction:column;align-items:center;gap:20px;padding:6px 0 4px}
.orb{--liq1:var(--accent);--liq2:var(--accent2);position:relative;width:min(64vw,248px);aspect-ratio:1;filter:drop-shadow(0 18px 28px rgba(20,60,70,.18))}
.orb.over{--liq1:var(--danger);--liq2:color-mix(in srgb,var(--danger) 60%,#ffb36b)}
.orb svg{display:block;width:100%;height:100%;overflow:visible}
.orb-glass{fill:var(--orb-fill)}
.orb-rim{fill:none;stroke:var(--edge);stroke-width:1.4}
.liq{transform:translateY(220px);opacity:0;transition:transform 1.4s var(--spring),opacity .4s}
.wave{opacity:.62;animation:wave 7s linear infinite}
.wave.b{opacity:.4;animation-duration:11s;animation-direction:reverse}
.orb::after{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at var(--hx,30%) var(--hy,20%),rgba(255,255,255,.22),transparent 45%);transition:background .4s}
.orb-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.orb-text strong{font:var(--dw,400) clamp(3.6rem,17vw,4.6rem)/.9 var(--serif);letter-spacing:-.025em;text-shadow:0 2px 18px var(--glass)}
.orb-text span{margin-top:6px;font-size:.78rem;color:var(--ink2);font-weight:500}

.hero-meta{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:0 6px}
.hero-meta>div,.hero-meta label{display:grid;gap:2px}
.hero-meta span:first-child{font-size:.75rem;color:var(--ink2)}
.hero-meta b{font:var(--dw,400) 1.7rem/1.1 var(--serif);letter-spacing:-.01em}
.hero-meta label{text-align:right}
.goal-field{display:flex;align-items:baseline;justify-content:flex-end;gap:6px}
.goal-field input{width:5.2ch;min-height:0;padding:0 0 1px;border:0;border-bottom:1px dashed var(--ink3);border-radius:0;background:transparent;font:var(--dw,400) 1.7rem/1.1 var(--serif);text-align:right;color:var(--ink);box-shadow:none}
.goal-field input:focus{border-bottom-color:var(--accent);box-shadow:none}
.goal-field i{font-style:normal;font-size:.75rem;color:var(--ink2)}

.macros3{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 6px}
.macro{display:grid;gap:3px;min-width:0}
.macro span{font-size:.72rem;color:var(--ink2);white-space:nowrap}
.macro b{font-size:.86rem;font-weight:500;white-space:nowrap}
.track{height:4px;margin-top:5px;border-radius:2px;background:var(--track);overflow:hidden}
.track i{display:block;height:100%;width:0;border-radius:2px;transition:width 1s var(--spring)}
.track .p{background:var(--p)}.track .c{background:var(--c)}.track .f{background:var(--f)}
.micro{width:100%;display:flex;flex-wrap:wrap;gap:4px 16px;padding:0 6px;font-size:.76rem;color:var(--ink2)}
.micro:empty{display:none}
.micro b{color:var(--ink);font-weight:500}
.micro small{flex-basis:100%;font-size:.68rem;color:var(--ink3)}

/* Agua */
.water-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stepper{display:flex;align-items:center;gap:10px}
.stepper b{min-width:44px;text-align:center;font-weight:500}
.drops{display:flex;gap:2px;flex-wrap:wrap}
.drop{display:grid;place-items:center;width:28px;height:32px;padding:0;border:0;background:transparent;color:var(--track);cursor:pointer;transition:color .3s,transform .3s var(--spring)}
.drop svg{width:21px;height:21px;fill:currentColor;stroke:none}
.drop:active{transform:scale(.85)}
.drop.on{color:var(--accent2)}
.drop.pop{animation:dropIn .6s var(--spring)}

/* ---------- Diario ---------- */
.meal{padding:4px 0 6px;border-top:1px solid var(--hair)}
.meal:first-child{border-top:0}
.meal-head{display:flex;align-items:center;gap:10px;min-height:44px}
.meal-head .dot{width:7px;height:7px;border-radius:50%;background:var(--ink3)}
.m-desayuno .dot{background:var(--m-desayuno)}.m-almuerzo .dot{background:var(--m-almuerzo)}.m-cena .dot{background:var(--m-cena)}.m-snack .dot{background:var(--m-snack)}
.meal-head b{font-weight:550;flex:1}
.meal-head .mk{font-size:.8rem;color:var(--ink2)}
.add{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--edge-lo);border-radius:50%;background:var(--field);color:var(--ink);cursor:pointer;transition:transform .3s var(--spring),background .2s,color .2s}
.add svg{width:15px;height:15px}
.add:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
.add:active{transform:scale(.88)}
.entry{position:relative;touch-action:pan-y;cursor:pointer;overflow:hidden;border-radius:12px;margin:0 -8px;padding:0 8px;transition:background .2s}
.entry:hover{background:var(--field)}
.entry-in{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(9px*var(--dens,1)) 0;transition:transform .25s var(--ease)}
.entry.swiping{background:linear-gradient(270deg,color-mix(in srgb,var(--danger) 38%,transparent),transparent 70%)}
.entry.swiping .entry-in{transition:none}
.entry.fresh{animation:fresh 1.4s var(--ease)}
.entry .main{min-width:0;overflow-wrap:anywhere}
.entry .right{display:flex;align-items:center;gap:6px;white-space:nowrap}
.entry .right b{font-weight:500}
.x{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink3);cursor:pointer}
.x:hover{background:var(--field);color:var(--danger)}
.x svg{width:15px;height:15px}
.name{font-weight:500}
.sub{font-size:.76rem;color:var(--ink2)}
.sub b{font-weight:600;color:var(--ink)}
.link{background:none;border:0;padding:4px 0 8px 17px;color:var(--ink2);font-size:.8rem;cursor:pointer;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.link:hover{color:var(--accent)}
.empty{color:var(--ink2);font-size:.85rem}

/* ---------- Búsqueda ---------- */
.search{position:relative}
.search>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink2);pointer-events:none}
.search input{padding-left:44px;border-radius:999px}
.search:has(.scan:not([hidden])) input{padding-right:50px}
.scan{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:var(--field);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.scan svg{width:18px;height:18px}
.hint{margin:10px 2px;color:var(--ink2);font-size:.8rem}
.results{list-style:none;margin:0 -8px;padding:0;max-height:62vh;overflow:auto;overscroll-behavior:contain}
.results li{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:calc(58px*var(--dens,1));padding:9px 8px;margin:0;border-top:1px solid var(--hair);border-radius:12px;cursor:pointer;animation:rowIn .45s var(--ease) both;transition:background .15s}
.results li:first-child{border-top:0}
.results li:hover,.results li:focus-visible{background:var(--field)}
.results li>div:first-child{min-width:0;overflow-wrap:anywhere}
.results li.sec{cursor:default;min-height:0;padding:16px 8px 4px;border-top:0;font-size:.74rem;font-weight:500;color:var(--ink2);animation:none}
.results li.sec:hover,.results li.none:hover{background:transparent}
.results li.none{cursor:default;color:var(--ink2);font-size:.85rem;border-top:0;animation:none}
.results li:nth-child(2){animation-delay:30ms}.results li:nth-child(3){animation-delay:60ms}.results li:nth-child(4){animation-delay:90ms}
.results li:nth-child(5){animation-delay:120ms}.results li:nth-child(6){animation-delay:150ms}.results li:nth-child(7){animation-delay:180ms}
.results li:nth-child(8){animation-delay:210ms}.results li:nth-child(n+9){animation-delay:240ms}
.results .r{display:flex;align-items:center;gap:4px}
.kcal{white-space:nowrap;font:var(--dw,400) 1.35rem/1 var(--serif);text-align:right}
.kcal small{display:block;margin-top:2px;font:500 .66rem var(--sans);color:var(--ink2)}
.star{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink3);cursor:pointer;transition:transform .3s var(--spring),color .2s}
.star svg{width:18px;height:18px}
.star:active{transform:scale(.8)}
.star.on{color:var(--c)}.star.on svg{fill:currentColor}
.tag{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.04em;padding:1px 6px;margin-right:6px;border-radius:999px;background:var(--field);border:1px solid var(--edge-lo);color:var(--ink2)}
.tag.own{color:var(--accent)}

/* ---------- Controles ---------- */
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);width:100%;min-height:44px;background:var(--field);border:1px solid var(--edge-lo);border-radius:var(--rad-sm,14px);padding:10px 14px;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
textarea{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
input[type=range]{padding:0;min-height:28px;margin-top:10px;background:transparent;border:0;accent-color:var(--accent);box-shadow:none}
.date-nav input{border:0;background:transparent;box-shadow:none}
.pill{min-height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--edge-lo);background:var(--field);cursor:pointer;font-size:.85rem;font-weight:500;white-space:nowrap;transition:transform .25s var(--spring),background .2s}
.pill:hover{background:var(--glass-hi)}
.pill:active{transform:scale(.95)}
.pill.solid,.primary{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:600}
.pill.solid:hover{background:color-mix(in srgb,var(--accent) 88%,#fff)}
.pill.file{display:inline-grid;place-items:center}
.seg{position:relative;display:flex;padding:3px;border-radius:999px;background:var(--field);border:1px solid var(--edge-lo)}
.seg button{flex:0 0 auto;border:0;background:transparent;padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:500;color:var(--ink2);cursor:pointer;transition:background .25s,color .25s}
.seg button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.inline-form{display:flex;gap:10px;align-items:center;margin:8px 0}
.field{display:flex;align-items:center;gap:8px}
.field.w{flex:1}
.field i{font-style:normal;font-size:.8rem;color:var(--ink2)}
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-form label{display:grid;gap:6px;font-size:.78rem;color:var(--ink2)}
.span2{grid-column:1/-1}
.result-box{margin-top:16px;padding:16px;border-radius:var(--rad-sm,14px);background:var(--field);border:1px solid var(--edge-lo);display:grid;gap:8px}
.result-box .big{font-size:1rem;color:var(--ink2)}
.result-box .big b{font:var(--dw,400) 2.6rem/1 var(--serif);letter-spacing:-.02em;color:var(--accent)}
.result-box .pill{justify-self:start}

/* ---------- Progreso ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.kpis div{padding:12px;border-radius:var(--rad-sm,14px);background:var(--field);border:1px solid var(--edge-lo);display:grid;gap:2px}
.kpis b{font:var(--dw,400) 1.7rem/1 var(--serif);letter-spacing:-.01em}
.kpis span{font-size:.7rem;color:var(--ink2)}
.chart{width:100%}
.chart svg{display:block;overflow:visible}
.bar-r{fill:var(--accent);transform-box:fill-box;transform-origin:bottom;animation:grow .8s var(--spring) both}
.bar-r.over{fill:var(--danger)}.bar-r.none{fill:var(--track);animation:none}
.ax{stroke:var(--hair);stroke-width:1}
.goal-line{stroke:var(--ink2);stroke-width:1;stroke-dasharray:4 4;opacity:.6}
.tx{fill:var(--ink2);font-size:11px}.tx.now{fill:var(--ink);font-weight:600}
.wline{fill:none;stroke:var(--accent2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--ease) .1s forwards}
.wdot{fill:var(--accent2);stroke:var(--bg0);stroke-width:2;animation:fadeIn .5s 1s both}

/* ---------- Amigos ---------- */
.fr-auth{display:grid;gap:14px}
.fr-auth h3,.fr-title{font:var(--dw,400) 1.7rem/1.1 var(--serif);letter-spacing:-.01em}
.fr-note{color:var(--ink2);font-size:.84rem}
.fr-form{display:grid;gap:10px}
.fr-form label{display:grid;gap:6px;font-size:.78rem;color:var(--ink2)}
.fr-err{min-height:1.2em;color:var(--danger);font-size:.82rem}
.fr-me{display:flex;align-items:center;gap:14px}
.fr-me .grow{flex:1;min-width:0}
.fr-me b{display:block;font-weight:550}
.av{--h:160;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:var(--dw,400) 1.5rem/1 var(--serif);color:#fff;background:linear-gradient(135deg,hsl(var(--h) 62% 58%),hsl(calc(var(--h) + 48) 62% 48%));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px -4px rgba(0,0,0,.35)}
.fr-block{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);display:grid;gap:4px}
.fr-block>h2{margin-bottom:6px}
.fr-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.fr-row .grow{flex:1;min-width:0}
.fr-row .btns{display:flex;gap:6px}
.fr-row .pill{min-height:34px;padding:0 14px}
.fr-settings{display:grid;gap:12px;margin-top:14px}
.fcard{padding:16px 0;border-top:1px solid var(--hair);display:grid;gap:12px;animation:rowIn .5s var(--ease) both}
.fcard:first-of-type{border-top:0}
.fcard-top{display:flex;align-items:center;gap:12px}
.fcard-top .grow{flex:1;min-width:0}
.fcard-top b{font-weight:550}
.streak{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--field);border:1px solid var(--edge-lo);font-size:.78rem;font-weight:600}
.streak svg{width:14px;height:14px;fill:var(--c);stroke:none}
.fcard-kcal{display:flex;align-items:baseline;gap:8px}
.fcard-kcal b{font:var(--dw,400) 2rem/1 var(--serif);letter-spacing:-.015em}
.fcard-kcal span{font-size:.8rem;color:var(--ink2)}
.fcard .macros3{padding:0;gap:12px}
.fcard-foot{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--ink2)}
.fcard-water{display:flex;gap:2px}
.fcard-water i{width:6px;height:11px;border-radius:50%/62% 62% 38% 38%;background:var(--track)}
.fcard-water i.on{background:var(--accent2)}
.fr-hidden{color:var(--ink2);font-size:.84rem}
.fr-invite{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Avisos y diálogos ---------- */
.toast{position:fixed;z-index:70;left:50%;width:max-content;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;max-width:min(92vw,420px);padding:10px 12px 10px 20px;border-radius:999px;font-size:.9rem;font-weight:500;animation:toastIn .55s var(--spring)}
.toast button{border:0;background:var(--field);color:var(--accent);font-weight:600;border-radius:999px;padding:7px 14px;cursor:pointer}
@media (min-width:900px){.toast{bottom:28px}}

dialog{padding:calc(22px*var(--dens,1));width:min(92vw,400px);color:var(--ink);margin:auto;overflow:auto;max-height:90vh;
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .25s var(--ease),transform .5s var(--spring),overlay .4s allow-discrete,display .4s allow-discrete}
dialog[open]{opacity:1;transform:none}
@starting-style{dialog[open]{opacity:0;transform:translateY(16px) scale(.96)}}
dialog::backdrop{background:rgba(8,18,16,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s,overlay .4s allow-discrete,display .4s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
dialog h3{font:var(--dw,400) 1.7rem/1.1 var(--serif);letter-spacing:-.01em;overflow-wrap:anywhere}
dialog label{display:block;margin:14px 0 6px;font-size:.78rem;color:var(--ink2)}
dialog .grid-form{margin:0}
dialog .grid-form label{margin:0;display:grid}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#favBtn.on{color:var(--c)}#favBtn.on svg{fill:currentColor}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--edge-lo);background:var(--field);cursor:pointer;transition:transform .25s var(--spring),border-color .2s}
.chips button:hover{border-color:var(--accent)}
.chips button:active{transform:scale(.93)}
.preview{margin:16px 0 0;font:var(--dw,400) 1.5rem/1.1 var(--serif);color:var(--accent)}
.actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:18px}
.actions .grow{flex:1}
.actions button{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--edge-lo);background:var(--field);cursor:pointer;font-weight:500;transition:transform .25s var(--spring)}
.actions button:active{transform:scale(.95)}
.actions .primary{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:600}
.actions .danger{color:var(--danger);border-color:transparent;background:transparent}
.scan-box{position:relative;overflow:hidden;border-radius:20px;background:#000;aspect-ratio:4/3}
.scan-box video{width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;inset:22% 10%;border:2px solid var(--accent);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.35);animation:breathe 2.4s ease-in-out infinite}

/* Panel de personalización */
#setDlg{width:min(94vw,460px)}
.opt{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--hair)}
.opt:first-of-type{border-top:0}
.opt .lbl{font-size:.78rem;color:var(--ink2)}
.opt .lbl b{color:var(--ink);font-weight:600;margin-left:6px}
.opt .seg{width:100%}
.opt .seg button{flex:1;padding:7px 6px}
.opt .pill{justify-self:start}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,var(--s1),var(--s2));cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(0,0,0,.18);transition:transform .3s var(--spring)}
.swatches button:hover{transform:scale(1.12)}
.swatches button.on{outline:2px solid var(--ink);outline-offset:2px}
#mealChips button{min-height:36px;padding:0 16px;color:var(--ink2)}
#mealChips button.on{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:600}
.pct-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pct-row.two{grid-template-columns:1fr 1fr}
.pct-row label{display:grid;gap:4px;margin:0;font-size:.72rem;color:var(--ink2)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;margin:0;cursor:pointer;font-size:.9rem;color:var(--ink)}
.switch input{width:46px;min-height:28px;height:28px;padding:0;border-radius:999px;background:var(--track);border:1px solid var(--edge-lo);position:relative;flex:none;cursor:pointer;transition:background .25s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .35s var(--spring)}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(18px)}
.credit{padding:4px 8px;text-align:center;font-size:.72rem;color:var(--ink3)}
.credit a{color:inherit}

/* ---------- Movimiento ---------- */
@keyframes drift{from{transform:translate3d(-1.5%,-1%,0) scale(1.02)}to{transform:translate3d(1.5%,1.2%,0) scale(1.07)}}
@keyframes wave{to{transform:translateX(-200px)}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fresh{0%{background:color-mix(in srgb,var(--accent) 28%,transparent)}100%{background:transparent}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes dropIn{0%{transform:translateY(-12px) scale(.6)}100%{transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,24px) scale(.92)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes breathe{50%{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}}
.rv{animation:rise .8s var(--ease) both}
.rv.d1{animation-delay:.05s}.rv.d2{animation-delay:.13s}.rv.d3{animation-delay:.21s}.rv.d4{animation-delay:.29s}
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important}
.no-motion .liq{opacity:1}
.no-glint .orb::after{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.liq{opacity:1}}

/* ---------- Móvil ---------- */
@media (max-width:560px){
  .grid-form{gap:10px}
  .results{max-height:55vh}
  dialog{margin:auto 0 0;width:100%;max-width:none;max-height:92vh;border-radius:var(--rad,28px) var(--rad,28px) 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(100%)}
  @starting-style{dialog[open]{transform:translateY(100%)}}
  dialog[open]{transform:none}
  .macros3{gap:12px}
}

/* Selector de tipografías */
.fontchips{display:flex;flex-wrap:wrap;gap:6px}
.fontchips button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--edge-lo);background:var(--field);color:var(--ink);cursor:pointer;transition:transform .25s var(--spring),border-color .2s,background .2s}
.fontchips button:hover{border-color:var(--accent)}
.fontchips button:active{transform:scale(.94)}
.fontchips button.on{background:var(--accent);border-color:transparent;color:var(--on-accent)}
#bodyFonts button{font-family:var(--sans);font-size:.95rem;font-weight:500}
#dispFonts button{font-family:var(--serif);font-weight:var(--dw,400);font-size:1.05rem}
.font-sample{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-radius:var(--rad-sm,14px);background:var(--field);border:1px solid var(--edge-lo)}
.font-sample b{font:var(--dw,400) 2.4rem/1 var(--serif);letter-spacing:-.02em}
.font-sample span{color:var(--ink2);font-size:.85rem}