/* 
  Nota: Las variables dinámicas en :root (--body-bg, --primary-color, etc.) 
  se definen directamente en app/Views/layout/header.php para que PHP pueda procesarlas.
*/
        body {
            background-color: var(--body-bg) !important;
            color: var(--text-main) !important;
            font-family: 'Roboto', sans-serif;
            scroll-behavior: smooth;
        }
        .theme-header-bg { background-color: var(--header-bg) !important; color: var(--header-text) !important; }
        .theme-header-text { color: var(--header-text) !important; }
        .theme-footer-bg { background-color: var(--footer-bg) !important; color: var(--footer-text) !important; }
        .theme-footer-text { color: var(--footer-text) !important; }
        .theme-primary-bg { background-color: var(--primary-color) !important; color: var(--primary-text) !important; }
        .theme-primary-text { color: var(--primary-color) !important; }
        .theme-primary-border { border-color: var(--primary-color) !important; }
        .theme-card-bg { background-color: var(--card-bg) !important; border-radius: var(--border-radius) !important; }
        .theme-price-text { color: var(--price-color) !important; }
        header.bg-red-600 { background-color: var(--header-bg) !important; color: var(--header-text) !important; }
        footer.bg-gray-900 { background-color: var(--footer-bg) !important; color: var(--footer-text) !important; }
        .bg-red-600 { background-color: var(--primary-color) !important; }
        .text-red-600 { color: var(--primary-color) !important; }
        .border-red-600 { border-color: var(--primary-color) !important; }
        .decoration-red-500 { text-decoration-color: var(--primary-color) !important; }
        .hover\:bg-red-600:hover { background-color: var(--primary-color) !important; }
        .hover\:text-red-600:hover { color: var(--primary-color) !important; }
        .hover\:border-red-600:hover { border-color: var(--primary-color) !important; }
        .from-red-600 { --tw-gradient-from: var(--primary-color) !important; }
        .to-red-600 { --tw-gradient-to: var(--primary-color) !important; }
        .rounded-xl, .rounded-2xl, .rounded-lg { border-radius: var(--border-radius) !important; }
        .rounded-full { border-radius: 9999px !important; }
        .product-card {
            background-color: var(--card-bg) !important;
        }
        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        .modal-enter {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
            transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal-enter-active {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .float-btn {
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .float-btn:hover {
            transform: scale(1.1) rotate(-5deg);
        }
        #cart-sidebar {
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
        }
        .cart-scroll {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        .cart-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .cart-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .cart-scroll::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            border-radius: 20px;
        }
        
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        
        .sticky-categories {
            position: relative;
            z-index: 30;
        }
        .sticky-categories.is-sticky {
            position: fixed;
            top: 60px; 
            left: 0;
            right: 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        @media (max-width: 768px) {
            .sticky-categories.is-sticky {
                top: 56px;
            }
        }
        
        #category-filters {
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            -webkit-overflow-scrolling: touch;
        }
        #category-filters.active-drag {
            cursor: grabbing;
        }
        #category-filters.active-drag * {
            pointer-events: none;
        }