/* =============================================================
   tom-select-tabler.css
   Hace que Tom Select se vea igual que un .form-control de Tabler
   Incluir DESPUÉS de tabler.min.css y tom-select.bootstrap5.min.css
   ============================================================= */

/* Contenedor principal */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-control {
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-forms, #fff);
    padding: 0.5625rem 0.75rem;
    font-size: var(--tblr-body-font-size, 0.875rem);
    font-family: var(--tblr-font-sans-serif);
    color: var(--tblr-body-color);
    min-height: calc(1.4285714286 * 1em + 0.8750rem + 2px);
    box-shadow:  0 1px 2px rgba(0,0,0,.05);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: text;
    line-height: 1.4285714286;
}

/* Focus */
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.focus .ts-control {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
    outline: 0;
}

/* Quitar flecha nativa del single select */
.ts-wrapper.single .ts-control:after {
    display: none;
}

/* Input interno */
.ts-control input {
    font-size: var(--tblr-body-font-size, 0.875rem);
    font-family: var(--tblr-font-sans-serif);
    color: var(--tblr-body-color);
    padding: 0;
    margin: 0;
    line-height: inherit;
}

/* Placeholder */
.ts-control .placeholder {
    color: var(--tblr-secondary-color, #868e96);
    font-size: var(--tblr-body-font-size, 0.875rem);
}

/* Dropdown */
.ts-dropdown {
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    font-size: var(--tblr-body-font-size, 0.875rem);
    font-family: var(--tblr-font-sans-serif);
    background-color: var(--tblr-bg-surface, #fff);
    margin-top: 2px;
    z-index: 1055;
}

/* Opciones del dropdown */
.ts-dropdown .option {
    padding: 0.4rem 0.75rem;
    color: var(--tblr-body-color);
    cursor: pointer;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--tblr-primary);
    color: #fff;
}

.ts-dropdown .option.selected {
    background-color: rgba(var(--tblr-primary-rgb), 0.08);
    color: var(--tblr-primary);
}

/* Sin resultados */
.ts-dropdown .no-results {
    padding: 0.4rem 0.75rem;
    color: var(--tblr-secondary-color, #868e96);
}

/* Estado disabled */
.ts-wrapper.disabled .ts-control {
    background-color: var(--tblr-disabled-bg, #f1f5f9);
    opacity: 1;
    cursor: not-allowed;
}