<?php
session_start();

// Manejo de peticiones AJAX para carga dinámica de productos
if (isset($_GET['ajax']) && $_GET['ajax'] == '1') {
    header('Content-Type: application/json');
    
    try {
        require_once 'config.php';
        
        // Log para debugging
        error_log("AJAX Request - Offset: " . ($_GET['offset'] ?? 0) . ", Limit: " . ($_GET['limit'] ?? 12));
        
        $offset = (int)($_GET['offset'] ?? 0);
        $limit = min(20, (int)($_GET['limit'] ?? 12)); // Máximo 20 productos por petición
        
        // Aplicar filtros de la página actual
        $subseccion_id = $_GET['subseccion'] ?? null;
        $marca_id = $_GET['marca'] ?? null;
        $search = $_GET['search'] ?? null;
        
        // Construir query con los mismos filtros que la página principal
        $sql = "SELECT p.*, m.nombre as marca_nombre 
                FROM productos p 
                LEFT JOIN marcas m ON p.id_marca = m.id 
                LEFT JOIN secciones s ON p.id_seccion = s.id
                LEFT JOIN subsecciones ss ON p.id_subseccion = ss.id
                WHERE 1=1";
        
        $params = [];
        
        // Aplicar filtros
        if ($subseccion_id) {
            $sql .= " AND p.id_subseccion = ?";
            $params[] = $subseccion_id;
        }
        
        if ($marca_id) {
            $sql .= " AND p.id_marca = ?";
            $params[] = $marca_id;
        }
        
        if ($search) {
            $sql .= " AND (p.titulo LIKE ? OR p.descripcion LIKE ? OR p.codigo LIKE ?)";
            $search_param = '%' . $search . '%';
            $params[] = $search_param;
            $params[] = $search_param;
            $params[] = $search_param;
        }
        
        // Solo productos activos
        $sql .= " AND p.activo = 1";
        
        // Ordenamiento
        $sql .= " ORDER BY 
                  CASE WHEN ss.es_destacado = 1 THEN 0 ELSE 1 END,
                  s.nombre,
                  ss.nombre,
                  p.titulo
                  LIMIT ? OFFSET ?";
        
        $params[] = $limit;
        $params[] = $offset;
        
        $stmt = $db->prepare($sql);
        $stmt->execute($params);
        $productos = $stmt->fetchAll();
        
        // Formatear productos para JSON
        $productos_formatted = [];
        $timestamp = time();
        
        // Asegurar que $config esté disponible
        if (!isset($config)) {
            $config = [];
            $config_query = $db->query("SELECT clave, valor FROM configuracion");
            while ($row = $config_query->fetch()) {
                $config[$row['clave']] = $row['valor'];
            }
        }
        
        foreach ($productos as $producto) {
            $imagenes = json_decode($producto['imagenes'], true);
            
            if (!empty($imagenes)) {
                $primera_imagen = $imagenes[0];
                $ruta_imagen = "uploads/productos/" . htmlspecialchars($primera_imagen) . "?v=" . $timestamp;
            } else {
                $primera_imagen = $config['logo'] ?? 'default-logo.png';
                $ruta_imagen = "uploads/config/" . htmlspecialchars($primera_imagen) . "?v=" . $timestamp;
            }
            
            $productos_formatted[] = [
                'id' => $producto['id'],
                'titulo' => $producto['titulo'],
                'descripcion' => $producto['descripcion'],
                'precio_venta1' => $producto['precio_venta1'],
                'precio_venta2' => $producto['precio_venta2'],
                'precio_venta3' => $producto['precio_venta3'],
                'oferta' => $producto['oferta'],
                'visible' => $producto['visible'],
                'imagen' => $ruta_imagen,
                'marca_nombre' => $producto['marca_nombre']
            ];
        }
        
        echo json_encode([
            'success' => true,
            'products' => $productos_formatted,
            'count' => count($productos_formatted),
            'offset' => $offset,
            'limit' => $limit
        ]);
        
    } catch (Exception $e) {
        echo json_encode([
            'success' => false,
            'error' => 'Error al cargar productos: ' . $e->getMessage()
        ]);
    }
    
    exit;
}

// Verificar el rol del usuario
$es_registrador = false;
if (isset($_SESSION['rol']) && $_SESSION['rol'] === 'registrador_de_productos') {
    $es_registrador = true;
}

// Verificar si el usuario está autenticado (vendedor o admin)
$usuario_autenticado = isset($_SESSION['usuario_id']) && !empty($_SESSION['usuario_id']);


// Limpiar datos de cliente si no viene de seguir_vendiendo
if (!isset($_POST['seguir_vendiendo'])) {
    // Variables específicas de cliente y venta
    $vars_to_unset = [
        'cliente_temp_id',
        'venta_actual_id',
        'cliente_actual',
        'venta_activa',
        'ultimo_cliente',
        'cliente_seleccionado',
        'venta_en_curso'
    ];

    foreach ($vars_to_unset as $var) {
        if (isset($_SESSION[$var])) {
            unset($_SESSION[$var]);
        }
    }

    // Script para limpiar storage
    echo "<script>
        sessionStorage.clear();
        localStorage.clear();
    </script>";
}

// Agregar manejo de mensajes después del session_start()
if (isset($_GET['mensaje']) && $_GET['mensaje'] === 'venta_cancelada') {
    echo "<script>
        window.addEventListener('DOMContentLoaded', () => {
            Swal.fire({
                icon: 'success',
                title: 'Venta Cancelada',
                text: 'La venta ha sido cancelada correctamente',
                timer: 2000,
                showConfirmButton: false
            });
        });
    </script>";
}

// Agregar el require_once de Database
require_once 'includes/db.php';

// Verificar si hay una venta activa y si está en curso
if (isset($_SESSION['venta_activa'])) {
    $db = new Database();
    $pdo = $db->getPDO();
    
    // Usar operador de fusión null para evitar Undefined array key "grupo_id"
    $grupo_id = $_SESSION['venta_activa']['grupo_id'] ?? null;
    
    // Solo ejecutar la consulta si hay un grupo_id
    if ($grupo_id) {
        $stmt = $pdo->prepare("SELECT estado FROM venta_items WHERE grupo_id = ? LIMIT 1");
        $stmt->execute([$grupo_id]);
        $estado = $stmt->fetchColumn();
        
        if ($estado !== 'EN_CURSO') {
            // Limpiar todos los datos relacionados con la venta anterior
            unset($_SESSION['venta_activa']);
            unset($_SESSION['cliente_id']);
            unset($_SESSION['cliente_nombre']);
            
            // Limpiar almacenamiento del navegador
            echo "<script>
                sessionStorage.clear();
                localStorage.removeItem('ultimo_cliente');
                if (typeof limpiarDatosVentaActual === 'function') {
                    limpiarDatosVentaActual();
                }
            </script>";
        }
    } else {
        // No hay grupo_id, lo que indica una estructura de sesión incompleta
        // Registrar en log si existe el directorio de logs
        if (file_exists('c:/xampp/htdocs/jk/logs')) {
            $debug_info = "Venta activa sin grupo_id en index.php: " . print_r($_SESSION['venta_activa'], true);
            file_put_contents('c:/xampp/htdocs/jk/logs/debug.log', date('Y-m-d H:i:s') . ': ' . $debug_info . PHP_EOL, FILE_APPEND);
        }
    }
}

// Verificar si hay una venta en curso (modificar la consulta)
$venta_en_curso = null;
if (isset($_SESSION['usuario_id'])) {
    $db = new Database();
    $stmt = $db->getPDO()->prepare("
        SELECT vi.*, 
               CONCAT(c.nombre, ' ', COALESCE(c.apellidos, '')) as cliente_nombre,
               vi.id as venta_id 
        FROM venta_items vi 
        LEFT JOIN clientes c ON vi.cliente_id = c.id_cliente
        WHERE vi.estado = 'EN_CURSO' 
        AND vi.vendedor_id = ? 
        ORDER BY vi.created_at DESC 
        LIMIT 1
    ");
    $stmt->execute([$_SESSION['usuario_id']]);
    $venta_en_curso = $stmt->fetch(PDO::FETCH_ASSOC);
}

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// Implementar patrón PRG (Post/Redirect/Get)
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['desde_venta'])) {
    $_SESSION['venta_activa'] = [
        'grupo_id' => $_POST['grupo_id'],
        'cliente_id' => $_POST['cliente_id'],
        'cliente_nombre' => $_POST['cliente_nombre']
    ];
    
    // Redirigir a GET después de procesar el POST
    $query_string = $_SERVER['QUERY_STRING'];
    $redirect_url = 'index.php' . ($query_string ? "?$query_string" : '');
    header("Location: $redirect_url");
    exit;
}

// Crear nueva venta
if (isset($_POST['cliente_id'])) {
    $grupo_id = uniqid('venta_');
    $_SESSION['venta_activa'] = [
        'grupo_id' => $grupo_id,
        'cliente_id' => $_POST['cliente_id'],
        'vendedor_id' => $_SESSION['usuario_id'],
        'estado' => 'EN_CURSO'
    ];
    
    header("Location: ventas_en_curso.php?grupo_id=" . $grupo_id);
    exit;
}

