From 8da11ea1642039680c3361927cde4226637129fd Mon Sep 17 00:00:00 2001
From: JohannVelazquez <johannvelazquez@tododren.com>
Date: Fri, 10 Jul 2026 01:52:51 -0600
Subject: [PATCH] Prototipo: pantalla de login + ejemplo de tolerancia por fee
 en Edo. cuenta
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Login de demo (credenciales precargadas arturo@balam.mx) antes de entrar
  a la app; el chip de usuario en el sidebar ahora cierra sesión.
- Estado de cuenta · ACUNTIA: F-2026-0034 ilustra el caso real de la
  llamada del 7-jul (Arturo cruza pagos con Acuntia y los totales no
  cuadran por el fee) — Total/Pagado/Saldo alineados para comparar de un
  vistazo, más la alerta que traduce el residual ($180 MXN, dentro del
  umbral de $200) a lenguaje llano.
---
 prototipo/Prototipo-Etapa0.html | 131 +++++++++++++++++++++++++++++---
 1 file changed, 122 insertions(+), 9 deletions(-)

diff --git a/prototipo/Prototipo-Etapa0.html b/prototipo/Prototipo-Etapa0.html
index 7739bb0..7ec23a5 100644
--- a/prototipo/Prototipo-Etapa0.html
+++ b/prototipo/Prototipo-Etapa0.html
@@ -57,8 +57,46 @@
   .proto-banner .dot-sep{opacity:.45;font-weight:400}
   .proto-banner svg{width:15px;height:15px;flex:none}
 
+  /* ============ Login ============ */
+  .login-screen{
+    min-height:calc(100vh - var(--banner-h));display:grid;place-items:center;padding:32px;
+    background:var(--cafe);
+  }
+  .login-shell{
+    width:min(920px,100%);min-height:520px;display:grid;grid-template-columns:.88fr 1.12fr;
+    background:var(--blanco);border:1px solid rgba(247,189,12,.24);border-radius:18px;
+    overflow:hidden;box-shadow:var(--shadow-lg);
+  }
+  .login-brand{
+    background:var(--cafe-3);color:#F6F1E7;padding:44px 38px;display:flex;flex-direction:column;
+    justify-content:space-between;border-right:1px solid rgba(247,189,12,.18)
+  }
+  .login-logo{width:260px;max-width:100%}
+  .login-logo img{display:block;width:100%;height:auto}
+  .login-brand-copy h1{font-size:25px;line-height:1.25;margin:0 0 10px;font-weight:600;color:var(--blanco)}
+  .login-brand-copy p{font-size:12.5px;line-height:1.65;color:rgba(246,241,231,.68);margin:0}
+  .login-meta{font-size:10.5px;color:rgba(246,241,231,.46);letter-spacing:.04em}
+  .login-form-wrap{padding:52px 54px;display:flex;flex-direction:column;justify-content:center}
+  .login-kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:7px}
+  .login-title{font-size:25px;line-height:1.25;margin:0 0 6px;font-weight:600}
+  .login-sub{font-size:12px;color:var(--muted);margin:0 0 24px}
+  .login-field{margin-bottom:14px}
+  .login-field label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin-bottom:6px}
+  .login-field input{
+    width:100%;height:43px;border:1px solid var(--linea-2);border-radius:9px;padding:0 12px;
+    font:400 12.5px "Poppins",sans-serif;color:var(--ink);background:var(--blanco);outline:none
+  }
+  .login-field input:focus{border-color:var(--amarillo);box-shadow:0 0 0 3px rgba(247,189,12,.20)}
+  .login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px;font-size:11px;color:var(--muted)}
+  .login-options label{display:flex;align-items:center;gap:7px;cursor:pointer}
+  .login-options input{accent-color:var(--cafe)}
+  .login-submit{width:100%;justify-content:center;height:43px}
+  .login-error{display:none;color:var(--bad-ink);font-size:11px;margin:10px 0 0}
+  .login-demo{margin-top:18px;padding-top:15px;border-top:1px solid var(--linea);font-size:10.5px;color:var(--muted)}
+
   /* ============ Layout ============ */
