diff --git a/src/controladores/controlador_Items.js b/src/controladores/controlador_Items.js
index 43eb812..03c9be0 100644
--- a/src/controladores/controlador_Items.js
+++ b/src/controladores/controlador_Items.js
@@ -244,6 +244,7 @@ controlador.cat_json = (req, res) => {
 controlador.item_xCat = (req, res) => {
   const catg = req.params;
   console.log(catg);
+  try{
   req.getConnection((err, conn) => {
     conn.query('select * from ver_inventario_precios_app where categoria = ? and grupo_precio = ?', [catg.cat,catg.gpp], (err, rows) => {
       rows.map(
@@ -253,9 +254,11 @@ controlador.item_xCat = (req, res) => {
       )
       res.json(rows);
       console.log(err);
-      //res.render('clientesV',{    data:rows     });
     });
-  });
+  });}catch(err){
+    res.json(err);
+      next(err);
+  }
 };
 
 
diff --git a/src/public/css/dash_mesero.css b/src/public/css/restaurant_dashMesero.css
similarity index 84%
rename from src/public/css/dash_mesero.css
rename to src/public/css/restaurant_dashMesero.css
index fa88d00..fa0493f 100644
--- a/src/public/css/dash_mesero.css
+++ b/src/public/css/restaurant_dashMesero.css
@@ -61,8 +61,11 @@
     color: rgb(154, 223, 255);
 }
 
+/********** DETALLE DE ORDEN ************/
 .dash_titulo {
     padding-top: 5px;
+    position: fixed;
+    top: 55px;
 }
 
 .dash_titulo a {
@@ -82,6 +85,15 @@
     color: #000;
     opacity: 1; 
   }*/
+
+ /* DETALLE DE items en orden*/
+#renderTab_listaItems{
+    position: fixed;
+    top: 150px;
+    bottom: 100px;
+    width: 35%;
+    overflow: scroll;
+}
 /*********** DASH PANEL FOOTER ***********/
 .dash_panelDetalleTotales {
     width: 100%;
@@ -115,6 +127,49 @@
 .footer_valores {
     text-align: right;
 }
+
+/****  RENDERIZADO DE ITEMS CONSULTADOS ****/
+.content_itemsRender{
+    position: relative;
+    width: 100%;
+    padding: 5px;
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-gap: 5px;
+}
+.content_itemsRender .card{
+    position: relative;
+    background: #1f497d;
+    padding: 14px;
+    justify-content: space-between;
+    cursor: pointer;
+    
+}
+.content_itemsRender .card .card_head{
+    font-size: 14px;
+    text-align: center;
+}
+.content_itemsRender .card .card_body{
+    display: flex;
+    
+}
+.content_itemsRender .card .card_body .card_numeros{
+    font-size: 36px;
+    width: 130px;
+}
+
+.content_itemsRender .card .card_body img{
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-left: 5px;
+}
+.content_itemsRender .card .card_footer{
+    font-size: 8px;
+}
+
+
 /****  menu emergente debajo del avatar  ****/
 .menu_avatar{
     display: none;
@@ -152,47 +207,6 @@
     margin: 5px 11px 10px 15px;
     font-size: 20px;
 }
-/****  RENDERIZADO DE ITEMS  ****/
-.content_itemsRender{
-    position: relative;
-    width: 100%;
-    padding: 5px;
-    display: grid;
-    grid-template-columns: repeat(3,1fr);
-    grid-gap: 5px;
-}
-.content_itemsRender .card{
-    position: relative;
-    background: #1f497d;
-    padding: 14px;
-    justify-content: space-between;
-    cursor: pointer;
-    
-}
-.content_itemsRender .card .card_head{
-    font-size: 14px;
-    text-align: center;
-}
-.content_itemsRender .card .card_body{
-    display: flex;
-    
-}
-.content_itemsRender .card .card_body .card_numeros{
-    font-size: 36px;
-    width: 110px;
-}
-
-.content_itemsRender .card .card_body img{
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    overflow: hidden;
-    margin-left: 10px;
-}
-.content_itemsRender .card .card_footer{
-    font-size: 8px;
-}
-
 
 /*
 
@@ -209,7 +223,33 @@
     display: block;
 }
 */
+.label_textMovil{
+    display: block;
+}
+.label_text{
+    padding : 5px;
+    display: inline-flex;
+    height: 30px;
+}
+
+@media(max-width:1700px) {
+    .content_itemsRender {
+        display: grid;
+        grid-template-columns: repeat(3,1fr);
+        grid-gap: 5px;
+      }
+}
 @media(max-width:992px) {
+    /**** ORDEN ****/
+    .dash_container {
+        position: relative;
+        width: 100%;
+        display: grid;
+        grid-gap: 2px;
+        grid-template-columns: auto;
+    }
+
+    /**** DETALLE DE ORDEN ****/
     .dash_panelDetalle .dash_titulo a {
         display: block;
         display: inline-block;
@@ -229,19 +269,18 @@
         display: inline-block;
     }
 
+    /**** RENDER LISTA ITEMS ****/
+    #renderTab_listaItems{
+        width: 100%;
+    }
+
     .dash_panelDetalle {
         position: absolute;
         right: 1px;
         display: none;
     }
 
-    .dash_container {
-        position: relative;
-        width: 100%;
-        display: grid;
-        grid-gap: 2px;
-        grid-template-columns: auto;
-    }
+    
 
     .dash_panelDetalleTotales {
         display: grid;
@@ -252,6 +291,9 @@
 }
 
 @media(max-width:768px) {
+    .label_textTab{
+        display: none;
+    }
     .dash_grupoCardBox {
         position: relative;
         display: grid;
@@ -296,4 +338,15 @@
         overflow: hidden;
         margin-left: 10px;
     }
+    /**** RENDER TABLES ****/
+    #renderTab_listaItems{
+        width: 100%;
+    }
+
+    .label_textMovil{
+        display: none;
+    }
+    .label_text{
+        height: 20px;
+    }
 }
