/* ==========================================================================
   Pedido: botón Agregar, stepper y barra fija. Usa los tokens de styles.css.
   ========================================================================== */

/* ---------- Agregar / stepper ---------- */
.add-control {
  margin-top: auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.product-card .add-control,
.photo-card__body .add-control,
.combo-card .add-control { margin-top: auto; }

.add-control .btn--sm { min-height: 44px; }
/* .btn fuerza display:inline-flex y pisaría el atributo hidden */
.add-control .btn[hidden] { display: none; }

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1.5px solid var(--color-terracotta-dark);
  border-radius: 999px;
  background: var(--color-white);
}
.stepper[hidden] { display: none; }

.stepper__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-terracotta-dark);
  transition: background-color 0.15s ease, transform 0.15s var(--ease-out);
}
.stepper__btn:hover { background: var(--color-cream-alt); }
.stepper__btn:active { transform: scale(0.92); }
.stepper__btn .icon { width: 20px; height: 20px; }

.stepper__qty {
  min-width: 2ch;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-forest-dark);
}

/* ---------- Barra fija ---------- */
.pedido-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  justify-content: center;
  padding: var(--sp-1) var(--gutter) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.pedido-bar[hidden] { display: none; }

.pedido-bar__btn {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  min-height: 56px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  background: var(--color-terracotta-dark);
  color: var(--color-white);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s var(--ease-out), background-color 0.15s ease;
  animation: pedido-bar-in 0.3s var(--ease-out);
}
.pedido-bar__btn:hover { background: var(--color-terracotta-darker); transform: translateY(-2px); }
.pedido-bar__btn .icon { width: 22px; height: 22px; }
.pedido-bar__texto { flex: 1; text-align: left; }
.pedido-bar__total { font-family: var(--font-heading); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

@keyframes pedido-bar-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Con la barra visible, el botón flotante de WhatsApp y "volver arriba" suben para no taparse */
.tiene-pedido .whatsapp-float { bottom: calc(var(--sp-2) + 72px); }
.tiene-pedido .to-top { bottom: calc(var(--sp-2) + 72px + 68px); }
/* y la página gana aire abajo para que la barra no tape el pie */
.tiene-pedido .site-footer { padding-bottom: 80px; }

@media (min-width: 768px) {
  .pedido-bar { padding-bottom: var(--sp-2); }
}

/* ==========================================================================
   Panel: hoja inferior en celular, ventana centrada en escritorio
   ========================================================================== */
.panel-fondo {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(43, 38, 32, 0.45);
  animation: panel-fondo-in 0.2s ease;
}

.panel {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  max-height: min(92dvh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--color-cream);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-md);
  animation: panel-in 0.3s var(--ease-out);
}

.panel__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}
.panel__titulo { font-size: 1.25rem; }
.panel__cerrar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.panel__cerrar:hover { background: var(--color-cream-alt); }

.panel__cuerpo {
  padding: var(--sp-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
}
.panel__pie {
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background: var(--color-cream);
}
.panel__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-weight: 600;
  color: var(--color-forest-dark);
}

@keyframes panel-fondo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (min-width: 768px) {
  .panel-fondo { align-items: center; padding: var(--sp-3); }
  .panel { border-radius: var(--radius); }
}

/* ---------- Elección de tamaño ---------- */
.tam-grupo { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.tam-grupo legend { font-weight: 600; color: var(--color-forest-dark); margin-bottom: var(--sp-1); padding: 0; }

.tam-opt { display: block; cursor: pointer; }
.tam-opt input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.tam-opt__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tam-opt__caja strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-forest-dark); font-variant-numeric: tabular-nums; }
.tam-opt:hover .tam-opt__caja { border-color: var(--color-forest-light); }
.tam-opt input:checked + .tam-opt__caja {
  border-color: var(--color-terracotta-dark);
  background: var(--color-cream-alt);
}
.tam-opt input:focus-visible + .tam-opt__caja {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* ---------- Chips de sabor tocables ---------- */
.flavor-chip { padding: 0; }
.flavor-chip__btn {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.flavor-chip__btn .icon { width: 18px; height: 18px; color: var(--color-terracotta-dark); }
.flavor-chip__btn:hover { background: var(--color-cream-alt); }
.flavor-chip:has(.flavor-chip__btn) { transition: border-color 0.15s ease; }
.flavor-chip:has(.flavor-chip__btn:hover) { border-color: var(--color-terracotta-dark); }

/* ---------- Armado de combos ---------- */
.panel--combo { max-height: 94vh; max-height: min(94dvh, 760px); }
.panel__nota { font-size: 0.92rem; margin-bottom: var(--sp-2); }
.panel__estado {
  position: sticky;
  top: calc(var(--sp-3) * -1);
  z-index: 1;
  margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--color-cream-alt);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-forest-dark);
}
.sabor-lista { display: grid; }
.sabor-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
}
.sabor-fila__nombre { color: var(--color-text); }
.sabor-fila.tiene .sabor-fila__nombre { font-weight: 700; color: var(--color-forest-dark); }
.stepper--sm { border-width: 1px; }
.stepper--sm .stepper__btn { width: 36px; height: 36px; }
.stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper__btn:disabled:hover { background: transparent; }
.panel__pie .btn:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; transform: none; }
.panel--combo .tam-grupo { margin-top: var(--sp-3); }

/* ---------- Resumen del pedido ---------- */
.resumen-lista { display: grid; }
.resumen-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.resumen-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumen-item__info strong { color: var(--color-forest-dark); overflow-wrap: anywhere; }
.resumen-item__detalle { font-size: 0.85rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.resumen-item__precio { font-family: var(--font-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.resumen-item__acciones { flex-shrink: 0; }
.resumen-item__quitar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-alert);
}
.resumen-item__quitar:hover { background: var(--color-cream-alt); }

.resumen-entrega { margin-top: var(--sp-3); grid-template-columns: 1fr 1fr; }
.resumen-entrega legend { grid-column: 1 / -1; }
.tam-opt__con-icono { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tam-opt__con-icono .icon { width: 20px; height: 20px; color: var(--color-terracotta-dark); }
.resumen-entrega + .panel__nota { margin-top: var(--sp-2); margin-bottom: 0; }

.resumen-total { font-size: 1.15rem; }
.resumen-total strong { font-family: var(--font-heading); font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.resumen-vaciar { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-2); min-height: 44px; }
.resumen-vaciar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.resumen-vaciar__btn .icon { width: 18px; height: 18px; }
.resumen-vaciar__btn:hover { color: var(--color-alert); }
.resumen-vaciar__cancelar { color: var(--color-text-muted); }

.panel__aviso { margin-bottom: var(--sp-1); font-size: 0.9rem; font-weight: 600; color: var(--color-alert); text-align: center; }
.panel__aviso[hidden] { display: none; }
.panel__pie .btn[aria-disabled="true"] { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; transform: none; }

/* Con un panel abierto, la barra y los botones flotantes quedan detrás del fondo */
.panel-abierto .pedido-bar,
.panel-abierto .whatsapp-float,
.panel-abierto .to-top { visibility: hidden; }