[hidden]{display:none!important}
:root{--bg:#14081a;--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.12);--txt:#fff;--mut:rgba(255,255,255,.62);--berry:#e11d74;--berry2:#f43f5e;--mint:#2dd4bf;--gold:#fbbf24}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--txt);min-height:100vh;padding-bottom:170px;
  background:radial-gradient(900px 600px at 100% -10%,rgba(225,29,116,.35),transparent 60%),radial-gradient(700px 500px at -20% 30%,rgba(45,212,191,.16),transparent 60%),var(--bg);background-attachment:fixed}
button,input,select{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));background:rgba(20,8,26,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{width:46px;height:46px;border-radius:14px;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.brand b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em}.brand small{color:var(--mut);font-size:12.5px}
.rate{margin-left:auto;text-align:right;font-size:10.5px;color:var(--mint);background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.3);border-radius:12px;padding:5px 9px;line-height:1.25}
.rate b{display:block;font-size:13px;color:#fff}
main{max-width:760px;margin:0 auto;padding:14px 16px}
.notice{background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.4);color:#fde68a;border-radius:16px;padding:12px 14px;font-size:14px;margin-bottom:12px}
.closed{background:rgba(148,163,184,.15);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-size:14px;margin-bottom:12px}
.mine{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px}
.mine a{flex:none;text-decoration:none;color:#fff;background:rgba(45,212,191,.15);border:1px solid rgba(45,212,191,.35);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700}
.search input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 16px;font-size:15px;outline:none}
.search input:focus{border-color:var(--berry)}
.cats{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none}.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:9px 15px;font-weight:700;font-size:13.5px;cursor:pointer}
.cats button.on{background:linear-gradient(135deg,var(--berry),var(--berry2));border-color:transparent}
.specials{margin:6px 0 16px;padding:14px;border-radius:22px;background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(225,29,116,.14));border:1px solid rgba(251,191,36,.3)}
.specials h2{font-size:16px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:12px;display:flex;flex-direction:column;overflow:hidden}
.card.off{opacity:.45}
.pic{height:108px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:52px;background:rgba(255,255,255,.05);margin-bottom:10px;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:15px;font-weight:800;line-height:1.2}
.card p{font-size:12px;color:var(--mut);margin:4px 0 8px;line-height:1.35;flex:1}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}.price b{font-size:18px;color:var(--gold)}.price small{font-size:11.5px;color:var(--mut)}
.add{border:0;border-radius:14px;padding:11px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--berry),var(--berry2));box-shadow:0 8px 20px rgba(225,29,116,.3)}
.add[disabled]{background:rgba(255,255,255,.1);box-shadow:none;cursor:default}
.qty{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.08);border-radius:14px;padding:4px}
.qty button{width:38px;height:36px;border:0;border-radius:11px;background:rgba(255,255,255,.12);font-size:20px;font-weight:800;cursor:pointer}.qty b{font-size:16px}
.badge{position:absolute;top:18px;left:18px;font-size:10.5px;font-weight:800;background:rgba(0,0,0,.55);border-radius:999px;padding:3px 9px}
.foot{text-align:center;color:var(--mut);font-size:12.5px;margin:22px 0 0}
.cartbar{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:6;max-width:736px;margin:0 auto;display:flex;align-items:center;gap:12px;border:0;border-radius:20px;padding:15px 18px;cursor:pointer;
  background:linear-gradient(135deg,var(--berry),#be185d);box-shadow:0 16px 40px rgba(225,29,116,.45);font-weight:800;font-size:16px}
.cartbar .n{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--berry);display:flex;align-items:center;justify-content:center;font-size:14px}
.cartbar .t{margin-left:auto;text-align:right}.cartbar .t small{display:block;font-size:11px;font-weight:600;opacity:.85}
.sheet{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.sheet-card{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:#1e0f25;border:1px solid var(--line);border-radius:26px 26px 0 0;padding:18px 18px max(20px,env(safe-area-inset-bottom))}
.sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.sheet-h b{font-size:20px}
.x{border:0;background:rgba(255,255,255,.1);width:36px;height:36px;border-radius:50%;cursor:pointer}
.line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.line .e{font-size:26px;width:40px;text-align:center}.line div{flex:1}.line b{display:block;font-size:14.5px}.line small{color:var(--mut);font-size:12px}
.line .qty{width:118px;flex:none}.line .qty button{width:32px;height:30px;font-size:17px}
.total{display:flex;justify-content:space-between;align-items:center;padding:14px 0}.total b{display:block;font-size:24px;color:var(--gold);text-align:right}.total small{color:var(--mut);font-size:12.5px}
form{display:grid;gap:12px}
form label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--mut)}
form input,form select{width:100%;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:15px;color:#fff;outline:none}
form select option{color:#000}
form input:focus,form select:focus{border-color:var(--berry)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{display:block;cursor:pointer}.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:12px 6px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:13.5px}
.seg input:checked+span{border-color:var(--mint);background:rgba(45,212,191,.15)}
.info{font-size:12.5px;color:var(--mut);background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px}
.err{color:#fecaca;background:rgba(239,68,68,.15);border-radius:12px;padding:10px 12px;font-size:13.5px}
.btn{border:0;border-radius:16px;padding:16px;font-weight:800;font-size:16px;cursor:pointer;background:linear-gradient(135deg,var(--mint),#14b8a6);color:#042f2e}
.btn[disabled]{opacity:.6}
.track{max-width:520px;margin:0 auto}
.back{border:0;background:none;color:var(--mint);font-weight:800;font-size:15px;cursor:pointer;padding:6px 0 14px}
.code{font-size:15px;color:var(--mut)}.code b{display:block;font-size:30px;color:#fff;letter-spacing:.02em}
.steps{margin:20px 0}
.st{display:flex;gap:14px;align-items:flex-start;padding-bottom:22px;position:relative}
.st:not(:last-child):after{content:"";position:absolute;left:17px;top:38px;bottom:2px;width:2px;background:var(--line)}
.st i{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;background:rgba(255,255,255,.1);color:var(--mut)}
.st.ok i{background:var(--mint);color:#042f2e}.st.now i{background:var(--berry);color:#fff;box-shadow:0 0 0 6px rgba(225,29,116,.25)}
.st b{display:block;font-size:16px}.st small{color:var(--mut);font-size:13px}.st:not(.ok):not(.now) b{color:var(--mut)}
.st.cancel i{background:#ef4444;color:#fff}
.tbox{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px;font-size:14px}
.tbox .r{display:flex;justify-content:space-between;padding:4px 0}.tbox .tt{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;font-weight:800}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:30px 0}

.sp-banner{width:100%;border-radius:16px;margin-bottom:12px;display:block;max-height:180px;object-fit:cover}
.bnav{position:fixed;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));z-index:7;max-width:420px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-radius:22px;
  background:rgba(30,15,37,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.bnav button{border:0;background:none;border-radius:16px;padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11.5px;font-weight:800;color:var(--mut);cursor:pointer}
.bnav button span{font-size:20px;line-height:1.1}.bnav .qr-ic{font-size:22px;color:var(--gold)}
.bnav button.on{background:rgba(225,29,116,.2);color:#fff}
.qr-card{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(255,255,255,.07);border-radius:14px;padding:4px;margin-bottom:14px}
.seg2 button{border:0;background:none;border-radius:11px;padding:9px;font-weight:800;font-size:13px;color:var(--mut);cursor:pointer}.seg2 button.on{background:linear-gradient(135deg,var(--berry),var(--berry2));color:#fff}
.qr-frame{background:#fff;color:#1d1325;border-radius:24px;padding:16px;text-align:center;margin:0 auto 14px;max-width:290px;box-shadow:0 0 0 4px rgba(225,29,116,.35)}
.qr-head b{display:block;font-size:18px}.qr-head small{color:#7a6f82;font-size:12px}
.qr-canvas{display:flex;justify-content:center;margin:8px 0}.qr-canvas canvas{width:220px;height:220px}
.qr-foot{font-weight:800;color:#be185d;font-size:13px}
.lbl{font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 6px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px}
.chips button.on{border-color:var(--mint);background:rgba(45,212,191,.15)}
.chips i{width:14px;height:14px;border-radius:50%;display:inline-block}
.link{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 12px;margin-bottom:10px}
.link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--mint);font-weight:700}
.link button{border:0;border-radius:10px;padding:8px 12px;background:rgba(255,255,255,.12);font-weight:800;font-size:12.5px;cursor:pointer}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.acts .btn,.btn.ghost{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14.5px;padding:13px}
.btn.wa{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.btn.ghost{width:100%;background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line)}
.stand-img{width:100%;border-radius:18px;margin-bottom:10px;display:block}
.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:30;background:#fff;color:#1d1325;border-radius:14px;padding:11px 16px;font-size:14px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* Barra en vivo de pedido activo (en la carta) */
.live-order-bar {
  background: linear-gradient(135deg, rgba(225,29,116,.25), rgba(45,212,191,.2));
  border: 1.5px solid var(--berry);
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(225,29,116,.2);
  transition: transform .15s, border-color .2s;
  animation: liveBarGlow 2.5s infinite;
}
.live-order-bar.ready {
  background: linear-gradient(135deg, rgba(45,212,191,.3), rgba(34,197,94,.25));
  border-color: var(--mint);
  animation: liveBarReady 1.6s infinite;
}
@keyframes liveBarGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,116,.3); }
  50% { box-shadow: 0 0 0 6px rgba(225,29,116,.15); }
}
@keyframes liveBarReady {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,191,.5), 0 8px 24px rgba(45,212,191,.3); }
  50% { box-shadow: 0 0 0 8px rgba(45,212,191,0), 0 12px 30px rgba(45,212,191,.45); }
}
.live-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--berry);
  flex: none;
  animation: pulseDot 1.4s infinite;
}
.live-order-bar.ready .live-pulse {
  background: var(--mint);
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
.live-ic { font-size: 22px; flex: none; }
.live-info { flex: 1; min-width: 0; }
.live-info b { display: block; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-info small { display: block; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-btn {
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 12px;
  flex: none;
}

/* Acciones y avisos sonoros en seguimiento */
.track-actions-row {
  margin: 10px 0 14px;
  display: flex;
  align-items: center;
}
.pill-track-sound {
  border: 1px solid rgba(45,212,191,.4);
  background: rgba(45,212,191,.12);
  color: var(--mint);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform .15s;
}
.pill-track-sound:active { transform: scale(0.96); }

/* Banner de alerta de cambio de estado */
.track-alert {
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInDown .4s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
.track-alert.preparando {
  background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(217,119,6,.35));
  border: 1.5px solid #f59e0b;
  color: #fef3c7;
}
.track-alert.listo {
  background: linear-gradient(135deg, rgba(34,197,94,.3), rgba(13,148,136,.4));
  border: 2px solid #22c55e;
  color: #f0fdf4;
  animation: slideInDown .4s ease, readyPulse 1.5s infinite;
}
@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5), 0 10px 30px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,0), 0 14px 36px rgba(34,197,94,.35); }
}
.track-alert.entregado {
  background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(99,102,241,.3));
  border: 1.5px solid #60a5fa;
  color: #eff6ff;
}
.track-alert.cancelado {
  background: linear-gradient(135deg, rgba(239,68,68,.25), rgba(220,38,38,.3));
  border: 1.5px solid #ef4444;
  color: #fef2f2;
}
.alert-ic { font-size: 28px; flex: none; }
.alert-txt { flex: 1; min-width: 0; }
.alert-txt b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.alert-txt small { display: block; font-size: 12.5px; opacity: .9; margin-top: 2px; }

/* PWA Install UI */
.pill-install {
  border: 0;
  background: linear-gradient(135deg, var(--berry), var(--berry2));
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(225,29,116,.4);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.pwa-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(30,15,37,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(225,29,116,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.65), 0 0 25px rgba(225,29,116,.3);
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pwa-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
  border: 1.5px solid rgba(255,255,255,.2);
}
.pwa-txt {
  flex: 1;
  min-width: 0;
}
.pwa-txt b {
  display: block;
  font-size: 13.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-txt small {
  display: block;
  font-size: 11px;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-btn {
  border: 0;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, var(--berry), var(--berry2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(225,29,116,.4);
  flex: none;
}
.pwa-close {
  border: 0;
  background: none;
  color: var(--mut);
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
  flex: none;
}
.ios-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 6px;
}
.ios-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.ios-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--berry);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ios-info b {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 2px;
}
.ios-info p {
  font-size: 12px;
  color: var(--mut);
  line-height: 1.4;
}
.ios-icon {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: var(--mint);
  padding: 0 4px;
}
.ios-highlight {
  color: #fff;
  font-weight: 700;
}
@media all and (display-mode: standalone) {
  .pwa-install-banner, .pill-install { display: none !important; }
}