/* ══════════════════════════════
   MANEKI POS — RESPONSIVE SYSTEM
   Desktop ≥1024 | Tablet 768-1023 | Mobile <768
══════════════════════════════ */

/* ── TABLET (768–1023px) ─────────────────── */
@media (max-width: 1023px) {
  /* Sidebar se convierte en overlay */
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 200;
  }
  #sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Overlay oscuro detrás del sidebar */
  #sidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 199;
  }
  #sidebarOverlay.visible { display: block; }

  /* Main content ocupa todo el ancho */
  .main-content, #mainContent, main, .ml-64 {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Topbar con hamburger */
  #mobileTopbar {
    display: flex !important;
  }

  /* FIX-4: topbar encima del sidebar overlay (199) y sidebar (200) */
  #mobileTopbar {
    z-index: 201 !important;
  }

  /* Kanban: scroll horizontal en tablet */
  #vistaKanban, .kanban-board, [id*="kanban"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  /* FIX-2: scroll horizontal solo en contenedores, no en la tabla misma (evita desalinear colgroup) */
  .table-responsive, .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Para tablas sin contenedor responsive, solo limitar ancho sin romper display */
  table {
    max-width: 100%;
  }

  /* Cards en grid 2 columnas */
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── MOBILE (<768px) ──────────────────────── */
@media (max-width: 767px) {
  /* Cards en 1 columna */
  .grid-cols-4, .grid-cols-3, .grid-cols-2 {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* FIX-1: Bottom sheet — solo modales de nivel superior (no sub-paneles genéricos) */
  .modal-fullpage > div:first-child,
  #pedidoModal > div:first-child,
  #ptModal > div:first-child,
  #clientModal > div:first-child,
  #abonoPedidoModal > div:first-child,
  #bulkPrecioModal > div:first-child,
  .modal > div:first-child,
  .modal > .bg-white,
  .modal > [class*="rounded"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Selector genérico [id$="Modal"] — solo max-height y overflow, sin reposicionar */
  [id$="Modal"] > div:first-child {
    max-height: 92vh !important;
    overflow-y: auto !important;
  }

  /* Modales como bottom sheet */
  .modal {
    align-items: flex-end !important;
  }

  /* Kanban: scroll horizontal en mobile */
  #vistaKanban, .kanban-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .kanban-col {
    min-width: 280px;
    scroll-snap-align: start;
  }

  /* Texto más pequeño en tablas */
  table td, table th {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }

  /* Ocultar columnas no esenciales en mobile */
  .col-hide-mobile { display: none !important; }

  /* Formularios: una columna */
  .grid.grid-cols-2,
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Bottom nav visible en mobile */
  #mobileBottomNav {
    display: flex !important;
    /* FIX-3: safe area inset para notch/home indicator en iOS */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Espacio para bottom nav */
  body { padding-bottom: 60px; }

  /* Accesos rápidos: 3 columnas en mobile */
  #accesosRapidos {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Búsqueda global: full width */
  #busquedaGlobalOverlay > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  /* Pipeline bar wrap */
  #_kanbanPipelineBar {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Stats cards más compactas */
  .stat-card {
    padding: 12px !important;
  }

  /* Texto de sección header más pequeño */
  h2.section-title {
    font-size: 1.1rem !important;
  }

  /* FIX-5: botón de sonido encima del home indicator y bottom nav */
  #mk-sound-btn {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── DESKTOP (≥1024px) — asegurar sidebar visible ── */
@media (min-width: 1024px) {
  #sidebar {
    transform: translateX(0) !important;
  }
  #mobileTopbar { display: none !important; }
  #mobileBottomNav { display: none !important; }
  #sidebarOverlay { display: none !important; }
}

/* ── PRINT — sin sidebar ni nav mobile ── */
@media print {
  #sidebar, #mobileTopbar, #mobileBottomNav, #sidebarOverlay { display: none !important; }
  .main-content, #mainContent, main, .ml-64 { margin-left: 0 !important; }
}