arreglado todo

ci4/app/Controllers/Configuracion/ConfigErrores.php

@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Controllers\Configuracion;
+
+use App\Controllers\BaseResourceController;
+use App\Models\Collection;
+use App\Models\Presupuestos\ErrorPresupuesto as ErrorPresupuestoModel;
+use CodeIgniter\HTTP\Response;
+use Hermawan\DataTables\DataTable;
+
+class ConfigErrores extends BaseResourceController
+{
+
+    protected ErrorPresupuestoModel $errorPresupuestoModel;
+    protected $format = 'json';
+    protected array $viewData = [];
+
+
+    protected static $viewPath = 'themes/vuexy/form/configuracion/error_presupuesto/';
+    protected static $controllerSlug = "errores-presupuesto";
+    protected $indexRoute = 'viewErrorPresupuestoList';
+
+
+    public function initController(\CodeIgniter\HTTP\RequestInterface $request, \CodeIgniter\HTTP\ResponseInterface $response, \Psr\Log\LoggerInterface $logger)
+    {
+        parent::initController($request, $response, $logger);
+        $this->errorPresupuestoModel = model(ErrorPresupuestoModel::class);
+    }
+
+
+    public function index()
+    {
+        $this->viewData['breadcrumb'] = [
+            ['title' => lang("App.menu_configuration"), 'route' => "javascript:void(0);", 'active' => false],
+            ['title' => lang("App.menu_error_presupuesto"), 'route' => site_url('configuracion/errores-presupuesto'), 'active' => true]
+        ];
+        return view(static::$viewPath . $this->indexRoute, $this->viewData);
+    }
+    public function viewForm(int $error_presupuesto_id)
+    {
+        $this->viewData['breadcrumb'] = [
+            ['title' => lang("App.menu_configuration"), 'route' => "javascript:void(0);", 'active' => false],
+            ['title' => lang("App.menu_error_presupuesto"), 'route' => site_url('configuracion/errores-presupuesto'), 'active' => true]
+        ];
+        $this->viewData["error_presupuesto_id"] = $error_presupuesto_id;
+        $this->errorPresupuestoModel->update($error_presupuesto_id, [
+            "last_user_id" => auth()->user()->id,
+            "visto" => true,
+        ]);
+        return view(static::$viewPath . 'viewErrorPresupuestoForm', $this->viewData);
+    }
+    public function store()
+    {
+        $data = [];
+        $variableCreated = $this->errorPresupuestoModel->store($data);
+        return $this->response->setJSON($variableCreated);
+    }
+    public function get_error_presupuesto(int $error_presupuesto_id)
+    {
+        $data = $this->errorPresupuestoModel->getErrorPresupuestoForm($error_presupuesto_id);
+        if (isset($data[0])) {
+            return $this->response->setJSON(["data" => $data[0]]);
+        } else {
+            return $this->response->setJSON(["data" => []]);
+        }
+    }
+    public function update_error_presupuesto(int $error_presupuesto_id)
+    {
+        $bodyData = $this->request->getPost();
+        $this->errorPresupuestoModel->updateComment($error_presupuesto_id, $bodyData["comments"]);
+        return $this->response->setJSON(["message" => "Comentario actualizado", "status" => true]);
+    }
+
+    public function datatable()
+    {
+        $query = $this->errorPresupuestoModel->getQueryDatatable()->orderBy("created_at", "DESC");
+        return DataTable::of($query)
+            ->add("action", fn($q) => $q->id)
+            ->toJson(true);
+    }
+}

ci4/app/Controllers/Tarifas/Tarifasencuadernacion.php

@@ -1,4 +1,6 @@
-<?php namespace App\Controllers\Tarifas;
+<?php
+
+namespace App\Controllers\Tarifas;
 
 
 use App\Controllers\BaseResourceController;
@@ -100,7 +102,7 @@ class Tarifasencuadernacion extends \App\Controllers\BaseResourceController
             if ($this->request->getPost('servicio_encuadernacion') == null) {
                 $sanitizedData['servicio_encuadernacion'] = false;
             }
-            
+
             if ($this->request->getPost('por_horas') == null) {
                 $sanitizedData['por_horas'] = false;
             }
@@ -146,7 +148,7 @@ class Tarifasencuadernacion extends \App\Controllers\BaseResourceController
 
         $this->viewData['tarifaEncuadernacionEntity'] = isset($sanitizedData) ? new TarifaEncuadernacionEntity($sanitizedData) : new TarifaEncuadernacionEntity();
 
-        $this->viewData['formAction'] = site_url('tarifas/tarifasencuadernacion/add');//route_to('createTarifaEncuadernacion');
+        $this->viewData['formAction'] = site_url('tarifas/tarifasencuadernacion/add'); //route_to('createTarifaEncuadernacion');
 
         $this->viewData['boxTitle'] = lang('Basic.global.addNew') . ' ' . lang('Tarifaencuadernacion.moduleTitle') . ' ' . lang('Basic.global.addNewSuffix');
 
@@ -171,7 +173,7 @@ class Tarifasencuadernacion extends \App\Controllers\BaseResourceController
             return $this->redirect2listView('sweet-error', $message);
         endif;
 
-        
+
 
         if ($this->request->getPost()) :
 
@@ -188,7 +190,7 @@ class Tarifasencuadernacion extends \App\Controllers\BaseResourceController
             if ($this->request->getPost('mostrar_en_presupuesto') == null) {
                 $sanitizedData['mostrar_en_presupuesto'] = false;
             }
-            
+
             if ($this->request->getPost('tipo_encuadernacion') == null) {
                 $sanitizedData['tipo_encuadernacion'] = false;
             }
@@ -335,7 +337,8 @@ class Tarifasencuadernacion extends \App\Controllers\BaseResourceController
         }
     }
 
