/* ==========================================================================
   FATTO · Pedidos — capa de interfaz
   Se carga DESPUÉS de estilos-fatto-final.css y del <style> de la página.
   No modifica la lógica: solo estilos. Todo lo que el JS usa (ids, clases de
   estado como .hidden, .card-selected, .step-active, .remove-selected) se
   respeta tal cual.

   Índice
     1. Utilidades que el HTML usa pero faltaban en el CSS compilado
     2. Base: tokens, foco, accesibilidad
     3. Header
     4. Inicio: intro, promo y categorías
     5. Barras de flujo y progreso de pasos
     6. Opciones elegibles y chips de ingredientes
     7. Listas con contador (empanadas / bebidas)
     8. Barras de acción inferiores
     9. Barra flotante "Ver mi pedido"
    10. Carrito (drawer)
    11. Avisos (toasts)
   ========================================================================== */


/* ==========================================================================
   1. UTILIDADES FALTANTES
   El HTML y el JS las usan, pero no estaban en el CSS compilado (Tailwind
   purgado), por eso algunas tarjetas, inputs y grillas se veían rotos.
   ========================================================================== */

.z-0 { z-index: 0; }
.z-20 { z-index: 20; }

.h-3 { height: .75rem; }
.h-9 { height: 2.25rem; }
.w-9 { width: 2.25rem; }
.h-44 { height: 11rem; }

.min-w-0 { min-width: 0; }
.max-h-full { max-height: 100%; }
.max-w-full { max-width: 100%; }
.shrink-0 { flex-shrink: 0; }
.items-baseline { align-items: baseline; }
.leading-tight { line-height: 1.25; }
.overflow-x-auto { overflow-x: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular-nums { font-variant-numeric: tabular-nums; }

.gap-1\.5 { gap: .375rem; }
.mb-1\.5 { margin-bottom: .375rem; }
.mb-2\.5 { margin-bottom: .625rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1\.5 { margin-top: .375rem; }
.p-2\.5 { padding: .625rem; }
.p-3\.5 { padding: .875rem; }
.pl-1 { padding-left: .25rem; }
.pt-1 { padding-top: .25rem; }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.left-1\.5 { left: .375rem; }
.right-1\.5 { right: .375rem; }
.top-1\.5 { top: .375rem; }

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.grid-cols-\[auto_1fr_auto\] { grid-template-columns: auto 1fr auto; }

.text-\[8px\] { font-size: 8px; }
.text-\[9px\] { font-size: 9px; }
.text-\[11px\] { font-size: 11px; }

.bg-black\/60 { background-color: rgb(0 0 0 / .6); }
.bg-black\/70 { background-color: rgb(0 0 0 / .7); }
.bg-red-500\/10 { background-color: rgb(239 68 68 / .1); }
.bg-red-600 { background-color: rgb(220 38 38); }
.bg-red-600\/30 { background-color: rgb(220 38 38 / .3); }
.bg-stone-900 { background-color: rgb(28 25 23); }
.bg-stone-900\/90 { background-color: rgb(28 25 23 / .9); }
.bg-yellow-400\/20 { background-color: rgb(250 204 21 / .2); }

.border-green-500\/30 { border-color: rgb(34 197 94 / .3); }
.border-red-500\/20 { border-color: rgb(239 68 68 / .2); }
.border-red-500\/30 { border-color: rgb(239 68 68 / .3); }
.border-red-500\/40 { border-color: rgb(239 68 68 / .4); }
.border-yellow-400\/30 { border-color: rgb(250 204 21 / .3); }
.border-yellow-400\/40 { border-color: rgb(250 204 21 / .4); }

.text-red-300 { color: rgb(252 165 165); }
.text-yellow-400\/90 { color: rgb(250 204 21 / .9); }

.drop-shadow-md { filter: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06)); }
.duration-200 { transition-duration: .2s; }

.shadow-\[0_0_15px_rgba\(34\,197\,94\,0\.3\)\] { box-shadow: 0 0 15px rgba(34, 197, 94, .3); }
.shadow-\[0_0_20px_rgba\(250\,204\,21\,0\.15\)\] { box-shadow: 0 0 20px rgba(250, 204, 21, .15); }

