diff --git a/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js b/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js
index f8c3dd39..f093d563 100755
--- a/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js
+++ b/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js
@@ -194,11 +194,12 @@ function previewEsquemaCubierta(_lpTagName, _isCosido, _isTapaDura) {
         portadaTapaBlanda(_lpTagName, _isCosido, _isTapaDura);
     }
     // Espiral TD y TB, Wire-o TD y TB
-    else if (tipoImpresion === 5 || tipoImpresion === 6) {
+    else if (tipoImpresion === 5 || tipoImpresion === 6 ||
+        tipoImpresion === 7 || tipoImpresion === 8) {
         portadaEspiral(_lpTagName, _isCosido, _isTapaDura);
     }
-    else if (tipoImpresion === 7 || tipoImpresion === 8) {
-        portadaEspiral(_lpTagName, _isCosido, _isTapaDura);
+    else if (tipoImpresion === 21) {
+        portadaGrapado(_lpTagName, _isCosido, _isTapaDura);
     }
     else {
         // ?
@@ -710,6 +711,172 @@ function portadaEspiral(lpTagName, isCosido, isTapaDura) {
 
 }
 
+function portadaGrapado(lpTagName, isCosido, isTapaDura) {
+
+    // Variables locales
+    let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
+    let styleCotas = {size: 12, family: 'Public Sans'};
+    let sangradoTexto = "Sangrado 5 mm";
+    let sangradoValor = parseFloat(5);  // mm
+    let offsetSolapaValor = parseFloat(0);  // mm
+
+    // Get the preview Object parameters
+    getObjetoLP(lpTagName, isCosido, isTapaDura);
+
+    // Definicion de los parametros del Esquema de Cubierta (EC)
+    if (pvObj.anchoSolapa == 0) {
+        anchoSangrado = 600;    // px
+        altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
+        altoLibro = altoSangrado * 0.97;
+        anchoLibro = anchoSangrado * 0.48;
+        anchoSolapa = 0;
+        lomoLibro = 0;     // ESTA ES LA DIFERENCIA PARA GRAPADO
+        anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+
+    } else {
+        anchoSangrado = 600;    // px
+        altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
+        altoLibro = altoSangrado * 0.95;
+        anchoLibro = anchoSangrado * 0.3;
+        anchoSolapa = anchoSangrado * 0.18;
+        lomoLibro = 0;     // ESTA ES LA DIFERENCIA PARA GRAPADO
+        anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+    }
+
+    // Clear the canvas element
+    $('#pv_ec_shape').empty();
+    // Get the element for placing the graphical elements
+    var divEC = document.getElementById('pv_ec_shape');
+    var previewEC = new Two({fitted: true}).appendTo(divEC);
+    // Calculate the center of the canvas element
+    var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
+
+    var sangrado = previewEC.makeRectangle(
+        origenEC.x,
+        origenEC.y,
+        anchoSangrado,
+        altoSangrado
+    );
+    sangrado.stroke = 'black';
+    sangrado.dashes = [5, 5];
+    sangrado.fill = '#FCEAF1';
+    sangrado.linewidth = 1;
+
+    if (pvObj.anchoSolapa != 0) {
+        var solapas = previewEC.makeRectangle(
+            origenEC.x,
+            origenEC.y,
+            anchoCubierta,
+            altoLibro);
+        solapas.stroke = 'black';
+        solapas.linewidth = 1;
+
+        // Cotas Solapas
+        var cotaSolapa2 = previewEC.makeDobleArrow(
+            origenEC.x - anchoCubierta / 2,
+            origenEC.y - (altoLibro / 3),
+            origenEC.x - anchoLibro - lomoLibro / 2,
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaSolapa2.linewidth = 2;
+        var cotaSolapa1 = previewEC.makeDobleArrow(
+            origenEC.x + anchoCubierta / 2,
+            origenEC.y - (altoLibro / 3),
+            origenEC.x + anchoLibro + lomoLibro / 2,
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaSolapa1.linewidth = 2;
+
+        // Textos Solapas
+        let stylesSolapa = {size: 18, family: 'Public Sans'};
+        previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+        previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+        // Textos Cotas Solapas
+        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+
+    }
+
+    var libro = previewEC.makeRectangle(
+        origenEC.x,
+        origenEC.y,
+        ((2 * anchoLibro) + lomoLibro),
+        altoLibro);
+    libro.stroke = 'black';
+    libro.linewidth = 1;
+
+    var lomo = previewEC.makeRectangle(
+        origenEC.x,
+        origenEC.y,
+        lomoLibro,
+        altoLibro);
+    lomo.stroke = 'black';
+    lomo.fill = '#F4F8F2';
+    lomo.linewidth = 1;
+
+    // Cotas
+    var cotaAnchoCubierta = previewEC.makeDobleArrow(
+        origenEC.x - (anchoSangrado / 2),
+        origenEC.y + (altoLibro / 2) + 35,
+        origenEC.x + (anchoSangrado / 2),
+        origenEC.y + (altoLibro / 2) + 35,
+        10);
+    cotaAnchoCubierta.linewidth = 2;
+    var cotaAltoCubierta = previewEC.makeDobleArrow(
+        origenEC.x + (anchoCubierta / 2) + 35,
+        origenEC.y + (altoSangrado / 2),
+        origenEC.x + (anchoCubierta / 2) + 35,
+        origenEC.y - (altoSangrado / 2),
+        10);
+    cotaAltoCubierta.linewidth = 2;
+    var cotaAltoLibro = previewEC.makeDobleArrow(
+        origenEC.x + (lomoLibro / 2) + 35,
+        origenEC.y + (altoLibro / 2),
+        origenEC.x + (lomoLibro / 2) + 35,
+        origenEC.y - (altoLibro / 2),
+        10);
+    cotaAltoLibro.linewidth = 2;
+    var cotaContraportada = previewEC.makeDobleArrow(
+        origenEC.x - (lomoLibro / 2 + anchoLibro),
+        origenEC.y - (altoLibro / 3),
+        origenEC.x - (lomoLibro / 2),
+        origenEC.y - (altoLibro / 3),
+        10);
+    cotaContraportada.linewidth = 2;
+    var cotaPortada = previewEC.makeDobleArrow(
+        origenEC.x + (lomoLibro / 2),
+        origenEC.y - (altoLibro / 3),
+        origenEC.x + (lomoLibro / 2 + anchoLibro),
+        origenEC.y - (altoLibro / 3),
+        10);
+    cotaPortada.linewidth = 2;
+
+
+    // Textos:
+    // Titulos generales
+    let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
+    previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+    previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+    // Sangrados
+    let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
+    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
+    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
+    previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+    previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+    // Cotas
+    previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+    previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+    previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+    previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+    previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
+        origenEC.x,
+        origenEC.y + (altoLibro / 2) + 50,
+        styleCotas);
+
+    previewEC.update();
+
+}
+
 function getLomoLibro() {
     const anchoLomoInputs = $("#tableLineasPresupuesto tbody tr:visible td input[id*='_lomo']");
     const anchoLomo = Array.from(anchoLomoInputs).reduce((sum, input) => sum + parseFloat($(input).val()), 0);