/* Tastín: estilos base y componentes compartidos (portados de vista-previa/preview/preview.css).
   Aspectos: html[data-look="calido"|"oscuro"|"divertido"]. Modo noche: html[data-noche="1"] (botones grandes; el aspecto oscuro lo pone main.js).
   Móvil primero: barra inferior. Desde 900 px: barra lateral. Sin marco de dispositivo. */

/* ---------- tokens ---------- */
:root{
  --display:'Fredoka','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --gris:#A9A7B6;--ambar:#E6A22E;--verde:#35A874;--rojo:#E0505C;--azul:#5FA9E6;
  --focus:#2F6FED;
  --tap:44px;--r-card:24px;--r-pill:999px;
  color-scheme:light;
  /* aspecto cálido (por defecto) */
  --bg:#FBF3F0;--fg:#3A2E44;--muted:#675B71;--card:#FFFFFF;--line:#F0E0DC;--acc:#F2827F;--acc-fg:#3a1714;
  --acc2:#79BC98;--soft:#F8E6E2;--tint:#F1E9FB;--ink:#3A2E44;--shadow:0 6px 18px rgba(120,70,80,.08);
  --k-spoon:#F2827F;--k-leaf:#79BC98;--k-pea:#9ED3A6;--st-bg:#FBEDE8;
  --pa:#F28B82;--pb:#F6A66B;--pc:#EBC46A;--pd:#8CCB8F;--pe:#E39A87;--pf:#7FB6E6;--pg:#F6C453;--ph:#B9B3F0;--pi:#C99A6B;--pj:#E7A6C8;
  --blob1:#FBD7CF;--blob2:#E4DAF7;
  --c1:#FF5C5C;--c2:#FF9F1C;--c3:#2EA8FF;--c4:#22C58B;--c5:#9B6BFF;
}
/* aspecto oscuro (modo noche) */
:root[data-look="oscuro"]{
  --bg:#12152A;--fg:#EEE9F6;--muted:#A19EB9;--card:#1C2040;--line:#2E3358;--acc:#F4C26B;--acc-fg:#2A2008;
  --acc2:#6FD3B3;--soft:#242954;--tint:#262B52;--ink:#F1ECF4;--shadow:0 6px 18px rgba(0,0,0,.28);
  --k-spoon:#F4C26B;--k-leaf:#6FD3B3;--k-pea:#9BE0C0;--st-bg:#1A1E3A;--focus:#7FA8FF;color-scheme:dark;
  --pa:#F0847F;--pb:#F2A465;--pc:#E8C163;--pd:#6FCB92;--pe:#E39580;--pf:#77B7F2;--pg:#F5C453;--ph:#9D8CF0;--pi:#C99A6B;--pj:#E58CBC;
  --blob1:#3B2E58;--blob2:#1E3A55;
}
/* aspecto divertido */
:root[data-look="divertido"]{
  --bg:#FFFBE6;--fg:#2D2A4A;--muted:#6A6690;--card:#FFFFFF;--line:#EFE6B8;--acc:#6C5CE7;--acc-fg:#FFFFFF;
  --acc2:#22C58B;--soft:#FFF3B8;--tint:#E9E5FF;--ink:#2D2A4A;--shadow:0 6px 0 rgba(43,40,80,.08);
  --k-spoon:#FF5C8A;--k-leaf:#22C58B;--k-pea:#57D26B;--st-bg:#FFF8D9;--focus:#2F6FED;
  --pa:#FF5C5C;--pb:#FF9F1C;--pc:#FFC93C;--pd:#22C58B;--pe:#FF7A59;--pf:#2EA8FF;--pg:#FFB703;--ph:#9B6BFF;--pi:#C77B3C;--pj:#FF5C8A;
  --blob1:#FFD6E3;--blob2:#CFE9FF;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.4;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:600;line-height:1.15}
a{color:inherit}
p{margin:0 0 .6em}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:0}
body::before{width:360px;height:320px;left:-120px;top:-110px;background:var(--blob1);opacity:.75;border-radius:60% 40% 55% 45%}
body::after{width:300px;height:280px;right:-110px;top:120px;background:var(--blob2);opacity:.6;border-radius:45% 55% 40% 60%}
/* modo noche: letra más grande */
html[data-noche="1"] body{font-size:18px}

