diff --git a/pos/static/js/config.js b/pos/static/js/config.js
index 55d6d00..428c193 100644
--- a/pos/static/js/config.js
+++ b/pos/static/js/config.js
@@ -1205,11 +1205,11 @@ const Config = (() => {
 
     function switchPermTab(tab) {
         _currentPermTab = tab;
-        document.querySelectorAll('#perm-panel-modules, #perm-panel-workshop').forEach(function(el) { el.style.display = 'none'; el.classList.remove('is-active'); });
-        document.querySelectorAll('#tab-perm-modules, #tab-perm-workshop').forEach(function(el) { el.classList.remove('is-active'); });
+        document.querySelectorAll('#perm-panel-modules, #perm-panel-workshop').forEach(function(el) { el.style.display = 'none'; el.classList.remove('active'); });
+        document.querySelectorAll('#tab-perm-modules, #tab-perm-workshop').forEach(function(el) { el.classList.remove('active'); });
         document.getElementById('perm-panel-' + tab).style.display = 'block';
-        document.getElementById('perm-panel-' + tab).classList.add('is-active');
-        document.getElementById('tab-perm-' + tab).classList.add('is-active');
+        document.getElementById('perm-panel-' + tab).classList.add('active');
+        document.getElementById('tab-perm-' + tab).classList.add('active');
     }
 
     // -------------------------------------------------------------------------
diff --git a/pos/templates/config.html b/pos/templates/config.html
index 1ceebe6..0cf6284 100644
--- a/pos/templates/config.html
+++ b/pos/templates/config.html
@@ -867,12 +867,12 @@
             </div>
 
             <!-- Permission tabs -->
-            <div class="tab-bar" style="margin-top:var(--space-4);border-bottom:1px solid var(--color-border);">
-              <button type="button" class="tab-btn is-active" id="tab-perm-modules" onclick="Config.switchPermTab('modules')">Módulos</button>
-              <button type="button" class="tab-btn" id="tab-perm-workshop" onclick="Config.switchPermTab('workshop')">Taller</button>
+            <div class="cfg-tabs" style="margin-top:var(--space-4);position:static;">
+              <button type="button" class="cfg-tab-btn active" id="tab-perm-modules" onclick="Config.switchPermTab('modules')">Módulos</button>
+              <button type="button" class="cfg-tab-btn" id="tab-perm-workshop" onclick="Config.switchPermTab('workshop')">Taller</button>
             </div>
 
-            <div id="perm-panel-modules" class="tab-panel is-active" style="margin-top:var(--space-4);">
+            <div id="perm-panel-modules" class="perm-panel active" style="margin-top:var(--space-4);">
               <div id="role-permissions-container">
                 <p style="color:var(--color-text-muted);">Selecciona un rol para ver y editar sus permisos.</p>
               </div>
@@ -882,7 +882,7 @@
               </div>
             </div>
 
-            <div id="perm-panel-workshop" class="tab-panel" style="margin-top:var(--space-4);display:none;">
+            <div id="perm-panel-workshop" class="perm-panel" style="margin-top:var(--space-4);display:none;">
               <div id="workshop-permissions-container">
                 <p style="color:var(--color-text-muted);">Selecciona un rol para ver y editar sus permisos de Taller.</p>
               </div>
@@ -1038,7 +1038,7 @@
   <script src="/pos/static/js/pos-utils.js?v=33" defer></script>
   <script src="/pos/static/js/sidebar.js?v=45" defer></script>
   <script src="/pos/static/js/kiosk.js" defer></script>
-  <script src="/pos/static/js/config.js?v=40" defer></script>
+  <script src="/pos/static/js/config.js?v=41" defer></script>
   <script src="/pos/static/js/sync-engine.js" defer></script>
   <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
   <script src="/pos/static/js/pwa-install.js" defer></script>