/* ══════════════════════════════════════════════
   style_cards.css — Home cards, reorder FLIP,
   emoji indicator en cards
   ══════════════════════════════════════════════ */

/* ══ CARD REORDER ══ */
.home-card{transition:box-shadow .22s}
.home-card.selected-first{
  order:-1;
  animation:cardJump .5s cubic-bezier(.34,1.56,.64,1) both;
  outline:2px solid var(--red);outline-offset:2px;
}
@keyframes cardJump{
  0%{transform:scale(1) translateY(0)}
  20%{transform:scale(1.08) translateY(-8px) rotate(-2deg)}
  40%{transform:scale(1.08) translateY(-8px) rotate(2deg)}
  60%{transform:scale(1.05) translateY(-4px) rotate(-1deg)}
  80%{transform:scale(1.02) translateY(-2px) rotate(.5deg)}
  100%{transform:scale(1) translateY(0) rotate(0)}
}
.home-card.jiggle{animation:jiggle .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes jiggle{
  0%,100%{transform:rotate(0) scale(1)}
  20%{transform:rotate(-3deg) scale(1.05)}
  40%{transform:rotate(3deg) scale(1.05)}
  60%{transform:rotate(-2deg) scale(1.02)}
  80%{transform:rotate(1deg) scale(1.01)}
}

/* ══ CART EMOJI INDICATOR ON HOME CARDS ══ */
.hc-cart-indicator{
  position:absolute;top:7px;left:7px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  border-radius:100px;padding:3px 8px 3px 6px;
  display:flex;align-items:center;gap:4px;
  pointer-events:none;z-index:3;
  animation:indicatorPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes indicatorPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.hc-cart-emoji{font-size:15px;line-height:1;display:inline-block;animation:emojiBounce .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes emojiBounce{
  0%{transform:scale(0) rotate(-20deg)}
  50%{transform:scale(1.35) rotate(8deg)}
  75%{transform:scale(.9) rotate(-3deg)}
  100%{transform:scale(1) rotate(0)}
}
.hc-cart-count{font-size:11px;font-weight:700;color:#fff;font-family:var(--font);line-height:1}
.home-card.mega-shake{animation:megaShake .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes megaShake{
  0%,100%{transform:rotate(0) scale(1)}
  10%{transform:rotate(-4deg) scale(1.06)}
  25%{transform:rotate(4deg) scale(1.08)}
  40%{transform:rotate(-3deg) scale(1.06)}
  55%{transform:rotate(3deg) scale(1.04)}
  70%{transform:rotate(-2deg) scale(1.02)}
  85%{transform:rotate(1deg) scale(1.01)}
}

/* ══ SIDEBAR CARD REORDER ══ */
.menu-card.mc-selected-first{
  outline:2px solid var(--red);
  outline-offset:1px;
  transition:outline .2s;
}
.menu-card.mc-jiggle{animation:jiggle .4s cubic-bezier(.34,1.56,.64,1) both}

/* ══ SIDEBAR CART EMOJI INDICATOR (igual que en home pero más chico) ══ */
.mc-cart-indicator{
  position:absolute;top:4px;left:4px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  border-radius:100px;padding:2px 6px 2px 4px;
  display:flex;align-items:center;gap:3px;
  pointer-events:none;z-index:3;
  animation:indicatorPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.mc-cart-emoji{
  font-size:11px;line-height:1;display:inline-block;
  animation:emojiBounce .4s cubic-bezier(.34,1.56,.64,1) both;
}
.mc-cart-count{font-size:9px;font-weight:700;color:#fff;font-family:var(--font);line-height:1}

/* ════════════════════════════════════════════════
   FIX v35 — Blindaje de aspecto en miniaturas del menu
   Garantiza recorte (cover) y centrado: ninguna imagen
   se estira/deforma, sin importar su relacion de aspecto.
   Alta especificidad + !important para vencer overrides.
   ════════════════════════════════════════════════ */
.hc-img-wrap .hc-img,
.hc-img-wrap .hc-img-low,
.mc-img-wrap .mc-img,
.mc-img-wrap .mc-img-low {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

/* ══ SCROLLBARS FINOS GLOBALES ══════════════════════════════
   Default delgado para todo. Los elementos con regla propia mas
   especifica (menu-nav, cart-items, etc.) la mantienen; esto arregla
   los que salian gordos (modal de producto, recibo, etc.). ══ */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border2,rgba(0,0,0,.18)); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted,rgba(0,0,0,.32)); }
html{ scrollbar-width:thin; scrollbar-color:var(--border2,rgba(0,0,0,.18)) transparent; }

/* ══ BANNER DE INSTALACION PWA ══════════════════════════════ */
.pwa-install-banner{
  position:fixed; left:50%; bottom:20px;
  transform:translate(-50%,160%);
  z-index:7500;
  display:flex; align-items:center; gap:12px;
  background:var(--surface,#fff);
  border:1px solid var(--border,rgba(0,0,0,.1));
  box-shadow:var(--sh-lg,0 8px 32px rgba(0,0,0,.16));
  border-radius:100px;
  padding:10px 12px 10px 16px;
  max-width:92vw;
  opacity:0; pointer-events:none;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
.pwa-install-banner.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.pwa-install-icon{ font-size:24px; line-height:1; flex-shrink:0; }
.pwa-install-text{ display:flex; flex-direction:column; line-height:1.25; }
.pwa-install-text strong{ font-size:13.5px; font-weight:700; color:var(--text,#1a1917); }
.pwa-install-text span{ font-size:11.5px; color:var(--muted,#7a786e); }
.pwa-install-btn{
  background:var(--red,#F0643C); color:#fff; border:none; border-radius:100px;
  padding:8px 16px; font-family:var(--font,sans-serif); font-size:12.5px; font-weight:700;
  cursor:pointer; flex-shrink:0; transition:background .15s, transform .15s;
}
.pwa-install-btn:hover{ background:var(--red2,#a93226); transform:scale(1.04); }
.pwa-install-dismiss{
  background:none; border:none; color:var(--faint,#b5b3aa); cursor:pointer;
  font-size:14px; padding:4px 6px; flex-shrink:0; line-height:1;
}
.pwa-install-dismiss:hover{ color:var(--muted,#7a786e); }


/* ══ #5: FLECHAS DE SCROLL EN EL RAIL (afordancia de scroll) ══ */
.rail{ position:relative; }
.rail-scroll-arrow{
  flex-shrink:0; width:36px; height:18px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; cursor:pointer;
  color:var(--muted,#7a786e); transition:color .15s, opacity .2s;
}
.rail-scroll-arrow:hover{ color:var(--red,#c0392b); }
.rail-scroll-arrow svg{ width:18px; height:18px; }
.rail-scroll-down{ animation:railBounce 1.5s ease-in-out infinite; }
.rail-scroll-arrow.hidden{ display:none; }
@keyframes railBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }