/* ============================================================================
 * tema-v2 / catalogo.css  —  Fase 7, PR-7.3 (catálogo + búsqueda)
 * ----------------------------------------------------------------------------
 * Flujo de ALTO tráfico y CRÍTICO (/shop, búsqueda). El "catálogo" como tal
 * (`Catalogos/productos.html.twig`) es un visor PDF a pantalla completa que NO
 * extiende baseEcommerce → tema-v2 no carga ahí (fuera de alcance). Aquí se
 * restila la página de RESULTADOS + FILTROS (`Busqueda/busqueda.html.twig`).
 *
 * OVERRIDE-FIRST, scope acotado a los contenedores de resultados (#products,
 * .filter-busqueda, #slider-range, .simple-pagination, .itemKeySeach) → inerte
 * en el resto e inocuo para otros .card. BARANDAS: 0 cambios de markup/JS.
 * Hooks intactos — filtros `#formFiltro`/`#ac1..6`/`toggleCheckbox`, slider
 * `#slider-range`/`#min_price`/`#max_price`, comparador `#btn-comparar-{id}`/
 * `.box-shadow-li`/`#tbl-comparador`/`.boton-comparar`, paginación
 * `[id*=compact-pagination]`/`#page{n}`, grid/list `#gridview`/`#listview`,
 * chips `.removeKeySearch`/`deleteFilter`. Sólo forma, sombra, micro-interacción.
 * ========================================================================== */

/* ===========================================================================
 * 1) CARD DE RESULTADO  (li.estilos-items) — equivalente visual a la card 7.2,
 *    pero otra clase. Scope por #products (grid Y list). NO overflow:hidden
 *    (hay badges absolutas .imagen-mejor-opcion / .imagen-left).
 * ========================================================================= */
#products li.estilos-items {
	border: 1px solid var(--gris-200);
	border-right: 1px solid var(--gris-200);   /* vence el divisor `ul.grid li` */
	border-radius: var(--radio);
	box-shadow: var(--sombra-card);
	background-color: var(--blanco);
	transition: transform var(--transicion), box-shadow var(--transicion),
		border-color var(--transicion);
}
#products li.estilos-items:hover {
	transform: translateY(-4px);
	box-shadow: var(--sombra-card-hover);
	border-color: var(--gris-100);
}
/* `.box-shadow-li` (comparador: item seleccionado) ya pinta su sombra azul;
 * que gane sobre el hover normal. */
#products li.estilos-items.box-shadow-li {
	border-color: var(--bosch-azul);
}
/* Título del resultado: hover azul. */
#products .estilos-items .card-title {
	transition: color var(--transicion);
}
#products .estilos-items a:hover .card-title {
	color: var(--bosch-azul) !important;
}

/* ===========================================================================
 * 2) SIDEBAR DE FILTROS  (.filter-busqueda)
 * ========================================================================= */
/* Cabecera "Filtrar por": un poco más de aire + borde inferior. */
.filter-busqueda .box1-header {
	border-bottom: 1px solid var(--gris-200);
	padding-bottom: var(--esp-2);
	margin-bottom: var(--esp-2);
}
/* Etiquetas de grupo (acordeón CSS-only `.ac-input` ~ `.ac-text`): transición
 * de color + hover azul. NO se tocan los inputs `.ac-input*` que lee el JS. */
.filter-busqueda .ac-label-category {
	transition: color var(--transicion);
}
.filter-busqueda .ac-label-category:hover {
	color: var(--bosch-azul);
}
/* Checkboxes de opción (Bootstrap custom-checkbox): acento azul de marca al
 * marcar. Scope al sidebar para no recolorear checkboxes de otras páginas. */
.filter-busqueda .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--bosch-azul) !important;
	border-color: var(--bosch-azul) !important;
}

/* ===========================================================================
 * 3) PRECIO — slider jQuery UI  (#slider-range)
 * ========================================================================= */
#slider-range .ui-slider-handle {
	background: var(--bosch-azul);
	border-radius: var(--radio-pill);
	transition: box-shadow var(--transicion);
}
#slider-range .ui-slider-handle:hover,
#slider-range .ui-slider-handle:focus {
	box-shadow: var(--anillo-foco);
}
.txtprecio,
.ui-slider-input {
	border-radius: var(--radio-input);
}