\ No newline at end of file
diff --git a/src/public/js/app_restaurant_detallePed.js b/src/public/js/app_restaurant_detallePed.js
new file mode 100644
index 0000000..8d2b7ec
--- /dev/null
+++ b/src/public/js/app_restaurant_detallePed.js
@@ -0,0 +1,84 @@
+var lista_items = [];
+var obj_item = {};
+function add_itemDetelle(codigo){
+    for (let key in json) {
+        if(json[key].codigo==codigo){
+            json[key].cantidad=1;
+            obj_item = json[key];
+            lista_items.push(obj_item);
+        }
+    }
+    render_tabla_items(lista_items);
+    console.log(lista_items);
+}
+
+function render_tabla_items(lista_items){
+    var render = document.getElementById('renderTab_listaItems');
+    var std = "ACTIVO";
+    var thead = "<td>COD</td><td>Cant</td><td>Detalle</td><td>Precio</td><td>Accion</td>";
+    var tab = `
+    <div class="panel_table">
+     <div class="panel_header">
+        <h2>Detalle</h2>
+    </div>
+    
+    <table><thead><tr>${thead}</tr></thead><tbody>`;
+    for (let key in lista_items) {
+        let fila = `<tr>
+                    <td>${lista_items[key].codigo}</td>
+                    <td>${lista_items[key].cantidad}</td>
+                    <td>${lista_items[key].nombre}</td>
+                    <td>${Number(lista_items[key].precio).toFixed(2)}</td>
+                    <td>
+                        <div class="estado ACTIVO label_text" onclick="add_toping('${lista_items[key].codigo}')">
+                            <i class="fa fa-plus"></i><span class="label_textMovil"> Toping</span>
+                        </div>
+                        <div class="estado error label_text" onclick="eliminaItem('${lista_items[key].codigo}')">
+                            <i class="fa fa-trash"></i><span class="label_textMovil"> Eliminar</span>
+                        </div>
+                    </td>
+                </tr>`;
+        tab = tab + fila;
+    }
+    tab = tab + "</tbody></table></div>";
+    //console.log(json);
+    render.innerHTML = tab;
+    calc_detallePedido(lista_items);
+}
+function calc_detallePedido(lista_items) {
+    let subtotal = document.getElementById("subtotal");
+    let iva = document.getElementById("iva");
+    let total = document.getElementById("total");
+    var ventas12=0;venta0=0;vSubtotal=0, vIva=0,vTotal=0;
+    for (let key in lista_items) {
+        if(lista_items[key].tiene_iva==1){
+            ventas12 = lista_items[key].precio+ventas12;
+        }else{
+            venta0 = lista_items[key].precio+venta0;
+        }
+    }
+
+    vIva = ventas12*0.12;
+    vSubtotal=venta0+ventas12;
+    vTotal=vIva+vSubtotal;
+    subtotal.innerText = Number(vSubtotal).toFixed(2);
+    iva.innerText = Number(vIva).toFixed(2);
+    total.innerText = Number(vTotal).toFixed(2);
+}
+function verificaExiste(cod,items) {
+    var est = false;
+    items.forEach(element => {
+        if (element.codigo === cod) {
+            pos = items.indexOf(element);//posicion del vector
+            cant = element.cant; //extraer cantidad
+            est = true;
+        }
+    });
+    return est;
+}
+function add_toping(cod){
+    alert("add Toping Item: "+cod);
+}
+function eliminaItem(cod){
+    alert("Eliminar Item: "+cod);
+}
\ No newline at end of file
diff --git a/src/public/js/app_restaurant_tabGen.js b/src/public/js/app_restaurant_tabGen.js
index 1732ade..8bd727d 100644
--- a/src/public/js/app_restaurant_tabGen.js
+++ b/src/public/js/app_restaurant_tabGen.js
@@ -175,7 +175,7 @@ async function dashboard_mesero(json_cat) {
             </div>
         </div>
         
-        <div class="card_table">
+        <div class="card_table" id="renderTab_listaItems">
             <table><thead><tr>${thead}</tr></thead><tbody></tbody></table>
         </div>
         <div class="dash_panelDetalleTotales">
@@ -186,9 +186,9 @@ async function dashboard_mesero(json_cat) {
                 <div><span>TOTAL:</span></div>
             </div>
             <div class="footer_valores">
-                <div>0.00</div>
-                <div>0.00</div>
-                <div>0.00</div>
+                <div id="subtotal">0.00</div>
+                <div id="iva">0.00</div>
+                <div id="total">0.00</div>
             </div>
         </div>
     </div>`;
@@ -207,7 +207,7 @@ function ir_a(ruta) {
     switch (ruta) {
         case "generar_menu": genera_menu();
             break;
-            case "add_pedido": mostrar_form('mesas');
+        case "add_pedido": mostrar_form('mesas');
             break;
     }
     console.log(ruta);
@@ -235,13 +235,15 @@ bt_avatar.addEventListener('click', function () {
         menu.style.display = 'block';
     }
 });
+
+let json;
 async function CargaItems(gp_items) {
-    var card="";
-    let json = await get_json("/item_xCat/" + gp_items+"&PUBLICO");
-    console.log(json);
+    var card = "";
+    json = await get_json("/item_xCat/" + gp_items + "&PUBLICO");
+    //console.log(json);
     for (let key in json) {
         let fila = `
-                        <div class="card">
+                        <div class="card" id="${json[key].codigo}" onClick="add_itemDetelle('${json[key].codigo}')">
                             <div class="card_head">
                                 <div class="card_nombre">${json[key].nombre}</div>
                             </div>
diff --git a/src/views/app_restaurant.ejs b/src/views/app_restaurant.ejs
index 30a9d09..e4d9cba 100644
--- a/src/views/app_restaurant.ejs
+++ b/src/views/app_restaurant.ejs
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="../css/restaurant.css">
     <link rel="stylesheet" href="../css/restaurant_form.css">
     <link rel="stylesheet" href="../css/botones.css">
-    <link rel="stylesheet" href="../css/dash_mesero.css">
+    <link rel="stylesheet" href="../css/restaurant_dashMesero.css">
     <link rel="icon" sizes="64x64" href="../img/favicon_restaurant/favicon.ico">
 
 </head>
@@ -148,6 +148,7 @@
     </Script>
     <script src="../js/app_restaurant.js"></script>
     <script src="../js/app_restaurant_tabGen.js"></script>
+    <script src="../js/app_restaurant_detallePed.js"></script>
 </body>
 
 </html>
\ No newline at end of file