/* Fondo tenue para la barra de navegación */
.navbar {
  background: linear-gradient(90deg, #f8f9fa, #e9ecef);
}

/* Hover para los enlaces de navegación */
.nav-link {
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: #007bff !important;
}

.nav-link:hover::after,
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link::after {
  width: 0;
}

/* Dropdown ajustado */
.dropdown-container {
  max-width: 300px;
  margin: 0 auto;
}

#categorySelect {
  max-width: 250px;
}

/* Spinner centrado */
#loadingSpinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visibilidad permanente de enlaces del menú */
.navbar .navbar-nav .nav-link {
  display: block !important;
}

/* Configurar la estructura para que el footer esté en el fondo */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
}

.content {
  flex: 1; /* Hacer que el contenedor principal ocupe el espacio disponible */
}

footer, #footer {
  background-color: #343a40; /* Fondo oscuro */
  color: white;
  text-align: center;
  padding: 10px 0;
}

/* Ícono de detalle */
.detail-icon {
  font-size: 1.5rem;
  padding: 0.5rem;
  transition: color 0.3s ease, transform 0.2s ease;
}

.detail-icon:hover,
.detail-icon:focus {
  color: #0d6efd;
  transform: scale(1.25);
  cursor: pointer;
}

.detail-icon:active {
  transform: scale(1.15);
}

.custom-width {
  max-width: 200px;
}

#productTable_wrapper {
  width: 95%;
  margin: 0 auto; /* Centrar la tabla horizontalmente */
}