/*
 * c-autocomplete — sugerencias de un buscador (js/c-autocomplete.js).
 *   .c-autocomplete              contenedor (posiciona la lista)
 *   .c-autocomplete__list        listbox; data-state="closed" lo oculta (base.css)
 *   .c-autocomplete__group-label nombre del grupo (Obras, Artistas…)
 *   .c-autocomplete__option      sugerencia; [aria-selected="true"] = la activa (teclado)
 *   .c-autocomplete__option--search  "Buscar «…»", al final
 * La base solo despliega la lista debajo del campo y marca la activa; lo visual, el theme.
 */
@layer components {
	.c-autocomplete { position: relative; }
	.c-autocomplete__list {
		position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: var(--z-dropdown, 800);
		max-block-size: min(70vh, 30rem); overflow-y: auto;
		margin: 0; padding: var(--space-2xs) 0; list-style: none;
		background: var(--color-bg); border: var(--border-w) solid var(--color-border);
	}
	.c-autocomplete__list ul { margin: 0; padding: 0; list-style: none; }
	.c-autocomplete__group-label { display: block; padding: var(--space-2xs) var(--space-s) 0; font-size: var(--step--1); color: var(--color-muted); }
	.c-autocomplete__option { padding: var(--space-3xs) var(--space-s); cursor: pointer; }
	.c-autocomplete__option[aria-selected="true"], .c-autocomplete__option:hover { background: var(--color-surface); }
	.c-autocomplete__option--search { margin-block-start: var(--space-2xs); border-block-start: var(--border-w) solid var(--color-border); }
}

/* castillo: lista de sugerencias bajo el campo, agrupada; la activa con fondo suave */
@layer components {
	.c-autocomplete { position: relative; }
	.c-autocomplete__list {
		position: absolute;
		z-index: var(--z-popover);
		inset-inline: 0;
		inset-block-start: 100%;
		margin: 0;
		padding: var(--space-3xs) 0;
		list-style: none;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		box-shadow: 0 0.75rem 2rem -1rem rgb(0 0 0 / 0.3);
		font-family: var(--font-body);
		font-size: var(--step--1);
	}
	.c-autocomplete__list [role="option"] { padding: 0.55em 1em; cursor: pointer; }
	.c-autocomplete__list [role="option"][aria-selected="true"], .c-autocomplete__list [role="option"]:hover { background: var(--color-soft); }
	.c-autocomplete__list ul { margin: 0; padding: 0; list-style: none; }
	.c-autocomplete__group-label { display: block; padding: 0.6em 1em 0.2em; color: var(--color-accent-text); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
}