/* Cartão de gráfico (Chart.js) — Nova Marca
   Distribuição de dividendos por cota: Figma node 7833:4493 (desk) / 7833:5348 (mobo)
   Volume negociado / Cotação de mercado (listados): mesmo tratamento
   visual, sem node próprio no Figma pra essas duas — pediram "mesmo
   esquema"/"mesmo estilo que fizemos pro Distribuição de dividendos".

   Reconstruído com classes .nm-grafico__* que não existem em css.css. O
   Figma mostra só um print estático do gráfico dentro do card — o gráfico
   real (Chart.js, canvas #FundoChartVoledivi / #FundoChartVolumeNegociao /
   #FundoChart) continua 100% funcional: filtro de período, zoom, pan e o
   AJAX de sempre (carregaGraficoDividendos/carregaGraficoVolume/
   carregaGraficoCotacaoMercado em scripts-fundos-comum.js) não mudaram de
   comportamento — só a cor/fonte/tamanho das barras/linhas (no JS, usando a
   paleta NM_CHART_COLORS_LINHA/NM_CHART_COLORS_OUTROS) e o visual do filtro
   (.select) e das setas de zoom/pan (.zoomsBtns) mudaram pra Nova Marca
   (branco com borda, preenche --nm-color-deep-blue no hover, mesma
   linguagem do botão de seta do carrossel "Por que investir"). O .zoomsBtns
   também virou display:grid 2x2 (32px cada) em vez do width:60px +
   flex-wrap:wrap antigo, que não garantia 2 por linha de forma confiável.

   Arquivo serve as três seções (mesmo motivo do fundos-pq-investir.css
   servir "Por que investir" + "Cards com Carrossel"): um cartão de gráfico
   só precisa de um lugar pra existir, não vários iguais.

   .itemAcordeonFundo/.headerItem continuam no <section>/título só pelo menu
   fixo lateral (mesmo motivo do fundos-palavra-gestor.css) — os seletores
   abaixo são prefixados com :is(#divendosCota, #volumeNegociado, #cotacaoMercado) (id da seção), que sempre vence
   classe+elemento sem precisar de !important. */

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .headerItem {
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  position: static !important;
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .nm-grafico__title {
  margin: 0 0 var(--nm-space-5); /* 24px até o card */
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-lg); /* 24px */
  line-height: var(--nm-line-height-lg); /* 32px */
  color: var(--nm-color-deep-blue);
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .nm-grafico__obs {
  margin: 0 0 var(--nm-space-5); /* 24px */
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
  max-width: 100%;
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .nm-grafico__card {
  position: relative;
  background: var(--nm-color-white);
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-md); /* 16px */
  padding: 48px var(--nm-space-5) var(--nm-space-5); /* .zoomsBtns agora tem 2 linhas (grid 2x2): top:24 + 72 de altura = 96 — 128 garante respiro depois disso */
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .nm-grafico__footnote {
  margin: var(--nm-space-4) 0 0; /* 16px */
  font-family: var(--nm-font-family);
  font-size: 12px;
  line-height: var(--nm-line-height-sm);
  color: var(--nm-color-chumbo);
}

/* Dropdown de período (.select/.select-trigger/.select-options) e zoom/pan
   (.zoomsBtns) são compartilhados com outros gráficos via JS genérico — não
   dá pra trocar a classe (quebraria o mesmo dropdown/setas em outros
   gráficos), só reestilizar aqui dentro, escopado por :is(#divendosCota, #volumeNegociado, #cotacaoMercado). Visual
   do botão de seta segue a mesma linguagem do carrossel "Por que investir"
   (.nm-pq-investir__arrow em fundos-pq-investir.css): branco com borda,
   preenche --nm-color-deep-blue no hover. */
:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .filtrosGraficos {
 top: 16px; /* 24px */
  right: 108px; /* espaço pra grade 2x2 do .zoomsBtns (2 botões de 32px + gap = 72px) ao lado */
  gap: var(--nm-space-4); /* 16px entre selects, quando o de indicador estiver visível */
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .select {
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-sm); /* 8px */
  background: var(--nm-color-white);
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .select-trigger {
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  color: var(--nm-color-chumbo);
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .select-options {
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-sm); /* 8px */
  box-shadow: none;
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .select-options li {
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  color: var(--nm-color-chumbo);
}

/* Grade 2x2 (zoom in/out na 1ª linha, pan </> na 2ª) em vez da linha única
   de 4 — display:grid garante 2 por linha sempre, sem depender de width
   fixo + flex-wrap (era isso que já existia e tinha quebrado antes). */
:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .zoomsBtns {
  top: -20px;
  right: var(--nm-space-5); /* 24px */
  display: grid;
  grid-template-columns: repeat(2, 32px);
  width: auto;
  gap: var(--nm-space-2); /* 8px */
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .zoomsBtns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-basis: auto;
  margin-top: 0;
  background-color: var(--nm-color-white);
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-sm); /* 8px */
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .zoomsBtns a i {
  color: var(--nm-color-chumbo);
  transition: color 0.15s ease;
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .zoomsBtns a:hover {
  background-color: var(--nm-color-blue);
  border-color: var(--nm-color-blue);
}

:is(#divendosCota, #volumeNegociado, #cotacaoMercado) .zoomsBtns a:hover i {
  color: var(--nm-color-white);
}

@media (max-width: 768px) {
  :is(#divendosCota, #volumeNegociado, #cotacaoMercado) .headerItem {
    padding: 0;
  }

  :is(#divendosCota, #volumeNegociado, #cotacaoMercado) .nm-grafico__title,
  :is(#divendosCota, #volumeNegociado, #cotacaoMercado) .nm-grafico__obs {
   padding: 0;
  }

  :is(#divendosCota, #volumeNegociado, #cotacaoMercado) .nm-grafico__card {
    margin: 0;
    padding:48px var(--nm-space-4) var(--nm-space-4); /* filtro (linha inteira) + zoom em grid 2x2 (2 linhas) empilhados aqui embaixo */
  }

 :is(#divendosCota, #volumeNegociado, #cotacaoMercado) .filtrosGraficos {
    top: -36px;
    right: 0;
    left: 0;
  }
    :is(#divendosCota, #volumeNegociado, #cotacaoMercado) .zoomsBtns {
    top: -56px;
    right: 0px;
    display: none;
  }
  :is(#cotacaoMercado) .nm-grafico__title {
  padding: 0 16px;
}
  
}


.itemGrafico {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}

/* Scroll horizontal no gráfico de Volume Negociado (mobile) */
#volumeNegociado .itemGrafico.nm-grafico--scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#volumeNegociado .itemGrafico.nm-grafico--scroll canvas {
  display: block;
}

@media (max-width: 768px) {
  #volumeNegociado .nm-grafico__card {
    padding-right: 0; /* gráfico encosta na borda direita */
  }

  #volumeNegociado .itemGrafico.tdGrafico {
    height: 400px;
  }

  #volumeNegociado .itemGrafico.tdGrafico {
    padding-top: 72px; 
    padding-right: 0;/* reserva espaço pro filtro e zoom no topo */
  }

  #volumeNegociado .filtrosGraficos {
    display: flex !important;
    top: 0 !important;
    left: 16px !important;
    right: auto !important;
    z-index: 10;
    justify-content: flex-start !important;
  }

  #volumeNegociado .zoomsBtns {
    top: 0 !important;
    right: 16px !important;
    z-index: 10;
  }

  #volumeNegociado .nm-grafico__card {
    overflow: visible;
  }

  #volumeNegociado .itemGrafico.nm-grafico--scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  #divendosCota .nm-grafico__card {
    padding-right: 0;
  }

  #divendosCota .itemGrafico.tdGrafico {
    height: 350px;
    padding-top: 72px;
    padding-right: 0;
  }

  #divendosCota .filtrosGraficos {
    display: flex !important;
    top: 0 !important;
    left: 16px !important;
    right: auto !important;
    z-index: 10;
    justify-content: flex-start !important;
  }

  #divendosCota .zoomsBtns {
    top: 0 !important;
    right: 16px !important;
    z-index: 10;
  }

  #divendosCota .nm-grafico__card,
  #divendosCota .itemGrafico.tdGrafico {
    overflow: visible;
  }
}

#cotacaoMercado.itemAcordeonFundo p {
  max-width: 100%;
}