/* Nova Marca — Histórico de Rentabilidade (Figma node 7833:4583 desk / 7833:5402 mobo).
   Compartilhado entre graficos/listados/rentabilidade.php e
   graficos/liquidos/rentabilidade.php (ambos usam #cotacaoMercado e a
   mesma .rentabilidadeNova).

   IMPORTANTE — o HTML vem do plugin ATIVO "tabelas_rentabilidade"
   (wp-content/plugins/tabelas_rentabilidade/tabelas_rentabilidade.php).
   Existe um SEGUNDO arquivo homônimo dentro da mesma pasta
   (.../tabelas_rentabilidade/tabelas_rentabilidade/tabelas_rentabilidade.php)
   que usa classes antigas (.AbasAno/.tabelaContainer) — esse é órfão, não
   está em active_plugins, nunca roda. A estrutura real, gerada pelo
   plugin ativo, é:
     - Desktop: .pc-tab > (inputs radio ocultos) + #nav-tabelas (abas,
       <label> por ano) + #secao-conteudo-tabela > div.content_tab_* >
       table.tabela-produtos
     - Mobile: .mpc-tab-dynamic > <select> + table.mtabela-produtos por ano
   Não editamos o plugin (decisão do time): então, ao invés de tentar
   restilizar o <select> nativo do mobile pra virar pills (impossível só
   com CSS), escondemos .mpc-tab-dynamic em qualquer largura e usamos
   .pc-tab (que já é puro CSS via :checked, sem depender de JS) também no
   mobile — bate com o Figma mobile, que mostra as mesmas pills.

   Bug pré-existente no plugin ativo (não introduzido por nós): cada
   div.content_tab_* nasce com style="display:none" INLINE, e a regra
   "#tab_x:checked ~ ... {display:block}" que o próprio plugin gera não
   tem !important — inline sempre vence regra sem !important, então a
   tabela nunca aparece pra nenhum ano, nem o marcado como padrão. Como
   isso trava o componente inteiro (nada aparece, pra nenhum fundo),
   corrigimos 100% via CSS aqui no tema (sem tocar no plugin): a técnica
   clássica de "abas em CSS puro" usando :nth-of-type ao invés do id
   dinâmico (uniqid) de cada fundo — o N-ésimo radio sempre corresponde
   ao N-ésimo <div> dentro de #secao-conteudo-tabela, na mesma ordem em
   que o plugin monta os dois loops. Cobre até 15 abas (bem mais que
   qualquer fundo tem hoje). */

body #cotacaoMercado .caixaItem.rentabilidadeNova {
  width: 100%;
  padding: 0 0 0 var(--nm-space-4); /* 16px só à esquerda */
  box-sizing: border-box;
}

body #cotacaoMercado .rentabilidadeNova .ConteudoItem {
  display: flex;
  flex-direction: column;
}

body #cotacaoMercado .rentabilidadeNova > .ConteudoItem > h4 {
  order: 1;
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  font-weight: var(--nm-font-weight-regular);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-deep-blue);
  /* !important no margin-top: alguma regra fora daqui (não achamos qual)
     está aplicando 32px — o resto do shorthand não precisa, só o topo. */
  margin: 0 0 var(--nm-space-4);
  margin-top: 32px !important;
}

/* Data de referência agora usa o componente global .nm-data-ref.
   Mantém order:3 para ficar abaixo da tabela e margin-top:16px. */
body #cotacaoMercado .rentabilidadeNova > .ConteudoItem > .nm-data-ref {
  order: 3;
  margin-top: 16px !important;
}

/* --- Mobile usa a mesma estrutura do desktop (.pc-tab), sem <select> --- */

body #cotacaoMercado .rentabilidadeNova .mpc-tab-dynamic {
  display: none !important;
}

body #cotacaoMercado .rentabilidadeNova > .ConteudoItem > .pc-tab {
  order: 2;
  display: block !important;
}

body #cotacaoMercado .rentabilidadeNova .pc-tab > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Correção do bug de exibição (ver nota acima), via :nth-of-type --- */

body #cotacaoMercado .rentabilidadeNova .pc-tab #secao-conteudo-tabela > div {
  display: none !important;
}

