/* HacerPerú Blocks - Buscador (header) */
.hpb-sf { position: relative; }

/* Formulario (todos los selectores van dentro de .hpb-sf: no afectan a otros buscadores del sitio) */
.hpb-sf__form {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 500px;
	margin: 0;
}
.hpb-sf .hpb-sf__input {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	color: var(--hpb-text);
	font-size: 15px;
	line-height: 1.3;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.hpb-sf .hpb-sf__input::placeholder { color: #767676; opacity: 1; }
.hpb-sf .hpb-sf__input:focus {
	border-color: var(--hpb-accent);
	outline: 2px solid var(--hpb-accent);
	outline-offset: 0;
}
/* Quita la "x" nativa de los campos search en WebKit para mantener el diseño */
.hpb-sf .hpb-sf__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hpb-sf .hpb-sf__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: none;
	margin: 0;
	padding: 12px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--hpb-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}
.hpb-sf .hpb-sf__btn:hover,
.hpb-sf .hpb-sf__btn:focus-visible { opacity: .92; }
.hpb-sf .hpb-sf__btn:focus-visible { outline: 2px solid var(--hpb-text); outline-offset: 2px; }
.hpb-sf__icon { flex: none; display: block; }

/* Etiqueta solo para lectores de pantalla */
.hpb-sf__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Diseño con icono ---------- */
.hpb-sf--icon { display: inline-block; }
.hpb-sf .hpb-sf__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hpb-text);
	cursor: pointer;
	transition: color .15s ease;
}
.hpb-sf .hpb-sf__toggle:hover,
.hpb-sf--icon.is-open .hpb-sf__toggle { color: var(--hpb-accent); }
.hpb-sf .hpb-sf__toggle:focus-visible { outline: 2px solid var(--hpb-accent); outline-offset: 2px; }

.hpb-sf__panel {
	position: absolute;
	top: calc(100% + 8px);
	z-index: 9999;
	width: min(340px, 92vw);
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.hpb-sf__panel[hidden] { display: none; }
.hpb-sf__panel--right { right: 0; }
.hpb-sf__panel--left { left: 0; }
.hpb-sf__panel .hpb-sf__form { max-width: none; }

@media (max-width: 480px) {
	/* En pantallas muy angostas el botón del formulario visible pasa debajo del campo */
	.hpb-sf--form .hpb-sf__form { flex-wrap: wrap; }
	.hpb-sf--form .hpb-sf__input { flex-basis: 100%; }
	.hpb-sf--form .hpb-sf__btn { width: 100%; }
}