/* MenuFlow V10 — correcciones responsive, buscador, carrusel, loading y dock. */
:root{--mf-shadow:0 16px 44px rgba(35,22,10,.07)}
.menu-v10{overflow-x:hidden;--paper:#fffdfa;background:var(--paper)}
.menu-v10 .wrap{width:100%;max-width:1260px;margin-inline:auto}
.menu-v10 .site-header{position:sticky;top:0;z-index:25;background:#fff;box-shadow:0 5px 22px rgba(32,26,17,.04);border-color:#f2ebe2;overflow:visible}
/* Separate notification from the principal header */
.menu-v10 .status-alert{height:auto;min-height:36px;background:#fff3f1;color:#9f2926;border-bottom:1px solid #ffe2dd;font-size:12px;font-weight:600;transition:background-color .2s}
.menu-v10 .status-alert[data-state="open"]{background:#effaf3;border-color:#d5f2de;color:#147d43}
.menu-v10 .status-alert[data-state="opening_soon"]{background:#edf6ff;border-color:#d5e9ff;color:#1c65aa}
.menu-v10 .status-alert[data-state="closing_soon"]{background:#fff6e4;border-color:#ffe6ba;color:#a15d08}
.menu-v10 .status-alert-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:8px;padding-bottom:8px}
.menu-v10 .status-alert-copy,.menu-v10 .status-alert-countdown{display:flex;align-items:center;gap:9px;min-width:0}
.menu-v10 .status-alert-copy strong{font-size:12px;font-weight:900;white-space:nowrap}
.menu-v10 .status-alert-copy>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-v10 .status-alert-countdown{font-size:11px;white-space:nowrap}
.menu-v10 .status-alert-countdown strong{font-variant-numeric:tabular-nums;font-weight:900;font-size:13px}
.menu-v10 .status-pulse{display:block;width:9px;height:9px;flex:0 0 9px;background:#e33836;border-radius:100%;box-shadow:0 0 0 4px #e3383621;animation:mf-pulse 1.35s ease-in-out infinite}
.menu-v10 .status-alert[data-state="open"] .status-pulse{background:#22ad5a;box-shadow:0 0 0 4px #22ad5a1d}
.menu-v10 .status-alert[data-state="opening_soon"] .status-pulse{background:#3489ee;box-shadow:0 0 0 4px #3489ee20}
.menu-v10 .status-alert[data-state="closing_soon"] .status-pulse{background:#e9a11f;box-shadow:0 0 0 4px #e9a11f20}
@keyframes mf-pulse{0%,100%{opacity:1;box-shadow:0 0 0 4px currentColor;}50%{opacity:.55;box-shadow:0 0 0 8px transparent;}}
.menu-v10 .header-v10-grid{display:grid;grid-template-columns:minmax(200px,1fr) minmax(180px,1.15fr) auto auto;gap:20px;align-items:center;min-height:80px;height:auto;padding-block:12px}
.menu-v10 .brand{grid-column:auto;min-width:0;max-width:100%;display:flex;align-items:center;gap:12px;white-space:nowrap}
.menu-v10 .brand-logo{flex:none;width:68px;height:58px;object-fit:contain;border:0;border-radius:8px}
.menu-v10 .brand-name{font-size:18px;line-height:1.15;letter-spacing:-.6px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-v10 .brand-name strong{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-v10 .brand-name small{font-size:9px;letter-spacing:1.5px;margin-top:5px}
.menu-v10 .header-location{margin-left:0!important;display:flex!important;align-items:center;gap:9px;min-width:0;padding:4px 0}
.menu-v10 .header-location div{min-width:0;width:100%}
.menu-v10 .header-location strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.menu-v10 .header-mode-button{min-width:152px;min-height:44px;padding:10px 14px;border-radius:14px;display:flex;align-items:center;gap:8px;white-space:nowrap;margin:0!important;justify-content:center}
.menu-v10 #headerModeIcon{font-size:19px;line-height:1;flex:0 0 auto}
.menu-v10 #headerModeLabel{max-width:none!important;white-space:nowrap;overflow:visible!important;flex:0 1 auto}
.menu-v10 .modern-cart{min-width:163px;max-width:220px;display:flex;gap:10px;padding:10px 12px;box-shadow:0 9px 24px #15100c22}
.menu-v10 .modern-cart .cart-icon-bubble{width:34px;height:34px;border-radius:11px}
.menu-v10 .modern-cart .cart-copy{min-width:0}
.menu-v10 .modern-cart .cart-title{white-space:nowrap}
.menu-v10 .modern-cart #cartCount{background:#ff8508;border-radius:50%;height:29px;min-width:29px;padding:0 7px}
/* Banner carousel works on hover, keyboard focus and touch; slides rotate while page visible */
.menu-v10 .banner-slider{border-radius:25px;box-shadow:var(--mf-shadow)}
.menu-v10 .banner-slide{transition:opacity .55s ease,visibility .55s ease}
.menu-v10 .banner-controls{gap:9px}
.menu-v10 .banner-dots button.is-active{background:#ffcc38;width:26px}
/* Search: input and icon are siblings, never stacked */
.menu-v10 .catalog-toolbar{align-items:center;gap:20px}
.menu-v10 .catalog-search{display:flex!important;align-items:center;gap:12px;flex:none;margin:0;width:min(365px,100%);height:50px;max-width:100%;padding:0 15px;background:#fff;border:1px solid #e6e1d8;border-radius:15px;box-shadow:0 6px 18px #25180905;position:relative}
.menu-v10 .catalog-search .search-icon{display:block!important;position:static!important;transform:none!important;width:21px;height:21px;flex:0 0 21px;color:#8a837b;pointer-events:none}
.menu-v10 .catalog-search input,.menu-v10 .catalog-search input[type=search]{display:block;width:100%;min-width:0;flex:1;height:100%;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:13px;line-height:1.3;color:#25211f;outline:none!important;appearance:none}
.menu-v10 .catalog-search input::placeholder{color:#9b958c;opacity:1}
.menu-v10 .catalog-search:focus-within{border-color:#ffa126;box-shadow:0 0 0 4px rgba(255,166,45,.12)}
.menu-v10 .mode-ribbon{border-radius:17px;box-shadow:0 8px 24px #29190e05}
.menu-v10 .mode-ribbon strong{font-size:13px}
.menu-v10 .mode-ribbon small{font-size:11px}
/* Real progress is driven by requestAnimationFrame in app.js. */
.menu-v10 .page-loader{background:radial-gradient(circle at 50% 35%,#ffe77f 0%,#ffc83e 43%,#ff9a13 100%)}
.menu-v10 .loader-track{padding:3px;height:15px;width:min(332px,80vw);background:#fff9;box-shadow:inset 0 2px 4px #0000000f,0 7px 18px #74420b18}
.menu-v10 .loader-bar{display:block;width:100%!important;height:100%;animation:none!important;transition:none!important;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#2d2119,#77410a);position:relative;overflow:hidden}
.menu-v10 .loader-bar:after{content:'';display:block;width:25%;height:100%;position:absolute;right:0;top:0;background:linear-gradient(90deg,transparent,#ffffff82);opacity:.55}
.menu-v10 .loader-progress-info{display:flex;align-items:center;justify-content:space-between;width:min(332px,80vw);margin-top:11px}
.menu-v10 .loader-progress-info small{margin:0;text-align:left}
.menu-v10 #loaderPercentage{font-variant-numeric:tabular-nums;font-weight:900;font-size:12px}
/* Bottom dock fully fixed, full width, five stable items */
.menu-v10 .mobile-dock{display:none}
.menu-v10 .floating-order-button{display:none!important}
.menu-v10 .shade{z-index:80}
.menu-v10 .cart-panel{z-index:81}
.menu-v10 .product-shade{z-index:73}
.menu-v10 .product-modal{z-index:74}
.menu-v10 #reserveBtnDock:disabled{opacity:.4;cursor:not-allowed}
.menu-v10 .cart-panel .panel-footer{padding-bottom:max(22px,env(safe-area-inset-bottom))}
@media(max-width:1060px){
 .menu-v10 .header-v10-grid{grid-template-columns:minmax(180px,1fr) minmax(135px,.9fr) auto;gap:12px}
 .menu-v10 #cartToggle{display:none}
}
@media(max-width:760px){
 .menu-v10 .header-v10-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand brand" "location modality";align-items:center;column-gap:10px;row-gap:9px;padding-top:9px;padding-bottom:10px;height:auto!important;min-height:0}
 .menu-v10 .header-v10-grid>.brand{grid-area:brand;min-width:0;max-width:100%;gap:10px}
 .menu-v10 .brand-logo{width:64px;height:49px}
 .menu-v10 .brand-name{font-size:17px;line-height:1.12;width:auto;max-width:calc(100vw - 110px);overflow:hidden}
 .menu-v10 .header-location{grid-area:location;display:flex!important;min-width:0;padding:3px 0}
 .menu-v10 .header-location>span{font-size:18px}
 .menu-v10 .header-location small{font-size:10px}
 .menu-v10 .header-location strong{font-size:11px;max-width:100%}
 .menu-v10 .header-mode-button{grid-area:modality;min-width:0;width:auto;padding:9px 11px!important;font-size:11px;border-radius:12px;min-height:40px;gap:6px;max-width:150px}
 .menu-v10 .header-mode-button b{display:inline}
 .menu-v10 #headerModeLabel{font-size:11px;max-width:none!important}
 .menu-v10 .status-alert-inner{padding-top:7px;padding-bottom:7px}
 .menu-v10 .status-alert-copy{gap:6px}
 .menu-v10 .status-alert-copy strong{font-size:11px}
 .menu-v10 .status-alert-copy>span:last-child{font-size:11px}
 .menu-v10 .status-alert-countdown{gap:4px}
 .menu-v10 .status-alert-countdown>span{display:none}
 .menu-v10 .status-alert-countdown strong{font-size:11px}
 .menu-v10 .mode-ribbon{margin:12px 0 0;padding:10px 12px}
 .menu-v10 .catalog-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:15px}
 .menu-v10 .catalog-search{width:100%;margin-top:0;height:47px}
 .menu-v10 .mobile-dock{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed!important;inset:auto 0 0 0!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;max-width:none!important;transform:none!important;z-index:55!important;gap:0;margin:0;border:0;border-top:1px solid #eee8de;border-radius:18px 18px 0 0;padding:8px 7px calc(7px + env(safe-area-inset-bottom));background:#fffffff2;backdrop-filter:blur(16px);box-shadow:0 -9px 28px #20190f10}
 .menu-v10 .mobile-dock>a,.menu-v10 .mobile-dock>button{display:flex!important;position:relative;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:57px;padding:5px 2px;border:none;background:none;border-radius:13px;color:#7c736a;font-size:10px;line-height:1.2;font-weight:750;white-space:nowrap;cursor:pointer}
 .menu-v10 .mobile-dock>a.is-active,.menu-v10 .mobile-dock>button.is-active{color:#fa8500;background:#fff4e5}
 .menu-v10 .mobile-dock svg{display:block;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .menu-v10 .mobile-dock>a.is-active svg,.menu-v10 .mobile-dock>button.is-active svg{stroke:#f28a08}
 .menu-v10 .mobile-dock span:not(.dock-icon-wrap){font-size:10px;line-height:1.2;color:inherit}
 .menu-v10 .dock-icon-wrap{position:relative;display:flex;align-items:center;justify-content:center}
 .menu-v10 #dockCount{position:absolute;right:-16px;top:-6px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:30px;font-style:normal;background:#ff880b;color:#fff;font-size:10px;font-weight:850}
 .menu-v10 #reserveBtnDock:disabled{opacity:.38}
 .menu-v10 .menu-main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 .menu-v10 .menu-footer{padding-bottom:10px}
 .menu-v10 .product-modal{max-height:calc(100dvh - 96px)}
 .menu-v10 .cart-panel{height:100dvh}
}
@media(max-width:400px){
 .menu-v10 .brand-logo{width:58px;height:46px}
 .menu-v10 .brand-name{font-size:16px;max-width:calc(100vw - 95px)}
 .menu-v10 .header-mode-button{padding:8px 9px!important}
 .menu-v10 #headerModeLabel{font-size:10px}
 .menu-v10 .header-location strong{max-width:150px}
 .menu-v10 .status-alert-copy>span:last-child{max-width:172px}
}
@media(prefers-reduced-motion:reduce){
 .menu-v10 .status-pulse{animation:none}
 .menu-v10 .banner-slide{transition:none}
 .menu-v10 .page-loader{transition:none}
 .menu-v10 .loader-logo{animation:none}
}
/* Neutraliza el estilo global de chips que afectaba a todos los spans del carrito. */
.menu-v10 .modern-cart span{background:transparent;color:inherit;border-radius:0;padding:0}
.menu-v10 .modern-cart .cart-icon-bubble{background:#fff;color:#241a11;border-radius:11px}
.menu-v10 .modern-cart #cartCount{background:#ff8508;color:#fff;border-radius:50%;padding:0 7px}
.menu-v10 .modern-cart .cart-copy small{color:#d6cfc4;font-size:10px}
.menu-v10 .header-mode-button:focus-visible{outline:2px solid #ffae32;outline-offset:2px;box-shadow:none}


/* V10.1 — La navegación inferior permanece anclada siempre.
   Se elimina su ocultación por cambios de ancho del viewport o rotación del móvil. */
body.menu-v10 > nav.mobile-dock {
  display: grid !important;
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 7px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  grid-template-columns: repeat(5,minmax(0,1fr));
  z-index: 55 !important;
  background: #fff;
  border-top: 1px solid #eee8de;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 25px rgba(25,18,8,.1);
}
/* Respetar los paneles de pedido y detalles, que van por encima de la barra. */
body.menu-v10 .shade { z-index: 80; }
body.menu-v10 .cart-panel { z-index: 81; }
body.menu-v10 .product-shade { z-index: 73; }
body.menu-v10 .product-modal { z-index: 74; }
body.menu-v10 .menu-main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 761px) {
  body.menu-v10 > nav.mobile-dock {
    width: min(580px, calc(100% - 24px)) !important;
    max-width: 580px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 14px !important;
    padding-bottom: 9px !important;
    border: 1px solid #eee8de;
    border-radius: 20px;
  }
}
/* El botón Agregar no queda pintado después de tocarlo.
   :hover persistente en pantallas táctiles era la causa de que pareciera seleccionado. */
body.menu-v10 .food-quick-add,
body.menu-v10 .food-quick-add:hover,
body.menu-v10 .food-quick-add:focus:not(:focus-visible) {
  background: #fff;
  color: var(--ink);
  outline: none;
  transform: none;
  transition: background .13s ease, color .13s ease, transform .13s ease;
}
body.menu-v10 .food-quick-add.mf-add-feedback,
body.menu-v10 .food-quick-add.mf-add-feedback:hover {
  background: #ff8a00;
  color: #fff;
  transform: scale(.9);
}
body.menu-v10 .food-quick-add:focus-visible {
  outline: 3px solid #ffad33;
  outline-offset: 2px;
}
/* Quita el efecto hover retenido en toda la tarjeta tras usar un botón táctil. */
@media (hover: none) {
  body.menu-v10 .food-card:hover {
    transform: none;
    border-color: #eeeae4;
    box-shadow: 0 7px 23px #30160d08;
  }
  body.menu-v10 .food-card-offer:hover {
    border-color: color-mix(in srgb,var(--accent) 34%,white);
  }
  body.menu-v10 .food-card:hover .food-image img { transform: none; }
}
/* Retorno instantáneo: evita que quede tono naranja durante una transición residual. */
body.menu-v10 .food-quick-add:not(.mf-add-feedback) {
  transition: none !important;
}
/* Misma distribución de botones tanto en móvil como en tableta/escritorio. */
body.menu-v10 > nav.mobile-dock > a,
body.menu-v10 > nav.mobile-dock > button {
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 57px;
  height: 57px;
  margin: 0;
  padding: 5px 2px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #7c736a;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 750;
  white-space: nowrap;
}
body.menu-v10 > nav.mobile-dock > a.is-active,
body.menu-v10 > nav.mobile-dock > button.is-active {
  color: #fa8500;
  background: #fff4e5;
}
body.menu-v10 > nav.mobile-dock svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.menu-v10 > nav.mobile-dock span:not(.dock-icon-wrap) {
  font-size: 10px;
  line-height: 1.2;
  color: inherit;
}
body.menu-v10 > nav.mobile-dock #dockCount {
  position: absolute;
  right: -16px;
  top: -6px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 850;
  color: #fff;
  background: #ff880b;
}
/* Aviso de producto agregado encima de la navegación, nunca oculto debajo. */
body.menu-v10 .toast {
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  z-index: 58;
}
@media (min-width: 761px) {
  body.menu-v10 .toast { bottom: 110px; }
}


/* V10.2 — Pantallas Inicio y Promos. Se mantiene la barra inferior fija. */
body.menu-v10 .home-only[hidden],body.menu-v10 #promosLanding[hidden]{display:none!important}
body.menu-v10 .promos-landing{display:flex;align-items:center;gap:24px;padding:30px 32px;margin:30px 0 26px;border-radius:27px;background:linear-gradient(125deg,#261b13 0%,#4a2c16 65%,#84421a 100%);color:white;position:relative;overflow:hidden;box-shadow:0 14px 35px #36221117}
body.menu-v10 .promos-landing:after{content:'';position:absolute;width:190px;height:190px;right:-45px;top:-60px;border-radius:100%;border:35px solid #ffffff0d;pointer-events:none}
body.menu-v10 .promos-landing-icon{width:82px;height:82px;flex:0 0 82px;display:grid;place-items:center;background:#ffffff13;border:1px solid #ffffff25;border-radius:24px;font-size:38px}
body.menu-v10 .promos-landing-copy{min-width:0;position:relative;z-index:1}
body.menu-v10 .promos-eyebrow{color:#ffd28b;font-size:11px;font-weight:850;letter-spacing:2px}
body.menu-v10 .promos-landing h1{font-size:clamp(28px,4vw,43px);font-weight:900;margin:5px 0 7px;letter-spacing:-1px}
body.menu-v10 .promos-landing h1 em{font-style:normal;color:#ff9c2a}
body.menu-v10 .promos-landing p{color:#ffe9d7;font-size:14px;line-height:1.5;margin:0 0 12px;max-width:570px}
body.menu-v10 .promos-landing-count{display:inline-block;border-radius:99px;background:#ffffff23;padding:7px 12px;font-size:12px;font-weight:750;color:white}
body.menu-v10.promos-view .catalog-toolbar{margin-top:16px}
body.menu-v10.promos-view .catalog-sections{padding-bottom:22px}
body.menu-v10.promos-view .catalog-group+.catalog-group{margin-top:38px}
body.menu-v10 .mobile-dock [aria-current="page"]{background:#fff4e5!important;color:#fa8500!important}
@media(max-width:600px){
 body.menu-v10 .promos-landing{margin:17px 0 22px;padding:23px 20px;align-items:flex-start;gap:12px;border-radius:22px}
 body.menu-v10 .promos-landing-icon{width:43px;height:43px;flex:0 0 43px;border-radius:13px;font-size:24px}
 body.menu-v10 .promos-landing h1{font-size:27px;letter-spacing:-.7px}
 body.menu-v10 .promos-landing p{font-size:12px}
 body.menu-v10 .promos-eyebrow{font-size:9px;letter-spacing:1.2px}
}