diff --git a/trazabilidad.html b/trazabilidad.html
index 5660c15..e72c2ad 100644
--- a/trazabilidad.html
+++ b/trazabilidad.html
@@ -12,6 +12,7 @@
         .no-scrollbar::-webkit-scrollbar { display: none; }
         .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
         
+        /* Línea continua del timeline */
         .timeline-line::before {
             content: ''; position: absolute; top: 0; bottom: 0; left: 23px; width: 2px; background: #e2e8f0; z-index: 0;
         }
@@ -19,6 +20,8 @@
         .selected-card {
             background-color: #eff6ff !important;
             border-color: #bfdbfe !important;
+            ring: 2px;
+            ring-color: #3b82f6;
         }
     </style>
 </head>
@@ -47,12 +50,12 @@
                     <div class="p-4 border-b border-slate-200 bg-white space-y-3 shrink-0">
                         <div class="relative">
                             <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
-                            <input type="text" id="searchBox" oninput="renderServices()" placeholder="Buscar cliente, teléfono, ref..." class="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all shadow-sm">
+                            <input type="text" id="searchBox" oninput="renderServices()" placeholder="Buscar cliente, ref, tel..." class="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-medium outline-none focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-100 transition-all">
                         </div>
-                        <div class="flex gap-2 items-center bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-blue-100 focus-within:border-blue-500 transition-all">
+                        <div class="flex gap-2 items-center bg-slate-50 border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                             <div class="px-3 text-slate-400 border-r border-slate-200"><i data-lucide="calendar-days" class="w-4 h-4"></i></div>
                             <input type="month" id="monthBox" onchange="renderServices()" class="w-full bg-transparent text-xs font-black px-2 py-2.5 outline-none text-slate-600 uppercase tracking-widest cursor-pointer">
-                            <button onclick="document.getElementById('monthBox').value=''; renderServices()" class="p-2 text-slate-400 hover:text-red-500 transition-colors" title="Borrar mes"><i data-lucide="x" class="w-4 h-4"></i></button>
+                            <button onclick="document.getElementById('monthBox').value=''; renderServices()" class="p-2 text-slate-400 hover:text-red-500 transition-colors"><i data-lucide="x" class="w-4 h-4"></i></button>
                         </div>
                     </div>
 
@@ -71,16 +74,16 @@
                             <i data-lucide="mouse-pointer-click" class="w-10 h-10"></i>
                         </div>
                         <h2 class="text-2xl font-black text-slate-700 tracking-tight">Selecciona un expediente</h2>
-                        <p class="text-sm text-slate-500 font-medium mt-2 max-w-sm">Busca en el panel izquierdo y haz clic en un servicio para ver todo su historial de movimientos.</p>
+                        <p class="text-sm text-slate-500 font-medium mt-2 max-w-sm">Haz clic en un servicio de la izquierda para auditar sus movimientos.</p>
                     </div>
 
                     <div id="traceabilityView" class="hidden p-6 md:p-10 max-w-4xl mx-auto fade-in">
                         
                         <div class="flex flex-col md:flex-row justify-between items-start md:items-end border-b-2 border-slate-200 pb-4 mb-6 gap-4">
                             <div>
-                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Línea de tiempo del expediente</p>
+                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Historial del expediente</p>
                                 <h2 class="text-3xl font-black text-slate-800 flex items-center gap-3">
-                                    <span id="currentSvcRef">#SVC-000</span>
+                                    <span id="currentSvcRef">#---</span>
                                     <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-lg font-black text-[10px] uppercase tracking-widest border border-blue-200" id="currentSvcStatus">ESTADO</span>
                                 </h2>
                             </div>
@@ -96,7 +99,7 @@
                                     <i data-lucide="pen-tool" class="w-5 h-5"></i>
                                 </div>
                                 <div class="flex-1">
