/* ===== OPTIMIZACIÓN DE IMÁGENES - EVITAR SOBRECARGA ===== */

/* Optimización general de imágenes */
img {
    /* Evitar reflow durante la carga */
    max-width: 100%;
    height: auto;
    
    /* Optimización de renderizado */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Prevenir múltiples intentos de carga */
    background-color: #f8f9fa;
}

/* Imágenes de productos */
.product-image img,
.product-image-large img,
.category-card-image img {
    /* Dimensiones fijas para evitar layout shift */
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* Transición suave para cambios de imagen */
    transition: opacity 0.3s ease;
}

/* Placeholder mientras carga */
.product-image,
.product-image-large,
.category-card-image {
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

/* Indicador de carga */
.image-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 0.8rem;
}

/* Optimización para imágenes que fallan */
img[src*="data:image/svg+xml"] {
    /* Estilos específicos para placeholders SVG */
    background-color: #f0f0f0;
    border: 1px solid #e0e0e0;
}

/* Lazy loading optimizado */
img[loading="lazy"] {
    /* Mejor soporte para lazy loading */
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Prevenir múltiples intentos de carga de la misma imagen */
img.error-loaded {
    /* Imagen ya intentó cargar y falló */
    pointer-events: none;
}

/* Optimización para dispositivos móviles */
@media (max-width: 768px) {
    .product-image img,
    .product-image-large img {
        /* Reducir calidad en móviles para mejor rendimiento */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated;
    }
}

/* Optimización para conexiones lentas */
@media (prefers-reduced-data: reduce) {
    img {
        /* Reducir calidad de imagen en conexiones lentas */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated;
    }
    
    .product-image img,
    .product-image-large img {
        /* Usar placeholders más simples */
        background-color: #f0f0f0;
    }
}

/* Animación de carga */
@keyframes imageLoad {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.image-loaded {
    animation: imageLoad 0.3s ease-out;
}

/* Prevenir layout shift */
.product-card,
.category-card {
    /* Mantener proporciones consistentes */
    aspect-ratio: auto;
    min-height: 200px;
}

.product-image,
.category-card-image {
    /* Mantener proporciones consistentes */
    aspect-ratio: 4/3;
    min-height: 150px;
}

/* Optimización para carrusel */
.featured-products-grid img {
    /* Optimización específica para carrusel */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Prevenir múltiples solicitudes de imagen */
img[src*="placeholder"] {
    /* No intentar recargar placeholders */
    pointer-events: none;
    user-select: none;
}