/* ================================================================
   MOBILE.CSS — Single source of truth for all mobile (≤899px)
   Loaded AFTER style.css so these rules win via cascade order.
   ================================================================ */

/* ────────────────────────────────────────────
   0.  VARIABLES
   ──────────────────────────────────────────── */
:root {
  --m-header: 54px;
  --m-drawer-w: 280px;
  --m-radius: 16px;
  --m-gap: 0.65rem;
}

/* ────────────────────────────────────────────
   1.  MOBILE HEADER BAR
   ──────────────────────────────────────────── */
.mobile-top-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--m-header);
  align-items: center;
  padding: 0 0.85rem 0 0.65rem;
  gap: 0.65rem;
  background: rgba(5, 10, 25, 0.97);
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
  z-index: 1300;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

.mobile-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  border-radius: 12px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.mobile-menu-btn:active {
  background: rgba(139, 92, 246, 0.35);
  transform: scale(0.9);
}

.mobile-top-center {
  flex: 1; display: flex; align-items: center;
  gap: 0.55rem; overflow: hidden; min-width: 0;
}

.mobile-top-logo {
  width: 30px; height: 30px;
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1.5px solid rgba(139, 92, 246, 0.3);
}

#mobileTopTitle {
  font-size: 0.92rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.mobile-top-end { width: 40px; flex-shrink: 0; }

/* ────────────────────────────────────────────
   2.  ≤899px — ALL MOBILE RULES
   ──────────────────────────────────────────── */