body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(1):checked ~ #secao-conteudo-tabela > div:nth-of-type(1),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(2):checked ~ #secao-conteudo-tabela > div:nth-of-type(2),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(3):checked ~ #secao-conteudo-tabela > div:nth-of-type(3),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(4):checked ~ #secao-conteudo-tabela > div:nth-of-type(4),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(5):checked ~ #secao-conteudo-tabela > div:nth-of-type(5),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(6):checked ~ #secao-conteudo-tabela > div:nth-of-type(6),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(7):checked ~ #secao-conteudo-tabela > div:nth-of-type(7),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(8):checked ~ #secao-conteudo-tabela > div:nth-of-type(8),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(9):checked ~ #secao-conteudo-tabela > div:nth-of-type(9),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(10):checked ~ #secao-conteudo-tabela > div:nth-of-type(10),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(11):checked ~ #secao-conteudo-tabela > div:nth-of-type(11),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(12):checked ~ #secao-conteudo-tabela > div:nth-of-type(12),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(13):checked ~ #secao-conteudo-tabela > div:nth-of-type(13),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(14):checked ~ #secao-conteudo-tabela > div:nth-of-type(14),
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(15):checked ~ #secao-conteudo-tabela > div:nth-of-type(15) {
  display: block !important;
}

/* "Retorno Mensal 2024" duplica o h4 "Histórico de Rentabilidade" acima */
body #cotacaoMercado .rentabilidadeNova .pc-tab [class*="content_tab_"] h2 {
  display: none;
}

/* --- Abas de ano (pills) --- */

body #cotacaoMercado .rentabilidadeNova .pc-tab #nav-tabelas ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--nm-space-5);
  padding: 0;
  gap: var(--nm-space-2);
}

body #cotacaoMercado .rentabilidadeNova .pc-tab #nav-tabelas ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body #cotacaoMercado .rentabilidadeNova .pc-tab #nav-tabelas ul li label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--nm-space-2) var(--nm-space-4);
  border-radius: var(--nm-radius-pill);
  border: 2px solid var(--nm-color-chumbo);
  background: var(--nm-color-white);
  color: var(--nm-color-chumbo);
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  font-weight: var(--nm-font-weight-regular);
  line-height: var(--nm-line-height-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Aba ativa (pill preenchido, Figma node 7833:4583/5402: bg #505050 +
   texto branco): mesma técnica de :nth-of-type posicional usada acima pro
   bug de exibição — o N-ésimo radio (na ordem em que o plugin os imprime)
   sempre corresponde ao N-ésimo <li> dentro de #nav-tabelas, então dá pra
   pintar o pill certo sem depender do uniqid dinâmico nem editar o plugin
   (o <style> que o próprio plugin gera por ano só troca a cor do texto via
   var(--corproduto) — deixamos como está, e sobrepomos aqui com mais
   especificidade: id + 2 classes vence só 1 classe). */
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(1):checked ~ #nav-tabelas ul li:nth-of-type(1) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(2):checked ~ #nav-tabelas ul li:nth-of-type(2) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(3):checked ~ #nav-tabelas ul li:nth-of-type(3) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(4):checked ~ #nav-tabelas ul li:nth-of-type(4) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(5):checked ~ #nav-tabelas ul li:nth-of-type(5) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(6):checked ~ #nav-tabelas ul li:nth-of-type(6) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(7):checked ~ #nav-tabelas ul li:nth-of-type(7) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(8):checked ~ #nav-tabelas ul li:nth-of-type(8) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(9):checked ~ #nav-tabelas ul li:nth-of-type(9) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(10):checked ~ #nav-tabelas ul li:nth-of-type(10) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(11):checked ~ #nav-tabelas ul li:nth-of-type(11) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(12):checked ~ #nav-tabelas ul li:nth-of-type(12) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(13):checked ~ #nav-tabelas ul li:nth-of-type(13) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(14):checked ~ #nav-tabelas ul li:nth-of-type(14) label,
body #cotacaoMercado .rentabilidadeNova .pc-tab > input:nth-of-type(15):checked ~ #nav-tabelas ul li:nth-of-type(15) label {
  background: var(--nm-color-chumbo);
  border-color: var(--nm-color-chumbo);
  color: var(--nm-color-white);
}

/* --- Tabela --- */

