/* =============================================================================
   Oasys ERP - Sistema de Diseno
   Tokens de color, tipografia, bordes, y estilos base.
   Paleta corporativa Oasys:
     Teal (#52c3c4) / Medium Blue (#2485c7) / Royal Blue (#2a51a3) / Indigo (#2e3192)
   Fondo 60/30/10: Moonless Night (#2D2D2D) / Cotton (#F4F3F1) / Oasys Blue (#2485c7)
   ============================================================================= */

/* --- Light Mode (por defecto) --- */
:root {
  /* --- Paleta corporativa Oasys (custom properties reutilizables) --- */
  --oasys-teal: #52c3c4;
  --oasys-blue: #2485c7;
  --oasys-royal: #2a51a3;
  --oasys-indigo: #2e3192;

  /* Colores base — Cotton como fondo dominante */
  --background: #F4F3F1;
  --foreground: #1C1C1E;

  /* Tarjetas */
  --card: #FFFFFF;
  --card-foreground: #1C1C1E;

  /* Popovers */
  --popover: #FFFFFF;
  --popover-foreground: #1C1C1E;

  /* Primario — Oasys Medium Blue (CTAs, botones, active states) */
  --primary: #2485c7;
  --primary-foreground: #FFFFFF;

  /* Secundario — gris calido */
  --secondary: #EAEAE8;
  --secondary-foreground: #1C1C1E;

  /* Muted */
  --muted: #EAEAE8;
  --muted-foreground: #78776F;

  /* Accent — Oasys Teal para acentos suaves */
  --accent: #EAEAE8;
  --accent-foreground: #1C1C1E;

  /* Destructivo */
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;

  /* Bordes e inputs — borde calido, ring Royal Blue */
  --border: #DCDBD8;
  --input: #DCDBD8;
  --ring: #2a51a3;

  /* Sidebar — siempre oscuro */
  --sidebar: #1C1C1E;
  --sidebar-foreground: #F4F3F1;
  --sidebar-border: #2D2D2D;
  --sidebar-accent: #2D2D2D;
  --sidebar-accent-foreground: #F4F3F1;
  --sidebar-width: 250px;

  /* Graficos — paleta corporativa Oasys */
  --chart-1: #2485c7;
  --chart-2: #52c3c4;
  --chart-3: #2a51a3;
  --chart-4: #2e3192;
  --chart-5: #f4a462;

  /* Colores semanticos (status) */
  --success: #22C55E;
  --success-foreground: #FFFFFF;
  --warning: #F59E0B;
  --warning-foreground: #FFFFFF;
  --info: #2a51a3;
  --info-foreground: #FFFFFF;

  /* Radio de bordes */
  --radius: 0.5rem;

  /* Transiciones globales (Notion-style) */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Mode — Moonless Night surfaces, Cotton text, Oasys Blue accents --- */
.dark {
  /* Paleta corporativa tambien en dark mode */
  --oasys-teal: #5fd4d5;
  --oasys-blue: #3a9ad8;
  --oasys-royal: #4a70b8;
  --oasys-indigo: #4e52a8;

  --background: #141416;
  --foreground: #F4F3F1;

  --card: #1C1C1E;
  --card-foreground: #F4F3F1;

  --popover: #1C1C1E;
  --popover-foreground: #F4F3F1;

  --primary: #3a9ad8;
  --primary-foreground: #FFFFFF;

  --secondary: #2D2D2D;
  --secondary-foreground: #F4F3F1;

  --muted: #2D2D2D;
  --muted-foreground: #8E8E8A;

  --accent: #2D2D2D;
  --accent-foreground: #F4F3F1;

  --destructive: #DC2626;
  --destructive-foreground: #F4F3F1;

  --border: #2D2D2D;
  --input: #2D2D2D;
  --ring: #4a70b8;

  --sidebar: #141416;
  --sidebar-foreground: #F4F3F1;
  --sidebar-border: #2D2D2D;
  --sidebar-accent: #1C1C1E;
  --sidebar-accent-foreground: #F4F3F1;

  --chart-1: #3a9ad8;
  --chart-2: #5fd4d5;
  --chart-3: #4a70b8;
  --chart-4: #4e52a8;
  --chart-5: #e23670;

  --success: #22C55E;
  --success-foreground: #F4F3F1;
  --warning: #F59E0B;
  --warning-foreground: #1C1C1E;
  --info: #4a70b8;
  --info-foreground: #F4F3F1;
}

/* --- Sidebar permanentemente oscuro: colores directos para nav --- */
/* Override directo de color (mayor especificidad que Tailwind utilities) */
/* Light mode: sidebar oscuro necesita texto claro */
#app-sidebar nav p,
#app-sidebar nav button[data-nav-toggle] {
  color: #8A8984;
}
#app-sidebar nav button[data-nav-toggle]:hover {
  color: #C8C7C2;
}
#app-sidebar nav a:not(.nav-active) {
  color: #C8C7C2;
}
#app-sidebar nav a:not(.nav-active):hover {
  color: #F4F3F1;
}
/* Dark mode: restaurar colores oscuros normales */
.dark #app-sidebar nav p,
.dark #app-sidebar nav button[data-nav-toggle] {
  color: #666663;
}
.dark #app-sidebar nav button[data-nav-toggle]:hover {
  color: #8E8E8A;
}
.dark #app-sidebar nav a:not(.nav-active) {
  color: #8E8E8A;
}
.dark #app-sidebar nav a:not(.nav-active):hover {
  color: #F4F3F1;
}

