/* Estilo base del nav */
.navbar {
  position: fixed;      /* Cambiado a fixed para que quede fija */
  top: 0;              /* Posicionada en la parte superior */
  left: 0;             /* Pegada al lado izquierdo */
  right: 0;            /* Pegada al lado derecho */
  background-color: rgba(0, 134, 0, 0.1);
  padding: 15px 30px;
  overflow: hidden;
  z-index: 9999;       /* Para que quede por encima de otros elementos */
}

/* Menú de navegación */
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.navbar ul li a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  border-radius: 8px;
  background-color: transparent;
  transition: color 0.2s ease, background-color 0.3s ease;
}

/* Elemento activo */
.navbar ul li a.active {
  text-decoration: none;
  color: #860000; /* rojo oscuro */
  background-color: rgba(7, 5, 91, 1);
}

/* Hover */
.navbar ul li a:hover {
  color: #000;
  background-color: #28a745;
  animation: jump 0.4s;
}

/* Clic */
.navbar ul li a:active {
  transform: scale(0.95);
}

/* Animación de salto */
@keyframes jump {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Línea animada verde eléctrico arriba */
.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: #39ff14;
  animation: border-slide 2s linear infinite;
}

@keyframes border-slide {
  0% { left: -100%; }
  100% { left: 100%; }
}