/* ============================================================================
   Menu del cliente — vidrio esmerilado sobre brasa.
   La idea visual: capas translucidas flotando sobre un fondo negro con
   resplandor naranja, que es exactamente la paleta de los afiches de la marca.
   Movil primero: es lo que va a tener el cliente en la mano.
   ========================================================================== */

:root {
  /* Receta del vidrio, en un solo lugar para que todo combine */
  --glass-bg:      rgba(255, 255, 255, .055);
  --glass-bg-2:    rgba(255, 255, 255, .085);
  --glass-border:  rgba(255, 255, 255, .10);
  --glass-hi:      rgba(255, 255, 255, .16);
  --glass-blur:    blur(18px) saturate(150%);
  --glass-shadow:  0 8px 32px rgba(0, 0, 0, .45);
}

body {
  padding-bottom: calc(104px + var(--safe-b));
  background: #08080A;
}

main, header { position: relative; z-index: 1; }

/* --------------------------------------------------------- fondo de brasa */
.glow-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.glow {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
}
.glow-a {
  width: 62vw; height: 62vw; max-width: 460px; max-height: 460px;
  top: -14vh; left: -12vw;
  background: radial-gradient(circle, rgba(245,166,35,.42), transparent 68%);
}
.glow-b {
  width: 54vw; height: 54vw; max-width: 400px; max-height: 400px;
  top: 26vh; right: -16vw;
  background: radial-gradient(circle, rgba(198,82,15,.36), transparent 68%);
}
.glow-c {
  width: 78vw; height: 50vw; max-width: 620px; max-height: 380px;
  bottom: -12vh; left: 12vw;
  background: radial-gradient(circle, rgba(224,124,11,.22), transparent 70%);
}
body.ds-ember::before { display: none; }   /* el resplandor lo hace .glow-field */

/* ------------------------------------------------------- utilidad "vidrio" */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
/* Navegadores sin backdrop-filter: fondo solido para que siga siendo legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(28, 28, 33, .93); }
}

/* ------------------------------------------------------------ encabezado */
.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  height: var(--header-h);
  padding: 0 14px;
  border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-ember));
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(224,124,11,.45);
}
.logo-text { line-height: 1; }
.logo-text b {
  display: block; font-family: var(--font-display);
  font-size: 15px; letter-spacing: .07em; color: var(--ds-white);
}
.logo-text span { font-size: 9px; letter-spacing: .28em; color: var(--ds-orange); }

.table-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(245,166,35,.16); border: 1px solid rgba(245,166,35,.42);
  color: var(--ds-orange-hi); font-size: 12px; font-weight: 800;
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ds-orange); padding: 0;
  transition: transform .14s ease, background .2s ease;
}
.icon-btn:active { transform: scale(.92); }

/* ------------------------------------------------------------- saludo */
.greeting { padding: 24px 18px 4px; }
.hello {
  margin: 0 0 6px; font-size: 14px; color: var(--text-dim); font-weight: 600;
}
.hello .wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(16deg); } 80% { transform: rotate(-8deg); } }

.greeting h1 {
  font-size: clamp(28px, 8.4vw, 44px);
  color: var(--ds-white);
  letter-spacing: -.02em;
  text-shadow: 0 4px 30px rgba(0,0,0,.55);
}
.greeting h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(110deg, var(--ds-orange-hi) 10%, var(--ds-ember));
  -webkit-background-clip: text; background-clip: text;
}
.greeting .tagline { margin: 10px 0 0; color: var(--text-dim); font-size: 14px; max-width: 44ch; }