.from-black\/90 {
  --tw-gradient-from: rgb(0 0 0 / .9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/95 {
  --tw-gradient-from: rgb(0 0 0 / .95) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-400\/10 {
  --tw-gradient-from: rgb(250 204 21 / .1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/40 {
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / .4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-yellow-400\/5 {
  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(250 204 21 / .05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-white\/5 { --tw-gradient-to: rgb(255 255 255 / .05) var(--tw-gradient-to-position); }

.hover\:bg-yellow-300:hover { background-color: rgb(253 224 71); }
.hover\:border-yellow-400\/40:hover { border-color: rgb(250 204 21 / .4); }
.hover\:text-red-300:hover { color: rgb(252 165 165); }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-30:disabled { opacity: .3; }

@media (min-width: 640px) {
  .sm\:gap-3 { gap: .75rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:h-10 { height: 2.5rem; }
  .sm\:h-28 { height: 7rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:w-8 { width: 2rem; }
  .sm\:w-10 { width: 2.5rem; }
  .sm\:text-xs { font-size: .75rem; line-height: 1rem; }
  .sm\:text-sm { font-size: .875rem; line-height: 1.25rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 768px) {
  .md\:h-52 { height: 13rem; }
  .md\:p-6 { padding: 1.5rem; }
}

/* El atributo [hidden] y la clase .hidden tienen que ganarle siempre a
   cualquier display (antes un .block lo pisaba y mostraba el error del
   celular sin que nadie hubiera escrito nada). */
[hidden], .hidden { display: none !important; }


/* ==========================================================================
   2. BASE
   ========================================================================== */

:root {
  --y: #FACC15;
  --y-soft: rgba(250, 204, 21, .12);
  --y-line: rgba(250, 204, 21, .5);

  --bg: #0f0f0f;
  --s1: #171614;
  --s2: #201e1b;
  --s3: #2a2723;

  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);

  --tx: #f5f5f4;
  --tx-2: #d6d3d1;
  --mut: #a8a29e;
  --dim: #8a837d;

  --red: #f87171;
  --red-bg: rgba(239, 68, 68, .14);
  --green: #4ade80;
  --green-bg: rgba(34, 197, 94, .12);

  --hdr-h: 65px;
  --r-card: 20px;
  --r-ctl: 14px;
  --r-chip: 10px;
}

html { -webkit-tap-highlight-color: transparent; }

/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible { outline-offset: 0; }

/* Texto secundario con contraste suficiente sobre fondo oscuro */
.text-stone-500 { color: #9a948f; }
.text-stone-600 { color: var(--dim); }

/* Mientras el carrito está abierto, no se scrollea la página de atrás */
body:has(#cart-overlay:not(.hidden)) { overflow: hidden; }

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


/* ==========================================================================
   3. HEADER
   ========================================================================== */

header.sticky {
  height: var(--hdr-h);
  padding: 0;
  display: flex;
  align-items: center;
  background: rgba(10, 10, 10, .94);
  border-bottom: 1px solid var(--line);
}
header.sticky > .container { width: 100%; }

.hdr-cart {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-ctl);
  background: var(--s2);
  border: 1px solid var(--line-2);
}
#cart-count {
  top: -7px;
  right: -7px;
  width: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #0a0a0a;
  line-height: 1;
}
.hdr-cart:not([data-n="0"]):not([data-n=""]) #cart-count { background: var(--y); color: #000; }
.hdr-cart[data-n]:not([data-n="0"]) { border-color: var(--y-line); }

@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hdr-cart.bump #cart-count { animation: cart-bump .35s ease-out; }


/* ==========================================================================
   4. INICIO
   ========================================================================== */

#view-categories { padding-top: 4px; }

.home-hero { margin-bottom: 18px; }
.home-hero h1 {
  margin: 0;
  text-align: left;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0;
}
.home-hero h1 span { text-decoration: none; }
.home-hero__sub {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tx-2);
}

.promo-strip {
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--y-soft);
  border: 1px solid rgba(250, 204, 21, .3);
}
.promo-strip__main {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--y);
}
.promo-strip__fine {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tx-2);
}

/* Tarjetas de categoría */
.cat-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  min-height: 136px;
  padding: 16px 16px 16px 18px;
  overflow: hidden;
  text-align: left;
  background: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  transition: border-color .2s, transform .15s;
}
.cat-card:hover { border-color: var(--y-line); }
.cat-card:active { transform: scale(.985); }

.cat-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .6;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 10, 10, .97) 0%, rgba(10, 10, 10, .78) 42%, rgba(10, 10, 10, .12) 100%);
}

.cat-card--feat {
  min-height: 172px;
  border-color: var(--y-line);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, .08), 0 10px 30px rgba(250, 204, 21, .07);
}

.cat-card__title {
  font-size: 1.75rem;
  line-height: 1.05;
  font-style: italic;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.cat-card--feat .cat-card__title { color: var(--y); }

.cat-card__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.cat-card__desc {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--tx-2);
}
.cat-card__price {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: #000;
  background: var(--y);
  border-radius: var(--r-chip);
}
.cat-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  background: var(--y);
  border-radius: 999px;
}
.cat-card__badge--soft {
  color: var(--tx-2);
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
}

