/**
 * 🎨 OPTIMIZACIÓN DE CARGA DE IMÁGENES
 * Transiciones suaves y placeholders mientras cargan
 */

/* Placeholder mientras carga - NO aplicar a imágenes base64 */
img:not(.loaded):not([src^="data:image/"]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade in cuando carga */
img.loaded {
    animation: fadeIn 0.3s ease-in;
}

/* Imágenes base64 no necesitan animación de carga */
img[src^="data:image/"] {
    animation: none !important;
    background: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Error state */
img.error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Lazy loading hint */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Optimizar renderizado de imágenes */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Cards con skeleton mientras cargan */
.category-card:not(.loaded),
.subcategory-card:not(.loaded),
.product-card:not(.loaded) {
    position: relative;
    overflow: hidden;
}

.category-card:not(.loaded)::before,
.subcategory-card:not(.loaded)::before,
.product-card:not(.loaded)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.3) 50%, 
        rgba(255,255,255,0) 100%
    );
    animation: skeleton-shimmer 1.5s infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Optimizar contenido fuera de viewport */
.category-card,
.subcategory-card,
.product-card {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* Reducir layout shift */
img[width][height] {
    height: auto;
}

/* Fix para imágenes base64 - evitar distorsión */
img[src^="data:image/"] {
    object-fit: contain !important;
    background: transparent !important;
    image-rendering: auto !important;
}

/* Contenedor de imágenes mantener proporción */
.category-card img,
.subcategory-card img,
.product-card img {
    min-height: 150px; /* Altura mínima para evitar colapso */
}

/* Wrapper de imagen de producto con altura fija */
.product-img-wrapper {
    position: relative;
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border-radius: 8px;
    overflow: hidden;
}

/* Aspect ratio para imágenes - mantener proporciones */
.category-image,
.subcategory-image,
.product-img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Cambiar a 'contain' para no recortar */
    max-width: 100%;
    display: block;
}

/* Solo aplicar aspect-ratio si no es base64 (para consistencia) */
.category-image:not([src^="data:"]),
.subcategory-image:not([src^="data:"]),
.product-img:not([src^="data:"]) {
    aspect-ratio: 1 / 1; /* Cuadrado 1:1 en lugar de 16:9 */
}