/* Contenedor del div */
 .c_container_tooltip {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  cursor: pointer;
}

/* Estilo del tooltip en sí */
.tooltiptext {
  width: 240px;
  visibility: hidden;
  background-color: #5078E7;
  color: #FFF;
  border-radius: 8px;
  padding: 12px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  /* top: calc(100% + 8px); */
  top: calc(100% - 12px);
  left: 50%;
  /* transform: translateX(-50%); */
  transform: translateX(-24%);
}

/* Flecha del tooltip */
.tooltiptext::before {
  content: "";
  position: absolute;
  top: -16px;
  /* left: 50%; */
  left: 24%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #5078E7 transparent;
}

/* Estilo base del tooltip */
.c_container_tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Responsividad para pantallas de 360px de ancho o más */
@media only screen and (min-width: 849px) {
  .tooltiptext {
    top: calc(100% - 4px);
  }
}