/* ── TomSelect dark theme — Serenia portal ── */
.ts-wrapper { width:100%; }
.ts-wrapper.single .ts-control { padding:7px 32px 7px 10px; cursor:pointer; }
.ts-control {
  background:var(--bg3) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important; color:var(--text) !important;
  font-family:var(--font) !important; font-size:0.85rem !important;
  box-shadow:none !important; min-height:36px;
}
.ts-control:focus-within { border-color:var(--accent) !important; }
.ts-control input { color:var(--text) !important; font-size:0.85rem !important; }
.ts-control input::placeholder { color:var(--text3) !important; }
.ts-dropdown {
  background:var(--bg3) !important; border:1px solid var(--border2) !important;
  border-radius:var(--radius-sm) !important; box-shadow:var(--shadow) !important;
  z-index:9999 !important; font-size:0.9rem !important;
  /* NO fijar top/bottom: tom-select posiciona el dropdown inline cuando
     dropdownParent='body'; un top:100% !important lo mandaría fuera de pantalla. */
}
.ts-dropdown-content {
  max-height:220px !important; overflow-y:auto !important;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent;
}
.ts-dropdown .option { color:var(--text) !important; padding:10px 14px !important; font-size:0.9rem !important; line-height:1.4; }
.ts-dropdown .option:hover,
.ts-dropdown .option.active { background:var(--bg4) !important; color:var(--text) !important; }
.ts-dropdown .option.selected { background:var(--accent-bg) !important; color:var(--accent) !important; }
.ts-dropdown .ts-dropdown-content input { background:var(--bg4) !important; border:1px solid var(--border) !important; color:var(--text) !important; border-radius:var(--radius-sm) !important; padding:7px 10px !important; margin:6px !important; width:calc(100% - 12px) !important; font-size:0.85rem !important; }
/* Single-select: el ítem es solo el valor mostrado → sin caja. */
.ts-wrapper.single .ts-control .item { color:var(--text) !important; background:transparent !important; border:none !important; padding:2px 6px !important; }
/* Multi-select: cada selección es un "chip" con fondo, borde y botón ✕, para que
   las sedes/servicios elegidos se distingan en vez de amontonarse como texto. */
.ts-wrapper.multi .ts-control { flex-wrap:wrap; gap:5px; padding-top:5px !important; padding-bottom:5px !important; }
.ts-wrapper.multi .ts-control .item {
  display:inline-flex !important; align-items:center; gap:5px;
  color:var(--text) !important; background:var(--bg4) !important;
  border:1px solid var(--border2, var(--border)) !important; border-radius:6px !important;
  padding:2px 7px !important; margin:0 !important; font-size:0.82rem !important; line-height:1.5;
}
.ts-wrapper.multi .ts-control .item.active { background:var(--accent-bg, var(--bg4)) !important; border-color:var(--accent) !important; }
.ts-wrapper.multi .ts-control .item .remove {
  border:none !important; background:transparent !important; color:var(--text2) !important;
  padding:0 1px !important; font-size:0.95rem; line-height:1; text-decoration:none; border-radius:0 !important;
}
.ts-wrapper.multi .ts-control .item .remove:hover { color:var(--red, #f85149) !important; background:transparent !important; }
.ts-wrapper.single .ts-control::after {
  content:""; position:absolute; right:13px; top:50%; margin-top:-2px;
  width:0; height:0; border-style:solid; border-width:5px 4px 0 4px;
  border-color:var(--text2) transparent transparent !important; pointer-events:none;
}
.ts-wrapper.single.dropdown-active .ts-control::after { transform:rotate(180deg); }
.ts-wrapper.focus .ts-control::after { border-color:var(--accent) transparent transparent !important; }

/* Multi-select: misma flecha y un texto guía cuando está vacío, para que no
   parezca una caja de texto donde se escribe (solo se selecciona). */
.ts-wrapper.multi .ts-control { padding-right:30px; cursor:pointer; }
.ts-wrapper.multi .ts-control::after {
  content:""; position:absolute; right:13px; top:18px; margin-top:-2px;
  width:0; height:0; border-style:solid; border-width:5px 4px 0 4px;
  border-color:var(--text2) transparent transparent !important; pointer-events:none;
}
.ts-wrapper.multi.dropdown-active .ts-control::after { transform:rotate(180deg); }
.ts-wrapper.multi:not(.has-items) .ts-control::before {
  content:attr(data-ph); color:var(--text3); font-size:0.85rem;
  position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none;
}