/* ===========================================================================
 * 4) ORDENAR / FILAS — select2 (#txtordenar / #txtrows) + chips de filtro
 * ========================================================================= */
.select2-container--default .select2-selection--single {
	border-radius: var(--radio-input) !important;
	border-color: var(--gris-200) !important;
}
/* Chips de filtros activos: forma pill. */
.itemKeySeach {
	border-radius: var(--radio-pill);
	transition: background-color var(--transicion);
}
.removeKeySearch {
	transition: color var(--transicion);
	cursor: pointer;
}
.removeKeySearch:hover {
	color: var(--bosch-rojo);
}

/* ===========================================================================
 * 5) PAGINACIÓN  (.simple-pagination)
 * ========================================================================= */
.simple-pagination li a,
.simple-pagination li span {
	border-radius: var(--radio-btn) !important;
	transition: background-color var(--transicion), color var(--transicion);
}
.compact-theme .current {
	background: var(--bosch-azul);
	border-radius: var(--radio-btn);
}

/* ===========================================================================
 * 6) COMPARADOR — botón "Comparar" (.boton-comparar): radio consistente.
 *    El offcanvas/tabla quedan intactos (ya usan azul de marca #003399).
 * ========================================================================= */
.boton-comparar {
	border-radius: var(--radio-btn) !important;
	transition: background-color var(--transicion), box-shadow var(--transicion);
}

/* ===========================================================================
 * 7) GRILLA DE RESULTADOS — layout fluido + imagen con más protagonismo
 *    (feedback Víctor). PRIMER PASE: la "referencia AWS" del rediseño interno no
 *    llegó en el adjunto; aquí se resuelven los puntos inequívocos del texto y se
 *    afina el detalle luego con esa referencia.
 *
 *    Causa de los síntomas: grid-list.css fija `ul.grid li{width:220px!important;
 *    float:left}` (carga DESPUÉS de tema-v2, vía el child `{% block head %}`) →
 *    la fila no se llena (hueco a la derecha) y en móvil cae a 1 card enorme.
 *    Además la imagen va inline a 145x145 con márgenes de 2rem (poco protagonismo).
 *
 *    Fix: #products (vista grid) → CSS Grid fluido (auto-fit + minmax → llena
 *    CUALQUIER ancho y es responsive) e imagen al ancho de la card. Mayor
 *    especificidad (#products…) + !important para vencer al !important de
 *    grid-list. Scope `.grid` → NO afecta la vista lista (`#products.list`, que
 *    alterna jquery-grid-list.js). NO toca borde/redondeo/sombra (sección 1) ni JS.
 * ========================================================================= */

/* Contenedor: de floats de 220px fijos → grid fluido que LLENA la fila. */
#products.grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--esp-4);
	padding-left: 0 !important;        /* anula el padding-left:25px de grid-list */
}

/* Card: ancho fluido (no 220px), sin float ni divisor; el gap separa. */
#products.grid li.estilos-items {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: var(--esp-3) !important;
}

/* IMAGEN con más protagonismo: ocupa el ancho de la card (vs 145px centrada con
 * márgenes de 2rem) y más alto, manteniendo proporción. El !important vence el
 * style inline de la plantilla (que NO usa !important). */
#products .estilos-items .pd-img-search {
	padding: 0 !important;
}
#products .estilos-items .card-img-top.img-carousel {
	width: 100% !important;
	height: 180px !important;
	object-fit: contain !important;
	margin: 0 !important;
}

/* Responsive: en móvil 2 columnas (antes 1 card gigante) + card/imagen compactas
 * (libera el min-height:463px que la hacía "demasiado grande"). */
@media (max-width: 600px) {
	#products.grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--esp-2);
	}
	#products.grid li.estilos-items {
		min-height: 0 !important;
		padding: var(--esp-2) !important;
	}
	#products .estilos-items .card-img-top.img-carousel {
		height: 120px !important;
	}
}