From 5dc9f876182d64a8b825069b7e78dd10b401740d Mon Sep 17 00:00:00 2001
From: DANYDHSV <dhsv.141089@gmail.com>
Date: Wed, 11 Feb 2026 11:50:03 -0600
Subject: [PATCH] =?UTF-8?q?modificaci=C3=B3n=20del=20dise=C3=B1o=20del=20m?=
 =?UTF-8?q?=C3=B3dulo=20SPEI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public.php | 218 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 202 insertions(+), 16 deletions(-)

diff --git a/public.php b/public.php
index dc97b829..db160009 100755
--- a/public.php
+++ b/public.php
@@ -625,6 +625,150 @@ $installersData = json_decode($config['installersDataWhatsApp'] ?? '{"instalador
         #toast.show {
             transform: translate(-50%, 0);
         }
+
+        /* STRIPE MODULE REDESIGN */
+        .client-header-grid {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+            padding-bottom: 1.5rem;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 1.5rem;
+        }
+
+        .client-info h3 {
+            margin: 0 0 4px 0;
+            font-size: 1.25rem;
+        }
+
+        .client-info p {
+            margin: 0;
+            font-size: 0.9rem;
+        }
+
+        .client-balance {
+            text-align: right;
+        }
+
+        .client-balance .label {
+            display: block;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            margin-bottom: 4px;
+        }
+
+        .client-balance .badge {
+            font-size: 1.1rem;
+            padding: 6px 16px;
+        }
+
+        .details-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+            background: var(--bg-body);
+            padding: 1.5rem;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+        }
+
+        .detail-item label {
+            display: block;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-bottom: 6px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 700;
+        }
+
+        .detail-item .value-box {
+            font-family: 'Courier New', monospace;
+            font-size: 1rem;
+            color: var(--text-main);
+            word-break: break-all;
+            background: var(--bg-card);
+            padding: 8px 12px;
+            border-radius: 6px;
+            border: 1px solid var(--border);
+        }
+
+        .form-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        @media (max-width: 768px) {
+            .form-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .form-group {
+            margin-bottom: 0;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: var(--text-main);
+            font-size: 0.9rem;
+        }
+
+        .section-title {
+            margin: 0 0 1.5rem 0;
+            font-size: 1.1rem;
+            color: var(--text-main);
+            border-left: 4px solid var(--primary);
+            padding-left: 12px;
+        }
+
+        .input-group {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+        .input-prefix {
+            position: absolute;
+            left: 12px;
+            color: var(--text-muted);
+            font-weight: 500;
+            z-index: 10;
+        }
+
+        .input-with-prefix {
+            padding-left: 35px !important;
+        }
+
+        .actions-row {
+            display: flex;
+            gap: 1rem;
+            margin-top: 2rem;
+            justify-content: flex-end;
+        }
+
+        .btn-lg {
+            padding: 12px 24px;
+            font-size: 1rem;
+        }
+
+        .btn-outline {
+            background: transparent;
+            border: 2px solid var(--border);
+            color: var(--text-main);
+        }
+
+        .btn-outline:hover {
+            border-color: var(--primary);
+            color: var(--primary);
+        }
     </style>
 </head>
 
@@ -801,28 +945,70 @@ $installersData = json_decode($config['installersDataWhatsApp'] ?? '{"instalador
                 </div>
 
                 <div id="stripeDetailContainer" class="card" style="display: none;">
-                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem;">
-                        <div>
-                            <h3 id="stripeClientName">Nombre</h3>
+                    <!-- HEADER: CLIENT INFO & BALANCE -->
+                    <div class="client-header-grid">
+                        <div class="client-info">
+                            <h3 id="stripeClientName">Nombre del Cliente</h3>
                             <p id="stripeClientIdDisplay" style="color: var(--text-muted);">ID: #0</p>
                         </div>
-                        <span class="badge" id="stripeBalanceBadge">Saldo: $0.00</span>
+                        <div class="client-balance">
+                            <span class="label">Saldo Actual</span>
+                            <span class="badge" id="stripeBalanceBadge">$0.00</span>
+                        </div>
                     </div>
 
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
-                        <div><label>Stripe Customer ID</label><strong id="stripeCustomerIdDisplay">-</strong></div>
-                        <div><label>Clabe Interbancaria</label><strong id="stripeClabeDisplay">-</strong></div>
+                    <!-- TECHNICAL DETAILS GRID -->
+                    <div class="details-grid">
+                        <div class="detail-item">
+                            <label>Stripe Customer ID</label>
+                            <div class="value-box" id="stripeCustomerIdDisplay">-</div>
+                        </div>
+                        <div class="detail-item">
+                            <label>Clabe Interbancaria</label>
+                            <div class="value-box" id="stripeClabeDisplay">-</div>
+                        </div>
                     </div>
 
-                    <div style="max-width: 400px;">
-                        <input type="number" id="stripeAmount" class="form-control" placeholder="Monto (MXN)" style="margin-bottom: 1rem;">
-                        <select id="stripeAdminSelect" class="form-control" style="margin-bottom: 1rem;">
-                            <option value="">-- Automático --</option>
-                            <?php foreach ($admins as $admin): echo "<option value='{$admin['id']}'>{$admin['nombre']}</option>";
-                            endforeach; ?>
-                        </select>
-                        <a id="btnVerEnCrm" href="#" target="_blank" class="btn btn-secondary" style="width: 100%; margin-bottom: 1rem;">Ver en CRM</a>
-                        <button id="btnCreateIntent" class="btn btn-primary" style="width: 100%;">Generar Referencia SPEI</button>
+                    <!-- PAYMENT INTENT FORM -->
+                    <div>
+                        <h4 class="section-title">Generar Intención de Pago</h4>
+
+                        <div class="form-grid">
+                            <div class="form-group">
+                                <label>Monto a Cobrar</label>
+                                <div class="input-group">
+                                    <span class="input-prefix">$</span>
+                                    <input type="number" id="stripeAmount" class="form-control input-with-prefix" placeholder="0.00">
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label>Asignar a Administrador</label>
+                                <select id="stripeAdminSelect" class="form-control">
+                                    <option value="">-- Automático (Sistema) --</option>
+                                    <?php foreach ($admins as $admin): echo "<option value='{$admin['id']}'>{$admin['nombre']}</option>";
+                                    endforeach; ?>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="actions-row">
+                            <a id="btnVerEnCrm" href="#" target="_blank" class="btn btn-secondary btn-lg">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                                    <polyline points="15 3 21 3 21 9"></polyline>
+                                    <line x1="10" y1="14" x2="21" y2="3"></line>
+                                </svg>
+                                Ver en CRM
+                            </a>
+                            <button id="btnCreateIntent" class="btn btn-primary btn-lg">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+                                    <line x1="1" y1="10" x2="23" y2="10"></line>
+                                </svg>
+                                Generar Referencia SPEI
+                            </button>
+                        </div>
                     </div>
                 </div>
             </section>