JohannVelazquez
8da11ea164
- 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.
1845 lines
118 KiB
HTML
1845 lines
118 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es-MX">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Balam · Facturación y Cobranza — Prototipo Etapa 0</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ============ Tokens de marca (marca/Marca-Balam.md) ============ */
|
||
:root{
|
||
--amarillo:#F7BD0C; /* primario de marca */
|
||
--amarillo-hover:#E0AB06;
|
||
--amarillo-soft:#FDF3D3;
|
||
--cafe:#331F0E; /* fondo oscuro de marca / tinta */
|
||
--cafe-2:#4A2E15; /* superficie café clara (hover sidebar) */
|
||
--cafe-3:#241608; /* café profundo */
|
||
--blanco:#FFFFFF;
|
||
--gris:#5C5C5C; /* neutro de apoyo */
|
||
|
||
/* Derivados cálidos para superficies claras */
|
||
--crema:#FAF7F1; /* fondo de la app */
|
||
--crema-2:#F4EEE2; /* soft */
|
||
--linea:#E9E0CF;
|
||
--linea-2:#DDD2BC;
|
||
--ink:#331F0E;
|
||
--muted:#7C6C56;
|
||
--muted-2:#A5977F;
|
||
|
||
/* Semánticos (conviven con café/amarillo) */
|
||
--ok:#1E7A46; --ok-bg:#E5F3EA; --ok-ink:#155934;
|
||
--warn:#9A5B00; --warn-bg:#FCF0D0; --warn-ink:#7A4800; --warn-line:#E9C566;
|
||
--bad:#B3261E; --bad-bg:#FBE9E7; --bad-ink:#8C1D17;
|
||
--info:#175E8C; --info-bg:#E7F1F8; --info-ink:#114A70;
|
||
--neutral-bg:#EFE9DC; --neutral-ink:#6B5C47;
|
||
|
||
--radius:14px; --radius-sm:9px;
|
||
--shadow:0 1px 2px rgba(51,31,14,.05), 0 4px 14px rgba(51,31,14,.06);
|
||
--shadow-lg:0 6px 28px rgba(51,31,14,.14);
|
||
--banner-h:36px;
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html,body{margin:0;padding:0;background:var(--crema)}
|
||
body{font-family:"Poppins",system-ui,sans-serif;color:var(--ink);font-size:13.5px;line-height:1.55;padding-top:var(--banner-h)}
|
||
::selection{background:var(--amarillo);color:var(--cafe)}
|
||
|
||
/* ============ Banner fijo de prototipo ============ */
|
||
.proto-banner{
|
||
position:fixed;inset:0 0 auto 0;height:var(--banner-h);z-index:100;
|
||
background:var(--amarillo);color:var(--cafe);
|
||
display:flex;align-items:center;justify-content:center;gap:10px;
|
||
font-size:12px;font-weight:600;letter-spacing:.04em;
|
||
border-bottom:1px solid rgba(51,31,14,.18);
|
||
}
|
||
.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:none;grid-template-columns:268px 1fr;min-height:calc(100vh - var(--banner-h))}
|
||
.app.is-authenticated{display:grid}
|
||
|
||
/* ============ Sidebar café ============ */
|
||
.sidebar{
|
||
background:linear-gradient(180deg,var(--cafe) 0%,var(--cafe-3) 100%);
|
||
color:#D9CDBB;display:flex;flex-direction:column;padding:26px 16px 18px;
|
||
position:sticky;top:var(--banner-h);height:calc(100vh - var(--banner-h));
|
||
}
|
||
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 14px;border-bottom:1px solid rgba(247,189,12,.16);margin-bottom:10px}
|
||
.logo-mark{
|
||
width:198px;max-width:100%;display:flex;align-items:center;flex:none;
|
||
}
|
||
.logo-mark img{display:block;width:100%;height:auto}
|
||
|
||
.nav-label{color:rgba(217,205,187,.45);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:14px 12px 7px;font-weight:600}
|
||
.nav-item{
|
||
display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;cursor:pointer;
|
||
color:#D9CDBB;font-size:13px;font-weight:400;transition:background .13s,color .13s;margin-bottom:2px;
|
||
border:1px solid transparent;
|
||
}
|
||
.nav-item svg{width:18px;height:18px;flex:none;opacity:.75}
|
||
.nav-item:hover{background:rgba(247,189,12,.10);color:#F3EADA}
|
||
.nav-item.active{background:var(--amarillo);color:var(--cafe);font-weight:600;box-shadow:0 2px 12px rgba(247,189,12,.30)}
|
||
.nav-item.active svg{opacity:1}
|
||
.nav-num{margin-left:auto;font-size:10.5px;background:rgba(255,255,255,.14);color:#F3EADA;padding:1px 8px;border-radius:999px;font-weight:500}
|
||
.nav-item.active .nav-num{background:rgba(51,31,14,.16);color:var(--cafe)}
|
||
|
||
.bind-status{
|
||
margin-top:auto;background:rgba(247,189,12,.07);border:1px solid rgba(247,189,12,.18);border-radius:11px;
|
||
padding:11px 13px;font-size:11.5px;color:#E8DFCE;
|
||
}
|
||
.bind-status .row1{display:flex;align-items:center;gap:8px;font-weight:600;color:#fff;font-size:12px;margin-bottom:2px}
|
||
.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: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}
|
||
|
||
/* ============ Main / topbar ============ */
|
||
.main{min-width:0}
|
||
.topbar{
|
||
background:var(--blanco);border-bottom:1px solid var(--linea);padding:13px 34px;
|
||
display:flex;align-items:center;justify-content:space-between;gap:16px;
|
||
position:sticky;top:var(--banner-h);z-index:20;
|
||
}
|
||
.crumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
|
||
.crumbs .sep{color:var(--muted-2)}
|
||
.crumbs .current{color:var(--ink);font-weight:600}
|
||
.top-right{display:flex;align-items:center;gap:10px}
|
||
.pill{
|
||
display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);
|
||
background:var(--crema-2);border:1px solid var(--linea);padding:5px 11px;border-radius:999px;font-weight:500;
|
||
}
|
||
.pill b{color:var(--ink);font-weight:600}
|
||
.sync-context{
|
||
display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:9px;
|
||
color:var(--info-ink);background:var(--info-bg);border:1px solid #BCD7EA;
|
||
font-size:11px;font-weight:500;line-height:1.35;white-space:nowrap
|
||
}
|
||
.sync-context .dot{box-shadow:none;width:7px;height:7px}
|
||
.sync-context small{display:block;color:var(--info-ink);opacity:.72;font-size:9.5px;font-weight:400}
|
||
|
||
.content{padding:30px 34px 60px;max-width:1560px}
|
||
.view{display:none;animation:fadeIn .18s ease}
|
||
.view.active{display:block}
|
||
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
|
||
.view-title{font-size:23px;font-weight:600;letter-spacing:-.01em;margin:0 0 3px}
|
||
.view-sub{color:var(--muted);margin:0 0 16px;font-size:12.5px;font-weight:400;max-width:920px}
|
||
.view-sub b{font-weight:500;color:var(--ink)}
|
||
|
||
/* ============ Componentes base ============ */
|
||
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);box-shadow:var(--shadow)}
|
||
.card-pad{padding:22px 24px}
|
||
.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;
|
||
border:1px solid transparent;background:var(--blanco);transition:all .13s;line-height:1.3;
|
||
}
|
||
.btn-primary{background:var(--amarillo);color:var(--cafe);font-weight:600;box-shadow:0 2px 10px rgba(247,189,12,.35)}
|
||
.btn-primary:hover{background:var(--amarillo-hover)}
|
||
.btn-dark{background:var(--cafe);color:#F6F1E7}
|
||
.btn-dark:hover{background:var(--cafe-2)}
|
||
.btn-ghost{background:var(--blanco);color:var(--ink);border-color:var(--linea-2)}
|
||
.btn-ghost:hover{background:var(--crema-2)}
|
||
.btn-danger-ghost{background:var(--blanco);color:var(--bad);border-color:#EBC7C3}
|
||
.btn-danger-ghost:hover{background:var(--bad-bg)}
|
||
.btn-sm{padding:5px 11px;font-size:11.5px;border-radius:8px}
|
||
.btn-lg{padding:12px 22px;font-size:13.5px;border-radius:12px}
|
||
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
|
||
|
||
.chip{display:inline-flex;align-items:center;gap:5px;padding:2.5px 10px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap;line-height:1.6}
|
||
.chip-ok{background:var(--ok-bg);color:var(--ok-ink)}
|
||
.chip-warn{background:var(--warn-bg);color:var(--warn-ink)}
|
||
.chip-bad{background:var(--bad-bg);color:var(--bad-ink)}
|
||
.chip-info{background:var(--info-bg);color:var(--info-ink)}
|
||
.chip-neutral{background:var(--neutral-bg);color:var(--neutral-ink)}
|
||
.chip-brand{background:var(--amarillo-soft);color:#8A6400}
|
||
.chip-cafe{background:var(--cafe);color:var(--amarillo)}
|
||
.chip .cdot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
|
||
|
||
.alert{display:flex;gap:11px;padding:13px 16px;border-radius:11px;font-size:12.5px;line-height:1.55;border:1px solid}
|
||
.alert svg{width:17px;height:17px;flex:none;margin-top:1px}
|
||
.alert-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
|
||
.alert-bad{background:var(--bad-bg);border-color:#E9B8B3;color:var(--bad-ink)}
|
||
.alert-info{background:var(--info-bg);border-color:#BCD7EA;color:var(--info-ink)}
|
||
.alert-ok{background:var(--ok-bg);border-color:#B7DCC5;color:var(--ok-ink)}
|
||
.alert b{font-weight:600}
|
||
|
||
/* Tablas */
|
||
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
|
||
.tbl th{
|
||
text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
|
||
font-weight:600;padding:11px 14px;border-bottom:1px solid var(--linea);background:var(--crema);white-space:nowrap;
|
||
}
|
||
.tbl td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
|
||
.tbl tr:last-child td{border-bottom:none}
|
||
.tbl tbody tr{transition:background .12s}
|
||
.tbl tbody tr:hover{background:var(--crema)}
|
||
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
|
||
.tbl .mono{font-weight:600;color:var(--ink)}
|
||
.row-click{cursor:pointer}
|
||
|
||
/* Formularios */
|
||
.field label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
|
||
.field input[type=text],.field input[type=date],.field select,.field textarea{
|
||
width:100%;padding:9px 12px;border:1px solid var(--linea-2);border-radius:9px;font-family:"Poppins",sans-serif;
|
||
font-size:12.5px;color:var(--ink);background:var(--blanco);outline:none;transition:border .13s, box-shadow .13s;
|
||
}
|
||
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amarillo);box-shadow:0 0 0 3px rgba(247,189,12,.22)}
|
||
.field input[readonly],.field input:disabled,.field select:disabled{background:var(--crema-2);color:var(--muted);cursor:not-allowed}
|
||
.field .hint{font-size:10.5px;color:var(--muted-2);margin-top:4px;font-weight:300}
|
||
|
||
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
||
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
||
|
||
/* KPIs dashboard */
|
||
.kpi{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);padding:18px 20px 16px;box-shadow:var(--shadow);overflow:hidden}
|
||
.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--amarillo)}
|
||
.kpi.k-ok::before{background:var(--ok)}
|
||
.kpi.k-bad::before{background:var(--bad)}
|
||
.kpi.k-cafe::before{background:var(--cafe)}
|
||
.kpi-label{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
|
||
.kpi-value{font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
|
||
.kpi-value small{font-size:13px;font-weight:500;color:var(--muted)}
|
||
.kpi-meta{font-size:11.5px;color:var(--muted);margin-top:7px;font-weight:300}
|
||
.kpi-meta .up{color:var(--ok-ink);font-weight:500}
|
||
.kpi-meta .down{color:var(--bad-ink);font-weight:500}
|
||
.money-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:3px}
|
||
.money-line{border-left:3px solid var(--linea-2);padding-left:10px}
|
||
.money-line:first-child{border-left-color:var(--bad)}
|
||
.money-line:last-child{border-left-color:var(--info)}
|
||
.money-line b{display:block;font-size:20px;line-height:1.25;font-variant-numeric:tabular-nums}
|
||
.money-line small{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.06em}
|
||
|
||
/* Gráficas simples */
|
||
.bars{display:flex;align-items:flex-end;gap:26px;height:190px;padding:8px 6px 0}
|
||
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
|
||
.bar-val{font-size:10.5px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
|
||
.bar{width:100%;max-width:58px;border-radius:7px 7px 3px 3px;background:var(--cafe);transition:transform .15s}
|
||
.bar:hover{transform:scaleY(1.02);transform-origin:bottom}
|
||
.bar.cur{background:var(--amarillo);border:1.5px dashed #C79509}
|
||
.bar-mes{font-size:11px;color:var(--muted);font-weight:500}
|
||
.bar-mes.cur{color:var(--ink);font-weight:600}
|
||
|
||
.hbar-row{display:grid;grid-template-columns:96px 1fr 64px;align-items:center;gap:12px;margin-bottom:11px;font-size:12px}
|
||
.hbar-track{height:12px;background:var(--crema-2);border-radius:999px;overflow:hidden}
|
||
.hbar-fill{height:100%;border-radius:999px;background:var(--cafe)}
|
||
.hbar-fill.am{background:var(--amarillo)}
|
||
.hbar-n{color:var(--muted);font-size:11.5px;text-align:right;font-variant-numeric:tabular-nums}
|
||
|
||
/* Lista requiere atención */
|
||
.att-item{display:grid;grid-template-columns:auto minmax(0,1fr) 190px auto;align-items:center;gap:13px;padding:12px 6px;border-bottom:1px solid var(--linea);cursor:pointer;border-radius:8px;transition:background .12s}
|
||
.att-item:hover{background:var(--crema)}
|
||
.att-item:last-child{border-bottom:none}
|
||
.sev{width:9px;height:9px;border-radius:50%;flex:none}
|
||
.sev-bad{background:var(--bad)} .sev-warn{background:#DFA100} .sev-info{background:var(--info)}
|
||
.att-txt{flex:1;font-size:12.5px}
|
||
.att-txt b{font-weight:600}
|
||
.att-txt .att-sub{display:block;font-size:11px;color:var(--muted);font-weight:300}
|
||
.att-go{color:var(--muted-2);font-size:15px}
|
||
.att-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:10.5px;color:var(--muted)}
|
||
.att-meta span{display:block}
|
||
.att-meta b{display:block;color:var(--ink);font-size:11px;font-weight:600}
|
||
#view-dashboard.active{display:flex;flex-direction:column}
|
||
.dashboard-attention{order:1}
|
||
.dashboard-charts{order:2}
|
||
|
||
/* Filtros chips */
|
||
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
|
||
.fchip{
|
||
padding:6px 14px;border-radius:999px;border:1px solid var(--linea-2);background:var(--blanco);
|
||
font-family:"Poppins",sans-serif;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .12s;
|
||
}
|
||
.fchip:hover{border-color:var(--amarillo);color:var(--ink)}
|
||
.fchip.on{background:var(--cafe);border-color:var(--cafe);color:var(--amarillo);font-weight:600}
|
||
.search-box{margin-left:auto;position:relative}
|
||
.search-box input{
|
||
width:250px;padding:8px 12px 8px 34px;border:1px solid var(--linea-2);border-radius:999px;
|
||
font-family:"Poppins",sans-serif;font-size:12px;outline:none;background:var(--blanco);
|
||
}
|
||
.search-box input:focus{border-color:var(--amarillo);box-shadow:0 0 0 3px rgba(247,189,12,.2)}
|
||
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted-2)}
|
||
|
||
/* Detalle ticket */
|
||
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;margin-bottom:14px;border:none;background:none;font-family:"Poppins",sans-serif;padding:4px 8px;border-radius:7px}
|
||
.back-link:hover{background:var(--crema-2);color:var(--ink)}
|
||
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
|
||
.dl>div{padding:13px 16px;border-bottom:1px solid var(--linea)}
|
||
.dl dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin:0 0 3px}
|
||
.dl dd{margin:0;font-size:13px;font-weight:500}
|
||
.dl dd .chip{margin-left:0}
|
||
.attach{display:inline-flex;align-items:center;gap:6px;background:var(--crema-2);border:1px solid var(--linea);border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:500;margin:3px 6px 3px 0}
|
||
.attach svg{width:13px;height:13px;color:var(--muted)}
|
||
.attach.missing{border-style:dashed;color:var(--bad-ink);background:var(--bad-bg);border-color:#E9B8B3}
|
||
|
||
/* Wizard */
|
||
.stepper{display:flex;gap:0;margin-bottom:26px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
|
||
.step{
|
||
flex:1;display:flex;align-items:center;gap:10px;padding:13px 18px;font-size:12px;color:var(--muted);
|
||
border-right:1px solid var(--linea);position:relative;background:var(--blanco);
|
||
}
|
||
.step:last-child{border-right:none}
|
||
.step-n{
|
||
width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
|
||
background:var(--crema-2);color:var(--muted);font-weight:600;font-size:12px;border:1.5px solid var(--linea-2);
|
||
}
|
||
.step.cur{background:var(--amarillo-soft)}
|
||
.step.cur .step-n{background:var(--amarillo);border-color:var(--amarillo);color:var(--cafe)}
|
||
.step.cur .step-t{color:var(--ink);font-weight:600}
|
||
.step.done .step-n{background:var(--ok);border-color:var(--ok);color:#fff}
|
||
.step.done .step-t{color:var(--ok-ink)}
|
||
.step-t b{display:block;font-weight:inherit}
|
||
.step-t small{font-size:10px;color:var(--muted-2);font-weight:400;display:block;line-height:1.2}
|
||
|
||
.wiz-pane{display:none}
|
||
.wiz-pane.active{display:block;animation:fadeIn .18s ease}
|
||
.wiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:12px}
|
||
|
||
.ticket-ribbon{
|
||
display:flex;align-items:center;gap:14px;background:var(--cafe);color:#EFE6D6;border-radius:var(--radius);
|
||
padding:13px 20px;margin-bottom:20px;font-size:12.5px;box-shadow:var(--shadow);
|
||
}
|
||
.ticket-ribbon .tkid{background:var(--amarillo);color:var(--cafe);font-weight:700;border-radius:8px;padding:3px 11px;font-size:12px;letter-spacing:.02em}
|
||
.ticket-ribbon .sep{opacity:.35}
|
||
.ticket-ribbon b{color:#fff;font-weight:600}
|
||
|
||
/* Cotización card */
|
||
.quote-card{border:1.5px solid var(--linea-2);border-radius:var(--radius);padding:19px 22px;background:var(--blanco);transition:all .14s;cursor:pointer;position:relative}
|
||
.quote-card:hover{border-color:var(--amarillo)}
|
||
.quote-card.sel{border-color:var(--amarillo);box-shadow:0 0 0 3px rgba(247,189,12,.22);background:#FFFDF6}
|
||
.quote-card .radio{position:absolute;top:18px;right:18px;width:19px;height:19px;border-radius:50%;border:2px solid var(--linea-2);display:grid;place-items:center}
|
||
.quote-card.sel .radio{border-color:var(--amarillo);background:var(--amarillo)}
|
||
.quote-card.sel .radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--cafe)}
|
||
|
||
/* Radios PPD/PUE */
|
||
.pay-opt{display:flex;gap:12px}
|
||
.pay-card{flex:1;border:1.5px solid var(--linea-2);border-radius:12px;padding:15px 17px;cursor:pointer;transition:all .13s;background:var(--blanco)}
|
||
.pay-card:hover{border-color:var(--muted-2)}
|
||
.pay-card.sel{border-color:var(--amarillo);background:#FFFDF6;box-shadow:0 0 0 3px rgba(247,189,12,.18)}
|
||
.pay-card .pc-head{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;margin-bottom:3px}
|
||
.pay-card .pc-sub{font-size:11.5px;color:var(--muted);font-weight:300;line-height:1.5}
|
||
|
||
/* Prefactura / documento simulado */
|
||
.doc{
|
||
position:relative;background:var(--blanco);border:1px solid var(--linea-2);border-radius:var(--radius);
|
||
padding:30px 34px;overflow:hidden;box-shadow:var(--shadow);
|
||
}
|
||
.doc::after{
|
||
content:"SIMULACIÓN · SIN VALOR FISCAL";position:absolute;top:44%;left:50%;
|
||
transform:translate(-50%,-50%) rotate(-24deg);font-size:42px;font-weight:800;letter-spacing:.12em;
|
||
color:rgba(179,38,30,.08);white-space:nowrap;pointer-events:none;
|
||
}
|
||
.doc-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--cafe);padding-bottom:16px;margin-bottom:16px}
|
||
.doc h4{margin:0;font-size:15px;font-weight:700}
|
||
.doc .doc-meta{font-size:11px;color:var(--muted);line-height:1.6}
|
||
.doc .fol{font-size:12px;font-weight:700;color:var(--cafe);background:var(--amarillo-soft);border-radius:8px;padding:4px 12px;display:inline-block}
|
||
|
||
/* Checklist emisión */
|
||
.check-row{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid var(--linea);font-size:12.5px}
|
||
.check-row:last-child{border-bottom:none}
|
||
.check-ico{width:21px;height:21px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;flex:none}
|
||
.check-ico svg{width:12px;height:12px}
|
||
.check-row b{font-weight:600}
|
||
.check-row .cr-sub{color:var(--muted);font-size:11px;font-weight:300;display:block}
|
||
.approval-gate{border:1.5px solid var(--warn-line);background:#FFFDF6}
|
||
.approval-status{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--linea)}
|
||
.approval-status:last-child{border-bottom:none}
|
||
.approval-status .state-dot{width:9px;height:9px;border-radius:50%;background:var(--warn);margin-top:5px;flex:none}
|
||
.approval-status.ok .state-dot{background:var(--ok)}
|
||
.approval-status span{font-size:12px}
|
||
.approval-status small{display:block;color:var(--muted);font-size:10.5px;margin-top:2px}
|
||
|
||
/* Éxito */
|
||
.success-wrap{max-width:660px;margin:30px auto;text-align:center}
|
||
.success-ico{width:82px;height:82px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 20px;border:2px solid #B7DCC5}
|
||
.success-ico svg{width:40px;height:40px}
|
||
|
||
/* Envío */
|
||
.send-layout{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start}
|
||
.send-item{padding:14px 16px;border-bottom:1px solid var(--linea);cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:3px}
|
||
.send-item:last-child{border-bottom:none}
|
||
.send-item:hover{background:var(--crema)}
|
||
.send-item.sel{background:var(--amarillo-soft);border-left:4px solid var(--amarillo);padding-left:12px}
|
||
.send-item .si-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
|
||
.send-item .si-fol{font-weight:600;font-size:12.5px}
|
||
.send-item .si-cli{font-size:11.5px;color:var(--muted)}
|
||
|
||
.req-row{display:flex;align-items:flex-start;gap:11px;padding:10px 4px;border-bottom:1px solid var(--linea);font-size:12.5px}
|
||
.req-row:last-child{border-bottom:none}
|
||
.req-row input[type=checkbox]{width:17px;height:17px;accent-color:#1E7A46;margin-top:2px;cursor:pointer;flex:none}
|
||
.req-row.auto input{accent-color:var(--gris)}
|
||
.req-row .rq-sub{display:block;font-size:11px;color:var(--muted);font-weight:300}
|
||
|
||
.mail-preview{border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;background:var(--blanco)}
|
||
.mail-head{background:var(--crema);padding:13px 18px;border-bottom:1px solid var(--linea);font-size:12px}
|
||
.mail-head .mh-row{display:flex;gap:8px;margin-bottom:3px}
|
||
.mail-head .mh-row:last-child{margin-bottom:0}
|
||
.mail-head .mh-k{color:var(--muted);width:56px;flex:none;font-weight:500}
|
||
.mail-head .mh-v{font-weight:500}
|
||
.mail-body{padding:18px;font-size:12.5px;line-height:1.7;color:#4A3A28;font-weight:300}
|
||
.mail-body p{margin:0 0 10px}
|
||
.mail-attach{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px;border-top:1px dashed var(--linea-2);background:var(--crema)}
|
||
|
||
/* Cobranza aging */
|
||
.aging-card{display:grid;grid-template-columns:110px repeat(5,1fr) 130px;gap:0;align-items:stretch}
|
||
.aging-cell{padding:15px 16px;border-left:1px solid var(--linea);display:flex;flex-direction:column;gap:2px}
|
||
.aging-cur{display:flex;align-items:center;gap:9px;padding:15px 16px;font-weight:700;font-size:14px}
|
||
.aging-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
|
||
.aging-val{font-size:16.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
|
||
.aging-n{font-size:10.5px;color:var(--muted-2)}
|
||
.aging-cell.hot .aging-val{color:var(--bad-ink)}
|
||
.aging-cell.warm .aging-val{color:var(--warn-ink)}
|
||
.aging-total{background:var(--crema);border-left:1px solid var(--linea-2)}
|
||
|
||
/* Cobranza · pagos detectados y reglas de recordatorio */
|
||
.sync-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--ok-ink);background:var(--ok-bg);border-radius:99px;padding:4px 12px;white-space:nowrap}
|
||
.sync-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:syncPulse 2s infinite}
|
||
@keyframes syncPulse{0%,100%{opacity:1}50%{opacity:.35}}
|
||
.regla{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--linea)}
|
||
.regla:last-child{border-bottom:none}
|
||
.regla-d{font-weight:700;font-size:11.5px;min-width:46px;text-align:center;background:var(--crema);border:1px solid var(--linea-2);border-radius:8px;padding:6px 4px;flex:none;font-variant-numeric:tabular-nums}
|
||
.regla-txt{flex:1;font-size:12.5px;line-height:1.45}
|
||
.regla-txt small{display:block;font-size:11px;color:var(--muted);font-weight:300}
|
||
.regla .chip{flex:none}
|
||
.regla.off{opacity:.55}
|
||
|
||
.empty-state{text-align:center;padding:38px 20px;color:var(--muted)}
|
||
.empty-state .es-ico{width:52px;height:52px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 12px}
|
||
.empty-state .es-ico svg{width:24px;height:24px}
|
||
.empty-state b{color:var(--ink);font-weight:600;display:block;font-size:13.5px;margin-bottom:3px}
|
||
.empty-state p{font-size:12px;font-weight:300;margin:0;max-width:460px;margin-inline:auto}
|
||
|
||
/* Toast */
|
||
.toast{
|
||
position:fixed;bottom:26px;right:28px;z-index:200;background:var(--cafe);color:#F6F1E7;border-radius:12px;
|
||
padding:13px 18px;font-size:12.5px;display:none;align-items:center;gap:11px;box-shadow:var(--shadow-lg);
|
||
border:1px solid rgba(247,189,12,.35);max-width:430px;
|
||
}
|
||
.toast.show{display:flex;animation:fadeIn .2s ease}
|
||
.toast .tico{width:24px;height:24px;border-radius:50%;background:var(--amarillo);color:var(--cafe);display:grid;place-items:center;flex:none}
|
||
.toast .tico svg{width:13px;height:13px}
|
||
|
||
.footnote{font-size:11px;color:var(--muted-2);font-weight:300;margin-top:10px}
|
||
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
|
||
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}
|
||
.flex{display:flex;align-items:center;gap:10px}
|
||
.spread{display:flex;align-items:center;justify-content:space-between;gap:14px}
|
||
|
||
/* ============ Adaptación progresiva ============ */
|
||
@media (max-width:1200px){
|
||
.app{grid-template-columns:220px 1fr}
|
||
.content{padding:24px 24px 50px}
|
||
.grid4{grid-template-columns:repeat(2,1fr)}
|
||
.aging-card{min-width:980px}
|
||
.card:has(.aging-card){overflow-x:auto!important}
|
||
.topbar{padding-inline:24px}
|
||
}
|
||
@media (max-width:900px){
|
||
body{font-size:13px}
|
||
.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}
|
||
.nav-label{display:none}
|
||
.nav-item{padding:8px 10px;margin:0;font-size:11.5px}
|
||
.nav-item svg{width:15px;height:15px}
|
||
.bind-status{margin:7px 0 0;width:100%}
|
||
.user-chip{display:none}
|
||
.topbar{position:static;padding:10px 16px;align-items:flex-start;flex-wrap:wrap}
|
||
.crumbs>span:first-child,.top-right>.pill:last-child{display:none}
|
||
.top-right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
|
||
.content{padding:20px 16px 42px}
|
||
.view-title{font-size:20px}
|
||
.grid2,.grid3,.grid4,.send-layout,.pay-opt{grid-template-columns:1fr;display:grid}
|
||
.content [style*="grid-template-columns"]{grid-template-columns:1fr!important}
|
||
.dashboard-charts>*{min-width:0}
|
||
.bars{gap:10px}
|
||
.bar-val{font-size:9px}
|
||
.stepper{overflow-x:auto}
|
||
.step{min-width:175px}
|
||
.ticket-ribbon{flex-wrap:wrap}
|
||
.ticket-ribbon .sep{display:none}
|
||
.ticket-ribbon [style*="margin-left:auto"]{margin-left:0!important}
|
||
.att-item{grid-template-columns:auto minmax(0,1fr) auto}
|
||
.att-meta{grid-column:2;grid-row:2;grid-template-columns:auto auto;justify-content:start}
|
||
.att-go{grid-column:3;grid-row:1/3}
|
||
.filters{align-items:stretch}
|
||
.search-box{margin-left:0;width:100%}
|
||
.search-box input{width:100%}
|
||
.tbl{min-width:760px}
|
||
.card:has(.tbl){overflow-x:auto!important}
|
||
.doc{padding:22px 20px}
|
||
.wiz-foot{align-items:stretch;flex-direction:column}
|
||
.wiz-foot>.flex{flex-wrap:wrap}
|
||
}
|
||
@media (max-width:560px){
|
||
.grid4{grid-template-columns:1fr}
|
||
.proto-banner{font-size:10px;padding:0 10px;text-align:center}
|
||
.nav-item{flex:1 1 46%}
|
||
.nav-num{display:none}
|
||
.top-right{width:100%;margin-left:0;justify-content:flex-start}
|
||
.top-right>.pill{display:none}
|
||
.sync-context{width:100%;white-space:normal}
|
||
.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>
|
||
<body>
|
||
|
||
<!-- ================= Banner fijo ================= -->
|
||
<div class="proto-banner">
|
||
<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>
|
||
Prototipo navegable — datos ficticios <span class="dot-sep">·</span> Etapa 0 <span class="dot-sep">·</span> Julio 2026
|
||
</div>
|
||
|
||
<!-- ================= 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">
|
||
<div class="brand">
|
||
<div class="logo-mark">
|
||
<img src="logo-balam-oficial.png" alt="Balam Talento Estratégico">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-label" style="padding-top:2px">General</div>
|
||
<div class="nav-item active" data-view="dashboard">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5"/></svg>
|
||
Dashboard
|
||
</div>
|
||
|
||
<div class="nav-label">Facturación</div>
|
||
<div class="nav-item" data-view="solicitudes">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5v-9Z"/><path d="M3 7.5 12 12m0 0 9-4.5M12 12v9"/></svg>
|
||
Solicitudes (Jira)
|
||
<span class="nav-num">8</span>
|
||
</div>
|
||
<div class="nav-item" data-view="envio">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="m22 2-11 11M22 2 15 22l-4-9-9-4 20-7Z"/></svg>
|
||
Envío al cliente
|
||
<span class="nav-num">4</span>
|
||
</div>
|
||
|
||
<div class="nav-label">Cobranza</div>
|
||
<div class="nav-item" data-view="cobranza">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2.5"/></svg>
|
||
Cuentas por cobrar
|
||
<span class="nav-num">6</span>
|
||
</div>
|
||
<div class="nav-item" data-view="pagos">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
|
||
Pagos y recordatorios
|
||
</div>
|
||
|
||
<div class="nav-label">Trazabilidad</div>
|
||
<div class="nav-item" data-view="bitacora">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01"/></svg>
|
||
Bitácora
|
||
</div>
|
||
|
||
<div class="bind-status">
|
||
<div class="row1"><span class="dot"></span> BIND ERP · operativo</div>
|
||
<div class="meta">Corte de datos: hoy 09:47 · próxima lectura aprox. 10:02<br>1,240 / 20,000 llamadas</div>
|
||
</div>
|
||
|
||
<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>
|
||
</button>
|
||
</aside>
|
||
|
||
<!-- ================= Main ================= -->
|
||
<div class="main">
|
||
<div class="topbar">
|
||
<div class="crumbs">
|
||
<span>Balam · Plataforma de facturación y cobranza</span>
|
||
<span class="sep">/</span>
|
||
<span class="current" id="crumb">Dashboard</span>
|
||
</div>
|
||
<div class="top-right">
|
||
<span class="sync-context"><span class="dot"></span><span><b>BIND actualizado hace 4 min</b><small>Corte 09:47 · próxima lectura aprox. 10:02</small></span></span>
|
||
<span class="pill">TC DOF <b>$18.7342</b> MXN/USD · 08 jul 2026</span>
|
||
<span class="pill">Miércoles, 8 de julio de 2026</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- ============================================================
|
||
VISTA 1 · DASHBOARD
|
||
============================================================ -->
|
||
<section class="view active" id="view-dashboard">
|
||
<h1 class="view-title">Panel de control — Julio 2026</h1>
|
||
<p class="view-sub">Corte 8 jul · BIND ERP · importes separados por moneda.</p>
|
||
|
||
<div class="grid4 mb20">
|
||
<div class="kpi">
|
||
<div class="kpi-label">Facturado julio · MXN</div>
|
||
<div class="kpi-value">$486,300 <small>MXN</small></div>
|
||
<div class="kpi-meta">12 CFDI emitidos · <span class="up">▲ ritmo 8% vs jun</span></div>
|
||
</div>
|
||
<div class="kpi k-cafe">
|
||
<div class="kpi-label">Facturado julio · USD</div>
|
||
<div class="kpi-value">$10,350 <small>USD</small></div>
|
||
<div class="kpi-meta">2 invoices (extranjero, IVA 0%) · TC DOF $18.7342</div>
|
||
</div>
|
||
<div class="kpi k-ok">
|
||
<div class="kpi-label">Emitidas vs. pendientes</div>
|
||
<div class="kpi-value">14 <small>/ ~55 del mes</small></div>
|
||
<div class="kpi-meta">5 en proceso · 36 esperadas (recurrencias + tickets)</div>
|
||
</div>
|
||
<div class="kpi k-bad" onclick="show('cobranza')" style="cursor:pointer">
|
||
<div class="kpi-label">Cartera vencida</div>
|
||
<div class="money-split">
|
||
<div class="money-line"><small>MXN</small><b>$444,660</b></div>
|
||
<div class="money-line"><small>USD</small><b>$11,750</b></div>
|
||
</div>
|
||
<div class="kpi-meta">6 facturas vencidas · importes sin conversión · ver aging ›</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1.5fr 1fr;gap:20px" class="mb20 dashboard-charts">
|
||
<div class="card card-pad">
|
||
<div class="spread mb12">
|
||
<div>
|
||
<h3 class="card-title">Facturación mensual · MXN</h3>
|
||
<p class="card-sub" style="margin-bottom:0">Últimos 6 meses · julio en curso</p>
|
||
</div>
|
||
<span class="chip chip-neutral">Fuente: BIND ERP</span>
|
||
</div>
|
||
<div class="bars">
|
||
<div class="bar-col"><span class="bar-val">$1.62M</span><div class="bar" style="height:68%"></div><span class="bar-mes">Feb</span></div>
|
||
<div class="bar-col"><span class="bar-val">$1.78M</span><div class="bar" style="height:75%"></div><span class="bar-mes">Mar</span></div>
|
||
<div class="bar-col"><span class="bar-val">$1.71M</span><div class="bar" style="height:72%"></div><span class="bar-mes">Abr</span></div>
|
||
<div class="bar-col"><span class="bar-val">$1.85M</span><div class="bar" style="height:78%"></div><span class="bar-mes">May</span></div>
|
||
<div class="bar-col"><span class="bar-val">$1.93M</span><div class="bar" style="height:82%"></div><span class="bar-mes">Jun</span></div>
|
||
<div class="bar-col"><span class="bar-val">$0.49M</span><div class="bar cur" style="height:21%"></div><span class="bar-mes cur">Jul · en curso</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card-pad">
|
||
<h3 class="card-title">Facturas por cliente · junio</h3>
|
||
<p class="card-sub">54 emitidas · CEMEX factura por colaborador</p>
|
||
<div class="hbar-row"><span><b>CEMEX</b></span><div class="hbar-track"><div class="hbar-fill am" style="width:100%"></div></div><span class="hbar-n">38 fact.</span></div>
|
||
<div class="hbar-row"><span>ACUNTIA</span><div class="hbar-track"><div class="hbar-fill" style="width:18%"></div></div><span class="hbar-n">7 fact.</span></div>
|
||
<div class="hbar-row"><span>Axie</span><div class="hbar-track"><div class="hbar-fill" style="width:11%"></div></div><span class="hbar-n">4 fact.</span></div>
|
||
<div class="hbar-row"><span>Dilo</span><div class="hbar-track"><div class="hbar-fill" style="width:8%"></div></div><span class="hbar-n">3 fact.</span></div>
|
||
<div class="hbar-row"><span>Regiotour</span><div class="hbar-track"><div class="hbar-fill" style="width:5%"></div></div><span class="hbar-n">2 fact.</span></div>
|
||
<p class="footnote">4–6 clientes activos concentran ~55 facturas/mes.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card-pad dashboard-attention mb20">
|
||
<div class="spread mb8">
|
||
<div>
|
||
<h3 class="card-title">Qué necesita atención</h3>
|
||
<p class="card-sub" style="margin:2px 0 0">Prioridad, responsable y antigüedad.</p>
|
||
</div>
|
||
<span class="chip chip-warn"><span class="cdot"></span>5 pendientes</span>
|
||
</div>
|
||
<div class="att-item" onclick="show('solicitudes')">
|
||
<span class="sev sev-bad"></span>
|
||
<span class="att-txt"><b>FAC-0873 · Axie</b> — bloqueado: falta la <b>cotización BIND</b> (obligatoria para iniciar facturación).
|
||
<span class="att-sub">Solicitarla al área comercial antes de convertir a prefactura.</span></span>
|
||
<span class="att-meta"><span>Responsable<b>Araceli</b></span><span>Antigüedad<b>Hoy</b></span></span>
|
||
<span class="att-go">›</span>
|
||
</div>
|
||
<div class="att-item" onclick="show('cobranza')">
|
||
<span class="sev sev-bad"></span>
|
||
<span class="att-txt"><b>F-2026-0019 · ACUNTIA</b> — factura de <b>febrero</b> con 114 días vencida ($86,200 MXN).
|
||
<span class="att-sub">Cliente puntual sin seguimiento a tiempo — alerta interna escalada a administración.</span></span>
|
||
<span class="att-meta"><span>Responsable<b>Dirección</b></span><span>Antigüedad<b>114 días</b></span></span>
|
||
<span class="att-go">›</span>
|
||
</div>
|
||
<div class="att-item" onclick="show('emision')">
|
||
<span class="sev sev-warn"></span>
|
||
<span class="att-txt"><b>3 prefacturas en simulación</b> esperan aprobación humana antes de habilitar el timbrado.
|
||
<span class="att-sub">Aprobar y timbrar son acciones separadas; cada aprobación queda ligada a una versión.</span></span>
|
||
<span class="att-meta"><span>Responsable<b>Arturo</b></span><span>Antigüedad<b>38 min</b></span></span>
|
||
<span class="att-go">›</span>
|
||
</div>
|
||
<div class="att-item" onclick="show('solicitudes')">
|
||
<span class="sev sev-warn"></span>
|
||
<span class="att-txt"><b>FAC-0871 · Nuova Textil</b> — cliente nuevo <b>sin cédula de identificación fiscal</b> adjunta.
|
||
<span class="att-sub">El alta del cliente en BIND la realiza administración antes de poder cotizar.</span></span>
|
||
<span class="att-meta"><span>Responsable<b>Arturo</b></span><span>Antigüedad<b>Desde ayer</b></span></span>
|
||
<span class="att-go">›</span>
|
||
</div>
|
||
<div class="att-item" onclick="show('envio')">
|
||
<span class="sev sev-info"></span>
|
||
<span class="att-txt"><b>4 facturas emitidas sin enviar</b> — la facturación termina hasta que el correo sale con los adjuntos correctos.
|
||
<span class="att-sub">CEMEX requiere Excel de horas con VoBo + nomenclatura de asunto.</span></span>
|
||
<span class="att-meta"><span>Responsable<b>Arturo</b></span><span>Antigüedad<b>Desde ayer</b></span></span>
|
||
<span class="att-go">›</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
VISTA 2 · SOLICITUDES (JIRA)
|
||
============================================================ -->
|
||
<section class="view" id="view-solicitudes">
|
||
|
||
<!-- Bandeja -->
|
||
<div id="sol-lista">
|
||
<h1 class="view-title">Solicitudes de facturación — Jira ITSM</h1>
|
||
<p class="view-sub">Tickets de Jira asignados a Arturo · <b>sin ticket, no se factura</b>.</p>
|
||
|
||
<div class="filters">
|
||
<button class="fchip on">Todos (8)</button>
|
||
<button class="fchip">Por validar (3)</button>
|
||
<button class="fchip">Listos para facturar (3)</button>
|
||
<button class="fchip">Bloqueados (1)</button>
|
||
<button class="fchip">Facturados (1)</button>
|
||
<div class="search-box">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
|
||
<input type="text" placeholder="Buscar ticket, cliente, proyecto…" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="overflow:hidden">
|
||
<table class="tbl">
|
||
<thead>
|
||
<tr>
|
||
<th>Ticket</th><th>Tipo</th><th>Cliente</th><th>Proyecto / resumen</th>
|
||
<th>Moneda</th><th class="num">Monto est.</th><th>Crédito</th><th>Recurrente</th><th>Estatus</th><th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="row-click" onclick="show('sol-detalle')">
|
||
<td class="mono">FAC-0876</td>
|
||
<td><span class="chip chip-brand">Staff augmentation</span></td>
|
||
<td><b>CEMEX</b></td>
|
||
<td>Célula datos · Ing. Mariana Gutiérrez — julio</td>
|
||
<td>MXN</td><td class="num">$68,440</td><td>90 días</td>
|
||
<td><span class="chip chip-info">Mensual</span></td>
|
||
<td><span class="chip chip-ok"><span class="cdot"></span>Listo para facturar</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
<tr class="row-click" onclick="toast('Vista de detalle disponible para FAC-0876 (demo).')">
|
||
<td class="mono">FAC-0875</td>
|
||
<td><span class="chip chip-brand">Headhunting</span></td>
|
||
<td><b>Dilo</b></td>
|
||
<td>Cierre vacante Gerente TI — 50% restante (Luis Cantú)</td>
|
||
<td>MXN</td><td class="num">$95,700</td><td>30 días</td>
|
||
<td><span class="chip chip-neutral">No</span></td>
|
||
<td><span class="chip chip-ok"><span class="cdot"></span>Listo para facturar</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
<tr class="row-click" onclick="toast('Vista de detalle disponible para FAC-0876 (demo).')">
|
||
<td class="mono">FAC-0874</td>
|
||
<td><span class="chip chip-brand">Fact. adicional</span></td>
|
||
<td><b>Regiotour</b></td>
|
||
<td>Soporte plataforma reservas · horas extra junio</td>
|
||
<td>MXN</td><td class="num">$23,200</td><td>30 días</td>
|
||
<td><span class="chip chip-neutral">No</span></td>
|
||
<td><span class="chip chip-warn"><span class="cdot"></span>Por validar</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
<tr class="row-click" onclick="toast('FAC-0873 bloqueado: la cotización BIND es requisito para iniciar (regla del 6-jul).')">
|
||
<td class="mono">FAC-0873</td>
|
||
<td><span class="chip chip-brand">Staff augmentation</span></td>
|
||
<td><b>Axie</b></td>
|
||
<td>Squad desarrollo · 2 devs — julio (USD, extranjero)</td>
|
||
<td>USD</td><td class="num">$5,175</td><td>45 días</td>
|
||
<td><span class="chip chip-info">Mensual</span></td>
|
||
<td><span class="chip chip-bad"><span class="cdot"></span>Bloqueado · sin cotización</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
<tr class="row-click" onclick="toast('Cliente nuevo: administración da de alta en BIND (cédula fiscal pendiente) y avisa a comercial para cotizar.')">
|
||
<td class="mono">FAC-0871</td>
|
||
<td><span class="chip chip-brand">Headhunting</span></td>
|
||
<td><b>Nuova Textil</b> <span class="chip chip-warn" style="margin-left:5px">Cliente nuevo</span></td>
|
||
<td>Anticipo búsqueda Dir. Comercial</td>
|
||
<td>MXN</td><td class="num">$60,000</td><td>30 días</td>
|
||
<td><span class="chip chip-neutral">No</span></td>
|
||
<td><span class="chip chip-warn"><span class="cdot"></span>Alta de cliente en curso</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
<tr class="row-click" onclick="toast('Vista de detalle disponible para FAC-0876 (demo).')">
|
||
<td class="mono">FAC-0870</td>
|
||
<td><span class="chip chip-brand">Fact. adicional</span></td>
|
||
<td><b>ACUNTIA</b></td>
|
||
<td>Consultoría infraestructura · bolsa 40 h</td>
|
||
<td>MXN</td><td class="num">$34,800</td><td>30 días</td>
|
||
<td><span class="chip chip-neutral">No</span></td>
|
||
<td><span class="chip chip-ok"><span class="cdot"></span>Listo para facturar</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
<tr class="row-click" onclick="toast('Bajas restan del monto recurrente del siguiente periodo (demo).')">
|
||
<td class="mono">FAC-0869</td>
|
||
<td><span class="chip chip-cafe">Baja</span></td>
|
||
<td><b>CEMEX</b></td>
|
||
<td>Baja de colaborador · Ing. Raúl Peña (efectiva 15-jul)</td>
|
||
<td>MXN</td><td class="num">−$61,480</td><td>—</td>
|
||
<td><span class="chip chip-neutral">No</span></td>
|
||
<td><span class="chip chip-warn"><span class="cdot"></span>Por validar</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
<tr class="row-click" onclick="toast('FAC-0868 ya tiene CFDI vinculado: F-2026-0142 (evidencia PDF+XML en el ticket).')">
|
||
<td class="mono">FAC-0868</td>
|
||
<td><span class="chip chip-brand">Staff augmentation</span></td>
|
||
<td><b>CEMEX</b></td>
|
||
<td>Célula datos · Arq. Jorge Salinas — julio</td>
|
||
<td>MXN</td><td class="num">$71,920</td><td>90 días</td>
|
||
<td><span class="chip chip-info">Mensual</span></td>
|
||
<td><span class="chip chip-ok"><span class="cdot"></span>Facturado · F-2026-0142</span></td>
|
||
<td><button class="btn btn-sm btn-ghost">Abrir ›</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="footnote">Tickets de ejemplo. Tres vías generan factura: facturación adicional directa · headhunting (anticipo + cierre) · staff augmentation (al arrancar la persona). El portal Jira sirve a varias empresas; esta vista filtra <b>empresa origen = Balam</b>.</p>
|
||
</div>
|
||
|
||
<!-- Detalle FAC-0876 -->
|
||
<div id="sol-detalle" style="display:none">
|
||
<button class="back-link" onclick="show('solicitudes')">‹ Volver a la bandeja</button>
|
||
<div class="spread mb16">
|
||
<div>
|
||
<h1 class="view-title">FAC-0876 · CEMEX — Staff augmentation</h1>
|
||
<p class="view-sub" style="margin-bottom:0">Araceli Sánchez · 03 jul, 10:22 · Responsable: <b>Arturo R.</b></p>
|
||
</div>
|
||
<span class="chip chip-ok" style="font-size:12px;padding:5px 14px"><span class="cdot"></span>Listo para facturar</span>
|
||
</div>
|
||
|
||
<div class="card mb16" style="overflow:hidden">
|
||
<dl class="dl" style="margin:0">
|
||
<div><dt>Tipo de solicitud</dt><dd>Facturación · Staff augmentation</dd></div>
|
||
<div><dt>Cliente</dt><dd>CEMEX, S.A.B. de C.V.</dd></div>
|
||
<div><dt>Cliente nuevo</dt><dd>No — recurrente</dd></div>
|
||
<div><dt>Proyecto</dt><dd>Célula de datos · Monterrey</dd></div>
|
||
<div><dt>Resumen (summary)</dt><dd>Servicios julio — Ing. Mariana Gutiérrez</dd></div>
|
||
<div><dt>Periodo de incidencias</dt><dd>01–31 jul · sin horas extra</dd></div>
|
||
<div><dt>Moneda</dt><dd>MXN</dd></div>
|
||
<div><dt>Días de crédito</dt><dd>90 días <span class="chip chip-warn" style="margin-left:6px">Innegociable CEMEX</span></dd></div>
|
||
<div><dt>Recurrencia</dt><dd>Sí — mensual (12 meses)</dd></div>
|
||
<div><dt>Monto estimado</dt><dd>$68,440.00 MXN + IVA</dd></div>
|
||
<div><dt>Orden de compra</dt><dd>OC-CMX-88123 (autorizada)</dd></div>
|
||
<div><dt>Cotización BIND vinculada</dt><dd><span class="chip chip-ok">COT-2026-0455 ✓</span></dd></div>
|
||
</dl>
|
||
</div>
|
||
|
||
<div class="card card-pad mb16">
|
||
<h3 class="card-title mb8">Adjuntos del ticket</h3>
|
||
<span class="attach"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/></svg> COT-2026-0455.pdf</span>
|
||
<span class="attach"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/></svg> OC-CMX-88123.pdf</span>
|
||
<span class="attach"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/></svg> Horas-julio-MGutierrez-VoBo.xlsx</span>
|
||
<p class="footnote">Cliente recurrente: basta la cotización. Si fuera <b>cliente nuevo</b>, se exigiría además la cédula de identificación fiscal.</p>
|
||
</div>
|
||
|
||
<div class="alert alert-info mb16">
|
||
<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>Doble check de administración completado: datos fiscales vigentes, sin adeudos bloqueantes en estado de cuenta y OC autorizada. El flujo parte de la <b>cotización BIND COT-2026-0455</b> — requisito obligatorio.</span>
|
||
</div>
|
||
|
||
<div class="flex" style="justify-content:flex-end;gap:10px">
|
||
<button class="btn btn-ghost" onclick="toast('En el producto real esto abre el ticket en Jira ITSM.')">Ver en Jira ↗</button>
|
||
<button class="btn btn-primary btn-lg" onclick="startWizard()">Iniciar facturación →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
VISTA 3 · EMISIÓN ASISTIDA (WIZARD 5 PASOS)
|
||
============================================================ -->
|
||
<section class="view" id="view-emision">
|
||
<div id="wiz-main">
|
||
<h1 class="view-title">Preparación, aprobación y emisión de CFDI</h1>
|
||
<p class="view-sub"><b>Cotización BIND → prefactura → aprobación humana → CFDI.</b> Aprobar no timbra.</p>
|
||
|
||
<div class="ticket-ribbon">
|
||
<span class="tkid">FAC-0876</span>
|
||
<span><b>CEMEX</b> · Staff augmentation · Ing. Mariana Gutiérrez — julio</span>
|
||
<span class="sep">|</span>
|
||
<span>MXN · 90 días de crédito · recurrente mensual</span>
|
||
<span style="margin-left:auto" class="chip chip-brand">Cotización requerida ✓</span>
|
||
</div>
|
||
|
||
<div class="stepper">
|
||
<div class="step cur" id="st-1"><span class="step-n">1</span><span class="step-t"><b>Cotización BIND</b><small>punto de partida obligatorio</small></span></div>
|
||
<div class="step" id="st-2"><span class="step-n">2</span><span class="step-t"><b>Datos de factura</b><small>CFDI · PPD/PUE · TC DOF</small></span></div>
|
||
<div class="step" id="st-3"><span class="step-n">3</span><span class="step-t"><b>Conceptos e IVA</b><small>regla 16% / 0%</small></span></div>
|
||
<div class="step" id="st-4"><span class="step-n">4</span><span class="step-t"><b>Prefactura</b><small>simulación, sin timbrar</small></span></div>
|
||
<div class="step" id="st-5"><span class="step-n">5</span><span class="step-t"><b>Aprobación humana</b><small>habilita la emisión; no timbra</small></span></div>
|
||
</div>
|
||
|
||
<!-- Paso 1 -->
|
||
<div class="wiz-pane active" id="wp-1">
|
||
<div class="card card-pad">
|
||
<h3 class="card-title">Paso 1 · Confirma la cotización de BIND</h3>
|
||
<p class="card-sub"><b>Toda factura parte de una cotización BIND.</b></p>
|
||
|
||
<div class="mt12" style="max-width:420px">
|
||
<div class="quote-card sel">
|
||
<span class="radio"></span>
|
||
<div class="chip chip-ok mb8">Vinculada al ticket</div>
|
||
<div style="font-weight:600;font-size:14px">COT-2026-0455</div>
|
||
<div style="font-size:12px;color:var(--muted);margin:3px 0 9px">CEMEX · Staff augmentation · Ing. Mariana Gutiérrez · julio 2026</div>
|
||
<div class="spread" style="font-size:12.5px">
|
||
<span>Subtotal <b>$68,440.00 MXN</b></span>
|
||
<span class="chip chip-neutral">Vigente · 28 jun 2026</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-warn mt16">
|
||
<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>¿No hay cotización?</b> No se puede continuar. Solicítala a comercial (Araceli) — para cliente nuevo, administración primero lo da de alta en BIND y después comercial cotiza.</span>
|
||
</div>
|
||
</div>
|
||
<div class="wiz-foot">
|
||
<button class="btn btn-ghost" onclick="show('solicitudes')">Cancelar</button>
|
||
<button class="btn btn-primary" onclick="wiz(2)">Continuar con COT-2026-0455 →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Paso 2 -->
|
||
<div class="wiz-pane" id="wp-2">
|
||
<div class="card card-pad">
|
||
<h3 class="card-title">Paso 2 · Datos de la factura</h3>
|
||
<p class="card-sub">Datos de BIND · los cambios quedan en bitácora.</p>
|
||
|
||
<div class="grid3 mt12">
|
||
<div class="field"><label>Cliente (receptor)</label><input type="text" value="CEMEX, S.A.B. de C.V." readonly><div class="hint">RFC: CMX870506AB1 · precargado de BIND</div></div>
|
||
<div class="field"><label>Sucursal</label><select disabled><option>Matriz</option></select><div class="hint">Única activa; por unidad de negocio a futuro</div></div>
|
||
<div class="field"><label>Moneda</label><input type="text" value="MXN — Peso mexicano" readonly><div class="hint">Del ticket FAC-0876; sin conversión</div></div>
|
||
<div class="field"><label>Tipo de cambio DOF</label><input type="text" value="$18.7342 (06 jul 2026)" readonly><div class="hint">Informativo — aplica solo a facturas USD</div></div>
|
||
<div class="field"><label>Días de crédito</label><input type="text" value="90"><div class="hint">Default del cliente · CEMEX: innegociable</div></div>
|
||
<div class="field"><label>Orden de compra</label><input type="text" value="OC-CMX-88123"><div class="hint">Autorizada · prerequisito del deber ser</div></div>
|
||
<div class="field"><label>Uso CFDI</label>
|
||
<select><option selected>G03 — Gastos en general (nacional)</option><option>S01 — Sin efectos fiscales (extranjero, IVA 0%)</option></select>
|
||
<div class="hint">"Sin efectos fiscales" se usa para facturación extranjera</div>
|
||
</div>
|
||
<div class="field"><label>Ticket Jira (comentarios BIND)</label><input type="text" value="FAC-0876" readonly><div class="hint">Se escribe en comentarios para cruzar reportes</div></div>
|
||
<div class="field"><label>Fecha de emisión</label><input type="date" value="2026-07-06"></div>
|
||
</div>
|
||
|
||
<div class="mt20">
|
||
<label style="display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">Método de pago</label>
|
||
<div class="pay-opt">
|
||
<div class="pay-card sel" id="pay-ppd" onclick="pickPay('ppd')">
|
||
<div class="pc-head"><span class="chip chip-ok">Recomendado</span> PPD — Pago en parcialidades o diferido</div>
|
||
<div class="pc-sub">Default de la plataforma: Balam siempre otorga crédito (30/45/90 días). El complemento de pago se timbra al cobrar.</div>
|
||
</div>
|
||
<div class="pay-card" id="pay-pue" onclick="pickPay('pue')">
|
||
<div class="pc-head">PUE — Pago en una sola exhibición</div>
|
||
<div class="pc-sub">Solo si el pago se recibe <b>el mismo día</b> de la emisión. Requiere confirmación consciente.</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-warn mt12" id="pue-alert" style="display:none">
|
||
<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>Advertencia SAT — elegiste PUE con 90 días de crédito.</b> PUE declara pago en una sola exhibición: si el cobro no ocurre el mismo día, la factura queda inconsistente ante el SAT. Un PUE erróneo ya generó un <b>requerimiento del SAT</b> a Balam (~2024). Para ventas a crédito usa <b>PPD</b>. Para continuar con PUE deberás confirmarlo en el paso 5.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wiz-foot">
|
||
<button class="btn btn-ghost" onclick="wiz(1)">← Regresar</button>
|
||
<button class="btn btn-primary" onclick="wiz(3)">Continuar →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Paso 3 -->
|
||
<div class="wiz-pane" id="wp-3">
|
||
<div class="card card-pad">
|
||
<h3 class="card-title">Paso 3 · Conceptos e IVA</h3>
|
||
<p class="card-sub">Conceptos de la cotización · IVA automático por regla.</p>
|
||
|
||
<div class="alert alert-ok mb16">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>
|
||
<span><b>Regla fiscal aplicada: IVA 16%.</b> Factura nacional en MXN con uso CFDI "Gastos en general" → 16%. Si fuera extranjera ("Sin efectos fiscales", USD) la regla asignaría <b>0%</b>. BIND no automatiza esto; la plataforma sí.</span>
|
||
</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Clave</th><th>Concepto</th><th class="num">Cant.</th><th class="num">P. unitario</th><th class="num">IVA</th><th class="num">Importe</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="mono">029</td>
|
||
<td>Consultoría y servicios profesionales — Staff augmentation · <b>Ing. Mariana Gutiérrez</b> · periodo 01–31 jul 2026</td>
|
||
<td class="num">1</td><td class="num">$68,440.00</td>
|
||
<td class="num"><span class="chip chip-ok">16% auto</span></td>
|
||
<td class="num mono">$68,440.00</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="footnote">El concepto incluye el <b>nombre del recurso</b>, como pidió administración. Retenciones adicionales (aplicables a reclutadoras) se configuran por cliente en el catálogo.</p>
|
||
|
||
<div class="card-pad" style="background:var(--crema);border-radius:11px;border:1px solid var(--linea);padding:14px 18px;margin-top:14px">
|
||
<div class="spread" style="font-size:12.5px"><span>Subtotal</span><b>$68,440.00 MXN</b></div>
|
||
<div class="spread" style="font-size:12.5px;margin-top:5px"><span>IVA 16% <span class="chip chip-ok" style="margin-left:5px">automático por regla</span></span><b>$10,950.40 MXN</b></div>
|
||
<div class="spread" style="font-size:14.5px;margin-top:9px;padding-top:9px;border-top:1.5px solid var(--linea-2)"><span style="font-weight:600">Total</span><b style="font-size:16px">$79,390.40 MXN</b></div>
|
||
</div>
|
||
|
||
<details class="mt16" style="font-size:12px">
|
||
<summary style="cursor:pointer;color:var(--muted);font-weight:500">Modificar IVA manualmente (requiere justificación)</summary>
|
||
<div class="alert alert-bad mt8">
|
||
<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>Override de la regla fiscal.</b> Cambiar el IVA de una factura nacional MXN a un valor distinto de 16% quedará registrado en bitácora con tu usuario y requerirá motivo. Ejemplo real: un 16% capturado en una factura "sin efectos fiscales" fue detectado en la sesión del 6-jul.</span>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div class="wiz-foot">
|
||
<button class="btn btn-ghost" onclick="wiz(2)">← Regresar</button>
|
||
<button class="btn btn-primary" onclick="wiz(4)">Generar prefactura (simulación) →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Paso 4 -->
|
||
<div class="wiz-pane" id="wp-4">
|
||
<div class="alert alert-info mb16">
|
||
<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><b>Modo simulación — nada se ha timbrado.</b> Esta prefactura replica la práctica actual de Balam: siempre prefactura primero, porque cancelar un CFDI timbrado implica retrabajo administrativo y contable. Revisa con calma; puedes regresar a corregir.</span>
|
||
</div>
|
||
|
||
<div class="doc">
|
||
<div class="doc-head">
|
||
<div>
|
||
<h4>PREFACTURA — Balam Talento Estratégico, S.A. de C.V.</h4>
|
||
<div class="doc-meta">RFC: BTE190513QX4 · Régimen 601 — General de Ley Personas Morales<br>Av. Fundidora 501, Col. Obrera, Monterrey, N.L., C.P. 64010</div>
|
||
</div>
|
||
<div style="text-align:right">
|
||
<span class="fol">PRE-2026-0311</span>
|
||
<div class="doc-meta" style="margin-top:6px">Fecha: 06 jul 2026<br>Estatus: <b>Simulación — sin valor fiscal</b></div>
|
||
</div>
|
||
</div>
|
||
<div class="grid2 mb12" style="font-size:12px">
|
||
<div>
|
||
<div style="font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin-bottom:4px">Receptor</div>
|
||
<b>CEMEX, S.A.B. de C.V.</b><br>RFC: CMX870506AB1 · Uso CFDI: G03 — Gastos en general<br>Días de crédito: 90 · OC: OC-CMX-88123
|
||
</div>
|
||
<div>
|
||
<div style="font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin-bottom:4px">Condiciones</div>
|
||
Moneda: MXN · Método de pago: <b>PPD</b> · Forma: 99 — Por definir<br>Vencimiento: 04 oct 2026 · Ref. Jira: <b>FAC-0876</b> · Cotización: COT-2026-0455
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="font-size:12px">
|
||
<thead><tr><th>Clave</th><th>Descripción</th><th class="num">Cant.</th><th class="num">P. unitario</th><th class="num">Importe</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="mono">029</td><td>Consultoría y servicios profesionales — Staff augmentation · Ing. Mariana Gutiérrez · 01–31 jul 2026</td><td class="num">1</td><td class="num">$68,440.00</td><td class="num">$68,440.00</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="display:flex;justify-content:flex-end;margin-top:12px">
|
||
<div style="width:270px;font-size:12.5px">
|
||
<div class="spread"><span>Subtotal</span><b>$68,440.00</b></div>
|
||
<div class="spread" style="margin-top:4px"><span>IVA 16%</span><b>$10,950.40</b></div>
|
||
<div class="spread" style="margin-top:7px;padding-top:7px;border-top:1.5px solid var(--cafe);font-size:14px"><span style="font-weight:600">Total MXN</span><b>$79,390.40</b></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wiz-foot">
|
||
<button class="btn btn-ghost" onclick="wiz(3)">← Corregir conceptos</button>
|
||
<div class="flex">
|
||
<button class="btn btn-ghost" onclick="toast('Prefactura PRE-2026-0311 guardada. Puede retomarse desde el Dashboard.')">Guardar y validar después</button>
|
||
<button class="btn btn-primary" onclick="wiz(5)">Enviar prefactura v3 a aprobación →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Paso 5 -->
|
||
<div class="wiz-pane" id="wp-5">
|
||
<div class="grid2" style="grid-template-columns:1.2fr 1fr;align-items:start">
|
||
<div class="card card-pad">
|
||
<h3 class="card-title">Paso 5 · Revisión previa a la aprobación</h3>
|
||
<p class="card-sub">La aprobación queda ligada a PRE-2026-0311 v3.</p>
|
||
<div class="check-row"><span class="check-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span><span><b>Cotización BIND vinculada</b><span class="cr-sub">COT-2026-0455 vigente · regla obligatoria del 6-jul</span></span></div>
|
||
<div class="check-row"><span class="check-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span><span><b>Ticket Jira válido y autorizado</b><span class="cr-sub">FAC-0876 · doble check de administración completado</span></span></div>
|
||
<div class="check-row"><span class="check-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span><span><b>Método de pago PPD</b><span class="cr-sub">Coherente con 90 días de crédito · sin riesgo de requerimiento SAT</span></span></div>
|
||
<div class="check-row"><span class="check-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span><span><b>IVA 16% por regla fiscal</b><span class="cr-sub">Nacional MXN · sin override manual</span></span></div>
|
||
<div class="check-row"><span class="check-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span><span><b>Prefactura lista para decisión</b><span class="cr-sub">PRE-2026-0311 · versión 3 · total verificado: $79,390.40 MXN</span></span></div>
|
||
<div class="check-row"><span class="check-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span><span><b>Cliente activo en BIND con datos fiscales completos</b><span class="cr-sub">CEMEX · RFC y dirección fiscal precargados</span></span></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="card card-pad mb16 approval-gate" id="approval-pending">
|
||
<div class="spread mb8">
|
||
<h3 class="card-title">Aprobación humana</h3>
|
||
<span class="chip chip-warn">Pendiente</span>
|
||
</div>
|
||
<div class="field mb12">
|
||
<label>Aprobador responsable</label>
|
||
<select id="approval-owner"><option selected>Arturo R. — Administración / Facturación</option><option>Araceli Sánchez — Dirección</option></select>
|
||
<div class="hint">La decisión quedará asentada con fecha, hora, Jira, folio BIND y versión de prefactura.</div>
|
||
</div>
|
||
<div class="approval-status"><span class="state-dot"></span><span><b>PRE-2026-0311 · versión 3</b><small>Cualquier cambio posterior en datos fiscales, conceptos o importes invalidará esta aprobación.</small></span></div>
|
||
<button class="btn btn-primary btn-lg mt12" style="width:100%;justify-content:center" onclick="approvePrefactura()">Aprobar prefactura v3</button>
|
||
</div>
|
||
<div id="approval-approved" style="display:none">
|
||
<div class="card card-pad mb12">
|
||
<div class="spread mb8"><h3 class="card-title">Prefactura aprobada</h3><span class="chip chip-ok">Aprobada</span></div>
|
||
<div class="approval-status ok"><span class="state-dot"></span><span><b>Arturo R. aprobó PRE-2026-0311 v3</b><small>10 jul 2026 · 09:54 · FAC-0876 · COT-2026-0455</small></span></div>
|
||
</div>
|
||
<div class="alert alert-warn mb12">
|
||
<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>Acción irreversible.</b> El siguiente botón timbra ante el SAT mediante el PAC de BIND. Total a emitir: <b>$79,390.40 MXN</b>.</span>
|
||
</div>
|
||
<button class="btn btn-primary btn-lg" id="btn-emit" style="width:100%;justify-content:center" onclick="emitOk()">Timbrar CFDI aprobado — $79,390.40 MXN</button>
|
||
</div>
|
||
<button class="btn btn-ghost mt8" style="width:100%;justify-content:center" onclick="wiz(4)">← Volver a la prefactura</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Éxito -->
|
||
<div id="wiz-exito" style="display:none">
|
||
<div class="success-wrap">
|
||
<div class="success-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6 9 17l-5-5"/></svg></div>
|
||
<h1 class="view-title" style="font-size:25px">CFDI emitido correctamente</h1>
|
||
<p class="view-sub" style="margin-inline:auto">Timbrado por el PAC de BIND · 06 jul 2026, 13:05 · aprobado por <b>Arturo R.</b></p>
|
||
<div class="card card-pad mb16" style="text-align:left">
|
||
<dl class="dl" style="grid-template-columns:1fr 1fr;margin:0">
|
||
<div><dt>Folio interno</dt><dd>F-2026-0143</dd></div>
|
||
<div><dt>Folio fiscal (UUID)</dt><dd style="font-size:11px">D4C0FA2E-91B7-4A38-B21C-7E55A0293F16</dd></div>
|
||
<div><dt>Cliente</dt><dd>CEMEX, S.A.B. de C.V.</dd></div>
|
||
<div><dt>Total</dt><dd>$79,390.40 MXN · PPD · vence 04 oct 2026</dd></div>
|
||
</dl>
|
||
<div class="alert alert-ok mt12">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>
|
||
<span><b>Evidencia adjuntada a Jira:</b> PDF + XML se anexaron a FAC-0876 y el ticket pasó a estatus <b>"Facturado"</b>.</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex" style="justify-content:center;gap:10px">
|
||
<button class="btn btn-ghost" onclick="resetWizard()">Emitir otra factura</button>
|
||
<button class="btn btn-primary" onclick="resetWizard();show('envio')">Continuar al envío al cliente →</button>
|
||
</div>
|
||
<p class="footnote mt12">La facturación no termina aquí: falta <b>enviar el correo</b> con los adjuntos que exige cada cliente.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
VISTA 4 · ENVÍO AL CLIENTE
|
||
============================================================ -->
|
||
<section class="view" id="view-envio">
|
||
<h1 class="view-title">Envío al cliente</h1>
|
||
<p class="view-sub"><b>No se envía</b> hasta completar los adjuntos requeridos por el cliente.</p>
|
||
|
||
<div class="send-layout">
|
||
<!-- Cola -->
|
||
<div class="card" style="overflow:hidden">
|
||
<div style="padding:14px 16px;border-bottom:1px solid var(--linea)" class="spread">
|
||
<h3 class="card-title" style="margin:0">Por enviar</h3>
|
||
<span class="chip chip-warn">4 facturas</span>
|
||
</div>
|
||
<div class="send-item sel">
|
||
<div class="si-top"><span class="si-fol">F-2026-0143 · CEMEX</span><span class="chip chip-bad">Falta 1 adjunto</span></div>
|
||
<span class="si-cli">$79,390.40 MXN · emitida hoy 13:05 · hub de facturación</span>
|
||
</div>
|
||
<div class="send-item" onclick="toast('Demo: la vista muestra el caso CEMEX, el más estricto en requisitos.')">
|
||
<div class="si-top"><span class="si-fol">F-2026-0140 · Axie</span><span class="chip chip-ok">Completo</span></div>
|
||
<span class="si-cli">$5,175.00 USD · requiere estado de cuenta de todas las facturas</span>
|
||
</div>
|
||
<div class="send-item" onclick="toast('Demo: la vista muestra el caso CEMEX, el más estricto en requisitos.')">
|
||
<div class="si-top"><span class="si-fol">F-2026-0139 · ACUNTIA</span><span class="chip chip-ok">Completo</span></div>
|
||
<span class="si-cli">$34,800.00 MXN · empaquetar .zip + estado de cuenta</span>
|
||
</div>
|
||
<div class="send-item" onclick="toast('Demo: la vista muestra el caso CEMEX, el más estricto en requisitos.')">
|
||
<div class="si-top"><span class="si-fol">F-2026-0138 · Dilo</span><span class="chip chip-ok">Completo</span></div>
|
||
<span class="si-cli">$95,700.00 MXN · adjuntar cotización del proyecto</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detalle de envío CEMEX -->
|
||
<div>
|
||
<div class="card card-pad mb16">
|
||
<div class="spread mb12">
|
||
<div>
|
||
<h3 class="card-title">F-2026-0143 · CEMEX, S.A.B. de C.V.</h3>
|
||
<p class="card-sub" style="margin:0">Requisitos del cliente</p>
|
||
</div>
|
||
<span class="chip chip-cafe">Perfil CEMEX</span>
|
||
</div>
|
||
|
||
<div class="req-row auto">
|
||
<input type="checkbox" checked disabled>
|
||
<span><b>Factura PDF + XML</b> <span class="chip chip-neutral" style="margin-left:5px">adjuntado automático</span><span class="rq-sub">F-2026-0143.pdf · F-2026-0143.xml — tomados de BIND al emitir</span></span>
|
||
</div>
|
||
<div class="req-row" id="req-excel">
|
||
<input type="checkbox" id="chk-excel" onchange="updateSend()">
|
||
<span><b>Excel de horas del colaborador con VoBo del jefe</b> <span class="chip chip-bad" style="margin-left:5px" id="chip-excel">Pendiente</span><span class="rq-sub">Requisito CEMEX: reporte de horas de Ing. Mariana Gutiérrez firmado/aprobado por el jefe directo. Marca la casilla al adjuntarlo.</span></span>
|
||
</div>
|
||
<div class="req-row auto">
|
||
<input type="checkbox" checked disabled>
|
||
<span><b>Asunto con nomenclatura CEMEX</b> <span class="chip chip-ok" style="margin-left:5px">Generado y validado</span><span class="rq-sub">Proveedor + mes + número de factura en posiciones exactas — la plataforma lo arma solo (hoy se redacta a mano y un error rebota la factura).</span></span>
|
||
</div>
|
||
|
||
<div class="alert alert-bad mt12" id="send-block">
|
||
<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>Envío bloqueado:</b> falta el Excel de horas con visto bueno. CEMEX rechaza el correo si llega incompleto — y con 90 días de crédito, cada rebote empuja el cobro.</span>
|
||
</div>
|
||
<div class="alert alert-ok mt12" id="send-okmsg" style="display:none">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg>
|
||
<span><b>Checklist completo.</b> Todos los requisitos del perfil CEMEX están cubiertos; el envío está habilitado.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mail-preview mb16">
|
||
<div class="mail-head">
|
||
<div class="mh-row"><span class="mh-k">Para</span><span class="mh-v">recepcion.facturas@cemex-hub.mx</span></div>
|
||
<div class="mh-row"><span class="mh-k">CC</span><span class="mh-v">arturo.rosas@balam.mx · cobranza@balam.mx</span></div>
|
||
<div class="mh-row"><span class="mh-k">Asunto</span><span class="mh-v" style="font-family:ui-monospace,monospace;font-size:11.5px;background:var(--amarillo-soft);padding:2px 8px;border-radius:6px">PROV-104728_JUL2026_F-2026-0143</span> <span class="chip chip-ok" style="margin-left:6px">Nomenclatura CEMEX ✓</span></div>
|
||
</div>
|
||
<div class="mail-body">
|
||
<p>Estimado equipo de Cuentas por Pagar:</p>
|
||
<p>Adjuntamos la factura <b>F-2026-0143</b> por los servicios de staff augmentation correspondientes a <b>julio 2026</b> (Ing. Mariana Gutiérrez), junto con el reporte de horas autorizado. Referencia OC-CMX-88123.</p>
|
||
<p>Quedamos atentos a cualquier aclaración.<br>Atentamente,<br><b>Balam Talento Estratégico · Administración</b></p>
|
||
</div>
|
||
<div class="mail-attach">
|
||
<span class="attach"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/></svg> F-2026-0143.pdf</span>
|
||
<span class="attach"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/></svg> F-2026-0143.xml</span>
|
||
<span class="attach missing" id="att-excel"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4m0 4h.01"/><circle cx="12" cy="12" r="9"/></svg> Horas-jul-MGutierrez-VoBo.xlsx — pendiente</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex" style="justify-content:flex-end;gap:10px">
|
||
<button class="btn btn-ghost" onclick="toast('Vista previa actualizada (demo).')">Editar correo</button>
|
||
<button class="btn btn-primary btn-lg" id="btn-send" disabled onclick="toast('Correo enviado a CEMEX ✓ — evidencia registrada en bitácora y en el ticket FAC-0876.')">Enviar factura por correo →</button>
|
||
</div>
|
||
|
||
<div class="card card-pad mt16">
|
||
<h3 class="card-title mb8">Particularidades por cliente (catálogo)</h3>
|
||
<table class="tbl" style="font-size:12px">
|
||
<thead><tr><th>Cliente</th><th>Adjuntos requeridos</th><th>Reglas de formato</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><b>CEMEX</b></td><td>Factura (PDF+XML) + Excel de horas con VoBo del jefe</td><td>Asunto con nomenclatura exacta (proveedor · mes · factura) + redacción específica; se envía al hub</td></tr>
|
||
<tr><td><b>Axie</b> <span class="chip chip-info" style="margin-left:4px">Extranjero</span></td><td>Invoices + estado de cuenta de todas las facturas</td><td>Invoice PDF sin XML (validación extranjera) · IVA 0%</td></tr>
|
||
<tr><td><b>ACUNTIA</b></td><td>.zip (PDF+XML) + estado de cuenta</td><td>Todo empaquetado en un solo .zip</td></tr>
|
||
<tr><td><b>Dilo</b></td><td>Factura + cotización del proyecto</td><td>Por proyecto — la cotización acompaña siempre</td></tr>
|
||
<tr><td><b>Regiotour</b></td><td>Factura (PDF+XML)</td><td>Envío estándar</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="footnote">Editable por administración. Pendiente del 6-jul: Ara + Arturo completan el Excel de destinatarios y particularidades; este catálogo lo absorberá.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
VISTA 5 · COBRANZA
|
||
============================================================ -->
|
||
<section class="view" id="view-cobranza">
|
||
<h1 class="view-title">Cuentas por cobrar</h1>
|
||
<p class="view-sub"><b>Corte 09:47</b> · próxima lectura 10:02 · MXN y USD separados.</p>
|
||
|
||
<div class="card mb16" style="overflow:hidden">
|
||
<div style="padding:13px 18px;border-bottom:1px solid var(--linea)" class="spread">
|
||
<h3 class="card-title" style="margin:0">Aging · MXN</h3>
|
||
<span class="chip chip-neutral">11 facturas abiertas</span>
|
||
</div>
|
||
<div class="aging-card">
|
||
<div class="aging-cur"><span class="chip chip-cafe">MXN</span></div>
|
||
<div class="aging-cell"><span class="aging-lbl">Por vencer</span><span class="aging-val">$612,480</span><span class="aging-n">6 facturas</span></div>
|
||
<div class="aging-cell"><span class="aging-lbl">1–30 días</span><span class="aging-val">$148,060</span><span class="aging-n">2 facturas</span></div>
|
||
<div class="aging-cell warm"><span class="aging-lbl">31–60 días</span><span class="aging-val">$124,700</span><span class="aging-n">1 factura</span></div>
|
||
<div class="aging-cell warm"><span class="aging-lbl">61–90 días</span><span class="aging-val">$85,700</span><span class="aging-n">1 factura</span></div>
|
||
<div class="aging-cell hot"><span class="aging-lbl">+90 días</span><span class="aging-val">$86,200</span><span class="aging-n">1 factura</span></div>
|
||
<div class="aging-cell aging-total"><span class="aging-lbl">Vencido total</span><span class="aging-val" style="color:var(--bad-ink)">$444,660</span><span class="aging-n">5 facturas</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card mb20" style="overflow:hidden">
|
||
<div style="padding:13px 18px;border-bottom:1px solid var(--linea)" class="spread">
|
||
<h3 class="card-title" style="margin:0">Aging · USD</h3>
|
||
<span class="chip chip-neutral">3 facturas abiertas · TC DOF $18.7342 solo informativo</span>
|
||
</div>
|
||
<div class="aging-card">
|
||
<div class="aging-cur"><span class="chip chip-brand">USD</span></div>
|
||
<div class="aging-cell"><span class="aging-lbl">Por vencer</span><span class="aging-val">$10,350</span><span class="aging-n">2 invoices</span></div>
|
||
<div class="aging-cell"><span class="aging-lbl">1–30 días</span><span class="aging-val">$0</span><span class="aging-n">—</span></div>
|
||
<div class="aging-cell warm"><span class="aging-lbl">31–60 días</span><span class="aging-val">$11,750</span><span class="aging-n">1 invoice</span></div>
|
||
<div class="aging-cell"><span class="aging-lbl">61–90 días</span><span class="aging-val">$0</span><span class="aging-n">—</span></div>
|
||
<div class="aging-cell"><span class="aging-lbl">+90 días</span><span class="aging-val">$0</span><span class="aging-n">—</span></div>
|
||
<div class="aging-cell aging-total"><span class="aging-lbl">Vencido total</span><span class="aging-val" style="color:var(--warn-ink)">$11,750</span><span class="aging-n">1 invoice</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detalle por factura: el control que hoy vive en el Excel de Arturo -->
|
||
<div class="card mb20" style="overflow:hidden">
|
||
<div style="padding:13px 18px;border-bottom:1px solid var(--linea)" class="spread">
|
||
<div>
|
||
<h3 class="card-title" style="margin:0">Facturas abiertas · detalle</h3>
|
||
<p class="card-sub" style="margin:2px 0 0">Saldo y días de mora leídos de BIND.</p>
|
||
</div>
|
||
<div class="filters" style="margin:0">
|
||
<button class="fchip on">Todas (14)</button>
|
||
<button class="fchip">Vencidas (6)</button>
|
||
<button class="fchip">Por vencer (8)</button>
|
||
<button class="fchip">MXN (11)</button>
|
||
<button class="fchip">USD (3)</button>
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="font-size:12px">
|
||
<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="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>
|
||
<tr><td class="mono">INV-2026-0106</td><td>Axie</td><td class="num">$5,175.00 USD</td><td>15-jul-2026</td><td><span class="chip chip-info">Vence en 7 días</span></td><td></td></tr>
|
||
<tr><td class="mono">F-2026-0126</td><td>Regiotour</td><td class="num">$110,020.00 MXN</td><td>18-jul-2026</td><td><span class="chip chip-neutral">Al corriente</span></td><td></td></tr>
|
||
<tr><td class="mono">INV-2026-0108</td><td>Axie</td><td class="num">$5,175.00 USD</td><td>21-jul-2026</td><td><span class="chip chip-neutral">Al corriente</span></td><td></td></tr>
|
||
<tr><td class="mono">F-2026-0132</td><td>Dilo</td><td class="num">$114,029.60 MXN</td><td>24-jul-2026</td><td><span class="chip chip-neutral">Al corriente</span></td><td></td></tr>
|
||
<tr><td class="mono">F-2026-0138</td><td>CEMEX</td><td class="num">$118,560.00 MXN</td><td>30-jul-2026</td><td><span class="chip chip-neutral">Al corriente</span></td><td></td></tr>
|
||
<tr><td class="mono">F-2026-0141</td><td>CEMEX</td><td class="num">$118,560.00 MXN</td><td>02-ago-2026</td><td><span class="chip chip-neutral">Al corriente</span></td><td></td></tr>
|
||
<tr><td class="mono">F-2026-0143</td><td>CEMEX</td><td class="num">$79,390.40 MXN</td><td>05-ago-2026</td><td><span class="chip chip-neutral">Al corriente · emitida 06-jul</span></td><td></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Estado de cuenta por cliente (ejemplo: ACUNTIA) -->
|
||
<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>
|
||
<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,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-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 (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>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
VISTA 5b · PAGOS Y RECORDATORIOS
|
||
============================================================ -->
|
||
<section class="view" id="view-pagos">
|
||
<h1 class="view-title">Pagos y recordatorios</h1>
|
||
<p class="view-sub">Pagos leídos de BIND · alertas internas por días de mora.</p>
|
||
|
||
<!-- Pagos detectados + reglas de recordatorio -->
|
||
<div style="display:grid;grid-template-columns:1.4fr 1fr;gap:20px" class="mb20">
|
||
<div class="card card-pad">
|
||
<div class="spread mb12">
|
||
<div>
|
||
<h3 class="card-title">Pagos detectados</h3>
|
||
<p class="card-sub" style="margin:0">Detectados en cada lectura de BIND.</p>
|
||
</div>
|
||
<span class="sync-chip">Sincronizado con BIND · hace 4 min</span>
|
||
</div>
|
||
<table class="tbl" style="font-size:12px">
|
||
<thead><tr><th>Factura</th><th>Cliente</th><th class="num">Pagado</th><th>Detectado</th><th>Resultado</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="mono">F-2026-0095</td><td>Dilo</td><td class="num">$98,600.00 MXN</td><td>hoy · 9:47</td><td><span class="chip chip-ok">Saldada</span></td></tr>
|
||
<tr><td class="mono">F-2026-0007</td><td>ACUNTIA</td><td class="num">$86,200.00 MXN</td><td>hoy · 9:47</td><td><span class="chip chip-warn">Saldada · fuera de orden</span></td></tr>
|
||
<tr><td class="mono">INV-2026-0099</td><td>Axie</td><td class="num">$8,372.50 USD</td><td>ayer · 17:32</td><td><span class="chip chip-info">Saldada · tolerancia</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="alert alert-info mt12">
|
||
<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><b>Tolerancia por comisión:</b> INV-2026-0099 quedó con residual de <b>$27.50 USD</b> por el fee de la transferencia — dentro del umbral configurable ($50), se marca saldada en lugar de aparecer eternamente como morosa. La fecha mostrada es la del <b>registro en BIND</b> (lo captura el despacho), no la fecha valor del banco.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card-pad">
|
||
<h3 class="card-title">Reglas de recordatorio</h3>
|
||
<p class="card-sub">Acciones configuradas por días de mora.</p>
|
||
<div class="regla">
|
||
<span class="regla-d">D+1</span>
|
||
<span class="regla-txt">Alerta interna a Arturo R.<small>Factura vencida detectada en el aging</small></span>
|
||
<span class="chip chip-ok">MVP · activa</span>
|
||
</div>
|
||
<div class="regla off">
|
||
<span class="regla-d">D+5</span>
|
||
<span class="regla-txt">Correo de cortesía al cliente<small>Plantilla con folio, monto y días transcurridos</small></span>
|
||
<span class="chip chip-neutral">Fase posterior</span>
|
||
</div>
|
||
<div class="regla">
|
||
<span class="regla-d">D+15</span>
|
||
<span class="regla-txt">Escalamiento interno a dirección<small>Araceli S. + Arturo R. — caso ACUNTIA-febrero</small></span>
|
||
<span class="chip chip-ok">MVP · activa</span>
|
||
</div>
|
||
<div class="regla off">
|
||
<span class="regla-d">D+30</span>
|
||
<span class="regla-txt">2º correo al cliente + CC a dirección<small>Con estado de cuenta adjunto</small></span>
|
||
<span class="chip chip-neutral">Fase posterior</span>
|
||
</div>
|
||
<div class="alert alert-info mt12">
|
||
<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>Los <b>correos automáticos al cliente</b> están cotizados en el <b>Anexo B</b> (fase posterior); el MVP entrega las alertas internas y deja estas reglas preparadas para activarse.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:1.4fr 1fr;gap:20px">
|
||
<div class="card card-pad">
|
||
<div class="spread mb12">
|
||
<div>
|
||
<h3 class="card-title">Alertas internas <span class="chip chip-warn" style="margin-left:6px">al equipo Balam — no al cliente</span></h3>
|
||
<p class="card-sub" style="margin:0">Avisos internos · correos al cliente en fase posterior.</p>
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="font-size:12px">
|
||
<thead><tr><th>Factura</th><th>Cliente</th><th class="num">Monto</th><th>Vencida hace</th><th>Alerta</th><th>Destinatario interno</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="mono">F-2026-0019</td><td>ACUNTIA</td><td class="num">$86,200 MXN</td>
|
||
<td><span class="chip chip-bad">114 días · febrero</span></td>
|
||
<td>Escalamiento a dirección</td><td>Araceli S. + Arturo R.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">F-2026-0058</td><td>Regiotour</td><td class="num">$85,700 MXN</td>
|
||
<td><span class="chip chip-bad">73 días · abril</span></td>
|
||
<td>Seguimiento urgente</td><td>Arturo R.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">F-2026-0087</td><td>Dilo</td><td class="num">$124,700 MXN</td>
|
||
<td><span class="chip chip-warn">41 días</span></td>
|
||
<td>Recordatorio de gestión</td><td>Arturo R.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">INV-2026-0102</td><td>Axie</td><td class="num">$11,750 USD</td>
|
||
<td><span class="chip chip-warn">38 días</span></td>
|
||
<td>Recordatorio de gestión</td><td>Arturo R.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">F-2026-0114</td><td>Dilo</td><td class="num">$62,060 MXN</td>
|
||
<td><span class="chip chip-warn">18 días</span></td>
|
||
<td>Recordatorio de gestión</td><td>Arturo R.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">F-2026-0117</td><td>Regiotour</td><td class="num">$86,000 MXN</td>
|
||
<td><span class="chip chip-warn">9 días</span></td>
|
||
<td>Recordatorio de gestión</td><td>Arturo R.</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">F-2026-0110</td><td>CEMEX</td><td class="num">$71,920 MXN</td>
|
||
<td><span class="chip chip-info">Vence en 6 días</span></td>
|
||
<td>Aviso preventivo</td><td>Arturo R.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="alert alert-info mt12">
|
||
<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>La factura de <b>febrero</b> es del cliente "muy pagador" — se quedó sin seguimiento por confiar en que pagaría solo. Con alertas automáticas, ningún vencimiento pasa desapercibido (caso citado por Ara y Arturo, 6-jul).</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card-pad">
|
||
<h3 class="card-title">Excepciones de seguimiento</h3>
|
||
<p class="card-sub">Clientes excluidos de las alertas de morosidad</p>
|
||
<div class="empty-state">
|
||
<div class="es-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg></div>
|
||
<b>Sin excepciones — todos los clientes reciben seguimiento</b>
|
||
<p>Decisión de dirección (6-jul-2026): la lista de excepciones queda <b>vacía</b>. Al corte de las 09:47 ningún cliente está excluido; próxima lectura de BIND aprox. 10:02.</p>
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm" style="width:100%;justify-content:center" onclick="toast('Capacidad disponible pero sin uso: dirección decidió no excluir a nadie (6-jul).')">Agregar excepción…</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============================================================
|
||
VISTA 6 · BITÁCORA
|
||
============================================================ -->
|
||
<section class="view" id="view-bitacora">
|
||
<h1 class="view-title">Bitácora de auditoría</h1>
|
||
<p class="view-sub">Trazabilidad por usuario, ticket Jira y folio BIND.</p>
|
||
|
||
<div class="filters">
|
||
<button class="fchip on">Todo (hoy)</button>
|
||
<button class="fchip">Emisiones</button>
|
||
<button class="fchip">Validaciones</button>
|
||
<button class="fchip">Envíos</button>
|
||
<button class="fchip">Overrides</button>
|
||
<button class="fchip">Solo Arturo R.</button>
|
||
<div class="search-box">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
|
||
<input type="text" placeholder="Buscar folio, ticket, usuario…" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="overflow:hidden">
|
||
<table class="tbl">
|
||
<thead><tr><th>Fecha y hora</th><th>Usuario</th><th>Acción</th><th>Referencias</th><th>Detalle</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="white-space:nowrap">08 jul 2026 · 09:47</td><td><b>Plataforma</b></td>
|
||
<td><span class="chip chip-ok">Pago detectado</span></td>
|
||
<td class="mono" style="font-size:11.5px">F-2026-0095 · F-2026-0007</td>
|
||
<td>Sincronización BIND: 2 pagos registrados por el despacho · Dilo saldada · ACUNTIA aplicó a enero (pago fuera de orden — febrero sigue abierta)</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 13:05</td><td><b>Arturo R.</b></td>
|
||
<td><span class="chip chip-ok">CFDI emitido</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0876 · F-2026-0143</td>
|
||
<td>Timbrado por PAC de BIND · $79,390.40 MXN · PPD · UUID D4C0FA2E… · evidencia PDF+XML anexada a Jira</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 13:04</td><td><b>Arturo R.</b></td>
|
||
<td><span class="chip chip-info">Validación aprobada</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0876 · PRE-2026-0311</td>
|
||
<td>Doble check completo: cotización ✓ · PPD ✓ · IVA 16% por regla ✓ · confirmación explícita del aprobador</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 12:58</td><td><b>Plataforma</b></td>
|
||
<td><span class="chip chip-neutral">Prefactura simulada</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0876 · COT-2026-0455</td>
|
||
<td>Cotización convertida a prefactura PRE-2026-0311 en un clic · modo simulación, sin timbrar</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 12:41</td><td><b>Plataforma</b></td>
|
||
<td><span class="chip chip-warn">Advertencia mostrada</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0874</td>
|
||
<td>Usuario seleccionó PUE con 30 días de crédito → alerta SAT desplegada · el usuario regresó a PPD</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 12:15</td><td><b>Araceli S.</b></td>
|
||
<td><span class="chip chip-brand">Cotización vinculada</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0875 · COT-2026-0461</td>
|
||
<td>Cotización BIND adjuntada al ticket de headhunting (cierre 50% restante, Dilo)</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 11:52</td><td><b>Arturo R.</b></td>
|
||
<td><span class="chip chip-bad">Override de IVA</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0872 · PRE-2026-0309</td>
|
||
<td>IVA manual 0%→16% en factura nacional con motivo capturado: "concepto exento mal clasificado en cotización"</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 11:20</td><td><b>Plataforma</b></td>
|
||
<td><span class="chip chip-info">Alerta interna enviada</span></td>
|
||
<td class="mono" style="font-size:11.5px">F-2026-0019</td>
|
||
<td>Escalamiento a dirección: factura ACUNTIA con 114 días vencida ($86,200 MXN) · destinatarios: Araceli S., Arturo R.</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 10:47</td><td><b>Erika C.</b></td>
|
||
<td><span class="chip chip-neutral">Consulta de reporte</span></td>
|
||
<td class="mono" style="font-size:11.5px">—</td>
|
||
<td>Exportó aging de cobranza MXN/USD a XLSX para corte semanal</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 10:12</td><td><b>Plataforma</b></td>
|
||
<td><span class="chip chip-neutral">Sincronización BIND</span></td>
|
||
<td class="mono" style="font-size:11.5px">—</td>
|
||
<td>Lectura de cuentas por cobrar y catálogo de clientes · 214 llamadas API · sin cambios en facturas pagadas</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 09:38</td><td><b>Arturo R.</b></td>
|
||
<td><span class="chip chip-ok">Correo enviado</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0868 · F-2026-0142</td>
|
||
<td>Factura CEMEX enviada al hub con Excel de horas VoBo · asunto validado: PROV-104728_JUL2026_F-2026-0142</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="white-space:nowrap">06 jul 2026 · 09:15</td><td><b>Araceli S.</b></td>
|
||
<td><span class="chip chip-brand">Ticket creado</span></td>
|
||
<td class="mono" style="font-size:11.5px">FAC-0876</td>
|
||
<td>Solicitud de facturación staff augmentation CEMEX · cotización COT-2026-0455 adjunta · empresa origen: Balam</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="footnote">Cada registro guarda usuario, timestamp, ticket Jira y folio BIND para reconstruir el flujo completo: solicitud → cotización → prefactura → CFDI → envío → cobranza.</p>
|
||
</section>
|
||
|
||
</div><!-- /content -->
|
||
</div><!-- /main -->
|
||
</div><!-- /app -->
|
||
|
||
<div class="toast" id="toast">
|
||
<span class="tico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span>
|
||
<span id="toast-msg"></span>
|
||
</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',
|
||
solicitudes:'Facturación · Solicitudes (Jira)',
|
||
emision:'Facturación · Por aprobar y emitir',
|
||
envio:'Facturación · Envío al cliente',
|
||
cobranza:'Cobranza · Cuentas por cobrar',
|
||
pagos:'Cobranza · Pagos y recordatorios',
|
||
bitacora:'Bitácora'
|
||
};
|
||
|
||
function show(view){
|
||
// Sub-vistas internas
|
||
if(view === 'sol-detalle'){
|
||
show('solicitudes');
|
||
document.getElementById('sol-lista').style.display = 'none';
|
||
document.getElementById('sol-detalle').style.display = 'block';
|
||
return;
|
||
}
|
||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||
const target = document.getElementById('view-' + view);
|
||
if(!target) return;
|
||
target.classList.add('active');
|
||
|
||
document.querySelectorAll('.nav-item[data-view]').forEach(n => n.classList.toggle('active', n.dataset.view === view));
|
||
document.getElementById('crumb').textContent = CRUMBS[view] || view;
|
||
|
||
// Estados por defecto de cada vista
|
||
if(view === 'solicitudes'){
|
||
document.getElementById('sol-lista').style.display = 'block';
|
||
document.getElementById('sol-detalle').style.display = 'none';
|
||
}
|
||
window.scrollTo({top:0, behavior:'instant'});
|
||
}
|
||
|
||
document.querySelectorAll('.nav-item[data-view]').forEach(el => {
|
||
el.addEventListener('click', () => show(el.dataset.view));
|
||
});
|
||
|
||
/* ============ Wizard de preparación, aprobación y emisión (5 pasos) ============ */
|
||
let curStep = 1;
|
||
let approvalGranted = false;
|
||
function wiz(n){
|
||
if(n < 5 && approvalGranted) resetApproval();
|
||
curStep = n;
|
||
document.querySelectorAll('.wiz-pane').forEach(p => p.classList.remove('active'));
|
||
document.getElementById('wp-' + n).classList.add('active');
|
||
for(let i = 1; i <= 5; i++){
|
||
const s = document.getElementById('st-' + i);
|
||
s.classList.remove('cur','done');
|
||
if(i < n) s.classList.add('done');
|
||
if(i === n) s.classList.add('cur');
|
||
if(i < n) s.querySelector('.step-n').innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:12px;height:12px"><path d="M20 6 9 17l-5-5"/></svg>';
|
||
else s.querySelector('.step-n').textContent = i;
|
||
}
|
||
document.getElementById('wiz-main').scrollIntoView({behavior:'instant', block:'start'});
|
||
}
|
||
|
||
function startWizard(){
|
||
resetWizard();
|
||
show('emision');
|
||
}
|
||
|
||
function resetWizard(){
|
||
document.getElementById('wiz-exito').style.display = 'none';
|
||
document.getElementById('wiz-main').style.display = 'block';
|
||
resetApproval();
|
||
pickPay('ppd');
|
||
wiz(1);
|
||
}
|
||
|
||
function resetApproval(){
|
||
approvalGranted = false;
|
||
document.getElementById('approval-pending').style.display = 'block';
|
||
document.getElementById('approval-approved').style.display = 'none';
|
||
}
|
||
|
||
function approvePrefactura(){
|
||
approvalGranted = true;
|
||
document.getElementById('approval-pending').style.display = 'none';
|
||
document.getElementById('approval-approved').style.display = 'block';
|
||
toast('PRE-2026-0311 v3 aprobada por Arturo R. · la emisión ya está habilitada.');
|
||
}
|
||
|
||
function emitOk(){
|
||
if(!approvalGranted){
|
||
toast('Primero se requiere la aprobación humana de la prefactura v3.');
|
||
return;
|
||
}
|
||
document.getElementById('wiz-main').style.display = 'none';
|
||
document.getElementById('wiz-exito').style.display = 'block';
|
||
toast('CFDI F-2026-0143 timbrado por el PAC de BIND · evidencia anexada a FAC-0876.');
|
||
window.scrollTo({top:0, behavior:'instant'});
|
||
}
|
||
|
||
/* Paso 2: PPD/PUE con advertencia SAT */
|
||
function pickPay(which){
|
||
const ppd = document.getElementById('pay-ppd'), pue = document.getElementById('pay-pue');
|
||
ppd.classList.toggle('sel', which === 'ppd');
|
||
pue.classList.toggle('sel', which === 'pue');
|
||
document.getElementById('pue-alert').style.display = which === 'pue' ? 'flex' : 'none';
|
||
}
|
||
|
||
/* ============ Envío: checklist bloqueante ============ */
|
||
function updateSend(){
|
||
const ok = document.getElementById('chk-excel').checked;
|
||
document.getElementById('btn-send').disabled = !ok;
|
||
document.getElementById('send-block').style.display = ok ? 'none' : 'flex';
|
||
document.getElementById('send-okmsg').style.display = ok ? 'flex' : 'none';
|
||
const chipE = document.getElementById('chip-excel');
|
||
chipE.textContent = ok ? 'Adjuntado ✓' : 'Pendiente';
|
||
chipE.className = 'chip ' + (ok ? 'chip-ok' : 'chip-bad');
|
||
chipE.style.marginLeft = '5px';
|
||
const att = document.getElementById('att-excel');
|
||
if(ok){
|
||
att.classList.remove('missing');
|
||
att.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/></svg> Horas-jul-MGutierrez-VoBo.xlsx';
|
||
} else {
|
||
att.classList.add('missing');
|
||
att.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4m0 4h.01"/><circle cx="12" cy="12" r="9"/></svg> Horas-jul-MGutierrez-VoBo.xlsx — pendiente';
|
||
}
|
||
}
|
||
|
||
/* ============ Cobranza: estado de cuenta por cliente (modal) ============ */
|
||
function edoCuenta(open = true){
|
||
document.getElementById('edo-cuenta').style.display = open ? 'flex' : 'none';
|
||
}
|
||
document.addEventListener('keydown', e => {
|
||
if(e.key === 'Escape') edoCuenta(false);
|
||
});
|
||
|
||
/* ============ Toast ============ */
|
||
let toastTimer = null;
|
||
function toast(msg){
|
||
const t = document.getElementById('toast');
|
||
document.getElementById('toast-msg').textContent = msg;
|
||
t.classList.add('show');
|
||
clearTimeout(toastTimer);
|
||
toastTimer = setTimeout(() => t.classList.remove('show'), 4200);
|
||
}
|
||
|
||
/* Los filtros y búsquedas son decorativos en el prototipo */
|
||
document.querySelectorAll('.fchip').forEach(c => {
|
||
c.addEventListener('click', () => {
|
||
c.parentElement.querySelectorAll('.fchip').forEach(x => x.classList.remove('on'));
|
||
c.classList.add('on');
|
||
toast('Filtro aplicado (demo — los datos son ficticios).');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|