/* styles.css - Identidad visual y microinteracciones de Trinchero Delivery */
/* Paleta Oficial Restyling 2026:
   - Rojo Vibrante: #f2000e (PANTONE 485 C)
   - Granate Tinto / Vino: #700010 (PANTONE P 56-16 C)
   - Crema Cálido: #f2e8d7 (PANTONE 7506 C al 50%)
   - Celeste Retro: #bfdee2 (PANTONE 7457 C)
*/
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  --brand-red: #f2000e;
  --brand-red-hover: #d4000c;
  --brand-wine: #700010;
  --brand-wine-dark: #4d000b;
  --brand-wine-light: #8a0014;
  --brand-cream: #f2e8d7;
  --brand-cream-soft: #faf5ed;
  --brand-cream-dark: #e5d7c0;
  --brand-blue: #bfdee2;
  --brand-blue-dark: #236069;
  --brand-bg: #f5eee2;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: var(--brand-bg);
  -webkit-tap-highlight-color: transparent;
  color: #1a1a1a;
}

h1, h2, h3, .font-serif {
  font-family: 'Alfa Slab One', cursive, serif;
  letter-spacing: -0.02em;
}

/* Scrollbar invisible para el selector horizontal de categorías */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animaciones suaves para bottom sheet y drawer */
.transition-drawer {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

/* Soporte para iPhone notch / Safe Area Inset */
.safe-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Soporte robusto cross-browser para Bottom Sheet de Productos */
#product-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 50 !important;
}

#product-modal:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

#modal-sheet-content-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 36rem !important; /* max-w-xl */
  height: 85vh !important;
  height: 85dvh !important;
  min-height: 70vh !important;
  min-height: 70dvh !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35) !important;
}

#modal-sheet-content {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}

#product-modal .safe-bottom {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
  width: 100% !important;
  z-index: 20 !important;
  background-color: #ffffff !important;
}

.combo-variant,
.combo-drink-flavor,
.promo-combo-variant,
.promo-combo-drink {
  position: relative !important;
}

/* Efectos de pulso sutil en badges */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.badge-pulse {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Transiciones en botones táctiles */
button, input, select, textarea {
  touch-action: manipulation;
}

/* Tarjetas de productos - Estilo Restyling Trinchero */
.product-card {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  border-color: #ebd9c4;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: #700010;
  box-shadow: 0 12px 28px -6px rgba(112, 0, 16, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
}

/* Sombra de marca con el rojo Pantone */
.shadow-brand-red {
  box-shadow: 0 10px 25px -5px rgba(242, 0, 14, 0.35);
}

.shadow-brand-wine {
  box-shadow: 0 12px 30px -6px rgba(112, 0, 16, 0.35);
}

/* Efecto de borde pinstripe sutil */
.retro-pinstripe {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(191, 222, 226, 0.12) 0px,
    rgba(191, 222, 226, 0.12) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* Botón Primario de Marca */
.btn-brand-primary {
  background-color: var(--brand-red);
  color: #ffffff;
  font-weight: 800;
  transition: all 0.2s ease;
}
.btn-brand-primary:hover {
  background-color: var(--brand-red-hover);
  transform: translateY(-1px);
}
.btn-brand-primary:active {
  transform: scale(0.98);
}

/* Botón Secundario Vino */
.btn-brand-wine {
  background-color: var(--brand-wine);
  color: #ffffff;
  font-weight: 800;
  transition: all 0.2s ease;
}
.btn-brand-wine:hover {
  background-color: var(--brand-wine-light);
  transform: translateY(-1px);
}
.btn-brand-wine:active {
  transform: scale(0.98);
}

/* ==========================================================================
   MODO STANDALONE OPERADOR / TERMINAL COCINA & DESPACHO (?view=operador)
   ========================================================================== */
body.operator-standalone-mode {
  overflow: hidden !important;
  padding-bottom: 0 !important;
  background-color: #09090b !important;
}

body.operator-standalone-mode header,
body.operator-standalone-mode footer,
body.operator-standalone-mode #admin-top-bar,
body.operator-standalone-mode #announcement-banner,
body.operator-standalone-mode #hero-carousel,
body.operator-standalone-mode #category-nav-wrapper,
body.operator-standalone-mode main,
body.operator-standalone-mode #cart-drawer,
body.operator-standalone-mode #modal-initial-mode,
body.operator-standalone-mode #modal-order-tracking,
body.operator-standalone-mode #modal-admin,
body.operator-standalone-mode #modal-admin-login {
  display: none !important;
}

body.operator-standalone-mode #modal-operator-panel {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 99999 !important;
  background-color: #09090b !important;
}

body.operator-standalone-mode #modal-operator-panel > #operator-panel-backdrop {
  display: none !important;
}

body.operator-standalone-mode #modal-operator-panel > div.relative {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body.operator-standalone-mode #btn-close-operator-panel {
  display: none !important;
}

body.operator-standalone-mode #operator-standalone-badge {
  display: inline-flex !important;
}

body.operator-standalone-mode #modal-operator-chat,
body.operator-standalone-mode #modal-proof-viewer,
body.operator-standalone-mode #modal-cancel-order {
  z-index: 100000 !important;
}

body.operator-standalone-mode #modal-operator-chat:not(.hidden),
body.operator-standalone-mode #modal-proof-viewer:not(.hidden),
body.operator-standalone-mode #modal-cancel-order:not(.hidden) {
  display: flex !important;
}






/* ===== Indicadores de desplazamiento horizontal (flechas sutiles) ===== */
.hscroll-wrap { position: relative; min-width: 0; max-width: 100%; }
.hscroll-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.96); color: #700010;
  border: 1px solid #ebd9c4; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  cursor: pointer; z-index: 6; padding: 0;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, background .2s ease;
}
.hscroll-arrow.visible { opacity: .92; pointer-events: auto; }
.hscroll-arrow.visible:hover { opacity: 1; background: #fff; }
.hscroll-arrow.left { left: 2px; }
.hscroll-arrow.right { right: 2px; }
.hscroll-arrow.right.visible.hint { animation: hscroll-nudge 1.1s ease-in-out 3; }
@keyframes hscroll-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hscroll-arrow.right.visible.hint { animation: none; }
}