/* ---------- estructura: app, cabecera, contenido ---------- */
#app{position:relative;z-index:1;max-width:760px;margin:0 auto;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(104px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:5;
  padding:calc(12px + env(safe-area-inset-top,0px)) 0 10px;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.marca{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);min-height:var(--tap);border-radius:12px}
.marca .word{font-size:28px}
.topr{display:flex;align-items:center;gap:8px}
.sync{font-size:.74rem;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:32px}
.sync[data-estado="ok"]{background:color-mix(in srgb,var(--verde) 22%,var(--card))}
.sync[data-estado="pend"]{background:color-mix(in srgb,var(--azul) 28%,var(--card))}
.sync[data-estado="sin"]{background:color-mix(in srgb,var(--ambar) 30%,var(--card))}
.sync[data-estado="error"]{background:color-mix(in srgb,var(--rojo) 26%,var(--card))}
.screen{position:relative;min-height:50vh;padding-top:4px}
#view:focus{outline:none}
.disc{font-size:.76rem;color:var(--muted);line-height:1.5;text-align:center;margin:22px 8px 0}
html[data-sesion="no"] .tabs,html[data-sesion="no"] .topr{display:none}

/* ---------- barra de pestañas (móvil: abajo; >=900 px: lateral) ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.tabbar{display:flex;gap:2px;width:100%;max-width:560px}
.tab{flex:1;min-width:0;min-height:56px;border:0;background:transparent;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.68rem;line-height:1.1;color:var(--muted);text-decoration:none;cursor:pointer;border-radius:18px;text-align:center}
.tab .ic{width:22px;height:22px}
.tab[aria-current="page"],.tab[aria-expanded="true"]{color:var(--fg);font-weight:600;background:var(--soft)}
.tab[aria-current="page"] .ic .ac{fill-opacity:.9}

/* ---------- iconos, caras, ilustraciones ---------- */
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.ic .ac{stroke:var(--acc2);fill:var(--acc2);fill-opacity:.35}
.ic .fl{fill:currentColor;stroke:none}
.ic.s{width:15px;height:15px}
.face{width:34px;height:34px;display:block}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:-2px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.il{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1/1;overflow:visible}
.il[data-c="Fruta"]{--il1:var(--pa)}.il[data-c="Verdura"]{--il1:var(--pb)}.il[data-c="Cereal y tubérculo"]{--il1:var(--pc)}.il[data-c="Legumbre"]{--il1:var(--pd)}.il[data-c="Carne"]{--il1:var(--pe)}.il[data-c="Pescado y marisco"]{--il1:var(--pf)}.il[data-c="Huevo"]{--il1:var(--pg)}.il[data-c="Lácteo"]{--il1:var(--ph)}.il[data-c="Frutos secos y semillas"]{--il1:var(--pi)}.il[data-c="Otros"]{--il1:var(--pj)}
.il{--il2:color-mix(in srgb,var(--il1) 62%,#2e2338);--il3:var(--acc2)}
.il.big{width:150px;height:150px}

/* ---------- tarjetas, filas, rejilla ---------- */
.card{background:var(--card);border-radius:var(--r-card);padding:16px;margin-bottom:12px;box-shadow:var(--shadow);color:var(--fg)}
.card h2{font-size:1.05rem;margin-bottom:8px}
.card.hoy{padding:14px}
.sub{color:var(--muted);font-size:.84rem;line-height:1.45;margin:0}
.sub a{color:inherit}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.row{display:flex;align-items:center;gap:12px;padding:10px;border:0;background:var(--card);color:var(--fg);border-radius:20px;margin-bottom:8px;
  cursor:pointer;width:100%;min-height:var(--tap);text-align:left;text-decoration:none;box-shadow:var(--shadow)}
.row .em,.tile .em{border-radius:18px;background:var(--soft);display:grid;place-items:center;padding:6px;position:relative;overflow:hidden}
.row .em{width:56px;height:56px;flex:none}
.row .em .il{width:46px;height:46px}
.row .em:has(.foto),.tile .em:has(.foto){padding:0}
.row .tx{min-width:0;flex:1}
.row .tx b{display:block;font-size:.95rem;overflow-wrap:anywhere}
.row .sub .face{display:inline-block;width:16px;height:16px;vertical-align:-3px}
.card.hoy .row{box-shadow:none;background:var(--soft)}
.card.hoy .row .em{background:var(--card)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.tile{border:0;background:var(--card);color:var(--fg);border-radius:22px;padding:12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:7px;min-width:0;
  min-height:var(--tap);box-shadow:var(--shadow);transition:transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile .em{height:94px;padding:8px}
.tile .em .il{width:76px;height:76px}
.tile b{font-size:.88rem;overflow-wrap:anywhere;line-height:1.25}

/* ---------- chips, pastillas, botones ---------- */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:0;background:var(--soft);border-radius:var(--r-pill);padding:8px 14px;min-height:var(--tap);font-size:.82rem;cursor:pointer;color:var(--fg);
  display:inline-flex;align-items:center;gap:6px}
.chip .ic{width:15px;height:15px}
.chip[aria-pressed="true"],.chip.on{background:var(--fg);color:var(--bg)}
.chip.upl{cursor:pointer}
.chip.upl:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:3px 10px 3px 8px;font-size:.74rem;font-weight:600;background:var(--soft);color:var(--fg);line-height:1.4}
.pill .ic{width:14px;height:14px}
.pill.gris{background:color-mix(in srgb,var(--gris) 24%,var(--card))}
.pill.ambar{background:color-mix(in srgb,var(--ambar) 26%,var(--card))}
.pill.verde{background:color-mix(in srgb,var(--verde) 24%,var(--card))}
.pill.rojo{background:color-mix(in srgb,var(--rojo) 24%,var(--card))}
.pill.azul{background:color-mix(in srgb,var(--azul) 28%,var(--card))}
.pill.gris .ic{color:var(--gris)}.pill.ambar .ic{color:var(--ambar)}.pill.verde .ic{color:var(--verde)}.pill.rojo .ic{color:var(--rojo)}.pill.azul .ic{color:var(--azul)}
.pill.sel{padding-right:3px;gap:6px}
.pill .x{border:0;background:transparent;width:var(--tap);height:var(--tap);margin:-11px -6px -11px 0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:inherit;padding:0}
.pill .x .ic{width:13px;height:13px}
.pill .x:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.tag{display:inline-block;font-size:.66rem;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--verde) 26%,var(--card));vertical-align:1px;white-space:nowrap}
.tag.p{background:color-mix(in srgb,var(--ambar) 30%,var(--card))}
.btn{border:0;background:var(--acc);color:var(--acc-fg);border-radius:var(--r-pill);padding:11px 18px;min-height:var(--tap);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;text-align:center;line-height:1.2}
.btn .ic{width:18px;height:18px}
.btn.ghost{background:var(--soft);color:var(--fg)}
.btn.sm{padding:8px 14px;min-height:var(--tap);font-size:.84rem}
.btn.danger{background:var(--rojo);color:#fff}
.btn[disabled]{opacity:.5;cursor:default}
.btn:active{transform:scale(.97)}
.btn.ancho{width:100%}
html[data-noche="1"] .btn{min-height:58px;font-size:1.08rem;padding:14px 22px}
html[data-noche="1"] .btn.sm{min-height:48px;font-size:.98rem}
html[data-noche="1"] .chip{min-height:50px;font-size:.95rem}
html[data-noche="1"] .row{min-height:64px}
html[data-noche="1"] .tab{min-height:64px;font-size:.78rem}
html[data-noche="1"] .icon-btn{width:52px;height:52px}
html[data-noche="1"] input[type=text],html[data-noche="1"] input[type=date],html[data-noche="1"] input[type=number],html[data-noche="1"] input[type=time],html[data-noche="1"] select,html[data-noche="1"] textarea{min-height:56px;font-size:1.05rem}
html[data-noche="1"] .gusto button{min-height:96px}

.icon-btn{border:0;background:var(--card);border-radius:14px;width:var(--tap);height:var(--tap);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);color:var(--fg);padding:0;flex:none}
.icon-btn.sm{border-radius:12px}
.icon-btn.av{border-radius:50%;overflow:hidden}
.icon-btn.av .avatar{width:100%;height:100%;font-size:1rem}

