1157 lines
81 KiB
HTML
1157 lines
81 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="es">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Moraworld Imports — Documentación de Requerimientos v1.1</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
--blue:#0057FF;--blue-d:#003FC7;--blue-l:#EEF3FF;
|
||
--orange:#FF6B00;--green:#10B981;--red:#EF4444;
|
||
--purple:#8B5CF6;--yellow:#F59E0B;
|
||
--dark:#0D1117;--sidebar-bg:#111827;
|
||
--gray-900:#111827;--gray-800:#1F2937;--gray-700:#374151;
|
||
--gray-600:#4B5563;--gray-500:#6B7280;--gray-400:#9CA3AF;
|
||
--gray-300:#D1D5DB;--gray-200:#E5E7EB;--gray-100:#F3F4F6;
|
||
--white:#fff;
|
||
--sidebar-w:260px;
|
||
--font-mono:'JetBrains Mono',monospace;
|
||
}
|
||
|
||
html{scroll-behavior:smooth}
|
||
body{font-family:'Inter',sans-serif;background:var(--gray-100);color:var(--gray-900);display:flex;min-height:100vh}
|
||
|
||
/* ── SIDEBAR ── */
|
||
aside{
|
||
width:var(--sidebar-w);min-width:var(--sidebar-w);
|
||
background:var(--dark);position:fixed;top:0;left:0;bottom:0;
|
||
overflow-y:auto;z-index:100;display:flex;flex-direction:column;
|
||
border-right:1px solid rgba(255,255,255,.06);
|
||
}
|
||
.sidebar-logo{
|
||
padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,.07);
|
||
font-size:1rem;font-weight:800;color:var(--white);line-height:1.4;
|
||
}
|
||
.sidebar-logo span{color:var(--orange)}
|
||
.sidebar-logo small{display:block;font-size:.7rem;font-weight:500;color:rgba(255,255,255,.35);margin-top:4px;font-family:var(--font-mono)}
|
||
.sidebar-section{padding:20px 16px 8px;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25)}
|
||
.sidebar-link{
|
||
display:flex;align-items:center;gap:10px;
|
||
padding:9px 20px;font-size:.82rem;color:rgba(255,255,255,.55);
|
||
text-decoration:none;transition:all .15s;border-left:3px solid transparent;
|
||
}
|
||
.sidebar-link:hover{color:var(--white);background:rgba(255,255,255,.04);border-left-color:rgba(255,255,255,.15)}
|
||
.sidebar-link.active{color:var(--white);background:rgba(0,87,255,.12);border-left-color:var(--blue)}
|
||
.sidebar-link .icon{font-size:.9rem;flex-shrink:0;width:16px;text-align:center}
|
||
.sidebar-footer{margin-top:auto;padding:16px 20px;border-top:1px solid rgba(255,255,255,.07)}
|
||
.sidebar-badge{display:inline-block;background:rgba(0,87,255,.2);color:#7AADFF;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.05em;margin:2px}
|
||
|
||
/* ── MAIN ── */
|
||
main{margin-left:var(--sidebar-w);flex:1;min-width:0}
|
||
|
||
/* ── TOP BAR ── */
|
||
.topbar{
|
||
position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);
|
||
backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:0 40px;height:52px;
|
||
}
|
||
.topbar-breadcrumb{font-size:.8rem;color:var(--gray-500)}
|
||
.topbar-breadcrumb strong{color:var(--gray-900)}
|
||
.topbar-badges{display:flex;gap:8px}
|
||
.tb{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.04em}
|
||
.tb-blue{background:var(--blue-l);color:var(--blue)}
|
||
.tb-green{background:#D1FAE5;color:#065F46}
|
||
.tb-orange{background:#FFF3E8;color:#9A3412}
|
||
|
||
/* ── CONTENT ── */
|
||
.content{padding:48px 40px 80px;max-width:960px}
|
||
|
||
/* ── SECTION ANCHOR ── */
|
||
.doc-section{margin-bottom:64px}
|
||
.section-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid var(--gray-200)}
|
||
.section-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
|
||
.icon-blue{background:var(--blue-l)}
|
||
.icon-green{background:#D1FAE5}
|
||
.icon-orange{background:#FFF3E8}
|
||
.icon-purple{background:#EDE9FE}
|
||
.icon-yellow{background:#FEF3C7}
|
||
.icon-gray{background:var(--gray-100);border:1px solid var(--gray-200)}
|
||
.section-title{font-size:1.5rem;font-weight:800;color:var(--gray-900);margin-bottom:4px}
|
||
.section-sub{font-size:.88rem;color:var(--gray-500);line-height:1.5}
|
||
.section-number{font-size:.7rem;font-weight:700;font-family:var(--font-mono);color:var(--blue);background:var(--blue-l);padding:2px 8px;border-radius:4px;margin-bottom:6px;display:inline-block}
|
||
|
||
/* ── SUBSECTION ── */
|
||
.subsection{margin-bottom:36px}
|
||
.subsection-title{font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:14px;display:flex;align-items:center;gap:8px}
|
||
.subsection-title::before{content:'';display:inline-block;width:3px;height:16px;background:var(--blue);border-radius:2px}
|
||
|
||
/* ── CALLOUT ── */
|
||
.callout{border-radius:10px;padding:14px 18px;margin-bottom:16px;display:flex;gap:12px;align-items:flex-start;font-size:.85rem;line-height:1.6}
|
||
.callout-blue{background:var(--blue-l);border-left:3px solid var(--blue)}
|
||
.callout-green{background:#D1FAE5;border-left:3px solid var(--green)}
|
||
.callout-orange{background:#FFF3E8;border-left:3px solid var(--orange)}
|
||
.callout-yellow{background:#FEF3C7;border-left:3px solid var(--yellow)}
|
||
.callout-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
|
||
.callout p{color:var(--gray-700)}
|
||
.callout strong{color:var(--gray-900)}
|
||
|
||
/* ── ADDRESS BOX ── */
|
||
.address-box{
|
||
background:var(--dark);border-radius:10px;padding:18px 22px;
|
||
font-family:var(--font-mono);font-size:.85rem;color:#A5B4FC;
|
||
border:1px solid rgba(0,87,255,.3);margin-bottom:16px;line-height:1.8;
|
||
}
|
||
.address-box .suite{color:var(--orange);font-weight:700;font-size:1rem}
|
||
|
||
/* ── CODE BLOCK ── */
|
||
.code-block{
|
||
background:#0D1117;border:1px solid rgba(255,255,255,.1);border-radius:10px;
|
||
padding:20px 22px;font-family:var(--font-mono);font-size:.8rem;
|
||
color:#A5B4FC;line-height:1.9;overflow-x:auto;margin-bottom:16px;
|
||
}
|
||
.code-block .c{color:rgba(255,255,255,.25)}
|
||
.code-block .v{color:#FCD34D}
|
||
.code-block .r{color:#6EE7B7;font-weight:700}
|
||
.code-block .k{color:#F9A8D4}
|
||
|
||
/* ── TABLE ── */
|
||
.doc-table{width:100%;border-collapse:collapse;font-size:.83rem;margin-bottom:16px}
|
||
.doc-table th{text-align:left;padding:10px 14px;background:var(--gray-900);color:var(--white);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
|
||
.doc-table th:first-child{border-radius:8px 0 0 0}
|
||
.doc-table th:last-child{border-radius:0 8px 0 0}
|
||
.doc-table td{padding:10px 14px;border-bottom:1px solid var(--gray-200);color:var(--gray-700);vertical-align:top}
|
||
.doc-table tr:last-child td{border-bottom:none}
|
||
.doc-table tr:hover td{background:var(--gray-100)}
|
||
.yes{color:var(--green);font-weight:700}
|
||
.no{color:var(--gray-300)}
|
||
.partial{color:var(--yellow);font-weight:600}
|
||
|
||
/* ── FEATURE LIST ── */
|
||
.feat-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
|
||
.feat-item{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--gray-700);line-height:1.5}
|
||
.feat-item::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0;margin-top:1px}
|
||
|
||
/* ── FLOW DIAGRAM ── */
|
||
.flow-diagram{background:var(--gray-100);border:1px solid var(--gray-200);border-radius:12px;padding:24px;margin-bottom:16px}
|
||
.flow-step-doc{display:flex;gap:14px;align-items:flex-start;margin-bottom:0}
|
||
.flow-connector{width:2px;background:var(--gray-300);min-height:20px;margin:4px 0 4px 15px}
|
||
.flow-connector.green{background:var(--green)}
|
||
.flow-connector.blue{background:var(--blue)}
|
||
.flow-connector.orange{background:var(--orange)}
|
||
.flow-connector.dashed{background:repeating-linear-gradient(to bottom,var(--yellow) 0,var(--yellow) 5px,transparent 5px,transparent 10px)}
|
||
.step-bubble{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;color:var(--white)}
|
||
.step-blue{background:var(--blue)}
|
||
.step-green{background:var(--green)}
|
||
.step-orange{background:var(--orange)}
|
||
.step-yellow{background:var(--yellow);color:var(--gray-900)}
|
||
.step-gray{background:var(--gray-400)}
|
||
.step-body{flex:1;padding-top:4px;padding-bottom:20px}
|
||
.step-body h4{font-size:.88rem;font-weight:700;color:var(--gray-900);margin-bottom:4px}
|
||
.step-body p{font-size:.81rem;color:var(--gray-500);line-height:1.5}
|
||
.step-alt{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:16px;margin-left:46px}
|
||
.step-alt-item{background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:12px 14px}
|
||
.step-alt-item .label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);margin-bottom:4px}
|
||
.step-alt-item p{font-size:.8rem;color:var(--gray-700);line-height:1.4}
|
||
.decision-box{background:#FEF3C7;border:1px dashed var(--yellow);border-radius:8px;padding:12px 16px;display:flex;gap:10px;margin-bottom:0;align-items:flex-start}
|
||
.decision-box .d-icon{font-size:.9rem;flex-shrink:0;margin-top:1px}
|
||
.decision-box p{font-size:.81rem;color:var(--gray-700);line-height:1.4}
|
||
|
||
/* ── SPLIT FLOW ── */
|
||
.split-flow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 0 46px}
|
||
.split-path{border-radius:10px;padding:14px 16px}
|
||
.split-path.sp-green{background:#D1FAE5;border:1px solid #A7F3D0}
|
||
.split-path.sp-yellow{background:#FEF3C7;border:1px solid #FDE68A}
|
||
.split-path .sp-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
|
||
.sp-green .sp-label{color:#065F46}
|
||
.sp-yellow .sp-label{color:#92400E}
|
||
.split-path p{font-size:.8rem;color:var(--gray-700);line-height:1.4}
|
||
|
||
/* ── ROLE CARDS ── */
|
||
.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
|
||
.role-doc{border-radius:10px;padding:18px 16px;border:1px solid var(--gray-200)}
|
||
.role-doc .r-icon{font-size:1.5rem;margin-bottom:10px}
|
||
.role-doc .r-name{font-size:.9rem;font-weight:700;margin-bottom:6px;color:var(--gray-900)}
|
||
.role-doc .r-desc{font-size:.78rem;color:var(--gray-500);line-height:1.5}
|
||
.role-doc .r-badge{display:inline-block;margin-top:10px;font-size:.68rem;font-weight:700;padding:2px 10px;border-radius:999px;letter-spacing:.04em}
|
||
|
||
/* ── MODULE CARDS ── */
|
||
.modules-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
|
||
.module-card{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:20px;transition:box-shadow .2s}
|
||
.module-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08)}
|
||
.module-card .m-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
|
||
.module-card .m-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
|
||
.module-card .m-title{font-size:.92rem;font-weight:700;color:var(--gray-900)}
|
||
.module-card .m-tag{font-size:.68rem;font-weight:700;color:var(--gray-500);margin-top:2px}
|
||
|
||
/* ── TRACKING STATES ── */
|
||
.states-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
|
||
.state-row{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:10px 16px}
|
||
.state-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
|
||
.state-num{font-size:.68rem;font-family:var(--font-mono);color:var(--gray-400);min-width:24px}
|
||
.state-name{font-size:.82rem;font-weight:700;font-family:var(--font-mono);color:var(--gray-900);flex:1}
|
||
.state-desc{font-size:.78rem;color:var(--gray-500)}
|
||
|
||
/* ── ISO GRID ── */
|
||
.iso-table{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
|
||
.iso-row{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:12px 14px}
|
||
.iso-key{font-size:.72rem;font-weight:700;font-family:var(--font-mono);color:var(--blue);min-width:110px;padding-top:1px}
|
||
.iso-val{font-size:.8rem;color:var(--gray-700);line-height:1.5}
|
||
|
||
/* ── SENAE CATS ── */
|
||
.senae-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
|
||
.senae-cat{border-radius:10px;padding:16px 14px;text-align:center}
|
||
.sc-4x4{background:#D1FAE5;border:1px solid #A7F3D0}
|
||
.sc-b{background:#DBEAFE;border:1px solid #BFDBFE}
|
||
.sc-c{background:#FFEDD5;border:1px solid #FED7AA}
|
||
.sc-d{background:#EDE9FE;border:1px solid #DDD6FE}
|
||
.senae-cat .sc-name{font-weight:800;font-size:.9rem;margin-bottom:4px}
|
||
.senae-cat .sc-rate{font-size:1.6rem;font-weight:900;line-height:1;margin-bottom:6px}
|
||
.senae-cat .sc-desc{font-size:.72rem;color:var(--gray-600);line-height:1.4}
|
||
.sc-4x4 .sc-rate{color:var(--green)}
|
||
.sc-b .sc-rate{color:#1D4ED8}
|
||
.sc-c .sc-rate{color:var(--orange)}
|
||
.sc-d .sc-rate{color:var(--purple)}
|
||
|
||
/* ── INTEGRATIONS ── */
|
||
.int-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}
|
||
.int-row{background:var(--white);border:1px solid var(--gray-200);border-radius:8px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start}
|
||
.int-row .i-icon{font-size:1.2rem;flex-shrink:0}
|
||
.int-row .i-name{font-size:.82rem;font-weight:700;display:block;margin-bottom:2px}
|
||
.int-row .i-proto{font-size:.7rem;font-family:var(--font-mono);color:var(--gray-400)}
|
||
.int-row .i-desc{font-size:.77rem;color:var(--gray-500);margin-top:4px;line-height:1.4}
|
||
|
||
/* ── NONFUNC ── */
|
||
.nf-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
|
||
.nf-row{display:flex;gap:0;background:var(--white);border:1px solid var(--gray-200);border-radius:8px;overflow:hidden}
|
||
.nf-key{background:var(--gray-900);color:var(--white);font-size:.75rem;font-weight:700;padding:10px 16px;min-width:180px;font-family:var(--font-mono);display:flex;align-items:center}
|
||
.nf-val{font-size:.82rem;color:var(--gray-700);padding:10px 16px;display:flex;align-items:center;line-height:1.4}
|
||
|
||
/* ── URL STRUCTURE ── */
|
||
.url-tree{background:#0D1117;border-radius:10px;padding:20px 22px;font-family:var(--font-mono);font-size:.8rem;line-height:2.2;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.08);margin-bottom:16px}
|
||
.url-tree .u{color:#7AADFF}
|
||
.url-tree .u-pub{color:#6EE7B7}
|
||
.url-tree .u-auth{color:#FDB87A}
|
||
.url-tree .u-admin{color:#C4B5FD}
|
||
.url-tree .u-comment{color:rgba(255,255,255,.2)}
|
||
|
||
/* ── COMPANY CARDS ── */
|
||
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
|
||
.co-doc{background:var(--white);border:2px solid var(--gray-200);border-radius:12px;padding:24px;display:flex;gap:16px;align-items:flex-start;transition:border-color .2s}
|
||
.co-doc:hover{border-color:var(--blue)}
|
||
.co-doc .co-flag{font-size:2.4rem;flex-shrink:0}
|
||
.co-doc .co-name{font-size:.95rem;font-weight:800;color:var(--gray-900);margin-bottom:6px}
|
||
.co-doc .co-detail{font-size:.8rem;color:var(--gray-500);line-height:1.6}
|
||
.co-doc .co-badge{display:inline-block;margin-top:8px;background:var(--blue-l);color:var(--blue);font-size:.68rem;font-weight:700;padding:2px 10px;border-radius:999px}
|
||
|
||
/* ── TYPOGRAPHY ── */
|
||
h3.h3{font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:8px}
|
||
p.body{font-size:.87rem;color:var(--gray-700);line-height:1.7;margin-bottom:12px}
|
||
|
||
/* ── SCROLLBAR ── */
|
||
::-webkit-scrollbar{width:6px;height:6px}
|
||
::-webkit-scrollbar-track{background:transparent}
|
||
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:999px}
|
||
aside::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
|
||
|
||
/* ── MOBILE ── */
|
||
@media(max-width:768px){
|
||
aside{display:none}
|
||
main{margin-left:0}
|
||
.content{padding:24px 20px 60px}
|
||
.roles-grid{grid-template-columns:1fr 1fr}
|
||
.modules-grid,.co-grid,.senae-grid{grid-template-columns:1fr}
|
||
.iso-table,.int-list{grid-template-columns:1fr}
|
||
.split-flow,.step-alt{grid-template-columns:1fr}
|
||
.nf-key{min-width:130px;font-size:.7rem}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══ SIDEBAR ═══ -->
|
||
<aside>
|
||
<div class="sidebar-logo">
|
||
Moraworld<span>.</span>Imports
|
||
<small>Requerimientos v1.1 · Mayo 2026</small>
|
||
</div>
|
||
|
||
<div class="sidebar-section">Proyecto</div>
|
||
<a href="#empresas" class="sidebar-link"><span class="icon">🏢</span>Las empresas</a>
|
||
<a href="#resumen" class="sidebar-link"><span class="icon">📋</span>Resumen ejecutivo</a>
|
||
|
||
<div class="sidebar-section">Arquitectura</div>
|
||
<a href="#arquitectura" class="sidebar-link"><span class="icon">🏗️</span>Multi-Tenant</a>
|
||
<a href="#iso" class="sidebar-link"><span class="icon">🔒</span>ISO/IEC 27001</a>
|
||
<a href="#stack" class="sidebar-link"><span class="icon">⚙️</span>Stack tecnológico</a>
|
||
|
||
<div class="sidebar-section">Sistema</div>
|
||
<a href="#roles" class="sidebar-link"><span class="icon">👥</span>Roles y permisos</a>
|
||
<a href="#modulos" class="sidebar-link"><span class="icon">📦</span>Módulos</a>
|
||
<a href="#tracking-estados" class="sidebar-link"><span class="icon">📍</span>Estados de tracking</a>
|
||
|
||
<div class="sidebar-section">Flujos de Usuario</div>
|
||
<a href="#flujo-cliente" class="sidebar-link"><span class="icon">🧑💻</span>Cliente final (B2C)</a>
|
||
<a href="#flujo-bodega" class="sidebar-link"><span class="icon">📦</span>Operador de bodega</a>
|
||
<a href="#flujo-aduanero" class="sidebar-link"><span class="icon">🛃</span>Agente aduanero</a>
|
||
<a href="#flujo-admin" class="sidebar-link"><span class="icon">⚙️</span>Admin empresa</a>
|
||
<a href="#flujo-b2b" class="sidebar-link"><span class="icon">🚢</span>Importador B2B</a>
|
||
|
||
<div class="sidebar-section">Flujos del Sistema</div>
|
||
<a href="#flujo-url" class="sidebar-link"><span class="icon">🔗</span>Registro por enlace</a>
|
||
<a href="#flujo-calculo" class="sidebar-link"><span class="icon">💰</span>Calculadora SENAE</a>
|
||
<a href="#flujo-notif" class="sidebar-link"><span class="icon">🔔</span>Notificaciones</a>
|
||
<a href="#flujo-auditoria" class="sidebar-link"><span class="icon">📝</span>Auditoría</a>
|
||
|
||
<div class="sidebar-section">Técnico</div>
|
||
<a href="#integraciones" class="sidebar-link"><span class="icon">🔌</span>Integraciones</a>
|
||
<a href="#no-funcionales" class="sidebar-link"><span class="icon">📊</span>Reqs. no funcionales</a>
|
||
<a href="#navegacion" class="sidebar-link"><span class="icon">🗺️</span>Estructura del sitio</a>
|
||
<a href="#consideraciones" class="sidebar-link"><span class="icon">⚖️</span>Consideraciones</a>
|
||
|
||
<div class="sidebar-footer">
|
||
<span class="sidebar-badge">ISO 27001</span>
|
||
<span class="sidebar-badge">SENAE</span>
|
||
<span class="sidebar-badge">INEN</span>
|
||
<span class="sidebar-badge">LOPDP</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ═══ MAIN ═══ -->
|
||
<main>
|
||
<div class="topbar">
|
||
<div class="topbar-breadcrumb">Moraworld Imports › <strong>Documento de Requerimientos</strong></div>
|
||
<div class="topbar-badges">
|
||
<span class="tb tb-blue">v1.1</span>
|
||
<span class="tb tb-green">ISO/IEC 27001</span>
|
||
<span class="tb tb-orange">6 mayo 2026</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<!-- ══════════════════════════════ EMPRESAS ══════════════════════════════ -->
|
||
<div class="doc-section" id="empresas">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-blue">🏢</div>
|
||
<div>
|
||
<div class="section-number">01</div>
|
||
<div class="section-title">Las Empresas</div>
|
||
<div class="section-sub">Operación transfronteriza legalmente constituida en Ecuador y EE.UU.</div>
|
||
</div>
|
||
</div>
|
||
<div class="co-grid">
|
||
<div class="co-doc">
|
||
<div class="co-flag">🇪🇨</div>
|
||
<div>
|
||
<div class="co-name">Moraworld Imports S.A.S.</div>
|
||
<div class="co-detail">Constituida bajo las leyes de <strong>Ecuador</strong>. Representante legal en <strong>Cuenca</strong>. RUC activo, permisos aduaneros vigentes ante la SENAE.</div>
|
||
<span class="co-badge">Ecuador · S.A.S. · SENAE · Cuenca</span>
|
||
</div>
|
||
</div>
|
||
<div class="co-doc">
|
||
<div class="co-flag">🇺🇸</div>
|
||
<div>
|
||
<div class="co-name">Mora Global Import LLC</div>
|
||
<div class="co-detail">LLC registrada en el estado de <strong>New Jersey, EE.UU.</strong> Bodega operativa en <strong>150 N Day St, City of Orange, NJ 07050</strong>.</div>
|
||
<span class="co-badge">New Jersey · LLC · NJ 07050</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ RESUMEN ══════════════════════════════ -->
|
||
<div class="doc-section" id="resumen">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-green">📋</div>
|
||
<div>
|
||
<div class="section-number">02</div>
|
||
<div class="section-title">Resumen Ejecutivo</div>
|
||
<div class="section-sub">El problema de negocio y las dos líneas de servicio.</div>
|
||
</div>
|
||
</div>
|
||
<p class="body">
|
||
<strong>Moraworld Imports S.A.S.</strong> y <strong>Mora Global Import LLC</strong> operan un ecosistema logístico transfronterizo. La bodega física en <strong>150 N Day St, City of Orange, NJ 07050</strong> recibe paquetes de clientes ecuatorianos que compran en tiendas online de EE.UU. El sistema gestiona la logística de reenvío a Ecuador, incluyendo la declaración automática ante la <strong>SENAE</strong>.
|
||
</p>
|
||
<div class="callout callout-blue">
|
||
<span class="callout-icon">📍</span>
|
||
<p>Dirección de la bodega: <strong>150 N Day St, City of Orange, NJ 07050, EE.UU.</strong> — Cada cliente recibe una Suite personalizada (p. ej., Suite EC-00345) como dirección de entrega para sus compras online.</p>
|
||
</div>
|
||
<table class="doc-table">
|
||
<thead><tr><th>Servicio</th><th>Descripción</th><th>Tipo de flujo</th><th>Segmento</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Casillero Personal</strong></td><td>Compras pequeñas en Amazon, eBay, Walmart, ropa, tecnología</td><td>Automatizado</td><td>B2C — Clientes individuales</td></tr>
|
||
<tr><td><strong>Carga Pesada / Pallets</strong></td><td>Importación mayorista: pallets, contenedores (ej: 1,000 pares de zapatos)</td><td>Cotización especial</td><td>B2B — Importadores</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ ARQUITECTURA ══════════════════════════════ -->
|
||
<div class="doc-section" id="arquitectura">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-purple">🏗️</div>
|
||
<div>
|
||
<div class="section-number">03</div>
|
||
<div class="section-title">Arquitectura Multi-Tenant</div>
|
||
<div class="section-sub">Un único despliegue con datos completamente aislados por organización.</div>
|
||
</div>
|
||
</div>
|
||
<p class="body">El sistema estará desarrollado bajo una arquitectura <strong>Multi-Tenant</strong>, lo que permite que múltiples empresas usen la misma plataforma con sus datos totalmente separados mediante schemas independientes en la base de datos.</p>
|
||
<div class="code-block"><span class="c">// Diagrama de capas</span>
|
||
🌐 INTERNET (HTTPS / TLS 1.3)
|
||
│
|
||
⚡ Load Balancer / API Gateway
|
||
│
|
||
┌─────┼──────┐
|
||
│ │ │
|
||
Tenant A Tenant B Tenant N
|
||
│ │ │
|
||
└─────┼──────┘
|
||
│
|
||
🗄️ PostgreSQL — Schema por Tenant</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ ISO 27001 ══════════════════════════════ -->
|
||
<div class="doc-section" id="iso">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-blue">🔒</div>
|
||
<div>
|
||
<div class="section-number">04</div>
|
||
<div class="section-title">Cumplimiento ISO/IEC 27001:2022</div>
|
||
<div class="section-sub">Controles de seguridad de la información implementados en el sistema.</div>
|
||
</div>
|
||
</div>
|
||
<div class="iso-table">
|
||
<div class="iso-row"><span class="iso-key">A.5 Políticas</span><span class="iso-val">Política de uso aceptable, manejo de datos y retención</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.9 Acceso</span><span class="iso-val">Autenticación MFA obligatoria, RBAC (Role-Based Access Control)</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.6 Organización</span><span class="iso-val">Roles definidos con segregación de funciones</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.10 Criptografía</span><span class="iso-val">TLS 1.3 en tránsito · AES-256 en reposo</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.8 Activos</span><span class="iso-val">Inventario de datos personales y de paquetes (LOPDP Ecuador)</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.12 Operaciones</span><span class="iso-val">Logs de auditoría inmutables, monitoreo continuo (SIEM)</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.14 Desarrollo</span><span class="iso-val">SDLC seguro, revisiones de código, pruebas OWASP Top 10</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.16 Incidentes</span><span class="iso-val">Proceso de gestión y notificación de incidentes de seguridad</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.7 RRHH</span><span class="iso-val">Procedimientos de onboarding/offboarding de usuarios internos</span></div>
|
||
<div class="iso-row"><span class="iso-key">A.18 Cumplimiento</span><span class="iso-val">Declaración aduanera automática conforme a normativa SENAE</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ STACK ══════════════════════════════ -->
|
||
<div class="doc-section" id="stack">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-gray">⚙️</div>
|
||
<div>
|
||
<div class="section-number">05</div>
|
||
<div class="section-title">Stack Tecnológico Sugerido</div>
|
||
<div class="section-sub">Tecnologías recomendadas por capa del sistema.</div>
|
||
</div>
|
||
</div>
|
||
<table class="doc-table">
|
||
<thead><tr><th>Capa</th><th>Tecnología</th><th>Detalle</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Frontend</strong></td><td>Next.js / React</td><td>SSR para SEO optimizado en landing page</td></tr>
|
||
<tr><td><strong>Backend / API</strong></td><td>Node.js + NestJS</td><td>REST / GraphQL</td></tr>
|
||
<tr><td><strong>Base de datos</strong></td><td>PostgreSQL</td><td>Multi-schema por tenant</td></tr>
|
||
<tr><td><strong>Autenticación</strong></td><td>OAuth 2.0 + JWT + MFA</td><td>TOTP para segundo factor</td></tr>
|
||
<tr><td><strong>Almacenamiento</strong></td><td>AWS S3 o equivalente</td><td>Fotos de paquetes, facturas, documentos</td></tr>
|
||
<tr><td><strong>Integración</strong></td><td>Amazon SP-API · WebService SENAE</td><td>Datos de productos y declaraciones aduaneras</td></tr>
|
||
<tr><td><strong>Tracking</strong></td><td>Webhooks + IDs propios</td><td>Sistema de tracking con ID único por paquete</td></tr>
|
||
<tr><td><strong>Infraestructura</strong></td><td>AWS / GCP</td><td>Ambientes: desarrollo, staging, producción</td></tr>
|
||
<tr><td><strong>Seguridad</strong></td><td>WAF + Rate limiting + SIEM</td><td>Monitoreo continuo y auditoría</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ ROLES ══════════════════════════════ -->
|
||
<div class="doc-section" id="roles">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-yellow">👥</div>
|
||
<div>
|
||
<div class="section-number">06</div>
|
||
<div class="section-title">Roles y Permisos</div>
|
||
<div class="section-sub">6 roles definidos con accesos diferenciados por función.</div>
|
||
</div>
|
||
</div>
|
||
<div class="roles-grid">
|
||
<div class="role-doc" style="background:#EEF3FF;border-color:#BFDBFE">
|
||
<div class="r-icon">👑</div>
|
||
<div class="r-name">Super Admin</div>
|
||
<div class="r-desc">Acceso total. Gestiona tenants, usuarios globales y configuración del sistema completo.</div>
|
||
<span class="r-badge" style="background:var(--blue-l);color:var(--blue)">Acceso total</span>
|
||
</div>
|
||
<div class="role-doc" style="background:#EDE9FE;border-color:#DDD6FE">
|
||
<div class="r-icon">🏢</div>
|
||
<div class="r-name">Admin Empresa</div>
|
||
<div class="r-desc">Administra su propio tenant: usuarios, tarifas, bodegas asignadas, reportes.</div>
|
||
<span class="r-badge" style="background:#EDE9FE;color:var(--purple)">Tenant propio</span>
|
||
</div>
|
||
<div class="role-doc" style="background:#FEF3C7;border-color:#FDE68A">
|
||
<div class="r-icon">📦</div>
|
||
<div class="r-name">Operador Bodega</div>
|
||
<div class="r-desc">Personal en NJ. Verifica, pesa, fotografía y despacha paquetes físicamente.</div>
|
||
<span class="r-badge" style="background:#FEF3C7;color:#92400E">Bodega NJ</span>
|
||
</div>
|
||
<div class="role-doc" style="background:#D1FAE5;border-color:#A7F3D0">
|
||
<div class="r-icon">🛃</div>
|
||
<div class="r-name">Agente Aduanero</div>
|
||
<div class="r-desc">Revisa y aprueba las declaraciones antes de enviarlas a la SENAE.</div>
|
||
<span class="r-badge" style="background:#D1FAE5;color:#065F46">SENAE</span>
|
||
</div>
|
||
<div class="role-doc" style="background:#FFF3E8;border-color:#FED7AA">
|
||
<div class="r-icon">🧑💻</div>
|
||
<div class="r-name">Cliente Final</div>
|
||
<div class="r-desc">Usuario ecuatoriano: registra compras, hace pre-alertas y da seguimiento.</div>
|
||
<span class="r-badge" style="background:#FFF3E8;color:#9A3412">B2C · Ecuador</span>
|
||
</div>
|
||
<div class="role-doc">
|
||
<div class="r-icon">🎧</div>
|
||
<div class="r-name">Soporte</div>
|
||
<div class="r-desc">Puede ver información del cliente y paquetes. No puede modificar datos clave.</div>
|
||
<span class="r-badge" style="background:var(--gray-100);color:var(--gray-500)">Solo lectura</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="subsection-title" style="margin-top:24px">Matriz de Permisos</div>
|
||
<div style="overflow-x:auto">
|
||
<table class="doc-table">
|
||
<thead>
|
||
<tr><th>Acción</th><th>Super Admin</th><th>Admin</th><th>Bodega</th><th>Aduanero</th><th>Cliente</th><th>Soporte</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Ver dashboard</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td></tr>
|
||
<tr><td>Crear / editar usuarios</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>Configurar tarifas y zonas</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>Registrar compra (link/manual)</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="yes">✅</td><td class="no">❌</td></tr>
|
||
<tr><td>Ver mis paquetes</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="yes">✅</td><td class="partial">Solo asign.</td></tr>
|
||
<tr><td>Verificar paquete en bodega</td><td class="no">❌</td><td class="no">❌</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>Confirmar peso / dimensiones</td><td class="no">❌</td><td class="no">❌</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>Generar declaración (DSI)</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>Enviar datos a SENAE</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
<tr><td>Ver historial de envíos</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="yes">✅</td><td class="partial">Solo propios</td><td class="yes">✅</td></tr>
|
||
<tr><td>Acceder a logs de auditoría</td><td class="yes">✅</td><td class="yes">✅</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td><td class="no">❌</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ MÓDULOS ══════════════════════════════ -->
|
||
<div class="doc-section" id="modulos">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-orange">📦</div>
|
||
<div>
|
||
<div class="section-number">07</div>
|
||
<div class="section-title">Módulos del Sistema</div>
|
||
<div class="section-sub">8 módulos integrados que cubren toda la operación.</div>
|
||
</div>
|
||
</div>
|
||
<div class="modules-grid">
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-green">🌐</div><div><div class="m-title">Landing Page (Pública)</div><div class="m-tag">Acceso público · SEO · Sin login</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>Hero con propuesta de valor y dirección Suite NJ</li>
|
||
<li>Calculadora de envío visible sin registro</li>
|
||
<li>Sección de legalidad: RUC, permisos SENAE, INEN</li>
|
||
<li>Servicios diferenciados: Casillero vs Carga Pesada</li>
|
||
<li>Botón WhatsApp flotante (NJ + Cuenca Ecuador)</li>
|
||
<li>FAQ · Blog · Preguntas frecuentes</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-blue">👤</div><div><div class="m-title">Portal del Cliente Final</div><div class="m-tag">Rol: Cliente · Acceso autenticado</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>Suite personalizada asignada automáticamente al registrarse</li>
|
||
<li>Pre-alerta con carga de factura (PDF/imagen)</li>
|
||
<li>Registro por URL (escaneo de Amazon) o manual</li>
|
||
<li>Fotos del paquete al llegar a bodega NJ</li>
|
||
<li>Calculadora con desglose SENAE antes de pagar</li>
|
||
<li>Tracking ID único · historial de envíos</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-orange">🏭</div><div><div class="m-title">Portal de Bodega (NJ)</div><div class="m-tag">Rol: Operador Bodega · 150 N Day St</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>Lista de paquetes esperados con pre-alertas del cliente</li>
|
||
<li>Recepción por escaneo de código de barras / QR</li>
|
||
<li>Confirmación de peso real y dimensiones</li>
|
||
<li>Toma y carga de fotos del paquete</li>
|
||
<li>Alerta de discrepancia si el peso difiere >10%</li>
|
||
<li>Sincronización vía API con el software propio de bodega</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-purple">⚙️</div><div><div class="m-title">Portal Administrativo</div><div class="m-tag">Roles: Admin · Super Admin</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>Dashboard con métricas en tiempo real</li>
|
||
<li>Gestión de usuarios y roles</li>
|
||
<li>Configuración de tarifas por libra/kg y por zona</li>
|
||
<li>Reportes de ingresos y volumen de envíos</li>
|
||
<li>Logs de auditoría inmutables</li>
|
||
<li>Gestión de múltiples bodegas</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-green">🛃</div><div><div class="m-title">Módulo SENAE / Aduanas</div><div class="m-tag">Rol: Agente Aduanero · DSI automática</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>Generación automática de la Declaración Simplificada (DSI)</li>
|
||
<li>Cálculo automático de FODINFA, IVA y arancel</li>
|
||
<li>Envío electrónico al WebService oficial SENAE</li>
|
||
<li>Recepción y almacenamiento del número de autorización</li>
|
||
<li>Alerta si valor supera el umbral del régimen 4×4 ($400)</li>
|
||
<li>Proceso de importación formal (DAI) para carga pesada</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-blue">📍</div><div><div class="m-title">Módulo de Tracking</div><div class="m-tag">Todos los roles · Sin login para búsqueda</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>ID único por paquete: <code style="font-family:var(--font-mono);font-size:.78rem;background:var(--gray-100);padding:1px 6px;border-radius:4px">EC-YYYYMMDD-XXXXXX</code></li>
|
||
<li>11 estados del ciclo de vida del paquete</li>
|
||
<li>Búsqueda pública sin necesidad de login</li>
|
||
<li>Timeline visual del estado actual</li>
|
||
<li>Vinculación con el tracking del courier (FedEx/DHL/UPS)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-yellow">📄</div><div><div class="m-title">Pre-alerta y Gestión Documental</div><div class="m-tag">Rol: Cliente · Antes de llegada</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>Formulario de aviso previo: tienda, tracking vendedor, valor</li>
|
||
<li>Carga de factura comercial (PDF o imagen)</li>
|
||
<li>Fecha estimada de llegada a bodega</li>
|
||
<li>La bodega recibe aviso y organiza el espacio con anticipación</li>
|
||
<li>Vinculación automática cuando el paquete llega</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card">
|
||
<div class="m-header"><div class="m-icon icon-orange">🚢</div><div><div class="m-title">Servicio Carga Pesada B2B</div><div class="m-tag">Importadores mayoristas · Cotización especial</div></div></div>
|
||
<ul class="feat-list">
|
||
<li>Flujo de cotización (no automatizado)</li>
|
||
<li>Formulario: mercancía, peso, pallets, valor, origen</li>
|
||
<li>Verificación de cumplimiento normas INEN</li>
|
||
<li>Declaración formal DAI ante la SENAE</li>
|
||
<li>Asesoría en partidas arancelarias</li>
|
||
<li>Expediente dedicado con ID de seguimiento B2B</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ TRACKING ESTADOS ══════════════════════════════ -->
|
||
<div class="doc-section" id="tracking-estados">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-blue">📍</div>
|
||
<div>
|
||
<div class="section-number">08</div>
|
||
<div class="section-title">Estados del Tracking</div>
|
||
<div class="section-sub">11 estados que cubren el ciclo completo de un paquete.</div>
|
||
</div>
|
||
</div>
|
||
<div class="callout callout-blue">
|
||
<span class="callout-icon">ℹ️</span>
|
||
<p>Formato del Tracking ID: <strong style="font-family:var(--font-mono)">EC-YYYYMMDD-XXXXXX</strong> · Ejemplo: <strong style="font-family:var(--font-mono)">EC-20260506-082341</strong> · Búsqueda pública sin login desde la landing page.</p>
|
||
</div>
|
||
<div class="states-list">
|
||
<div class="state-row"><div class="state-dot" style="background:#6B7280"></div><div class="state-num">01</div><div class="state-name">REGISTRADO</div><div class="state-desc">El cliente registró la compra en el sistema</div></div>
|
||
<div class="state-row"><div class="state-dot" style="background:#F59E0B"></div><div class="state-num">02</div><div class="state-name">EN_TRANSITO_BODEGA</div><div class="state-desc">El vendedor despachó el pedido hacia la bodega en NJ</div></div>
|
||
<div class="state-row"><div class="state-dot" style="background:#3B82F6"></div><div class="state-num">03</div><div class="state-name">RECIBIDO_BODEGA</div><div class="state-desc">La bodega NJ confirmó la recepción física del paquete</div></div>
|
||
<div class="state-row"><div class="state-dot" style="background:#8B5CF6"></div><div class="state-num">04</div><div class="state-name">EN_VERIFICACION</div><div class="state-desc">El operador está pesando, midiendo y fotografiando el paquete</div></div>
|
||
<div class="state-row" style="border-color:#A7F3D0"><div class="state-dot" style="background:#10B981"></div><div class="state-num">05</div><div class="state-name">VERIFICADO</div><div class="state-desc">Peso y dimensiones confirmados. Cobro final aplicado.</div></div>
|
||
<div class="state-row" style="border-color:#BFDBFE"><div class="state-dot" style="background:#0057FF"></div><div class="state-num">06</div><div class="state-name">DECLARACION_ADUANERA</div><div class="state-desc">DSI enviada y aprobada por la SENAE. N.º de autorización generado.</div></div>
|
||
<div class="state-row"><div class="state-dot" style="background:#F97316"></div><div class="state-num">07</div><div class="state-name">EN_TRANSITO_ECUADOR</div><div class="state-desc">El paquete está en vuelo / tránsito desde EE.UU. hacia Ecuador</div></div>
|
||
<div class="state-row"><div class="state-dot" style="background:#EF4444"></div><div class="state-num">08</div><div class="state-name">EN_ADUANA_ECUADOR</div><div class="state-desc">El paquete está en proceso de inspección aduanera en Ecuador</div></div>
|
||
<div class="state-row" style="border-color:#BBF7D0"><div class="state-dot" style="background:#84CC16"></div><div class="state-num">09</div><div class="state-name">LISTO_ENTREGA</div><div class="state-desc">Aduana liberó el paquete. Listo para entrega al cliente.</div></div>
|
||
<div class="state-row" style="border-color:#A7F3D0"><div class="state-dot" style="background:#10B981"></div><div class="state-num">10</div><div class="state-name">ENTREGADO</div><div class="state-desc">Paquete entregado al cliente final en Ecuador ✓</div></div>
|
||
<div class="state-row" style="border-color:#FECACA"><div class="state-dot" style="background:#EF4444"></div><div class="state-num">11</div><div class="state-name">INCIDENCIA</div><div class="state-desc">Problema reportado: daño, pérdida o retención en aduana ⚠</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO CLIENTE ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-cliente">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-blue">🧑💻</div>
|
||
<div>
|
||
<div class="section-number">09</div>
|
||
<div class="section-title">Flujo del Cliente Final (B2C)</div>
|
||
<div class="section-sub">Del registro en la web hasta recibir el paquete en Ecuador.</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">1</div><div class="step-body"><h4>Accede a la Landing Page y se registra</h4><p>Correo electrónico + contraseña + verificación MFA (TOTP). El sistema crea la cuenta.</p></div></div>
|
||
<div class="flow-connector blue"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">2</div><div class="step-body"><h4>Recibe su Suite personalizada automáticamente</h4><p>El sistema asigna: <strong style="font-family:var(--font-mono);font-size:.82rem">150 N Day St, Suite EC-XXXXX, City of Orange, NJ 07050</strong></p></div></div>
|
||
<div class="flow-connector green"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">3</div><div class="step-body"><h4>Compra en Amazon / eBay / Walmart usando su Suite como destino</h4><p>Usa la dirección asignada exactamente como aparece en el portal. El vendedor envía a la bodega.</p></div></div>
|
||
<div class="flow-connector blue"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-yellow">4</div><div class="step-body"><h4>⚡ Pre-alerta (opcional pero recomendado)</h4><p>El cliente vuelve al portal y registra la pre-alerta con el tracking del vendedor y carga la factura de Amazon/eBay. La bodega en NJ se organiza con anticipación.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="step-alt">
|
||
<div class="step-alt-item">
|
||
<div class="label">Opción A — Por enlace</div>
|
||
<p>El cliente pega la URL del producto. El sistema extrae nombre, precio, peso e imagen automáticamente desde Amazon SP-API.</p>
|
||
</div>
|
||
<div class="step-alt-item">
|
||
<div class="label">Opción B — Manual</div>
|
||
<p>El cliente llena el formulario: nombre, descripción, valor ($USD), tienda, cantidad y peso estimado.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-step-doc" style="margin-top:0"><div class="step-bubble step-blue">5</div><div class="step-body"><h4>Registra formalmente su compra</h4><p>Elige entre ingresar por enlace (escaneo automático) o formulario manual.</p></div></div>
|
||
<div class="flow-connector blue"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">6</div><div class="step-body"><h4>El sistema calcula y muestra el costo total con desglose SENAE</h4><p>Flete + seguro 2% + FODINFA 0.5% + IVA 15% + Arancel según categoría (4×4, B, C, D).</p></div></div>
|
||
<div class="flow-connector blue"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">7</div><div class="step-body"><h4>El cliente revisa el desglose y ACEPTA</h4><p>Puede ver el detalle de cada concepto antes de confirmar.</p></div></div>
|
||
<div class="flow-connector blue"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-orange">8</div><div class="step-body"><h4>Realiza el PAGO del envío en línea</h4><p>Pasarela de pagos integrada (Stripe / PayPhone / PayPal). El pago se registra y vincula al Tracking ID.</p></div></div>
|
||
<div class="flow-connector orange"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">9</div><div class="step-body"><h4>✅ Tracking ID generado. Confirmación por correo.</h4><p>Estado inicial: <strong style="font-family:var(--font-mono)">REGISTRADO</strong>. El cliente recibe notificaciones automáticas en cada cambio de estado.</p></div></div>
|
||
<div class="flow-connector green"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">10</div><div class="step-body"><h4>Seguimiento en tiempo real</h4><p>Desde el portal (con login) o desde la landing page ingresando el Tracking ID sin necesidad de iniciar sesión. Notificaciones por WhatsApp, SMS y correo.</p></div></div>
|
||
<div class="flow-connector green"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">11</div><div class="step-body"><h4>🎉 Recibe el paquete en Ecuador</h4><p>Estado final: <strong style="font-family:var(--font-mono)">ENTREGADO</strong>.</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO BODEGA ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-bodega">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-orange">📦</div>
|
||
<div>
|
||
<div class="section-number">10</div>
|
||
<div class="section-title">Flujo del Operador de Bodega (NJ)</div>
|
||
<div class="section-sub">Recepción, verificación y despacho desde 150 N Day St, City of Orange, NJ.</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">1</div><div class="step-body"><h4>Inicia sesión en el Portal de Bodega</h4><p>Ve la lista de paquetes esperados. Los que tienen pre-alerta están ya identificados y organizados.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">2</div><div class="step-body"><h4>Llega un paquete físico a la bodega</h4><p>El operador escanea el código de barras / QR o busca manualmente por el tracking del vendedor.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">3</div><div class="step-body"><h4>Confirma recepción → Estado: RECIBIDO_BODEGA</h4><p>El sistema actualiza el estado y notifica automáticamente al cliente.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">4</div><div class="step-body"><h4>Verificación del paquete</h4><p>Pesa en báscula (peso real), mide dimensiones (largo × ancho × alto) y toma fotos que se sincronizan al portal del cliente.</p></div></div>
|
||
<div class="flow-connector dashed"></div>
|
||
<div class="split-flow">
|
||
<div class="split-path sp-green">
|
||
<div class="sp-label">✅ Sin discrepancia</div>
|
||
<p>El peso real coincide con el declarado (diferencia ≤ 10%). Estado cambia a <strong>VERIFICADO</strong>. Se asigna a despacho.</p>
|
||
</div>
|
||
<div class="split-path sp-yellow">
|
||
<div class="sp-label">⚠️ Hay discrepancia (>10%)</div>
|
||
<p>Se notifica al Admin de la empresa y al cliente. Se cobra la diferencia o se ajusta el precio. Luego pasa a VERIFICADO.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-connector" style="margin-top:8px"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">5</div><div class="step-body"><h4>Asigna a envío consolidado o individual</h4><p>El operador puede consolidar varios paquetes del mismo cliente en un solo envío para optimizar costos.</p></div></div>
|
||
<div class="flow-connector green"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">6</div><div class="step-body"><h4>✅ Genera orden de despacho hacia Ecuador</h4><p>El paquete queda listo para ser recogido por el courier internacional (FedEx / DHL / UPS).</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO ADUANERO ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-aduanero">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-green">🛃</div>
|
||
<div>
|
||
<div class="section-number">11</div>
|
||
<div class="section-title">Flujo del Agente Aduanero</div>
|
||
<div class="section-sub">Generación y envío de la declaración ante la SENAE.</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">1</div><div class="step-body"><h4>Accede al Portal Administrativo</h4><p>Ve la cola de paquetes con estado <strong style="font-family:var(--font-mono)">VERIFICADO</strong> pendientes de declaración.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">2</div><div class="step-body"><h4>Revisa la información del paquete</h4><p>Descripción del producto, valor declarado, fotos, peso y dimensiones confirmados por el operador de bodega.</p></div></div>
|
||
<div class="flow-connector dashed"></div>
|
||
<div class="split-flow">
|
||
<div class="split-path sp-green">
|
||
<div class="sp-label">✅ Dentro del límite 4×4</div>
|
||
<p>Valor ≤ $400 USD y peso ≤ 4 kg. Proceso <strong>simplificado (DSI)</strong> automático sin arancel.</p>
|
||
</div>
|
||
<div class="split-path sp-yellow">
|
||
<div class="sp-label">⚠️ Supera el límite</div>
|
||
<p>Notificación al cliente. Se inicia proceso de <strong>importación formal (DAI)</strong> con la documentación correspondiente.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-connector" style="margin-top:8px"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">3</div><div class="step-body"><h4>Sistema genera la DSI automáticamente</h4><p>Declaración Simplificada de Importación pre-llenada con los datos verificados del paquete.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">4</div><div class="step-body"><h4>El agente REVISA y APRUEBA la declaración</h4><p>Última verificación humana antes del envío electrónico a la SENAE.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-orange">5</div><div class="step-body"><h4>El sistema envía la DSI al WebService oficial de la SENAE</h4><p>Comunicación vía SOAP / REST con el portal electrónico de la aduana ecuatoriana.</p></div></div>
|
||
<div class="flow-connector orange"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">6</div><div class="step-body"><h4>✅ SENAE devuelve número de autorización</h4><p>El documento aduanero se almacena asociado al Tracking ID. Estado: <strong style="font-family:var(--font-mono)">DECLARACION_ADUANERA</strong>. El cliente recibe notificación automática.</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO ADMIN ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-admin">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-purple">⚙️</div>
|
||
<div>
|
||
<div class="section-number">12</div>
|
||
<div class="section-title">Flujo del Admin Empresa</div>
|
||
<div class="section-sub">Gestión operativa, configuración y reportes del portal administrativo.</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">1</div><div class="step-body"><h4>Inicia sesión en el Portal Administrativo</h4><p>Autenticación segura con MFA obligatorio.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">2</div><div class="step-body"><h4>Ve el dashboard general</h4><p>Paquetes por estado, ingresos del día/mes, alertas de incidencias y métricas de rendimiento.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">3</div><div class="step-body"><h4>Acciones disponibles desde el panel</h4></div></div>
|
||
</div>
|
||
<div style="margin-left:46px">
|
||
<table class="doc-table">
|
||
<thead><tr><th>Acción</th><th>Descripción</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Gestionar usuarios y roles</td><td>Crear, editar, desactivar usuarios. Asignar roles.</td></tr>
|
||
<tr><td>Configurar tarifas</td><td>Precio por libra/kg, por zona geográfica en Ecuador</td></tr>
|
||
<tr><td>Generar reportes</td><td>Ingresos, volumen de envíos, tiempo promedio de entrega</td></tr>
|
||
<tr><td>Ver logs de auditoría</td><td>Registro inmutable de todas las acciones del sistema</td></tr>
|
||
<tr><td>Gestionar bodega</td><td>Configuración de la bodega, capacidad, horarios</td></tr>
|
||
<tr><td>Configurar notificaciones</td><td>Plantillas de mensajes automáticos por canal</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO B2B ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-b2b">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-orange">🚢</div>
|
||
<div>
|
||
<div class="section-number">13</div>
|
||
<div class="section-title">Flujo del Importador Mayorista (B2B)</div>
|
||
<div class="section-sub">Carga pesada, pallets, certificación INEN y declaración formal.</div>
|
||
</div>
|
||
</div>
|
||
<div class="callout callout-yellow">
|
||
<span class="callout-icon">⚠️</span>
|
||
<p><strong>Nota INEN:</strong> El calzado, textiles, electrónicos y otros productos regulados requieren certificación de conformidad INEN antes de poder importarlos en volumen a Ecuador. El sistema asiste en verificar este requisito.</p>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-orange">1</div><div class="step-body"><h4>Accede a la sección "Carga Pesada / Pallets" en la landing page</h4><p>Sección diferenciada del casillero personal, con su propio flujo y formulario.</p></div></div>
|
||
<div class="flow-connector orange"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-orange">2</div><div class="step-body"><h4>Llena el formulario de cotización especial</h4><p>Tipo de mercancía, cantidad, peso estimado, número de pallets, valor comercial total, ciudad de origen en EE.UU.</p></div></div>
|
||
<div class="flow-connector dashed"></div>
|
||
<div class="split-flow">
|
||
<div class="split-path sp-green">
|
||
<div class="sp-label">✅ Sin requisito INEN</div>
|
||
<p>Mercancía sin regulación técnica. Proceso de cotización directo.</p>
|
||
</div>
|
||
<div class="split-path sp-yellow">
|
||
<div class="sp-label">⚠️ Requiere INEN</div>
|
||
<p>El importador debe obtener el Registro de Conformidad INEN antes de proceder.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-connector" style="margin-top:8px"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-orange">3</div><div class="step-body"><h4>El equipo Moraworld prepara la cotización personalizada</h4><p>La envía por correo y por WhatsApp al importador.</p></div></div>
|
||
<div class="flow-connector orange"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-orange">4</div><div class="step-body"><h4>El importador acepta la cotización</h4><p>Se crea un expediente con ID de seguimiento B2B propio.</p></div></div>
|
||
<div class="flow-connector orange"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">5</div><div class="step-body"><h4>✅ Coordinación de embarque y documentación</h4><p>DAS o DAI según corresponda. Certificación INEN, BL de embarque, facturas comerciales. Seguimiento hasta entrega en Ecuador.</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO URL ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-url">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-blue">🔗</div>
|
||
<div>
|
||
<div class="section-number">14</div>
|
||
<div class="section-title">Flujo del Sistema — Registro por Enlace</div>
|
||
<div class="section-sub">Cómo el sistema extrae datos de Amazon y calcula el costo automáticamente.</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">1</div><div class="step-body"><h4>Cliente pega la URL del producto en el portal</h4><p>Soporta Amazon, eBay y otras plataformas compatibles.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">2</div><div class="step-body"><h4>Sistema llama a Amazon SP-API (o scraping equivalente)</h4><p>Extrae: nombre del producto, precio, peso estimado, imagen y dimensiones si están disponibles.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">3</div><div class="step-body"><h4>Pre-llena el formulario de registro automáticamente</h4><p>El cliente revisa los datos extraídos y puede corregir si es necesario.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">4</div><div class="step-body"><h4>Sistema calcula el costo total con desglose</h4><p>Flete (peso × $3.50/lb) + Seguro 2% + FODINFA 0.5% + Arancel según categoría + IVA 15%.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-yellow">5</div><div class="step-body"><h4>Muestra resumen al cliente para confirmación y pago</h4><p>El cliente ACEPTA el costo y realiza el pago en línea.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">6</div><div class="step-body"><h4>✅ Tracking ID generado. Estado → REGISTRADO.</h4><p>Correo de confirmación enviado automáticamente.</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ CALCULADORA SENAE ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-calculo">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-green">💰</div>
|
||
<div>
|
||
<div class="section-number">15</div>
|
||
<div class="section-title">Calculadora Dinámica SENAE</div>
|
||
<div class="section-sub">Categorías de importación y fórmulas de cálculo.</div>
|
||
</div>
|
||
</div>
|
||
<div class="callout callout-blue">
|
||
<span class="callout-icon">ℹ️</span>
|
||
<p>La calculadora está disponible <strong>sin necesidad de registro</strong> en la landing page y también dentro del portal del cliente autenticado.</p>
|
||
</div>
|
||
<div class="subsection-title">Categorías SENAE</div>
|
||
<div class="senae-grid">
|
||
<div class="senae-cat sc-4x4">
|
||
<div class="sc-name">Régimen 4×4</div>
|
||
<div class="sc-rate">0%</div>
|
||
<div class="sc-desc">Hasta 4 envíos/año · máx. $400 · máx. 4 kg · Sin arancel · Proceso simplificado</div>
|
||
</div>
|
||
<div class="senae-cat sc-b">
|
||
<div class="sc-name">Categoría B</div>
|
||
<div class="sc-rate">10%</div>
|
||
<div class="sc-desc">Bienes de consumo general fuera del 4×4 · + FODINFA + IVA</div>
|
||
</div>
|
||
<div class="senae-cat sc-c">
|
||
<div class="sc-name">Categoría C</div>
|
||
<div class="sc-rate">20%</div>
|
||
<div class="sc-desc">Textiles, calzado, artículos del hogar · + FODINFA + IVA</div>
|
||
</div>
|
||
<div class="senae-cat sc-d">
|
||
<div class="sc-name">Categoría D</div>
|
||
<div class="sc-rate">0–15%</div>
|
||
<div class="sc-desc">Electrónicos y telecomunicaciones · Puede requerir certificación INEN</div>
|
||
</div>
|
||
</div>
|
||
<div class="subsection-title" style="margin-top:20px">Fórmulas de Cálculo</div>
|
||
<div class="code-block"><span class="c">// 1. Determinar el peso a cobrar</span>
|
||
<span class="r">Peso_volumétrico</span> = (largo_cm × ancho_cm × alto_cm) / <span class="v">139</span>
|
||
<span class="r">Peso_final</span> = MAX(peso_real_lbs, <span class="r">Peso_volumétrico</span>)
|
||
|
||
<span class="c">// 2. Calcular costos de envío y tributos</span>
|
||
Flete = <span class="r">Peso_final</span> × <span class="v">$3.50</span> <span class="c">// tarifa por libra (configurable)</span>
|
||
Seguro = valor_declarado × <span class="v">0.02</span> <span class="c">// 2% configurable</span>
|
||
FODINFA = valor_declarado × <span class="v">0.005</span> <span class="c">// 0.5% — fijo SENAE</span>
|
||
Arancel = valor_declarado × <span class="v">% categoría</span> <span class="c">// 0%, 10% o 20%</span>
|
||
IVA = (valor_declarado + FODINFA + Arancel) × <span class="v">0.15</span>
|
||
|
||
<span class="c">// 3. Total a pagar</span>
|
||
<span class="r">TOTAL</span> = Flete + Seguro + FODINFA + Arancel + IVA</div>
|
||
<p class="body" style="font-size:.8rem;color:var(--gray-500)">* El sistema muestra el desglose completo de cada concepto al cliente antes de que confirme el pago. El costo final se ajusta si el peso real en bodega difiere del estimado.</p>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO NOTIFICACIONES ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-notif">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-yellow">🔔</div>
|
||
<div>
|
||
<div class="section-number">16</div>
|
||
<div class="section-title">Flujo de Notificaciones Automáticas</div>
|
||
<div class="section-sub">Comunicación multi-canal en cada cambio de estado.</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">1</div><div class="step-body"><h4>Cambio de estado del paquete en base de datos</h4><p>Cualquier actualización de estado (por operador, agente o sistema automático) dispara el evento.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">2</div><div class="step-body"><h4>El sistema detecta el evento y activa el motor de notificaciones</h4><p>Procesamiento en cola (message queue) para garantizar entrega.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">3</div><div class="step-body"><h4>Envío paralelo a todos los canales activos del usuario</h4></div></div>
|
||
</div>
|
||
<div style="margin-left:46px;margin-top:4px">
|
||
<table class="doc-table">
|
||
<thead><tr><th>Canal</th><th>Contenido</th><th>Proveedor</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>✉️ <strong>Correo electrónico</strong></td><td>Detalle completo: estado, tracking ID, descripción, fecha</td><td>SendGrid / AWS SES</td></tr>
|
||
<tr><td>💬 <strong>WhatsApp Business</strong></td><td>Mensaje directo: "Tu paquete EC-XXXXX está [estado]"</td><td>WhatsApp Business API</td></tr>
|
||
<tr><td>📱 <strong>SMS</strong></td><td>Resumen corto en 160 caracteres</td><td>SMS Gateway API</td></tr>
|
||
<tr><td>🔔 <strong>Push (portal web)</strong></td><td>Notificación en tiempo real en el dashboard del cliente</td><td>WebSockets / SSE</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ FLUJO AUDITORÍA ══════════════════════════════ -->
|
||
<div class="doc-section" id="flujo-auditoria">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-blue">📝</div>
|
||
<div>
|
||
<div class="section-number">17</div>
|
||
<div class="section-title">Flujo de Seguridad y Auditoría</div>
|
||
<div class="section-sub">Trazabilidad completa de todas las acciones del sistema (ISO 27001).</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">1</div><div class="step-body"><h4>Cualquier acción en el sistema</h4><p>Inicio de sesión, modificación de datos, cambio de estado, consulta de paquete, etc.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">2</div><div class="step-body"><h4>Se registra en el Log de Auditoría</h4><p>Campos: ID del usuario · Rol · Acción realizada · Timestamp (UTC) · IP de origen · Recurso afectado (ej: Tracking ID).</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-green">3</div><div class="step-body"><h4>Log inmutable — no editable ni por Super Admin</h4><p>Almacenado en un sistema de append-only con firma de integridad.</p></div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-blue">4</div><div class="step-body"><h4>Reportes disponibles para Super Admin y Admin Empresa</h4><p>Filtros por usuario, rango de fechas, tipo de acción y recurso afectado.</p></div></div>
|
||
<div class="flow-connector dashed"></div>
|
||
<div class="flow-step-doc"><div class="step-bubble step-yellow">5</div><div class="step-body"><h4>⚡ Alertas automáticas de seguridad</h4></div></div>
|
||
</div>
|
||
<div style="margin-left:46px;margin-top:4px">
|
||
<ul class="feat-list">
|
||
<li>Múltiples intentos de login fallidos (brute force)</li>
|
||
<li>Acceso desde IPs inusuales (geolocalización fuera del perfil habitual)</li>
|
||
<li>Cambios masivos de datos en poco tiempo</li>
|
||
<li>Acceso a recursos fuera del horario habitual del usuario</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ INTEGRACIONES ══════════════════════════════ -->
|
||
<div class="doc-section" id="integraciones">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-purple">🔌</div>
|
||
<div>
|
||
<div class="section-number">18</div>
|
||
<div class="section-title">Integraciones Externas</div>
|
||
<div class="section-sub">9 integraciones clave con servicios de terceros.</div>
|
||
</div>
|
||
</div>
|
||
<div class="int-list">
|
||
<div class="int-row"><span class="i-icon">🛒</span><div><span class="i-name">Amazon SP-API</span><span class="i-proto">REST API</span><p class="i-desc">Extrae datos del producto desde una URL: nombre, precio, peso, imagen</p></div></div>
|
||
<div class="int-row"><span class="i-icon">🛃</span><div><span class="i-name">WebService SENAE</span><span class="i-proto">SOAP / REST</span><p class="i-desc">Envío electrónico de DSI (simplificada) y DAI (formal) a la aduana ecuatoriana</p></div></div>
|
||
<div class="int-row"><span class="i-icon">💳</span><div><span class="i-name">Pasarela de Pagos</span><span class="i-proto">REST API</span><p class="i-desc">Cobro en línea: Stripe, PayPhone, PayPal u otra pasarela ecuatoriana</p></div></div>
|
||
<div class="int-row"><span class="i-icon">💬</span><div><span class="i-name">WhatsApp Business API</span><span class="i-proto">REST API</span><p class="i-desc">Notificaciones automáticas al cliente + botón de contacto flotante en la web</p></div></div>
|
||
<div class="int-row"><span class="i-icon">✉️</span><div><span class="i-name">Correo (SendGrid/SES)</span><span class="i-proto">SMTP / REST</span><p class="i-desc">Notificaciones de estado, confirmaciones de pago y registro</p></div></div>
|
||
<div class="int-row"><span class="i-icon">📱</span><div><span class="i-name">SMS Gateway</span><span class="i-proto">REST API</span><p class="i-desc">Notificaciones SMS de cambio de estado del paquete</p></div></div>
|
||
<div class="int-row"><span class="i-icon">🚚</span><div><span class="i-name">Courier Internacional</span><span class="i-proto">REST API</span><p class="i-desc">FedEx / DHL / UPS: seguimiento del estado físico del envío en tránsito</p></div></div>
|
||
<div class="int-row"><span class="i-icon">🏭</span><div><span class="i-name">Software de Bodega</span><span class="i-proto">REST API propia</span><p class="i-desc">Sincronización en tiempo real de estados de tracking con el software propietario de bodega</p></div></div>
|
||
<div class="int-row"><span class="i-icon">🏷️</span><div><span class="i-name">Normas INEN</span><span class="i-proto">REST / Web</span><p class="i-desc">Consulta y verificación de certificaciones de conformidad para productos regulados</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ NO FUNCIONALES ══════════════════════════════ -->
|
||
<div class="doc-section" id="no-funcionales">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-gray">📊</div>
|
||
<div>
|
||
<div class="section-number">19</div>
|
||
<div class="section-title">Requerimientos No Funcionales</div>
|
||
<div class="section-sub">Calidad, rendimiento y restricciones del sistema.</div>
|
||
</div>
|
||
</div>
|
||
<div class="nf-grid">
|
||
<div class="nf-row"><div class="nf-key">Disponibilidad</div><div class="nf-val">99.9% uptime (SLA garantizado en producción)</div></div>
|
||
<div class="nf-row"><div class="nf-key">Tiempo respuesta</div><div class="nf-val">< 2 segundos para operaciones normales en el portal</div></div>
|
||
<div class="nf-row"><div class="nf-key">Escalabilidad</div><div class="nf-val">Arquitectura multi-tenant preparada para múltiples empresas y miles de usuarios concurrentes</div></div>
|
||
<div class="nf-row"><div class="nf-key">Seguridad</div><div class="nf-val">ISO/IEC 27001 · OWASP Top 10 · TLS 1.3 · AES-256 · MFA obligatorio · WAF</div></div>
|
||
<div class="nf-row"><div class="nf-key">Accesibilidad</div><div class="nf-val">100% web · responsive mobile-first · accesible desde cualquier dispositivo con internet</div></div>
|
||
<div class="nf-row"><div class="nf-key">Respaldo</div><div class="nf-val">Backups automáticos diarios · retención mínima 90 días · almacenamiento geográficamente redundante</div></div>
|
||
<div class="nf-row"><div class="nf-key">Recuperación</div><div class="nf-val">RTO < 4 horas · RPO < 1 hora</div></div>
|
||
<div class="nf-row"><div class="nf-key">Auditoría</div><div class="nf-val">Todos los eventos registrados con trazabilidad completa e inmutable</div></div>
|
||
<div class="nf-row"><div class="nf-key">Multi-idioma</div><div class="nf-val">Español (clientes Ecuador) · Inglés (operadores bodega NJ)</div></div>
|
||
<div class="nf-row"><div class="nf-key">Zona horaria</div><div class="nf-val">EST (New Jersey) y ECT (Ecuador) — mostrado según la ubicación del usuario en sesión</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ NAVEGACIÓN ══════════════════════════════ -->
|
||
<div class="doc-section" id="navegacion">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-blue">🗺️</div>
|
||
<div>
|
||
<div class="section-number">20</div>
|
||
<div class="section-title">Estructura del Sitio Web</div>
|
||
<div class="section-sub">Mapa de rutas diferenciado entre área pública y área autenticada.</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
|
||
<div>
|
||
<h3 class="h3" style="margin-bottom:10px">Área Pública</h3>
|
||
<div class="url-tree"><span class="u-pub">/</span> <span class="u-comment">Landing Page principal</span>
|
||
<span class="u-pub">/como-funciona</span>
|
||
<span class="u-pub">/calculadora</span> <span class="u-comment">← sin registro</span>
|
||
<span class="u-pub">/tarifas</span>
|
||
<span class="u-pub">/quienes-somos</span>
|
||
<span class="u-pub">/tracking</span> <span class="u-comment">← buscar por ID sin login</span>
|
||
|
||
<span class="u">/casillero/</span>
|
||
como-usar
|
||
calculadora
|
||
registro
|
||
|
||
<span class="u">/carga-pesada/</span>
|
||
como-funciona
|
||
cotizacion
|
||
inen</div>
|
||
</div>
|
||
<div>
|
||
<h3 class="h3" style="margin-bottom:10px">Área Autenticada</h3>
|
||
<div class="url-tree"><span class="u-auth">/portal/</span> <span class="u-comment">🔐 Requiere login</span>
|
||
dashboard
|
||
mi-casillero <span class="u-comment">📦 Suite asignada</span>
|
||
pre-alerta <span class="u-comment">📄 Carga facturas</span>
|
||
mis-paquetes <span class="u-comment">🔍 Historial</span>
|
||
calculadora
|
||
perfil
|
||
|
||
<span class="u-admin">/admin/</span> <span class="u-comment">🔐 Admin + Super Admin</span>
|
||
usuarios
|
||
tarifas
|
||
reportes
|
||
auditoria
|
||
|
||
<span class="u-auth">/bodega/</span> <span class="u-comment">🔐 Operador Bodega</span>
|
||
paquetes
|
||
verificacion
|
||
despacho</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════ CONSIDERACIONES ══════════════════════════════ -->
|
||
<div class="doc-section" id="consideraciones">
|
||
<div class="section-header">
|
||
<div class="section-icon icon-yellow">⚖️</div>
|
||
<div>
|
||
<div class="section-number">21</div>
|
||
<div class="section-title">Consideraciones Legales y Adicionales</div>
|
||
<div class="section-sub">Normativas, límites y aspectos operativos a tomar en cuenta.</div>
|
||
</div>
|
||
</div>
|
||
<div class="callout callout-blue"><span class="callout-icon">🛡️</span><p><strong>Protección de datos:</strong> Los datos personales de clientes ecuatorianos están sujetos a la <strong>Ley Orgánica de Protección de Datos Personales (LOPDP) de Ecuador</strong>. Al procesarse en EE.UU., también aplica la normativa del estado de New Jersey.</p></div>
|
||
<div class="callout callout-yellow"><span class="callout-icon">⚠️</span><p><strong>Umbral aduanero 4×4:</strong> El régimen simplificado aplica a un máximo de <strong>4 envíos al año</strong>, con valor máximo de <strong>$400 USD</strong> y peso máximo de <strong>4 kg</strong> por envío. Superar cualquiera de estos límites activa el proceso de importación formal (DAI) con aranceles correspondientes.</p></div>
|
||
<div class="callout callout-orange"><span class="callout-icon">🏷️</span><p><strong>Normas INEN:</strong> Para carga pesada (calzado, textiles, electrónicos, alimentos), el importador debe verificar si el producto requiere Registro de Conformidad o Certificado INEN antes de embarcar. El sistema asiste en este proceso.</p></div>
|
||
<div class="callout callout-green"><span class="callout-icon">📦</span><p><strong>Consolidación:</strong> El sistema soporta consolidar múltiples paquetes de un mismo cliente en un solo envío para optimizar costos de flete y reducir el número de declaraciones aduaneras.</p></div>
|
||
<table class="doc-table" style="margin-top:8px">
|
||
<thead><tr><th>Aspecto</th><th>Detalle</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Legalidad visible</strong></td><td>El sitio muestra prominentemente ambas empresas con sus documentos de constitución</td></tr>
|
||
<tr><td><strong>WhatsApp contacto</strong></td><td>Dos opciones: representante NJ (operaciones) y representante legal en Cuenca (aduana)</td></tr>
|
||
<tr><td><strong>API de bodega propia</strong></td><td>El sistema tendrá una capa de integración para conectarse al software propietario de gestión</td></tr>
|
||
<tr><td><strong>Actualización de tarifas</strong></td><td>La calculadora debe actualizarse cuando el SENAE modifique las tablas arancelarias</td></tr>
|
||
<tr><td><strong>Multi-idioma</strong></td><td>Español para clientes Ecuador · Inglés para operadores en New Jersey</td></tr>
|
||
<tr><td><strong>Zona horaria</strong></td><td>EST (bodega NJ) y ECT (Ecuador) — el sistema muestra la hora del usuario en sesión</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div style="margin-top:40px;padding:28px;background:var(--dark);border-radius:14px;text-align:center">
|
||
<p style="font-size:.8rem;color:rgba(255,255,255,.3);font-family:var(--font-mono)">Moraworld Imports S.A.S. · Mora Global Import LLC</p>
|
||
<p style="font-size:.85rem;color:rgba(255,255,255,.5);margin-top:8px">Documento de Requerimientos v1.1 · 6 de mayo de 2026</p>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px">
|
||
<span style="background:rgba(0,87,255,.2);color:#7AADFF;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px">ISO/IEC 27001</span>
|
||
<span style="background:rgba(16,185,129,.15);color:#6EE7B7;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px">SENAE Autorizado</span>
|
||
<span style="background:rgba(255,107,0,.15);color:#FDB87A;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px">INEN</span>
|
||
<span style="background:rgba(139,92,246,.15);color:#C4B5FD;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px">LOPDP Ecuador</span>
|
||
<span style="background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px">Multi-Tenant</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /content -->
|
||
</main>
|
||
|
||
<script>
|
||
// Highlight sidebar link on scroll
|
||
const links = document.querySelectorAll('.sidebar-link');
|
||
const sections = document.querySelectorAll('.doc-section[id]');
|
||
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(entry => {
|
||
if(entry.isIntersecting){
|
||
const id = entry.target.id;
|
||
links.forEach(l => l.classList.remove('active'));
|
||
const active = document.querySelector('.sidebar-link[href="#'+id+'"]');
|
||
if(active) active.classList.add('active');
|
||
}
|
||
});
|
||
}, { rootMargin: '-20% 0px -70% 0px' });
|
||
|
||
sections.forEach(s => observer.observe(s));
|
||
</script>
|
||
</body>
|
||
</html>
|