/* Categoría agotada: la tarjeta ya se apaga con .item-sin-stock; sumamos el motivo */
.cat-card.item-sin-stock::after {
  content: "Sin disponibilidad";
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: rgb(220 38 38);
  border-radius: 999px;
}
.cat-card.item-sin-stock .cat-card__price { background: var(--dim); }


/* ==========================================================================
   5. BARRAS DE FLUJO Y PROGRESO
   ========================================================================== */

.flow-bar,
.view-bar {
  top: calc(var(--hdr-h) + 8px);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  background: rgba(15, 15, 15, .94);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.flow-bar { padding: 8px 12px 8px 8px; }
.view-bar { padding: 8px; }

.flow-bar > button,
.view-bar > button {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-ctl);
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--tx-2);
}
.flow-bar > button:hover,
.view-bar > button:hover { color: #fff; border-color: var(--line-2); }

.view-bar h3 { margin: 0; line-height: 1.05; }

/* Progreso por pasos: "step-active" = paso alcanzado. El último alcanzado es el actual. */
.step-track {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  padding: 0;
}
.step-track > span {
  flex: 1;
  min-width: 0;
  padding: 8px 0 0;
  border-top: 3px solid rgba(255, 255, 255, .14);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--dim);
}
.step-track > .step-active {
  border-top-color: rgba(250, 204, 21, .5);
  color: var(--tx-2);
}
.step-track > .step-active:not(:has(~ .step-active)) {
  border-top-color: var(--y);
  color: #fff;
}

/* Títulos de cada paso, alineados con las opciones que vienen abajo */
[id$="step-1"] > h3, [id$="step-2"] > h3, [id$="step-3"] > h3 {
  text-align: left;
  font-size: 1.75rem;
  line-height: 1.1;
  margin-bottom: 6px;
}
[id$="step-1"] > h3 + p { text-align: left; font-size: 13px; line-height: 1.45; margin-bottom: 14px; }


/* ==========================================================================
   6. OPCIONES ELEGIBLES Y CHIPS
   ========================================================================== */

.option-btn,
.torpedo-btn,
.burger-btn {
  position: relative;
  background: var(--s1);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  transition: border-color .15s, background-color .15s;
}
.option-btn:hover,
.torpedo-btn:hover,
.burger-btn:hover { background: var(--s2); border-color: var(--line-2); }

.option-btn:active,
.torpedo-btn:active,
.burger-btn:active { background: var(--s3); }

