/* ============================================================================
 * tema-v2 / producto.css  —  Fase 7, PR-7.4 (detalle de producto)
 * ----------------------------------------------------------------------------
 * Página clave de CONVERSIÓN. Restila: galería (LightGallery), tablas de specs /
 * cross-reference, el bloque de cantidad y el CTA "Agregar al carrito". El
 * carrusel de "productos relacionados" reusa `.card-item-carousel` → ya viene
 * estilado por home.css (7.2); los divisores `.border-titulo` también (7.2).
 *
 * OVERRIDE-FIRST, scope acotado a clases/ids de la ficha (`.img-plugin`,
 * `#lightgallery`, `.quitar-espacios`, `.btn-agregar-carrito`, `#cantidad`,
 * `#contenedor-precios`). BARANDAS: 0 cambios de markup/JS. Hooks intactos —
 * `#lightgallery` (init LightGallery), `#cantidad`/`maxLengthCheck`,
 * `#btn-add-{id}`/`beforeAddToCart`, wishlist, `#vermas-{n}`/`#dataTables-{n}`
 * (DataTables aplicaciones), `#tbl-prod-compare`, RVSlider, Slick. Sólo forma,
 * sombra y micro-interacción. Imágenes/textos/precios: intactos.
 * ========================================================================== */

/* ===========================================================================
 * 1) GALERÍA  (imagen principal + miniaturas LightGallery)
 * ========================================================================= */
/* Imagen principal: marco limpio (panel blanco, borde suave, radio). */
.img-plugin {
	border: 1px solid var(--gris-200);
	border-radius: var(--radio);
	background-color: var(--blanco);
}
/* Miniaturas (#lightgallery li): redondeo + borde + foco al hover. NO se toca
 * #lightgallery (hook de la librería) ni los data-* que lee. */
#lightgallery .img-responsive-lg {
	border: 1px solid var(--gris-200);
	border-radius: var(--radio-btn);
	transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
#lightgallery li a:hover .img-responsive-lg {
	border-color: var(--bosch-azul);
	box-shadow: var(--sombra-sm);
	transform: translateY(-2px);
}

/* ===========================================================================
 * 2) CANTIDAD + CTA "Agregar al carrito"
 * ========================================================================= */
/* Input de cantidad (#cantidad): ya redondeado por 7.0; se centra el número. */
#cantidad.input-cantidad {
	text-align: center;
}
/* CTA de conversión: `.btn-bosch-primary` ya trae color de marca + hover (7.0);
 * aquí una sombra de reposo para que destaque como acción principal. */
.btn-agregar-carrito {
	box-shadow: var(--sombra-card);
	font-weight: 700;
}

/* ===========================================================================
 * 3) TABLAS de specs / cross-reference  (scope .quitar-espacios)
 *    .quitar-espacios envuelve SOLO las tablas de Características y Cross
 *    Reference → panel redondeado + rayado más suave (sin tocar otras tablas).
 * ========================================================================= */
/* `:has(.table)` → sólo dibuja el panel cuando hay tabla (productos sin specs
 * no muestran caja vacía). En navegadores sin `:has`, la regla se ignora
 * (degradación limpia: queda sólo el rayado suave). */
.quitar-espacios:has(.table) {
	border: 1px solid var(--gris-200);
	border-radius: var(--radio);
	overflow: hidden;
}
.quitar-espacios .table {
	margin-bottom: 0;
}
/* Rayado más suave (neutro de superficie en vez del gris Bootstrap). */
.quitar-espacios .table-striped tbody tr:nth-of-type(odd) th,
.quitar-espacios .table-striped tbody tr:nth-of-type(odd) td {
	background-color: var(--gris-50);
}
.quitar-espacios .table th,
.quitar-espacios .table td {
	border-top-color: var(--gris-100);
}
/* Nombre de la característica (th scope=row): un punto más de color/peso. */
.quitar-espacios .table th[scope="row"] {
	color: var(--texto);
}

/* ===========================================================================
 * 4) Precio  (#contenedor-precios) — sólo aire; color/contenido intactos.
 * ========================================================================= */
#contenedor-precios {
	line-height: var(--lh-cuerpo);
}