-    private function getProveedores(){
+    private function getProveedores()
+    {
         $provTipoModel = new ProveedorTipoModel();
         $provModel = new ProveedorModel();
 
@@ -343,12 +346,13 @@ class Tarifasencuadernacion extends \App\Controllers\BaseResourceController
         return $provModel->getProvList($tipoId);
     }
 
-    private function getDimensiones(){
+    private function getDimensiones()
+    {
         $dimensionModel = new TarifaEncuadernacionDimensionesModel();
 
         $dimensiones = $dimensionModel->getDimensiones();
-        foreach($dimensiones as $dim){
+        foreach ($dimensiones as $dim) {
-            $dim->label= lang("TarifaEncuadernacionLineas." . $dim->label);
+            $dim->label = lang("TarifaEncuadernacionLineas." . $dim->label);
         }
         return $dimensiones;
     }

ci4/app/Language/es/ErrorPresupuesto.php

@@ -0,0 +1,21 @@
+<?php
+return [
+
+    "cardTitle" => "Errores presupuesto",
+
+    "datatable" =>
+    [
+        "columns" => [
+            "usuario" => "Usuario presupuesto",
+            "last_user_id" => "Último accesso",
+            "visto" => "Visto",
+            "created_at" => "Creado"
+        ]
+    ],
+    "form" =>
+    [
+        "name" => "Nombre",
+        "value" => "Valor",
+        "description" => "Descripción",
+    ]
+];

ci4/app/Language/es/TarifaEncuadernacionLineas.php

@@ -20,6 +20,10 @@ return [
 	'menor_a5' =>'Hasta A5',
 	'entre_a5_a4' =>'Entre A5 y A4',
 	'mayor_a4' =>'Desde A4',
+	'menor_a5_apaisado' =>'Hasta A5 apaisado',
+	'entre_a5_a4_apaisado' =>'Entre A5 y A4 apaisado',
+	'mayor_a4_apaisado' =>'Desde A4 apaisado',
+	'210x210' =>'210x210',
 	'por_defecto' =>'Genérico',
 	'moduleExplanation' => 'El número de páginas reflejado en este apartado se refiere por ejemplar, no al total del pedido',
 	'margen' => 'Margen',

ci4/app/Models/Presupuestos/ErrorPresupuesto.php

@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Models\Presupuestos;
+
+use CodeIgniter\Database\BaseBuilder;
+use CodeIgniter\Model;
+
+class ErrorPresupuesto extends Model
+{
+    protected $table            = 'presupuesto_errores';
+    protected $primaryKey       = 'id';
+    protected $useAutoIncrement = true;
+    protected $returnType       = 'object';
+    protected $useSoftDeletes   = false;
+    protected $protectFields    = true;
+    protected $allowedFields    = [
+        "presupuesto_id",
+        "presupuesto_user_id",
+        "error",
+        "datos_presupuesto",
+        "visto",
+        "last_user_id",
+        "comment",
+        "created_at",
+        "updated_at",
+        "deleted_at",
+    ];
+
+    protected bool $allowEmptyInserts = false;
+    protected bool $updateOnlyChanged = true;
+
+    protected array $casts = [];
+    protected array $castHandlers = [];
+
+    // Dates
+    protected $useTimestamps = true;
+    //protected $dateFormat    = 'datetime';
+    protected $createdField  = 'created_at';
+    protected $updatedField  = 'updated_at';
+    protected $deletedField  = 'deleted_at';
+
+    // Validation
+    protected $validationRules      = [];
+    protected $validationMessages   = [];
+    protected $skipValidation       = false;
+    protected $cleanValidationRules = true;
+
+    // Callbacks
+    protected $allowCallbacks = true;
+    protected $beforeInsert   = [];
+    protected $afterInsert    = [];
+    protected $beforeUpdate   = [];
+    protected $afterUpdate    = [];
+    protected $beforeFind     = [];
+    protected $afterFind      = [];
+    protected $beforeDelete   = [];
+    protected $afterDelete    = [];
+
+    public function insertError(int $presupuesto_id, int $presupuesto_user_id, string $error, mixed $datos)
+    {
+        $this->insert([
+            "presupuesto_id" => $presupuesto_id,
+            "presupuesto_user_id" => $presupuesto_user_id,
+            "error" => $error,
+            "datos_presupuesto" => json_encode($datos)
+        ]);
+    }
+    public function updateComment(int $error_presupuesto_id, string $comment): bool
+    {
+        $updated = $this->update($error_presupuesto_id, [
+            "comment" => $comment
+        ]);
+        return $updated;
+    }
+    public function getErrorPresupuestoForm(int $error_presupuesto_id) : array
+    {
+        $query = $this->builder()
+        ->select([
+            "presupuesto_errores.id",
+            "CONCAT(t1.first_name,' ',t1.last_name) as presupuestoUser",
+            "CONCAT(t2.first_name,' ',t2.last_name) as lastUser",
+            "presupuesto_errores.created_at",
+            "presupuesto_errores.datos_presupuesto",
+            "presupuesto_errores.error",
+            "presupuesto_errores.visto",
+            "presupuesto_errores.comment"
+        ])
+        ->join("users t1", "t1.id = presupuesto_errores.presupuesto_user_id", "left")
+        ->join("users t2", "t2.id = presupuesto_errores.last_user_id", "left")
+        ->where("presupuesto_errores.deleted_at", null)
+        ->where("presupuesto_errores.id",$error_presupuesto_id);
+        return $query->get()->getResultObject();
+    }
+    public function getQueryDatatable(): BaseBuilder
+    {
+        $query = $this->builder()
+            ->select([
+                "presupuesto_errores.id",
+                "presupuestos.id as presupuestoId",
+                "CONCAT(t1.first_name,' ',t1.last_name) as presupuestoUser",
+                "CONCAT(t2.first_name,' ',t2.last_name) as lastUser",
+                "presupuesto_errores.created_at",
+                "presupuesto_errores.datos_presupuesto",
+                "presupuesto_errores.error",
+                "presupuesto_errores.visto",
+                "presupuesto_errores.comment",
+
+            ])
+            ->join("users t1", "t1.id = presupuesto_errores.presupuesto_user_id", "left")
+            ->join("users t2", "t2.id = presupuesto_errores.last_user_id", "left")
+            ->join("presupuestos", "presupuestos.id = presupuesto_errores.presupuesto_id", "left")
+            ->where("presupuesto_errores.deleted_at", null);
+        return $query;
+    }
+}

ci4/app/Models/Tarifas/TarifaEncuadernacionDimensionesModel.php

@@ -1,4 +1,5 @@
 <?php
+
 namespace App\Models\Tarifas;
 
 class TarifaEncuadernacionDimensionesModel extends \App\Models\BaseModel
@@ -12,20 +13,14 @@ class TarifaEncuadernacionDimensionesModel extends \App\Models\BaseModel
      */
     protected $useAutoIncrement = true;
 
-    protected $allowedFields = [
+    protected $allowedFields = [];
-
-    ];
     protected $returnType = "App\Entities\Tarifas\TarifaEncuadernacionDimensionesEntity";
 
     public static $labelField = "descripcion";
 
-    protected $validationRules = [
+    protected $validationRules = [];
-        
-    ];
 
-    protected $validationMessages = [
+    protected $validationMessages = [];
-        
-    ];
 
     /**
      * Get resource data.
@@ -34,13 +29,32 @@ class TarifaEncuadernacionDimensionesModel extends \App\Models\BaseModel
      *
      * @return \CodeIgniter\Database\BaseBuilder
      */
-    public function getDimensiones(){
+    public function getDimensiones()
+    {
 
         $builder = $this->db
-        ->table($this->table . " t1")
+            ->table($this->table . " t1")
-        ->select("t1.id AS value, t1.keyword AS label")
+            ->select("t1.id AS value, t1.keyword AS label")
-        ->orderBy('t1.id', 'asc');
+            ->orderBy('t1.id', 'asc');
 
-        return $builder->get()->getResultObject();
+        $result = $builder->get()->getResultObject();
+
+        // Convertir el resultado en un array
+        $resultArray = json_decode(json_encode($result), true);
+
+        // Buscar y mover el objeto con value == 3 al principio
+        foreach ($resultArray as $key => $item) {
+            if ($item['value'] == 4) {
+                $generico = $item;
+                unset($resultArray[$key]);
+                array_unshift($resultArray, $generico);
+                break;
+            }
+        }
+
+        // Convertir de nuevo a objetos
+        $result = json_decode(json_encode($resultArray));
+
+        return $result;
     }
 }

ci4/app/Views/themes/_commonPartialsBs/_modalInput.php

@@ -0,0 +1,24 @@
+<div class="modal fade" id="modalInput" tabindex="-1" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="modalTitle"></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col mb-3">
+                        <label for="inputData" class="form-label"></label>
+                        <input type="number" id="inputData" class="inputData form-control" placeholder="">
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="modalInputBtnClose" type="button" class="btn btn-label-secondary waves-effect" data-bs-dismiss="modal">
+                    Cerrar
+                </button>
+                <button id="modalInputBtnSave" type="button" class="btn btn-primary waves-effect waves-light">Guardar cambios</button>
+            </div>
+        </div>
+    </div>
+</div>

ci4/app/Views/themes/vuexy/components/modals/modalDireccion.php

@@ -0,0 +1,114 @@
+<div id="addressModal" action='create' class="modal fade addModal">
+    <div class="modal-dialog modal-lg modal-simple">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 id="labelTitleConfirmDialog" class="modal-title"><?= lang('ClienteDirecciones.direccionTitle') ?></h4>
+            </div>
+            <div class="modal-body">
+                
+                <div class="texto-error d-none">
+                    Rellene los campos obligatorios
+                </div>
+
+                <div class="mb-3">
+                    <label for="add_alias" class="form-label">
+                        <?= lang('ClienteDirecciones.alias') ?>*
+                    </label>
+                    <input type="text" id="add_alias" tabindex="1" maxLength="100" class="form-control">
+                </div><!--//.mb-3 -->
+                <div class="mb-3">
+                    <label for="add_att" class="form-label">
+                        <?= lang('ClienteDirecciones.att') ?>*
+                    </label>
+                    <input type="text" id="add_att" tabindex="1" maxLength="100" class="form-control">
+                </div><!--//.mb-3 -->
+                <div class="mb-3">
+                    <label for="add_email" class="form-label">
+                        <?= lang('ClienteDirecciones.email') ?>
+                    </label>
+                    <input type="text" id="add_email" tabindex="2" maxLength="100" class="form-control">
+                </div><!--//.mb-3 -->
+                <div class="mb-3">
+                    <label for="add_direccion" class="form-label">
+                        <?= lang('ClienteDirecciones.direccion') ?>*
+                    </label>
+                    <input type="text" id="add_direccion" tabindex="3" maxLength="255" class="form-control">
+                </div><!--//.mb-3 -->
+
+                <div class='row'>
+
+                    <div id='divPais' class="col-md-12 col-lg-12 pl-4">
+                        <div class="mb-3">
+                            <label for="add_pais_id" class="form-label">
+                                <?= lang('ClienteDirecciones.pais') ?>*
+                            </label>
+                            <select id="add_pais_id" tabindex="4" class="form-control select2bs" style="width: 100%;">
+                                <option value="" disabled selected><?= lang('ClienteDirecciones.selectPais') ?></option>
+                                <?php foreach ($paisList as $item) : ?>
+                                    <option value="<?= $item->id ?>">
+                                        <?= $item->nombre ?>
+                                    </option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div><!--//.mb-3 -->
+                    </div>
+
+
+                </div> <!-- //.row -->
+
+                <div class='row'>
+
+                    <div id='divMunicipio' class="col-md-12 col-lg-12 pl-4">
+                        <div class="mb-3">
+                            <label for="add_municipio" class="form-label">
+                                <?= lang('ClienteDirecciones.municipio') ?>*
+                            </label>
+                            <input type="text" id="add_municipio" tabindex="6" maxLength="100" class="form-control">
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                    <div class="col-md-12 col-lg-6 pl-4 spain-data" style="display: none;">
+                        <div class="mb-3">
+                            <label for="add_provincia" class="form-label">
+                                <?= lang('ClienteDirecciones.provincia') ?>
+                            </label>
+                            <input type="text" id="add_provincia" tabindex="7" maxLength="100" class="form-control">
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                </div> <!-- //.row -->
+
+                <div class='row'>
+
+                    <div class="col-md-12 col-lg-6 pl-4">
+                        <div class="mb-3">
+                            <label for="add_cp" class="form-label">
+                                <?= lang('ClienteDirecciones.cp') ?>*
+                            </label>
+                            <input type="text" id="add_cp" tabindex="8" maxLength="100" class="form-control">
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                    <div class="col-md-12 col-lg-6 pl-4">
+                        <div class="mb-3">
+                            <label for="add_telefono" class="form-label">
+                                <?= lang('ClienteDirecciones.telefono') ?>
+                            </label>
+                            <input type="text" id="add_telefono" tabindex="9" maxLength="100" class="form-control"></input>
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                </div> <!-- //.row -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="saveAdd"
+                    type="button"
+                    class="btn btn-primary">Guardar</button>
+                <button id="cancelAdd"
+                    type="button"
+                    class="btn btn-secondary">Cancelar</button>
+            </div>
+        </div>
+    </div>
+</div>

ci4/app/Views/themes/vuexy/form/configuracion/error_presupuesto/viewErrorPresupuestoForm.php

@@ -0,0 +1,89 @@
+<?= $this->include('themes/_commonPartialsBs/select2bs5') ?>
+<?= $this->include('themes/_commonPartialsBs/datatables') ?>
+<?= $this->include('themes/_commonPartialsBs/_confirm2delete') ?>
+<?= $this->extend('themes/vuexy/main/defaultlayout') ?>
+
+<?= $this->section('content');  ?>
+<div class="row">
+    <div class="col-md-12">
+
+        <div class="card card-info">
+            <div class="card-header">
+                <h3 class="card-title">Error presupuesto</h3>
+            </div>
+            <!--//.card-header -->
+            <div class="card-body" id="error-presupuesto-container">
+
+                <?= view('themes/_commonPartialsBs/_alertBoxes'); ?>
+                <form id="error-presupuesto-form">
+                    <input id="error-presupuesto-id" value="<?= $error_presupuesto_id ?>" hidden>
+                    <div class="row justify-content-start align-items-end mb-3">
+                        <div class="col-md-10 overflow-hidden w-20">
+                            <label for="presupuesto-user-id">Usuario presupuesto</label>
+                            <input name="presupuesto_user_id" type="text" class="form-control" id="presupuesto-user-id"
+                                disabled>
+                        </div>
+                        <div class="col-md-2 overflow-hidden w-20">
+                            <label class="switch switch-square switch-lg">
+                                <input type="checkbox" class="switch-input" id="error-presupuesto-visto" name="visto"
+                                    disabled>
+                                <span class="switch-toggle-slider">
+                                    <span class="switch-on">
+                                        <i class="ti ti-eye"></i>
+                                    </span>
+                                    <span class="switch-off">
+                                        <i class="ti ti-eye-off"></i>
+                                    </span>
+                                </span>
+                                <span class="switch-label">Visto</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6 mb-3 overflow-hidden">
+                            <label for="datos-presupuesto">Datos</label>
+                            <textarea rows="10" class="form-control" id="datos-presupuesto"
+                                placeholder="Datos presupuesto" disabled></textarea>
+                        </div>
+                        <div class="col-md-6 mb-3 overflow-hidden">
+                            <label for="error-presupuesto">Error</label>
+                            <textarea rows="10" class="form-control" id="error-presupuesto-text" placeholder="Error"
+                                disabled></textarea>
+                        </div>
+                        <div class="col-md-12 mb-3 overflow-hidden">
+                            <label for="comments-presupuesto">Comentarios</label>
+                            <textarea rows="10" class="form-control" id="comments-presupuesto"
+                                placeholder="Comentarios"></textarea>
+
+                        </div>
+                        <div class="col-md-12">
+                            <button class="btn btn-primary button-update-comment" type="button">
+                                <span class="ti ti-sm ti-send me-1" id="update-button-icon"></span>
+                                <span class="spinner-border me-1" role="status" aria-hidden="true"
+                                    id="update-button-loader" hidden></span>
+                                <?= lang("App.global_save") ?></button>
+                            <a class="btn btn-secondary" href="<?= route_to("erroresPresupuestoIndex") ?>"
+                                class="btn btn-secondary"><?= lang("App.global_come_back") ?>
+                            </a>
+                        </div>
+                    </div>
+            </div>
+            </form>
+        </div>
+
+    </div>
+    <!--//.card-body -->
+    <div class="card-footer">
+
+    </div>
+    <!--//.card-footer -->
+</div>
+<!--//.card -->
+</div>
+<!--//.col -->
+<!--//.row -->
+<?= $this->endSection() ?>
+<?= $this->section("additionalExternalJs") ?>
+<script type="module" src="<?= site_url('assets/js/safekat/pages/configuracion/error_presupuesto/indexForm.js') ?>">
+</script>
+<?= $this->endSection() ?>

ci4/app/Views/themes/vuexy/form/configuracion/error_presupuesto/viewErrorPresupuestoList.php

@@ -0,0 +1,50 @@
+<?= $this->include('themes/_commonPartialsBs/select2bs5') ?>
+<?= $this->include('themes/_commonPartialsBs/datatables') ?>
+<?= $this->include('themes/_commonPartialsBs/_confirm2delete') ?>
+<?= $this->extend('themes/vuexy/main/defaultlayout') ?>
+
+<?= $this->section('content');  ?>
+<div class="row">
+    <div class="col-md-12">
+
+        <div class="card card-info">
+            <div class="card-header">
+                <h3 class="card-title"><?= lang('ErrorPresupuesto.cardTitle') ?></h3>
+            </div>
+            <!--//.card-header -->
+            <div class="card-body" id="errorPresupuestoCard">
+
+                <?= view('themes/_commonPartialsBs/_alertBoxes'); ?>
+
+                <table id="tableErrorPresupuesto" class="table table-striped table-hover" style="width: 100%;">
+                    <thead>
+                        <tr>
+                            <th>ID Presupuesto</th>
+                            <th><?= lang('ErrorPresupuesto.datatable.columns.usuario') ?></th>
+                            <th><?= lang('ErrorPresupuesto.datatable.columns.last_user_id') ?></th>
+                            <th><?= lang('ErrorPresupuesto.datatable.columns.visto') ?></th>
+                            <th><?= lang('ErrorPresupuesto.datatable.columns.created_at') ?></th>
+                            <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+
+                    </tbody>
+                </table>
+            </div>
+            <!--//.card-body -->
+            <div class="card-footer">
+
+            </div>
+            <!--//.card-footer -->
+        </div>
+        <!--//.card -->
+    </div>
+    <!--//.col -->
+</div>
+<!--//.row -->
+<?= $this->endSection() ?>
+<?= $this->section("additionalExternalJs") ?>
+<script type="module" src="<?= site_url('assets/js/safekat/pages/configuracion/error_presupuesto/indexView.js') ?>">
+</script>
+<?= $this->endSection() ?>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_buttons.php

@@ -0,0 +1,36 @@
+<div class="col-12" style="min-height: 50px;">
+    <div id="btnsDiv" class="d-flex w-100 position-relative" style="margin-top: 40px;">
+
+        <div class="me-auto">
+            <div id="btnPrint" class="btn mt-3 btn-secondary waves-effect waves-light ml-2 d-none">
+                <span class="align-middle d-sm-inline-block d-none me-sm-1"></i><?= lang('App.global_print2') ?></span>
+            </div>
+        </div>
+
+        <div class="position-absolute start-50 translate-middle-x">
+            <?php if ($state != 2): ?>
+                <div id="btnPrev" class="btn mt-3 btn-primary waves-effect waves-light ml-2 d-none">
+                    <span class="align-middle d-sm-inline-block d-none me-sm-1"></i><?= lang('App.global_prev') ?></span>
+                </div>
+                <div id="btnNext" class="btn mt-3 btn-primary waves-effect waves-light ml-2">
+                    <span class="align-middle d-sm-inline-block d-none me-sm-1"></i><?= lang('App.global_next') ?></span>
+                </div>
+            <?php endif; ?>
+        </div>
+
+        <div class="ms-auto">
+
+            <?php if ($state != 2): ?>
+
+                <div id="btnConfirm" class="btn mt-3 btn-success waves-effect waves-light ml-2 d-none">
+                    <span class="align-middle d-sm-inline-block d-none me-sm-1"></i><?= lang('App.global_confirm') ?></span>
+                </div>
+
+                <div id="btnSave" class="btn mt-3 btn-primary waves-effect waves-light ml-2 d-none">
+                    <span class="align-middle d-sm-inline-block d-none me-sm-1"></i><?= lang('App.global_save') ?></span>
+                </div>
+            <?php endif; ?>
+        </div>
+
+    </div>
+</div>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_datosGenerales.php

@@ -0,0 +1,306 @@
+<div class="col-12 pb-2 d-flex flex-column align-items-center">
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Datos del libro </h3>
+    </div>
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <label for="titulo" class="form-label">
+            <?= lang('Presupuestos.titulo') ?>*
+        </label>
+        <input type="text" id="titulo" placeholder="Introduzca el título de la publicación" name="titulo"
+            maxLength="300" class="form-control text-center" value="">
+    </div>
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <label for="autor" class="form-label">
+            <?= lang('Presupuestos.autor') ?>
+        </label>
+        <input type="text" id="autor" placeholder="Autor" name="autor" maxLength="150" class="form-control text-center"
+            value="">
+    </div>
+
+    <div class="row justify-content-center">
+
+        <div class="col-sm-4 mb-3">
+            <label for="isbn" class="form-label">
+                <?= lang('Presupuestos.isbn') ?>
+            </label>
+            <input type="text" id="isbn" name="isbn" placeholder="ISBN" maxLength="50" class="form-control" value="">
+        </div>
+
+        <div class="col-sm-4 mb-3">
+            <label for="coleccion" class="form-label">
+                <?= lang('Presupuestos.coleccion') ?>
+            </label>
+            <input type="text" id="coleccion" name="coleccion" placeholder="Coleccion" maxLength="255"
+                class="form-control" value="">
+        </div>
+
+        <div class="col-sm-4 mb-3">
+            <label for="referenciaCliente" class="form-label">
+                <?= lang('Presupuestos.referenciaCliente') ?>
+            </label>
+            <input type="text" id="referenciaCliente" name="referencia_cliente" placeholder="Referencia cliente"
+                maxLength="100" class="form-control" value="">
+        </div>
+
+
+    </div>
+
+
+    <div class="col-sm-5 mb-3 d-flex flex-column align-items-center">
+        <label <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor'))? " hidden" : "" ?>
+            id="label_clienteId" for="clienteId" class="form-label">
+            Cliente*
+        </label>
+        <select <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor'))? " hidden" : "" ?>
+            id="clienteId" name="cliente_id" class="form-control select2bs2 calcular-presupuesto"
+            style="width: 100%;">
+            <?php if (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor')): ?>
+                <option value="<?= $clienteId ?>" selected>cliente</option>
+            <?php endif; ?>
+        </select>
+    </div>
+
+
+    <div class="row col-sm-5 mb-3 d-flex flex-column align-items-center">
+        <div class="form-check form-switch mb-2">
+            <input  <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor'))? " hidden" : "" ?>
+                class="calcular-presupuesto form-check-input" type="checkbox" id="excluirRotativa"
+                name="excluir_rotativa" value="1">
+            <label <?= (auth()->user()->inGroup('cliente-admin') || auth()->user()->inGroup('cliente-editor'))? " hidden" : "" ?>
+                class="form-check-label" for="excluirRotativa">Excluir rotativa</label>
+        </div>
+    </div>
+
+
+    <div class="row col-sm-10 mb-3 justify-content-center">
+        <div class="col-sm-2 d-flex flex-column align-items-center mx-1">
+            <label for="tirada" class="form-label">
+                <?= lang('Presupuestos.tirada') ?> 1*
+            </label>
+            <input type="number" class="calcular-presupuesto form-control text-center num-input" id="tirada"
+                name="tirada" step="1" value="50">
+        </div>
+
+        <div class="col-sm-2 d-flex flex-column align-items-center mx-1">
+            <label for="tirada2" class="form-label">
+                <?= lang('Presupuestos.tirada') ?> 2
+            </label>
+            <input type="number" class="calcular-presupuesto form-control text-center num-input" id="tirada2"
+                name="tirada2" step="1" value="">
+        </div>
+
+        <div class="col-sm-2 d-flex flex-column align-items-center mx-1">
+            <label for="tirada3" class="form-label">
+                <?= lang('Presupuestos.tirada') ?> 3
+            </label>
+            <input type="number" class="calcular-presupuesto form-control text-center num-input" id="tirada3"
+                name="tirada3" step="1" value="">
+        </div>
+
+        <div class="col-sm-2 d-flex flex-column align-items-center mx-1">
+            <label for="tirada4" class="form-label">
+                <?= lang('Presupuestos.tirada') ?> 4
+            </label>
+            <input type="number" class="calcular-presupuesto form-control text-center num-input" id="tirada4"
+                name="tirada4" step="1" value="">
+        </div>
+    </div> <!--//.row -->
+
+    <div class="col-sm-10 d-flex flex-column align-items-center justify-content-center">
+
+        <div id="formatoEstandar" class="col-sm-4 mb-1 d-flex flex-column align-items-center">
+            <label id="label_papelFormatoId" for="papelFormatoId" class="form-label">
+                Formato Libro*
+            </label>
+            <select id="papelFormatoId" name="papel_formato_id" class="form-control select2bs2 calcular-presupuesto"
+                style="width: 100%;">
+            </select>
+        </div>
+
+        <div id="formatoPersonalizado" class="row col-sm-8 justify-content-center d-none">
+
+            <div class="col-sm-3 mb-1 mx-1">
+                <label class="form-label" for="papelFormatoAncho">Ancho Libro*</label>
+                <input type="number" id="papelFormatoAncho" name="papel_formato_ancho" step="1"
+                    class="form-control formato_libro calcular-presupuesto num-input" min="60" value="60">
+            </div>
+
+            <div class="col-sm-3 mb-1 mx-1">
+                <label class="form-label" for="papelFormatoAlto">Alto Libro*</label>
+                <input type="number" id="papelFormatoAlto" name="papel_formato_alto" step="1"
+                    class="form-control formato_libro calcular-presupuesto num-input" min="60" value="60">
+            </div>
+
+        </div>
+
+        <div class="row col-sm-4 mb-3 d-flex flex-column align-items-center">
+            <div class="form-check form-switch mb-2">
+                <input class="calcular-presupuesto form-check-input" type="checkbox" id="papelFormatoPersonalizado"
+                    name="papel_formato_personalizado" value="1">
+                <label class="form-check-label"
+                    for="papelFormatoPersonalizado"><?= lang('Presupuestos.papelFormatoPersonalizado') ?></label>
+            </div>
+        </div>
+
+    </div>
+
+
+    <div class="row col-sm-9 mb-5 justify-content-center">
+
+        <div class="row justify-content-center">
+            <div class="col-sm-3">
+                <label for="paginasColor" class="form-label">
+                    <?= lang('Presupuestos.paginasColor') ?>
+                </label>
+                <input type="number" class="form-control calcular-presupuesto input-paginas num-input" id="paginasColor"
+                    name="paginasColor" step="1" value="0">
+
+                <div class="form-text">
+                    Siempre deben ser pares
+                </div>
+
+            </div>
+
+            <div class="col-sm-3">
+                <label for="paginasNegro" class="form-label">
+                    <?= lang('Presupuestos.paginasNegro') ?>
+                </label>
+                <input type="number" class="form-control calcular-presupuesto input-paginas num-input" id="paginasNegro"
+                    name="paginasNegro" step="1" value="32">
+
+                <div class="form-text">
+                    Siempre deben ser pares
+                </div>
+
+            </div>
+
+            <div class="col-sm-3">
+                <label for="paginas" class="form-label">
+                    <?= lang('Presupuestos.totalPaginas') ?>
+                </label>
+                <input readonly class="form-control calcular-presupuesto" id="paginas" name="paginas" step="1"
+                    value="32">
+            </div>
+        </div>
+
+        <div id='divPaginasCuadernillo' class="row col-sm-9 justify-content-left d-none">
+
+            <div class="col-sm-4 mb-5">
+                <label for="paginas_por_cuadernillo" class="form-label">
+                    <?= lang('Presupuestos.paginasCuadernillo') ?>
+                </label>
+                <select id="paginasCuadernillo" name="paginas_por_cuadernillo"
+                    class="calcular-presupuesto form-control select2bs2" style="width: 100%;">
+                    <option value="32" selected>32</option>
+                    <option value="28">28</option>
+                    <option value="24">24</option>
+                    <option value="20">20</option>
+                    <option value="16">16</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="row mt-2 justify-content-center">
+
+            <div id="divPaginasColorConsecutivas" class="form-check col-sm-9 form-switch mb-2 d-none">
+                <input class="form-check-input" type="checkbox" id="pagColorConsecutivas" name="pag_color_consecutivas"
+                    value="1">
+                <label class="form-check-label"
+                    for="pagColorConsecutivas"><?= lang('Presupuestos.paginasColorConsecutivas') ?></label>
+            </div>
+
+            <div id="divPosPaginasColor" class="col-sm-9 d-none">
+                <label for="posPaginasColor" class="form-label">
+                    <?= lang('Presupuestos.posicionPagColor') ?>
+                </label>
+                <input class="form-control" id="posPaginasColor" name="pos_paginas_color" value="">
+                <div class="form-text">
+                    Intruzca la posición separada por comas. Ej: 3,5,7 ó 4-10,20,155
+                </div>
+            </div>
+
+        </div>
+
+        <div class="row mt-2 justify-content-center">
+            <div id="divPapelDiferente" class="form-check col-sm-9 form-switch mb-2 d-none">
+                <input class="form-check-input" type="checkbox" id="papelDiferente" name="papel_diferente" value="1">
+                <label class="form-check-label" for="papelDiferente"><?= lang('Presupuestos.papelDiferente') ?></label>
+            </div>
+        </div>
+    </div>
+
+
+
+    <div id="divTipoLibro" name="div_tipo_libro" class="row col-sm-10 mb-3 justify-content-center">
+
+        <div id="fresado" class="tipo-libro calcular-presupuesto imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/fresado.png") ?>"
+                alt="Fresado">
+            <div class="form-text text-center">
+                Fresado (a partir de 32 páginas)
+            </div>
+        </div>
+        <div id="grapado" class="tipo-libro calcular-presupuesto imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/grapado.png") ?>"
+                alt="Grapado">
+            <div class="form-text text-center">
+                Grapado (entre 12 y 40 páginas)
+            </div>
+        </div>
+        <div id="espiral" class="tipo-libro calcular-presupuesto imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/espiral.png") ?>"
+                alt="Espiral">
+            <div class="form-text text-center">
+                Espiral
+            </div>
+        </div>
+        <div id="cosido" class="tipo-libro calcular-presupuesto imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/cosido.png") ?>"
+                alt="Cosido">
+            <div class="form-text text-center">
+                Cosido (a partir de 32 páginas)
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Servicios extra </h3>
+    </div>
+
+    <div class="row col-sm-9 mb-3 d-flex flex-column align-items-left">
+        <div class="col-sm-3 form-check form-switch mb-2">
+            <input class="calcular-presupuesto form-check-input" type="checkbox" id="prototipo" name="prototipo"
+                value="1">
+            <label class="form-check-label" for="prototipo">Prototipo</label>
+        </div>
+    </div>
+
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Otros </h3>
+    </div>
+
+    <div class="row col-sm-10 mb-3">
+
+        <div class="col-sm-2 mb-md-0 mb-2">
+            <label for="ivaReducido" class="form-label">I.V.A. reducido</label>
+            <select id="ivaReducido" name="ivaReducido" class="form-control select2bs2 calcular-presupuesto"
+                style="width: 100%;">
+                <option value="1" selected>
+                    <p><?= lang('SI') ?></p>
+                </option>
+                <option value="0">
+                    <p><?= lang('NO') ?></p>
+                </option>
+            </select>
+        </div>
+
+        <p class="mt-2">Se verificará que el pedido cumpla con los requisitos establecidos en el Artículo 91 de la Ley
+            37/1992, sobre inserción de publicidad, antes de proceder con su producción, lo que garantiza la aplicación
+            del IVA reducido del 4%.</p>
+    </div>
+
+</div>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_direcciones.php

@@ -0,0 +1,64 @@
+<div class="col-12 d-flex flex-column align-items-center">
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h5 class="mb-1 fw-bold titulo"></h5>
+    </div><!--//.mb-3 -->
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Direcciones de envío </h3>
+    </div><!--//.mb-3 -->
+
+    <div id="divInputDirecciones" name="div_input_direcciones" class="row col-sm-12 mb-5 justify-content-center">
+
+        <div id="containerTiradasEnvios" class="row mb-3 justify-content-center">
+        </div>
+
+        <div class="row mb-3 justify-content-center">
+
+            <div class="col-sm-4 mb-3">
+                <label for="direcciones" class="form-label">Mis direcciones</label>
+                <select id="direcciones" name="direcciones" class="form-control select2bs2"
+                    style="width: 100%;"></select>
+            </div>
+
+            <div class="col-sm-2 mb-3">
+                <label for="unidadesEnvio" class="form-label">
+                    Unidades
+                </label>
+                <input type="number" class="form-control" id="unidadesEnvio" name="unidadesEnvio" maxLength="8" step="1"
+                    class="form-control">
+            </div>
+
+            <div class="col-sm-2 mb-3 mt-auto mb-0">
+                <button id="insertarDireccion" type="button"
+                    class="btn btn-secondary waves-effect waves-light">Insertar</button>
+            </div>
+
+        </div>
+
+        <div class="row mb-3 justify-content-center">
+            <div class="col-sm-4 mb-3">
+                <div class="form-check form-switch mb-2">
+                    <input class="form-check-input" type="checkbox" id="entregaPieCalle" name="entregaPieCalle"
+                        value="1">
+                    <label class="form-check-label"
+                        for="add_entregaPieCalle"><?= lang('PresupuestosDirecciones.entregaPieCalle') ?></label>
+                </div>
+            </div>
+        </div>
+
+        <div class="row mb-3 justify-content-center">
+            <div class="col-sm-2 mb-3 mt-auto mb-0">
+                <button id="nuevaDireccion" type="button"
+                    class="btn btn-secondary waves-effect waves-light">Nueva Dirección</button>
+            </div>
+        </div>
+
+        <div id="divErrorEnvios" name="div_error_envios" class="col-sm-10 mb-3 justify-content-center"></div>
+
+        <div id="divDirecciones" class="calcular-presupuesto col-sm-12 d-flex flex-column align-items-center">
+
+        </div>
+    </div>
+
+</div>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_disenioCubierta.php

@@ -0,0 +1,419 @@
+<div class="col-12 pb-2 d-flex flex-column align-items-center">
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h5 class="mb-1 fw-bold titulo"></h5>
+    </div><!--//.mb-3 -->
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Diseño cubierta </h3>
+    </div><!--//.mb-3 -->
+
+    <div class="col-sm-8 mb-5 d-flex flex-column align-items-center">
+        <h6 class="mb-1 text-center"> Recuerde que la cubierta es el conjunto formado por la portada, contraportada,
+            lomo y solapas, en caso de que las lleve. </h6>
+    </div><!--//.mb-3 -->
+
+    <div id="divTipoCubierta" name="div_tipo_cubierta" class="row col-sm-10 mb-5 justify-content-center">
+
+        <div id="tapaBlanda"
+            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center tipo-cubierta imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/tapa-blanda.jpg") ?>"
+                alt="TapaBlanda">
+            <label class="form-label">
+                Tapa blanda
+            </label>
+        </div>
+
+        <div id="tapaDura"
+            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center tipo-cubierta imagen-selector image-container">
+            <img class="image-presupuesto"
+                src="<?= site_url("assets/img/presupuestoCliente/tapa-dura-lomo-recto.jpg") ?>" alt="TapaDura">
+            <label class="form-label">
+                Tapa dura lomo recto
+            </label>
+        </div>
+
+        <div id="tapaDuraLomoRedondo"
+            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center tipo-cubierta imagen-selector image-container">
+            <img class="image-presupuesto"
+                src="<?= site_url("assets/img/presupuestoCliente/tapa-dura-lomo-redondo.png") ?>"
+                alt="TapaDuraLomoRedondo">
+            <label class="form-label">
+                Tapa dura lomo redondo
+            </label>
+        </div>
+
+    </div>
+
+
+    <div id="divCarasImpresion" name="div_caras_impresion" class="row col-sm-10 mb-5 justify-content-center d-none">
+
+        <div class="col-sm-4 mb-md-0 mb-2">
+            <label for="carasCubierta" class="form-label">Caras impresas cubierta</label>
+            <select id="carasCubierta" name="carasCubierta" class="form-control select2bs2 calcular-presupuesto"
+                style="width: 100%;">
+                <option value="2" selected>
+                    <p><?= lang('Presupuestos.unaCara') ?></p>
+                </option>
+                <option value="4">
+                    <p><?= lang('Presupuestos.dosCaras') ?></p>
+                </option>
+            </select>
+        </div>
+
+    </div>
+
+
+    <div id="divSolapasCubierta" name="div_solapas_cubierta" class="row col-sm-10 mb-5 justify-content-center d-none">
+
+        <div id="solapasCubiertaNo"
+            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center solapas-cubierta imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/sinSolapasCubierta.png") ?>"
+                alt="Sin solapas">
+            <label class="form-label">
+                Sin solapas
+            </label>
+        </div>
+
+        <div id="solapasCubiertaSi"
+            class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center solapas-cubierta imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/conSolapasCubierta.png") ?>"
+                alt="Con solapas">
+            <label class="form-label">
+                Con solapas
+            </label>
+        </div>
+
+        <div id="divTamanioSolapas"
+            class="d-flex flex-column align-items-center justify-content-center image-container d-none">
+            <label for="solapasCubierta" class="form-label">
+                Tamaño solapas
+            </label>
+            <input id="solapasCubierta" name="solapas_cubierta" type="number"
+                class="calcular-presupuesto form-control text-center num-input" min="60" max="120" step="1" value="60">
+            <div class="form-text">
+                Entre 60 y 120 mm
+            </div>
+        </div>
+
+    </div>
+
+    <div id="divConfigTapaDura" class="row col-sm-10 mb-5 justify-content-center d-none">
+
+        <div class="row justify-content-center">
+            <div class="col-sm-3">
+                <label for="papelGuardas" class="form-label">
+                    <?= lang('Presupuestos.papelGuardas') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="papelGuardas" name="papel_guardas">
+                    <option value="OFF1_170"><?= lang('Presupuestos.offsetBlancoGuardas') ?></option>
+                    <option value="OFF2_170"><?= lang('Presupuestos.offsetAhuesadoGuardas') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="guardasImpresas" class="form-label">
+                    <?= lang('Presupuestos.guardasImpresas') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="guardasImpresas"
+                    name="guardas_impresas">
+                    <option value="0"><?= lang('Presupuestos.sinImpresion') ?></option>
+                    <option value="4"><?= lang('Presupuestos.unaCara') ?></option>
+                    <option value="8"><?= lang('Presupuestos.dosCaras') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="cabezada" class="form-label">
+                    <?= lang('Presupuestos.cabezada') ?>
+                </label>
+                <select class="form-select select2bs2" id="cabezada" name="cabezada">
+                    <option value="WHI"><?= lang('Presupuestos.blanca') ?></option>
+                    <option value="GRE"><?= lang('Presupuestos.verde') ?></option>
+                    <option value="BLUE"><?= lang('Presupuestos.azul') ?></option>
+                    <option value="REDYEL"><?= lang('Presupuestos.rojaAmarilla') ?></option>
+                </select>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Papel cubierta </h3>
+    </div><!--//.mb-3 -->
+
+    <div id="divPapelCubierta" name="div_papel_cubierta" class="row col-sm-10 mb-5 justify-content-center">
+
+        <div id="cartulinaEstucada" cod="CAR1"
+            class="calcular-presupuesto min-width-fit d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/cartulina-grafica.png") ?>"
+                alt="Cartulina estucada">
+            <label class="form-label">
+                Cartulina gráfica estucada a una cara
+            </label>
+        </div>
+
+        <div id="estucadoMate" cod="EST2"
+            class="calcular-presupuesto min-width-fit d-flex flex-column align-items-center justify-content-center papel-cubierta imagen-selector image-container">
+            <img class="image-presupuesto"
+                src="<?= site_url("assets/img/presupuestoCliente/estucado-mate-cubierta.png") ?>" alt="Estucado mate">
+            <label class="form-label">
+                Estucado Mate
+            </label>
+        </div>
+    </div>
+
+
+    <div id="divGramajeCubierta" name="div_gramaje_cubierta" class="row col-sm-10 mb-3 justify-content-center d-none">
+
+
+        <div id="divGramaje170Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon gramaje-cubierta">
+                <label class="form-check-label custom-option-content" for="gramaje170Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 170 gr </span>
+                    </span>
+                    <input id="gramaje170Cubierta" name="gramajeCubiertaRadio" data-value="170"
+                        class="check-gramaje-cubierta calcular-presupuesto form-check-input" type="radio" value="170" />
+                </label>
+            </div>
+        </div>
+
+        <div id="divGramaje250Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon gramaje-cubierta">
+                <label class="form-check-label custom-option-content" for="gramaje250Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 250 gr </span>
+                    </span>
+                    <input id="gramaje250Cubierta" name="gramajeCubiertaRadio" data-value="250"
+                        class="check-gramaje-cubierta calcular-presupuesto form-check-input" type="radio" value="250" />
+                </label>
+            </div>
+        </div>
+
+        <div id="divGramaje270Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon gramaje-cubierta">
+                <label class="form-check-label custom-option-content" for="gramaje270Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 270 gr </span>
+                    </span>
+                    <input id="gramaje270Cubierta" name="gramajeCubiertaRadio" data-value="270"
+                        class="check-gramaje-cubierta calcular-presupuesto form-check-input" type="radio" value="270" />
+                </label>
+            </div>
+        </div>
+
+        <div id="divGramaje300Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon gramaje-cubierta">
+                <label class="form-check-label custom-option-content" for="gramaje300Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 300 gr </span>
+                    </span>
+                    <input id="gramaje300Cubierta" name="gramajeCubiertaRadio" data-value="300"
+                        class="check-gramaje-cubierta calcular-presupuesto form-check-input" type="radio" value="300" />
+                </label>
+            </div>
+            <div class="form-text">
+                Recomendado
+            </div>
+        </div>
+
+        <div id="divGramaje350Cubierta" class="checkbox-presupuesto-container col-md mb-md-0 mb-2">
+            <div class="form-check custom-option custom-option-icon gramaje-cubierta">
+                <label class="form-check-label custom-option-content" for="gramaje350Cubierta">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 350 gr </span>
+                    </span>
+                    <input id="gramaje350Cubierta" name="gramajeCubiertaRadio" data-value="350"
+                        class="check-gramaje-cubierta calcular-presupuesto form-check-input" type="radio" value="350" />
+                </label>
+            </div>
+        </div>
+
+    </div>
+
+
+    <hr class="col-sm-10 my-10">
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Acabados </h3>
+    </div><!--//.mb-3 -->
+
+    <div class="row col-sm-12 mb-5 justify-content-center">
+
+        <div class="row justify-content-center">
+
+            <div class="col-sm-3">
+                <label for="plastificado" class="form-label">
+                    <?= lang('Presupuestos.plastificado') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="plastificado" name="plastificado">
+                    <option value="NONE"><?= lang('Presupuestos.sinPlastificar') ?></option>
+                    <option value="BRIL"><?= lang('Presupuestos.brillo') ?></option>
+                    <option value="MATE"><?= lang('Presupuestos.mate') ?></option>
+                    <option value="ANTI"><?= lang('Presupuestos.antirrayado') ?></option>
+                    <option value="SAND"><?= lang('Presupuestos.rugoso') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="barniz" class="form-label">
+                    <?= lang('Presupuestos.barniz') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="barniz" name="barniz">
+                    <option value="NONE"> - </option>
+                    <option value="R2D"><?= lang('Presupuestos.relieve2D') ?></option>
+                    <option value="R3D"><?= lang('Presupuestos.relieve3D') ?></option>
+                </select>
+                <div class="form-text">
+                    <?= lang('Presupuestos.barnizDescription') ?>
+                </div>
+            </div>
+
+            <div class="col-sm-3">
+                <label for="estampado" class="form-label">
+                    <?= lang('Presupuestos.estampado') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="estampado" name="estampado">
+                    <option value="NONE"> - </option>
+                    <option value="GOLD"><?= lang('Presupuestos.oro') ?></option>
+                    <option value="SILV"><?= lang('Presupuestos.plata') ?></option>
+                    <option value="COPP"><?= lang('Presupuestos.cobre') ?></option>
+                    <option value="BRON"><?= lang('Presupuestos.bronce') ?></option>
+                </select>
+            </div>
+
+            <div id="retractilado"
+                class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center solapas-cubierta imagen-selector image-container">
+                <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/retractilado.png") ?>"
+                    alt="Retractilado">
+                <label class="form-label">
+                    Retractilado
+                </label>
+            </div>
+
+        </div>
+    </div>
+
+
+    <hr class="col-sm-10 my-10">
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Extras </h3>
+    </div><!--//.mb-3 -->
+
+    <div class="row col-sm-12 mb-3 justify-content-center">
+
+        <div class="row justify-content-center">
+
+            <div class="row col-sm-3 mb-3 d-flex flex-column align-items-center sobrecubierta-items">
+                <div class="form-check form-switch mb-2">
+                    <input class="calcular-presupuesto form-check-input" type="checkbox" id="addSobrecubierta"
+                        name="add_sobrecubierta" value="1">
+                    <label class="form-check-label"
+                        for="addSobrecubierta"><?= lang('Presupuestos.sobrecubierta') ?></label>
+                </div>
+            </div>
+
+            <div class="col-sm-3 config-sobrecubierta d-none sobrecubierta-items">
+                <label for="papelSobrecubierta" class="form-label">
+                    <?= lang('Presupuestos.papelSobrecubierta') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="papelSobrecubierta"
+                    name="papel_sobrecubierta">
+                    <option value="EST2_170"><?= lang('Presupuestos.estucadoMate170gr') ?></option>
+                    <option value="EST2_200"><?= lang('Presupuestos.estucadoMate200gr') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-3 config-sobrecubierta d-none sobrecubierta-items">
+                <label for="solapasSobrecubierta" class="form-label">
+                    <?= lang('Presupuestos.tamanioSolapasSobrecubierta') ?>
+                </label>
+                <input id="solapasSobrecubierta" name="solapas_sobrecubierta" type="number"
+                    class="calcular-presupuesto form-control text-center num-input" min="60" max="120" step="1"
+                    value="60">
+                <div class="form-text">
+                    Entre 60 y 120 mm
+                </div>
+            </div>
+
+            <div class="col-sm-3 config-sobrecubierta d-none sobrecubierta-items">
+                <label for="plastificadoSobrecubierta" class="form-label">
+                    <?= lang('Presupuestos.plastificadoSobrecubierta') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="plastificadoSobrecubierta"
+                    name="plastificado_sobrecubierta">
+                    <option value="NONE"> - </option>
+                    <option value="BRIL"><?= lang('Presupuestos.brillo') ?></option>
+                    <option value="MATE"><?= lang('Presupuestos.mate') ?></option>
+                    <option value="ANTI"><?= lang('Presupuestos.antirrayado') ?></option>
+                </select>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="row col-sm-12 mb-0 justify-content-center d-none">
+
+        <div class="row justify-content-center">
+
+            <div class="row col-sm-2 mb-3 d-flex flex-column align-items-center">
+                <div class="form-check form-switch mb-2">
+                    <input class="calcular-presupuesto form-check-input" type="checkbox" id="addFaja" name="add_faja"
+                        value="1">
+                    <label class="form-check-label" for="addFaja"><?= lang('Presupuestos.faja') ?></label>
+                </div>
+            </div>
+
+            <div class="col-sm-2 config-faja d-none">
+                <label for="altoFaja" class="form-label">
+                    <?= lang('Presupuestos.altoFaja') ?>
+                </label>
+                <input id="altoFaja" name="alto_faja" type="number"
+                    class="calcular-presupuesto form-control text-center num-input" min="60" step="1" value="60">
+                <div class="form-text">
+                    Mayor 60 mm
+                </div>
+            </div>
+
+            <div class="col-sm-3 config-faja d-none">
+                <label for="barniz" class="form-label">
+                    <?= lang('Presupuestos.papelFaja') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="papelFaja" name="papel_sobrecubierta">
+                    <option value="EST2_170"><?= lang('Presupuestos.estucadoMate170gr') ?></option>
+                    <option value="EST2_200"><?= lang('Presupuestos.estucadoMate200gr') ?></option>
+                </select>
+            </div>
+
+            <div class="col-sm-2 config-faja d-none">
+                <label for="solapasFaja" class="form-label">
+                    <?= lang('Presupuestos.tamanioSolapasFaja') ?>
+                </label>
+                <input id="solapasFaja" name="solapas_faja" type="number"
+                    class="calcular-presupuesto form-control text-center num-input" min="60" max="120" step="1"
+                    value="60">
+                <div class="form-text">
+                    Entre 60 y 120 mm
+                </div>
+            </div>
+
+            <div class="col-sm-3 config-faja d-none">
+                <label for="plastificadoFaja" class="form-label">
+                    <?= lang('Presupuestos.plastificadoFaja') ?>
+                </label>
+                <select class="form-select select2bs2 calcular-presupuesto" id="plastificadoFaja"
+                    name="plastificado_faja">
+                    <option value="NONE"> - </option>
+                    <option value="BRIL"><?= lang('Presupuestos.brillo') ?></option>
+                    <option value="MATE"><?= lang('Presupuestos.mate') ?></option>
+                    <option value="ANTI"><?= lang('Presupuestos.antirrayado') ?></option>
+                </select>
+            </div>
+
+        </div>
+    </div>
+
+
+</div>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_disenioInterior.php

