.influscience-grafico-persona{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.influscience-grafico-persona .title{
  padding-right: 2rem;
}

@media (min-width: 640px){
  .influscience-grafico-persona .title{
    max-width: 140px;
  }
}

.influscience-chart {
  border-bottom: 1px solid;
  border-left: 1px solid;
  display: inline-block;
  height: var(--widget-size);
  margin: 1rem;
  padding: 50px 0 0 0;
  position: relative;
  width: var(--widget-size);

  margin-left: 5rem !important; /* Corrección para mostrar leyenda */
}
.influscience-chart .line-chart {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: listCounter;
}

.influscience-chart .line-chart li{
  counter-increment: listCounter;
}

/* Leyenda en eje vertical*/
.influscience-chart .data-legend{
  position: absolute;
  bottom: calc(var(--y) - 16px);
  left: -5rem; /* Corrección para mostrar leyenda */
  color: var(--color);
}

.influscience-chart .data-line {
  background-color: var(--color);
  bottom: calc(var(--y) - 3px);
  height: 2px;
  left: 0;
  position: absolute;
  transform-origin: left bottom;
  width: calc(var(--x)*var(--step-size));
}

.influscience-chart .data-point {
  background-color: var(--color);
  border: 2px solid var(--color);
  border-radius: 50%;
  bottom: calc(var(--y) - 8px);
  height: 12px;
  left: calc(var(--x)*var(--step-size) - 8px);
  position: absolute;
  width: 12px;
  z-index: 1;
}

/* Tomar label del value e insertar despues de point con ::after */
.influscience-chart .data-label{
  position:absolute;
  bottom: calc(var(--y) - 16px);
  left: calc(var(--x)*var(--step-size) + 16px);
  color:  var(--color);
}

/* Escala en eje horizontal */