# 📋 Sistema Multi-Cliente de Diagnósticos TI

Sistema profesional de encuestas de diagnóstico tecnológico para múltiples clientes con panel de administración integrado.

**Desarrollado por:** IDEA - Ingeniería para la Automatización (i4a.mx)

---

## 🎯 Características Principales

✅ **Multi-Cliente**: Soporte ilimitado de organizaciones con configuraciones independientes  
✅ **Panel de Administración**: Interfaz visual para crear/editar encuestas sin programar  
✅ **White-Label**: Branding personalizado (logos, colores) por cliente  
✅ **Tipos de Preguntas**: Binarias (SÍ/NO) y Múltiples (SÍ/PARCIAL/NO)  
✅ **Tooltips Explicativos**: Ayuda contextual para preguntas técnicas  
✅ **Preguntas Críticas**: Marcadores de alertas de seguridad  
✅ **Generación Automática**: Scores, gráficas radar y PDFs personalizados  
✅ **Notificaciones Email**: Envío automático a IDEA vía EmailJS  
✅ **Responsive Design**: Funciona perfectamente en desktop y móvil  

---

## 📁 Estructura del Proyecto

```
/IT Checklist AFAMELA/
├── public/                         ← Aplicación principal (encuestas)
│   ├── index.html                  (Encuesta multi-cliente)
│   ├── script.js                   (Lógica dinámica)
│   ├── styles.css                  (Estilos con variables CSS)
│   ├── configs/
│   │   ├── afamela.json           ← Config AFAMELA (13 preguntas)
│   │   └── amiif.json             ← Config AMIIF (8 preguntas)
│   └── assets/
│       └── logos/
│           ├── idea-logo.png
│           ├── amiif-logo.png
│           └── [cliente]-logo.png
│
├── admin/                          ← Panel de administración
│   ├── index.html                  (Interfaz del panel)
│   ├── admin-script.js             (Lógica de gestión)
│   └── admin-styles.css            (Estilos del panel)
│
└── README.md                       (Este archivo)
```

---

## 🚀 Cómo Usar

### **Opción 1: Clientes Existentes**

Accede directamente a las encuestas configuradas:

```
public/index.html?client=afamela
public/index.html?client=amiif
```

### **Opción 2: Crear Nuevo Cliente**

1. **Accede al Panel de Administración:**
   ```
   admin/index.html
   ```

2. **Inicia Sesión:**
   - Contraseña: `C0nt4ct0.2025#`

3. **Crea un Nuevo Cliente:**
   - Click en "**+ Crear Nuevo Cliente**"
   - Completa el formulario:
     - **ID Cliente**: identificador único (ej: `amiif`, `afamela`)
     - **Nombre**: nombre corto del cliente
     - **Logo**: sube el archivo PNG/JPG
     - **Colores**: selecciona primario y acento
     - **Agregar Secciones**: organiza las preguntas por temas
     - **Agregar Preguntas**: escribe preguntas, tooltips, marca críticas

4. **Genera la Configuración:**
   - Click en "**💾 Generar y Descargar Configuración**"
   - Se descargará `[cliente].json`

5. **Despliega el Cliente:**
   - Copia `[cliente].json` a `public/configs/`
   - Si subiste un logo nuevo, cópialo a `public/assets/logos/`
   - Accede: `public/index.html?client=[cliente]`

---

## ⚙️ Configuración de EmailJS

Para recibir notificaciones de encuestas completadas:

1. Crea una cuenta en [EmailJS](https://www.emailjs.com/)
2. Configura un servicio de email (Gmail, Outlook, etc.)
3. Crea un template con los campos:
   - `client_type`, `survey_title`, `company_name`
   - `contact_name`, `contact_email`, `contact_phone`
   - `total_score`, `max_score`, `result_category`
   - `si_count`, `parcial_count`, `no_count`
   - `critical_issues`, `all_responses`

4. Actualiza las credenciales en `public/script.js`:
   ```javascript
   const EMAILJS_CONFIG = {
       PUBLIC_KEY: 'TU_PUBLIC_KEY',
       SERVICE_ID: 'TU_SERVICE_ID',
       TEMPLATE_ID: 'TU_TEMPLATE_ID'
   };
   ```

---

## 🎨 Personalización de Colores

Los colores se configuran automáticamente al:
1. Crear un cliente en el panel admin
2. Los colores se aplican mediante CSS Variables:
   - `--primary-color`: Color principal
   - `--accent-color`: Color de acento

---

## 📊 Clientes Configurados

### **AFAMELA**
- **ID:** `afamela`
- **Tipo:** Diagnóstico General de TI
- **Preguntas:** 13 (4 secciones)
- **Respuestas:** SÍ / PARCIAL / NO
- **URL:** `public/index.html?client=afamela`

### **AMIIF**
- **ID:** `amiif`
- **Tipo:** Semáforo de Riesgo Tecnológico
- **Preguntas:** 8 (3 secciones técnicas)
- **Respuestas:** SÍ / NO (binarias)
- **URL:** `public/index.html?client=amiif`

---

## 🔒 Seguridad del Panel Admin

- **Autenticación**: Hash SHA-256 de la contraseña
- **Almacenamiento**: LocalStorage del navegador (solo visible para ti)
- **Acceso**: Solo desde `admin/index.html`

**Contraseña actual:** `C0nt4ct0.2025#`

### Cambiar la Contraseña:

1. Genera el hash SHA-256 de tu nueva contraseña:
   ```javascript
   // En la consola del navegador:
   const encoder = new TextEncoder();
   const data = encoder.encode('TU_NUEVA_CONTRASEÑA');
   crypto.subtle.digest('SHA-256', data).then(hash => {
       const hashArray = Array.from(new Uint8Array(hash));
       console.log(hashArray.map(b => b.toString(16).padStart(2, '0')).join(''));
   });
   ```

2. Reemplaza en `admin/admin-script.js`:
   ```javascript
   const PASSWORD_HASH = 'TU_NUEVO_HASH';
   ```

---

## 🌐 Despliegue

### **Opción A: Hosting Estático (Recomendado)**

1. **Netlify/Vercel/GitHub Pages:**
   - Sube toda la carpeta del proyecto
   - Configura `public/` como directorio raíz de la app
   - URLs de acceso:
     - Encuestas: `https://tu-dominio.com/?client=afamela`
     - Admin: `https://tu-dominio.com/admin/`

2. **Servidor Apache/Nginx:**
   ```bash
   # Copia los archivos al servidor
   scp -r public/ user@servidor:/var/www/html/diagnosticos/
   scp -r admin/ user@servidor:/var/www/html/diagnosticos/
   ```

### **Opción B: Local (Desarrollo)**

```bash
# Usar servidor Python simple
cd "IT Checklist AFAMELA"
python3 -m http.server 8000

# Acceder:
# http://localhost:8000/public/?client=afamela
# http://localhost:8000/admin/
```

---

## 📝 Agregar Más Clientes

### **Método Visual (Recomendado):**

1. Accede a `admin/index.html`
2. Inicia sesión
3. Click "**+ Crear Nuevo Cliente**"
4. Completa el formulario interactivo
5. Descarga el JSON y el logo

### **Método Manual:**

1. Copia `public/configs/afamela.json`
2. Renombra a `[nuevo-cliente].json`
3. Edita la configuración:
   - `client.id`: ID único
   - `client.name`: Nombre del cliente
   - `client.logo`: Ruta del logo
   - `client.primaryColor` y `accentColor`: Colores hex
   - `survey.sections`: Secciones y preguntas

4. Guarda en `public/configs/`
5. Accede: `public/index.html?client=[nuevo-cliente]`

---

## 🎓 Tipos de Preguntas

### **Binarias (SÍ/NO):**
```json
{
  "type": "binary",
  "text": "¿Cuenta con protocolos de DLP?",
  "critical": true,
  "tooltip": "DLP impide fuga de datos..."
}
```
**Scoring:** SÍ=10 pts, NO=0 pts

### **Múltiples (SÍ/PARCIAL/NO):**
```json
{
  "type": "multiple",
  "text": "¿Existe inventario de activos TI?",
  "critical": false,
  "tooltip": null
}
```
**Scoring:** SÍ=10 pts, PARCIAL=5 pts, NO=0 pts

---

## 📞 Soporte

**IDEA - Ingeniería para la Automatización**  
- 🌐 Website: [i4a.mx](https://i4a.mx)  
- 📧 Email: contacto@i4a.mx  
- 📱 WhatsApp: +52 55 3010 7131  

---

## 📜 Changelog

### **v2.0 - Multi-Cliente** (2026-01-04)
- ✅ Sistema dinámico multi-cliente
- ✅ Panel de administración completo
- ✅ Configuración JSON por cliente
- ✅ Branding personalizado
- ✅ Tipos de preguntas flexibles
- ✅ Cliente AMIIF agregado

### **v1.0 - AFAMELA** (2026-01-03)
- ✅ Encuesta AFAMELA (13 preguntas)
- ✅ Generación de PDF
- ✅ Integración EmailJS
- ✅ Gráficas radar
- ✅ Sistema de scoring

---

## 🙏 Créditos

Desarrollado con ❤️ por **IDEA - Ingeniería para la Automatización**

**Tecnologías utilizadas:**
- HTML5 + CSS3 + JavaScript (Vanilla)
- Chart.js (Gráficas radar)
- jsPDF (Generación PDF)
- EmailJS (Notificaciones)
- LocalStorage API (Persistencia admin)

---

## 📄 Licencia

© 2026 IDEA - Todos los derechos reservados.