/* ==========================================================================
   Buscador configurable del sitio
   Dos formatos, según el parámetro MENU_BUSCADOR_TIPO:
   - modal: modal de búsqueda que se abre con la lupa del menú
   - barra: barra fija dentro del menú (con panel desplegable)
   Ambos comparten el panel de secciones configurables (Sitio > Buscador).
   ========================================================================== */

:root{
	--buscador-fondo: var(--color-secundario, #1b1f27);
	--buscador-borde: rgba(255, 255, 255, .12);
	--buscador-texto: #ffffff;
	--buscador-texto-suave: rgba(255, 255, 255, .62);
	--buscador-superficie: rgba(255, 255, 255, .06);
	--buscador-superficie-hover: rgba(255, 255, 255, .12);
	--buscador-radio: 16px;
}

/* ---------- Modal de búsqueda ---------- */

/* Sin el width la caja se encoge al contenido: con pocos resultados (o con el cartel de "no se
   encontraron") el diálogo pasaba de 700px a ~540px y saltaba el ancho */
.modal-buscador .modal-dialog{
	width: calc(100% - 1rem);
	max-width: 700px;
}

@media (min-width: 576px){
	.modal-buscador .modal-dialog{
		width: 100%;
	}
}

.modal-buscador .buscador-modal-content{
	background-color: var(--buscador-fondo);
	border: 1px solid var(--buscador-borde);
	border-radius: var(--buscador-radio);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	overflow: hidden;
}

.buscador-input-wrap{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem 1.1rem;
	border-bottom: 1px solid var(--buscador-borde);
}

.buscador-input-form{
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: 1 1 auto;
	min-width: 0;
}

.buscador-input-boton{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--buscador-texto-suave);
	transition: color .2s ease;
}

.buscador-input-boton:hover{
	color: var(--buscador-texto);
}

.buscador-input-icono{
	font-size: 1.15rem;
	color: inherit;
	line-height: 1;
}

/* El navegador dibuja su propia cruz en los input type=search y desentona con el panel */
.buscador-input::-webkit-search-cancel-button,
.buscador-barra-input::-webkit-search-cancel-button{
	-webkit-appearance: none;
	appearance: none;
}

.buscador-input{
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
	color: var(--buscador-texto);
	font-size: .95rem;
	padding: .2rem 0;
}

.buscador-input::placeholder{
	color: var(--buscador-texto-suave);
}

.buscador-input:focus{
	outline: none;
	box-shadow: none;
}

.buscador-input-categorias{
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.buscador-input-categorias .buscador-barra-select{
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--buscador-superficie);
	border: 1px solid var(--buscador-borde);
	border-radius: 999px;
	color: var(--buscador-texto);
	padding: .28rem 1.7rem .28rem .7rem;
	font-size: .8rem;
	max-width: 190px;
	cursor: pointer;
}

/* La flecha nativa del select queda negra sobre el panel oscuro: se dibuja una propia */
.buscador-input-categorias::after{
	content: "";
	position: absolute;
	right: .7rem;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--buscador-texto-suave);
	border-bottom: 1.5px solid var(--buscador-texto-suave);
	transform: rotate(45deg) translateY(-25%);
	pointer-events: none;
}

/* Sin nada escrito (y sin secciones que mostrar) el buscador es solo el campo: se oculta el cuerpo
   vacío y queda la caja redondeada de una sola pieza */
.buscador-modal-content.buscador-sin-cuerpo .buscador-cuerpo{
	display: none;
}

.buscador-modal-content.buscador-sin-cuerpo .buscador-input-wrap{
	border-bottom: 0;
}

.buscador-input-categorias .buscador-barra-select option{
	color: #2c2c2c;
}

.buscador-cerrar{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border: 1px solid var(--buscador-borde);
	border-radius: 50%;
	background-color: transparent;
	color: var(--buscador-texto-suave);
	transition: all .2s ease;
}

