/* ============================================================
 * Tom Select — Estilos globales (Tabler, light + dark)
 * Úsalo en cualquier pantalla: basta con cargar este archivo
 * y usar Tom Select sobre cualquier <select>.
 *
 * data-bs-theme por defecto es "light" (ver <html> en app.blade.php); el
 * usuario puede cambiar a oscuro en tiempo de ejecución. Todo lo de este
 * archivo debe verse bien en AMBOS modos: el bloque base es el modo claro
 * (el default real de la app) y [data-bs-theme=dark] lo overridea para el
 * oscuro — antes el dropdown/opciones quedaban SIEMPRE oscuros sin importar
 * el tema, por eso en modo claro las opciones se veían con muy mal contraste.
 * ============================================================ */

.ts-wrapper.single .ts-control {
    background-color: var(--tblr-bg-surface) !important;
    border: 1px solid var(--tblr-border-color) !important;
    border-radius: 8px !important;
    color: var(--tblr-body-color) !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0.4375rem 2rem 0.4375rem 0.75rem !important;
    cursor: pointer !important;
    min-height: 0 !important;
    line-height: 1.5 !important;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* Foco / dropdown abierto — modo claro (default). */
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.single.dropdown-active .ts-control {
    background-color: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-orange, #f76707) !important;
    box-shadow: 0 0 0 2px rgba(247, 103, 7, 0.15) !important;
}
[data-bs-theme=dark] .ts-wrapper.single.focus .ts-control,
[data-bs-theme=dark] .ts-wrapper.single.dropdown-active .ts-control {
    background-color: #1e1e1e !important;
    border-color: #ffb74d !important;
    box-shadow: 0 0 0 2px rgba(255, 183, 77, 0.2) !important;
}
.ts-wrapper.single .ts-control::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    border: solid rgba(var(--tblr-body-color-rgb), 0.45);
    border-width: 0 1.5px 1.5px 0;
    padding: 3px;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}
.ts-wrapper.single .ts-control > input {
    min-height: 0 !important; padding: 0 !important;
    margin: 0 !important; line-height: 1.5 !important;
    color: var(--tblr-body-color) !important;
}
.ts-wrapper.single .ts-control > input::placeholder {
    color: rgba(var(--tblr-body-color-rgb), 0.4) !important;
}
.ts-wrapper.single .ts-control > .item {
    line-height: 1.5 !important; margin: 0 !important;
}

/* ─── Dropdown (lista de opciones) — modo claro (default) ──────────── */
.ts-dropdown {
    background: var(--tblr-bg-surface, #fff) !important;
    border: 1px solid var(--tblr-border-color, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    margin-top: 4px !important;
    padding: 8px !important;
    animation: tsDropIn 200ms cubic-bezier(0.2, 0, 0, 1);
    transform-origin: top center;
    /* Por encima de modales Bootstrap (.modal = 1055). Necesario cuando
       se usa dropdownParent:'body' dentro de un modal. */
    z-index: 1080 !important;
}
@keyframes tsDropIn {
    from { opacity: 0; transform: scaleY(0.92) translateY(-4px); }
    to { opacity: 1; transform: scaleY(1) translateY(0); }
}
.ts-dropdown .option {
    color: var(--tblr-body-color, #1f2937) !important; padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important; font-size: 0.875rem !important;
    transition: background 150ms ease; cursor: pointer !important;
}
.ts-dropdown .option:hover, .ts-dropdown .option.active {
    background: rgba(247, 103, 7, 0.10) !important; color: #c2410c !important;
}
.ts-dropdown .option.selected {
    background: rgba(247, 103, 7, 0.16) !important; color: #c2410c !important;
}
.ts-dropdown .no-results {
    color: rgba(var(--tblr-body-color-rgb), 0.5) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    text-align: center;
}
.ts-dropdown .spinner {
    text-align: center;
    padding: 0.5rem;
    color: rgba(var(--tblr-body-color-rgb), 0.5);
    font-size: 0.8rem;
}

/* ─── Dropdown — modo oscuro (idéntico al que ya existía) ───────────── */
[data-bs-theme=dark] .ts-dropdown {
    background: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
[data-bs-theme=dark] .ts-dropdown .option {
    color: #e2e2e9 !important;
}
[data-bs-theme=dark] .ts-dropdown .option:hover,
[data-bs-theme=dark] .ts-dropdown .option.active {
    background: rgba(255, 183, 77, 0.12) !important; color: #ffb74d !important;
}
[data-bs-theme=dark] .ts-dropdown .option.selected {
    background: rgba(255, 183, 77, 0.18) !important; color: #ffb74d !important;
}
[data-bs-theme=dark] .ts-dropdown .no-results {
    color: rgba(226, 226, 233, 0.4) !important;
}
[data-bs-theme=dark] .ts-dropdown .spinner {
    color: rgba(226, 226, 233, 0.4);
}

/* ─── Multi-select (chips) — modo claro (default) ───────────────────── */
.ts-wrapper.multi .ts-control {
    background-color: var(--tblr-bg-surface) !important;
    border: 1px solid var(--tblr-border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 0.3125rem 0.5rem !important;
}
.ts-wrapper.multi.focus .ts-control,
.ts-wrapper.multi.dropdown-active .ts-control {
    border-color: #f76707 !important;
    box-shadow: 0 0 0 2px rgba(247, 103, 7, 0.15) !important;
}
.ts-wrapper.multi .ts-control > input {
    color: var(--tblr-body-color) !important;
}
.ts-wrapper.multi .ts-control > input::placeholder {
    color: rgba(var(--tblr-body-color-rgb), 0.4) !important;
}
/* Cada chip seleccionado (.item = <div> dentro de .ts-control) */
.ts-wrapper.multi .ts-control > div.item {
    background: rgba(247, 103, 7, 0.16) !important;
    color: #c2410c !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    margin: 2px 4px 2px 0 !important;
    font-size: 0.8125rem !important;
}
.ts-wrapper.plugin-remove_button .item .remove {
    border-left: 1px solid rgba(194, 65, 12, 0.25) !important;
    color: inherit !important;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: rgba(194, 65, 12, 0.15) !important;
}

/* ─── Multi-select (chips) — modo oscuro ─────────────────────────────── */
[data-bs-theme=dark] .ts-wrapper.multi.focus .ts-control,
[data-bs-theme=dark] .ts-wrapper.multi.dropdown-active .ts-control {
    background-color: #1e1e1e !important;
    border-color: #ffb74d !important;
    box-shadow: 0 0 0 2px rgba(255, 183, 77, 0.2) !important;
}
[data-bs-theme=dark] .ts-wrapper.multi .ts-control > div.item {
    background: rgba(255, 183, 77, 0.18) !important;
    color: #ffb74d !important;
}
[data-bs-theme=dark] .ts-wrapper.plugin-remove_button .item .remove {
    border-left-color: rgba(255, 183, 77, 0.25) !important;
}
[data-bs-theme=dark] .ts-wrapper.plugin-remove_button .item .remove:hover {
    background: rgba(255, 183, 77, 0.15) !important;
}