From a2104f2a63ff674cce0d5474cb4418af607e2265 Mon Sep 17 00:00:00 2001
From: JohannVelazquez <johannvelazquez@tododren.com>
Date: Fri, 10 Jul 2026 01:22:32 -0600
Subject: [PATCH] Prototipo: "Edo. cuenta" abre modal en vez de panel
 inline/toast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Antes solo la fila de ACUNTIA abría un panel embebido en la página; las
otras tres mostraban un toast aclarando que era demo. Ahora las 4 abren
el mismo modal (backdrop oscuro, cierra con click fuera o Escape),
consistente con el pedido de revisar Cobranza para la reunión de mañana.
---
 prototipo/Prototipo-Etapa0.html | 62 +++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/prototipo/Prototipo-Etapa0.html b/prototipo/Prototipo-Etapa0.html
index b7fc09a..7739bb0 100644
--- a/prototipo/Prototipo-Etapa0.html
+++ b/prototipo/Prototipo-Etapa0.html
@@ -136,6 +136,10 @@
   .card-title{font-size:14px;font-weight:600;margin:0 0 2px}
   .card-sub{font-size:11px;color:var(--muted);font-weight:400;margin:0 0 10px}
 
+  /* Modal */
+  .modal-backdrop{position:fixed;inset:0;background:rgba(51,31,14,.42);z-index:200;display:flex;align-items:center;justify-content:center;padding:30px}
+  .modal-box{background:var(--blanco);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:760px;width:100%;max-height:88vh;overflow:auto}
+
   .btn{
     display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;
     font-family:"Poppins",sans-serif;font-size:12.5px;font-weight:500;cursor:pointer;
@@ -1285,9 +1289,9 @@
             <thead><tr><th>Folio</th><th>Cliente</th><th class="num">Monto</th><th>Vencimiento</th><th>Días de mora</th><th></th></tr></thead>
             <tbody>
               <tr><td class="mono">F-2026-0019</td><td>ACUNTIA</td><td class="num">$86,200.00 MXN</td><td>16-mar-2026</td><td><span class="chip chip-bad">114 días · febrero</span></td><td><button class="btn btn-ghost btn-sm" onclick="edoCuenta()">Edo. cuenta</button></td></tr>
-              <tr><td class="mono">F-2026-0058</td><td>Regiotour</td><td class="num">$85,700.00 MXN</td><td>26-abr-2026</td><td><span class="chip chip-bad">73 días</span></td><td><button class="btn btn-ghost btn-sm" onclick="toast('Estado de cuenta ejemplificado con ACUNTIA en este prototipo.')">Edo. cuenta</button></td></tr>
-              <tr><td class="mono">F-2026-0087</td><td>Dilo</td><td class="num">$124,700.00 MXN</td><td>28-may-2026</td><td><span class="chip chip-warn">41 días</span></td><td><button class="btn btn-ghost btn-sm" onclick="toast('Estado de cuenta ejemplificado con ACUNTIA en este prototipo.')">Edo. cuenta</button></td></tr>
-              <tr><td class="mono">INV-2026-0102</td><td>Axie</td><td class="num">$11,750.00 USD</td><td>31-may-2026</td><td><span class="chip chip-warn">38 días</span></td><td><button class="btn btn-ghost btn-sm" onclick="toast('Estado de cuenta ejemplificado con ACUNTIA en este prototipo.')">Edo. cuenta</button></td></tr>
+              <tr><td class="mono">F-2026-0058</td><td>Regiotour</td><td class="num">$85,700.00 MXN</td><td>26-abr-2026</td><td><span class="chip chip-bad">73 días</span></td><td><button class="btn btn-ghost btn-sm" onclick="edoCuenta()">Edo. cuenta</button></td></tr>
+              <tr><td class="mono">F-2026-0087</td><td>Dilo</td><td class="num">$124,700.00 MXN</td><td>28-may-2026</td><td><span class="chip chip-warn">41 días</span></td><td><button class="btn btn-ghost btn-sm" onclick="edoCuenta()">Edo. cuenta</button></td></tr>
+              <tr><td class="mono">INV-2026-0102</td><td>Axie</td><td class="num">$11,750.00 USD</td><td>31-may-2026</td><td><span class="chip chip-warn">38 días</span></td><td><button class="btn btn-ghost btn-sm" onclick="edoCuenta()">Edo. cuenta</button></td></tr>
               <tr><td class="mono">F-2026-0114</td><td>Dilo</td><td class="num">$62,060.00 MXN</td><td>20-jun-2026</td><td><span class="chip chip-warn">18 días</span></td><td></td></tr>
               <tr><td class="mono">F-2026-0117</td><td>Regiotour</td><td class="num">$86,000.00 MXN</td><td>29-jun-2026</td><td><span class="chip chip-warn">9 días</span></td><td></td></tr>
               <tr><td class="mono">F-2026-0110</td><td>CEMEX</td><td class="num">$71,920.00 MXN</td><td>14-jul-2026</td><td><span class="chip chip-info">Vence en 6 días</span></td><td></td></tr>
@@ -1303,28 +1307,31 @@
         </div>
 
         <!-- Estado de cuenta por cliente (ejemplo: ACUNTIA) -->
-        <div class="card mb20" id="edo-cuenta" style="display:none;overflow:hidden">
-          <div style="padding:13px 18px;border-bottom:1px solid var(--linea)" class="spread">
-            <div>
-              <h3 class="card-title" style="margin:0">Estado de cuenta · ACUNTIA</h3>
-              <p class="card-sub" style="margin:2px 0 0">Facturas abiertas y pagos recientes.</p>
+        <div class="modal-backdrop" id="edo-cuenta" style="display:none" onclick="if(event.target===this) edoCuenta(false)">
+          <div class="modal-box">
+            <div style="padding:13px 18px;border-bottom:1px solid var(--linea)" class="spread">
+              <div>
+                <h3 class="card-title" style="margin:0">Estado de cuenta · ACUNTIA</h3>
+                <p class="card-sub" style="margin:2px 0 0">Facturas abiertas y pagos recientes.</p>
+              </div>
+              <div style="display:flex;gap:8px">
+                <button class="btn btn-ghost btn-sm" onclick="toast('Estado de cuenta exportado a PDF/XLSX (demo).')">Exportar</button>
+                <button class="btn btn-ghost btn-sm" onclick="edoCuenta(false)">Cerrar ✕</button>
+              </div>
             </div>
-            <div style="display:flex;gap:8px">
-              <button class="btn btn-ghost btn-sm" onclick="toast('Estado de cuenta exportado a PDF/XLSX (demo).')">Exportar</button>
-              <button class="btn btn-ghost btn-sm" onclick="edoCuenta(false)">Cerrar ✕</button>
+            <table class="tbl" style="font-size:12px">
+              <thead><tr><th>Folio</th><th>Emitida</th><th class="num">Total</th><th class="num">Pagado</th><th class="num">Saldo</th><th>Estatus</th></tr></thead>
+              <tbody>
+                <tr><td class="mono">F-2026-0019</td><td>12-feb-2026</td><td class="num">$86,200.00</td><td class="num">$0.00</td><td class="num" style="color:var(--bad-ink);font-weight:600">$86,200.00</td><td><span class="chip chip-bad">Vencida · 114 días</span></td></tr>
+                <tr><td class="mono">F-2026-0034</td><td>10-mar-2026</td><td class="num">$79,450.00</td><td class="num">$79,450.00</td><td class="num">$0.00</td><td><span class="chip chip-ok">Pagada · 22-jun</span></td></tr>
+                <tr><td class="mono">F-2026-0007</td><td>09-ene-2026</td><td class="num">$86,200.00</td><td class="num">$86,200.00</td><td class="num">$0.00</td><td><span class="chip chip-ok">Pagada · 08-jul</span></td></tr>
+              </tbody>
+            </table>
+            <div class="alert alert-info" style="margin:12px 18px 16px">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>
+              <span>El pago del 08-jul cubrió <b>enero</b> pero dejó <b>febrero</b> abierta — pago fuera de orden. El estado de cuenta <b>por folio</b> deja el cruce claro para ambos lados (hoy ese cruce se hace intercambiando Exceles con el cliente).</span>
             </div>
-          </div>
-          <table class="tbl" style="font-size:12px">
-            <thead><tr><th>Folio</th><th>Emitida</th><th class="num">Total</th><th class="num">Pagado</th><th class="num">Saldo</th><th>Estatus</th></tr></thead>
-            <tbody>
-              <tr><td class="mono">F-2026-0019</td><td>12-feb-2026</td><td class="num">$86,200.00</td><td class="num">$0.00</td><td class="num" style="color:var(--bad-ink);font-weight:600">$86,200.00</td><td><span class="chip chip-bad">Vencida · 114 días</span></td></tr>
-              <tr><td class="mono">F-2026-0034</td><td>10-mar-2026</td><td class="num">$79,450.00</td><td class="num">$79,450.00</td><td class="num">$0.00</td><td><span class="chip chip-ok">Pagada · 22-jun</span></td></tr>
-              <tr><td class="mono">F-2026-0007</td><td>09-ene-2026</td><td class="num">$86,200.00</td><td class="num">$86,200.00</td><td class="num">$0.00</td><td><span class="chip chip-ok">Pagada · 08-jul</span></td></tr>
-            </tbody>
-          </table>
-          <div class="alert alert-info" style="margin:12px 18px 16px">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>
-            <span>El pago del 08-jul cubrió <b>enero</b> pero dejó <b>febrero</b> abierta — pago fuera de orden. El estado de cuenta <b>por folio</b> deja el cruce claro para ambos lados (hoy ese cruce se hace intercambiando Exceles con el cliente).</span>
+            <p class="footnote" style="margin:0 18px 16px">Ejemplo con datos de ACUNTIA — en el prototipo las demás filas abren el mismo caso para ilustrar el formato.</p>
           </div>
         </div>
 
@@ -1693,12 +1700,13 @@ function updateSend(){
   }
 }
 
-/* ============ Cobranza: estado de cuenta por cliente ============ */
+/* ============ Cobranza: estado de cuenta por cliente (modal) ============ */
 function edoCuenta(open = true){
-  const el = document.getElementById('edo-cuenta');
-  el.style.display = open ? 'block' : 'none';
-  if(open) el.scrollIntoView({behavior:'instant', block:'start'});
+  document.getElementById('edo-cuenta').style.display = open ? 'flex' : 'none';
 }
+document.addEventListener('keydown', e => {
+  if(e.key === 'Escape') edoCuenta(false);
+});
 
 /* ============ Toast ============ */
 let toastTimer = null;