/* ============ POS SCREEN ============ */
.pos-grid { display: grid; }

/* ── Responsive POS ─────────────────────────────────────── */
@media (max-width: 768px) {
  .pos-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .ticket-panel { max-height: 35vh !important; }
  .cat-scroller { gap: 6px !important; }
  .cat-btn { padding: 6px 10px !important; font-size: 11px !important; }

  /* POS grid: column → row */
  #app .screen-content > div[style*="340px"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    border-radius: 12px;
  }
  #app .screen-content > div[style*="340px"] > div:first-child {
    width: 100% !important;
    max-height: 45vh;
    border-right: none !important;
    border-bottom: 2px solid #e2e8f0;
  }
  #ticket-items-list {
    max-height: 28vh !important;
    min-height: 80px;
  }
  #app .screen-content > div[style*="340px"] > div:last-child {
    flex: 1;
    overflow: hidden;
    min-height: 50vh;
  }
  #app div[style*="overflow-x:auto"][style*="flex-wrap:nowrap"],
  #app div[style*="overflow-x: auto"][style*="flex-wrap: nowrap"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #app div[style*="overflow-x:auto"][style*="flex-wrap:nowrap"]::-webkit-scrollbar { display: none; }
  #app div[style*="overflow-x:auto"] button[style*="padding:10px 14px"] {
    padding: 10px 11px !important;
    font-size: 11px !important;
    min-height: 40px;
  }
  #products-grid-wrap > div[style*="grid-template-columns"],
  #products-grid > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  #products-grid-wrap div[onclick*="addToTicket"],
  #products-grid div[onclick*="addToTicket"] { padding: 7px 5px !important; }
  #products-grid-wrap div[onclick*="addToTicket"] div[style*="font-size:24px"],
  #products-grid div[onclick*="addToTicket"] div[style*="font-size:24px"] { font-size: 18px !important; margin-bottom: 2px; }
  #cobrar-total-btn { font-size: 14px !important; }
}

@media (max-width: 600px) {
  #pos-mobile-tabs { display: flex !important; }
  .pos-grid-desktop { display: none !important; }
  .pos-mobile-panel { display: flex !important; }
  #cobrar-fab {
    display: flex !important;
    position: fixed !important;
    bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important; right: 0 !important;
    z-index: 500 !important;
    padding: 0 12px 8px !important;
  }
  /* Payment screen: single column */
  #app div[style*="grid-template-columns:1fr 360px"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  #products-grid-wrap > div[style*="grid-template-columns"],
  #products-grid > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}