/* Global Tom Select integration with MasterISP light/dark themes.
   Loaded after page styles so CDN defaults and local filter panels do not override it. */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    background-color: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: none;
}

.ts-wrapper .ts-control input,
.ts-wrapper.single .ts-control input,
.ts-wrapper.multi .ts-control input {
    color: var(--app-text) !important;
}

.ts-wrapper .ts-control input::placeholder {
    color: var(--app-muted) !important;
}

.ts-wrapper .ts-control .item,
.ts-wrapper.multi .ts-control > div {
    color: var(--app-text) !important;
}

.ts-wrapper.multi .ts-control .item {
    background: var(--app-primary-soft) !important;
    border-color: var(--app-border-strong) !important;
    color: var(--app-text) !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 .18rem var(--app-focus-ring) !important;
}

.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    background: var(--app-surface-elevated) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow) !important;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
    color: var(--app-text) !important;
    background: transparent !important;
}

.ts-dropdown .active,
.ts-dropdown .option:hover,
.ts-dropdown .create:hover {
    background: var(--app-primary-soft) !important;
    color: var(--app-text) !important;
}

.ts-dropdown .selected {
    background: var(--table-selection-bg) !important;
    color: var(--table-selection-color) !important;
}

.ts-dropdown .dropdown-input,
.ts-dropdown input.dropdown-input {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control * {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--app-muted) !important;
    opacity: .85;
}

[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control,
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control {
    background-color: var(--app-surface-soft) !important;
}

[data-bs-theme="dark"] .ts-dropdown {
    background: #111827 !important;
}

/* Final dark-mode pass for form controls and Tom Select active states.
   This file is intentionally loaded after view-level styles. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] input.form-control,
[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] textarea.form-control:focus,
[data-bs-theme="dark"] input.form-control:focus,
[data-bs-theme="dark"] select.form-select:focus {
    background-color: var(--app-surface-soft) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-text) !important;
    box-shadow: 0 0 0 .18rem var(--app-focus-ring) !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea.form-control::placeholder,
[data-bs-theme="dark"] input.form-control::placeholder {
    color: var(--app-muted) !important;
    opacity: 1;
}

/* Un campo que no se puede editar tiene que verse así.
   Bootstrap solo apaga los `disabled`; los `readonly` los deja blancos, con
   pinta de editable, y la gente intenta escribir en ellos. En oscuro ya estaba
   resuelto más abajo: esto es lo mismo para el tema claro. */
.form-control[readonly]:not(.form-control-plaintext),
.form-select[readonly]:not(.form-control-plaintext) {
    background-color: var(--bs-secondary-bg, #e9ecef);
    color: var(--app-muted, #6c757d);
    cursor: not-allowed;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--app-muted) !important;
}

[data-bs-theme="dark"] .ts-wrapper,
[data-bs-theme="dark"] .ts-wrapper.single,
[data-bs-theme="dark"] .ts-wrapper.multi {
    color: var(--app-text) !important;
}

[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control,
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control,
[data-bs-theme="dark"] .ts-wrapper.input-active .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single.input-active .ts-control,
[data-bs-theme="dark"] .ts-wrapper.multi.input-active .ts-control,
[data-bs-theme="dark"] .ts-wrapper.dropdown-active .ts-control,
[data-bs-theme="dark"] .ts-wrapper.focus .ts-control,
[data-bs-theme="dark"] .ts-wrapper.plugin-dropdown_input.focus .ts-control {
    background: var(--app-surface-soft) !important;
    background-color: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

[data-bs-theme="dark"] .ts-wrapper.focus .ts-control,
[data-bs-theme="dark"] .ts-wrapper.dropdown-active .ts-control,
[data-bs-theme="dark"] .ts-wrapper.input-active .ts-control {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 .18rem var(--app-focus-ring) !important;
}

[data-bs-theme="dark"] .ts-wrapper .ts-control > input,
[data-bs-theme="dark"] .ts-wrapper.input-active .ts-control > input,
[data-bs-theme="dark"] .ts-wrapper.dropdown-active .ts-control > input,
[data-bs-theme="dark"] .ts-control input {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--app-text) !important;
    -webkit-text-fill-color: var(--app-text) !important;
}

[data-bs-theme="dark"] .ts-wrapper .ts-control .item,
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control .item,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control .item {
    background-color: transparent !important;
    color: var(--app-text) !important;
}

[data-bs-theme="dark"] .ts-wrapper.multi .ts-control .item {
    background-color: var(--app-primary-soft) !important;
    border-color: var(--app-border-strong) !important;
}

[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-dropdown.form-control,
[data-bs-theme="dark"] .ts-dropdown.form-select,
[data-bs-theme="dark"] .ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input-wrap,
[data-bs-theme="dark"] .ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input {
    background: var(--app-surface-elevated) !important;
    background-color: var(--app-surface-elevated) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

[data-bs-theme="dark"] .ts-dropdown .dropdown-input,
[data-bs-theme="dark"] .ts-dropdown input.dropdown-input,
[data-bs-theme="dark"] .ts-dropdown .form-control {
    background: var(--app-surface-soft) !important;
    background-color: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    -webkit-text-fill-color: var(--app-text) !important;
}

[data-bs-theme="dark"] .ts-dropdown .option,
[data-bs-theme="dark"] .ts-dropdown [data-selectable],
[data-bs-theme="dark"] .ts-dropdown .optgroup-header,
[data-bs-theme="dark"] .ts-dropdown .no-results,
[data-bs-theme="dark"] .ts-dropdown .create {
    background: transparent !important;
    color: var(--app-text) !important;
}

[data-bs-theme="dark"] .ts-dropdown .active,
[data-bs-theme="dark"] .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-dropdown [data-selectable]:hover,
[data-bs-theme="dark"] .ts-dropdown .create:hover {
    background: var(--app-primary-soft) !important;
    color: var(--app-text) !important;
}

[data-bs-theme="dark"] input.form-control:-webkit-autofill,
[data-bs-theme="dark"] input.form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] input.form-control:-webkit-autofill:focus,
[data-bs-theme="dark"] textarea.form-control:-webkit-autofill,
[data-bs-theme="dark"] textarea.form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] textarea.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--app-surface-soft) inset !important;
    -webkit-text-fill-color: var(--app-text) !important;
    caret-color: var(--app-text) !important;
}

/* ── Medidas ──────────────────────────────────────────────────────────────
   Tom Select traía sus propias medidas y no coincidían con las de Bootstrap,
   así que en cualquier fila que mezclara un desplegable con un input o un
   botón se veía todo descuadrado por unos pocos píxeles. Aquí se le dan las
   mismas que a .form-control para que encajen sin tener que tocar cada vista. */
.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control {
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem 2.25rem .375rem .75rem;   /* hueco a la derecha para la flecha */
    font-size: 1rem;
    line-height: 1.5;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--bs-border-radius, .375rem);
}

