trabajando en el envio de los datos al backend para generar el resumen. no recibe bien el objeto presupuesto

src/main/resources/static/assets/css/presupuestador.css

@@ -213,7 +213,8 @@
 
 /* ===== Tiradas (pricing cards) ===== */
 .tirada-card {
-  --il-accent: #92b2a7; /* verde grisáceo */
+  --il-accent: #92b2a7;
+  /* verde grisáceo */
   --radius: 18px;
   --sel-scale-y: 1.12;
   /* cuánto más alta la seleccionada (crece arriba y abajo) */
@@ -352,19 +353,23 @@
 
 
 .nav-link.active .bg-soft-primary {
-  background-color: #ffffff33 !important; /* #4c5c63 al 20% */
+  background-color: #ffffff33 !important;
+  /* #4c5c63 al 20% */
 }
 
 .nav-link.active .text-primary {
-  color: #ffffff !important; /* #4c5c63 al 20% */
+  color: #ffffff !important;
+  /* #4c5c63 al 20% */
 }
 
 .nav-link:not(.active) .bg-soft-primary {
-  background-color: #4c5c6366  !important; /* #4c5c63 al 20% */
+  background-color: #4c5c6366 !important;
+  /* #4c5c63 al 20% */
 }
 
 .nav-link:not(.active) .text-primary {
-  color: #000000 !important; /* #4c5c63 al 20% */
+  color: #000000 !important;
+  /* #4c5c63 al 20% */
 }
 
 /* base */
@@ -376,20 +381,20 @@
 }
 
 /* hover no seleccionado */
-.btn-check-service + .btn-service-option:hover {
+.btn-check-service+.btn-service-option:hover {
   background-color: rgba(146, 178, 167, 0.3);
   color: #92b2a7;
 }
 
 /* seleccionado */
-.btn-check-service:checked + .btn-service-option {
+.btn-check-service:checked+.btn-service-option {
   background-color: #92b2a7;
   color: #fff;
   border-color: #92b2a7;
 }
 
 /* hover estando seleccionado (que no se aclare) */
-.btn-check-service:checked + .btn-service-option:hover {
+.btn-check-service:checked+.btn-service-option:hover {
   background-color: #92b2a7;
   color: #fff;
 }
@@ -407,4 +412,70 @@
 
 .form-switch-custom.form-switch-presupuesto .form-check-input:checked::before {
   color: #92b2a7;
+}
+
+/* ==== Paso al resumen ==== */
+/* ---- Ajustes rápidos  ---- */
+/* Valores por defecto (col-9 / col-3 ≈ 75% / 25%) */
+#presupuesto-row{
+  --main-col: 75%;
+  --summary-col: 25%;
+  --il-dur-main: 1.4s;
+  --il-dur-summary: .6s;
+  --il-delay-main: .15s;     /* empieza un poco después */
+  --il-delay-summary: 0s;
+  --il-ease-main: cubic-bezier(.2,.8,.2,1);
+  --il-ease-summary: cubic-bezier(.4,0,.2,1);
+  --il-shift: 32px;
+}
+
+/* Forzamos que el ancho venga de las variables (y sea animable) */
+@media (prefers-reduced-motion: no-preference){
+  #presupuesto-row .col-main{
+    flex: 0 0 var(--main-col) !important;
+    max-width: var(--main-col) !important;
+    transition:
+      flex-basis var(--il-dur-main) var(--il-ease-main) var(--il-delay-main),
+      max-width var(--il-dur-main) var(--il-ease-main) var(--il-delay-main);
+  }
+  #presupuesto-row .summary-col{
+    flex: 0 0 var(--summary-col) !important;
+    max-width: var(--summary-col) !important;
+    transition:
+      flex-basis var(--il-dur-summary) var(--il-ease-summary) var(--il-delay-summary),
+      max-width var(--il-dur-summary) var(--il-ease-summary) var(--il-delay-summary),
+      opacity var(--il-dur-summary) var(--il-ease-summary) var(--il-delay-summary),
+      transform var(--il-dur-summary) var(--il-ease-summary) var(--il-delay-summary);
+  }
+}
+
+/* Estado expandido: cambiamos SOLO las variables (esto sí se anima) */
+#presupuesto-row.expanded{
+  --main-col: 100%;
+  --summary-col: 0%;
+}
+
+#presupuesto-row.expanded .summary-col{
+  opacity: 0;
+  transform: translateX(var(--il-shift));
+  pointer-events: none;
+  overflow: hidden;
+}
+
+@media (min-width: 1200px){
+  /* Evita que las columnas se vayan a la siguiente línea durante la animación */
+  #presupuesto-row{
+    display: flex;         /* por si acaso algún wrapper cambia el display */
+    flex-wrap: nowrap;     /* <-- clave */
+    align-items: stretch;
+  }
+  /* Permite que las columnas puedan encoger sin forzar salto de línea */
+  #presupuesto-row .col-main,
+  #presupuesto-row .summary-col{
+    min-width: 0;          /* <-- clave para que el contenido no fuerce ancho */
+  }
+  /* Opcional: evita “asomar” algo durante el slide */
+  #presupuesto-row .summary-col{
+    overflow: hidden;
+  }
 }