/* --- Resets y estilos base --- */
*,
*::before,
*::after {
  border-color: var(--border);
}

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  letter-spacing: -0.011em;
}

/* Transicion suave global para cambio de tema (Notion-style) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* --- Scrollbar personalizado (sutil, estilo Notion) --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background-color: var(--muted-foreground);
  opacity: 0.3;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--muted-foreground);
  opacity: 0.5;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.dark * {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* --- Inputs: select y date en dark mode --- */
select,
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color-scheme: light;
  background-color: var(--background);
}

.dark select,
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"] {
  color-scheme: dark;
  background-color: var(--card);
}

select option {
  background-color: var(--card);
  color: var(--foreground);
}

/* --- Checkbox y radio custom --- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* --- Focus visible global (accesibilidad) --- */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* --- Acciones de tabla: visibles en touch devices --- */
@media (hover: none) and (pointer: coarse) {
  .group .opacity-0.group-hover\:opacity-100 {
    opacity: 1 !important;
  }
}

/* --- Sidebar logo: sidebar siempre oscuro, logo siempre visible --- */
.sidebar-logo {
  filter: none;
}
.dark .sidebar-logo {
  filter: none;
}

/* --- Sidebar nav items: micro-interacciones estilo iOS --- */
#app-sidebar a,
#app-sidebar button {
  cursor: pointer;
}

#app-sidebar nav a {
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
              color 150ms cubic-bezier(0.2, 0, 0, 1),
              transform 120ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

#app-sidebar nav a:active {
  transform: scale(0.97);
}

/* Nav group headers: hover sutil */
#app-sidebar [data-nav-toggle] {
  transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* Active link: Oasys Royal Blue + texto blanco */
#app-sidebar nav a.nav-active {
  background-color: var(--oasys-royal) !important;
  color: #ffffff !important;
  font-weight: 500;
}

.dark #app-sidebar nav a.nav-active {
  background-color: var(--oasys-royal) !important;
  color: #ffffff !important;
}

#app-sidebar nav a.nav-active i {
  opacity: 1 !important;
}

/* Utilidades de tipografia para titulos de pagina */
.page-title {
  font-size: 1.375rem;      /* 22px */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--foreground);
}
.page-subtitle {
  font-size: 0.8125rem;     /* 13px */
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

/* --- prefers-reduced-motion: quitar animaciones --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Modales: ocultos por defecto (evita FOUC antes de DOMContentLoaded) --- */
[data-modal] {
  display: none;
}

/* --- Command Palette selected item --- */
.cmd-selected {
  background-color: var(--accent);
}

/* --- Input/Select: estilo premium (Take One) --- */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 0.5rem;
}

/* --- Table: hover de filas mas sutil --- */
table tbody tr {
  transition: background-color 100ms ease;
}