/* La versión pequeña, que es la que usan casi todos los formularios nuevos. */
.form-select-sm + .ts-wrapper .ts-control,
.ts-wrapper.form-select-sm .ts-control,
.ts-wrapper.ts-sm .ts-control {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .25rem 2rem .25rem .5rem;
    font-size: .875rem;
    border-radius: var(--bs-border-radius-sm, .25rem);
}

/* El desplegable ocupa lo que le den: sin esto se encogía al ancho del texto
   dentro de una columna estrecha. */
.ts-wrapper { width: 100%; }

/* La flecha, centrada de verdad respecto al control. */
.ts-wrapper.single .ts-control::after {
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
    right: .75rem !important;
}

/* Dentro de un input-group el desplegable tiene que estirarse igual que un
   input, o el botón de al lado queda flotando. */
.input-group > .ts-wrapper { flex: 1 1 auto; width: 1%; min-width: 0; }

/* Por encima de los modales.

   Tom Select le pone al desplegable `z-index: 10`. Eso basta mientras cuelgue
   de la propia página, pero un select dentro de un modal necesita sacarlo al
   body para que el modal no lo recorte, y ahí ese 10 lo deja por debajo del
   fondo del modal (1050): se abre, pero detrás, y parece que no tuviera
   opciones.

   Va en esta hoja y no en la pantalla que lo necesite porque ésta se carga la
   última —después de la hoja base de Tom Select, venga del CDN o de la copia
   local—, y cualquier regla puesta antes la pisaría el `z-index: 10` de la
   librería. */
.ts-dropdown { z-index: 1060; }