# Mind Link

**Tipo:** Aplicación Web  
**Versión:** v11  
**Estado:** En desarrollo

---

## Descripción

Interfaz de comunicación visual tipo mindmap/linktree. Presenta nodos principales (categorías) con subnodos desplegables (documentos) conectados por líneas animadas.

---

## Arquitectura Visual

```
┌─────────────────────────────────────────────────────────────────┐
│                        MIND LINK                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   ┌─────────┐              ┌─────────────────────┐            │
│   │  NODO   │──────────────│     SUBNODO 1      │            │
│   │ 120x120 │              │     180x101        │            │
│   │         │──────────────│     SUBNODO 2      │            │
│   └─────────┘              └─────────────────────┘            │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

---

## Especificaciones Técnicas

### Dimensiones

| Elemento | Valor | Notas |
|----------|-------|-------|
| Nodo principal | 120×120 px | Cuadrado |
| Subnodo | 180×101 px | Ratio 16:9 |
| Radio esquinas nodo | 20px | |
| Radio esquinas subnodo | 15px | |
| Grosor líneas/bordes | 3px | |
| Gap entre subnodos | 20px | Vertical |
| Gap entre grupos | 50px | Vertical |
| Gap nodo a subnodo | 70px | Horizontal |

### Tipografía

| Elemento | Tamaño | Peso | Color |
|----------|--------|------|-------|
| Título página | 32px | 600 | #1a1a1a |
| Título nodo | 18px | 500 | Color del nodo |
| Título subnodo | 16px | 500 | Color del nodo |

### Colores por Defecto

```
#FF6B35  - Naranja (nodo 1)
#E5A000  - Amarillo (nodo 2)
#06D6A0  - Verde (nodo 3)
#0891B2  - Cyan (nodo 4)
#3B82F6  - Azul (nodo 5)
#8B5CF6  - Violeta (nodo 6)
#EC4899  - Rosa (nodo 7)
```

---

## Iconos de Acción

Posicionados en las 4 esquinas del subnodo:

```
┌─────────────────────┐
│ 🕐              👁  │  🕐 = historial
│                     │  👁 = preview
│                     │
│ ⬇               🔗 │  ⬇ = descarga
└─────────────────────┘  🔗 = enlace
```

| Icono | Campo | Función |
|-------|-------|---------|
| 👁 | tiene_preview | Abrir modal con documento |
| ⬇ | tiene_descarga | Descargar archivo |
| 🔗 | tiene_enlace | Copiar URL |
| 🕐 | tiene_historial | Mostrar versiones |

---

## Animaciones

| Elemento | Duración | Función | Delay |
|----------|----------|---------|-------|
| Movimiento vertical nodo | 400ms | ease-out | - |
| Revelado de líneas | 450ms | linear | 80ms |
| Aparición subnodos | instantánea | - | 30ms |

---

## Estructura de Datos

### Configuración

| Campo | Tipo | Descripción |
|-------|------|-------------|
| titulo | String | Título principal |
| mostrar_titulo | Boolean | Mostrar/ocultar |
| colores | String | Hex separados por comas |
| fuente | String | Nombre de fuente |

### Nodos

| Campo | Tipo | Descripción |
|-------|------|-------------|
| id | String | Identificador único |
| titulo | String | Nombre categoría |
| imagen | URL | Imagen 120×120 |
| subnodos | Array | Lista documentos |

### Subnodos

| Campo | Tipo | Descripción |
|-------|------|-------------|
| id | String | Identificador único |
| titulo | String | Nombre documento |
| imagen | URL | Miniatura 16:9 |
| tiene_preview | Boolean | Icono ojo |
| tiene_descarga | Boolean | Icono descarga |
| tiene_enlace | Boolean | Icono enlace |
| tiene_historial | Boolean | Icono reloj |

---

## Pendiente

- [ ] Conexión real con API
- [ ] Sistema de autenticación con PIN
- [ ] Funcionalidad real de iconos
- [ ] Responsive móvil
- [ ] Integración en aplicación empresarial