// Verificar si viene de una venta en curso
if (isset($_POST['venta_id']) && isset($_POST['seguir_vendiendo'])) {
    // Almacenar el ID de la venta en sesión para usarlo en la próxima venta
    $_SESSION['venta_en_curso'] = intval($_POST['venta_id']);
}

//var_dump($_SESSION);  // Agregar al inicio del archivo para ver el contenido de la sesión

// Verificar usuario logueado con múltiples opciones
$nombre_usuario = 'Visitante';
if (isset($_SESSION['nombre_usuario'])) {
    $nombre_usuario = $_SESSION['nombre_usuario'];
} elseif (isset($_SESSION['usuario'])) {
    $nombre_usuario = $_SESSION['usuario'];
} elseif (isset($_SESSION['nombre'])) {
    $nombre_usuario = $_SESSION['nombre'];
} elseif (isset($_SESSION['username'])) {
    $nombre_usuario = $_SESSION['username'];
}

// Inicializar conexión
$db = new Database();

// Verificar si el sitio está en construcción
$config_sitio = $db->query("SELECT ok FROM configuracion WHERE id = 1")->fetch();
$sitio_ok = $config_sitio ? (bool)$config_sitio['ok'] : false;

// Configuración de paginación
$productos_por_pagina = 28;
$pagina_actual = isset($_GET['pagina']) ? (int)$_GET['pagina'] : 1;
$offset = ($pagina_actual - 1) * $productos_por_pagina;

// Obtener filtros de la URL
$seccion_id = isset($_GET['seccion']) ? (int)$_GET['seccion'] : null;
$subseccion_id = isset($_GET['subseccion']) ? (int)$_GET['subseccion'] : null;
$marca_id = isset($_GET['marca']) ? (int)$_GET['marca'] : null;
$solo_ofertas = isset($_GET['ofertas']) ? true : false;

// Consulta para contar el total de productos
// Si el usuario está autenticado, mostrar todos los productos (visible 0 y 1)
// Si no está autenticado (visitante), solo mostrar productos con visible = 1
if ($usuario_autenticado) {
    $query_count = "SELECT COUNT(*) total FROM productos WHERE 1=1";
} else {
    $query_count = "SELECT COUNT(*) total FROM productos WHERE visible = 1";
}
if ($solo_ofertas) {
    $query_count .= " AND oferta IS NOT NULL AND oferta > 0";
}
if ($seccion_id) {
    $query_count .= " AND id_seccion = " . $seccion_id;
}
if ($subseccion_id) {
    $query_count .= " AND id_subseccion = " . $subseccion_id;
}
if ($marca_id) {
    $query_count .= " AND id_marca = " . $marca_id;
}

// Obtener el total de productos sin filtros
if ($usuario_autenticado) {
    $query_total_general = "SELECT COUNT(*) total FROM productos WHERE 1=1";
} else {
    $query_total_general = "SELECT COUNT(*) total FROM productos WHERE visible = 1";
}
$total_general = (int)$db->query($query_total_general)->fetch()['total'];

// Verificar si hay productos en oferta
if ($usuario_autenticado) {
    $query_ofertas = "SELECT COUNT(*) total FROM productos WHERE oferta IS NOT NULL AND oferta > 0";
} else {
    $query_ofertas = "SELECT COUNT(*) total FROM productos WHERE visible = 1 AND oferta IS NOT NULL AND oferta > 0";
}
$hay_ofertas = (int)$db->query($query_ofertas)->fetch()['total'] > 0;

$total = $db->query($query_count)->fetch();
$total_productos = (int)$total['total'];
$total_paginas = ceil($total_productos / $productos_por_pagina);

// Construir la consulta base para productos
// Si el usuario está autenticado, mostrar todos los productos (visible 0 y 1)
// Si no está autenticado (visitante), solo mostrar productos con visible = 1
$query = "
    SELECT DISTINCT p.*, 
           pr.nombre as proveedor, 
           s.nombre as seccion,
           ss.nombre as subseccion, 
           ss.destacar,
           m.nombre as marca,
           p.oferta,
           CASE 
               WHEN ss.destacar = 'SI' THEN 1 
               ELSE 0 
           END as es_destacado
    FROM productos p
    LEFT JOIN proveedores pr ON p.id_proveedor = pr.id
    LEFT JOIN secciones s ON p.id_seccion = s.id
    LEFT JOIN subsecciones ss ON p.id_subseccion = ss.id
    LEFT JOIN marcas m ON p.id_marca = m.id
";

if ($usuario_autenticado) {
    $query .= " WHERE 1=1";
} else {
    $query .= " WHERE p.visible = 1";
}

// Agregar filtros si existen
if ($solo_ofertas) {
    $query .= " AND p.oferta IS NOT NULL AND p.oferta > 0";
}
if ($seccion_id) {
    $query .= " AND p.id_seccion = " . $seccion_id;
}
if ($subseccion_id) {
    $query .= " AND p.id_subseccion = " . $subseccion_id;
}
if ($marca_id) {
    $query .= " AND p.id_marca = " . $marca_id;
}

// Agregar ordenamiento y paginación
$query .= " ORDER BY 
            es_destacado DESC,    -- Primero los productos de subsecciones destacadas
            p.id_seccion ASC,     -- Luego por sección
            p.id_subseccion ASC,  -- Luego por subsección
            p.precio_venta1 DESC, -- Penúltimo por precio de mayor a menor
            p.fecha_alta DESC     -- Finalmente por fecha
            LIMIT $productos_por_pagina OFFSET $offset";