/* Seleccionado: borde amarillo + tilde (no depende solo del color) */
.option-btn.card-selected,
.torpedo-btn.card-selected,
.burger-btn.card-selected {
  transform: none;
  border-color: var(--y) !important;
  background-color: rgba(250, 204, 21, .11) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .14) !important;
}
.option-btn.card-selected::after,
.torpedo-btn.card-selected::after,
.burger-btn.card-selected::after {
  content: "";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.torpedo-btn > div span:first-child,
.burger-btn > div span:first-child { line-height: 1.15; }

/* Chips "tocá lo que no quieras": por defecto lleva el ingrediente (tilde),
   al tocar se quita (tachado + cruz). */
:is(#burger-remove-options, #torpedo-remove-options, #promo-remove-options, #lomo-pizza-remove-options) > button {
  position: relative;
  display: block;
  min-height: 52px;
  padding: 10px 12px 10px 38px;
  text-align: left;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  color: var(--tx);
  background: var(--s1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-ctl);
}
:is(#burger-remove-options, #torpedo-remove-options, #promo-remove-options, #lomo-pizza-remove-options) > button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
:is(#burger-remove-options, #torpedo-remove-options, #promo-remove-options, #lomo-pizza-remove-options) > button.remove-selected {
  color: #fecaca !important;
  background: var(--red-bg) !important;
  border-color: rgba(239, 68, 68, .6) !important;
}
:is(#burger-remove-options, #torpedo-remove-options, #promo-remove-options, #lomo-pizza-remove-options) > button.remove-selected::before {
  background: rgba(239, 68, 68, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Extras del sándwich ("Sin verdura", "Sin queso"...) */
.extra-btn {
  min-height: 48px;
  font-size: 14px !important;
  font-weight: 600;
  text-transform: none;
  color: var(--tx);
  background: var(--s1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-ctl);
}
.extra-btn.extra-selected {
  color: #fecaca !important;
  background: var(--red-bg) !important;
  border-color: rgba(239, 68, 68, .6) !important;
}

/* Aviso rojo sobre ingredientes */
#view-burger-steps .bg-red-500\/10,
#view-torpedo-steps .bg-red-500\/10,
#view-promo-simples .bg-red-500\/10,
#view-lomo-pizza .bg-red-500\/10 { border-radius: var(--r-card); }

/* El botón "Siguiente" se ve apagado hasta que haya algo elegido en el paso actual.
   Sigue siendo tocable: avisa con el mensaje de siempre. */
#view-sandwich-steps:not(:has(#step-1:not(.hidden) .card-selected, #step-2:not(.hidden) .card-selected, #step-3:not(.hidden) .card-selected)) #btn-next,
#view-burger-steps:not(:has(#burger-step-1:not(.hidden) .card-selected)) #btn-burger-next,
#view-torpedo-steps:not(:has(#torpedo-step-1:not(.hidden) .card-selected)) #btn-torpedo-next {
  opacity: .45;
  filter: saturate(.5);
}


/* ==========================================================================
   7. LISTAS CON CONTADOR (empanadas / bebidas)
   ========================================================================== */

#empanada-list > div,
#bebidas-list > div {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 16px;
}
#empanada-list button,
#bebidas-list button { border-radius: 12px; }
#empanada-list button,
#bebidas-list button:not([class*="sm:"]) { min-width: 44px; min-height: 44px; }
#empanada-list > div span.font-black { font-size: 15px; letter-spacing: 0; }


/* ==========================================================================
   8. BARRAS DE ACCIÓN INFERIORES
   ========================================================================== */

@media (max-width: 767px) {
  .action-bar {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(10, 10, 10, .98) 72%, rgba(10, 10, 10, .9));
    border-top: 1px solid var(--line);
  }
}
.action-bar button {
  min-height: 56px;
  font-size: 1.125rem !important;
  letter-spacing: .03em;
  border-radius: 16px;
}
.action-bar button.bg-white\/10 { background: var(--s3); color: var(--tx); border-color: var(--line-2); }


/* ==========================================================================
   9. BARRA FLOTANTE "VER MI PEDIDO"
   Solo aparece en el inicio, cuando ya hay algo en el carrito.
   ========================================================================== */

.cart-bar {
  display: none;
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: 16px;
  width: min(calc(100% - 32px), 42rem);
  transform: translateX(-50%);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 0 16px 0 12px;
  color: #000;
  background: var(--y);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25);
}
body:has(#view-categories:not(.hidden)) .cart-bar.has-items { display: flex; }
.cart-bar:active { transform: translateX(-50%) scale(.985); }

.cart-bar__left { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.cart-bar__count {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--y);
  background: #0a0a0a;
  border-radius: 10px;
}
.cart-bar__total { font-family: 'Anton', sans-serif; font-size: 1.5rem; letter-spacing: .02em; }


/* ==========================================================================
   10. CARRITO
   ========================================================================== */

#cart-container { background: #0c0b0a; border-left: 1px solid var(--line); }
.cart-head h4 { margin: 0; font-size: 1.75rem; line-height: 1; }

.cart-scroll { overscroll-behavior: contain; padding-bottom: 8px; }

/* Ítems */
#cart-items > div:not(.cart-empty) {
  padding: 14px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 18px;
}
#cart-items .absolute.flex { top: 10px; right: 10px; gap: 6px; }
#cart-items .absolute.flex button {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--s3);
}
#cart-items .absolute.flex + p { padding-right: 7.75rem; line-height: 1.15; }
#cart-items > div > button.absolute {
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--s3);
  color: var(--mut);
}
#cart-items p.font-inter {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mut);
}
#cart-items p.font-inter.text-red-400 {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--red);
}
#cart-items p.font-fatto.text-white,
#cart-items .font-fatto.text-xs { font-size: 1.125rem; line-height: 1.2; letter-spacing: .02em; }

/* Carrito vacío */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 16px 24px;
  text-align: center;
}
.cart-empty svg { margin-bottom: 14px; color: var(--dim); }
.cart-empty__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--tx); }
.cart-empty__text { margin: 0 0 20px; max-width: 18rem; font-size: 14px; line-height: 1.45; color: var(--mut); }
.cart-empty__btn {
  min-height: 48px;
  padding: 0 22px;
  font-weight: 700;
  color: #000;
  background: var(--y);
  border-radius: var(--r-ctl);
}
#cart-container:has(#cart-items .cart-empty) :is(.cart-summary, .cart-form, .cart-footer) { display: none !important; }