@@ -0,0 +1,351 @@
+<div class="col-12 pb-2 d-flex flex-column align-items-center">
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h5 class="mb-1 fw-bold titulo"></h5>
+    </div><!--//.mb-3 -->
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Impresión interior </h3>
+    </div><!--//.mb-3 -->
+
+
+    <div id="divImpresionInterior" name="div_impresion_interior" class="row col-sm-10 mb-3 justify-content-center">
+
+        <div id="negroEstandar" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center disenio-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/blancoYnegro.png") ?>" alt="Negro">
+            <label for="titulo" class="form-label">
+                Blanco y Negro
+            </label>
+        </div>
+
+        <div id="negroPremium" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center disenio-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/negroFoto.png") ?>" alt="NegroPremium">
+            <label for="titulo" class="form-label">
+                Blanco y Negro Premium
+            </label>
+        </div>
+
+        <div id="colorEstandar" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center disenio-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/color.png") ?>" alt="Color">
+            <label for="titulo" class="form-label">
+                Color
+            </label>
+        </div>
+
+        <div id="colorPremium" class="d-flex flex-column align-items-center justify-content-center disenio-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/colorFoto.png") ?>" alt="ColorPremium">
+            <label for="titulo" class="form-label">
+                Color Premium
+            </label>
+        </div>
+
+    </div>
+
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h3 class="mb-1 fw-bold"> Papel interior </h3>
+    </div><!--//.mb-3 -->
+
+
+    <div id="divPapelInterior" name="div_papel_interior" class="row col-sm-10 mb-5 justify-content-center">
+
+        <div id="offsetBlanco" cod="OFF1" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-blanco.png") ?>" alt="offsetBlanco">
+            <label for="titulo" class="form-label">
+                Offset Blanco
+            </label>
+        </div>
+
+        <div id="offsetAhuesado" cod="OFF2" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-ahuesado.png") ?>" alt="offsetAhuesado">
+            <label for="titulo" class="form-label">
+                Offset Ahuesado
+            </label>
+        </div>
+
+        <div id="offsetAhuesadoVolumen" cod="OFF4" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-ahuesado-volumen.png") ?>" alt="offsetAhuesadoVolumen">
+            <label for="titulo" class="form-label">
+                Offset Ahuesado Volumen
+            </label>
+        </div>
+
+        <div id="estucadoMate" cod="EST2" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/estucado-mate.png") ?>" alt="estucadoMate">
+            <label for="titulo" class="form-label">
+                Estucado Mate
+            </label>
+        </div>
+
+    </div>
+
+    <div id="divGramajeInterior" name="div_gramaje_interior" class="row col-sm-10 mb-3 justify-content-center d-none">
+
+        <div id="interiorGramaje70" class="checkbox-presupuesto-container col-md mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje70">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 70 gr </span>
+                    </span>
+                    <input id="gramaje70" name="customRadioGramaje" data-value="70" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje80" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje80">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 80 gr </span>
+                    </span>
+                    <input id="gramaje80" name="customRadioGramaje" data-value="80" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje90" class="mb-md-0 mb-3 checkbox-presupuesto-container">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje90">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 90 gr </span>
+                    </span>
+                    <input id="gramaje90" name="customRadioGramaje" data-value="90" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje100" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje100">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 100 gr </span>
+                    </span>
+                    <input id="gramaje100" name="customRadioGramaje" data-value="100" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje115" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje115">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 115 gr </span>
+                    </span>
+                    <input id="gramaje115" name="customRadioGramaje" data-value="115" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje120" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje120">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 120 gr </span>
+                    </span>
+                    <input id="gramaje120" name="customRadioGramaje" data-value="120" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje135" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje135">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 135 gr </span>
+                    </span>
+                    <input id="gramaje135" name="customRadioGramaje" data-value="135" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje150" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje150">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 150 gr </span>
+                    </span>
+                    <input id="gramaje150" name="customRadioGramaje" data-value="150" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje170" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior">
+                <label class="form-check-label custom-option-content" for="gramaje170">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 170 gr </span>
+                    </span>
+                    <input id="gramaje170" name="customRadioGramaje" data-value="170" class="check-interior-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+    </div>
+
+
+
+    <div class="col-sm-8 mb-3 mt-10 d-flex flex-column align-items-center interior-color d-none">
+        <h3 class="mb-1 fw-bold"> Impresión interior color</h3>
+    </div><!--//.mb-3 -->
+
+
+    <div id="divImpresionInteriorColor" name="div_impresion_interior_color" class="row col-sm-10 mb-3 justify-content-center interior-color d-none">
+
+        <div id="colorEstandarColor" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center disenio-interior-color imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/color.png") ?>" alt="Color">
+            <label for="titulo" class="form-label">
+                Color
+            </label>
+        </div>
+
+        <div id="colorPremiumColor" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center disenio-interior-color imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/colorFoto.png") ?>" alt="ColorPremium">
+            <label for="titulo" class="form-label">
+                Color Premium
+            </label>
+        </div>
+
+    </div>
+
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center interior-color d-none">
+        <h3 class="mb-1 fw-bold"> Papel interior color</h3>
+    </div><!--//.mb-3 -->
+
+
+    <div id="divPapelInteriorColor" name="div_papel_interior_color" class="row col-sm-10 mb-5 interior-color justify-content-center interior-color d-none">
+
+        <div id="offsetBlancoColor" cod="OFF1" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior-color imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-blanco.png") ?>" alt="offsetBlanco">
+            <label class="form-label">
+                Offset Blanco
+            </label>
+        </div>
+
+        <div id="offsetAhuesadoColor" cod="OFF2" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior-color imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-ahuesado.png") ?>" alt="offsetAhuesado">
+            <label for="titulo" class="form-label">
+                Offset Ahuesado
+            </label>
+        </div>
+
+        <div id="offsetAhuesadoVolumenColor" cod="OFF4" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior-color imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/offset-ahuesado-volumen.png") ?>" alt="offsetAhuesadoVolumen">
+            <label class="form-label">
+                Offset Ahuesado Volumen
+            </label>
+        </div>
+
+        <div id="estucadoMateColor" cod="EST2" class="calcular-presupuesto d-flex flex-column align-items-center justify-content-center papel-interior-color imagen-selector image-container">
+            <img class="image-presupuesto" src="<?= site_url("assets/img/presupuestoCliente/estucado-mate.png") ?>" alt="estucadoMate">
+            <label class="form-label">
+                Estucado Mate
+            </label>
+        </div>
+
+    </div>
+
+    <div id="divGramajeInteriorColor" name="div_gramaje_interior_color" class="row col-sm-10 mb-3 justify-content-center d-none">
+
+        <div id="interiorGramaje70Color" class="checkbox-presupuesto-container col-md mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje70">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 70 gr </span>
+                    </span>
+                    <input id="gramaje70Color" name="customRadioGramajeColor" data-value="70" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje80Color" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje80">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 80 gr </span>
+                    </span>
+                    <input id="gramaje80Color" name="customRadioGramajeColor" data-value="80" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje90Color" class="mb-md-0 mb-3 checkbox-presupuesto-container">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje90">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 90 gr </span>
+                    </span>
+                    <input id="gramaje90Color" name="customRadioGramajeColor" data-value="90" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje100Color" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje100">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 100 gr </span>
+                    </span>
+                    <input id="gramaje100Color" name="customRadioGramajeColor" data-value="100" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje115Color" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje115">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 115 gr </span>
+                    </span>
+                    <input id="gramaje115Color" name="customRadioGramajeColor" data-value="115" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje120Color" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje120">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 120 gr </span>
+                    </span>
+                    <input id="gramaje120Color" name="customRadioGramajeColor" data-value="120" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje135Color" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje135">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 135 gr </span>
+                    </span>
+                    <input id="gramaje135Color" name="customRadioGramajeColor" data-value="135" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje150Color" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje150">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 150 gr </span>
+                    </span>
+                    <input id="gramaje150Color" name="customRadioGramajeColor" data-value="150" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+        <div id="interiorGramaje170Color" class="checkbox-presupuesto-container mb-md-0 mb-3">
+            <div class="form-check custom-option custom-option-icon calcular-presupuesto gramaje-interior-color">
+                <label class="form-check-label custom-option-content" for="gramaje170">
+                    <span class="custom-option-body">
+                        <span class="custom-option-title"> 170 gr </span>
+                    </span>
+                    <input id="gramaje170Color" name="customRadioGramajeColor" data-value="170" class="check-interior-color-gramaje form-check-input" type="radio" value="" />
+                </label>
+            </div>
+        </div>
+
+    </div>
+
+</div>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_interior.php

@@ -0,0 +1,6 @@
+<div class="col-12 pb-2 d-flex flex-column align-items-center">
+
+
+    
+
+</div>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_presupuestoDireccionesForm.php

@@ -0,0 +1,143 @@
+<div id="addressForm" action='create' class="modal fade addModal">
+    <div class="modal-dialog modal-lg modal-simple">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 id="labelTitleConfirmDialog" class="modal-title"><?= lang('PresupuestosDirecciones.direccionTitle') ?></h4>
+            </div>
+            <div class="modal-body">
+
+                <div class="mb-3">
+                    <label for="add_clientedAdd" class="form-label">
+                        <?= lang('PresupuestosDirecciones.clientedAdd') ?>*
+                    </label>
+                    <select id="add_clientedAdd" class="form-control select2bs" style="width: 100%;">
+
+                    </select>
+                </div><!--//.mb-3 -->
+
+                <div class="mb-3">
+                    <label for="add_cantidad" class="form-label">
+                        <?= lang('PresupuestosDirecciones.cantidad') ?>*
+                    </label>
+                    <input type="number" id="add_cantidad" class="form-control">
+                </div><!--//.mb-3 -->
+                <div class="mb-3">
+                    <label for="add_att" class="form-label">
+                        <?= lang('PresupuestosDirecciones.att') ?>*
+                    </label>
+                    <input type="text" id="add_att" maxLength="100" class="form-control new-address">
+                </div><!--//.mb-3 -->
+                <div class="mb-3">
+                    <label for="add_email" class="form-label">
+                        <?= lang('PresupuestosDirecciones.email') ?>*
+                    </label>
+                    <input type="text" id="add_email" maxLength="100" class="form-control new-address">
+                </div><!--//.mb-3 -->
+                <div class="mb-3">
+                    <label for="add_direccion" class="form-label">
+                        <?= lang('PresupuestosDirecciones.direccion') ?>*
+                    </label>
+                    <input type="text" id="add_direccion" maxLength="255" class="form-control new-address">
+                </div><!--//.mb-3 -->
+
+
+                <div class="mb-3">
+                    <label for="add_pais_id" class="form-label">
+                        <?= lang('PresupuestosDirecciones.pais') ?>*
+                    </label>
+                    <select id="add_pais_id" class="form-control select2bs new-address" style="width: 100%;">
+                        <option value="" disabled selected><?= lang('PresupuestosDirecciones.selectPais') ?></option>
+                        <?php foreach ($paisList as $item) : ?>
+                            <option value="<?= $item->id ?>" <?= $item->id == 1 ? ' selected' : '' ?>>
+                                <?= $item->nombre ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                </div><!--//.mb-3 -->
+
+
+
+                <div class='row'>
+
+                    <div id='divMunicipio' class="col-md-12 col-lg-12 pl-4">
+                        <div class="mb-3">
+                            <label for="add_municipio" class="form-label">
+                                <?= lang('PresupuestosDirecciones.municipio') ?>*
+                            </label>
+                            <input type="text" id="add_municipio" maxLength="100" class="form-control new-address">
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                    <div class="col-md-12 col-lg-6 pl-4 spain-data" style="display: none;">
+                        <div class="mb-3">
+                            <label for="add_provincia" class="form-label">
+                                <?= lang('PresupuestosDirecciones.provincia') ?>*
+                            </label>
+                            <input type="text" id="add_provincia" maxLength="100" class="form-control new-address">
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                </div> <!-- //.row -->
+
+                <div class='row'>
+
+                    <div class="col-md-12 col-lg-6 pl-4">
+                        <div class="mb-3">
+                            <label for="add_cp" class="form-label">
+                                <?= lang('PresupuestosDirecciones.cp') ?>*
+                            </label>
+                            <input type="text" id="add_cp" maxLength="100" class="form-control new-address">
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                    <div class="col-md-12 col-lg-6 pl-4">
+                        <div class="mb-3">
+                            <label for="add_telefono" class="form-label">
+                                <?= lang('PresupuestosDirecciones.telefono') ?>*
+                            </label>
+                            <input type="text" id="add_telefono" maxLength="100" class="form-control new-address"></input>
+                        </div><!--//.mb-3 -->
+                    </div>
+
+                </div> <!-- //.row -->
+
+                <div class="col-md-12 col-lg-6 pl-4">
+                    <div class="form-check form-switch mb-2">
+                        <input class="form-check-input" type="checkbox" id="add_entregaPieCalle" name="add_entregaPieCalle" value="1">
+                        <label class="form-check-label" for="add_entregaPieCalle"><?= lang('PresupuestosDirecciones.entregaPieCalle') ?></label>
+                    </div>
+                </div>
+
+                <div class="col-md-12 col-lg-6 pl-4">
+                    <div class="form-check form-switch mb-2">
+                        <input class="form-check-input" type="checkbox" id="add_saveDirection" name="add_saveDirection" value="1">
+                        <label class="form-check-label" for="add_saveDirection"><?= lang('PresupuestosDirecciones.saveDirection') ?></label>
+                    </div>
+                </div>
+
+                <div class="mb-3">
+                    <label style="display:none" for="add_alias" class="form-label save-alias">
+                        <?= lang('PresupuestosDirecciones.alias') ?>*
+                    </label>
+                    <input type="text" id="add_alias" maxLength="100" class="form-control new-address save-alias" style='display: none;'>
+                </div><!--//.mb-3 -->
+
+            </div>
+            <div class="modal-footer">
+                <button id="saveDireccionEnvio"
+                    type="button"
+                    class="btn btn-primary">Guardar</button>
+                <button id="cancelAdd"
+                    type="button"
+                    class="btn btn-default">Cancelar</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+
+<?= $this->section("additionalExternalJs") ?>
+    
+<?= $this->endSection() ?>

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_resumen.php

@@ -0,0 +1,206 @@
+<div class="col-12 d-flex flex-column align-items-center">
+
+    <h3 class="mb-1 fw-bold">Resumen del presupuesto</h3>
+    <div class="line mb-4"></div>
+
+    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+        <h5 class="mb-1 "> Precio unidad: <span id="resumenPrecioU"></span> €</h5>
+        <h4 class="mb-1 "> Total base: <span id="resumenTotalBase"></span> €</h>
+            <h4 class="mb-1 "> Iva (<span id="resumenIvaPorcentaje"></span>%): <span id="resumenIva"></span> €</h>
+                <h3 class="mt-3 mb-1 fw-bold"> Total: <span id="resumenTotal"></span> €</h>
+    </div><!--//.mb-3 -->
+
+    <div id="divFormaCubierta" class="col-sm-12 mb-3 d-flex flex-column align-items-center">
+        <div class="row justify-content-center col-sm-12">
+            <div id="btnPreviewCubierta" class="btn col-sm-4 btn-primary waves-effect waves-light ml-2">
+                <span class="align-middle d-sm-inline-block d-none me-sm-1"></i>Mostrar desarrollo cubierta</span>
+
+            </div>
+        </div>
+        <div class="row">
+            <div id="pv_ec_shape" class="col-sm-12 d-none" style="width:850px;height:600px;margin:2.5% auto;"></div>
+        </div>
+    </div>
+
+    <div class="table-responsive col-10 mb-3">
+        <table class="table table-bordered">
+            <thead class="table-dark">
+                <tr>
+                    <th colspan="2">Datos generales</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="col-item-resumen-table">Titulo</td>
+                    <td id="resumenTitulo">Albert Cook</td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Tipo libro</td>
+                    <td id="resumenTipoLibro"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Formato</td>
+                    <td id="resumenFormato"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Páginas negro</td>
+                    <td id="resumenPaginasNegro"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Páginas color</td>
+                    <td id="resumenPaginasColor"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Páginas en total</td>
+                    <td id="resumenPaginas"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Tirada</td>
+                    <td id="resumenTirada"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Prototipo</td>
+                    <td id="resumenPrototipo"></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="table-responsive col-10 mb-3">
+        <table class="table table-bordered">
+            <thead class="table-dark">
+                <tr>
+                    <th colspan="2">Interior</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="col-item-resumen-table">Impresion</td>
+                    <td id="resumenImpresion"></td>
+                </tr>
+                <tr class="mismoInterior">
+                    <td class="col-item-resumen-table">Papel</td>
+                    <td id="resumenPapelInterior"></td>
+                </tr>
+                <tr class="mismoInterior">
+                    <td class="col-item-resumen-table">Gramaje</td>
+                    <td id="resumenGramajeInterior"></td>
+                </tr>
+                <tr class="diferenteInterior d-none">
+                    <td class="col-item-resumen-table">Papel B&N</td>
+                    <td id="resumenPapelInteriorNegro"></td>
+                </tr>
+                <tr class="diferenteInterior d-none">
+                    <td class="col-item-resumen-table">Gramaje B&N</td>
+                    <td id="resumenGramajeInteriorNegro"></td>
+                </tr>
+                <tr class="diferenteInterior d-none">
+                    <td class="col-item-resumen-table">Papel Color</td>
+                    <td id="resumenPapelInteriorColor"></td>
+                </tr>
+                <tr class="diferenteInterior d-none">
+                    <td class="col-item-resumen-table">Gramaje Color</td>
+                    <td id="resumenGramajeInteriorColor"></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="table-responsive col-10 mb-3">
+        <table class="table table-bordered">
+            <thead class="table-dark">
+                <tr>
+                    <th colspan="2">Cubierta</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="col-item-resumen-table">Tipo</td>
+                    <td id="resumenCubiertaTipo"></td>
+                </tr>
+                <tr class="cubierta-tapa-blanda d-none">
+                    <td class="col-item-resumen-table">Caras impresas</td>
+                    <td id="resumenCarasCubierta"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Papel</td>
+                    <td id="resumenPapelCubierta"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Gramaje</td>
+                    <td id="resumenGramajeCubierta"></td>
+                </tr>
+                <tr class="cubierta-tapa-blanda d-none">
+                    <td class="col-item-resumen-table">Solapas</td>
+                    <td id="resumenSolapasCubierta"></td>
+                </tr>
+                <tr class="cubierta-tapa-dura d-none">
+                    <td class="col-item-resumen-table">Papel de guardas</td>
+                    <td id="resumenPapelGuardas"></td>
+                </tr>
+                <tr class="cubierta-tapa-dura d-none">
+                    <td class="col-item-resumen-table">Guardas impresas</td>
+                    <td id="resumenGuardasImpresas"></td>
+                </tr>
+                <tr class="cubierta-tapa-dura d-none">
+                    <td class="col-item-resumen-table">Cabezada</td>
+                    <td id="resumenCabezada"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Acabados</td>
+                    <td id="resumenCubiertaAcabados"></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div id="divResumenSobrecubierta" class="table-responsive col-10 mb-3 d-none">
+        <table class="table table-bordered">
+            <thead class="table-dark">
+                <tr>
+                    <th colspan="2">Sobrecubierta</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="col-item-resumen-table">Papel</td>
+                    <td id="resumenPapelSobrecubierta">Estucado Mate</td>
+                </tr>
+                <tr class="d-none">
+                    <td class="col-item-resumen-table">Gramaje</td>
+                    <td id="resumenGramajeSobrecubierta"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Tamaño solapas</td>
+                    <td id="resumenSolapaSobrecubierta"></td>
+                </tr>
+                <tr>
+                    <td class="col-item-resumen-table">Plastificado</td>
+                    <td id="resumenPlastificadoSobreCubierta"></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+
+    <?php if ($state == 2): ?>
+        <div class="col-12 mb-3">
+            <h3>Ficheros</h3>
+            <div class="col-12">
+                <div class="dropzone needsclick" id="dropzone-multi">
+                    <div class="dz-message needsclick">
+                        Arrastre aquí los ficheros o haga click
+                    </div>
+                    <div class="fallback">
+                        <input name="file" type="file" />
+                    </div>
+                </div>
+            </div>
+            <button id="submit-all-files" class="btn mt-3 btn-primary btn-submit waves-effect waves-light ml-2">
+                <span class="align-middle d-sm-inline-block d-none me-sm-1">Actualizar ficheros</span>
+                <i class="ti ti-upload ti-xs"></i>
+            </button>
+        </div>
+    <?php endif; ?>
+
+</div>

ci4/builds:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\jjime\Downloads\safekat-dev-presu_cliente_v2.zip

ci4/spark:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\jjime\Downloads\safekat-dev-presu_cliente_v2.zip

httpdocs/assets/js/safekat/components/modalDireccion.js

@@ -0,0 +1,94 @@
+class Direccionmodal {
+    constructor(modal, saveCallback) {
+        this.modal = modal;
+        this.saveCallback = saveCallback;
+        
+        this.alias = $(this.modal.find('#add_alias'));
+        this.att = $(this.modal.find('#add_att'));
+        this.email = $(this.modal.find('#add_email'));
+        this.direccion = $(this.modal.find('#add_direccion'));
+        this.pais = $(this.modal.find('#add_pais_id'));
+        this.municipio = $(this.modal.find('#add_municipio'));
+        this.provincia = $(this.modal.find('#add_provincia'));
+        this.cp = $(this.modal.find('#add_cp'));
+        this.telefono = $(this.modal.find('#add_telefono'));
+
+        this.btnCancel = $(this.modal.find('#cancelAdd'));
+        this.btnSave = $(this.modal.find('#saveAdd'));
+
+        this.error = $(this.modal.find('.texto-error'));
+    }
+
+    init() {
+        this.btnCancel.on('click', () => {
+            
+            this.modal.modal("hide");
+        });
+
+        this.modal.on('hidden.bs.modal', () => {
+            this.error.addClass('d-none');
+            this.alias.val("");
+            this.att.val("");
+            this.email.val("");
+            this.direccion.val("");
+            this.pais.val("").trigger('change');
+            this.municipio.val("");
+            this.provincia.val("");
+            this.cp.val("");
+            this.telefono.val("");
+            this.btnSave.off('click');
+        });
+
+        this.pais.on('change',  () => {
+            var nombre_pais = $("#add_pais_id option:selected").text().trim();
+            if (nombre_pais.localeCompare('España') == 0) {
+                $('#divPais').removeClass('col-lg-12').addClass('col-lg-6')
+                $('#divMunicipio').removeClass('col-lg-12').addClass('col-lg-6')
+                $('.spain-data').css('display', 'inline')
+            }
+            else {
+                $('.spain-data').css('display', 'none')
+                $('#divPais').removeClass('col-lg-6').addClass('col-lg-12')
+                $('#divMunicipio').removeClass('col-lg-6').addClass('col-lg-12')
+            }
+        });
+
+        this.btnSave.on('click', () => {
+            if (this.#validatemodal()) {
+                this.saveCallback();
+            }
+            else {
+                $(this.modal.find('.texto-error')).removeClass('d-none');
+            }
+
+        });
+
+        this.modal.modal('show');
+    }
+
+    #validatemodal() {
+
+        if(this.alias.val() == "" || this.att.val() == "" || this.direccion.val() == ""  || this.municipio.val() == "" || this.cp.val() == "" ){
+            return false;
+        }
+        if(this.pais.children("option:selected").val() < 1)
+            return false;
+        return true;
+    }
+
+    getData() {
+        return {
+            alias: this.alias.val(),
+            att: this.att.val(),
+            email: this.email.val(),
+            direccion: this.direccion.val(),
+            pais_id: this.pais.children("option:selected").val(),
+            municipio: this.municipio.val(),
+            provincia: this.provincia.val(),
+            cp: this.cp.val(),
+            telefono: this.telefono.val()
+        }
+    }
+}
+
+export default Direccionmodal;

httpdocs/assets/js/safekat/components/tarjetaDireccionPresupuesto.js

@@ -0,0 +1,105 @@
+class tarjetaDireccion {
+
+    constructor(container, id, direccion) {
+        
+        this.container = container;
+        this.id = id;
+        this.direccionId = direccion.id;
+        this.card = this.#generateHTML(id, direccion);
+        this.deleteBtn = this.card.find('.direccion-eliminar');
+        this.editBtn = this.card.find('.direccion-editar');
+    }
+
+
+    #generateHTML(id, direccion) {
+
+        // Crear los elementos usando jQuery
+        var $parent = $('<div>', { 
+            class: 'direccion-cliente col-sm-5 form-check custom-option custom-option-basic checked justify-content-center mb-4',
+            id: id 
+        });
+        
+        var $label = $('<label>', { class: 'form-check-label custom-option-content' });
+
+        var $header = $('<span>', { class: 'custom-option-header mb-2' });
+        var $name = $('<h6>', { class: 'fw-semibold mb-0', text: direccion.att });
+        var $unidades = $('<span>', { class: 'badge bg-label-primary unidades', text: direccion.unidades + ' unidades' });
+
+        var $body = $('<span>', { class: 'custom-option-body' });
+        var $direccion = $('<small>', { class: 'address-direccion', text: direccion.direccion });
+        var $cp = $('<small>', { class: 'address-cp', text: direccion.cp });
+        var $municipioPais = $('<small>', { class: 'address-municipio-pais', text: direccion.municipio + ', '+ direccion.pais });
+        var $telefono = $('<small>', { class: 'address-telefono', text: direccion.telefono });
+        var $email = $('<small>', { class: 'address-email', text: direccion.email });
+
+        var $palets = $('<small>', {class: 'address-palets', html: '<i>Envío en palets</i>'});
+        
+        var $hr = $('<hr>', { class: 'my-2' });
+        var $eliminar = $('<a>', { class: 'ms-auto direccion-eliminar', href: 'javascript:void(0)', text: 'Eliminar' });
+        var $editar = $('<a>', { class: 'me-auto direccion-editar', href: 'javascript:void(0)', text: 'Editar' });
+        var $eliminarContainer = $('<span>', { class: 'd-flex w-100 position-relative' }).append($editar, $eliminar);
+
+        // Construir la estructura del HTML
+        $header.append($name, $unidades);
+        $body.append($direccion, '<br>', $cp, '<br>', $municipioPais, '<br>', $telefono, '<br>', $email, '<br>', $palets, '<br>', $hr, $eliminarContainer);
+        $label.append($header, $body);
+        $parent.append($label);
+
+        return $parent;
+    }
+
+
+    init() {
+
+        this.container.append(this.card);
+    }
+
+
+    setDireccion(direccion) {
+        this.card.find('.address-direccion').text(direccion.direccion);
+        this.card.find('.address-cp').text(direccion.cp);
+        this.card.find('.address-municipio-pais').text(direccion.municipioPais);
+        this.card.find('.address-telefono').text(direccion.telefono);
+        this.card.find('.address-email').text(direccion.email);
+        this.card.find('.address-palets').toggleClass('d-none', !direccion.palets);
+    }
+
+
+    setEntregaPalets(palets) {
+        this.card.find('.address-palets').toggleClass('d-none', !palets);
+    }
+
+    getEntregaPalets() {
+        return !this.card.find('.address-palets').hasClass('d-none');
+    }
+
+    setUnidades(unidades) {
+        this.card.find('.unidades').text(unidades + ' unidades');
+    }
+
+    getUnidades() {
+        return this.card.find('.unidades').text().split(' ')[0];
+    }
+
+    getCp() {
+        return this.card.find('.address-cp').text();
+    }
+
+    getId() {
+        return this.id;
+    }
+
+    getDireccionId() {
+        return this.direccionId;
+    }
+
+    getFormData() {
+        return {
+            id: this.direccionId,
+            unidades: this.getUnidades(),
+            entregaPalets: this.getEntregaPalets()
+        };
+    }
+}
+
+export default tarjetaDireccion;

httpdocs/assets/js/safekat/pages/configuracion/error_presupuesto/errorPresupuesto.js

