/* ============================================================================
   Menú Digital — REDISEÑO 25-sep-2026 (piel unificada con la app de clientes)
   Render aprobado por el dueño: propuesta-unificar/menudigital.html.
   Es SÓLO PIEL: se carga después de styles.css y sobrescribe. Mismos ids, mismos
   onclick, mismo orden de flujo (menú → personalizar → tu pedido → finalizar).
   Referencia de estilo: /css/rediseno.css de la app (tarjeta oscura café,
   radios 18-22, píldora de cantidad, botón naranja #FF9500 con texto #2B1700).
   Para volver al look anterior basta quitar el <link> de este archivo.
   ========================================================================== */

:root {
  --r-naranja: #FF9500;
  --r-naranja-osc: #E07B00;
  --r-naranja-txt: #8A4B00;
  --r-sobre-naranja: #2B1700;
  --r-fondo: #F2F2F7;
  --r-tinta: #1C1C1E;
  --r-gris: #636366;
  --r-linea: #E5E5EA;
  --r-seg: #E4E4EA;
  --r-verde: #16A34A;
  --r-verde-cl: #DCFCE7;
  --r-azul: #2563EB;
  --r-azul-cl: #DBEAFE;
  --r-oscura: radial-gradient(120% 90% at 100% 0%, #6B3A0B 0%, rgba(107,58,11,0) 60%),
              linear-gradient(160deg, #3A1F06, #1E1003);
  --r-sombra: 0 1px 3px rgba(0,0,0,.06);
  --bg: var(--r-fondo);
}
html, body { background: var(--r-fondo); color: var(--r-tinta); }

/* ── Segmento gris (Domicilio / Recoger) en todas partes ─────────────────── */
.order-toggle {
  display: flex; width: 100%; max-width: none; gap: 0;
  background: var(--r-seg); border-radius: 12px; padding: 3px;
}
.order-toggle button {
  flex: 1; border-radius: 10px; padding: 9px 8px; min-height: 40px;
  font-size: 14px; font-weight: 700; color: var(--r-gris);
}
.order-toggle button.active {
  background: #fff; color: var(--r-tinta); box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ══ 1 · MENÚ ════════════════════════════════════════════════════════════ */

/* Portada más chica; la tarjeta del negocio se monta encima. */
.hero-cover { height: 190px; }
.hero-cover.has-photo::after {
  background: linear-gradient(to bottom, rgba(0,0,0,.40), rgba(0,0,0,0) 45%, rgba(0,0,0,.15));
}
@media (min-width: 720px) { .hero-cover { height: 230px; } }

.app-header {
  background: transparent; box-shadow: none;
  max-width: 560px; margin: -84px auto 0; padding: 0 16px;
}
/* Tarjeta blanca del negocio: logo a la izquierda, nombre y estado a la derecha. */
.brand-block {
  display: grid; grid-template-columns: 54px 1fr; column-gap: 12px;
  align-items: center; text-align: left;
  background: #fff; border-radius: 20px; padding: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
.brand-block > * { grid-column: 2; }
.brand-logo {
  grid-column: 1; grid-row: 1 / span 4; align-self: center;
  width: 54px; height: 54px; margin: 0; border: 0; border-radius: 16px;
  box-shadow: none; background: #fff;
}
.brand-name { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
.brand-block [data-plataforma]:empty { display: none; }
.brand-block [data-plataforma] { margin-top: 2px !important; }
.brand-hours { justify-content: flex-start; margin-top: 3px; }
.brand-sub { font-size: 13px; margin-top: 2px; color: var(--r-gris); }
.brand-sub b { color: var(--r-naranja-txt); }
.app-header > .order-toggle { margin-top: 10px; }

/* Buscador y categorías: sobre el gris, pegados arriba al bajar. */
.catbar-wrap {
  background: var(--r-fondo); border: 0; box-shadow: none;
  max-width: 560px; margin: 0 auto;
}
.searchbar { padding: 10px 16px 0; }
.searchbar input {
  height: 44px; padding: 0 14px 0 40px; border-radius: 14px; border: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 18px no-repeat;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: 15px;
}
.searchbar input:focus { background-color: #fff; box-shadow: 0 0 0 2px var(--r-naranja); }
.catbar { padding: 10px 16px; }
.catbar button {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: var(--r-tinta); font-weight: 700; font-size: 14.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.catbar button.active { background: var(--r-tinta); color: #fff; }

main .container { max-width: 560px; padding: 0 16px; }
@media (min-width: 720px) { main .container { max-width: 1080px; } }
.cat-section { padding: 4px 0 6px; }
.cat-title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin: 12px 2px 8px; }
.product-grid { gap: 10px; }

/* Tarjeta blanca con foto real y «+» naranja. */
.product-card {
  border-radius: 20px; padding: 12px; box-shadow: var(--r-sombra); align-items: center;
}
.pc-body { align-self: stretch; }
.pc-name { font-size: 15.5px; font-weight: 700; }
.pc-desc { font-size: 12.5px; margin-top: 2px; color: var(--r-gris); }
.pc-price { color: var(--r-tinta); font-size: 15.5px; padding-top: 6px; }
.pc-img { width: 92px; height: 92px; border-radius: 14px; }
.pc-add {
  right: -6px; bottom: -6px; width: 34px; height: 34px;
  border: 3px solid #fff; box-shadow: 0 4px 10px rgba(255,149,0,.35);
  color: var(--r-sobre-naranja); font-weight: 800;
}

/* Lo primero del menú (la primera promo) va en la TARJETA OSCURA: es lo que se
   quiere vender. Sólo piel: sigue siendo la misma tarjeta con el mismo toque. */
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) {
  background: var(--r-oscura); color: #fff; border-radius: 22px; padding: 14px;
  overflow: hidden;
}
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-media { order: -1; }
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-img {
  width: 112px; height: 112px; border-radius: 16px;
}
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-body::before {
  content: "Recomendado"; font-size: 11px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: #FFD08A; margin-bottom: 3px;
}
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-name { font-size: 18px; font-weight: 800; line-height: 1.2; }
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-desc { color: #E3D3BE; }
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-price { color: #fff; font-size: 20px; }
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-price .from { color: #E3D3BE; }
.cat-section:first-of-type .product-card:first-child:not(.is-agotado) .pc-add { border-color: #2A1604; }

/* Barra del pedido: naranja, fija, con el número en círculo. */
.cart-fab { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
.cart-fab-inner {
  max-width: 528px; min-height: 58px; border-radius: 18px; padding: 0 16px;
  box-shadow: 0 10px 24px rgba(255,149,0,.4);
}
.cart-fab-inner .cf-left { gap: 12px; font-size: 16px; font-weight: 800; }
.cart-fab-inner .cf-count {
  width: 30px; height: 30px; margin: 0; padding: 0; border-radius: 50%;
  background: var(--r-sobre-naranja); color: var(--r-naranja);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.cart-fab-inner .cf-total { font-size: 17px; font-weight: 800; }
.cart-fab-inner.is-empty { background: var(--r-seg); color: #8A8A8E; box-shadow: var(--r-sombra); }
.cart-fab-inner.is-closed { padding: 10px 16px; }
@media (min-width: 720px) { .cart-fab-inner { max-width: 1048px; } }

/* ══ Hojas en general ════════════════════════════════════════════════════ */
.sheet { background: var(--r-fondo); border-radius: 26px 26px 0 0; }
.sheet-head { background: var(--r-fondo); border-bottom: 0; padding: 16px 16px 8px; }
.sheet-close {
  width: 36px; height: 36px; background: var(--r-seg); color: var(--r-gris);
  font-size: 17px; font-weight: 700;
}
.sheet-foot {
  background: var(--r-fondo); border-top: 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
}
.btn-primary {
  min-height: 54px; border-radius: 16px; font-size: 16px; font-weight: 800;
  background: var(--r-naranja); color: var(--r-sobre-naranja);
  box-shadow: 0 8px 20px rgba(255,149,0,.3);
}
.btn-primary.locked { background: #d3d3d8; color: #6b6b70; box-shadow: none; }

/* ══ 2 · PERSONALIZAR ════════════════════════════════════════════════════ */
#product-overlay .sheet { position: relative; }
/* La cabecera flota sobre la foto: sólo la ✕ (el título lo dice el nombre). */
#product-overlay .sheet-head {
  position: absolute; top: 0; right: 0; left: auto; background: transparent;
  padding: 14px; z-index: 3;
}
#product-overlay .sheet-head h3 { display: none; }
#product-overlay .sheet-close { background: rgba(0,0,0,.45); color: #fff; }
#product-overlay .sheet-body { padding: 0 16px 16px; }
/* Foto a lo ancho, pegada arriba. */
.pm-hero {
  width: calc(100% + 32px); max-width: none; margin: 0 -16px;
  height: 238px; border-radius: 0;
}
.pm-name { font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; margin: 16px 0 4px; }
.pm-desc { font-size: 13.5px; color: var(--r-gris); }
.pm-incluye { background: transparent; border: 0; padding: 0; margin-top: 6px; font-size: 13.5px; color: var(--r-gris); }
.pm-incluye b { font-weight: 600; }

/* Cada grupo es una tarjeta blanca; la regla va en píldora gris (sin rojo). */
.opt-group {
  background: #fff; border-radius: 20px; padding: 12px 14px; margin-top: 12px;
  box-shadow: var(--r-sombra);
}
.opt-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 16px; font-weight: 700; margin-bottom: 10px; line-height: 1.25;
}
.tag-req, .tag-opt, .tag-hint {
  flex: none; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: #F2F2F7; color: var(--r-gris); white-space: nowrap;
}
.tag-req::first-letter, .tag-opt::first-letter, .tag-hint::first-letter { text-transform: uppercase; }
.tag-hint { background: #FFF1DB; color: var(--r-naranja-txt); white-space: normal; text-align: right; }
.tag-req { display: inline-block; }
/* Falta elegir: aquí sí se avisa en rojo (lo prende el JS al tocar «Agregar»). */
.opt-group.missing { box-shadow: 0 0 0 2px #DC2626; }
.opt-group.missing .opt-title { color: #DC2626; }
.opt-group.missing .tag-req { background: #FDECEC; color: #B42318; }

/* Sabores en rejilla de 3, cuadros de 44 px; el elegido en naranja. */
.opt-group .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chip {
  min-height: 44px; border-radius: 12px; background: #F2F2F7; border: 2px solid transparent;
  padding: 4px 6px; justify-content: center; text-align: center; flex-direction: column; gap: 1px;
  font-size: 13.5px; font-weight: 700; line-height: 1.1; box-shadow: none;
}
.chip .chip-price { font-size: 11.5px; }
.chip.selected { background: #FFF8EC; border-color: var(--r-naranja); color: var(--r-naranja-txt); }
.chip.selected .chip-check { display: none; }
.extra-row { border-bottom-color: var(--r-linea); min-height: 48px; }
.extra-row.on .extra-check { color: var(--r-sobre-naranja); }
textarea.notes-in, input.text-in, select.text-in { border-radius: 12px; }
#pm-notes { background: #F2F2F7; border-color: transparent; }

/* Cantidad en píldora + «Agregar» juntos en el pie. */
#product-overlay .sheet-foot { display: flex; align-items: center; gap: 10px; }
#pm-qty-slot:empty { display: none; }
#pm-qty-slot .qty-row {
  margin: 0; gap: 0; height: 54px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
#pm-qty-slot .qty-btn {
  width: 42px; height: 54px; background: transparent; border: 0; border-radius: 999px;
  color: var(--r-naranja-osc); font-size: 20px;
}
#pm-qty-slot .qty-num { min-width: 22px; font-size: 16px; }
#pm-add-btn { flex: 1; min-width: 0; padding: 0 18px; }

/* ══ 3 · TU PEDIDO ═══════════════════════════════════════════════════════ */
#cart-overlay .sheet, #checkout-overlay .sheet {
  max-height: 100dvh; height: 100dvh; max-width: 560px; border-radius: 0;
}
@media (min-width: 720px) {
  #cart-overlay .sheet, #checkout-overlay .sheet { max-height: 94dvh; height: auto; border-radius: 26px 26px 0 0; }
}
#cart-overlay .sheet-head, #checkout-overlay .sheet-head {
  padding: calc(14px + env(safe-area-inset-top)) 16px 10px;
}
#cart-overlay .sheet-head h3 { font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
#checkout-overlay .sheet-head h3 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; }
.sheet-ottoggle {
  background: var(--r-fondo); border-bottom: 0; padding: 4px 16px 8px; align-items: stretch;
}
.ot-hint { font-size: 12.5px; }
#cart-body, #checkout-body { padding: 8px 16px 20px; }

/* Renglón del carrito: tarjeta blanca, foto, detalle en una línea, píldora. */
.ci-wrap { border-bottom: 0; border-radius: 20px; margin-bottom: 10px; box-shadow: var(--r-sombra); }
/* radio 0 adentro: la envoltura ya recorta; así no asoma el rojo del deslizar en las esquinas */
.ci-wrap { overflow: hidden; background: #fff; }
.ci-swipe { top: 2px; bottom: 2px; right: 2px; border-radius: 0 18px 18px 0; }
.cart-item { background: #fff; border-radius: 0; padding: 10px; gap: 12px; align-items: center; }
.cart-item .ci-img { width: 74px; height: 74px; border-radius: 14px; align-self: flex-start; }
.cart-item .ci-name { font-size: 15px; font-weight: 700; }
.cart-item .ci-opts {
  color: var(--r-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item .ci-bottom { margin-top: 6px; }
.ci-price { order: -1; font-size: 15px; font-weight: 800; }
.ci-qty {
  gap: 0; background: #F2F2F7; border-radius: 999px; height: 44px;
}
.ci-qty button {
  width: 36px; height: 44px; background: transparent; border-radius: 999px;
  color: var(--r-naranja-osc);
}
.ci-qty span { min-width: 18px; text-align: center; font-weight: 800; font-size: 16px; }
/* Sin bote rojo: «−» en 1 quita (y deslizar también). El botón sigue en el
   DOM por si el JS lo busca. */
.ci-qty .ci-del { display: none; }

/* Totales como una tarjeta: las filas se pintan con fondo y esquinas. */
#cart-foot .summary-row {
  background: #fff; padding: 5px 16px; font-size: 14.5px; margin: 0;
}
#cart-foot .summary-row:first-child { border-radius: 20px 20px 0 0; padding-top: 12px; }
#cart-foot .summary-row.total {
  border-radius: 0 0 20px 20px; border-top: 1px solid var(--r-linea);
  padding-top: 10px; padding-bottom: 12px; margin-top: 0; font-size: 19px;
  /* la raya del total no toca las orillas de la tarjeta */
  border-top: 0; background-image: linear-gradient(var(--r-linea), var(--r-linea));
  background-size: calc(100% - 32px) 1px; background-position: 16px 0; background-repeat: no-repeat;
}
#cart-foot .btn-primary { margin-top: 12px !important; }

/* ══ 4 · FINALIZAR PEDIDO ════════════════════════════════════════════════ */
.form-block { border-radius: 20px; padding: 4px 14px 12px; box-shadow: var(--r-sombra); margin-bottom: 12px; }
.form-block h4 {
  font-size: 12.5px; color: var(--r-gris); font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; margin: 12px 0 4px; display: flex; align-items: center; gap: 6px;
}

/* Campos como lista: rótulo a la izquierda, el dato a la derecha, raya entre. */
#checkout-body .field-row { display: block; }
#checkout-body .field {
  display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; column-gap: 10px;
  margin: 0; min-height: 50px; border-bottom: 1px solid var(--r-linea);
}
#checkout-body .field-row .field:last-child, #checkout-body .form-block > .field:last-child { border-bottom: 0; }
#checkout-body .field-row + .field { border-top: 1px solid var(--r-linea); }
#checkout-body .field > label { margin: 0; align-self: center; line-height: 48px; font-size: 13.5px; color: var(--r-gris); font-weight: 600; }
#checkout-body .field > :not(label) { grid-column: 2; }
#checkout-body .field .text-in,
#checkout-body .field .phone-in .text-in {
  border: 0; background: transparent; padding: 0; height: 48px; font-size: 15px; font-weight: 600;
  width: 100%; box-shadow: none; border-radius: 0;
}
#checkout-body .field select.text-in { color: var(--r-tinta); }
#checkout-body .phone-in { gap: 6px; }
#checkout-body .phone-in select { flex: 0 0 82px; }
#checkout-body .field-note, #checkout-body .err-msg { margin: 0 0 8px; font-size: 12px; }
#checkout-body .field.invalid label { color: #DC2626; }
#checkout-body .field.invalid .text-in, #checkout-body .field.invalid .phone-in input { background: #FFF5F5; }
/* Campos que no son lista (notas, código): caja gris. */
#checkout-body .notes-in { background: #F2F2F7; border-color: transparent; margin-top: 4px; }

/* Cómo pagas: tres tarjetas en fila; la caja de cambio / CLABE va abajo a lo ancho. */
#co-pay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
#co-pay:not(:has([data-pay="transfer"])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#co-pay > .pay-opt { order: 1; }
#co-pay > .cash-box, #co-pay > .transfer-box { order: 2; grid-column: 1 / -1; }
#co-pay .pay-opt {
  flex-direction: column; align-items: flex-start; gap: 0; min-height: 96px;
  padding: 10px; border-radius: 16px; background: #fff; border: 2px solid var(--r-linea);
  font-size: 13px; font-weight: 700; position: relative; letter-spacing: -.1px;
}
#co-pay .pay-opt.selected { border-color: var(--r-naranja); background: #FFF8EC; }
#co-pay .po-radio { display: none; }
#co-pay .po-emoji {
  width: 32px; height: 32px; border-radius: 10px; margin-bottom: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: #FFF1DB; color: var(--r-naranja-osc);
}
#co-pay [data-pay="cash"] .po-emoji { background: var(--r-verde-cl); color: var(--r-verde); }
#co-pay [data-pay="transfer"] .po-emoji { background: var(--r-azul-cl); color: var(--r-azul); }
#co-pay .po-sub { font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
#co-pay .po-fee { margin: 6px 0 0; padding: 3px 7px; font-size: 11px; }
.cash-box, .transfer-box { border-radius: 16px; }
.cash-box .cb-field { border-radius: 10px; background: #F2F2F7; border-color: transparent; }

/* Domicilios guardados (misma clase .pay-opts, lista vertical). */
#co-saved-list .pay-opt { border-radius: 16px; }

/* Código de cliente: tarjeta blanca con ícono verde, opcional y tranquila. */
.ident-box { background: #fff; border: 0; padding: 4px 0 2px; }
.ident-box .ib-head { font-size: 14.5px; }
.ident-box .ib-head .ico { width: 20px; height: 20px; color: var(--r-verde); flex: none; }
.ident-box .code-in { background: #F2F2F7; border-color: transparent; }
.btn-gps { border-radius: 12px; }
.maddr-wrap { border-radius: 16px; }

/* Pie del checkout: aviso de cerrado y botón con el total. */
.closed-note { border-radius: 12px; }

/* Rebote al saltar de categoría (25-sep): el mismo vaivén del POS y del kiosko. */
.product-card.saltada { animation: catShake .35s ease; }
@keyframes catShake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
@media (prefers-reduced-motion: reduce) {
  .product-card.saltada { animation: catShakeSuave .3s ease; }
}
@keyframes catShakeSuave { 0%,100% { transform: translateX(0) } 30% { transform: translateX(-2px) } 70% { transform: translateX(2px) } }