/* -------------------------------------------------------------- buscador */
.search-wrap { padding: 16px 18px 0; }
.search {
  display: flex; align-items: center; gap: 11px;
  padding: 4px 6px 4px 16px; border-radius: 999px;
}
.search:focus-within { border-color: rgba(245,166,35,.5); }
.search-icon { display: grid; place-items: center; color: var(--text-faint); flex: 0 0 auto; }
.search input {
  flex: 1; min-width: 0;
  background: none; border: none; padding: 12px 0;
  color: var(--text); font-size: 14.5px;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus { outline: none; box-shadow: none; }
.search input[type=search]::-webkit-search-cancel-button { display: none; }
.search-clear {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: none; background: rgba(255,255,255,.08); color: var(--text-dim);
  cursor: pointer; font-size: 13px;
}

/* --------------------------------------------------- categorias en fichas */
.cats {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 18px 18px 6px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 92px; padding: 12px 5px 10px;
  border-radius: 20px; cursor: pointer;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-weight: 700; font-size: 10px; line-height: 1.2; text-align: center;
  overflow-wrap: normal; hyphens: auto;
  transition: transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.cat > span:last-child { min-height: 2.4em; display: flex; align-items: center; }
.cat .cat-ico {
  width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  color: var(--ds-orange);
  transition: background .2s ease, color .2s ease;
}
.cat[aria-selected="true"] {
  background: linear-gradient(150deg, var(--ds-orange-hi), var(--ds-orange-deep));
  border-color: transparent; color: #16130C;
  box-shadow: 0 8px 24px rgba(224,124,11,.4);
  transform: translateY(-2px);
}
.cat[aria-selected="true"] .cat-ico { background: rgba(0,0,0,.16); color: #16130C; }

/* ------------------------------------------------------ banner del combo */
.combo-banner {
  position: relative; overflow: hidden;
  margin: 18px 18px 0; padding: 20px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(245,166,35,.16), rgba(198,82,15,.06)),
    var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(245,166,35,.28);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .2s ease;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.combo-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(224,124,11,.22); }
.combo-banner.off { opacity: .5; filter: grayscale(.55); cursor: default; }
.combo-kicker {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(228,72,60,.16); border: 1px solid rgba(228,72,60,.34);
  font-size: 10px; letter-spacing: .14em; color: #FFB4AC; font-weight: 800;
}
.combo-banner h3 {
  font-size: clamp(19px, 5.6vw, 27px); color: var(--ds-white);
  margin: 10px 0 3px; line-height: 1.08;
}
.combo-banner h3 span { color: var(--ds-orange); }
.combo-banner p { margin: 0 0 12px; font-size: 12.5px; color: var(--text-dim); }
.combo-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-orange-deep));
  color: #16130C; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(224,124,11,.4);
}
.combo-art {
  width: 92px; height: 92px; border-radius: 22px;
  display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 35%, rgba(245,166,35,.22), transparent 70%);
  color: var(--ds-orange);
}
.combo-price {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-display); color: var(--ds-orange);
  font-size: 26px; letter-spacing: -.02em;
}
.combo-price sup { font-size: .55em; top: -.6em; position: relative; }

/* ---------------------------------------------------------------- seccion */
.section { padding: 26px 18px 0; }
.section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(18px, 5vw, 24px); color: var(--ds-white); }
.section-head span { color: var(--text-faint); font-size: 12px; }
.section-head .count {
  margin-left: auto; font-size: 11px; color: var(--text-faint);
  background: rgba(255,255,255,.06); padding: 3px 10px; border-radius: 999px;
}

