/* =========================================================
   Edital Animal SP — lista com busca (Tom Select, assets/vendor/tom-select)
   Tema próprio no padrão do form.css: mesmo campo de 56 px, foco azul, erro vermelho.
   Usado na cidade do voto (votar.js).
   ========================================================= */
.ts-wrapper { position: relative; }
.ts-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; }

.ts-control {
  position: relative; display: flex; align-items: center; gap: 0 4px; flex-wrap: nowrap; overflow: hidden;
  width: 100%; height: var(--field-h, 56px); padding: 0 40px 0 16px;
  font-size: max(16px, 1rem); color: var(--ink); background: var(--white); cursor: pointer;
  border: 1.5px solid var(--field-border); border-radius: var(--field-r);
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.ts-control::after { /* mesma seta do .control--select */
  content: ''; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); pointer-events: none;
  transition: transform 0.2s var(--ease), margin 0.2s var(--ease);
}
.ts-wrapper.dropdown-active .ts-control::after { transform: rotate(-135deg); margin-top: -2px; }
.ts-wrapper:hover .ts-control { border-color: rgba(11, 11, 15, 0.38); }
.ts-wrapper.focus .ts-control { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(17, 70, 214, 0.16); cursor: text; }
.ts-wrapper.is-invalid .ts-control { border-color: var(--danger); }
.ts-wrapper.is-invalid.focus .ts-control { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.14); }
.ts-wrapper.is-filled .ts-control { background: #f7f9ff; }
.ts-wrapper.disabled .ts-control { opacity: 0.55; cursor: default; }

.ts-control > .item { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O campo de digitar herda do form.css a "caixa" de input: aqui ele é só texto dentro do controle */
.ts-control > input:not([type='checkbox']):not([type='radio']) {
  flex: 1 1 auto; min-width: 4rem; height: auto; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; font-size: inherit;
}
.ts-control > input:focus { box-shadow: none; }
.ts-wrapper.has-items .ts-control > input { min-width: 0; }
.ts-wrapper.focus.is-typing .ts-control > .item { display: none; } /* buscando outra: some o nome escolhido (votar.js) */
.input-hidden .ts-control > input { position: absolute; left: -10000px; opacity: 0; }

/* Lista */
.ts-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 30; width: 100%; margin-top: 6px; overflow: hidden;
  background: var(--white); border: 1.5px solid var(--field-border); border-radius: var(--field-r);
  box-shadow: 0 18px 40px -16px rgba(11, 11, 15, 0.35);
}
.ts-dropdown-content { max-height: min(300px, 46vh); overflow: hidden auto; overscroll-behavior: contain; padding: 6px; }
.ts-dropdown .option, .ts-dropdown .no-results {
  padding: 11px 12px; border-radius: 10px; font-size: 0.98rem; line-height: 1.3;
}
.ts-dropdown [data-selectable] { cursor: pointer; }
.ts-dropdown .active { background: rgba(17, 70, 214, 0.09); color: var(--blue-800); }
.ts-dropdown .selected { font-weight: 800; }
.ts-dropdown .highlight { background: var(--yellow-soft); color: inherit; border-radius: 3px; }
.ts-dropdown .no-results { color: var(--muted); }
.ts-dropdown .spinner { display: block; width: 22px; height: 22px; margin: 12px auto; border: 2.5px solid rgba(17, 70, 214, 0.2); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; }