═══════════════════════════════════════════════════════════════
INSTRUCCIONES DE INSTALACIÓN EN CPANEL
ISF 10+2 Simulator - Aduanalibre.com
═══════════════════════════════════════════════════════════════

📋 REQUISITOS PREVIOS:
─────────────────────
✅ Acceso a cPanel de tu hosting
✅ Dominio o subdominio configurado
✅ Aproximadamente 5 MB de espacio disponible


🚀 MÉTODO 1: INSTALACIÓN DIRECTA (RECOMENDADO)
─────────────────────────────────────────────

PASO 1: Acceder a cPanel
   1. Abre tu navegador
   2. Ve a: tudominio.com/cpanel
   3. Ingresa usuario y contraseña

PASO 2: Abrir File Manager
   1. Busca el ícono "File Manager" (Administrador de archivos)
   2. Click en "File Manager"
   3. Navega a la carpeta donde quieres instalar:
      
      Opciones comunes:
      • /public_html/               → tudominio.com/
      • /public_html/isf/           → tudominio.com/isf/
      • /public_html/simuladores/   → tudominio.com/simuladores/

PASO 3: Subir el archivo ZIP
   1. Click en el botón "Upload" (Subir)
   2. Click en "Select File" (Seleccionar archivo)
   3. Selecciona: isf-simulator.zip
   4. Espera a que termine la carga (barra verde al 100%)
   5. Click en "Go Back to..."

PASO 4: Extraer archivos
   1. Localiza el archivo "isf-simulator.zip"
   2. Click derecho sobre el archivo
   3. Selecciona "Extract" (Extraer)
   4. Confirma la ubicación de extracción
   5. Click "Extract File(s)"
   6. ¡Listo! Los archivos están instalados

PASO 5: Verificar instalación
   1. Abre tu navegador
   2. Ve a: tudominio.com/isf-simulator/
   3. Deberías ver el simulador funcionando


🔧 MÉTODO 2: INSTALACIÓN VÍA FTP
────────────────────────────────

PASO 1: Conectar vía FTP
   1. Abre tu cliente FTP (FileZilla, Cyberduck, etc.)
   2. Configura conexión:
      Host: ftp.tudominio.com
      Usuario: tu_usuario_cpanel
      Contraseña: tu_contraseña
      Puerto: 21

PASO 2: Subir archivos
   1. Navega a /public_html/ (o carpeta deseada)
   2. Crea carpeta "isf-simulator" (si no existe)
   3. Entra a la carpeta
   4. Sube TODOS los archivos y carpetas:
      - index.html
      - README.txt
      - INSTRUCCIONES_INSTALACION.txt
      - /assets/ (carpeta completa)
      - /includes/ (carpeta completa)

PASO 3: Verificar permisos
   1. Asegúrate que todos los archivos tengan permisos 644
   2. Carpetas deben tener permisos 755


📁 ESTRUCTURA DE ARCHIVOS FINAL:
───────────────────────────────

/public_html/isf-simulator/
│
├── index.html                           ← Página principal
├── README.txt                           ← Información del proyecto
├── INSTRUCCIONES_INSTALACION.txt       ← Este archivo
│
├── assets/
│   ├── css/
│   │   └── isf-styles.css              ← Estilos personalizados
│   │
│   └── js/
│       ├── isf-app.js                  ← Lógica principal
│       └── export-functions.js         ← Exportación JSON/Excel/CSV
│
└── includes/
    └── help-system.js                  ← Sistema de ayuda (?)


🌐 CONFIGURAR SUBDOMINIO (OPCIONAL)
──────────────────────────────────

Si quieres usar: isf.aduanalibre.com

PASO 1: Crear subdominio en cPanel
   1. En cPanel, busca "Subdomains" (Subdominios)
   2. Ingresa el nombre: isf
   3. Document Root: /public_html/isf-simulator
   4. Click "Create"

PASO 2: Acceder
   1. Espera 5-10 minutos para propagación DNS
   2. Visita: https://isf.aduanalibre.com


🔒 CONFIGURAR SSL (HTTPS) - RECOMENDADO
──────────────────────────────────────

PASO 1: Instalar SSL gratuito con Let's Encrypt
   1. En cPanel, busca "SSL/TLS Status"
   2. Selecciona tu dominio
   3. Click "Run AutoSSL"
   4. Espera a que se instale (2-3 minutos)

