/* ============================================================
   engine/css/engine.css
   Base stylesheet for the static WhatsApp order system store.
   Mobile-first, uses CSS custom properties for theming.
   ============================================================ */

/* ============================================================
   1. RESET + BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  padding-bottom: 72px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  line-height: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ============================================================
   2. CSS VARIABLES (:root)
   ============================================================ */

:root {
  /* Brand colors */
  --color-primary: #ff6b35;
  --color-secondary: #004e89;
  --color-accent: #f7c948;

  /* Background / surface */
  --color-bg: #fafafa;
  --color-surface: #ffffff;

  /* Text */
  --color-text: #1a1a2e;
  --color-text-secondary: #6b7280;

  /* Borders */
  --color-border: #e5e7eb;

  /* Semantic */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* Border radii */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.08);

  /* Animation */
  --transition: 0.25s ease;

  /* Layout */
  --header-height: 64px;
  --nav-height: 72px;
}

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

.store-header {
  position: fixed;
  top: var(--ann-h, 0px); /* baja la altura de la franja amarilla para no quedar tapado */
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
  max-width: 1280px;
  margin: 0 auto;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
#header-logo { height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block; }
#header-logo:not([src]), #header-logo[src=""] { display: none; }

.header-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.header-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.header-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.header-cart-btn:hover,
.header-cart-btn:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-primary);
  outline: none;
}

.header-cart-btn svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: scale(1);
  transition: transform var(--transition);
  pointer-events: none;
}

.cart-badge[data-count="0"],
.cart-badge:empty {
  transform: scale(0);
}

/* ============================================================
   4. PROGRESS BAR
   ============================================================ */

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  z-index: 90;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 180px;
}

.progress-step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: background var(--transition);
  margin: 0 4px;
}

.progress-step.completed:not(:last-child)::after {
  background: var(--color-primary);
}

.progress-step-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}

.progress-step-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition);
}

.progress-step.active .progress-step-circle {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.progress-step.active .progress-step-label {
  color: var(--color-primary);
  font-weight: 700;
}

.progress-step.completed .progress-step-circle {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}

.progress-step.completed .progress-step-label {
  color: var(--color-success);
}

/* ============================================================
   5. SCREENS
   ============================================================ */

.screens-container {
  margin-top: calc(var(--header-height) + 53px); /* header + progress bar */
  min-height: calc(100dvh - var(--header-height) - 53px - var(--nav-height));
}

.screen {
  display: none;
  padding: 16px;
  animation: screenIn 0.3s ease both;
}

.screen.active {
  display: block;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   6. BUTTONS
   ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  min-height: 48px;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition),
    transform var(--transition);
  user-select: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 88%, #000);
  box-shadow: var(--shadow-md);
  outline: none;
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn-full {
  width: 100%;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  min-height: 48px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    box-shadow var(--transition), transform var(--transition);
  user-select: none;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
  outline: none;
}

.btn-secondary:active {
  transform: scale(0.97);
}

.btn-secondary:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 0;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--transition);
  background: none;
  border: none;
}

.btn-back:hover,
.btn-back:focus-visible {
  color: var(--color-primary);
  outline: none;
}

.btn-back svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* LAVANDERÍA: la flecha de "volver" usaba un gris apagado (--color-text-secondary)
   que casi no se veía sobre el fondo navy oscuro. La ponemos azul claro visible. */
body.laundry-mode .btn-back { color: #BAE6FD; }
body.laundry-mode .btn-back:hover,
body.laundry-mode .btn-back:focus-visible { color: #4FC3F7; }

/* ============================================================
   7. CATALOG TOOLBAR
   ============================================================ */

.catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 16px;
  height: 48px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.search-box svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--color-text);
}

.search-box input::placeholder {
  color: var(--color-text-secondary);
}

.category-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.category-chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  min-height: 36px;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
  user-select: none;
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

/* ============================================================
   8. PRODUCTS GRID
   ============================================================ */

.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.product-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ─── AGOTADO (estilo Uber Eats) ─────────────────────────────────
   Cuando el dueño marca el producto como agotado en su dashboard,
   el storefront pinta la card con:
     1. Imagen en escala de grises + opacidad reducida
     2. Badge rojo prominente "AGOTADO" centrado sobre la imagen
     3. Botón Agregar deshabilitado con texto "AGOTADO"
   El cliente sigue viendo qué es el producto pero no lo puede pedir. */
