<!--
═══════════════════════════════════════════════════════════════════════════════
███████╗██╗   ██╗██╗  ██╗ ██████╗ ███╗   ███╗███████╗██████╗  ██████╗██╗ ██████╗ 
╚══██╔══╝██║   ██║██║ ██╔╝██╔═══██╗████╗ ████║██╔════╝██╔══██╗██╔════╝██║██╔═══██╗
   ██║   ██║   ██║█████╔╝ ██║   ██║██╔████╔██║█████╗  ██████╔╝██║     ██║██║   ██║
   ██║   ██║   ██║██╔═██╗ ██║   ██║██║╚██╔╝██║██╔══╝  ██╔══██╗██║     ██║██║   ██║
   ██║   ╚██████╔╝██║  ██╗╚██████╔╝██║ ╚═╝ ██║███████╗██║  ██║╚██████╗██║╚██████╔╝
   ╚═╝    ╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝╚═╝ ╚═════╝ 
═══════════════════════════════════════════════════════════════════════════════

TUKOMERCIO - Plataforma de Comercio Electrónico, Gamificación y Gestión Empresarial
Anteriormente conocido como: Trayectoria / BizFlow Studio

═══════════════════════════════════════════════════════════════════════════════
AVISO DE PROPIEDAD INTELECTUAL Y DERECHOS DE AUTOR
═══════════════════════════════════════════════════════════════════════════════

© 2024-2026 Carlos Eduardo Huérfano Bermúdez. Todos los derechos reservados.

TITULAR DE DERECHOS:
  Nombre:     Carlos Eduardo Huérfano Bermúdez
  C.C.:       1.064.986.917 (Cereté, Córdoba, Colombia)
  Contacto:   carlos-5100@hotmail.com | +57 322 818 8375
  Ubicación:  Bogotá D.C., Colombia

INFORMACIÓN DEL PROYECTO:
  Nombre:     TuKomercio
  Inicio:     Julio 24, 2024
  Repositorio: github.com/routeres (routeres@gmail.com)

═══════════════════════════════════════════════════════════════════════════════
TÉRMINOS DE USO Y RESTRICCIONES
═══════════════════════════════════════════════════════════════════════════════

Este código fuente es CONFIDENCIAL y constituye un SECRETO COMERCIAL.

QUEDA ESTRICTAMENTE PROHIBIDO sin autorización ESCRITA del titular:

  1. Copiar, reproducir o duplicar este código, total o parcialmente
  2. Modificar, adaptar o crear obras derivadas
  3. Distribuir, publicar, sublicenciar o transferir a terceros
  4. Usar para desarrollo de productos competidores
  5. Realizar ingeniería inversa, descompilar o desensamblar
  6. Remover o alterar este aviso de propiedad intelectual

El acceso a este código NO otorga ninguna licencia implícita o explícita.

═══════════════════════════════════════════════════════════════════════════════
PROTECCIÓN LEGAL
═══════════════════════════════════════════════════════════════════════════════

Este software está protegido por:

  • Ley 23 de 1982 - Derechos de Autor (Colombia)
  • Ley 1915 de 2018 - Modernización Derechos de Autor (Colombia)
  • Decisión Andina 351 de 1993 - Régimen Común sobre Derecho de Autor
  • Convenio de Berna para la Protección de Obras Literarias y Artísticas
  • Tratado OMPI sobre Derecho de Autor (WCT)
  • Acuerdo ADPIC/TRIPS - Organización Mundial del Comercio

SANCIONES POR INFRACCIÓN:
  • Civiles: Indemnización por daños y perjuicios (Art. 57, Ley 23/1982)
  • Penales: Prisión de 4 a 8 años y multa (Art. 271, Código Penal Colombiano)

═══════════════════════════════════════════════════════════════════════════════
JURISDICCIÓN
═══════════════════════════════════════════════════════════════════════════════

Cualquier disputa será resuelta exclusivamente por los tribunales de
Bogotá D.C., Colombia, bajo las leyes de la República de Colombia.

═══════════════════════════════════════════════════════════════════════════════

Para solicitar autorización de uso: carlos-5100@hotmail.com

═══════════════════════════════════════════════════════════════════════════════
-->