@@ -0,0 +1,51 @@
+
+class ErrorPresupuestoView {
+    constructor(domItem) {
+        this.item = domItem
+        this.datatableItem = this.item.find("#tableErrorPresupuesto")
+        this.datatableColumns = [
+            { data: 'presupuestoId',  searchable: true, sortable: false },
+            { data: 'presupuestoUser',searchable: true, sortable: false },
+            { data: 'lastUser', searchable: true, sortable: false },
+            { data: 'visto', searchable: false, sortable: false ,
+                render : (d,t) => {
+                    const iconClass = d == "1" ? "ti ti-sm ti-check" : "ti ti-sm ti-x"
+                    return `<span class="${iconClass}"</span>`
+                }
+             },
+            { data: 'created_at', searchable: false, sortable: true },
+            {
+                data: 'action', sortable: false, searchable: false,
+                render: (d, t) => {
+                    return `
+                    <div class="btn-group btn-group-sm">
+                        <a href="/configuracion/errores-presupuesto/edit/${d}" data-id="${d}" class="edit-error-presupuesto"><i class="ti ti-eye ti-sm mx-2"></i></a>
+                    </div>
+                    `
+                }
+            },
+        ]
+    }
+    init() {
+        this.datatable = this.datatableItem.DataTable({
+            processing: true,
+            layout :{
+                topStart: 'pageLength',
+                topEnd: 'search',
+                bottomStart: 'info',
+                bottomEnd: 'paging'
+            },
+            serverSide: true,
+            pageLength : 50,
+            language: {
+                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
+            },
+            columns: this.datatableColumns,
+            ajax: '/configuracion/errores-presupuesto/datatable'
+        });
+
+    }
+
+}
+
+export default ErrorPresupuestoView;

httpdocs/assets/js/safekat/pages/configuracion/error_presupuesto/errorPresupuestoForm.js

@@ -0,0 +1,79 @@
+
+
+import Ajax from "../../../components/ajax.js";
+import ajax from "../../../components/ajax.js"
+
+class ErrorPresupuestoForm {
+    constructor(domItem) {
+        this.item = domItem
+        this.form = this.item.find("#error-presupuesto-form")
+        this.inputPresupuestoUserId = this.item.find("#presupuesto-user-id")
+        this.inputDatos = this.item.find("#datos-presupuesto")
+        this.inputError = this.item.find("#error-presupuesto-text")
+        this.inputComments = this.item.find("#comments-presupuesto")
+        this.errorPresupuestoId = this.item.find("#error-presupuesto-id").attr("value")
+        this.updateBtnIcon = this.item.find(".button-update-comment")
+        this.checkVisto = this.item.find("#error-presupuesto-visto")
+        this.loader = this.item.find("#update-button-loader")
+        this.btnIcon = this.item.find("#update-button-icon")
+
+    }
+    init() {
+        this.item.on("click",".button-update-comment",this.handlePostErrorPresupuesto.bind(this))
+        this.handleGetErrorPresupuesto()
+    }
+    handleGetErrorPresupuesto()
+    {
+        const ajax = new Ajax(
+            `/configuracion/errores-presupuesto/get/${this.errorPresupuestoId}`,
+            null,
+            null,
+            this.handleGetErrorPresupuestoSuccess.bind(this),
+            this.handleGetErrorPresupuestoError.bind(this)
+        )
+        ajax.get()
+    }
+    handleGetErrorPresupuestoSuccess(data){
+        const dataJson = JSON.parse(data.data.datos_presupuesto)
+        const error = data.data.error
+        this.inputPresupuestoUserId.val(data.data.presupuestoUser)
+        this.inputDatos.val(JSON.stringify(dataJson,null,4))
+        this.inputError.val(error)
+        this.inputComments.val(data.data.comment)
+        this.updateBtnIcon.prop("disabled",false)
+        this.checkVisto.prop("checked",parseInt(data.data.visto) == 1 ? true : false)
+        this.setLoader(false)
+
+    }
+    setLoader(state = true){
+        this.loader.prop("hidden",!state)
+        this.btnIcon.prop("hidden",state)
+    }
+    handleGetErrorPresupuestoError(){}
+    handlePostErrorPresupuesto()
+    {
+        let data =  
+        {
+            "comments" : this.inputComments.val()
+        }
+        this.updateBtnIcon.prop("disabled",true)
+        this.setLoader()
+        const ajax = new Ajax(
+            `/configuracion/errores-presupuesto/edit/${this.errorPresupuestoId}`,
+            data,
+            null,
+            this.handlePostErrorPresupuestoSuccess.bind(this),
+            this.handlePostErrorPresupuestoError.bind(this)
+        )
+        ajax.post()
+    }
+    handlePostErrorPresupuestoSuccess(){
+        
+        this.handleGetErrorPresupuesto()
+    }
+    handlePostErrorPresupuestoError(error){} 
+
+
+}
+
+export default ErrorPresupuestoForm;

httpdocs/assets/js/safekat/pages/configuracion/error_presupuesto/indexForm.js

@@ -0,0 +1,6 @@
+import ErrorPresupuestoForm from "./errorPresupuestoForm.js";
+
+$(document).ready(() => {
+    const errorPresupuestoForm = new ErrorPresupuestoForm($("#error-presupuesto-container"))
+    errorPresupuestoForm.init()
+})

httpdocs/assets/js/safekat/pages/configuracion/error_presupuesto/indexView.js

@@ -0,0 +1,6 @@
+import ErrorPresupuestoView from "./errorPresupuesto.js";
+
+$(document).ready(()=>{
+    const errorPresupuesto = new ErrorPresupuestoView($("#errorPresupuestoCard"))
+    errorPresupuesto.init()
+})

httpdocs/assets/js/safekat/pages/presupuestoCliente/datosGenerales.js

@@ -0,0 +1,679 @@
+import ClassSelect from '../../components/select2.js';
+import tarjetaTiradasPrecio from './tarjetaTiradasPrecio.js';
+
+
+class DatosGenerales {
+
+    constructor(domItem, wizardForm, validatorStepper) {
+
+        this.domItem = domItem;
+        this.allowNext = true;
+
+        this.wizardStep = wizardForm.querySelector('#datos-generales');
+        this.validatorStepper = validatorStepper;
+
+        this.formatoLibro = new ClassSelect($("#papelFormatoId"), '/papel-formato/getSelect2', window.translations["formatoLibro"]);
+        this.cliente = new ClassSelect($("#clienteId"), '/clientes/cliente/getSelect2', window.translations["selectCliente"]);
+
+        this.titulo = this.domItem.find("#titulo");
+        this.autor = this.domItem.find("#autor");
+        this.isbn = this.domItem.find("#isbn");
+        this.coleccion = this.domItem.find("#coleccion");
+        this.referenciaCliente = this.domItem.find("#referenciaCliente");
+
+        this.tirada1 = this.domItem.find("#tirada");
+        this.tirada2 = this.domItem.find("#tirada2");
+        this.tirada3 = this.domItem.find("#tirada3");
+        this.tirada4 = this.domItem.find("#tirada4");
+
+        this.papelFormatoId = this.domItem.find("#papelFormatoId");
+        this.checkFormatoPersonalizado = this.domItem.find("#papelFormatoPersonalizado");
+        this.formatoPersonalizado = this.domItem.find("#formatoPersonalizado");
+        this.formatoEstandar = this.domItem.find("#formatoEstandar");
+        this.anchoPersonalizado = this.domItem.find("#papelFormatoAncho");
+        this.altoPersonalizado = this.domItem.find("#papelFormatoAlto");
+
+        this.fresado = $(this.domItem.find("#fresado")[0]);
+        this.cosido = $(this.domItem.find("#cosido")[0]);
+        this.grapado = $(this.domItem.find("#grapado")[0]);
+        this.espiral = $(this.domItem.find("#espiral")[0]);
+
+        this.tiposLibro = this.domItem.find(".tipo-libro");
+
+        this.paginas = this.domItem.find("#paginas");
+        this.paginasNegro = this.domItem.find("#paginasNegro");
+        this.paginasColor = this.domItem.find("#paginasColor");
+        this.divPaginasCuaderillo = this.domItem.find("#divPaginasCuadernillo");
+        this.paginasCuadernillo = this.domItem.find("#paginasCuadernillo");
+        this.divPaginasColorConsecutivas = this.domItem.find("#divPaginasColorConsecutivas");
+        this.pagColorConsecutivas = this.domItem.find("#pagColorConsecutivas");
+        this.divPapelDiferente = this.domItem.find("#divPapelDiferente");
+        this.papelDiferente = this.domItem.find("#papelDiferente");
+        this.divPosPaginasColor = this.domItem.find("#divPosPaginasColor");
+        this.posPaginasColor = this.domItem.find("#posPaginasColor");
+
+        this.ivaReducido = this.domItem.find("#ivaReducido");
+        this.excluirRotativa = this.domItem.find("#excluirRotativa");
+        this.prototipo = this.domItem.find("#prototipo");
+
+        this.initValidation();
+    }
+
+
+    init() {
+
+        // Selects
+        this.formatoLibro.init();
+        this.cliente.init();
+
+
+        // Inicializa el tipo de impresion
+        this.#handlePaginas();
+
+        // Eventos
+        this.checkFormatoPersonalizado.bind('change', this.#handleFormatoLibro.bind(this));
+        this.tiposLibro.on('click', this.#handleTipolibro.bind(this));
+        this.domItem.find('.input-paginas').on('change', this.#handlePaginas.bind(this));
+        this.anchoPersonalizado.on('blur', this.#handleCheckFormatoPersonalizado.bind(this));
+        this.altoPersonalizado.on('blur', this.#handleCheckFormatoPersonalizado.bind(this));
+        this.pagColorConsecutivas.on('change', this.#handPaginasConsecutivas.bind(this));
+        this.papelDiferente.on('change', this.#handlePapelDiferente.bind(this));
+
+        this.titulo.on('change', () => { $(".titulo").html(this.titulo.val()); });
+    }
+
+    initValidation() {
+
+        const stepper = this.validatorStepper;
+
+        this.formValidation = FormValidation.formValidation(this.wizardStep, {
+            fields: {
+                titulo: {
+                    validators: {
+                        notEmpty: {
+                            message: window.translations["validation"].requerido_short
+                        },
+                    }
+                },
+                cliente_id: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].cliente,
+                            callback: function (input) {
+                                // Get the selected options
+                                if (!$(this.excluirRotativa).prop('hidden'))
+                                    return true;
+                                const options = $("#clienteId").select2('data');
+                                const hasValidOption = options.some(option => parseInt(option.id) > 0);
+                                return options !== null && options.length > 0 && hasValidOption;
+                            },
+                        }
+                    }
+                },
+                tirada: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                const value = $("#tirada").val();
+                                const value2 = $("#tirada2").val();
+                                const value3 = $("#tirada3").val();
+                                const value4 = $("#tirada4").val();
+                                let tiradas = [value];
+
+                                if (!(value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0)) {
+                                    return {
+                                        valid: false,
+                                        message: window.translations["validation"].integer_greatherThan_0,
+                                    };
+                                }
+                                if (value2.length > 0 && Number.isInteger(parseInt(value2)) && parseInt(value2) > 0) {
+                                    tiradas.push(value2);
+                                }
+                                if (value3.length > 0 && Number.isInteger(parseInt(value3)) && parseInt(value3) > 0) {
+                                    tiradas.push(value3);
+                                }
+                                if (value4.length > 0 && Number.isInteger(parseInt(value4)) && parseInt(value4) > 0) {
+                                    tiradas.push(value4);
+                                }
+                                // comprobar si hay valores > 30 
+                                const noPOD = (tiradas.some(tirada => parseInt(tirada) > 30));
+                                const siPOD = (tiradas.some(tirada => parseInt(tirada) <= 30));
+                                if (noPOD && siPOD) {
+                                    return {
+                                        valid: false,
+                                        message: "No se pueden mezclar tiradas <30 con >30",
+                                    }
+                                }
+
+                                return true;
+                            },
+                        }
+                    }
+                },
+                tirada2: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                let field = $("#tirada2");
+                                field.val(field.val().replace(/[^0-9]/g, ''));
+                                let value = field.value;
+                                if (value == '')
+                                    return true;
+                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
+                            },
+                        }
+                    }
+                },
+                tirada3: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                let field = $("#tirada3");
+                                field.val(field.val().replace(/[^0-9]/g, ''));
+                                let value = field.value;
+                                if (value == '')
+                                    return true;
+                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
+                            },
+                        }
+                    }
+                },
+                tirada4: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                let field = $("#tirada4");
+                                field.val(field.val().replace(/[^0-9]/g, ''));
+                                let value = field.value;
+                                if (value == '')
+                                    return true;
+                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
+                            },
+                        }
+                    }
+                },
+                papel_formato_id: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].papelFormato,
+                            callback: function (input) {
+                                // Get the selected options
+                                const options = $("#papelFormatoId").select2('data');
+                                const hasValidOption = options.some(option => parseInt(option.id) > 0);
+                                const custom_format = $("#papelFormatoPersonalizado").is(":checked");
+                                if (custom_format)
+                                    return true;
+                                return options !== null && options.length > 0 && hasValidOption;
+                            },
+                        }
+                    }
+                },
+                papel_formato_ancho: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                // Get the selected options
+                                const custom_format = $("#papelFormatoPersonalizado").is(":checked");
+                                if (!custom_format)
+                                    return true;
+                                const value = $("#papelFormatoAncho").val();
+                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
+                            },
+                        }
+                    }
+                },
+                papel_formato_alto: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                // Get the selected options
+                                const custom_format = $("#papelFormatoPersonalizado").is(":checked");
+                                if (!custom_format)
+                                    return true;
+                                const value = $("#papelFormatoAlto").val();
+                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
+                            },
+                        }
+                    }
+                },
+                paginasColor: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                // Get the selected options
+                                const value = $("#paginasColor").val();
+                                if (value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0) {
+
+                                    if (parseInt(value) % 2 != 0) {
+                                        return {
+                                            valid: false,
+                                            message: window.translations["validation"].paginas_pares
+                                        };
+                                    }
+                                    return true;
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                paginasNegro: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                // Get the selected options
+                                const value = $("#paginasNegro").val();
+                                if (value.length >= 0 && Number.isInteger(parseInt(value)) && parseInt(value) >= 0) {
+
+                                    if (parseInt(value) % 2 != 0) {
+                                        return {
+                                            valid: false,
+                                            message: window.translations["validation"].paginas_pares
+                                        };
+                                    }
+                                    return true;
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                paginas: {
+                    validators: {
+                        callback: {
+                            message: window.translations["validation"].integer_greatherThan_0,
+                            callback: function (input) {
+                                // Get the selected options
+                                const value = $("#paginas").val();
+                                return value.length > 0 && Number.isInteger(parseInt(value)) && parseInt(value) > 0;
+                            },
+                        }
+                    }
+                },
+                div_tipo_libro: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divTipoLibro = $('#divTipoLibro'); // Selecciona el div
+
+                                divTipoLibro.find('.fv-plugins-message-container').remove();
+                                if ($('.tipo-libro.selected').length > 0) {
+                                    if ($('#cosido').hasClass('selected')) {
+                                        const value = parseInt($("#paginas").val());
+                                        if (value % 4 != 0) {
+                                            divTipoLibro.append(`
+                                                <div class="fv-plugins-message-container invalid-feedback">
+                                                    <div data-field="div_tipo_libro" data-validator="callback" style="margin-top: 50px;">
+                                                        ${window.translations["validation"].paginas_cosido}
+                                                    </div>
+                                                </div>
+                                            `);
+                                        }
+                                    }
+
+                                    return true;
+                                }
+                                else {
+                                    divTipoLibro.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_tipo_libro" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].tipo_libro}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                }
+            },
+            plugins: {
+                trigger: new FormValidation.plugins.Trigger(),
+                bootstrap5: new FormValidation.plugins.Bootstrap5({
+                    // Use this for enabling/changing valid/invalid class
+                    // eleInvalidClass: '',
+                    eleValidClass: '',
+                    rowSelector: function (field, ele) {
+                        // field is the field name
+                        // ele is the field element
+                        switch (field) {
+                            case 'div_tipo_libro':
+                                return '.col-sm-10';
+                            case 'titulo':
+                                return '.col-sm-8';
+                            case 'cliente_id':
+                                return '.col-sm-5';
+                            case 'papel_formato_id':
+                                return '.col-sm-4';
+                            case 'papel_formato_ancho':
+                            case 'papel_formato_ancho':
+                                return '.col-sm-3';
+                            case 'tirada':
+                            case 'tirada2':
+                            case 'tirada3':
+                            case 'tirada4':
+                                return '.col-sm-2';
+
+                            default:
+                                return '.col-sm-3';
+                        }
+                    }
+                }),
+                autoFocus: new FormValidation.plugins.AutoFocus(),
+                submitButton: new FormValidation.plugins.SubmitButton()
+            }
+        }).on('core.form.valid', () => {
+            if (this.allowNext)
+                stepper.next();
+        });
+    }
+
+    cargarDatos(datos) {
+
+        this.titulo.val(datos.titulo);
+        this.autor.val(datos.autor);
+        this.isbn.val(datos.isbn);
+        this.coleccion.val(datos.coleccion);
+        this.referenciaCliente.val(datos.referenciaCliente);
+
+        this.cliente.setOption(datos.clienteId, datos.clienteNombre);
+        this.cliente.setVal(datos.clienteId);
+        $(this.cliente).trigger('change');
+
+        if (datos.excluirRotativa) {
+            this.excluirRotativa.prop('checked', true);
+        }
+
+        this.tirada1.val(parseInt(datos.tirada));
+        if (datos.tirada2)
+            this.tirada2.val(parseInt(datos.tirada2));
+        if (datos.tirada3)
+            this.tirada3.val(parseInt(datos.tirada3));
+        if (datos.tirada4)
+            this.tirada4.val(parseInt(datos.tirada4));
+
+        if (datos.papelFormatoPersonalizado) {
+            this.checkFormatoPersonalizado.prop('checked', true);
+            this.formatoEstandar.addClass('d-none');
+            this.formatoPersonalizado.removeClass('d-none');
+            this.formValidation.revalidateField('papel_formato_id');
+            this.altoPersonalizado.val(datos.papelFormatoAlto);
+            this.anchoPersonalizado.val(datos.papelFormatoAncho);
+        }
+        else {
+            this.formatoLibro.setOption(datos.papelFormatoId, datos.papelFormatoNombre);
+            this.formatoLibro.setVal(datos.papelFormatoId);
+        }
+
+        this.paginas.val(parseInt(datos.paginas));
+        this.paginasNegro.val(parseInt(datos.paginasNegro));
+        this.paginasColor.val(parseInt(datos.paginasColor)).trigger('change');
+
+        this.pagColorConsecutivas.prop('checked', datos.paginasColorConsecutivas);
+        if (datos.paginasColorConsecutivas) {
+            this.divPapelDiferente.removeClass('d-none');
+            this.papelDiferente.prop('checked', datos.papelInteriorDiferente).trigger('change');
+        }
+        this.posPaginasColor.val(datos.posPaginasColor);
+
+        this.paginasCuadernillo.val(datos.paginasCuadernillo);
+
+        if (datos.tipo != "") {
+            this.tiposLibro.removeClass('selected');
+            this.tiposLibro.find('.image-presupuesto').removeClass('selected');
+            this.domItem.find('#' + datos.tipo).addClass('selected');
+        }
+
+        this.prototipo.prop('checked', datos.prototipo);
+        this.ivaReducido.val(datos.ivaReducido ? 1 : 0).trigger('change');
+    }
+
+    getCliente() {
+        if ($(this.excluirRotativa).prop('hidden'))
+            return $('#clienteId').val();
+        return this.cliente.getVal();
+    }
+
+    getDimensionLibro() {
+
+        let ancho = 0;
+        let alto = 0;
+
+        if (this.checkFormatoPersonalizado.is(':checked')) {
+            ancho = parseFloat(this.anchoPersonalizado.val());
+            alto = parseFloat(this.altoPersonalizado.val());
+        }
+        else {
+            if (this.papelFormatoId.val() != null) {
+                const selectedText = this.papelFormatoId.find('option:selected').text();
+                if (selectedText.length > 0) {
+                    ancho = parseFloat(selectedText.trim().split(" x ")[0]);
+                    alto = parseFloat(selectedText.trim().split(" x ")[1]);
+                }
+            }
+            else
+                return null;
+        }
+        return {
+            ancho: ancho,
+            alto: alto
+        }
+    }
+
+    getTiradas() {
+        let tiradas = [];
+        tiradas.push(parseInt(this.tirada1.val()));
+        if (this.tirada2.val().length > 0 && parseInt(this.tirada2.val()) > 0)
+            tiradas.push(parseInt(this.tirada2.val()));
+        if (this.tirada3.val().length > 0 && parseInt(this.tirada3.val()) > 0)
+            tiradas.push(parseInt(this.tirada3.val()));
+        if (this.tirada4.val().length > 0 && parseInt(this.tirada4.val()) > 0)
+            tiradas.push(parseInt(this.tirada4.val()));
+        return tiradas;
+    }
+
+
+    getIsColor() {
+        if (this.paginasColor.val() > 0) {
+            return true;
+        }
+        return false;
+    }
+
+
+    #handleFormatoLibro() {
+
+        if (this.checkFormatoPersonalizado.is(':checked')) {
+            this.formatoEstandar.addClass('d-none');
+            this.formatoPersonalizado.removeClass('d-none');
+            this.formValidation.revalidateField('papel_formato_id');
+        }
+        else {
+            this.formatoEstandar.removeClass('d-none');
+            this.formatoPersonalizado.addClass('d-none');
+            this.formValidation.revalidateField('papel_formato_ancho');
+            this.formValidation.revalidateField('papel_formato_alto');
+        }
+    }
+
+    #handleTipolibro(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let containers = element.closest('.tipo-libro').parent().find('.tipo-libro');
+        for (let container of containers) {
+            if (container != element.closest('.tipo-libro')[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest('.tipo-libro').toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+
+        if (this.fresado.hasClass('selected') || this.cosido.hasClass('selected')) {
+            $('#tapaDuraLomoRedondo').removeClass('d-none');
+            if (this.cosido.hasClass('selected')) {
+                //$('#tapaDuraLomoRedondo').addClass('selected');
+                this.divPaginasCuaderillo.removeClass('d-none');
+            }
+            else {
+                this.divPaginasCuaderillo.addClass('d-none');
+            }
+        }
+        else {
+            $('#tapaDuraLomoRedondo').addClass('d-none');
+            $('#tapaDuraLomoRedondo').removeClass('selected');
+            this.divPaginasCuaderillo.addClass('d-none');
+        }
+
+        if (this.grapado.hasClass('selected') || this.espiral.hasClass('selected')) {
+            $('#addSobrecubierta').prop('checked', false).trigger('change');
+            $(".sobrecubierta-items").addClass('d-none');
+        }
+        else {
+            if ($('#addSobrecubierta').hasClass('d-none')) {
+                $('#addSobrecubierta').removeClass('d-none');
+            }
+        }
+
+        // Para recalcular el presupuesto
+        element.trigger('change');
+    }
+
+    #handlePaginas() {
+
+        let paginasNegro = this.paginasNegro.val();
+        let paginasColor = this.paginasColor.val();
+
+        if (paginasNegro == '' || isNaN(paginasNegro)) {
+            paginasNegro = 0;
+        }
+        if (paginasColor == '' || isNaN(paginasColor)) {
+            paginasColor = 0;
+        }
+
+        let totalPaginas = parseInt(paginasNegro) + parseInt(paginasColor);
+        this.paginas.val(totalPaginas);
+
+        let tipos = [this.domItem.find('#fresado'), this.domItem.find('#cosido')];
+        if (totalPaginas < 32) {
+            for (let tipo of tipos) {
+                tipo.removeClass('selected');
+                tipo.find('.image-presupuesto').removeClass('selected');
+
+                tipo.hide();
+            }
+        }
+        else {
+            for (let tipo of tipos) {
+                tipo.show();
+            }
+        }
+
+        if (totalPaginas < 12 || totalPaginas > 40) {
+            this.domItem.find('#grapado').removeClass('selected');
+            this.domItem.find('#grapado').find('.image-presupuesto').removeClass('selected');
+            this.domItem.find('#grapado').hide();
+        }
+        else {
+            this.domItem.find('#grapado').show();
+        }
+        this.formValidation.revalidateField('paginas');
+
+        // Se configura dependiento si hay color o no
+        if (paginasColor == 0) {
+
+            this.#handleInteriorLayout('negro');
+            this.divPaginasColorConsecutivas.addClass('d-none');
+            this.divPosPaginasColor.addClass('d-none');
+            this.posPaginasColor.val("");
+            this.pagColorConsecutivas.prop('checked', false);
+        }
+        else {
+            if (this.papelDiferente.is(":checked"))
+                this.#handleInteriorLayout('mixto');
+            else
+                this.#handleInteriorLayout('color');
+            this.divPaginasColorConsecutivas.removeClass('d-none');
+            this.divPosPaginasColor.removeClass('d-none');
+        }
+    }
+
+
+    #handPaginasConsecutivas() {
+        if (this.pagColorConsecutivas.is(':checked')) {
+            this.divPapelDiferente.removeClass('d-none');
+        }
+        else {
+            this.divPapelDiferente.addClass('d-none');
+            this.papelDiferente.prop('checked', false);
+        }
+    }
+
+
+    #handlePapelDiferente() {
+        if (this.papelDiferente.is(':checked')) {
+            $(".papel-interior").removeClass('selected');
+            $(".interior-color").removeClass('d-none');
+            this.#handleInteriorLayout('mixto');
+
+        }
+        else {
+            $(".interior-color").addClass('d-none');
+            $("#divGramajeInteriorColor").addClass('d-none');
+            $(".papel-interior").removeClass('selected');
+            $(".gramaje-interior").prop('checked', false);
+            $(".gramaje-interior-color").prop('checked', false);
+            this.#handlePaginas();
+        }
+    }
+
+
+    #handleInteriorLayout(layout) {
+        switch (layout) {
+            case 'negro':
+            case 'mixto':
+                $('#negroEstandar').removeClass('d-none');
+                $('#negroPremium').removeClass('d-none');
+                $('#colorEstandar').addClass('d-none');
+                $('#colorPremium').addClass('d-none');
+                break;
+            case 'color':
+                $('#negroEstandar').addClass('d-none');
+                $('#negroPremium').addClass('d-none');
+                $('#colorEstandar').removeClass('d-none');
+                $('#colorPremium').removeClass('d-none');
+                break;
+            default:
+                break;
+        }
+    }
+
+    #handleCheckFormatoPersonalizado() {
+
+        const minAncho = this.anchoPersonalizado.min;
+        const minAlto = this.altoPersonalizado.min;
+
+        if (this.anchoPersonalizado.val() < minAncho || this.anchoPersonalizado.val() == '' || isNaN(this.anchoPersonalizado.val())) {
+            this.anchoPersonalizado.val(minAncho);
+        }
+
+        if (this.altoPersonalizado.val() < minAlto || this.altoPersonalizado.val() == '' || isNaN(this.altoPersonalizado.val())) {
+            this.altoPersonalizado.val(minAlto);
+        }
+    }
+
+}
+
+
+export default DatosGenerales;

httpdocs/assets/js/safekat/pages/presupuestoCliente/direcciones.js

