<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Base de Conocimiento - Ticketera M&M</title>
    <link rel="stylesheet" href="../css/ticket.css">
    <link rel="stylesheet" href="../css/base-conocimiento.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
    <div class="dashboard-layout">
        
        <aside class="sidebar">
            <div class="sidebar-header">
                <img src="../assets/logo.png" alt="Logo M&M" class="sidebar-logo">
            </div>
            <nav class="sidebar-nav">
                <p class="nav-title">MENÚ PRINCIPAL</p>
                <a href="mi-resumen.html" class="nav-item">📊 Mi Resumen</a>
                <a href="crear-ticket.html" class="nav-item">➕ Nuevo Ticket</a>
                <a href="historial.html" class="nav-item">📋 Historial de Tickets</a>
                <a href="base-conocimiento.html" class="nav-item active">💡 Base de Conocimiento</a>
            </nav>
        </aside>

        <main class="main-content">
            <header class="top-bar">
                <div class="page-title">
                    <h2>Base de Conocimiento</h2>
                </div>
                <div class="user-info">
                    <span id="nombreUsuario">Cargando...</span>
                    <button id="btnCerrarSesion" class="btn-logout">Cerrar Sesión</button>
                </div>
            </header>

            <div class="content-area">
                <div class="dashboard-wrapper">
                    
                    <div class="kb-header-card">
                        <h3>¿En qué te podemos ayudar hoy?</h3>
                        <p>Busca soluciones rápidas a problemas comunes antes de generar un ticket de soporte.</p>
                        <div class="kb-search-box">
                            <i class="bi bi-search"></i>
                            <input type="text" id="kbBusqueda" placeholder="Ej: ¿Cómo configuro la impresora o restablezco mi contraseña?">
                        </div>
                    </div>

                    <div class="kb-grid" id="kbContenedor">
                        
                        <div class="kb-category">
                            <h4 class="category-title"><i class="bi bi-key-fill"></i> Accesos y Cuentas</h4>
                            
                            <div class="faq-item">
                                <button class="faq-question">¿Cómo restablecer la contraseña del ERP? <i class="bi bi-chevron-down icon-arrow"></i></button>
                                <div class="faq-answer">
                                    <p>Para restablecer su clave del sistema ERP, ingrese a la pantalla principal, haga clic en "Olvidé mi contraseña" e ingrese su correo corporativo. Recibirá un enlace temporal válido por 15 minutos.</p>
                                </div>
                            </div>

                            <div class="faq-item">
                                <button class="faq-question">El sistema dice "Usuario Bloqueado" <i class="bi bi-chevron-down icon-arrow"></i></button>
                                <div class="faq-answer">
                                    <p>El bloqueo automático se activa tras 3 intentos fallidos. Deberá esperar 30 minutos para que el sistema lo libere automáticamente, o crear un ticket de nivel Bajo para un desbloqueo manual.</p>
                                </div>
                            </div>
                        </div>

                        <div class="kb-category">
                            <h4 class="category-title"><i class="bi bi-printer-fill"></i> Hardware y Equipos</h4>
                            
                            <div class="faq-item">
                                <button class="faq-question">La impresora no responde o marca error <i class="bi bi-chevron-down icon-arrow"></i></button>
                                <div class="faq-answer">
                                    <p>1. Verifique que la impresora esté encendida y con papel.<br>
                                       2. Revise si hay algún documento atascado en la cola de impresión (Icono de impresora junto a la hora de Windows).<br>
                                       3. Reinicie la impresora apagándola por 10 segundos.</p>
                                </div>
                            </div>
                        </div>

                        <div class="kb-category">
                            <h4 class="category-title"><i class="bi bi-wifi"></i> Redes y Conectividad</h4>
                            
                            <div class="faq-item">
                                <button class="faq-question">No tengo acceso a Internet (Globo terráqueo) <i class="bi bi-chevron-down icon-arrow"></i></button>
                                <div class="faq-answer">
                                    <p>Asegúrese de que el cable de red (cable azul/gris) esté firmemente conectado tanto a su computadora como a la toma de pared. Si usa Wi-Fi, verifique estar conectado a la red "M&M Corporativo".</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="../js/base-conocimiento.js"></script>
</body>
</html>