/* ============================================================================
 * 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;
}

/* Vista LISTA: mismo trato de "card" (borde/redondeo/sombra) que el grid, para
 * que cada resultado se vea bien también en lista. En lista, jquery-grid-list.js
 * quita `estilos-items` de la <li> (queda `.card`), por eso se apunta a
 * `#products.list li`. NO se toca el layout horizontal (imagen float, etc.). */
#products.list li {
	border: 1px solid var(--gris-200);
	border-radius: var(--radio);
	box-shadow: var(--sombra-card);
	transition: box-shadow var(--transicion), border-color var(--transicion);
}
#products.list li:hover {
	box-shadow: var(--sombra-card-hover);
	border-color: var(--gris-100);
}

/* ===========================================================================
 * 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.
 *
 *    COMPARADOR (solo baterías): ese flujo mete un hijo extra
 *    `.contenedor-labels-comparador` (etiquetas "Baterías recomendada / Otras
 *    alternativas") como PRIMER hijo del <ul>. En vez de excluirlo del grid, se
 *    INTEGRA manteniendo el diseño ancho de v2: la fila de etiquetas ocupa TODO
 *    el ancho (`grid-column: 1 / -1`) → queda como cabecera sobre las cards; y el
 *    footer de cada card se ancla abajo (`margin-top:auto`, la <li> ya es flex
 *    column por grid-list) → las cards estiran a IGUAL altura hasta los botones.
 *    El marcador `.box-shadow-li` (solo lo emite el 1er <li> con
 *    `solo_baterias_search == 1`) acota el anclado del footer al comparador.
 *    `:has` ya es patrón del tema v2 (p.ej. producto.css).
 * ========================================================================= */

/* Contenedor: de floats de 220px fijos → grid fluido.
 * `width:91.5%` = el MISMO ancho que la vista lista (`ul.list` del <style> del
 * twig) y que la cabecera `.widthright` → alternar grid↔lista ya NO cambia el
 * ancho del contenedor (antes: grid=100% vs lista=91.5% → salto visible).
 * `auto-FILL` (no auto-fit): mantiene la estructura de columnas aunque haya pocos
 * resultados → el MISMO número de columnas para TODAS las búsquedas y 1 resultado
 * NO se estira a todo el ancho (auto-fit colapsaba las columnas vacías). */
#products.grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--esp-4);
	width: 91.5%;                      /* = ul.list / .widthright (sin salto al togglear) */
	margin: 0;                         /* anula el `margin:0 auto` de grid-list (que lo centraba) → alineado a la izquierda como la lista/cabecera */
	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;
}

/* Cards más ALTAS en v2 (solo desktop; móvil conserva los 463px de v1). Sube el
 * `min-height:463px` de grid-list.css a 520px → más presencia. Aplica a todas las
 * búsquedas (general y comparador comparten `#products.grid`). */
@media (min-width: 601px) {
	#products.grid li.estilos-items {
		min-height: 520px !important;
	}
}

/* COMPARADOR: la fila de etiquetas ocupa todo el ancho (cabecera sobre las cards)
 * y el footer se ancla abajo → cards a igual altura, estiradas hasta los botones. */
#products.grid .contenedor-labels-comparador {
	grid-column: 1 / -1;
}
#products.grid:has(.box-shadow-li) .card-footer-product {
	margin-top: auto;
}

/* 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: 200px !important;
	object-fit: contain !important;
	margin: 0 !important;
}

/* Responsive: en móvil 1 columna (como v1: bajo 493px el `li.clearfix` toma
 * width:100% → 1 card por fila). Ancho 100% = `ul.list` en móvil. La cabecera de
 * etiquetas del comparador sigue a todo el ancho (grid-column: 1/-1 → la única
 * columna). */
@media (max-width: 600px) {
	#products.grid {
		grid-template-columns: 1fr;    /* 1 columna, como v1 (antes: 2 celdas) */
		width: 100%;                   /* = ul.list en móvil */
		gap: var(--esp-2);
	}
	/* Cards más ALTAS también en móvil (sube el min-height:463px de grid-list a
	 * 520px, igual que desktop). Desktop no se toca (su bloque min-width:601px). */
	#products.grid li.estilos-items {
		min-height: 520px !important;
		padding: var(--esp-2) !important;
	}
}