/* Web Pedido — mobile-first SPA styles.
 * Single file, no external font / icon dependency. Tuned for phones
 * first (95% of food-delivery traffic); desktop is a wider container.
 *
 * Brand palette:
 *   --brand        #d62828  (Hotpot King red)
 *   --brand-dark   #9d1c1c
 *   --accent-wa    #25D366  (WhatsApp green)
 *   --reserved     #f0a000  (amber for RESERVADO state)
 */
:root {
  --brand: #d62828;
  --brand-dark: #9d1c1c;
  --accent-wa: #25d366;
  --accent-wa-dark: #128c7e;
  --reserved: #f0a000;
  --bg: #f7f7f8;
  --card-bg: #fff;
  --border: #e5e7eb;
  --text: #1f2937;
  --text-muted: #6b7280;
  --warn: #b91c1c;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --radius: 14px;

  /* Piezas que una marca puede querer distintas sin cambiar el resto.
     Los valores por defecto son los de Hotpot King, así que una tienda
     que no declare piel se ve exactamente igual que antes. La piel de
     ARROZ CHINA los reescribe desde <style> en la cabecera del documento
     (ver PIELES en controllers/web_pedido.py): allí la barra superior es
     papel con tinta, no un bloque de color. */
  --header-bg: var(--brand);
  --header-fg: #fff;
  --header-line: transparent;
  --header-chip: rgba(255,255,255,.18);
  --header-chip-active: rgba(255,255,255,.32);
  --btn-primary-bg: var(--brand);
  --btn-primary-fg: #fff;

  /* Radios por rol. Los valores son los de SIEMPRE, así que Hotpot King e
     INSTA WOK no cambian; lo que aporta es que una piel pueda bajarlos de
     golpe. ARROZ CHINA los pone todos a 4px porque su marco de sello es
     duro: hasta ahora la portada era recta y al entrar en /pedido todo se
     redondeaba, dos idiomas de forma en la misma tienda.
     Las píldoras (999px) y los círculos (50%) NO pasan por aquí: son
     geometría, no estilo de marca. */
  --r-card: 10px;
  --r-control: 12px;
  --r-panel: 14px;
  --r-box: 16px;
  --r-sheet: 18px;
  /* Píldoras y puntos. Aquí también manda la piel: el dueño quiere ARROZ
     CHINA cuadrada ENTERA, no sólo las tarjetas. Único que no pasa por aquí:
     el cargador (.wp-spinner), que gira —un cuadrado girando se ve roto. */
  --r-pill: 999px;
  --r-dot: 50%;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
}
/* <html> al 100 % (antes 16px fijos): si el cliente tiene la letra del
   teléfono o del navegador más grande, lo que va en rem crece con él. Con la
   letra por defecto sigue siendo 16 px. */
html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.4; }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
input { font-family: inherit; font-size: 16px; }
h1, h2, h3, h4 { margin: 0; }
ul { padding-left: 1.2rem; }
small { color: var(--text-muted); }

/* ---------- header ---------- */
#wp-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--header-line);
  box-shadow: var(--shadow);
}
.wp-brand { display: flex; flex-direction: column; line-height: 1.1; }
.wp-brand-name { font-weight: 700; font-size: 1.1rem; }
.wp-brand-tag { font-size: var(--fs-micro,.75rem); font-weight: 600; letter-spacing: .06em; margin-top: 2px; }
.wp-lang-toggle {
  background: var(--header-chip);
  color: var(--header-fg);
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: var(--fs-sec,.875rem);
  font-weight: 600;
  white-space: nowrap;     /* «ES / 中» se partía en dos líneas a 360 px */
  flex: none; margin-left: .5rem; min-height: 36px;
}
.wp-lang-toggle:active { background: var(--header-chip-active); }

#wp-app { max-width: 720px; margin: 0 auto; padding: 1rem 1rem 6rem; }

/* ---------- loader ---------- */
.wp-loader {
  display: flex; flex-direction: column; align-items: center; padding: 4rem 1rem;
  color: var(--text-muted);
}
.wp-spinner {
  width: 40px; height: 40px; border-radius: 50%;   /* el cargador gira: NO se cuadra */
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  animation: wpspin .8s linear infinite;
  margin-bottom: 1rem;
}
@keyframes wpspin { to { transform: rotate(360deg); } }