/* --------------------------------------------------- tarjetas de producto */
.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.item {
  position: relative;
  display: flex; flex-direction: column;
  padding: 12px; border-radius: 24px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%;
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.item:hover { transform: translateY(-3px); border-color: rgba(245,166,35,.4); }
.item:active { transform: scale(.985); }
.item:focus-visible { outline: 2px solid var(--ds-orange); outline-offset: 3px; }
.item.gone { opacity: .45; }

.item-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px; margin-bottom: 11px;
  background:
    radial-gradient(74% 66% at 50% 34%, rgba(245,166,35,.20), transparent 72%),
    linear-gradient(165deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  display: grid; place-items: center; overflow: hidden;
}
.item-art .glyph { width: 82%; height: 82%; display: grid; place-items: center; }
.item-art .glyph svg { display: block; }

/* Foto de producto recortada. Va un poco mas grande que el dibujo porque el
   recorte ya trae su propio margen, y con sombra propia para que no parezca
   pegada encima del degradado. */
.item-art .foto { width: 96%; height: 96%; display: grid; place-items: center; }
.item-art .foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.item.gone .item-art .foto img { filter: grayscale(.6) brightness(.75); }
.item-art > svg { width: 58%; height: 58%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.item-art canvas { width: 100% !important; height: 100% !important; }

.item-badges {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.badge {
  padding: 3px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.badge-hot   { background: rgba(228,72,60,.78);  color: #fff; }
.badge-new   { background: rgba(63,191,106,.78); color: #06210f; }
.badge-star  { background: rgba(245,166,35,.85); color: #16130C; }
.badge-off   { background: rgba(228,72,60,.82);  color: #fff; }

.fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(10,10,12,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: rgba(255,255,255,.55); cursor: pointer;
  display: grid; place-items: center;
  transition: transform .16s ease, color .2s ease;
}
.fav:active { transform: scale(.86); }
.fav.on { color: var(--ds-red); }
.fav.on svg { fill: currentColor; }

.item-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.item-body h4 {
  font-family: var(--font-display); font-size: 13.5px; text-transform: uppercase;
  color: var(--ds-white); margin: 0 0 4px; letter-spacing: .005em; line-height: 1.2;
}
.item-desc {
  font-size: 11.5px; color: var(--text-faint); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.item-add {
  margin-left: auto; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 12px;
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-orange-deep));
  color: #16130C; border: none; font-size: 19px; font-weight: 900;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(224,124,11,.42);
  transition: transform .14s ease;
}
.item-add:active { transform: scale(.88); }
.price { font-family: var(--font-display); color: var(--ds-orange); font-size: 17px; letter-spacing: -.02em; }
.price sup { font-size: .58em; top: -.55em; position: relative; }

.sold-out {
  position: absolute; inset: 0; z-index: 3;
  border-radius: 24px; display: grid; place-items: center;
  background: rgba(8,8,10,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sold-out span {
  font-size: 10.5px; font-weight: 900; letter-spacing: .16em;
  color: #FF8E85; background: rgba(228,72,60,.2);
  border: 1px solid rgba(228,72,60,.5); padding: 5px 12px; border-radius: 999px;
}

/* --------------------------------------------------------- hoja de detalle */
.modal { background: rgba(20, 20, 24, .82); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.modal-head { background: transparent; border-bottom: 1px solid var(--glass-border); }
.modal-foot { background: rgba(16,16,20,.9); border-top: 1px solid var(--glass-border); }

.detail-stage {
  position: relative;
  height: 44vh; min-height: 250px; max-height: 360px;
  background:
    radial-gradient(66% 58% at 50% 40%, rgba(245,166,35,.24), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 70%);
  overflow: hidden;
}
.detail-stage canvas { width: 100% !important; height: 100% !important; }
.detail-stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, transparent, rgba(20,20,24,.85));
  pointer-events: none;
}
.stage-tools {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end;
}
.stage-tools .btn {
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--glass-border);
}
/* Capa de la sesion de AR: va sobre la imagen de la camara (dom-overlay), asi
   que solo puede tener lo imprescindible y con mucho contraste. */
.ar-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: center; padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.ar-overlay .ar-pista {
  margin: 0; max-width: 320px; text-align: center;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(12,12,14,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 13.5px; line-height: 1.45;
}
.ar-overlay .ar-salir {
  pointer-events: auto;
  padding: 11px 26px; border-radius: 999px;
  background: rgba(12,12,14,.78); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-weight: 700;
}

.detail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.detail-head h3 {
  flex: 1; font-family: var(--font-display); font-size: 21px;
  color: var(--ds-white); text-transform: uppercase; margin: 0;
}
.detail-head .price { font-size: 23px; }
.detail-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; margin: 0 0 4px; }

.opt-group { border-top: 1px solid var(--glass-border); padding: 16px 0; }
.opt-group:first-child { border-top: none; padding-top: 4px; }
.opt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.opt-head h5 {
  margin: 0; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; text-transform: none; color: var(--ds-white);
}
.opt-head .hint { font-size: 11px; color: var(--text-faint); }

/* Segmentado tipo "Regular / Large / X Large" de la referencia */
.segment {
  display: flex; gap: 5px; padding: 4px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
}
.segment button {
  flex: 1; padding: 9px 6px; border-radius: 11px; border: none;
  background: transparent; color: var(--text-dim);
  font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.segment button.on {
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-orange-deep));
  color: #16130C; box-shadow: 0 4px 12px rgba(224,124,11,.34);
}

/* Filas con interruptor: "Add Cheese / Extra Patty / Add Bacon" */
.switch-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.05);
}
.switch-row:first-of-type { border-top: none; }
.switch-row .sw-name { flex: 1; font-size: 14px; }
.switch-row .sw-price { font-size: 12.5px; font-weight: 800; color: var(--ds-orange); }
.switch {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 27px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.13); cursor: pointer; padding: 0;
  transition: background .22s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.3);
}
.switch.on { background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-orange-deep)); }
.switch.on::after { transform: translateX(19px); }
.switch:focus-visible { outline: 2px solid var(--ds-orange); outline-offset: 3px; }

