/* ═══════════════════════════════════════════
   FRITITRUCK — Diseño responsivo
   ═══════════════════════════════════════════ */

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

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

/* ── Tablet ───────────────────────────── */
@media (max-width: 1024px) {
  .sidebar              { width: 200px; }
  .main                 { margin-left: 200px; 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; }
  .sidebar              { transform: translateX(-100%); transition: transform 0.22s ease; width: 240px; z-index: 200; }
  .sidebar.open         { transform: translateX(0); }
  .main                 { margin-left: 0; padding: 1rem; padding-top: 64px; }
  .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); }
}