/**
 * @layer components — estado vacío (404, búsqueda sin resultados): mismo
 * patrón visual en los dos lugares donde aparece.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.estado-vacio {
		padding-block: var(--space-8);
	}

	.estado-vacio__eyebrow {
		margin: 0 0 var(--space-3);
		font-size: var(--eyebrow-size);
		font-weight: 600;
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		color: var(--c-accent-600);
	}

	.estado-vacio__titulo {
		margin: 0 0 var(--space-4);
	}

	.estado-vacio__texto {
		max-width: var(--measure-max);
		color: var(--c-ink-500);
		margin: 0 0 var(--space-6);
	}

	.estado-vacio__buscador {
		display: flex;
		gap: var(--space-3);
		max-width: 480px;
		margin-bottom: var(--space-8);
	}

	.estado-vacio__buscador input {
		flex: 1;
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--c-ink-200);
		background: var(--c-white);
	}

	.estado-vacio__buscador input:focus-visible {
		outline: 2px solid var(--c-focus);
		outline-offset: 2px;
	}

	.estado-vacio__areas {
		margin-bottom: var(--space-8);
	}

	.estado-vacio__areas-titulo {
		margin: 0 0 var(--space-3);
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--c-ink-700);
	}
}