Widget:Conquistas

<style> .gla-conquistas {

 max-width: 1100px;
 margin: 0 auto 20px;
 padding: 20px;
 border-radius: 16px;
 background: #ffffff;
 border: 1px solid #e5e7eb;

}

.gla-conquistas-header h2 {

 margin: 0;
 font-size: 26px;
 font-weight: 700;
 color: #020617;

}

.gla-conquistas-header p {

 margin: 4px 0 16px;
 color: #64748b;
 font-size: 14px;

}

.gla-conquistas-tabs {

 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-bottom: 20px;

}

.gla-conquistas-tab {

 padding: 8px 14px;
 border-radius: 999px;
 border: 1px solid #cbd5e1;
 background: #f8fafc;
 cursor: pointer;
 font-size: 13px;
 font-weight: 600;
 color: #0f172a;

}

.gla-conquistas-tab:hover {

 background: #e2e8f0;

}

.gla-conquistas-tab.is-active {

 background: #0f172a;
 color: #ffffff;
 border-color: #0f172a;

}

.gla-conquistas-panel {

 display: none;

}

.gla-conquistas-panel.is-active {

 display: block;

}

.gla-list {

 display: flex;
 flex-direction: column;
 gap: 10px;

}

.gla-item {

 padding: 12px 14px;
 border-radius: 10px;
 border: 1px solid #e5e7eb;
 background: #f8fafc;

}

.gla-item-title {

 font-weight: 700;
 font-size: 15px;
 color: #0f172a;

}

.gla-item-desc {

 font-size: 13px;
 color: #64748b;
 margin-top: 2px;

} </style>

<script> document.addEventListener("DOMContentLoaded", function () {

 var widgets = document.querySelectorAll(".gla-conquistas");

 widgets.forEach(function(widget) {
   var tabs = widget.querySelectorAll(".gla-conquistas-tab");
   var panels = widget.querySelectorAll(".gla-conquistas-panel");

   tabs.forEach(function(tab) {
     tab.addEventListener("click", function() {
       var selected = tab.getAttribute("data-tab");

       tabs.forEach(function(item) {
         item.classList.remove("is-active");
       });

       panels.forEach(function(panel) {
         panel.classList.remove("is-active");
       });

       tab.classList.add("is-active");

       var activePanel = widget.querySelector('.gla-conquistas-panel[data-tab-content="' + selected + '"]');

       if (activePanel) {
         activePanel.classList.add("is-active");
       }
     });
   });
 });

}); </script>