.buscador-cerrar:hover{
	background-color: var(--buscador-superficie-hover);
	color: var(--buscador-texto);
}

.buscador-cuerpo{
	max-height: 64vh;
	overflow-y: auto;
	padding: .9rem 1.1rem 1.1rem;
	/* El espacio de la barra queda reservado esté o no: si aparece recién al llegar los resultados,
	   le roba ancho al contenido y todo se corre unos píxeles */
	scrollbar-gutter: stable;
}

/* La barra de desplazamiento usa el color de scroll del sitio (Wizard > Sitio): el track blanco
   que viene por defecto sobre el panel oscuro dejaba el pulgar invisible */
.buscador-cuerpo::-webkit-scrollbar,
.buscador-panel-flotante::-webkit-scrollbar{
	width: 6px;
	height: 6px;
}

.buscador-cuerpo::-webkit-scrollbar-track,
.buscador-panel-flotante::-webkit-scrollbar-track{
	background-color: transparent;
	/* El track arranca más abajo para que el pulgar no quede debajo de las esquinas redondeadas */
	margin: 10px 0;
}

/* Los botones de flecha del scrollbar asomaban recortados por el border-radius del panel.
   Chrome los dibuja igual con display:none en algunos casos: hay que apuntar a cada variante */
.buscador-cuerpo::-webkit-scrollbar-button,
.buscador-panel-flotante::-webkit-scrollbar-button,
.buscador-cuerpo::-webkit-scrollbar-button:single-button,
.buscador-panel-flotante::-webkit-scrollbar-button:single-button,
.buscador-cuerpo::-webkit-scrollbar-button:vertical:start:decrement,
.buscador-panel-flotante::-webkit-scrollbar-button:vertical:start:decrement,
.buscador-cuerpo::-webkit-scrollbar-button:vertical:end:increment,
.buscador-panel-flotante::-webkit-scrollbar-button:vertical:end:increment{
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}

.buscador-cuerpo::-webkit-scrollbar-thumb,
.buscador-panel-flotante::-webkit-scrollbar-thumb{
	background-color: var(--color-scroll, rgba(255, 255, 255, .35));
	border-radius: 3px;
}

/* Solo Firefox: en Chrome, declarar scrollbar-color descarta los ::-webkit-scrollbar de arriba y
   pasa a dibujar el scrollbar nativo del sistema, con sus flechas en las puntas */
@supports (-moz-appearance: none){
	.buscador-cuerpo,
	.buscador-panel-flotante{
		scrollbar-width: thin;
		scrollbar-color: var(--color-scroll, rgba(255, 255, 255, .35)) transparent;
	}
}

/* ---------- Secciones del panel ---------- */

.buscador-panel .buscador-seccion:first-child{
	margin-top: 0;
}

.buscador-seccion + .buscador-seccion{
	margin-top: 1.15rem;
}

/* El bloque de búsquedas recientes siempre está en el DOM (se oculta con d-none): solo cuando
   está visible la primera sección necesita separarse de él */
.buscador-recientes:not(.d-none) + .buscador-panel .buscador-seccion:first-child{
	margin-top: 1.15rem;
}

.buscador-seccion-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .25rem;
}

.buscador-seccion-titulo{
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--buscador-texto-suave);
}

