/* ==========================================================================
   1. UTILIDADES Y GENERALES
========================================================================== */
.cursor-pointer {
    cursor: pointer;
}

/* Efecto hover para el botón "AÑADIR A LA BOLSA" */
.cuerpo-producto button[style*="background-color: #000"] {
    transition: background-color 0.3s ease;
}

.cuerpo-producto button[style*="background-color: #000"]:hover {
    background-color: #333 !important;
}

/* ==========================================================================
   2. ESTILOS DE TALLAS, COLORES Y ESTADOS (SELECCIONADO / AGOTADO)
========================================================================== */
/* Efectos hover para Tallas */
.cuerpo-producto .btn-outline-secondary.rounded-pill {
    transition: all 0.3s ease;
}

.cuerpo-producto .btn-outline-secondary.rounded-pill:hover,
.cuerpo-producto .btn-outline-secondary.rounded-pill.active {
    background-color: #222222 !important;
    color: #fff !important;
    border-color: #222222 !important;
}

/* Efecto hover para los círculos de colores */
.cuerpo-producto .rounded-circle[style*="cursor: pointer"]:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Opciones seleccionadas (Lógica Dinámica) */
.opcion-talla.seleccionado,
.opcion-modelo.seleccionado {
    background-color: #222222 !important;
    color: #fff !important;
    border-color: #222222 !important;
}

.opcion-color.seleccionado {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Estados Agotados (Línea tachada) */
.color-agotado {
    position: relative;
    opacity: 0.4;
    overflow: hidden;
}

.color-agotado::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 1.5px;
    background-color: #000;
    transform: translateY(-50%) rotate(-45deg);
}

.talla-agotada {
    position: relative !important;
    opacity: 0.4;
    cursor: not-allowed !important;
    overflow: hidden;
}

.talla-agotada::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 1.5px;
    background-color: #6c757d;
    transform: translateY(-50%) rotate(-25deg);
    z-index: 1;
}

.talla-agotada:hover {
    background-color: transparent !important;
    color: var(--bs-dark) !important;
    border-color: rgba(108, 117, 125, 0.25) !important;
}

/* ==========================================================================
   3. GALERÍA DE IMÁGENES Y MINIATURAS
========================================================================== */
/* Efecto hover para imágenes de galería */
.cuerpo-producto img.cursor-pointer {
    transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.cuerpo-producto img.cursor-pointer:not(.border-dark):hover {
    opacity: 0.7;
    border-color: #999 !important;
}

/* Caja de miniaturas (Base general) */
.caja-miniaturas {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch; 
}

.caja-miniaturas img {
    width: 75px !important; 
    height: auto !important;
    flex-shrink: 0 !important; 
}

/* ---------------------------------------------------
   SOLO CELULARES: Forzar barra horizontal
--------------------------------------------------- */
@media (max-width: 767.98px) {
    .caja-miniaturas {
        overflow-x: scroll !important; 
    }
    
    .caja-miniaturas::-webkit-scrollbar {
        height: 6px !important; 
        display: block !important; 
    }
    .caja-miniaturas::-webkit-scrollbar-track {
        background-color: #f1f1f1 !important; 
        border-radius: 10px !important;
    }
    .caja-miniaturas::-webkit-scrollbar-thumb {
        background-color: #c1c1c1 !important; 
        border-radius: 10px !important;
    }
    .caja-miniaturas::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8 !important; 
    }
}

/* ---------------------------------------------------
   SOLO PC: Columna delgada limpia (Sin barra horizontal)
--------------------------------------------------- */
@media (min-width: 768px) {
    .caja-miniaturas {
        width: 80px !important;
        max-width: 80px !important;
        overflow-x: hidden !important; /* Oculta la barra inferior rebelde */
        overflow-y: auto !important;   /* Habilita scroll vertical solo si tienes muchas fotos */
    }
    
    .caja-miniaturas img {
        width: 100% !important;
    }

    /* Le damos un estilo muy sutil a la barra vertical por si tienes 8+ fotos */
    .caja-miniaturas::-webkit-scrollbar {
        width: 4px !important;
    }
    .caja-miniaturas::-webkit-scrollbar-track {
        background-color: transparent !important;
    }
    .caja-miniaturas::-webkit-scrollbar-thumb {
        background-color: #e0e0e0 !important;
        border-radius: 4px !important;
    }
}

/* ==========================================================================
   4. MODAL DEL VISOR DE IMÁGENES
========================================================================== */
.modal-backdrop.show {
    opacity: 0.9 !important; 
    background-color: #000;
}

@media (max-width: 991.98px) {
    #visorImagenModal .btn-close {
        right: 15px !important;
        top: 15px !important;
    }
}

/* ==========================================================================
   5. REDES SOCIALES (COMPARTIR)
========================================================================== */
.icono-compartir i {
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.icono-compartir:hover i {
    transform: scale(1.15); 
}

.icono-compartir .fa-facebook-f:hover { color: #1877F2; }
.icono-compartir .fa-x-twitter:hover { color: #000000; }
.icono-compartir .fa-telegram:hover { color: #24A1DE; }
.icono-compartir .fa-whatsapp:hover { color: #25D366; }
.icono-compartir .fa-link:hover { color: #0F9D8A; }

/* ==========================================================================
   ANIMACIÓN SUAVE PARA CAMBIO DE IMAGEN PRINCIPAL
========================================================================== */
.animacion-fade {
    animation: fadeInSuave 0.4s ease-in-out;
}

@keyframes fadeInSuave {
    0% { 
        opacity: 0.5; 
        transform: scale(0.99); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}