.form-hero { text-align: center; padding-bottom: var(--space-2); }
@media (max-width: 767px) { .form-hero { padding-bottom: 13px; } }
.form-hero p.lead { max-width: 60ch; margin-left: auto; margin-right: auto; }

.form-shell {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--space-4);
}
@media (min-width: 768px) { .form-shell { padding: var(--space-6); } }

.items-checklist {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-top: var(--space-2);
}
/* 2 columnas solo desde tablet: en 375px los nombres largos se parten en 3 líneas
   y las tarjetas quedan disparejas (probado). */
@media (min-width: 640px) { .items-checklist { grid-template-columns: 1fr 1fr; } }

.item-check {
  display: flex;
  align-items: center;
  /* wrap para que el extra de pago (queso) baje a su propio renglón completo. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* El :has apunta a la casilla del PLATILLO, no a cualquiera de la fila: las filas
   con extra de pago (queso) llevan una segunda casilla que no debe activar la
   tarjeta ni el stepper por sí sola. */
.item-check:has(> .item-check-label input[type="checkbox"]:checked) { border-color: var(--vino); background: var(--crema); }

/* La etiqueta clicable cubre checkbox + nombre; el stepper queda fuera de ella
   para que sus botones no disparen el toggle del checkbox. */
.item-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.item-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--vino);
  cursor: pointer;
}
.item-check .item-name { font-weight: 600; color: var(--marron); display: block; line-height: 1.25; }
.item-check .item-price { color: var(--humo); font-size: .85rem; }

/* Extra de pago colgado del platillo (queso fundido). Ocupa su propio renglón y
   se ve apagado hasta que el platillo está marcado, igual que el stepper. */
.item-addon {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--linea);
  font-size: .85rem;
  color: var(--marron);
  cursor: pointer;
  opacity: .45;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.item-check:has(> .item-check-label input[type="checkbox"]:checked) .item-addon {
  opacity: 1;
  pointer-events: auto;
}
.item-addon input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--vino);
  cursor: pointer;
}
.item-addon-price { color: var(--humo); }

/* Stepper de cantidad — el aspecto vive en components.css porque el menú
   también lo usa. Aquí solo la regla propia del formulario: dentro de una fila
   del checklist, el contador está apagado mientras el platillo no esté marcado. */
.item-check .qty-stepper {
  opacity: .35;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.item-check:has(> .item-check-label input[type="checkbox"]:checked) .qty-stepper {
  opacity: 1;
  pointer-events: auto;
}

/* Barra de subtotal */
.subtotal-bar {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--linea);
  border-radius: var(--radius-md);
  background: var(--crema);
}
.subtotal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.subtotal-row .subtotal-label { font-weight: 600; color: var(--marron); }
.subtotal-row .subtotal-amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vino);
  font-variant-numeric: tabular-nums;
}
.subtotal-bar .hint { margin-top: 6px; font-size: .8rem; color: var(--humo); }

.items-group + .items-group { margin-top: var(--space-3); }
.items-group h4 { margin-bottom: 6px; }
.items-group .hint { margin: 0 0 8px; font-size: .82rem; color: var(--humo); }

/* Bloque de salsas y extras: separado visualmente de los platillos */
.extras-block {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--linea);
}

/* ---------- Secciones del formulario ---------- */
/* Aquí estaban .form-section (+ separador) y .form-step-num, del tiempo en que
   pedidos.html mostraba los 3 pasos apilados en una sola vista. Ahora usa
   .form-step / .step-indicator de components.css, igual que catering. */
.form-section-title {
  font-size: 1.4rem;
  margin-bottom: var(--space-3);
}

/* Error de pedido vacío: mantiene la validación dentro del flujo, sin alert nativo. */
.pedido-error {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--peligro);
  border-radius: var(--radius-sm);
  background: rgba(128, 13, 13, .06);
  color: var(--peligro);
  font-size: .9rem;
  font-weight: 500;
}
.pedido-error[hidden] { display: none; }
#pedido-section.has-error #items-checklist {
  outline: 2px solid var(--peligro);
  outline-offset: 8px;
  border-radius: var(--radius-sm);
}

.pickup-info { margin-bottom: var(--space-3); }

/* Campo deshabilitado: se atenúa pero sigue visible, para que se entienda por qué. */
.field.is-disabled { opacity: .5; }
.field.is-disabled textarea,
.field.is-disabled input { background: var(--crema); cursor: not-allowed; }

/* ---------- Estado de los grupos de aderezos ---------- */
.items-group--extras {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.items-group--extras[data-estado="pendiente"] {
  border-color: var(--alerta);
  background: rgba(184, 121, 28, .06);
}

.group-status {
  margin: 10px 0 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--humo);
}
.group-status:empty { display: none; }
.items-group--extras[data-estado="pendiente"] .group-status { color: var(--alerta); }
.items-group--extras[data-estado="ok"] .group-status { color: var(--ok); }
.items-group--extras[data-estado="pendiente"] .group-status::before { content: "⚠ "; }
.items-group--extras[data-estado="ok"] .group-status::before { content: "✓ "; }

