/**
 * Sugerencias del buscador.
 *
 * En escritorio caen bajo el campo de la cabecera; en móvil se entra por la
 * lupa y todo vive dentro de un panel lateral, el mismo cristal que el menú.
 * Sin JavaScript no se pinta ninguna: el formulario lleva a la página de
 * resultados y aquí no sobra nada.
 */

/* ------------------------------------------------ La lista de sugerencias */

.bx-sugerencias {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 95;
	overflow: hidden;
	padding: 8px;
	border-radius: var(--bx-r-m);
	/* El mismo radio para el recorte del velo mágico, que si no abre la lista
	   con las esquinas cuadradas. Ver .bx-magico en componentes.css. */
	--bx-radio-magia: var(--bx-r-m);
}

.bx-sugerencias[hidden] {
	display: none;
}

/* Cuando la lista se rehace al escribir, el contenedor no salta de golpe de
   cuatro resultados a uno: va de un alto al otro. El JavaScript le pone el alto
   de partida y el de llegada; el salto seco se leía como un parpadeo del panel
   entero. */
.bx-sugerencias {
	transition: height .28s cubic-bezier(.22, .9, .3, 1);
}

/* Y la fila que entra no aparece de golpe: sube un pelo mientras se enciende,
   mientras las que repiten se quedan quietas y con su foto intacta. */
.bx-sugerencia--nace {
	animation: bx-sugerencia-nace .32s cubic-bezier(.22, .9, .3, 1) both;
}

