<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <script>
      (function() {
        // Solo aplicar el tema si hay una preferencia EXPLÍCITA guardada por el usuario
        // NO usar la preferencia del sistema para evitar flash cuando el usuario tiene otro tema en Firestore
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
          document.documentElement.classList.add('dark');
        } else if (savedTheme === 'light') {
          document.documentElement.classList.remove('dark');
        }
        // Si no hay savedTheme, dejar en modo claro por defecto (sin clase 'dark')
      })();
    </script>

    <style>
      /* --- ESTILOS BASE --- */
      /* IMPORTANTE: Poner el color de fondo en HTML también, no solo en BODY */
      html {
        background-color: #f9fafb;
        /* Soporte estándar (Firefox) */
        scrollbar-width: thin;
        scrollbar-color: #cccccc transparent;
      }
      
      body {
        margin: 0;
        min-height: 100vh;
      }

      /* --- MODO OSCURO --- */
      html.dark {
        background-color: #0f0f0f; /* Esto evita que se vean bordes blancos */
        /* Soporte estándar (Firefox) Dark */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
      }

      html.dark body {
        background-color: #0f0f0f;
      }

      #root {
        min-height: 100vh;
      }

      /* --- SCROLLBAR PERSONALIZADO (Chrome, Edge, Safari) --- */

      /* 1. MODO CLARO (Por defecto) */
      ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
      }
      ::-webkit-scrollbar-track {
        background: transparent !important;
      }
      ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2) !important;
        border-radius: 3px !important;
      }
      ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.3) !important;
      }

      /* 2. MODO OSCURO - Track transparente (el fondo negro viene del html.dark) */
      .dark ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
      }
      
      .dark ::-webkit-scrollbar-track {
        background: transparent !important;
      }
      
      .dark ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 3px !important;
      }
      
      .dark ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
      }

      /* Ocultar botones de flecha */
      ::-webkit-scrollbar-button {
        display: none;
      }
    </style>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <title>Wintrack</title>
    <link rel="icon" type="image/png" href="/logo-wintrack-circulo.png" />
    <script type="module" crossorigin src="/assets/index-C5hAcjG5.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CAT0pwwN.css">
  </head>
  <body>
    <div id="root"></div>
    <div id="modal-root"></div>
  </body>
</html>
