diff --git a/ci4/app/Views/themes/vuexy/components/tables/ot_table.php b/ci4/app/Views/themes/vuexy/components/tables/ot_table.php
index ad280f80..c42bccec 100755
--- a/ci4/app/Views/themes/vuexy/components/tables/ot_table.php
+++ b/ci4/app/Views/themes/vuexy/components/tables/ot_table.php
@@ -4,7 +4,7 @@
         <thead>
             <tr>
                 <th></th>
-                <th><?= lang('Produccion.datatable.ot_id') ?></th>
+                <th class="w-10"><?= lang('Produccion.datatable.ot_id') ?></th>
                 <th><?= lang('Produccion.datatable.pedido_id') ?></th>
                 <th><?= lang('Produccion.datatable.fecha_encuadernacion') ?></th>
                 <th><?= lang('Produccion.datatable.cliente') ?></th>
@@ -16,6 +16,20 @@
                 <th><?= lang('Produccion.datatable.progreso') ?></th>
                 <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
             </tr>
+            <tr>
+                <th></th>
+                <th><input type="text" class="form-control ot-filter" name="id"></th>
+                <th><input type="text" class="form-control ot-filter" name="pedido_id"></th>
+                <th><input type="text" class="form-control ot-filter" name="fecha_encuadernado_at"></th>
+                <th><input type="text" class="form-control ot-filter" name="cliente_nombre"></th>
+                <th><input type="text" class="form-control ot-filter" name="presupuesto_titulo"></th>
+                <th><input type="text" class="form-control ot-filter" name="ubicacion_nombre"></th>
+                <th><input type="text" class="form-control ot-filter" name="total_tirada"></th>
+                <th><input type="text" class="form-control ot-filter" name="tipo_presupuesto_impresion"></th>
+                <th></th>
+                <th></th>
+                <th></th>
+            </tr>
         </thead>
         <tbody>
 
