Prototipo: "Edo. cuenta" abre modal en vez de panel inline/toast

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

@@ -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,7 +1307,8 @@
         </div>
 
         <!-- Estado de cuenta por cliente (ejemplo: ACUNTIA) -->
-        <div class="card mb20" id="edo-cuenta" style="display:none;overflow:hidden">
+        <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>
@@ -1326,6 +1331,8 @@
               <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>
+            <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>
 
       </section>
@@ -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;