Scribd
Cargar
0 vistas8 páginas

Documento Sin Título

El documento presenta un cursograma que detalla el proceso de un método informal dividido en dos partes: Ingreso y Aprobación, y Pago y Cierre. Cada parte incluye las acciones de diferentes actores como el Cliente, Calidad, Administración y Almacén, junto con tiempos estimados para cada actividad. Se utilizan símbolos para representar diferentes tipos de operaciones, inspecciones y demoras en el flujo de trabajo.

Cargado por

Marlene Pender
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0 vistas8 páginas

Documento Sin Título

El documento presenta un cursograma que detalla el proceso de un método informal dividido en dos partes: Ingreso y Aprobación, y Pago y Cierre. Cada parte incluye las acciones de diferentes actores como el Cliente, Calidad, Administración y Almacén, junto con tiempos estimados para cada actividad. Se utilizan símbolos para representar diferentes tipos de operaciones, inspecciones y demoras en el flujo de trabajo.

Cargado por

Marlene Pender
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursograma Actual (Partes 1 y 2)</title>
<script src="[Link]
<style>
@import
url('[Link]
body {
font-family: 'Inter', sans-serif;
background-color: #f7f9fb;
color: #1e293b;
}
.container {
max-width: 850px;
margin: 10px auto;
padding: 8px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.swimlane-header {
background-color: #1e293b;
color: white;
font-weight: 700;
padding: 5px 3px;
border-radius: 6px 6px 0 0;
text-align: center;
font-size: 11px;
}
.flow-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0px;
border: 1px solid #e2e8f0;
border-radius: 0 0 6px 6px;
}
.lane {
border-right: 1px solid #e2e8f0;
padding: 6px;
min-height: 400px; /* Altura estándar para cada parte */
position: relative;
}
.lane:last-child {
border-right: none;
}
.flow-box {
background-color: #fef2f2;
border: 1px solid #fca5a5;
padding: 4px;
margin-bottom: 8px;
border-radius: 5px;
position: relative;
text-align: center;
font-size: 9px;
font-weight: 500;
min-height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flow-box-muda {
background-color: #fefce8;
border-color: #fde047;
font-weight: 600;
}
.op-symbol {
top: -7px;
width: 16px;
height: 16px;
font-size: 10px;
border: 1px solid;
z-index: 10;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.op-operacion { background-color: white; color: #10b981; border-color: #10b981;
border-radius: 50%; }
.op-inspeccion { background-color: white; color: #f59e0b; border-color: #f59e0b;
border-radius: 0; }
.op-demora {
background-color: white; color: #ef4444; border: none;
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ef4444;
border-radius: 0;
transform: translate(-50%, -50%) rotate(180deg);
top: 8px;
}
.op-transporte { background-color: white; color: #3b82f6; border-color: #3b82f6; clip-path:
polygon(0% 50%, 100% 50%, 75% 100%, 25% 100%); border-radius: 0; }
/* Estilo solo para Parte 2 */
.op-almacenamiento {
background-color: white; color: #8b5cf6; border: none;
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #8b5cf6;
border-radius: 0;
transform: translate(-50%, -50%) rotate(0deg);
top: 8px;
}

.connector::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 2px;
height: 8px;
background-color: #94a3b8;
z-index: 5;
transform: translateX(-50%);
}

.h-connector {
position: absolute;
height: 2px;
background-color: #94a3b8;
z-index: 5;
}

/* --- Estilos Parte 1 --- */


.conn-1-2 { top: 65px; left: 58%; width: 50%; }
.conn-2-3 { top: 155px; left: 58%; width: 50%; }
.conn-3-4 { top: 320px; right: 5%; width: 50%; }
.conn-4-5 { top: 360px; left: 5%; width: 90%; }

.mt-custom-1 { margin-top: 90px; }


.mt-custom-2 { margin-top: 120px; }
.mt-custom-3 { margin-top: 180px; }
.mt-custom-4 { margin-top: 80px; }

/* --- Estilos Parte 2 (renombrados para evitar conflictos) --- */


.conn-p2-6-7 { top: 120px; right: 5%; width: 45%; }
.conn-p2-7-8 { top: 200px; left: 5%; width: 90%; }
.conn-p2-8-9 { top: 260px; right: 5%; width: 45%; }

.mt-p2-custom-1 { margin-top: 60px; }


.mt-p2-custom-2 { margin-top: 50px; }
.mt-p2-custom-3 { margin-top: 100px; }
.mt-p2-custom-4 { margin-top: 150px; }

.op-operacion::after { content: '•'; color: #10b981; }


.op-inspeccion::after { content: '□'; color: #f59e0b; }
.op-transporte::after { content: '>'; color: #3b82f6; transform: rotate(90deg); }
</style>
</head>
<body>

<!-- ============================================= -->


<!-- ================= PARTE 1 ================= -->
<!-- ============================================= -->
<div class="container">
<h1 class="text-lg font-bold text-center mb-1 text-gray-800">
Cursograma Actual: Método Informal (Parte 1: Ingreso y Aprobación)
</h1>
<div class="flow-grid">
<!-- Headers -->
<div class="swimlane-header bg-blue-700">1. Cliente</div>
<div class="swimlane-header bg-red-700">2. Calidad (Carlos V.)</div>
<div class="swimlane-header bg-orange-700">3. Administración</div>
<div class="swimlane-header bg-gray-700">4. Almacén</div>

<!-- Carril del Cliente -->


<div class="lane">
<div class="flow-box connector">
<span class="op-symbol op-operacion"></span>
1. Envía **mail** de reclamo. (5 min)
</div>
<div class="h-connector conn-1-2"></div>

<div class="flow-box mt-custom-1 connector">


<span class="op-symbol op-demora"></span>
3. Espera respuesta de Carlos.
<span class="text-[8px] text-red-600 mt-0.5">Demora (360 min)</span>
</div>

<div class="flow-box mt-[120px] connector">


<span class="op-symbol op-operacion"></span>
4. Lleva bici al taller.
</div>
</div>

<!-- Carril de Calidad (Carlos V.) -->


<div class="lane">
<div class="flow-box mt-[30px] flow-box-muda connector">
<span class="op-symbol op-inspeccion"></span>
2. **Lee mail**, busca historial, decide si aplica.
<span class="text-[8px] text-gray-500 mt-0.5">Búsqueda Manual (15 min)</span>
</div>

<div class="flow-box mt-custom-2 connector">


<span class="op-symbol op-operacion"></span>
4. Envía mail de **autorización condicional**.
<span class="text-[8px] text-gray-500 mt-0.5">Generación doc. (2 min)</span>
</div>
<div class="h-connector conn-3-4"></div>
</div>

<!-- Carril de Administración -->


<div class="lane">
<div class="flow-box mt-custom-3 connector">
<span class="op-symbol op-operacion"></span>
5. Carga la orden de pago. (5 min)
</div>
<div class="h-connector conn-4-5"></div>

<div class="flow-box mt-custom-4 flow-box-muda connector">


<span class="op-symbol op-inspeccion"></span>
6. Verifica datos del recibo informal.
<span class="text-[8px] text-red-600 mt-0.5">Inspección de Recibo No Oficial (15
min)</span>
</div>

<div class="flow-box mt-[100px] flow-box-muda connector">


<span class="op-symbol op-transporte"></span>
7. Envia orden de pago al Almacén. (2 min)
</div>
</div>

<!-- Carril del Almacén -->


<div class="lane">
<!-- Se mantiene vacío en esta parte -->
</div>
</div>
</div>

<!-- Separador visual -->


<div style="height: 20px;"></div>

<!-- ============================================= -->


<!-- ================= PARTE 2 ================= -->
<!-- ============================================= -->
<div class="container">
<h1 class="text-lg font-bold text-center mb-1 text-gray-800">
Cursograma Actual: Método Informal (Parte 2: Pago y Cierre)
</h1>
<div class="flow-grid">
<!-- Headers -->
<div class="swimlane-header bg-blue-700">1. Cliente</div>
<div class="swimlane-header bg-red-700">2. Calidad (Carlos V.)</div>
<div class="swimlane-header bg-orange-700">3. Administración</div>
<div class="swimlane-header bg-gray-700">4. Almacén</div>

<!-- Carril del Cliente -->


<div class="lane">
<!-- Clases renombradas: mt-p2-custom-1 -->
<div class="flow-box mt-p2-custom-1 connector">
<span class="op-symbol op-operacion"></span>
8. Paga service y obtiene **recibo informal**.
</div>

<!-- Clases renombradas: mt-p2-custom-2 -->


<div class="flow-box mt-p2-custom-2 connector">
<span class="op-symbol op-demora"></span>
11. Espera confirmación de pago.
<span class="text-[8px] text-red-600 mt-0.5">Demora (120 min)</span>
</div>
</div>

<!-- Carril de Calidad (Carlos V.) -->


<div class="lane">
<div class="flow-box mt-[40px] flow-box-muda connector">
<!-- Símbolo nuevo: op-almacenamiento -->
<span class="op-symbol op-almacenamiento"></span>
9. Archiva recibo informal.
<span class="text-[8px] text-gray-500 mt-0.5">Almacenamiento Informal (1
min)</span>
</div>
</div>

<!-- Carril de Administración -->


<div class="lane">
<div class="flow-box connector">
<span class="op-symbol op-inspeccion"></span>
6. Verifica datos del recibo informal. (Paso Repetido/Iniciado en P1)
<span class="text-[8px] text-red-600 mt-0.5">Inspección de Recibo No Oficial (15
min)</span>
</div>

<!-- Clases renombradas: mt-p2-custom-3 -->


<div class="flow-box mt-p2-custom-3 flow-box-muda connector">
<span class="op-symbol op-transporte"></span>
7. Envia orden de pago al Almacén. (2 min)
</div>

<!-- Clases renombradas: mt-p2-custom-4 -->


<div class="flow-box mt-p2-custom-4 connector">
<span class="op-symbol op-operacion"></span>
13. Ejecuta el pago y cierra.
<span class="text-[8px] text-gray-500 mt-0.5">Registro contable GLOBAL (3
min)</span>
</div>
</div>

<!-- Carril del Almacén -->


<div class="lane">
<div class="flow-box mt-[10px] flow-box-muda connector">
<!-- Símbolo nuevo: op-almacenamiento -->
<span class="op-symbol op-almacenamiento"></span>
10. Recibe y archiva orden de pago.
<span class="text-[8px] text-gray-500 mt-0.5">Almacenamiento Duplicado (5
min)</span>
</div>
<!-- Clases renombradas: conn-p2-7-8 -->
<div class="h-connector conn-p2-7-8"></div>

<div class="flow-box mt-[80px] flow-box-muda connector">


<span class="op-symbol op-transporte"></span>
12. Envía confirmación a Admin. (2 min)
</div>
</div>
</div>
</div>
</body>
</html>

También podría gustarte