/* Paleta tomada del logo: verde azulado oscuro, verde, tomate, amarillo (pan/moneda), azul (leche) y crema */
:root{
  --bg:#fbf8f2;--card:#fff;--ink:#0d2f2e;--mute:#5b706d;--line:#e6e2d6;
  --hdr:#085150;--g:#2f9150;--gd:#085150;--gl:#e3f3e8;
  --orange:#f15421;--yellow:#ffb22b;--yel-l:#fff3d4;--yel-d:#6b4700;--blue:#15a8ea;--blue-l:#e2f4fd;--blue-d:#0b6b9e;
  --warn:#ffb22b;--red:#f15421
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0b1c1b;--card:#12302e;--ink:#f3efe4;--mute:#9db4af;--line:#214743;
  --hdr:#06403f;--g:#48b868;--gd:#7fd69a;--gl:#17433c;
  --yel-l:#3a3014;--yel-d:#ffd57a;--blue-l:#0f3a4d;--blue-d:#7cd0f5
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
header{background:var(--hdr);color:#fbf8f2;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));font-weight:800;font-size:21px;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
header img{width:38px;height:38px;border-radius:10px;display:block}
header .w1{color:#fbf8f2}header .w2{color:#7fd69a}
main{max-width:640px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
h2{margin:8px 0 2px;font-size:24px}h3{margin:22px 0 8px;font-size:17px}h3 small{color:var(--mute);font-weight:400}
.sub{color:var(--mute);margin:0 0 14px}.hint{color:var(--mute);font-size:13px;margin:8px 0}
.lbl{display:block;font-weight:600;margin:18px 0 8px}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 16px}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--g);border-color:var(--g);color:#fff;font-weight:700}
.ghost{background:transparent}.wide{width:100%}.sm{padding:6px 12px;font-size:14px}
select,input[type=number]{width:100%;font:inherit;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.progress{display:flex;gap:4px;margin-bottom:14px}
.progress span{flex:1;text-align:center;font-size:11px;padding:6px 0;border-bottom:3px solid var(--line);color:var(--mute)}
.progress .on{border-color:var(--yellow);color:var(--ink);font-weight:800}.progress .done{border-color:var(--g)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid.one{grid-template-columns:1fr}
.card{padding:16px;text-align:center;font-weight:600;border-width:2px}
.card.sel,.chip.sel{border-color:var(--g);background:var(--gl)}
.card.row{display:flex;gap:12px;align-items:center;text-align:left}.card.row small{display:block;color:var(--mute);font-weight:400}
.card .big{display:block;font-size:28px}.card.row .big{display:inline;font-size:28px}
.chain{border-left:6px solid var(--c)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chip{border-radius:99px;padding:8px 14px}
.chip.warn.sel{border-color:var(--yellow);background:var(--yel-l);color:var(--yel-d)}
.money{display:flex;align-items:center;gap:8px;font-size:30px;font-weight:700;color:var(--hdr)}.money input{font-size:28px;font-weight:700}
@media(prefers-color-scheme:dark){.money{color:var(--yellow)}}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px}
.stepper button{width:48px;height:48px;font-size:24px;padding:0}.stepper div{text-align:center}.stepper b{display:block;font-size:28px}.stepper small{color:var(--mute)}
.foot{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.foot .primary{flex:1}
.top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.budget{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px}
.bt{display:flex;justify-content:space-between;align-items:baseline}.bt b{font-size:24px}.bt small{color:var(--mute)}
.bar{height:10px;border-radius:9px;background:var(--line);margin:8px 0;overflow:hidden}.bar i{display:block;height:100%;background:var(--g)}
.budget.over .bar i{background:var(--orange)}.budget.over .bt b{color:var(--orange)}
.alert{background:var(--yel-l);color:var(--yel-d);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:14px;border-left:5px solid var(--yellow)}
.dish{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"day day day day" "em dt pr sw";gap:2px 10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px;cursor:pointer}
.day{grid-area:day;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--g)}
.em{grid-area:em;font-size:32px}.dt{grid-area:dt}.dt small{display:block;color:var(--mute);font-size:12px}
.pr{grid-area:pr;font-weight:700}.swap{grid-area:sw;padding:6px 9px}
.actions{display:flex;gap:10px;margin:18px 0}.actions button{flex:1}
.hero{text-align:center;margin:12px 0}.hero span{font-size:60px}.hero h2{margin:0}.hero p{color:var(--mute);margin:4px 0}
.cost{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cost.single{grid-template-columns:1fr;margin-top:14px}
.cost div{background:var(--yel-l);border-radius:12px;padding:10px;text-align:center}.cost small{display:block;color:var(--mute);font-size:12px}.cost b{font-size:20px}
.nutr{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nutr div{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:10px 4px;text-align:center}
.nutr div:nth-child(1){--c:var(--orange)}.nutr div:nth-child(2){--c:var(--g)}.nutr div:nth-child(3){--c:var(--yellow)}.nutr div:nth-child(4){--c:var(--blue)}
.nutr b{font-size:20px}.nutr small{color:var(--mute)}.nutr span{display:block;font-size:12px;color:var(--mute)}
.ing{list-style:none;padding:0;margin:0}.ing li{display:grid;grid-template-columns:1fr auto 70px;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.ing em{text-align:right;color:var(--mute);font-style:normal}.ing input{margin-right:6px;accent-color:var(--g)}
.ing small{display:block;color:var(--mute);font-size:12px}
.ing.check li{grid-template-columns:1fr auto 76px}
.steps{padding-left:22px}.steps li{margin-bottom:8px}
.reset{text-align:center;margin-top:30px}.reset a{color:var(--mute);font-size:13px;text-decoration:underline;cursor:pointer}
.dayhead{display:flex;justify-content:space-between;align-items:baseline;margin:18px 2px 6px;font-size:17px}.dayhead span{color:var(--mute);font-size:14px}
.real{color:var(--g);font-style:normal;font-size:11px}
.tag{display:inline-block;margin-top:4px;font-size:12px;background:var(--blue-l);color:var(--blue-d);border-radius:8px;padding:2px 8px}
.note{background:var(--blue-l);color:var(--blue-d);border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:14px;border-left:5px solid var(--blue)}
.budget .hint{margin:6px 0 0}
.logo-hero{display:block;width:min(220px,60%);margin:0 auto 6px;border-radius:18px}
.instalar{position:absolute;right:12px;top:calc(10px + env(safe-area-inset-top));background:var(--yellow);color:#3a2a00;border:0;border-radius:99px;padding:6px 12px;font-size:13px;font-weight:800}
/* Aviso y guía de instalación */
.banner{background:var(--hdr);color:#fbf8f2;display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0 auto;max-width:640px;border-radius:0 0 14px 14px}
.banner[hidden]{display:none}
.banner img{border-radius:10px;flex:none}
.banner div{flex:1;min-width:0;line-height:1.25}.banner b{display:block;font-size:14px}.banner small{display:block;font-size:12px;opacity:.85}
.banner .como{background:var(--yellow);color:#3a2a00;border:0;font-weight:800;padding:8px 14px;border-radius:99px;flex:none}
.banner .cerrar{background:transparent;border:0;color:#fbf8f2;opacity:.7;padding:6px;flex:none}
#hoja-instalar{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
#hoja-instalar .fondo{position:absolute;inset:0;background:rgba(8,40,38,.55)}
#hoja-instalar .hoja{position:relative;background:var(--card);color:var(--ink);width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;text-align:center;animation:sube .22s ease-out}
@keyframes sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
#hoja-instalar .x{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:18px;color:var(--mute);padding:6px 10px}
#hoja-instalar .mini{border-radius:14px;margin-bottom:6px}
#hoja-instalar h3{margin:4px 0}
#hoja-instalar .ahora{width:100%;margin:8px 0 2px;padding:14px;font-size:17px}
#hoja-instalar .pasos{list-style:none;counter-reset:p;text-align:left;padding:0;margin:14px 0}
#hoja-instalar .pasos li{counter-increment:p;position:relative;padding:8px 0 8px 40px;min-height:40px;line-height:1.4}
#hoja-instalar .pasos li::before{content:counter(p);position:absolute;left:0;top:6px;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:#3a2a00;font-weight:800;display:flex;align-items:center;justify-content:center}
#hoja-instalar .ico{vertical-align:-4px;color:var(--blue)}
#hoja-instalar .menu3{display:inline-block;background:var(--line);border-radius:6px;padding:0 7px}
#hoja-instalar .aviso{background:var(--yel-l);color:var(--yel-d);border-radius:10px;padding:8px 10px;font-size:13px;text-align:left}
/* Pie de página (app y páginas públicas) */
.pie{max-width:760px;margin:20px auto 0;padding:18px 16px calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center;font-size:14px}
.pie a{color:var(--gd)}
.pie p{margin:6px 0}
.pie .chico{font-size:12px;color:var(--mute)}
.anuncio{margin:22px 0;text-align:center}
.anuncio:empty{display:none}
.anuncio-rotulo{display:block;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}