-                                    <textarea id="manualNoteInput" rows="2" placeholder="Escribe un apunte interno, observación o nota para este expediente..." class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-medium outline-none focus:bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 transition-all resize-none"></textarea>
+                                    <textarea id="manualNoteInput" rows="2" placeholder="Escribe un apunte interno..." class="w-full bg-slate-50 border border-slate-200 px-4 py-3 rounded-xl text-sm font-medium outline-none focus:bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 transition-all resize-none"></textarea>
                                     <div class="flex justify-end mt-2">
                                         <button onclick="addManualNote(this)" class="bg-slate-800 hover:bg-slate-700 text-white text-xs font-black uppercase tracking-widest px-5 py-2.5 rounded-lg shadow transition-all flex items-center gap-2 active:scale-95">
                                             Guardar Apunte <i data-lucide="send" class="w-3 h-3"></i>
@@ -119,8 +122,7 @@
     <script src="js/layout.js"></script>
     
     <script>
-        // API_URL ya viene declarada en layout.js, NO la declares de nuevo aquí.
-
+        // No declaramos API_URL porque layout.js ya lo hace.
         let allServices = [];
         let currentServiceId = null;
 
@@ -128,6 +130,7 @@
             if (!localStorage.getItem("token")) window.location.href = "index.html";
             lucide.createIcons();
             
+            // Ponemos el mes actual por defecto
             const now = new Date();
             const currentMonthStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
             document.getElementById('monthBox').value = currentMonthStr;
@@ -185,35 +188,29 @@
 
             list.innerHTML = "";
             if (filtered.length === 0) {
-                list.innerHTML = `
-                    <div class="text-center p-8 mt-10">
-                        <i data-lucide="inbox" class="w-8 h-8 text-slate-300 mx-auto mb-3"></i>
-                        <p class="text-slate-400 text-sm font-bold">No se encontraron expedientes.</p>
-                    </div>`;
+                list.innerHTML = `<div class="text-center p-8 mt-10"><i data-lucide="inbox" class="w-8 h-8 text-slate-300 mx-auto mb-3"></i><p class="text-slate-400 text-sm font-bold">Sin resultados.</p></div>`;
                 lucide.createIcons();
                 return;
             }
 
             filtered.forEach(s => {
                 const raw = s.raw_data || {};
-                const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "Cliente Desconocido";
+                const name = raw["Nombre Cliente"] || raw["CLIENTE"] || "S/N";
                 const date = new Date(s.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: '2-digit' });
-                
+                const isSelected = s.id === currentServiceId ? 'selected-card shadow-md' : 'bg-white hover:bg-slate-50 border-transparent';
                 const statusColor = s.status === 'archived' ? 'bg-slate-200 text-slate-600' : 'bg-emerald-100 text-emerald-700';
-                const statusText = s.status === 'archived' ? 'Archivado' : 'Activo';
-                const isSelected = s.id === currentServiceId ? 'selected-card' : 'bg-white hover:bg-slate-50 border-transparent hover:border-slate-200';
 
                 list.innerHTML += `
-                    <div onclick="selectService(${s.id}, '${s.service_ref}', '${statusText}')" 
-                         class="cursor-pointer p-4 rounded-2xl border transition-all shadow-sm ${isSelected}">
+                    <div onclick="selectService(${s.id}, '${s.service_ref}', '${s.status === 'archived' ? 'Archivado' : 'Activo'}')" 
+                         class="cursor-pointer p-4 rounded-2xl border transition-all ${isSelected}">
                         <div class="flex justify-between items-start mb-1">
-                            <span class="text-xs font-black text-slate-800 tracking-widest uppercase">#${s.service_ref}</span>
-                            <span class="text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded-md ${statusColor}">${statusText}</span>
+                            <span class="text-[10px] font-black text-slate-800 uppercase">#${s.service_ref}</span>
+                            <span class="text-[8px] font-black uppercase px-2 py-0.5 rounded ${statusColor}">${s.status === 'archived' ? 'ARCH' : 'ACT'}</span>
                         </div>
-                        <p class="text-sm font-black text-blue-600 truncate" title="${name}">${name}</p>
+                        <p class="text-sm font-black text-blue-600 truncate uppercase">${name}</p>
                         <div class="flex justify-between items-center mt-2">
-                            <p class="text-[10px] font-bold text-slate-500 truncate pr-2"><i data-lucide="map-pin" class="w-3 h-3 inline"></i> ${raw["Población"] || "Sin zona"}</p>
-                            <p class="text-[10px] font-bold text-slate-400 shrink-0">${date}</p>
+                            <p class="text-[9px] font-bold text-slate-400">${date}</p>
+                            <p class="text-[9px] font-bold text-slate-500 truncate pl-2">${raw["Población"] || ""}</p>
                         </div>
                     </div>
                 `;
@@ -231,19 +228,11 @@
 
             document.getElementById('emptyState').classList.add('hidden');
             document.getElementById('traceabilityView').classList.remove('hidden');
-            
             document.getElementById('currentSvcRef').innerText = `#${ref}`;
             document.getElementById('currentSvcStatus').innerText = statusText;
-            
-            document.getElementById('timelineContainer').innerHTML = `
-                <div class="text-center text-slate-400 py-10 flex flex-col items-center relative z-10">
-                    <i data-lucide="loader-2" class="w-8 h-8 animate-spin mb-3"></i>
-                    <p class="text-xs font-bold uppercase tracking-widest">Descargando historial...</p>
-                </div>
-            `;
+            document.getElementById('timelineContainer').innerHTML = `<div class="text-center py-10"><i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto text-slate-300"></i></div>`;
             lucide.createIcons();
 
-            document.getElementById('manualNoteInput').value = "";
             loadLogsForService(id);
         }
 