.product-card.is-unavailable .product-img,
.product-card.is-unavailable .product-img-placeholder {
  filter: grayscale(80%);
  opacity: 0.6;
}
.product-card.is-unavailable:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
.unavailable-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #dc2626;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  z-index: 6;
  pointer-events: none;
  text-transform: uppercase;
  font-family: system-ui, sans-serif;
}
/* Mismo tratamiento dentro del modal de detalle */
.modal-image.is-unavailable img,
.modal-image.is-unavailable {
  filter: grayscale(80%);
  opacity: 0.7;
}
.modal-unavailable-banner {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  margin: 12px 0;
  font-size: 0.9rem;
}
.btn-add-cart:disabled,
.btn-add-modal:disabled {
  background: #d1d5db !important;
  color: #6b7280 !important;
  cursor: not-allowed;
  opacity: 0.8;
}

.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.product-img-placeholder {
  width: 100%;
  height: 180px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 15%, var(--color-bg)),
    color-mix(in srgb, var(--color-secondary) 15%, var(--color-bg))
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.product-img-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

.product-info {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.product-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}

.product-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-top: 8px;
}

.product-stock {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.product-stock.low {
  color: var(--color-warning);
  font-weight: 600;
}

.product-stock.out {
  color: var(--color-error);
  font-weight: 600;
}

.btn-add-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: none;
  min-height: 44px;
  cursor: pointer;
  margin-top: auto;
  transition: background var(--transition), transform var(--transition);
  user-select: none;
}

.btn-add-cart:hover,
.btn-add-cart:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
  outline: none;
}

.btn-add-cart:active {
  transform: scale(0.96);
}

.btn-add-cart.added {
  background: var(--color-success);
}

.btn-add-cart:disabled {
  background: var(--color-border);
  color: var(--color-text-secondary);
  pointer-events: none;
}

/* ============================================================
   9. FAB CART
   ============================================================ */

.fab-cart {
  position: fixed;
  bottom: 88px; /* above nav */
  left: 16px;
  right: 16px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-secondary);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  min-height: 56px;
  transition: background var(--transition), box-shadow var(--transition),
    transform var(--transition);
  border: none;
  font-family: inherit;
  font-size: inherit;
  user-select: none;
}

.fab-cart:hover,
.fab-cart:focus-visible {
  background: color-mix(in srgb, var(--color-secondary) 85%, #000);
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(0, 78, 137, 0.25);
  outline: none;
}

.fab-cart:active {
  transform: scale(0.98);
}

.fab-cart-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
}

.fab-cart-icon svg {
  width: 22px;
  height: 22px;
}

.fab-cart-count {
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 800;
  font-size: 0.8rem;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  min-width: 28px;
  text-align: center;
}

.fab-cart-total {
  font-weight: 700;
  font-size: 1rem;
  margin-left: auto;
}

/* ============================================================
   10. CART ITEMS
   ============================================================ */

.cart-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

.cart-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.cart-item-img-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 15%, var(--color-bg)),
    color-mix(in srgb, var(--color-secondary) 15%, var(--color-bg))
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-item-img-placeholder svg {
  width: 24px;
  height: 24px;
  opacity: 0.4;
  color: var(--color-text-secondary);
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-price {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-top: 2px;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
  user-select: none;
  flex-shrink: 0;
}

.qty-btn:hover,
.qty-btn:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  outline: none;
}

.qty-btn:active {
  transform: scale(0.9);
}

.qty-value {
  font-size: 0.95rem;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
  color: var(--color-text);
}

.btn-remove-item {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.btn-remove-item:hover,
.btn-remove-item:focus-visible {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  outline: none;
}

.btn-remove-item svg {
  width: 18px;
  height: 18px;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
  color: var(--color-text-secondary);
}

.cart-empty svg {
  width: 64px;
  height: 64px;
  opacity: 0.35;
}

.cart-empty p {
  font-size: 0.95rem;
}

/* ============================================================
   11. CART SUMMARY
   ============================================================ */

.cart-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.summary-row span:last-child {
  font-weight: 600;
  color: var(--color-text);
}

.summary-row.total {
  border-top: 1.5px solid var(--color-border);
  margin-top: 4px;
  padding-top: 14px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-text);
}

.summary-row.total span:last-child {
  color: var(--color-primary);
  font-size: 1.2rem;
}