// Ejecutar consultas
$productos = $db->query($query)->fetchAll(PDO::FETCH_ASSOC);
$secciones = $db->query("SELECT id, nombre FROM secciones ORDER BY nombre")->fetchAll();
// Modificar la consulta donde se obtienen las marcas
$marcas = $db->query("SELECT id, nombre FROM marcas ORDER BY nombre")->fetchAll();
$subsecciones = $db->query("
    SELECT ss.*, s.nombre as seccion_nombre 
    FROM subsecciones ss 
    LEFT JOIN secciones s ON ss.id_seccion = s.id 
    ORDER BY s.nombre, ss.nombre
")->fetchAll();

// Obtener configuración
$config = $db->query("SELECT * FROM configuracion WHERE id = 1")->fetch(PDO::FETCH_ASSOC);

// Si no hay configuración, usar valores por defecto
if (!$config) {
    $config = array(
        'nombre_comercio' => 'Mi Tienda',
        'razon_social' => 'Razón Social',
        'ruc' => 'RUC',
        'direccion' => 'Dirección',
        'telefono' => 'Teléfono',
        'correo' => 'correo@example.com',
        'sitio_web' => 'www.example.com',
        'facebook_url' => '',
        'instagram_url' => '',
        'whatsapp' => '',
        'logo' => 'default-logo.png',
        'favicon' => 'favicon.ico',
        'color_principal' => '#ff2b1c',
        'con_decimales' => 0,
        'moneda' => 'Gs.' // Agregar valor por defecto
    );
}

// En el HTML, modificar el título de la sección según el filtro
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <title><?php echo htmlspecialchars($config['nombre_comercio']); ?></title>
    <link rel="icon" type="image/x-icon" href="uploads/config/<?php echo htmlspecialchars($config['favicon']); ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-minimal/minimal.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        /* Estilos críticos del buscador */
        #buscador {
            width: 100% !important;
            height: 15px !important; /* Reducido aún más */
            min-height: 15px !important; /* Forzar altura mínima */
            max-height: 25px; /* Forzar altura máxima */
            padding: 2px 15px !important; /* Se eliminó el padding-right extra */
            border: 2px solid var(--color-principal) !important;
            border-radius: 15px !important; /* Reducido para mantener proporción */
            font-size: 13px !important; /* Reducido */
            background-color: #ffffff !important;
            line-height: 21px !important; /* Ajustar línea */
            box-sizing: border-box !important;
        }
        
        /* Se eliminaron los estilos de .search-button */
    </style>
    <style>
        :root {
            --color-principal: <?php echo $config['color_principal']; ?>;
            --color-fondo: <?php echo $config['color_fondo']; ?>;
            --color-texto: <?php echo $config['color_texto']; ?>;
            --color-fondo-tarjetas: <?php echo $config['color_fondo_tarjetas']; ?>;
            --color-borde-tarjetas: <?php echo $config['color_borde_tarjetas']; ?>;
            --color-fondo-header: <?php echo $config['color_fondo_header']; ?>;
            --color-texto-header: <?php echo $config['color_texto_header']; ?>;
            --color-fondo-footer: <?php echo $config['color_fondo_footer']; ?>;
            --color-texto-footer: <?php echo $config['color_texto_footer']; ?>;
            --color-enlaces: <?php echo $config['color_enlaces']; ?>;
            --color-hover-enlaces: <?php echo $config['color_hover_enlaces']; ?>;
        }

        .nav-header {
            border-bottom: 3px solid var(--color-principal);
        }

        .search-input:focus {
            border-color: var(--color-principal);
        }

        .product-price,
        .subseccion-item a:hover,
        .subseccion-item a.active {
            color: var(--color-principal);
        }

        .social-links a:hover {
            color: var(--color-principal);
        }

        /* Reset básico */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Estilos base */
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: #f5f5f5;
            padding-top: 60px;
            /* Eliminar min-width */
        }

        /* Header */
        .nav-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 1000;
            justify-content: space-between; /* Modificado para distribuir espacio entre logo y user-info */
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .nav-logo {
            height: 50px;
        }

        .btn-home {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--color-principal);
            text-decoration: none;
            font-size: 14px;
            padding: 8px 15px;
            border-radius: 20px;
            transition: all 0.2s;
            background: #f5f5f5;
        }

        .btn-home:hover {
            background: #eee;
            color: var(--color-principal);
            opacity: 0.8;
        }

        .home-icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            color: var(--color-principal);
        }

        @media (max-width: 768px) {
            .nav-header {
                height: 50px;
                padding: 0 10px; /* Reducir padding lateral */
            }
            
            .nav-logo {
                height: 40px;
            }
            
            .btn-home span {
                display: none;
            }
            
            .btn-home {
                padding: 8px;
            }

            .search-container {
                margin: 0 8px; /* Reducir márgenes del buscador */
            }

            .nav-left {
                gap: 8px; /* Reducir espacio entre elementos */
            }

            .user-info {
                gap: 8px; /* Reducir espacio entre elementos */
            }

            .user-name {
                margin-left: 8px; /* Reducir margen izquierdo */
            }

            .separador {
                margin: 0 4px; /* Reducir margen del separador */
            }

            .venta-activa {
                padding: 6px 10px; /* Reducir padding del área de venta activa */
            }
        }

        @media (max-width: 480px) {
            .nav-header {
                height: 45px;
                padding: 0 5px; /* Reducir aún más en pantallas muy pequeñas */
            }
            
            .nav-logo {
                height: 35px;
            }

            .search-container {
                margin: 0 5px;
            }
        }

        /* Estilos del buscador */
        .search-container {
            position: fixed;
            top: 58px; /* Aumentado de 70px a 120px */
            left: 50%;
            transform: translateX(-50%); 
            width: 90%;
            max-width: 600px;
            z-index: 999;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 0px;
        }

        /* Ajustar responsive */
        @media (max-width: 768px) {
            .search-container {
                top: 37px; /* Aumentado para móviles también */
                width: 100%;
                left: 175px; /* Aumentado para móviles */
                max-width: 300px; /* Reducido para móviles */
            }
        }

        /* Contenedor principal */
        #wrapper {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto; /* Cambiar margen superior a 0 */
            padding: 20px; /* Mover el padding aquí */
        }

        #central {
            display: flex;
            gap: 20px;
        }

        /* Sidebar */
        #secondary {
            width: 250px;
            flex-shrink: 0;
        }

        .blk {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid rgba(0,0,0,0.1);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .blk:hover {
            border-color: var(--color-principal);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .blk .hdr h3 {
            font-size: 16px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--color-principal);
            color: var(--color-principal);
            text-transform: uppercase;
            font-weight: bold;
        }

        /* Área principal */
        #main {
            flex: 1;
            background: white;
            border-radius: 8px;
            padding: 20px;
        }

        /* Grid de productos */
        .articleList {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .product-card {
            background: white;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 10px;
            cursor: pointer;
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .product-image {
            width: 100%;
            aspect-ratio: 1/1; /* Fuerza proporción cuadrada */
            object-fit: contain; /* Mantiene proporción de imagen original dentro del cuadrado */
            background: white;
            margin-bottom: 10px;
            padding: 5px; /* Opcional: agrega un pequeño padding */
        }

        .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .product-title {
            font-size: 14px;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-transform: uppercase; /* Añadir esta línea */
        }

        .product-price {
            font-size: 18px;
            font-weight: bold;
            color: #ff2b1c;
        }

        /* Estilos para precios de oferta */
        .product-price-original {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
            margin-bottom: 5px;
            text-align: center;
        }

        .product-price-offer {
            font-size: 18px;
            font-weight: bold;
            color: #ff2b1c;
            text-align: center;
        }

        /* Clase para subrayar el precio más alto en ofertas */
        .precio-subrayado {
            text-decoration: underline !important;
            text-decoration-color: #ff2b1c !important;
            text-decoration-thickness: 2px !important;
            text-underline-offset: 2px !important;
        }

        .offer-label {
            display: block;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            background: #ff4757;
            padding: 2px 8px;
            border-radius: 12px;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
        }

        /* Badge para productos ocultos al público */
        .producto-oculto-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #6c757d;
            color: white;
            font-size: 11px;
            font-weight: bold;
            padding: 4px 10px;
            border-radius: 15px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }

        .product-card {
            position: relative; /* Necesario para el badge absoluto */
        }

        /* Estilos para productos sin stock */
        .product-out-of-stock {
            font-size: 16px;
            font-weight: bold;
            color: #999;
            text-align: center;
            background: #f5f5f5;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px dashed #ccc;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .cuotas-selector {
            margin-top: 10px;
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
            background-color: #fff;
            transition: border-color 0.2s;
            outline: none; /* Añadir esta línea */
        }

        .cuotas-selector:hover,
        .cuotas-selector:focus {
            border-color: var(--color-principal);
        }

        .precio-cuota {
            font-size: 16px; /* Aumentado de 14px */
            color: var(--color-principal);
            margin-top: 5px;
            font-weight: 600; /* Aumentado de 500 */
            text-align: center;
            line-height: 1.2;
        }

        /* Header de sección */
        .hdr {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .tools {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        /* Modal */
        #productModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            z-index: 1100;
        }

        .modal-content {
            background: white;
            max-width: 900px;
            margin: 40px auto;
            border-radius: 8px;
            position: relative;
        }

        /* Eliminar todos los media queries responsivos para mantener el diseño de escritorio */
        @media (max-width: 1200px) {
            /* Eliminar estos estilos */
        }

        @media (max-width: 992px) {
            /* Eliminar estos estilos */
        }

        @media (max-width: 768px) {
            /* Eliminar estos estilos */
        }

        @media (max-width: 480px) {
            /* Eliminar estos estilos */
        }

        .seccion-item, .marca-item {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .seccion-item:last-child, .marca-item:last-child {
            border-bottom: none;
        }

        .seccion-item a, .marca-item a {
            color: #333;
            text-decoration: none;
            display: block;
            transition: color 0.2s;
            text-transform: uppercase; /* Convierte texto a mayúsculas */
            font-size: 13px; /* Opcional: reducir tamaño para mejor legibilidad */
        }

        .marca-item a {
            color: #333;
            text-decoration: none;
            display: block;
            transition: color 0.2s;
            font-size: 13px;
            text-transform: lowercase; /* Convertir todo a minúsculas */
        }

        .marca-item a::first-letter {
            text-transform: uppercase; /* Primera letra en mayúscula */
        }

        /* Sidebar responsive */
        @media (max-width: 768px) {
            #secondary .blk {
                margin-bottom: 8px;
                border-radius: 8px;
                overflow: hidden;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
            }
            
            #secondary .blk .hdr {
                cursor: pointer;
                padding: 15px;
                background: var(--color-principal);
                border-radius: 8px;
                margin-bottom: 0;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
                position: relative;
                z-index: 1;
            }

            #secondary .blk .hdr:active {
                opacity: 0.8;
            }

            #secondary .blk .hdr h3 {
                margin: 0;
                padding: 0;
                border: none;
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
            }

            #secondary .blk .hdr h3::after {
                content: '\f078';
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                position: absolute;
                right: 15px;
                transition: transform 0.3s ease;
            }

            #secondary .blk .content {
                display: none;
                padding: 15px;
                background: white;
                border: 1px solid #eee;
                border-top: none;
                border-radius: 0 0 8px 8px;
                max-height: 300px;
                overflow-y: auto;
                opacity: 0;
                transform: translateY(-10px);
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            #secondary .blk.active .hdr {
                border-radius: 8px 8px 0 0;
            }

            #secondary .blk.active .hdr h3::after {
                transform: rotate(180deg);
            }

            #secondary .blk.active .content {
                display: block !important;
                opacity: 1 !important;
                transform: translateY(0) !important;
            }

            .nav-logo {
                height: 40px; /* Aumentado de 35px */
            }

            .precio-cuota {
                font-size: 14px; /* Aumentado de 12px */
                /* Mantener el color principal incluso en móvil */
                color: var(--color-principal);
            }
        }

        @media (max-width: 768px) {
            body {
                padding-top: 45px;
                font-size: 14px;
            }

            .nav-header {
                height: 45px;
            }

            .nav-logo {
                height: 40px; /* Aumentado de 35px */
            }

            #wrapper {
                padding: 10px;
            }

            #central {
                gap: 10px;
            }

            .blk {
                padding: 10px;
                margin-bottom: 10px;
            }

            .product-card {
                padding: 8px;
            }

            .product-title {
                font-size: 12px;
            }

            .product-price {
                font-size: 16px;
            }

            .product-price-original {
                font-size: 12px;
            }

            .product-price-offer {
                font-size: 16px;
            }

            .offer-label {
                font-size: 10px;
                padding: 1px 6px;
            }

            .product-out-of-stock {
                font-size: 14px;
                padding: 6px 10px;
            }

            .cuotas-selector {
                font-size: 12px;
                padding: 6px;
            }

            .precio-cuota {
                font-size: 14px; /* Aumentado de 12px */
            }
        }

        @media (max-width: 480px) {
            body {
                padding-top: 40px;
                font-size: 13px;
            }

            .nav-header {
                height: 40px;
            }

            .nav-logo {
                height: 35px; /* Aumentado de 30px */
            }

            .product-price {
                font-size: 14px;
            }

            .product-price-original {
                font-size: 11px;
            }

            .product-price-offer {
                font-size: 14px;
            }

            .offer-label {
                font-size: 9px;
                padding: 1px 4px;
            }

            .product-out-of-stock {
                font-size: 12px;
                padding: 5px 8px;
            }

            #main {
                padding: 15px;
            }

            .articleList {
                gap: 10px;
            }
        }

        /* Contenedor especial para el banner */
        .banner-wrapper {
            width: 100vw;
            position: relative;
            overflow: hidden;
        }

        /* Viewport fijo para el banner */
        .banner-viewport {
            width: 1400px;
            margin: 0 auto;
            transform-origin: top center;
            transform: scale(0.25); /* Escalar solo el banner */
        }

        @media (max-width: 768px) {
            .banner-viewport {
                transform: scale(0.15);
            }
        }

        /* Restaurar los media queries originales para el contenido */
        @media (max-width: 768px) {
            #wrapper {
                width: 100%;
                padding: 10px;
            }

            #central {
                flex-direction: column;
            }

            #secondary {
                width: 100%;
            }

            .articleList {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .articleList {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px; /* Reducir el espacio entre productos para mejor visualización en móvil */
            }
        }

        /* Estilos del banner */
        .banner {
            width: 100%;
            background: #fff;
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            /* Eliminar border-radius */
        }

        /* Agregar un pseudo-elemento para el efecto de reflejo en la parte inferior */
        .banner::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px; /* Altura del borde con efecto */
            background: linear-gradient(
                45deg,
                <?= $config['color_principal'] ?>,
                #fff,
                #f0f0f0,
                <?= $config['color_principal'] ?>,
                #fff
            );
            background-size: 400% 400%;
            animation: borderGlow 8s ease infinite;
            box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra suave para resaltar el efecto */
        }

        .banner img {
            width: 100%;
            height: auto;
            display: none;
        }

        .banner img.active {
            display: block;
        }

        /* Animación del borde brillante */
        @keyframes borderGlow {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .subseccion-grupo {
            margin-bottom: 15px;
        }
        
        .subseccion-header {
            font-weight: bold;
            color: var(--color-principal);
            font-size: 12px;
            margin-bottom: 5px;
            text-transform: uppercase;
            border-bottom: 1px solid var(--color-principal);
            padding-bottom: 5px;
        }
        
        .subseccion-item {
            padding: 4px 0 4px 10px;
        }
        
        .subseccion-item a {
            color: #333;
            text-decoration: none;
            font-size: 13px;
            transition: color 0.2s;
        }
        
        .subseccion-item a:hover,
        .subseccion-item a.active {
            color: #ff2b1c;
        }

        .seccion-item a:hover, 
        .marca-item a:hover {
            color: var(--color-principal);
        }

        /* Estilos para el footer */
        .footer {
            background: var(--color-principal); /* Usar el color principal configurado */
            padding: 0 0 40px 0;
            margin-top: 40px;
            border-top: 1px solid rgba(255,255,255,0.1); /* Cambiar el borde a blanco transparente */
        }

        /* Actualizar otros estilos relacionados con el footer para mejor contraste */
        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            position: relative;
        }

        .footer-section h4 {
            color: #fff; /* Cambiar a blanco para mejor contraste */
            margin-bottom: 20px;
            font-size: 16px;
        }

        .footer-section p {
            color: rgba(255,255,255,0.9); /* Texto más claro */
            margin-bottom: 10px;
            font-size: 14px;
        }

        .footer-section a {
            color: rgba(255,255,255,0.9); /* Enlaces más claros */
            text-decoration: none;
            transition: color 0.2s;
        }

        .social-links a {
            color: #fff; /* Íconos sociales en blanco */
            transition: transform 0.2s, opacity 0.2s;
        }

        .social-links a:hover {
            opacity: 0.8;
            transform: scale(1.1);
            color: #fff; /* Mantener el color blanco en hover */
        }

        /* Solo cambiar a una columna en móviles muy pequeños */
        @media (max-width: 576px) {
            .footer-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        /* Agregar estilos para la nueva fila del footer */
        .footer-bottom {
            background: #444;
            padding: 15px 0;
            text-align: center;
            color: #ddd;
            font-size: 16px; /* Aumentado el tamaño */
            margin-bottom: 40px;
            font-weight: 500; /* Añadido para hacer el texto más bold */
            posición: relative; /* Añadido para el posicionamiento de los bordes */
        }

        .footer-bottom::before,
        .footer-bottom::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
        }

        .footer-bottom::before {
            top: 0;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
        }

        .footer-bottom::after {
            bottom: 0;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
        }

        .footer-bottom span {
            color: #fff;
            font-weight: bold;
            font-size: 18px; /* Aumentado el tamaño */
        }

        /* Agregar estos estilos en la sección de CSS */
        .prices-container {
            position: relative;
            min-height: 2em;
            margin-bottom: 10px;
        }

        .product-price,
        .precio-cuota {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }

        .product-price.active,
        .precio-cuota.active {
            opacity: 1;
            visibility: visible;
        }

        /* Agregar este estilo para los títulos h1 */
        #main .hdr h1 {
            color: var(--color-principal);
            font-size: 24px;
            font-weight: bold;
        }

        /* Estilos para el header con botón de ofertas */
        .hdr-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        /* Botón de ofertas llamativo */
        .btn-ofertas {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(45deg, #ff6b6b, #ff8e8e, #ff6b6b);
            background-size: 200% 200%;
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
            transition: all 0.3s ease;
            overflow: hidden;
            animation: pulseGlow 2s infinite;
        }

        .btn-ofertas:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(255, 107, 107, 0.6);
            background-position: 100% 100%;
            color: white;
        }

        .btn-ofertas i {
            font-size: 16px;
            animation: fireFlicker 1.5s infinite alternate;
        }

        .btn-shine {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shine 3s infinite;
        }

        /* Animaciones */
        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
            }
            50% {
                box-shadow: 0 4px 20px rgba(255, 107, 107, 0.7);
            }
        }

        @keyframes fireFlicker {
            0% { transform: rotate(-2deg) scale(1); }
            100% { transform: rotate(2deg) scale(1.1); }
        }

        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Responsive para móvil */
        @media (max-width: 768px) {
            .hdr-left {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
                width: 100%;
            }

            .btn-ofertas {
                padding: 10px 16px;
                font-size: 12px;
                border-radius: 20px;
            }

            .btn-ofertas .btn-text {
                /* Mostrar texto en móvil pero más pequeño */
                font-size: 11px;
            }

            .btn-ofertas i {
                font-size: 12px;
            }

            #main .hdr h1 {
                font-size: 20px;
                margin: 0;
            }

            .hdr {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .tools {
                width: 100%;
                justify-content: space-between;
            }
        }

        @media (max-width: 480px) {
            .hdr-left {
                gap: 10px;
            }

            .btn-ofertas {
                padding: 8px 12px;
                font-size: 10px;
            }

            .btn-ofertas .btn-text {
                /* Mantener texto visible en pantallas muy pequeñas */
                font-size: 9px;
            }

            .btn-ofertas i {
                font-size: 11px;
            }

            #main .hdr h1 {
                font-size: 18px;
            }
        }

        /* Estilos de paginación */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 30px;
            padding: 20px 0;
        }

        .pagination-btn {
            background: var(--color-principal);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            text-decoration: none;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .pagination-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .pagination-numbers {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .pagination-number {
            min-width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #666;
            border-radius: 50%;
            transition: all 0.2s;
            font-weight: 500;
        }

        .pagination-number:hover {
            background: #f0f0f0;
            color: var(--color-principal);
        }

        .pagination-number.active {
            background: var(--color-principal);
            color: white;
            pointer-events: none;
        }

        /* Responsive para paginación */
        @media (max-width: 576px) {
            .pagination {
                gap: 10px;
            }
            
            .pagination-btn {
                padding: 6px 12px;
                font-size: 14px;
            }

            .pagination-number {
                min-width: 30px;
                height: 30px;
                font-size: 14px;
            }
        }

        .rain-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        .banner {
            position: relative;
            background: #fff; /* Cambiar a fondo blanco */
        }

        .banner img.active {
            display: block;
            opacity: 1; /* Restaurar opacidad completa */
            mix-blend-mode: normal; /* Eliminar mezcla */
        }

        /* Modificar estos estilos en la sección CSS */
        .prices-container {
            min-height: 40px;
            position: relative;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .product-price,
        .precio-cuota {
            width: 100%;
            text-align: center;
            display: none;
        }

        .product-price.active,
        .precio-cuota.active {
            display: block;
        }

        .user-name {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            background: #f5f5f5;
            border-radius: 20px;
            margin-left: 20px;
            color: var(--color-principal);
            font-size: 14px;
            text-decoration: none; /* Añadido para quitar el subrayado del enlace */
            transition: all 0.2s ease; /* Añadido para suavizar el efecto hover */
        }

        .user-name:hover {
            background: #e5e5e5; /* Añadido para dar feedback visual al hover */
            transform: translateY(-1px); /* Añadido para dar un sutil efecto de elevación */
        }

        @media (max-width: 768px) {
            .user-name span {
                display: none;
            }
            .user-name {
                padding: 8px;
            }
        }

        .btn-vender {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            background-color: var(--color-principal);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            font-weight: bold;
        }

        .btn-vender:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .btn-vender i {
            font-size: 16px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .venta-activa {
            background-color: var(--color-primary);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .ver-venta {
            color: white;
            text-decoration: none;
            padding: 4px 8px;
            background: rgba(255,255,255,0.2);
            border-radius: 12px;
            font-size: 12px;
            transition: background-color 0.2s;
        }

        .ver-venta:hover {
            background: rgba(255,255,255,0.3);
        }

        @media (max-width: 768px) {
            .venta-activa span {
                display: none;
            }
            .venta-activa {
                padding: 8px;
            }
            .ver-venta {
                display: none;
            }
        }

        /* Modificar el botón vender para que sea más simple */
        .btn-vender {
            font-size: 14px;
            padding: 8px 15px;
        }

        .separador {
            width: 1px;
            height: 24px;
            background: #ddd;
            margin: 0 8px;
        }

        .btn-logout {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: var(--color-principal);
            text-decoration: none;
            transition: all 0.2s ease;
            background: #f5f5f5;
        }

        .btn-logout:hover {
            background: var(--color-principal);
            color: white;
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .separador {
                height: 20px;
            }
            
            .btn-logout {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }
        }

        .btn-login {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: #666;
            text-decoration: none;
            transition: all 0.2s ease;
            background: #f5f5f5;
        }

        .btn-login:hover {
            background: var(--color-principal);
            color: white;
            transform: translateY(-1px);
        }

        @media (max-width: 768px) {
            .btn-login {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }
        }

        .logo-link {
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .desktop-only {
            display: flex;
        }

        @media (max-width: 768px) {
            .desktop-only {
                display: none;
            }

            .nav-left {
                gap: 10px;
            }

            .logo-link {
                height: 40px;
            }
        }

        @media (max-width: 480px) {
            .logo-link {
                height: 35px;
            }
        }

        /* Estilos para el ícono del carrito */
        .user-info a {
            position: relative;
            display: flex;
            align-items: center;
        }

        .user-info a span {
            position: absolute;
            top: -8px;
            right: -8px;
        }

        .user-info .fa-shopping-cart {
            font-size: 20px;
            color: var(--color-principal);
        }

        @media (max-width: 768px) {
            .user-info .fa-shopping-cart {
                font-size: 18px;
            }
            
            .user-info a span {
                padding: 1px 5px;
                font-size: 10px;
            }
        }

        body {
            background-color: var(--color-fondo);
            color: var(--color-texto);
        }

        .product-card {
            background-color: var(--color-fondo-tarjetas); /* Usar el color de fondo de tarjetas */
            border-color: var(--color-borde-tarjetas);
        }

        .nav-header {
            background-color: var(--color-fondo-header);
            color: var(--color-texto-header);
        }

        .footer {
            background-color: var(--color-fondo-footer);
            color: var(--color-texto-footer);
        }

        a {
            color: var(--color-enlaces);
        }

        a:hover {
            color: var(--color-hover-enlaces);
        }

        /* Actualizar estos estilos dentro del bloque <style> */

        /* Estilo para las tarjetas de productos */
        .product-card {
            background-color: var(--color-fondo); /* Usar el color de fondo principal */
            border: 1px solid var(--color-borde-tarjetas);
            border-radius: 8px;
            padding: 10px;
            cursor: pointer;
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
        }

        /* Estilo para los bloques laterales */
        .blk {
            background-color: var(--color-fondo); /* Usar el color de fondo principal */
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            border: 1px solid var(--color-borde-tarjetas);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        /* Estilo para el área principal */
        #main {
            flex: 1;
            background-color: var(--color-fondo); /* Usar el color de fondo principal */
            border-radius: 8px;
            padding: 20px;
            border: 1px solid var(--color-borde-tarjetas);
        }

        /* Ajustar el color del texto para mejor contraste */
        .product-title {
            color: var(--color-texto);
        }

        /* Ajustar el color de los enlaces en las secciones laterales */
        .seccion-item a, 
        .marca-item a,
        .subseccion-item a {
            color: var(--color-texto);
        }

        /* Ajustar el hover de los enlaces */
        .seccion-item a:hover, 
        .marca-item a:hover,
        .subseccion-item a:hover {
            color: var(--color-principal);
        }

        /* Modificar el estilo de las tarjetas de productos */
        .product-card {
            background-color: var(--color-fondo-tarjetas); /* Cambiar a color de fondo de tarjetas */
            border: 1px solid var(--color-borde-tarjetas);
            border-radius: 8px;
            padding: 10px;
            cursor: pointer;
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
        }

        /* Modificar el estilo de los precios */
        .product-price,
        .precio-cuota {
            color: var(--color-texto); /* Usar el color de texto principal */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }

        /* Sobrescribir cualquier otro estilo que pueda estar afectando al color del precio */
        .product-card .product-price,
        .product-card .precio-cuota {
            color: var(--color-texto);
        }

        /* Asegurarse de que el hover no cambie el color */
        .product-card:hover .product-price,
        .product-card:hover .precio-cuota {
            color: var(--color-texto);
        }

        /* Estilos para el botón de modo oscuro */
        .dark-mode-toggle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: none;
            background: #f5f5f5;
            color: var(--color-principal);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .dark-mode-toggle:hover {
            background: var(--color-principal);
            color: white;
            transform: translateY(-1px);
        }

        /* Estilos para modo oscuro */
        [data-theme="dark"] {
            --color-fondo: #1a1a1a;
            --color-texto: #ffffff;
            --color-fondo-tarjetas: #2d2d2d;
            --color-borde-tarjetas: #404040;
            --color-fondo-header: #2d2d2d;
            --color-texto-header: #ffffff;
            --color-enlaces: #ffffff;
            --color-hover-enlaces: var(--color-principal);
        }

        [data-theme="dark"] .blk,
        [data-theme="dark"] #main {
            background-color: #2d2d2d;
        }

        [data-theme="dark"] .product-card {
            background-color: #2d2d2d;
            border-color: #404040;
        }

        [data-theme="dark"] input,
        [data-theme="dark"] select {
            background-color: #333;
            color: #fff;
            border-color: #404040;
        }

        [data-theme="dark"] .nav-header {
            background-color: #2d2d2d;
            border-bottom-color: var(--color-principal);
        }

        @media (max-width: 768px) {
            .dark-mode-toggle {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }
        }




    </style>
    <!-- Agregar antes del cierre de </head> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Script para inicializar los bloques colapsables
    document.addEventListener('DOMContentLoaded', function() {
        // En móviles, asegurarse de que todos los bloques estén contraídos al inicio
        if (window.innerWidth <= 768) {
            const blocks = document.querySelectorAll('#secondary .blk');
            blocks.forEach(block => {
                const content = block.querySelector('.content');
                if (content) {
                    content.style.display = 'none';
                    content.style.opacity = '0';
                    content.style.transform = 'translateY(-10px)';
                }
                // Asegurarse de que ningún bloque tenga la clase 'active' al inicio
                if (block.classList.contains('active')) {
                    block.classList.remove('active');
                }
            });
        }
    });
</script>
</head>
<body>
    <?php if (isset($_GET['error'])): ?>
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Hubo un problema al procesar la operación. Por favor, intente nuevamente.'
        });
    </script>
    <?php endif; ?>
    <nav class="nav-header">
        <div class="nav-left">
            <a href="index.php" class="logo-link">
                <img src="uploads/config/<?php echo htmlspecialchars($config['logo']); ?>" alt="Logo" class="nav-logo">
            </a>
            <a href="index.php" class="btn-home desktop-only">
                <i class="fas fa-home home-icon"></i>
                <span>Inicio</span>
            </a>
            <!-- Insertar el buscador aquí -->
            <div class="search-container">
                <input type="text" 
                       id="buscador" 
                       name="q" 
                       placeholder="Buscar productos..." 
                       autocomplete="off">
            </div>
        </div>
        <div class="user-info">
            <a href="carrito.php" style="text-decoration: none; color: #333;">
                <i class="fas fa-shopping-cart"></i>
                <?php
                if (isset($_SESSION['carrito']) && count($_SESSION['carrito']) > 0) {
                    echo '<span style="background: #ff2b1c; color: white; padding: 2px 6px; border-radius: 50%; font-size: 12px;">' . 
                         count($_SESSION['carrito']) . '</span>';
                }
                ?>
            </a>

            <?php if ($venta_en_curso): ?>
                <div class="venta-activa">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cliente-nombre">
                        Cliente: <?= htmlspecialchars($venta_en_curso['cliente_nombre'] ?? 'Sin nombre') ?>
                    </span>
                    <a href="ventas_en_curso.php?venta_id=<?= htmlspecialchars($venta_en_curso['venta_id']) ?>" class="ver-venta">
                        <i class="fas fa-eye"></i>
                    </a>
                </div>
            <?php endif; ?>

            <?php if ($nombre_usuario !== 'Visitante'): ?>
                <div class="separador"></div>
                <div class="user-section">
                    <a href="admin/dashboard.php" class="user-name">
                        <i class="fas fa-user"></i>
                        <span><?= htmlspecialchars(strtok($nombre_usuario, ' ')) ?></span>
                    </a>
                </div>
                <div class="separador"></div>
                <a href="logout.php" class="btn-logout" title="Cerrar sesión">
                    <i class="fas fa-power-off"></i>
                </a>
            <?php else: ?>
                <a href="login.php" class="btn-login" title="Iniciar sesión">
                    <i class="fas fa-user-lock"></i>
                </a>
            <?php endif; ?>
            <button id="darkModeToggle" class="dark-mode-toggle" title="Modo oscuro">
                <i class="fas fa-moon"></i>
            </button>
        </div>
    </nav>

    <style>
        /* Estilos actualizados para el header */
        .venta-activa {
            display: flex;
            align-items: center;
            background-color: var(--color-principal);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            gap: 8px;
            white-space: nowrap;
            margin-right: 10px;
        }

        .cliente-nombre {
            margin: 0 8px;
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ver-venta {
            color: white;
            text-decoration: none;
            background: rgba(255,255,255,0.2);
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            transition: background-color 0.2s;
        }

        .ver-venta:hover {
            background: rgba(255,255,255,0.3);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }

        .separador {
            width: 1px;
            height: 24px;
            background: #ddd;
            margin: 0 5px;
        }

        @media (max-width: 768px) {
            .cliente-nombre {
                max-width: 100px;
            }
            
            .venta-activa {
                padding: 6px 10px;
            }
            
            .ver-venta span {
                display: none;
            }
        }
    </style>

    <!-- Modificar la sección del banner -->
    <div class="banner">
        <canvas id="rainCanvas" class="rain-effect"></canvas>
        <?php 
        $timestamp = time(); // Obtener timestamp actual
        for($i = 1; $i <= 10; $i++): 
        ?>
            <img src="uploads/banner/banner<?= $i ?>.jpg?v=<?= $timestamp ?>" 
                 alt="Banner <?= $i ?>" 
                 class="banner-slide <?= $i === 1 ? 'active' : '' ?>">
        <?php endfor; ?>
    </div>

    <div id="wrapper">

        <div id="central">

            <!-- Barra lateral -->
            <div id="secondary">
                
                <!-- Modificar el título del bloque de subsecciones -->
                <div class="blk blkSubcategorias">
                    <div class="hdr">
                        <h3>Secciones</h3>
                    </div>
                    <div class="content">
                        <?php 
                        $current_seccion = '';
                        foreach($subsecciones as $subseccion): 
                            if ($current_seccion != $subseccion['seccion_nombre']):
                                if ($current_seccion != ''): ?>
                                    </div>
                                <?php endif; 
                                $current_seccion = $subseccion['seccion_nombre'];
                            ?>
                            <div class="subseccion-grupo">
                                <div class="subseccion-header"><?= htmlspecialchars($current_seccion) ?></div>
                            <?php endif; ?>
                            
                            <div class="subseccion-item">
                                <a href="?subseccion=<?= $subseccion['id'] ?>" 
                                   class="<?= ($subseccion_id == $subseccion['id']) ? 'active' : '' ?>">
                                    <?= htmlspecialchars($subseccion['nombre']) ?>
                                </a>
                            </div>
                        <?php endforeach; ?>
                        <?php if ($current_seccion != ''): ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
                
                <div class="blk blkMarcas">
                    <div class="hdr">
                        <h3>Marcas</h3>
                    </div>
                    <div class="content">
                        <?php foreach($marcas as $marca): ?>
                            <div class="marca-item">
                                <a href="?marca=<?= $marca['id'] ?>">
                                    <?= htmlspecialchars($marca['nombre']) ?>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- Contenido principal -->
            <div id="main">
                <div class="hdr">
                    <div class="hdr-left">
                        <h1>
                            <?php 
                            if ($solo_ofertas) {
                                echo "🏷️ Productos en Ofertas";
                            } elseif ($seccion_id) {
                                foreach ($secciones as $seccion) {
                                    if ($seccion['id'] == $seccion_id) {
                                        echo htmlspecialchars($seccion['nombre']);
                                        break;
                                    }
                                }
                            } elseif ($marca_id) {
                                foreach ($marcas as $marca) {
                                    if ($marca['id'] == $marca_id) {
                                        echo htmlspecialchars($marca['nombre']);
                                        break;
                                    }
                                }
                            } else {
                                echo "Productos";
                            }
                            ?>
                        </h1>
                        <?php if (!$solo_ofertas && !$seccion_id && !$subseccion_id && !$marca_id && $hay_ofertas): ?>
                            <a href="?ofertas=1" class="btn-ofertas">
                                <i class="fas fa-fire"></i>
                                <span class="btn-text">¡Ofertas!</span>
                                <div class="btn-shine"></div>
                            </a>
                        <?php endif; ?>
                    </div>
                    <div class="tools">
                        <?php if ($seccion_id || $marca_id || $solo_ofertas): ?>
                            <a href="index.php" class="btn-link">Ver todos</a>
                        <?php endif; ?>
                        <div class="tot">
                            <?php if ($seccion_id || $subseccion_id || $marca_id): ?>
                                <?= $total_productos ?> de <?= $total_general ?> artículos
                            <?php else: ?>
                                <?= $total_general ?> artículos
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                
                <div id="productos-container"></div>
                
                <!-- Banner Compacto de Métodos de Pago -->
                <?php include 'includes/payment_methods_compact.php'; ?>
                
                <div class="articleList">
                    
                    <?php 
                    $timestamp = time(); // Un solo timestamp para toda la página
                    foreach ($productos as $producto): 
                        $imagenes = json_decode($producto['imagenes'], true);
                        
                        // Si no hay imagen, usar el logo del sistema
                        if (!empty($imagenes)) {
                            $primera_imagen = $imagenes[0];
                            $ruta_imagen = "uploads/productos/" . htmlspecialchars($primera_imagen);
                        } else {
                            // Usar el logo del sistema desde la configuración
                            $primera_imagen = $config['logo'];
                            $ruta_imagen = "uploads/config/" . htmlspecialchars($primera_imagen);
                        }
                    ?>
                        <div class="product-card" data-id="<?= $producto['id'] ?>">
                            <?php if ($usuario_autenticado && $producto['visible'] == 0): ?>
                                <span class="producto-oculto-badge" title="Este producto solo es visible para usuarios autenticados">
                                    <i class="fas fa-eye-slash"></i> Oculto
                                </span>
                            <?php endif; ?>
                            <a href="producto.php?id=<?= $producto['id'] ?>">
                                <img src="<?= $ruta_imagen ?>?v=<?= $timestamp ?>" 
                                     alt="<?= htmlspecialchars($producto['descripcion']) ?>" 
                                     class="product-image"
                                     loading="lazy"
                                     onerror="this.src='uploads/config/<?= htmlspecialchars($config['logo']) ?>?v=<?= $timestamp ?>'">
                            </a>
                            <div class="product-info">
                                <h3 class="product-title"><?= htmlspecialchars($producto['titulo']) ?></h3>
                                <div class="prices-container">
                                    <?php if ($producto['precio_venta1'] == 0): ?>
                                        <!-- Producto sin stock o precio -->
                                        <div class="product-out-of-stock active">
                                            En falta
                                        </div>
                                    <?php elseif (!empty($producto['oferta']) && $producto['oferta'] > 0): ?>
                                        <?php 
                                        // Lógica para determinar el precio más alto entre los tres precios de venta
                                        $precio_venta1 = (float)$producto['precio_venta1'];
                                        $precio_venta2 = (float)($producto['precio_venta2'] ?? 0);
                                        $precio_venta3 = (float)($producto['precio_venta3'] ?? 0);
                                        $precio_oferta = (float)$producto['oferta'];
                                        
                                        // Encontrar el precio más alto entre los tres precios de venta
                                        $precio_mas_alto = max($precio_venta1, $precio_venta2, $precio_venta3);
                                        
                                        // Determinar si debe subrayarse (solo si el precio más alto es mayor que la oferta)
                                        $debe_subrayar = ($precio_mas_alto > $precio_oferta);
                                        ?>
                                        
                                        <?php if ($debe_subrayar): ?>
                                            <!-- Solo mostrar precio anterior si hay un ahorro real -->
                                            <div class="product-price-original precio-subrayado">
                                                Antes: <?= htmlspecialchars($config['moneda']) ?> <?= number_format($precio_mas_alto, 
                                                                     $config['con_decimales'] ? 2 : 0, 
                                                                     ',', 
                                                                     '.') ?>.-
                                            </div>
                                        <?php endif; ?>
                                        
                                        <!-- Precio de oferta (siempre se muestra con estilo de oferta) -->
                                        <div class="product-price-offer active">
                                            <span class="offer-label">¡OFERTA!</span>
                                            <?= htmlspecialchars($config['moneda']) ?> <?= number_format($producto['oferta'], 
                                                                 $config['con_decimales'] ? 2 : 0, 
                                                                 ',', 
                                                                 '.') ?>.-
                                        </div>
                                    <?php else: ?>
                                        <!-- Precio normal sin oferta -->
                                        <div class="product-price active">
                                            <?= htmlspecialchars($config['moneda']) ?> <?= number_format($producto['precio_venta1'], 
                                                                 $config['con_decimales'] ? 2 : 0, 
                                                                 ',', 
                                                                 '.') ?>.-
                                        </div>
                                    <?php endif; ?>
                                    <div class="precio-cuota"></div>
                                </div>
                                <?php 
                                // Solo mostrar selector de cuotas si el producto tiene precio, NO está en oferta y tiene opciones de cuotas disponibles
                                if ($producto['precio_venta1'] > 0 && (empty($producto['oferta']) || $producto['oferta'] <= 0)) {
                                    // Verificar si hay alguna cuota disponible (de 1 a 36)
                                    $tiene_cuotas = false;
                                    for ($i = 1; $i <= 36; $i++) {
                                        if (isset($producto["cuota$i"]) && $producto["cuota$i"] > 0) {
                                            $tiene_cuotas = true;
                                            break;
                                        }
                                    }
                                    
                                    if ($tiene_cuotas) { 
                                ?>
                                <select class="cuotas-selector" onchange="actualizarPrecioCuota(this)">
                                    <option value="contado" data-precio="<?= $producto['precio_venta1'] ?>">Contado</option>
                                    <?php 
                                    // Generar opciones de cuotas dinámicamente (de 1 a 36)
                                    for ($i = 1; $i <= 36; $i++) {
                                        if (isset($producto["cuota$i"]) && $producto["cuota$i"] > 0) {
                                            $label_cuota = $i == 1 ? "$i cuota" : "$i cuotas";
                                            echo "<option value=\"$i\" data-precio=\"{$producto["cuota$i"]}\">$label_cuota</option>";
                                        }
                                    }
                                    ?>
                                </select>
                                <?php 
                                    }
                                } 
                                ?>
                                <?php if (isset($_SESSION['nombre']) || isset($_SESSION['username']) || isset($_SESSION['usuario_id'])): ?>
    <?php if (!$es_registrador && $producto['precio_venta1'] > 0): ?> <!-- Solo mostrar si no es registrador Y el producto tiene precio -->
        <button class="btn-vender" 
                onclick="iniciarVenta(<?= $producto['id'] ?>, event)">
            <i class="fas fa-shopping-cart"></i> Vender
        </button>
    <?php endif; ?>
<?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div><!-- Cierre de articleList -->

                <?php if ($total_paginas > 1): ?>
                    <div class="pagination">
                        <?php 
                        $filtros_url = '';
                        if ($solo_ofertas) $filtros_url .= '&ofertas=1';
                        if ($seccion_id) $filtros_url .= '&seccion='.$seccion_id;
                        if ($subseccion_id) $filtros_url .= '&subseccion='.$subseccion_id;
                        if ($marca_id) $filtros_url .= '&marca='.$marca_id;
                        ?>
                        
                        <?php if ($pagina_actual > 1): ?>
                            <a href="?pagina=<?= $pagina_actual - 1 ?><?= $filtros_url ?>" class="pagination-btn">
                                <i class="fas fa-chevron-left"></i> Anterior
                            </a>
                        <?php endif; ?>

                        <div class="pagination-numbers">
                            <?php
                            $rango = 2;
                            for ($i = max(1, $pagina_actual - $rango); $i <= min($total_paginas, $pagina_actual + $rango); $i++): 
                            ?>
                                <a href="?pagina=<?= $i ?><?= $filtros_url ?>" 
                                   class="pagination-number <?= $i === $pagina_actual ? 'active' : '' ?>">
                                    <?= $i ?>
                                </a>
                            <?php endfor; ?>
                        </div>

                        <?php if ($pagina_actual < $total_paginas): ?>
                            <a href="?pagina=<?= $pagina_actual + 1 ?><?= $filtros_url ?>" class="pagination-btn">
                                Siguiente <i class="fas fa-chevron-right"></i>
                            </a>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
                
                <!-- Banner de Métodos de Pago dentro del área de productos -->
                <?php include 'includes/payment_methods_banner.php'; ?>
                
            </div><!-- Cierre de main -->
        </div><!-- Cierre de central -->
    </div><!-- Cierre de wrapper -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h4><strong>Empresa</strong></h4>
                <p><?= htmlspecialchars($config['nombre_comercio']) ?></p>
                <p><?= htmlspecialchars($config['razon_social']) ?></p>
                <p><?= htmlspecialchars($config['ruc']) ?></p>
            </div>
            <div class="footer-section">
                <h4>Dirección y Contacto</h4>
                <p><?= htmlspecialchars($config['direccion']) ?></p>
                <p><strong>Tel:</strong> <?= htmlspecialchars($config['telefono']) ?></p>
                <p><strong>Email:</strong> <?= htmlspecialchars($config['correo']) ?></p>
            </div>
            <div class="footer-section">
                <h4>Enlaces</h4>
                <p><a href="https://<?= htmlspecialchars($config['sitio_web']) ?>">
                    <strong>Web Oficial:</strong> <?= htmlspecialchars($config['sitio_web']) ?>
                </a></p>
                <div class="social-links">
                    <?php if (!empty($config['facebook_url'])): ?>
                        <a href="https://<?= htmlspecialchars($config['facebook_url']) ?>" target="_blank">
                            <i class="fab fa-facebook"></i>
                        </a>
                    <?php endif; ?>
                    <?php if (!empty($config['instagram_url'])): ?>
                        <a href="https://<?= htmlspecialchars($config['instagram_url']) ?>" target="_blank">
                            <i class="fab fa-instagram"></i>
                        </a>
                    <?php endif; ?>
                    <?php if (!empty($config['whatsapp'])): ?>
                        <a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $config['whatsapp']) ?>" target="_blank">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </footer>

    <?php if (!$sitio_ok): ?>
    <div id="avisoConstructor" style="
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    ">
        <div style="
            background: white;
            padding: 30px;
            border-radius: 10px;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        ">
            <h2 style="margin-bottom: 20px; color: #ff2b1c;">¡Sitio en Mantenimiento!</h2>
            <p style="margin-bottom: 20px; font-size: 16px; line-height: 1.5;">
                Este sitio está actualmente en mantenimiento. Los datos y funcionalidades mostrados pueden no reflejar 
                el estado final del sitio. Por favor, tenga esto en cuenta durante su navegación.
            </p>
            <button onclick="cerrarAvisoConstructor()" style="
                background: #ff2b1c;
                color: white;
                border: none;
                padding: 10px 30px;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
            ">Entendido</button>
        </div>
    </div>

    <script>
    function cerrarAvisoConstructor() {
        document.getElementById('avisoConstructor').style.display = 'none';
    }
    </script>
    <?php endif; ?>

    <script>
        function actualizarPrecioCuota(selectElement) {
            // Mantener solo esta función ya que es necesaria para las cuotas
            const pricesContainer = selectElement.closest('.product-info').querySelector('.prices-container');
            const precioContadoElement = pricesContainer.querySelector('.product-price');
            const precioCuotaElement = pricesContainer.querySelector('.precio-cuota');
            
            const selectedOption = selectElement.options[selectElement.selectedIndex];
            const precio = parseFloat(selectedOption.dataset.precio);
            const cuotas = selectElement.value;
            const moneda = '<?= htmlspecialchars($config['moneda']) ?>';
            const conDecimales = <?= $config['con_decimales'] ? 'true' : 'false' ?>;
            
            if (cuotas === 'contado') {
                precioContadoElement.classList.add('active');
                precioCuotaElement.classList.remove('active');
            } else {
                precioContadoElement.classList.remove('active');
                precioCuotaElement.classList.add('active');
                const textoCuotas = cuotas == 1 ? `${cuotas} cuota de` : `${cuotas} cuotas de`;
                precioCuotaElement.innerHTML = `${textoCuotas}<br> ${moneda} ${formatNumber(precio, conDecimales)}.-/mes`;
            }
        }

        function formatNumber(num, conDecimales) {
            return num.toLocaleString('es-PY', {
                minimumFractionDigits: conDecimales ? 2 : 0,
                maximumFractionDigits: conDecimales ? 2 : 0
            }).replace(',', '.');
        }

        // Mantener el código de animación del banner y lluvia
        let rainAnimation;
        let rainDrops = [];
        let rainCanvas;
        let rainCtx;

        class RainDrop {
            constructor(canvas) {
                this.canvas = canvas;
                this.reset();
            }

            reset() {
                this.x = Math.random() * this.canvas.width;
                this.y = -50; // Empezar fuera de la pantalla
                this.speed = 10 + Math.random() * 15;
                this.length = 15 + Math.random() * 25;
                this.opacity = 0.1 + Math.random() * 0.2; // Reducir opacidad
                this.thickness = 0.5 + Math.random() * 1; // Reducir grosor
            }

            draw(ctx) {
                ctx.beginPath();
                ctx.moveTo(this.x, this.y);
                ctx.lineTo(this.x + 1, this.y + this.length);
                ctx.strokeStyle = `rgba(255, 255, 255, ${this.opacity})`; // Gotas blancas
                ctx.lineWidth = this.thickness;
                ctx.stroke();

                this.y += this.speed;
                this.x += this.speed * 0.05; // Movimiento diagonal más sutil

                if (this.y > this.canvas.height) {
                    this.reset();
                }
            }
        }

        function initRain() {
            if (rainAnimation) {
                cancelAnimationFrame(rainAnimation);
            }

            rainCanvas = document.getElementById('rainCanvas');
            if (!rainCanvas) return;
            
            rainCtx = rainCanvas.getContext('2d');
            rainDrops = [];
            const numDrops = 150;

            function resizeCanvas() {
                const banner = document.querySelector('.banner');
                if (!banner) return;
                
                rainCanvas.width = banner.offsetWidth;
                rainCanvas.height = banner.offsetHeight;
            }

            function startRainAnimation() {
                if (!rainCanvas || !rainCtx) return;

                rainCtx.clearRect(0, 0, rainCanvas.width, rainCanvas.height);
                rainCtx.fillStyle = 'rgba(255, 255, 255, 0.02)';
                rainCtx.fillRect(0, 0, rainCanvas.width, rainCanvas.height);

                rainDrops.forEach(drop => drop.draw(rainCtx));
                rainAnimation = requestAnimationFrame(startRainAnimation);
            }

            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();

            // Limpiar gotas existentes y crear nuevas
            rainDrops = [];
            for (let i = 0; i < numDrops; i++) {
                rainDrops.push(new RainDrop(rainCanvas));
            }

            // Iniciar animación
            startRainAnimation();
        }

        // Observador para detectar cambios en el DOM
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length) {
                    const banner = document.querySelector('.banner');
                    if (banner && !banner.dataset.rainInitialized) {
                        banner.dataset.rainInitialized = true;
                        initRain();
                    }
                }
            });
        });

        // Configurar el observador
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        // Inicializar efectos cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', () => {
            rotateBanners();
            initRain();
        });

        // Reiniciar lluvia cuando se cambie de página
        window.addEventListener('pageshow', () => {
            initRain();
        });

        // Limpiar animación cuando se abandone la página
        window.addEventListener('pagehide', () => {
            if (rainAnimation) {
                cancelAnimationFrame(rainAnimation);
            }
        });

        // Si el navegador soporta la API de visibilidad de página
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                if (rainAnimation) {
                    cancelAnimationFrame(rainAnimation);
                }
            } else {
                initRain();
            }
        });

        function rotateBanners() {
            const banners = document.querySelectorAll('.banner-slide');
            let currentIndex = 0;
            
            // Ocultar todos los banners excepto el primero
            banners.forEach((banner, index) => {
                banner.style.display = index === 0 ? 'block' : 'none';
            });

            setInterval(() => {
                // Ocultar banner actual
                banners[currentIndex].style.display = 'none';
                banners[currentIndex].classList.remove('active');
                
                // Calcular siguiente índice
                currentIndex = (currentIndex + 1) % banners.length;
                
                // Mostrar siguiente banner
                banners[currentIndex].style.display = 'block';
                banners[currentIndex].classList.add('active');
            }, 4000); // Cambiar cada 4 segundos
        }

        // Inicializar tanto la lluvia como la rotación de banners cuando el documento esté listo
        document.addEventListener('DOMContentLoaded', () => {
            rotateBanners();
            initRain();
        });

        // ...resto del código existente...

        // Agregar este código antes del cierre del script
        document.addEventListener('DOMContentLoaded', function() {
            // Manejar clics en los encabezados de los bloques
            const blkHeaders = document.querySelectorAll('#secondary .blk .hdr');
            
            // Función para mostrar el contenido del bloque
            function showBlockContent(block) {
                const content = block.querySelector('.content');
                if (content) {
                    // Mostrar el contenido inmediatamente
                    content.style.display = 'block';
                    content.style.opacity = '1';
                    content.style.transform = 'translateY(0)';
                    block.classList.add('active');
                    console.log('Bloque activado:', block);
                }
            }
            
            // Función para ocultar el contenido del bloque
            function hideBlockContent(block) {
                block.classList.remove('active');
                const content = block.querySelector('.content');
                if (content) {
                    content.style.display = 'none';
                    content.style.opacity = '0';
                    content.style.transform = 'translateY(-10px)';
                }
                setTimeout(() => {
                    const content = block.querySelector('.content');
                    if (content && window.innerWidth <= 768) {
                        content.style.display = 'none';
                    }
                }, 300); // Tiempo igual a la duración de la transición
            }
            
            // Función para manejar el toggle de los bloques
            function toggleBlock(header) {
                // Solo ejecutar en vista móvil
                if (window.innerWidth <= 768) {
                    const blk = header.closest('.blk');
                    
                    // Si el bloque ya está activo, cerrarlo
                    if (blk.classList.contains('active')) {
                        hideBlockContent(blk);
                        return;
                    }
                    
                    // Cerrar otros bloques activos
                    document.querySelectorAll('#secondary .blk.active').forEach(activeBlk => {
                        if (activeBlk !== blk) {
                            hideBlockContent(activeBlk);
                        }
                    });
                    
                    // Abrir el bloque actual
                    showBlockContent(blk);
                }
            }
            
            blkHeaders.forEach(header => {
                // Agregar evento de clic para mouse
                header.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    toggleBlock(this);
                });
                
                // Agregar evento táctil para dispositivos móviles
                header.addEventListener('touchend', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    toggleBlock(this);
                });
            });

            // Manejar cambios de tamaño de ventana
            window.addEventListener('resize', function() {
                if (window.innerWidth > 768) {
                    // Mostrar contenido en desktop
                    document.querySelectorAll('#secondary .blk .content').forEach(content => {
                        content.style.display = 'block';
                        content.style.opacity = '1';
                        content.style.transform = 'translateY(0)';
                    });
                } else {
                    // Ocultar contenido en móvil si no está activo
                    document.querySelectorAll('#secondary .blk:not(.active) .content').forEach(content => {
                        content.style.display = 'none';
                        content.style.opacity = '0';
                        content.style.transform = 'translateY(-10px)';
                    });
                }
            });
            
            // Asegurarse de que los bloques estén correctamente configurados al cargar la página
            if (window.innerWidth <= 768) {
                document.querySelectorAll('#secondary .blk .content').forEach(content => {
                    content.style.display = 'none';
                    content.style.opacity = '0';
                    content.style.transform = 'translateY(-10px)';
                });
                
                // Asegurarse de que ningún bloque tenga la clase 'active' al inicio
                document.querySelectorAll('#secondary .blk').forEach(block => {
                    if (block.classList.contains('active')) {
                        block.classList.remove('active');
                    }
                });
            }
        });

        // Modificar la función iniciarVenta para que sea más simple
        function iniciarVenta(productoId) {
            window.location.href = 'venta.php?producto_id=' + productoId;
        }
    </script>

    <div id="productos-container"></div>
    <script src="js/buscador.js"></script>
    <script>
    // Función para establecer cookie
    function setCookie(name, value, days) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    // Función para obtener cookie
    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for(let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
        }
        return null;
    }

    // Función para aplicar el modo oscuro
    function applyDarkMode(isDark) {
        if (isDark) {
            document.documentElement.setAttribute('data-theme', 'dark');
            document.getElementById('darkModeToggle').innerHTML = '<i class="fas fa-sun"></i>';
        } else {
            document.documentElement.removeAttribute('data-theme');
            document.getElementById('darkModeToggle').innerHTML = '<i class="fas fa-moon"></i>';
        }
    }

    // Inicializar el modo oscuro según la cookie
    document.addEventListener('DOMContentLoaded', () => {
        const darkMode = getCookie('darkMode');
        if (darkMode === 'true') {
            applyDarkMode(true);
        }
    });

    // Manejar el clic en el botón de modo oscuro
    document.getElementById('darkModeToggle').addEventListener('click', () => {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
        const newDarkMode = !isDark;
        
        setCookie('darkMode', newDarkMode, 365); // Guardar preferencia por 1 año
        applyDarkMode(newDarkMode);
    });
    </script>
    
    <!-- Script para manejar los bloques en móvil -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Verificar si estamos en móvil
        if (window.innerWidth <= 768) {
            // Asegurarse de que todos los bloques estén contraídos al inicio
            document.querySelectorAll('#secondary .blk').forEach(blk => {
                // Remover cualquier clase active que pudiera tener
                blk.classList.remove('active');
                
                // Ocultar el contenido
                const content = blk.querySelector('.content');
                if (content) {
                    content.style.display = 'none';
                    content.style.opacity = '0';
                    content.style.transform = 'translateY(-10px)';
                }
            });
            
            // Agregar evento de clic directo a los encabezados
            document.querySelectorAll('#secondary .blk .hdr').forEach(header => {
                header.addEventListener('click', function() {
                    const blk = this.closest('.blk');
                    const isActive = blk.classList.contains('active');
                    
                    // Cerrar todos los bloques
                    document.querySelectorAll('#secondary .blk').forEach(b => {
                        b.classList.remove('active');
                        const c = b.querySelector('.content');
                        if (c) {
                            c.style.display = 'none';
                            c.style.opacity = '0';
                            c.style.transform = 'translateY(-10px)';
                        }
                    });
                    
                    // Si el bloque no estaba activo, abrirlo
                    if (!isActive) {
                        blk.classList.add('active');
                        const content = blk.querySelector('.content');
                        if (content) {
                            content.style.display = 'block';
                            content.style.opacity = '1';
                            content.style.transform = 'translateY(0)';
                        }
                    }
                });
            });
        }
    });
    </script>

    <!-- Sistema Dinámico de Productos (Solo Escritorio) -->
    <script src="assets/js/dynamic-products.js"></script>
    
</body>
</html>



