/* ═══════════════════════════════════════════════════════════════════════════
   MERLIN FITHEALTH — piel de marca Merlin. Misma paleta, radios y tipografía que
   la app Merlin (merlinautosys-web/marca/tokens.css): azul del logo #2A6EDD, grises
   de Apple, Archivo para titulares, SF para la interfaz, PlexMono para etiquetas.
   Aquí solo viven TOKENS y estilos transversales (gloss, toggle, micro-interacciones).
   El CSS de cada pantalla sigue en su HTML y usa los alias de abajo (--surface, --ink…).
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/Archivo.woff2) format('woff2')}
@font-face{font-family:'PlexMono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/PlexMono.woff2) format('woff2')}

:root{
  --m-brand:#2A6EDD;--m-brand-dark:#2059B8;--m-brand-txt:#2164D1;
  --m-green:#1E9E4A;--m-red:#D93B0B;--m-yellow:#D9A400;--m-orange:#C7780A;--m-purple:#8E44CF;
  --radius-sm:11px;--radius-md:14px;--radius-lg:18px;--radius-xl:22px;
  --transition:220ms cubic-bezier(.25,.1,.25,1);--ease-spring:cubic-bezier(.2,.9,.3,1.2);
  --ff-display:'Archivo',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ff-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --ff-mono:'PlexMono',ui-monospace,Menlo,monospace;
  /* claro */
  --ground:#F2F2F7;--surface:#FFFFFF;--surface-2:#F2F2F7;
  --ink:#1C1C1E;--muted:#6E6E73;--faint:#8E8E93;--line:rgba(60,60,67,.13);
  --brand:#2A6EDD;--brand-soft:rgba(42,110,221,.10);--on-brand:#FFFFFF;
  --ember:#D93B0B;--ember-soft:rgba(217,59,11,.10);--good:#1E9E4A;
  --shadow:0 .5px 1px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.05);--shadow-2:0 6px 20px rgba(0,0,0,.08);
  --glass:rgba(255,255,255,.78);
  --radius:var(--radius-lg);
  /* alias de páginas antiguas (onboarding, restos) */
  --text:var(--ink);--bg:var(--ground);--card:var(--surface);--mut:var(--muted);--blue:var(--brand);--err:var(--ember);--m-bg-3:#E5E5EA;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#000000;--surface:#1C1C1E;--surface-2:#2C2C2E;
  --ink:#F5F5F7;--muted:#98989D;--faint:#636366;--line:rgba(84,84,88,.42);
  --brand:#6C9BE8;--brand-soft:rgba(42,110,221,.22);--on-brand:#06101F;--m-brand-txt:#6C9BE8;
  --ember:#FF6A3D;--ember-soft:rgba(255,106,61,.16);--good:#30D158;
  --m-green:#30D158;--m-red:#FF6A3D;--m-yellow:#FFD60A;--m-orange:#FF9F0A;--m-purple:#BF5AF2;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);--shadow-2:0 6px 20px rgba(0,0,0,.5);
  --glass:rgba(28,28,30,.76);--m-bg-3:#2C2C2E;
}}
:root[data-theme="dark"]{
  --ground:#000000;--surface:#1C1C1E;--surface-2:#2C2C2E;
  --ink:#F5F5F7;--muted:#98989D;--faint:#636366;--line:rgba(84,84,88,.42);
  --brand:#6C9BE8;--brand-soft:rgba(42,110,221,.22);--on-brand:#06101F;--m-brand-txt:#6C9BE8;
  --ember:#FF6A3D;--ember-soft:rgba(255,106,61,.16);--good:#30D158;
  --m-green:#30D158;--m-red:#FF6A3D;--m-yellow:#FFD60A;--m-orange:#FF9F0A;--m-purple:#BF5AF2;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);--shadow-2:0 6px 20px rgba(0,0,0,.5);
  --glass:rgba(28,28,30,.76);--m-bg-3:#2C2C2E;
}

