:root {
  --grafico-pastel-1: #a8d8ea;
  --grafico-pastel-2: #f7c5cc;
  --grafico-pastel-3: #b8e0d2;
  --grafico-pastel-4: #d7c0e8;
  --grafico-pastel-5: #f8e3a1;
  --grafico-pastel-6: #f6c6a8;
  --grafico-grade: rgba(226, 232, 240, .15);
  --grafico-eixo: rgba(226, 232, 240, .55);
  --grafico-texto: #dbe7f3;
  --grafico-texto-suave: #91a2b7;
}

.grafico-tv-layout {
  flex: 1;
  min-height: 0;
}

.grafico-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px 14px 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.grafico-cabecalho-tv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 12px 0;
}

.grafico-titulo {
  color: var(--grafico-texto);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 800;
  line-height: 1;
}

.grafico-scroll {
  width: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--grafico-pastel-1) rgba(255, 255, 255, .05);
}

.grafico-svg {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 300px;
  display: block;
}

.grafico-mobile-card {
  padding: 14px 8px 8px;
  overflow: hidden;
}

.grafico-mobile-card .grafico-cabecalho {
  padding: 0 8px 8px;
}

.grafico-mobile-card .grafico-scroll {
  padding-bottom: 5px;
}

.grafico-mobile-card .grafico-svg {
  width: 100%;
  min-width: 680px;
  height: 390px;
}

.grafico-tipo {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: var(--grafico-pastel-1);
  background: rgba(168, 216, 234, .08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.grafico-grade {
  stroke: var(--grafico-grade);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.grafico-eixo {
  stroke: var(--grafico-eixo);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.grafico-rotulo,
.grafico-valor,
.grafico-titulo-eixo,
.grafico-vazio {
  fill: var(--grafico-texto);
  font-family: Arial, Helvetica, sans-serif;
}

.grafico-rotulo {
  fill: var(--grafico-texto-suave);
  font-size: 16px;
}

.grafico-valor {
  font-size: 15px;
  font-weight: 700;
}

.grafico-titulo-eixo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
}

.grafico-vazio {
  font-size: 22px;
  text-anchor: middle;
}

.grafico-barra {
  transition: opacity .2s ease;
}

.grafico-barra:hover,
.grafico-ponto:hover {
  opacity: .78;
}

.grafico-linha {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.grafico-ponto {
  stroke: rgba(7, 9, 15, .88);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 680px) {
  .grafico-mobile-card .grafico-svg {
    min-width: 640px;
    height: 370px;
  }
}