/* Estilo general del header */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  background-color: #ffffff;
  border-bottom: 2px solid rgba(77, 190, 77, 0.397);
  padding: 0 40px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center; /* Centra horizontalmente el contenido */
}
/* Aseguramos que la barra superior ocupe todo el espacio real */
/* Barra superior: logo y redes sociales */
.top-bar {
  width: 100% !important;
  padding: 0 5px !important;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espacio entre logo, menú y redes */
}

/* Logo */
.logo img {
  width: 110px;
  height: auto;
  display: block;
}

/* Redes sociales */
.social-icons a {
  color: black;
  font-size: 24px;
  margin: 0 8px;
  text-decoration: none;
}
.social-icons a:hover {
  color: #4dbc4b;
}

/* Botón hamburguesa para móvil */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

/* Menú principal */
.menu {
  flex: 1;
  background-color: #fff;
  transition: max-height 0.3s ease;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Lista del menú */
.menu ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.menu li {
  margin: 0px;
}
.menu a {
  font-family: "Roboto", sans-serif;
  text-decoration: solid;
  font-size: 18px;
  color: black;
  padding: 10px 12px;
}
.menu a:hover {
  background-color: #f0f0f0;
  border-radius: 5px;
}

/* Para la flecha */
.menu li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* por si quieres el collapse de submenús */
}

.menu li > a .arrow {
  margin-left: 8px;
  font-size: 12px;
  transition: transform 0.3s;
}

/* Opcional: rotar flecha en submenú abierto */
.menu li.open > a .arrow {
  transform: rotate(180deg);
}

/* Para los submenús */
.menu li ul {
  display: none; /* Para que se superponga al contenido */
  position: absolute; /* Hace que el submenú esté fuera del flujo */
  top: 60%; /* Posiciona justo debajo del li padre */
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 999; /* Para que esté por encima del resto */
}
.menu li:hover > ul,
.menu li.open > ul {
  display: block; /* Muestra el submenú al pasar el ratón o al abrir */
}

/* Contenedor del buscador: Lo dejamos relativo para controlar su flujo */
.search-bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* Si usas una clase JS como 'active' para abrir el buscador, esta regla lo mostrará abajo */
.search-bar.active .input,
.search-bar:focus-within .input {
  display: block !important;
  position: absolute !important;
  right: 0 !important;
  width: 200px !important;
  background-color: white !important;
  border-radius: 100px !important;
  border: 1px solid #ccc !important;
  padding: 5px !important;
}

/* Ajustamos el botón azul de la lupa para mantenerlo funcional y clickeable */
.search-bar button.icon {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: #0d6efd !important;
  border: none !important;
  cursor: pointer !important;
}

/* ==========================================================
   Estilos responsivos (Móviles) - Corregido Lupa Activa
   ========================================================== */
@media (max-width: 762px) {
  /* Reducimos el alto y padding del header en pantallas pequeñas */
  .header {
    padding: 0!important;
    height:100px !important;
  }

  /* Aseguramos que la barra superior ocupe todo el espacio real */
  .top-bar {
    width: 100% !important;
  }

  /* Reducimos el logo para darle aire a los iconos */
  .logo img {
    width: 85px !important;
  }

  /* Escalamos hacia abajo las redes sociales */
  .social-icons a {
    font-size: 27px !important;
    margin: 0 4px !important;
  }

  /* Contenedor del buscador: Lo dejamos relativo para controlar su flujo */
  .search-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  /* REAJUSTE DE INPUT: En lugar de ocultarlo con display:none, lo hacemos colapsable
     para que cuando se active, se despliegue elegantemente */

  /* Si usas una clase JS como 'active' para abrir el buscador, esta regla lo mostrará abajo */
  .search-bar.active .input,
  .search-bar:focus-within .input {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    width: 180px !important;
    background-color: white !important;
    border-radius: 100px !important;
    border: 1px solid #ccc !important;
    padding: 5px !important;
  }

  /* Ajustamos el botón azul de la lupa para mantenerlo funcional y clickeable */
  .search-bar button.icon {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: #0661e8 !important;
    border: none !important;
    cursor: pointer !important;
  }

  /* Mostrar botón hamburguesa bien alineado */
  .hamburger-menu {
    display: flex !important;
    font-size: 27px !important;
    padding: 0  !important;
    align-items: center;
  }

  /* Adaptamos el contenedor del menú para que caiga verticalmente */
  .menu {
    max-height: 0;
    position: absolute;
    top: 85px; /* Cae justo donde termina el header móvil */
    left: 0;
    width: 100%;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }

  .menu ul {
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

  .menu li {
    width: 100%;
  }

  /* Mostrar menú cuando tiene la clase dinámica activa */
  .menu.active {
    max-height: 500px;
  }
}