<link rel="stylesheet" href="assets/css/notifications.css">
<!DOCTYPE html>
<html lang="es" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=yes">
    <meta name="description" content="tukomercio Studio - Suite empresarial">
    <meta name="theme-color" content="#030712">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <!-- CRITICAL: Prevenir flash del sidebar - debe ir ANTES del CSS -->
    <script>
        (function() {
            var isCollapsed = localStorage.getItem('bf_sidebar_collapsed') === 'true';
            if (isCollapsed && window.innerWidth >= 768) {
                var style = document.createElement('style');
                style.id = 'sidebar-preload';
                style.textContent = '.bf-sidebar{width:0!important;min-width:0!important;overflow:hidden!important;border-right:none!important;visibility:hidden}.bf-sidebar-expand{display:flex!important;align-items:center!important;justify-content:center!important}';
                document.head.appendChild(style);
            }
        })();
    </script>
    
    <title>tukomercio Studio</title>
    
    <link rel="icon" type="image/png" href="assets/img/favicon.png">
    
    <!-- Auth Check -->
    <script>
        (function() {
            const isLoggedIn = localStorage.getItem("isLoggedIn");
            const userData = localStorage.getItem("userData");
            const usuarioId = localStorage.getItem("usuario_id");
            if (isLoggedIn !== "true" || !userData || !usuarioId || usuarioId === "undefined") {
                window.location.replace('login.html');
            }
        })();
    </script>
    
    <!-- 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@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <!-- Styles -->
    <link rel="stylesheet" href="assets/css/BF.css">
    
    <script src="config.js"></script>
    
    <style>
        /* Challenge Nav Item - Estilo especial */
        .bf-nav-item--challenge {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(236, 72, 153, 0.1)) !important;
            border: 1px solid rgba(249, 115, 22, 0.2);
            position: relative;
        }

        .bf-nav-item--challenge:hover {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(236, 72, 153, 0.2)) !important;
            border-color: rgba(249, 115, 22, 0.4);
        }

        .bf-nav-item--challenge .bf-nav-item__icon i {
            color: #f97316 !important;
        }

        /* Badge NEW con animación */
        .bf-nav-badge-new {
            background: linear-gradient(135deg, #f97316, #ec4899);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: auto;
            animation: pulse-badge 2s ease-in-out infinite;
        }

        @keyframes pulse-badge {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }
    </style>
</head>
<body>
    <!-- Overlay for mobile sidebar -->
    <div class="bf-overlay" id="overlay"></div>
    
    <!-- Toast Container -->
    <div class="bf-toast-container" id="toast-container"></div>
    
    <!-- Command Palette -->
    <div class="bf-command-palette" id="command-palette">
        <div class="bf-command-palette__overlay" id="command-overlay"></div>
        <div class="bf-command-palette__modal">
            <div class="bf-command-palette__search">
                <i class="bi bi-search"></i>
                <input type="text" id="command-input" placeholder="Buscar módulo o comando...">
                <kbd>ESC</kbd>
            </div>
            <div class="bf-command-palette__results" id="command-results"></div>
        </div>
    </div>
    
    <!-- ==========================================
         MAIN APP
         ========================================== -->
    <div class="bf-app" id="app">
        
        <!-- HEADER -->
        <header class="bf-header">
            <div class="bf-header__left">
                <!-- Mobile Menu Toggle -->
                <button class="bf-menu-toggle" id="menu-toggle" aria-label="Menú">
                    <i class="bi bi-list"></i>
                </button>
                
                <!-- Logo -->
                <div class="bf-logo">
                    <div class="bf-logo__icon">
                        <img src="assets/img/bizflow-sphere.gif" alt="TuKomercio" style="width: 45px; height: auto;">
                    </div>
                    <span class="bf-logo__text">tukomercio</span>
                </div>
            </div>
            
            <div class="bf-header__center">
                <div class="bf-search-trigger" id="search-trigger">
                    <i class="bi bi-search"></i>
                    <span>Buscar...</span>
                    <kbd>⌘K</kbd>
                </div>
            </div>
            
            <div class="bf-header__right">
                <!-- Admin Button Container -->
                <div id="adminButtonContainer"></div>
                
                <button class="bf-header-btn desktop-only" id="btn-new-tab" title="Nueva pestaña">
                    <i class="bi bi-plus-lg"></i>
                </button>
                
                <button class="bf-header-btn bf-header-btn--primary" id="btn-ai" title="Dora IA">
                    <i class="bi bi-stars"></i>
                </button>
                
                <button class="bf-header-btn desktop-only" id="btn-theme" title="Cambiar tema">
                    <i class="bi bi-moon-stars"></i>
                </button>
                
                <button class="bf-header-btn" id="btn-notifications" title="Notificaciones">
                    <i class="bi bi-bell"></i>
                    <span class="bf-header-btn__badge"></span>
                </button>
            </div>
        </header>
        
        <!-- MAIN AREA -->
        <div class="bf-main">
            
            <!-- ACTIVITY BAR (Desktop only) -->
            <aside class="bf-activity-bar" id="activity-bar">
                <div class="bf-activity-bar__top">
                    <div class="bf-activity-item is-active" data-action="toggle-sidebar" data-tooltip="Toggle Sidebar">
                        <i class="bi bi-layout-sidebar"></i>
                    </div>
                    <div class="bf-activity-item" data-panel="search" data-tooltip="Buscar">
                        <i class="bi bi-search"></i>
                    </div>
                    <div class="bf-activity-item" data-panel="business" data-tooltip="Negocios">
                        <i class="bi bi-building"></i>
                        <span class="bf-activity-item__badge">2</span>
                    </div>
                    <div class="bf-activity-item" data-panel="extensions" data-tooltip="Módulos">
                        <i class="bi bi-puzzle"></i>
                    </div>
                </div>
                <div class="bf-activity-bar__bottom">
                    <div class="bf-activity-item" data-action="ai" data-tooltip="Dora IA">
                        <i class="bi bi-robot"></i>
                    </div>
                    <div class="bf-activity-item" data-panel="settings" data-tooltip="Ajustes">
                        <i class="bi bi-gear"></i>
                    </div>
                </div>
            </aside>
            
            <!-- SIDEBAR -->
            <aside class="bf-sidebar" id="sidebar">
                <div class="bf-sidebar__header">
                    <span class="bf-sidebar__title">Navegación</span>
                    <div class="bf-sidebar__header-actions">
                        <button class="bf-sidebar__collapse desktop-only" id="sidebar-collapse" aria-label="Colapsar" title="Colapsar sidebar">
                            <i class="bi bi-chevron-bar-left"></i>
                        </button>
                        <button class="bf-sidebar__close mobile-only" id="sidebar-close" aria-label="Cerrar">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>
                
                <div class="bf-sidebar__content">
                    <!-- User Profile -->
                    <div class="bf-user-profile">
                        <div class="bf-user-profile__avatar" id="user-avatar">U</div>
                        <div class="bf-user-profile__info">
                            <div class="bf-user-profile__name" id="user-name">Usuario</div>
                            <div class="bf-user-profile__email" id="user-email">correo@ejemplo.com</div>
                        </div>
                    </div>
                    
                    <!-- Workspace -->
                    <div class="bf-workspace">
                        <div class="bf-workspace__label">
                            <i class="bi bi-layers"></i>
                            Espacio de Trabajo
                        </div>
                        <div class="bf-workspace__item">
                            <span class="bf-workspace__icon"><i class="bi bi-building"></i></span>
                            <span class="bf-workspace__text" id="workspace-business">Sin seleccionar</span>
                        </div>
                        <div class="bf-workspace__item">
                            <span class="bf-workspace__icon"><i class="bi bi-geo-alt"></i></span>
                            <span class="bf-workspace__text" id="workspace-branch">-</span>
                        </div>
                        <button class="bf-workspace__btn" data-action="change-workspace">
                            <i class="bi bi-arrow-repeat"></i>
                            Cambiar
                        </button>
                    </div>
                    
                    <!-- Mode Toggle -->
                    <div class="bf-mode-toggle" data-feature="modo_simple">
                        <span class="bf-mode-toggle__label">Modo:</span>
                        <div class="bf-mode-toggle__switch" id="mode-toggle"></div>
                        <span class="bf-mode-toggle__text" id="mode-text">Simple</span>
                    </div>
                    
                    <!-- Navigation -->
                    <nav class="bf-nav">
                        <div class="bf-nav__section">
                            <div class="bf-nav__title">Principal</div>
                        </div>
                        <ul class="bf-nav__list">
                            <li>
                                <a class="bf-nav-item" data-path="modulos_crear_tienda/dashboard.html" data-feature="dashboard">
                                    <span class="bf-nav-item__icon"><i class="bi bi-grid-1x2"></i></span>
                                    <span class="bf-nav-item__text">Mi TrayectorIa</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="modulos_crear_tienda/busqueda_global.html" data-feature="busqueda_global">
                                    <span class="bf-nav-item__icon"><i class="bi bi-search"></i></span>
                                    <span class="bf-nav-item__text">Buscar para mi negocio</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="explorar/feed_videos.html" data-feature="feed_tukeros">
                                    <span class="bf-nav-item__icon"><i class="bi bi-fire" style="color: #f59e0b;"></i></span>
                                    <span class="bf-nav-item__text">Feed Tukeros</span>
                                    <span class="bf-nav-badge-new">NEW</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item bf-nav-item--challenge" data-path="challenge/challenge_landing_v2.html" data-feature="challenges">
                                    <span class="bf-nav-item__icon"><i class="bi bi-trophy-fill" style="color: #f97316;"></i></span>
                                    <span class="bf-nav-item__text">Challenge</span>
                                    <span class="bf-nav-badge-new">🔥</span>
                                </a>
                            </li>
                        </ul>
                        
                        <div class="bf-nav__section">
                            <div class="bf-nav__title">Mi Negocio</div>
                        </div>
                        
                        <ul class="bf-nav__list">
                            <!-- SIN data-feature: siempre visible -->
                            <li>
                                <a class="bf-nav-item" data-path="modulos_crear_tienda/mis_negocios.html">
                                    <span class="bf-nav-item__icon bf-nav-item__icon--blue"><i class="bi bi-buildings"></i></span>
                                    <span class="bf-nav-item__text">Mis Negocios</span>
                                </a>
                            </li>
                            <!-- SIN data-feature: siempre visible -->
                            <li>
                                <a class="bf-nav-item" data-path="modulos_crear_tienda/mis_sucursales.html" data-feature="sucursales">
                                    <span class="bf-nav-item__icon bf-nav-item__icon--green"><i class="bi bi-shop-window"></i></span>
                                    <span class="bf-nav-item__text">Mis Sucursales</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="modulos_crear_tienda/gestion_de_catalogo.html" data-feature="products">
                                    <span class="bf-nav-item__icon bf-nav-item__icon--purple"><i class="bi bi-box-seam"></i></span>
                                    <span class="bf-nav-item__text">Catálogo</span>
                                    <span class="bf-nav-item__tag bf-nav-item__tag--pro">PRO</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="contabilidad/grilla_financiera.html" data-feature="ventas">
                                    <span class="bf-nav-item__icon bf-nav-item__icon--amber"><i class="bi bi-graph-up-arrow"></i></span>
                                    <span class="bf-nav-item__text">Centro Financiero</span>
                                    <span class="bf-nav-item__tag bf-nav-item__tag--live">LIVE</span>
                                </a>
                            </li>
                        </ul>
                        
                        <div class="bf-nav__section">
                            <div class="bf-nav__title">Operaciones</div>
                        </div>
                        <ul class="bf-nav__list">
                            <li>
                                <a class="bf-nav-item" data-path="bancos/bancos_main.html" data-feature="cartera">
                                    <span class="bf-nav-item__icon"><i class="bi bi-bank2"></i></span>
                                    <span class="bf-nav-item__text">Bancos y Pagos</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="servicios/servicios_main.html" data-feature="servicios">
                                    <span class="bf-nav-item__icon"><i class="bi bi-tools"></i></span>
                                    <span class="bf-nav-item__text">Servicios</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="publicar/publicar_anuncio.html" data-feature="publicar">
                                    <span class="bf-nav-item__icon"><i class="bi bi-megaphone"></i></span>
                                    <span class="bf-nav-item__text">Publicar</span>
                                </a>
                            </li>
                        </ul>
                        
                        <div class="bf-nav__section">
                            <div class="bf-nav__title">Herramientas</div>
                        </div>
                        <ul class="bf-nav__list">
                            <li>
                                <a class="bf-nav-item" data-path="modulos_crear_tienda/mi_pagina_web.html" data-feature="store_designer">
                                    <span class="bf-nav-item__icon"><i class="bi bi-globe2"></i></span>
                                    <span class="bf-nav-item__text">Mi Página Web</span>
                                </a>
                            </li>
                            
                            <li>
                                <a class="bf-nav-item" data-path="mensajes/mensajes_main.html" data-feature="mensajes">
                                    <span class="bf-nav-item__icon"><i class="bi bi-chat-dots"></i></span>
                                    <span class="bf-nav-item__text">Mensajes</span>
                                    <span class="bf-nav-item__badge">5</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="portafolio/mi_portafolio.html" data-feature="portafolio">
                                    <span class="bf-nav-item__icon"><i class="bi bi-folder2-open"></i></span>
                                    <span class="bf-nav-item__text">Mi Portafolio</span>
                                </a>
                            </li>
                        </ul>
                        
                        <div class="bf-nav__section">
                            <div class="bf-nav__title">Inteligencia</div>
                        </div>
                        <ul class="bf-nav__list">
                            <li>
                                <a class="bf-nav-item" data-path="ia/ia_trayectoria.html" data-feature="analytics">
                                    <span class="bf-nav-item__icon bf-nav-item__icon--ai"><i class="bi bi-stars"></i></span>
                                    <span class="bf-nav-item__text">IA Trayectoria</span>
                                    <span class="bf-nav-item__tag bf-nav-item__tag--ai">AI</span>
                                </a>
                            </li>
                            <li>
                                <a class="bf-nav-item" data-path="dashboard/dashboard_personal.html" data-feature="dashboard_personal">
                                    <span class="bf-nav-item__icon"><i class="bi bi-speedometer2"></i></span>
                                    <span class="bf-nav-item__text">Analíticas</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                
                <!-- SIN data-feature: siempre visible -->
                <div class="bf-sidebar__footer">
                    <button class="bf-logout-btn" id="btn-logout">
                        <i class="bi bi-box-arrow-left"></i>
                        <span>Cerrar Sesión</span>
                    </button>
                    <div class="bf-version">
                        <span>tukomercio Studio</span>
                        <span>v5.2</span>
                    </div>
                </div>
            </aside>
            
            <!-- Botón flotante para expandir sidebar -->
            <button class="bf-sidebar-expand" id="sidebar-expand-btn" title="Expandir menú">
                <i class="bi bi-chevron-bar-right"></i>
            </button>
            
            <!-- EDITOR AREA -->
            <div class="bf-editor">
                <!-- Tabs -->
                <div class="bf-tabs" id="tabs">
                    <div class="bf-tabs__list" id="tabs-list"></div>
                    <div class="bf-tabs__actions">
                        <button class="bf-btn bf-btn--ghost bf-btn--icon desktop-only" title="Dividir">
                            <i class="bi bi-layout-split"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="bf-editor__content" id="editor-content">
                    <!-- Welcome Screen -->
                    <div class="bf-welcome" id="welcome-screen">
                        <div class="bf-welcome__icon">
                            <img src="assets/img/bizflow-sphere.gif" alt="TuKomercio" style="width: 150px; height: auto;">
                        </div>
                        <h1 class="bf-welcome__title">
                            Bienvenido a <span>tukomercio studio</span>
                        </h1>
                        <p class="bf-welcome__subtitle">
                            Tu centro de comando empresarial. Gestiona todo tu negocio desde un solo lugar.
                        </p>
                        <div class="bf-welcome__actions">
                            <button class="bf-welcome__action" data-path="modulos_crear_tienda/mis_negocios.html" data-title="Mis Negocios">
                                <div class="bf-welcome__action-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
                                    <i class="bi bi-buildings"></i>
                                </div>
                                <div class="bf-welcome__action-info">
                                    <div class="bf-welcome__action-title">Mis Negocios</div>
                                    <div class="bf-welcome__action-desc">Gestionar empresas</div>
                                </div>
                            </button>
                            <button class="bf-welcome__action" data-path="contabilidad/grilla_financiera.html" data-title="Centro Financiero">
                                <div class="bf-welcome__action-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">
                                    <i class="bi bi-graph-up-arrow"></i>
                                </div>
                                <div class="bf-welcome__action-info">
                                    <div class="bf-welcome__action-title">Centro Financiero</div>
                                    <div class="bf-welcome__action-desc">Ventas e ingresos</div>
                                </div>
                            </button>
                            <button class="bf-welcome__action" data-path="modulos_crear_tienda/gestion_de_catalogo.html" data-title="Catálogo" data-feature="products">

                                <div class="bf-welcome__action-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
                                    <i class="bi bi-box-seam"></i>
                                </div>
                                <div class="bf-welcome__action-info">
                                    <div class="bf-welcome__action-title">Catálogo</div>
                                    <div class="bf-welcome__action-desc">Productos y servicios</div>
                                </div>
                            </button>
                            <button class="bf-welcome__action" data-path="modulos_crear_tienda/mi_pagina_web.html" data-title="Mi Tienda">
                                <div class="bf-welcome__action-icon" style="background: linear-gradient(135deg, #22c55e, #16a34a);">
                                    <i class="bi bi-globe2"></i>
                                </div>
                                <div class="bf-welcome__action-info">
                                    <div class="bf-welcome__action-title">Mi Tienda</div>
                                    <div class="bf-welcome__action-desc">Editar sitio web</div>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- STATUS BAR -->
        <footer class="bf-statusbar">
            <div class="bf-statusbar__left">
                <div class="bf-statusbar__item bf-statusbar__item--accent" id="status-branch">
                    <i class="bi bi-geo-alt-fill"></i>
                    <span>Sin sucursal</span>
                </div>
                <div class="bf-statusbar__item bf-statusbar__item--hideable">
                    <i class="bi bi-cloud-check"></i>
                    <span>Sync</span>
                </div>
            </div>
            <div class="bf-statusbar__right">
                <div class="bf-statusbar__item bf-statusbar__item--hideable" id="status-user">
                    <i class="bi bi-person"></i>
                    <span>Usuario</span>
                </div>
                <div class="bf-statusbar__item" id="status-mode">
                    <i class="bi bi-layout-sidebar"></i>
                    <span>Simple</span>
                </div>
                <div class="bf-statusbar__item" id="status-time">
                    <i class="bi bi-clock"></i>
                    <span>--:--</span>
                </div>
            </div>
        </footer>
    </div>
    
    <!-- Remover estilo de preload después de que JS tome control -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var preloadStyle = document.getElementById('sidebar-preload');
            if (preloadStyle) {
                setTimeout(function() {
                    preloadStyle.remove();
                }, 50);
            }
        });
    </script>
    <script src="assets/js/Bf.js"></script>
    <script src="assets/js/login_y_logout.js"></script>
    <script src="assets/js/BizContext.js"></script>
    <script src="assets/js/notifications.js"></script>
    <script src="assets/js/featureGate.js"></script>
    
    <!-- Admin Button Detector (inline para evitar error MIME) -->
    <script>
    (function() {
        'use strict';

        const ADMIN_API_URL = 'https://trayectoria-backend.onrender.com/api/admin/check';
        const ADMIN_PANEL_URL = 'admin/panel/admin.html';

        async function checkIfAdmin() {
            try {
                const response = await fetch(ADMIN_API_URL, {
                    method: 'GET',
                    credentials: 'include', // ← CRÍTICO: envía cookies de sesión
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                if (!response.ok) return { is_admin: false };
                return await response.json();
            } catch (error) {
                console.log('Admin check:', error.message);
                return { is_admin: false };
            }
        }

        function createAdminButton(adminData) {
            const button = document.createElement('a');
            button.href = ADMIN_PANEL_URL;
            button.id = 'adminNavButton';
            button.className = 'bf-header-btn';
            button.title = 'Panel de Admin - ' + (adminData.admin?.rol || 'admin');
            button.innerHTML = '<i class="bi bi-gear-fill"></i>';
            button.style.cssText = 'background: linear-gradient(135deg, #a855f7, #ec4899); color: white; border-radius: 8px;';
            
            button.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
                this.style.boxShadow = '0 4px 15px rgba(168, 85, 247, 0.4)';
            });
            button.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = 'none';
            });
            
            return button;
        }

        function insertAdminButton(button) {
            const container = document.getElementById('adminButtonContainer');
            if (container) {
                container.appendChild(button);
                return true;
            }
            return false;
        }

        async function init() {
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', init);
                return;
            }
            if (document.getElementById('adminNavButton')) return;

            const result = await checkIfAdmin();
            if (result.is_admin) {
                console.log('🔐 Admin detectado:', result.admin?.email);
                const button = createAdminButton(result);
                insertAdminButton(button);
            }
        }

        init();
    })();
    </script>
</body>
</html>