-  .app{display:grid;grid-template-columns:268px 1fr;min-height:calc(100vh - var(--banner-h))}
+  .app{display:none;grid-template-columns:268px 1fr;min-height:calc(100vh - var(--banner-h))}
+  .app.is-authenticated{display:grid}
 
   /* ============ Sidebar café ============ */
   .sidebar{
@@ -93,7 +131,8 @@
   .dot{width:7px;height:7px;border-radius:50%;background:#3FBF71;box-shadow:0 0 6px #3FBF71}
   .bind-status .meta{color:rgba(232,223,206,.6);font-size:10.5px}
 
-  .user-chip{display:flex;align-items:center;gap:10px;padding:12px 10px 0;margin-top:10px;border-top:1px solid rgba(247,189,12,.14)}
+  .user-chip{display:flex;align-items:center;gap:10px;padding:12px 10px 0;margin-top:10px;border:0;border-top:1px solid rgba(247,189,12,.14);background:transparent;width:100%;font-family:inherit;text-align:left;cursor:pointer}
+  .user-chip:hover .user-name{color:var(--amarillo)}
   .avatar{width:34px;height:34px;border-radius:50%;background:var(--cafe-2);border:1.5px solid rgba(247,189,12,.5);color:var(--amarillo);display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
   .user-name{color:#F6F1E7;font-size:12.5px;font-weight:500;line-height:1.25}
   .user-role{color:rgba(217,205,187,.55);font-size:10.5px}
@@ -447,7 +486,13 @@
   }
   @media (max-width:900px){
     body{font-size:13px}
-    .app{display:block}
+    .app.is-authenticated{display:block}
+    .login-screen{padding:20px}
+    .login-shell{grid-template-columns:1fr;min-height:0;max-width:560px}
+    .login-brand{padding:27px 30px;border-right:0;border-bottom:1px solid rgba(247,189,12,.18)}
+    .login-brand-copy{display:none}
+    .login-logo{width:220px}
+    .login-form-wrap{padding:38px 32px}
     .sidebar{position:static;height:auto;padding:14px;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;align-items:center}
     .brand{width:100%;padding:0 4px 12px;margin-bottom:5px}
     .logo-mark{width:180px}
@@ -494,6 +539,10 @@
     .money-split{grid-template-columns:1fr}
     .dl{grid-template-columns:1fr}
     .card-pad{padding:18px}
+    .login-screen{padding:12px}
+    .login-brand{padding:22px}
+    .login-form-wrap{padding:30px 22px}
+    .login-title{font-size:22px}
   }
 </style>
 </head>
@@ -505,7 +554,45 @@
   Prototipo navegable — datos ficticios <span class="dot-sep">·</span> Etapa 0 <span class="dot-sep">·</span> Julio 2026
 </div>
 
-<div class="app">
+<!-- ================= Acceso ================= -->
+<section class="login-screen" id="login-screen">
+  <div class="login-shell">
+    <div class="login-brand">
+      <div class="login-logo">
+        <img src="logo-balam-oficial.png" alt="Balam Talento Estratégico">
+      </div>
+      <div class="login-brand-copy">
+        <h1>Facturación y cobranza bajo control.</h1>
+        <p>Operación conectada con BIND ERP, aprobación humana y trazabilidad por ticket Jira.</p>
+      </div>
+      <div class="login-meta">PLATAFORMA FINANCIERA · ETAPA 0</div>
+    </div>
+    <div class="login-form-wrap">
+      <div class="login-kicker">Acceso seguro</div>
+      <h2 class="login-title">Inicia sesión</h2>
+      <p class="login-sub">Ingresa con tu cuenta de Balam.</p>
+      <form onsubmit="login(event)">
+        <div class="login-field">
+          <label for="login-email">Correo</label>
+          <input id="login-email" type="email" value="arturo@balam.mx" autocomplete="username" required>
+        </div>
+        <div class="login-field">
+          <label for="login-password">Contraseña</label>
+          <input id="login-password" type="password" value="balam2026" autocomplete="current-password" required>
+        </div>
+        <div class="login-options">
+          <label><input type="checkbox" checked> Mantener sesión</label>
+          <span>Acceso interno</span>
+        </div>
+        <button class="btn btn-primary login-submit" type="submit">Entrar a Balam →</button>
+        <p class="login-error" id="login-error">Captura un correo y una contraseña válidos.</p>
+      </form>
+      <div class="login-demo">Prototipo navegable · credenciales precargadas</div>
+    </div>
+  </div>
+</section>
+
+<div class="app" id="app">
 
   <!-- ================= Sidebar ================= -->
   <aside class="sidebar">
@@ -555,13 +642,13 @@
       <div class="meta">Corte de datos: hoy 09:47 · próxima lectura aprox. 10:02<br>1,240 / 20,000 llamadas</div>
     </div>
 
-    <div class="user-chip">
+    <button class="user-chip" type="button" onclick="logout()" title="Cerrar sesión">
       <div class="avatar">AR</div>
       <div>
         <div class="user-name">Arturo R.</div>
         <div class="user-role">Administración · Facturación</div>
       </div>
-    </div>
+    </button>
   </aside>
 
   <!-- ================= Main ================= -->
@@ -1323,13 +1410,17 @@
               <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-0034</td><td>10-mar-2026</td><td class="num">$79,450.00</td><td class="num">$79,270.00</td><td class="num" style="color:var(--warn-ink);font-weight:600">$180.00</td><td><span class="chip chip-info">Pagada · tolerancia</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">
+            <div class="alert alert-warn" style="margin:12px 18px">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>
+              <span><b>Tolerancia por comisión — F-2026-0034:</b> facturado <b>$79,450.00</b> → pagado <b>$79,270.00</b> → diferencia <b>$180.00</b> por el fee bancario de la transferencia. Dentro del umbral configurable ($200 MXN), se marca <b>pagada</b> en vez de aparecer como morosa por $180 para siempre. Este es justo el caso que hoy Arturo cruza a mano contra el Excel que le manda el cliente.</span>
+            </div>
+            <div class="alert alert-info" style="margin:0 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>
+              <span>El pago del 08-jul (F-2026-0007) cubrió <b>enero</b> pero dejó <b>febrero</b> (F-2026-0019) 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>
@@ -1577,6 +1668,28 @@
 </div>
 
 <script>
+/* ============ Acceso de demostración ============ */
+function login(event){
+  event.preventDefault();
+  const email = document.getElementById('login-email').value.trim();
+  const password = document.getElementById('login-password').value.trim();
+  const error = document.getElementById('login-error');
+  if(!email.includes('@') || !password){
+    error.style.display = 'block';
+    return;
+  }
+  error.style.display = 'none';
+  document.getElementById('login-screen').style.display = 'none';
+  document.getElementById('app').classList.add('is-authenticated');
+  show('dashboard');
+}
+
+function logout(){
+  document.getElementById('app').classList.remove('is-authenticated');
+  document.getElementById('login-screen').style.display = 'grid';
+  window.scrollTo({top:0, behavior:'instant'});
+}
+
 /* ============ Navegación entre vistas ============ */
 const CRUMBS = {
   dashboard:'Dashboard',