/* ---------- formularios ---------- */
input[type=text],input[type=date],input[type=number],input[type=time],input[type=email],input[type=password],input[type=tel],select,textarea{
  font:inherit;font-size:max(16px,1em);width:100%;min-height:var(--tap);padding:11px 14px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);color:var(--fg)}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:0;border-color:var(--acc)}
input[type=color]{width:100%;height:var(--tap);padding:4px;border-radius:14px}
label.f{display:block;font-size:.8rem;color:var(--muted);margin:12px 0 5px}
.search{position:relative}
.search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{padding-left:40px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- avisos en línea ---------- */
.warn{background:color-mix(in srgb,var(--ambar) 20%,var(--card));border-radius:16px;padding:10px 12px;font-size:.84rem;margin:8px 0;line-height:1.45}
.alert{background:color-mix(in srgb,var(--rojo) 16%,var(--card));border-radius:16px;padding:10px 12px;font-size:.84rem;margin:8px 0;line-height:1.45}
.warn .ic,.alert .ic{vertical-align:-4px}
.rwarn{margin-top:6px;font-size:.78rem;line-height:1.4;background:color-mix(in srgb,var(--ambar) 22%,var(--card));border-radius:12px;padding:6px 10px;display:flex;gap:6px;align-items:flex-start}
.rwarn .ic{width:15px;height:15px;color:var(--ambar);margin-top:1px}
.credit{font-size:.72rem;color:var(--muted);margin:6px 2px 0;line-height:1.4}

/* ---------- hojas (bottom sheet) ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(24,18,36,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{background:var(--bg);color:var(--fg);width:100%;max-width:560px;max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain;outline:none;
  border-radius:30px 30px 0 0;padding:18px 18px calc(28px + env(safe-area-inset-bottom,0px));animation:rise .28s cubic-bezier(.2,.8,.3,1);box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.sheet::before{content:"";display:block;width:42px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 18%,transparent);margin:-6px auto 12px}
.sheet h2{font-size:1.25rem;display:flex;align-items:center;gap:10px;padding-right:48px}
.sheet h2 .il{width:44px;height:44px;flex:none}
.sheet h2 .foto{width:44px;height:44px;flex:none;border-radius:13px}
.sheet .close{float:right;position:relative;z-index:2;margin:0 0 6px 10px}
.sheet .close .ic{width:20px;height:20px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* ---------- toast (aviso con deshacer) ---------- */
#toast{position:fixed;inset:0;pointer-events:none;z-index:90}
.toast{pointer-events:auto;position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:var(--fg);color:var(--bg);padding:6px 6px 6px 18px;border-radius:var(--r-pill);font-size:.88rem;font-weight:500;
  box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100% - 32px));animation:rise .25s}
