/* ESTILOS PARA IMÁGENES PNG EN CATEGORÍAS */

.category-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 24px !important;
}

.category-image {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    background: transparent !important;
}

.category-name {
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Cuando hay imagen, texto más pequeño */
.category-chip .category-image + .category-name {
    font-size: 13px !important;
}

/* Para categorías sin imagen */
.category-chip > i {
    font-size: 18px !important;
    margin-right: 4px !important;
}

/* Hover effects */
.category-chip:hover .category-image {
    transform: scale(1.15) !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25)) !important;
    transition: all 0.2s !important;
}

.category-chip.active .category-image {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) brightness(1.1) !important;
}

/* ESTILOS ESPECÍFICOS POR TEMPLATE */

/* Spotify */
body.catalog-style-spotify .category-image {
    width: 32px !important;
    height: 32px !important;
    filter: drop-shadow(0 2px 8px rgba(29, 185, 84, 0.4)) !important;
}

body.catalog-style-spotify .category-chip:hover .category-image {
    filter: drop-shadow(0 4px 12px rgba(29, 185, 84, 0.6)) brightness(1.1) !important;
}

/* Netflix */
body.catalog-style-netflix .category-image {
    width: 36px !important;
    height: 36px !important;
    filter: drop-shadow(0 3px 8px rgba(229, 9, 20, 0.5)) !important;
}

/* IKEA */
body.catalog-style-ikea .category-image {
    width: 40px !important;
    height: 40px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 88, 163, 0.3)) !important;
}

body.catalog-style-ikea .category-chip:hover .category-image {
    filter: drop-shadow(0 4px 10px rgba(0, 88, 163, 0.5)) !important;
}

/* Amazon */
body.catalog-style-amazon .category-image {
    width: 32px !important;
    height: 32px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* Apple */
body.catalog-style-apple .category-image {
    width: 30px !important;
    height: 30px !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2)) !important;
}

/* Nike */
body.catalog-style-nike .category-image {
    width: 36px !important;
    height: 36px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)) brightness(1.05) !important;
}

/* Gucci */
body.catalog-style-gucci .category-image {
    width: 34px !important;
    height: 34px !important;
    filter: drop-shadow(0 3px 8px rgba(212, 175, 55, 0.4)) !important;
}

/* Tesla */
body.catalog-style-tesla .category-image {
    width: 32px !important;
    height: 32px !important;
    filter: drop-shadow(0 2px 6px rgba(204, 0, 0, 0.3)) brightness(1.1) !important;
}

/* McDonald's */
body.catalog-style-mcdonald .category-image {
    width: 40px !important;
    height: 40px !important;
    filter: drop-shadow(0 2px 6px rgba(218, 41, 28, 0.35)) saturate(1.1) !important;
}

/* Starbucks */
body.catalog-style-starbucks .category-image {
    width: 36px !important;
    height: 36px !important;
    filter: drop-shadow(0 2px 8px rgba(0, 117, 74, 0.4)) !important;
}

/* Zara */
body.catalog-style-zara .category-image {
    width: 30px !important;
    height: 30px !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15)) !important;
}

/* Airbnb */
body.catalog-style-airbnb .category-image {
    width: 34px !important;
    height: 34px !important;
    filter: drop-shadow(0 2px 6px rgba(255, 56, 92, 0.3)) !important;
}

/* Fashion */
body.catalog-style-fashion .category-image {
    width: 32px !important;
    height: 32px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)) !important;
}

/* Furniture */
body.catalog-style-furniture .category-image {
    width: 36px !important;
    height: 36px !important;
    filter: drop-shadow(0 2px 6px rgba(101, 67, 33, 0.3)) !important;
}

/* Restaurant */
body.catalog-style-restaurant .category-image {
    width: 38px !important;
    height: 38px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)) !important;
}

/* Vehicles */
body.catalog-style-vehicles .category-image {
    width: 38px !important;
    height: 38px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important;
}

/* Electronics */
body.catalog-style-electronics .category-image {
    width: 34px !important;
    height: 34px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 102, 204, 0.3)) !important;
}

/* Coffee */
body.catalog-style-coffee .category-image {
    width: 36px !important;
    height: 36px !important;
    filter: drop-shadow(0 2px 6px rgba(101, 67, 33, 0.35)) !important;
}

/* Animación suave */
.category-chip .category-image {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ocultar ícono FA cuando hay imagen */
.category-chip .category-image ~ i {
    display: none !important;
}