/* ── Tipografía: titulares en Archivo (como la landing), interfaz en SF, etiquetas en mono ── */
body{font-family:var(--ff-ui);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
h1,h2,.hi b,.hero h1,.ci-h,.block-h .t,.bite-name,.pbar-n,.tile .n,.now,.live .clock{font-family:var(--ff-display);letter-spacing:-.02em}
.eyebrow,.ci-label,.how-h,.nut-h,.nut-sub,.pbar-goal,.badge-fire,.msg .who,.live .fmt,.live-top,.live-step,.clipkind,.tile .l,label.mono,.card .cs.mono{
  font-family:var(--ff-mono);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-variant-numeric:tabular-nums}

/* ── Gloss que se ve: la superficie deja pasar el fondo (receta de la app Merlin) ── */
.tabbar,.composer,.ci-card,#sheet .ci-card,.topglass{
  background:color-mix(in srgb,var(--surface) 76%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7)}
.tabbar{border-top:1px solid var(--line)}
.composer{background:color-mix(in srgb,var(--surface) 70%,transparent);border-top:1px solid var(--line)}
.ci-card{background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(40px) saturate(1.8);backdrop-filter:blur(40px) saturate(1.8)}
:root[data-theme="light"] .tabbar,:root[data-theme="light"] .ci-card{background:color-mix(in srgb,#fff 80%,transparent)}
.card,.tile,.ex,.food,.bite-card,.coachnote{box-shadow:var(--shadow)}
.card,.bite-card,.tile,.ex,.food,.coachnote{border-radius:var(--radius-md)}
.hero,.pbar-wrap,.ci-card{border-radius:var(--radius-lg)}
/* brillo superior tipo Apple en las tarjetas de color */
.hero,.pbar-wrap{position:relative;isolation:isolate}
.hero::before,.pbar-wrap::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%)}
.hero .go{box-shadow:0 1px 2px rgba(0,0,0,.12)}
@media (prefers-reduced-motion:reduce){.tabbar,.composer,.ci-card{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ── Micro-interacciones: todo lo que se toca responde ── */
.go,.ci-go,.askbtn,.tell button,.wrow button,.composer button,.food .fstep button,.ci-chip,.goal,.tab,.card .ct a,.addfood,.opt,.mat .ed{
  transition:transform var(--transition),opacity var(--transition),background-color var(--transition),border-color var(--transition)}
.go:active,.ci-go:active,.askbtn:active,.tell button:active,.wrow button:active,.composer button:active,.ci-chip:active,.goal:active,.addfood:active,.opt:active{transform:scale(.97)}
.tab:active{transform:scale(.92)}
.view.active{animation:m-view-in .22s var(--transition)}
@keyframes m-view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.active{animation:none}}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-soft)}

