From d3ae73a82d6366a16e67f7c7057da86177e3ca8f Mon Sep 17 00:00:00 2001
From: imnavajas <imnavajas@coit.es>
Date: Mon, 16 Sep 2024 22:02:54 +0200
Subject: [PATCH] Arreglo estetico de las opciones de impresion en presupuestos
 de clientes

---
 .../cliente/_disenioLibroItems.php            | 56 ++++++++++++-------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_disenioLibroItems.php b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_disenioLibroItems.php
index a646b22d..0516df66 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_disenioLibroItems.php
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_disenioLibroItems.php
@@ -200,62 +200,80 @@
         <h6> Color del interior </h6>
 
         <div class="row-color">
-
-            <div class="row mb-2 col-sm-6">
-
-                <div class="container col col-sm-3 d-flex justify-content-center">
+            <!-- Fila 1 -->
+            <div class="row mb-2">
+                <!-- Imagen 1 (Color Negro) -->
+                <div class="col-sm-4 offset-sm-1 d-flex flex-column align-items-center justify-content-center">
                     <div id="colorNegroDiv" class="form-check change-tipo-impresion custom-option-color custom-option custom-option-image custom-option-image-radio">
                         <label class="form-check-label custom-option-content" for="colorNegro">
                             <span class="custom-option-body">
-                                <img style="height:150px;width:240px" src="<?= site_url("assets/img/bn.png") ?>" alt="">
+                                <img style="height:150px;width:240px" src="<?= site_url('assets/img/bn.png') ?>" alt="">
                             </span>
                         </label>
-                        <input name="colorNegro" class="form-check-input calcular-presupuesto" type="radio" value="colorNegro" id="colorNegro" 
+                        <input name="colorNegro" class="form-check-input calcular-presupuesto" type="radio" value="colorNegro" id="colorNegro"
                             <?php echo ($datosPresupuesto->color_impresion == 'negro' ? ' checked=""': ''); ?> >
                     </div>
+                    <!-- Texto alineado debajo de la imagen -->
+                    <div>
+                        <h6 class="mt-2 text-center">Blanco y Negro Estándar</h6>
+                    </div>
                 </div>
 
-                <div class="container col col-sm-3 d-flex justify-content-center">
+                <!-- Imagen 2 (Color Negro HQ) -->
+                <div class="col-sm-4 d-flex flex-column align-items-center justify-content-center">
                     <div id="colorNegroHqDiv" class="form-check change-tipo-impresion custom-option-color custom-option custom-option-image custom-option-image-radio">
                         <label class="form-check-label custom-option-content" for="colorNegroHq">
                             <span class="custom-option-body">
-                                <img style="height:150px;width:240px" src="<?= site_url("assets/img//bn_hq.png") ?>" alt="">
+                                <img style="height:150px;width:240px" src="<?= site_url('assets/img/bn_hq.png') ?>" alt="">
                             </span>
                         </label>
                         <input name="colorNegroHq" class="form-check-input calcular-presupuesto" type="radio" value="colorNegroHq" id="colorNegroHq"
                             <?php echo ($datosPresupuesto->color_impresion == 'negroHq' ? ' checked=""': ''); ?> >
                     </div>
+                    <!-- Texto alineado debajo de la imagen -->
+                    <div>
+                        <h6 class="mt-2 text-center">Blanco y Negro Premium</h6>
+                    </div>
                 </div>
+            </div> <!-- //.row -->
 
-            </div> <!--//.row -->
-            <div class="row col-sm-6">
-
-                <div class="container col col-sm-3 d-flex justify-content-center">
+            <!-- Fila 2 -->
+            <div class="row mb-2">
+                <!-- Imagen 3 (Color) -->
+                <div class="col-sm-4 offset-sm-1 d-flex flex-column align-items-center justify-content-center">
                     <div id="colorColorDiv" class="form-check change-tipo-impresion custom-option-color custom-option custom-option-image custom-option-image-radio">
                         <label class="form-check-label custom-option-content" for="colorColor">
                             <span class="custom-option-body">
-                                <img style="height:150px;width:240px" src="<?= site_url("assets/img/color.png") ?>" alt="">
+                                <img style="height:150px;width:240px" src="<?= site_url('assets/img/color.png') ?>" alt="">
                             </span>
                         </label>
-                        <input name="colorColor" class="form-check-input calcular-presupuesto" type="radio" value="colorColor" id="colorColor" 
+                        <input name="colorColor" class="form-check-input calcular-presupuesto" type="radio" value="colorColor" id="colorColor"
                             <?php echo ($datosPresupuesto->color_impresion == 'color' ? ' checked=""': ''); ?> >
                     </div>
+                    <!-- Texto alineado debajo de la imagen -->
+                    <div>
+                        <h6 class="mt-2 text-center">Color Estándar</h6>
+                    </div>
                 </div>
 
-                <div class="container col col-sm-3 d-flex justify-content-center">
+                <!-- Imagen 4 (Color HQ) -->
+                <div class="col-sm-4 d-flex flex-column align-items-center justify-content-center">
                     <div id="colorColorHqDiv" class="form-check change-tipo-impresion custom-option-color custom-option custom-option-image custom-option-image-radio">
                         <label class="form-check-label custom-option-content" for="colorColorHq">
                             <span class="custom-option-body">
-                                <img style="height:150px;width:240px" src="<?= site_url("assets/img//color_hq.png") ?>" alt="">
+                                <img style="height:150px;width:240px" src="<?= site_url('assets/img/color_hq.png') ?>" alt="">
                             </span>
                         </label>
                         <input name="colorColorHq" class="form-check-input calcular-presupuesto" type="radio" value="colorColorHq" id="colorColorHq"
                             <?php echo ($datosPresupuesto->color_impresion == 'colorHq' ? ' checked=""': ''); ?> >
                     </div>
+                    <!-- Texto alineado debajo de la imagen -->
+                    <div>
+                        <h6 class="mt-2 text-center">Color Premium</h6>
+                    </div>
                 </div>
-
-            </div> <!--//.row -->
-        </div> <!--//.row-color -->
+            </div> <!-- //.row -->
+        </div> <!-- //.row-color -->
 
         <div id="pagColorDiv" class="row">
             <div class="col-sm-3 mb-3">