Merge branch 'dev/papeles_from_bd_presu_cliente' into 'main'

Dev/papeles from bd presu cliente

See merge request jjimenez/safekat!398

ci4/app/Config/Routes.php

@@ -215,6 +215,8 @@ $routes->group('papelesgenericos', ['namespace' => 'App\Controllers\Configuracio
     $routes->post('datatable', 'Papelesgenericos::datatable', ['as' => 'dataTableOfPapelesGenericos']);
     $routes->post('allmenuitems', 'Papelesgenericos::allItemsSelect', ['as' => 'select2ItemsOfPapelesGenericos']);
     $routes->post('menuitems', 'Papelesgenericos::menuItems', ['as' => 'menuItemsOfPapelesGenericos']);
+    $routes->get('getpapelcliente', 'Papelesgenericos::getPapelCliente', ['as' => 'getPapelCliente']);
+    $routes->get('selectpapelespecial', 'Papelesgenericos::selectPapelEspecial', ['as' => 'selectPapelEspecial']);
 });
 $routes->resource('papelesgenericos', ['namespace' => 'App\Controllers\Configuracion', 'controller' => 'Papelesgenericos', 'except' => 'show,new,create,update']);
 

ci4/app/Controllers/Clientes/Clientedirecciones.php

@@ -234,6 +234,10 @@ class Clientedirecciones extends \App\Controllers\BaseResourceController
         try {
             $model = model('App\Models\Presupuestos\PresupuestoDireccionesModel');
             $resourceData = $model->getDireccion($id);
+            if(count($resourceData) > 0){
+                $resourceData[0]->direccionId = $id;
+            }
+            
             $response = (object)[
                 'error' => false,
                 'data' => $resourceData

ci4/app/Controllers/Configuracion/Papelesgenericos.php

@@ -293,4 +293,50 @@ class Papelesgenericos extends \App\Controllers\BaseResourceController
             return $this->failUnauthorized('Invalid request', 403);
         }
     }
+
+    public function getPapelCliente()
+    {
+        if ($this->request->isAJAX()) {
+            
+            $tipo = goSanitize($this->request->getGet('tipo'))[0];
+            $selected_papel = goSanitize($this->request->getGet('papel'))[0] ?? null;
+            $cubierta = goSanitize($this->request->getGet('cubierta'))[0] ?? 0;
+            $menu = $this->model->getPapelCliente($tipo, $cubierta, $selected_papel, false);
+            $menu2 = $this->model->getPapelCliente($tipo, $cubierta, $selected_papel, true);
+            
+            $newTokenHash = csrf_hash();
+            $csrfTokenName = csrf_token();
+            $data = [
+                'papeles' => $menu,
+                'papeles_especiales' => $menu2,
+                $csrfTokenName => $newTokenHash
+            ];
+            return $this->respond($data);
+        } else {
+            return $this->failUnauthorized('Invalid request', 403);
+        }
+    }
+
+
+    public function selectPapelEspecial()
+    {
+        
+        if ($this->request->isAJAX()) {
+            
+            $tipo = goSanitize($this->request->getGet('tipo'))[0];
+            $cubierta = goSanitize($this->request->getGet('cubierta'))[0] ?? 0;
+
+            $items = $this->model->getPapelCliente($tipo, $cubierta, null, true);
+            $items = array_map(function ($item) {
+                return [
+                    'id' => $item->id,
+                    'name' => $item->nombre
+                ];
+            }, $items);
+            return $this->response->setJSON($items);
+
+        } else {
+            return $this->failUnauthorized('Invalid request', 403);
+        }
+    }
 }

ci4/app/Controllers/Presupuestos/Presupuestocliente.php

@@ -303,12 +303,12 @@ class Presupuestocliente extends \App\Controllers\BaseResourceController
                 $lomoRedondo = $cubierta['lomoRedondo'] ?? 0;
 
                 if ($papelInteriorDiferente) {
-                    $papel['negro'] = $modelPapelGenerico->getIdFromCode($interior['papelInterior']['negro']);
-                    $papel['color'] = $modelPapelGenerico->getIdFromCode($interior['papelInterior']['color']);
+                    $papel['negro'] = $modelPapelGenerico->where('id', $interior['papelInterior']['negro'])->first()->toArray();
+                    $papel['color'] = $modelPapelGenerico->where('id', $interior['papelInterior']['color'])->first()->toArray();
                     $gramaje['negro'] = intval($interior['gramajeInterior']['negro']);
                     $gramaje['color'] = intval($interior['gramajeInterior']['color']);
                 } else {
-                    $papel = $modelPapelGenerico->getIdFromCode($interior['papelInterior']);
+                    $papel = $modelPapelGenerico->where('id', $interior['papelInterior'])->first()->toArray();
                     $gramaje = intval($interior['gramajeInterior']);
                 }
                 // Interior
@@ -464,7 +464,7 @@ class Presupuestocliente extends \App\Controllers\BaseResourceController
 
                 return $this->respond($return_data);
             } catch (Exception $e) {
-                return $this->failServerError($e->getMessage());
+                return $this->failServerError($e->getMessage() . '  -  ' . $e->getFile() . '  -  ' . $e->getLine());
             }
         } else {
             return $this->failUnauthorized('Invalid request', 403);
@@ -673,12 +673,12 @@ class Presupuestocliente extends \App\Controllers\BaseResourceController
             $tipo_impresion_id = $this->getTipoImpresion($tipo, $cubierta['tipoCubierta']);
 
             if ($papelInteriorDiferente) {
-                $papel['negro'] = $modelPapelGenerico->getIdFromCode($interior['papelInterior']['negro']);
-                $papel['color'] = $modelPapelGenerico->getIdFromCode($interior['papelInterior']['color']);
+                $papel['negro'] = $modelPapelGenerico->where('id', $interior['papelInterior']['negro'])->first()->toArray();
+                $papel['color'] = $modelPapelGenerico->where('id', $interior['papelInterior']['color'])->first()->toArray();
                 $gramaje['negro'] = intval($interior['gramajeInterior']['negro']);
                 $gramaje['color'] = intval($interior['gramajeInterior']['color']);
             } else {
-                $papel = $modelPapelGenerico->getIdFromCode($interior['papelInterior']);
+                $papel = $modelPapelGenerico->where('id', $interior['papelInterior'])->first()->toArray();
                 $gramaje = intval($interior['gramajeInterior']);
             }
             // Interior
@@ -1288,7 +1288,7 @@ class Presupuestocliente extends \App\Controllers\BaseResourceController
         $coste = 0;
         $margen = 0;
 
-        if ($data > 0) {
+        if (count($data) > 0) {
             $peso_envio = round(floatval($peso * $unidades / 1000.0)); // peso libro * unidades y se pasa a kilogramos
             $tarifas_envio = $modelTarifaEnvio->getTarifaEnvio($data[0]->pais_id, $data[0]->cp, $peso_envio, $entregaPieCalle ? 'palets' : 'cajas');
             for ($i = 0; $i < count($tarifas_envio); $i++) {
@@ -2300,13 +2300,16 @@ class Presupuestocliente extends \App\Controllers\BaseResourceController
                 if ($linea->tipo == 'lp_bn' || $linea->tipo == 'lp_bnhq' || $linea->tipo == 'lp_rot_bn') {
                     $return_data['interior']['negro']['tipo'] = $linea->tipo == 'lp_bn' || $linea->tipo == 'lp_rot_bn' ? 'negroEstandar' : 'negroPremium';
                     $return_data['interior']['negro']['papel'] = $modelPapelGenerico->getCodeFromId($linea->papel_id);
+                    $return_data['interior']['negro']['papel']['id'] = $linea->papel_id;
                     $return_data['interior']['negro']['gramaje'] = $linea->gramaje;
                 } else if ($linea->tipo == 'lp_color' || $linea->tipo == 'lp_colorhq' || $linea->tipo == 'lp_rot_color') {
                     $return_data['interior']['color']['tipo'] = $linea->tipo == 'lp_color' || $linea->tipo == 'lp_rot_color' ? 'colorEstandar' : 'colorPremium';
                     $return_data['interior']['color']['papel'] = $modelPapelGenerico->getCodeFromId($linea->papel_id);
+                    $return_data['interior']['color']['papel']['id'] = $linea->papel_id;
                     $return_data['interior']['color']['gramaje'] = $linea->gramaje;
                 } else if ($linea->tipo == 'lp_cubierta') {
                     $return_data['cubierta']['papel'] = $modelPapelGenerico->getCodeFromId($linea->papel_id);
+                    $return_data['cubierta']['papel']['id'] = $linea->papel_id;
                     $return_data['cubierta']['gramaje'] = $linea->gramaje;
                     $return_data['cubierta']['paginas'] = $linea->paginas;
                 } else if ($linea->tipo == 'lp_sobrecubierta') {

ci4/app/Language/es/Presupuestos.php

@@ -256,6 +256,7 @@ return [
     // Placeholders
     'formatoLibro' => "Formato libro",
     'selectCliente' => "Seleccione cliente",
+    'selectPapel' => "Seleccione papel",
 
 
     // Preview

ci4/app/Models/Configuracion/PapelGenericoModel.php

@@ -19,7 +19,7 @@ class PapelGenericoModel extends \App\Models\BaseModel
         1 => "t1.code",
         2 => "t1.code_ot",
         3 => "t1.show_in_client",
-        3 => "t1.show_in_client_special",
+        4 => "t1.show_in_client_special",
     ];
 
     protected $allowedFields = ["nombre", "code", "code_ot", "show_in_client", "show_in_client_special", "deleted_at", "is_deleted"];
@@ -63,7 +63,8 @@ class PapelGenericoModel extends \App\Models\BaseModel
     ];
 
 
-    public function getIdFromCode(string $code=""){
+    public function getIdFromCode(string $code = "")
+    {
         $builder = $this->db
             ->table($this->table . " t1")
             ->select(
@@ -78,7 +79,8 @@ class PapelGenericoModel extends \App\Models\BaseModel
     }
 
 
-    public function getCodeFromId($id=0){
+    public function getCodeFromId($id = 0)
+    {
         $builder = $this->db
             ->table($this->table . " t1")
             ->select(
@@ -226,8 +228,7 @@ class PapelGenericoModel extends \App\Models\BaseModel
         else if ($uso == 'cubierta') {
             $uso_tarifa = 'cubierta';
             $builder->where("t2.cubierta", 1);
-            }
-            else if ($uso == 'sobrecubierta'){
+        } else if ($uso == 'sobrecubierta') {
             $uso_tarifa = 'sobrecubierta';
             $builder->where("t2.sobrecubierta", 1);
         }
@@ -279,12 +280,10 @@ class PapelGenericoModel extends \App\Models\BaseModel
         if ($uso == 'cubierta') {
             $uso_tarifa = 'cubierta';
             $builder->where("t2.cubierta", 1);
-            }
-            else if ($uso == 'sobrecubierta'){
+        } else if ($uso == 'sobrecubierta') {
             $uso_tarifa = 'sobrecubierta';
             $builder->where("t2.sobrecubierta", 1);
-            }
-            else{
+        } else {
             if ($tipo == 'negro' || $tipo == 'negrohq')
                 $builder->where("t2.bn", 1);
             else if ($tipo == 'color' || $tipo == 'colorhq')
@@ -312,4 +311,99 @@ class PapelGenericoModel extends \App\Models\BaseModel
         return array_values(array_intersect_key($values, $unique_values));
 
     }
+
+
+    public function getPapelCliente($tipo, $is_cubierta = false, $selected_papel_id = null, $papel_especial = false)
+    {
+        /*
+        1.-> Tipo impresion
+            2.-> Maquina
+                3.-> Papeles impresion asociados a esa maquina
+                    4.-> papeles genericos que aparecen en esos papeles impresion
+        */
+
+        if ($selected_papel_id != null) {
+            $builder = $this->db
+                ->table($this->table . " t1")
+                ->select(
+                    "t2.gramaje as gramaje",
+                    // for debug, t2.nombre AS nombre_papel_impresion, t4.nombre AS maquina_nombre, t5.uso AS tarifa_uso, t5.tipo AS tarifa_tipo"
+                )
+                ->join("lg_papel_impresion t2", "t2.papel_generico_id = t1.id", "inner")
+                ->join("lg_maquina_papel_impresion t3", "t3.papel_impresion_id = t2.id", "inner")
+                ->join("lg_maquinas t4", "t3.maquina_id = t4.id", "inner")
+                ->join("lg_maquinas_tarifas_impresion t5", "t5.maquina_id = t4.id", "inner")
+
+                ->where("t1.id", $selected_papel_id)
+                ->where("t1.is_deleted", 0)
+                ->where("t1.show_in_client", 1)
+                ->where("t2.is_deleted", 0)
+                ->where("t2.isActivo", 1)
+                ->where("t2.use_in_client", 1)
+                ->where("t3.active", 1)
+                ->where("t4.is_deleted", 0)
+                ->where("t4.tipo", "impresion")
+                ->where("t5.is_deleted", 0)
+                ->where("t5.tipo", $tipo)
+                ->distinct('t2.gramaje');
+        } else {
+            $builder = $this->db
+                ->table($this->table . " t1")
+                ->select(
+                    "t1.id as id, t1.nombre AS nombre",
+                    // for debug, t2.nombre AS nombre_papel_impresion, t4.nombre AS maquina_nombre, t5.uso AS tarifa_uso, t5.tipo AS tarifa_tipo"
+                )
+                ->join("lg_papel_impresion t2", "t2.papel_generico_id = t1.id", "inner")
+                ->join("lg_maquina_papel_impresion t3", "t3.papel_impresion_id = t2.id", "inner")
+                ->join("lg_maquinas t4", "t3.maquina_id = t4.id", "inner")
+                ->join("lg_maquinas_tarifas_impresion t5", "t5.maquina_id = t4.id", "inner")
+
+                ->where("t1.is_deleted", 0)
+                ->where("t1.show_in_client", 1)
+                ->where("t2.is_deleted", 0)
+                ->where("t2.isActivo", 1)
+                ->where("t2.use_in_client", 1)
+                ->where("t3.active", 1)
+                ->where("t4.is_deleted", 0)
+                ->where("t4.tipo", "impresion")
+                ->where("t5.is_deleted", 0)
+                ->where("t5.tipo", $tipo)
+                ->distinct('t1.id');
+        }
+        // Validación adicional para asegurar que t1.id esté presente en las combinaciones con t3.active = 1
+        $builder->whereIn("t1.id", function ($subQuery) {
+            $subQuery->select("t1_inner.id")
+                ->from("lg_papel_generico t1_inner")
+                ->join("lg_papel_impresion t2_inner", "t2_inner.papel_generico_id = t1_inner.id", "inner")
+                ->join("lg_maquina_papel_impresion t3_inner", "t3_inner.papel_impresion_id = t2_inner.id", "inner")
+                ->where("t3_inner.active", 1);
+        });
+
+        if ($is_cubierta == true) {
+            $builder->where("t2.cubierta", 1);
+            $builder->where("t5.uso", 'cubierta');
+        } else {
+            $builder->where("t5.uso", 'interior');
+            if ($tipo == 'negro' || $tipo == 'negrohq')
+                $builder->where("t2.bn", 1);
+            else if ($tipo == 'color' || $tipo == 'colorhq')
+                $builder->where("t2.color", 1);
+        }
+
+        if ($papel_especial == true) {
+            $builder->where("t1.show_in_client_special", 1);
+        }
+
+        if ($tipo == 'colorhq' || $tipo == 'negrohq') {
+            $builder->where("t2.rotativa", 0);
+        }
+
+
+        if ($selected_papel_id != null)
+            $data = $builder->orderBy("t2.gramaje", "asc")->get()->getResultObject();
+        else
+            $data = $builder->orderBy("t1.nombre", "asc")->get()->getResultObject();
+        //$query = $this->db->getLastQuery();
+        return $data;
+    }
 }

ci4/app/Models/Configuracion/PapelImpresionModel.php

@@ -227,7 +227,8 @@ class PapelImpresionModel extends \App\Models\BaseModel
      * 
      * @return [type]
      */
-    public function getIdPapelesImpresionForPresupuesto($papel_generico_id = null, $gramaje = null, $options=[]){
+    public function getIdPapelesImpresionForPresupuesto($papel_generico_id = null, $gramaje = null, $options = [])
+    {
         $bn = array_key_exists('bn', $options) ? $options['bn'] : null;
         $color = array_key_exists('color', $options) ? $options['color'] : null;
         $cubierta = array_key_exists('cubierta', $options) ? $options['cubierta'] : null;
@@ -240,7 +241,8 @@ class PapelImpresionModel extends \App\Models\BaseModel
             ->distinct("t1.id")
             ->select(
                 "t1.id AS id, t1.nombre AS nombre, t1.papel_generico_id AS papel_generico_id, 
-                t1.gramaje as gramaje, t1.espesor AS espesor, t1.precio_tonelada AS precio_tonelada, t1.rotativa AS rotativa");
+                t1.gramaje as gramaje, t1.espesor AS espesor, t1.precio_tonelada AS precio_tonelada, t1.rotativa AS rotativa"
+            );
 
         $builder->where("t1.is_deleted", 0);
         $builder->where("t1.isActivo", 1);
@@ -272,7 +274,8 @@ class PapelImpresionModel extends \App\Models\BaseModel
 
     //tipo: negro, negrohq, color, colorhq
     //uso: interior, rotativa, cubierta, sobrecubierta
-    public function getPapelesImpresionForMenu($papel_generico = null, $gramaje = null, $tipo = null, $uso=""){
+    public function getPapelesImpresionForMenu($papel_generico = null, $gramaje = null, $tipo = null, $uso = "")
+    {
         $builder = $this->db
             ->table($this->table . " t1")
             ->distinct("t1.id")
@@ -281,7 +284,8 @@ class PapelImpresionModel extends \App\Models\BaseModel
             ->join("lg_maquinas t4", "t3.maquina_id = t4.id", "left")
             ->join("lg_maquinas_tarifas_impresion t5", "t4.id = t5.maquina_id", "left")
             ->select(
-                "t1.id AS id, t1.nombre AS text");
+                "t1.id AS id, t1.nombre AS text"
+            );
 
         $builder->where("t1.is_deleted", 0);
         $builder->where("t1.isActivo", 1);
@@ -315,18 +319,21 @@ class PapelImpresionModel extends \App\Models\BaseModel
         return $builder->orderBy("t1.id", "asc")->get()->getResultObject();
     }
 
-    public function getNombre($id){
+    public function getNombre($id)
+    {
         $builder = $this->db
             ->table($this->table . " t1")
             ->select(
-                "t1.nombre AS text");
+                "t1.nombre AS text"
+            );
 
         $builder->where("t1.id", $id);
 
         return $builder->orderBy("t1.id", "asc")->get()->getResultObject();
     }
 
-    public function getPapelGenericoCode($papel_id = 0){
+    public function getPapelGenericoCode($papel_id = 0)
+    {
         $builder = $this->db
             ->table($this->table . " t1")
             ->select("t2.code AS code")
@@ -339,8 +346,9 @@ class PapelImpresionModel extends \App\Models\BaseModel
         $result = $builder->get()->getResultObject();
         if (count($result) > 0) {
             return $result[0]->code;
-        }
-        else
+        } else
             return "";
     }
+
+    
 }

ci4/app/Services/PresupuestoClienteService.php

@@ -25,14 +25,13 @@ class PresupuestoClienteService extends BaseService
         $total_plana = -1;
         $hay_plana = false;
         if ($data['isColor']) {
+            if (count($plana) > 0) {
                 if ($data['datosPedido']->paginas == $data['paginas_color']) {
                     if (count($plana[1]) > 2)
                         $total_plana += floatval($plana[1]['total_impresion']);
                     else
                         return -1;
-            }
-                
-            elseif (count($plana) > 0) {
+                } else {
                     if (count($plana[0]) > 2 && count($plana[1]) > 2) {
                         $total_plana = 0.0;
                         foreach ($plana as $linea) {
@@ -41,6 +40,7 @@ class PresupuestoClienteService extends BaseService
                         }
                     }
                 }
+            }
         } else {
             foreach ($plana as $linea) {
                 if (count($linea) > 0)

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

@@ -36,7 +36,7 @@
         <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") ?>"
+                src="<?= site_url("assets/img/presupuestoCliente/tapa-dura-lomo-redondo.jpg") ?>"
                 alt="TapaDuraLomoRedondo">
             <label class="form-label">
                 Tapa dura lomo redondo

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

@@ -11,29 +11,36 @@
 
     <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">
+        <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">
+        <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">
+        <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">
+        <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>
@@ -42,144 +49,28 @@
     </div>
 
 
-    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
+    <div id="textoPapelInterior" class="col-sm-8 mb-3 d-flex flex-column align-items-center d-none">
         <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="divPapelInterior" name="div_papel_interior" class="row col-sm-10 mb-1 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">
+    <div id="divPapelEspecialInterior" name="div_papel_especial_interior"
+        class="row col-sm-10 mb-3 justify-content-center d-none">
+        <div class="col-sm-5 mb-0">
             <label for="titulo" class="form-label">
-                Offset Ahuesado
+                Seleccione el papel especial
             </label>
+            <select id="papelEspecialInterior" name="papel_especial_interior"
+                class="form-control select2bs2 calcular-presupuesto col-5 mb-0">
+            </select>
         </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>
 
 
@@ -189,17 +80,21 @@
     </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="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">
+        <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">
+        <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>
@@ -208,143 +103,32 @@
     </div>
 
 
-    <div class="col-sm-8 mb-3 d-flex flex-column align-items-center interior-color d-none">
+    <div id="textoPapelInteriorColor" 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="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">
+    <div id="divPapelEspecialInteriorColor" name="div_papel_especial_interior_color"
+        class="row col-sm-10 mb-3 justify-content-center d-none">
+        <div class="col-sm-5 mb-0">
             <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="" />
+                Seleccione el papel especial
             </label>
+            <select id="papelEspecialInteriorColor" name="papel_especial_interior_color"
+                class="form-control select2bs2 calcular-presupuesto col-5 mb-0">
+            </select>
         </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="divGramajeInteriorColor" name="div_gramaje_interior_color"
+        class="row col-sm-10 mb-3 justify-content-center d-none">
 
-        <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>
 

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/viewPresupuestoList.php

@@ -294,7 +294,6 @@ theTable = $('#tableOfPresupuestos').DataTable({
 
 theTable.on('click', 'tr', function () {
     var data = theTable.row(this).data();
-	console.log(data);
     var url = '/presupuestos/presupuestocliente/edit/' + data['id']; 
     window.location.href = url;
 });

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/viewPresupuestoclienteForm.php

@@ -11,7 +11,7 @@
 <?= view("themes/_commonPartialsBs/_modalInput") ?>
 <?= view("themes/vuexy/components/modals/modalDireccion") ?>
 
-<div class="container-xxl flex-grow-1 container-p-y">
+<div id="mainContainer" class="container-xxl flex-grow-1 container-p-y">
 
   <div class="col-12">
 
@@ -208,7 +208,7 @@
 
         </div>
 
-        <div class='divTiradasPrecio'></div>
+        <div class='mt-2 divTiradasPrecio'></div>
 
       </div> <!--//.bs-stepper-header -->
 

httpdocs/assets/js/safekat/common/common.js

@@ -0,0 +1,12 @@
+export function getToken()
+{        
+    const scriptUrl = new URL(import.meta.url);
+    const params = new URLSearchParams(scriptUrl.search);
+
+    const paramsObject = Object.fromEntries(params.entries());
+    return paramsObject.token;
+}
+
+export function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}

httpdocs/assets/js/safekat/components/select2.js

@@ -80,6 +80,9 @@ let ClassSelect = function (domItem, url, placeholder, allowClear = false, param
     this.getText = () => {
       return this.item.find(":selected").text();
     };
+    this.onChange = function(callback) {
+      this.item.on('change', callback);
+    };
   };
   
 export default ClassSelect;

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

@@ -4,7 +4,7 @@ class tarjetaDireccion {
         
         this.container = container;
         this.id = id;
-        this.direccionId = direccion.id;
+        this.direccionId = direccion.direccionId;
         this.card = this.#generateHTML(id, direccion);
         this.deleteBtn = this.card.find('.direccion-eliminar');
         this.editBtn = this.card.find('.direccion-editar');

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

@@ -806,14 +806,17 @@ class DatosGenerales {
             $(".papel-interior").removeClass('selected');
             $(".interior-color").removeClass('d-none');
             this.#handleInteriorLayout('mixto');
-
+            $("#divPapelInterior").empty();
+            $("#divGramajeInterior").empty();
+            $("#divPapelInteriorColor").empty();
+            $("#divGramajeInteriorColor").empty();
         }
         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);
+            $("#divPapelInterior").empty();
+            $("#divGramajeInterior").empty();
+            $("#divPapelInteriorColor").empty();
+            $("#divGramajeInteriorColor").empty();
             this.#handlePaginas();
         }
     }

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

@@ -33,7 +33,7 @@ class PresupuestoCliente {
         this.rl_sobrecubierta = $(".rl-sobrecubierta");
 
         this.datosGenerales = new DatosGenerales($("#datos-generales"), this.clientePresupuestoWizard, this.validationStepper);
-        this.disenioInterior = new DisenioInterior($("#interior-libro"), this.clientePresupuestoWizard, this.validationStepper);
+        this.disenioInterior = new DisenioInterior($("#interior-libro"), this.clientePresupuestoWizard, this.validationStepper, this);
         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);
@@ -108,6 +108,7 @@ class PresupuestoCliente {
             this.calcularPresupuesto = true;
         }
 
+
         $(".calcular-presupuesto").on('change', this.checkForm.bind(this));
     }
 
@@ -701,9 +702,11 @@ class PresupuestoCliente {
                     this.datosGenerales.cargarDatos(response.data.datosGenerales);
                     this.direcciones.handleChangeCliente();
 
+                    this.direcciones.cargarDatos(response.data.direcciones, response.data.datosGenerales);
+
                     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(() => {
 

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

@@ -1,4 +1,5 @@
 import previewFormas from "../preview.js";
+import { capitalizeFirstLetter } from "../../common/common.js";
 
 class Resumen {
     constructor(domItem, datosGenerales, disenioInterior, disenioCubierta) {
@@ -201,7 +202,7 @@ class Resumen {
     generate() {
 
         this.titulo.text(this.datosGenerales.titulo.val());
-        this.tipoLibro.text(this.capitalizeFirstLetter(this.datosGenerales.tiposLibro.filter('.selected').attr('id')));
+        this.tipoLibro.text(capitalizeFirstLetter(this.datosGenerales.tiposLibro.filter('.selected').attr('id')));
 
         let ancho = 0, alto = 0;
         if (this.datosGenerales.checkFormatoPersonalizado.is(':checked')) {
@@ -346,11 +347,6 @@ class Resumen {
     }
 
 
-    capitalizeFirstLetter(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-    }
-
-
     #changeDecimalFormat(number) {
 
         let cleanedNumber = String(number).replace(/[^\d.]/g, '');

httpdocs/themes/vuexy/css/presupuestoCliente.css

@@ -17,14 +17,17 @@
 
 /* Pseudo-elemento que muestra el tick */
 .image-container.selected::after {
-    content: '✔'; /* Símbolo de tick */
+    content: '✔';
+    /* Símbolo de tick */
     position: absolute;
     top: calc(50% + 5px);
-    left: calc(100%/2 + 65px); /* Mueve 75px a la derecha fuera del contenedor */
+    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 */
+    background-color: rgba(255, 255, 255, 0);
+    /* Fondo transparente */
     border-radius: 100%;
     padding: 5px;
 }
@@ -485,3 +488,65 @@
 .div-num-input {
     min-width: 105px;
 }
+
+
+.custom-selector{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 20px;
+    position: relative;
+    max-width: 300px;
+}
+
+/* Asegurar el tamaño uniforme del contenedor */
+.custom-selector-gramaje, .custom-selector-gramaje-color {
+    width: 100px !important; /* Fija el ancho */
+}
+
+.custom-selector {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 5px;
+    position: relative;
+    width: 250px; /* Fija el ancho */
+    height: 80px; /* Fija el alto */
+    padding: 0.5em;
+    box-sizing: border-box; /* Incluir padding en el tamaño total */
+    border: 3px solid transparent; /* Evitar deformaciones por borde */
+}
+
+/* Ocultar los radio buttons */
+.custom-selector input[type="radio"] {
+    display: none;
+}
+
+/* Estilo para el label */
+.custom-selector label {
+    position: relative;
+    color: black;
+    font-family: "Poppins", sans-serif;
+    cursor: pointer;
+    display: grid;
+    align-items: center;
+    width: 100%; /* Llenar todo el contenedor */
+    height: 100%; /* Llenar todo el contenedor */
+    flex: 1; /* Tomar el espacio disponible */
+    gap: 0.8em;
+    border: 1px solid #dbdade;
+    padding: 0.5em 1em;
+    border-radius: 0.5em;
+    text-align: center; /* Texto alineado a la izquierda */
+}
+
+
+/* Cambiar el estilo del label cuando está seleccionado */
+.custom-selector input[type="radio"]:checked + label {
+    background-color: #7367f0;
+    color: #ffffff;
+}