/* ── Toggle iOS (idéntico al de la app Merlin) ── */
.toggle{width:51px;height:31px;border-radius:999px;background:var(--m-bg-3);border:0;position:relative;cursor:pointer;flex-shrink:0;padding:0;display:inline-block;vertical-align:middle}
.toggle::after{content:"";position:absolute;width:27px;height:27px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform var(--transition);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle.on{background:var(--m-green)}
.toggle.on::after{transform:translateX(20px)}
.toggle:disabled{opacity:.45;cursor:default}

/* ── Segmento (selector de tema y similares) ── */
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-sm);padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:9px;cursor:pointer;transition:background-color var(--transition),color var(--transition)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* ── Bite, la mascota (bite.js): siempre respira y parpadea; cada humor tiene su gesto ── */
.bite-card{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;margin:0 0 14px;box-shadow:var(--shadow)}
.bite-fig{flex:none;width:76px;height:76px;--bx:0px;--by:0px}
.bite-fig-mini{width:44px;height:44px;margin-top:2px}
.bite-svg{width:100%;height:100%;overflow:visible;transform-origin:50% 90%;animation:bite-breathe 3.4s ease-in-out infinite}
.bite-face{transform:translate(var(--bx),var(--by));transition:transform .25s ease-out}
.bite-eyes{transform-origin:60px 50px;animation:bite-blink var(--blink,5s) infinite}
@keyframes bite-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03,1.02) translateY(-1px)}}
@keyframes bite-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.bite-nuevo .bite-hand{transform-origin:100px 76px;animation:bite-wave .9s ease-in-out infinite}
@keyframes bite-wave{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg) translateY(-2px)}}
.bite-celebrando,.bite-saciado{animation:bite-jump .75s var(--ease-spring) 2}
@keyframes bite-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px) scale(1.06)}}
.bite-racha .bite-spark{animation:bite-flicker 1.1s ease-in-out infinite}
@keyframes bite-flicker{50%{opacity:.35}}
.bite-mood-racha .bite-name span{display:inline-block;animation:bite-flame .7s ease-in-out infinite alternate}
@keyframes bite-flame{to{transform:scale(1.25) rotate(-6deg)}}
.bite-contento{animation:bite-sway 3.4s ease-in-out infinite}
@keyframes bite-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-1px)}}
.bite-flojo{animation:bite-slump 4s ease-in-out infinite}
@keyframes bite-slump{0%,100%{transform:translateY(2px) scaleY(.97)}50%{transform:translateY(3px) scaleY(.95)}}
.bite-dormido{animation:bite-breathe 5.5s ease-in-out infinite;filter:saturate(.7)}
.bite-zzz{animation:bite-zfloat 2.4s ease-in-out infinite}
@keyframes bite-zfloat{0%{transform:translateY(0);opacity:.2}50%{opacity:1}100%{transform:translateY(-10px);opacity:0}}
.bite-cansado .bite-mouth{transform-origin:60px 72px;animation:bite-yawn 4s ease-in-out infinite}
@keyframes bite-yawn{0%,60%,100%{transform:scale(1)}80%{transform:scale(1.25)}}
.bite-hambriento .bite-belly{transform-origin:60px 86px;animation:bite-rumble .5s ease-in-out infinite}
@keyframes bite-rumble{0%,100%{transform:scale(1)}50%{transform:scale(1.12,.94)}}
.bite-hambriento .bite-face{--bx:4px;--by:3px}
.bite-plate{animation:bite-plate 2.2s ease-in-out infinite}
@keyframes bite-plate{50%{transform:translateY(-2px)}}
.bite-rain path{animation:bite-drop 1s linear infinite}
.bite-rain path:nth-child(2){animation-delay:.3s}.bite-rain path:nth-child(3){animation-delay:.6s}.bite-rain path:nth-child(4){animation-delay:.15s}.bite-rain path:nth-child(5){animation-delay:.45s}
@keyframes bite-drop{0%{transform:translateY(-10px);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}
.bite-umbrella{transform-origin:60px 32px;animation:bite-sway 2.6s ease-in-out infinite}
.bite-sweat{animation:bite-drop 1.8s ease-in infinite}
.bite-calor{animation:bite-breathe 2.2s ease-in-out infinite}
.bite-frio{animation:bite-shiver .14s linear infinite}
@keyframes bite-shiver{0%,100%{transform:translateX(0)}50%{transform:translateX(1.2px)}}
/* reacciones puntuales (Bite.react) */
.bite-react-comida .bite-mouth{transform-origin:60px 70px;animation:bite-chew .35s ease-in-out 4}
@keyframes bite-chew{50%{transform:scaleY(.3)}}
.bite-react-entreno .bite-svg,.bite-react-pr .bite-svg{animation:bite-jump .7s var(--ease-spring) 2}
.bite-react-pr{position:relative}
.bite-react-pr::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:
  radial-gradient(circle at 20% 30%,#FFD60A 3px,transparent 4px),radial-gradient(circle at 80% 25%,#FF6A3D 3px,transparent 4px),
  radial-gradient(circle at 50% 10%,#30D158 3px,transparent 4px),radial-gradient(circle at 15% 75%,#6C9BE8 3px,transparent 4px),
  radial-gradient(circle at 85% 70%,#BF5AF2 3px,transparent 4px),radial-gradient(circle at 60% 90%,#FFD60A 3px,transparent 4px);
  animation:bite-confetti 1.2s ease-out forwards;pointer-events:none}
@keyframes bite-confetti{0%{transform:scale(.4);opacity:0}30%{opacity:1}100%{transform:scale(1.6) translateY(-10px);opacity:0}}
.bite-react-peso .bite-svg{animation:bite-nod .5s ease-in-out 2}
@keyframes bite-nod{50%{transform:rotate(3deg) translateY(2px)}}
.bite-txt{flex:1;min-width:0}
.bite-name{font-weight:800;font-size:13px;color:var(--brand);letter-spacing:.02em}
.bite-say{font-size:14.5px;font-weight:600;color:var(--ink);margin:2px 0 6px;line-height:1.3}
.bite-stats{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}
.bite-stats span{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 8px}
@media (prefers-reduced-motion:reduce){.bite-svg,.bite-svg *,.bite-fig::after{animation:none!important}.bite-eyes{animation:bite-blink 5s infinite!important}}
.asklink{font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap}