/* Sabor · carta de la mesa. Una columna, tipografía grande y un carrito fijo
   abajo que aparece solo cuando hay algo elegido. Reutiliza los tokens del
   sistema visual (theme.css). */
body.store {
  min-height: 100dvh;
  background: var(--bg);
  padding-bottom: calc(96px + var(--safe-bottom));
}

.store-loading {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  min-height: 60dvh;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.store-head {
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(160deg, var(--brand-strong), var(--brand));
  color: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.store-head .store-kicker { display: block; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.store-head h1 { font-size: var(--fs-3xl); margin: 2px 0 6px; }
.store-head p { font-size: var(--fs-sm); opacity: 0.85; }
.store-brand-row { display: flex; align-items: center; gap: var(--space-3); }
.store-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: rgb(255 255 255 / 14%); padding: 4px; }
.store-sub { margin-bottom: var(--space-3); }

/* Comandas ya enviadas desde el QR de la mesa */
.sent {
  display: grid;
  gap: var(--space-2);
  width: min(760px, 100%);
  margin: var(--space-3) auto 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--brand-soft);
}
.sent-head { display: grid; gap: 2px; }
.sent-row { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--line); }
.sent-row .sent-items { font-size: var(--fs-sm); }

.store-main { width: min(760px, 100%); margin: 0 auto; padding: var(--space-4); display: grid; gap: var(--space-4); }

.store-cat { display: grid; gap: var(--space-2); }
.store-cat h2 {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--space-1);
}
.store-grid { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 88px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}
.dish:hover { border-color: var(--brand); }
.dish:disabled { opacity: 0.55; }
.dish img { grid-column: 2; grid-row: 1; width: 88px; height: 88px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.dish .dish-text { display: grid; gap: 2px; }
.dish .dish-text strong { font-size: var(--fs-md); }
.dish .dish-text small { color: var(--ink-2); }
.dish .dish-price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-strong); }
.dish[data-count]:not([data-count="0"]) { border-color: var(--brand); background: var(--brand-soft); }

/* El plato del día: se lee el menú completo debajo del nombre y se pide de
   un toque. «Cambiar» abre el armado ya resuelto. */
.dish.store-dish { display: grid; grid-template-columns: 1fr; align-content: start; gap: 6px; border: 0; padding: 0; background: none; }
.dish.store-dish .dish-body { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: var(--space-3); width: 100%; min-height: 88px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.dish.store-dish .dish-body:disabled { opacity: 0.55; cursor: default; }
.dish.store-dish .dish-body:hover:not(:disabled) { border-color: var(--brand); }
.dish.store-dish .dish-recipe { color: var(--ink-2); line-height: 1.35; }
.dish.store-dish .dish-extras { color: var(--ink-3); }
.dish.store-dish .dish-actions { display: flex; gap: 6px; justify-content: flex-end; }
.dish.store-dish .dish-actions .btn { padding: 6px 12px; }
.dish-swaps { display: flex; flex-wrap: wrap; gap: 4px; }
.store-sheet .ok-card { width: min(480px, calc(100vw - 24px)); }
.dish .dish-count {
  justify-self: start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.store-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-2); display: grid; gap: var(--space-2); justify-items: center; }

/* Domicilio o recoger (solo cuando se entra sin QR de mesa) */
.store-modes {
  display: flex;
  gap: var(--space-2);
  width: min(760px, 100%);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) 0;
}
.store-modes .mode {
  flex: 1;
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.store-modes .mode[data-selected="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.store-modes .mode[hidden] { display: none; }

/* Datos de contacto del pedido a domicilio */
.store-sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  align-items: end;
  background: rgb(12 24 22 / 45%);
}
.sheet-card {
  width: min(760px, 100%);
  max-height: 92dvh;
  margin: 0 auto;
  overflow: auto;
  padding: var(--space-5) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.sheet-card > strong { font-size: var(--fs-xl); color: var(--ink); }
.sheet-card .field input { font-size: 16px; }
.checkout-summary { display: grid; gap: 2px; padding-top: var(--space-2); border-top: 1px solid var(--line); }

/* Carrito fijo */
.cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  gap: var(--space-2);
  width: min(760px, 100%);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -10px 30px rgb(16 40 36 / 10%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.cart-head { display: flex; align-items: center; justify-content: space-between; }
.cart-head .link { border: none; background: none; color: var(--danger); font-size: var(--fs-xs); font-weight: 600; padding: 6px; }
.cart-line { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; padding: 4px 0; }
.cart-line .qty { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-strong); font-size: var(--fs-sm); font-weight: 700; }
.cart-line .name { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: grid; }
.cart-line .name .line-options { display: block; color: var(--ink-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.cart-line .amount { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.cart-line .step { display: flex; gap: 4px; }
.cart-line .step button { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.cart-total strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }

/* Confirmación */
.store-ok { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-4); background: rgb(12 24 22 / 45%); }
.ok-card {
  display: grid;
  gap: var(--space-2);
  width: min(360px, 100%);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
  box-shadow: var(--shadow-2);
}
.ok-card strong { font-size: var(--fs-2xl); color: var(--ok); }
.ok-card p { font-size: var(--fs-lg); font-weight: 600; }

#toast-host .toast { bottom: calc(120px + var(--safe-bottom)); }