/* ===== NAVBAR ===== */
    .navbar {
      transition: all 0.3s ease;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      background: linear-gradient(135deg, var(--primary-color-nav), var(--secondary-color-nav));
    }

    .navbar-brand {
      color: var(--light-color);
      font-size: 1.5rem;
      font-weight: 700;
    }

    .navbar-brand:hover {
      color: #d5dde6;
      font-size: 1.5rem;
      font-weight: 700;
    }

    .dropdown-menu {
      box-shadow: 5px 8px 15px -4px rgba(0,0,0,0.19);
      border: none;
      border-radius: 10px;
    }

    .nav-link{
      color: var(--light-color);
    }

    .nav-link:hover{
      color: #d5dde6;
      transition: 0.1s ease;
    }

    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
      color: #d5dde6;
      transition: 0s ease;
    }

    


    /* Botón hamburguesa sin borde y con animación a X */
    .navbar-toggler {
      border: none !important;
      padding: 0.25rem 0.5rem;
      outline: none !important;
      box-shadow: none !important;
    }

    .navbar-toggler:focus {
      box-shadow: none !important;
    }

    .navbar-toggler-icon {
      background-image: none;
      position: relative;
      width: 30px;
      height: 20px;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after,
    .navbar-toggler-icon span {
      content: '';
      position: absolute;
      width: 100%;
      height: 3px;
      background-color: #fff;
      border-radius: 3px;
      transition: all 0.3s ease;
    }

    .navbar-toggler-icon::before {
      top: 0;
    }

    .navbar-toggler-icon span {
      top: 50%;
      transform: translateY(-50%);
    }

    .navbar-toggler-icon::after {
      bottom: 0;
    }

    /* Animación a X cuando está abierto */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span {
      opacity: 0;
    }

    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
      bottom: 50%;
      transform: translateY(50%) rotate(-45deg);
    }




/* agregado por hoverrrr ************ */

/* ===== DROPDOWN CON HOVER EN DESKTOP ===== */
@media (min-width: 992px) {  /* Solo en pantallas grandes (lg y superiores) */
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0; /* Evita salto feo */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Animación suave de aparición */
  .navbar .dropdown-menu {
    display: block; /* Necesario para que funcione el hover */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    pointer-events: none; /* Evita que interfiera cuando está oculto */
  }

  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    pointer-events: auto;
  }

  

  /* Evita que el link del dropdown sea clicable en hover (opcional pero recomendado) */
  .navbar .dropdown-toggle {
    cursor: pointer;
  }
}