---
type: DC — Documento de Diseño
asset_id: DC-TriRH-PopUpContextoSherpa-Propuesta-v01
version: v01
status: Active
owner: Victor Heredia / EmpowerLabs
sherpa_owner: Jay
fecha_creacion: 2026-05-20
fecha_ultima_actualizacion: 2026-05-20
fecha_migracion_bmf: 2026-05-20
intellbank: IB-Clientes/IB-TriRH-TribusRRHH
subbank: PB-TriRH-TribusRRHH
proposito: Propuesta diseño e implementación del pop-up de contexto Sherpa en onboarding Tribus RRHH
nota_migracion: Migrado desde Projects/ a IB canónico el 2026-05-20 · Naming BMF y frontmatter aplicados por Jay (Workbench FASE 3)
---

# POP-UP DE CONTEXTO SHERPA
## Propuesta de Diseño e Implementación | Tribus RRHH

**Objetivo:** Capturar contexto del usuario en onboarding para que Sherpa brinde respuestas personalizadas  
**Trigger:** Al primer login / Cuando el usuario NO tiene perfil completado  
**Duración:** ~2 minutos  
**Ubicación:** Modal/Pop-up sobre el home (bloqueante pero no invasivo)  
**Persistencia:** Si no completa, reaparece en cada acceso hasta completar  

---

## 1. PROBLEMA ACTUAL

**Sin contexto:**
- Sherpa da respuestas genéricas
- Usuario se frustra ("es como cualquier ChatGPT")
- Baja probabilidad de que use Sherpa nuevamente

**Con contexto (3 preguntas):**
- Sherpa entiende rol, urgencia, preferencias
- Respuestas personalizadas al contexto REAL
- Mayor engagement y valor percibido

---

## 2. ARQUITECTURA DE LA SOLUCIÓN

### Flujo de Usuario:

```
Usuario entra a Tribus RRHH (primer login)
        ↓
¿Perfil completado? NO → Mostrar Pop-up (bloqueante)
        ↓
Usuario responde 3 preguntas (2 minutos)
        ↓
Guardar en base de datos (perfil del usuario)
        ↓
Pop-up cierra, acceso a plataforma
        ↓
Sherpa usa el contexto en todas las respuestas
        
---

Usuario entra después (logins posteriores)
        ↓
¿Perfil completado? SÍ → Pop-up NO aparece
        ↓
Acceso directo a plataforma
        ↓
Opción: Editar contexto desde Settings/Perfil
```

### Datos Almacenados (en tabla de usuario):

```json
{
  "user_id": "abc123",
  "sherpa_context": {
    "rol_y_responsabilidades": "Soy HRBP en una empresa de manufactura...",
    "reto_urgente": "Tenemos 35% de rotación...",
    "preferencia_ayuda": "Prefiero ir directo al caso práctico...",
    "context_completed_at": "2026-05-08T09:15:00Z",
    "context_updated_at": "2026-05-08T09:15:00Z"
  }
}
```

---

## 3. DISEÑO VISUAL DEL POP-UP

### Estructura General:

```
┌─────────────────────────────────────────────┐
│  ✕ (cerrar - deshabilitado hasta completar)  │
├─────────────────────────────────────────────┤
│                                              │
│  "Ayuda a tu Sherpa a conocerte mejor"      │
│                                              │
│  Responde estas 3 preguntas rápidas para    │
│  que Sherpa pueda darte recomendaciones     │
│  mucho más útiles para tu realidad.         │
│                                              │
│  ⏱ Te tomará menos de 2 minutos              │
│                                              │
├─────────────────────────────────────────────┤
│  PREGUNTA 1 DE 3                             │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│                                              │
│  "¿Qué haces en RRHH y qué tipo de          │
│   decisiones tomas?"                        │
│                                              │
│  Cuéntame tu rol, en qué tipo de            │
│  organización estás y de qué eres           │
│  responsable. Entre más contexto me des,    │
│  más útil voy a ser.                        │
│                                              │
│  [TEXTAREA - 150 caracteres min]            │
│  │ Soy especialista RRHH en startup...      │
│  └─────────────────────────────────────────┘│
│                                              │
│  Caracteres: 45/150                         │
│                                              │
│  [ANTERIOR] [SIGUIENTE →] (siguiente activo)│
│                                              │
└─────────────────────────────────────────────┘
```

