* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Outfit", "Segoe UI", sans-serif;
}

.font-display {
	font-family: "Fraunces", Georgia, serif;
}

.page-bg {
	background:
		radial-gradient(circle at 10% 20%, rgba(21, 111, 94, 0.16), transparent 40%), radial-gradient(circle at 90% 80%, rgba(232, 132, 45, 0.18), transparent 38%),
		linear-gradient(145deg, #f2eadb 0%, #f7f3ea 48%, #efe5d4 100%);
}

.ts-wrapper.single .ts-control {
	border: 1px solid rgb(203 213 225);
	border-radius: 0.75rem;
	padding: 0.68rem 0.75rem;
	min-height: 3rem;
	box-shadow: none;
	background: #fff;
}

.ts-wrapper {
	width: 100%;
}

.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control {
	width: 100%;
}

.ts-wrapper .ts-control input {
	border: 0;
	box-shadow: none;
	font-size: 1rem;
	line-height: 1.25;
	min-width: 2ch;
}

.ts-wrapper.single.focus .ts-control {
	border-color: rgb(5 150 105);
	box-shadow: 0 0 0 4px rgb(167 243 208 / 0.6);
}

.ts-dropdown {
	border: 1px solid rgb(167 243 208);
	border-radius: 0.75rem;
	overflow: hidden;
	width: 100%;
	margin-top: 0.35rem;
}

.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .create {
	padding: 0.6rem 0.75rem;
}

@media (max-width: 640px) {
	.ts-wrapper.single .ts-control {
		min-height: 3.25rem;
		padding: 0.78rem 0.8rem;
	}

	.ts-wrapper .ts-control input,
	.ts-wrapper .item {
		font-size: 16px;
	}

	.ts-dropdown {
		max-height: 42vh;
		overflow-y: auto;
	}
}

/* Elimina la línea/borde extraño y ajusta al estilo de tu diseño */
.ts-control {
	border: 1px solid #cbd5e1 !important; /* slate-300 */
	border-radius: 0.75rem !important; /* rounded-xl */
	padding: 0.75rem 1rem !important; /* py-3 px-4 */
	box-shadow: none !important;
}

/* Quita la línea de enfoque interna que suele causar ese glitch */
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
	border: none !important;
	outline: none !important;
}

/* Asegura que el contenedor principal no tenga bordes dobles */
.ts-wrapper {
	border: none !important;
}