codigo0/docs/INSTRUCCIONES_SUBIR_INFOGRAFIA.md

# 📤 Instrucciones para Subir la Infografía ABCDE

## 📍 Dónde Subir el Archivo

### Opción 1: Reemplazar el SVG actual (recomendado)

**Ubicación del archivo:**
```
public/assets/infografias/bloque-0-fundamentos/
```

**Nombre del archivo:**
- Si es **PNG**: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png`
- Si es **JPG**: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.jpg`
- Si es **SVG**: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg`

**Ruta completa:**
```
/home/planetazuzu/guia-tes/public/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.[extensión]
```

### Opción 2: Mantener ambos archivos

Si quieres mantener el SVG actual y añadir la nueva:
- Nombre alternativo: `ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL_V2.png`

---

## 🔧 Pasos para Integrar

### 1. Guardar el archivo

Copia tu infografía a:
```bash
public/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png
```
(Reemplaza `.png` por la extensión correcta: `.jpg`, `.png`, `.svg`)

### 2. Actualizar el Markdown

Edita el archivo:
```
docs/consolidado/SECCION_01_ABCDE_OPERATIVO.md
```

Busca la línea 61 y actualiza la ruta de la imagen:

**Antes:**
```markdown
![Infografía ABCDE - Estructura Mental de Priorización]/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.svg)
```

**Después (si es PNG):**
```markdown
![Infografía ABCDE - Estructura Mental de Priorización]/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png)
```

### 3. Actualizar el registro de imágenes (opcional)

Si quieres que la imagen aparezca en el sistema de búsqueda, edita:
```
src/data/image-registry.ts
```

Busca la entrada `'abcde-introduccion-estructura-mental'` y actualiza el `path`:

```typescript
'abcde-introduccion-estructura-mental': {
  id: 'abcde-introduccion-estructura-mental',
  path: '/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png', // ← Cambiar extensión
  alt: 'ABCDE como estructura mental de priorización - Infografía conceptual',
  caption: 'Infografía que muestra el ABCDE como estructura mental de priorización, comparando evaluación desordenada vs estructurada',
  block: 'bloque-0-fundamentos',
  tags: ['abcde', 'introduccion', 'estructura-mental', 'priorizacion', 'formacion']
}
```

---

## 👀 Dónde Ver la Infografía

### En la App (desarrollo)

1. **Inicia el servidor de desarrollo:**
   ```bash
   npm run dev
   ```

2. **Navega a la Guía de Refuerzo ABCDE:**
   - Ve a: `http://localhost:5173/guias/abcde-operativo`
   - O desde el menú: "Guías de Refuerzo" → "ABCDE Operativo"

3. **Abre la Sección 1:**
   - Haz clic en "Sección 1: Introducción y Contexto"
   - La infografía aparecerá en el "Bloque 2: Visual Explicativo"

### Ruta directa:
```
http://localhost:5173/guias/abcde-operativo/1
```

### Ver la imagen directamente:
```
http://localhost:5173/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png
```
(Reemplaza `.png` por tu extensión)

---

## ✅ Verificación

### Checklist de verificación:

- [ ] Archivo guardado en `public/assets/infografias/bloque-0-fundamentos/`
- [ ] Nombre del archivo correcto (con extensión adecuada)
- [ ] Markdown actualizado con la ruta correcta
- [ ] Registro de imágenes actualizado (opcional)
- [ ] Servidor de desarrollo iniciado
- [ ] Infografía visible en la Sección 1 de la guía

---

## 🐛 Solución de Problemas

### La imagen no aparece:

1. **Verifica la ruta:**
   - La ruta en Markdown debe empezar con `/assets/...`
   - No debe incluir `public/` en la ruta

2. **Verifica la extensión:**
   - Asegúrate de que la extensión en el Markdown coincida con el archivo real

3. **Verifica el servidor:**
   - Reinicia el servidor de desarrollo: `npm run dev`
   - Limpia la caché del navegador (Ctrl+Shift+R)

4. **Verifica permisos:**
   - Asegúrate de que el archivo tiene permisos de lectura

### La imagen se ve pequeña:

Añade atributos HTML en el Markdown:
```markdown
<img src="/assets/infografias/bloque-0-fundamentos/ABCDE_INTRODUCCION_ESTRUCTURA_MENTAL.png" 
     alt="Infografía ABCDE" 
     style="width: 100%; max-width: 1200px; height: auto;" />
```

---

## 📝 Notas

- **Formato recomendado:** PNG o JPG de alta calidad (mínimo 1200px de ancho)
- **Tamaño máximo:** Se recomienda optimizar la imagen para web (< 2MB)
- **Nombres de archivo:** Usa mayúsculas y guiones bajos para consistencia
- **Rutas:** Todas las rutas en Markdown son relativas a `public/`

---

**¡Listo!** Una vez que subas el archivo y actualices el Markdown, la infografía aparecerá automáticamente en la Sección 1 de la Guía de Refuerzo ABCDE.