/* Ingredientes que se pueden quitar */
.ingredient-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; margin-bottom: 7px;
  border: 1px solid var(--glass-border); border-radius: 14px;
  background: rgba(255,255,255,.04); cursor: pointer;
  transition: all .16s ease;
}
.ingredient-row .tick {
  width: 21px; height: 21px; border-radius: 7px; flex: 0 0 auto;
  border: 1.5px solid rgba(255,255,255,.22); display: grid; place-items: center;
  color: #16130C;
}
.ingredient-row.keep .tick { background: var(--ds-orange); border-color: var(--ds-orange); }
.ingredient-row .label { flex: 1; font-size: 13.5px; }
.ingredient-row.drop { border-color: rgba(228,72,60,.45); background: rgba(228,72,60,.09); }
.ingredient-row.drop .label { text-decoration: line-through; color: #FF8E85; }
.ingredient-row.drop .tick { border-color: rgba(228,72,60,.55); background: transparent; }
.ingredient-row .hint { font-size: 10.5px; color: #FF8E85; font-weight: 900; letter-spacing: .1em; }

/* Opciones sueltas (combos, motivos) */
.opt {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; margin-bottom: 7px;
  border: 1px solid var(--glass-border); border-radius: 14px;
  background: rgba(255,255,255,.04); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.opt:hover { border-color: rgba(255,255,255,.2); }
.opt.on { border-color: var(--ds-orange); background: rgba(245,166,35,.11); }
.opt-name { flex: 1; font-size: 14px; }
.opt-price { font-size: 13px; font-weight: 800; color: var(--ds-orange); }

.stepper {
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
}
.stepper button {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.08); color: var(--text);
  font-size: 18px; font-weight: 800; cursor: pointer; line-height: 1;
  display: grid; place-items: center;
  transition: transform .14s ease, background .18s ease;
}
.stepper button:hover { background: rgba(255,255,255,.16); }
.stepper button:active { transform: scale(.88); }
.stepper b { min-width: 28px; text-align: center; font-size: 15px; }

/* Barra inferior del detalle: stepper + boton naranja grande */
.sheet-bar {
  display: flex; align-items: center; gap: 12px; width: 100%;
}
.sheet-cta {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 22px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-orange-deep));
  color: #16130C; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(224,124,11,.4);
  transition: transform .14s ease, filter .18s ease;
}
.sheet-cta:hover { filter: brightness(1.08); }
.sheet-cta:active { transform: scale(.985); }
.sheet-cta:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------- barra carrito */
.cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 12px 16px calc(14px + var(--safe-b));
  transform: translateY(130%);
  transition: transform .32s cubic-bezier(.2,.9,.3,1.1);
}
.cartbar.show { transform: none; }
.cart-cta {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 14px 14px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, var(--ds-orange-hi), var(--ds-orange-deep));
  color: #16130C; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(224,124,11,.45);
  transition: transform .14s ease;
}
.cart-cta:active { transform: scale(.985); }
.cart-count {
  display: grid; place-items: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 999px; background: rgba(0,0,0,.22);
  font-size: 14px; font-weight: 900;
}
.cart-label { flex: 1; text-align: left; }
.cart-total { font-family: var(--font-display); font-size: 17px; }

.cart-line {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--glass-border);
}
.cart-line:last-of-type { border-bottom: none; }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-body b { font-size: 14.5px; }
.cart-mods { font-size: 12px; color: var(--text-faint); margin-top: 4px; line-height: 1.5; }

.totals { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--glass-border); }
.totals div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.totals .grand { font-size: 19px; font-weight: 900; padding-top: 10px; }
.totals .grand span:last-child { color: var(--ds-orange); font-family: var(--font-display); }