### Especificaciones de Diseño:

**Dimensiones Pop-up:**
- Desktop: 600px ancho × 700px alto (responsive a 500px en mobile)
- Overlay: Fondo oscuro 70% opacidad
- Border radius: 12px
- Sombra: 0 10px 40px rgba(0,0,0,0.15)

**Paleta de Color:**
- Fondo pop-up: #FFFFFF
- Título principal: #1A1A1A (negro)
- Subtexto: #666666 (gris)
- Textarea border: #DDDDDD
- Textarea focus: #F5A623 (dorado Tribus)
- Botones activos: #F5A623
- Botones deshabilitados: #CCCCCC
- Texto validación: #4CAF50 (verde) o #FF5252 (rojo)

**Tipografía:**
- Título: 20px, Bold, line-height 28px
- Pregunta: 16px, Bold, line-height 24px
- Descripción: 14px, Regular, line-height 20px
- Placeholder textarea: 14px, Regular, color #999999

---

## 4. FLUJO POR PANTALLA

### PANTALLA 1: PREGUNTA 1 DE 3

**Título:** "¿Qué haces en RRHH y qué tipo de decisiones tomas?"

**Descripción:** "Cuéntame tu rol, en qué tipo de organización estás y de qué eres responsable. Entre más contexto me des, más útil voy a ser."

**Ejemplo visible debajo (gris, 12px):**
```
"Soy HRBP en una empresa de manufactura de 800 personas. 
Manejo el día a día de 3 plantas y tomo decisiones sobre desarrollo, 
clima laboral y relaciones laborales. Llevo 6 años en RRHH."
```

**Input:**
- TEXTAREA (multiline)
- Placeholder: "Escribe aquí..."
- Min: 50 caracteres
- Max: 500 caracteres
- Contador: "50/500" (abajo derecha)
- Validación: Verde cuando ≥50 caracteres

**Botones:**
- [ANTERIOR] (deshabilitado - primera pantalla)
- [SIGUIENTE →] (deshabilitado hasta ≥50 caracteres)

---

### PANTALLA 2: PREGUNTA 2 DE 3

**Título:** "¿Cuál es el reto más urgente que tienes hoy?"

**Descripción:** "Descríbeme tu situación actual y qué quieres haber resuelto en los próximos 3 meses. Si hay algo que se interpone, dímelo también."

**Ejemplo:**
```
"Tenemos 35% de rotación en el área operativa y la dirección quiere 
resultados en 90 días. No sé si el problema está en la selección, 
el onboarding o el liderazgo. Necesito diagnosticar bien antes de actuar."
```

**Input:**
- TEXTAREA (multiline)
- Min: 50 caracteres
- Max: 500 caracteres
- Contador: "50/500"

**Botones:**
- [← ANTERIOR] (activo)
- [SIGUIENTE →] (activo cuando ≥50 caracteres)

---

### PANTALLA 3: PREGUNTA 3 DE 3

**Título:** "¿Cómo prefieres que te ayude?"

**Descripción:** "Dime cómo trabajas mejor el conocimiento y cómo quieres que te guíe el Sherpa."

**Ejemplo:**
```
"Prefiero ir directo al caso práctico, sin mucho marco teórico. 
Si hay un framework, dámelo resumido con el primer paso concreto. 
Trabajo con equipos grandes y necesito cosas que pueda comunicar claro hacia arriba y hacia abajo."
```

**Input:**
- TEXTAREA (multiline)
- Min: 50 caracteres
- Max: 500 caracteres
- Contador: "50/500"

