/* ════════════════════════════════════════════════════════════════════════
   PulsoLab — Sidebar compartido
   Componente único de navegación lateral usado en todas las pantallas
   (excepto login, admin y POS).
   Clases prefijadas .pl- para no chocar con estilos de las páginas.
   Requiere: assets/brand.css (variables --primary, --accent, etc.)
   Activación: <body class="has-pl-sidebar"> + <div id="sidebar-mount">
   ════════════════════════════════════════════════════════════════════════ */

/* Empuja el contenido para dejar espacio al sidebar fijo */
body.has-pl-sidebar { padding-left: 240px; }

.pl-sidebar {
  width: 240px; min-width: 240px;
  height: 100vh;
  background: #fff;
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0;
  z-index: 100;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  border-right: 1px solid var(--surface);
  font-family: var(--font);
}

/* El interior del menú lo pinta sidebar.js (clases pl2-*). Aquí solo queda
   el layout base: posición, ancho, hamburguesa y velo en móvil. */

/* Hamburguesa (mobile) — el componente la inyecta también */
.pl-sidebar-hamburger {
  display: none;
  position: fixed; top: 12px; left: 12px;
  z-index: 101;
  width: 40px; height: 40px;
  border: 1px solid var(--surface);
  background: #fff;
  border-radius: 8px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.pl-sidebar-hamburger .icon { width: 20px; height: 20px; color: var(--gray-dark); }

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

@media (max-width: 768px) {
  body.has-pl-sidebar { padding-left: 0; }
  .pl-sidebar { transform: translateX(-240px); }
  .pl-sidebar.open { transform: translateX(0); }
  .pl-sidebar-hamburger { display: flex; }
}