.buscador-seccion-todos{
	font-size: .72rem;
	font-weight: 600;
	color: var(--buscador-texto);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.buscador-seccion-todos:hover{
	color: var(--color-primario);
}

/* ---------- Accesos rápidos (chips) ---------- */

.buscador-chips{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.buscador-chip{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .32rem .75rem;
	border: 1px solid var(--buscador-borde);
	border-radius: 999px;
	background-color: var(--buscador-superficie);
	color: var(--buscador-texto);
	font-size: .7rem;
	line-height: 11px;
	text-decoration: none;
	transition: all .2s ease;
}

.buscador-chip:hover{
	background-color: var(--buscador-superficie-hover);
	border-color: rgba(255, 255, 255, .28);
	color: var(--buscador-texto);
}

.buscador-chip-icono{
	font-size: .9rem;
	line-height: 1;
	opacity: .85;
}

.buscador-chip-imagen{
	width: 16px;
	height: 16px;
	object-fit: cover;
	border-radius: 50%;
}

.buscador-badge{
	display: inline-flex;
	align-items: center;
	padding: .05rem .35rem;
	border-radius: 5px;
	background-color: var(--color-primario);
	color: #ffffff;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* ---------- Tarjetas destacadas ---------- */

.buscador-cards{
	--bs-gutter-x: .75rem;
	--bs-gutter-y: .75rem;
}

.buscador-card{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 92px;
	height: 100%;
	padding: .7rem .8rem;
	border: 1px solid var(--buscador-borde);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: var(--buscador-texto);
	background-color: var(--buscador-card-color, var(--buscador-superficie));
	transition: transform .2s ease, border-color .2s ease;
}

.buscador-card:hover{
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, .3);
	color: var(--buscador-texto);
}

.buscador-card-fondo{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .55;
}

.buscador-card::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .65) 100%);
}

.buscador-card-contenido{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	height: 100%;
}

.buscador-card-encabezado{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: auto;
}

.buscador-card-icono{
	font-size: 1rem;
	line-height: 1;
}

.buscador-card-titulo{
	font-size: .7rem;
	font-weight: 700;
	line-height: 1.25;
}

.buscador-card-descripcion{
	font-size: .62rem;
	color: rgba(255, 255, 255, .78);
	line-height: 1.35;
}

/* ---------- Listado ---------- */

.buscador-lista{
	--bs-gutter-x: .75rem;
	--bs-gutter-y: .35rem;
}

.buscador-lista-item{
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .4rem .5rem;
	border-radius: 9px;
	text-decoration: none;
	color: var(--buscador-texto);
	transition: background-color .2s ease;
}

.buscador-lista-item:hover{
	background-color: var(--buscador-superficie);
	color: var(--buscador-texto);
}

.buscador-lista-avatar{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 8px;
	background-color: var(--buscador-superficie);
	overflow: hidden;
}

.buscador-lista-avatar i{
	font-size: 1rem;
	line-height: 1;
}

