<div class="menu-container">    
  <!-- Menu Item: Apresentação -->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Apresentação</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title"> 
	</div>
	<div class="submenu-description">
		O Projeto prevê a construção de um novo módulo de Renda Fixa com objetivo de efetuar a captação e aplicação de recursos próprios e de 	terceiros pela instituição. Será um novo produto em novo framework web que atenderá os módulos atuais Depósito à Prazo e Open em uma única solução.      			  </div>
  <ul>
		<li>Criação do novo fluxo operacional em telas web,</li>
		<li>Novo Banco de Dados,</li>
 		<li>Integrações demais sistemas (Ex.: Conta Corrente, Autorizador B3)</li> 
 		<li>APIs internas e externas para integração (Ex.: APP, Front Web do cliente),</li> 
 		<li>Documentação, manuais e vídeos atualizada de todas as funcionalidades no TDN.</li> 
  </ul>
    <div class="submenu-description">
	</div>
    <div class="submenu-title">
	</div>
    <div class="submenu-description">
		<u>Papéis de Captação de operações com clientes</u>: CDB - Certificado de Depósito Bancário, LC - Letra de Câmbio, LCA - Letra do Crédito  Agropecuária, LCI - Letra do Crédito Imobiliário, 		LF - Letra Financeira, DI - Depósito Interfinanceiro, RDC - Recibo de Depósito ao Cooperado e RDB - Recibo de Depósito Bancário.
     </div>
     <div class="submenu-title">
	 </div>
     <div class="submenu-description">
		<u>Papéis de Aplicação de Compra e Venda Final ou Compromissada de Papéis para Lastro próprio ou de terceiros do mercado</u>: NTN-B - Nota do Tesouro Nacional atrelada ao IPCA, NTN-C atrelada ao IGPM, NTN-F Pré fixada, NTN - Letra do Tesouro Nacional com taxa Pré fixada e LFT - Letra Financeira do Tesouro atreladas a SELIC. 
     </div>
     <div class="submenu-title">
	  </div>
      <div class="submenu-description">
		<b>Estão previstas as entregas a seguir para o novo projeto Renda Fixa</b>:
      </div>
      <div class="submenu-title">
	  </div>
      <div class="submenu-description">
       <i>Fase 1 - Dezembro 2025</i>: Funcionalidades de configuração, captação a aplicação, resgate, bloqueios, interfaces e integrações com outros sistemas.
 	  </div>
      <div class="submenu-title">
	  </div>
      <div class="submenu-description">
	   <i>Fase 2 - Ano 2026</i>: Derivativos como Swap, SPB – Integração envio de mensagens, PIX - Integração para envio de resgates.
      </div>
    </div>
  </div>

   <!-- Menu Item: Contas-->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Contas</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title">Contas</div>
      <div class="submenu-description">
        As telas de <strong>Consulta</strong> oferece funcionalidades essenciais para cadastrar aplicador, co-aplicador e isenções.
      </div>
      <ul class="submenu-items">
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/display/TBC/Contas+-+Cadastro" class="submenu-item-title">Cadastro da Conta</a>
          <div class="submenu-item-description">
            A tela permite a inclusão do cadastro de aplicador a partir da seleção de um cliente existente no Cadastro de Clientes e preenchimento das informações necessárias conforme as necessidades operações e financeiras. A tela também permite a consultas e alteração de um cadastro existente.
          </div>
          <a href="https://tdn.totvs.com/display/TBC/Contas+-+Cadastro" class="submenu-link">⮩ Veja como fazer o cadastro de uma conta</a>
        </li>
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/display/TBC/Contas+-+Co-Aplicador" class="submenu-item-title">Cadastro Co-Aplicador</a>
          <div class="submenu-item-description">
            Esta tela permite o cadastro do co-aplicador, quando aplicável.           
		  </div>
          <a href="https://tdn.totvs.com/display/TBC/Contas+-+Co-Aplicador" class="submenu-link">⮩ Veja como cadastrar um co-aplicador</a>
        </li>
		</li>
		<li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=983803658" class="submenu-item-title">Isenções</a>
          <div class="submenu-item-description">
            Esta tela permite cadastrar as isenções de tributos.           
		  </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=983803658" class="submenu-link">⮩ Veja como cadastrar as isenções</a>
        </li>
		</li>
      </ul>
    </div>
  </div> 

  <!-- Menu Item: Configurações-->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Configurações</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title">Configurações</div>
      <div class="submenu-description">
        As telas de <strong>Configurações</strong> oferecem funcionalidades todas as configurações necessárias para possibilitar ao usuário definir as configurações operacionais e permitir efetuar operações de captação a aplicação de recursos da instituição.
      </div>
      <ul class="submenu-items">
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106046" class="submenu-item-title">Enquadramento Legal</a>
          <div class="submenu-item-description"> 
			Representa um conjunto de informações que irão servir de base para as informações diárias, bem como a sua classificação para geração de controles das operações, as quais são destinadas ao Banco Central e emissão de documentos padronizados do SELIC/CETIP. Visa também o enquadramento do tipo de cliente para definição do pagamento para o seguro (PROER). Estas informações serão utilizadas quando do cadastramento da conta do cliente.           
		</div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106046" class="submenu-link">⮩ Veja como configurar o Enquadramento Legal</a>
        </li>
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=979807102" class="submenu-item-title">Tipos de Cálculo</a>
          <div class="submenu-item-description">
			Esta tela determina e caracteriza a identificação de uma determinada finalidade do cálculo a ser cadastrado e configurado no sistema de forma que os valores calculados têm diversas destinações contábeis e gerenciais.
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=979807102" class="submenu-link">⮩ Veja como cadastrar os tipos de cálculo</a>
        </li>
		<li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=979806990" class="submenu-item-title">Tipos de Tributos</a>
          <div class="submenu-item-description">
			Esta tela determina e caracteriza a identificação de uma determinada finalidade da tributação a ser cadastrado e configurado no sistema de forma que os valores calculados dos tributos.
		  </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=979806990" class="submenu-link">⮩ Veja como cadastrar os tipos de tributos</a>
        </li>
		<li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106456" class="submenu-item-title">Critérios de Cálculo</a>
          <div class="submenu-item-description">
			Esta tela determina as informações interligadas que permitem ao usuário definir a maneira pela qual o papel ou título irá se comportar em relação a sua valorização e liquidação.
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106456" class="submenu-link">⮩ Veja como configurar um critério de cálculo</a>
        </li>
      </ul>
    </div>
  </div>
    
  <!-- Menu Item: Operações-->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Operações</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title">Operações</div>
      <div class="submenu-description">
        As telas de <strong>Operações</strong> permitem a emissão e resgates dos papeis configurados.
      </div>
      <ul class="submenu-items">
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106316" class="submenu-item-title">Captação e Aplicação</a>
          <div class="submenu-item-description">
            Permite realizar a emissão de papeis de Renda Fixa.
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106316" class="submenu-link">⮩ Veja como realizar a captação de papeis</a>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106316" class="submenu-link">⮩ Veja como realizar o resgate</a>
        </li>
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106316" class="submenu-item-title">Bloqueio</a>
          <div class="submenu-item-description">
            Realiza bloqueio e desbloqueio de saldos de aplicações.
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106316" class="submenu-link">⮩ Veja como realizar o bloqueio e desbloqueio de saldo</a>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- Menu Item: Processamento-->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Processamento</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title">Processamento</div>
      <div class="submenu-description">
        A tela permite realizar o <strong>Processamento</strong> de abertura, fechamento do dia do sistema e cadastro de PU.
      </div>
      <ul class="submenu-items">
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/display/TBC/Abertura+e+Fechamento+do+Dia+Renda+Fixa" class="submenu-item-title">Abertura e Fechamento</a>
          <div class="submenu-item-description">
            A tela permite realizar o processamento do fechamento de dia e abertura do dia do sistema valorizando as operações e geração das integrações.
          </div>
          <a href="https://tdn.totvs.com/display/TBC/Abertura+e+Fechamento+do+Dia+Renda+Fixa" class="submenu-link">⮩ Veja como realizar o fechamento de dia</a>
		  <a href="https://tdn.totvs.com/display/TBC/Abertura+e+Fechamento+do+Dia+Renda+Fixa" class="submenu-link">⮩ Veja como realizar a abertura de dia</a>
        </li>
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106340" class="submenu-item-title">Cadastro de PU</a>
          <div class="submenu-item-description">
            Realiza o cadastramento do Preço Unitário de papeis divulgados pela Anbima.
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106340" class="submenu-link">⮩ Veja como realizar a consulta e cadastro de PU - <i>Funcionalidade manual caso não possuir o arquivo de importação ou alteração</i>
          </a>
          <div class="submenu-item-description">
            Consulta PU
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106340" class="submenu-link">⮩ Veja como consultar um PU.</a>
        </li>
		<li class="submenu-item">              
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106413" class="submenu-item-title">Importação de PU</a> 
          <div class="submenu-item-description">
            Esta tela permite a importação de arquivos de PU divulgados pela Anbima.
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=971106413" class="submenu-link">⮩ Veja como realizar a importação de PU.</a>  
	    </li> 
       </ul>
    </div>
  </div> 

   <!-- Menu Item: Consultas-->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Consultas</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title">Consultas</div>
      <div class="submenu-description">
        A tela de <strong>Consulta</strong> permite ao usuário consultar e exibir os saldos atualizados das operações realizadas.
      </div>
      <ul class="submenu-items">
        <li class="submenu-item">
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=983437801" class="submenu-item-title">Saldo Captação e Aplicação</a>
          <div class="submenu-item-description">
            A tela permite pesquisar uma conta exibindo as operações realizadas e saldos atualizados e cálculo de tributos.
          </div>
          <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=983437801" class="submenu-link">⮩ Veja como consultar uma operação.</a>
  		</li>
      </ul>
    </div>
  </div>
