/**
 * Estilos específicos para mejorar la visualización de imágenes de productos
 * Complementa los estilos base con mejoras para que las imágenes se vean completas
 */

/* RESPONSIVE MÓVIL - FORZAR 2 PRODUCTOS POR LÍNEA */
@media (max-width: 768px) {
    /* Asegurar que el grid-item ocupe exactamente la mitad del ancho disponible */
    .grid-item {
        width: calc(50% - 6px) !important;
        min-width: 150px !important;
        max-width: 180px !important;
        flex: 0 0 calc(50% - 6px) !important;
        margin-bottom: 12px !important;
    }
    
    /* Contenedores de grilla con 2 columnas exactas */
    .grid-container,
    .bebidasgrid,
    .smoothiessgrid,
    .molidogrid,
    .cafeteriagrid,
    .cappugrid,
    .lattesgrid,
    .frappessgrid,
    .chocolategrid,
    .sintaccgrid,
    .desayunogrid,
    .desayunocompartirgrid,
    .gourmetgrid,
    .saladosgrid,
    .sandwichgrid,
    .limonadagrid,
    .detoxgrid,
    .smothiegrid,
    .easyfrut,
    .panaderiagrid,
    .pasteleriagrid,
    .tortasgrid,
    .cuadradosgrid,
    .muffinsgrid,
    .ensaladasgrid,
    .almuerzogrid,
    .giftcardgrid,
    .cafeterasgrid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 12px !important;
    }
}

/* MÓVILES MUY PEQUEÑOS - TAMBIÉN 2 POR LÍNEA */
@media (max-width: 480px) {
    .grid-item {
        width: calc(50% - 6px) !important;
        min-width: 140px !important;
        max-width: 170px !important;
        flex: 0 0 calc(50% - 6px) !important;
    }
    
    .grid-container,
    .bebidasgrid,
    .smoothiessgrid,
    .molidogrid,
    .cafeteriagrid,
    .cappugrid,
    .lattesgrid,
    .frappessgrid,
    .chocolategrid,
    .sintaccgrid,
    .desayunogrid,
    .desayunocompartirgrid,
    .gourmetgrid,
    .saladosgrid,
    .sandwichgrid,
    .limonadagrid,
    .detoxgrid,
    .smothiegrid,
    .easyfrut,
    .panaderiagrid,
    .pasteleriagrid,
    .tortasgrid,
    .cuadradosgrid,
    .muffinsgrid,
    .ensaladasgrid,
    .almuerzogrid,
    .giftcardgrid,
    .cafeterasgrid {
        gap: 8px !important;
        padding: 8px !important;
    }
}

/* OPTIMIZACIÓN DE ESPACIADO - REDUCCIÓN DE ESPACIOS EXCESIVOS */
.bebida-descripcion,
.sandwich-descripcion,
.easyfrut-descripcion,
.pasteleria-descripcion,
.menu-descripcion,
.giftcard-descripcion,
.cafetera-descripcion,
.molido-descripcion,
.cafeteria-descripcion,
.chocolate-descripcion,
.sintacc-descripcion,
.desayuno-descripcion,
.gourmet-descripcion {
    font-size: 11px;
    color: #666;
    line-height: 1.3;
    margin-bottom: 4px !important; /* Reducido de 8px a 4px */
    padding: 0;
}

/* OPTIMIZACIÓN DE TIEMPOS - UNIFICADO */
.bebida-tiempo,
.sandwich-tiempo,
.easyfrut-tiempo,
.pasteleria-tiempo,
.menu-tiempo,
.giftcard-tiempo,
.cafetera-tiempo,
.molido-tiempo,
.cafeteria-tiempo,
.chocolate-tiempo,
.sintacc-tiempo,
.desayuno-tiempo,
.gourmet-tiempo {
    font-size: 11px;
    color: #28a745;
    font-weight: 500;
    margin-bottom: 4px !important; /* Reducido para consistencia */
    display: flex;
    align-items: center;
    gap: 4px;
}

.bebida-tiempo i,
.sandwich-tiempo i,
.easyfrut-tiempo i,
.pasteleria-tiempo i,
.menu-tiempo i,
.giftcard-tiempo i,
.cafetera-tiempo i,
.molido-tiempo i,
.cafeteria-tiempo i,
.chocolate-tiempo i,
.sintacc-tiempo i,
.desayuno-tiempo i,
.gourmet-tiempo i {
    margin-right: 0;
}

