diff --git a/configuracion.html b/configuracion.html
index b9bff16..7488ca8 100644
--- a/configuracion.html
+++ b/configuracion.html
@@ -6,29 +6,441 @@
     <title>Configuración - IntegraRepara</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
-    <style>.fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }</style>
+    <style>
+        .fade-in { animation: fadeIn 0.3s ease-in-out; }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        /* Scrollbar fina */
+        .scroller::-webkit-scrollbar { width: 6px; }
+        .scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
+    </style>
 </head>
-<body class="bg-gray-50 text-gray-800 font-sans antialiased">
-    <div class="flex h-screen overflow-hidden">
+<body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden">
+
+    <div class="flex h-full">
         <div id="sidebar-container" class="h-full"></div>
-        <div class="flex-1 flex flex-col overflow-hidden relative">
+
+        <div class="flex-1 flex flex-col h-full relative">
             <div id="header-container"></div>
-            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 p-8 fade-in">
+            
+            <main class="flex-1 overflow-hidden flex flex-col p-6 fade-in">
                 
-                <h2 class="text-2xl font-bold text-gray-800 mb-8">Configuración General</h2>
-                
-                <div class="bg-white p-12 rounded-xl shadow-sm border border-gray-100 text-center">
-                    <div class="inline-flex p-4 bg-gray-100 rounded-full mb-4 text-gray-400">
-                        <i data-lucide="settings" class="w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-lg font-bold text-gray-800">Ajustes Generales</h3>
-                    <p class="text-gray-500 mt-2">Próximamente aquí podrás configurar facturación, notificaciones y más.</p>
-                    <p class="text-sm text-blue-600 mt-4 font-medium">La gestión de usuarios y gremios se ha movido al menú "Usuarios".</p>
+                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2">
+                    <i data-lucide="settings" class="text-blue-600"></i> Configuración del Sistema
+                </h2>
+
+                <div class="flex border-b border-gray-200 mb-6">
+                    <button onclick="showTab('users')" id="tab-users" class="tab-btn px-6 py-3 text-sm font-bold text-blue-600 border-b-2 border-blue-600 hover:bg-gray-50 transition">
+                        <i data-lucide="users" class="inline w-4 h-4 mr-1"></i> Equipo
+                    </button>
+                    <button onclick="showTab('guilds')" id="tab-guilds" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
+                        <i data-lucide="hammer" class="inline w-4 h-4 mr-1"></i> Gremios
+                    </button>
+                    <button onclick="showTab('zones')" id="tab-zones" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
+                        <i data-lucide="map" class="inline w-4 h-4 mr-1"></i> Zonas
+                    </button>
+                    <button onclick="showTab('statuses')" id="tab-statuses" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 transition">
+                        <i data-lucide="activity" class="inline w-4 h-4 mr-1"></i> Estados
+                    </button>
                 </div>
 
