/* ============ Picandy Mini-Market · minimal ============ */
:root{
  --orange:#CF8B55;
  --orange-deep:#C0622B;
  --yellow:#F4CF34;
  --yellow-soft:#FFF1B8;
  --cream:#FFF8E7;
  --paper:#FFFDF8;
  --ink:#3D2A14;
  --ink-soft:#7A6248;
  --line:rgba(61,42,20,.12);
  --ice:#1C6E96;
  --ice-soft:#E4F4FB;
  --hot-soft:#FDEBDA;
  --flash-soft:#FFF4C2;
  --green:#25B865;
  --radius:22px;
  --shadow:0 10px 30px rgba(61,42,20,.12);
  --shadow-sm:0 3px 10px rgba(61,42,20,.08);
  --font-display:"Lilita One","Baloo 2",system-ui,sans-serif;
  --font-body:"Baloo 2",system-ui,sans-serif;
  --ease:cubic-bezier(.65,0,.25,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:#F6E6BE;color:var(--ink);font-family:var(--font-body);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input{font:inherit}
[hidden]{display:none!important}
#app{position:relative;max-width:480px;height:100dvh;margin:0 auto;overflow:hidden;overflow:clip;background:#FFEDB8;box-shadow:0 0 60px rgba(61,42,20,.18)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- Carga ---------- */
.loader{position:absolute;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:6px;background:var(--cream);transition:opacity .6s, visibility .6s}
.loader img{width:180px}
.loader p{margin:0;font-weight:700;color:var(--ink-soft)}
.loader.done{opacity:0;visibility:hidden}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-6px);opacity:.4}}

/* ---------- HUD ---------- */
.hud{position:absolute;z-index:40;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 16px 0;pointer-events:none}
.hud>*{pointer-events:auto}
.hud-logo img{height:34px;display:block;opacity:0;transform:translateY(-6px);transition:.4s}
body:not(.at-street) .hud-logo img{opacity:1;transform:none}
.hud-actions{display:flex;gap:10px}
.hud-btn{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,253,248,.92);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);display:grid;place-items:center;transition:transform .15s}
.hud-btn:active{transform:scale(.92)}
.hud-btn svg{width:22px;height:22px;fill:var(--ink);stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hud-btn .ico-off{display:none}
.hud-btn[aria-pressed="true"] .ico-on{display:none}
.hud-btn[aria-pressed="true"] .ico-off{display:block}
.cart-btn{transition:.4s var(--pop)}
body.at-street .cart-btn{opacity:0;transform:scale(.6);pointer-events:none}
.badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--orange-deep);color:#fff;font:800 12px/20px var(--font-body);text-align:center}
.badge.zero{display:none}
.bump{animation:bump .5s var(--pop)}
@keyframes bump{35%{transform:scale(1.3)}70%{transform:scale(.94)}}

/* ---------- Capas de interfaz ---------- */
.ui{position:absolute;z-index:20;left:0;right:0;pointer-events:none;transition:opacity .45s var(--ease), transform .45s var(--ease)}
.ui>*{pointer-events:auto}
.ui.off{opacity:0;transform:translateY(24px)}
.ui.off>*{pointer-events:none}
.ui-street{bottom:0;padding:0 16px calc(18px + env(safe-area-inset-bottom))}
.panel{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;background:rgba(255,253,248,.95);backdrop-filter:blur(10px);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel p{margin:0;flex:1;font-size:16px;line-height:1.25}
.panel b{display:block;font:400 19px/1.1 var(--font-display)}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange-deep);color:#fff;border-radius:999px;padding:12px 24px;font:400 18px/1 var(--font-display);letter-spacing:.3px;box-shadow:0 6px 16px rgba(192,98,43,.35);transition:transform .12s}
.cta:active{transform:scale(.96)}