@@ -252,125 +241,69 @@
                 const res = await fetch(`${API_URL}/services/${id}/logs`, {
                     headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
                 });
-                
                 const data = await res.json();
                 const container = document.getElementById('timelineContainer');
                 
-                if (!data.ok) throw new Error("Error cargando logs");
-                
-                document.getElementById('logCount').innerText = `${data.logs.length} Registros`;
+                document.getElementById('logCount').innerText = `${data.logs?.length || 0} Registros`;
+                container.innerHTML = ""; 
 
-                if (data.logs.length === 0) {
-                    container.innerHTML = `
-                        <div class="relative pl-14 pt-2 z-10">
-                            <div class="absolute left-[17px] top-4 w-3 h-3 bg-slate-300 rounded-full ring-4 ring-white"></div>
-                            <div class="bg-white shadow-sm border border-slate-200 p-6 rounded-2xl text-center">
-                                <p class="text-sm font-bold text-slate-500 italic">No hay actividad registrada aún para este expediente.</p>
-                            </div>
-                        </div>
-                    `;
+                if (!data.logs || data.logs.length === 0) {
+                    container.innerHTML = `<div class="bg-white p-6 rounded-2xl border text-center text-sm font-bold text-slate-400 italic">Sin actividad registrada.</div>`;
                     return;
                 }
 
-                container.innerHTML = ""; 
-                
                 data.logs.forEach((log, index) => {
                     const dateObj = new Date(log.created_at);
-                    const hoy = new Date();
-                    const esHoy = dateObj.getDate() === hoy.getDate() && dateObj.getMonth() === hoy.getMonth() && dateObj.getFullYear() === hoy.getFullYear();
-                    
-                    const fecha = esHoy ? "Hoy" : dateObj.toLocaleDateString('es-ES', { day: '2-digit', month: 'short', year: 'numeric' });
+                    const fecha = dateObj.toLocaleDateString('es-ES', { day: '2-digit', month: 'short' });
                     const hora = dateObj.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
 
-                    let icon = "activity";
-                    let colorClass = "bg-slate-100 text-slate-600 border-slate-200";
-                    let dotClass = "bg-slate-300 ring-slate-100";
-                    let iconColor = "text-slate-500";
+                    let icon = "activity", color = "bg-blue-50 text-blue-700 border-blue-200", dot = "bg-blue-500";
+                    const txt = (log.action + " " + (log.details || "")).toLowerCase();
                     
-                    const actionLower = log.action.toLowerCase();
-                    const detailsLower = (log.details || "").toLowerCase();
-                    const fullText = actionLower + " " + detailsLower;
-                    
-                    if (fullText.includes('estado') || fullText.includes('actualización')) { icon = "arrow-right-left"; colorClass = "bg-blue-50 text-blue-700 border-blue-200"; dotClass = "bg-blue-500 ring-blue-100"; iconColor = "text-blue-500"; }
-                    else if (fullText.includes('llamada') || fullText.includes('contacto') || fullText.includes('teléfono') || fullText.includes('intento')) { icon = "phone-call"; colorClass = "bg-teal-50 text-teal-700 border-teal-200"; dotClass = "bg-teal-500 ring-teal-100"; iconColor = "text-teal-500"; }
-                    else if (fullText.includes('whatsapp') || fullText.includes('sms')) { icon = "message-circle"; colorClass = "bg-emerald-50 text-emerald-700 border-emerald-200"; dotClass = "bg-emerald-500 ring-emerald-100"; iconColor = "text-emerald-500"; }
-                    else if (fullText.includes('camino') || fullText.includes('ruta')) { icon = "car"; colorClass = "bg-purple-50 text-purple-700 border-purple-200"; dotClass = "bg-purple-500 ring-purple-100"; iconColor = "text-purple-500"; }
-                    else if (fullText.includes('nota') || fullText.includes('apunte') || fullText.includes('manual')) { icon = "sticky-note"; colorClass = "bg-amber-50 text-amber-800 border-amber-200"; dotClass = "bg-amber-400 ring-amber-100"; iconColor = "text-amber-500"; }
-                    else if (fullText.includes('asign') || fullText.includes('bolsa')) { icon = "user-check"; colorClass = "bg-indigo-50 text-indigo-700 border-indigo-200"; dotClass = "bg-indigo-500 ring-indigo-100"; iconColor = "text-indigo-500"; }
-                    else if (fullText.includes('archivado') || fullText.includes('cierre')) { icon = "archive"; colorClass = "bg-slate-200 text-slate-700 border-slate-300"; dotClass = "bg-slate-600 ring-slate-200"; iconColor = "text-slate-600"; }
-                    else if (fullText.includes('creado') || fullText.includes('presupuesto')) { icon = "sparkles"; colorClass = "bg-yellow-50 text-yellow-700 border-yellow-200"; dotClass = "bg-yellow-500 ring-yellow-100"; iconColor = "text-yellow-500"; }
-
-                    const pingAnimation = index === 0 ? `<div class="absolute inset-0 rounded-full ${dotClass.split(' ')[0]} animate-ping opacity-50"></div>` : '';
+                    if (txt.includes('llamada') || txt.includes('contacto')) { icon="phone"; color="bg-teal-50 text-teal-700 border-teal-200"; dot="bg-teal-500"; }
+                    else if (txt.includes('whatsapp')) { icon="message-circle"; color="bg-emerald-50 text-emerald-700 border-emerald-200"; dot="bg-emerald-500"; }
+                    else if (txt.includes('nota')) { icon="sticky-note"; color="bg-amber-50 text-amber-700 border-amber-200"; dot="bg-amber-500"; }
+                    else if (txt.includes('camino')) { icon="car"; color="bg-purple-50 text-purple-700 border-purple-200"; dot="bg-purple-500"; }
 
                     container.innerHTML += `
-                        <div class="relative pl-14 sm:pl-16 pt-2 pb-4 fade-in z-10" style="animation-delay: ${index * 0.05}s">
-                            <div class="absolute left-[15px] top-6 w-4 h-4 rounded-full border-2 border-white ring-4 ${dotClass} z-20 flex items-center justify-center">
-                                ${pingAnimation}
-                            </div>
-                            <div class="bg-white border border-slate-200 p-5 rounded-2xl shadow-sm hover:shadow-md transition-all group">
-                                <div class="flex flex-wrap justify-between items-start gap-4 mb-3">
-                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest border ${colorClass}">
-                                        <i data-lucide="${icon}" class="w-3.5 h-3.5 ${iconColor}"></i> ${log.action}
+                        <div class="relative pl-12 pb-6 fade-in" style="animation-delay: ${index * 0.05}s">
+                            <div class="absolute left-[15px] top-6 w-4 h-4 rounded-full border-2 border-white ring-4 ${dot} z-20"></div>
+                            <div class="bg-white border border-slate-200 p-4 rounded-2xl shadow-sm">
+                                <div class="flex justify-between mb-2">
+                                    <span class="px-2 py-1 rounded-lg text-[9px] font-black uppercase border ${color} flex items-center gap-1">
+                                        <i data-lucide="${icon}" class="w-3 h-3"></i> ${log.action}
                                     </span>
-                                    <div class="text-right">
-                                        <p class="text-sm font-black text-slate-800">${hora}</p>
-                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">${fecha}</p>
-                                    </div>
-                                </div>
-                                <p class="text-sm text-slate-700 font-medium leading-relaxed bg-slate-50 p-3 rounded-xl border border-slate-100">${log.details}</p>
-                                <div class="mt-3 flex items-center gap-2">
-                                    <div class="w-6 h-6 rounded-full bg-slate-800 text-white flex items-center justify-center text-[10px] font-black shrink-0 shadow-sm">
-                                        ${log.user_name.charAt(0).toUpperCase()}
-                                    </div>
-                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
-                                        Registrado por: <span class="text-slate-700">${log.user_name}</span>
-                                    </p>
+                                    <span class="text-[10px] font-bold text-slate-400">${fecha} | ${hora}</span>
                                 </div>
+                                <p class="text-sm text-slate-700 font-medium">${log.details || ""}</p>
+                                <p class="mt-2 text-[9px] font-black text-slate-400 uppercase tracking-tighter">Por: ${log.user_name}</p>
                             </div>
-                        </div>
-                    `;
+                        </div>`;
                 });
                 lucide.createIcons();
-            } catch (error) {
-                document.getElementById('timelineContainer').innerHTML = "<p class='text-red-500 pl-14 pt-4 font-bold relative z-10'>No se pudo conectar con el servidor.</p>";
-            }
+            } catch (e) { container.innerHTML = "Error de conexión."; }
         }
 
         async function addManualNote(btn) {
-            if (!currentServiceId) return showToast("⚠️ Selecciona un expediente primero.");
             const input = document.getElementById('manualNoteInput');
             const text = input.value.trim();
-            if (!text) {
-                showToast("⚠️ Escribe un apunte antes de guardar.");
-                input.focus();
-                return;
-            }
-            const originalHtml = btn.innerHTML;
-            btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
-            btn.disabled = true;
+            if (!text) return;
+            const old = btn.innerHTML;
+            btn.innerHTML = "..."; btn.disabled = true;
             try {
                 const res = await fetch(`${API_URL}/services/${currentServiceId}/log`, {
                     method: 'POST',
                     headers: { "Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}` },
                     body: JSON.stringify({ action: "Nota Manual", details: text })
                 });
-                if(res.ok) {
-                    input.value = "";
-                    showToast("✅ Apunte guardado correctamente");
-                    loadLogsForService(currentServiceId); 
-                } else { throw new Error("Error del servidor"); }
-            } catch (e) { showToast("❌ Error al guardar la nota."); }
-            finally {
-                btn.innerHTML = originalHtml;
-                btn.disabled = false;
-                lucide.createIcons();
-            }
+                if(res.ok) { input.value = ""; loadLogsForService(currentServiceId); }
+            } catch (e) { showToast("Error al guardar"); }
+            finally { btn.innerHTML = old; btn.disabled = false; }
         }
 
         function showToast(msg) {
             const t = document.getElementById('toast');
-            t.innerHTML = msg;
-            t.classList.remove('hidden');
+            t.innerText = msg; t.classList.remove('hidden');
             setTimeout(() => t.classList.add('hidden'), 3000);
         }
     </script>