+                <div class="flex-1 overflow-hidden relative">
+
+                    <div id="view-users" class="tab-content h-full flex flex-col">
+                        <div class="flex justify-end mb-4">
+                            <button onclick="openUserModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-2 text-sm shadow">
+                                <i data-lucide="user-plus" class="w-4 h-4"></i> Nuevo Empleado
+                            </button>
+                        </div>
+                        <div class="bg-white rounded-xl shadow border border-gray-100 flex-1 overflow-auto scroller">
+                            <table class="w-full text-left">
+                                <thead class="bg-gray-50 text-gray-500 text-xs uppercase sticky top-0">
+                                    <tr>
+                                        <th class="p-4">Nombre</th>
+                                        <th class="p-4">Rol</th>
+                                        <th class="p-4">Contacto</th>
+                                        <th class="p-4 text-right">Acciones</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="usersTableBody" class="divide-y divide-gray-100 text-sm"></tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div id="view-guilds" class="tab-content hidden h-full flex flex-col">
+                        <div class="flex gap-4 mb-4">
+                            <input type="text" id="newGuildName" placeholder="Nombre del gremio (Ej: Fontanería)" class="flex-1 border rounded-lg px-4 outline-none focus:border-blue-500">
+                            <button onclick="addGuild()" class="bg-blue-600 text-white px-6 rounded-lg hover:bg-blue-700">Añadir</button>
+                        </div>
+                        <div class="bg-white rounded-xl shadow border border-gray-100 flex-1 overflow-auto scroller p-4">
+                            <div id="guildsList" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                </div>
+                        </div>
+                    </div>
+
+                    <div id="view-zones" class="tab-content hidden h-full flex flex-col">
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 h-full">
+                            
+                            <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden">
+                                <div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700">1. Selecciona Provincia</div>
+                                <div class="p-2 border-b"><input type="text" id="searchProv" placeholder="Filtrar..." class="w-full text-xs p-2 border rounded" onkeyup="filterProvinces()"></div>
+                                <div id="listProvinces" class="flex-1 overflow-y-auto scroller p-2 space-y-1"></div>
+                            </div>
+
+                            <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden opacity-50 pointer-events-none transition-opacity" id="colZones">
+                                <div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700 flex justify-between items-center">
+                                    <span>2. Crear/Elegir Zona</span>
+                                    <button onclick="addZonePrompt()" class="text-blue-600 hover:bg-blue-100 p-1 rounded"><i data-lucide="plus" class="w-4 h-4"></i></button>
+                                </div>
+                                <div id="listZones" class="flex-1 overflow-y-auto scroller p-2 space-y-1 text-sm">
+                                    <p class="text-center text-gray-400 mt-10">Selecciona una provincia</p>
+                                </div>
+                            </div>
+
+                            <div class="bg-white rounded-xl shadow border border-gray-100 flex flex-col h-full overflow-hidden opacity-50 pointer-events-none transition-opacity" id="colOperators">
+                                <div class="p-3 bg-gray-50 border-b border-gray-200 font-bold text-sm text-gray-700 flex justify-between items-center">
+                                    <span>3. Asignar Operarios</span>
+                                    <button onclick="saveZoneAssignment()" class="bg-green-600 text-white text-xs px-3 py-1 rounded hover:bg-green-700 shadow">Guardar</button>
+                                </div>
+                                <div id="listOperators" class="flex-1 overflow-y-auto scroller p-2 space-y-1">
+                                    <p class="text-center text-gray-400 mt-10">Selecciona una zona</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="view-statuses" class="tab-content hidden h-full">
+                        <div class="bg-white rounded-xl shadow border border-gray-100 p-6">
+                            <h3 class="font-bold text-gray-700 mb-4">Estados del Servicio</h3>
+                            <div id="statusList" class="space-y-2">
+                                </div>
+                            <p class="text-xs text-gray-400 mt-4">* Los estados se gestionan automáticamente por ahora.</p>
+                        </div>
+                    </div>
+
+                </div>
             </main>
         </div>
     </div>
+
+    <div id="userModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center backdrop-blur-sm">
+        <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg p-6 animate-slide-in">
+            <h3 class="text-xl font-bold mb-4">Nuevo Empleado</h3>
+            <form onsubmit="createUser(event)" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <input type="text" id="uName" placeholder="Nombre Completo" required class="w-full border p-2 rounded">
+                    <input type="tel" id="uPhone" placeholder="Teléfono" required class="w-full border p-2 rounded">
+                </div>
+                <input type="email" id="uEmail" placeholder="Email" required class="w-full border p-2 rounded">
+                <input type="password" id="uPass" placeholder="Contraseña" required class="w-full border p-2 rounded">
+                
+                <div class="grid grid-cols-2 gap-4">
+                    <select id="uRole" class="w-full border p-2 rounded bg-white">
+                        <option value="operario">Operario</option>
+                        <option value="admin">Administrador</option>
+                    </select>
+                </div>
+
+                <div class="border p-3 rounded max-h-32 overflow-y-auto">
+                    <p class="text-xs font-bold text-gray-500 mb-2">Asignar Gremios (Si es operario)</p>
+                    <div id="uGuildsList" class="grid grid-cols-2 gap-2 text-sm">
+                        </div>
+                </div>
+
+                <div class="flex justify-end gap-2 mt-4">
+                    <button type="button" onclick="document.getElementById('userModal').classList.add('hidden')" class="px-4 py-2 text-gray-500 hover:text-gray-700">Cancelar</button>
+                    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Guardar</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div id="toast" class="fixed bottom-5 right-5 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"><span id="toastMsg">Msg</span></div>
+
     <script src="js/layout.js"></script>