/* Fichas editables del carrito */
.line-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.line-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 10px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.05);
  font-size: 11.5px; color: var(--text-dim);
}
.line-chip.remove-chip { border-color: rgba(228,72,60,.42); background: rgba(228,72,60,.11); color: #FF8E85; }
.line-chip.extra-chip  { border-color: rgba(245,166,35,.42); background: rgba(245,166,35,.11); color: var(--ds-orange-hi); }
.line-chip button {
  border: none; background: rgba(255,255,255,.1); color: inherit;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  font-size: 12px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.line-chip button:hover { background: rgba(255,255,255,.24); }
.removed-tag { color: #FF8E85; font-weight: 800; }
.cart-mods .removed-tag { display: block; }

/* -------------------------------------------------- llamado al mesero */
.call-fab {
  position: fixed; right: 16px; z-index: 70;
  bottom: calc(22px + var(--safe-b));
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(245,166,35,.4);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ds-orange); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: bottom .32s cubic-bezier(.2,.9,.3,1.1), transform .15s ease;
}
.call-fab:active { transform: scale(.9); }
body.cart-open .call-fab { bottom: calc(96px + var(--safe-b)); }
.call-fab.sent { border-color: rgba(63,191,106,.55); color: #7FE3A2; }

/* ------------------------------------------------ seguimiento del pedido */
.track-steps { display: flex; flex-direction: column; margin: 20px 0; }
.track-step { display: flex; gap: 14px; align-items: flex-start; }
.track-dot { flex: 0 0 auto; width: 30px; display: flex; flex-direction: column; align-items: center; }
.track-dot i {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  display: block; margin-top: 3px;
}
.track-dot u { flex: 1; width: 2px; background: rgba(255,255,255,.1); min-height: 28px; display: block; }
.track-step:last-child .track-dot u { display: none; }
.track-step.done .track-dot i { background: var(--ds-orange); border-color: var(--ds-orange); }
.track-step.done .track-dot u { background: rgba(245,166,35,.5); }
.track-step.now .track-dot i {
  background: var(--ds-orange); border-color: var(--ds-orange-hi);
  box-shadow: 0 0 0 5px rgba(245,166,35,.18);
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(245,166,35,0); } }
.track-label { padding-bottom: 20px; }
.track-label b { font-size: 15px; }
.track-label span { display: block; font-size: 12px; color: var(--text-faint); }
.track-rejected {
  margin: 16px 0; padding: 14px 16px; border-radius: 18px;
  background: rgba(228,72,60,.12); border: 1px solid rgba(228,72,60,.4); color: #FFB4AC;
}

/* -------------------------------------------------------- constructor 3D */
.builder-layers { display: flex; flex-direction: column-reverse; gap: 5px; margin: 12px 0; }
.builder-layer {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
  font-size: 13px;
}
.builder-layer .sw { width: 15px; height: 15px; border-radius: 5px; flex: 0 0 auto; }
.builder-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.builder-palette button {
  padding: 10px 9px; border-radius: 13px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .16s ease, background .16s ease;
}
.builder-palette button:hover { border-color: rgba(245,166,35,.45); }
.builder-palette button.on { border-color: var(--ds-orange); background: rgba(245,166,35,.12); }

/* --------------------------------------------------------------- varios */
.closed-note {
  margin: 18px; padding: 16px 18px; border-radius: 20px;
  background: rgba(228,72,60,.1); border: 1px solid rgba(228,72,60,.36);
  color: #FFB4AC; font-size: 14px;
}
.no-results { padding: 40px 18px; text-align: center; color: var(--text-faint); }
.no-results b { display: block; color: var(--text-dim); font-size: 15px; margin-bottom: 6px; }

.foot {
  margin-top: 40px; padding: 30px 18px calc(34px + var(--safe-b));
  border-top: 1px solid var(--glass-border);
  text-align: center; color: var(--text-faint); font-size: 12.5px;
}
.foot b {
  display: block; color: var(--ds-orange); letter-spacing: .2em;
  font-family: var(--font-display); margin-bottom: 8px;
}
.foot span { display: block; line-height: 1.9; }


/* El icono dentro de un boton o ficha no debe empujar el texto */
.combo-cta > span, .combo-kicker > span, .sheet-cta > span { display: inline-flex; align-items: center; }
.combo-cta svg, .combo-kicker svg { display: block; }

/* ---------------------------------------------------- hoja de detalle */
/* Por defecto casi opaca: si el navegador no soporta backdrop-filter, el
   contenido de atras no debe verse a traves del panel. */
.modal { background: rgba(19, 19, 23, .97); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal { background: rgba(19, 19, 23, .82); }
}
.modal-backdrop { background: rgba(4, 4, 6, .82); }

/* Cabecera flotante: solo la X sobre la imagen, como una app nativa */
.modal-bare > .modal-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  background: none; border-bottom: none; padding: 12px 14px;
  justify-content: flex-end; pointer-events: none;
}
.modal-bare > .modal-head .btn {
  pointer-events: auto;
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  background: rgba(10, 10, 12, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.14); color: var(--ds-white);
}
.modal-bare { position: relative; }

/* Franja de pedidos en espera. Va fija abajo y por encima de todo: si el
   cliente no ve que su pedido no salio, se queda sentado esperando comida que
   nadie esta preparando. */
.aviso-cola {
  position: fixed; left: 12px; right: 12px; z-index: 70;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(58, 40, 8, .94);
  border: 1px solid rgba(245, 166, 35, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  color: #FFE3B0; font-size: 13px; line-height: 1.4;
}
.aviso-cola span { flex: 1; }
.aviso-cola button {
  flex: none; padding: 8px 14px; border-radius: 999px;
  background: var(--ds-orange, #F5A623); border: none;
  color: #1A1206; font-weight: 800; font-size: 12.5px;
}

/* ------------------------------------------------------------------ pago */
/* Pantalla donde espera el cliente con la plata ya saliendo de su cuenta. Todo
   aqui esta hecho para que a un metro de distancia se entienda si salio bien,
   sin leer: un simbolo grande, un color, y el monto. */
.pago-wrap { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px 18px; }

.pago-card {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 32px 24px 24px;
}
.pago-card h1 { font-size: 22px; margin: 18px 0 4px; }
.pago-card .detail-desc { margin: 10px 0 0; }

.pago-monto { font-size: 34px; font-weight: 800; margin: 6px 0 0; letter-spacing: -.02em; }

.pago-estado {
  width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 2px solid var(--line);
}
.pago-estado.ok   { border-color: var(--ds-green);  background: rgba(63,191,106,.12); color: var(--ds-green); }
.pago-estado.bad  { border-color: var(--ds-red);    background: rgba(228,72,60,.12);  color: var(--ds-red); }
.pago-estado.warn { border-color: var(--ds-orange); background: rgba(245,166,35,.12); color: var(--ds-orange); }
.pago-simbolo { font-size: 42px; font-weight: 800; line-height: 1; }

.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--ds-orange);
  animation: pago-giro .9s linear infinite;
}
@keyframes pago-giro { to { transform: rotate(360deg); } }
/* Un cartel que gira sin parar marea y, en un telefono de gama baja, cuesta
   bateria. Quien pidio menos movimiento ve el borde quieto. */
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.pago-qr { margin: 20px 0 0; }
.pago-qr img { width: 220px; max-width: 100%; background: #fff; border-radius: 12px; padding: 10px; }
.pago-qr p { margin: 8px 0 0; }

.pago-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pago-acciones .btn { width: 100%; justify-content: center; }

.pago-sim { border-style: dashed; }

/* Selector de forma de pago en el checkout. */
.pay-picker { display: grid; gap: 8px; }
.pay-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; border-radius: 14px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.pay-opt.on { border-color: var(--ds-orange); background: rgba(245,166,35,.10); }
.pay-opt b { display: block; font-size: 15px; }
.pay-opt small { color: var(--text-dim); font-size: 12px; }
.pay-opt .pay-ico { font-size: 20px; width: 26px; text-align: center; }

/* --------------------------------------------------- transferencia bancaria */
/* Transferir es tedioso por una sola razon: teclear a mano un numero de cuenta
   leyendolo de otra pantalla. Por eso cada dato es un boton grande, del ancho
   completo, con el valor en mono y espaciado — pensado para el pulgar y para
   leerse de reojo mientras se cambia a la app del banco. */
.transfer { text-align: left; }
.transfer-banco { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.transfer-banco b { font-size: 15px; }

.copia-grupo {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
}

.copia-fila {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin: 4px 0; cursor: pointer; text-align: left;
  background: transparent; border: 1px dashed var(--line); border-radius: 10px;
  color: var(--text);
}
.copia-fila:hover, .copia-fila:focus-visible { border-color: var(--ds-orange); background: rgba(245,166,35,.07); }
.copia-fila:active { transform: scale(.99); }
.copia-fila > span:first-child { flex: 1; min-width: 0; }
.copia-fila small { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.copia-fila b { display: block; font-size: 15px; word-break: break-all; }
.copia-grande { font-size: 21px !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.copia-ico { font-size: 11px; color: var(--ds-orange); text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0; }

.transfer-ref { border-color: rgba(245,166,35,.45); }

.transfer-declarar { text-align: left; margin-top: 20px; }
.transfer-declarar .btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.transfer-declarar input {
  width: 100%; margin-bottom: 10px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); font-size: 15px;
}
.transfer-previa { margin: 10px 0; }
.transfer-previa img { width: 100%; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; }

/* Cola de transferencias en caja. */
.transfer-cola { display: grid; gap: 12px; }
.transfer-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.transfer-item.urgente { border-color: var(--ds-orange); }
.transfer-item img.comprobante {
  max-width: 100%; max-height: 320px; border-radius: 10px;
  border: 1px solid var(--line); margin-top: 10px; cursor: zoom-in;
}
.transfer-datos { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.transfer-datos .ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; color: var(--ds-orange); letter-spacing: .04em; }