JohannVelazquez
633d05e330
- Estructura nueva: README maestro, bitacora/ (REGISTRO, PENDIENTES, plantillas), propuesta/, fuentes/; material superado a _archivado/ - Propuesta v1.0: MVP BIND-first con emisión asistida MXN/USD (dry-run + confirmación, timbra PAC de BIND), 112-136 h / $67,200-$81,600 + IVA, stack .NET 10 + EF Core + Angular 21 + PostgreSQL 17 sobre Azure - Bitácora: historial de correos + 2 llamadas (incl. revisión 4-jun) y pendientes - Prototipo y diagrama actualizados a v1.0; precios de Azure verificados - Archivo ajeno (proyecto EOS) retirado del repo Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
373 lines
11 KiB
HTML
373 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Balam · Flujo financiero</title>
|
||
<style>
|
||
:root{
|
||
--bg:#ffffff;
|
||
--ink:#0f172a;
|
||
--muted:#64748b;
|
||
--line:#e2e8f0;
|
||
--soft:#f8fafc;
|
||
|
||
--navy:#1e293b;
|
||
--peach:#fed7aa;
|
||
--peach-ink:#9a3412;
|
||
--lavender:#ddd6fe;
|
||
--lavender-ink:#5b21b6;
|
||
--amber:#fde68a;
|
||
--amber-ink:#92400e;
|
||
--mint:#bbf7d0;
|
||
--mint-ink:#14532d;
|
||
--rose:#fecaca;
|
||
--rose-ink:#991b1b;
|
||
--sky:#bae6fd;
|
||
--sky-ink:#075985;
|
||
--slate:#e2e8f0;
|
||
--slate-ink:#334155;
|
||
}
|
||
*{box-sizing:border-box}
|
||
html,body{background:var(--bg)}
|
||
body{
|
||
margin:0; padding:48px 56px;
|
||
font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
|
||
color:var(--ink);
|
||
}
|
||
|
||
h1{font-size:38px; font-weight:800; margin:0 0 6px; letter-spacing:-0.02em}
|
||
.lede{color:var(--muted); font-size:16px; margin:0 0 48px; max-width:780px}
|
||
|
||
.section-label{
|
||
font-size:11px; font-weight:600; color:var(--muted);
|
||
letter-spacing:2px; text-transform:uppercase;
|
||
margin:0 0 24px;
|
||
}
|
||
|
||
.flow-block{margin-bottom:56px}
|
||
.flow-title{
|
||
font-size:22px; font-weight:700; margin:0 0 4px;
|
||
display:flex; align-items:center; gap:12px;
|
||
}
|
||
.flow-title .pill{
|
||
font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
|
||
padding:4px 10px; border-radius:999px;
|
||
}
|
||
.pill.bad{background:#fee2e2; color:#991b1b}
|
||
.pill.ok{background:#dcfce7; color:#14532d}
|
||
.flow-sub{color:var(--muted); font-size:14px; margin:0 0 28px}
|
||
|
||
.flow{
|
||
display:flex; align-items:flex-start; gap:8px;
|
||
overflow-x:auto; padding:8px 4px 24px;
|
||
}
|
||
.node{
|
||
flex:0 0 auto; width:108px; text-align:center;
|
||
}
|
||
.tile{
|
||
width:88px; height:88px; border-radius:20px;
|
||
margin:0 auto 12px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
font-size:38px;
|
||
box-shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
|
||
}
|
||
.tile.navy {background:var(--navy); color:#fff}
|
||
.tile.peach {background:var(--peach); color:var(--peach-ink)}
|
||
.tile.lavender{background:var(--lavender); color:var(--lavender-ink)}
|
||
.tile.amber {background:var(--amber); color:var(--amber-ink)}
|
||
.tile.mint {background:var(--mint); color:var(--mint-ink)}
|
||
.tile.rose {background:var(--rose); color:var(--rose-ink)}
|
||
.tile.sky {background:var(--sky); color:var(--sky-ink)}
|
||
.tile.slate {background:var(--slate); color:var(--slate-ink)}
|
||
|
||
.label{font-size:13px; font-weight:600; line-height:1.25}
|
||
.sub{font-size:11px; color:var(--muted); margin-top:3px; line-height:1.3}
|
||
|
||
.arrow{
|
||
flex:0 0 auto; align-self:center;
|
||
color:#cbd5e1; font-size:22px; padding:0 2px; margin-top:-36px;
|
||
user-select:none;
|
||
}
|
||
|
||
.group{
|
||
border:1.5px dashed #cbd5e1; border-radius:18px;
|
||
padding:18px 14px 14px; position:relative;
|
||
margin-top:14px;
|
||
display:flex; align-items:flex-start; gap:4px;
|
||
}
|
||
.group::before{
|
||
content:attr(data-label);
|
||
position:absolute; top:-9px; left:18px;
|
||
background:#fff; padding:0 8px;
|
||
font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
|
||
color:var(--muted);
|
||
}
|
||
|
||
.divider{
|
||
height:1px; background:var(--line);
|
||
margin:32px 0;
|
||
}
|
||
|
||
/* metrics */
|
||
.metrics{
|
||
display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
|
||
margin-top:8px;
|
||
}
|
||
.metric{
|
||
background:var(--soft); border:1px solid var(--line); border-radius:14px;
|
||
padding:18px;
|
||
}
|
||
.metric .m-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; font-weight:600}
|
||
.metric .m-row{display:flex; align-items:baseline; gap:10px; margin-top:8px}
|
||
.metric .m-before{font-size:14px; color:#94a3b8; text-decoration:line-through}
|
||
.metric .m-after{font-size:22px; font-weight:700; color:var(--ink)}
|
||
.metric .m-arrow{color:#cbd5e1; font-size:14px}
|
||
|
||
/* footer two-column */
|
||
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px}
|
||
.card{
|
||
border:1px solid var(--line); border-radius:14px; padding:20px;
|
||
}
|
||
.card h3{margin:0 0 10px; font-size:14px; display:flex; align-items:center; gap:8px}
|
||
.card ul{margin:0; padding-left:18px; font-size:13px; color:var(--slate-ink); line-height:1.6}
|
||
.card .dot{width:8px; height:8px; border-radius:50%; display:inline-block}
|
||
.dot.red{background:#ef4444} .dot.green{background:#10b981}
|
||
|
||
@media (max-width:1100px){
|
||
.metrics{grid-template-columns:1fr 1fr}
|
||
.twocol{grid-template-columns:1fr}
|
||
body{padding:32px 24px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Balam · Flujo financiero</h1>
|
||
<p class="lede">Cómo opera el ciclo de facturación, cobranza y conciliación hoy, y cómo operará después del MVP.</p>
|
||
|
||
<!-- ====== HOY ====== -->
|
||
<div class="flow-block">
|
||
<div class="flow-title">Hoy <span class="pill bad">Manual</span></div>
|
||
<p class="flow-sub">Ocho pasos, todos dependientes de una persona moviendo datos entre sistemas que no se hablan.</p>
|
||
|
||
<p class="section-label">Flujo actual</p>
|
||
|
||
<div class="flow">
|
||
<div class="node">
|
||
<div class="tile slate">🕐</div>
|
||
<div class="label">Jira</div>
|
||
<div class="sub">Horas por cliente</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile slate">👥</div>
|
||
<div class="label">BUK</div>
|
||
<div class="sub">Nómina aprobada</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile rose">✍️</div>
|
||
<div class="label">Captura factura</div>
|
||
<div class="sub">Manual en BIND</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile rose">📧</div>
|
||
<div class="label">Cobranza</div>
|
||
<div class="sub">Correo a mano</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile rose">⬇️</div>
|
||
<div class="label">PDFs banco</div>
|
||
<div class="sub">Descarga manual</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile rose">📊</div>
|
||
<div class="label">Excel</div>
|
||
<div class="sub">Conciliación</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile rose">📒</div>
|
||
<div class="label">Contador</div>
|
||
<div class="sub">Captura asientos</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile rose">📈</div>
|
||
<div class="label">Reporte CxC</div>
|
||
<div class="sub">Llega tarde</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== DESPUÉS ====== -->
|
||
<div class="flow-block">
|
||
<div class="flow-title">Después del MVP <span class="pill ok">Orquestado</span></div>
|
||
<p class="flow-sub">La plataforma absorbe los pasos repetitivos. Las personas solo tocan excepciones.</p>
|
||
|
||
<p class="section-label">Diagrama de flujo completo</p>
|
||
|
||
<div class="flow">
|
||
<div class="node">
|
||
<div class="tile navy">📘</div>
|
||
<div class="label">BIND ERP</div>
|
||
<div class="sub">Fuente de verdad</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<!-- Plataforma group -->
|
||
<div class="group" data-label="Plataforma de operaciones financieras">
|
||
<div class="node">
|
||
<div class="tile peach">🔄</div>
|
||
<div class="label">Sync API</div>
|
||
<div class="sub">Facturas + clientes</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile lavender">⚙️</div>
|
||
<div class="label">Motor</div>
|
||
<div class="sub">Reglas + match</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile lavender">📬</div>
|
||
<div class="label">Cobranza</div>
|
||
<div class="sub">Auto + lista blanca</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile amber">📊</div>
|
||
<div class="label">Dashboard</div>
|
||
<div class="sub">CxC en vivo</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile mint">💳</div>
|
||
<div class="label">Pago link</div>
|
||
<div class="sub">Stripe · opcional</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="section-label" style="margin-top:32px">Ramal de conciliación bancaria</p>
|
||
|
||
<div class="flow">
|
||
<div class="node">
|
||
<div class="tile slate">📄</div>
|
||
<div class="label">PDF banco</div>
|
||
<div class="sub">Upload mensual</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile peach">🤖</div>
|
||
<div class="label">Claude</div>
|
||
<div class="sub">Extrae movimientos</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile lavender">🔗</div>
|
||
<div class="label">Match</div>
|
||
<div class="sub">Auto · monto + ref</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile amber">👁️</div>
|
||
<div class="label">Revisión</div>
|
||
<div class="sub">Solo excepciones</div>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="node">
|
||
<div class="tile mint">📥</div>
|
||
<div class="label">Export BIND</div>
|
||
<div class="sub">Asientos al contador</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== MÉTRICAS ====== -->
|
||
<p class="section-label">Impacto medible</p>
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<div class="m-label">Pasos manuales</div>
|
||
<div class="m-row">
|
||
<span class="m-before">8</span>
|
||
<span class="m-arrow">→</span>
|
||
<span class="m-after">2</span>
|
||
</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="m-label">Tiempo de conciliación</div>
|
||
<div class="m-row">
|
||
<span class="m-before">Horas / mes</span>
|
||
<span class="m-arrow">→</span>
|
||
<span class="m-after">−60%</span>
|
||
</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="m-label">Errores contables</div>
|
||
<div class="m-row">
|
||
<span class="m-before">Recurrentes</span>
|
||
<span class="m-arrow">→</span>
|
||
<span class="m-after">−70%</span>
|
||
</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="m-label">Visibilidad dirección</div>
|
||
<div class="m-row">
|
||
<span class="m-before">Reporte</span>
|
||
<span class="m-arrow">→</span>
|
||
<span class="m-after">Tiempo real</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== DOLOR / GANANCIA ====== -->
|
||
<div class="twocol">
|
||
<div class="card">
|
||
<h3><span class="dot red"></span> Dolor que se elimina</h3>
|
||
<ul>
|
||
<li>Riesgo de mandar recordatorio a ACUNTIA o Top 3 por error humano.</li>
|
||
<li>Horas perdidas conciliando 3 PDFs bancarios a mano.</li>
|
||
<li>Errores contables que llegan tarde al contador.</li>
|
||
<li>Dirección sin visibilidad real del CxC del día.</li>
|
||
<li>Cobranza dependiendo de que alguien recuerde mandar el correo.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3><span class="dot green"></span> Lo que se gana</h3>
|
||
<ul>
|
||
<li>Cobro más rápido con link de pago directo en el correo.</li>
|
||
<li>Conciliación automática + cola humana solo para excepciones.</li>
|
||
<li>Dashboard en tiempo real accesible para CEO / CFO / CTO.</li>
|
||
<li>Audit log completo de quién hizo qué y cuándo.</li>
|
||
<li>Base preparada para Fase 2: Jira → BUK → Factura end-to-end.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|