/* ─── DELIVERY TOGGLE (pickup vs delivery) ─── */
.delivery-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.delivery-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color .18s, background .18s, box-shadow .18s, transform .12s;
  min-height: 64px;
}
.delivery-option:hover { border-color: var(--color-primary); }
.delivery-option.selected {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb, 255,107,53), 0.06);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255,107,53), 0.12);
}
.delivery-option svg {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}
.delivery-option.selected svg { color: var(--color-primary); }
.delivery-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.delivery-option-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.delivery-option-desc {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.delivery-option.selected .delivery-option-desc { color: var(--color-primary); }
.delivery-toggle[hidden] { display: none; }

@media (max-width: 420px) {
  .delivery-toggle { grid-template-columns: 1fr; }
  .delivery-option { min-height: 56px; }
}

/* ============================================================
   12. FORM
   ============================================================ */

.checkout-form h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--color-text);
  min-height: 48px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-secondary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.form-group input.invalid,
.form-group textarea.invalid,
.form-group select.invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.field-error {
  font-size: 0.78rem;
  color: var(--color-error);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-group textarea {
  min-height: 96px;
}

/* ─── MODERN CHECKOUT FORM (Uber Eats / Rappi style) ─── */
.checkout-form { max-width: 560px; margin: 0 auto; }
.checkout-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 22px 20px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  margin-bottom: 18px;
}
.checkout-form-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 4px;
}
.checkout-form-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 18px;
}
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.field-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.field-group label .field-optional {
  color: var(--color-text-secondary);
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: 4px;
}
.field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.field-wrap .field-icon {
  position: absolute;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  pointer-events: none;
  opacity: 0.7;
}
.field-group input[type="text"],
.field-group input[type="tel"],
.field-group input[type="email"] {
  width: 100%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 14px 14px 44px;
  font-size: 1rem;
  color: var(--color-text);
  min-height: 52px;
  outline: none;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field-group textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 14px;
  font-size: 0.95rem;
  color: var(--color-text);
  min-height: 88px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field-group input::placeholder,
.field-group textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.75;
}
.field-group input:focus,
.field-group textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 255,107,53), 0.15);
}
.field-group input.invalid,
.field-group textarea.invalid {
  border-color: var(--color-error);
  background: rgba(239,68,68,0.04);
}
.field-group input.valid {
  border-color: #10B981;
}
.field-group .field-error {
  font-size: 0.78rem;
  color: var(--color-error);
  font-weight: 500;
  min-height: 14px;
  display: block;
}
.address-hint {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
  display: none;
}
.address-hint.visible { display: block; }

.zone-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.35;
  border: 1px solid transparent;
}
.zone-banner[hidden] { display: none; }
.zone-banner--ok { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.35); color: #16794f; }
.zone-banner--error { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.4); color: #a61b1b; font-weight: 600; }
.zone-banner--info { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.3); color: #1e4a8a; }

