From 61c59f823ab5484db8f7ae5a2cf42530f4a92620 Mon Sep 17 00:00:00 2001
From: Carlos Alberto <stonetech@Carlos-MacBook-Pro.local>
Date: Wed, 30 Sep 2026 10:44:04 +0100
Subject: [PATCH] fix(leads): keep form actions visible

---
 src/front/pages/Leads.jsx  | 13 ++++----
 src/front/styles/leads.css | 68 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 src/front/styles/leads.css

diff --git a/src/front/pages/Leads.jsx b/src/front/pages/Leads.jsx
index f4176d1..bae2aaa 100644
--- a/src/front/pages/Leads.jsx
+++ b/src/front/pages/Leads.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { leadService } from "../services/leadService";
+import "../styles/leads.css";
 
 const STATUS_LABELS = {
     new: "Nuevo",
@@ -683,9 +684,9 @@ export const Leads = () => {
             {showLeadForm && (
                 <>
                     <div className="modal-backdrop fade show"></div>
-                    <div className="modal fade show d-block" tabIndex="-1" role="dialog" aria-modal="true">
-                        <div className="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
-                            <div className="modal-content border-0 shadow-lg bg-white text-dark" style={{ borderRadius: "18px" }}>
+                    <div className="modal fade show d-block lead-form-modal" tabIndex="-1" role="dialog" aria-modal="true">
+                        <div className="modal-dialog modal-dialog-centered modal-lg lead-form-dialog">
+                            <div className="modal-content border-0 shadow-lg bg-white text-dark lead-form-content" style={{ borderRadius: "18px" }}>
                                 <div className="modal-header border-0 px-4 pt-4 pb-2">
                                     <div>
                                         <h5 className="modal-title fw-bold">
@@ -701,8 +702,8 @@ export const Leads = () => {
                                         onClick={() => setShowLeadForm(false)}
                                     ></button>
                                 </div>
-                                <form onSubmit={saveLead}>
-                                    <div className="modal-body px-4 py-3">
+                                <form className="lead-form-shell" onSubmit={saveLead}>
+                                    <div className="modal-body px-4 py-3 lead-form-body">
                                         <div className="row g-3">
                                             <div className="col-md-6">
                                                 <label className="form-label small fw-semibold">Nombre *</label>
@@ -782,7 +783,7 @@ export const Leads = () => {
                                         </div>
                                         {formError && <div className="alert alert-danger mt-3 mb-0">{formError}</div>}
                                     </div>
-                                    <div className="modal-footer border-0 bg-light px-4 py-3">
+                                    <div className="modal-footer border-0 bg-light px-4 py-3 lead-form-footer">
                                         <button type="button" className="btn btn-outline-secondary px-4" disabled={saving} onClick={() => setShowLeadForm(false)}>Cancelar</button>
                                         <button type="submit" className="btn btn-primary px-4 fw-semibold" style={{ backgroundColor: "#635bff", border: "none" }} disabled={saving}>
                                             {saving ? "Guardando..." : editingLeadId ? "Guardar cambios" : "Guardar lead"}
diff --git a/src/front/styles/leads.css b/src/front/styles/leads.css
new file mode 100644
index 0000000..af1b6ce
--- /dev/null
+++ b/src/front/styles/leads.css
@@ -0,0 +1,68 @@
+.lead-form-modal {
+    overflow-y: auto;
+    padding: 0.75rem 0;
+}
+
+.lead-form-dialog {
+    height: calc(100dvh - 1.5rem);
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.lead-form-content {
+    max-height: 100%;
+    overflow: hidden;
+}
+
+.lead-form-content > .modal-header {
+    flex: 0 0 auto;
+}
+
+.lead-form-shell {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.lead-form-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.lead-form-footer {
+    flex: 0 0 auto;
+    position: relative;
+    z-index: 1;
+    border-top: 1px solid #e7e9f0 !important;
+    box-shadow: 0 -8px 20px rgb(15 23 42 / 6%);
+}
+
+@media (max-width: 767.98px) {
+    .lead-form-modal {
+        padding: 0;
+    }
+
+    .lead-form-dialog {
+        width: 100%;
+        max-width: none;
+        height: 100dvh;
+        min-height: 100dvh;
+        margin: 0;
+    }
+
+    .lead-form-content {
+        min-height: 100dvh;
+        border-radius: 0 !important;
+    }
+
+    .lead-form-footer {
+        flex-wrap: nowrap;
+    }
+
+    .lead-form-footer .btn {
+        flex: 1 1 0;
+    }
+}