/* ==================== ESTILOS PROFESIONALES PARA CATEGORÍAS ==================== */
/* Estilos mejorados y modernos para templates genéricos (no marcas) */

/* ===== FURNITURE - Elegante y Espacioso ===== */
body.catalog-style-furniture .categories-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px 0;
    border-bottom: 3px solid #dee2e6;
}

body.catalog-style-furniture .category-chip {
    background: white;
    border: 2px solid #adb5bd;
    border-radius: 12px;
    padding: 14px 24px;
    font-weight: 600;
    color: #495057;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.catalog-style-furniture .category-chip:hover {
    background: #f8f9fa;
    border-color: #6c757d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body.catalog-style-furniture .category-chip.active {
    background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
    border-color: #495057;
    color: white;
    box-shadow: 0 4px 16px rgba(73,80,87,0.4);
}

/* ===== FASHION - Moderno y Chic ===== */
body.catalog-style-fashion .categories-section {
    background: linear-gradient(135deg, #fff5f7 0%, #ffe6ed 100%);
    padding: 20px 0;
}

body.catalog-style-fashion .category-chip {
    background: white;
    border: 2px solid #ffc0cb;
    border-radius: 20px;
    padding: 12px 22px;
    font-weight: 600;
    color: #d63384;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

body.catalog-style-fashion .category-chip:hover {
    background: linear-gradient(135deg, #fff 0%, #fff5f7 100%);
    border-color: #d63384;
    transform: scale(1.05);
}

body.catalog-style-fashion .category-chip.active {
    background: linear-gradient(135deg, #d63384 0%, #c11b6b 100%);
    border-color: #d63384;
    color: white;
    box-shadow: 0 4px 20px rgba(214,51,132,0.4);
}

/* ===== RESTAURANT - Clásico y Apetitoso ===== */
body.catalog-style-restaurant .categories-section {
    background: linear-gradient(135deg, #fff8e7 0%, #ffe8cc 100%);
    padding: 20px 0;
}

body.catalog-style-restaurant .category-chip {
    background: white;
    border: 2px solid #fd7e14;
    border-radius: 15px;
    padding: 13px 24px;
    font-weight: 700;
    color: #d63301;
    box-shadow: 0 2px 8px rgba(253,126,20,0.15);
}

body.catalog-style-restaurant .category-chip:hover {
    background: #fff8e7;
    border-color: #d63301;
    transform: translateY(-3px);
}

body.catalog-style-restaurant .category-chip.active {
    background: linear-gradient(135deg, #fd7e14 0%, #d63301 100%);
    border-color: #fd7e14;
    color: white;
    box-shadow: 0 4px 16px rgba(253,126,20,0.4);
}

/* ===== VEHICLES - Deportivo y Dinámico ===== */
body.catalog-style-vehicles .categories-section {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
    padding: 20px 0;
}

body.catalog-style-vehicles .category-chip {
    background: rgba(255,255,255,0.1);
    border: 2px solid #e63946;
    border-radius: 8px;
    padding: 14px 26px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    backdrop-filter: blur(10px);
}

body.catalog-style-vehicles .category-chip:hover {
    background: rgba(230,57,70,0.2);
    border-color: #f1faee;
    transform: skewX(-2deg);
}

body.catalog-style-vehicles .category-chip.active {
    background: linear-gradient(135deg, #e63946 0%, #d62828 100%);
    border-color: #e63946;
    color: white;
    box-shadow: 0 4px 20px rgba(230,57,70,0.6);
}

/* ===== ELECTRONICS - Tech y Futurista ===== */
body.catalog-style-electronics .categories-section {
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
    padding: 20px 0;
}

body.catalog-style-electronics .category-chip {
    background: rgba(0,240,255,0.05);
    border: 2px solid #00f0ff;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    color: #00f0ff;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    box-shadow: 0 0 15px rgba(0,240,255,0.2);
}

body.catalog-style-electronics .category-chip:hover {
    background: rgba(0,240,255,0.15);
    border-color: #00f0ff;
    box-shadow: 0 0 25px rgba(0,240,255,0.4);
    transform: translateY(-2px);
}

body.catalog-style-electronics .category-chip.active {
    background: linear-gradient(135deg, #00f0ff 0%, #0088ff 100%);
    border-color: #00f0ff;
    color: #0a0e27;
    box-shadow: 0 4px 30px rgba(0,240,255,0.5);
}

/* ===== CAFE/COFFEE - Acogedor y Cálido ===== */
body.catalog-style-cafe .categories-section,
body.catalog-style-coffee .categories-section {
    background: linear-gradient(135deg, #f4e8d8 0%, #e6d5c3 100%);
    padding: 20px 0;
}

body.catalog-style-cafe .category-chip,
body.catalog-style-coffee .category-chip {
    background: white;
    border: 2px solid #8b6f47;
    border-radius: 25px;
    padding: 13px 22px;
    font-weight: 600;
    color: #5c4033;
    box-shadow: 0 2px 8px rgba(139,111,71,0.15);
}

body.catalog-style-cafe .category-chip:hover,
body.catalog-style-coffee .category-chip:hover {
    background: #f9f3eb;
    border-color: #5c4033;
    transform: scale(1.05);
}

body.catalog-style-cafe .category-chip.active,
body.catalog-style-coffee .category-chip.active {
    background: linear-gradient(135deg, #8b6f47 0%, #5c4033 100%);
    border-color: #8b6f47;
    color: white;
    box-shadow: 0 4px 16px rgba(139,111,71,0.4);
}

/* ===== CLINIC - Salud y Bienestar ===== */
body.catalog-style-clinic .categories-section {
    background: linear-gradient(135deg, #e8f5f7 0%, #d4ebef 100%);
    padding: 20px 0;
}

body.catalog-style-clinic .category-chip {
    background: white;
    border: 2px solid #17a2b8;
    border-radius: 12px;
    padding: 14px 24px;
    font-weight: 600;
    color: #138496;
    box-shadow: 0 2px 8px rgba(23,162,184,0.1);
}

body.catalog-style-clinic .category-chip:hover {
    background: #e8f5f7;
    border-color: #138496;
    transform: translateY(-2px);
}

body.catalog-style-clinic .category-chip.active {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    border-color: #17a2b8;
    color: white;
    box-shadow: 0 4px 16px rgba(23,162,184,0.4);
}

/* ===== PHOTOGRAPHY - Portfolio Creativo ===== */
body.catalog-style-photography .categories-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    padding: 20px 0;
}

body.catalog-style-photography .category-chip {
    background: rgba(255,255,255,0.05);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(10px);
}

body.catalog-style-photography .category-chip:hover {
    background: rgba(255,215,0,0.15);
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.3);
}

body.catalog-style-photography .category-chip.active {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-color: #ffd700;
    color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(255,215,0,0.5);
}

/* ===== COSMETICS - Beauty & Makeup ===== */
body.catalog-style-cosmetics .categories-section {
    background: linear-gradient(135deg, #ffe5f1 0%, #ffd6e8 100%);
    padding: 20px 0;
}

body.catalog-style-cosmetics .category-chip {
    background: white;
    border: 2px solid #ff69b4;
    border-radius: 30px;
    padding: 12px 22px;
    font-weight: 600;
    color: #ff1493;
    box-shadow: 0 3px 10px rgba(255,105,180,0.2);
}

body.catalog-style-cosmetics .category-chip:hover {
    background: linear-gradient(135deg, #fff 0%, #ffe5f1 100%);
    border-color: #ff1493;
    transform: scale(1.08);
}

body.catalog-style-cosmetics .category-chip.active {
    background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
    border-color: #ff69b4;
    color: white;
    box-shadow: 0 4px 20px rgba(255,105,180,0.5);
}

/* ===== SERVICES - Profesional y Confiable ===== */
body.catalog-style-services .categories-section {
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
    padding: 20px 0;
}

body.catalog-style-services .category-chip {
    background: white;
    border: 2px solid #2c5282;
    border-radius: 10px;
    padding: 14px 26px;
    font-weight: 600;
    color: #2c5282;
    box-shadow: 0 2px 8px rgba(44,82,130,0.15);
}

body.catalog-style-services .category-chip:hover {
    background: #f0f4f8;
    border-color: #1a365d;
    transform: translateY(-2px);
}

body.catalog-style-services .category-chip.active {
    background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
    border-color: #2c5282;
    color: white;
    box-shadow: 0 4px 16px rgba(44,82,130,0.4);
}

/* ===== SOFTWARE - Programas y Sistemas ===== */
body.catalog-style-software .categories-section {
    background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
    padding: 20px 0;
}

body.catalog-style-software .category-chip {
    background: rgba(76,201,240,0.1);
    border: 2px solid #4cc9f0;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    color: #4cc9f0;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.5px;
}

body.catalog-style-software .category-chip:hover {
    background: rgba(76,201,240,0.2);
    border-color: #4cc9f0;
    box-shadow: 0 0 20px rgba(76,201,240,0.3);
}

body.catalog-style-software .category-chip.active {
    background: linear-gradient(135deg, #4cc9f0 0%, #4895ef 100%);
    border-color: #4cc9f0;
    color: #0f1419;
    box-shadow: 0 4px 20px rgba(76,201,240,0.5);
}

/* ===== MUSIC - Audio y Sonido ===== */
body.catalog-style-music .categories-section {
    background: linear-gradient(135deg, #2d0054 0%, #4a0082 100%);
    padding: 20px 0;
}

body.catalog-style-music .category-chip {
    background: rgba(199,0,255,0.1);
    border: 2px solid #c700ff;
    border-radius: 25px;
    padding: 13px 24px;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(10px);
}

body.catalog-style-music .category-chip:hover {
    background: rgba(199,0,255,0.25);
    border-color: #ff00ff;
    box-shadow: 0 0 25px rgba(199,0,255,0.5);
    transform: scale(1.05);
}

body.catalog-style-music .category-chip.active {
    background: linear-gradient(135deg, #c700ff 0%, #8900ff 100%);
    border-color: #c700ff;
    color: white;
    box-shadow: 0 4px 25px rgba(199,0,255,0.6);
}

/* ===== MARKET - Verduras y Comida Fresca ===== */
body.catalog-style-market .categories-section {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    padding: 20px 0;
}

body.catalog-style-market .category-chip {
    background: white;
    border: 2px solid #4caf50;
    border-radius: 15px;
    padding: 13px 22px;
    font-weight: 600;
    color: #2e7d32;
    box-shadow: 0 2px 8px rgba(76,175,80,0.15);
}

body.catalog-style-market .category-chip:hover {
    background: #e8f5e9;
    border-color: #2e7d32;
    transform: translateY(-2px);
}

body.catalog-style-market .category-chip.active {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    border-color: #4caf50;
    color: white;
    box-shadow: 0 4px 16px rgba(76,175,80,0.4);
}

/* ===== VITAMINS - Suplementos y Salud ===== */
body.catalog-style-vitamins .categories-section {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    padding: 20px 0;
}

body.catalog-style-vitamins .category-chip {
    background: white;
    border: 2px solid #ff9800;
    border-radius: 20px;
    padding: 13px 24px;
    font-weight: 600;
    color: #e65100;
    box-shadow: 0 2px 8px rgba(255,152,0,0.15);
}

body.catalog-style-vitamins .category-chip:hover {
    background: #fff8e1;
    border-color: #e65100;
    transform: scale(1.05);
}

body.catalog-style-vitamins .category-chip.active {
    background: linear-gradient(135deg, #ff9800 0%, #e65100 100%);
    border-color: #ff9800;
    color: white;
    box-shadow: 0 4px 16px rgba(255,152,0,0.4);
}

/* ===== CLEANING - Productos de Limpieza ===== */
body.catalog-style-cleaning .categories-section {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 20px 0;
}

body.catalog-style-cleaning .category-chip {
    background: white;
    border: 2px solid #2196f3;
    border-radius: 12px;
    padding: 14px 24px;
    font-weight: 600;
    color: #1565c0;
    box-shadow: 0 2px 8px rgba(33,150,243,0.15);
}

body.catalog-style-cleaning .category-chip:hover {
    background: #e3f2fd;
    border-color: #1565c0;
    transform: translateY(-2px);
}

body.catalog-style-cleaning .category-chip.active {
    background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
    border-color: #2196f3;
    color: white;
    box-shadow: 0 4px 16px rgba(33,150,243,0.4);
}

/* ===== HANDICRAFTS - Hecho a Mano ===== */
body.catalog-style-handicrafts .categories-section {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    padding: 20px 0;
}

body.catalog-style-handicrafts .category-chip {
    background: white;
    border: 2px solid #ff6f00;
    border-radius: 18px;
    padding: 13px 22px;
    font-weight: 600;
    color: #e65100;
    box-shadow: 0 2px 8px rgba(255,111,0,0.15);
}

body.catalog-style-handicrafts .category-chip:hover {
    background: #fff3e0;
    border-color: #e65100;
    transform: rotate(-1deg) scale(1.05);
}

body.catalog-style-handicrafts .category-chip.active {
    background: linear-gradient(135deg, #ff6f00 0%, #e65100 100%);
    border-color: #ff6f00;
    color: white;
    box-shadow: 0 4px 16px rgba(255,111,0,0.4);
}

/* ===== MEXICAN - Sabores Tradicionales ===== */
body.catalog-style-mexican .categories-section {
    background: linear-gradient(135deg, #fff9e6 0%, #ffecb3 100%);
    padding: 20px 0;
    border-bottom: 3px solid #ff5722;
}

body.catalog-style-mexican .category-chip {
    background: white;
    border: 2px solid #ff5722;
    border-radius: 15px;
    padding: 13px 24px;
    font-weight: 700;
    color: #d84315;
    box-shadow: 0 2px 8px rgba(255,87,34,0.2);
}

body.catalog-style-mexican .category-chip:hover {
    background: #fff9e6;
    border-color: #d84315;
    transform: translateY(-3px);
}

body.catalog-style-mexican .category-chip.active {
    background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
    border-color: #ff5722;
    color: white;
    box-shadow: 0 4px 16px rgba(255,87,34,0.4);
}

/* ===== ITALIAN - Auténtica Italia ===== */
body.catalog-style-italian .categories-section {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    padding: 20px 0;
    border-bottom: 3px solid #4caf50;
}

body.catalog-style-italian .category-chip {
    background: white;
    border: 2px solid #4caf50;
    border-radius: 12px;
    padding: 13px 24px;
    font-weight: 600;
    color: #2e7d32;
    box-shadow: 0 2px 8px rgba(76,175,80,0.15);
}

body.catalog-style-italian .category-chip:hover {
    background: #e8f5e9;
    border-color: #2e7d32;
    transform: translateY(-2px);
}

body.catalog-style-italian .category-chip.active {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
    border-color: #4caf50;
    color: white;
    box-shadow: 0 4px 16px rgba(76,175,80,0.4);
}

/* ===== PIZZA - Pizza Artesanal ===== */
body.catalog-style-pizza .categories-section {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    padding: 20px 0;
    border-bottom: 3px solid #ff6f00;
}

body.catalog-style-pizza .category-chip {
    background: white;
    border: 2px solid #ff6f00;
    border-radius: 50px;
    padding: 13px 26px;
    font-weight: 700;
    color: #e65100;
    box-shadow: 0 2px 8px rgba(255,111,0,0.2);
}

body.catalog-style-pizza .category-chip:hover {
    background: #fff8e1;
    border-color: #e65100;
    transform: scale(1.05);
}

body.catalog-style-pizza .category-chip.active {
    background: linear-gradient(135deg, #ff6f00 0%, #e65100 100%);
    border-color: #ff6f00;
    color: white;
    box-shadow: 0 4px 16px rgba(255,111,0,0.4);
}

/* ===== BURGERS - Burgers Premium ===== */
body.catalog-style-burgers .categories-section {
    background: linear-gradient(135deg, #3e2723 0%, #5d4037 100%);
    padding: 20px 0;
}

body.catalog-style-burgers .category-chip {
    background: rgba(255,193,7,0.15);
    border: 2px solid #ffc107;
    border-radius: 12px;
    padding: 14px 26px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
}

body.catalog-style-burgers .category-chip:hover {
    background: rgba(255,193,7,0.3);
    border-color: #ffeb3b;
    transform: translateY(-2px);
}

body.catalog-style-burgers .category-chip.active {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border-color: #ffc107;
    color: #3e2723;
    box-shadow: 0 4px 20px rgba(255,193,7,0.5);
}

/* ==================== RESPONSIVE - MOBILE FIRST ==================== */
@media (max-width: 768px) {
    /* Ajustes generales para móviles */
    body[class*="catalog-style-"] .categories-section {
        padding: 15px 0;
    }
    
    body[class*="catalog-style-"] .category-chip {
        padding: 10px 18px;
        font-size: 13px;
    }
    
    body[class*="catalog-style-"] .category-count {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* Animación de entrada */
@keyframes categorySlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

body[class*="catalog-style-"] .category-chip {
    animation: categorySlideIn 0.3s ease-out;
}