/* Banner de marketing: envio gratis */
.free-shipping-banner {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: background 0.2s ease;
}
.free-shipping-banner[hidden] { display: none; }
.free-shipping-banner.pending { background: rgba(247, 201, 72, 0.18); border-color: rgba(247, 201, 72, 0.5); color: #7a5a00; }
.free-shipping-banner.reached { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.45); color: #14532d; font-weight: 600; }
.free-shipping-banner strong { font-weight: 700; }
/* LAVANDERÍA: sobre el fondo navy oscuro, el verde/gold OSCURO de estos banners se
   volvía ilegible. Los pasamos a verde y gold CLAROS (legibles) manteniendo el vibe. */
body.laundry-mode .free-shipping-banner.reached { background: rgba(34, 197, 94, 0.20); border-color: rgba(74, 222, 128, 0.55); color: #86EFAC; }
body.laundry-mode .free-shipping-banner.reached strong { color: #BBF7D0; }
body.laundry-mode .free-shipping-banner.pending { background: rgba(247, 201, 72, 0.16); border-color: rgba(252, 211, 77, 0.5); color: #FCD34D; }

.store-closed-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
  text-align: center;
  font-weight: 600;
  border-bottom: 2px solid rgba(239, 68, 68, 0.6);
}
.store-closed-banner[hidden] { display: none; }

.btn-primary.checkout-submit {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity .25s, transform .15s, box-shadow .2s;
}
.btn-primary.checkout-submit.ready {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(var(--color-primary-rgb, 255,107,53), 0.28);
}
.btn-primary.checkout-submit.ready:hover { transform: translateY(-1px); }

@media (max-width: 480px) {
  .checkout-form-card { padding: 18px 16px 12px; border-radius: 14px; }
  .field-group input[type="text"],
  .field-group input[type="tel"],
  .field-group textarea { font-size: 1rem; }
}

/* Panel de tiempo estimado bajo el campo de direccion */
.eta-panel {
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(22,163,74,0.08) 0%, rgba(59,130,246,0.06) 100%);
  border: 1px solid rgba(22,163,74,0.20);
  border-radius: 10px;
}
.eta-panel[hidden] { display: none; }
.eta-panel-main { display: flex; align-items: center; gap: 10px; }
.eta-icon { font-size: 22px; line-height: 1; }
.eta-text { display: flex; flex-direction: column; }
.eta-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text1, #111827);
  letter-spacing: -0.01em;
}
.eta-label {
  font-size: 0.75rem;
  color: var(--text2, #6b7280);
  font-weight: 500;
}
.eta-breakdown {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(22,163,74,0.22);
  font-size: 0.78rem; color: var(--text2, #6b7280);
}
.eta-breakdown span strong { color: var(--text1, #111827); font-weight: 600; }

/* Google Places Autocomplete dropdown polish */
.pac-container {
  border-radius: 12px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid var(--color-border);
  font-family: inherit;
  z-index: 99999 !important; /* sobre modales/headers fijos */
  pointer-events: auto !important;
}
.pac-container:after { display: none !important; } /* oculta "powered by Google" cuando colisiona */
.pac-item {
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.pac-item * { pointer-events: auto !important; } /* los spans internos también */
.pac-item:hover, .pac-item-selected { background: var(--color-bg); }

/* ============================================================
   13. PAYMENT
   ============================================================ */

.order-summary-collapse {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.order-summary-collapse summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background var(--transition);
}

.order-summary-collapse summary::-webkit-details-marker {
  display: none;
}

.order-summary-collapse summary:hover {
  background: rgba(0, 0, 0, 0.02);
}

.order-summary-collapse[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.order-summary-collapse-body {
  padding: 12px 16px;
}

/* Resumen del pedido — siempre visible, con bandas de color y espaciado */
.order-summary-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  padding: 18px 18px 16px;
}
.order-summary-title {
  margin: 0 0 12px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: -0.01em;
}

/* Productos — cada uno con padding, divisor sutil */
.summary-products {
  display: flex; flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.summary-product {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: #FAFAF7;
  border: 1px solid #EEEDE8;
  border-radius: 10px;
}
.summary-qty {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 28px; padding: 0 8px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1F2937;
  font-variant-numeric: tabular-nums;
}
.summary-product-name {
  font-weight: 500;
  color: var(--text1);
  line-height: 1.3;
  word-break: break-word;
}
.summary-sku {
  font-family: ui-monospace, monospace;
  font-size: 0.72em;
  color: var(--text3, #9CA3AF);
  font-weight: 400;
  margin-left: 4px;
}
.summary-product-price {
  font-weight: 600;
  color: var(--text1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Bandas de color — subtotal AMARILLA, total VERDE */
.summary-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  margin-bottom: 8px;
}
.summary-band-subtotal {
  background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%);
  color: #78350F;
  border: 1px solid #FCD34D;
}
.summary-band-total {
  background: linear-gradient(90deg, #D1FAE5 0%, #A7F3D0 100%);
  color: #064E3B;
  border: 1px solid #6EE7B7;
  font-size: 1.12rem;
  font-weight: 800;
  padding: 14px 16px;
}
.summary-band-label { font-weight: 600; }
.summary-band-value { font-variant-numeric: tabular-nums; font-weight: 700; }
.summary-band-total .summary-band-value { font-weight: 800; }

/* Extras (envio, comision) — entre subtotal y total, espaciado */
.summary-extras {
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 8px;
  padding: 4px 16px;
}
.summary-extra {
  display: flex; justify-content: space-between;
  font-size: 0.92rem; color: var(--text2, #6B7280);
  padding: 4px 0;
}
.summary-extra span:last-child {
  color: var(--text1); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Datos del cliente — bloque inferior sin color */
.summary-customer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}
.summary-customer-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.summary-customer-row {
  display: flex; justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.9rem;
}
.summary-customer-row span:first-child { color: var(--text2); }
.summary-customer-row span:last-child { color: var(--text1); font-weight: 500; }
.summary-text-right { text-align: right; max-width: 62%; }
.summary-note-kitchen {
  background: #FEF3C7;
  padding: 7px 10px !important;
  border-radius: 6px;
  border: 1px solid #FDE68A;
  margin: 4px 0;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.payment-methods h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  min-height: 60px;
  transition: border-color var(--transition), box-shadow var(--transition),
    background var(--transition);
  user-select: none;
}

.payment-option:hover:not(.disabled) {
  border-color: var(--color-primary);
  background: rgba(255, 107, 53, 0.03);
}

.payment-option.selected {
  border-color: var(--color-primary);
  background: rgba(255, 107, 53, 0.05);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.payment-option.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.payment-option-radio {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition);
}

.payment-option.selected .payment-option-radio {
  border-color: var(--color-primary);
}

.payment-option-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transform: scale(0);
  transition: transform var(--transition);
}

.payment-option.selected .payment-option-radio::after {
  transform: scale(1);
}

.payment-option-info {
  flex: 1;
  min-width: 0;
}

.payment-option-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}

.payment-option-desc {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.payment-option-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  flex-shrink: 0;
}

.payment-details {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.payment-details h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
}

.clabe-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  user-select: all;
}

.clabe-display:hover {
  border-color: var(--color-primary);
  background: rgba(255, 107, 53, 0.03);
}

.clabe-copy-btn {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  transition: color var(--transition);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.clabe-display:hover .clabe-copy-btn,
.clabe-copy-btn:hover {
  color: var(--color-primary);
}

.clabe-copy-btn svg {
  width: 18px;
  height: 18px;
}

.double-confirm-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 107, 53, 0.05);
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: var(--radius);
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}

.double-confirm-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.double-confirm-label span {
  font-size: 0.9rem;
  color: var(--color-text);
  flex: 1;
}

/* ============================================================
   14. RECEIPT
   ============================================================ */

.receipt-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 0 24px;
}

.receipt-checkmark {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.receipt-checkmark svg {
  width: 38px;
  height: 38px;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.receipt-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 8px;
}

.receipt-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 320px;
}

.receipt-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-md);
  margin: 24px 0 16px;
  width: 100%;
}

/* LAVANDERÍA: recibo legible — la tarjeta del ticket va con fondo CLARO y texto
   oscuro, igual que el resumen de pago (#payment-order-summary). Sin esto, los
   grises del ticket (#666/#888) quedaban sobre navy oscuro = ilegible. */
body.laundry-mode #receipt-card { background: #DDE3EC; border: 1px solid #c3cdda; box-shadow: none; }
body.laundry-mode #receipt-card, body.laundry-mode #receipt-card * { color: #0A1220 !important; }
body.laundry-mode #receipt-card hr { border-top-color: #b9c4d4 !important; }
/* LAVANDERÍA: botones de acción del recibo SIEMPRE en columna, ancho completo y
   rectángulo redondeado (NO círculo). Con border-radius total + texto multilínea +
   el layout en fila de escritorio, se volvían círculos ilegibles. Selector con
   especificidad alta (body.laundry-mode ...) para ganarle a la media query de fila. */
body.laundry-mode .receipt-actions { flex-direction: column; align-items: stretch; }
body.laundry-mode .receipt-actions .btn-primary,
body.laundry-mode .receipt-actions .btn-secondary {
  flex: none; max-width: none; width: 100%;
  border-radius: 12px; white-space: normal; line-height: 1.3; min-height: 50px;
}

.receipt-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.receipt-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.receipt-row-label {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.receipt-row-value {
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  word-break: break-word;
}

.receipt-info {
  background: rgba(247, 201, 72, 0.15);
  border: 1px solid rgba(247, 201, 72, 0.4);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 16px;
}

.receipt-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ============================================================
   15. NAV BOTTOM
   ============================================================ */

.nav-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1300; /* por encima del overlay de bienvenida (1100) para que el "Catálogo" se vea */
  height: var(--nav-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: stretch;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  position: relative;
  transition: color var(--transition), background var(--transition);
  min-height: 44px;
}

.nav-btn:hover,
.nav-btn:focus-visible {
  color: var(--color-primary);
  background: rgba(255, 107, 53, 0.05);
  outline: none;
}

.nav-btn.active {
  color: var(--color-primary);
  font-weight: 700;
}

.nav-btn svg {
  width: 24px;
  height: 24px;
}

.nav-badge {
  position: absolute;
  top: 8px;
  right: calc(50% - 18px);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

/* ============================================================
   16. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* -- 640px: 2-column grid, more padding, receipt actions in row -- */
@media (min-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .screen {
    padding: 24px;
  }

  .receipt-actions {
    flex-direction: row;
    justify-content: center;
  }

  .receipt-actions .btn-primary,
  .receipt-actions .btn-secondary {
    flex: 1;
    max-width: 240px;
  }

  .catalog-toolbar {
    flex-direction: row;
    align-items: center;
  }

  .search-box {
    flex: 1;
  }

  .category-chips {
    flex-shrink: 0;
    max-width: 50%;
  }
}

/* -- 1024px: desktop layout -- */
@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-bottom {
    display: none;
  }

  .fab-cart {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 400px;
    max-width: 400px;
    bottom: 24px;
  }

  .fab-cart:active {
    transform: translateX(-50%) scale(0.98);
  }

  .checkout-form {
    max-width: 560px;
    margin: 0 auto;
  }

  .payment-methods-container {
    max-width: 560px;
    margin: 0 auto;
  }

  .receipt-success {
    max-width: 520px;
    margin: 0 auto;
  }

  .screens-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    margin-top: calc(var(--header-height) + 53px);
  }

  .screen {
    padding: 32px 24px;
  }

  .header-inner {
    padding: 0 24px;
  }

  .progress-bar {
    justify-content: center;
  }

  .progress-step {
    max-width: 160px;
  }
}

/* -- 1280px: 4-column grid -- */
@media (min-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   Cash change question (payment screen)
   ============================================================ */
.cash-change-box {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
}
.cash-change-q {
  display: block;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.cash-change-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.cash-change-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.cash-change-amount {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cash-change-amount input {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  font-size: 1rem;
  max-width: 200px;
}
.cash-change-amount small {
  color: #666;
  font-size: 0.85rem;
}

/* Receipt customer block */
.receipt-customer {
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px dashed #eee;
  border-bottom: 1px dashed #eee;
}
.receipt-customer .receipt-row {
  font-size: 0.9rem;
  padding: 3px 0;
}

/* Order tracking timeline */
.tracking-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.tracking-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  position: relative;
  opacity: 0.45;
  transition: opacity .3s;
}
.tracking-step::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 32px;
  bottom: -10px;
  width: 2px;
  background: var(--color-border);
}
.tracking-step:last-child::after { display: none; }
.tracking-step.done { opacity: 1; }
.tracking-step.done .tracking-dot { background: #2ecc71; border-color: #2ecc71; }
.tracking-step.done::after { background: #2ecc71; }
.tracking-step.active { opacity: 1; }
.tracking-step.active .tracking-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 255,107,53), 0.2);
  animation: tracking-pulse 1.6s ease-in-out infinite;
}
.tracking-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tracking-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}
.tracking-time {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
@keyframes tracking-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 255,107,53), 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb, 255,107,53), 0.05); }
}
/* Widget separado para pagos pendientes (transfer/MP no confirmado).
   NO se usa el timeline normal — el cliente NO debe ver "Preparando" hasta
   que el dueño confirme el pago. */
