#floating-button {
  position: fixed;
  bottom: 100px;
  right: 100px;
  z-index: 1000;
  cursor: pointer;
}

#floating-button #iconAPP {
  position: relative; /* Agrega posición relativa para controlar z-index */
  z-index: 1; /* Asegura que el icono esté delante del círculo */
}

#floating-button svg {
  width: 32px;
  height: 32px;
}

#icon-list svg {
  width: 32px;
  height: 32px;
}

#icon-list li {
  margin-bottom: 10px;
}

#icon-list {
  width: 1000px;
  display: none;
  position: absolute;
  bottom: 40px;
  right: 0;
  padding: 10px;
  border-radius: 5px;
}
#icon-list a {
  color: #ffffff;
}

#circleAPP {
  position: absolute;
  top: -55%; /* Ajusta la posición vertical del círculo según tu diseño */
  left: -55%; /* Ajusta la posición horizontal del círculo según tu diseño */
  width: 70px; /* Ajusta el ancho del círculo según tu diseño */
  height: 70px; /* Ajusta la altura del círculo según tu diseño */
  border-radius: 50%; /* Hacemos que el círculo tenga forma de círculo */
  background-color: #9d0311; /* Color rojo */
  z-index: 0; /* Aseguramos que el círculo esté detrás del botón */
}

#circleAPP:hover {
  background-color: #db141c; /* Color rojo con el hover*/
}

#iconAPP:hover + #circleAPP {
  background-color: #db141c; /* Color rojo con el hover*/
}

#dark-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #131b3ccc; /* Ajusta el último valor para controlar la opacidad */
  z-index: 999; /* Asegúrate de que esté por encima del botón flotante */
}
/* --------------------------------------------------------------------------------------- */
#icon-list li {
  position: relative;
}

#icon-list li::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px; /* Ajusta la posición de la línea vertical */
  width: 3px; /* Ancho de la línea vertical */
  height: 100%;
  background-color: #9d0311; /* Color de la línea vertical */
  opacity: 0; /* La línea está oculta inicialmente */
  transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}

#icon-list li:hover::after {
  opacity: 1; /* La línea se muestra al hacer hover sobre el elemento de la lista */
}
/* --------------------------------------------------------------------------------------- */
/* Estilos para pantallas pequeñas (teléfonos móviles) */
@media (max-width: 1200px) {
  #floating-button {
    display: none;
  }
}
/* --------------------------------------------------------------------------------------- */