Aditivo é uma modificação formal registrada no sistema, que altera os termos originais de uma garantia ou contrato vinculado, sem que seja necessário cadastrar uma nova garantia.

Definições Gerais de um aditivo são os parâmetros fundamentais que caracterizam a alteração registrada, incluindo informações administrativas, referências contratuais, vigência, justificativas e classificações do aditivo, que impactam sua validade, rastreabilidade e integração com demais módulos do sistema.

Ordenação das cláusulas de aditivo é a definição da ordem em que as cláusulas são apresentadas ou aplicadas dentro de um termo aditivo, com o objetivo de manter a clareza, coerência legal e padronização contratual.

<!-- Contêiner principal -->
<div class="menu-container">  
  <!-- Menu Item: -->
  <div class="menu-item">
    <div class="menu-header" onclick="toggleMenu(this)">
      <span>Definições Globais - Vídeo</span>
      <span class="menu-arrow">▶</span>
    </div>
    <div class="menu-content">
      <div class="submenu-title"></div>
      <div class="submenu-description">
      </div>
      <ul class="submenu-items">
        <li class="submenu-item">
        <a href="link do video" class="submenu-link"><strong>⮩ Veja um vídeo alto explicativo</a></strong>
        </li>
      </ul>
    </div>
  </div>
  
</div> 
<style>
    /* Estilos para o menu */
    .menu-container {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

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

    .menu-header {
        background-color: #6B8E23;
        color: white;
        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>