.order-pending-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 18px;
  background: #FEF3C7;
  border: 2px solid #F59E0B;
  border-radius: 12px;
  margin: 14px 0;
  gap: 10px;
}
.pending-wait-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
  animation: pending-wait-pulse 1.2s ease-in-out infinite;
}
@keyframes pending-wait-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); transform: scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0.08); transform: scale(1.15); }
}
.pending-wait-label { font-weight: 800; color: #92400E; font-size: 1.05rem; }
.pending-wait-desc { font-size: 0.85rem; color: #78350F; line-height: 1.45; max-width: 340px; }

/* ===== Paso F — pantalla de bienvenida (cuentas de cliente) ===== */
/* IMPORTANTE: el display NO es incondicional — solo cuando la pantalla está .active.
   Si no, pisaría la regla .screen{display:none} y la bienvenida nunca se ocultaría. */
.lavago-welcome { background: radial-gradient(120% 120% at 50% 0%, #11203a 0%, #0A1220 60%); }
/* Overlay a pantalla COMPLETA (borde a borde, sin franjas en las orillas) y contenido
   centrado al instante en PC/tablet/móvil. z-index bajo el de la franja amarilla (1200). */
#screen-welcome.active {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; padding: 0 0 20px; box-sizing: border-box;
}
/* Sección superior de la bienvenida: pasos "¿Cómo funciona?" + franja amarilla. */
.welcome-top { position: relative; z-index: 1; width: 100%; box-sizing: border-box; }
.welcome-steps { width: 100%; padding: 18px 10px 6px; box-sizing: border-box; }
.welcome-steps .ws-title { text-align: center; margin: 0 0 14px; color: #E2E8F0; font-size: 1.12rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.welcome-steps .ws-title::after { content: ""; display: block; width: 40px; height: 3px; margin: 8px auto 0; border-radius: 3px; background: linear-gradient(90deg, #4FC3F7, #22D3EE); }
.welcome-steps .ws-row { display: flex; align-items: stretch; justify-content: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 8px 10px; }
.welcome-steps .ws-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; width: 110px; flex: 0 0 auto; padding: 10px 9px 13px; background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)); border: 1px solid rgba(79,195,247,0.22); border-radius: 16px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 18px rgba(3,10,22,0.38), inset 0 1px 0 rgba(255,255,255,0.09); }
.welcome-steps .ws-num { position: absolute; top: -11px; left: -11px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #4FC3F7, #0EA5E9); color: #04121f; font-weight: 800; font-size: 1rem; border: 2px solid #0A1220; box-shadow: 0 3px 8px rgba(14,165,233,0.5); }
.welcome-steps .ws-photo { position: relative; width: 100%; height: 70px; border-radius: 12px; overflow: hidden; background: #0c1a2c; border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.welcome-steps .ws-img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; }
.welcome-steps .ws-txt { color: #F1F5F9; font-size: 0.74rem; font-weight: 600; line-height: 1.22; text-align: center; }
.welcome-steps .ws-arrow { display: flex; align-items: center; align-self: center; color: rgba(79,195,247,0.5); flex: 0 0 auto; }
.welcome-steps .ws-arrow svg { width: 16px; height: 16px; }
.welcome-announce { margin: 6px 0 0; background: linear-gradient(90deg, #FBBF24, #F59E0B); color: #1a1320; font-weight: 800; text-align: center; padding: 9px 14px; font-size: 0.9rem; line-height: 1.3; box-sizing: border-box; }
/* El contenido (logo+botones) se centra en el espacio que queda debajo. */
.welcome-inner { margin: auto 0; }

/* Header del catálogo (lavandería): fondo AZUL + burbujas (como el inicio), no blanco
   ni logo de fondo; íconos/labels claros. */
body.laundry-mode .store-header {
  /* NO tocar position aquí: la base es `position: fixed`, que ya sirve de contexto
     para las burbujas absolutas. Ponerlo `relative` rompía la barra de pasos sticky
     (top:64px) y la encimaba con las redes sociales. SIN overflow:hidden tampoco
     (recortaba los pasos). */
  background-color: #0A1220;
  border-bottom: 1px solid #243047;
}
/* Solo el .header-inner (logo, cuenta, carrito) necesita subir por encima de las
   burbujas. La barra de pasos (.progress-bar) ya trae su propio z-index:90 y
   position:sticky — NO debe entrar aquí, porque ponerle position:relative rompía
   su sticky (top:64px la empujaba abajo y la encimaba con las redes sociales). */
body.laundry-mode .store-header > .header-inner { position: relative; z-index: 1; }
/* Burbujas reales 3D dentro del header — mismas que la bienvenida, pero contenidas
   a la altura del header (animación con recorrido corto + overflow:hidden las recorta). */
body.laundry-mode .store-header-bubbles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.laundry-mode .store-header-bubbles .bubble {
  position: absolute; bottom: -16px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 14%, rgba(160,225,255,0.22) 38%, rgba(79,195,247,0.10) 62%, rgba(79,195,247,0.04) 100%);
  box-shadow: inset 4px -4px 9px rgba(10,18,32,0.25), inset -3px 3px 7px rgba(255,255,255,0.45), 0 0 8px rgba(79,195,247,0.18);
  filter: blur(0.3px);
  animation: lavago-rise-header linear infinite, lavago-sway ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes lavago-rise-header {
  0%   { transform: translateY(0) scale(0.8); opacity: 0; }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.8; }
  100% { transform: translateY(-120px) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { body.laundry-mode .store-header-bubbles .bubble { animation: none; opacity: 0.3; } }
body.laundry-mode .store-header,
body.laundry-mode .header-cart-btn,
body.laundry-mode #header-account-btn,
body.laundry-mode #header-name { color: #F1F5F9; }
body.laundry-mode .progress-step-label { color: #90A4AE; }
body.laundry-mode .progress-step.active .progress-step-label,
body.laundry-mode .progress-step.completed .progress-step-label { color: #4FC3F7; }
/* CRÍTICO: que el atributo [hidden] gane sobre los display:flex de abajo,
   si no, el formulario y los botones se ven al mismo tiempo. */
.lavago-welcome [hidden] { display: none !important; }
/* Línea de proceso con 3 colores (recogemos/lavamos/entregamos). */
.welcome-process { margin: 0 0 4px; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; }
.wp-recoger { color: #F59E0B; }
.wp-lavar { color: #4FC3F7; }
.wp-entregar { color: #34D399; }
.welcome-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Burbujas 3D: brillo especular arriba-izq, sombra interior, leve desenfoque y vaivén. */
.welcome-bubbles .bubble {
  position: absolute; bottom: -10vh; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 14%, rgba(160,225,255,0.22) 38%, rgba(79,195,247,0.10) 62%, rgba(79,195,247,0.04) 100%);
  box-shadow: inset 6px -6px 14px rgba(10,18,32,0.25), inset -4px 4px 10px rgba(255,255,255,0.45), 0 0 12px rgba(79,195,247,0.18);
  filter: blur(0.3px);
  animation: lavago-rise linear infinite, lavago-sway ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes lavago-rise {
  0%   { transform: translateY(0) scale(0.85); opacity: 0; }
  8%   { opacity: 0.95; }
  85%  { opacity: 0.85; }
  100% { transform: translateY(-118vh) scale(1.2); opacity: 0; }
}
@keyframes lavago-sway {
  from { margin-left: -14px; }
  to   { margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .welcome-bubbles .bubble { animation: none; opacity: 0.35; } }

/* Formulario / éxito de la bienvenida */
.welcome-form-title { color: #F1F5F9; font-size: 1.15rem; margin: 0 0 6px; }
.welcome-phone-wrap { display: flex; align-items: stretch; gap: 0; }
.welcome-phone-cc { display: flex; align-items: center; padding: 0 12px; background: #0f1a30; border: 1px solid #2c3a55; border-right: none; border-radius: 10px 0 0 10px; color: #90A4AE; font-weight: 700; white-space: nowrap; }
.welcome-phone-input { border-radius: 0 10px 10px 0 !important; }
.welcome-success { text-align: center; }
.welcome-check { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 34px; line-height: 64px; box-shadow: 0 8px 24px rgba(22,163,74,0.5); }
.welcome-success-text { color: #DCFCE7; background: rgba(22,163,74,0.15); border: 1px solid #16a34a; border-radius: 12px; padding: 14px; line-height: 1.5; margin: 0 0 16px; }

/* Banner horizontal "¿Cómo funciona?" — franja superior del catálogo, ancho completo.
   Margen negativo para romper el padding del .screen y llegar de borde a borde. */
.lavago-steps-banner { margin: -16px -16px 12px; padding: 12px 14px; background: linear-gradient(135deg, #11203a, #16203a); border-bottom: 1px solid #2c3a55; box-sizing: border-box; }
.lavago-steps-banner .lsb-title { color: #4FC3F7; font-weight: 800; font-size: 0.95rem; margin-bottom: 8px; text-align: center; }
.lavago-steps-banner .lsb-row { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.lavago-steps-banner .lsb-step { display: flex; align-items: center; gap: 6px; background: #0f1a30; border: 1px solid #2c3a55; border-radius: 999px; padding: 7px 12px; white-space: nowrap; flex: 0 0 auto; }
.lavago-steps-banner .lsb-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #4FC3F7; color: #0A1220; font-weight: 800; font-size: 0.75rem; }
.lavago-steps-banner .lsb-ico { font-size: 1rem; }
.lavago-steps-banner .lsb-txt { color: #F1F5F9; font-size: 0.82rem; font-weight: 600; }
.lavago-steps-banner .lsb-arrow { color: #4FC3F7; font-weight: 800; flex: 0 0 auto; }
@media (max-width: 640px) { .lavago-steps-banner .lsb-row { justify-content: flex-start; } }
.welcome-inner { position: relative; z-index: 1; text-align: center; padding: 24px; max-width: 360px; width: 100%; }
.welcome-logo { width: 460px; height: 460px; max-width: 94vw; max-height: 44vh; object-fit: contain; margin: 0 auto -36px; display: block; position: relative; left: 18px; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)); }
.welcome-phrase { color: #F1F5F9; font-size: 1.05rem; line-height: 1.5; margin: 0 0 16px; }
.welcome-buttons { display: flex; flex-direction: column; gap: 10px; }
.welcome-promo { margin: 4px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 700;
  color: #052e16; background: linear-gradient(135deg, #34D399, #10B981); box-shadow: 0 4px 14px rgba(16,185,129,0.35); }
.welcome-promo strong { color: #042f1a; }
.welcome-btn { padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; border: none; }
.welcome-btn-guest { background: #4FC3F7; color: #0A1220; }
.welcome-btn-2 { background: transparent; color: #F1F5F9; border: 1px solid #2c3a55; }
.welcome-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.welcome-input { padding: 13px; border-radius: 10px; border: 1px solid #2c3a55; background: #16203a; color: #F1F5F9; font-size: 1rem; }
.welcome-input::placeholder { color: #90A4AE; }
.welcome-error { color: #fecaca; background: rgba(220,38,38,0.2); border-radius: 8px; padding: 8px; font-size: 0.85rem; }
.welcome-link { background: none; border: none; color: #90A4AE; cursor: pointer; text-decoration: underline; font-size: 0.9rem; }