/* Gráfico de evolução e ranking do dashboard. Tokens vêm de _content/nuvdocs.visual/fluxo.css. */

.grafico {
  margin: var(--espaco-4) 0 0;
}

.grafico-leitura {
  min-height: 1.5em;
  margin: 0 0 var(--espaco-2);
  font-size: var(--tamanho-do-corpo-menor);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.grafico-area {
  position: relative;
  padding-top: var(--espaco-5);
}

.grafico-desenho {
  position: relative;
}

.grafico-evolucao {
  display: block;
  width: 100%;
  height: 10rem;
}

.grafico-barra {
  fill: var(--marca);
  cursor: pointer;
}

.grafico-barra:hover,
.grafico-barra-ativa {
  fill: var(--link-ao-passar);
}

.grafico-referencia,
.grafico-media {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

.grafico-referencia {
  top: 0;
  border-top: 1px solid var(--borda-do-campo);
}

.grafico-media {
  border-top: 1px dashed var(--atencao-texto);
}

.grafico-rotulo {
  position: absolute;
  bottom: var(--espaco-1);
  padding: 0 var(--espaco-1);
  background: var(--superficie);
  border-radius: var(--espaco-1);
  color: var(--suave);
  font-size: var(--tamanho-do-rotulo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grafico-rotulo-maximo {
  left: 0;
}

.grafico-rotulo-media {
  right: 0;
  color: var(--atencao-texto);
}

.grafico-legenda {
  position: relative;
  height: 1.5em;
  margin-top: var(--espaco-1);
  color: var(--suave);
  font-size: var(--tamanho-do-rotulo);
  font-variant-numeric: tabular-nums;
}

.grafico-data {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.grafico-data-inicio {
  transform: none;
}

.grafico-data-fim {
  transform: translateX(-100%);
}

.ranking {
  display: grid;
  gap: var(--espaco-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--espaco-3);
  row-gap: var(--espaco-1);
}

.ranking-nome {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.ranking-valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ranking-detalhe {
  grid-column: 1 / -1;
  color: var(--suave);
  font-size: var(--tamanho-do-rotulo);
  font-variant-numeric: tabular-nums;
}

.ranking-trilho,
.limite-trilho {
  display: block;
  height: var(--espaco-2);
  background: var(--borda);
  border-radius: var(--espaco-1);
  overflow: hidden;
}

.ranking-trilho {
  grid-column: 1 / -1;
}

.ranking-barra,
.limite-barra {
  display: block;
  height: 100%;
  background: var(--marca);
}

.ranking-barra {
  transition: width 0.2s ease-out;
}

.ranking-outros .ranking-nome {
  color: var(--suave);
  font-weight: 400;
}

.ranking-outros .ranking-barra {
  background: var(--etapa-futura);
}

@media (prefers-reduced-motion: reduce) {
  .ranking-barra {
    transition: none;
  }
}