/* --- Badges/Pills premium --- */
.badge-primary {
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

/* --- Empty states: iconos mas grandes y sutiles --- */
.empty-state-icon {
  opacity: 0.3;
}

/* =============================================================================
   PREMIUM GRADIENTS & SOFT UI (estilo Apple / Take One)
   ============================================================================= */

/* --- Fondo principal: degradado Cotton en light, profundidad en dark --- */
#app-main {
  background: linear-gradient(180deg, #F4F3F1 0%, #EAEAE8 100%);
  min-height: 100vh;
}

.dark #app-main {
  background: linear-gradient(180deg, #141416 0%, #1C1C1E 100%);
}

/* --- Sidebar: siempre oscuro con degradado sutil --- */
#app-sidebar {
  background: linear-gradient(180deg, #1C1C1E 0%, #171718 100%) !important;
}

.dark #app-sidebar {
  background: linear-gradient(180deg, #141416 0%, #1A1A1C 100%) !important;
}

/* --- Cards: sombra suave difusa en hover (estilo Apple) --- */
.card-soft {
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
              border-color 200ms ease;
}

.card-soft:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08),
              0 2px 8px -4px rgba(0, 0, 0, 0.04);
  border-color: var(--border);
}

.dark .card-soft:hover {
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3),
              0 2px 8px -4px rgba(0, 0, 0, 0.2);
}

/* --- Card con degradado suave (reemplaza borde duro) --- */
.card-gradient {
  background: linear-gradient(145deg, #FFFFFF 0%, #F9F8F6 100%);
  border: 1px solid rgba(220, 219, 216, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
              0 2px 8px -2px rgba(0, 0, 0, 0.04),
              0 0 0 1px rgba(0, 0, 0, 0.02);
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
              border-color 200ms ease;
}

.card-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1),
              0 8px 24px -6px rgba(0, 0, 0, 0.08),
              0 0 0 1px rgba(0, 0, 0, 0.03);
  border-color: rgba(220, 219, 216, 0.7);
}