@@ -0,0 +1,377 @@
+import ClassSelect from '../../components/select2.js';
+import Ajax from '../../components/ajax.js';
+import tarjetaDireccion from '../../components/tarjetaDireccionPresupuesto.js';
+import SelectorTiradaEnvio from './selectorTiradaEnvio.js';
+import DireccionForm from '../../components/modalDireccion.js';
+
+
+class Direcciones {
+
+    constructor(domItem, wizardForm, validatorStepper) {
+
+        this.domItem = domItem;
+        this.wizardStep = wizardForm.querySelector('#direcciones-libro');
+        this.validatorStepper = validatorStepper;
+        this.allowNext = true;
+
+        this.unidadesAdd = this.domItem.find('#unidadesEnvio');
+        this.btnAdd = this.domItem.find('#insertarDireccion');
+        this.btnNew = this.domItem.find('#nuevaDireccion');
+        this.entregaPieCallero = this.domItem.find('#entregaPieCalle');
+
+        this.direccionesCliente = new ClassSelect($("#direcciones"), '/misdirecciones/getSelect2');
+
+        this.divDirecciones = $(this.domItem.find('#divDirecciones'));
+        this.divTiradas = this.domItem.find('#containerTiradasEnvios');
+
+        this.checksTiradasEnvio = $('.check-tirada-envio');
+
+        this.direcciones = [];
+
+        this.direcciones.calcularPresupuesto = false;
+
+        this.initValidation();
+
+    }
+
+
+    init() {
+
+        $("#clienteId").on('change', this.handleChangeCliente.bind(this));       
+
+        this.direccionesCliente.init();
+        this.btnAdd.on('click', this.#insertDireccion.bind(this));
+        this.btnNew.on('click', this.#nuevaDireccion.bind(this));
+    }
+
+
+    cargarDatos(datos, datosGenerales) {
+
+        self = this;
+
+        try {
+
+            let tiradas_envio = [datosGenerales.tirada];
+            if (datosGenerales.tirada2) {
+                tiradas_envio.push(datosGenerales.tirada2);
+            }
+            if (datosGenerales.tirada3) {
+                tiradas_envio.push(datosGenerales.tirada3);
+            }
+            if (datosGenerales.tirada4) {
+                tiradas_envio.push(datosGenerales.tirada4);
+            }
+            tiradas_envio.sort((a, b) => a - b);
+
+            setTimeout(() => {
+
+                tiradas_envio.forEach(tirada => {
+                    self.insertTirada(tirada);
+                });
+            }, 0);
+
+            setTimeout(function () {
+                $(`#containerTiradasEnvios .tirada-envio input[tirada="${datosGenerales.tirada}"]`).trigger('click');
+            }, 0);
+
+
+            for (let i = 0; i < datos.length; i++) {
+
+                let id = datos[i].id;
+                let unidades = datos[i].unidades;
+                let entregaPalets = datos[i].palets;
+                let divId = "dirEnvio-1";
+                let direccionesActuales = this.divDirecciones.find('.direccion-cliente');
+                if (direccionesActuales.length > 0) {
+                    // the the lass item
+                    let last = direccionesActuales[direccionesActuales.length - 1];
+                    divId = "dirEnvio-" + (parseInt(last.id.split('-')[1]) + 1);
+                }
+
+                if (id == null || id <= 0 || id == undefined)
+                    return;
+                if (unidades == null || unidades <= 0 || unidades == undefined)
+                    return;
+
+                let peticion = new Ajax('/misdirecciones/getDireccionPresupuesto/' + id, {}, {},
+                    (response) => {
+                        let tarjeta = new tarjetaDireccion(this.divDirecciones, divId, response.data[0]);
+                        tarjeta.setUnidades(unidades);
+                        tarjeta.setEntregaPalets(entregaPalets);
+                        tarjeta.card.find('.direccion-editar').on('click', this.#editUnits.bind(self));
+                        tarjeta.card.find('.direccion-eliminar').on('click', this.#deleteDireccion.bind(self));
+                        this.divDirecciones.append(tarjeta.card);
+                        this.direcciones.push(tarjeta);
+                    },
+                    () => {
+                        console.error('Error getting address');
+                    });
+
+                peticion.get();
+            }
+        } catch (e) {
+            console.error(e);
+            $('#loader').modal('hide');
+        }
+    }
+
+    initValidation() {
+
+        const stepper = this.validatorStepper;
+
+        this.formValidation = FormValidation.formValidation(this.wizardStep, {
+            fields: {
+                div_error_envios: {
+                    validators: {
+                        callback: {
+                            callback: () => {
+                               /* const div = $('#divErrorEnvios'); // Selecciona el div
+
+                                div.find('.fv-plugins-message-container').remove();
+
+                                if ($('.check-tirada-envio:checked').length > 0) {
+                                    let unidades = parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada'));
+                                    let total_envio = 0;
+                                    // se recorre el array this.direcciones
+                                    this.direcciones.forEach(direccion => {
+                                        total_envio += parseInt(direccion.getUnidades());
+                                    });
+                                    if (total_envio == unidades) {
+                                        return true;
+                                    }
+                                }
+
+                                div.append(`
+                                    <div class="fv-plugins-message-container invalid-feedback">
+                                        <div data-field="div_tipo_cubierta" data-validator="callback">
+                                            El total de unidades enviadas no se corresponde con las unidades del pedido
+                                        </div>
+                                    </div>
+                                `);
+                                return false;
+                                */
+                               return true;
+                            },
+                        }
+
+                    }
+                }
+            },
+            plugins: {
+                trigger: new FormValidation.plugins.Trigger(),
+                bootstrap5: new FormValidation.plugins.Bootstrap5({
+                    // Use this for enabling/changing valid/invalid class
+                    // eleInvalidClass: '',
+                    eleValidClass: '',
+                    rowSelector: function (field, ele) {
+                        // field is the field name
+                        // ele is the field element
+                        switch (field) {
+                            case 'div_error_envios':
+                                return '.col-sm-10';
+                            default:
+                                return '.col-sm-3';
+                        }
+                    }
+                }),
+                autoFocus: new FormValidation.plugins.AutoFocus(),
+                submitButton: new FormValidation.plugins.SubmitButton()
+            }
+        }).on('core.form.valid', () => {
+            if (this.allowNext)
+                stepper.next();
+        });
+    }
+
+
+    insertTirada(tirada) {
+
+        const self = this;
+
+        let tarjeta = new SelectorTiradaEnvio(this.divTiradas, 'tiradaEnvios-' + tirada, tirada);
+        let customOption = tarjeta.card.find('.check-tirada-envio');
+
+        customOption.on('click', function () {
+            self.#handleTiradaEnvio(customOption);
+        });
+    }
+
+    obtenerDireccionesCalculo() {
+        let direcciones = [];
+        this.direcciones.forEach(direccion => {
+            let dir = {
+                id: direccion.getId(),
+                unidades: direccion.getUnidades(),
+                entregaPalets: direccion.getEntregaPalets()
+            };
+            direcciones.push(dir);
+        });
+    }
+
+
+    #nuevaDireccion() {
+
+        let dialog = new DireccionForm($("#addressModal"), function () {
+            try {
+                let data = dialog.getData();
+                data.cliente_id = $("#clienteId").select2('data')[0].id;
+
+                new Ajax(
+                    '/misdirecciones/add',
+                    data,
+                    {},
+                    () => { dialog.modal.modal('hide') },
+                    () => { dialog.modal.modal('hide') }
+                ).post();
+            }
+            catch (e) {
+                console.error(e);
+                dialog.modal.modal('hide');
+            }
+
+        });
+        dialog.init();
+    }
+
+    #handleTiradaEnvio(customOption) {
+
+        const el = customOption[0];
+
+        if (el.checked) {
+            // If custom option element is radio, remove checked from the siblings (closest `.row`)
+            if (el.type === 'radio') {
+                const customRadioOptionList = [].slice.call(el.closest('.row').querySelectorAll('.custom-option'))
+                customRadioOptionList.map(function (customRadioOptionEL) {
+                    customRadioOptionEL.closest('.custom-option').classList.remove('checked')
+                })
+            }
+            el.closest('.custom-option').classList.add('checked')
+        } else {
+            el.closest('.custom-option').classList.remove('checked')
+        }
+    }
+
+
+    #insertDireccion() {
+
+        self = this;
+
+        try {
+
+            let id = this.direccionesCliente.getVal();
+            let unidades = this.unidadesAdd.val();
+            let entregaPalets = this.entregaPieCallero.is(':checked');
+            let divId = "dirEnvio-1";
+            let direccionesActuales = this.divDirecciones.find('.direccion-cliente');
+            if (direccionesActuales.length > 0) {
+                // the the lass item
+                let last = direccionesActuales[direccionesActuales.length - 1];
+                divId = "dirEnvio-" + (parseInt(last.id.split('-')[1]) + 1);
+            }
+
+            if (id == null || id <= 0 || id == undefined)
+                return;
+            if (unidades == null || unidades <= 0 || unidades == undefined)
+                return;
+
+            $('#loader').modal('show');
+            let peticion = new Ajax('/misdirecciones/get/' + id, {}, {},
+                (response) => {
+
+                    if (this.direcciones.length == 0) {
+                        $('#loader').modal('hide');
+                        if (entregaPalets) {
+                            this.calcularPresupuesto = true;
+                        }
+                    }
+                    else {
+                        this.calcularPresupuesto = true;
+                    }
+                    let tarjeta = new tarjetaDireccion(this.divDirecciones, divId, response.data[0]);
+                    tarjeta.setUnidades(unidades);
+                    tarjeta.setEntregaPalets(entregaPalets);
+                    tarjeta.card.find('.direccion-editar').on('click', this.#editUnits.bind(self));
+                    tarjeta.card.find('.direccion-eliminar').on('click', this.#deleteDireccion.bind(self));
+                    this.divDirecciones.append(tarjeta.card);
+                    this.direcciones.push(tarjeta);
+                    self.divDirecciones.trigger('change');
+
+                },
+                () => {
+                    console.error('Error getting address');
+                    $('#loader').modal('hide');
+                });
+
+            peticion.get();
+        } catch (e) {
+            console.error(e);
+            $('#loader').modal('hide');
+        }
+    }
+
+
+    handleChangeCliente() {
+
+        this.direccionesCliente.setParams({ 'cliente_id': $("#clienteId").select2('data')[0].id })
+        this.direccionesCliente.empty();
+
+        this.domItem.find('.direccion-cliente').remove();
+        this.direcciones = [];
+    }
+
+    #editUnits(event) {
+
+        let id = $(event.currentTarget.closest('.direccion-cliente'))[0].id;
+        let tarjeta = this.direcciones.filter(direccion => direccion.id == id)[0].card;
+        let unidades = tarjeta.find('.unidades').text().split(' ')[0];
+
+        let modal = $('#modalInput');
+        modal.find('.modal-title').text('Editar unidades');
+        modal.find('.inputData').val(unidades);
+        modal.modal('show');
+
+        modal.find('.btn-primary').off('click');
+        modal.find('.btn-primary').on('click', () => {
+            try {
+
+                let nuevo_valor = parseInt(modal.find('.modal-body input').val());
+                if (nuevo_valor > 0) {
+                    tarjeta.find('.unidades').text(nuevo_valor + ' unidades');
+                    if (this.direcciones.length > 1) {
+                        this.calcularPresupuesto = true;
+                    }
+                    this.divDirecciones.trigger('change');
+                }
+            } catch (error) {
+                console.error('Units must be a number');
+            }
+            modal.modal('hide');
+        });
+    }
+
+    #deleteDireccion(event) {
+
+        let tarjeta = event.currentTarget.closest('.direccion-cliente');
+        let id = tarjeta.id;
+
+        const numTarjetasAntes = this.direcciones.length;
+        if (numTarjetasAntes == 2) {
+            this.calcularPresupuesto = true;
+        }
+
+        this.direcciones = this.direcciones.filter(direccion => direccion.getId() !== id);
+
+        tarjeta.remove();
+        this.divDirecciones.trigger('change');
+    }
+
+    getSelectedTirada() {
+        if ($('.check-tirada-envio:checked').length > 0)
+            return parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada'));
+        else
+            return null;
+    }
+}
+
+
+export default Direcciones;

httpdocs/assets/js/safekat/pages/presupuestoCliente/disenioCubierta.js

@@ -0,0 +1,720 @@
+class DisenioCubierta {
+
+    constructor(domItem, wizardForm, validatorStepper) {
+        
+        this.domItem = domItem;
+        this.allowNext = true;
+
+        this.wizardStep = wizardForm.querySelector('#cubierta-libro');
+        this.validatorStepper = validatorStepper;
+
+        this.disenioCubierta = this.domItem.find(".tipo-cubierta");
+        this.solapasCubierta = this.domItem.find(".solapas-cubierta");
+        this.papelCubierta = this.domItem.find(".papel-cubierta");
+
+        this.divSolapas = this.domItem.find("#divSolapasCubierta");
+        this.divCarasImpresion = this.domItem.find("#divCarasImpresion");
+        this.divConfigTapaDura = this.domItem.find("#divConfigTapaDura");
+
+        this.carasCubierta = this.domItem.find("#carasCubierta");
+
+        this.tapaBlanda = this.domItem.find("#tapaBlanda");
+        this.tapaDuraLomoRecto = this.domItem.find("#tapaDura");
+        this.tapaDuraLomoRedondo = this.domItem.find("#tapaDuraLomoRedondo");
+
+        this.sinSolapas = this.domItem.find("#solapasCubiertaNo");
+        this.conSolapas = this.domItem.find("#solapasCubiertaSi");
+        this.divTamanioSolapas = this.domItem.find("#divTamanioSolapas");
+        this.tamanioSolapasCubierta = $(this.domItem.find("#solapasCubierta"));
+
+        this.papelGuardas = this.domItem.find("#papelGuardas");
+        this.guardasImpresas = this.domItem.find("#guardasImpresas");
+        this.cabezada = this.domItem.find("#cabezada");
+
+        this.cartulinaEstucada = this.domItem.find("#cartulinaEstucada");
+        this.estucadoMate = this.domItem.find("#estucadoMate");
+
+        this.divPapelCubierta = this.domItem.find("#divPapelCubierta");
+
+        this.divGramajeCubierta = this.domItem.find("#divGramajeCubierta");
+        this.gramaje = this.domItem.find(".check-gramaje-cubierta");
+        this.gramaje170 = $(this.domItem.find("#divGramaje170Cubierta"));
+        this.gramaje250 = $(this.domItem.find("#divGramaje250Cubierta"));
+        this.gramaje270 = $(this.domItem.find("#divGramaje270Cubierta"));
+        this.gramaje300 = $(this.domItem.find("#divGramaje300Cubierta"));
+        this.gramaje350 = $(this.domItem.find("#divGramaje350Cubierta"));
+
+        this.checksGramaje = $('.check-gramaje-cubierta');
+
+        this.cubiertaPlastificado = this.domItem.find("#plastificado");
+        this.cubiertaBarniz = this.domItem.find("#barniz");
+        this.cubiertaEstampado = this.domItem.find("#estampado");
+        this.cubiertaRetractilado = this.domItem.find("#retractilado");
+
+        this.configuracionSobrecubierta = this.domItem.find(".config-sobrecubierta");
+        this.sobrecubierta = this.domItem.find("#addSobrecubierta");
+        this.papelSobrecubierta = this.domItem.find("#papelSobrecubierta");
+        this.plastificadoSobrecubierta = this.domItem.find("#plastificadoSobrecubierta");
+
+        this.configuracionFaja = this.domItem.find(".config-faja");
+        this.faja = this.domItem.find("#addFaja");
+
+        this.solapasSobrecubierta = this.domItem.find("#solapasSobrecubierta");
+        this.solapasFaja = this.domItem.find("#solapasFaja");
+        this.altoFaja = this.domItem.find("#altoFaja");
+
+        this.initValidation();
+
+        // Creamos un nuevo observador que detecta cambios en los atributos
+        this.observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    const targetElement = mutation.target;
+                    // check if targetElement has class 'selected'
+                    if (targetElement.classList.contains('tipo-cubierta')) {
+                        this.#handleMenuTipoCubierta();
+                    }
+                    else if (targetElement.classList.contains('solapas-cubierta')) {
+                        this.#handleMenuSolapas();
+                    }
+                    else if (targetElement.classList.contains('papel-cubierta')) {
+                        this.#handleMenuPapel();
+                    }
+                }
+            });
+        });
+    }
+
+
+    init() {
+
+        const self = this;
+
+        // Eventos
+        this.disenioCubierta.on('click', this.#handleDisenioCubierta.bind(this));
+        this.solapasCubierta.on('click', this.#handleSolapasCubierta.bind(this));
+        this.papelCubierta.on('click', this.#handlePapelCubierta.bind(this));
+        this.tamanioSolapasCubierta.on('change', this.#handleTamanioSolapas.bind(this));
+        this.altoFaja.on('blur', this.#handleInputs);
+        this.solapasSobrecubierta.on('blur', this.#handleInputs);
+        this.solapasFaja.on('blur', this.#handleInputs);
+
+        this.carasCubierta.on('change', this.#handleCarasCubierta.bind(this));
+
+        this.sobrecubierta.on('change', () => {
+            this.sobrecubierta.is(":checked") ? this.configuracionSobrecubierta.removeClass("d-none") : this.configuracionSobrecubierta.addClass("d-none")
+        }
+        );
+        this.faja.on('change', () => {
+            this.faja.is(":checked") ? this.configuracionFaja.removeClass("d-none") : this.configuracionFaja.addClass("d-none")
+        }
+        );
+
+
+        // Observadores
+        this.observer.observe(this.tapaBlanda[0], { attributes: true });
+        this.observer.observe(this.tapaDuraLomoRecto[0], { attributes: true });
+        this.observer.observe(this.tapaDuraLomoRedondo[0], { attributes: true });
+        this.observer.observe(this.cartulinaEstucada[0], { attributes: true });
+        this.observer.observe(this.estucadoMate[0], { attributes: true });
+        this.observer.observe(this.conSolapas[0], { attributes: true });
+        this.observer.observe(this.sinSolapas[0], { attributes: true });
+
+        this.checksGramaje.each(function () {
+
+            const customOptionEL = $(this);
+            customOptionEL.on('click', function () {
+                self.#handleClickGramaje(customOptionEL);
+            });
+        });
+    }
+
+
+    cargarDatos(datosCubierta, datosGuardas, datosSobrecubierta) {
+
+        if (datosCubierta.lomoRedondo) {
+            this.tapaDuraLomoRedondo.trigger('click');
+        }
+        else {
+            if (datosCubierta.tapa == "dura") {
+                this.tapaDuraLomoRecto.trigger('click');
+            }
+            else {
+                this.tapaBlanda.trigger('click');
+            }
+        }
+
+        if (datosCubierta.tapa == "dura") {
+            this.papelGuardas.val(datosGuardas.papel.code + "_" + datosGuardas.gramaje).trigger('change');
+            this.guardasImpresas.val(datosGuardas.paginas).trigger('change');
+            this.cabezada.val(datosCubierta.cabezada).trigger('change');
+        }
+        else {
+            this.carasCubierta.val(datosCubierta.paginas).trigger('change');
+            if (datosCubierta.solapas) {
+                this.conSolapas.trigger('click');
+                this.tamanioSolapasCubierta.val(datosCubierta.solapas_ancho);
+
+            }
+            else {
+                this.sinSolapas.trigger('click');
+            }
+        }
+
+        this.divPapelCubierta.find(`[cod="${datosCubierta.papel.code}"]`).addClass('selected');
+
+        setTimeout(function () {
+            $(`#divGramajeCubierta .gramaje-cubierta input[data-value="${datosCubierta.gramaje}"]`).trigger('click');
+        }, 0);
+
+        this.cubiertaPlastificado.val(datosCubierta.plastificado).trigger('change');
+        this.cubiertaBarniz.val(datosCubierta.barniz).trigger('change');
+        this.cubiertaEstampado.val(datosCubierta.estampado).trigger('change');
+        if (datosCubierta.retractilado) {
+            setTimeout(() => {
+                this.cubiertaRetractilado.trigger('click');
+            }, 0);
+        }
+
+        if (datosSobrecubierta && datosSobrecubierta.papel) {
+            this.sobrecubierta.trigger('click');
+            this.papelSobrecubierta.val(datosSobrecubierta.papel.code + "_" + datosSobrecubierta.gramaje).trigger('change');
+            this.solapasSobrecubierta.val(datosSobrecubierta.solapas_ancho);
+            this.plastificadoSobrecubierta.val(datosSobrecubierta.plastificado).trigger('change');
+        }
+
+    }
+
+
+    initValidation() {
+
+        const stepper = this.validatorStepper;
+
+        this.formValidation = FormValidation.formValidation(this.wizardStep, {
+            fields: {
+                div_tipo_cubierta: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const div = $('#divTipoCubierta'); // Selecciona el div
+
+                                div.find('.fv-plugins-message-container').remove();
+                                if ($('.tipo-cubierta.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    div.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_tipo_cubierta" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].tipo_cubierta}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_solapas_cubierta: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const div = $('#divSolapasCubierta');
+                                if (div.hasClass("d-none")) return true;
+
+                                div.find('.fv-plugins-message-container').remove();
+                                if ($('.solapas-cubierta.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    div.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_solapas_cubierta" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].opcion_solapas}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_papel_cubierta: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const div = $('#divPapelCubierta');
+                                if (div.hasClass("d-none")) return true;
+
+                                div.find('.fv-plugins-message-container').remove();
+                                if ($('.papel-cubierta.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    div.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_papel_cubierta" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].papel_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_gramaje_cubierta: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const div = $('#divGramajeCubierta'); // Selecciona el div
+
+                                div.find('.fv-plugins-message-container').remove();
+                                if ($('.check-gramaje-cubierta:checked').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    div.append(`
+                                    <div class="fv-plugins-message-container invalid-feedback">
+                                        <div data-field="div_gramaje_cubierta" data-validator="callback" style="margin-top: 50px;">
+                                            ${window.translations["validation"].gramaje_interior}
+                                        </div>
+                                    </div>
+                                `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+            },
+            plugins: {
+                trigger: new FormValidation.plugins.Trigger(),
+                bootstrap5: new FormValidation.plugins.Bootstrap5({
+                    // Use this for enabling/changing valid/invalid class
+                    // eleInvalidClass: '',
+                    eleValidClass: '',
+                    rowSelector: function (field, ele) {
+                        // field is the field name
+                        // ele is the field element
+                        switch (field) {
+                            case 'div_tipo_cubierta':
+                            case 'div_solapas_cubierta':
+                            case 'div_papel_cubierta':
+                            case 'div_gramaje_cubierta':
+                                return '.col-sm-10';
+                            default:
+                                return '.col-sm-3';
+                        }
+                    }
+                }),
+                autoFocus: new FormValidation.plugins.AutoFocus(),
+                submitButton: new FormValidation.plugins.SubmitButton()
+            }
+        }).on('core.form.valid', () => {
+            if (this.allowNext)
+                stepper.next();
+        });
+    }
+
+
+    getSolapasCubierta() {
+
+        try {
+
+            if (this.solapasCubierta.hasClass("selected").length == 0)
+                return null;
+            else {
+                if (this.sinSolapas.hasClass("selected"))
+                    return false;
+                else if (this.conSolapas.hasClass("selected"))
+                    return parseInt(this.tamanioSolapasCubierta.val());
+                else
+                    return null;
+            }
+        }
+        catch (error) {
+            return null;
+        }
+    }
+
+
+    getPapel() {
+
+        try {
+            if (this.papelCubierta.filter('.selected').length > 0) {
+                return this.papelCubierta.filter('.selected').attr('cod');
+            }
+            return null;
+        }
+        catch (e) {
+            return null;
+        }
+    }
+
+
+    getGramaje() {
+
+        try {
+
+            if (this.divGramajeCubierta.hasClass("d-none"))
+                return null;
+
+            if (this.gramaje.filter(':checked').length > 0)
+                return this.gramaje.filter(':checked').attr('data-value');
+
+            else
+                return null;
+
+        } catch (e) {
+            return null;
+        }
+    }
+
+    getAcabados(forResumen = false) {
+        try {
+            let acabados = {};
+            if (forResumen) {
+                acabados = 'Plastificado ' + this.domItem.find("#plastificado").children("option:selected").text();
+                if (this.domItem.find("#barniz").children("option:selected").val() != 'NONE')
+                    acabados += ", Barniz UVI " + this.domItem.find("#barniz").children("option:selected").text();
+                if (this.domItem.find("#estampado").children("option:selected").val() != 'NONE')
+                    acabados += ", Estampado " + this.domItem.find("#estampado").children("option:selected").text();
+                if (this.domItem.find("#retractilado").hasClass('selected')) {
+                    acabados += ", Retractilado ";
+                }
+                return acabados;
+            }
+            else {
+                acabados.plastificado = this.domItem.find("#plastificado ").children("option:selected").val();
+                acabados.barniz = this.domItem.find("#barniz").children("option:selected").val();
+                acabados.estampado = this.domItem.find("#estampado").children("option:selected").val();
+                acabados.retractilado = this.domItem.find("#retractilado").hasClass('selected') ? 'RETR' : 'NONE';
+            }
+            return acabados;
+        } catch (e) {
+            return null;
+        }
+    }
+
+
+    getCabezada(forResumen = false) {
+
+        try {
+            if (this.tapaBlanda.hasClass("selected"))
+                return false;
+            else
+                if (forResumen)
+                    return this.domItem.find("#cabezada").children("option:selected").text();
+                else
+                    return this.domItem.find("#cabezada").children("option:selected").val();
+        } catch (e) {
+            return null;
+        }
+    }
+
+
+    getGuardas(forResumen = false) {
+
+        try {
+            if (this.tapaBlanda.hasClass("selected")) {
+                return false;
+            }
+            else {
+                let guardas = {};
+
+                if (forResumen) {
+                    let papelGuardas = this.domItem.find("#papelGuardas").children("option:selected").text();
+                    guardas.papel = papelGuardas.split(' ')[0] + ' ' + papelGuardas.split(' ')[1];
+                    guardas.gramaje = papelGuardas.split(' ')[2];
+                    guardas.caras = this.domItem.find("#guardasImpresas").children("option:selected").text();
+                }
+                else {
+                    let papelGuardas = this.domItem.find("#papelGuardas").children("option:selected").val();
+                    guardas.papel = papelGuardas.split('_')[0];
+                    guardas.gramaje = papelGuardas.split('_')[1];
+                    guardas.caras = this.domItem.find("#guardasImpresas").children("option:selected").val();
+                }
+                return guardas;
+            }
+
+        } catch (e) {
+            return null;
+        }
+    }
+
+    getSobrecubierta(forResumen = false) {
+
+        try {
+            if (!this.sobrecubierta.is(":checked")) {
+                return false;
+            }
+            else {
+                if (forResumen) {
+                    let sobrecubierta = {};
+                    const papel = this.domItem.find("#papelSobrecubierta").children("option:selected").text();
+                    sobrecubierta.papel = papel.split(' ')[0] + ' ' + papel.split(' ')[1];
+                    sobrecubierta.gramaje = papel.split(' ')[2];
+                    sobrecubierta.solapas = this.domItem.find("#solapasSobrecubierta").val();
+                    sobrecubierta.plastificado = 'Plastificado ' + this.domItem.find("#plastificadoSobrecubierta").children("option:selected").text();
+                    return sobrecubierta;
+                }
+                else {
+                    let sobrecubierta = {};
+                    let papel = this.domItem.find("#papelSobrecubierta").children("option:selected").val();
+                    sobrecubierta.papel = papel.split('_')[0];
+                    sobrecubierta.gramaje = papel.split('_')[1];
+                    sobrecubierta.solapas = this.domItem.find("#solapasSobrecubierta").val();
+                    sobrecubierta.plastificado = this.domItem.find("#plastificadoSobrecubierta").children("option:selected").val();
+                    return sobrecubierta;
+                }
+            }
+
+        } catch (e) {
+            return null;
+        }
+    }
+
+
+    getFaja() {
+
+        try {
+            if (!this.faja.is(":checked")) {
+                return false;
+            }
+            else {
+                let faja = {};
+                faja.alto = this.domItem.find("#altoFaja").val();
+                let papel = this.domItem.find("#papelFaja").children("option:selected").val();
+                faja.papel = papel.split('_')[0];
+                faja.gramaje = papel.split('_')[1];
+                faja.solapas = this.domItem.find("#solapasFaja").val();
+                faja.plastificado = this.domItem.find("#plastificadoFaja").children("option:selected").val();
+                return faja;
+            }
+
+        } catch (e) {
+            return null;
+        }
+    }
+
+    #handleCarasCubierta() {
+        // Si es a dos caras
+        if (this.carasCubierta.val() == 4) {
+            this.cartulinaEstucada.addClass("d-none");
+        }
+        else {
+            this.cartulinaEstucada.removeClass("d-none");
+        }
+    }
+
+
+    #handleDisenioCubierta(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.tipo-cubierta';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+
+        $(".papel-cubierta").removeClass("selected");
+
+        if (this.tapaBlanda.hasClass("selected")) {
+            if (this.carasCubierta.val() == 2) {
+                this.cartulinaEstucada.removeClass("d-none");
+            }
+            this.divGramajeCubierta.addClass("d-none");
+        }
+        else {
+            this.cartulinaEstucada.addClass("d-none");
+            this.estucadoMate.addClass("selected");
+            this.divGramajeCubierta.removeClass("d-none");
+            this.gramaje170.removeClass("d-none");
+            this.gramaje170.closest(".checkbox-presupuesto-container").addClass("checked");
+            this.gramaje250.addClass("d-none");
+            this.gramaje270.addClass("d-none");
+            this.gramaje300.addClass("d-none");
+            this.gramaje350.addClass("d-none");
+        }
+
+        element.trigger('change');
+    }
+
+
+    #handleSolapasCubierta(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.solapas-cubierta';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+
+        element.trigger('change');
+    }
+
+
+    #handlePapelCubierta(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.papel-cubierta';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+
+        element.trigger('change');
+    }
+
+    #handleMenuTipoCubierta() {
+
+        if (this.tapaBlanda.hasClass("selected")) {
+            this.divSolapas.removeClass("d-none");
+            this.divCarasImpresion.removeClass("d-none");
+            this.divConfigTapaDura.addClass("d-none");
+        }
+        else if (this.tapaDuraLomoRecto.hasClass("selected") || this.tapaDuraLomoRedondo.hasClass("selected")) {
+            this.solapasCubierta.removeClass("selected");
+            this.divSolapas.addClass("d-none");
+            this.divCarasImpresion.addClass("d-none");
+            this.divConfigTapaDura.removeClass("d-none");
+            this.#handleMenuPapel();
+
+        }
+        else {
+            this.divSolapas.addClass("d-none");
+            this.divCarasImpresion.addClass("d-none");
+            this.divConfigTapaDura.addClass("d-none");
+            this.#handleMenuPapel();
+        }
+    }
+
+
+    #handleMenuSolapas() {
+
+        if (this.conSolapas.hasClass("selected")) {
+            this.divTamanioSolapas.removeClass("d-none");
+        }
+        else {
+            this.divTamanioSolapas.addClass("d-none");
+        }
+    }
+
+    #handleMenuPapel() {
+
+        $(".check-gramaje-cubierta").prop("checked", false);
+
+        if (!this.tapaBlanda.hasClass("selected") && !this.tapaDuraLomoRecto.hasClass("selected") && !this.tapaDuraLomoRedondo.hasClass("selected")) {
+            this.divGramajeCubierta.addClass("d-none");
+            this.estucadoMate.removeClass("selected");
+            this.cartulinaEstucada.removeClass("selected");
+            return;
+        }
+
+        if (this.cartulinaEstucada.hasClass("selected")) {
+            this.divGramajeCubierta.removeClass("d-none");
+            this.gramaje170.addClass("d-none");
+            this.gramaje250.removeClass("d-none");
+            this.gramaje270.removeClass("d-none");
+            this.gramaje300.removeClass("d-none");
+            this.gramaje350.removeClass("d-none");
+        }
+        else if (this.estucadoMate.hasClass("selected")) {
+            if (this.tapaBlanda.hasClass("selected")) {
+                this.divGramajeCubierta.removeClass("d-none");
+                this.gramaje170.addClass("d-none");
+                this.gramaje250.removeClass("d-none");
+                this.gramaje270.addClass("d-none");
+                this.gramaje300.removeClass("d-none");
+                this.gramaje350.removeClass("d-none");
+            }
+            else {
+                this.divGramajeCubierta.removeClass("d-none");
+                this.gramaje170.removeClass("d-none");
+                this.gramaje250.addClass("d-none");
+                this.gramaje270.addClass("d-none");
+                this.gramaje300.addClass("d-none");
+                this.gramaje350.addClass("d-none");
+
+                $('#gramaje170Cubierta').trigger("click");
+            }
+        }
+    }
+
+
+    #handleTamanioSolapas() {
+
+        const min = parseInt(this.tamanioSolapasCubierta[0].min);
+        const max = parseInt(this.tamanioSolapasCubierta[0].max);
+
+        if (this.tamanioSolapasCubierta.val() < min || this.tamanioSolapasCubierta.val() == '' || isNaN(this.tamanioSolapasCubierta.val())) {
+            this.tamanioSolapasCubierta.val(min);
+        }
+
+        else if (this.tamanioSolapasCubierta.val() > max)
+            this.tamanioSolapasCubierta.val(max);
+    }
+
+    #handleClickGramaje(customOption) {
+
+        const el = customOption[0];
+
+        if (el.checked) {
+            // If custom option element is radio, remove checked from the siblings (closest `.row`)
+            if (el.type === 'radio') {
+                const customRadioOptionList = [].slice.call(el.closest('.row').querySelectorAll('.custom-option'))
+                customRadioOptionList.map(function (customRadioOptionEL) {
+                    customRadioOptionEL.closest('.custom-option').classList.remove('checked')
+                })
+            }
+            el.closest('.custom-option').classList.add('checked')
+        } else {
+            el.closest('.custom-option').classList.remove('checked')
+        }
+    }
+
+    #handleInputs() {
+
+        const id = $(this).attr('id');
+        const min = parseInt($('#' + id).attr('min'));
+        const max = parseInt($('#' + id).attr('max'));
+
+        if ($('#' + id).val() < min || $('#' + id).val() == '' || isNaN($('#' + id).val())) {
+            $('#' + id).val(min);
+        }
+
+        else if ($('#' + id).val() > max)
+            $('#' + id).val(max);
+    }
+}
+
+
+export default DisenioCubierta;

httpdocs/assets/js/safekat/pages/presupuestoCliente/disenioInterior.js

@@ -0,0 +1,775 @@
+class DisenioInterior {
+
+    constructor(domItem, wizardForm, validatorStepper) {
+        this.domItem = domItem;
+
+        this.wizardStep = wizardForm.querySelector('#interior-libro');
+        this.validatorStepper = validatorStepper;
+        this.allowNext = true;
+
+        this.disenioInterior = this.domItem.find(".disenio-interior");
+        this.divPapelInterior = this.domItem.find("#divPapelInterior");
+        this.divPapelInteriorColor = this.domItem.find("#divPapelInteriorColor");
+        this.divGramajeInterior = this.domItem.find("#divGramajeInterior");
+        this.papelInterior = this.domItem.find(".papel-interior");
+
+        this.negroEstandar = this.domItem.find("#negroEstandar");
+        this.negroPremium = this.domItem.find("#negroPremium");
+        this.colorEstandar = this.domItem.find("#colorEstandar");
+        this.colorPremium = this.domItem.find("#colorPremium");
+
+        this.offsetBlanco = this.domItem.find("#offsetBlanco");
+        this.offsetAhuesado = this.domItem.find("#offsetAhuesado");
+        this.offsetAhuesadoVolumen = this.domItem.find("#offsetAhuesadoVolumen");
+        this.estucadoMate = this.domItem.find("#estucadoMate");
+
+        this.gramaje = this.domItem.find(".check-interior-gramaje");
+        this.gramaje70 = this.domItem.find("#interiorGramaje70");
+        this.gramaje80 = this.domItem.find("#interiorGramaje80");
+        this.gramaje90 = this.domItem.find("#interiorGramaje90");
+        this.gramaje100 = this.domItem.find("#interiorGramaje100");
+        this.gramaje115 = this.domItem.find("#interiorGramaje115");
+        this.gramaje120 = this.domItem.find("#interiorGramaje120");
+        this.gramaje135 = this.domItem.find("#interiorGramaje135");
+        this.gramaje150 = this.domItem.find("#interiorGramaje150");
+        this.gramaje170 = this.domItem.find("#interiorGramaje170");
+
+        this.interiorColor = this.domItem.find(".interior-color");
+        this.disenioInterior_color = this.domItem.find(".disenio-interior-color");
+        this.papelInterior_color = this.domItem.find(".papel-interior-color");
+
+        this.colorEstandar_color = this.domItem.find("#colorEstandarColor");
+        this.colorPremium_color = this.domItem.find("#colorPremiumColor");
+
+        this.offsetBlanco_color = this.domItem.find("#offsetBlancoColor");
+        this.offsetAhuesado_color = this.domItem.find("#offsetAhuesadoColor");
+        this.offsetAhuesadoVolumen_color = this.domItem.find("#offsetAhuesadoVolumenColor");
+        this.estucadoMate_color = this.domItem.find("#estucadoMateColor");
+
+        this.gramaje_color = this.domItem.find(".check-interior-color-gramaje");
+        this.gramaje70_color = this.domItem.find("#interiorGramaje70Color");
+        this.gramaje80_color = this.domItem.find("#interiorGramaje80Color");
+        this.gramaje90_color = this.domItem.find("#interiorGramaje90Color");
+        this.gramaje100_color = this.domItem.find("#interiorGramaje100Color");
+        this.gramaje115_color = this.domItem.find("#interiorGramaje115Color");
+        this.gramaje120_color = this.domItem.find("#interiorGramaje120Color");
+        this.gramaje135_color = this.domItem.find("#interiorGramaje135Color");
+        this.gramaje150_color = this.domItem.find("#interiorGramaje150Color");
+        this.gramaje170_color = this.domItem.find("#interiorGramaje170Color");
+
+        this.checksGramaje = $('.gramaje-interior');
+
+        this.initValidation();
+
+        // Creamos un nuevo observador que detecta cambios en los atributos
+        this.observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    const targetElement = mutation.target;
+                    if (targetElement.id.includes("Color"))
+                        this.#handleUpdateGramajeColor();
+                    else
+                        this.#handleUpdateGramaje();
+                }
+            });
+        });
+    }
+
+
+    init() {
+
+        const self = this;
+
+        // Eventos
+        this.disenioInterior.on('click', this.#handleDisenioInterior.bind(this));
+        this.papelInterior.on('click', this.#handlePapelInterior.bind(this));
+        this.disenioInterior_color.on('click', this.#handleDisenioInterior.bind(this));
+        this.papelInterior_color.on('click', this.#handlePapelInterior.bind(this));
+
+        // Observadores
+        this.observer.observe(this.negroEstandar[0], { attributes: true });
+        this.observer.observe(this.negroPremium[0], { attributes: true });
+        this.observer.observe(this.colorEstandar[0], { attributes: true });
+        this.observer.observe(this.colorPremium[0], { attributes: true });
+        this.observer.observe(this.offsetBlanco[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesado[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesadoVolumen[0], { attributes: true });
+        this.observer.observe(this.estucadoMate[0], { attributes: true });
+        this.observer.observe(this.colorEstandar_color[0], { attributes: true });
+        this.observer.observe(this.colorPremium_color[0], { attributes: true });
+        this.observer.observe(this.offsetBlanco_color[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesado_color[0], { attributes: true });
+        this.observer.observe(this.offsetAhuesadoVolumen_color[0], { attributes: true });
+        this.observer.observe(this.estucadoMate_color[0], { attributes: true });
+
+        this.checksGramaje.each(function () {
+
+            const customOptionEL = $(this);
+            customOptionEL.on('click', function () {
+                self.#handleClickGramaje(customOptionEL);
+            });
+        });
+
+    }
+
+
+    cargarDatos(datos, papelInteriorDiferente) {
+
+        if (papelInteriorDiferente) {
+
+            if (datos.negro) {
+                if (datos.negro.tipo.includes("Premium")) {
+                    this.negroPremium.addClass('selected');
+                }
+                else {
+                    this.negroEstandar.addClass('selected');
+                }
+
+                this.divPapelInterior.find(`[cod="${datos.negro.papel.code}"]`).addClass('selected');
+
+                setTimeout(function () {
+                    $(`#divGramajeInterior .gramaje-interior input[data-value="${datos.negro.gramaje}"]`).trigger('click');
+                }, 0);
+
+            }
+            if (datos.color) {
+                if (datos.color.tipo.includes("Premium")) {
+                    this.colorPremium_color.addClass('selected');
+                }
+                else {
+                    this.colorEstandar_color.addClass('selected');
+                }
+
+                this.divPapelInteriorColor.find(`[cod="${datos.color.papel.code}"]`).addClass('selected');
+
+                setTimeout(function () {
+                    $(`#divGramajeInteriorColor .gramaje-interior-color input[data-value="${datos.color.gramaje}"]`).trigger('click');
+                }, 0);
+            }
+
+
+        }
+        else {
+            if (datos.color) {
+                if (datos.color.tipo.includes("Premium")) {
+                    this.colorPremium.addClass('selected');
+                }
+                else {
+                    this.colorEstandar.addClass('selected');
+                }
+                this.divPapelInterior.find(`[cod="${datos.color.papel.code}"]`).addClass('selected');
+
+                setTimeout(function () {
+                    $(`#divGramajeInterior .gramaje-interior input[data-value="${datos.color.gramaje}"]`).trigger('click');
+                }, 0);
+            }
+            else {
+                if (datos.negro.tipo.includes("Premium")) {
+                    this.negroPremium.addClass('selected');
+                }
+                else {
+                    this.negroEstandar.addClass('selected');
+                }
+                // mismo papel y gramaje
+                this.divPapelInterior.find(`[cod="${datos.negro.papel.code}"]`).addClass('selected');
+
+                setTimeout(function () {
+                    $(`#divGramajeInterior .gramaje-interior input[data-value="${datos.negro.gramaje}"]`).trigger('click');
+                }, 0);
+            }
+
+        }
+
+
+    }
+
+
+    initValidation() {
+
+        const stepper = this.validatorStepper;
+
+        this.formValidation = FormValidation.formValidation(this.wizardStep, {
+            fields: {
+                div_impresion_interior: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divImpresionInterior = $('#divImpresionInterior'); // Selecciona el div
+
+                                divImpresionInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.disenio-interior.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divImpresionInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].disenio_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_papel_interior: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divPapelInterior = $('#divPapelInterior'); // Selecciona el div
+
+                                divPapelInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.papel-interior.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divPapelInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].papel_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_gramaje_interior: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divGramajeInterior = $('#divGramajeInterior'); // Selecciona el div
+                                if ($("#divGramajeInterior").hasClass("d-none")) return true;
+
+                                divGramajeInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.check-interior-gramaje:checked').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divGramajeInterior.append(`
+                                    <div class="fv-plugins-message-container invalid-feedback">
+                                        <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                            ${window.translations["validation"].gramaje_interior}
+                                        </div>
+                                    </div>
+                                `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_impresion_interior_color: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divImpresionInterior = $('#divImpresionInteriorColor'); // Selecciona el div
+                                if (divImpresionInterior.hasClass("d-none")) return true;
+
+                                divImpresionInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.disenio-interior-color.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divImpresionInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior_color" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].disenio_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_papel_interior_color: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divPapelInterior = $('#divPapelInteriorColor'); // Selecciona el div
+                                if (divPapelInterior.hasClass("d-none")) return true;
+
+                                divPapelInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.papel-interior.selected').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divPapelInterior.append(`
+                                        <div class="fv-plugins-message-container invalid-feedback">
+                                            <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                                ${window.translations["validation"].papel_interior}
+                                            </div>
+                                        </div>
+                                    `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+                div_gramaje_interior_color: {
+                    validators: {
+                        callback: {
+                            callback: function (input) {
+                                const divGramajeInterior = $('#divGramajeInteriorColor'); // Selecciona el div
+                                if ($("#divGramajeInterior").hasClass("d-none")) return true;
+
+                                divGramajeInterior.find('.fv-plugins-message-container').remove();
+                                if ($('.check-interior-gramaje:checked').length > 0) {
+                                    return true;
+                                }
+                                else {
+                                    divGramajeInterior.append(`
+                                    <div class="fv-plugins-message-container invalid-feedback">
+                                        <div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
+                                            ${window.translations["validation"].gramaje_interior}
+                                        </div>
+                                    </div>
+                                `);
+                                }
+                                return false;
+                            },
+                        }
+                    }
+                },
+            },
+            plugins: {
+                trigger: new FormValidation.plugins.Trigger(),
+                bootstrap5: new FormValidation.plugins.Bootstrap5({
+                    // Use this for enabling/changing valid/invalid class
+                    // eleInvalidClass: '',
+                    eleValidClass: '',
+                    rowSelector: function (field, ele) {
+                        // field is the field name
+                        // ele is the field element
+                        switch (field) {
+                            case 'div_impresion_interior':
+                            case 'div_papel_interior':
+                            case 'div_gramaje_interior':
+                            case 'div_impresion_interior_color':
+                            case 'div_papel_interior_color':
+                            case 'div_gramaje_interior_color':
+                                return '.col-sm-10';
+                            default:
+                                return '.col-sm-3';
+                        }
+                    }
+                }),
+                autoFocus: new FormValidation.plugins.AutoFocus(),
+                submitButton: new FormValidation.plugins.SubmitButton()
+            }
+        }).on('core.form.valid', () => {
+            if (this.allowNext)
+                stepper.next();
+        });
+    }
+
+
+
+
+    getIsHq() {
+
+        try {
+            if (this.interiorColor.filter('.d-none').length > 0) {
+                return this.disenioInterior.filter('.selected').attr('id').includes('Premium');
+            }
+
+            else if (this.disenioInterior_color.filter('.selected').length > 0) {
+                return {
+                    negro: this.disenioInterior.filter('.selected').attr('id').includes('Premium'),
+                    color: this.disenioInterior_color.filter('.selected').attr('id').includes('Premium')
+                }
+            }
+
+            return null;
+
+        } catch (e) {
+            return null;
+        }
+    }
+
+
+    getPapel(forResumen = false) {
+
+        try {
+            if (this.papelInterior.filter('.selected').length > 0) {
+
+                if (this.papelInterior_color.filter('.selected').length > 0) {
+                    if (forResumen) {
+                        return {
+                            negro: $(this.papelInterior.filter('.selected').find('.form-label')).text(),
+                            color: $(this.papelInterior_color.filter('.selected').find('.form-label')).text(),
+                        }
+                    }
+                    else {
+                        return {
+                            negro: this.papelInterior.filter('.selected').attr('cod'),
+                            color: this.papelInterior_color.filter('.selected').attr('cod')
+                        }
+                    }
+
+                }
+                if (this.interiorColor.filter('.d-none').length > 0) {
+                    if (forResumen) {
+                        return $(this.papelInterior.filter('.selected').find('.form-label')).text();
+                    }
+                    else {
+                        return this.papelInterior.filter('.selected').attr('cod')
+                    }
+                }
+
+                else
+                    return null;
+            }
+            return null;
+        }
+        catch (e) {
+            return null;
+        }
+    }
+
+    getGramaje() {
+
+        try {
+            if (this.interiorColor.filter('.d-none').length == 0) {
+                let values = {
+                    negro: this.gramaje.filter(':checked').attr('data-value'),
+                    color: this.gramaje_color.filter(':checked').attr('data-value')
+                }
+                if (values.negro && values.color) {
+                    return values;
+                }
+                else return null;
+            }
+            else {
+                return this.gramaje.filter(':checked').attr('data-value');
+            }
+
+        } catch (e) {
+            return null;
+        }
+    }
+
+
+    #handleClickGramaje(customOption) {
+
+        const el = customOption[0];
+
+        if (el.checked) {
+            // If custom option element is radio, remove checked from the siblings (closest `.row`)
+            if (el.type === 'radio') {
+                const customRadioOptionList = [].slice.call(el.closest('.row').querySelectorAll('.custom-option'))
+                customRadioOptionList.map(function (customRadioOptionEL) {
+                    customRadioOptionEL.closest('.custom-option').classList.remove('checked')
+                })
+            }
+            el.closest('.custom-option').classList.add('checked')
+        } else {
+            el.closest('.custom-option').classList.remove('checked')
+        }
+    }
+
+
+    #handleDisenioInterior(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.disenio-interior';
+        if (element[0].closest('.image-container').id.includes('Color'))
+            class2Find = '.disenio-interior-color';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+
+        // Para recalcular el presupuesto
+        element.trigger('change');
+    }
+
+
+    #handlePapelInterior(event) {
+        // Accede al ID del elemento que disparó el evento
+        const element = $(event.target);
+
+        let class2Find = '.papel-interior';
+        if (element[0].closest('.image-container').id.includes('Color'))
+            class2Find = '.papel-interior-color';
+
+        let containers = element.closest(class2Find).parent().find(class2Find);
+        for (let container of containers) {
+            if (container != element.closest(class2Find)[0]) {
+                $(container).removeClass('selected');
+                $(container).find('.image-presupuesto').removeClass('selected');
+            }
+        }
+
+        element.closest(class2Find).toggleClass('selected');
+        element.closest('.image-presupuesto').toggleClass('selected');
+
+        if ($('#fresado').hasClass('selected')) {
+            if (this.estucadoMate.hasClass('selected') || this.estucadoMate_color.hasClass('selected')) {
+                $('#tapaDuraLomoRedondo').addClass('d-none');
+            }
+            else {
+                $('#tapaDuraLomoRedondo').removeClass('d-none');
+            }
+        }
+
+        // Para recalcular el presupuesto
+        element.trigger('change');
+    }
+
+    #handleUpdateGramaje() {
+
+        let showGramaje = false;
+
+        $(".check-interior-gramaje ").prop("checked", false);
+        $(".check-interior-color-gramaje ").prop("checked", false);
+
+        if (this.negroEstandar.hasClass("selected") || this.colorEstandar.hasClass("selected")) {
+
+            if (this.offsetBlanco.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.removeClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
+                this.gramaje70.removeClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.addClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.removeClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        else if (this.negroPremium.hasClass("selected") || this.colorPremium.hasClass("selected")) {
+
+            if (this.offsetBlanco.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.removeClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.removeClass("d-none");
+                this.gramaje170.removeClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.removeClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.removeClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.addClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.addClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.addClass("d-none");
+                this.gramaje150.addClass("d-none");
+                this.gramaje170.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate.hasClass("selected")) {
+                this.gramaje70.addClass("d-none");
+                this.gramaje80.addClass("d-none");
+                this.gramaje90.removeClass("d-none");
+                this.gramaje100.addClass("d-none");
+                this.gramaje115.removeClass("d-none");
+                this.gramaje120.addClass("d-none");
+                this.gramaje135.removeClass("d-none");
+                this.gramaje150.removeClass("d-none");
+                this.gramaje170.removeClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        if ($("#divGramajeInterior").hasClass("d-none") && showGramaje) {
+            $("#divGramajeInterior").removeClass("d-none");
+        }
+        else if (!showGramaje) {
+            $("#divGramajeInterior").addClass("d-none");
+        }
+    }
+
+
+    #handleUpdateGramajeColor() {
+
+        let showGramaje = false;
+
+        $(".check-interior-color-gramaje ").prop("checked", false);
+
+        if (this.colorEstandar_color.hasClass("selected")) {
+
+            if (this.offsetBlanco_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.removeClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen_color.hasClass("selected")) {
+                this.gramaje70_color.removeClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.addClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.removeClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        else if (this.colorPremium_color.hasClass("selected")) {
+
+            if (this.offsetBlanco_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.removeClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.removeClass("d-none");
+                this.gramaje170_color.removeClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesado_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.removeClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.removeClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.offsetAhuesadoVolumen_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.addClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.addClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.addClass("d-none");
+                this.gramaje150_color.addClass("d-none");
+                this.gramaje170_color.addClass("d-none");
+                showGramaje = true;
+            }
+            else if (this.estucadoMate_color.hasClass("selected")) {
+                this.gramaje70_color.addClass("d-none");
+                this.gramaje80_color.addClass("d-none");
+                this.gramaje90_color.removeClass("d-none");
+                this.gramaje100_color.addClass("d-none");
+                this.gramaje115_color.removeClass("d-none");
+                this.gramaje120_color.addClass("d-none");
+                this.gramaje135_color.removeClass("d-none");
+                this.gramaje150_color.removeClass("d-none");
+                this.gramaje170_color.removeClass("d-none");
+                showGramaje = true;
+            }
+        }
+
+        if ($("#divGramajeInteriorColor").hasClass("d-none") && showGramaje) {
+            $("#divGramajeInteriorColor").removeClass("d-none");
+        }
+        else if (!showGramaje) {
+            $("#divGramajeInteriorColor").addClass("d-none");
+        }
+    }
+}
+
+
+export default DisenioInterior;

httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js

@@ -0,0 +1,715 @@
+import DatosGenerales from './datosGenerales.js';
+import DisenioInterior from './disenioInterior.js';
+import DisenioCubierta from './disenioCubierta.js';
+import Direcciones from './direcciones.js';
+import Resumen from './resumen.js';
+import Ajax from '../../components/ajax.js';
+
+
+import tarjetaTiradasPrecio from './tarjetaTiradasPrecio.js';
+
+class PresupuestoCliente {
+
+    constructor() {
+        this.clientePresupuestoWizard = document.querySelector('#wizard-presupuesto-cliente');
+
+        this.validationStepper = new Stepper(this.clientePresupuestoWizard, {
+            linear: true
+        });
+
+        this.btnNext = $('#btnNext');
+        this.btnPrev = $('#btnPrev');
+        this.btnPrint = $('#btnPrint');
+        this.btnSave = $('#btnSave');
+        this.btnConfirm = $('#btnConfirm');
+
+        this.c = $("#c");
+        this.lc = $("#lc");
+        this.lsc = $("#lsc");
+
+        this.datosGenerales = new DatosGenerales($("#datos-generales"), this.clientePresupuestoWizard, this.validationStepper);
+        this.disenioInterior = new DisenioInterior($("#interior-libro"), this.clientePresupuestoWizard, this.validationStepper);
+        this.disenioCubierta = new DisenioCubierta($("#cubierta-libro"), this.clientePresupuestoWizard, this.validationStepper);
+        this.direcciones = new Direcciones($("#direcciones-libro"), this.clientePresupuestoWizard, this.validationStepper);
+        this.resumen = new Resumen($("#resumen-libro"), this.datosGenerales, this.disenioInterior, this.disenioCubierta, this.direcciones);
+
+        this.divTiradasPrecios = $("#divTiradasPrecio");
+
+        this.titulosMenu = $(".titulos-menu");
+
+        this.datos = {};
+        this.ajax_calcular = new Ajax('/presupuestocliente/calcular',
+            {}, this.datos,
+            this.#procesarPresupuesto.bind(this),
+            () => { $('#loader').modal('hide'); });
+
+        this.actualizarTiradasEnvio = false;
+        this.calcularPresupuesto = false;
+    }
+
+
+    init() {
+
+        // Fuerza el foco en el campo de búsqueda de select2
+        $(document).on('select2:open', () => {
+            document.querySelector('.select2-search__field').focus();
+        });
+
+        this.validationStepper._element.addEventListener('shown.bs-stepper', this.stepperHandler.bind(this));
+
+        this.datosGenerales.init();
+        this.disenioInterior.init();
+        this.disenioCubierta.init();
+        this.direcciones.init();
+        if (window.location.href.includes("edit")) {
+            this.resumen.init(window.location.href.split("/").pop());
+        }
+        else {
+            this.resumen.init();
+        }
+        
+
+        if (this.datosGenerales.excluirRotativa.length == 0) {
+
+            this.direcciones.direccionesCliente.setParams({ 'cliente_id': $("#clienteId").val() })
+        }
+
+
+        this.btnNext.on('click', this.#nextStep.bind(this));
+        this.btnPrev.on('click', this.#prevtStep.bind(this));
+        this.btnSave.on('click', this.#savePresupuesto.bind(this));
+        this.btnConfirm.on('click', this.#confirmPresupuesto.bind(this));
+
+        this.titulosMenu.on('click', this.#handleTitulosMenu.bind(this));
+
+        if (window.location.href.includes("edit")) {
+
+            this.#cargarPresupuesto();
+            const successMessage = sessionStorage.getItem('message');
+            if (successMessage) {
+                popSuccessAlert(successMessage);
+                sessionStorage.removeItem('message');
+            }
+        }
+        else {
+            this.calcularPresupuesto = true;
+        }
+
+        $(".calcular-presupuesto").on('change', this.checkForm.bind(this));
+    }
+
+
+    #checkTiradas() {
+
+        let tiradas = [parseInt(this.datosGenerales.tirada1.val())];
+
+        if (this.datosGenerales.tirada2.val().length > 0 &&
+            Number.isInteger(parseInt(this.datosGenerales.tirada2.val())) &&
+            parseInt(this.datosGenerales.tirada2.val()) > 0 &&
+            this.datosGenerales.tirada2.val() != "") {
+
+            tiradas.push(parseInt(this.datosGenerales.tirada2.val()));
+        }
+        if (this.datosGenerales.tirada3.val().length > 0 &&
+            Number.isInteger(parseInt(this.datosGenerales.tirada3.val())) &&
+            parseInt(this.datosGenerales.tirada3.val()) > 0 &&
+            this.datosGenerales.tirada3.val() != "") {
+
+            tiradas.push(parseInt(this.datosGenerales.tirada3.val()));
+        }
+        if (this.datosGenerales.tirada4.val().length > 0 &&
+            Number.isInteger(parseInt(this.datosGenerales.tirada4.val())) &&
+            parseInt(this.datosGenerales.tirada4.val()) > 0 &&
+            this.datosGenerales.tirada4.val() != "") {
+
+            tiradas.push(parseInt(this.datosGenerales.tirada4.val()));
+        }
+
+        const noPOD = (tiradas.some(tirada => parseInt(tirada) > 30));
+        const siPOD = (tiradas.some(tirada => parseInt(tirada) <= 30));
+
+        this.datosGenerales.formValidation.validateField('tirada');
+        return !(noPOD && siPOD);
+    }
+
+
+    checkForm(event) {
+
+        if (!this.#checkTiradas()) {
+            return;
+        }
+
+        if (this.calcularPresupuesto) {
+
+            if (event.target.id === 'divDirecciones') {
+                if (!this.direcciones.calcularPresupuesto) {
+                    this.actualizarTiradasEnvio = false;
+                    $('#loader').modal('hide');
+                    return;
+                }
+
+            }
+            else {
+                this.actualizarTiradasEnvio = true;
+                this.direcciones.divTiradas.empty();
+            }
+
+            this.#getDatos();
+
+            this.divTiradasPrecios.empty();
+
+            let datos_to_check = { ...this.datos };
+            if (datos_to_check.direcciones) {
+                delete datos_to_check.direcciones;
+            }
+            if (datos_to_check.posPaginasColor == "" || datos_to_check.posPaginasColor == null) {
+                delete datos_to_check.posPaginasColor;
+            }
+            if (datos_to_check.cubierta.acabados.barniz == undefined) {
+                delete datos_to_check.cubierta.acabados.barniz;
+            }
+            if (datos_to_check.cubierta.acabados.plastificado == undefined) {
+                delete datos_to_check.cubierta.acabados.plastificado;
+            }
+            if (datos_to_check.cubierta.acabados.estampado == undefined) {
+                delete datos_to_check.cubierta.acabados.estampado;
+            }
+            if (datos_to_check.sobrecubierta.plastificado == undefined) {
+                delete datos_to_check.sobrecubierta.plastificado;
+            }
+
+            if (Object.values(datos_to_check).every(this.#isValidDataForm)) {
+                try {
+                    setTimeout(function () {
+                        $('#loader').modal('show');
+                    }, 0);
+
+                    // Si se está ejecutando la petición, abortar la petición anterior
+                    this.ajax_calcular.abort();
+
+                    this.ajax_calcular.setData(this.datos);
+                    this.ajax_calcular.post();
+                    this.direcciones.calcularPresupuesto = false;
+                }
+                catch (e) {
+                    console.log(e);
+                    $('#loader').modal('hide');
+                }
+
+            }
+        }
+    }
+
+
+    #handleTitulosMenu(event) {
+
+        $('.titulos-menu').removeClass('crossed');
+
+        const nextElement = $(event.target).attr('data-target')
+        const currentElement = $('.dstepper-block.active').attr('id');
+
+        if (currentElement === nextElement) {
+            return;
+        }
+
+        if (currentElement !== 'resumen-libro') {
+            this.#validateCurrentForm(currentElement, nextElement);
+        }
+        else {
+            this.#goToForm(nextElement);
+        }
+    }
+
+    #goToForm(form) {
+
+        switch (form) {
+            case '#datos-generales':
+                this.validationStepper.to(1);
+                break;
+
+            case '#interior-libro':
+                this.validationStepper.to(2);
+                break;
+
+            case '#cubierta-libro':
+                this.validationStepper.to(3);
+                break;
+
+            case '#direcciones-libro':
+                this.validationStepper.to(4);
+                break;
+
+            case '#resumen-libro':
+                this.validationStepper.to(5);
+                break;
+
+            default:
+                break;
+        }
+    }
+
+
+    #validateCurrentForm(form, nextForm) {
+
+        switch (form) {
+            case 'datos-generales':
+                this.datosGenerales.allowNext = false;
+                validateForm(this.datosGenerales.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.datosGenerales.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.datosGenerales.allowNext = true;
+                    return true;
+                }).catch(error => {
+                    this.datosGenerales.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            case 'interior-libro':
+                this.disenioInterior.allowNext = false;
+                validateForm(this.disenioInterior.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.disenioInterior.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.disenioInterior.allowNext = true;
+                    return true;
+                }
+                ).catch(error => {
+                    this.disenioInterior.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            case 'cubierta-libro':
+                this.disenioCubierta.allowNext = false;
+                validateForm(this.disenioCubierta.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.disenioCubierta.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.disenioCubierta.allowNext = true;
+                    return true;
+                }
+                ).catch(error => {
+                    this.disenioCubierta.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            case 'direcciones-libro':
+                this.direcciones.allowNext = false;
+                validateForm(this.direcciones.formValidation).then((status) => {
+                    if (status !== 'Valid') {
+                        this.direcciones.allowNext = true;
+                        return false;
+                    }
+                    this.#goToForm(nextForm);
+                    this.direcciones.allowNext = true;
+                    return true;
+                }
+                ).catch(error => {
+                    this.direcciones.allowNext = true;
+                    console.error('Error al validar:', error);
+                    return false;
+                });
+                break;
+
+            default:
+                return false;
+        }
+    }
+
+
+
+
+    stepperHandler() {
+
+        const element = $('.fv-plugins-bootstrap5.fv-plugins-framework.active');
+
+        switch (element.attr('id')) {
+            case 'datos-generales':
+                this.btnPrev.addClass('d-none');
+                this.btnNext.removeClass('d-none');
+                this.btnPrint.addClass('d-none');
+                this.btnSave.addClass('d-none');
+                this.btnConfirm.addClass('d-none');
+                break;
+
+            case 'interior-libro':
+            case 'cubierta-libro':
+            case 'direcciones-libro':
+                this.btnPrev.removeClass('d-none');
+                this.btnNext.removeClass('d-none');
+                this.btnPrint.addClass('d-none');
+                this.btnSave.addClass('d-none');
+                this.btnConfirm.addClass('d-none');
+                break;
+
+            case 'resumen-libro':
+                this.btnPrev.removeClass('d-none');
+                this.btnNext.addClass('d-none');
+                this.btnPrint.removeClass('d-none');
+                this.btnSave.removeClass('d-none');
+                this.btnConfirm.removeClass('d-none');
+                this.resumen.generate();
+                break;
+
+            default:
+                break;
+        }
+    }
+
+
+    #confirmPresupuesto() {
+
+        this.#solicitudGuardarPresupuesto(true);
+    }
+
+
+    #savePresupuesto() {
+
+        this.#solicitudGuardarPresupuesto(false);
+    }
+
+
+    #solicitudGuardarPresupuesto(confirmar = false) {
+
+        this.#getDatos(true);
+
+        if (confirmar) {
+            this.datos["confirmar"] = 1;
+        }
+
+
+        try {
+            $('#loader').modal('show');
+
+            if (window.location.href.includes("edit")) {
+                this.datos["id"] = window.location.href.split("/").pop();
+            }
+            new Ajax('/presupuestocliente/guardar',
+                this.datos,
+                {},
+                (response) => {
+                    $('#loader').modal('hide');
+                    if (this.datos["confirmar"] || window.location.href.includes("add")) {
+                        if (response.status) {
+                            sessionStorage.setItem('message', response.message);
+                            window.location.href = response.url + '/' + response.status;
+                        }
+                        else {
+                            popErrorAlert("No se ha podido guardar el presupuesto. Por favor, póngase en contacto con el departamento comercial.");
+                        }
+                    }
+                    else {
+                        if (response.error) {
+                            popErrorAlert("No se ha podido guardar el presupuesto. Por favor, póngase en contacto con el departamento comercial.");
+                        }
+                        else
+                            popSuccessAlert(response.message);
+                    }
+                },
+                () => { $('#loader').modal('hide'); }
+            ).post();
+
+        }
+        catch (e) {
+            console.log(e);
+            $('#loader').modal('hide');
+        }
+    }
+
+
+    #procesarPresupuesto(response) {
+
+        $('#loader').modal('hide');
+
+        if (response === null || response === undefined || response === "") {
+            popErrorAlert("No se ha podido calcular el presupuesto para los datos proporcionados. Por favor, póngase en contacto con el departamento comercial."
+                , "sk-alert-2", false);
+            return;
+        }
+        if (Object.values(response.errors).some((value) => value !== "")) {
+            if (response.errors.status == 1) {
+                popErrorAlert("No se ha podido calcular el presupuesto para los datos proporcionados. Por favor, póngase en contacto con el departamento comercial."
+                    , "sk-alert-2", false);
+                return;
+            }
+        }
+
+        popAlert2Hide();
+
+
+        if (response.tiradas && response.tiradas.length) {
+
+            let tiradas = { ...response.tiradas };
+            tiradas = Object.keys(tiradas).map((key) => tiradas[key]);
+            tiradas.sort((a, b) => a - b);
+            this.divTiradasPrecios.empty();
+
+            for (let i = 0; i < tiradas.length; i++) {
+                new tarjetaTiradasPrecio(
+                    this.divTiradasPrecios,
+                    ('precio-tiradas-' + response.tiradas[i]),
+                    tiradas[i],
+                    (parseFloat(response.precio_u[i]) * parseInt(tiradas[i])).toFixed(2),
+                    response.precio_u[i]
+                );
+
+                if (this.actualizarTiradasEnvio)
+                    this.direcciones.insertTirada(tiradas[i]);
+
+            }
+            this.lc.val(parseFloat(response.info.lomo_cubierta).toFixed(2));
+            this.lsc.val(parseFloat(response.info.lomo_sobrecubierta).toFixed(2));
+            setTimeout(() => {
+                $(`#containerTiradasEnvios .tirada-envio input[tirada="${response.tiradas[0]}"]`).trigger('click');
+            }, 0);
+        }
+        $('#loader').modal('hide');
+        // DEBUG
+        //console.log(response);
+    }
+
+
+    #nextStep() {
+
+        switch (this.validationStepper._currentIndex) {
+            case 0:
+                this.datosGenerales.formValidation.validate();
+                break;
+
+            case 1:
+                this.disenioInterior.formValidation.validate();
+                break;
+
+
+            case 2:
+                this.disenioCubierta.formValidation.validate();
+                break;
+
+            case 3:
+                this.direcciones.formValidation.validate();
+                break;
+
+            default:
+                break;
+        }
+    }
+
+
+    #prevtStep() {
+        if (this.validationStepper._currentIndex >= 1 && this.validationStepper._currentIndex <= 4) {
+            this.validationStepper.previous();
+        }
+    }
+
+
+    #getDatos(save = false) {
+
+        this.datos = {
+
+            clienteId: this.datosGenerales.getCliente(),
+
+            tamanio: this.datosGenerales.getDimensionLibro(),
+            tirada: this.datosGenerales.getTiradas(),
+            paginas: this.datosGenerales.paginas.val(),
+            paginasColor: this.datosGenerales.paginasColor.val(),
+            posPaginasColor: this.datosGenerales.posPaginasColor.val(),
+            pagColorConsecutivas: this.datosGenerales.pagColorConsecutivas.is(':checked') ? 1 : 0,
+            papelInteriorDiferente: this.datosGenerales.papelDiferente.is(':checked') ? 1 : 0,
+            paginasCuadernillo: this.datosGenerales.paginasCuadernillo.val(),
+
+            tipo: this.datosGenerales.tiposLibro.filter('.selected').attr('id'),
+            prototipo: this.datosGenerales.prototipo.is(':checked') ? 1 : 0,
+
+            isColor: this.datosGenerales.getIsColor() ? 1 : 0,
+            isHq: this.disenioInterior.getIsHq() ? 1 : 0,
+
+            interior: {
+                papelInterior: this.disenioInterior.getPapel(),
+                gramajeInterior: this.disenioInterior.getGramaje(),
+
+            },
+
+            cubierta: {
+                tipoCubierta: this.disenioCubierta.disenioCubierta.filter('.selected').attr('id'),
+                papelCubierta: this.disenioCubierta.getPapel(),
+                gramajeCubierta: this.disenioCubierta.getGramaje(),
+                cabezada: this.disenioCubierta.getCabezada(),
+                acabados: this.disenioCubierta.getAcabados(),
+                carasImpresion: this.disenioCubierta.carasCubierta.val(),
+            },
+
+            guardas: this.disenioCubierta.getGuardas(),
+            sobrecubierta: this.disenioCubierta.getSobrecubierta(),
+            faja: this.disenioCubierta.getFaja(),
+
+            excluirRotativa: this.datosGenerales.excluirRotativa.is(':checked') ? 1 : 0,
+            ivaReducido: this.datosGenerales.ivaReducido.find('option:selected').val(),
+            servicios: {
+                'prototipo': this.datosGenerales.prototipo.is(':checked') ? 1 : 0,
+            },
+        };
+        let lomoRedondo = 0;
+        if (this.disenioCubierta.disenioCubierta.filter('.selected').length > 0)
+            lomoRedondo = this.disenioCubierta.disenioCubierta.filter('.selected').attr('id').includes('Redondo') ? 1 : 0;
+        this.datos.cubierta.lomoRedondo = lomoRedondo;
+
+        if (this.datos.tipo == "cosido") {
+            this.datos.paginasCuadernillo = this.datosGenerales.paginasCuadernillo.val();
+        }
+        let solapasCubierta = this.disenioCubierta.getSolapasCubierta();
+        if (solapasCubierta !== null && solapasCubierta !== undefined) {
+
+            if (solapasCubierta === false)
+                this.datos.cubierta.solapas = 0;
+            else {
+                this.datos.cubierta.solapas = 1;
+                this.datos.cubierta.tamanioSolapas = solapasCubierta;
+            }
+        }
+        else {
+            this.datos.cubierta.solapas = 0;
+        }
+
+        if (this.direcciones.direcciones.length > 0) {
+            this.datos.direcciones = [];
+            for (let i = 0; i < this.direcciones.direcciones.length; i++) {
+                this.datos.direcciones.push(this.direcciones.direcciones[i].getFormData());
+            };
+        }
+
+        if (save) {
+            this.datos.datosCabecera = {
+                titulo: this.datosGenerales.titulo.val(),
+                autor: this.datosGenerales.autor.val(),
+                isbn: this.datosGenerales.isbn.val(),
+                coleccion: this.datosGenerales.coleccion.val(),
+                referenciaCliente: this.datosGenerales.referenciaCliente.val(),
+            }
+            this.datos.selectedTirada = this.direcciones.getSelectedTirada();
+        }
+
+        if (window.location.href.includes("edit")) {
+            this.datos["id"] = window.location.href.split("/").pop();
+        }
+    }
+
+
+    #cargarPresupuesto() {
+
+        $('#loader').modal('show');
+        let id = window.location.href.split("/").pop()
+        new Ajax('/presupuestocliente/cargar/' + id,
+            {},
+            {},
+            (response) => {
+
+                if (response.status === 1) {
+
+                    this.lc.val(parseFloat(response.data.lc).toFixed(2));
+                    this.lsc.val(parseFloat(response.data.lsc).toFixed(2));
+
+                    this.calcularPresupuesto = false;
+
+                    this.datosGenerales.cargarDatos(response.data.datosGenerales);
+                    this.direcciones.handleChangeCliente();
+                    
+                    this.disenioInterior.cargarDatos(response.data.interior, response.data.datosGenerales.papelInteriorDiferente);
+                    this.disenioCubierta.cargarDatos(response.data.cubierta, response.data.guardas, response.data.sobrecubierta);
+                    this.direcciones.cargarDatos(response.data.direcciones, response.data.datosGenerales);
+
+                    setTimeout(() => {
+
+                        $('#loader').modal('hide');
+
+                        if (response.data.state != 2) {
+
+                            this.calcularPresupuesto = true;
+                            this.checkForm({ target: { id: 'tirada' } });
+                        }
+                        else {
+                            $('#menu_resumen_button').trigger('click');
+                            setTimeout(() => {
+                                this.resumen.init_dropzone();
+                                this.resumen.generate_total(response.data.resumen.base, response.data.resumen.precio_unidad);
+                            }, 0);
+                        }
+                    }, 0);
+                }
+            },
+            () => {
+                $('#loader').modal('hide');
+                this.calcularPresupuesto = true;
+            }
+        ).get();
+    }
+
+
+    #isValidDataForm(value) {
+        if (value === null || value === undefined || value === '') {
+            return false;
+        }
+        if (typeof value === 'object' && value !== null) {
+            const isValidData = Object.values(value).every(isValid);
+            return isValidData;
+        }
+        return true;
+    }
+}
+
+
+async function validateForm(formValidation) {
+    try {
+        const validationResult = await formValidation.validate();
+        return validationResult;
+    } catch (error) {
+        console.error('Error durante la validación:', error);
+        throw error;
+    }
+}
+
+
+function isValid(value) {
+    if (value === null || value === undefined || value === '') {
+        return false;
+    }
+    if (typeof value === 'object' && value !== null) {
+        return Object.values(value).every(isValid);
+    }
+    return true;
+}
+
+
+function initialize(translations) {
+
+    window.translations = JSON.parse(translations);
+
+    let presupuestoCliente = new PresupuestoCliente();
+    presupuestoCliente.init();
+}
+
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const locale = document.querySelector('meta[name="locale"]').getAttribute('content');
+
+    new Ajax('/translate/getTranslation', { locale: locale, translationFile: 'Presupuestos' }, {},
+        initialize,
+        function (error) {
+            console.log("Error getting translations:", error);
+        }
+    ).post();
+
+});
+

