.toc-container {
    margin: 20px 0;
    padding: 15px;
    background: #f1f5f9;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    max-width: 100%; /* Largura total no mobile */
    width: 100%; /* Ocupa 100% da largura */
    max-height: 80vh; /* Limite de altura para ativar a rolagem quando necessário */
    overflow-y: auto; /* Ativa a barra de rolagem vertical */
    position: relative;
    z-index: 1000; /* Mantém sobreposição necessária */
}

.toc-container strong {
    font-size: 18px;
    color: #111827;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.toc-list li {
    margin: 5px 0;
}

.toc-list .toc-level-2 {
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
}

.toc-list .toc-level-3 {
    font-size: 14px;
    font-weight: 400;
    color: #4b5563;
    margin-left: 20px;
}

.toc-list a {
    text-decoration: none;
}

.toc-list .toc-level-2 a {
    color: #2563eb;
}

.toc-list .toc-level-2 a:hover {
    color: #1d4ed8;
}

.toc-list .toc-level-3 a {
    color: #6b7280;
}

.toc-list .toc-level-3 a:hover {
    color: #4b5563;
}

/* Barra de rolagem fina e discreta */
.toc-container::-webkit-scrollbar {
    width: 5px; /* Largura da barra de rolagem */
}

.toc-container::-webkit-scrollbar-track {
    background: #f1f5f9; /* Mesma cor de fundo do contêiner */
}

.toc-container::-webkit-scrollbar-thumb {
    background-color: #cccccc; /* Cor mais clara para combinar com o estilo */
    border-radius: 10px; /* Bordas arredondadas */
}

.toc-container::-webkit-scrollbar-thumb:hover {
    background-color: #b3b3b3; /* Cor ligeiramente mais escura ao passar o mouse */
}

/* Ajuste para dispositivos móveis e tablets */
@media (max-width: 1024px) {
    .toc-container {
        position: relative;
        top: auto;
        max-height: none; /* Remove a restrição de altura em dispositivos móveis */
        width: 100%; /* Ocupa 100% da largura em dispositivos móveis */
    }
}

/* Âncoras invisíveis antes dos cabeçalhos */
.toc-anchor {
    display: block; /* Garante que a âncora seja um elemento de bloco clicável */
    position: relative;
    top: -80px; /* Ajusta a posição para evitar sobreposição com cabeçalhos fixos */
    visibility: hidden; /* Torna invisível sem removê-la da página */
    height: 0; /* Remove qualquer altura visível */
    line-height: 0; /* Remove qualquer linha visível */
}