/* Resumen */
.cart-summary { display: grid; gap: 8px; padding: 0 4px; }
.sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--mut);
}
.sum-row span:last-child { font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
.sum-row--promo {
  padding: 10px 12px;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 12px;
}
.sum-row--promo span:last-child { color: var(--green); }

/* Formulario */
.cart-form {
  display: grid;
  gap: 20px;
  padding: 18px 16px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.form-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #fff; }
.field + .field { margin-top: 14px; }
.field-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--tx-2); }
.field-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--mut); }

#customer-name,
#celular,
#delivery-address {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  color: #fff;
  background: var(--s2);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-ctl);
  transition: border-color .15s, box-shadow .15s;
}
#customer-name::placeholder,
#celular::placeholder,
#delivery-address::placeholder { color: var(--dim); }
#customer-name:focus,
#celular:focus,
#delivery-address:focus {
  outline: none;
  border-color: var(--y);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .18);
}
.cart-form:has(#celular-error:not([hidden])) #celular { border-color: var(--red); }

#celular-error {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #fecaca;
  background: var(--red-bg);
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 12px;
}
#address-field { margin: 10px 0 0; }
#delivery-msg,
#transfer-info {
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #fde68a;
  background: var(--y-soft);
  border: 1px solid rgba(250, 204, 21, .25);
  border-radius: 12px;
}
#transfer-info p { margin: 0; font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }

/* Selects mejorados a control segmentado (el <select> sigue existiendo y manda) */
.seg-source {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.seg__btn {
  min-height: 48px;
  padding: 0 8px;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mut);
  background: transparent;
  border-radius: 12px;
  transition: background-color .15s, color .15s;
}
.seg__btn:hover { color: #fff; }
.seg__btn.is-on {
  color: #000;
  background: var(--y);
  box-shadow: 0 2px 10px rgba(250, 204, 21, .25);
}
.seg__btn:focus-visible { outline-offset: 1px; }

/* Pie fijo: el total y "Enviar" siempre a la vista */
.cart-footer {
  padding: 14px 0 0;
  margin-top: 8px;
  border-top: 1px dashed var(--line-2);
}
.cart-total { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.cart-total > span:first-child { font-size: 1.25rem; line-height: 1; }
.cart-send {
  width: 100%;
  min-height: 58px;
  font-size: 1.25rem !important;
  letter-spacing: .03em;
  border-radius: 16px;
}
.cart-send:active { transform: scale(.985); }
.cart-footer__hint { margin: 8px 0 0; font-size: 12px; text-align: center; color: var(--mut); }


/* ==========================================================================
   11. AVISOS
   ========================================================================== */

#toast-container > div { border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
#toast-container .font-inter.uppercase.text-sm {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
#toast-container .font-inter button { min-height: 48px; }


/* ==========================================================================
   12. CORRECCIONES DE COMPORTAMIENTO VISUAL
   ========================================================================== */

/* BUG: .fade-in usa "forwards" y deja un transform permanente en cada vista.
   Eso convierte a la vista en el contenedor de los botones position:fixed,
   así que "Siguiente / Agregar" quedaban pegados al final de la vista y fuera
   de pantalla hasta scrollear. Las vistas ahora animan solo opacidad y, al
   terminar, no queda ningún transform. */
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
[id^="view-"].fade-in { animation: view-in .25s ease-out backwards; }

/* Menos espacio muerto al final del inicio (la barra flotante necesita ~90px) */
#view-categories.safe-area-bottom { padding-bottom: 120px !important; }

/* Sin hueco por el que se cuele el contenido bajo la barra pegajosa */
.flow-bar::before,
.view-bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -16px;
  right: -16px;
  height: 10px;
  background: var(--bg);
}

/* Botones desplegables de ingredientes y bebidas: una línea, legibles */
[onclick="toggleSandwichExtras()"],
[onclick*="Adjustments()"],
#btn-toggle-step-bebidas {
  min-height: 52px;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--r-ctl);
}
[onclick="toggleSandwichExtras()"],
[onclick*="Adjustments()"] { justify-content: flex-start !important; padding-left: 16px; padding-right: 16px; }

/* Con el carrito abierto, los avisos van arriba para no tapar Total / Enviar */
body:has(#cart-overlay:not(.hidden)) #toast-container { bottom: auto; top: 12px; }