/* Contenedor principal del dropdown */
.inf-dropdown {
  position: relative; /* Para que el menú se posicione de forma absoluta respecto a este contenedor */
  display: inline-block;
}

/* Botón de despliegue */
.inf-dropdown-toggle {
  padding: 8px 16px;
  cursor: pointer;
  color: var(--white);
  border: none;
  outline: none;
}

/* Pequeña flecha (caret) al lado del texto del botón */
.inf-caret {
  margin-left: 5px;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Menú desplegable */
.inf-dropdown-menu {
  position: absolute ; 
  top: 100%; /* se ubica justo debajo del botón */
  left: 0;
  display: none; /* oculto por defecto */
  min-width: 160px;
  background-color: var(--white);
  border: 1px solid var(--gray-4);
  border-radius: 8px;
  z-index: 9999; /* para que aparezca encima de otros elementos */
  list-style: none; 
  margin: 2px 0 0;
  padding: 5px 0;
}

/* Cuando la clase .inf-open está presente, mostramos el menú */
.inf-dropdown.inf-open .inf-dropdown-menu {
  display: block;
}

/* Estilos de cada opción en el menú */
.inf-dropdown-menu li a {
  display: block;
  padding: 8px 16px;
  color: var( --black-1);
  text-decoration: none;
}

.inf-dropdown-menu li a:hover {
  background-color: var(--list-hover);
}