/**
 * Selector de web (_web_picker.tpl + web-picker.js). Sin JS se ve el <select> con el aspecto de los campos de la
 * página; con JS (.is-enhanced), el botón y su lista.
 *
 * - `.bkw` a secas: un campo de formulario (ancho de lectura, icono, nombre y lo que le queda).
 * - `.bkw--title`: el título de la ficha de «Mi mantenimiento» (el nombre grande; las horas ya están debajo).
 */
.bkw {
	--bkw-accent: #00769e;
	--bkw-accent-soft: #eaf6fc;
	--bkw-ink: #0f172a;
	--bkw-muted: #5b6672;
	--bkw-line: #e4e9ed;
	--bkw-field: #c9d6df;
	--bkw-soft: #f4f7f9;
	--bkw-ease: cubic-bezier(.16, 1, .3, 1);
	position: relative;
	max-width: 460px;
	color: var(--bkw-ink);
}

/* El nombre queda alineado con el texto de la ficha: el hueco del botón sale hacia fuera */
.bkw--title { max-width: calc(100% + 9px); margin-left: -9px; }

/* El <select> de verdad: visible sin JS, fuera de la vista con JS (sigue mandando su valor) */
.bkw.is-enhanced .bkw__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

/* ---------- Botón ---------- */

.bkw__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 7px 14px 7px 9px;
	border: 1px solid var(--bkw-field);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s var(--bkw-ease), box-shadow .15s var(--bkw-ease), background-color .15s var(--bkw-ease);
}

.bkw__btn:hover { border-color: #9fb6c4; }
.bkw__btn:focus-visible, .bkw.is-open .bkw__btn { outline: none; border-color: var(--bkw-accent); box-shadow: 0 0 0 4px rgba(0, 118, 158, .14); }

.bkw__btn .bkw__text { flex: 1 1 auto; }
.bkw__btn .bkw__label { font-weight: 700; }
.bkw__placeholder { color: var(--bkw-muted); }

.bkw__chev {
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: auto;
	fill: none;
	stroke: var(--bkw-accent);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s var(--bkw-ease);
}

.bkw.is-open .bkw__chev { transform: rotate(180deg); }

/* Como título: sin caja hasta que se pasa por encima; el nombre manda */
.bkw--title .bkw__btn {
	display: inline-flex;
	width: auto;
	max-width: 100%;
	min-height: 0;
	padding: 5px 12px 5px 8px;
	border-color: transparent;
	background: transparent;
}

.bkw--title .bkw__btn:hover { border-color: var(--bkw-line); background: var(--bkw-soft); }
.bkw--title .bkw__btn .bkw__label { font: 800 22px/1.2 Montserrat, sans-serif; letter-spacing: -0.015em; overflow-wrap: break-word; }
.bkw--title .bkw__btn .bkw__meta { display: none; }
.bkw--title .bkw__btn .bkw__icon { width: 34px; height: 34px; border-radius: 10px; }
.bkw--title .bkw__btn .bkw__icon img { width: 22px; height: 22px; }
.bkw--title .bkw__btn .bkw__icon--initial { font-size: 16px; }
.bkw--title .bkw__chev { margin-left: 2px; }

/* ---------- Icono de cada web ---------- */

.bkw__icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--bkw-line);
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
}

.bkw__icon img { display: block; width: 20px; height: 20px; object-fit: contain; }

.bkw__icon--initial {
	border-color: transparent;
	background: hsl(var(--bkw-hue, 200) 55% 93%);
	color: hsl(var(--bkw-hue, 200) 50% 28%);
	font: 800 13px/1 Montserrat, sans-serif;
}

.bkw__icon--add { border-style: dashed; border-color: var(--bkw-field); color: var(--bkw-accent); }

.bkw__icon--add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ---------- Textos ---------- */

.bkw__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.bkw__label { min-width: 0; overflow-wrap: break-word; font-size: 15px; line-height: 1.3; }
.bkw__meta { color: var(--bkw-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

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

.bkw__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	width: max(100%, 340px);
	max-width: min(460px, calc(100vw - 32px));
	border: 1px solid var(--bkw-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 22px 44px -20px rgba(15, 23, 42, .32), 0 3px 8px rgba(15, 23, 42, .06);
	overflow: hidden;
	transform-origin: top left;
	animation: bkw-in .18s var(--bkw-ease);
}


@keyframes bkw-in {
	from { opacity: 0; transform: translateY(-4px) scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
	.bkw__panel { animation: none; }
	.bkw__chev { transition: none; }
}

.bkw__search { position: relative; padding: 10px 10px 6px; }

.bkw__search svg {
	position: absolute;
	top: 50%;
	left: 22px;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--bkw-muted);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.bkw .bkw__search input {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px 0 38px;
	border: 1px solid var(--bkw-line);
	border-radius: 10px;
	background: var(--bkw-soft);
	color: var(--bkw-ink);
	font: inherit;
	font-size: 15px;
	box-shadow: none;
}

.bkw .bkw__search input:focus { outline: none; border-color: var(--bkw-accent); background: #fff; }
.bkw .bkw__search input::placeholder { color: #6b7681; }

.bkw__list {
	max-height: min(340px, 52vh);
	margin: 0;
	padding: 6px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--bkw-field) transparent;
}

.bkw__list:focus { outline: none; }

.bkw__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px 8px 8px;
	border-radius: 10px;
	cursor: pointer;
}

.bkw__opt[hidden] { display: none; }
.bkw__opt.is-active { background: var(--bkw-soft); }
.bkw__opt .bkw__text { flex: 1 1 auto; justify-content: space-between; }
.bkw__opt[aria-selected="true"] .bkw__label { color: var(--bkw-accent); font-weight: 700; }

.bkw__opt--other { margin-top: 4px; border-top: 1px solid var(--bkw-line); border-radius: 0 0 10px 10px; padding-top: 12px; }
.bkw__opt--other .bkw__label { color: var(--bkw-accent); font-weight: 700; }

.bkw__check {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--bkw-accent);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	visibility: hidden;
}

.bkw__opt[aria-selected="true"] .bkw__check { visibility: visible; }

.bkw__empty { margin: 0; padding: 4px 18px 14px; color: var(--bkw-muted); font-size: 14px; }