@media (max-width: 899px) {

  /* ---------- Reset conflicting rules ---------- */
  /* Altura: --app-vh (JS, altura visible real) > dvh > vh.
     En navegadores sin dvh, 100vh incluye la barra de URL y tapaba
     los botones del fondo. */
  html, body {
    height: 100vh !important;
    height: 100dvh !important;
    height: var(--app-vh, 100dvh) !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ---------- Mobile header visible ---------- */
  .mobile-top-bar { display: flex !important; }

  /* ---------- App shell ---------- */
  #appSection.app-shell,
  .app-shell {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: var(--app-vh, 100dvh) !important;
    padding-top: var(--m-header) !important;
    overflow: hidden !important;
  }

  /* ---------- SIDEBAR DRAWER ---------- */
  #appSidebar.sidebar,
  .sidebar {
    position: fixed !important;
    top: var(--m-header) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--m-drawer-w) !important;
    min-width: var(--m-drawer-w) !important;
    max-width: var(--m-drawer-w) !important;
    height: calc(100vh - var(--m-header)) !important;
    height: calc(var(--app-vh, 100dvh) - var(--m-header)) !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    padding: 0.85rem 0.75rem !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: none !important;
    background: rgba(5, 10, 25, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1250 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-110%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
  }

  /* Open state */
  .app-shell.is-sidebar-open .sidebar,
  #appSection.is-sidebar-open #appSidebar {
    transform: translateX(0) !important;
    box-shadow: 12px 0 50px rgba(0,0,0,0.6) !important;
  }

  /* Hide brand header in drawer (shown in mobile header bar) */
  .sidebar .sidebar-top,
  .sidebar-top {
    display: none !important;
  }

  .sidebar-toggle-btn {
    display: none !important;
  }

  /* Branch selector inside drawer */
  .sidebar-select-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
  }
  .sidebar-select-wrap .btn {
    padding: 0.55rem 0.9rem !important;
    font-size: 0.8rem !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Nav menu */
  .nav-menu,
  #menuTabs {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.25rem 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav items */
  .nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 0.85rem !important;
    margin: 1px 0 !important;
    border-radius: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    transition: background 0.15s ease !important;
  }
  .nav-item:active {
    background: rgba(255,255,255,0.06) !important;
  }
  .nav-item.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
  }
  .nav-item i {
    font-size: 1rem !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
  .nav-item span {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    visibility: visible !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .nav-item .badge {
    font-size: 0.6rem !important;
    margin-left: auto !important;
  }
  .nav-item::after {
    display: none !important;
  }
  .nav-item:hover {
    padding-left: 0.85rem !important;
    background: rgba(255,255,255,0.04) !important;
  }

  /* User profile at bottom */
  .user-profile {
    display: flex !important;
    align-items: center !important;
    margin-top: auto !important;
    padding: 0.7rem 0.5rem !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
  }
  .user-profile .user-avatar {
    width: 34px !important; height: 34px !important;
    font-size: 0.7rem !important; border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .user-profile .user-profile-details {
    display: block !important; flex: 1; min-width: 0;
  }
  .user-profile #userInfo { font-size: 0.78rem !important; }
  .user-profile #userRole { font-size: 0.65rem !important; }
  .user-profile .btn { padding: 0 !important; font-size: 0.85rem !important; }

  /* ---------- OVERLAY ---------- */
  /* Sin backdrop-filter y con visibility:hidden cuando está cerrado:
     un overlay fijo a pantalla completa con blur siempre activo forzaba
     composición GPU continua y causaba parpadeo en móvil. */
  #sidebarOverlay.sidebar-overlay,
  .sidebar-overlay {
    display: block !important;
    position: fixed !important;
    top: var(--m-header) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1240 !important;
    transition: opacity 0.28s ease, visibility 0.28s ease !important;
    border: none !important;
    width: auto !important; height: auto !important;
    padding: 0 !important; margin: 0 !important;
  }
  .app-shell.is-sidebar-open .sidebar-overlay,
  #appSection.is-sidebar-open #sidebarOverlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Hide extra toggle buttons */
  .sidebar-mobile-toggle,
  #mobileSidebarToggle {
    display: none !important;
  }
  .sidebar-swipe-zone {
    display: block !important;
    position: fixed !important;
    top: var(--m-header) !important;
    left: 0 !important;
    width: 20px !important;
    bottom: 0 !important;
    z-index: 1230 !important;
  }

  /* ---------- MAIN CONTENT ---------- */
  .main-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .module-section {
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: 24px !important;
  }

  /* POS & Mesas need full height for internal scroll/flex layouts */
  #ventas.module-section,
  #mesas.module-section {
    height: 100% !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .module-centered:not(.d-none) {
    display: block !important;
  }
  .module-centered {
    padding-inline: 0.75rem !important;
  }
  .module-centered > * { width: 100% !important; }

  /* ---------- HIDE DJ FLOATING PILLS ---------- */
  .top-center-stack {
    display: none !important;
  }

  /* ---------- POS / VENTAS ---------- */
  /* Solo los layouts principales pasan a columna (un selector global
     .d-flex.h-100 rompía otros layouts de la app en móvil) */
  #ventas .bar-command-layout.d-flex.h-100,
  #mesas .bar-command-layout.d-flex.h-100 {
    flex-direction: column !important;
  }

  /* El switch "Venta directa" es decorativo (un solo botón): fuera en móvil */
  #ventas .bar-command-switch {
    display: none !important;
  }

  .bar-command-title,
  .bar-command-topline .text-secondary.small,
  .bar-command-stats {
    display: none !important;
  }

  .bar-command-hero {
    padding: 0.5rem 0.65rem 0.4rem !important;
  }
  .bar-command-topline {
    margin-bottom: 0.3rem !important;
  }

  .pos-product-container {
    padding: 0.5rem 0.6rem 96px 0.6rem !important;
    gap: 0.6rem !important;
  }

  /* Tarjetas de producto: compactas, limpias, táctiles.
     Los selectores con #id son necesarios: style.css tiene reglas
     "#ventas #productGrid.product-grid" con !important que ganan
     a un selector de clase simple. */
  .product-grid,
  #ventas #productGrid.product-grid,
  #mesas #tableProductGrid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }
  .product-card {
    padding: 0.5rem 0.55rem 0.65rem !important;
    border-radius: 16px !important;
    background: rgba(15, 23, 42, 0.78) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .product-card:active {
    transform: scale(0.97) !important;
    border-color: rgba(139,92,246,0.45) !important;
  }
  /* La etiqueta de categoría roba espacio en tarjetas pequeñas */
  .product-card .product-badge { display: none !important; }
  .product-img-container,
  #ventas .product-card .product-img-container {
    height: 92px !important;
    border-radius: 12px !important;
    margin-bottom: 0.45rem !important;
    background: rgba(0,0,0,0.22) !important;
    flex-shrink: 0 !important;
  }
  /* Nombre: hasta 2 líneas en vez de truncar con "…" en una sola */
  .product-card .product-name {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.44em;
  }
  /* Precio y stock en una sola fila */
  .product-card .product-info .mt-2 {
    margin-top: 0.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.4rem !important;
  }
  .product-card .product-price {
    font-size: 0.84rem !important;
    padding: 0.24rem 0.6rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .product-card .stock-indicator {
    font-size: 0.62rem !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
  }

  /* ── Hoja del carrito (ventas) ──
     ABSOLUTE dentro de #ventas, NO fixed: .main-content recibe transform
     (gesto del sidebar) y re-ancla los fixed; además la sección mide el
     área visible REAL (sin depender de dvh/barra de URL), así el botón
     COBRAR nunca queda fuera de pantalla. */
  #ventas.module-section {
    position: relative !important;
  }
  #ventas .pos-cart {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
  }
  #ventas .pos-cart.cart-sheet-open {
    height: 94% !important;
    max-height: 94% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #ventas .pos-cart .cart-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  #ventas .pos-cart .cart-footer {
    flex-shrink: 0 !important;
    padding: 0.65rem 0.85rem 0.85rem !important;
  }
  /* Barra verde "Ver ticket / Cobrar": anclada a la sección */
  #ventas .mobile-cart-bar {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 60 !important;
  }
  /* Backdrop de la hoja: cubre solo la sección */
  #ventas .cart-sheet-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 55 !important;
  }
  #ventas .pos-cart { z-index: 70 !important; }
  .quick-ticket-pay {
    padding: 0.65rem 0.8rem !important;
    font-size: 0.86rem !important;
  }

  /* ── Pantalla de cobro (checkout de ventas) ── */
  .pos-checkout-overlay { padding: 0.7rem !important; }
  .pos-checkout-head h4 { font-size: 1.05rem !important; }
  .pos-checkout-body { gap: 0.6rem !important; }
  .pos-checkout-card {
    padding: 0.8rem !important;
    border-radius: 14px !important;
  }
  /* Medios de pago a 2 columnas (style.css los forzaba a 1 columna larga
     y empujaba los botones fuera de pantalla) */
  .pos-payment-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .pos-payment-grid .payment-method-row label {
    font-size: 0.66rem !important;
    margin-bottom: 0.25rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .pos-payment-grid .input-modern {
    padding: 0.55rem 0.7rem !important;
    font-size: 0.95rem !important;
  }
  .pos-checkout-change {
    margin-top: 0.6rem !important;
    padding-top: 0.6rem !important;
  }
  .pos-checkout-change span:last-child { font-size: 1.15rem !important; }
  /* Cancelar / Procesar: en fila, visibles, con safe area */
  .pos-checkout-actions {
    flex-direction: row !important;
    flex-shrink: 0 !important;
    gap: 0.5rem !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .pos-checkout-actions .btn {
    padding: 0.7rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Category pills */
  .category-scroll {
    gap: 0.4rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.2rem 0 !important;
  }
  .category-pill {
    padding: 0.38rem 0.75rem !important;
    font-size: 0.72rem !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
  }
  .category-pill .category-actions {
    display: none !important;
  }

  /* Search bar */
  .bar-command-hero input[type="text"],
  .bar-command-hero .input-modern {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
  }

  /* Switch buttons */
  .bar-command-switch {
    padding: 0.2rem !important; gap: 0.2rem !important;
  }
  .bar-command-switch-btn {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.72rem !important;
  }

  /* ═══════════ MESAS — vista móvil: CUADRÍCULA DE TARJETAS ═══════════
     El plano de escritorio (posiciones absolutas en %) no es usable en
     un teléfono: las mesas se encimaban. En móvil se muestran como
     tarjetas en una cuadrícula; el plano sigue intacto en escritorio. */

  #mesas .bar-command-layout {
    height: 100% !important;
    overflow: hidden !important;
  }
  /* flex:1 1 0 + min-height:0 son OBLIGATORIOS: sin ellos el contenedor
     crece con el contenido (min-height:auto de flexbox), nunca hay
     overflow propio y el scroll no funciona. */
  #mesas #tablesMapContainer {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Barra superior fija y compacta (sin controles de zoom: no hay plano) */
  #mesas .map-toolbar {
    position: sticky !important;
    top: 0 !important;
    flex: 0 0 auto !important;
    z-index: 30 !important;
    padding: 0.5rem 0.6rem !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
    background: linear-gradient(180deg, rgba(5,10,25,0.96) 60%, rgba(5,10,25,0)) !important;
  }
  #mesas .map-toolbar .glass-panel {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.64rem !important;
  }
  #mesas #mapZoomControls [onclick^="changeMapZoom"],
  #mesas #mapZoomControls #zoomBadge,
  #mesas #mapZoomControls .vr {
    display: none !important;
  }

  /* Edición del plano y FABs: no aplican a la vista de tarjetas */
  #mesas #editFab,
  #mesas #editMapControls {
    display: none !important;
  }

  /* Área de mesas → cuadrícula (anula el lienzo del plano y los estilos
     inline de posición/tamaño que pone el JS) */
  #mesas #tablesArea {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    gap: 0.6rem !important;
    align-content: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    padding: 0.3rem 0.75rem 90px !important;
    flex: 1 1 auto !important;
  }
  /* Cada mesa = tarjeta. position:relative (no static) para que el badge
     de "Unidas" (absolute) siga anclado a su tarjeta. */
  #mesas .table-item {
    position: relative !important;
    transform: none !important;
    width: auto !important;
    height: 96px !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    z-index: auto !important;
  }
  #mesas .table-item:hover,
  #mesas .table-item:active {
    transform: none !important;
  }
  #mesas .table-item:active .table-surface {
    border-color: rgba(139,92,246,0.55) !important;
  }
  #mesas .table-item .table-surface {
    border-radius: 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Sillas decorativas, tooltips de hover y elementos del plano: fuera */
  #mesas .chair,
  #mesas .table-info-overlay,
  #mesas .merge-group-box,
  #mesas .floor-element {
    display: none !important;
  }
  /* Tipografía legible (anula los tamaños inline calculados para el plano) */
  #mesas .table-item .table-surface > i {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }
  #mesas .table-item .table-surface > span.fw-bold {
    font-size: 0.78rem !important;
  }
  #mesas .table-item .table-card-total {
    font-size: 0.74rem !important;
  }
  #mesas .table-item .table-card-sub {
    font-size: 0.6rem !important;
  }
  #mesas .merged-map-badge {
    top: 4px !important;
    right: 4px !important;
  }

  /* DETAIL PANEL → hoja a pantalla completa.
     IMPORTANTE: position absolute (anclado a #mesas, que es
     position-relative y llena el área bajo el header), NO fixed:
     .main-content recibe transform con el gesto/apertura del sidebar
     y un ancestro con transform re-ancla los fixed → panel descolocado. */
  #mesas #tableDetailPanel {
    width: 100% !important;
    max-width: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: 1100 !important;
  }

  /* Inner table POS content → stacked column */
  #mesas #tableContent {
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
  }
  /* Product area: top, scrollable */
  #mesas #tableContent > .flex-grow-1 {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header de mesa ULTRA compacto: si el hero es alto, el área de
     productos queda en 0px y el contenido se encima con el carrito. */
  #mesas #tableContent .bar-command-hero {
    padding: 0.5rem 0.6rem 0.4rem !important;
    flex-shrink: 0 !important;
  }
  #mesas #tableContent .bar-command-topline {
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    align-items: center !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    margin-bottom: 0.35rem !important;
  }
  #mesas #tableContent .bar-command-title {
    font-size: 1rem !important;
    display: block !important;
    white-space: nowrap !important;
  }
  /* Ocultar el rótulo "Mesa" (el nombre ya lo dice) */
  #mesas #tableContent .bar-command-topline > div:first-child > .text-secondary.small {
    display: none !important;
  }
  #mesas #tableContent .bar-command-topline > div:first-child {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  #mesas #tableContent .bar-command-hero .d-flex.gap-3.mb-3 {
    margin-bottom: 0.4rem !important;
  }
  /* Búsqueda compacta */
  #mesas #tableProductSearch {
    padding: 0.45rem 0.7rem 0.45rem 2.3rem !important;
    font-size: 0.8rem !important;
  }
  /* Categorías: una sola línea con scroll */
  #mesas #tableCategoryList {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  #mesas #tableCategoryList::-webkit-scrollbar { display: none !important; }
  /* Tira de cuentas (clientes): altura propia, sin desbordar */
  #mesas #tableOrdersList {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 64px !important;
    scrollbar-width: none !important;
  }
  #mesas #tableOrdersList::-webkit-scrollbar { display: none !important; }
  /* Productos: SIEMPRE con espacio visible y scroll propio */
  #mesas #tableContent .pos-product-container {
    flex: 1 1 auto !important;
    min-height: 140px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.5rem 0.6rem 0.8rem !important;
  }
  /* Action buttons row: horizontal scroll strip, no overflow */
  #mesas #tableContent .bar-command-topline .d-flex.flex-column {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    align-items: stretch !important;
  }
  #mesas #tableContent .bar-command-topline .d-flex.gap-2 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
  }
  #mesas #tableContent .bar-command-topline .d-flex.gap-2::-webkit-scrollbar {
    display: none !important;
  }
  #mesas #tableContent .bar-command-topline .btn {
    flex-shrink: 0 !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
  /* La X de cerrar SIEMPRE fija en la esquina (fuera de la tira con
     scroll horizontal, donde podía quedar inaccesible) */
  #mesas #tableContent .bar-command-hero {
    position: relative !important;
  }
  #mesas #closeTablePanel {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    z-index: 50 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 0.95rem !important;
  }
  /* Despejar la esquina para que nada quede debajo de la X */
  #mesas #tableContent .bar-command-topline {
    padding-right: 46px !important;
  }

  /* Productos del picker de mesa: tarjetas compactas en 2 columnas */
  #mesas #tableProductGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  #mesas .table-add-product-name {
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
  }
  #mesas .table-add-product-price {
    font-size: 0.78rem !important;
  }

  /* CART → bottom block with own scroll, COBRAR always visible */
  #mesas #tableCart.pos-cart {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    max-height: 40vh !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 18px 18px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #mesas #tableCart .cart-header {
    padding: 0.55rem 0.85rem !important;
  }
  #mesas #tableCart .cart-items {
    flex: 1 1 auto !important;
    min-height: 60px !important;
    overflow-y: auto !important;
  }
  #mesas #tableCart .cart-footer {
    flex-shrink: 0 !important;
    padding: 0.6rem 0.85rem calc(0.7rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Cobro de mesa: pantalla completa, compacto, con scroll ──
     absolute dentro del panel (NO fixed: ver nota del panel) */
  #mesas #tableCheckoutArea {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1200 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 12, 24, 0.98) !important;
  }
  /* El contenedor interno tiene h-100: en móvil debe crecer con el
     contenido para que se pueda hacer scroll hasta PROCESAR COBRO */
  #mesas #tableCheckoutArea > .h-100 {
    height: auto !important;
    min-height: 100% !important;
    padding: 0.9rem 0.8rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mesas #tableCheckoutArea h2 { font-size: 1.15rem !important; }
  #mesas #tableCheckoutArea .mb-4.mb-md-5 { margin-bottom: 0.7rem !important; }
  #mesas #tableCheckoutArea .row {
    overflow: visible !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0.8rem;
  }
  #mesas #tableCheckoutArea .col-md-6 {
    width: 100% !important;
  }
  #mesas #tableCheckoutArea #checkoutItemsList {
    max-height: 150px !important;
    padding: 0.6rem !important;
    flex: 0 0 auto !important;
  }
  #mesas #tableCheckoutArea .glass-panel.p-4 { padding: 0.8rem !important; }
  #mesas #tableCheckoutArea h5 { margin-bottom: 0.5rem !important; }
  /* Medios de pago en cuadrícula 2×2 compacta */
  #mesas #tableCheckoutArea .d-flex.flex-column.gap-3.flex-grow-1 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  #mesas #tableCheckoutArea .payment-method-row {
    padding: 0.55rem 0.65rem !important;
  }
  #mesas #tableCheckoutArea .payment-method-row label {
    font-size: 0.62rem !important;
    margin-bottom: 0.25rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #mesas #tableCheckoutArea .payment-method-row .input-modern {
    padding: 0.55rem 0.7rem !important;
    font-size: 1rem !important;
  }
  /* La caja de CAMBIO ocupa el ancho completo */
  #mesas #tableCheckoutArea .d-flex.flex-column.gap-3.flex-grow-1 > .p-4 {
    grid-column: 1 / -1 !important;
    padding: 0.7rem 0.85rem !important;
  }
  #mesas #tableCheckoutArea #tableChange { font-size: 1.2rem !important; }
  /* Botones CANCELAR / PROCESAR COBRO */
  #mesas #tableCheckoutArea .mt-4.mt-md-5.d-flex.gap-3 {
    margin-top: 0.9rem !important;
    gap: 0.5rem !important;
  }
  #mesas #tableCheckoutArea .mt-4.mt-md-5.d-flex.gap-3 .btn {
    padding: 0.7rem 0.9rem !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
  }

  /* Las mesas (.table-item) conservan su transform translate(-50%,-50%)
     de style.css; el tamaño del lienzo lo maneja applyMapZoom() en JS. */

  /* ---------- DASHBOARD ---------- */
  .kpi-value { font-size: 1.5rem !important; }
  .kpi-icon-container { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
  .premium-card { border-radius: 18px !important; }

  /* ---------- HUB ---------- */
  #hub .glass-panel { padding: 1rem !important; }
  #hub .glass-panel h5 { font-size: 0.95rem !important; }

  /* ---------- HISTORIAL ---------- */
  .hs-topbar {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .hs-topbar-right { width: 100% !important; }
  .hs-search-wrap { width: 100% !important; }
  .hs-search-wrap input { font-size: 0.82rem !important; }
  .hs-btn span { display: none !important; }

  /* ---------- INVENTORY ---------- */
  .inventory-toolbar-header {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  /* Editor de producto (drawer): pantalla completa y compacto */
  #inventoryDrawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 12, 24, 0.99) !important;
  }
  #inventoryDrawer > .p-5 {
    padding: 0.9rem 0.85rem calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  #inventoryDrawer .mb-5 { margin-bottom: 0.9rem !important; }
  #inventoryDrawer #productFormTitle { font-size: 1.1rem !important; }
  #inventoryDrawer #productForm.row {
    --bs-gutter-x: 0.6rem;
    --bs-gutter-y: 0.7rem;
  }
  /* Área de foto compacta */
  #inventoryDrawer #productPreview {
    width: 64px !important;
    height: 64px !important;
    border-width: 2px !important;
  }
  #inventoryDrawer .p-4.rounded-4 {
    padding: 0.7rem !important;
    gap: 0.6rem !important;
  }
  #inventoryDrawer .me-3 { margin-right: 0.25rem !important; }
  #inventoryDrawer .input-modern {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.88rem !important;
  }
  #inventoryDrawer .form-label {
    margin-bottom: 0.25rem !important;
    font-size: 0.62rem !important;
  }
  /* Campos numéricos: los col-4 (33% — apretadísimo en un teléfono)
     pasan a 2 columnas */
  #inventoryDrawer #productForm .col-4 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
  #inventoryDrawer #saveProductBtn {
    padding: 0.7rem 1rem !important;
    font-size: 0.92rem !important;
  }

  /* ---------- GENERAL FIXES ---------- */
  /* All modules no horizontal overflow */
  #mesas, #ventas, #historial, #inventario,
  #dashboard, #hub, #gastos, #caja, #admin, #comparativa, #dj, #comandas {
    overflow-x: hidden !important;
  }

  /* Glass panels compact */
  .module-section > .glass-panel,
  .module-section .glass-panel.p-4 {
    padding: 0.85rem !important;
    border-radius: 14px !important;
  }

  /* HTML tables scrollable */
  .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* SweetAlert mobile */
  .swal2-popup {
    width: min(92vw, 400px) !important;
    padding: 1rem 1.2rem !important;
    border-radius: 18px !important;
  }

  /* Toast */
  .toast-modern {
    min-width: 240px !important;
    max-width: 90vw !important;
    font-size: 0.82rem !important;
    bottom: 16px !important;
  }

  /* Typography */
  h1, .fw-black[style*="font-size: 2"] {
    font-size: 1.4rem !important;
  }
}

