<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />

    <script>
      (function() {
        var host = window.location.hostname;
        var isLocalDevHost = host === 'localhost' || host === '127.0.0.1';
        var reloadFlag = '__ms_local_sw_reset__';

        window.__MS_IS_LOCAL_DEV__ = isLocalDevHost;

        if (!isLocalDevHost || !('serviceWorker' in navigator)) {
          return;
        }

        if (sessionStorage.getItem(reloadFlag) === 'done') {
          sessionStorage.removeItem(reloadFlag);
          return;
        }

        sessionStorage.setItem(reloadFlag, 'pending');

        var cleanupPromise = navigator.serviceWorker.getRegistrations()
          .then(function(registrations) {
            return Promise.all(registrations.map(function(registration) {
              return registration.unregister();
            }));
          })
          .then(function() {
            if (!('caches' in window)) return;
            return caches.keys().then(function(cacheNames) {
              return Promise.all(cacheNames.map(function(cacheName) {
                return caches.delete(cacheName);
              }));
            });
          })
          .catch(function() {
            return undefined;
          });

        document.addEventListener('DOMContentLoaded', function() {
          cleanupPromise.finally(function() {
            if (sessionStorage.getItem(reloadFlag) !== 'pending') {
              return;
            }

            sessionStorage.setItem(reloadFlag, 'done');
            window.location.reload();
          });
        }, { once: true });
      })();
    </script>

    
    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#0B8A37" />
    <meta name="background-color" content="#ffffff" />
    <meta name="display" content="standalone" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="MegaSeller POS" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Sistema de Punto de Venta profesional con soporte offline completo. Gestiona ventas, inventario y reportes desde cualquier dispositivo." />
    <meta name="keywords" content="pos, punto de venta, inventario, ventas, offline, pwa" />
    <meta name="author" content="MegaSeller" />
    
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/icons/ms-192.png" />
    
    <!-- Manifest -->
    <script>
      (function() {
        if (window.__MS_IS_LOCAL_DEV__) {
          return;
        }

        var manifestLink = document.createElement('link');
        manifestLink.rel = 'manifest';
        manifestLink.href = '/manifest.json';
        document.head.appendChild(manifestLink);
      })();
    </script>
    
    <!-- OPTIMIZACIÓN FASE 2A: Prefetch y preconnect de recursos críticos -->
    <link rel="preconnect" href="https://images.megaseller.net" crossorigin />
    <link rel="dns-prefetch" href="https://images.megaseller.net" />
    <link rel="preconnect" href="https://d31f1ehqijlcua.cloudfront.net" crossorigin />
    <link rel="dns-prefetch" href="https://d31f1ehqijlcua.cloudfront.net" />
    
  <!-- Preconnect para mejorar FCP (solo orígenes realmente usados en first paint) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
  <!-- Fuentes M3 Expressive: Plus Jakarta Sans (Display) + Inter (Body) -->
  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap">
  </noscript>

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="MegaSeller POS" />
    <meta property="og:description" content="Sistema de Punto de Venta profesional con soporte offline completo" />
    <meta property="og:image" content="/newlogo/msp.png" />
    <meta property="og:type" content="website" />
    
    <title>MegaSeller POS - Sistema de Punto de Venta</title>
    
    <!-- Theme initialization (prevent flash) -->
    <script>
      (function() {
        var THEME_KEY = 'megaseller-theme';
        var THEMES = ['verde', 'claro', 'oscuro'];
        var stored = null;
        try { stored = localStorage.getItem(THEME_KEY); } catch(e) {}
        var theme = (stored && THEMES.indexOf(stored) !== -1) ? stored
          : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'oscuro'
          : 'verde';
        document.documentElement.setAttribute('data-theme', theme);
      })();
    </script>
    
    <style>
      /* Loading styles - theme aware */
      :root[data-theme="verde"] .loading-screen { background: #0B8A37; }
      :root[data-theme="claro"] .loading-screen { background: #2BB673; }
      :root[data-theme="oscuro"] .loading-screen { background: #0E1513; }
      .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0B8A37; /* fallback */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.3s ease;
      }
      .loading-logo {
        width: 80px;
        height: 80px;
        animation: pulse 1.5s ease-in-out infinite;
      }
      @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.8; }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-BR-9SX77.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-react-CeuCJ7Iv.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-BZqnLU33.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-export-pdf-CBYms1Pj.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-mui-slrub_kg.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-state-DCwYlEAy.js">
    <link rel="modulepreload" crossorigin href="/assets/storefront-public-FTp_L6sx.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-feedback-qH_Ct7BT.js">
    <link rel="stylesheet" crossorigin href="/assets/index-Duhrr8AF.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>
  <body>
    <!-- Loading Screen -->
    <div id="loading-screen" class="loading-screen">
      <picture>
        <source type="image/avif" srcset="/logo/ms-64.avif 64w, /logo/ms-80.avif 80w, /logo/ms-96.avif 96w, /logo/ms-128.avif 128w" sizes="80px" />
        <source type="image/webp" srcset="/logo/ms-64.webp 64w, /logo/ms-80.webp 80w, /logo/ms-96.webp 96w, /logo/ms-128.webp 128w" sizes="80px" />
        <img src="/logo/ms-80.png" alt="MegaSeller" class="loading-logo" width="80" height="80" decoding="async" loading="eager" fetchpriority="high" />
      </picture>
    </div>
    
    <div id="root"></div>
    
    <script>
      // Quitar overlay lo antes posible; fallback duro a 6s
      window.addEventListener('load', () => {
        const loadingScreen = document.getElementById('loading-screen');
        if (loadingScreen) { loadingScreen.style.opacity = '0'; setTimeout(() => loadingScreen.remove(), 300); }
      });
      setTimeout(() => {
        const loadingScreen = document.getElementById('loading-screen');
        if (loadingScreen) { loadingScreen.style.opacity = '0'; setTimeout(() => loadingScreen.remove(), 300); }
      }, 6000);

      // Dinamic theme-color sync con variable CSS del tema actual
      (function(){
        function applyThemeColor(){
          try {
            const root = document.documentElement;
            // Variable principal (verde) declarada en themes.css
            const primary = getComputedStyle(root).getPropertyValue('--md-sys-color-primary').trim();
            if(!primary) return;
            let meta = document.querySelector('meta[name="theme-color"]');
            if(!meta){
              meta = document.createElement('meta');
              meta.name = 'theme-color';
              document.head.appendChild(meta);
            }
            if(meta.content !== primary){
              meta.setAttribute('content', primary);
            }
          } catch (e){ /* noop */ }
        }
        // Primera aplicación
        applyThemeColor();
        // Observa cambios de atributo data-theme en <html>
        const obs = new MutationObserver(muts => {
          for(const m of muts){
            if(m.attributeName === 'data-theme'){ applyThemeColor(); break; }
          }
        });
        obs.observe(document.documentElement, { attributes:true });
        // Reaplicar tras eventos de visibilidad (por si hot reload / reinyecciones)
        document.addEventListener('visibilitychange', () => { if(!document.hidden) applyThemeColor(); });
      })();
      
      // PWA install prompt handling (permitir mini-infobar nativa y registrar métricas simples)
      window.addEventListener('beforeinstallprompt', (e) => {
        // YA NO llamamos preventDefault para permitir el prompt automático del navegador.
        window.deferredPrompt = e; // Conservamos referencia por si queremos dispararlo manualmente luego.
      });
      window.addEventListener('appinstalled', () => {
        try { localStorage.setItem('pwa.installedAt', Date.now().toString()); } catch {}
      });

      // Cuando React pinta el primer frame, removemos el overlay
      document.addEventListener('app:mounted', () => {
        const el = document.getElementById('loading-screen');
        if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 150); }
      });
    </script>
  </body>
</html>