httpdocs/assets/js/safekat/pages/presupuestoCliente/resumen.js

@@ -0,0 +1,363 @@
+import previewFormas from "../preview.js";
+
+class Resumen {
+    constructor(domItem, datosGenerales, disenioInterior, disenioCubierta) {
+
+        this.domItem = domItem;
+
+        this.datosGenerales = datosGenerales;
+        this.disenioInterior = disenioInterior;
+        this.disenioCubierta = disenioCubierta;
+
+        this.titulo = $(this.domItem.find("#resumenTitulo"));
+        this.tipoLibro = $(this.domItem.find("#resumenTipoLibro"));
+        this.formato = $(this.domItem.find("#resumenFormato"));
+        this.paginas = $(this.domItem.find("#resumenPaginas"));
+        this.paginasColor = $(this.domItem.find("#resumenPaginasColor"));
+        this.paginasNegro = $(this.domItem.find("#resumenPaginasNegro"));
+        this.tirada = $(this.domItem.find("#resumenTirada"));
+        this.prototipo = $(this.domItem.find("#resumenPrototipo"));
+
+        this.impresionInterior = $(this.domItem.find("#resumenImpresion"));
+        this.papelInterior = $(this.domItem.find("#resumenPapelInterior"));
+        this.gramajeInterior = $(this.domItem.find("#resumenGramajeInterior"));
+        this.papelInteriorColor = $(this.domItem.find("#resumenPapelInteriorColor"));
+        this.gramajeInteriorColor = $(this.domItem.find("#resumenGramajeInteriorColor"));
+        this.papelInteriorNegro = $(this.domItem.find("#resumenPapelInteriorNegro"));
+        this.gramajeInteriorNegro = $(this.domItem.find("#resumenGramajeInteriorNegro"));
+
+        this.cubiertaTipo = $(this.domItem.find("#resumenCubiertaTipo"));
+        this.itemsCubiertaTapaBlanda = $(this.domItem.find(".cubierta-tapa-blanda"));
+        this.itemsCubiertaTapaDura = $(this.domItem.find(".cubierta-tapa-dura"));
+        this.carasCubierta = $(this.domItem.find("#resumenCarasCubierta"));
+        this.papelCubierta = $(this.domItem.find("#resumenPapelCubierta"));
+        this.gramajeCubierta = $(this.domItem.find("#resumenGramajeCubierta"));
+        this.solapasCubierta = $(this.domItem.find("#resumenSolapasCubierta"));
+        this.papelGuardas = $(this.domItem.find("#resumenPapelGuardas"));
+        this.guardasImpresas = $(this.domItem.find("#resumenGuardasImpresas"));
+        this.cabezada = $(this.domItem.find("#resumenCabezada"));
+        this.cubiertaAcabados = $(this.domItem.find("#resumenCubiertaAcabados"));
+
+        this.divSobrecubierta = $(this.domItem.find("#divResumenSobrecubierta"));
+        this.papelSobrecubierta = $(this.domItem.find("#resumenPapelSobrecubierta"));
+        this.gramajeSobrecubierta = $(this.domItem.find("#resumenGramajeSobrecubierta"));
+        this.solapasSobrecubierta = $(this.domItem.find("#resumenSolapaSobrecubierta"));
+        this.plastificadoSobrecubierta = $(this.domItem.find("#resumenPlastificadoSobreCubierta"));
+
+        this.precio_unidad = $(this.domItem.find("#resumenPrecioU"));
+        this.total_base = $(this.domItem.find("#resumenTotalBase"));
+        this.iva_porcentaje = $(this.domItem.find("#resumenIvaPorcentaje"));
+        this.iva = $(this.domItem.find("#resumenIva"));
+        this.total = $(this.domItem.find("#resumenTotal"));
+
+        this.divPreview = $(this.domItem.find("#pv_ec_shape"));
+        this.btnPreviewCubierta = $(this.domItem.find("#btnPreviewCubierta"));
+
+        this.submitFiles = $(this.domItem.find("#submit-all-files"));
+
+        this.dropzone = null;
+        this.presupuesto_id = -1;
+    }
+
+
+    init(presupuesto_id = -1) {
+
+        this.btnPreviewCubierta.on('click', this.#btnPreview.bind(this));
+
+        this.submitFiles.on('click', this.#btnUploadFiles.bind(this));
+
+        if (presupuesto_id != -1) {
+            this.presupuesto_id = presupuesto_id;
+        }
+    }
+
+    init_dropzone() {
+
+        let id = this.presupuesto_id;
+        Dropzone.autoDiscover = false;
+
+        const previewTemplate = `<div class="dz-preview dz-file-preview">
+        <div class="dz-details">
+        <div class="dz-thumbnail">
+            <!---<img data-dz-thumbnail>
+            <span class="dz-nopreview">No preview</span> --->
+            <div class="dz-success-mark"></div>
+            <div class="dz-error-mark"></div>
+            <div class="dz-error-message"><span data-dz-errormessage></span></div>
+            <div class="progress">
+            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
+            </div>
+        </div>
+        <div class="dz-filename" data-dz-name></div>
+        <div class="dz-size" data-dz-size></div>
+        </div>
+        </div>`;
+
+        this.dropzone = new Dropzone('#dropzone-multi', {
+            url: "/presupuestos/presupuestocliente/upload_files",
+            addRemoveLinks: true,
+            previewTemplate: previewTemplate,
+            paramName: "file",
+            uploadMultiple: true,
+            parallelUploads: 4, // Ajusta este número al máximo número de archivos que esperas subir a la vez
+            maxFiles: 5, // Ajusta este número al máximo número de archivos que esperas subir a la vez
+            autoProcessQueue: true,
+            dictRemoveFile: "Eliminar",
+            acceptedFiles: 'image/*, application/pdf',
+            maxFilesize: 5e+7, // Bytes
+            init: function () {
+                let thisDropzone = this;
+                $('#loader').show();
+
+                $.ajax({
+                    url: "/presupuestos/presupuestocliente/get_files",
+                    type: 'POST',
+                    data: { presupuesto_id: id }
+
+                }).done(function (response) {
+                    if (response == null || response == "") {
+                        return;
+                    }
+                    let values = JSON.parse(response);
+                    for (var i = 0; i < values.length; i++) {
+                        var mockFile = { name: values[i].name, size: values[i].size, hash: values[i].hash };
+
+                        thisDropzone.files.push(mockFile);    // add to files array
+                        thisDropzone.emit("addedfile", mockFile);
+                        thisDropzone.emit("thumbnail", mockFile, window.location.host + "/sistema/intranet/presupuestos/" + values[i].hash);
+                        thisDropzone.emit("complete", mockFile);
+                        thisDropzone.options.success.call(thisDropzone, mockFile);
+                    };
+                }).always(function () {
+                    $('#loader').hide();
+                });
+
+                this.on("addedfile", function (file) {
+                    if (file.hash) {
+                        var viewButton = Dropzone.createElement("<span class='dz-remove'>Ver</span>");
+                        file.previewElement.appendChild(viewButton);
+                        // Listen to the view button click event
+                        viewButton.addEventListener("click", function (e) {
+
+                            window.open(window.location.protocol + "//" + window.location.host + "/sistema/intranet/presupuestos/" + file.hash, '_blank');
+                        });
+                    }
+                });
+            },
+        });
+    }
+
+    #btnUploadFiles() {
+
+        var files = this.dropzone.files;
+        $('#loader').show();
+
+        var formData = new FormData();
+        var oldFiles = [];
+        var counter = 0;
+        for (var i = 0; i < files.length; i++) {
+
+            if (files[i].upload) {
+                var file = files[i];
+                formData.append('file[' + counter + ']', file);
+                counter += 1;
+            }
+            else {
+                oldFiles.push(files[i].name);
+            }
+        }
+        formData.append('oldFiles', JSON.stringify(oldFiles));
+
+        formData.append('presupuesto_id', this.presupuesto_id);
+
+        $.ajax({
+            url: "/presupuestos/presupuestocliente/upload_files",
+            type: 'POST',
+            data: formData,
+            processData: false,  // Indicar a jQuery que no procese los datos
+            contentType: false   // Indicar a jQuery que no establezca el tipo de contenido
+        }).done(function (response) {
+            popSuccessAlert("Archivos actualizados correctamente");
+        }).always(function () {
+            $('#loader').hide();
+        });
+    }
+
+
+    #btnPreview() {
+
+        if (this.divPreview.hasClass('d-none')) {
+            this.btnPreviewCubierta.text('Ocultar desarrollo cubierta');
+            this.divPreview.removeClass('d-none');
+            this.generate();
+        }
+        else {
+            this.btnPreviewCubierta.text('Mostrar desarrollo cubierta');
+            this.divPreview.addClass('d-none');
+        }
+    }
+
+
+    generate() {
+
+        this.titulo.text(this.datosGenerales.titulo.val());
+        this.tipoLibro.text(this.#capitalizeFirstLetter(this.datosGenerales.tiposLibro.filter('.selected').attr('id')));
+
+        let ancho = 0, alto = 0;
+        if (this.datosGenerales.checkFormatoPersonalizado.is(':checked')) {
+            ancho = parseFloat(this.datosGenerales.anchoPersonalizado.val());
+            alto = parseFloat(this.datosGenerales.altoPersonalizado.val());
+            this.formato.text(ancho + ' x ' + alto);
+        }
+
+        else {
+            ancho = parseFloat(this.datosGenerales.papelFormatoId.find('option:selected').text().split(" x ")[0]);
+            alto = parseFloat(this.datosGenerales.papelFormatoId.find('option:selected').text().split(" x ")[1]);
+            this.formato.text(this.datosGenerales.papelFormatoId.find('option:selected').text());
+        }
+
+
+        this.divPreview.empty();
+
+        new previewFormas(
+            this.divPreview,
+            this.datosGenerales.tiposLibro.filter('.selected').attr('id'),
+            this.disenioCubierta.disenioCubierta.filter('.selected').attr('id'),
+            "resumen",
+            {
+                ancho: ancho,
+                alto: alto,
+                lomo: $('#lc').val() === '' ? parseFloat('0.0') : parseFloat($('#lc').val()),
+                solapas: this.disenioCubierta.getSolapasCubierta(),
+                lomoRedondo: this.disenioCubierta.tapaDuraLomoRedondo.hasClass('selected'),
+            }
+        ).previewEsquemaCubierta();
+
+        this.paginas.text(this.datosGenerales.paginas.val());
+        this.paginasColor.text(this.datosGenerales.paginasColor.val());
+        this.paginasNegro.text(this.datosGenerales.paginasNegro.val());
+        this.tirada.text(parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada')));
+        this.prototipo.text(this.datosGenerales.prototipo.is(':checked') ? 'Sí' : 'No');
+
+        const HQ = this.disenioInterior.getIsHq();
+        const color = this.datosGenerales.getIsColor();
+        const papelInterior = this.disenioInterior.getPapel(true);
+        const gramajeInterior = this.disenioInterior.getGramaje();
+        if ($(".interior-color").hasClass('d-none')) {
+            this.domItem.find(".mismoInterior").removeClass('d-none');
+            this.domItem.find(".diferenteInterior").addClass('d-none');
+            const impInterior = (color ? "Color " : "Blanco y Negro") + (HQ ? "Premium" : "Estándar");
+            this.impresionInterior.text(impInterior);
+            this.papelInterior.text(papelInterior);
+            this.gramajeInterior.text(gramajeInterior);
+        }
+        else {
+            this.domItem.find(".mismoInterior").addClass('d-none');
+            this.domItem.find(".diferenteInterior").removeClass('d-none');
+            const impInterior = ("Negro " + (HQ.negro ? "Premium" : "Estándar") + " / Color" + (HQ.color ? "Premium" : "Estándar"));
+            this.impresionInterior.text(impInterior);
+            this.papelInteriorNegro.text(papelInterior.negro);
+            this.papelInteriorColor.text(papelInterior.color);
+            this.gramajeInteriorNegro.text(gramajeInterior.negro);
+            this.gramajeInteriorColor.text(gramajeInterior.color);
+        }
+
+        this.cubiertaTipo.text($($('.tipo-cubierta.selected').find('.form-label')).text());
+        this.carasCubierta.text(this.disenioCubierta.carasCubierta.find('option:selected').text());
+        if (this.cubiertaTipo.text().toLowerCase().includes('blanda')) {
+            this.itemsCubiertaTapaBlanda.removeClass('d-none');
+            this.itemsCubiertaTapaDura.addClass('d-none');
+            const solapasCubierta = this.disenioCubierta.getSolapasCubierta();
+            this.solapasCubierta.text(solapasCubierta == false ? 'No' : solapasCubierta);
+        }
+        else {
+            this.itemsCubiertaTapaDura.removeClass('d-none');
+            this.itemsCubiertaTapaBlanda.addClass('d-none');
+            const guardas = this.disenioCubierta.getGuardas(true);
+            this.papelGuardas.text(guardas.papel + ' ' + guardas.gramaje);
+            this.guardasImpresas.text(guardas.caras);
+            this.cabezada.text(this.disenioCubierta.getCabezada(true));
+
+        }
+        this.papelCubierta.text($($('.papel-cubierta.selected').find('.form-label')).text())
+        this.gramajeCubierta.text(this.disenioCubierta.getGramaje());
+        this.cubiertaAcabados.text(this.disenioCubierta.getAcabados(true));
+
+        if (this.disenioCubierta.getSobrecubierta()) {
+            this.divSobrecubierta.removeClass('d-none');
+            const sobrecubierta = this.disenioCubierta.getSobrecubierta(true);
+            this.papelSobrecubierta.text(sobrecubierta.papel);
+            this.gramajeSobrecubierta.text(sobrecubierta.gramaje);
+            this.solapasSobrecubierta.text(sobrecubierta.solapas);
+            this.plastificadoSobrecubierta.text(sobrecubierta.plastificado);
+        }
+        else {
+            this.divSobrecubierta.addClass('d-none');
+        }
+
+        const unidades = parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada'));
+        const tarjetaPrecio = $('.tarjeta-tiradas-precios').filter(function () {
+            return parseInt($(this).find('.tarjeta-tiradas-precios-tirada').attr('data')) == unidades;
+        });
+
+
+        let precio_u_text = tarjetaPrecio.find('.tarjeta-tiradas-precios-precio-unidad').text();
+        precio_u_text = precio_u_text.replace('€/u', '');
+        precio_u_text = this.#changeDecimalFormat(precio_u_text);
+
+        const base = tarjetaPrecio.find('.tarjeta-tiradas-precios-precio').attr('data');
+        let base_text = this.#changeDecimalFormat(base);
+
+        const iva_porcentaje = this.datosGenerales.ivaReducido.find('option:selected').val() == 1 ? 0.21 : 0.04;
+        const iva = (parseFloat(base) * iva_porcentaje).toFixed(2);
+        let iva_text = this.#changeDecimalFormat(iva);
+
+        const total = (parseFloat(base) + parseFloat(iva)).toFixed(2);
+        let total_text = this.#changeDecimalFormat(total);
+
+        this.precio_unidad.text(precio_u_text);
+        this.total_base.text(base_text);
+        this.iva_porcentaje.text(this.datosGenerales.ivaReducido.find('option:selected').val() == 1 ? '21' : '4');
+        this.iva.text(iva_text);
+        this.total.text(total_text);
+
+    }
+
+    generate_total(base, precio_u) {
+
+        let precio_u_text = String(precio_u);
+        precio_u_text = precio_u_text.replace('€/u', '');
+        precio_u_text = this.#changeDecimalFormat(precio_u_text);
+
+        let base_text = this.#changeDecimalFormat(String(base));
+
+        const iva_porcentaje = this.datosGenerales.ivaReducido.find('option:selected').val() == 1 ? 0.21 : 0.04;
+        const iva = (parseFloat(base) * iva_porcentaje).toFixed(2);
+        let iva_text = this.#changeDecimalFormat(iva);
+
+        const total = (parseFloat(base) + parseFloat(iva)).toFixed(2);
+        let total_text = this.#changeDecimalFormat(total);
+
+        this.precio_unidad.text(precio_u_text);
+        this.total_base.text(base_text);
+        this.iva_porcentaje.text(this.datosGenerales.ivaReducido.find('option:selected').val() == 1 ? '21' : '4');
+        this.iva.text(iva_text);
+        this.total.text(total_text);
+    }
+
+
+    #capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+
+
+    #changeDecimalFormat(number) {
+
+        let cleanedNumber = String(number).replace(/[^\d.]/g, '');
+        let partes = cleanedNumber.split('.');
+        partes[0] = partes[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
+        return partes.join(',');
+    }
+}
+
+export default Resumen;

httpdocs/assets/js/safekat/pages/presupuestoCliente/selectorTiradaEnvio.js

@@ -0,0 +1,59 @@
+class SelectorTiradaEnvio {
+
+    constructor(container, id, tirada) {
+
+        this.container = container;
+        this.tirada = tirada;
+        this.card = this.#generateHTML(id, tirada);
+        this.container.append(this.card);
+    }
+
+    #generateHTML(id, tirada) {
+
+
+        var $checkboxContainer = $('<div>', {
+            class: 'checkbox-presupuesto-tiradas-envio mb-md-0 mb-3'
+        });
+    
+        // Crear el segundo div con clase form-check
+        var $formCheckDiv = $('<div>', {
+            class: 'form-check custom-option custom-option-icon tirada-envio'
+        });
+    
+        // Crear el label
+        var $label = $('<label>', {
+            class: 'form-check-label custom-option-content',
+            for: id
+        });
+    
+        // Crear los spans para el título
+        var $spanBody = $('<span>', { class: 'custom-option-body' });
+        var $spanTitle = $('<span>', { class: 'custom-option-title', text: tirada + ' ud.' });
+    
+        // Crear el input radio
+        var $inputRadio = $('<input>', {
+            id: id,
+            name: 'customRadioTiradaEnvio',
+            class: 'check-tirada-envio form-check-input',
+            type: 'radio',
+            tirada: tirada,
+            value: ''
+        });
+    
+        // Añadir el span del título al span del cuerpo
+        $spanBody.append($spanTitle);
+    
+        // Añadir los elementos al label
+        $label.append($spanBody).append($inputRadio);
+    
+        // Añadir el label al div form-check
+        $formCheckDiv.append($label);
+    
+        // Añadir el form-check div al contenedor principal
+        $checkboxContainer.append($formCheckDiv);
+
+        return $checkboxContainer;
+    }
+}
+
+export default SelectorTiradaEnvio;

httpdocs/assets/js/safekat/pages/presupuestoCliente/tarjetaTiradasPrecio.js

@@ -0,0 +1,60 @@
+class tarjetaTiradasPrecio {
+    
+    constructor(domItem, id, tirada, precio, precio_unidad) {
+        this.domItem = domItem;
+        this.id = id;
+        this.tirada = tirada;
+        this.precio = precio;
+        this.precio_unidad = precio_unidad;
+
+        this.card = this.#generateHTML(id, tirada, precio, precio_unidad);
+        this.domItem.append(this.card);
+    }
+
+    #generateHTML(id, tirada, precio, precio_unidad) {
+
+        let $html = $('<div>', {
+            id: id,
+            class: 'list-group mb-2 tarjeta-tiradas-precios'
+        });
+
+        let $link = $('<a>', {
+            href: 'javascript:void(0);',
+            class: 'list-group-item'
+        });
+
+        let $liWrapper = $('<div>', {
+            class: 'li-wrapper d-flex justify-content-start align-items-center'
+        });
+
+        let $listContent = $('<div>', {
+            class: 'list-content'
+        });
+
+        $listContent.append($('<h7>', {
+            id: 'ud_' + id,
+            class: 'mb-1 tarjeta-tiradas-precios-tirada',
+            text: tirada + ' ud.'
+        }).attr('data', tirada));
+
+        $listContent.append($('<h6>', {
+            id: 'tot_' + id,
+            class: 'mb-1 tarjeta-tiradas-precios-precio',
+            text: 'Total: ' + precio + '€'
+        }).attr('data', precio));
+
+        $listContent.append($('<h7>', {
+            id: 'pu_' + id,
+            class: 'mb-1 tarjeta-tiradas-precios-precio-unidad',
+            text: precio_unidad + '€/ud'
+        }).attr('data', precio_unidad));
+
+        $liWrapper.append($listContent);
+        $link.append($liWrapper);
+        $html.append($link);
+
+        return $html;
+    }
+}
+
+export default tarjetaTiradasPrecio;

