.tabs-lio { display: flex; justify-content: space-between; margin: 0 auto 24px; max-width: 100%; gap: 8px; } .tabs-lio button { flex: 1; background: #f4f4f4; border: none; padding: 16px 0; font-weight: 600; font-size: 16px; color: #111; transition: all 0.3s ease; border-radius: 6px; } .tabs-lio button.active { background-color: #C4151C; color: white; } .tabs-lio button:hover { background-color: #C4151C; color: white; } .tab-content { display: none; } .tab-content.active { display: block; } .accordion-lio { margin-bottom: 14px; border-radius: 6px; overflow: hidden; border: 1px solid #ccc; } .accordion-lio summary { background-color: #f5f5f5; cursor: pointer; padding: 12px 16px; font-weight: bold; font-size: 16px; list-style: none; color: #C4151C; } .accordion-lio[open] summary { background-color: #e9e9e9; } .lio-table { width: 100%; border-collapse: collapse; font-size: 14px; } .lio-table th { background-color: #f0f0f0; text-align: left; padding: 10px; border: 1px solid #ddd; font-weight: 600; } .lio-table td { padding: 10px; border: 1px solid #eee; } .lio-table td:first-child, .lio-table th:first-child { white-space: nowrap; font-weight: bold; } (function() { const sheetId = "1AUVReikjnZXceeJxxgMKXUksILYlKX-cH00ZwhWA1Nw"; const apiKey = "AIzaSyAsn9q93cu9If9iyUPODCBWlPOjZzM_j44"; function carregarTabela(sheet, elementId) { fetch(`https://sheets.googleapis.com/v4/spreadsheets/${sheetId}/values/${sheet}!A1:C?key=${apiKey}`) .then(res => res.json()) .then(data => { const container = document.getElementById(elementId); if (!data.values || data.values.length === 0) { container.innerHTML = "Nenhum dado encontrado."; return; } let html = ""; data.values.forEach((row, i) => { html += ""; row.forEach(cell => { html += `${cell}`; }); html += ""; }); html += ""; container.innerHTML = html; }) .catch(error => { document.getElementById(elementId).innerText = "Erro ao carregar dados."; console.error("Erro ao buscar dados:", error); }); } function showTab(targetId) { document.querySelectorAll(".tab-btn").forEach(btn => btn.classList.remove("active")); document.querySelectorAll(".tab-content").forEach(tab => tab.classList.remove("active")); document.querySelector(`[data-target='${targetId}']`).classList.add("active"); document.getElementById(targetId).classList.add("active"); } window.addEventListener("load", function () { // Controle das abas document.querySelectorAll(".tab-btn").forEach(btn => { btn.addEventListener("click", () => showTab(btn.dataset.target)); }); // Carregar todas as abas ao carregar página carregarTabela("principal18", "table-principal18"); carregarTabela("esportiva18", "table-esportiva18"); carregarTabela("principal19", "table-principal19"); carregarTabela("esportiva19", "table-esportiva19"); carregarTabela("principal20", "table-principal20"); carregarTabela("esportiva20", "table-esportiva20"); }); })();