diff --git a/views/tramites.html b/views/tramites.html
index 38facee..8ec25f0 100644
--- a/views/tramites.html
+++ b/views/tramites.html
@@ -372,49 +372,64 @@ function checkDeepLink(){
 
 function renderAll(){['adm','corp','mig','lit'].forEach(renderPanel);}
 
-function renderPanel(dept){
-  const panel=document.getElementById('panel-'+dept);
-  const rows=data[dept];
-  const statuses=STATUS_MAP[dept];
-  const search=(panel.querySelector('.search-input')||{value:''}).value.toLowerCase();
-  const fStatus=(panel.querySelector('.f-status')||{value:''}).value;
-  const fAbog=(panel.querySelector('.f-abog')||{value:''}).value;
-  const fEsfera=(panel.querySelector('.f-esfera')||{value:''}).value;
+// Estado de filtros por depto (persiste entre re-renders — no vive en el DOM,
+// para que actualizar el <tbody> no destruya el input de búsqueda).
+const filterState = {
+  adm:  { search:'', status:'', abog:'', esfera:'' },
+  corp: { search:'', status:'', abog:'', esfera:'' },
+  mig:  { search:'', status:'', abog:'', esfera:'' },
+  lit:  { search:'', status:'', abog:'', esfera:'' },
+};
 
-  let filtered=rows.filter(r=>{
-    const txt=((r.nombre||r.tipoTramite||r.tipoProceso||'')+(r.cliente||'')+(r.abogado||'')+(r.id||'')).toLowerCase();
-    if(search && !txt.includes(search)) return false;
-    if(fStatus && r.estatus!==fStatus) return false;
-    if(fAbog && r.abogado!==fAbog) return false;
-    if(dept==='lit' && fEsfera && r.esfera!==fEsfera) return false;
+function computeFiltered(dept){
+  const rows = data[dept];
+  const f = filterState[dept];
+  const q = f.search.toLowerCase();
+  const filtered = rows.filter(r => {
+    const txt = ((r.nombre||r.tipoTramite||r.tipoProceso||'')+(r.cliente||'')+(r.abogado||'')+(r.id||'')).toLowerCase();
+    if (q && !txt.includes(q)) return false;
+    if (f.status && r.estatus !== f.status) return false;
+    if (f.abog   && r.abogado !== f.abog)   return false;
+    if (dept === 'lit' && f.esfera && r.esfera !== f.esfera) return false;
     return true;
   });
-
-  const total=rows.length;
-  const activos=rows.filter(r=>r.estatus!=='Culminado'&&r.estatus!=='Facturado').length;
-  const culminados=rows.filter(r=>r.estatus==='Culminado'||r.estatus==='Facturado').length;
-
   window.__tramFiltered = window.__tramFiltered || {};
   window.__tramFiltered[dept] = filtered;
+  return filtered;
+}
+
+// Reconstruye toda la pestaña. Se usa solo cuando cambia el conjunto de datos
+// (carga inicial, guardar/borrar, cambio de tab). NO se llama al teclear.
+function renderPanel(dept){
+  const panel = document.getElementById('panel-'+dept);
+  const rows = data[dept];
+  const statuses = STATUS_MAP[dept];
+  const f = filterState[dept];
+
+  const total = rows.length;
+  const activos = rows.filter(r=>r.estatus!=='Culminado'&&r.estatus!=='Facturado').length;
+  const culminados = rows.filter(r=>r.estatus==='Culminado'||r.estatus==='Facturado').length;
+  const filtered = computeFiltered(dept);
+
   panel.innerHTML=`
-  <div class="counts">
+  <div class="counts" id="counts-${dept}">
     <div class="count-card"><b>${total}</b>Total</div>
     <div class="count-card"><b>${activos}</b>Activos</div>
     <div class="count-card"><b>${culminados}</b>Cerrados</div>
   </div>
   <div class="toolbar">
-    <input class="search-input" placeholder="Buscar..." oninput="renderPanel('${dept}')" value="${esc(search)}">
-    <select class="f-status" onchange="renderPanel('${dept}')">
+    <input class="search-input" placeholder="Buscar..." value="${esc(f.search)}">
+    <select class="f-status">
       <option value="">— Estatus —</option>
-      ${statuses.map(s=>`<option${fStatus===s?' selected':''}>${s}</option>`).join('')}
+      ${statuses.map(s=>`<option${f.status===s?' selected':''}>${s}</option>`).join('')}
     </select>
-    <select class="f-abog" onchange="renderPanel('${dept}')">
+    <select class="f-abog">
       <option value="">— Abogado —</option>
-      ${ABOGADOS.map(a=>`<option${fAbog===a?' selected':''}>${a}</option>`).join('')}
+      ${ABOGADOS.map(a=>`<option${f.abog===a?' selected':''}>${a}</option>`).join('')}
     </select>
-    ${dept==='lit'?`<select class="f-esfera" onchange="renderPanel('${dept}')">
+    ${dept==='lit'?`<select class="f-esfera">
       <option value="">— Esfera —</option>
-      <option${fEsfera==='Civil'?' selected':''}>Civil</option><option${fEsfera==='Penal'?' selected':''}>Penal</option>
+      <option${f.esfera==='Civil'?' selected':''}>Civil</option><option${f.esfera==='Penal'?' selected':''}>Penal</option>
     </select>`:''}
     ${CAN_CREATE ? `<button class="btn btn-primary" onclick="openModal('${dept}',null)">+ Nuevo</button>` : ''}
     ${DonnaExport.buttonHtml('export-wrap-'+dept)}
@@ -431,6 +446,51 @@ function renderPanel(dept){
     onExcel: () => tramExportExcel(dept),
     onPDF:   () => tramExportPDF(dept),
   });
+
+  // Handlers de filtro: al cambiar solo repintan la tabla, no el toolbar.
+  // Así el input de búsqueda conserva foco y posición del cursor al tipear.
+  const searchEl = panel.querySelector('.search-input');
+  if (searchEl) searchEl.addEventListener('input', e => {
+    filterState[dept].search = e.target.value;
+    renderPanelBody(dept);
+  });
+  const statusEl = panel.querySelector('.f-status');
+  if (statusEl) statusEl.addEventListener('change', e => {
+    filterState[dept].status = e.target.value;
+    renderPanelBody(dept);
+  });
+  const abogEl = panel.querySelector('.f-abog');
+  if (abogEl) abogEl.addEventListener('change', e => {
+    filterState[dept].abog = e.target.value;
+    renderPanelBody(dept);
+  });
+  const esferaEl = panel.querySelector('.f-esfera');
+  if (esferaEl) esferaEl.addEventListener('change', e => {
+    filterState[dept].esfera = e.target.value;
+    renderPanelBody(dept);
+  });
+}
+
+// Solo actualiza contadores y tbody — deja el toolbar intacto.
+function renderPanelBody(dept){
+  const rows = data[dept];
+  const filtered = computeFiltered(dept);
+  const counts = document.getElementById('counts-'+dept);
+  if (counts) {
+    const total = rows.length;
+    const activos = rows.filter(r=>r.estatus!=='Culminado'&&r.estatus!=='Facturado').length;
+    const culminados = rows.filter(r=>r.estatus==='Culminado'||r.estatus==='Facturado').length;
+    counts.innerHTML =
+      `<div class="count-card"><b>${total}</b>Total</div>`+
+      `<div class="count-card"><b>${activos}</b>Activos</div>`+
+      `<div class="count-card"><b>${culminados}</b>Cerrados</div>`;
+  }
+  const tbody = document.getElementById('tbody-'+dept);
+  if (tbody) {
+    tbody.innerHTML = filtered.length
+      ? filtered.map(r=>buildRow(dept,r)).join('')
+      : `<tr><td colspan="20"><div class="empty-state">Sin registros. Haz clic en <b>+ Nuevo</b> para agregar.</div></td></tr>`;
+  }
 }
 
 // ── EXPORT (Trámites) ────────────────────────────────────────────────────