/* Estilo especial para tiempo extendido (después de 18hs y fines de semana) */
.bebida-tiempo.tiempo-extendido,
.sandwich-tiempo.tiempo-extendido,
.easyfrut-tiempo.tiempo-extendido,
.pasteleria-tiempo.tiempo-extendido,
.menu-tiempo.tiempo-extendido,
.giftcard-tiempo.tiempo-extendido,
.cafetera-tiempo.tiempo-extendido,
.molido-tiempo.tiempo-extendido,
.cafeteria-tiempo.tiempo-extendido,
.chocolate-tiempo.tiempo-extendido,
.sintacc-tiempo.tiempo-extendido,
.desayuno-tiempo.tiempo-extendido,
.gourmet-tiempo.tiempo-extendido {
    color: #ffc107;
    font-weight: 600;
}

/* MEJORAS PARA IMÁGENES - OCUPAR TODO EL ESPACIO DISPONIBLE */
.bebida-imagen-container,
.sandwich-imagen-container,
.easyfrut-imagen-container,
.pasteleria-imagen-container,
.menu-imagen-container,
.giftcard-imagen-container,
.cafetera-imagen-container,
.molido-imagen-container,
.cafeteria-imagen-container,
.chocolate-imagen-container,
.sintacc-imagen-container,
.desayuno-imagen-container,
.gourmet-imagen-container {
    background: transparent !important; /* Sin fondo de color */
    border: none !important; /* Sin bordes */
    position: relative;
    overflow: hidden;
    width: 100% !important;
    height: 120px !important; /* Altura fija para consistencia */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sin efectos de shimmer - contenedores completamente limpios */

/* Sin efectos hover especiales - diseño completamente limpio */

/* MEJORAS ESPECÍFICAS PARA IMÁGENES - OCUPAR ESPACIO COMPLETO SIN CORTARSE */
.bebida-imagen,
.sandwich-imagen,
.easyfrut-imagen,
.pasteleria-imagen,
.menu-imagen,
.giftcard-imagen,
.cafetera-imagen,
.molido-imagen,
.cafeteria-imagen,
.chocolate-imagen,
.sintacc-imagen,
.desayuno-imagen,
.gourmet-imagen {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 120px;
    object-fit: contain !important; /* Imagen entera sin cortarse */
    object-position: center;
    filter: contrast(1.1) brightness(1.05);
    transition: all 0.3s ease;
    display: block;
    border: none !important; /* Sin bordes en las imágenes */
}

/* Efecto hover mejorado */
.bebida-imagen:hover,
.sandwich-imagen:hover,
.easyfrut-imagen:hover,
.pasteleria-imagen:hover,
.menu-imagen:hover,
.giftcard-imagen:hover,
.cafetera-imagen:hover,
.molido-imagen:hover,
.cafeteria-imagen:hover,
.chocolate-imagen:hover,
.sintacc-imagen:hover,
.desayuno-imagen:hover,
.gourmet-imagen:hover {
    filter: contrast(1.2) brightness(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

/* RESPONSIVE MEJORADO - IGUAL EN ESCRITORIO Y MÓVIL */
@media (max-width: 768px) {
    .bebida-imagen-container,
    .sandwich-imagen-container,
    .easyfrut-imagen-container,
    .pasteleria-imagen-container,
    .menu-imagen-container,
    .giftcard-imagen-container,
    .cafetera-imagen-container,
    .molido-imagen-container,
    .cafeteria-imagen-container,
    .chocolate-imagen-container,
    .sintacc-imagen-container,
    .desayuno-imagen-container,
    .gourmet-imagen-container {
        height: 100px !important; /* Reducido en móvil pero consistente */
        border: none !important; /* Sin bordes también en móvil */
    }
    
    .bebida-imagen,
    .sandwich-imagen,
    .easyfrut-imagen,
    .pasteleria-imagen,
    .menu-imagen,
    .giftcard-imagen,
    .cafetera-imagen,
    .molido-imagen,
    .cafeteria-imagen,
    .chocolate-imagen,
    .sintacc-imagen,
    .desayuno-imagen,
    .gourmet-imagen {
        max-height: 100px;
    }
    
    /* Reducir espaciado en móvil */
    .bebida-descripcion,
    .sandwich-descripcion,
    .easyfrut-descripcion,
    .pasteleria-descripcion,
    .menu-descripcion,
    .giftcard-descripcion,
    .cafetera-descripcion,
    .molido-descripcion,
    .cafeteria-descripcion,
    .chocolate-descripcion,
    .sintacc-descripcion,
    .desayuno-descripcion,
    .gourmet-descripcion {
        margin-bottom: 2px !important;
        font-size: 10px;
    }
    
    .bebida-tiempo,
    .sandwich-tiempo,
    .easyfrut-tiempo,
    .pasteleria-tiempo,
    .menu-tiempo,
    .giftcard-tiempo,
    .cafetera-tiempo,
    .molido-tiempo,
    .cafeteria-tiempo,
    .chocolate-tiempo,
    .sintacc-tiempo,
    .desayuno-tiempo,
    .gourmet-tiempo {
        margin-bottom: 2px !important;
        font-size: 10px;
    }
}

/* MEJORAS PARA PRODUCTOS SIN IMAGEN */
.producto-card-bebida.no-image,
.producto-card-sandwich.no-image,
.producto-card-easyfrut.no-image,
.producto-card-pasteleria.no-image,
.producto-card-menu.no-image,
.producto-card-giftcard.no-image,
.producto-card-cafetera.no-image,
.producto-card-molido.no-image,
.producto-card-cafeteria.no-image,
.producto-card-chocolate.no-image,
.producto-card-sintacc.no-image,
.producto-card-desayuno.no-image,
.producto-card-gourmet.no-image {
    min-height: auto !important;
}

.producto-card-bebida.no-image .bebida-info,
.producto-card-sandwich.no-image .sandwich-info,
.producto-card-easyfrut.no-image .easyfrut-info,
.producto-card-pasteleria.no-image .pasteleria-info,
.producto-card-menu.no-image .menu-info,
.producto-card-giftcard.no-image .giftcard-info,
.producto-card-cafetera.no-image .cafetera-info,
.producto-card-molido.no-image .molido-info,
.producto-card-cafeteria.no-image .cafeteria-info,
.producto-card-chocolate.no-image .chocolate-info,
.producto-card-sintacc.no-image .sintacc-info,
.producto-card-desayuno.no-image .desayuno-info,
.producto-card-gourmet.no-image .gourmet-info {
    padding: 8px 12px;
}

/* Indicador de carga para imágenes */
.image-loading {
    position: relative;
    background: transparent !important; /* Sin fondo en carga */
}

.image-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e9ecef;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mejoras para grid items */
.grid-item-img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.grid-item:hover .grid-item-img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Placeholders para imágenes faltantes */
.image-placeholder {
    background: transparent !important; /* Sin fondo en placeholders */
    border: none !important; /* Sin bordes en placeholders */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.875rem;
    text-align: center;
    opacity: 0.7;
    height: 120px;
}

.image-placeholder::before {
    content: "📷";
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Animaciones de entrada */
@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.image-fade-in {
    animation: fadeInImage 0.5s ease-out;
}

/* Sin fondos específicos por categoría - todas transparentes */
.bebida-imagen-container,
.sandwich-imagen-container,
.easyfrut-imagen-container,
.pasteleria-imagen-container,
.menu-imagen-container,
.giftcard-imagen-container,
.cafetera-imagen-container,
.molido-imagen-container,
.cafeteria-imagen-container,
.chocolate-imagen-container,
.sintacc-imagen-container,
.desayuno-imagen-container,
.gourmet-imagen-container {
    background: transparent !important; /* Todas las categorías sin fondo */
}

/* Estados especiales */
.image-error {
    background: transparent !important; /* Sin fondo en errores */
    border: none !important; /* Sin bordes incluso en errores */
    color: #dc3545;
    opacity: 0.6;
}

.image-success {
    border: none !important; /* Sin bordes en éxito */
    box-shadow: none !important; /* Sin sombras que simulen bordes */
}

/* Optimizaciones de rendimiento */
.bebida-imagen,
.sandwich-imagen,
.easyfrut-imagen,
.pasteleria-imagen,
.menu-imagen,
.giftcard-imagen,
.cafetera-imagen,
.grid-item-img {
    will-change: transform;
    backface-visibility: hidden;
}

/* Mejoras de accesibilidad */
.bebida-imagen:focus,
.sandwich-imagen:focus,
.easyfrut-imagen:focus,
.pasteleria-imagen:focus,
.menu-imagen:focus,
.giftcard-imagen:focus,
.cafetera-imagen:focus,
.grid-item-img:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
    .bebida-imagen-container,
    .sandwich-imagen-container,
    .easyfrut-imagen-container,
    .pasteleria-imagen-container,
    .menu-imagen-container,
    .giftcard-imagen-container,
    .cafetera-imagen-container,
    .molido-imagen-container,
    .cafeteria-imagen-container,
    .chocolate-imagen-container,
    .sintacc-imagen-container,
    .desayuno-imagen-container,
    .gourmet-imagen-container {
        background: transparent !important; /* Sin fondo en modo oscuro */
        border: none !important; /* Sin bordes en modo oscuro */
    }
    
    .image-placeholder {
        background: transparent !important; /* Sin fondo en placeholders modo oscuro */
        border: none !important; /* Sin bordes en placeholders modo oscuro */
        color: #adb5bd;
    }
}