From a9d6150bc95bbdf381c235d178e07f5300f220aa Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Mon, 30 Mar 2026 07:19:26 +0000
Subject: [PATCH] Actualizar js/layout.js

---
 js/layout.js | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/js/layout.js b/js/layout.js
index 935000c..09daf2b 100644
--- a/js/layout.js
+++ b/js/layout.js
@@ -24,33 +24,33 @@ document.addEventListener("DOMContentLoaded", () => {
     if (token) setupUserInfo(token);
 });
 
-// --- GENERADOR DE BARRA LATERAL (DISEÑO ORIGINAL RESTAURADO) ---
+// --- GENERADOR DE BARRA LATERAL (CON EL NUEVO ENLACE) ---
 function renderSidebar() {
     const container = document.getElementById('sidebar-container');
     if (!container) return;
 
     const path = window.location.pathname.split("/").pop() || "index.html";
 
- // MENUS.
-const menuItems = [
-    { name: "Dashboard", link: "panel.html", icon: "layout-dashboard" },
-    { name: "Servicios", link: "servicios.html", icon: "briefcase" },
-    { name: "Citas / Bloqueos", link: "agenda.html", icon: "calendar-clock" },
-    { name: "Proveedores", link: "proveedores.html", icon: "building-2" }, 
-    { name: "Calendario", link: "calendario.html", icon: "calendar" },
-    { name: "Clientes", link: "clientes.html", icon: "users" },
-    { name: "Contabilidad", link: "contabilidad.html", icon: "wallet" }, // <-- NUEVO PANEL FINANCIERO
-    { name: "Trazabilidad", link: "trazabilidad.html", icon: "activity" }, // <-- HISTORIAL DE LOGS
-    { name: "Usuarios", link: "usuarios.html", icon: "user-cog" },
-    { name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, 
-    { name: "Configuración", link: "configuracion.html", icon: "settings" },
-];
+    const menuItems = [
+        { name: "Dashboard", link: "panel.html", icon: "layout-dashboard" },
+        { name: "Servicios", link: "servicios.html", icon: "briefcase" },
+        { name: "Citas / Bloqueos", link: "agenda.html", icon: "calendar-clock" },
+        { name: "Proveedores", link: "proveedores.html", icon: "building-2" }, 
+        { name: "Calendario", link: "calendario.html", icon: "calendar" },
+        // --- NUEVO APARTADO ---
+        { name: "Planes de Protección", link: "proteccion.html", icon: "shield-check" }, 
+        // ----------------------
+        { name: "Clientes", link: "clientes.html", icon: "users" },
+        { name: "Contabilidad", link: "contabilidad.html", icon: "wallet" },
+        { name: "Trazabilidad", link: "trazabilidad.html", icon: "activity" },
+        { name: "Usuarios", link: "usuarios.html", icon: "user-cog" },
+        { name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, 
+        { name: "Configuración", link: "configuracion.html", icon: "settings" },
+    ];
 
     const linksHtml = menuItems.map(item => {
         const isActive = path === item.link;
-        // ESTILOS ORIGINALES (Texto Slate-400, Hover Blanco/Slate-800)
         const baseClasses = "nav-item flex items-center gap-3 px-4 py-3 rounded-lg transition-all text-sm font-medium";
-        // Si está activo, usamos el azul original de tu diseño, si no, el gris
         const activeClasses = isActive 
             ? "bg-blue-600 text-white shadow-lg shadow-blue-500/30" 
             : "text-slate-400 hover:text-white hover:bg-slate-800";
@@ -63,16 +63,15 @@ const menuItems = [
         `;
     }).join("");
 
+    // El resto del código de renderSidebar permanece igual...
     container.innerHTML = `
         <aside class="w-64 bg-slate-900 text-white flex flex-col shadow-xl z-20 h-full transition-all">
             <div class="h-16 flex items-center justify-center border-b border-slate-800 shrink-0">
                 <h1 class="text-xl font-bold tracking-wider text-blue-400">INTEGRA<span class="text-white">REPARA</span></h1>
             </div>
-            
             <nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto no-scrollbar">
                 ${linksHtml}
             </nav>
-
             <div class="p-4 border-t border-slate-800 shrink-0">
                 <button onclick="logout()" class="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors w-full p-2 rounded hover:bg-slate-800 font-medium text-sm">
                     <i data-lucide="log-out" class="w-5 h-5"></i>