/* catalogo_app.css — v18.0.4.7.0
 * Capa "se siente app" del catalogo publico: toque, scroll, hojas inferiores
 * y animaciones. Se carga al final del <head> para ganar a los estilos de
 * cada plantilla. Reglas de movimiento: solo transform y opacity, curvas
 * fuertes, menos de 300 ms en la interfaz, y gentil con prefers-reduced-motion.
 */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sab: env(safe-area-inset-bottom, 0px);
  --sat: env(safe-area-inset-top, 0px);
}

/* ── Base nativa ─────────────────────────────────────────────── */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
input, textarea, select { font-size: 16px; }
button, a, [role="button"], .cat-tab, .vcard-btn, .btn-qty {
  touch-action: manipulation;
}
/* El texto de un CONTROL no se selecciona al mantener el dedo; el contenido si */
button, [role="button"], .cat-tab, .ck-metodo-btn, .ck-modalidad-btn,
.btn-qty, .var-opt-btn, .banco-card, .cart-float-btn {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.modal-content, .modal-body, .cat-tabs { overscroll-behavior: contain; }
.cat-tabs { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-behavior: smooth; }

/* Muescas y barra inferior: el contenido se aparta, el fondo llega al borde */
body.style-app, body.style-grid, body.style-minimalist, body.style-restaurant,
body.style-bakery, body.style-mercado { padding-bottom: calc(110px + var(--sab)); }
.cart-float-btn { bottom: calc(16px + var(--sab)); }
body.cat-carrito-lleno #chatbot-root { bottom: calc(90px + var(--sab)) !important; }
#chatbot-root { bottom: calc(16px + var(--sab)) !important; }

/* ── Retroalimentacion al tocar (en el instante del dedo, no al soltar) ── */
.btn-qty, .vcard-btn, .vcard-btn-personalizar, .ck-metodo-btn, .ck-modalidad-btn,
.popup-add-btn, .popup-close, .banco-copy-btn, .cat-tab, .var-opt-btn,
.vcard-qty-btn, .popup-qty-btn, .rest-qty-btn, .banco-card {
  transition: transform 140ms var(--ease-out), background-color 140ms ease,
              border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.btn-qty:active, .vcard-btn:active, .vcard-btn-personalizar:active, .popup-add-btn:active,
.popup-close:active, .banco-copy-btn:active, .vcard-qty-btn:active, .popup-qty-btn:active,
.rest-qty-btn:active { transform: scale(0.93); }
.ck-metodo-btn:active, .ck-modalidad-btn:active, .var-opt-btn:active,
.banco-card:active, .cat-tab:active { transform: scale(0.98); }
#ck-btn-siguiente:active, #ck-btn-enviar:active, #ck-btn-atras:active,
#var-btn-siguiente:active, #var-btn-atras:active { transform: scale(0.97); }
#ck-btn-siguiente, #ck-btn-enviar, #ck-btn-atras, #var-btn-siguiente, #var-btn-atras {
  transition: transform 140ms var(--ease-out), opacity 160ms ease;
}

/* Boton del carrito: entra desde abajo con la curva de hoja, 280 ms */
.cart-float-btn { transition: transform 280ms var(--ease-drawer), opacity 200ms ease, background-color 200ms ease; will-change: transform; }
.cart-float-btn.empty { transform: translate(-50%, calc(100% + 40px)); }
.cart-float-btn.has-items:active { transform: translateX(-50%) scale(0.97); transition-duration: 120ms; }

/* ── Modales = hojas inferiores en el telefono ────────────────── */
/* Bootstrap espera a que termine el fundido del fondo ANTES de subir la hoja
   (se sentia ~200 ms de retraso). El fondo se oscurece con una animacion en
   paralelo y la hoja sale de inmediato; al cerrar si se desvanece con calma. */
@keyframes cat-fondo { from { opacity: 0; } to { opacity: 0.5; } }
.modal-backdrop.fade { transition: opacity 200ms ease; }
.modal-backdrop.show { transition: none; opacity: 0.5; animation: cat-fondo 220ms ease-out both; }
@media (max-width: 600px) {
  #checkoutModal .modal-dialog, #varianteModal .modal-dialog {
    margin: 0; max-width: none; width: 100%; height: auto; min-height: 100%;
    display: flex; align-items: flex-end; pointer-events: none;
  }
  #checkoutModal .modal-content, #varianteModal .modal-content {
    pointer-events: auto; width: 100%; max-height: 92dvh;
    border-radius: 22px 22px 0 0 !important; border: 0;
  }
  #checkoutModal .modal-body, #varianteModal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #checkoutModal .modal-footer, #varianteModal .modal-footer { padding-bottom: calc(16px + var(--sab)) !important; }
  #banco-info-overlay { border-radius: 0 !important; }
  /* la hoja sube desde abajo; al cerrar baja por el mismo camino */
  #checkoutModal.modal.fade .modal-dialog, #varianteModal.modal.fade .modal-dialog {
    transform: translateY(100%); transition: transform 320ms var(--ease-drawer);
  }
  #checkoutModal.modal.show .modal-dialog, #varianteModal.modal.show .modal-dialog { transform: none; }
  /* asa para que se entienda que es una hoja */
  #checkoutModal .modal-header::before, #variante-modal-content > .var-header::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px;
    margin-left: -19px; border-radius: 4px; background: rgba(255,255,255,.45); pointer-events: none;
  }
  #checkoutModal .modal-header, #variante-modal-content > .var-header { position: relative; }
}
@media (min-width: 601px) {
  .modal.fade .modal-dialog { transform: translateY(14px) scale(0.98); transition: transform 240ms var(--ease-out); }
  .modal.show .modal-dialog { transform: none; }
}

