Todos los Procesos

Cada Proceso se muestra como una tarjeta con información visual:

Elementos de la Tarjeta:

• Nombre del proceso
• Editar
• Eliminar
• Duplicar

Crear un Nuevo Proceso

Hay 3 formas de crear un proceso:

MÉTODO 1: Desde Cero

PASO 1: Click en botón verde "+ Crear un proceso"

PASO 2: Aparece modal de selección:

MÉTODO 2: Desde Plantilla

PASO 1: Click en "Mostrar plantillas?" PASO 2: Seleccionar una plantilla predefinida PASO 3: El sistema crea una copia editable

💡 Plantillas disponibles son ejemplos basicos de ejecucion de luuk

MÉTODO 3: Duplicar Existente

PASO 1: En cualquier tarjeta, click "DUPLICAR" PASO 2: Se crea copia exacta con nombre "Copia de..." PASO 3: Editar el duplicado

Crear Procesos - Estructura

Al entrar verás la pantalla de bienvenida con diseño de panel dual.

Diseño del Editor

PESTAÑA 1: PROCESO (Activa)

Subtítulo: "Creación del proceso completo"

3 Secciones Desplegables:

1. 👥 Grupos que pueden contestar
2. 📝 Detalles del proceso
3. 📋 Lista de acciones (lo más importante)

PESTAÑA 2: PERSONALIZACIÓN

Subtítulo: "Personalizar informe/PDF/Respuestas"

Configuración de informes y visualización (se verá más adelante)

Configuración Inicial del Proceso

SECCIÓN 1: 👥 Grupos que Pueden Contestar

Click para expandir → Aparece lista de grupos con checkboxes:

Función: Define QUÉ usuarios pueden ver/contestar este proceso. Los usuarios deben pertenecer a los grupos marcados.

SECCIÓN 2: 📝 Detalles del Proceso

A) NOMBRE * (obligatorio)

C) EL PROCESO SE CONTESTA

• ⭕ Siempre disponible

• ⭕ Indicar dias que esta disponible (días de la semana) ⭕ Una vez al mes

D) PROCESO COLABORATIVO

Switch ON/OFF

💡 Descripción: Permite que varios usuarios del mismo grupo inicien, guarden y continúen el mismo proceso. Útil para procesos largos o turnos.

E) ESTABLECER FECHAS?

Switch ON/OFF

Si ON:

• Desde: 📅 01/10/2025
• Hasta: 📅 31/12/2025

F) MOSTRAR IMAGEN

Switch ON/OFF

Si ON:

• Subir imagen personalizada
• Usar imagen predeterminada (preview del checklist)

Agregar Acciones

Agregar Nueva Acción

Click en [+] → Abre modal grande con 3 categorías:

Gestión Visual de Acciones

Una vez que hayas agregado acciones al proceso, el editor te proporciona una interfaz visual interactiva para gestionar, reordenar y organizar todas las acciones de manera intuitiva.

Anatomía de un Bloque de Acción

Cada acción aparece como un "bloque" visual con los siguientes elementos:

Elementos del bloque:

• [1] Número de página: Indica el orden/posición en el proceso
• 📝 Título de la acción: Texto descriptivo que verá el usuario
• Tipo de acción: Etiqueta que indica el tipo (Texto, Foto, etc.)
• Configuracion de accion: Indica las personalziacines quepuede tener esta accion

Reordenar Acciones (Arrastrar y Soltar)

Cambiar el orden de las acciones es muy fácil:

1. Posiciona el cursor sobre el icono de hamburguesa ☰ (o en cualquier parte del bloque)
2. El cursor cambiará a una mano ✋
3. Click y mantén presionado el botón del mouse
4. Arrastra el bloque hacia arriba o hacia abajo
5. Verás una línea indicando dónde se insertará el bloque
6. Suelta el mouse para colocar la acción en su nueva posición

Los números de página se actualizan automáticamente al reordenar.

💡 Consejo: Esta es la forma MÁS RÁPIDA de reorganizar procesos largos. No necesitas usar el menú "Cambiar orden".

Indicadores Visuales

1. Acciones sin Nombre

Cuando creas una acción pero aún no has ingresado un título, verás:

El texto (Sin nombre) aparece en:

• Color gris claro
• Estilo itálico
• Menor peso visual

Esto te ayuda a identificar rápidamente qué acciones necesitan completarse.