src/main/resources/static/assets/js/pages/imprimelibros/presupuestador/presupuestador.js

@@ -1388,6 +1388,20 @@ class PresupuestoCliente {
                 this.#changeTab('pills-seleccion-tirada');
                 this.summaryTableExtras.addClass('d-none');
             } else {
+                const data = Summary.getSummaryData();
+                $.ajax({
+                    url: '/presupuesto/public/getresumen',
+                    type: 'GET',
+                    data: {
+                        presupuesto: this.#getPresupuestoData(),
+                        summary: data,
+                    }
+                }).then((data) => {
+                    console.log("Extras validados correctamente", data);
+                }).catch((error) => {
+                    console.error("Error obtener resumen: ", error);
+                });
+
                 this.#changeTab('pills-resumen');
             }
         });
@@ -1443,21 +1457,40 @@ class PresupuestoCliente {
      * END EXTRAS
      ******************************/
 
-   
+
     /******************************
-     * EXTRAS
+     * RESUMEN
      ******************************/
     #initResumen() {
+        const $row = $('#presupuesto-row');
 
+        // 1) Transición al cambiar de pestaña (click o programático)
+        $(document).on('shown.bs.tab', '.custom-nav .nav-link', (e) => {
+            const targetSelector = $(e.target).data('bs-target'); // ej: "#pills-resumen"
+            if (targetSelector === '#pills-resumen') {
+                $row.addClass('expanded');
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } else {
+                $row.removeClass('expanded');
+            }
+        });
+
+        // 2) Botón "atrás" en Resumen
         $(document).on('click', '.btn-change-tab-resumen', (e) => {
-            const id = e.currentTarget.id;
-            if (id === 'btn-prev-resumen') {
+            if (e.currentTarget.id === 'btn-prev-resumen') {
                 this.#changeTab('pills-extras');
             }
         });
+
+        // 3) Estado inicial si ya cargas en Resumen
+        $(function () {
+            const activeTarget = $('.custom-nav .nav-link.active').data('bs-target');
+            $('#presupuesto-row').toggleClass('expanded', activeTarget === '#pills-resumen');
+        });
     }
+
     /******************************
-     * END EXTRAS
+     * END RESUMEN
      ******************************/
 }
 

src/main/resources/static/assets/js/pages/imprimelibros/presupuestador/summary.js

@@ -152,7 +152,7 @@ export function updateExtras() {
         const price = $(`label[for="${$servicio.attr('id')}"] .service-price`).text().trim() || $servicio.attr('price');
         const $row = $('<tr>').append(
             $('<td>').append($('<span>').text(resumen)),
-            $('<td class="text-end">').text(price)
+            $('<td class="text-end data-summary" data-id-summary="servicio-' + $servicio.attr('id') + '">').text(price)
         );
         $tbody.append($row);
     });
@@ -161,4 +161,22 @@ export function updateExtras() {
     } else {
         $table.addClass('d-none');
     }
+}
+
+export function getSummaryData() {
+    const data = {};
+
+    $(".data-summary").each(function () {
+        const $el = $(this);
+
+        // comprobar si la tabla y el tr están visibles
+        if ($el.closest("table").is(":visible") && $el.closest("tr").is(":visible")) {
+            const key = $el.data("id-summary"); // atributo data-id-summary
+            const value = $el.text().trim();    // texto visible
+
+            data[key] = value;
+        }
+    });
+
+    return data;
 }