</div>  <style>
    /* Estilos para o menu */
    .menu-container {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        font-family: Segoe UI, sans-serif;
    }

    .menu-item {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
    }

    .menu-header {
        background-color: #6B8E23;
        color: white;
        //color: #000;
        padding: 12px 15px;
        cursor: pointer;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-header:hover {
        background-color: #b0ee00;
        color: black;
    }

    .menu-content {
        display: none;
        padding: 0 15px 15px;
        background-color: white;
    }

    .submenu-title {
        font-weight: bold;
        margin: 15px 0 10px;
        color: #444;
    }

    .submenu-description {
        margin-bottom: 10px;
        line-height: 1.5;
    }

    .submenu-items {
        list-style-type: none;
        padding-left: 20px;
        margin-top: 10px;
    }

    .submenu-item {
        margin-bottom: 10px;
    }

    .submenu-item-title {
        font-weight: bold;
        margin-bottom: 5px;
        cursor: pointer;
        color: #0066cc;
        text-decoration: none;
        display: block;
    }

    .submenu-item-title:hover {
        text-decoration: underline;
    }

    .submenu-item-description {
        margin-left: 20px;
        margin-bottom: 8px;
    }

    .submenu-link {
        color: #0066cc;
        text-decoration: none;
        display: block;
        margin-left: 40px;
        margin-top: 5px;
    }

    .submenu-link:hover {
        text-decoration: underline;
    }

    /* Classe para mostrar o conteúdo */
    .menu-content-visible {
        display: block;
    }

    /* Estilo para a seta */
    .menu-arrow {
        transition: transform 0.3s;
    }

    .menu-arrow-down {
        transform: rotate(90deg);
    }
</style>

<script>
    // Função simples para alternar a visibilidade do menu
    function toggleMenu(header) {
        // Função JavaScript mais simples possível
        var content = header.nextElementSibling;

        // Verifica se o conteúdo existe
        if (content) {
            // Alterna a classe para mostrar/esconder o conteúdo
            if (content.style.display === "block") {
                content.style.display = "none";

                // Atualiza a seta
                var arrow = header.querySelector(".menu-arrow");
                if (arrow) {
                    arrow.innerHTML = "▶";
                    arrow.className = "menu-arrow";
                }
            } else {
                content.style.display = "block";

                // Atualiza a seta
                var arrow = header.querySelector(".menu-arrow");
                if (arrow) {
                    arrow.innerHTML = "▼";
                    arrow.className = "menu-arrow menu-arrow-down";
                }
            }
        }
    }

    // Garantir que o script funcione em todos os navegadores
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", function () {
            console.log("Menu HTML carregado");
        });
    } else {
        console.log("Menu HTML carregado");
    }
</script>
</script>