diff --git a/httpdocs/assets/js/safekat/components/datatables/otDatatable.js b/httpdocs/assets/js/safekat/components/datatables/otDatatable.js
index 527f15f1..47a9652e 100644
--- a/httpdocs/assets/js/safekat/components/datatables/otDatatable.js
+++ b/httpdocs/assets/js/safekat/components/datatables/otDatatable.js
@@ -11,19 +11,18 @@ class OrdenTrabajoDatatable {
         this.datatableWaiting = this.item.find("#ot-datatable-waiting")
         this.datatableRevisionComerical = this.item.find("#ot-datatable-revision-com")
 
-
         this.columnIdIndex = 1;
-
+        this.tableLayout = "lrtip"
         this.datatableColumns = [
             { data: 'pdf_check', searchable: false, sortable: false, render: d => `<input class="form-check-input  pdf-check" data-id="${d}" type="checkbox">` },
-            { data: 'id', searchable: true, sortable: true },
+            { data: 'id', searchable: true, sortable: true},
             { data: 'pedido_id', searchable: true, sortable: true },
-            { data: 'fecha_encuadernado_at',name:"pedidos.fecha_encuadernado", searchable: true, sortable: true },
-            { data: 'cliente_nombre', name:"clientes.nombre", searchable: true, sortable: false },
-            { data: 'presupuesto_titulo', name:"presupuestos.titulo", searchable: true, sortable: true },
-            { data: 'ubicacion_nombre', name:"ubicaciones.nombre", searchable: true, sortable: true },
-            { data: 'total_tirada', name:"pedidos.total_tirada",searchable: true, sortable: true, render: (d) => `<span class="autonumeric">${d}</span>` },
-            { data: 'tipo_presupuesto_impresion', name:"tipos_presupuestos.codigo", searchable: true, sortable: true },
+            { data: 'fecha_encuadernado_at', name: "pedidos.fecha_encuadernado", searchable: true, sortable: true },
+            { data: 'cliente_nombre', name: "clientes.nombre", searchable: true, sortable: false },
+            { data: 'presupuesto_titulo', name: "presupuestos.titulo", searchable: true, sortable: true },
+            { data: 'ubicacion_nombre', name: "ubicaciones.nombre", searchable: true, sortable: true },
+            { data: 'total_tirada', name: "pedidos.total_tirada", searchable: true, sortable: true, render: (d) => `<span class="autonumeric">${d}</span>` },
+            { data: 'tipo_presupuesto_impresion', name: "tipos_presupuestos.codigo", searchable: true, sortable: true },
             {
                 data: 'logo', searchable: false, sortable: false, render: (d, t) => {
                     return `<div class="logo-container">
@@ -33,7 +32,7 @@ class OrdenTrabajoDatatable {
                 }
             },
             {
-                data: 'progreso',name:"ordenes_trabajo.progreso", searchable: false, sortable: true, render: (d, t) => {
+                data: 'progreso', name: "ordenes_trabajo.progreso", searchable: false, sortable: true, render: (d, t) => {
                     return `<div class="progress border rounded-2" style="height: 1rem;">
                 <div id="ot-progress-bar" class="progress-bar" role="progressbar" style="width: ${parseInt(d)}%;"  aria-valuenow="${d}" aria-valuemin="0" aria-valuemax="100">${d}%</div>
                 </div>
@@ -57,7 +56,7 @@ class OrdenTrabajoDatatable {
         console.log(order)
         this.focusDatatable = this.datatableOrder[order]
     }
-    events(){
+    events() {
         this.datatableOrder = [
             this.datatableN,
             this.datatableP,
@@ -74,12 +73,8 @@ class OrdenTrabajoDatatable {
     init() {
         this.datatable = this.datatableItem.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
                 { className: 'dt-center', targets: '_all' },
@@ -97,16 +92,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `10px solid ${data.logo.color}`)
             }
         });
+        this.datatableItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatable.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatable.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initPendientes() {
         this.datatableP = this.datatablePendientesItem.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
                 { className: 'dt-center', targets: '_all' },
@@ -125,16 +121,17 @@ class OrdenTrabajoDatatable {
 
             }
         });
+        this.datatablePendientesItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableP.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableP.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initFerroPendiente() {
         this.datatableFP = this.datatableFerroPendienteItem.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             serverSide: true,
             pageLength: 25,
             order: [[this.columnIdIndex, 'desc']],
@@ -152,16 +149,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableFerroPendienteItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableFP.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableFP.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initFerroOk() {
         this.datatableFO = this.datatableFerroOkItem.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -179,16 +177,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableFerroOkItem.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableFO.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableFO.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initNews() {
         this.datatableN = this.datatableNews.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -207,17 +206,17 @@ class OrdenTrabajoDatatable {
             }
         });
         this.focusDatatable = this.datatableN
-
+        this.datatableNews.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableN.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableN.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initWaiting() {
         this.datatableW = this.datatableWaiting.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -235,16 +234,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableWaiting.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableW.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableW.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initProd() {
         this.datatableProduccion = this.datatableProd.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -262,16 +262,17 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableProd.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableProduccion.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableProduccion.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     initRevisionComercial() {
         this.datatableRC = this.datatableRevisionComerical.DataTable({
             processing: true,
-            layout: {
-                topStart: 'pageLength',
-                topEnd: 'search',
-                bottomStart: 'info',
-                bottomEnd: 'paging'
-            },
+            dom: this.tableLayout,
+            orderCellsTop: true,
             serverSide: true,
             order: [[this.columnIdIndex, 'desc']],
             columnDefs: [
@@ -289,6 +290,11 @@ class OrdenTrabajoDatatable {
                 $(row).css("border-right", `20px solid ${data.logo.color}`)
             }
         });
+        this.datatableRevisionComerical.on("change", ".ot-filter", (event) => {
+            console.log(this.datatableRC.column($(event.currentTarget).attr("name")))
+            let columnIndex = this.datatableColumns.findIndex((element) => element.data == $(event.currentTarget).attr("name"))
+            this.datatableRC.column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
     }
     getSelectIDs() {
         return this.focusDatatable.rows((idx, data, node) => {