.ui-aisle{inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:calc(68px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))}
.aisle-q{align-self:center;margin:0;padding:8px 18px;border-radius:999px;background:rgba(255,253,248,.92);box-shadow:var(--shadow-sm);font:400 20px/1.1 var(--font-display)}
.aisle-top{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.swipe-hint{margin:0;padding:5px 14px;border-radius:999px;background:rgba(61,42,20,.78);color:#fff;font-size:13px;font-weight:700;animation:hintSway 1.8s ease-in-out infinite;transition:opacity .5s}
.swipe-hint.gone{opacity:0;pointer-events:none}
@keyframes hintSway{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.sections{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sections button{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;min-height:58px;padding:8px 10px;border-radius:18px;background:rgba(255,253,248,.96);box-shadow:var(--shadow);transition:transform .15s}
.sections button:active{transform:scale(.95)}
.sections span{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:18px}
.sections b{font:400 14px/1.05 var(--font-display);align-self:end}
.sections small{font-size:11px;font-weight:600;color:var(--ink-soft);line-height:1.1;align-self:start}
.s-vit span{background:#F3E3D3}.s-ice span{background:var(--ice-soft)}.s-hot span{background:var(--hot-soft)}.s-flash span{background:var(--flash-soft)}

/* ---------- Estantería ---------- */
.shelf{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--paper);animation:shelfIn .45s var(--ease)}
@keyframes shelfIn{from{opacity:0;transform:scale(.96)}}
.shelf[data-sec="congelados"]{--tint:var(--ice-soft);--accent:var(--ice)}
.shelf[data-sec="listos"]{--tint:var(--hot-soft);--accent:var(--orange-deep)}
.shelf[data-sec="flash"]{--tint:var(--flash-soft);--accent:#B9541F}
.shelf[data-sec="vitrina"]{--tint:#F6EADF;--accent:#8A4B22}
.shelf-head{display:flex;align-items:center;gap:12px;padding:calc(64px + env(safe-area-inset-top)) 16px 6px}
.back{width:44px;height:44px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex:none}
.back svg{width:22px;height:22px;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.shelf-title h1{margin:0;font:400 26px/1 var(--font-display);color:var(--accent)}
.shelf-title p{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--ink-soft);line-height:1.15}
.shelf-tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 16px 10px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.shelf-tabs::-webkit-scrollbar{display:none}
.shelf-tabs button{flex:none;padding:6px 14px;border-radius:999px;background:transparent;font-weight:700;font-size:14px;color:var(--ink-soft);white-space:nowrap;transition:.2s}
.shelf-tabs button.on{background:var(--ink);color:#fff}
.shelf-body{flex:1;overflow-y:auto;padding:4px 16px calc(30px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.estante{padding-top:20px}
.estante h2{display:inline-block;max-width:100%;margin:4px 0 14px;padding:9px 16px 8px;border:3px solid var(--accent);border-radius:16px;background:var(--tint);box-shadow:0 4px 0 var(--accent);font:400 16px/1.15 var(--font-display);color:var(--accent)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{display:flex;flex-direction:column;text-align:left;border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;animation:cardIn .5s var(--pop) both;transition:transform .15s}
.card:active{transform:scale(.97)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}}
.card .pic{height:128px;display:flex;align-items:center;justify-content:center;padding:10px;background:var(--tint)}
.card img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(61,42,20,.18))}
.card .info{padding:10px 12px 12px}
.card h4{margin:0;font:700 15px/1.15 var(--font-body)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:4px;margin-top:4px}
.card .from{font:400 16px/1 var(--font-display);color:var(--accent)}
.card .from small{font:700 11px var(--font-body);color:var(--ink-soft);margin-right:3px}
.card .units{font-size:11px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.card.star{grid-column:1/-1;position:relative;background:linear-gradient(160deg,#FFF6D6,#fff 60%);box-shadow:0 0 0 3px var(--yellow,#F4CF34),0 10px 24px rgba(192,98,43,.28);animation:cardIn .5s var(--pop) both,starGlow 2.6s ease-in-out 1s infinite}
.card.star .pic{position:relative;height:170px;padding:0;background:#CF8B55}
.card.star img{width:100%;height:100%;max-height:none;object-fit:cover;filter:none}
.card.star .ribbon{position:absolute;top:10px;left:10px;padding:6px 12px;border-radius:999px;background:#C0622B;color:#fff;font:400 15px/1 var(--font-display);box-shadow:0 3px 0 rgba(61,42,20,.25);transform:rotate(-3deg)}
.card.star .info{padding:12px 14px 14px}
.card.star h4{font:400 21px/1.1 var(--font-display);color:#C0622B}
.card.star .trae{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--ink-soft)}
.card.star .meta{margin-top:8px;align-items:center}
.card.star .from{font-size:26px;color:var(--ink)}
.card.star .chip{padding:5px 10px;border-radius:999px;background:#25B865;color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
@keyframes starGlow{0%,100%{box-shadow:0 0 0 3px #F4CF34,0 10px 24px rgba(192,98,43,.28)}50%{box-shadow:0 0 0 5px #F4CF34,0 12px 30px rgba(192,98,43,.42)}}
@media (prefers-reduced-motion:reduce){.card.star{animation:none}}
.card.star.navidad{background:linear-gradient(160deg,#FFF1F0,#fff 60%);box-shadow:0 0 0 3px #2E7A4C,0 10px 24px rgba(179,48,45,.28);animation:cardIn .5s var(--pop) both,xmasGlow 2.4s ease-in-out 1s infinite}
.card.star.navidad .pic{height:200px;padding:8px;background:radial-gradient(circle at 50% 60%,#FFF8E7 0 40%,#F6D7D3 75%),#F6D7D3;
  background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle at 50% 60%,#FFF8E7 0 40%,#F3CFC9 78%);background-size:26px 26px,100% 100%}
.card.star.navidad img{object-fit:contain;filter:drop-shadow(0 8px 8px rgba(61,42,20,.22))}
.card.star.navidad .ribbon{background:#B3302D}
.card.star.navidad h4{color:#B3302D}
.card.star.navidad .chip{background:#2E7A4C}
@keyframes xmasGlow{0%,100%{box-shadow:0 0 0 3px #2E7A4C,0 10px 24px rgba(179,48,45,.28)}50%{box-shadow:0 0 0 5px #B3302D,0 12px 30px rgba(179,48,45,.42)}}
@media (prefers-reduced-motion:reduce){.card.star.navidad{animation:none}}
.card.out{filter:grayscale(1);opacity:.55;pointer-events:none}

/* ---------- Hojas ---------- */
.sheet-backdrop{position:absolute;inset:0;z-index:50;background:rgba(61,42,20,.35);opacity:0;visibility:hidden;transition:.3s}
.sheet-backdrop.on{opacity:1;visibility:visible}
.sheet{position:absolute;z-index:60;left:0;right:0;bottom:0;max-height:90%;display:flex;flex-direction:column;background:var(--paper);border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(61,42,20,.15);transform:translateY(105%);transition:transform .45s var(--ease)}
.sheet.on{transform:none}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:10px auto 0;flex:none}
.sheet-close{position:absolute;top:12px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;background:var(--cream);font-size:22px;line-height:1}
.product-sheet{overflow:hidden}
.p-hero{flex:none;height:190px;display:flex;align-items:center;justify-content:center;padding:8px 40px 0}
.p-hero img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(61,42,20,.22))}
.sheet.on .p-hero img{animation:heroIn .55s var(--pop) both .1s}
@keyframes heroIn{from{transform:translateY(30px) scale(.8);opacity:0}}
.p-body{flex:1;overflow-y:auto;padding:6px 18px 8px;overscroll-behavior:contain}
.p-body h2{margin:0;font:400 25px/1.05 var(--font-display)}
.p-desc{margin:4px 0 6px;color:var(--ink-soft);font-weight:600;line-height:1.25}
.p-body h3,.cart-sheet h3{margin:16px 0 8px;font:800 12px/1 var(--font-body);text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft)}
.p-body h3 small,.cart-sheet h3 small{text-transform:none;letter-spacing:0;font-weight:600}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:10px;padding:4px;border-radius:16px;background:var(--cream)}
.modes button{padding:9px;border-radius:12px;font-weight:800;transition:.2s}
.modes button.on{background:#fff;box-shadow:var(--shadow-sm)}

.variants{display:grid;gap:8px}
.vrow{display:grid;grid-template-columns:22px 1fr auto;column-gap:10px;row-gap:6px;align-items:center;width:100%;text-align:left;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .15s, background .15s}
.vrow .radio{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(61,42,20,.25);transition:.15s}
.vrow.on{background:var(--yellow-soft);box-shadow:inset 0 0 0 2px var(--orange-deep)}
.vrow.on .radio{box-shadow:inset 0 0 0 6px var(--orange-deep)}
.vrow.off{opacity:.45;cursor:not-allowed}
.cta:disabled{opacity:.5;box-shadow:none}
.vrow .v-name{font-weight:800;font-size:15px;line-height:1.1}
.vrow .v-name small{display:block;font-weight:600;font-size:13px;color:var(--ink-soft)}
.vrow .v-price{font:400 18px/1 var(--font-display);color:var(--orange-deep)}
.vrow .v-mix{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:4px}
.vrow .v-mix span{padding:3px 8px;border-radius:999px;background:var(--cream);font-size:12px;font-weight:700;line-height:1.2}
.vrow.on .v-mix span{background:#fff}
.vrow .v-mix span b{color:var(--orange-deep)}

.flavors{display:flex;flex-wrap:wrap;gap:6px}
.flavors button{padding:6px 14px;border-radius:999px;background:var(--cream);font-weight:700;font-size:14px;transition:.15s}
.flavors button.on{background:var(--orange);color:#fff}
.flavors.need{animation:need .5s}
.flavors.need button{box-shadow:inset 0 0 0 2px var(--orange-deep)}
@keyframes need{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.p-buy{flex:none;display:flex;gap:10px;align-items:center;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.qty{display:flex;align-items:center;border-radius:999px;background:var(--cream);flex:none}
.qty button{width:40px;height:44px;font-size:20px;font-weight:800}
.qty span{min-width:22px;text-align:center;font-weight:800;font-size:17px}
.cta.add{flex:1;padding:14px 10px}

.cart-sheet{overflow-y:auto;padding:0 18px calc(18px + env(safe-area-inset-bottom))}
.cart-sheet h2{margin:14px 0 8px;font:400 25px/1 var(--font-display)}
.cart-empty{text-align:center;padding:16px 0 28px;font-weight:700;color:var(--ink-soft)}
.cart-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cart-list li{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:8px 10px;box-shadow:var(--shadow-sm)}
.cart-list img{width:52px;height:52px;object-fit:contain}
.cart-list b{display:block;line-height:1.1}
.cart-list small{display:block;color:var(--ink-soft);font-weight:600;line-height:1.2}
.cart-list .line-price{display:block;margin-top:2px;font:400 15px/1 var(--font-display);color:var(--orange-deep)}
.cart-list .qty button{width:30px;height:32px;font-size:17px}
.cart-list .qty span{min-width:16px;font-size:14px}
.salsa-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;font-weight:700}
.salsa-row .qty button{width:32px;height:34px;font-size:17px}
.pay{display:flex;flex-wrap:wrap;gap:6px}
.pay button{padding:7px 14px;border-radius:999px;background:var(--cream);font-weight:700}
.pay button.on{background:var(--ink);color:#fff}
.field-label{display:block;margin:2px 0 4px 4px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.cart-sheet select{width:100%;margin-bottom:8px;padding:12px 14px;border:0;border-radius:14px;background-color:var(--cream);font:inherit;font-size:16px;color:var(--ink);outline:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(-45deg,transparent 50%,var(--ink) 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.cart-sheet input{width:100%;margin-bottom:8px;padding:12px 14px;border:0;border-radius:14px;background:var(--cream);font-size:16px;outline:none}
.cart-sheet input:focus{box-shadow:inset 0 0 0 2px var(--orange)}
.barrio-box{position:relative}
.barrio-list{position:absolute;left:0;right:0;top:calc(100% - 6px);z-index:5;margin:0;padding:6px;list-style:none;max-height:236px;overflow-y:auto;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(61,42,20,.18)}
.barrio-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 10px;border-radius:10px;cursor:pointer;font-weight:600;line-height:1.2}
.barrio-list li b{flex:none;color:var(--deep)}
.barrio-list li.on,.barrio-list li:hover{background:var(--cream)}
.barrio-list .none{cursor:default;color:var(--ink-soft);font-weight:600}
.barrio-note{margin:-2px 4px 8px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.barrio-note.ok{color:#1E8A4C}
.totals{margin:14px 0 12px;padding:12px 14px;border-radius:16px;background:var(--cream)}
.totals div{display:flex;justify-content:space-between;font-weight:700}
.totals .grand{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font:400 22px/1.1 var(--font-display)}
.totals small{color:var(--ink-soft);font-weight:600}
.cta.wa{width:100%;background:var(--green);box-shadow:0 6px 16px rgba(37,184,101,.35);font-size:18px;padding:15px}
.cta.wa svg{width:22px;height:22px;fill:#fff}

/* ---------- Toast / vuelo ---------- */
.toast{position:absolute;z-index:80;left:50%;top:calc(66px + env(safe-area-inset-top));translate:-50% 0;padding:9px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;white-space:nowrap;opacity:0;transform:translateY(-10px);transition:.3s var(--pop);pointer-events:none}
.toast.on{opacity:1;transform:none}
.flyer{position:absolute;z-index:90;width:90px;height:90px;object-fit:contain;pointer-events:none;transition:transform .7s cubic-bezier(.5,-0.4,.7,1), opacity .7s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important}
}