/* La barra lateral solo debe tener un ancho fijo en pantallas grandes */
.sidebar {
  width: 280px;
}

/* Regla de responsividad: Ocultar la barra lateral en móviles por defecto */
#sidebar-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
  z-index: 40; /* Mayor que el contenido principal */
}

/* Mostrar la barra lateral cuando la clase 'active' está presente */
#sidebar-menu.active {
  transform: translateX(0);
}

/* En pantallas grandes (md:), forzamos que el sidebar sea visible y estático */
@media (min-width: 768px) {
  #sidebar-menu {
    transform: translateX(0);
    position: static; /* Ya no es fixed */
  }
}

/* Mostrar u ocultar el modal */
.modal-active {
  display: flex !important;
}

/* Overlay para móvil cuando el menú está abierto */
#menu-overlay {
  z-index: 30;
}

.active {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.margin-auto {
  margin: 0 auto;
}