+    <script>
+        // VARIABLES GLOBALES
+        let provinces = [], currentProvId = null, currentZoneId = null;
+        let allOperators = [];
+
+        document.addEventListener("DOMContentLoaded", () => {
+            if (!localStorage.getItem("token")) window.location.href = "index.html";
+            // Cargar datos iniciales
+            loadUsers();
+            loadGuilds();
+            loadProvinces();
+            loadStatuses();
+        });
+
+        // --- SISTEMA DE PESTAÑAS ---
+        function showTab(tabId) {
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.getElementById(`view-${tabId}`).classList.remove('hidden');
+            
+            document.querySelectorAll('.tab-btn').forEach(el => {
+                el.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
+                el.classList.add('text-gray-500');
+            });
+            const btn = document.getElementById(`tab-${tabId}`);
+            btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
+            btn.classList.remove('text-gray-500');
+        }
+
+        // ============================
+        // 1. LÓGICA DE USUARIOS
+        // ============================
+        async function loadUsers() {
+            try {
+                const res = await fetch(`${API_URL}/admin/users`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+                const data = await res.json();
+                const tbody = document.getElementById('usersTableBody');
+                tbody.innerHTML = "";
+                data.users.forEach(u => {
+                    tbody.innerHTML += `
+                        <tr class="hover:bg-gray-50">
+                            <td class="p-4 font-medium">${u.full_name}</td>
+                            <td class="p-4"><span class="px-2 py-1 rounded text-xs uppercase font-bold ${u.role==='admin'?'bg-purple-100 text-purple-700':'bg-blue-100 text-blue-700'}">${u.role}</span></td>
+                            <td class="p-4 text-gray-500">${u.phone}<br><span class="text-xs">${u.email}</span></td>
+                            <td class="p-4 text-right">
+                                <button onclick="deleteUser(${u.id})" class="text-red-500 hover:bg-red-50 p-2 rounded"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
+                            </td>
+                        </tr>
+                    `;
+                });
+                lucide.createIcons();
+            } catch(e) {}
+        }
+
+        async function openUserModal() {
+            // Cargar gremios en el modal
+            const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            const container = document.getElementById('uGuildsList');
+            container.innerHTML = "";
+            data.guilds.forEach(g => {
+                container.innerHTML += `<label class="flex items-center gap-2"><input type="checkbox" value="${g.id}" class="guild-check text-blue-600 rounded"> ${g.name}</label>`;
+            });
+            document.getElementById('userModal').classList.remove('hidden');
+        }
+
+        async function createUser(e) {
+            e.preventDefault();
+            const guilds = Array.from(document.querySelectorAll('.guild-check:checked')).map(cb => cb.value);
+            const body = {
+                fullName: document.getElementById('uName').value,
+                phone: document.getElementById('uPhone').value,
+                email: document.getElementById('uEmail').value,
+                password: document.getElementById('uPass').value,
+                role: document.getElementById('uRole').value,
+                guilds: guilds
+            };
+
+            try {
+                const res = await fetch(`${API_URL}/admin/users`, {
+                    method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify(body)
+                });
+                const json = await res.json();
+                if(json.ok) { 
+                    showToast("Usuario creado"); 
+                    document.getElementById('userModal').classList.add('hidden'); 
+                    e.target.reset();
+                    loadUsers(); 
+                } else { showToast(json.error, true); }
+            } catch(e) { showToast("Error", true); }
+        }
+
+        async function deleteUser(id) {
+            if(!confirm("¿Borrar usuario?")) return;
+            await fetch(`${API_URL}/admin/users/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            loadUsers();
+        }
+
+        // ============================
+        // 2. LÓGICA DE GREMIOS
+        // ============================
+        async function loadGuilds() {
+            const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            const list = document.getElementById('guildsList');
+            list.innerHTML = "";
+            data.guilds.forEach(g => {
+                list.innerHTML += `
+                    <div class="flex justify-between items-center p-3 border rounded-lg bg-gray-50">
+                        <span class="font-medium">${g.name}</span>
+                        <button onclick="deleteGuild(${g.id})" class="text-red-400 hover:text-red-600"><i data-lucide="trash" class="w-4 h-4"></i></button>
+                    </div>
+                `;
+            });
+            lucide.createIcons();
+        }
+
+        async function addGuild() {
+            const name = document.getElementById('newGuildName').value;
+            if(!name) return;
+            await fetch(`${API_URL}/guilds`, {
+                method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                body: JSON.stringify({ name: name.toUpperCase() })
+            });
+            document.getElementById('newGuildName').value = "";
+            loadGuilds();
+        }
+
+        async function deleteGuild(id) {
+            if(!confirm("¿Borrar gremio?")) return;
+            await fetch(`${API_URL}/guilds/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            loadGuilds();
+        }
+
+        // ============================
+        // 3. LÓGICA DE ZONAS (Compleja)
+        // ============================
+        async function loadProvinces() {
+            const res = await fetch(`${API_URL}/provinces`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            provinces = data.provinces;
+            renderProvinces(provinces);
+        }
+
+        function renderProvinces(list) {
+            const cont = document.getElementById('listProvinces');
+            cont.innerHTML = "";
+            list.forEach(p => {
+                const div = document.createElement('div');
+                div.className = "p-2 hover:bg-blue-50 rounded cursor-pointer text-sm flex justify-between items-center group prov-item";
+                div.innerHTML = `<span>${p.name}</span><i data-lucide="chevron-right" class="w-4 h-4 text-gray-300"></i>`;
+                div.onclick = () => selectProvince(p.id, div);
+                cont.appendChild(div);
+            });
+            lucide.createIcons();
+        }
+
+        function filterProvinces() {
+            const term = document.getElementById('searchProv').value.toLowerCase();
+            renderProvinces(provinces.filter(p => p.name.toLowerCase().includes(term)));
+        }
+
+        async function selectProvince(id, el) {
+            currentProvId = id;
+            document.querySelectorAll('.prov-item').forEach(d => d.classList.remove('bg-blue-100', 'font-bold'));
+            el.classList.add('bg-blue-100', 'font-bold');
+
+            document.getElementById('colZones').classList.remove('opacity-50', 'pointer-events-none');
+            document.getElementById('colOperators').classList.add('opacity-50', 'pointer-events-none');
+            loadZones(id);
+        }
+
+        async function loadZones(provId) {
+            const res = await fetch(`${API_URL}/zones?province_id=${provId}`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            const list = document.getElementById('listZones');
+            list.innerHTML = "";
+            
+            data.zones.forEach(z => {
+                const div = document.createElement('div');
+                div.className = "p-3 border border-gray-100 rounded hover:border-blue-300 cursor-pointer bg-white mb-2 flex justify-between items-center zone-item";
+                div.innerHTML = `<span class="font-medium text-gray-700">${z.name}</span>`;
+                
+                if (z.owner_id) { // Solo borrar mis zonas
+                    const btn = document.createElement('button');
+                    btn.innerHTML = '<i data-lucide="trash" class="w-3 h-3"></i>';
+                    btn.className = "text-red-300 hover:text-red-500";
+                    btn.onclick = (e) => { e.stopPropagation(); deleteZone(z.id); };
+                    div.appendChild(btn);
+                }
+                div.onclick = () => selectZone(z.id, div);
+                list.appendChild(div);
+            });
+            lucide.createIcons();
+        }
+
+        async function addZonePrompt() {
+            const name = prompt("Nombre de la nueva zona (ej: Zona Norte):");
+            if(!name) return;
+            await fetch(`${API_URL}/zones`, {
+                method: 'POST', headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                body: JSON.stringify({ province_id: currentProvId, name })
+            });
+            loadZones(currentProvId);
+        }
+
+        async function deleteZone(id) {
+            if(!confirm("¿Borrar zona?")) return;
+            await fetch(`${API_URL}/zones/${id}`, { method: 'DELETE', headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            loadZones(currentProvId);
+        }
+
+        async function selectZone(id, el) {
+            currentZoneId = id;
+            document.querySelectorAll('.zone-item').forEach(d => d.classList.remove('border-blue-500', 'bg-blue-50'));
+            el.classList.add('border-blue-500', 'bg-blue-50');
+            document.getElementById('colOperators').classList.remove('opacity-50', 'pointer-events-none');
+            loadOperatorsForZone(id);
+        }
+
+        async function loadOperatorsForZone(zoneId) {
+            // 1. Cargar todos los operarios
+            const resOps = await fetch(`${API_URL}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const dataOps = await resOps.json();
+            
+            // 2. Cargar asignados
+            const resAssigned = await fetch(`${API_URL}/zones/${zoneId}/operators`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const dataAssigned = await resAssigned.json(); // returns { assignedIds: [1, 5] }
+            const assignedSet = new Set(dataAssigned.assignedIds);
+
+            const list = document.getElementById('listOperators');
+            list.innerHTML = "";
+            
+            dataOps.operators.forEach(op => {
+                const checked = assignedSet.has(op.id) ? 'checked' : '';
+                list.innerHTML += `
+                    <label class="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer">
+                        <input type="checkbox" value="${op.id}" class="op-zone-check w-4 h-4 text-green-600 rounded mr-3" ${checked}>
+                        <span class="text-sm font-medium text-gray-700">${op.full_name}</span>
+                    </label>
+                `;
+            });
+        }
+
+        async function saveZoneAssignment() {
+            const checkboxes = document.querySelectorAll('.op-zone-check:checked');
+            const ids = Array.from(checkboxes).map(c => c.value);
+            
+            try {
+                await fetch(`${API_URL}/zones/${currentZoneId}/assign`, {
+                    method: 'POST',
+                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
+                    body: JSON.stringify({ operator_ids: ids })
+                });
+                showToast("Asignación guardada ✅");
+            } catch(e) { showToast("Error al guardar", true); }
+        }
+
+        // ============================
+        // 4. LÓGICA DE ESTADOS
+        // ============================
+        async function loadStatuses() {
+            const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
+            const data = await res.json();
+            const list = document.getElementById('statusList');
+            list.innerHTML = "";
+            data.statuses.forEach(s => {
+                list.innerHTML += `
+                    <div class="flex items-center gap-3 p-3 border rounded bg-white">
+                        <div class="w-4 h-4 rounded-full bg-${s.color}-500"></div>
+                        <span class="font-bold text-gray-700">${s.name}</span>
+                        ${s.is_default ? '<span class="text-xs bg-gray-200 px-2 rounded">Default</span>' : ''}
+                        ${s.is_final ? '<span class="text-xs bg-black text-white px-2 rounded">Final</span>' : ''}
+                    </div>
+                `;
+            });
+        }
+
+        function showToast(msg, isError = false) {
+            const t = document.getElementById('toast'), m = document.getElementById('toastMsg');
+            t.className = `fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-2xl transition-all duration-300 z-50 flex items-center gap-3 ${isError ? 'bg-red-600' : 'bg-slate-800'} text-white`;
+            m.innerText = msg; t.classList.remove('translate-y-20', 'opacity-0');
+            setTimeout(() => t.classList.add('translate-y-20', 'opacity-0'), 3000);
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