.buscador-lista-avatar img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.buscador-lista-texto{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.buscador-lista-titulo{
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .7rem;
	font-weight: 600;
	line-height: 1.3;
	min-width: 0;
}

/* Los títulos del catálogo pueden ser larguísimos: se cortan en una línea con puntos suspensivos
   para que todas las filas midan lo mismo */
.buscador-lista-titulo-texto{
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.buscador-lista-titulo .buscador-badge{
	flex: 0 0 auto;
}

.buscador-lista-descripcion{
	font-size: .6rem;
	color: var(--buscador-texto-suave);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Esqueleto de carga ---------- */

.buscador-esqueleto-bloque{
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .12) 37%, rgba(255, 255, 255, .05) 63%);
	background-size: 400% 100%;
	animation: buscadorEsqueleto 1.4s ease infinite;
}

@keyframes buscadorEsqueleto{
	0%{ background-position: 100% 50%; }
	100%{ background-position: 0 50%; }
}

.buscador-esqueleto-chips{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: 1.15rem;
}

.buscador-esqueleto-chip{
	height: 30px;
	border-radius: 999px;
}

.buscador-esqueleto-cards{
	display: flex;
	gap: .75rem;
	margin-bottom: 1.15rem;
}

.buscador-esqueleto-card{
	flex: 1 1 0;
	height: 92px;
	border-radius: 12px;
}

.buscador-esqueleto-lista{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .5rem .75rem;
}

.buscador-esqueleto-fila{
	display: flex;
	align-items: center;
	gap: .6rem;
}

.buscador-esqueleto-avatar{
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
}

.buscador-esqueleto-texto{
	height: 12px;
	flex: 1 1 auto;
	border-radius: 6px;
}

@media (max-width: 575.98px){
	.buscador-esqueleto-lista{
		grid-template-columns: 1fr;
	}
}

/* ---------- Resultados de la búsqueda ---------- */

/* Aviso de "mostrando resultados para ..." cuando se corrigió un error de tipeo */
.buscador-correccion{
	margin-bottom: .75rem;
	font-size: .72rem;
	color: var(--buscador-texto-suave);
}

.buscador-correccion b{
	color: var(--buscador-texto);
}

.buscador-resultados .shop{
	margin-bottom: 0 !important;
}

.buscador-resultados .project{
	width: 33.333%;
	margin-bottom: .9rem !important;
}

/* Las tarjetas de producto se muestran a escala reducida: adentro del buscador conviven con las
   secciones del panel, no son la grilla de la tienda */
.buscador-resultados figure img{
	object-fit: contain;
}

.buscador-resultados .post-title{
	margin-bottom: .25rem !important;
}

.buscador-resultados .post-title a{
	font-size: .8rem !important;
	line-height: 1.25;
}

.buscador-resultados ins.amount{
	font-size: 1rem !important;
}

.buscador-resultados del.amount{
	font-size: .85rem !important;
}

.buscador-resultados label.amount{
	font-size: .68rem !important;
}

.buscador-resultados .btn-comprar{
	font-size: .75rem !important;
	padding: .15rem .5rem !important;
}

.buscador-resultados .btn-comprar i{
	font-size: .95rem;
}

.buscador-resultados .etiqueta-producto{
	width: 4rem !important;
	height: 2rem !important;
	font-size: .55rem !important;
}

/* La etiqueta de sin stock va en rojo, no en el color de la marca */
.buscador-resultados [id^="etiquetaProductoStock_"]{
	background: #F44336 !important;
}

.buscador-resultados .post-title a,
.buscador-resultados .price,
.buscador-resultados .amount{
	color: var(--buscador-texto) !important;
}

.buscador-resultados h6{
	color: var(--buscador-texto) !important;
}

@media (max-width: 767.98px){
	.buscador-resultados .project{
		width: 50%;
	}
}

/* ---------- Barra fija dentro del menú ---------- */

/* La barra ocupa su propia franja, justo debajo del menú */
.buscador-barra-fila{
	background-color: var(--buscador-fondo);
	padding: .85rem 0 1rem;
}

.buscador-barra-wrap{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.buscador-barra{
	display: flex;
	align-items: center;
	width: 100%;
	height: 42px;
	/* El padding de la derecha es el aire que deja al botón circular respecto del borde */
	padding: 0 3px 0 1rem;
	background-color: #ffffff;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

.buscador-barra-input{
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: none;
	background: transparent;
	color: #2c2c2c;
	font-size: .8rem;
}

.buscador-barra-input::placeholder{
	color: #9a9a9a;
}

.buscador-barra-categorias{
	position: relative;
	display: flex;
	align-items: center;
	height: 60%;
	padding-left: .85rem;
	border-left: 1px solid #e6e6e6;
}

.buscador-barra-categorias .buscador-barra-select{
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	outline: none;
	background: transparent;
	color: #2c2c2c;
	font-size: .8rem;
	padding-right: 1.4rem;
	min-width: 160px;
	max-width: 200px;
	cursor: pointer;
}

.buscador-barra-categorias::after{
	content: "";
	position: absolute;
	right: .5rem;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid #6b6b6b;
	border-bottom: 1.5px solid #6b6b6b;
	transform: rotate(45deg) translateY(-25%);
	pointer-events: none;
}

/* Botón circular metido dentro del campo: mismo radio que la barra, separado de los bordes */
.buscador-barra-boton{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	flex: 0 0 35px;
	margin-left: .6rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-primario);
	color: #ffffff;
	transition: filter .2s ease;
}

.buscador-barra-boton:hover{
	filter: brightness(1.1);
}

.buscador-barra-boton i{
	font-size: 1rem;
	line-height: 1;
}

.buscador-panel-flotante{
	position: absolute;
	top: calc(100% + .6rem);
	left: 0;
	right: 0;
	z-index: 1040;
	max-height: 66vh;
	overflow-y: auto;
	scrollbar-gutter: stable;
	padding: .9rem 1.05rem 1.05rem;
	background-color: var(--buscador-fondo);
	border: 1px solid var(--buscador-borde);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.buscador-panel-flotante .buscador-resultados .project{
	width: 50%;
}

/* En celulares la barra ocupa todo el ancho: el selector de categorías se achica y el panel de
   sugerencias pasa a ocupar la pantalla desde abajo del menú */
@media (max-width: 767.98px){
	.buscador-barra-fila{
		padding: .6rem 0 .7rem;
	}

	.buscador-barra-wrap{
		max-width: 100%;
	}

	.buscador-barra{
		height: 40px;
		/* Mismo aire que deja el selector después de la línea divisoria */
		padding-left: .45rem;
		padding-right: 4px;
	}

	.buscador-barra-categorias{
		padding-left: .45rem;
	}

	/* La flecha va un poco más al borde y el texto gana ese espacio: si no, la "s" de Categorías
	   queda pegada al chevron */
	.buscador-barra-categorias::after{
		right: .35rem;
	}

	.buscador-barra-categorias .buscador-barra-select{
		width: 118px;
		min-width: 108px;
		max-width: 108px;
		font-size: .75rem;
		padding-right: .85rem;
	}

	.buscador-barra-boton{
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		margin-left: .5rem;
	}

	/* Anclado al campo, no al viewport: con position fixed y top auto el navegador lo ubicaba por la
	   posición estática y el panel terminaba saliéndose por arriba de la pantalla */
	.buscador-panel-flotante{
		position: absolute;
		top: calc(100% + .4rem);
		left: 0;
		right: 0;
		max-height: 65vh;
		border-radius: 12px;
	}

	.buscador-panel-flotante .buscador-resultados .project{
		width: 50%;
	}
}

/* En celulares la barra sigue en su propia franja debajo del menu: el nav puede
   envolver y la barra ocupa la fila entera, al final */
.header-nav .container:has(.buscador-barra-fila){
	flex-wrap: wrap !important;
}

.header-nav .container:has(.buscador-barra-fila) > .navbar-brand{
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
}

.header-nav .container:has(.buscador-barra-fila) > .navbar-other{
	width: auto !important;
	flex: 0 0 auto;
}

.header-nav .buscador-barra-fila{
	flex: 0 0 100%;
	max-width: 100%;
	order: 5;
}

/* ---------- Desktop: la barra va en la fila del menu y el menu baja ----------
   El buscador se incluye como ultimo hijo del container del nav; con flex-wrap
   y order, queda entre el logo y los iconos, y las opciones del menu pasan a
   una segunda linea completa. En celulares no cambia nada. */
@media (min-width: 992px){
	/* El logo no crece: con flex:1 se repartía el espacio sobrante con la barra y quedaba ocupando
	   varios cientos de píxeles, corriendo el buscador hacia la derecha */
	.header-nav .container:has(.buscador-barra-fila) > .navbar-brand{
		order: 1;
		flex: 0 0 auto;
		width: auto !important;
	}

	.header-nav .buscador-barra-fila{
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
		background-color: transparent;
		padding: 0;
		margin: 0 1.5rem;
	}

	.header-nav .buscador-barra-fila .container{
		padding: 0;
		max-width: none;
	}

	.header-nav .container:has(.buscador-barra-fila) > .navbar-other{
		order: 3;
	}

	.header-nav .container:has(.buscador-barra-fila) > .navbar-collapse{
		order: 4;
		flex: 0 0 100%;
		max-width: 100%;
		margin-top: .35rem;
	}
}