/**
 * Estilos Choices.js alineados al form-input / form-select del ERP.
 * Cubre .erp-choices (enhancer global) y cualquier .choices de páginas.
 */
.erp-choices.choices {
  margin-bottom: 0;
  width: 100%;
}

.erp-choices .choices__inner,
.choices .choices__inner {
  min-height: 2.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  line-height: 1.4;
  color: inherit;
}

html.dark .erp-choices .choices__inner,
html.dark .choices .choices__inner,
.dark .erp-choices .choices__inner,
.dark .choices .choices__inner {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(248, 250, 252, 0.95);
}

.erp-choices.is-focused .choices__inner,
.erp-choices.is-open .choices__inner,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: rgb(132, 90, 223);
  box-shadow: 0 0 0 1px rgb(132, 90, 223 / 0.35);
}

.erp-choices .choices__list--single,
.choices .choices__list--single {
  padding: 0;
}

.erp-choices .choices__list--dropdown,
.erp-choices .choices__list[aria-expanded],
.choices .choices__list--dropdown,
.choices .choices__list[aria-expanded] {
  z-index: 90;
  border-radius: 0.5rem;
  border-color: rgba(0, 0, 0, 0.12);
  background-color: #fff;
  color: rgba(15, 23, 42, 0.92);
}

/* Dropdown + ítems + buscador interno (todo el ERP en dark) */
html.dark .choices .choices__list--dropdown,
html.dark .choices .choices__list[aria-expanded],
html.dark .erp-choices .choices__list--dropdown,
html.dark .erp-choices .choices__list[aria-expanded],
.dark .choices .choices__list--dropdown,
.dark .choices .choices__list[aria-expanded],
.dark .erp-choices .choices__list--dropdown,
.dark .erp-choices .choices__list[aria-expanded] {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #1a1c27 !important;
  background-color: #1a1c27 !important;
  color: rgba(248, 250, 252, 0.95) !important;
}

html.dark .choices .choices__list--dropdown .choices__item,
html.dark .choices .choices__list[aria-expanded] .choices__item,
html.dark .erp-choices .choices__list--dropdown .choices__item,
html.dark .erp-choices .choices__list[aria-expanded] .choices__item,
.dark .choices .choices__list--dropdown .choices__item,
.dark .choices .choices__list[aria-expanded] .choices__item,
.dark .erp-choices .choices__list--dropdown .choices__item,
.dark .erp-choices .choices__list[aria-expanded] .choices__item {
  color: rgba(248, 250, 252, 0.95) !important;
}

html.dark .choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.dark .choices .choices__list--dropdown .choices__item--selectable.is-selected,
html.dark .choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
html.dark .choices .choices__list[aria-expanded] .choices__item--selectable.is-selected,
html.dark .erp-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.dark .erp-choices .choices__list--dropdown .choices__item--selectable.is-selected,
.dark .choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.dark .choices .choices__list--dropdown .choices__item--selectable.is-selected,
.dark .choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.dark .choices .choices__list[aria-expanded] .choices__item--selectable.is-selected {
  background-color: rgba(132, 90, 223, 0.28) !important;
  color: #fff !important;
}

.erp-choices .choices__input,
.choices .choices__input {
  background: transparent !important;
  color: inherit;
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* Buscador dentro del dropdown (Choices pone fondo blanco por defecto) */
html.dark .choices[data-type*="select-one"] .choices__input,
html.dark .choices .choices__list--dropdown .choices__input,
html.dark .choices .choices__list[aria-expanded] .choices__input,
.dark .choices[data-type*="select-one"] .choices__input,
.dark .choices .choices__list--dropdown .choices__input,
.dark .choices .choices__list[aria-expanded] .choices__input {
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: rgba(248, 250, 252, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .choices .choices__input::placeholder,
.dark .choices .choices__input::placeholder {
  color: rgba(203, 213, 225, 0.55) !important;
}

html.dark .choices .choices__placeholder,
.dark .choices .choices__placeholder {
  opacity: 0.65;
  color: rgba(203, 213, 225, 0.75) !important;
}

html.dark .choices[data-type*="select-one"]::after,
.dark .choices[data-type*="select-one"]::after {
  border-color: rgba(248, 250, 252, 0.7) transparent transparent transparent;
}

html.dark .choices[data-type*="select-one"].is-open::after,
.dark .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent rgba(248, 250, 252, 0.7);
}

html.dark .choices .choices__heading,
.dark .choices .choices__heading {
  color: rgba(203, 213, 225, 0.7) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Variables Choices en dark (por si algún estilo usa var()) */
html.dark {
  --choices-bg-color: rgba(0, 0, 0, 0.4);
  --choices-bg-color-dropdown: #1a1c27;
  --choices-bg-color-disabled: rgba(255, 255, 255, 0.06);
  --choices-text-color: rgba(248, 250, 252, 0.95);
  --choices-keyline-color: rgba(255, 255, 255, 0.14);
  --choices-highlighted-color: rgba(132, 90, 223, 0.28);
}

.erp-choices[data-type*="select-one"] .choices__button {
  display: none;
}

/* Selects compactos en tablas / líneas */
.erp-choices.erp-choices--sm .choices__inner {
  min-height: 2.125rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
}

.erp-choices.erp-choices--sm .choices__input {
  font-size: 0.75rem;
}