.graph-bar-list{
  display:flex; flex-direction:column; gap:16px;
  --gb-circle:var(--graph-bar-circle-size, 224px);
  --gbs:calc(var(--gb-circle) / 224px);
  --gb-bar-height:var(--graph-bar-height, 64px);
}

.graph-bar__bar-wrapper{display:flex;align-items:center;}

.graph-bar__bar{
  flex:0 0 0%; height:calc(4rem * var(--gbs));
  overflow:hidden; border-radius:0.4rem;
  transition:flex-basis 1.5s ease;
}

.graph-bar__dot{
  width:calc(1.5rem * var(--gbs)); height:calc(1.5rem * var(--gbs));
  border:1px solid #fff; background:#ba2229;
  border-radius:50%; margin-left:calc(-0.75rem * var(--gbs)); flex:0 0 auto;
  opacity:0; transition:opacity .5s .2s;
}

.graph-bar__slash{
  width:0; height:0; margin-left:.3rem; flex:0 0 auto;
  border-top:2px dashed #ba2229; align-self:center;
  transition:width .5s .7s;
}

.graph-bar__name{
  /* O circulo passa a ter largura/altura reais (em vez de "escapar" via
     position:absolute a partir de uma caixa pequena). Assim este bloco
     ocupa espaco de verdade no layout, o widget cresce para o incluir, e
     a area de edicao do Elementor passa a envolver o circulo por
     completo, em vez de o deixar "sair" para fora do contorno.

     Quando o circulo (--gb-circle) e maior do que a barra
     (--gb-bar-height), isso fazia a LINHA desta barra ficar mais alta do
     que as barras secundarias (sem circulo) - e como o espacamento entre
     linhas (gap) e sempre o mesmo, essa diferenca de altura parecia um
     espaco extra antes/depois desta barra. As margens negativas abaixo
     "encolhem" a contribuicao desta caixa para a altura da linha ate ao
     valor de --gb-bar-height (fazendo com que a linha tenha sempre a
     mesma altura, seja qual for o tamanho do circulo), mantendo o
     circulo visualmente centrado na barra via overflow para cima/baixo. */
  width:var(--gb-circle); height:var(--gb-circle); flex:0 0 auto;
  margin-left:calc(1.5rem * var(--gbs)); box-sizing:border-box;
  margin-top:calc((var(--gb-bar-height) - var(--gb-circle)) / 2);
  margin-bottom:calc((var(--gb-bar-height) - var(--gb-circle)) / 2);
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; font-weight:600;
  opacity:0; transition:opacity .4s 1.2s;
}
.graph-bar__name__percentage{ font-size:calc(4.5rem * var(--gbs)); font-weight:400; line-height:1; position:relative; z-index:1; }
.graph-bar__name__label{ font-size:calc(1.2rem * var(--gbs)); }
.graph-bar__name::after{
  content:""; position:absolute; width:100%; height:100%; border-radius:50%;
  border:1px solid; top:0; left:0;
  transform:scale(0);
  transition:transform .6s .3s;
}

.graph-bar.is-complete .graph-bar__dot{opacity:1;}
.graph-bar.is-complete .graph-bar__slash{width:calc(6.6rem * var(--gbs));}
.graph-bar.is-complete .graph-bar__name{opacity:1;}
.graph-bar.is-complete .graph-bar__name::after{transform:scale(1);}

/* Barras do ACF: a cor da borda do circulo pode vir de duas fontes -
   --graph-bar-acf-row-border-color (definida inline por linha, quando essa
   linha do ACF tem cor propria) tem prioridade; se nao existir, usa
   --graph-bar-acf-border-color-default (a cor global definida no painel do
   widget). O ultimo valor (#8e181d) e so uma rede de seguranca. */
.graph-bar-acf .graph-bar__name::after{
  border-color: var(--graph-bar-acf-row-border-color, var(--graph-bar-acf-border-color-default, #8e181d));
}

/* Barras secundarias (todas exceto a primeira, a contar de cima): sem
   circulo decorativo, texto simples "valor | descricao". O espaco a volta
   do separador "|" usa margin (nao espacos de texto) para garantir sempre
   pelo menos 8px de cada lado, independentemente da fonte. */
.graph-bar-list > .graph-bar.graph-bar--secondary .graph-bar__name{
  width:auto;
  height:auto;
  margin-top:0;
  margin-bottom:0;
  flex-direction:row;
  align-items:baseline;
}
.graph-bar-list > .graph-bar.graph-bar--secondary .graph-bar__name::after{
  content:none;
}
.graph-bar-list > .graph-bar.graph-bar--secondary .graph-bar__name__percentage{
  font-size:14px;
  font-weight:600;
}
.graph-bar-list > .graph-bar.graph-bar--secondary .graph-bar__name__label{
  font-size:14px;
}
.graph-bar-list > .graph-bar.graph-bar--secondary .graph-bar__name__label::before{
  content:"|";
  margin:0 8px;
}

@media (max-width: 767px){
  /* Em mobile todas as barras (incluindo a primeira) ficam iguais: sem
     circulo, sem pontinho/linha, com o valor e a descricao por CIMA da
     barra (espacamento de 8px), a 16px, com o separador "|". Estas
     regras usam especificidade suficiente para prevalecer sobre as
     regras de ".graph-bar--secondary" acima.

     IMPORTANTE: o wrapper mantem-se flex-direction:row (nao column).
     O JS anima a barra atraves de "flex-basis" em percentagem, o que so
     corresponde a LARGURA quando o eixo principal do flex e horizontal.
     Em vez de mudar para column (o que faria o flex-basis controlar a
     ALTURA e encolher a barra a quase nada), forcamos o bloco de texto
     a ocupar 100% da largura da linha (flex-basis:100%), o que o empurra
     para a sua propria linha via flex-wrap - a barra fica na linha
     seguinte, continuando a crescer corretamente na horizontal. */
  .graph-bar-list > .graph-bar .graph-bar__bar-wrapper{
    flex-wrap:wrap;
  }
  .graph-bar-list > .graph-bar .graph-bar__bar{
    height:3rem;
    flex-grow:0;
    flex-shrink:0;
  }
  .graph-bar-list > .graph-bar .graph-bar__dot,
  .graph-bar-list > .graph-bar .graph-bar__slash{
    display:none;
  }
  .graph-bar-list > .graph-bar .graph-bar__name{
    order:-1;
    width:auto;
    height:auto;
    flex:1 0 100%;
    margin-left:0;
    margin-top:0;
    margin-bottom:8px;
    flex-direction:row;
    align-items:baseline;
    justify-content:flex-start;
  }
  .graph-bar-list > .graph-bar .graph-bar__name::after{
    content:none;
  }
  .graph-bar-list > .graph-bar .graph-bar__name__percentage{
    font-size:16px;
    font-weight:600;
  }
  .graph-bar-list > .graph-bar .graph-bar__name__label{
    font-size:16px;
  }
  .graph-bar-list > .graph-bar .graph-bar__name__label::before{
    content:"|";
    margin:0 8px;
  }
}