/* KODA POS - carrito móvil + presentación de impresión. Versión 20260916-04. */
.koda-mobile-cart-overlay,
.koda-mobile-cart-overlay__backdrop,
.koda-mobile-cart-overlay__close { display: none; }

@media (max-width: 899px) {
  body.koda-mobile-cart-has-items { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .koda-mobile-cart-overlay {
    position: fixed;
    z-index: 96;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px;
    background: linear-gradient(135deg,#6f5ce7,#552596);
    color: #fff;
    box-shadow: 0 16px 36px rgba(40,24,88,.34);
    text-align: left;
    animation: koda-cart-overlay-in .3s cubic-bezier(.2,.8,.2,1) both;
  }
  .koda-mobile-cart-overlay[hidden] { display: none !important; }
  .koda-mobile-cart-overlay__bubbles { display: flex; padding-left: 4px; }
  .koda-mobile-cart-overlay__bubbles i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-left: calc(var(--bubble-index) * -12px);
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg,#fff,#eeeaff);
    color: #4f2690;
    font-size: 15px;
    font-style: normal;
    box-shadow: 0 5px 12px rgba(28,17,65,.24);
  }
  .koda-mobile-cart-overlay__bubbles img { width: 100%; height: 100%; display: block; object-fit: cover; background: #fff; }
  .koda-mobile-cart-overlay__bubbles i > span { width: 100%; height: 100%; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
  .koda-mobile-cart-overlay__copy { min-width: 0; flex: 1; display: grid; }
  .koda-mobile-cart-overlay__copy strong { font-size: 13px; font-weight: 800; line-height: 1.1; }
  .koda-mobile-cart-overlay__copy small { margin-top: 3px; overflow: hidden; opacity: .86; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .koda-mobile-cart-overlay__count { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #542296; font-size: 11px; font-weight: 900; }
  .koda-mobile-cart-overlay__arrow { font-size: 25px; line-height: 1; }

  .koda-mobile-cart-overlay__backdrop { position: fixed; z-index: 94; inset: 0; display: block; background: rgba(8,11,17,.58); backdrop-filter: blur(2px); }
  .koda-mobile-cart-overlay__panel {
    position: fixed !important;
    z-index: 95 !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    max-height: min(82dvh,700px) !important;
    display: none !important;
    overflow: auto !important;
    border-radius: 25px 25px 0 0 !important;
    box-shadow: 0 -18px 45px rgba(4,8,15,.28) !important;
  }
  .koda-mobile-cart-overlay__panel.is-open { display: flex !important; animation: koda-cart-sheet-in .28s cubic-bezier(.2,.8,.2,1) both; }
  .koda-mobile-cart-overlay__close {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(120,126,140,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #565268;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(15,23,42,.13);
  }
  html[data-koda-caja-dark] .koda-mobile-cart-overlay { background: linear-gradient(135deg,#5b4cf0,#322865); }
  html[data-koda-caja-dark] .koda-mobile-cart-overlay__panel { background: #1b1f26 !important; border-color: #3a404b !important; }
  html[data-koda-caja-dark] .koda-mobile-cart-overlay__close { background: #2d323c; color: #f8fafc; border-color: #454d59; }

  .koda-mobile-cart-overlay__particle {
    position: fixed;
    z-index: 120;
    width: 36px;
    height: 36px;
    pointer-events: none;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff center/contain no-repeat;
    box-shadow: 0 8px 18px rgba(20,14,45,.3);
  }
}

.koda-receipt-overlay > div { animation: koda-receipt-modal-in .28s ease-out both; }
.koda-receipt-overlay__slot {
  position: relative;
  z-index: 4;
  width: min(88%,340px);
  height: 46px;
  margin: 3px auto -11px;
  border-radius: 16px 16px 10px 10px;
  background: linear-gradient(180deg,#4b4a5d 0%,#292735 43%,#15131d 76%,#09080d 100%);
  box-shadow: 0 9px 18px rgba(8,7,13,.38),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.46);
}
.koda-receipt-overlay__slot::before {
  content: 'KODA';
  position: absolute;
  top: 8px;
  left: 14px;
  color: rgba(255,255,255,.58);
  font: 800 8px/1 system-ui,sans-serif;
  letter-spacing: .16em;
}
.koda-receipt-overlay__slot::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54d89a;
  box-shadow: 0 0 0 3px rgba(84,216,154,.13),0 0 8px rgba(84,216,154,.58);
}
.koda-receipt-overlay__slot-mouth {
  position: absolute;
  right: 7%;
  bottom: 7px;
  left: 7%;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: linear-gradient(180deg,#050409,#16131e 52%,#020204);
  box-shadow: inset 0 2px 4px #000,0 1px rgba(255,255,255,.12);
}
.koda-receipt-overlay__rollers {
  position: absolute;
  inset: 2px 4px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 8px,rgba(255,255,255,.15) 8px 11px);
  transform: translateX(-18px);
}
.koda-receipt-overlay__paper {
  position: relative;
  z-index: 2;
  overflow: hidden;
  color-scheme: light;
  color: #111827 !important;
  background: #fff !important;
  filter: drop-shadow(0 10px 16px rgba(15,23,42,.22));
  transform-origin: top center;
}
html[data-koda-caja-dark] .koda-receipt-overlay__paper,
html[data-koda-caja-dark] .koda-receipt-overlay__paper.bg-white,
html[data-koda-caja-dark] .koda-receipt-overlay__paper .bg-white { color-scheme: light; background: #fff !important; }
html[data-koda-caja-dark] .koda-receipt-overlay__paper .text-slate-900,
html[data-koda-caja-dark] .koda-receipt-overlay__paper .text-slate-800 { color: #111827 !important; }
html[data-koda-caja-dark] .koda-receipt-overlay__paper .text-slate-700,
html[data-koda-caja-dark] .koda-receipt-overlay__paper .text-slate-600 { color: #334155 !important; }
html[data-koda-caja-dark] .koda-receipt-overlay__paper .text-slate-500,
html[data-koda-caja-dark] .koda-receipt-overlay__paper .text-slate-400 { color: #64748b !important; }
html[data-koda-caja-dark] .koda-receipt-overlay__paper .border-slate-300,
html[data-koda-caja-dark] .koda-receipt-overlay__paper .border-slate-200 { border-color: #cbd5e1 !important; }
.koda-receipt-overlay__paper.is-revealing { animation: koda-receipt-paper-feed 1.75s cubic-bezier(.18,.78,.2,1) .12s both; }
.koda-receipt-overlay__paper.is-printing { animation: koda-receipt-paper-print 1.6s cubic-bezier(.18,.78,.2,1) both; }
.koda-receipt-overlay__paper::after {
  content: '';
  position: absolute;
  inset: -30% -50%;
  pointer-events: none;
  background: linear-gradient(115deg,transparent 42%,rgba(255,255,255,.58) 50%,transparent 58%);
  transform: translateX(-90%);
  animation: koda-receipt-shine .8s .28s ease-out both;
}
.koda-receipt-overlay__print { position: relative; overflow: hidden; }
.koda-receipt-overlay__print.is-printing { animation: koda-print-button .75s ease both; }

@keyframes koda-cart-overlay-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes koda-cart-sheet-in { from { opacity: .4; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes koda-receipt-modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes koda-receipt-paper-feed {
  0% { clip-path: inset(0 0 100% 0); transform: translateY(-44px) scaleX(.965); opacity: .2; }
  16% { clip-path: inset(0 0 91% 0); transform: translateY(-39px) scaleX(.97); opacity: 1; }
  45% { clip-path: inset(0 0 63% 0); transform: translateY(-27px) scaleX(.98); }
  72% { clip-path: inset(0 0 26% 0); transform: translateY(-11px) scaleX(.992); }
  90% { clip-path: inset(0); transform: translateY(5px); }
  100% { clip-path: inset(0); transform: translateY(0); opacity: 1; }
}
@keyframes koda-receipt-paper-print {
  0% { clip-path: inset(0); transform: translateY(0); opacity: 1; }
  26% { clip-path: inset(0 0 58% 0); transform: translateY(-28px) scaleX(.98); opacity: .9; }
  38% { clip-path: inset(0 0 100% 0); transform: translateY(-44px) scaleX(.965); opacity: .25; }
  50% { clip-path: inset(0 0 91% 0); transform: translateY(-39px) scaleX(.97); opacity: 1; }
  72% { clip-path: inset(0 0 48% 0); transform: translateY(-22px) scaleX(.985); }
  91% { clip-path: inset(0); transform: translateY(5px); }
  100% { clip-path: inset(0); transform: translateY(0); opacity: 1; }
}
@keyframes koda-printer-led { 50% { opacity: .22; transform: scale(.78); } }
@keyframes koda-printer-pulse { 50% { transform: translateY(1px); filter: brightness(1.22); } }
@keyframes koda-printer-rollers { to { transform: translateX(0); } }
@keyframes koda-receipt-shine { to { transform: translateX(90%); } }
@keyframes koda-print-button { 0%,100% { transform: none; } 45% { transform: scale(.96); filter: brightness(1.18); } }

.koda-receipt-overlay__slot.is-printing { animation: koda-printer-pulse .35s ease-in-out 3; }
.koda-receipt-overlay__slot.is-printing::after { animation: koda-printer-led .22s ease-in-out 7; }
.koda-receipt-overlay__slot.is-printing .koda-receipt-overlay__rollers { animation: koda-printer-rollers .32s linear 5; }

@media (prefers-reduced-motion: reduce) {
  .koda-mobile-cart-overlay,
  .koda-mobile-cart-overlay__panel.is-open,
  .koda-receipt-overlay > div,
  .koda-receipt-overlay__paper,
  .koda-receipt-overlay__slot,
  .koda-receipt-overlay__slot::after,
  .koda-receipt-overlay__rollers,
  .koda-receipt-overlay__paper::after,
  .koda-receipt-overlay__print.is-printing { animation: none !important; }
}