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;
+  }
 }