/* 🔹 Sección de la barra de búsqueda */
.search-bar-section {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-right: 1px solid #ddd;
}

.search-bar-section:last-child {
  border-right: none;
}

.search-bar-section input {
  font-size: 0.9rem;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
}

.search-bar-section i {
  font-size: 1.2rem;
  color: #fdd835; /* Amarillo para los iconos */
}

/* 🔹 Efecto hover para enlaces */
.nav-link {
  transition: color 0.3s ease, background-color 0.3s ease;
  margin-right: 1rem;
}

.nav-link:hover {
  color: white !important; /* Texto amarillo brillante al pasar el ratón */
  /* background-color: rgba(0, 0, 0, 0.1); */ /* Fondo sutil opcional */
  border-radius: 5px; /* Bordes redondeados para mejor visibilidad */
}

/* 🔹 Ajustes específicos para móvil (pantallas < 992px) */
@media (max-width: 991.98px) {
  /* Evitar que el contenedor principal haga wrap */
  .navbar .container-fluid {
    flex-wrap: nowrap;
  }

  /* El logo no crece y tiene altura menor en móvil */
  .navbar-brand {
    flex: 0 0 auto;
  }
  .navbar-brand img {
    height: 44px; /* ajusta si necesitas 48px */
  }

  /* El bloque central debe poder encogerse y tener ancho máximo */
  .navbar .flex-grow-1 {
    flex: 0 1 auto;     /* no grow; sí shrink */
    min-width: 0;       /* clave para permitir el shrink de contenidos flex */
    margin-left: 8px;   /* mx-1 o mx-2 en HTML puede sumar; mantenlo contenido */
    margin-right: 8px;
  }

  /* El enlace del buscador se limita y trunca */
  .search-link {
    /* max-width: 70%;           */
    /* limita el ancho del enlace de búsqueda */
    white-space: nowrap;     /* no partir líneas */
    overflow: hidden;        /* oculta sobrante */
    text-overflow: ellipsis; /* ... */
    display: inline-flex;    /* asegura flex interno sin ocupar toda la fila */
    align-items: center;
  }

  .search-text {
    font-size: 0.85rem; /* reduce tamaño en pantallas pequeñas */
  }

  /* El botón hamburguesa no crece y se alinea a la derecha */
  .navbar-toggler {
    flex: 0 0 auto;      /* sin grow ni shrink */
    margin-left: auto;   /* empuja a la derecha */
    align-self: center;  /* centra verticalmente */
  }
}