/* 
 * Correcciones para la visualización de productos y optimización de rendimiento
 * Versión 2.0 - Rendimiento mejorado
 * NOTA: Algunos estilos están comentados temporalmente para solucionar problema de espacios en blanco
 */

/* ===== OPTIMIZACIONES DE RENDIMIENTO PARA PRODUCTOS ===== */

/* Optimización de imágenes de productos */
/* Comentado temporalmente para resolver problema de espacios en blanco
.modern-product-img {
    position: relative;
    overflow: hidden;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    contain: content;
}

.modern-product-img img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
    transform: translateZ(0);
    will-change: opacity;
    transition: opacity 0.3s ease;
}
*/

/* Estilo para imágenes no cargadas */
img[data-src]:not(.loaded) {
    opacity: 0;
}

/* Optimizaciones para tarjetas de productos */
.modern-product-card {
    contain: layout style; /* Optimización de rendimiento */
    transform: translateZ(0); /* Forzar aceleración GPU */
    transition: all 0.2s ease-out; /* Transiciones más cortas para mejor rendimiento */
    height: 100%; /* Altura consistente */
    display: flex;
    flex-direction: column;
}

/* ===== CORRECCIONES PARA VISUALIZACIÓN DE PRODUCTOS ===== */

/* Solución para la imagen en el modal */
#productoImgContainer {
    width: 100% !important;
    height: 100% !important;
    position: relative;
    overflow: hidden;
    /* Optimizaciones de rendimiento */
    contain: content;
    will-change: transform;
}

#productoImgTag {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Cambiado de cover a contain para mostrar la imagen completa */
    display: block !important;
    /* Optimizaciones de rendimiento */
    transform: translateZ(0);
    will-change: opacity;
    transition: opacity 0.3s ease;
}

/* Asegurar que el modal tiene altura suficiente */
#productoModal .modal-content {
    min-height: 500px;
    max-height: 90vh;
    overflow: hidden;
    /* Optimizaciones de rendimiento */
    contain: content;
    will-change: transform;
}

/* Asegurar que la imagen toma todo el alto disponible */
#productoModal .col-lg-5.p-0 {
    height: auto !important;
    min-height: 400px;
}

/* Optimizar botones de agregar al carrito */
.btn-add-cart {
    transform: translateZ(0); /* Acelerar con GPU */
    will-change: transform; /* Preparar para animación */
    transition: all 0.2s ease;
}

/* Optimizar modal de producto */
.producto-modal-img {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: translateZ(0);
    will-change: opacity;
}

/* Prevenir saltos de layout durante la carga */
.modern-product-price {
    height: 1.5em; /* Altura fija para precios */
}

/* ===== OPTIMIZACIONES PARA DISPOSITIVOS ESPECÍFICOS ===== */

/* Reducir animaciones en dispositivos de baja gama */
@media (prefers-reduced-motion), (max-width: 767.98px) {
    .modern-product-card:hover {
        transform: translateY(-2px) translateZ(0); /* Animación más sutil */
    }
    
    .modern-product-card,
    .btn-add-cart,
    .modern-product-img img {
        transition-duration: 0.15s !important;
    }
    
    /* Optimizaciones específicas para móviles */
    #productoModal .modal-content {
        min-height: 400px; /* Reducir altura mínima en móviles */
    }
    
    #productoModal .col-lg-6.p-0 {
        min-height: 250px; /* Reducir altura mínima en móviles */
    }
}

/* Estilos compatibles con IE11 - Mantenidos para retrocompatibilidad */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #productoImgContainer {
        position: relative;
        height: 500px !important;
    }
    #productoImgTag {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}