/* Empuja el contenido debajo de la navbar fixed-top */
body {
  padding-top: 80px; /* ajusta a 70–100px si lo necesitas */
}

/* En pantallas pequeñas la navbar suele ocupar más alto */
@media (max-width: 991.98px) {
  body { padding-top: 96px; }
}

/* Panel de pestañas (navbar) más bonito y con un poco de espacio superior */
.navbar {
  margin-top: 12px;                /* mueve el panel un poco hacia abajo */
  background: #ffffff;
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: .35rem .75rem;
}

/* Links de módulos como “píldoras” */
.navbar .nav-link[data-module] {
  border-radius: 999px;
  padding: .5rem .95rem;
  margin: .25rem .25rem;
  color: #5a6a85;
  transition: all .15s ease-in-out;
}

.navbar .nav-link[data-module]:hover {
  background: #f3f6ff;
  color: #0d6efd;
  text-decoration: none;
}

.navbar .nav-link.active[data-module] {
  background: #e7f1ff;
  color: #0d6efd;
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.25);
}

/* Mejor distribución en pantallas pequeñas */
.navbar .navbar-nav {
  flex-wrap: wrap;
}