/* ── Pasos del checkout: entran desde el lado al que vas ──────── */
@keyframes cat-paso-fwd  { from { opacity: 0; transform: translateX(18px); }  to { opacity: 1; transform: none; } }
@keyframes cat-paso-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
#checkoutModal[data-dir="fwd"]  .checkout-paso { animation: cat-paso-fwd 220ms var(--ease-out) both; }
#checkoutModal[data-dir="back"] .checkout-paso { animation: cat-paso-back 220ms var(--ease-out) both; }
/* Paneles de pago y exito: aparecen con un leve ascenso */
@keyframes cat-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#panel-pago-movil, #panel-transferencia, #panel-efectivo, #panel-cashea, #panel-referencia,
#panel-delivery, .checkout-subpanel { animation: cat-sube 200ms var(--ease-out) both; }
#banco-info-overlay { animation: cat-sube 220ms var(--ease-out) both; }
@keyframes cat-exito { 0% { opacity: 0; transform: scale(0.8); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
#ck-exito > div:first-child { animation: cat-exito 420ms var(--ease-out) both; }

/* ── Entrada de la lista al abrir (una sola vez, 40 ms entre filas) ── */
@keyframes cat-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.cat-intro .app-product-item:nth-child(-n+8),
body.cat-intro .rest-card:nth-child(-n+8),
body.cat-intro .vcard:nth-child(-n+8),
body.cat-intro .mercado-card:nth-child(-n+8) { animation: cat-entra 280ms var(--ease-out) backwards; }
body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card):nth-child(2) { animation-delay: 40ms; }
body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card):nth-child(3) { animation-delay: 80ms; }
body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card):nth-child(4) { animation-delay: 120ms; }
body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card):nth-child(5) { animation-delay: 160ms; }
body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card):nth-child(6) { animation-delay: 200ms; }
body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card):nth-child(7) { animation-delay: 240ms; }
body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card):nth-child(8) { animation-delay: 280ms; }

/* Numero de cantidad y globito del carrito: un golpecito al cambiar */
@keyframes cat-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.cat-pop { animation: cat-pop 220ms var(--ease-out); }

/* Imagenes: aparecen suaves al cargar en vez de saltar */
.app-product-item img, .rest-card img, .vcard img { transition: opacity 240ms ease; }

/* ── Respeto a "reducir movimiento": menos y mas suave, no cero ── */
@media (prefers-reduced-motion: reduce) {
  .cart-float-btn, #checkoutModal.modal.fade .modal-dialog, #varianteModal.modal.fade .modal-dialog { transition-duration: 1ms; }
  #checkoutModal[data-dir] .checkout-paso, #panel-pago-movil, #panel-transferencia, #panel-efectivo,
  #panel-cashea, #panel-referencia, #panel-delivery, .checkout-subpanel, #banco-info-overlay,
  #ck-exito > div:first-child { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  body.cat-intro :is(.app-product-item,.rest-card,.vcard,.mercado-card) { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .cat-pop { animation: none; }
  .btn-qty:active, .vcard-btn:active, .ck-metodo-btn:active { transform: none; }
  .cat-tabs { scroll-behavior: auto; }
}