/* ═══════════════════════════════════════════
   FRITITRUCK — Diseño responsivo
   v2.6 — Header móvil mejorado
   ═══════════════════════════════════════════ */

/* ── Botón hamburguesa (solo móvil) ────── */
.menu-toggle {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 300;
  background: #0f4d2e; color: #fff;
  border: none; border-radius: 10px;
  width: 44px; height: 44px; font-size: 20px;
  cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Nombre de la página actual — solo visible en móvil */
.mobile-page-title {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  align-items: center;
  padding: 0 1rem 0 66px;
  font-size: 15px; font-weight: 700; color: var(--gray-900);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.mobile-page-title .mobile-page-name { flex: 1; }

/* Acciones rápidas en el header móvil */
.mobile-topbar-actions {
  display: none;
  position: fixed; top: 10px; right: 10px; z-index: 300;
  gap: 8px;
}
.mobile-topbar-actions .btn,
.mobile-topbar-actions .btn-logout {
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  background: #fff;
}

.sidebar-overlay      { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
.sidebar-overlay.open { display: block; }

/* ── Tablet ───────────────────────────── */
@media (max-width: 1024px) {
  .sidebar              { width: 220px; }
  .main                 { margin-left: 220px; padding: 1.25rem; }
  .venta-layout         { grid-template-columns: 1fr 300px; gap: 1rem; }
  .productos-grid       { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .stats-grid           { grid-template-columns: repeat(2, 1fr); }
  .card                 { overflow-x: auto; }
}

/* ── Móvil ───────────────────────────── */
@media (max-width: 768px) {
  .menu-toggle           { display: flex; }
  .mobile-topbar-actions { display: flex; }
  .mobile-page-title     { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    width: 260px;
    z-index: 200;
  }
  .sidebar.open { transform: translateX(0); }

  .main {
    margin-left: 0;
    padding: 1rem;
    padding-top: 72px; /* espacio para el header fijo */
  }

  .venta-layout         { grid-template-columns: 1fr; gap: 1rem; }
  .carrito-panel        { position: static; margin-top: 0; }
  .productos-grid       { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .stats-grid           { grid-template-columns: repeat(2, 1fr); }
  .modal                { max-width: 100%; max-height: 95vh; border-radius: 14px 14px 0 0; align-self: flex-end; }
  .modal-overlay        { align-items: flex-end; padding: 0; }
  table                 { min-width: 520px; }
}

/* ── Móvil pequeño ────────────────────── */
@media (max-width: 480px) {
  .productos-grid { grid-template-columns: repeat(3, 1fr); }
}