2. Líneas de Flujo

Cuando configuras saltos condicionales, verás líneas que conectan las acciones:

Las líneas indican el flujo de navegación entre acciones.

3. Tipos de bloque

Botón Agregar [+]

• En acciones normales: Agrega una nueva acción después de la actual
• En grupos (explicado más abajo): Funciona diferente

Grupos de Acciones (Bloques Anidados)

Los grupos de acciones son especiales porque pueden contener otras acciones dentro de ellos.

Visualización de Grupos

Botones Especiales en Grupos

Los grupos tienen DOS botones de agregar:

1. [⌄] Botón superior-derecho: Agrega una acción dentro del grupo (como hijo)
2. [+] Botón inferior-derecho: Agrega una acción después del grupo completo

Ejemplo práctico:

Si haces click en [⌄]: → Se agrega una nueva acción como 4.3 (dentro del grupo)

Si haces click en [+]: → Se agrega una nueva acción como 5 (después del grupo)

Arrastrar Grupos de acciones

Puedes arrastrar:

• El grupo completo → arrastrando desde el header principal
• Acciones individuales dentro del grupo → arrastrando cada hijo
• Acciones de un grupo a otro → arrastrando entre grupos

Bloques Anidados (Hijos)

Las acciones dentro de grupos se llaman bloques anidados o hijos.

Características visuales de los hijos:

• Tienen un margen izquierdo mayor (indentación)
• El fondo es ligeramente más claro
• Los iconos son un poco más pequeños (28px vs 32px)
• Tienen un borde izquierdo sutil para indicar jerarquía

Ejemplo visual:

☰ 1  Título (Acción Regular)
  ☰ 1.1  Título (Acción Anidada - con indentación)

Limitaciones de Arrastre

No puedes:

• ❌ Arrastrar una acción dentro de sí misma
• ❌ Crear grupos dentro de grupos (anidación máxima = 1 nivel)
• ❌ Arrastrar una sección dentro de un grupo
• ❌ Arrastrar mientras editas el texto de una acción

Sí puedes:

• ✅ Mover acciones entre diferentes secciones
• ✅ Cambiar el orden de grupos completos
• ✅ Mover acciones dentro y fuera de grupos
• ✅ Reordenar acciones dentro de un grupo

Recomendaciones:

• Usa secciones para organizar mejor
• Usa Grupos de acciones para contener acciones bajo un mismo tema (se ve mejor en informe PDF con tablas horizontales)
• Usa notas para dar instrucciones y dejar documentado las especificaciones de cada seccion
• Aprovecha los grupos repetibles en lugar de duplicar acciones

Tipos de Acciones Disponibles

CATEGORÍA 1: ESQUEMA (Estructura)

CATEGORÍA 2: FLUJO (Acciones en las que interactuan más usuarios)

CATEGORÍA 3: ACCIONES (Formas de preguntar y contestar)

Configurar una Acción (Ejemplo: Alternativas)

Al seleccionar una acción, el panel derecho muestra su configuración.

Ejemplo: Acción de Alternativas

Opciones Comunes en Todas las Acciones:

Lógica de Flujo y Navegación

Concepto

Cada acción puede ir a:

• ➡️ Siguiente acción (flujo lineal)
• ⤴️ Saltar a una acción específica
• 🏁 Finalizar el proceso

Flujo Lineal (sin saltos)

Flujo con Saltos

Líneas de Flujo:

• Línea conectora: Conexión de flujo entre acciones
  • ➡️ Con flecha: Salto
  • Sin línea: Fin

Saltos Condicionales

Configurar un Salto

PASO A PASO:

1. Selecciona la acción en el panel izquierdo
2. En panel derecho, ver botones: [Siguiente Acción][Saltar a][Finalizar]
3. Click "Saltar a"
4. Aparece selector numérico con número de acción destino
5. Seleccionar número destino
6. Línea naranja aparece AUTOMÁTICAMENTE!

Visualización en Lista

Alternativas con Flujo Condicional

Las Alternativas son especiales: CADA OPCIÓN tiene su propio flujo.

Configuración de Alternativas

Tipos de Alternativa:

• Neutra: No afecta métricas
• Correcta: ✅ Suma a % correcto
• Incorrecta: ❌ Suma a % incorrecto

Visualización con Múltiples Flujos