/**
 * Módulo de búsqueda: botón trigger + modal nativo <dialog>.
 * Depende de las variables de tokens.css (--color-*, --radius-*, --shadow-*)
 * y de la animación techsalud-fade-up definida en components.css.
 *
 * Diseño tipo "command palette" (Linear/Notion/spotlight): el input no
 * tiene contenedor propio ni fondo — se funde con el modal, y es el modal
 * entero el que define la forma redondeada, una sola vez.
 */

/*
 * El trigger solo vive dentro del header — que ahora es siempre navy
 * (ver components.css), así que su color de reposo es blanco, no
 * --color-text (pensado para fondos claros).
 */
.techsalud-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: var(--radius-pill);
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background 160ms ease-out, color 160ms ease-out;
}

.techsalud-search-trigger:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.techsalud-search-modal {
	display: flex;
	flex-direction: column;
	width: min(600px, 92vw);
	height: min(70vh, 640px);
	margin: 10vh auto auto;
	padding: 0;
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	background: var(--color-surface);
	color: var(--color-text);
	overflow: hidden;
	/* Entrada: fade + scale desde el centro (es un modal, no un popover
	   anclado a un trigger) — nunca desde scale(0), siempre con opacity. */
	opacity: 0;
	transform: scale(0.96) translateY(8px);
	transition: opacity 180ms ease-out, transform 180ms ease-out, overlay 180ms ease-out allow-discrete, display 180ms ease-out allow-discrete;
}

.techsalud-search-modal[open] {
	opacity: 1;
	transform: scale(1) translateY(0);
}

@starting-style {
	.techsalud-search-modal[open] {
		opacity: 0;
		transform: scale(0.96) translateY(8px);
	}
}

.techsalud-search-modal::backdrop {
	background: rgba(6, 43, 95, 0.45);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 180ms ease-out allow-discrete;
}

.techsalud-search-modal[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.techsalud-search-modal[open]::backdrop {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.techsalud-search-modal,
	.techsalud-search-modal::backdrop {
		transition: none;
	}
}

/* -------------------- Cabecera: ícono + input, sin recuadros anidados -------------------- */

.techsalud-search-modal-header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.85rem;
	padding: 1.1rem 1.35rem;
	border-bottom: 1px solid var(--color-divider);
	color: var(--color-text-disabled);
}

.techsalud-search-modal-header .ts-icon {
	flex-shrink: 0;
}

/*
 * Es <input type="text" role="searchbox">, no type="search": ese tipo
 * arrastra chrome nativo (fondo, radio, botón de limpiar) que ni
 * appearance:none logra quitar del todo en algunos motores (Safari/iOS).
 * Usar texto plano con role="searchbox" evita el problema de raíz en vez
 * de pelear contra el estilo nativo con CSS.
 */
.techsalud-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: none;
	border-radius: 0;
	font-family: inherit;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	padding: 0;
}

.techsalud-search-input::placeholder {
	color: var(--color-text-disabled);
	font-weight: var(--font-weight-regular);
}

.techsalud-search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-background);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background 160ms ease-out, color 160ms ease-out;
}

.techsalud-search-close:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

/* -------------------- Cuerpo de resultados -------------------- */

/*
 * flex:1 + min-height:0 (no auto) es lo que evita que el modal se achique
 * al mostrar pocos resultados: el header queda fijo (flex-shrink:0) y este
 * bloque siempre ocupa el resto de la altura fija del modal, con scroll
 * propio si el contenido es más alto que eso.
 */
.techsalud-search-results {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.techsalud-search-results[data-state="prompt"],
.techsalud-search-results[data-state="empty"],
.techsalud-search-results[data-state="error"] {
	align-items: center;
	justify-content: center;
}

.techsalud-search-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.5rem;
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.techsalud-search-message .ts-icon {
	color: var(--color-border);
}

.techsalud-search-results[data-state="error"] .techsalud-search-message {
	color: var(--color-error);
}

.techsalud-search-results[data-state="loading"] {
	position: relative;
	min-height: 120px;
}

.techsalud-search-results[data-state="loading"]::after {
	content: "";
	position: absolute;
	top: 44px;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border: 2.5px solid var(--color-border);
	border-top-color: var(--color-cta);
	border-radius: 50%;
	animation: techsalud-search-spin 700ms linear infinite;
}

@keyframes techsalud-search-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.techsalud-search-results[data-state="loading"]::after {
		animation-duration: 1400ms;
	}
}

.techsalud-search-results-list {
	list-style: none;
	margin: 0;
	padding: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.techsalud-search-results-list li {
	animation: techsalud-fade-up 220ms ease-out both;
}

.techsalud-search-result {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: inherit;
	transition: background 140ms ease-out;
}

.techsalud-search-result:hover,
.techsalud-search-result:focus-visible {
	background: var(--color-primary-light);
}

.techsalud-search-result img,
.techsalud-search-result-noimg {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-xs);
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--color-border);
}

.techsalud-search-result-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.techsalud-search-result-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.techsalud-search-result-price {
	font-size: var(--font-size-xs);
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}