/* ────────────────────────────────────────────
   3.  ≤767px — EXTRA-SMALL SCREENS
   ──────────────────────────────────────────── */
@media (max-width: 767px) {

  /* DJ mobile layout is handled by the comprehensive tab system in
     style.css (≤767px, lines ~11006-11287). We only add safety here. */
  #dj.module-section {
    padding: 0.55rem !important;
    overflow-x: hidden !important;
  }
  /* IMPORTANTE: el wrap NO puede tener overflow:hidden — recortaba el
     dropdown absoluto de resultados (#congaBrowserViewport) y por eso
     la búsqueda DJ "no mostraba resultados" en móvil. */
  .vdj-smart-search-wrap, .vdj-search-input-row {
    max-width: 100% !important; width: 100% !important;
    box-sizing: border-box !important;
  }
  .vdj-search-input-row { overflow: hidden !important; }
  .vdj-search-input { min-width: 0 !important; width: 100% !important; }

  /* Resultados de búsqueda DJ: en flujo (no absolute) para que ningún
     ancestro con overflow los recorte, ancho completo y alto acotado. */
  .dj-browser-dropdown-inline {
    position: static !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 55vh !important;
    margin-top: 6px !important;
  }

  /* Tighter module padding on small screens (except POS/Mesas which
     manage their own full-height layout) */
  .module-section:not(#ventas):not(#mesas):not(#dj) {
    padding: 0.5rem !important;
  }
}

/* ────────────────────────────────────────────
   4.  ≤480px — TINY PHONES
   ──────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --m-drawer-w: 260px;
  }

  .product-img-container {
    height: 72px !important;
  }
  .product-title {
    font-size: 0.72rem !important;
  }
  .product-price {
    font-size: 0.76rem !important;
  }

  .kpi-value { font-size: 1.3rem !important; }

  .nav-item {
    padding: 0.55rem 0.75rem !important;
  }
  .nav-item span {
    font-size: 0.8rem !important;
  }
}