Upload index.html

index.html

@@ -12,7 +12,7 @@
   .dlx-sub{color:#5c6b5f;margin-bottom:16px}
   .dlx-progress{height:10px;background:#eff4f0;border-radius:999px;overflow:hidden;margin:10px 0 18px}
   .dlx-bar{height:100%;width:0;background:#7fbf7f;transition:width .3s}
-  .dlx-q h4{margin:0 0 6px;font-size:18px}
+  .dlx-q h4{margin:0 0 6px;font-size:18px;display:flex;align-items:flex-start;gap:8px}
   .dlx-options{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
   .dlx-pill{border:1px solid #d7e1d9;padding:8px 12px;border-radius:999px;cursor:pointer}
   .dlx-pill input{display:none}
@@ -27,6 +27,100 @@
   .dlx-note{color:#6a786d}
   .dlx-score{font-size:40px;font-weight:800;color:#214424}
   .dlx-muted{color:#7b8b7f}
+
+  /* Estilos para el botón de ayuda */
+  .help-btn {
+    background: #214424;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 22px;
+    height: 22px;
+    font-size: 12px;
+    font-weight: bold;
+    cursor: help;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .help-btn:hover {
+    background: #1a361c;
+    transform: scale(1.1);
+  }
+
+  /* Modal de ayuda */
+  .help-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .help-content {
+    background: #fff;
+    padding: 24px;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 500px;
+    border: 2px solid #214424;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+  }
+
+  .help-content h4 {
+    margin: 0 0 16px 0;
+    color: #214424;
+    font-size: 20px;
+    border-bottom: 2px solid #eff4f0;
+    padding-bottom: 8px;
+  }
+
+  .help-content .close-btn {
+    background: #214424;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    margin-top: 16px;
+    font-weight: 600;
+  }
+
+  .help-content .close-btn:hover {
+    background: #1a361c;
+  }
+
+  .help-example {
+    background: #f8f9f8;
+    border-left: 4px solid #214424;
+    padding: 12px 16px;
+    margin: 12px 0;
+    border-radius: 0 8px 8px 0;
+  }
+
+  .help-example h5 {
+    margin: 0 0 8px 0;
+    color: #214424;
+    font-size: 14px;
+  }
+
+  .help-example code {
+    background: #e9efe9;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-family: monospace;
+    font-size: 12px;
+  }
 </style>
 </head>
 
@@ -88,44 +182,53 @@
   </div>
 </div>
 
+<!-- Modal de ayuda -->
+<div id="helpModal" class="help-modal">
+  <div class="help-content">
+    <h4 id="helpTitle">Ayuda</h4>
+    <div id="helpText"></div>
+    <button class="close-btn" id="closeHelp">Cerrar</button>
+  </div>
+</div>
+
 <script>
 /* === CONFIGURACIÓN INICIAL === */
 const DOMAINS = [
   { id:'perimetro',  name:'Perímetro / Firewall', qs:[
-    '¿Usas un firewall dedicado (Mikrotik/OPNsense/etc.) con reglas mínimas por servicio?',
-    '¿Tienes listas de acceso/geo-bloqueo/IPS/DoS activas?',
-    '¿Los servicios expuestos están detrás de NAT o Port-Forward controlado?',
-    '¿Hay políticas VPN de acceso remoto con 2FA?'
+    {q:'¿Usas un firewall dedicado (Mikrotik/OPNsense/etc.) con reglas mínimas por servicio?', help:'Un firewall dedicado filtra el tráfico entrante y saliente. Reglas mínimas significa solo permitir los puertos y servicios estrictamente necesarios para operar.'},
+    {q:'¿Tienes listas de acceso/geo-bloqueo/IPS/DoS activas?', help:'Listas de acceso bloquean IPs maliciosas, geo-bloqueo restringe países de riesgo, IPS detecta intrusiones, y DoS protege contra ataques de denegación de servicio.'},
+    {q:'¿Los servicios expuestos están detrás de NAT o Port-Forward controlado?', help:'NAT oculta la red interna. Port-Forward controlado significa solo redirigir puertos específicos necesarios, no toda la red.'},
+    {q:'¿Hay políticas VPN de acceso remoto con 2FA?', help:'VPN permite acceso remoto seguro. 2FA (autenticación de dos factores) añade una capa extra de seguridad además de la contraseña.'}
   ]},
   { id:'servers', name:'Servidores / Hardening', qs:[
-    '¿Cuentas con hardening básico (SSH seguro, usuarios/roles, auditoría)?',
-    '¿Actualizaciones y parches aplicados regularmente?',
-    '¿Servicios innecesarios deshabilitados/controlados?'
+    {q:'¿Cuentas con hardening básico (SSH seguro, usuarios/roles, auditoría)?', help:'Hardening significa configurar el sistema de forma segura: SSH sin root, solo claves, usuarios con privilegios mínimos, y logs de auditoría.'},
+    {q:'¿Actualizaciones y parches aplicados regularmente?', help:'Aplicar actualizaciones de seguridad mensualmente para corregir vulnerabilidades conocidas en el sistema operativo y aplicaciones.'},
+    {q:'¿Servicios innecesarios deshabilitados/controlados?', help:'Cada servicio activo es una posible puerta de entrada. Deshabilitar servicios como FTP, Telnet, servicios de impresión no usados, etc.'}
   ]},
   { id:'backups', name:'Backups y Recuperación', qs:[
-    '¿Aplicas la regla 3-2-1 (3 copias, 2 medios, 1 offsite)?',
-    '¿Pruebas de restauración realizadas en los últimos 6 meses?',
-    '¿Backups protegidos contra ransomware (inmutables/air-gap)?'
+    {q:'¿Aplicas la regla 3-2-1 (3 copias, 2 medios, 1 offsite)?', help:'3 copias totales, en al menos 2 tipos diferentes de medios (discos, cinta, cloud), y 1 copia fuera del sitio físico principal.'},
+    {q:'¿Pruebas de restauración realizadas en los últimos 6 meses?', help:'Verificar periódicamente que los backups son recuperables restaurando datos de prueba en un ambiente controlado.'},
+    {q:'¿Backups protegidos contra ransomware (inmutables/air-gap)?', help:'Backups inmutables no pueden ser modificados o eliminados. Air-gap significa almacenamiento físicamente desconectado de la red.'}
   ]},
   { id:'monitor', name:'Monitoreo y Alertas', qs:[
-    '¿Monitoreo centralizado (Zabbix/PRTG/Grafana) con alertas 24/7?',
-    '¿Métricas revisadas mensualmente?',
-    '¿Alertas integradas con soporte?'
+    {q:'¿Monitoreo centralizado (Zabbix/PRTG/Grafana) con alertas 24/7?', help:'Sistema que monitorea servidores, redes, servicios y envía alertas inmediatas cuando detecta problemas o anomalías.'},
+    {q:'¿Métricas revisadas mensualmente?', help:'Analizar regularmente el rendimiento, capacidad, intentos de acceso fallidos, y otros indicadores de seguridad.'},
+    {q:'¿Alertas integradas con soporte?', help:'Las alertas críticas deben notificar automáticamente al personal técnico mediante email, SMS, Telegram, etc.'}
   ]},
   { id:'network', name:'Red y Conectividad', qs:[
-    '¿Segmentación VLANs para aislar servicios críticos?',
-    '¿Control de ancho de banda/Proxy/filtrado de contenidos?',
-    '¿Wi-Fi empresarial con WPA2-Enterprise?'
+    {q:'¿Segmentación VLANs para aislar servicios críticos?', help:'Dividir la red en segmentos lógicos separados (VLANs) para aislar servidores críticos, usuarios, e invitados.'},
+    {q:'¿Control de ancho de banda/Proxy/filtrado de contenidos?', help:'Limitar ancho de banda por servicio, filtrar contenido malicioso, y controlar acceso a internet mediante proxy.'},
+    {q:'¿Wi-Fi empresarial con WPA2-Enterprise?', help:'WPA2-Enterprise usa autenticación individual por usuario en lugar de una contraseña compartida para toda la red WiFi.'}
   ]},
   { id:'endpoints', name:'Usuarios / Estaciones', qs:[
-    '¿Antimalware/EDR y políticas de actualización?',
-    '¿Gestión de contraseñas y MFA?',
-    '¿Políticas de mínimo privilegio + bloqueo de USB?'
+    {q:'¿Antimalware/EDR y políticas de actualización?', help:'EDR (Endpoint Detection and Response) detecta comportamientos sospechosos. Políticas de actualización automática para software y antivirus.'},
+    {q:'¿Gestión de contraseñas y MFA?', help:'Password manager para contraseñas seguras y únicas. MFA (Multi-Factor Authentication) requiere código adicional además de la contraseña.'},
+    {q:'¿Políticas de mínimo privilegio + bloqueo de USB?', help:'Usuarios solo tienen permisos necesarios para su trabajo. Bloqueo de puertos USB previene infecciones y fugas de datos.'}
   ]},
   { id:'webmail', name:'Web y Correo', qs:[
-    '¿Sitios con HTTPS válido y cabeceras seguras?',
-    '¿Correo con SPF, DKIM y DMARC publicados?',
-    '¿WAF/antispam/antiphishing activos?'
+    {q:'¿Sitios con HTTPS válido y cabeceras seguras?', help:'HTTPS encripta comunicación web. Cabeceras de seguridad previenen ataques como XSS, clickjacking, y MIME sniffing.'},
+    {q:'¿Correo con SPF, DKIM y DMARC publicados?', help:'SPF, DKIM y DMARC son protocolos que previenen suplantación de identidad (spoofing) en correos electrónicos.'},
+    {q:'¿WAF/antispam/antiphishing activos?', help:'WAF protege aplicaciones web, antispam filtra correo no deseado, antiphishing detecta intentos de engaño.'}
   ]}
 ];
 
@@ -146,6 +249,70 @@ const RECS = {
   webmail:'Forzar HTTPS, cabeceras OWASP, SPF+DKIM+DMARC y WAF.'
 };
 
+// Contenido de ayuda detallado
+const HELP_CONTENT = {
+  'firewall-dedicado': `
+    <h4>🚧 Firewall Dedicado - Explicación Completa</h4>
+    <p>Un <strong>firewall dedicado</strong> es un dispositivo o software especializado que actúa como guardián entre tu red interna e Internet.</p>
+    
+    <div class="help-example">
+      <h5>🔧 Qué buscar:</h5>
+      <ul>
+        <li>Reglas que <strong>deniegan todo por defecto</strong></li>
+        <li>Solo puertos <strong>estrictamente necesarios</strong> abiertos</li>
+        <li>Separación de redes (LAN, DMZ, WAN)</li>
+        <li>Logs de conexiones sospechosas</li>
+      </ul>
+    </div>
+
+    <div class="help-example">
+      <h5>📋 Ejemplo de reglas seguras:</h5>
+      <code>
+# DENEGAR todo por defecto<br>
+# PERMITIR solo SSH desde IPs admin<br>
+# PERMITIR HTTP/HTTPS desde cualquier lugar<br>
+# DENEGAR todo lo demás
+      </code>
+    </div>
+
+    <p><strong>¿Por qué es importante?</strong> Sin firewall, todos tus servicios están expuestos directamente a Internet.</p>
+  `,
+
+  'listas-acceso': `
+    <h4>🛡️ Listas de Acceso y Protecciones - Explicación</h4>
+    <p>Estas son <strong>capas adicionales de seguridad</strong> que complementan al firewall básico.</p>
+    
+    <div class="help-example">
+      <h5>🎯 Componentes clave:</h5>
+      <ul>
+        <li><strong>Listas de acceso:</strong> Bloqueo de IPs maliciosas conocidas</li>
+        <li><strong>Geo-bloqueo:</strong> Restricción por país (ej: bloquear Rusia, China)</li>
+        <li><strong>IPS:</strong> Detección de patrones de ataque en tiempo real</li>
+        <li><strong>Protección DoS:</strong> Limita conexiones simultáneas</li>
+      </ul>
+    </div>
+
+    <p><strong>Beneficio:</strong> Previene el 80% de ataques automatizados y escaneos de red.</p>
+  `,
+
+  'nat-portforward': `
+    <h4>🌐 NAT y Port-Forward Controlado</h4>
+    <p><strong>NAT (Network Address Translation)</strong> oculta tus IPs internas. <strong>Port-Forward</strong> redirige puertos específicos.</p>
+    
+    <div class="help-example">
+      <h5>✅ Configuración segura:</h5>
+      <ul>
+        <li>NAT activado para toda la red interna</li>
+        <li>Port-Forward solo para servicios esenciales</li>
+        <li>Nunca redirigir rangos de puertos completos</li>
+        <li>Registrar cada redirección con justificación</li>
+      </ul>
+    </div>
+
+    <p><strong>Riesgo:</strong> Port-Forward incorrecto puede exponer servicios internos accidentalmente.</p>
+  `
+};
+
 let current = 0, answers = {};
 const steps = document.getElementById('dlxSteps'),
       bar = document.getElementById('dlxBar'),
@@ -155,6 +322,50 @@ const steps = document.getElementById('dlxSteps'),
       result = document.getElementById('dlxResult'),
       nav = document.getElementById('dlxNavBox');
 
+/* === SISTEMA DE AYUDA === */
+function showHelp(helpKey, questionText) {
+  const modal = document.getElementById('helpModal');
+  const title = document.getElementById('helpTitle');
+  const content = document.getElementById('helpText');
+  
+  // Usar contenido específico si existe, sino genérico
+  if (HELP_CONTENT[helpKey]) {
+    content.innerHTML = HELP_CONTENT[helpKey];
+  } else {
+    // Contenido genérico basado en la pregunta
+    content.innerHTML = `
+      <h4>💡 Ayuda Contextual</h4>
+      <p><strong>Pregunta:</strong> ${questionText}</p>
+      <div class="help-example">
+        <h5>🎯 Qué evaluamos:</h5>
+        <p>Esta pregunta busca determinar si tienes implementadas las <strong>medidas básicas de seguridad</strong> para este dominio.</p>
+      </div>
+      <div class="help-example">
+        <h5>📊 Cómo responder:</h5>
+        <ul>
+          <li><strong>Sí:</strong> Si tienes completamente implementado y documentado</li>
+          <li><strong>Parcial:</strong> Si está implementado pero necesita mejoras</li>
+          <li><strong>No:</strong> Si no está implementado o es inefectivo</li>
+          <li><strong>No sé:</strong> Si no tienes certeza del estado actual</li>
+        </ul>
+      </div>
+      <p><strong>💡 Tip:</strong> Responde con honestidad para obtener un diagnóstico preciso.</p>
+    `;
+  }
+  
+  modal.style.display = 'flex';
+}
+
+function closeHelp() {
+  document.getElementById('helpModal').style.display = 'none';
+}
+
+// Event listeners para el modal de ayuda
+document.getElementById('closeHelp').addEventListener('click', closeHelp);
+document.getElementById('helpModal').addEventListener('click', function(e) {
+  if (e.target.id === 'helpModal') closeHelp();
+});
+
 /* === FUNCIONES PRINCIPALES === */
 function render() {
   steps.innerHTML = '';
@@ -163,12 +374,20 @@ function render() {
   const card = document.createElement('div');
   card.className = 'dlx-card';
   card.innerHTML = `<h3 class="dlx-title">${d.name}</h3>`;
-  d.qs.forEach((q, i) => {
+  
+  d.qs.forEach((item, i) => {
     const b = document.createElement('div');
     b.className = 'dlx-q';
-    b.innerHTML = `<h4>${q}</h4>`;
+    
+    // Crear botón de ayuda con ID único
+    const helpKey = `${d.id}-q${i}`;
+    const helpBtn = `<button class="help-btn" onclick="showHelp('${helpKey}', '${item.q.replace(/'/g, "\\'")}')">?</button>`;
+    
+    b.innerHTML = `<h4>${item.q} ${helpBtn}</h4>`;
+    
     const row = document.createElement('div');
     row.className = 'dlx-options';
+    
     SCALE.forEach(opt => {
       const lbl = document.createElement('label');
       lbl.className = 'dlx-pill';
@@ -183,9 +402,11 @@ function render() {
       if (answers[d.id] && answers[d.id][i] === opt.score) lbl.classList.add('active');
       row.appendChild(lbl);
     });
+    
     b.appendChild(row);
     card.appendChild(b);
   });
+  
   steps.appendChild(card);
   bar.style.width = Math.round(current / DOMAINS.length * 100) + '%';
   updateButtons();