.dark .card-gradient {
  background: linear-gradient(145deg, #1C1C1E 0%, #222224 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
              0 2px 8px -2px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(255, 255, 255, 0.03);
}

.dark .card-gradient:hover {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35),
              0 8px 24px -6px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* --- Icon badge con degradado (reemplaza flat color/10) --- */
/* Degradado con paleta corporativa Oasys */
.icon-badge-blue {
  background: linear-gradient(135deg, #2485c720, #52c3c415);
}
.icon-badge-amber {
  background: linear-gradient(135deg, #f59e0b20, #fbbf2415);
}
.icon-badge-emerald {
  background: linear-gradient(135deg, #10b98120, #34d39915);
}
.icon-badge-violet {
  background: linear-gradient(135deg, #8b5cf620, #a78bfa15);
}
.icon-badge-cyan {
  background: linear-gradient(135deg, #06b6d420, #22d3ee15);
}
.icon-badge-teal {
  background: linear-gradient(135deg, #14b8a620, #2dd4bf15);
}
.icon-badge-orange {
  background: linear-gradient(135deg, #f9731620, #fb923c15);
}
.icon-badge-green {
  background: linear-gradient(135deg, #22c55e20, #4ade8015);
}
.icon-badge-rose {
  background: linear-gradient(135deg, #f4363620, #fb717115);
}

/* --- Progress bars con degradado corporativo Oasys --- */
.progress-gradient {
  background: linear-gradient(90deg, var(--oasys-indigo), var(--oasys-blue), var(--oasys-teal));
  border-radius: 9999px;
}

/* --- Topbar: glass mas pronunciado --- */
header.sticky {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* --- Sombra sutil global para bordes de tarjetas --- */
.shadow-soft {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.05),
              0 1px 2px -1px rgba(0, 0, 0, 0.03);
}

.dark .shadow-soft {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.2),
              0 1px 2px -1px rgba(0, 0, 0, 0.15);
}

/* --- Animaciones de entrada suaves (stagger) --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeInUp 0.25s cubic-bezier(0.2, 0, 0, 1) both; }
.animate-stagger-in { animation: fadeInUp 0.25s cubic-bezier(0.2, 0, 0, 1) both; }
.stagger-1 { animation-delay: 0s; }
.stagger-2 { animation-delay: 0.02s; }
.stagger-3 { animation-delay: 0.04s; }
.stagger-4 { animation-delay: 0.06s; }
.stagger-5 { animation-delay: 0.08s; }
.stagger-6 { animation-delay: 0.10s; }

/* =============================================================================
   Tom Select — Tema Oasys  (FIX DEFINITIVO v3)
   ESTRATEGIA: prefijo "html" en selectores de background → especificidad (0,n,1)
   supera cualquier regla clase-only del CDN (0,n,0) aunque sin !important.
   Z-index: 99999 en CSS + forzado via JS onDropdownOpen (ver base.html).
   ============================================================================= */

/* ---- Wrapper: resetear estilos CDN ---- */
.ts-wrapper {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ts-wrapper.single,
.ts-wrapper.multi {
  width: 100% !important;
}

/* ---- Control: el "input" visible ----
   Prefijo "html" convierte especificidad de (0,2,0) a (0,2,1).
   CDN max es (0,4,0) sin !important → nuestro (0,2,1)+!important SIEMPRE gana.
   Usamos "background:" shorthand para anular todas las sub-propiedades del CDN.
*/
html .ts-wrapper .ts-control {
  min-height: 2.25rem !important;
  padding: 0 2.25rem 0 0.75rem !important;
  border: 1px solid var(--input) !important;
  border-radius: var(--radius) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

/* Todos los estados adicionales del control — background var(--card) en todos */
html .ts-wrapper.full .ts-control,
html .ts-wrapper.single .ts-control,
html .ts-wrapper.multi .ts-control,
html .ts-wrapper.single.full .ts-control,
html .ts-wrapper.multi.full .ts-control,
html .ts-wrapper.input-active .ts-control,
html .ts-wrapper.single.input-active .ts-control,
html .ts-wrapper.focus .ts-control {
  background: var(--card) !important;
  color: var(--foreground) !important;
}

/* Focus (teclado, antes de abrir dropdown): borde + ring */
html .ts-wrapper.focus .ts-control {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 30%, transparent) !important;
  outline: none !important;
}

/* Dropdown abierto: solo borde, sin ring — evita la linea adicional visible */
html .ts-wrapper.input-active .ts-control {
  border-color: var(--ring) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Texto del item seleccionado (single) */
html .ts-wrapper.single .ts-control .item {
  color: var(--foreground) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Input de busqueda embebido en el control */
html .ts-wrapper .ts-control input[type="text"],
html .ts-wrapper .ts-control input {
  color: var(--foreground) !important;
  caret-color: var(--primary) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  min-width: 0 !important;
  flex: 1 !important;
}

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

/* Placeholder cuando no hay seleccion */
html .ts-wrapper .ts-control .ts-placeholder,
html .ts-wrapper .ts-control .placeholder {
  color: var(--muted-foreground) !important;
  font-size: 0.875rem !important;
}

/* Caret / flecha dropdown */
html .ts-wrapper.single .ts-control::after {
  border-color: var(--muted-foreground) transparent transparent transparent !important;
  border-top-color: var(--muted-foreground) !important;
  right: 0.75rem !important;
  top: 50% !important;
  margin-top: -3px !important;
}

html .ts-wrapper.single.input-active .ts-control::after {
  border-top-color: var(--ring) !important;
}

/* Boton limpiar (clear) */
html .ts-wrapper .clear-button {
  color: var(--muted-foreground) !important;
  opacity: 0.6 !important;
}

html .ts-wrapper .clear-button:hover {
  color: var(--foreground) !important;
  opacity: 1 !important;
}

/* ---- Dropdown panel ----
   body > .ts-dropdown apunta a los que dropdownParent:body genera en <body>.
   z-index: 99999 > cualquier modal (z-50=50).
   JS onDropdownOpen fuerza el mismo valor via inline style como respaldo extra.
*/
html .ts-dropdown,
html .ts-dropdown.single,
html .ts-dropdown.multi,
body > .ts-dropdown,
body > .ts-dropdown.single,
body > .ts-dropdown.multi {
  background: var(--popover) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--foreground) !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  margin-top: 4px !important;
  padding: 0 !important;
  z-index: 99999 !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

.dark body > .ts-dropdown,
html.dark .ts-dropdown,
html.dark .ts-dropdown.single,
html.dark .ts-dropdown.multi {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* ---- Dark mode: valores hardcodeados para dropdowns en body ----
   Respaldo definitivo cuando var() no resuelve para elementos body-appended.
   Especificidad (0,2,1) > CDN (0,1,0), + !important = siempre gana.
*/
.dark body > .ts-dropdown,
.dark body > .ts-dropdown.single,
.dark body > .ts-dropdown.multi {
  background: #1C1C1E !important;
  background-color: #1C1C1E !important;
  color: #F4F3F1 !important;
  border-color: #2D2D2D !important;
}

.dark body > .ts-dropdown .ts-dropdown-content {
  background: #1C1C1E !important;
  background-color: #1C1C1E !important;
}

.dark body > .ts-dropdown .dropdown-input-wrap {
  background: #1C1C1E !important;
  background-color: #1C1C1E !important;
  border-bottom-color: #2D2D2D !important;
}

.dark body > .ts-dropdown .dropdown-input {
  background: #2D2D2D !important;
  background-color: #2D2D2D !important;
  color: #F4F3F1 !important;
  border-color: #2D2D2D !important;
}

.dark body > .ts-dropdown .option {
  color: #F4F3F1 !important;
}

.dark body > .ts-dropdown .option:hover,
.dark body > .ts-dropdown .option.option--highlighted {
  background: #2D2D2D !important;
  color: #F4F3F1 !important;
}

.dark body > .ts-dropdown .option.option--selected {
  background: rgba(36, 133, 199, 0.15) !important;
  color: #3a9ad8 !important;
}

.dark body > .ts-dropdown .no-results,
.dark body > .ts-dropdown .optgroup-header {
  color: #8E8E8A !important;
  background: #1C1C1E !important;
}

/* Input busqueda dentro del dropdown (plugin dropdown_input) */
html .ts-dropdown .ts-dropdown-header,
html .ts-dropdown .dropdown-input-wrap,
body > .ts-dropdown .dropdown-input-wrap {
  padding: 0.375rem !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--popover) !important;
}

html .ts-dropdown .dropdown-input,
html .ts-dropdown input.ts-dropdown-search-input,
body > .ts-dropdown .dropdown-input {
  width: 100% !important;
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  color: var(--foreground) !important;
  font-size: 0.8125rem !important;
  font-family: inherit !important;
  padding: 0.3125rem 0.625rem !important;
  outline: none !important;
  box-shadow: none !important;
}

html .ts-dropdown .dropdown-input:focus,
html .ts-dropdown input.ts-dropdown-search-input:focus,
body > .ts-dropdown .dropdown-input:focus {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ring) 25%, transparent) !important;
}

html .ts-dropdown .dropdown-input::placeholder,
html .ts-dropdown input.ts-dropdown-search-input::placeholder,
body > .ts-dropdown .dropdown-input::placeholder {
  color: var(--muted-foreground) !important;
  font-size: 0.8125rem !important;
}

/* Lista de opciones */
html .ts-dropdown .ts-dropdown-content,
body > .ts-dropdown .ts-dropdown-content {
  padding: 0.25rem !important;
  max-height: 14rem !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--muted-foreground) transparent !important;
}

/* Cada opcion */
html .ts-dropdown .option,
body > .ts-dropdown .option {
  padding: 0.4rem 0.625rem !important;
  border-radius: calc(var(--radius) - 2px) !important;
  cursor: pointer !important;
  color: var(--foreground) !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background-color 80ms ease !important;
  background: transparent !important;
}

/* Hover + navegacion teclado */
html .ts-dropdown .option:hover,
html .ts-dropdown .option.option--highlighted,
body > .ts-dropdown .option:hover,
body > .ts-dropdown .option.option--highlighted {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

/* Opcion actualmente seleccionada en el dropdown */
html .ts-dropdown .option.option--selected,
body > .ts-dropdown .option.option--selected {
  background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
}

html .ts-dropdown .option.option--selected.option--highlighted,
html .ts-dropdown .option.option--selected:hover,
body > .ts-dropdown .option.option--selected.option--highlighted,
body > .ts-dropdown .option.option--selected:hover {
  background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  color: var(--primary) !important;
}

/* Sin resultados */
html .ts-dropdown .no-results,
body > .ts-dropdown .no-results {
  padding: 0.5rem 0.75rem !important;
  color: var(--muted-foreground) !important;
  font-size: 0.8125rem !important;
  text-align: center !important;
}

/* Optgroup header */
html .ts-dropdown .optgroup-header,
body > .ts-dropdown .optgroup-header {
  padding: 0.375rem 0.625rem 0.125rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted-foreground) !important;
  background: var(--popover) !important;
}

/* ---- Multi: tags de items seleccionados ---- */
html .ts-wrapper.multi .ts-control .item {
  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
  color: var(--primary) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent) !important;
  border-radius: calc(var(--radius) - 4px) !important;
  font-size: 0.75rem !important;
  padding: 1px 6px !important;
  margin: 2px !important;
  font-weight: 500 !important;
}

/* Spinner de carga */
.ts-wrapper .spinner {
  border-top-color: var(--primary) !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}