httpdocs/assets/js/safekat/pages/preview.js

@@ -0,0 +1,759 @@
+
+class previewFormas {
+    constructor(container, tipoLibro, tipoTapa, size, datos) {
+
+        this.container = container;
+        this.tipoLibro = tipoLibro;
+        this.tipoTapa = tipoTapa;
+        this.size = size;
+
+        this.ancho = datos.ancho;
+        this.alto = datos.alto;
+        this.lomo = datos.lomo;
+
+        if (datos.solapas == undefined || datos.solapas == null || datos.solapas == false) {
+            this.solapa = 0;
+            this.offsetSolapa = 0.0;
+        }
+        else {
+            this.solapa = datos.solapas;
+            this.offsetSolapa = 3.0;
+        }
+        this.lomoRedondo = datos.lomoRedondo;
+
+    }
+
+    previewEsquemaCubierta() {
+
+        if (this.tipoLibro.includes("cosido") || this.tipoLibro.includes("fresado")) {
+            if (this.tipoTapa.toLowerCase().includes("dura"))
+                this.#portadaTapaDura();
+            else {
+                this.#portadaTapaBlanda();
+            }
+        }
+        else if (this.tipoLibro.includes("espiral") || this.tipoLibro.includes("wire-o")) {
+            if (this.tipoTapa.toLowerCase().includes("dura"))
+                this.#portadaEspiral(true);
+            else
+                this.#portadaEspiral(false);
+        }
+        else if (this.tipoLibro.includes("grapado")) {
+            this.#portadaGrapado();
+        }
+
+    }
+
+
+    #portadaTapaBlanda() {
+
+        // Variables locales
+        let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa;
+        let styleCotas = { size: 12, family: 'Public Sans' };
+        let sangradoTexto = "Sangrado 5 mm";
+        let sangradoValor = parseFloat(5);  // mm
+        let offsetSolapaValor = parseFloat(0);  // mm
+
+        // Definicion de los parametros del Esquema de Cubierta (EC)
+        if (this.solapa == 0) {
+            if (this.size == "thumbnail") {
+                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;
+            lomoLibro = anchoSangrado * 0.133;
+            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+
+        } else {
+            if (this.size == "thumbnail") {
+                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;
+            lomoLibro = anchoSangrado * 0.09;
+            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+        }
+
+        // Clear the canvas element
+        this.container.empty();
+        // Get the element for placing the graphical elements
+        var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
+        // 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 (this.solapa != 0) {
+            var solapas = previewEC.makeRectangle(
+                origenEC.x,
+                origenEC.y,
+                anchoCubierta,
+                altoLibro);
+            solapas.stroke = 'black';
+            solapas.linewidth = 1;
+
+            // Cotas Solapas
+            if (this.size != "thumbnail") {
+                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(anchoSolapa.toFixed(1) + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+                previewEC.makeText(anchoSolapa.toFixed(1) + " 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 y textos
+        if (this.size != "thumbnail") {
+            // 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(lomoLibro.toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(altoLibro.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText((altoLibro + (2 * sangradoValor)).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText(((2 * anchoLibro) + (2 * (anchoSolapa + offsetSolapaValor)) + lomoLibro + (2 * sangradoValor)).toFixed(1) + " mm",
+                origenEC.x,
+                origenEC.y + (altoLibro / 2) + 50,
+                styleCotas);
+
+        }
+
+        previewEC.update();
+
+    }
+
+
+    #portadaTapaDura() {
+
+        // Variables locales
+        let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
+        let styleCotas = { size: 12, family: 'Public Sans' };
+        let sangradoTexto = "Sangrado 20 mm";
+        let sangradoValor = parseFloat(20);  // mm
+        if (this.ancho >= 210 || this.alto >= 297) {
+            sangradoValor = parseFloat(15);  // mm
+            sangradoTexto = "Sangrado 15 mm";
+        }
+        let anchoPliegue = parseFloat(7);  // mm cajo
+        let altoPliegue = parseFloat(7);  // mm
+        let anchoCarton = parseFloat(6); // mm
+        if (this.lomoRedondo)
+            anchoCarton += parseFloat(6); // mm
+        // Definicion de los parametros del Esquema de Cubierta (EC)
+        if (this.size == "thumbnail") {
+            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
+        this.container.empty();
+        // Get the element for placing the graphical elements
+        var previewEC = new Two({ fitted: true }).appendTo($(this.container)[0]);
+
+        // 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;
+
+        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 y textos
+        if (this.size != "thumbnail") {
+            // 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((this.lomo + anchoCarton).toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((this.alto + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText((this.alto + (2 * sangradoValor) + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText((2 * this.ancho) + this.lomo + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
+                origenEC.x,
+                origenEC.y + (altoLibro / 2) + 50,
+                styleCotas);
+
+        }
+
+        previewEC.update();
+    }
+
+    #portadaEspiral(isTapaDura = false) {
+
+        // Variables locales
+        let altoLibro, anchoLibro, anchoSolapa, anchoCalle, altoSangrado, anchoSangrado, offsetCubierta, anchoCubierta;
+        let styleCotas = { size: 12, family: 'Public Sans' };
+        let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
+        let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5);  // mm
+
+
+        // Definicion de los parametros del Esquema de Cubierta (EC)
+        if ((this.solapa !== 0) && (!isTapaDura)) {
+            if (this.size == "thumbnail") {
+                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 {
+            if (this.size == "thumbnail") {
+                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.9;
+            anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.44;
+            anchoCalle = anchoSangrado * 0.02;
+            anchoSolapa = 0;
+            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
+            offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
+        }
+
+        var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
+        // 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 ((this.solapa != 0) && (!isTapaDura)) {
+            var solapa1 = previewEC.makeRectangle(
+                origenEC.x + (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
+                origenEC.y,
+                anchoSolapa,
+                altoLibro);
+            solapa1.stroke = 'black';
+            solapa1.linewidth = 1;
+
+            var solapa2 = previewEC.makeRectangle(
+                origenEC.x - (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
+                origenEC.y,
+                anchoSolapa,
+                altoLibro);
+            solapa2.stroke = 'black';
+            solapa2.linewidth = 1;
+
+            // Cotas y textos
+            if (this.size != "thumbnail") {
+                // 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((this.solapa).toFixed(1) + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+                previewEC.makeText(this.solapa.toFixed(1) + " 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.y,
+            anchoLibro,
+            altoLibro);
+        portada.stroke = 'black';
+        portada.linewidth = 1;
+
+        var contraportada = previewEC.makeRectangle(
+            origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
+            origenEC.y,
+            anchoLibro,
+            altoLibro);
+        contraportada.stroke = 'black';
+        contraportada.linewidth = 1;
+
+        var calle = previewEC.makeRectangle(
+            origenEC.x,
+            origenEC.y,
+            anchoCalle,
+            altoSangrado);
+        calle.stroke = 'black';
+        calle.dashes = [2, 5];
+        calle.fill = '#F4F8F2';
+        calle.linewidth = 1;
+
+        // Cotas y textos
+        if (this.size != "thumbnail") {
+            // 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(this.ancho.toFixed(1) + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(this.ancho.toFixed(1) + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText((this.alto + (2 * sangradoValor)).toFixed(1) + " mm",
+                origenEC.x + (anchoSangrado / 2) + 30,
+                origenEC.y,
+                styleCotas
+            ).rotation = -Math.PI / 2;
+            previewEC.makeText(((2 * this.ancho) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
+                origenEC.x,
+                origenEC.y + (altoLibro / 2) + 50,
+                styleCotas);
+        }
+
+        previewEC.update();
+
+    }
+
+
+    #portadaGrapado() {
+
+        // 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
+        
+        // Definicion de los parametros del Esquema de Cubierta (EC)
+        if (this.solapa == 0) {
+            if (this.size == "thumbnail") {
+                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;
+            lomoLibro = 0;     // ESTA ES LA DIFERENCIA PARA GRAPADO
+            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+
+        } else {
+            if (this.size == "thumbnail") {
+                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;
+            lomoLibro = 0;     // ESTA ES LA DIFERENCIA PARA GRAPADO
+            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+        }
+
+        var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
+        // 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 (this.solapa != 0) {
+            var solapas = previewEC.makeRectangle(
+                origenEC.x,
+                origenEC.y,
+                anchoCubierta,
+                altoLibro);
+            solapas.stroke = 'black';
+            solapas.linewidth = 1;
+
+            // Cotas y textos
+            if (this.size != "thumbnail") {
+                // 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(this.solapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+                previewEC.makeText(this.solapa + " 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 y textos
+        if (this.size != "thumbnail") {
+            // 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((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText(this.alto.toFixed(1) + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText(((2 * anchoLibro) + (2 * (this.solapa + this.offsetSolapa)) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
+                origenEC.x,
+                origenEC.y + (altoLibro / 2) + 50,
+                styleCotas);
+        }
+
+        previewEC.update();
+    }
+}
+
+export default previewFormas;

httpdocs/themes/vuexy/css/presupuestoCliente.css

@@ -0,0 +1,475 @@
+.image-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 20px;
+    position: relative;
+    max-width: 200px;
+}
+
+/* Estilo de la imagen */
+.image-container img {
+    max-width: 150px;
+    max-height: 150px;
+}
+
+/* Pseudo-elemento que muestra el tick */
+.image-container.selected::after {
+    content: '✔'; /* Símbolo de tick */
+    position: absolute;
+    top: calc(50% + 5px);
+    left: calc(100%/2 + 65px); /* Mueve 75px a la derecha fuera del contenedor */
+    font-size: 50px;
+    font-weight: bold;
+    color: green;
+    background-color: rgba(255, 255, 255, 0); /* Fondo transparente */
+    border-radius: 100%;
+    padding: 5px;
+}
+
+
+.image-presupuesto {
+    transition: transform 1s ease;
+}
+
+.image-presupuesto.selected {
+    --webkit-transform: rotateY(360deg);
+    --webkit-transform-style: preserve-3d;
+
+    transform: rotateY(360deg);
+    transform-style: preserve-3d;
+}
+
+.checkbox-presupuesto-container {
+    width: 110px !important;
+    max-width: 110px !important;
+    min-width: 110px !important;
+}
+
+.checkbox-presupuesto-tiradas-envio {
+    width: 130px !important;
+    max-width: 130px !important;
+    min-width: 130px !important;
+}
+
+.min-width-fit {
+    min-width: fit-content !important;
+}
+
+.texto-error {
+    color: #ea5455;
+    font-weight: bold;
+}
+
+.col-item-resumen-table {
+    max-width: 200px;
+    width: 200px;
+    font-weight: bold;
+}
+
+
+
+.loader * {
+    border: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+.loader {
+    --hue: 223;
+    --bg: hsl(var(--hue), 10%, 90%);
+    --fg: hsl(var(--hue), 10%, 10%);
+    --primary: hsl(var(--hue), 90%, 55%);
+    --primary-l: hsl(var(--hue), 90%, 65%);
+    --primary-d: hsl(var(--hue), 90%, 45%);
+    --white: hsl(var(--hue), 10%, 100%);
+    --white-d: hsl(var(--hue), 10%, 45%);
+    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+    background-color: rgba(255, 255, 255, 0);
+    color: var(--fg);
+    font: 1em/1.5 sans-serif;
+    height: 100vh;
+    position: fixed;
+    /* Fijo para cubrir la pantalla */
+    left: 50%;
+    /* Centramos horizontalmente */
+    top: 50%;
+    /* Centramos verticalmente */
+    transform: translate(-50%, -50%);
+    /* Ajuste para centrar el loader */
+    width: auto;
+    /* Se ajusta automáticamente */
+    height: auto;
+    /* Se ajusta automáticamente */
+    z-index: 9999;
+    /* Mantener por encima de otros elementos */
+    display: flex;
+    /* Para centrar contenido */
+    justify-content: center;
+    /* Centrar horizontalmente */
+    align-items: center;
+    /* Centrar verticalmente */
+    background-color: rgba(255, 255, 255, 0);
+    /* Fondo completamente transparente */
+}
+
+.book,
+.book__pg-shadow,
+.book__pg {
+    animation: cover 7s ease-in-out infinite;
+}
+
+.book {
+    background-color: var(--primary-l);
+    border-radius: 0.25em;
+    box-shadow:
+        0 0.25em 0.5em hsla(0, 0%, 0%, 0.3),
+        0 0 0 0.25em var(--primary) inset;
+    padding: 0.25em;
+    perspective: 37.5em;
+    position: relative;
+    width: 8em;
+    height: 6em;
+    transform: translate3d(0, 0, 0);
+    transform-style: preserve-3d;
+}
+
+.book__pg-shadow,
+.book__pg {
+    position: absolute;
+    left: 0.25em;
+    width: calc(50% - 0.25em);
+}
+
+.book__pg-shadow {
+    animation-name: shadow;
+    background-image: linear-gradient(-45deg, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, 0.3) 50%);
+    filter: blur(0.25em);
+    top: calc(100% - 0.25em);
+    height: 3.75em;
+    transform: scaleY(0);
+    transform-origin: 100% 0%;
+}
+
+.book__pg {
+    animation-name: pg1;
+    background-color: var(--white);
+    background-image: linear-gradient(90deg, hsla(var(--hue), 10%, 90%, 0) 87.5%, hsl(var(--hue), 10%, 90%));
+    height: calc(100% - 0.5em);
+    transform-origin: 100% 50%;
+}
+
+.book__pg--2,
+.book__pg--3,
+.book__pg--4 {
+    background-image:
+        repeating-linear-gradient(hsl(var(--hue), 10%, 10%) 0 0.125em, hsla(var(--hue), 10%, 10%, 0) 0.125em 0.5em),
+        linear-gradient(90deg, hsla(var(--hue), 10%, 90%, 0) 87.5%, hsl(var(--hue), 10%, 90%));
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 2.5em 4.125em, 100% 100%;
+}
+
+.book__pg--2 {
+    animation-name: pg2;
+}
+
+.book__pg--3 {
+    animation-name: pg3;
+}
+
+.book__pg--4 {
+    animation-name: pg4;
+}
+
+.book__pg--5 {
+    animation-name: pg5;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: hsl(var(--hue), 10%, 30%);
+        --fg: hsl(var(--hue), 10%, 90%);
+    }
+}
+
+/* Animations */
+@keyframes cover {
+
+    from,
+    5%,
+    45%,
+    55%,
+    95%,
+    to {
+        animation-timing-function: ease-out;
+        background-color: var(--primary-l);
+    }
+
+    10%,
+    40%,
+    60%,
+    90% {
+        animation-timing-function: ease-in;
+        background-color: var(--primary-d);
+    }
+}
+
+@keyframes shadow {
+
+    from,
+    10.01%,
+    20.01%,
+    30.01%,
+    40.01% {
+        animation-timing-function: ease-in;
+        transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
+    }
+
+    5%,
+    15%,
+    25%,
+    35%,
+    45%,
+    55%,
+    65%,
+    75%,
+    85%,
+    95% {
+        animation-timing-function: ease-out;
+        transform: translate3d(0, 0, 1px) scaleY(0.2) rotateY(90deg);
+    }
+
+    10%,
+    20%,
+    30%,
+    40%,
+    50%,
+    to {
+        animation-timing-function: ease-out;
+        transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
+    }
+
+    50.01%,
+    60.01%,
+    70.01%,
+    80.01%,
+    90.01% {
+        animation-timing-function: ease-in;
+        transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
+    }
+
+    60%,
+    70%,
+    80%,
+    90%,
+    to {
+        animation-timing-function: ease-out;
+        transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
+    }
+}
+
+@keyframes pg1 {
+
+    from,
+    to {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0.4deg);
+    }
+
+    10%,
+    15% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(180deg);
+    }
+
+    20%,
+    80% {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(180deg);
+    }
+
+    85%,
+    90% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(180deg);
+    }
+}
+
+@keyframes pg2 {
+
+    from,
+    to {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(0.3deg);
+    }
+
+    5%,
+    10% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0.3deg);
+    }
+
+    20%,
+    25% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(179.9deg);
+    }
+
+    30%,
+    70% {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(179.9deg);
+    }
+
+    75%,
+    80% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(179.9deg);
+    }
+
+    90%,
+    95% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0.3deg);
+    }
+}
+
+@keyframes pg3 {
+
+    from,
+    10%,
+    90%,
+    to {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(0.2deg);
+    }
+
+    15%,
+    20% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0.2deg);
+    }
+
+    30%,
+    35% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(179.8deg);
+    }
+
+    40%,
+    60% {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(179.8deg);
+    }
+
+    65%,
+    70% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(179.8deg);
+    }
+
+    80%,
+    85% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0.2deg);
+    }
+}
+
+@keyframes pg4 {
+
+    from,
+    20%,
+    80%,
+    to {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(0.1deg);
+    }
+
+    25%,
+    30% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0.1deg);
+    }
+
+    40%,
+    45% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(179.7deg);
+    }
+
+    50% {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(179.7deg);
+    }
+
+    55%,
+    60% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(179.7deg);
+    }
+
+    70%,
+    75% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0.1deg);
+    }
+}
+
+@keyframes pg5 {
+
+    from,
+    30%,
+    70%,
+    to {
+        animation-timing-function: ease-in;
+        background-color: var(--white-d);
+        transform: translate3d(0, 0, 1px) rotateY(0);
+    }
+
+    35%,
+    40% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0deg);
+    }
+
+    50% {
+        animation-timing-function: ease-in-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(179.6deg);
+    }
+
+    60%,
+    65% {
+        animation-timing-function: ease-out;
+        background-color: var(--white);
+        transform: translate3d(0, 0, 1px) rotateY(0);
+    }
+}

xdebug.log

@@ -0,0 +1,24 @@
+[25] Log opened at 2024-11-07 19:18:16.252892
+[25] [Config] INFO: Control socket set up succesfully: '@xdebug-ctrl.25'
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] Log closed at 2024-11-07 19:18:17.804301
+
+[27] Log opened at 2024-11-07 19:18:17.941917
+[27] [Config] INFO: Control socket set up succesfully: '@xdebug-ctrl.27'
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] Log closed at 2024-11-07 19:18:18.850160
+