.nav-item {
  font-family:
    "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* TIPO DE FUENTE */
  font-size: 16px; /* TAMAÑO */
  font-weight: 600;
  color: #3553a5; /* COLOR */
}

.nav-item a {
  display: block; /* ← Ocupa todo el ancho del <li> */
  padding: 0.5rem 1rem; /* ← Mueve el padding AQUÍ */
  text-decoration: none; /* ← Quita subrayado */
  color: inherit; /* ← Hereda el color de .nav-item */
  border-radius: 4px; /* ← Para redondear el fondo */
  transition: all 0.3s ease; /* ← Transición suave */
}

.nav-item:hover a {
  color: black; /* COLOR AL PASAR EL RATÓN */
  background-color: #8fb9f9;
}

.nav-item.active a {
  color: rgb(255, 255, 255); /* COLOR DEL ELEMENTO ACTIVO */
  background-color: #0d6efd;
  font-weight: 600;
}