body #cotacaoMercado .rentabilidadeNova .pc-tab [class*="content_tab_"] {
  box-sizing: border-box;
  background: var(--nm-color-off-white);
  border-radius: var(--nm-radius-md);
  padding: var(--nm-space-2) 0;
  overflow-x: auto;
}

body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos {
  box-sizing: border-box;
  width: 100%;
  border-collapse: collapse;
  border: none;
  background: none;
}

body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos th,
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos td {
  box-sizing: border-box;
  min-width: 80px;
  padding: var(--nm-space-4) var(--nm-space-2);
  border-bottom: 1px solid var(--nm-color-border);
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  font-weight: var(--nm-font-weight-regular);
  line-height: var(--nm-line-height-sm);
  color: var(--nm-color-chumbo);
  text-align: center;
}

/* Linha de cabeçalho (ano + meses): maiúsculas, semibold, chumbo */
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos thead th {
  font-weight: var(--nm-font-weight-semibold);
  text-transform: uppercase;
}

/* Última linha do corpo não precisa de divisor — o card já delimita o fim. */
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos tbody tr:last-child th,
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos tbody tr:last-child td {
  border-bottom: none;
}

/* Canto superior esquerdo (o ano, ex: "2024"): alinhado à esquerda, deep blue */
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos thead th:first-child {
  text-align: left;
  color: var(--nm-color-deep-blue);
  padding-left: var(--nm-space-4);
}

/* Rótulo da linha (Fundo/CDI/%CDI): alinhado à esquerda, deep blue, regular */
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos tbody th {
  text-align: left;
  color: var(--nm-color-deep-blue);
  font-weight: var(--nm-font-weight-regular);
  padding-left: var(--nm-space-4);
  white-space: nowrap;
}

/* Espelha o respiro do início (padding-left acima) também no fim da
   tabela — sem isso, a última coluna encosta na borda do card (só o
   início da rolagem tinha respiro, o fim não). */
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos thead th:last-child,
body #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos tbody td:last-child {
  padding-right: var(--nm-space-4);
}

@media (max-width: 768px) {
  /* Abas: rolagem por toque mais suave (momentum) + snap por pill, e sem
     a barra de rolagem nativa — é uma fileira de pills pra arrastar, não
     uma tabela de dados, então a scrollbar só atrapalha aqui. */
  #cotacaoMercado .rentabilidadeNova .pc-tab #nav-tabelas ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--nm-space-4);
    scrollbar-width: none;
  }

  #cotacaoMercado .rentabilidadeNova .pc-tab #nav-tabelas ul::-webkit-scrollbar {
    display: none;
  }

  #cotacaoMercado .rentabilidadeNova .pc-tab #nav-tabelas ul li {
    scroll-snap-align: start;
  }

  #cotacaoMercado .rentabilidadeNova .pc-tab #nav-tabelas ul li label {
    flex-shrink: 0;
  }

  /* No mobile a tabela não reflui — mantém a largura intrínseca das
     colunas (min-width: 80px acima) e rola na horizontal dentro do card,
     igual ao Figma. */
  #cotacaoMercado .rentabilidadeNova .pc-tab table.tabela-produtos {
    min-width: max-content;
  }

  /* A tabela precisa de espaço reservado embaixo pra scrollbar nativa não
     ficar "colada"/sobreposta na última linha — momentum scroll (acima)
     já ajuda a rolagem, isso aqui só separa visualmente a barra. */
  #cotacaoMercado .rentabilidadeNova .pc-tab [class*="content_tab_"] {
    padding-bottom: var(--nm-space-4);
    -webkit-overflow-scrolling: touch;
  }

  #cotacaoMercado .rentabilidadeNova .pc-tab [class*="content_tab_"]::-webkit-scrollbar {
    height: 4px;
  }

  #cotacaoMercado .rentabilidadeNova .pc-tab [class*="content_tab_"]::-webkit-scrollbar-thumb {
    background: var(--nm-color-border);
    border-radius: var(--nm-radius-pill);
  }

  #cotacaoMercado .containerSite {
    width: 100% !important;
  }

  #cotacaoMercado .headerItem {
    padding: 0 16px !important;
  }
  #cotacaoMercado .nm-grafico__body{
    padding: 0 16px !important;
  }
}