/* ---------- category bar ---------- */
.wp-cat-bar {
  display: flex; gap: .5rem;
  overflow-x: auto;
  padding: .5rem 0 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wp-cat-bar::-webkit-scrollbar { display: none; }
.wp-cat-tab {
  flex: 0 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: .55rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-tab,.9375rem);
  font-weight: 500;
  white-space: nowrap;
}
.wp-cat-tab.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ---------- menu grid ---------- */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
}
.wp-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform .12s;
}
.wp-card:active { transform: scale(.98); }
.wp-card-img {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  background: linear-gradient(180deg, #fafafa, #f0f0f0);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.wp-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* When the <img> errors out (no image uploaded yet for this product),
   onerror handler hides the img and adds .wp-card-img-empty — we then
   render a small "fork & knife" emoji centered as a soft placeholder
   instead of overlaying intrusive text. */
.wp-card-img-empty::after {
  content: "🍽️";
  font-size: 2rem;
  opacity: .35;
}
.wp-card-body { padding: .6rem .65rem .75rem; flex: 1; display: flex; flex-direction: column; }
.wp-card-name {
  font-size: var(--fs-body,1rem); font-weight: 600; line-height: 1.3;
  margin-bottom: .25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-card-desc {
  margin: 0 0 .5rem; font-size: var(--fs-sec,.875rem); line-height: 1.4; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wp-card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
}
.wp-card-price { font-weight: 700; color: var(--brand-dark); font-size: var(--fs-body,1rem);
  line-height: 1.2; font-variant-numeric: tabular-nums; }
/* «desde» en su propia línea: junto al precio (16 px) no cabía en la tarjeta
   de 360 px y partía el precio en dos. */
.wp-card-from { display: block; font-size: var(--fs-sec,.875rem); font-weight: 500;
  color: var(--text-muted); }
.wp-card-add {
  background: var(--brand);
  color: #fff;
  border: 0;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-dot);
  font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ---------- variant modal ---------- */
.wp-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: wpfade .15s ease-out;
}
@keyframes wpfade { from { opacity: 0; } to { opacity: 1; } }
.wp-modal {
  background: var(--card-bg);
  width: 100%; max-width: 540px;
  max-height: 90vh;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  display: flex; flex-direction: column;
  animation: wpslide .2s ease-out;
}
@keyframes wpslide { from { transform: translateY(20px); } to { transform: translateY(0); } }
@media (min-width: 600px) {
  .wp-modal-overlay { align-items: center; padding: 1rem; }
  .wp-modal { border-radius: var(--r-sheet); }
}
.wp-modal-sm { max-width: 380px; }
.wp-modal header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem .75rem;
  border-bottom: 1px solid var(--border);
}
.wp-modal h2 { font-size: 1.1rem; font-weight: 700; }
.wp-modal-close {
  background: transparent; border: 0;
  font-size: 1.6rem; line-height: 1; color: var(--text-muted);
  padding: 0 4px;
}
.wp-modal-body { overflow-y: auto; padding: .75rem 1.2rem; }
.wp-modal footer {
  padding: 1rem 1.2rem; border-top: 1px solid var(--border);
  background: var(--bg);
}
.wp-modal-add {
  width: 100%; padding: .85rem;
  background: var(--brand);
  color: #fff;
  border: 0; border-radius: var(--r-control);
  font-size: 1rem; font-weight: 600;
}
.wp-modal-add:disabled { background: #d1d5db; color: #6b7280; }
.wp-modal-hint { margin: .5rem 0 0; font-size: var(--fs-sec,.875rem); text-align: center; color: var(--text-muted); }

.wp-attr-block { margin-bottom: 1rem; }
.wp-attr-block h4 { font-size: var(--fs-sec,.875rem); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .5rem; }

.wp-opt-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.wp-opt {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: .5rem .85rem;
  font-size: var(--fs-body,1rem);
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 80px;
}
.wp-opt small { color: var(--brand-dark); font-size: var(--fs-sec,.875rem); margin-top: 2px; }
.wp-opt.is-selected {
  border-color: var(--brand);
  background: #fff5f5;
  color: var(--brand-dark);
  font-weight: 600;
}

.wp-qty {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--bg);
  border-radius: var(--r-card);
  padding: 4px;
}
.wp-qty button {
  width: 32px; height: 32px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1.1rem; line-height: 1;
}
.wp-qty-input, .wp-qty-val {
  min-width: 36px; text-align: center;
  font-weight: 600;
  background: transparent; border: 0;
  -moz-appearance: textfield;
}
.wp-qty-input::-webkit-outer-spin-button,
.wp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wp-note-input {
  width: 100%;
  padding: .6rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  font-size: var(--fs-body,1rem);
}

/* ---------- section / cart / checkout / reserved / etc ---------- */
.wp-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.wp-section h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.wp-back {
  background: transparent; border: 0;
  color: var(--brand-dark); font-weight: 600;
  padding: 0; margin-bottom: .75rem;
}

.wp-empty-state {
  text-align: center; padding: 2rem 1rem; color: var(--text-muted);
}

.wp-cart-list { margin-bottom: 1rem; }
.wp-cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: .5rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
}
.wp-cart-row-info { display: flex; flex-direction: column; min-width: 0; }
.wp-cart-row-name { font-size: var(--fs-body,1rem); font-weight: 600; line-height: 1.3; }
.wp-cart-row-note { font-size: var(--fs-sec,.875rem); color: var(--text-muted); margin-top: 2px; }

/* ---- Combo: el plato que arma el cliente ----
   Reusa .wp-opt (los botones de variante) para que un combo y un plato con
   variantes se vean igual: es la misma acción para el cliente, elegir. */
.wp-combo-tag {
  margin-left: .4rem; font-size: var(--fs-micro,.75rem); letter-spacing: .06em;
  padding: 1px 6px; border-radius: 100px;
  background: var(--border); color: var(--text-muted);
}
.wp-combo-aviso {
  margin: 0 0 .75rem; padding: .55rem .7rem; border-radius: var(--r-card);
  background: #fff5f5; border: 1px solid var(--brand);
  color: var(--brand-dark); font-size: var(--fs-body,1rem);
}
.wp-combo-step {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
}
.wp-combo-step button {
  width: 22px; height: 22px; line-height: 1; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--card-bg);
  color: inherit; font-size: .9rem;
}
.wp-combo-step button:disabled { opacity: .35; }
.wp-cart-row-combo {
  display: block; font-size: var(--fs-sec,.875rem); color: var(--text-muted); margin-top: 2px;
}
/* Un combo va de uno en uno: dos combos son dos platos distintos, así que
   el +/- no tiene sentido aquí (y el servidor rechaza cantidad != 1). */
