/* ======================================================
   PRODUCTO_DETALLES.CSS – Adaptado 100% a global.css
   Paleta: Blanco – Dorado – Negro
====================================================== */

/* ------------------------------------------------------
   1) Breadcrumb
------------------------------------------------------ */
.breadcrumb-prod {
    color: var(--gris-texto);
    font-size: 0.9rem;
}
.breadcrumb-prod a {
    color: var(--dorado);
}
.breadcrumb-prod a:hover {
    color: var(--dorado-oscuro);
}

/* ------------------------------------------------------
   2) Títulos y texto principal
------------------------------------------------------ */
.product-title {
    color: var(--negro);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ------------------------------------------------------
   3) Precios
------------------------------------------------------ */
.price {
    color: var(--dorado);
    font-size: 2.2rem;
    font-weight: 700;
}

.price-original {
    color: var(--gris-texto);
    text-decoration: line-through;
}

/* Badge del descuento */
.badge-descuento {
    background-color: var(--dorado);
    color: var(--negro);
    font-weight: 600;
    border-radius: 4px;
}

/* ------------------------------------------------------
   4) Carrusel de imágenes
------------------------------------------------------ */
.carousel-item img {
    border-radius: 10px;
    border: 2px solid var(--dorado);
    box-shadow: var(--shadow-soft);
}

.thumbnail {
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .25s ease;
    border-radius: 6px;
}
.thumbnail.active,
.thumbnail:hover {
    border-color: var(--dorado);
    transform: scale(1.04);
}

/* ------------------------------------------------------
   5) Botón "Añadir al carrito"
------------------------------------------------------ */
#btn-add-to-cart {
    background-color: var(--dorado) !important;
    color: var(--negro) !important;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.75rem 1.4rem;
    transition: .25s;
}
#btn-add-to-cart:hover {
    background-color: var(--dorado-oscuro) !important;
}

/* Cuando está agotado */
#btn-add-to-cart:disabled {
    background-color: var(--gris-texto) !important;
    color: var(--blanco) !important;
    cursor: not-allowed;
}

/* ------------------------------------------------------
   6) Tabs de detalles
------------------------------------------------------ */
.nav-tabs .nav-link {
    color: var(--negro);
    background-color: var(--gris-suave);
    border: 1px solid #dcdcdc;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    background-color: var(--dorado);
    color: var(--negro);
    border-color: var(--dorado);
}

/* Contenedor */
#productDetailsContent {
    background-color: var(--blanco);
    border: 1px solid #e0e0e0;
    border-top: none;
    padding: 1.5rem;
}

/* ------------------------------------------------------
   7) Listas en descripción
------------------------------------------------------ */
.product-description ul li,
#details ul li {
    margin-bottom: 6px;
    color: var(--negro);
}

/* ------------------------------------------------------
   8) Tarjeta de calificaciones
------------------------------------------------------ */
.card-calificar {
    background-color: var(--blanco);
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}

.card-calificar .card-title {
    color: var(--negro);
    font-weight: 600;
}

/* Botón enviar calificación */
.btn-enviar-calificacion {
    background-color: var(--dorado);
    color: var(--negro);
    border: none;
    padding: .7rem;
    border-radius: 6px;
    font-weight: 600;
    transition: .25s;
}
.btn-enviar-calificacion:hover {
    background-color: var(--dorado-oscuro);
}

/* Estrellas */
#estrellas i {
    color: var(--dorado);
    cursor: pointer;
    font-size: 1.8rem;
    transition: .2s ease;
}
#estrellas i:hover {
    transform: scale(1.15);
}

/* ------------------------------------------------------
   9) Cards de productos relacionados
------------------------------------------------------ */
.card-relacionado {
    background: var(--blanco);
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    transition: .25s;
    box-shadow: var(--shadow-soft);
}

.card-relacionado:hover {
    transform: translateY(-4px);
    border-color: var(--dorado);
}

.card-relacionado .card-title {
    color: var(--negro);
    font-weight: 600;
}

.card-relacionado .precio-rel {
    color: var(--dorado);
    font-size: 1.1rem;
    font-weight: 700;
}

/* Imagen relacionada */
.card-relacionado img {
    object-fit: cover;
    height: 220px;
    border-radius: 10px 10px 0 0;
}

/* ------------------------------------------------------
   10) Responsive pequeños ajustes
------------------------------------------------------ */
@media (max-width: 576px) {
    .price {
        font-size: 1.8rem;
    }
    #btn-add-to-cart {
        font-size: 1rem;
    }
}