<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/faviconereip.png" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />

    <!-- iOS PWA Support -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="apple-mobile-web-app-title" content="Apten Lab" />
    <link rel="apple-touch-icon" href="/faviconereip.png" />

    <!-- Android PWA Support -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="theme-color" content="#3b82f6" />

    <!-- Prevent zoom on input focus -->
    <meta name="format-detection" content="telephone=no" />

    <!-- SEO Meta Tags -->
    <meta
      name="description"
      content="Apten Lab - Plataforma para experimentos de comportamiento humano. Crea y ejecuta experimentos en tiempo real con estímulos visuales y captura de respuestas emocionales y fisiológicas."
    />
    <meta
      name="keywords"
      content="experimentos comportamiento, psicología, investigación, estímulos visuales, respuestas emocionales, biométrica, plataforma experimental"
    />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://apten.io" />
    <meta property="og:title" content="Apten Lab" />
    <meta
      property="og:description"
      content="Plataforma para experimentos de comportamiento humano. Experimentos en tiempo real con captura de respuestas emocionales y fisiológicas."
    />
    <meta property="og:image" content="https://apten.io/faviconereip.png" />
    <meta property="og:site_name" content="Apten Lab" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Apten Lab" />
    <meta
      name="twitter:description"
      content="Plataforma para experimentos de comportamiento humano. Experimentos en tiempo real con captura de respuestas emocionales y fisiológicas."
    />
    <meta name="twitter:image" content="https://apten.io/faviconereip.png" />

    <!-- Content Security Policy (solo desarrollo - producción usa vercel.json) -->
    <!-- En desarrollo, Vite aplica CSP via headers, pero el Service Worker puede necesitar esto -->
    <meta
      http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests; default-src 'self' data: blob: https:; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline' data: blob: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: https:; connect-src 'self' https://analysis.apten.io https://core.apten.io https://staging.analysis.apten.io https://staging.core.apten.io wss://ws.apten.io https://ws.apten.io wss://staging.ws.apten.io https://staging.ws.apten.io wss://*.pusher.com https://*.pusher.com https://s3.eu-central-003.backblazeb2.com https://*.backblazeb2.com https://crpbqtjopivlwqyjvnam.supabase.co https://*.supabase.co wss://*.supabase.co https://fallback.api.apten.io https://staging.fallback.apten.io https://*.sentry.io https://*.ingest.de.sentry.io http://localhost:8000 http://localhost:8001 http://localhost:8002 http://localhost:3001 http://localhost:3002 http://localhost:5000 ws://localhost:3002;"
    />

    <title>APTEN</title>

    <style>
      /* ============================================
         MOBILE VIEWPORT FIX - iOS/Android Safe Areas
         ============================================ */

      /* CSS fallback antes de que JS calcule el viewport real */
      :root {
        --vh: 1vh; /* Será sobrescrito por JavaScript */
        --viewport-height: 100vh; /* Fallback inicial */
      }

      /* Prevent body scroll on mobile */
      body {
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
      }

      /* Mobile viewport fix - Usa calc(var(--vh) * 100) que JS calcula */
      @media screen and (max-width: 768px) {
        html,
        body {
          /* Orden: fallback -> preferido (último gana) */
          height: 100vh; /* Fallback muy viejo */
          height: calc(var(--vh, 1vh) * 100); /* JS calculado - PREFERIDO */
          overflow-x: hidden;
          overflow-y: hidden;
          width: 100%;
          max-width: 100vw;
          position: fixed; /* ✅ CRÍTICO: fixed previene el rebote de Safari */
          top: 0;
          left: 0;
        }

        #root {
          height: 100vh;
          height: calc(var(--vh, 1vh) * 100);
          overflow-y: auto;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          width: 100%;
          max-width: 100vw;
          position: relative;
        }
      }
    </style>

    <!-- ✅ CRÍTICO: Script de viewport ANTES del contenido -->
    <script>
      // Calcula el viewport real considerando la barra de navegación móvil
      function setViewportHeight() {
        // ✅ PREFERIR visualViewport API si está disponible (mejor para móviles)
        // visualViewport.height es el viewport VISIBLE real (excluye barra de navegación y teclado virtual)
        var viewportHeight;

        if (window.visualViewport && window.visualViewport.height) {
          viewportHeight = window.visualViewport.height;
        } else {
          // Fallback a window.innerHeight
          viewportHeight = window.innerHeight;
        }

        var vh = viewportHeight * 0.01;
        document.documentElement.style.setProperty('--vh', vh + 'px');
        document.documentElement.style.setProperty(
          '--viewport-height',
          viewportHeight + 'px'
        );
      }

      // Ejecutar inmediatamente
      setViewportHeight();

      // Re-calcular en resize
      window.addEventListener('resize', setViewportHeight);

      // ✅ CRÍTICO: Usar visualViewport API si está disponible (mejor para móviles)
      // Esto detecta cambios cuando aparece/desaparece el teclado virtual o la barra de navegación
      if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', setViewportHeight);
      }

      // Re-calcular en orientationchange
      window.addEventListener('orientationchange', function () {
        // Delay para que iOS/Android actualicen el viewport
        setTimeout(setViewportHeight, 100);
      });

      // Re-calcular cuando la página se muestra (back/forward cache)
      window.addEventListener('pageshow', setViewportHeight);
    </script>
    <script type="module" crossorigin src="/assets/index-BzACOqrB.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-Gnzq_UKT.js">
    <link rel="stylesheet" crossorigin href="/assets/vendor-jmA84OfZ.css">
    <link rel="stylesheet" crossorigin href="/assets/index-CBmNF9W_.css">
  </head>
  <body>
    <div id="root"></div>
    
    <!-- Fallback por si JavaScript no carga -->
    <div id="js-fallback" style="
      display: none;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
      background: linear-gradient(135deg, #1C1F2A 0%, #151820 100%);
      color: #111827;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    ">
      <div style="
        max-width: 600px;
        width: 100%;
        background: white;
        border-radius: 16px;
        padding: 2.5rem;
        box-shadow: 0 20px 60px rgba(28, 31, 42, 0.4);
        text-align: center;
      ">
        <div style="
          width: 80px;
          height: 80px;
          margin: 0 auto 1.5rem;
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(188, 142, 49, 0.2);
        ">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#bc8e31" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
            <line x1="12" y1="9" x2="12" y2="13"></line>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg>
        </div>
        
        <h1 style="
          font-size: 1.75rem;
          font-weight: 700;
          color: #1C1F2A;
          margin-bottom: 0.75rem;
          line-height: 1.2;
        ">JavaScript requerido</h1>
        
        <p style="
          color: #6b7280;
          margin-bottom: 2rem;
          line-height: 1.6;
          font-size: 1rem;
        ">
          Esta aplicación requiere JavaScript para funcionar. Por favor, habilita JavaScript en tu navegador 
          y recarga la página.
        </p>
        
        <div style="
          background: linear-gradient(135deg, #f0ede6 0%, #e8e5dd 100%);
          border-radius: 12px;
          padding: 1.5rem;
          margin-bottom: 2rem;
          text-align: left;
          border: 1px solid #dad7ce;
        ">
          <p style="
            font-size: 0.9375rem;
            font-weight: 600;
            color: #1C1F2A;
            margin-bottom: 0.75rem;
          ">
            Cómo habilitar JavaScript:
          </p>
          <ul style="
            font-size: 0.9375rem;
            color: #515049;
            margin: 0;
            padding-left: 1.5rem;
            line-height: 1.8;
          ">
            <li><strong>Chrome/Edge:</strong> Configuración → Privacidad → Configuración de sitios → JavaScript</li>
            <li><strong>Firefox:</strong> about:config → javascript.enabled = true</li>
            <li><strong>Safari:</strong> Preferencias → Seguridad → Habilitar JavaScript</li>
          </ul>
        </div>
        
        <button 
          onclick="window.location.reload()" 
          style="
            background: linear-gradient(135deg, #1C1F2A 0%, #151820 100%);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 0.875rem 1.75rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            box-shadow: 0 4px 12px rgba(28, 31, 42, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
          "
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path>
          </svg>
          Recargar página
        </button>
        
        <p style="
          font-size: 0.8125rem;
          color: #8B8880;
          margin-top: 1.5rem;
          line-height: 1.5;
        ">
          <span style="color: #1C1F2A; font-weight: 600;">Apten Lab - Plataforma de experimentos</span>
        </p>
      </div>
    </div>
    
    
    <!-- Ocultar fallback si JS carga correctamente -->
    <script>
      (function() {
        // Si el script llega aquí, JS está funcionando
        var fallback = document.getElementById('js-fallback');
        if (fallback) {
          fallback.style.display = 'none';
        }
        
        // Detectar si estamos en desarrollo con Vite
        // Vite inyecta scripts y variables globales que podemos detectar
        var isViteDev = false;
        if (typeof window !== 'undefined') {
        // Detectar Vite por scripts inyectados o variables globales
        // NOTA: No usar import.meta aquí porque este script no es un módulo ES
        var viteScripts = document.querySelectorAll('script[src*="vite"], script[src*="@vite"]');
        isViteDev = viteScripts.length > 0 || 
                    window.__vite_is_modern_browser !== undefined ||
                    window.__vite_plugin_react_preamble_installed__ !== undefined;
        }
        
        // Verificar después de un tiempo si React se montó
        // En desarrollo con Vite, esperar más tiempo y ser más permisivo
        var checkTimeout = isViteDev ? 8000 : 3000;
        
        setTimeout(function() {
          var root = document.getElementById('root');
          
          // Solo verificar si el root está vacío
          if (root && root.children.length === 0) {
            // En desarrollo con Vite, NO mostrar fallback automáticamente
            // porque el hot reload puede dejar el root vacío temporalmente
            if (isViteDev) {
              // En desarrollo, solo mostrar si realmente no hay nada después de mucho tiempo
              // y si no hay señales de que Vite está activo
              var viteActive = document.querySelector('script[src*="vite"]') || 
                               window.__vite_is_modern_browser !== undefined;
              
              if (!viteActive) {
                // Vite no está activo, puede ser un error real
                var fallback = document.getElementById('js-fallback');
                if (fallback) {
                  fallback.style.display = 'flex';
                }
              }
              // Si Vite está activo, no hacer nada (probablemente hot reload)
            } else {
              // En producción, mostrar fallback si el root está vacío
              var fallback = document.getElementById('js-fallback');
              if (fallback) {
                fallback.style.display = 'flex';
              }
            }
          }
        }, checkTimeout);
      })();
    </script>
  </body>
</html>
