/* =========================================================================
   Buscador del encabezado · [nm_buscador_enlace] · inc/busqueda.php
   Tanda 09-oct, pedido 4. Solo se carga con la opción nm_encabezado_nuevo
   (la fija runbook/tanda09/encabezado.php).

   La burbuja sigue siendo un círculo: es un ícono circular a propósito (la
   única excepción a las esquinas rectas del sitio, plan §3). Lo que se
   arregla es que estaba apretada: 40 × 40, borde de 1,5 px en el morado del
   colegio para que tenga contraste, y 16 px de aire a cada lado (margen del
   widget en Elementor). Los selectores llevan dos clases para ganarle a las
   reglas viejas de nm.css (NM-BUSCAR-ENLACE), que P9 borra.
   ========================================================================= */

.nm-buscar-enlace.nm-buscar-enlace--capa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border: 1.5px solid var(--nm-morado, #773CBD);
	border-radius: 50%;
	background: var(--nm-blanco, #fff);
	color: var(--nm-morado, #773CBD) !important;
	text-decoration: none;
	line-height: 0;
	transition: background-color .15s ease, color .15s ease;
}

.nm-buscar-enlace.nm-buscar-enlace--capa:hover {
	background: var(--nm-morado, #773CBD);
	color: var(--nm-blanco, #fff) !important;
}

.nm-buscar-enlace.nm-buscar-enlace--capa:focus-visible {
	outline: 3px solid var(--nm-amarillo, #FCCC00);
	outline-offset: 2px;
}

.nm-buscar-enlace--capa .nm-buscar-enlace__icono {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.nm-buscar-enlace--capa .nm-buscar-enlace__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Encabezado: fila del menú ----------------------------------------
   Las clases las pone runbook/tanda09/encabezado.php en los elementos de la
   plantilla de cada colegio (los ids cambian entre NH y NM; las clases no). */

/* El shortcode va dentro de un div de bloque: sin esto la burbuja queda
   sobre la línea base y su centro baja 3 px respecto del botón. */
.nm-enc-buscar .elementor-shortcode {
	display: flex;
	align-items: center;
	line-height: 0;
}

/* El contenedor del botón Admisión mide lo que el botón, no un 20 % fijo
   alineado a la derecha: así la burbuja queda pegada al botón. */
.e-con.nm-enc-cta {
	--width: auto !important;
	width: auto !important;
	flex: 0 0 auto !important;
}

/* Bajo 1025 px: logo a la izquierda, y búsqueda + «≡» a la derecha. */
@media (max-width: 1024px) {
	.e-con.nm-enc-acciones {
		--width: auto !important;
		width: auto !important;
		flex: 0 0 auto !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 8px !important;
	}
}

@media (max-width: 767px) {
	/* Fila única del teléfono (≤ 64 px): la imagen inline sumaba el hueco de
	   los descendentes bajo el logo. */
	.e-con.nm-enc-fila-tel .elementor-widget-image img {
		display: block;
	}
}

/* ---- Capa del buscador (<dialog>) ------------------------------------ */

.nm-buscador {
	width: min(760px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	margin: 12vh auto auto;
	padding: 0;
	border: 0;
	border-top: 4px solid var(--nm-amarillo, #FCCC00);
	border-radius: var(--nm-radio, 0);
	background: var(--nm-blanco, #fff);
	color: var(--nm-tinta, #221636);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
	font-family: var(--nm-font-cuerpo, Inter, system-ui, sans-serif);
}

.nm-buscador::backdrop {
	background: rgba(27, 18, 51, .6);
}

.nm-buscador__caja {
	padding: 32px 40px 36px;
}

.nm-buscador__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.nm-buscador .nm-buscador__titulo {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nm-tinta, #221636);
}

.nm-buscador__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--nm-morado, #773CBD);
	border-radius: var(--nm-radio, 0);
	background: var(--nm-blanco, #fff);
	color: var(--nm-morado, #773CBD);
	cursor: pointer;
}

.nm-buscador__cerrar:hover {
	background: var(--nm-morado, #773CBD);
	color: var(--nm-blanco, #fff);
}

.nm-buscador .nm-buscador__etiqueta {
	display: block;
	margin: 0 0 10px;
	font-family: var(--nm-font-titulo, Inter, system-ui, sans-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--nm-morado, #773CBD);
}

.nm-buscador__fila {
	display: flex;
	gap: 0;
}

.nm-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: 60px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--nm-morado, #773CBD) !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	background: var(--nm-blanco, #fff) !important;
	color: var(--nm-tinta, #221636);
	font: inherit;
	font-size: 20px !important;
	box-shadow: none;
}

.nm-buscador__campo::placeholder {
	color: #8A8494;
}

.nm-buscador__ir {
	flex: 0 0 auto;
	height: 60px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 0 !important;
	background: var(--nm-morado, #773CBD) !important;
	color: var(--nm-blanco, #fff) !important;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.nm-buscador__ir:hover {
	background: var(--nm-morado-medio, #5E2E97) !important;
}

.nm-buscador__campo:focus-visible,
.nm-buscador__ir:focus-visible,
.nm-buscador__cerrar:focus-visible,
.nm-buscador__sugerencias a:focus-visible {
	outline: 3px solid var(--nm-amarillo, #FCCC00);
	outline-offset: 2px;
}

.nm-buscador__sugerencias {
	margin-top: 24px;
}

.nm-buscador__rotulo {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nm-gris-texto, #4A4A5A);
}

.nm-buscador__sugerencias ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.nm-buscador__sugerencias a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--nm-gris-borde, #E6E0EF);
	border-radius: var(--nm-radio, 0);
	background: var(--nm-fondo-claro, #F8F5FC);
	color: var(--nm-tinta, #221636) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.nm-buscador__sugerencias a:hover {
	border-color: var(--nm-morado, #773CBD);
	color: var(--nm-morado, #773CBD) !important;
}

html.nm-buscador-abierto {
	overflow: hidden;
}

@media (max-width: 767px) {
	.nm-buscador {
		width: 100%;
		max-height: 100%;
		margin: 0 auto auto;
	}

	.nm-buscador__caja {
		padding: 20px 20px 28px;
	}

	.nm-buscador__etiqueta {
		font-size: 20px;
	}

	.nm-buscador__campo,
	.nm-buscador__ir {
		height: 52px;
	}

	.nm-buscador__campo {
		font-size: 17px !important;
		padding: 0 14px;
	}

	.nm-buscador__ir {
		padding: 0 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nm-buscar-enlace.nm-buscar-enlace--capa {
		transition: none;
	}
}