/* ============================================================================
   BÚSQUEDA INSTANTÁNEA — panel de sugerencias
   ============================================================================

   El panel cuelga del formulario del buscador, que está en la cabecera y
   aparece en TODAS las páginas. Por eso esta hoja es pequeña y no depende de
   ninguna otra: se carga en cualquier superficie.

   Solo se sirve CSS propio: cero peticiones externas, ni fuentes ni iconos.
   ========================================================================== */

.ma-busqueda {
	/* El panel se coloca en absoluto respecto al formulario. Sin esto se
	   posicionaría respecto al primer ancestro posicionado, que puede estar
	   muy arriba, y saldría en cualquier sitio. */
	position: relative;
}

.ma-busqueda__sugerencias {
	position: absolute;
	z-index: 60; /* por encima de la cabecera pegajosa, que va en 50 */
	top: calc(100% + 0.4rem);
	inset-inline: 0;
	/*
	 * En pantallas estrechas el buscador es más estrecho que su contenido útil:
	 * un mínimo evita que el precio quede partido en tres líneas.
	 */
	min-width: min(30rem, calc(100vw - 2rem));
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r);
	box-shadow: 0 1.1rem 2.4rem -0.6rem rgba(6, 34, 46, 0.22);
	overflow: hidden;
}

.ma-busqueda__sugerencias[hidden] {
	display: none;
}

.ma-busqueda__sugerencias-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: min(26rem, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* --- Cada producto -------------------------------------------------------- */

.ma-busqueda__sugerencias-enlace {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.8rem;
	text-decoration: none;
	color: inherit;
}

.ma-busqueda__sugerencias-opcion + .ma-busqueda__sugerencias-opcion .ma-busqueda__sugerencias-enlace {
	border-top: var(--ma-line);
}

/*
 * Resaltada = la que señala el teclado. Se marca con clase y no con `:hover`
 * porque el teclado no pasa el ratón: sin esto, navegar con las flechas no se
 * vería por ninguna parte.
 */
.ma-busqueda__sugerencias-opcion.is-resaltada .ma-busqueda__sugerencias-enlace,
.ma-busqueda__sugerencias-enlace:hover {
	background: var(--ma-teal-50);
}

.ma-busqueda__sugerencias-enlace:focus-visible {
	outline: 2px solid var(--ma-teal-500);
	outline-offset: -2px;
}

/* --- La foto -------------------------------------------------------------- */

.ma-busqueda__sugerencias-foto {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: 0.6rem;
	overflow: hidden;
}

/*
 * Las fotos del catálogo ya vienen encuadradas en cuadrado con fondo blanco
 * (ver `local/import/encuadrar_catalogo.php`), así que aquí solo hay que
 * contenerlas: no hace falta recortar ni volver a cuadrar nada.
 */
.ma-busqueda__sugerencias-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* --- El texto ------------------------------------------------------------- */

.ma-busqueda__sugerencias-texto {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.ma-busqueda__sugerencias-titulo {
	font-family: var(--ma-font-ui);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ma-ink-900);
	/* Dos líneas como mucho y punto: un nombre larguísimo no puede empujar el
	   precio fuera de la fila. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ma-busqueda__sugerencias-categoria {
	font-size: 0.72rem;
	color: var(--ma-ink-500);
}

/* --- El precio ------------------------------------------------------------ */

.ma-busqueda__sugerencias-precio {
	font-family: var(--ma-font-ui);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ma-ink-900);
	white-space: nowrap;
}

/*
 * CONTRASTE: el texto de "Agotado" mide 11,52 px, así que necesita 4,5:1.
 * `--ma-ink-400` daba 3,12:1; `--ma-ink-500` da 5,71:1.
 */
.ma-busqueda__sugerencias-precio.is-agotado {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--ma-ink-500);
	text-transform: none;
}

/* --- Sin resultados y pie ------------------------------------------------- */

.ma-busqueda__sugerencias-vacio {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.9rem 0.9rem 1rem;
	font-size: 0.85rem;
	color: var(--ma-ink-700);
}

.ma-busqueda__sugerencias-pie {
	border-top: var(--ma-line);
	background: var(--ma-mist);
}

.ma-busqueda__sugerencias-todos {
	display: block;
	padding: 0.6rem 0.9rem;
	font-family: var(--ma-font-ui);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ma-teal-700);
	text-decoration: none;
}

.ma-busqueda__sugerencias-vacio .ma-busqueda__sugerencias-todos {
	padding: 0;
}

.ma-busqueda__sugerencias-todos:hover,
.ma-busqueda__sugerencias-todos:focus-visible {
	text-decoration: underline;
}

/* ============================================================================
   INDICADOR DE CARGA
   ============================================================================

   Entre que se escribe y aparece el panel pasan tres cosas: la espera del
   debounce, la petición y el pintado. Sin nada que mirar, el buscador parece no
   hacer nada y la gente sigue escribiendo o se va.

   SE COLOCA EN EL SITIO DE LA LUPA, no al lado. La lupa es un elemento flex del
   formulario; al ocultarla y mostrar el indicador en su lugar, la caja no cambia
   de tamaño y el texto que se está escribiendo no se mueve ni un píxel. Un
   indicador que empuja lo que escribes es peor que no ponerlo.
   ========================================================================== */

.ma-busqueda__cargando {
	display: none;
	flex: none;
	width: 19px;
	height: 19px;
	box-sizing: border-box;
	border: 2px solid var(--ma-ink-200);
	border-top-color: var(--ma-teal-600);
	border-radius: 50%;
	animation: ma-girar 0.7s linear infinite;
}

.ma-busqueda.is-cargando .ma-busqueda__lupa {
	display: none;
}

.ma-busqueda.is-cargando .ma-busqueda__cargando {
	display: block;
}

@keyframes ma-girar {
	to { transform: rotate(360deg); }
}

@keyframes ma-latir {
	0%, 100% { opacity: 0.25; }
	50%      { opacity: 1; }
}

/*
 * Con movimiento reducido NO gira: late.
 *
 * El giro es justo el tipo de animación que molesta a quien pide movimiento
 * reducido, pero quitar el indicador del todo deja a esa persona sin el aviso.
 * Un parpadeo suave informa sin rotar.
 */
@media (prefers-reduced-motion: reduce) {
	.ma-busqueda__cargando {
		animation: none;
		border-color: var(--ma-teal-600);
		opacity: 0.4;
	}

	.ma-busqueda.is-cargando .ma-busqueda__cargando {
		animation: ma-latir 1.1s ease-in-out infinite;
	}
}