/* Opción "Sin aderezo": más discreta que un aderezo real */
.item-check--none { border-style: dashed; }
.item-check--none .item-name { font-weight: 500; color: var(--humo); }
.item-check--none:has(input:checked) .item-name { color: var(--marron); font-weight: 600; }

/* ---------- Movimiento con propósito (una sola vez, nunca en bucle) ---------- */
@keyframes vh-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.group-status.is-pulsing {
  animation: vh-pulse 420ms var(--ease-out);
  transform-origin: left center;
}

@keyframes vh-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}
.items-group--extras.is-shaking { animation: vh-shake 380ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .group-status.is-pulsing,
  .items-group--extras.is-shaking { animation: none; }
}

/* .submit-row se fue con el formulario de una sola vista: el botón de enviar
   ahora vive en el .form-nav del paso 3. */
.form-success {
  display: none;
  margin-top: var(--space-3);
}
.form-success.is-visible { display: block; }

/* Aviso de pedido retomado desde la memoria del navegador */
.pedido-retomado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.pedido-retomado[hidden] { display: none; }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--vino);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--marron); }

/* ---------- Resumen del pedido (paso 1) ----------
   El paso 1 ya no repite el menú entero en checkboxes: muestra solo lo que el
   cliente eligió en menu.html, donde sí hay foto y descripción. Sin checkbox,
   porque lo que aparece aquí está en el pedido; se sale con la × o bajando el
   contador a cero. */
/* Mismo aspecto que tenía un platillo marcado: están en el pedido. */
.item-check--resumen { border-color: var(--vino); background: var(--crema); }
/* El nombre se queda con el renglón entero y los controles bajan al siguiente:
   compartiendo línea con el stepper y la ×, "Sándwich de Pulled Pork en Hogaza"
   se partía en cuatro líneas en 375px (y en las dos columnas de tablet igual). */
.item-check--resumen .item-check-label { flex-basis: 100%; cursor: default; }
.item-check--resumen .qty-stepper { margin-left: auto; }
/* El stepper y el queso se activan con :has(input:checked), y estas filas no
   tienen checkbox: aquí se encienden por definición. */
.item-check--resumen .qty-stepper,
.item-check--resumen .item-addon {
  opacity: 1;
  pointer-events: auto;
}
.item-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: 50%;
  color: var(--humo);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.item-remove:hover { background: var(--crema); color: var(--vino); }

.items-agregar-mas { margin-top: var(--space-3); font-size: .9rem; }

/* Paso 1 sin nada: en vez de un checklist vacío, la salida al menú. */
.pedido-vacio {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border: 1px dashed var(--linea);
  border-radius: var(--radius-md);
}
.pedido-vacio p { color: var(--humo); margin-bottom: var(--space-3); }

/* Recordatorio del total en el paso 3, donde se pulsa "Enviar": el subtotal
   completo (con su nota de que no incluye envío) vive en el paso 1. */
.subtotal-bar--resumen { margin-bottom: var(--space-4); }

/* ---------- Dirección desglosada (paso 2) ----------
   Calle, número, colonia, CP y ciudad en campos aparte: en un solo textarea
   faltaba siempre algo para poder entregar. */
.direccion-titulo {
  font-weight: 600;
  color: var(--marron);
  margin-bottom: 2px;
}
#direccion-bloque > .hint { margin: 0 0 var(--space-2); font-size: .82rem; color: var(--humo); }
/* El bloque entero se atenúa en Pick up, pero sigue visible para que se
   entienda por qué no se puede escribir ahí. */
#direccion-bloque.is-disabled .direccion-titulo,
#direccion-bloque.is-disabled > .hint { opacity: .5; }

.field-grid {
  display: grid;
  gap: 0 var(--space-3);
  grid-template-columns: 1fr;
}
/* Dos columnas solo cuando hay lugar: en 375px "Número exterior" y "Código
   postal" lado a lado dejan los inputs demasiado angostos. */
@media (min-width: 560px) {
  .field-grid { grid-template-columns: 1fr 1fr; }
  .field-grid .field--ancho { grid-column: 1 / -1; }
}
.label-opcional { font-weight: 400; color: var(--humo); font-size: .85em; }

/* El mismo platillo con y sin queso son dos líneas del pedido; el sufijo dice
   cuál es cuál sin tener que mirar la casilla. */
.item-variante { font-weight: 500; color: var(--vino); }
.item-dividir { flex-basis: 100%; margin: 6px 0 0; }
.item-dividir[hidden] { display: none; }
.item-dividir .link-btn { font-size: .82rem; }

/* display:flex le gana al display:none del atributo hidden: sin esta regla, la
   fila del queso se seguiría viendo cuando se oculta (varias unidades ya con
   queso). Mismo caso que .btn[hidden] y .qty-stepper[hidden] en components.css. */
.item-addon[hidden] { display: none; }