**Botones:**
- [← ANTERIOR] (activo)
- [COMPLETAR] (activo cuando ≥50 caracteres, color verde #4CAF50)

---

### PANTALLA 4: CONFIRMACIÓN (Opcional)

**Después de COMPLETAR:**

```
┌─────────────────────────────────────────────┐
│                                              │
│           ✓ ¡Perfecto!                      │
│                                              │
│  Tu perfil está completo. Sherpa ahora      │
│  entiende tu contexto y te dará             │
│  respuestas personalizadas.                 │
│                                              │
│  Puedes editar esto en cualquier momento    │
│  desde tu perfil.                           │
│                                              │
│          [EXPLORAR SHERPA →]                │
│                                              │
└─────────────────────────────────────────────┘
```

**Duración:** Mostrar 2 segundos, luego cerrar automáticamente

---

## 5. VALIDACIONES Y UX DETAILS

### Validación de Respuestas:

| Campo | Min | Max | Validación | Mensaje Error |
|---|---|---|---|---|
| P1: Rol | 50 chars | 500 chars | Mínimo 50 caracteres | "Cuéntame un poco más (mín. 50 caracteres)" |
| P2: Reto | 50 chars | 500 chars | Mínimo 50 caracteres | "Sé más específico (mín. 50 caracteres)" |
| P3: Preferencia | 50 chars | 500 chars | Mínimo 50 caracteres | "Dime cómo prefieres que te ayude" |

### Comportamientos:

**Si usuario intenta cerrar sin completar:**
- Botón X deshabilitado (opaco, sin hover)
- Si hace click fuera del modal: No cierra (bloqueante)
- Mensaje flotante (toast): "Completa tu perfil para desbloquear Sherpa" (2 segundos)

**Si usuario recarga la página:**
- Pop-up reaparece con los datos que ya escribió guardados
- Progreso se mantiene

**Mobile (< 600px):**
- Pop-up 100% ancho con padding 20px
- Altura máxima: 90vh (scrolleable si es necesario)
- Textarea más grande (mejor UX en mobile)

---

## 6. INTEGRACIÓN CON SHERPA

### Cómo Sherpa Usa el Contexto:

**Cuando usuario pregunta sin contexto:**
```
Usuario: "¿Cómo hago retención?"

Sherpa (respuesta genérica): "Aquí hay 5 estrategias..."
```

**Cuando usuario tiene contexto completo:**
```
Usuario: "¿Cómo hago retención?"

Sherpa (respuesta personalizada): "Viendo que estás en manufactura con 800 personas,
3 plantas, rotación del 35%, y prefieres casos prácticos directos:

1. DIAGNÓSTICO PRIMERO (lo que no hiciste aún):
   - Entrevista a 10 personas que se fueron (30 min)
   - Resultado: Sabrás si es selección, onboarding o liderazgo

2. ACCIÓN INMEDIATA (si es liderazgo):
   - Entrenar líderes en 1:1 efectivos (Playbook en Tribus)
   - Impacto: Baja rotación en 60-90 días

...detalle específico a tu contexto..."
```

### Almacenamiento en Prompt de Sherpa:

```
CONTEXTO DEL USUARIO:
─────────────────────
Rol: [contenido P1]
Reto Urgente: [contenido P2]
Preferencias: [contenido P3]

INSTRUCCIONES PARA SHERPA:
- Personaliza respuestas al rol y contexto específico
- Usa el formato que el usuario prefiere
- Considera la urgencia en las recomendaciones
- Siempre empieza por lo más práctico
```

---

## 7. IMPLEMENTACIÓN TÉCNICA

### Stack Recomendado:

**Frontend:**
```
React Modal (o tu librería modal actual)
+ Form validation (React Hook Form)
+ Character counter (custom)
+ Animations (Framer Motion o CSS transitions)
```

### Estructura de Componente (React):

```jsx
// Component: SherpaContextOnboarding.jsx

import React, { useState, useEffect } from 'react';
import './SherpaContextOnboarding.css';

const SherpaContextOnboarding = ({ userId, onComplete }) => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    rol_responsabilidades: '',
    reto_urgente: '',
    preferencia_ayuda: ''
  });
  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  const MIN_CHARS = 50;
  const MAX_CHARS = 500;

  // Validar campo actual
  const validateField = (field) => {
    const value = formData[field];
    if (!value || value.length < MIN_CHARS) {
      setErrors(prev => ({
        ...prev,
        [field]: `Mínimo ${MIN_CHARS} caracteres requeridos`
      }));
      return false;
    }
    setErrors(prev => {
      const newErrors = { ...prev };
      delete newErrors[field];
      return newErrors;
    });
    return true;
  };

  // Manejar cambio de texto
  const handleChange = (field, value) => {
    if (value.length <= MAX_CHARS) {
      setFormData(prev => ({
        ...prev,
        [field]: value
      }));
      if (errors[field]) {
        validateField(field);
      }
    }
  };

  // Ir al siguiente paso
  const handleNext = () => {
    const fieldNames = [
      'rol_responsabilidades',
      'reto_urgente',
      'preferencia_ayuda'
    ];
    const currentField = fieldNames[step - 1];

    if (validateField(currentField)) {
      if (step < 3) {
        setStep(step + 1);
      } else {
        handleComplete();
      }
    }
  };

  // Volver al paso anterior
  const handlePrev = () => {
    if (step > 1) {
      setStep(step - 1);
    }
  };

  // Guardar y completar
  const handleComplete = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('/api/users/sherpa-context', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          user_id: userId,
          sherpa_context: formData
        })
      });

      if (response.ok) {
        // Mostrar confirmación 2 segundos
        setStep('complete');
        setTimeout(() => {
          onComplete();
        }, 2000);
      }
    } catch (error) {
      console.error('Error saving context:', error);
      setErrors(prev => ({
        ...prev,
        submit: 'Error al guardar. Intenta nuevamente.'
      }));
    } finally {
      setIsLoading(false);
    }
  };

  // Contenido por paso
  const steps = [
    {
      title: '¿Qué haces en RRHH y qué tipo de decisiones tomas?',
      description: 'Cuéntame tu rol, en qué tipo de organización estás y de qué eres responsable. Entre más contexto me des, más útil voy a ser.',
      example: 'Soy HRBP en una empresa de manufactura de 800 personas. Manejo el día a día de 3 plantas y tomo decisiones sobre desarrollo, clima laboral y relaciones laborales. Llevo 6 años en RRHH.',
      field: 'rol_responsabilidades',
      number: 1
    },
    {
      title: '¿Cuál es el reto más urgente que tienes hoy?',
      description: 'Descríbeme tu situación actual y qué quieres haber resuelto en los próximos 3 meses. Si hay algo que se interpone, dímelo también.',
      example: 'Tenemos 35% de rotación en el área operativa y la dirección quiere resultados en 90 días. No sé si el problema está en la selección, el onboarding o el liderazgo. Necesito diagnosticar bien antes de actuar.',
      field: 'reto_urgente',
      number: 2
    },
    {
      title: '¿Cómo prefieres que te ayude?',
      description: 'Dime cómo trabajas mejor el conocimiento y cómo quieres que te guíe el Sherpa.',
      example: 'Prefiero ir directo al caso práctico, sin mucho marco teórico. Si hay un framework, dámelo resumido con el primer paso concreto. Trabajo con equipos grandes y necesito cosas que pueda comunicar claro hacia arriba y hacia abajo.',
      field: 'preferencia_ayuda',
      number: 3
    }
  ];

  if (step === 'complete') {
    return (
      <div className="sherpa-modal sherpa-complete">
        <div className="complete-content">
          <div className="checkmark">✓</div>
          <h2>¡Perfecto!</h2>
          <p>Tu perfil está completo. Sherpa ahora entiende tu contexto y te dará respuestas personalizadas.</p>
          <small>Puedes editar esto en cualquier momento desde tu perfil.</small>
        </div>
      </div>
    );
  }

  const currentStep = steps[step - 1];
  const currentValue = formData[currentStep.field];
  const isValid = currentValue && currentValue.length >= MIN_CHARS;
  const isLastStep = step === 3;

  return (
    <div className="sherpa-modal-overlay">
      <div className="sherpa-modal">
        {/* Header */}
        <div className="modal-header">
          <h1>Ayuda a tu Sherpa a conocerte mejor</h1>
          <p>Responde estas 3 preguntas rápidas para que Sherpa pueda darte recomendaciones, ideas y respuestas mucho más útiles para tu realidad.</p>
          <div className="time-estimate">
            <span>⏱</span> Te tomará menos de 2 minutos
          </div>
        </div>

        {/* Content */}
        <div className="modal-content">
          <div className="step-counter">
            PREGUNTA {currentStep.number} DE 3
          </div>

          <h2>{currentStep.title}</h2>
          <p className="description">{currentStep.description}</p>

          <div className="example-box">
            <small className="example-label">Ejemplo:</small>
            <p className="example-text">"{currentStep.example}"</p>
          </div>

          <div className="input-group">
            <textarea
              value={currentValue}
              onChange={(e) => handleChange(currentStep.field, e.target.value)}
              placeholder="Escribe aquí..."
              maxLength={MAX_CHARS}
              className={errors[currentStep.field] ? 'error' : ''}
            />
            <div className="char-counter">
              {currentValue.length}/{MAX_CHARS}
            </div>
            {errors[currentStep.field] && (
              <div className="error-message">{errors[currentStep.field]}</div>
            )}
          </div>
        </div>

        {/* Footer/Buttons */}
        <div className="modal-footer">
          <button
            className="btn btn-secondary"
            onClick={handlePrev}
            disabled={step === 1}
          >
            ← ANTERIOR
          </button>

          <button
            className={`btn btn-primary ${isLastStep ? 'btn-complete' : ''}`}
            onClick={handleNext}
            disabled={!isValid || isLoading}
          >
            {isLastStep ? 'COMPLETAR' : 'SIGUIENTE →'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default SherpaContextOnboarding;
```

### Estilos (CSS):

```css
/* SherpaContextOnboarding.css */

.sherpa-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.sherpa-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 40px 40px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h1 {
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.modal-header > p {
  font-size: 14px;
  color: #666666;
  margin: 0 0 16px 0;
  line-height: 20px;
}

.time-estimate {
  font-size: 13px;
  color: #999999;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-content {
  padding: 40px;
}

.step-counter {
  font-size: 12px;
  color: #f5a623;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.modal-content h2 {
  font-size: 16px;
  font-weight: bold;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.description {
  font-size: 14px;
  color: #666666;
  margin: 0 0 20px 0;
  line-height: 20px;
}

.example-box {
  background: #f9f9f9;
  border-left: 3px solid #f5a623;
  padding: 12px 16px;
  margin-bottom: 24px;
  border-radius: 4px;
}

.example-label {
  font-size: 12px;
  color: #999999;
  text-transform: uppercase;
}

.example-text {
  font-size: 13px;
  color: #555555;
  margin: 6px 0 0 0;
  font-style: italic;
  line-height: 18px;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid #dddddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  box-sizing: border-box;
}

textarea:focus {
  outline: none;
  border-color: #f5a623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.1);
}

textarea.error {
  border-color: #ff5252;
}

.char-counter {
  font-size: 12px;
  color: #999999;
  text-align: right;
  margin-top: 6px;
}

.error-message {
  font-size: 12px;
  color: #ff5252;
  margin-top: 6px;
}

.modal-footer {
  padding: 20px 40px 40px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid #f0f0f0;
}

.btn {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666666;
}

.btn-secondary:hover:not(:disabled) {
  background: #e8e8e8;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #f5a623;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #e09512;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-complete {
  background: #4caf50;
}

.btn-complete:hover:not(:disabled) {
  background: #45a049;
}

/* Confirmación */
.sherpa-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.complete-content {
  text-align: center;
}

.checkmark {
  font-size: 48px;
  color: #4caf50;
  margin-bottom: 16px;
  animation: scaleIn 0.4s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.complete-content h2 {
  font-size: 20px;
  font-weight: bold;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.complete-content p {
  font-size: 14px;
  color: #666666;
  margin: 0 0 8px 0;
}

.complete-content small {
  font-size: 12px;
  color: #999999;
}

/* Mobile */
@media (max-width: 600px) {
  .sherpa-modal {
    width: 100%;
    margin: 20px;
    border-radius: 8px;
  }

  .modal-header,
  .modal-content,
  .modal-footer {
    padding: 20px;
  }

  textarea {
    min-height: 100px;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .btn {
    width: 100%;
  }
}
```

---

## 8. FLUJO DE INTEGRACIÓN EN APP

### Dónde Mostrar:

**Opción A (Recomendado): Al primer login después del registro**
```
1. Usuario se registra en Tribus
2. Recibe email de confirmación
3. Hace click en link de verificación
4. Es redirigido a home
5. Pop-up aparece (bloqueante)
6. Usuario responde 3 preguntas
7. Accede a plataforma
```

**Opción B: En el home antes de usar Sherpa**
```
1. Usuario entra a Tribus (ya registrado)
2. Va al home
3. Ve un banner: "Completa tu perfil para desbloquear Sherpa"
4. Click abre el pop-up
5. Pop-up bloqueante hasta completar
```

### Ubicación de Edición de Perfil:

**Settings / Perfil del Usuario:**
```
┌─ Configuración
  ├─ Perfil
  │  ├─ Datos básicos (nombre, email)
  │  ├─ Foto de perfil
  │  ├─ [EDITAR CONTEXTO DE SHERPA] ← Link que abre el mismo modal
  │  │  (si ya fue completado, muestra "Contextualización actualizada hace X días")
  │  └─ Preferencias
  └─ ...
```

---

## 9. CHECKLIST DE IMPLEMENTACIÓN

**Backend:**
- [ ] Crear tabla/campo `sherpa_context` en tabla de usuarios
- [ ] Endpoint POST `/api/users/sherpa-context` (guardar)
- [ ] Endpoint GET `/api/users/sherpa-context` (obtener)
- [ ] Endpoint PUT `/api/users/sherpa-context` (actualizar)
- [ ] Validación de datos en servidor
- [ ] Logging/auditoría de cambios

**Frontend:**
- [ ] Crear componente React SherpaContextOnboarding
- [ ] Crear estilos CSS
- [ ] Integrar validación (React Hook Form o similar)
- [ ] Hook de mostrar/ocultar modal
- [ ] Lógica de persistencia (no permitir cerrar sin completar)
- [ ] Manejo de errores

**Sherpa Integration:**
- [ ] Modificar prompt de Sherpa para incluir contexto
- [ ] Testear que Sherpa usa contexto en respuestas
- [ ] Cachear contexto en sesión (para no hacer llamadas innecesarias)

**Testing:**
- [ ] Test flujo completo (3 pantallas)
- [ ] Test validaciones (mínimo caracteres)
- [ ] Test mobile responsiveness
- [ ] Test que modal no cierra sin completar
- [ ] Test que Sherpa personaliza basado en contexto
- [ ] Test edición posterior desde Settings

**Analytics:**
- [ ] Track: "Onboarding started"
- [ ] Track: "Question 1 completed"
- [ ] Track: "Question 2 completed"
- [ ] Track: "Question 3 completed"
- [ ] Track: "Context fully completed"
- [ ] Track: "Context edited from Settings"

---

## 10. CONSIDERACIONES DE EXPERIENCIA

### Motivos por los que Funciona:

1. **Obligatorio pero breve:** 2 minutos (no frustra)
2. **Contexto claro:** Ejemplos mostrando exactamente qué responder
3. **Progresión visual:** "Pregunta 1 DE 3" mantiene motivación
4. **Validación amigable:** No es agresivo, permite escribir primero
5. **Payoff inmediato:** "Sherpa ahora te entiende mejor"

### Riesgos a Mitigar:

- ❌ Usuario abandona sin completar
  - ✅ Solución: Modal bloqueante + reaparece en próximo login
  
- ❌ Usuario da respuestas genéricas/malas
  - ✅ Solución: Ejemplos muy específicos + mínimo 50 caracteres

- ❌ Usuario olvida que puede editar
  - ✅ Solución: Link en Settings + tooltip en perfil

---

## 11. VARIANTE FUTURA (Post-MVP)

**Form avanzado (fase 2):**
- Preguntas adicionales (industria, tamaño empresa, etc.)
- Selecciones rápidas (radio buttons/checkboxes) + texto libre
- Recomendaciones personalizadas basadas en perfil
- Quiz de "qué tipo de RRHH eres" con resultado

Pero por ahora: **Mantener simple. 3 preguntas. 2 minutos.**

---

## RESUMEN EJECUTIVO

**Qué:** Pop-up de 3 preguntas en onboarding para contextualizar Sherpa  
**Cuándo:** Primer login después del registro (o antes de usar Sherpa)  
**Duración:** ~2 minutos  
**Impacto:** Sherpa brinda respuestas 5-10x más personalizadas  
**Bloqueo:** Sí, modal bloqueante  
**Edición:** Disponible siempre desde Settings/Perfil  

**Implementación:**
- Componente React de ~300 líneas
- 3 pantallas con validación
- Almacenamiento en base de datos
- Integración con prompt de Sherpa

**Próximos pasos:**
1. Validar diseño con users
2. Implementar backend endpoint
3. Construir componente React
4. Testear integración Sherpa
5. Deploy y monitorear adoption

---

**Propuesta creada:** Mayo 2026  
**Versión:** 1.0 - Recomendada para MVP  
**Estado:** Listo para desarrollo