/**
 * SwiftFind — Componente: header del modal + barra de búsqueda.
 * Equivale a legacy .m-header / .m-search / .logo / .m-actions (sin cambios visuales).
 * Voz e IA quedan como UI sin lógica (clases presentes, sin handlers).
 */

@layer wvn-components {
	/* Banco de pruebas del header A PANTALLA COMPLETA: el header es el único
	   protagonista, ocupa todo el viewport, nada más compite en pantalla. */
	.wvn-header-lab {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		margin: 0 !important;
		max-width: none !important;
		z-index: 9999;
		background: var(--wvn-color-surface);
		display: flex;
		flex-direction: column;
		/* Reafirma los tokens base por si el tema del sitio los ha teñido. */
		--wvn-color-bg: #f6f6f4;
		--wvn-color-surface: #ffffff;
	}
	.wvn-header-lab__frame {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
		background: var(--wvn-color-surface);
	}
	.wvn-header-lab__frame .wvn-modal { display: contents; }

	/* Header en GRANDE dentro del banco: más aire, logo y barra con presencia,
	   centrado verticalmente para que sea el único foco de la pantalla. */
	.wvn-header-lab .wvn-header {
		padding: var(--wvn-space-6) clamp(20px, 4vw, 56px);
		border-bottom: 1px solid var(--wvn-color-line);
	}
	/* Prueba decisiva: valor literal en la capa de mayor prioridad. */
}
@layer wvn-overrides {
	.wvn-header-lab .wvn-search { background-color: #f6f6f4 !important; }
	.wvn-header-lab .wvn-search .wvn-search__input { background-color: transparent !important; }
	.wvn-header-lab .wvn-search:focus-within { background-color: #ffffff !important; }
	.wvn-header-lab__stage {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--wvn-space-8);
		color: var(--wvn-color-faint);
		font-family: var(--wvn-font-display);
		font-size: 13px;
		letter-spacing: var(--wvn-tracking-caps);
		text-transform: uppercase;
	}

	.wvn-header {
		display: grid;
		grid-template-columns: 200px 1fr 200px;
		gap: var(--wvn-space-7);
		align-items: center;
		padding: var(--wvn-space-6) var(--wvn-space-9);
		border-bottom: 1px solid var(--wvn-color-line);
		background: var(--wvn-color-surface);
	}

	.wvn-logo {
		display: inline-flex;
		align-items: center;
		gap: var(--wvn-space-3);
		font-family: var(--wvn-font-display);
		font-weight: 700;
		font-size: 23px;
		letter-spacing: var(--wvn-tracking-tight);
		background: none;
		border: none;
		padding: 0;
		color: var(--wvn-color-ink);
	}
	/* Rayo en su propia "placa" oscura para que el verde salte con contraste,
	   con un glow sutil que le da vida sin romper la sobriedad del header. */
	.wvn-logo__bolt {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: var(--wvn-radius-sm);
		background: var(--wvn-color-ink);
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--wvn-color-accent) 30%, transparent),
		            0 4px 14px -4px color-mix(in srgb, var(--wvn-color-accent) 55%, transparent);
	}
	.wvn-logo__bolt::before {
		content: "";
		width: 17px;
		height: 17px;
		background: var(--wvn-color-accent);
		clip-path: polygon(55% 0, 0 55%, 38% 55%, 25% 100%, 100% 38%, 60% 38%, 78% 0);
	}
	/* "AI" del wordmark en acento para reforzar la marca. */
	.wvn-logo__ai { color: color-mix(in srgb, var(--wvn-color-ink) 30%, var(--wvn-color-accent-hover, #7a8a2e)); }
	.wvn-logo__text { display: inline-block; }
	/* Logo de imagen del propietario: se contiene en la altura del header sin
	   deformarse, y respeta el ancho de la columna del grid. */
	.wvn-logo__img {
		display: block;
		max-height: 36px;
		max-width: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
	}
	.wvn-logo:hover { opacity: .85; }

	/* Barra de búsqueda */
	.wvn-search {
		display: flex;
		align-items: center;
		background: var(--wvn-color-bg);
		border: 1px solid var(--wvn-color-line-2);
		border-radius: var(--wvn-radius-pill);
		height: var(--wvn-control-h);
		padding: 0 var(--wvn-space-3) 0 var(--wvn-space-6);
		box-shadow: inset 0 1px 2px color-mix(in srgb, var(--wvn-color-ink) 6%, transparent);
		transition: border-color .18s, background .18s, box-shadow .18s;
	}
	/* Focus premium: el borde se vuelve tinta y un halo verde suave confirma el
	   foco (el mismo acento de la marca), en vez de un simple cambio de borde. */
	.wvn-search:focus-within {
		border-color: var(--wvn-color-ink);
		background: var(--wvn-color-surface);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--wvn-color-accent) 28%, transparent),
		            0 6px 18px -8px color-mix(in srgb, var(--wvn-color-ink) 30%, transparent);
	}
	.wvn-search:focus-within .wvn-search__icon { color: var(--wvn-color-ink); }
	.wvn-search__icon { color: var(--wvn-color-ink-2); flex: 0 0 auto; }
	.wvn-search__input {
		flex: 1;
		border: none;
		outline: none;
		background: transparent;
		font: inherit;
		font-size: 15px;
		padding: 0 var(--wvn-space-4);
		color: var(--wvn-color-ink);
	}
	.wvn-search__input::placeholder { color: var(--wvn-color-muted); }

	.wvn-search__voice,
	.wvn-search__clear {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: transparent;
		border: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--wvn-color-ink-2);
	}
	.wvn-search__voice:hover,
	.wvn-search__clear:hover { background: var(--wvn-color-line); }
	.wvn-search__voice.wvn-is-listening {
		background: var(--wvn-color-hot);
		color: #fff;
		animation: wvn-pulse 1.4s infinite;
	}
	.wvn-search__divider { width: 1px; height: 22px; background: var(--wvn-color-line-2); margin: 0 var(--wvn-space-1); }

	.wvn-search__ai {
		display: inline-flex;
		align-items: center;
		gap: var(--wvn-space-2);
		background: var(--wvn-color-ink);
		color: var(--wvn-color-accent);
		border: none;
		border-radius: var(--wvn-radius-pill);
		height: 34px;
		padding: 0 var(--wvn-space-5);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: var(--wvn-tracking-caps);
		text-transform: uppercase;
	}
	.wvn-search__ai.wvn-is-active { background: var(--wvn-color-accent); color: var(--wvn-color-ink); }
	.wvn-search__ai-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: wvn-blink 1.4s infinite; }

	/* Acciones del header */
	.wvn-header__actions { display: flex; gap: var(--wvn-space-3); justify-content: flex-end; align-items: center; }
	.wvn-icon-button {
		background: transparent;
		border: none;
		padding: var(--wvn-space-3);
		border-radius: 50%;
		color: var(--wvn-color-ink);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
	}
	.wvn-icon-button:hover { background: var(--wvn-color-bg); }
	.wvn-close {
		display: inline-flex;
		align-items: center;
		gap: var(--wvn-space-3);
		background: transparent;
		border: 1px solid var(--wvn-color-line-2);
		padding: var(--wvn-space-3) var(--wvn-space-5);
		border-radius: var(--wvn-radius-pill);
		font-size: 13px;
		font-weight: 600;
		color: var(--wvn-color-ink);
		transition: border-color .15s, background .15s;
	}
	.wvn-close:hover { border-color: var(--wvn-color-ink); background: var(--wvn-color-bg); }

	/* Tecla "esc" con aspecto de tecla física: cápsula clara con relieve inferior
	   y tipografía mono. Da un toque de producto cuidado a la acción de cerrar. */
	.wvn-kbd {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 26px;
		height: 20px;
		padding: 0 var(--wvn-space-2);
		font-family: var(--wvn-font-mono);
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		color: var(--wvn-color-muted);
		background: var(--wvn-color-surface);
		border: 1px solid var(--wvn-color-line-2);
		border-bottom-width: 2px;
		border-radius: var(--wvn-radius-sm);
		text-transform: uppercase;
	}
	.wvn-close:hover .wvn-kbd { color: var(--wvn-color-ink); border-color: var(--wvn-color-line-2); }

	/* Keyframes del header */
	@keyframes wvn-pulse {
		0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 46, .5); }
		50% { box-shadow: 0 0 0 8px rgba(255, 77, 46, 0); }
	}
	@keyframes wvn-blink { 50% { opacity: .3; } }
}