PASO 2: Forzar HTTPS
   1. Crea un archivo .htaccess en la carpeta isf-simulator/
   2. Agrega este código:

      RewriteEngine On
      RewriteCond %{HTTPS} off
      RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]


📊 CONFIGURAR GOOGLE ANALYTICS (OPCIONAL)
────────────────────────────────────────

Para trackear visitas y conversiones:

PASO 1: Obtener código de Analytics
   1. Ve a https://analytics.google.com
   2. Crea una propiedad para tu sitio
   3. Copia el código "gtag"

PASO 2: Agregar a index.html
   1. Abre index.html en File Manager
   2. Click "Edit"
   3. Justo antes de </head>, pega:

   <!-- Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'G-XXXXXXXXXX');
   </script>

   4. Reemplaza G-XXXXXXXXXX con tu ID real
   5. Guarda el archivo


🎨 PERSONALIZACIÓN
─────────────────

CAMBIAR COLORES:
   1. Abre: assets/css/isf-styles.css
   2. Busca al inicio del archivo las variables CSS:
      --primary-color: #0066cc;
      --secondary-color: #28a745;
   3. Cambia los colores con códigos hex
   4. Guarda

CAMBIAR LOGO/NOMBRE:
   1. Abre index.html
   2. Busca: <h1 class="logo">
   3. Modifica el texto
   4. Guarda


🔍 SOLUCIÓN DE PROBLEMAS
────────────────────────

PROBLEMA: Página en blanco
SOLUCIÓN:
   • Verifica que index.html esté en la raíz de la carpeta
   • Revisa permisos de archivos (644)
   • Revisa permisos de carpetas (755)
   • Limpia caché del navegador (Ctrl + Shift + R)

PROBLEMA: Estilos no cargan
SOLUCIÓN:
   • Verifica que la carpeta /assets/css/ exista
   • Abre consola del navegador (F12) y busca errores
   • Revisa que las rutas en index.html sean correctas

PROBLEMA: Botones no funcionan
SOLUCIÓN:
   • Verifica que todos los archivos .js estén presentes
   • Abre consola del navegador (F12) y busca errores
   • Asegúrate de que Bootstrap JS esté cargando


📧 BACKEND API PARA WAITLIST (AVANZADO)
──────────────────────────────────────

Para guardar emails del "Coming Soon EDI":

OPCIÓN A: PHP Simple
   1. Crea archivo: /api/waitlist.php
   2. Código básico:

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

$data = json_decode(file_get_contents('php://input'), true);

if ($data && isset($data['email'])) {
    $email = $data['email'];
    $urgency = $data['urgency'];
    $timestamp = date('Y-m-d H:i:s');
    
    // Guardar en archivo
    $line = "$timestamp,$email,$urgency\n";
    file_put_contents('waitlist.csv', $line, FILE_APPEND);
    
    // O guardar en base de datos MySQL
    // $conn = mysqli_connect('localhost', 'user', 'pass', 'db');
    // mysqli_query($conn, "INSERT INTO waitlist ...");
    
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

   3. Actualiza assets/js/isf-app.js, función joinWaitlist():
      Descomenta el bloque fetch() y cambia la URL a:
      fetch('/api/waitlist.php', { ... })


OPCIÓN B: Google Forms (Sin código)
   1. Crea un Google Form
   2. Obtén el link del form
   3. En el modal "Coming Soon", reemplaza el form
      con un iframe del Google Form


✅ CHECKLIST FINAL
─────────────────

Antes de publicar, verifica:

□ Todos los archivos están en su lugar
□ index.html carga correctamente
□ Estilos CSS se ven bien
□ Todos los botones funcionan
□ Sistema de ayuda (?) funciona en todos los campos
□ Exportación JSON funciona
□ Exportación Excel funciona
□ Exportación CSV funciona
□ Modal "Coming Soon" se abre correctamente
□ Disclaimers legales son visibles
□ Responsive en móvil (prueba con celular)
□ SSL/HTTPS configurado
□ Google Analytics funcionando (opcional)


🎉 ¡LISTO PARA USAR!
──────────────────

Tu simulador ISF está instalado en:
👉 https://tudominio.com/isf-simulator/

Comparte el link con tus usuarios y empieza a educar
sobre los requisitos ISF 10+2!


📞 SOPORTE
─────────

¿Problemas con la instalación?

Email: soporte@aduanalibre.com
Website: https://aduanalibre.com


═══════════════════════════════════════════════════════════════
© 2024 Aduanalibre.com - Todos los derechos reservados
═══════════════════════════════════════════════════════════════