@keyframes bx-sugerencia-nace {
	from { transform: translateY(6px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bx-sugerencias {
		transition: none;
	}

	.bx-sugerencia--nace {
		animation: none;
	}
}

.bx-sugerencias__lista {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx .bx-sugerencia__enlace {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: var(--bx-e-2);
	padding: 8px;
	border-radius: var(--bx-r-s);
	color: var(--bx-texto-2);
	text-decoration: none;
	transition: background .16s ease, color .16s ease;
}

.bx .bx-sugerencia__enlace:hover,
.bx .bx-sugerencia__enlace:focus-visible {
	background: rgba(255, 255, 255, .06);
	color: var(--bx-texto);
}

.bx-sugerencia__foto {
	overflow: hidden;
	width: 56px;
	height: 56px;
	border-radius: 9px;
	background: rgba(0, 0, 0, .35);
}

.bx .bx-sugerencia__foto img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.bx-sugerencia__datos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bx-sugerencia__nombre {
	color: var(--bx-texto);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.25;
	/* Dos líneas como mucho: los nombres largos no pueden estirar la lista. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bx-sugerencia__precio {
	color: var(--bx-accent);
	font-size: .88rem;
	font-weight: 600;
}

.bx-sugerencia__precio del {
	margin-right: 6px;
	color: var(--bx-texto-3);
	font-weight: 500;
}

.bx-sugerencias__vacio {
	margin: 0;
	padding: 10px 8px;
	color: var(--bx-texto-3);
	font-size: .88rem;
}

/* El botón de siempre: ver la búsqueda completa. */
.bx .bx-sugerencias__todos {
	display: block;
	margin-top: 6px;
	padding: 11px 12px;
	border: 1px solid var(--bx-cta-borde);
	border-radius: var(--bx-r-s);
	background: var(--bx-cta-fondo);
	box-shadow: var(--bx-cta-glow);
	color: var(--bx-cta-texto);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
	text-decoration: none;
}

.bx .bx-sugerencias__todos:hover,
.bx .bx-sugerencias__todos:focus-visible {
	color: #ffffff;
	filter: brightness(1.12);
}

/* --------------------------------------------- El buscador de móvil */

.bx-buscador-movil {
	position: relative;
}

.bx-buscador-movil__disparador {
	list-style: none;
	cursor: pointer;
}

.bx-buscador-movil__disparador::-webkit-details-marker {
	display: none;
}

.bx-buscador-movil__aspa {
	display: none;
}

.bx-buscador-movil[open] .bx-buscador-movil__lupa {
	display: none;
}

.bx-buscador-movil[open] .bx-buscador-movil__aspa {
	display: inline-flex;
}

/* Abierto, el propio disparador se convierte en la X del panel: así se cierra
   aunque no haya JavaScript, igual que en el menú. */
.bx-buscador-movil[open] > .bx-buscador-movil__disparador {
	position: fixed;
	/* A la altura del centro del campo, no sobre él. */
	top: calc(var(--bx-drawer-arriba) + 20px);
	right: calc(max(var(--bx-drawer-lado), 50vw - 280px) + 14px);
	z-index: 92;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(210, 236, 248, .42);
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)), rgba(9, 26, 38, .3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	color: #ffffff;
}

.bx-buscador-movil[open] > .bx-buscador-movil__disparador .bx-accion__texto {
	display: none;
}

.bx-buscador-movil__velo {
	position: fixed;
	inset: 0;
	z-index: 88;
	background: rgba(0, 4, 9, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: bx-velo-entra .28s ease both;
}

/* El panel del buscador no es un menú: no tiene sentido dejarlo pegado a un
   lado con la página asomando por el otro, porque lo que se busca está dentro.
   Va centrado, ocupando el ancho de la pantalla menos su margen, se queda
   arriba junto a la cabecera y crece con los resultados. */
.bx-drawer--buscador {
	left: var(--bx-drawer-lado);
	right: var(--bx-drawer-lado);
	bottom: auto;
	width: auto;
	max-width: 560px;
	margin: 0 auto;
	max-height: calc(100vh - var(--bx-drawer-arriba) - var(--bx-drawer-abajo));
	/* Entra desde arriba, no desde el costado: nace de la lupa de la cabecera. */
	animation: bx-buscador-entra .26s cubic-bezier(.22, .9, .3, 1) both;
}

@keyframes bx-buscador-entra {
	from { transform: translateY(-12px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.bx-drawer--buscador .bx-drawer__interior {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-2);
	width: 100%;
	/* Sitio a la derecha para el aspa, que va en línea con el campo. */
	padding: 12px 12px 12px;
	overflow-y: auto;
}

/* El campo deja libre la esquina del aspa en vez de pasar por debajo: antes se
   solapaban y el texto de dentro quedaba cortado. */
.bx .bx-drawer--buscador .bx-buscador--movil {
	margin-right: 48px;
}

/* En el panel el campo es más estrecho que en la cabecera: el rótulo de dentro
   se cortaba a media palabra. */
.bx .bx-drawer--buscador .bx-buscador__campo {
	font-size: .95rem;
}

/* Pista mientras no hay nada escrito: el panel abierto y vacío no decía nada. */
.bx-buscador-movil__pista {
	margin: 0;
	padding: 2px 4px 6px;
	color: var(--bx-texto-3);
	font-size: .82rem;
}

.bx-sugerencias:not([hidden]) ~ .bx-buscador-movil__pista {
	display: none;
}

/* Dentro del panel, la lista no flota: va debajo del campo, en el flujo. */
.bx-drawer--buscador .bx-sugerencias {
	position: static;
	padding: 0;
	border: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

/* Filas más compactas que en escritorio: en el móvil caben cinco y tienen que
   verse las cinco sin desplazarse. */
.bx-drawer--buscador .bx-sugerencia + .bx-sugerencia {
	border-top: 1px solid rgba(190, 240, 252, .12);
}

.bx-drawer--buscador .bx-sugerencia__enlace {
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 10px;
	padding: 9px 6px;
	border-radius: 10px;
}

.bx-drawer--buscador .bx-sugerencia__foto {
	width: 48px;
	height: 48px;
	border-radius: 8px;
}

.bx-drawer--buscador .bx-sugerencia__nombre {
	font-size: .86rem;
	line-height: 1.3;
}

.bx-drawer--buscador .bx-sugerencia__precio {
	font-size: .82rem;
}

/* El botón cierra el panel de lado a lado, con el mismo aire que las filas. */
.bx-drawer--buscador .bx-sugerencias__todos {
	margin-top: 10px;
	padding: 12px;
}

.bx .bx-buscador--movil {
	display: block;
	max-width: none;
	margin: 0;
}


/* En escritorio la lupa sobra: el campo está a la vista en la cabecera. */
@media (min-width: 992px) {
	.bx-buscador-movil {
		display: none;
	}

	.bx-buscador-movil[open] {
		display: block;
	}
}