<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Sistema Profesional de Helpdesk y Órdenes de Servicio - Acamaro Technology Solutions">
    <meta name="theme-color" content="#FF6B35">

    <title>Helpdesk Acamaro - Sistema de Gestión</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png">
    
    <!-- Fonts -->
    <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@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- EmailJS -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    
    <!-- Styles -->
    <link rel="stylesheet" href="/mobile-optimizations.css">  
    <link rel="stylesheet" href="/citas-mobile-fix.css">
    <!-- NUEVO: Sidebar CSS -->
    <!-- NUEVO: Entregas CSS -->
    <link rel="stylesheet" href="/src/assets/styles/entregas.css">
    
  <!-- PWA Tags -->
<link rel="manifest" href="/manifest.json">
<meta name="mobile-web-app-capable" content="yes">

<!-- iOS Meta Tags -->
<link rel="apple-touch-icon" href="/assets/icon-192-COYFzgwF.png">
<link rel="apple-touch-icon" sizes="512x512" href="/assets/icon-512-DFr1xJLZ.png">
<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="Helpdesk Acamaro">

<!-- Optimización móvil -->
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
  <script type="module" crossorigin src="/assets/index-B7zQ6kXm.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-BuJ6dj3C.css">
</head>
<body>
    <!-- Loading Screen -->
    <div id="loading-screen" class="loading-screen">
        <div class="loading-content">
            <div class="loading-logo">
                <h1>ACAMARO</h1>
                <p>Technology Solutions</p>
            </div>
            <div class="loading-spinner"></div>
            <p class="loading-text">Cargando sistema...</p>
        </div>
    </div>

    <!-- App Container -->
    <div id="app" style="display: none;">
        
        <!-- ===================================
             HEADER SUPERIOR - CENTRADO
             =================================== -->
        <header class="top-header" id="top-header" style="display: none;">
            <div class="header-brand">
                <h1>HELPDESK ACAMARO</h1>
                <span class="subtitle">Technology Solutions</span>
            </div>
        </header>

        <!-- ===================================
             SIDEBAR LATERAL IZQUIERDO
             =================================== -->
        <aside id="sidebar" class="sidebar" style="display: none;">
            <!-- Menú de Navegación -->
            <nav class="sidebar-menu">
                <a href="#" data-page="dashboard" class="sidebar-link active" id="dashboard-link">
                    <span class="icon">📊</span>
                    <span>Dashboard</span>
                </a>
                <a href="#" data-page="tickets" class="sidebar-link" id="tickets-link">
                    <span class="icon">🎫</span>
                    <span>Tickets</span>
                </a>
                <a href="#" data-page="ordenes" class="sidebar-link" id="ordenes-link">
                    <span class="icon">📋</span>
                    <span>Órdenes</span>
                </a>
                <a href="#" data-page="citas" class="sidebar-link" id="citas-link">
                    <span class="icon">📅</span>
                    <span>Citas</span>
                </a>
                
                <!-- ENTREGAS -->
                <a href="#" data-page="entregas" class="sidebar-link" id="entregas-link">
                    <span class="icon">📦</span>
                    <span>Entregas</span>
                </a>
                <!-- CLIENTES -->
                  <a href="#" data-page="clientes" class="sidebar-link" id="clientes-link">
  <span class="icon">👥</span>
  <span>Clientes</span>
                 </a>
                
                <!-- NUEVAS OPCIONES -->
                <a href="#" data-page="ticket-publico" class="sidebar-link" id="ticket-publico-link">
                    <span class="icon">🎫</span>
                    <span>Ticket sin Cuenta</span>
                </a>
                <a href="#" data-page="registro-usuarios" class="sidebar-link" id="registro-usuarios-link" style="display: none;">
                    <span class="icon">👥</span>
                    <span>Registrar Usuario</span>
                </a>
            </nav>

            <!-- Usuario y Logout (Abajo) -->
            <div class="sidebar-footer">
                <div class="sidebar-user">
                    <div class="user-avatar" id="user-avatar">A</div>
                    <div class="user-info">
                        <span class="user-name" id="user-name">Usuario</span>
                        <span class="user-role" id="user-role">Admin</span>
                    </div>
                </div>
                <button id="logout-btn" class="btn-logout">
                    <span class="icon">🚪</span>
                    <span>Cerrar Sesión</span>
                </button>
            </div>
        </aside>

        <!-- Botón Toggle Sidebar -->
        <button id="sidebar-toggle" class="sidebar-toggle" style="display: none;">
            ◀
        </button>

        <!-- ===================================
             CONTENIDO PRINCIPAL
             =================================== -->
        <main id="main-content" class="main-content">
            <!-- El contenido se cargará dinámicamente aquí -->
        </main>
    </div>

    <!-- Toast Notifications -->
    <div id="toast-container" class="toast-container"></div>
    <div id="modal-detalle-ticket" class="modal-overlay" style="display: none;"></div>
    
    <!-- Scripts -->
    
    <!-- Script Toggle Sidebar -->
    <script>
        // Toggle Sidebar
        document.addEventListener('DOMContentLoaded', () => {
            const toggleBtn = document.getElementById('sidebar-toggle');
            const sidebar = document.getElementById('sidebar');
            
            if (toggleBtn && sidebar) {
                toggleBtn.addEventListener('click', () => {
                    sidebar.classList.toggle('collapsed');
                });
            }

            // Mobile: Cerrar sidebar al hacer click en link
            const isMobile = window.innerWidth <= 768;
            if (isMobile) {
                document.querySelectorAll('.sidebar-link').forEach(link => {
                    link.addEventListener('click', () => {
                        sidebar.classList.remove('mobile-open');
                    });
                });
                
                // Abrir sidebar con el toggle en móvil
                if (toggleBtn) {
                    toggleBtn.addEventListener('click', () => {
                        if (isMobile) {
                            sidebar.classList.toggle('mobile-open');
                        }
                    });
                }
            }
        });
    </script>
    <!-- Service Worker Registration -->
    <script>
        // Registrar Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/service-worker.js')
                    .then((registration) => {
                        console.log('✅ Service Worker registrado:', registration.scope);
                        
                        // Verificar actualizaciones cada hora
                        setInterval(() => {
                            registration.update();
                        }, 60 * 60 * 1000);
                    })
                    .catch((error) => {
                        console.error('❌ Error al registrar Service Worker:', error);
                    });
            });
        }

        // Detectar cuando vuelve la conexión
        window.addEventListener('online', () => {
            console.log('🟢 Conexión restaurada');
            
            // Mostrar notificación
            const toast = document.createElement('div');
            toast.className = 'toast toast-success';
            toast.textContent = '✅ Conexión restaurada - Sincronizando datos...';
            document.getElementById('toast-container')?.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
            
            // Sincronizar datos pendientes
            if ('serviceWorker' in navigator && 'SyncManager' in window) {
                navigator.serviceWorker.ready.then((registration) => {
                    return registration.sync.register('sync-tickets');
                });
            }
        });

        window.addEventListener('offline', () => {
            console.log('🔴 Sin conexión - Modo offline activado');
            
            // Mostrar notificación
            const toast = document.createElement('div');
            toast.className = 'toast toast-warning';
            toast.textContent = '⚠️ Sin conexión - Trabajando en modo offline';
            document.getElementById('toast-container')?.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        });
    </script>
</body>
</body>
</html>
