diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
index 48ddafc4..fd972f75 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
@@ -296,6 +296,7 @@
             break;
 
           default:
+            validationStepper.next();
             break;
         }
       });
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
index 0a0d202c..a8b2c8f1 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
@@ -1,50 +1,39 @@
 // Global parameters
 var pvObj;
 
-$('#toReview').on( "click", function() {
+$('#toReview').on("click", function () {
+    previewEsquemaCubierta(true);
+});
 
-    console.log('ec draw');
-
-    portadaTapaDura();
-
-    //previewEsquemaCubierta('ec', '','');
-
-} );
+$(document).on('shown.bs.modal', function (e) {
+    previewEsquemaCubierta(false);
+})
 
 
-function previewEsquemaCubierta() {
+function previewEsquemaCubierta(isThumbnail = false) {
 
-    /*let tipoImpresion;
-
-    if ($("#tipoCosido").is(":checked")) {
-        tipoImpresion = parseInt()
+    if ($('#cosidoDiv').hasClass('checked') || $("#fresadoDiv").hasClass('checked')) {
+        console.log("Cosido/Fresado");
+        if ($("#tapaBlanda").is(":checked")) {
+            portadaTapaBlanda(isThumbnail);
+        } else if ($("#tapaDura").is(":checked")) {
+            portadaTapaDura(isThumbnail);3
+        }
+    } else if ($('#espiralDiv').hasClass('checked') || $('#wireoDiv').hasClass('checked')) {
+        console.log("Espiral/Wireo");
+        if ($("#tapaBlanda").is(":checked")) {
+            portadaEspiral(isThumbnail, false);
+        } else if ($("#tapaDura").is(":checked")) {
+            portadaEspiral(isThumbnail, true);
+        }
+    } else if ($('#grapadoDiv').hasClass('checked')) {
+        portadaGrapado(isThumbnail);
     }
 
-    let tipoImpresion = parseInt($('#tipo_impresion_id').val());
-
-    // Fresado TD y Cosido TD
-    if (tipoImpresion === 1 || tipoImpresion === 3) {
-        portadaTapaDura();
-    }
-    // Fresado TB y Cosido TB
-    else if (tipoImpresion === 2 || tipoImpresion === 4) {
-        portadaTapaBlanda();
-    }
-    // Espiral TD y TB, Wire-o TD y TB
-    else if (tipoImpresion === 5 || tipoImpresion === 6 ||
-        tipoImpresion === 7 || tipoImpresion === 8) {
-        portadaEspiral();
-    }
-    else if (tipoImpresion === 21) {
-        portadaGrapado();
-    }
-    else {
-        // ?
-    }*/
 
 }
 
-function portadaTapaDura() {
+function portadaTapaDura(isThumbnail = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
@@ -55,22 +44,30 @@ function portadaTapaDura() {
     let altoPliegue = parseFloat(7);  // mm
     let anchoCarton = parseFloat(7); // mm
 
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
     // Get the preview Object parameters
     getObjetoToPreview();
 
-    // Definicion de los parametros del Esquema de Cubierta (EC) -
-    anchoSangrado = 400;    // px
-    altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
+    // Definicion de los parametros del Esquema de Cubierta (EC)
+    if (isThumbnail) {
+        anchoSangrado = 350;    // px
+        altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+    } else {
+        anchoSangrado = 800;    // px
+        altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+    }
     altoLibro = altoSangrado * 0.88;
     anchoLibro = anchoSangrado * 0.39;
     lomoLibro = anchoSangrado * 0.133;
     anchoCubierta = (2 * anchoLibro) + lomoLibro;
 
     // Clear the canvas element
-    $('#pv_ec_shape').empty();
+    $(`#${divIdName}`).empty();
     // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
+    var divEC = document.getElementById(divIdName);
     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);
 
@@ -102,79 +99,83 @@ function portadaTapaDura() {
     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 cotaLomo = previewEC.makeDobleArrow(
-        origenEC.x - (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        origenEC.x + (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        10);
-    cotaLomo.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;
+    // Cotas y textos
+    if (!isThumbnail) {
+        // 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) + 40,
+            origenEC.y + (altoSangrado / 2),
+            origenEC.x + (anchoCubierta / 2) + 40,
+            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 cotaLomo = previewEC.makeDobleArrow(
+            origenEC.x - (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            origenEC.x + (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            10);
+        cotaLomo.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);
-    previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
-    // Sangrados
-    let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    // Cotas
-    previewEC.makeText(pvObj.lomoLibro + anchoCarton + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
-        origenEC.x,
-        origenEC.y + (altoLibro / 2) + 50,
-        styleCotas);
+        // 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);
+        previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
+        // Sangrados
+        let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        // Cotas
+        previewEC.makeText(pvObj.lomoLibro + anchoCarton + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
+            origenEC.x,
+            origenEC.y + (altoLibro / 2) + 50,
+            styleCotas);
+
+    }
 
     previewEC.update();
 
 }
 
-function portadaTapaBlanda() {
+function portadaTapaBlanda(isThumbnail = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
@@ -183,13 +184,22 @@ function portadaTapaBlanda() {
     let sangradoValor = parseFloat(5);  // mm
     let offsetSolapaValor = parseFloat(0);  // mm
 
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
     // Get the preview Object parameters
     getObjetoToPreview();
 
+
     // 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
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 800;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
+
         altoLibro = altoSangrado * 0.97;
         anchoLibro = anchoSangrado * 0.419;
         anchoSolapa = 0;
@@ -197,8 +207,13 @@ function portadaTapaBlanda() {
         anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
 
     } else {
-        anchoSangrado = 600;    // px
-        altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
         altoLibro = altoSangrado * 0.95;
         anchoLibro = anchoSangrado * 0.28;
         anchoSolapa = anchoSangrado * 0.163;
@@ -207,9 +222,9 @@ function portadaTapaBlanda() {
     }
 
     // Clear the canvas element
-    $('#pv_ec_shape').empty();
+    $(`#${divIdName}`).empty();
     // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
+    var divEC = document.getElementById(divIdName);
     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);
@@ -235,28 +250,30 @@ function portadaTapaBlanda() {
         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;
+        if (!isThumbnail) {
+            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);
+            // 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);
+        }
 
     }
 
@@ -277,79 +294,83 @@ function portadaTapaBlanda() {
     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 cotaLomo = previewEC.makeDobleArrow(
-        origenEC.x - (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        origenEC.x + (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        10);
-    cotaLomo.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;
+    // Cotas y textos
+    if (!isThumbnail) {
+        // 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 cotaLomo = previewEC.makeDobleArrow(
+            origenEC.x - (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            origenEC.x + (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            10);
+        cotaLomo.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);
-    let a = previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
-    // 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.lomoLibro + " mm", origenEC.x, 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.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);
+        // 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);
+        let a = previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
+        // 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.lomoLibro + " mm", origenEC.x, 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.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 portadaEspiral() {
+function portadaEspiral(isThumbnail = false, isTapaDura = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, anchoCalle, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa, offsetCubierta;
@@ -357,36 +378,47 @@ function portadaEspiral() {
     let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
     let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5);  // mm
 
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
     // Get the preview Object parameters
     getObjetoToPreview();
 
     // Definicion de los parametros del Esquema de Cubierta (EC)
-    anchoSangrado = 600;    // px
-
-    if((pvObj.anchoSolapa !== 0) && (isTapaDura === 0)){
-        altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
+    if ((pvObj.anchoSolapa !== 0) && (!isTapaDura)) {
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
         altoLibro = altoSangrado * 0.95;
         anchoLibro = anchoSangrado * 0.28;
         anchoCalle = anchoSangrado * 0.02;
         anchoSolapa = anchoSangrado * 0.163;
         sangrado = anchoSangrado * 0.03;
-        anchoCubierta = 2 * (anchoLibro + anchoSolapa+ sangrado) + anchoCalle;
-        offsetCubierta = anchoLibro/2 + anchoCalle/2 + anchoSolapa/2 + sangrado;
-    }
-    else {
-        altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
+        anchoCubierta = 2 * (anchoLibro + anchoSolapa + sangrado) + anchoCalle;
+        offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa / 2 + sangrado;
+    } else {
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
         altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.97;
         anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.419;
         anchoCalle = anchoSangrado * 0.02;
         anchoSolapa = 0;
         anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
-        offsetCubierta = anchoLibro/2 + anchoCalle/2 + anchoSolapa + sangradoValor;
+        offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
     }
 
     // Clear the canvas element
-    $('#pv_ec_shape').empty();
+    $(`#${divIdName}`).empty();
     // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
+    var divEC = document.getElementById(divIdName);
     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);
@@ -402,9 +434,9 @@ function portadaEspiral() {
     sangrado.fill = '#FCEAF1';
     sangrado.linewidth = 1;
 
-    if (pvObj.anchoSolapa != 0) {
+    if ((pvObj.anchoSolapa != 0) && (!isTapaDura)) {
         var solapa1 = previewEC.makeRectangle(
-            origenEC.x + (anchoLibro + anchoCalle/2 + anchoSolapa/2 + sangradoValor),
+            origenEC.x + (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
             origenEC.y,
             anchoSolapa,
             altoLibro);
@@ -412,41 +444,44 @@ function portadaEspiral() {
         solapa1.linewidth = 1;
 
         var solapa2 = previewEC.makeRectangle(
-            origenEC.x - (anchoLibro + anchoCalle/2 + anchoSolapa/2 + sangradoValor),
+            origenEC.x - (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
             origenEC.y,
             anchoSolapa,
             altoLibro);
         solapa2.stroke = 'black';
         solapa2.linewidth = 1;
 
-        // Cotas Solapas
-        var cotaSolapa2 = previewEC.makeDobleArrow(
-            origenEC.x - (anchoCalle/2 + sangradoValor + anchoLibro + anchoSolapa),
-            origenEC.y - (altoLibro / 3),
-            origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa2.linewidth = 2;
-        var cotaSolapa1 = previewEC.makeDobleArrow(
-            origenEC.x + (anchoCalle/2 + sangradoValor + anchoLibro + anchoSolapa),
-            origenEC.y - (altoLibro / 3),
-            origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 2),
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa1.linewidth = 2;
+        // Cotas y textos
+        if (!isThumbnail) {
+            // Cotas
+            var cotaSolapa2 = previewEC.makeDobleArrow(
+                origenEC.x - (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
+                origenEC.y - (altoLibro / 3),
+                origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
+                origenEC.y - (altoLibro / 3),
+                10);
+            cotaSolapa2.linewidth = 2;
+            var cotaSolapa1 = previewEC.makeDobleArrow(
+                origenEC.x + (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
+                origenEC.y - (altoLibro / 3),
+                origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 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 + (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        // Textos Cotas Solapas
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            // Textos Solapas
+            let stylesSolapa = {size: 18, family: 'Public Sans'};
+            previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            // Textos Cotas Solapas
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        }
 
     }
 
     var portada = previewEC.makeRectangle(
-        origenEC.x + (anchoLibro/2 + anchoCalle/2 + sangradoValor),
+        origenEC.x + (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
         origenEC.y,
         anchoLibro,
         altoLibro);
@@ -454,7 +489,7 @@ function portadaEspiral() {
     portada.linewidth = 1;
 
     var contraportada = previewEC.makeRectangle(
-        origenEC.x - (anchoLibro/2 + anchoCalle/2 + sangradoValor),
+        origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
         origenEC.y,
         anchoLibro,
         altoLibro);
@@ -471,84 +506,87 @@ function portadaEspiral() {
     calle.fill = '#F4F8F2';
     calle.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 + (anchoSangrado / 2) + 15,
-        origenEC.y + (altoSangrado / 2),
-        origenEC.x + (anchoSangrado / 2) + 15,
-        origenEC.y - (altoSangrado / 2),
-        10);
-    cotaAltoCubierta.linewidth = 2;
-    var cotaAltoLibro = previewEC.makeDobleArrow(
-        origenEC.x + (anchoCalle / 2) + 35,
-        origenEC.y + (altoLibro / 2),
-        origenEC.x + (anchoCalle / 2) + 35,
-        origenEC.y - (altoLibro / 2),
-        10);
-    cotaAltoLibro.linewidth = 2;
-    var cotaContraportada = previewEC.makeDobleArrow(
-        origenEC.x - (anchoCalle / 2 + anchoLibro + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x - ((anchoCalle / 2) + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaContraportada.linewidth = 2;
-    var cotaPortada = previewEC.makeDobleArrow(
-        origenEC.x + ((anchoCalle / 2) + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x + (anchoCalle / 2 + anchoLibro + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaPortada.linewidth = 2;
+    // Cotas y textos
+    if (!isThumbnail) {
+        // 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 + (anchoSangrado / 2) + 15,
+            origenEC.y + (altoSangrado / 2),
+            origenEC.x + (anchoSangrado / 2) + 15,
+            origenEC.y - (altoSangrado / 2),
+            10);
+        cotaAltoCubierta.linewidth = 2;
+        var cotaAltoLibro = previewEC.makeDobleArrow(
+            origenEC.x + (anchoCalle / 2) + 35,
+            origenEC.y + (altoLibro / 2),
+            origenEC.x + (anchoCalle / 2) + 35,
+            origenEC.y - (altoLibro / 2),
+            10);
+        cotaAltoLibro.linewidth = 2;
+        var cotaContraportada = previewEC.makeDobleArrow(
+            origenEC.x - (anchoCalle / 2 + anchoLibro + sangradoValor),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x - ((anchoCalle / 2) + sangradoValor),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaContraportada.linewidth = 2;
+        var cotaPortada = previewEC.makeDobleArrow(
+            origenEC.x + ((anchoCalle / 2) + sangradoValor),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x + (anchoCalle / 2 + anchoLibro + sangradoValor),
+            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 + anchoLibro/2 + anchoCalle/2 + sangradoValor + 15,
-        origenEC.y,
-        stylesEC
-    );
-    previewEC.makeText("Contraportada",
-        origenEC.x - (anchoLibro/2 + anchoCalle/2 + sangradoValor),
-        origenEC.y,
-        stylesEC
-    );
-    // Sangrados
-    let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
-    previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    // Cotas
-    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa/2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa/2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm",
-        origenEC.x + (anchoSangrado / 2) + 30,
-        origenEC.y,
-        styleCotas
-    ).rotation = -Math.PI / 2;
-    previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
-        origenEC.x,
-        origenEC.y + (altoLibro / 2) + 50,
-        styleCotas);
+        // Textos:
+        // Titulos generales
+        let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
+        previewEC.makeText("Portada",
+            origenEC.x + anchoLibro / 2 + anchoCalle / 2 + sangradoValor + 15,
+            origenEC.y,
+            stylesEC
+        );
+        previewEC.makeText("Contraportada",
+            origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
+            origenEC.y,
+            stylesEC
+        );
+        // Sangrados
+        let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
+        previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        // Cotas
+        previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm",
+            origenEC.x + (anchoSangrado / 2) + 30,
+            origenEC.y,
+            styleCotas
+        ).rotation = -Math.PI / 2;
+        previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
+            origenEC.x,
+            origenEC.y + (altoLibro / 2) + 50,
+            styleCotas);
+    }
 
     previewEC.update();
 
 }
 
-function portadaGrapado() {
+function portadaGrapado(isThumbnail = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
@@ -557,13 +595,20 @@ function portadaGrapado() {
     let sangradoValor = parseFloat(5);  // mm
     let offsetSolapaValor = parseFloat(0);  // mm
 
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
     // Get the preview Object parameters
     getObjetoToPreview();
 
     // 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
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
         altoLibro = altoSangrado * 0.97;
         anchoLibro = anchoSangrado * 0.48;
         anchoSolapa = 0;
@@ -571,8 +616,13 @@ function portadaGrapado() {
         anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
 
     } else {
-        anchoSangrado = 600;    // px
-        altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
         altoLibro = altoSangrado * 0.95;
         anchoLibro = anchoSangrado * 0.3;
         anchoSolapa = anchoSangrado * 0.18;
@@ -581,9 +631,9 @@ function portadaGrapado() {
     }
 
     // Clear the canvas element
-    $('#pv_ec_shape').empty();
+    $(`#${divIdName}`).empty();
     // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
+    var divEC = document.getElementById(divIdName);
     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);
@@ -608,29 +658,32 @@ function portadaGrapado() {
         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;
+        // Cotas y textos
+        if (!isThumbnail) {
+            // Cotas
+            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);
+            // 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);
+        }
 
     }
 
@@ -651,85 +704,80 @@ function portadaGrapado() {
     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;
+    // Cotas y textos
+    if (!isThumbnail) {
+        // 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);
+        // 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);
-
-    return parseFloat(anchoLomo.toFixed(2));
-}
-
 
 function getObjetoToPreview() {
 
     pvObj = {
-        lomoLibro: parseFloat('30.0'),
+        lomoLibro: $('#lomo_cubierta').val() === '' ? parseFloat('0.0') : parseFloat($('#lomo_cubierta').val()),
         anchoSolapa: $('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat(0),
         altoLibro: getDimensionLibro().alto,
         anchoLibro: getDimensionLibro().ancho
     };
-    //console.log(pvObj);
+    console.log(pvObj);
 
 }