.wp-qty-fija { justify-content: center; opacity: .7; }
.wp-cart-row-amt { font-weight: 600; min-width: 70px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En el teléfono la fila del carrito va en DOS líneas, como un recibo: nombre
   e importe arriba, cantidad y «Quitar» debajo. En una sola, a 360 px el nombre
   se quedaba con ~40 px y los botones de cantidad se le montaban encima
   («Camarones en Crem|» tapado por el −) — ya pasaba antes; con «Quitar» a
   14 px habría sido peor. */
@media (max-width: 599px) {
  .wp-cart-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info amt" "qty rm";
    row-gap: .5rem; align-items: start;
  }
  .wp-cart-row > .wp-cart-row-info { grid-area: info; }
  .wp-cart-row > .wp-qty { grid-area: qty; justify-self: start; }
  .wp-cart-row > .wp-cart-row-amt { grid-area: amt; min-width: 0; }
  .wp-cart-row > .wp-cart-row-rm { grid-area: rm; justify-self: end; align-self: center; }
}
.wp-cart-row-rm {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  min-width: 44px; min-height: 44px; padding: 5px 8px;
  background: #fdecec;
  border: 1.5px solid var(--brand);
  border-radius: var(--r-card);
  color: var(--brand);
  line-height: 1; cursor: pointer;
  transition: background .12s ease;
}
.wp-cart-row-rm:hover { background: #f9d9d9; }
.wp-cart-row-rm:active { background: #f3c4c4; }
.wp-cart-row-rm-txt {
  font-size: var(--fs-sec,.875rem); font-weight: 700;
}

.wp-cart-totals { padding: .75rem 0 1rem; }
.wp-totals-row {
  display: flex; justify-content: space-between;
  padding: .35rem 0;
  font-size: var(--fs-body,1rem);
}
.wp-totals-grand {
  border-top: 1px dashed var(--border);
  margin-top: .25rem; padding-top: .65rem;
  font-size: 1.1rem; font-weight: 700;
}
.wp-eta { display: block; text-align: right; margin-top: -2px; }

.wp-warn { color: var(--warn); font-weight: 600; }

/* Two-button cart split: PARA LLEVAR (takeaway) vs DOMICILIO (delivery).
   Side-by-side on the cart screen; each takes half the width minus the
   gap. Kept short so they fit on a 320px-wide phone without wrapping. */
.wp-cart-split-hint {
  margin: .25rem 0 .5rem;
  font-size: var(--fs-sec,.875rem);
  color: var(--text-muted);
  text-align: center;
}
.wp-cart-split-btns {
  display: flex; gap: .55rem;
}
.wp-btn-half { flex: 1 1 0; min-width: 0; padding-left: .5rem; padding-right: .5rem; }

/* Takeaway checkout banner — replaces the address picker when the
   customer chose PARA LLEVAR. Mild brand-tinted callout that explains
   "you'll pay & pick up at the store"; deliberately lighter than the
   warn yellow so it doesn't look like an error. */
.wp-takeaway-banner {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: var(--r-control);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  /* Era `display:flex` en fila con un solo hijo. Al meter debajo el aviso de
     «¿cuándo empezamos a cocinar?» los dos párrafos se ponían UNO AL LADO DEL
     OTRO y cada uno se quedaba en media columna. Se apilan. */
  display: flex; flex-direction: column; gap: .5rem; align-items: stretch;
}
/* Aviso de cocina anticipada (pedidos para recoger). Verde = ya estamos
   cocinando; ámbar = tu comida empieza cuando pagues. El «por qué» va en
   pequeño debajo: es lo que convierte el aviso en algo accionable
   —inscribirse— en vez de en una negativa a secas. */
.wp-precook { margin: 0; font-size: var(--fs-body,1rem); line-height: 1.35; font-weight: 600; }
.wp-precook small { display: block; margin-top: .25rem;
  font-size: var(--fs-sec,.875rem); font-weight: 400; line-height: 1.35; opacity: .9; }
.wp-precook-yes { color: #14602f; }
.wp-precook-no  { color: #8a4b06; }
.wp-precook a { color: inherit; font-weight: 700; text-decoration: underline; }
.wp-takeaway-banner-icon { font-size: 1.4rem; line-height: 1; }
.wp-takeaway-banner-body { flex: 1; font-size: var(--fs-body,1rem); line-height: 1.35; color: #7c2d12; }
.wp-takeaway-banner-title { font-weight: 700; display: block; margin-bottom: 2px; }

.wp-field { display: flex; flex-direction: column; margin-bottom: .85rem; }
.wp-field span { font-size: var(--fs-sec,.875rem); font-weight: 600; color: var(--text-muted); margin-bottom: .25rem; }
.wp-field input {
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  font-size: 1rem;
}
.wp-field input:focus { outline: 0; border-color: var(--brand); }
/* Campo requerido vacío al intentar pedir: resalte rojo claro + glow, para que
   el cliente vea EXACTAMENTE qué falta (el error nombra el campo y hace scroll). */
.wp-field input.wp-field-missing {
  border-color: var(--brand);
  background: #fdecec;
  box-shadow: 0 0 0 3px rgba(214, 40, 40, .16);
}
.wp-field input.wp-field-missing::placeholder { color: #e08a8a; }
/* Placeholder text — keep it visibly lighter than real input so empty
   fields don't read as filled-in content. The previous default
   browser placeholder color was almost black on Android, indistinct
   from typed text.
   2026-09-26: era #c4c8cf, 1,68:1 sobre blanco — la pista casi no se veía.
   #70757f da 4,6:1 y sigue siendo claramente más claro que lo tecleado
   (#1f2937, 14:1). */
.wp-field input::placeholder,
.wp-note-input::placeholder,
.wp-qty-input::placeholder,
#wp-f-address::placeholder { color: #70757f; opacity: 1; }
.wp-field input::-webkit-input-placeholder,
.wp-note-input::-webkit-input-placeholder { color: #70757f; }
.wp-field input::-moz-placeholder,
.wp-note-input::-moz-placeholder { color: #70757f; opacity: 1; }
.wp-field-status { margin-top: .25rem; font-size: var(--fs-sec,.875rem); color: var(--text-muted); }
.wp-field-hint {
  margin-top: .35rem;
  font-size: var(--fs-sec,.875rem);
  color: var(--text-muted);
  line-height: 1.35;
  display: block;
}
.wp-field-status.wp-ok { color: var(--accent-wa-dark); }

/* ---------- map address picker (Rappi-style) ---------- */
.wp-addr-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .25rem;
}
.wp-locate-btn {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand-dark);
  font-size: var(--fs-sec,.875rem); font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  line-height: 1.2;
  cursor: pointer;
}
.wp-locate-btn:active { background: #fff5f5; }
.wp-locate-btn:disabled {
  border-color: var(--border);
  color: var(--text-muted);
  cursor: wait;
}
.wp-field-address input {
  /* Google Places Autocomplete dropdown sits below the input;
     give the input enough internal padding so the dropdown's
     z-index doesn't clash visually. */
  padding: .85rem .9rem;
}
.wp-map-wrap {
  position: relative;
  margin: -.4rem 0 .85rem;   /* hugs the address input above */
  border-radius: var(--r-control);
  overflow: hidden;
  border: 1.5px solid var(--border);
}
.wp-map {
  width: 100%;
  height: 240px;
  background: linear-gradient(180deg, #e8eef3, #d3dde6);
}
@media (min-width: 600px) {
  .wp-map { height: 300px; }
}
/* Center pin overlay — fixed at map center, transparent to clicks so
   user can drag the map underneath. The map center IS the order's
   delivery coordinate; we ditch markers entirely so there's nothing
   to drag (you drag the MAP not the pin). */
.wp-map-pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  font-size: 2.6rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  z-index: 5;
}
.wp-map-helper {
  position: absolute;
  bottom: .5rem; left: .5rem; right: .5rem;
  background: rgba(255,255,255,.94);
  color: var(--text);
  font-size: var(--fs-sec,.875rem);
  padding: .4rem .65rem;
  border-radius: 8px;
  text-align: center;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.wp-addr-current {
  display: block;
  margin: .5rem 0 0;
  padding: .55rem .8rem;
  background: var(--bg);
  border-radius: 8px;
  font-size: var(--fs-body,1rem);
  color: var(--text);
  min-height: 2.2rem;
}

/* Google Places Autocomplete dropdown sometimes sits behind our
   sticky cart bubble on mobile. Force it on top. */
.pac-container {
  z-index: 99999 !important;
  border-radius: var(--r-card);
  font-family: inherit;
  margin-top: 4px;
}

/* ---------- tip selector ---------- */
.wp-tip-block {
  margin: .25rem 0 1rem;
  padding: .85rem;
  background: var(--bg);
  border-radius: var(--r-control);
}
.wp-tip-label {
  margin: 0 0 .65rem;
  font-size: var(--fs-body,1rem); font-weight: 600;
  color: var(--text);
}
.wp-tip-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.wp-tip-chip {
  flex: 1 0 calc(50% - .25rem);
  padding: .55rem .5rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-body,1rem); font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}
.wp-tip-chip.is-picked {
  border-color: var(--brand);
  background: #fff5f5;
  color: var(--brand-dark);
  font-weight: 700;
}
.wp-tip-input {
  width: 100%;
  margin-top: .55rem;
  padding: .65rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  font-size: 1rem;
  -moz-appearance: textfield;
}
.wp-tip-input::-webkit-outer-spin-button,
.wp-tip-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wp-tip-input:focus { outline: 0; border-color: var(--brand); }
.wp-tip-hint {
  display: block;
  margin-top: .55rem;
  font-size: var(--fs-sec,.875rem);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---------- cart-screen coupon picker ---------- */
.wp-coupons-block {
  margin: .25rem 0 1rem;
  padding: .85rem;
  background: #fff8e6;
  border: 1.5px dashed #f0a000;
  border-radius: var(--r-control);
}
.wp-coupons-intro {
  margin: 0 0 .65rem;
  font-size: var(--fs-body,1rem); font-weight: 600;
  color: #92400e;
}
.wp-coupon-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: .65rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: .65rem .8rem;
  margin-bottom: .4rem;
}
.wp-coupon-card.is-picked {
  border-color: #f0a000;
  background: #fffaf0;
  box-shadow: 0 0 0 2px rgba(240,160,0,.25);
}
.wp-coupon-card.is-disabled {
  opacity: .55;
}
.wp-coupon-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wp-coupon-name { font-weight: 600; font-size: var(--fs-body,1rem); }
.wp-coupon-label { color: var(--brand-dark); font-weight: 600; font-size: var(--fs-sec,.875rem); margin-top: 1px; }
.wp-coupon-save { color: #15803d; font-size: var(--fs-sec,.875rem); margin-top: 2px; }
.wp-coupon-save strong { color: #166534; }
.wp-coupon-min { color: var(--text-muted); font-size: var(--fs-sec,.875rem); margin-top: 2px; }
.wp-coupon-btn {
  background: #f0a000; color: #fff; border: 0;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sec,.875rem); font-weight: 700;
  cursor: pointer;
}
.wp-coupon-btn:disabled {
  background: #e5e7eb; color: var(--text-muted); cursor: not-allowed;
}
.wp-coupon-card.is-picked .wp-coupon-btn {
  background: var(--text-muted);
}
.wp-coupons-empty {
  font-size: var(--fs-sec,.875rem); color: var(--text-muted);
  margin: .5rem 0 .85rem;
  padding: .6rem .8rem;
  background: var(--bg);
  border-radius: var(--r-card);
  text-align: center;
}
.wp-totals-discount span:last-child { color: #15803d; font-weight: 600; }

/* ---------- saved-addresses picker (returning customers) ---------- */
.wp-saved-block {
  margin-bottom: 1rem;
  padding: .85rem;
  background: #fff5f5;
  border: 1.5px dashed var(--brand);
  border-radius: var(--r-control);
}
.wp-saved-intro {
  margin: 0 0 .65rem;
  font-size: var(--fs-body,1rem); font-weight: 600;
  color: var(--brand-dark);
}
.wp-saved-card {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: .65rem .8rem;
  margin-bottom: .4rem;
  text-align: left;
  font-size: var(--fs-body,1rem);
  color: var(--text);
  cursor: pointer;
}
.wp-saved-card:active { transform: scale(.99); }
.wp-saved-card.is-picked {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(214,40,40,.18);
}
.wp-saved-pin { font-size: 1.1rem; line-height: 1; }
.wp-saved-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wp-saved-fmt { font-weight: 500; line-height: 1.25; }
.wp-saved-note { color: var(--text-muted); font-size: var(--fs-sec,.875rem); margin-top: 2px; }
.wp-saved-tick {
  color: var(--brand-dark); font-weight: 700; font-size: 1.1rem;
}
.wp-saved-hint {
  margin: .55rem 0 0;
  font-size: var(--fs-sec,.875rem); color: var(--text-muted);
  text-align: center;
}

/* Historic text-only suggestions (marketing library) — softer, neutral
   look vs the brand-red "we know you" saved-addresses block, since these
   still need map confirmation. */
.wp-suggest-block {
  margin-bottom: 1rem;
  padding: .85rem;
  background: #f6f8fb;
  border: 1.5px solid var(--border);
  border-radius: var(--r-control);
}
.wp-suggest-card {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: .65rem .8rem;
  margin-bottom: .4rem;
  text-align: left;
  font-size: var(--fs-body,1rem);
  color: var(--text);
  cursor: pointer;
}
.wp-suggest-card:active { transform: scale(.99); }

.wp-payment-block {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
  background: var(--bg);
  border-radius: var(--r-card);
  margin: .5rem 0 1rem;
  font-size: var(--fs-body,1rem);
}
.wp-pay-icon { font-size: 1.2rem; }

.wp-btn {
  display: block; width: 100%;
  padding: .9rem;
  border: 0; border-radius: var(--r-control);
  font-size: 1rem; font-weight: 600;
  text-align: center;
}
.wp-btn-lg { padding: 1rem; font-size: 1.05rem; }
.wp-btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.wp-btn-primary:disabled { background: #d1d5db; color: #6b7280; }
.wp-btn-secondary {
  background: var(--card-bg);
  color: var(--brand-dark);
  border: 1.5px solid var(--brand);
}
/* Sin esto, PARA LLEVAR deshabilitado seguía pintado en rojo de marca y
   parecía pulsable (el cliente lo tocaba y "no pasaba nada"). */
.wp-btn-secondary:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #d1d5db;
}
.wp-err {
  margin: .75rem 0 0; padding: .65rem;
  background: #fef2f2; color: var(--warn);
  border-radius: 8px; font-size: var(--fs-body,1rem);
}

/* ---------- RESERVADO / CONFIRMED / EXPIRED ---------- */
.wp-reserved { text-align: center; }
.wp-reserved-tag {
  display: inline-block;
  background: var(--reserved); color: #fff;
  font-weight: 700; letter-spacing: .08em;
  padding: 6px 16px; border-radius: var(--r-pill);
  margin-bottom: 1rem;
  font-size: var(--fs-sec,.875rem);
}
.wp-tn { color: var(--brand-dark); font-weight: 700; }
.wp-reserved-sub { color: var(--text); margin: .75rem 0 1rem; }
.wp-steps {
  text-align: left; max-width: 380px; margin: 0 auto 1.25rem;
  list-style: none; padding: 0;
  font-size: var(--fs-body,1rem);
}
.wp-steps li {
  padding: .4rem 0;
  border-bottom: 1px dashed var(--border);
}
.wp-steps li:last-child { border: 0; }
.wp-wa-btn {
  display: block;
  background: var(--accent-wa);
  color: #fff;
  text-decoration: none;
  font-size: 1.15rem; font-weight: 700;
  padding: 1.1rem;
  border-radius: var(--r-panel);
  box-shadow: 0 4px 14px rgba(37,211,102,.4);
  margin: 1rem 0;
  animation: wppulse 1.6s infinite;
}
/* Ahora es un <button> (confirma contra el servidor), no un <a> a wa.me:
   necesita ancho completo, sin borde y el estado deshabilitado mientras
   la petición está en vuelo. */
.wp-wa-btn { width: 100%; border: 0; font-family: inherit; cursor: pointer; }
.wp-wa-btn:disabled {
  background: #d1d5db; color: #6b7280;
  box-shadow: none; animation: none; cursor: default;
}
/* Salida secundaria por si algo se atasca: contactar a la tienda. */
.wp-reserved-help {
  display: block; margin-top: .9rem;
  font-size: var(--fs-sec,.875rem); color: var(--accent-wa-dark);
}
@keyframes wppulse {
  0%   { box-shadow: 0 4px 14px rgba(37,211,102,.4); }
  50%  { box-shadow: 0 4px 22px rgba(37,211,102,.7); }
  100% { box-shadow: 0 4px 14px rgba(37,211,102,.4); }
}
.wp-countdown { margin: 1rem 0 .5rem; }
.wp-countdown-time {
  display: block;
  font-size: 2.4rem; font-weight: 700; color: var(--brand-dark);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* Sustituye al contador cuando éste llega a cero. Deliberadamente
   tranquilo (no rojo, no alarma): el pedido sigue vivo y el botón de
   confirmar sigue justo encima. */
.wp-lapsed-note {
  margin: 1rem 0 .5rem;
  color: var(--text-muted);
  font-size: var(--fs-body,1rem); line-height: 1.45;
}
/* Tienda sin carta para la web: mensaje explícito en vez de página en
   blanco bajo las pestañas de categoría. */
.wp-catalog-empty { text-align: center; padding: 2.4rem 1.2rem; }
.wp-catalog-empty-ico { font-size: 3rem; }
.wp-catalog-empty-msg {
  margin: 1rem 0 1.4rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Salida de la pantalla de seguimiento (era la única vista sin salida).
   Separada por una línea para que no se lea como parte del estado del
   pedido: es la invitación a volver a pedir. */
.wp-track-exit {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.wp-track-exit-cta { display: block; text-decoration: none; }
.wp-track-exit-home {
  display: inline-block;
  margin-top: .8rem;
  font-size: var(--fs-sec,.875rem);
  color: var(--text-muted);
}

/* Aviso "no estamos tomando pedidos ahora" (caja sin abrir / día cerrado /
   pasó la hora límite). Se pinta arriba de menú, carrito y checkout con el
   motivo que redacta el servidor; los botones de pedir quedan apagados. */
.wp-closed-banner {
  /* Pegado bajo el header (que es sticky top:0, ~3.4rem de alto): en el menú
     largo el aviso quedaba fuera de pantalla al primer scroll y el cliente
     sólo se enteraba del cierre al llegar al carrito. z-index por debajo del
     header para que éste lo tape al hacer scroll, no al revés. */
  position: sticky;
  top: var(--wp-header-h, 3.4rem);
  z-index: 90;
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 .9rem;
  padding: .85rem .9rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 4px solid #f97316;
  border-radius: var(--r-card);
  font-size: var(--fs-body,1rem);
  line-height: 1.4;
  color: #7c2d12;
}
.wp-closed-banner-ico { font-size: 1.05rem; line-height: 1.25; }
.wp-closed-banner-txt { flex: 1; }

.wp-warn-block {
  margin-top: 1rem;
  padding: .8rem;
  background: #fff7ed;
  border: 1px solid #fde6c6;
  border-radius: var(--r-card);
  font-size: var(--fs-body,1rem);
  color: #92400e;
}

.wp-confirmed { text-align: center; }
.wp-check { font-size: 4rem; }
.wp-confirmed h2 { color: #15803d; margin: .5rem 0; }
.wp-confirmed-tn { font-size: 1.5rem; font-weight: 700; color: var(--brand-dark); margin: .25rem 0; }
.wp-confirmed-msg { margin: .75rem 0; }
.wp-confirmed-total { margin: .25rem 0 1rem; }

.wp-expired { text-align: center; }
.wp-clock { font-size: 4rem; }

/* ---------- floating cart bubble ---------- */
.wp-cart-fab {
  position: fixed; bottom: 1rem; left: 1rem; right: 1rem;
  max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: .75rem;
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: .9rem 1.1rem;
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-lg);
  font-size: 1rem; font-weight: 600;
  z-index: 50;
}
.wp-cart-fab[hidden] { display: none; }
.wp-cart-fab-count {
  background: rgba(255,255,255,.25);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-weight: 700;
}
.wp-cart-fab-label { flex: 1; text-align: left; }
.wp-cart-fab-total { font-weight: 700; }

.wp-error {
  background: #fef2f2; color: var(--warn);
  padding: 1rem; border-radius: var(--radius);
  text-align: center;
}
.wp-empty {
  text-align: center; color: var(--text-muted); padding: 2rem;
  grid-column: 1 / -1;
}

/* ── step8 P3 — provider selection + cobro ───────────────────────── */
.wp-providers-block { margin-top: .8rem; }
.wp-prov-head {
  display: block; font-size: var(--fs-sec,.875rem); font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: .4rem;
}
.wp-prov-hint { color: var(--text-muted); font-size: var(--fs-body,1rem); padding: .4rem 0; }
.wp-prov-card {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .7rem .8rem; margin-bottom: .5rem;
  border: 1px solid #d7d7d7; border-radius: var(--r-control); background: #fff;
  cursor: pointer; text-align: left; transition: border-color .12s, background .12s;
}
.wp-prov-card.is-selected { border-color: #1a8f4c; background: #eafaf0; }
.wp-prov-card.is-down { opacity: .55; cursor: not-allowed; background: #f6f6f6; }
.wp-prov-emoji { font-size: 1.4rem; line-height: 1; }
.wp-prov-name { font-weight: 700; flex: 1; }
.wp-prov-eta { color: var(--text-muted); }
.wp-prov-fee { font-weight: 700; }
/* Single delivery line (customer doesn't pick a courier) */
.wp-delivery-single {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .7rem .8rem; margin-bottom: .5rem;
  border: 1px solid #d7d7d7; border-radius: var(--r-control); background: #fafafa;
}
.wp-prov-na { color: var(--text-muted); font-style: italic; font-size: var(--fs-sec,.875rem); }
.wp-prov-tag { color: var(--text-muted); font-weight: 400; }

.wp-cobro-block {
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #ececec;
}
.wp-cobro-label {
  display: block; font-size: var(--fs-sec,.875rem); font-weight: 700; margin-bottom: .4rem;
}
.wp-cobro-chips { display: flex; gap: .5rem; }
.wp-cobro-chip {
  flex: 1; padding: .6rem; border: 1px solid #d7d7d7; border-radius: var(--r-card);
  background: #fff; cursor: pointer; font-weight: 600;
}
.wp-cobro-chip.is-on { border-color: #1a8f4c; background: #eafaf0; color: #136b39; }
.wp-cash-denom {
  margin-top: .5rem; width: 100%; padding: .55rem; border-radius: var(--r-card);
  border: 1px solid #d7d7d7; background: #fff;
}

/* ── Código de descuento (entrada manual) ─────────────────────── */
.wp-code-row { display: flex; gap: .5rem; align-items: center; }
#wp-code-input {
  flex: 1; min-width: 0; padding: .6rem .7rem; border-radius: var(--r-card);
  border: 1px solid #d7d7d7; background: #fff; font-size: var(--fs-body,1rem);
  text-transform: uppercase;
}
.wp-code-apply {
  background: #f0a000; color: #fff; border: 0; padding: .6rem 1rem;
  border-radius: var(--r-pill); font-size: var(--fs-body,1rem); font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.wp-coupon-applied {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; background: #eafaf0; border: 1px solid #bfe9cf;
  border-radius: var(--r-card); padding: .55rem .7rem; font-size: var(--fs-body,1rem); color: #136b39;
}
.wp-code-remove {
  background: none; border: 0; color: var(--text-muted);
  font-size: var(--fs-sec,.875rem); text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.wp-code-cash, .wp-cobro-cashnote {
  display: block; margin-top: .4rem; font-size: var(--fs-sec,.875rem); color: #b45309; font-weight: 600;
}
.wp-code-msg { display: block; margin-top: .4rem; font-size: var(--fs-sec,.875rem); color: #b91c1c; }
.wp-coupons-block.is-muted { opacity: .65; }

/* ── Canje de puntos 福分 · La Ñapa ────────────────────────────── */
.wp-redeem-block {
  margin: 14px 0; padding: 14px 16px; border-radius: var(--r-box);
  background: linear-gradient(180deg, #fff7e6 0%, #fdeecb 100%);
  border: 1.5px solid #f0c15a;
}
.wp-redeem-block.is-muted { opacity: .7; }
.wp-redeem-title {
  margin: 0 0 .35rem; font-weight: 800; font-size: 1rem; color: #8a5a00;
}
.wp-redeem-bal { font-size: var(--fs-sec,.875rem); color: #7a5200; margin-bottom: .6rem; }
.wp-redeem-bal b { font-size: 1.05rem; color: #8a5a00; }
.wp-redeem-row { display: flex; gap: .5rem; align-items: center; }
#wp-redeem-input {
  flex: 1; min-width: 0; padding: .6rem .7rem; border-radius: var(--r-card);
  border: 1px solid #e0b455; background: #fff; font-size: var(--fs-body,1rem);
  -moz-appearance: textfield;
}
#wp-redeem-input::-webkit-outer-spin-button,
#wp-redeem-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wp-redeem-apply {
  background: #e08a00; color: #fff; border: 0; padding: .6rem 1.1rem;
  border-radius: var(--r-pill); font-size: var(--fs-body,1rem); font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.wp-redeem-foot { margin-top: .55rem; }
.wp-redeem-max {
  background: #fff; color: #a15c00; border: 1.5px solid #e0b455;
  border-radius: var(--r-pill); padding: .4rem .9rem; font-size: var(--fs-sec,.875rem);
  font-weight: 700; cursor: pointer; width: 100%;
}
.wp-redeem-max:active { background: #fbe9c2; }
.wp-redeem-hint {
  display: block; margin-top: .5rem; font-size: var(--fs-sec,.875rem);
  color: #9a6a1a; line-height: 1.35;
}
.wp-redeem-muted {
  display: block; margin-top: .3rem; font-size: var(--fs-sec,.875rem); color: #9a6a1a;
}
/* Por qué NO se aplicó lo que escribió (mínimo por transacción §3.3). En rojo
   y encima de la letra chica: es una respuesta a lo que acaba de hacer, no una
   condición más de las de abajo. */
.wp-redeem-msg {
  display: block; margin-top: .5rem; font-size: var(--fs-sec,.875rem); font-weight: 700;
  color: #b42318; line-height: 1.35;
}
.wp-redeem-block.is-applied {
  background: #eafaf0; border-color: #bfe9cf;
}
.wp-redeem-applied {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; font-size: var(--fs-body,1rem); color: #136b39; font-weight: 600;
}
.wp-redeem-remove {
  background: none; border: 0; color: #136b39; font-size: var(--fs-sec,.875rem);
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.wp-cobro-chip.is-disabled {
  opacity: .45; background: #f1f1f1; color: #9ca3af; cursor: not-allowed;
  border-color: #e5e7eb;
}

/* ── Aviso de entrega (plataforma externa / portería) ─────────── */
.wp-delivery-notice {
  margin: .75rem 0; padding: .7rem .85rem; border-radius: var(--r-control);
  background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12;
  font-size: var(--fs-body,1rem); line-height: 1.4;
}

/* ═══════════════ C2 — live delivery tracking ═══════════════════ */
.wp-tracking { text-align: left; }

/* Tier-1 arrival alert banner (page-open). Sits at the top of the
   tracking view; the strong variant (arrived / 2-min) is red + pulses. */
.wp-track-alert {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .85rem 1rem; border-radius: var(--r-panel); margin-bottom: 1rem;
  box-shadow: var(--shadow-lg);
}
.wp-track-alert.is-soft {
  background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12;
}
.wp-track-alert.is-strong {
  background: linear-gradient(135deg, #d62828, #a81f1f); color: #fff;
  animation: wptrackpulse 1.2s infinite;
}
@keyframes wptrackpulse {
  0%   { box-shadow: 0 6px 18px rgba(214,40,40,.45); }
  50%  { box-shadow: 0 6px 26px rgba(214,40,40,.85); }
  100% { box-shadow: 0 6px 18px rgba(214,40,40,.45); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-track-alert.is-strong { animation: none; }
}
.wp-track-alert-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wp-track-alert-txt strong { font-size: 1rem; }
.wp-track-alert-txt span { font-size: var(--fs-sec,.875rem); opacity: .95; }
.wp-track-alert.is-strong .wp-track-alert-txt span { color: #ffe9e0; }
.wp-track-alert-x {
  flex: none; background: transparent; border: 0; color: inherit;
  font-size: 1.4rem; line-height: 1; opacity: .8; padding: 0 .2rem;
}

/* ETA header */
.wp-track-head { margin-bottom: 1rem; }
.wp-track-head-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.wp-track-head-top h2 { font-size: 1.2rem; font-weight: 700; }
.wp-track-eta { margin-top: .35rem; font-size: 1rem; color: var(--text-muted); }
.wp-track-eta-label { color: var(--text-muted); }
.wp-track-eta-min { color: var(--brand-dark); font-size: 1.35rem; }
.wp-track-eta-soft { color: var(--text-muted); font-weight: 600; }
.wp-track-eta-arrived { color: var(--brand-dark); font-weight: 700; }
.wp-track-eta-done { color: #15803d; font-weight: 700; }
.wp-track-eta-cancel { color: var(--warn); font-weight: 700; }

/* Map host — Google map, provider iframe, or the "soon" note */
.wp-track-map-host { margin-bottom: 1.1rem; }
.wp-track-gmap, .wp-track-iframe {
  width: 100%; height: 240px; border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* El tracker embebido del proveedor trae mapa + hoja de estado (el panel
   ocupa ~70% de su alto), así que 240px aplasta el mapa a una tira. Dale
   alto real para que el mapa se vea. */
.wp-track-iframe { height: min(70vh, 520px); }
.wp-track-map-hint {
  margin-top: .4rem; font-size: var(--fs-sec,.875rem); color: var(--text-muted); text-align: center;
}
.wp-track-map-none {
  padding: 1.1rem; border-radius: var(--radius);
  background: #f1f5f9; border: 1px dashed #cbd5e1;
  color: var(--text-muted); font-size: var(--fs-body,1rem); text-align: center;
}

/* 6-step vertical timeline */
.wp-track-steps {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  position: relative;
}
.wp-track-step {
  position: relative; display: flex; align-items: flex-start; gap: .75rem;
  padding: 0 0 1.1rem .2rem;
}
.wp-track-step:last-child { padding-bottom: 0; }
/* connector line between dots */
.wp-track-step::before {
  content: ""; position: absolute; left: 8px; top: 18px; bottom: -2px;
  width: 2px; background: var(--border);
}
.wp-track-step:last-child::before { display: none; }
.wp-track-step.is-done::before { background: #15803d; }
.wp-track-dot {
  flex: none; width: 18px; height: 18px; border-radius: var(--r-dot);
  background: #fff; border: 2px solid var(--border); margin-top: 1px; z-index: 1;
}
.wp-track-step.is-done .wp-track-dot { background: #15803d; border-color: #15803d; }
.wp-track-step.is-current .wp-track-dot {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(214,40,40,.2);
  animation: wpdotpulse 1.4s infinite;
}
@keyframes wpdotpulse {
  0%   { box-shadow: 0 0 0 3px rgba(214,40,40,.25); }
  50%  { box-shadow: 0 0 0 7px rgba(214,40,40,.10); }
  100% { box-shadow: 0 0 0 3px rgba(214,40,40,.25); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-track-step.is-current .wp-track-dot { animation: none; }
}
.wp-track-step-body { display: flex; flex-direction: column; gap: 1px; }
.wp-track-step-name { font-size: var(--fs-body,1rem); color: var(--text-muted); }
.wp-track-step.is-done .wp-track-step-name { color: var(--text); }
.wp-track-step.is-current .wp-track-step-name { color: var(--brand-dark); font-weight: 700; }
.wp-track-step.is-cancelled .wp-track-step-name { color: #cbd5e1; text-decoration: line-through; }
.wp-track-time { font-size: var(--fs-sec,.875rem); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Courier card */
.wp-track-courier {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin-bottom: 1rem;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.wp-track-courier-avatar { font-size: 1.8rem; flex: none; }
.wp-track-courier-info { flex: 1; display: flex; flex-direction: column; min-width: 120px; }
.wp-track-courier-info small { color: var(--text-muted); font-size: var(--fs-micro,.75rem); text-transform: uppercase; letter-spacing: .04em; }
.wp-track-courier-name { font-weight: 700; font-size: 1rem; }
.wp-track-courier-actions { display: flex; gap: .5rem; }
.wp-track-call, .wp-track-wa {
  text-decoration: none; font-weight: 700; font-size: var(--fs-body,1rem);
  padding: .5rem .85rem; border-radius: var(--r-pill);
}
.wp-track-call { background: #eef2ff; color: #3730a3; }
.wp-track-wa { background: #e7f9ef; color: var(--accent-wa-dark); }

.wp-track-foot { text-align: center; margin-top: .5rem; }

/* Web Push opt-in (C2-②) */
.wp-push-optin {
  display: block; width: 100%; text-align: center;
  margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--r-control);
  font-size: var(--fs-body,1rem); font-weight: 600; line-height: 1.4;
}
.wp-push-btn {
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  box-shadow: var(--shadow);
}
.wp-push-btn:disabled { opacity: .6; }
.wp-push-optin.is-on { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.wp-push-optin.is-off { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-weight: 500; }

/* iOS "add to home screen" nudge */
.wp-track-ios {
  margin-top: 1.1rem; padding: .75rem .9rem;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--r-control);
  color: #1e40af; font-size: var(--fs-sec,.875rem); line-height: 1.45;
}

/* ── Regalo de bienvenida 福分 (1B) ─────────────────────────────────────── */
.wp-gift-block {
  margin: 1rem 0;
  padding: .9rem;
  border: 1.5px solid var(--reserved);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fffaf0 0%, #fff6e0 100%);
  box-shadow: var(--shadow);
}
.wp-gift-title {
  margin: 0 0 .2rem; font-weight: 700; color: #8a5a00;
}
.wp-gift-hint {
  margin: 0 0 .7rem; font-size: var(--fs-sec,.875rem); color: var(--text-muted);
}
.wp-gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .6rem;
}
.wp-gift-card {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .55rem .4rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-control);
  background: var(--card-bg);
  text-align: center;
  transition: transform .06s ease, border-color .1s ease;
}
.wp-gift-card:active { transform: scale(.98); }
.wp-gift-card.is-picked {
  border-color: var(--reserved);
  box-shadow: 0 0 0 2px rgba(240,160,0,.25);
}
.wp-gift-img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-card);
}
.wp-gift-name {
  font-size: var(--fs-sec,.875rem); font-weight: 600; line-height: 1.15;
}
.wp-gift-cta {
  font-size: var(--fs-micro,.75rem); font-weight: 700; color: #8a5a00;
}
.wp-gift-card.is-picked .wp-gift-cta { color: var(--accent-wa-dark); }
.wp-gift-clear {
  margin-top: .6rem; padding: .3rem .7rem;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: transparent; color: var(--text-muted); font-size: var(--fs-sec,.875rem);
}

/* ---- Caja 福分 · La Ñapa en el carrito (gana / regístrate) ---- */
.wp-fufen-box { border-radius: var(--r-box); padding: 15px 16px; margin: 14px 0; text-align: center; }
.wp-fufen-win {
  background: linear-gradient(135deg, #FBE7B8 0%, #F3C969 55%, #E0A93C 100%);
  border: 1px solid #E0A93C; color: #5a3a12; box-shadow: 0 6px 18px rgba(200,140,40,.28);
}
.wp-fufen-emoji { font-size: 26px; line-height: 1; }
.wp-fufen-title { font-size: 16px; font-weight: 800; margin-top: 2px; letter-spacing: .3px; }
.wp-fufen-earn { font-size: var(--fs-body,1rem); margin-top: 4px; }
.wp-fufen-earn b { font-size: 20px; color: #8a4b00; }
/* Saldo acumulado: el número grande de la caja — el pedido en curso es el dato
   secundario. Separado por una línea tenue del mismo tono dorado. */
.wp-fufen-bal {
  font-size: 14px; margin-top: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(90,58,18,.18);
}
.wp-fufen-bal b { display: block; font-size: 30px; font-weight: 800; color: #8a4b00; line-height: 1.15; }
.wp-fufen-win .wp-fufen-sub {
  font-size: var(--fs-micro,.75rem); margin-top: 5px; opacity: .8; text-transform: uppercase; letter-spacing: .6px;
}
.wp-fufen-tap { cursor: pointer; }
.wp-fufen-tap:active { transform: scale(.985); }
.wp-fufen-tap .wp-fufen-sub { opacity: .95; font-weight: 700; }
.wp-fufen-tap:focus-visible { outline: 2px solid #8a4b00; outline-offset: 2px; }
.wp-fufen-guest { background: #FBF4E6; border: 1.5px dashed #E0A93C; color: #6a4a1a; }
.wp-fufen-guest .wp-fufen-earn { font-weight: 700; }
.wp-fufen-guest .wp-fufen-earn b { color: #A6641C; }
.wp-fufen-guest .wp-fufen-sub { font-size: var(--fs-sec,.875rem); margin: 6px 0 11px; line-height: 1.5; }
.wp-fufen-cta {
  border: none; cursor: pointer; font-weight: 700; font-size: var(--fs-body,1rem); color: #fff;
  padding: 10px 22px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #C4802B, #A15E18); box-shadow: 0 4px 12px rgba(160,90,24,.3);
}
/* teléfono bloqueado (socio con sesión) */
.wp-locked { background: #f3f4f6 !important; color: #6b7280 !important; cursor: not-allowed; }
.wp-locked-hint { color: #A6641C !important; font-weight: 600; }

/* ---- seguimiento: vista vacía + página compartida + botón compartir ---- */
.wp-tracking-empty { text-align: center; }
.wp-track-empty-map { font-size: 46px; margin: 18px 0 6px; opacity: .5; }
.wp-track-empty-none { font-size: var(--fs-body,1rem); font-weight: 700; color: #241d16; margin: 6px 0; }
.wp-track-empty-lead {
  font-size: var(--fs-body,1rem); color: #6b7280; line-height: 1.55; margin: 0 auto 18px; max-width: 320px;
}
.wp-track-shared {
  background: #eef5ff; border: 1px solid #cfe0ff; border-radius: var(--r-control);
  padding: 10px 13px; margin-bottom: 12px;
}
.wp-track-shared-name { font-size: var(--fs-body,1rem); color: #1e3a5f; }
.wp-track-shared-addr { font-size: var(--fs-sec,.875rem); color: #40566e; margin-top: 3px; line-height: 1.45; }
.wp-track-share-btn { margin-top: 12px; }

/* Cancelar: acción destructiva y poco frecuente. Se ve discreta a propósito —
   compartir el seguimiento es lo que el cliente hace a menudo, cancelar es la
   excepción y no debe competir visualmente con ella ni invitar al toque
   accidental. Color de aviso solo en el texto, sin fondo rojo de alarma. */
.wp-track-cancel-btn {
  margin-top: 8px; background: transparent; border: 1px solid #e2d9d5;
  color: #9a6b62; font-weight: 600; font-size: var(--fs-sec,.875rem);
}
.wp-track-cancel-btn:hover:not(:disabled) { background: #fdf3f1; border-color: #d9bfb9; }
.wp-track-cancel-btn:disabled { opacity: .5; }

/* ---- seguimiento para llevar (takeaway): nota de recogida ---- */
.wp-track-ta-note {
  background: #fff4e6; border: 1px solid #f0d9b5; border-radius: var(--r-control);
  padding: 11px 14px; margin: 4px 0 14px; font-size: var(--fs-body,1rem); font-weight: 600;
  color: #8a4b00; text-align: center;
}

/* Enlace para cambiar de modo (domicilio ↔ para llevar).
   Deliberadamente pequeño: la portada ya separó las dos entradas, así que aquí
   el modo está decidido. Quien cambia de idea lo busca y lo encuentra; a quien
   no, no le ofrece rehacer una decisión que ya tomó. */
.wp-mode-switch {
    display: block;
    width: 100%;
    margin: 10px 0 2px;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--wp-muted, #777);
    font-size: var(--fs-sec,.875rem);
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 44px;
}

/* ---- El sorteo: reutiliza la caja 福分, no inventa otra ----
   La tarjeta es `.wp-fufen-box.wp-fufen-win` tal cual — mismo dorado, mismo
   borde, misma sombra. Aquí sólo se añade lo que esa caja no tenía: un botón
   y la línea que aclara que esto no es una apuesta.
   Que el sorteo se vea "como Ñapas" no es estética: es lo que le dice al
   cliente, sin leer, que los puntos que salgan son los mismos que ya conoce. */
.wp-sorteo-nota {
  font-size: var(--fs-body,1rem); line-height: 1.4; margin-top: 8px;
  color: #5a3a12; font-weight: 600;
}
.wp-sorteo-btn {
  display: inline-block; margin-top: 11px; padding: 12px 24px; min-height: 46px;
  border: 0; border-radius: 11px; background: #8a4b00; color: #fff;
  font-size: var(--fs-body,1rem); font-weight: 800; text-decoration: none; line-height: 22px;
}
.wp-sorteo-btn:active { transform: scale(.985); }
.wp-sorteo-btn:focus-visible { outline: 2px solid #5a3a12; outline-offset: 2px; }

/* «Hoy no hay» — el plato se queda a la vista, apagado. Quitarlo de la carta
   sería más fácil, pero entonces el cliente cree que ya no lo hacemos. */
.wp-card-agotado { position: relative; opacity: .45; filter: grayscale(1); pointer-events: none; }
.wp-agotado-sello {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  background: var(--text-muted); color: #fff;
  font-size: var(--fs-micro,.75rem); font-weight: 700; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 100px;
}

/* Opción agotada dentro del combo: se ve, no se elige. */
.wp-opt-agotado { opacity: .45; filter: grayscale(1); }