/* =========================================================
   BK Modules - Desplegable con búsqueda (Tom Select, `assets/js/bk-select.js`)
   Va encima de `vendor/tom-select/tom-select.min.css` y lo viste con los tokens de DESIGN.md:
   campo de 46 px, filete 1,5 px #c9d6df, radio 12, foco Action Blue #00769e, aviso #d43532.
   El error sale de la clase del select nativo, que queda justo antes del envoltorio.
   ========================================================= */

.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 42px 0 14px;
	border: 1.5px solid #c9d6df;
	border-radius: 12px;
	background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300769e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 14px center / 16px;
	box-shadow: none;
	font-size: 16px; /* por debajo de 16 px, Safari en iOS acerca la página al enfocar */
	line-height: 1.4;
	color: #16202b;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ts-wrapper.single.dropdown-active .ts-control {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300769e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 10l4-4 4 4'/%3e%3c/svg%3e");
}

/* La flecha es la del fondo: fuera la del tema de la librería */
/* Al abrirse una lista que no cabe, la página sube hasta el campo (`bk-select.js`): el margen deja
   a la vista su etiqueta */
.ts-wrapper {
	scroll-margin-top: 44px;
}

.ts-wrapper.single .ts-control::after {
	display: none;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
	border-color: #00769e;
	box-shadow: 0 0 0 4px rgba(0, 118, 158, 0.15);
}

.ts-wrapper .ts-control > input {
	font-size: 16px;
	color: #16202b;
}

.ts-wrapper .ts-control > input::placeholder {
	color: #7a8692;
}

/* ---------- Lista ---------- */

.ts-dropdown .dropdown-input-wrap {
	padding: 8px 8px 4px;
}

.ts-dropdown .dropdown-input {
	width: 100%;
	height: 42px;
	padding: 8px 12px;
	border: 1.5px solid #c9d6df;
	border-radius: 10px;
	font-size: 16px;
	color: #16202b;
	caret-color: #00769e;
	box-shadow: none;
}

.ts-dropdown .dropdown-input:focus {
	outline: none;
	border-color: #00769e;
	box-shadow: 0 0 0 3px rgba(0, 118, 158, 0.15);
}

.ts-dropdown {
	margin-top: 6px;
	border: 1px solid #e1e8ed;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 40px -18px rgba(13, 39, 51, 0.35);
	overflow: hidden;
	color: #16202b;
	z-index: 30;
}

.ts-dropdown .ts-dropdown-content {
	max-height: 280px;
	padding: 6px;
	overscroll-behavior: contain;
}

.ts-dropdown .option,
.ts-dropdown .no-results {
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 15.5px;
	line-height: 1.35;
}

.ts-dropdown .option.active {
	background: #f3f7f9;
	color: #16202b;
}

.ts-dropdown .option.selected {
	background: #e6f3f8;
	color: #005d7e;
	font-weight: 600;
}

.ts-dropdown .no-results {
	color: #4a5866;
}

/* ---------- Aviso: lo pinta la clase del select nativo ---------- */

select.is-invalid + .ts-wrapper .ts-control {
	border-color: #d43532;
}

select.is-invalid + .ts-wrapper.focus .ts-control {
	box-shadow: 0 0 0 3px rgba(180, 42, 36, 0.16);
}

@media (prefers-reduced-motion: reduce) {
	.ts-wrapper .ts-control {
		transition: none;
	}
}