.toast .txt{min-width:0;padding:4px 0;line-height:1.35}
.toast button{border:0;background:transparent;color:inherit;font-weight:700;min-height:var(--tap);padding:0 14px;border-radius:var(--r-pill);cursor:pointer;text-decoration:underline;text-underline-offset:3px;flex:none}
.toast button:hover{background:color-mix(in srgb,var(--bg) 14%,transparent)}
.toast .cerrar{font-weight:400;text-decoration:none;font-size:1.1rem;padding:0 12px}

/* ---------- emergencia (pantalla roja) ---------- */
.emerg{position:fixed;inset:0;z-index:210;background:var(--rojo);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:max(28px,env(safe-area-inset-top,0px)) 28px max(28px,env(safe-area-inset-bottom,0px));text-align:center;overflow:auto}
.emerg h1{font-size:2rem}
.emerg p{max-width:34ch;margin:0;font-size:1.05rem}
.emerg .num{font-family:var(--display);font-size:3.4rem;font-weight:700;line-height:1}
.emerg .num a{color:#fff;text-decoration:none;display:inline-block;min-height:var(--tap);padding:0 10px}
.emerg .btn{background:#fff;color:#8c1d27}
.emerg .btn.ghost{background:transparent;color:#fff;border:2px solid #fff}
.emerg .pie{font-size:.88rem;opacity:.9}
.emerg :focus-visible{outline-color:#fff}

/* ---------- entrada (splash) y logotipo ---------- */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden;
  padding:env(safe-area-inset-top,0px) 16px env(safe-area-inset-bottom,0px)}
.splash-bg{position:absolute;inset:0;background:var(--st-bg)}
.splash .word{position:relative;font-size:clamp(72px,25vw,200px);transform-origin:0 0}
.splash .word>span{animation:pop .6s cubic-bezier(.3,1.5,.5,1) both}
.splash .word>span:nth-child(2){animation-delay:.07s}.splash .word>span:nth-child(3){animation-delay:.14s}.splash .word>span:nth-child(4){animation-delay:.21s}
.splash .word>span:nth-child(5){animation-delay:.28s}.splash .word>span:nth-child(6){animation-delay:.35s}
@keyframes pop{0%{transform:translateY(.35em) scale(.5);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.splash .hint{position:relative;color:var(--muted);font-size:.95rem;margin:0;animation:fadein .6s 1.5s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.splash .skip{position:absolute;right:16px;top:calc(14px + env(safe-area-inset-top,0px));width:auto;padding:0 16px;font-size:.9rem;background:var(--card)}
.lienzo-confeti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}

.word{display:flex;align-items:baseline;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;color:var(--ink);letter-spacing:.01em;user-select:none}
.word>span{display:inline-block}
html[data-look="divertido"] .word>span:nth-child(1){color:var(--c1)}
html[data-look="divertido"] .word>span:nth-child(2){color:var(--c2)}
html[data-look="divertido"] .word>span:nth-child(3){color:var(--c3)}
html[data-look="divertido"] .word>span:nth-child(4){color:var(--c4)}
html[data-look="divertido"] .word>span:nth-child(6){color:var(--c5)}
.spoonwrap{margin:0 .035em}
.spoon{all:unset;display:inline-block;cursor:pointer;height:1.02em;width:.44em;position:relative;border-radius:6px}
.spoon:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.spoon svg{display:block;width:100%;height:100%;overflow:visible}
.spoon.fijo{cursor:default}
.spoon .body{transform-box:view-box;transform-origin:20px 100px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.spoon:hover .body{transform:rotate(-9deg)}
.spoon .leaf{transform-box:fill-box;transform-origin:0% 100%}
.spoon:hover .leaf{animation:wiggle .7s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}55%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}}
.spoon .pea{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.spoon.feed .pea{animation:drop 1.5s cubic-bezier(.25,.8,.35,1.1) both}
@keyframes drop{0%{transform:translate(-38px,-92px) scale(.5);opacity:0}12%{opacity:1}45%{transform:translate(0,0) scale(1.15)}58%{transform:translate(0,-3px) scale(.95)}68%{transform:translate(0,0) scale(1)}88%{opacity:1}100%{transform:translate(0,0) scale(.2);opacity:0}}
.spoon.feed .bowl{animation:squish .5s .5s ease both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes squish{0%,100%{transform:scale(1)}40%{transform:scale(1.12,.9)}}
.spoon.feed .body{animation:nod 1.1s ease both}
@keyframes nod{0%,100%{transform:rotate(0)}30%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}}

/* ---------- inicio: cabecera y estadísticas ---------- */
.hero{position:relative;border-radius:30px;padding:20px 18px 18px;margin-bottom:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 22%,var(--card)),color-mix(in srgb,var(--acc2) 20%,var(--card)));overflow:hidden;box-shadow:var(--shadow)}
.hero h1{font-size:1.6rem;line-height:1.1}
.hero .sub{margin-top:4px}
.hero .sprig{position:absolute;right:-8px;top:-10px;width:100px;height:100px;opacity:.75}
.hero h1,.hero .sub{padding-right:64px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.stat{background:color-mix(in srgb,var(--card) 82%,transparent);border-radius:20px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.stat b{font-family:var(--display);font-size:1.15rem;line-height:1}
.stat span{font-size:.68rem;color:var(--muted);line-height:1.25}
.ring{width:54px;height:54px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .bg{stroke:color-mix(in srgb,var(--fg) 10%,transparent)}
.ring .fg{stroke:var(--acc);transition:stroke-dashoffset .8s ease}
.stat:nth-child(2) .ring .fg{stroke:var(--acc2)}
.stat:nth-child(3) .ring .fg{stroke:var(--ambar)}
.ringwrap{position:relative;width:54px;height:54px}
.ringwrap b{position:absolute;inset:0;display:grid;place-items:center;font-size:.9rem}

/* ---------- gusto (caras) ---------- */
.gusto{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gusto button{border:2px solid transparent;background:var(--soft);border-radius:20px;padding:10px 4px 8px;min-height:var(--tap);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.gusto button small{font-size:.72rem;color:var(--muted)}
.gusto button[aria-pressed="true"]{border-color:var(--fg);background:var(--card)}
.gusto .face{width:38px;height:38px}

/* ---------- calendario ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .dow{font-size:.7rem;color:var(--muted);text-align:center;padding:2px 0;font-weight:600}
.day{aspect-ratio:1/1.08;border-radius:15px;border:0;background:var(--soft);padding:5px 3px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  cursor:pointer;min-width:0;min-height:var(--tap);font-size:.8rem;color:var(--fg)}
.day.fuera{opacity:.4}
.day.today{background:var(--acc);color:var(--acc-fg);font-weight:700}
.day.sel{outline:2.5px solid var(--fg);outline-offset:1px}
.dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-height:9px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gris);vertical-align:middle}
.dot.verde{background:var(--verde)}.dot.ambar{background:var(--ambar)}.dot.rojo{background:var(--rojo)}.dot.azul{background:var(--azul)}
.dot.plan{background:transparent;box-shadow:inset 0 0 0 2px var(--gris)}
.dot.plan.ambar{box-shadow:inset 0 0 0 2px var(--ambar)}
.day.today .dot.plan{box-shadow:inset 0 0 0 2px currentColor}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:.73rem;color:var(--muted);margin:10px 0 2px}

/* ---------- fotos, imágenes ---------- */
.foto{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;max-width:100%;max-height:100%}
.imgbox{height:190px;border-radius:24px;overflow:hidden;background:var(--soft);display:grid;place-items:center;margin:10px 0 0}
.imgbox .il{width:150px;height:150px}

/* ---------- así se ofrece ---------- */
.servir{display:flex;flex-direction:column;gap:10px}
.srow>b{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.sf{display:flex;gap:8px;flex-wrap:wrap}
.ftile{margin:0;width:104px;background:var(--soft);border-radius:20px;padding:8px 6px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid transparent}
.ftile svg{width:100%;height:64px;display:block;overflow:visible}
.ftile figcaption{font-size:.72rem;color:var(--fg);text-align:center;line-height:1.2}
button.ftile{cursor:pointer;font:inherit;color:inherit;min-height:var(--tap)}
button.ftile[aria-pressed="true"]{border-color:var(--fg);background:var(--card)}
.snotes{margin-top:12px;background:var(--soft);border-radius:20px;padding:12px 14px}
.snotes h4{font-size:.92rem;margin-bottom:6px}
.snotes ul{margin:0;padding-left:18px;font-size:.84rem;line-height:1.5}
.snotes li{margin-bottom:5px}

/* ---------- buscador de alimento, galería ---------- */
.ta-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ta-item{display:flex;align-items:center;gap:10px;padding:8px;min-height:var(--tap);border:2px solid transparent;background:var(--card);color:var(--fg);border-radius:18px;text-align:left;cursor:pointer;width:100%;box-shadow:var(--shadow)}
.ta-item .tx{min-width:0;flex:1}
.ta-item .tx b{display:block;font-size:.92rem;overflow-wrap:anywhere}
.ta-item .th{width:44px;height:44px;border-radius:13px;background:var(--soft);overflow:hidden;display:grid;place-items:center;flex:none}
.ta-item .th .il{width:34px;height:34px}
.ta-item:hover,.ta-item.act{border-color:var(--fg)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.gthumb{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--soft);min-height:var(--tap)}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gthumb span{position:absolute;left:0;right:0;bottom:0;font-size:.66rem;padding:10px 4px 3px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));text-align:center}

/* ---------- avatar y perfil ---------- */
.avatar{border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--acc) 30%,var(--card));display:grid;place-items:center;flex:none;color:var(--fg);font-family:var(--display);font-weight:600}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.xl{width:84px;height:84px;font-size:2rem}
.avatar.md{width:62px;height:62px;font-size:1.5rem}
.avatar.sm{width:36px;height:36px;font-size:1rem}
.hh{display:flex;align-items:center;gap:14px;position:relative}
.pf-photo{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.pf-photo .col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pf .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf input:disabled{opacity:.65}
.pf .note{font-size:.78rem;color:var(--muted);margin:6px 2px 0;line-height:1.4}
.pf-tabs{margin:10px 0 4px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.88rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0}

/* ---------- escritorio: barra lateral (>= 900 px) ---------- */
@media (min-width:900px){
  #app{max-width:none;margin:0 0 0 232px;padding:0 max(40px,env(safe-area-inset-right,0px)) 48px 40px}
  /* contenido centrado en el espacio a la derecha de la barra lateral, también en monitores grandes */
  .top,.screen,.disc{width:100%;max-width:1120px;margin-left:auto;margin-right:auto}
  .disc{text-align:center}
  .top{padding-top:22px}
  .tabs{top:0;bottom:0;right:auto;width:232px;justify-content:flex-start;flex-direction:column;border-top:0;border-right:1px solid var(--line);
    background:color-mix(in srgb,var(--card) 94%,transparent);padding:22px 14px}
  .tabbar{flex-direction:column;gap:4px;max-width:none;width:100%}
  .tab{flex:none;min-height:48px;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 14px;font-size:.95rem;border-radius:16px}
  .sheet-bg{align-items:center}
  .sheet{max-width:560px;border-radius:30px;max-height:88vh;max-height:88dvh;padding-top:22px}
  .sheet::before{display:none}
  .toast{bottom:28px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .splash .skip{right:44px;top:44px}
  #view[data-tab="inicio"]{column-count:2;column-gap:16px;column-fill:balance}
  #view[data-tab="inicio"] .card,#view[data-tab="inicio"] .hero{break-inside:avoid}
  #view[data-tab="calendario"]{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
  #view[data-tab="seguimiento"]{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  #view[data-tab="seguimiento"]>.card:last-child{grid-column:1/-1}
  #view[data-tab="recetas"]{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
  #view[data-tab="recetas"]>.card{grid-column:1/-1}
}
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}
@media (min-width:1600px){
  html{font-size:112.5%}
  .top,.screen,.disc{max-width:1280px}
}
@media (min-width:2200px){
  html{font-size:125%}
  .top,.screen,.disc{max-width:1400px}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .spoon.feed .pea{opacity:1}
  .splash .word>span{opacity:1}
  body::before,body::after{display:none}
}

/* Con una hoja abierta el aviso sube arriba para no tapar sus botones. */
body:has(.sheet-bg) .toast{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}

/* Navegadores sin color-mix() (Chrome < 111, Firefox < 113, Safari < 16.2): fondos sólidos con borde de color,
   para que los estados (verde, ámbar, rojo...) se sigan distinguiendo. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .sync,.pill,.tag,.warn,.alert,.rwarn,.cm-pill{background:var(--card);border:1.5px solid var(--gris)}
  .sync[data-estado="ok"],.pill.verde,.tag,.cm-pill.cm-verde{border-color:var(--verde)}
  .sync[data-estado="pend"],.pill.azul{border-color:var(--azul)}
  .sync[data-estado="sin"],.pill.ambar,.tag.p,.warn,.rwarn,.cm-pill.cm-ambar{border-color:var(--ambar)}
  .sync[data-estado="error"],.pill.rojo,.alert,.cm-pill.cm-rojo{border-color:var(--rojo)}
  .hero{background:var(--card)}
  .stat{background:var(--card)}
  .avatar{background:var(--line)}
  .toast button:hover,.pill .x:hover{background:var(--line)}
  .ring .bg{stroke:var(--line)}
  .sheet::before{background:var(--line)}
  .top,.tabs{background:var(--bg)}
  .tabs{background:var(--card)}
}

/* ---------- selector de foto (js/ui/selectorFoto.js): Hacer foto / Elegir de la galería ---------- */
.sf{margin-top:6px}
.sf-botones{display:flex;flex-wrap:wrap;gap:8px}
.sf-btn{min-height:var(--tap);min-width:var(--tap)}
.sf-panel{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:12px;box-shadow:var(--shadow)}
.sf-panel .sf-botones{margin-top:10px}
.sf-video{display:block;width:100%;max-height:52vh;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:#000}
.sf-msg{min-height:1.4em;margin:8px 0 0;color:var(--muted)}
.sf-msg:empty{min-height:0;margin:0}