/**
 * search-suggest.css — panel del autocomplete. Tokens de la casa (rojo/negro/
 * crema), sin dependencias. Mantener liviano (presupuesto del buscador).
 */
.akb-suggest-panel {
	position: absolute;
	z-index: 60;
	left: 0;
	right: 0;
	top: calc( 100% + 4px );
	max-height: min( 70vh, 480px );
	overflow-y: auto;
	background: var( --aki-surface, #fffdf7 );
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 10px;
	/* Acento rojo: eco de la cuña del campo (misma firma, NO franja llena —
	 * decisión de branding 2026-07-06) [Fase 1 §5]. */
	box-shadow: inset 3px 0 0 var( --aki-red-dark, #a00010 ), 0 12px 32px rgba( 0, 0, 0, 0.18 );
	padding: 4px;
}

.akb-suggest-item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.akb-suggest-item {
	transition: background-color 140ms cubic-bezier( 0.23, 1, 0.32, 1 );
}

.akb-suggest-item.is-active,
.akb-suggest-item:hover,
.akb-suggest-item:focus {
	background: rgba( 200, 16, 46, 0.08 );
	/* Color EXPLÍCITO: el `a:hover{color:var(--contrast)}` global del theme
	 * (#222 sobre panel #111 ≈ 1,2:1) le gana por especificidad (0,1,1) al
	 * `color:inherit` (0,1,0) del reposo y hacía DESAPARECER título y precio
	 * al pasar el mouse; solo sobrevivían el <mark> y el badge, que tienen
	 * color propio [QA 2026-07-05, reporte del dueño]. */
	color: var( --aki-gray-200, #e0e0e0 );
}

.akb-suggest-thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	flex: 0 0 auto;
	background: rgba( 0, 0, 0, 0.05 );
}

.akb-suggest-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.akb-suggest-title {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	/* Hasta 2 líneas en vez de 1 con ellipsis: los títulos de manga son largos
	 * ("Jujutsu Kaisen 0 Movie Edition…") y se cortaban aun con espacio, porque
	 * el panel hereda el ancho del input [fix autocomplete 2026-07-06]. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.akb-suggest-title mark {
	background: transparent;
	/* Rojo para TEXTO sobre el panel oscuro: --aki-red (#e60012) daba 3,9:1 a
	 * 14px < AA 4,5:1 [QA 2026-07-04 P2]. --aki-red-text es el token del theme
	 * para exactamente esto (5,2:1 sobre #111). OJO: --aki-red-readable NO
	 * sirve acá — es el rojo para fondos CLAROS (#CC0010, 2,9:1 en oscuro). */
	color: var( --aki-red-text, #ff4756 );
	font-weight: 700;
}

.akb-suggest-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	opacity: 0.85;
}

.akb-suggest-badge {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 1px 6px;
	border-radius: 999px;
}

/* Texto de badge aclarado para AA sobre el panel oscuro (los tonos profundos
 * #16803d/#c8102e/#666 quedaban en ~3,4:1 a 10,9px) [QA 2026-07-04 P2].
 * Ratios sobre #111: verde 8,9:1 · rojo (--aki-red-text) 5,2:1 · gris 8,0:1. */
.akb-badge-ok { background: rgba( 22, 128, 61, 0.18 ); color: #46c97c; }
.akb-badge-pre { background: rgba( 200, 16, 46, 0.16 ); color: var( --aki-red-text, #ff4756 ); }
.akb-badge-out { background: rgba( 255, 255, 255, 0.08 ); color: #a9a9a9; }

/* Footer "Ver los N resultados": comparte .akb-suggest-item (foco/flechas/
 * hover-bg); el color va DESPUÉS de la regla de estados de arriba para ganar
 * el cascade a igual especificidad — mismo gotcha del a:hover global. */
.akb-suggest-more {
	justify-content: center;
	min-height: 44px; /* target táctil WCAG 2.5.8; antes 38px por padding+line-height */
	margin-top: 4px;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 0 0 8px 8px;
	font-weight: 700;
	font-size: 0.85rem;
	color: var( --aki-red-text, #ff4756 );
}

.akb-suggest-more.is-active,
.akb-suggest-more:hover,
.akb-suggest-more:focus {
	color: var( --aki-red-text, #ff4756 );
}

.akb-suggest-empty,
.akb-suggest-loading,
.akb-suggest-error {
	padding: 14px 12px;
	font-size: 0.85rem;
	opacity: 0.75;
}

.akb-suggest-error {
	color: var( --aki-red-text, #ff4756 );
	opacity: 1;
}

/* Línea de corrección del fuzzy (spec v5 D4): encabeza el panel, no es option
 * (role=status), separada de las tarjetas por un borde. El término corregido va
 * en <strong> con el acento de marca. */
.akb-suggest-correction {
	padding: 10px 12px;
	font-size: 0.8rem;
	line-height: 1.35;
	opacity: 0.8;
	border-bottom: 1px solid var( --aki-hairline, rgba( 0, 0, 0, 0.08 ) );
}

.akb-suggest-correction strong {
	font-weight: 700;
	color: var( --aki-red-text, #ff4756 );
	opacity: 1;
}

/* ── Vacío-enfocado (Fase 1 §2): Recientes + Populares ── */

/* Encabezado de grupo: NO es option (role=presentation), fuera del recorrido. */
.akb-suggest-head {
	padding: 8px 10px 4px;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.65;
}

/* Los pseudo-items <button> heredan la fila de .akb-suggest-item; reset
 * chromeless (mismos leaks GP/WC que la lupa del header). */
button.akb-suggest-item {
	width: 100%;
	background: transparent;
	border: 0;
	margin: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.akb-suggest-zero {
	min-height: 44px; /* target táctil */
}

.akb-suggest-clear {
	justify-content: center;
	min-height: 44px;
	font-size: 0.78rem;
	font-weight: 600;
	opacity: 0.8;
	border-top: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 0;
}

/* Contexto solo para AT ("Reciente:"/"Popular:" en el accname). */
.akb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

@media ( prefers-reduced-motion: no-preference ) {
	.akb-suggest-panel { animation: akb-suggest-in 120ms ease-out; }
	@keyframes akb-suggest-in {
		from { opacity: 0; transform: translateY( -4px ); }
		to { opacity: 1; transform: translateY( 0 ); }
	}
	/* Stagger de entrada (cap al 8º item) [Fase 1 §5]. */
	.akb-suggest-item {
		animation: akb-suggest-in 160ms ease-out backwards;
	}
	.akb-suggest-item:nth-child(2) { animation-delay: 30ms; }
	.akb-suggest-item:nth-child(3) { animation-delay: 60ms; }
	.akb-suggest-item:nth-child(4) { animation-delay: 90ms; }
	.akb-suggest-item:nth-child(5) { animation-delay: 120ms; }
	.akb-suggest-item:nth-child(6) { animation-delay: 150ms; }
	.akb-suggest-item:nth-child(7) { animation-delay: 180ms; }
	.akb-suggest-item:nth-child(n+8) { animation-delay: 210ms; }
}