/* =============================================================================
   OASYS ERP — Sistema de Diseno (tokens)
   Fuente de verdad: docs/design/README.md + docs/design/oasys-design-system.dc.html
   Identidad: Notion (claro, limpio) + Linear (oscuro, afilado). Oscuro por defecto.

   Arquitectura de variables:
   1. Tokens nativos del DS (--bg-deep, --tx, --bd, --brand, --ok, ...)
      se definen por tema (light en :root, dark en .dark).
   2. Los alias tipo shadcn (--background, --foreground, --card, ...) que
      consumen los templates via Tailwind arbitrary values se definen UNA vez
      en :root referenciando los tokens DS; al cambiar de tema solo se
      sobreescriben los tokens DS y los alias se resuelven solos.
   ============================================================================= */

/* --- Tema claro (:root) — Notion-clean --- */
:root {
  /* ---- Marca (independiente del tema) ---- */
  --royal: #2A51A3;
  --indigo: #2E3192;
  --azure: #2485C7;
  /* Rampa de marca. Dos direcciones, un solo juego de paradas:
     - `--grad` (135deg) para superficies cuadradas o grandes (avatares, hero cards),
       donde la diagonal es el eje largo y el degradado se ve entero.
     - `--grad-btn` (100deg) para pildoras anchas y bajas. A 135deg la posicion del
       color es p = (x+y)/(W+H): en un boton de 170x36 la esquina superior derecha
       ya va por p=0.82, o sea que el ultimo tramo (el teal) se comprime en una cuña
       triangular contra la punta derecha y se lee como un corte. Casi horizontal,
       las bandas quedan verticales y la rampa se reparte a lo ancho. */
  --grad: linear-gradient(135deg, var(--indigo) 0%, var(--azure) 58%, var(--oasys-teal) 100%);
  --grad-btn: linear-gradient(100deg, var(--indigo) 0%, var(--azure) 58%, var(--oasys-teal) 100%);
  --primary-grad: linear-gradient(180deg, #3567D8, #244FB0);
  --primary-sh: rgba(36, 79, 176, .6);
  --brand-solid: #2F5FCA;
  --acc-glow: rgba(42, 81, 163, .35);

  /* Paleta corporativa historica (compatibilidad con tailwind.config.js) */
  --oasys-teal: #52C3C4;
  --oasys-blue: #2485C7;
  --oasys-royal: #2A51A3;
  --oasys-indigo: #2E3192;

  /* ---- Neutros y superficies ---- */
  --bg-deep: #F5F6FA;
  --bg: #FAFBFC;
  --panel: #F5F6FA;
  --card: #FFFFFF;      /* compartido: token DS y alias shadcn */
  --card-2: #F7F8FA;
  --hover: #EEF0F5;
  --bd: #E6E8EF;
  --bd-2: #D5DAE4;
  --bd-acc: rgba(42, 81, 163, .4);
  --tx: #14161C;
  --tx2: #565E6E;
  --tx3: #636A78;

  /* ---- Acentos por tema ---- */
  --brand: #2A51A3;
  --brand-h: #22448C;
  --brand-txt: #2A51A3;
  --brand-sub: #EAF0FA;
  --brand-sub-bd: #CCDBEF;
  --teal: #3FADAE;

  /* ---- Semanticos ---- */
  --ok: #0D7A4B;
  --ok-sub: #E4F6EE;
  --warn: #946012;
  --warn-sub: #FBF1DE;
  --dg: #C53A31;
  --dg-sub: #FCEBE9;

  /* ---- Sombras / glass / focus ---- */
  --sh-sm: 0 1px 2px rgba(16, 22, 40, .07);
  --sh-md: 0 8px 22px -6px rgba(16, 22, 40, .14);
  --sh-lg: 0 28px 56px -16px rgba(16, 22, 40, .24);
  --glass: rgba(250, 251, 252, .72);
  --glass-bd: rgba(20, 22, 28, .08);
  --ring: rgba(42, 81, 163, .3);  /* compartido: halo focus DS y alias shadcn */
  --bar-2: #E6EBF4;

  /* ---- Movimiento (nunca valores sueltos) ---- */
  --dur-1: .12s;
  --dur-2: .16s;
  --dur-3: .22s;
  --dur-slow: .32s;
  --ease: cubic-bezier(.2, .9, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  /* Curva iOS unica del sistema: TODOS los overlays (modal, drawer, command
     palette, toasts, dropdowns) y hovers la comparten. Misma que a/button en base.html. */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.2);

  /* Duraciones canonicas de overlays (Doherty <400ms): entrada = med, salida = fast.
     Los setTimeout de modal.js/drawer.js/toast.js/sidebar.js deben coincidir con estos ms. */
  --dur-fast: 150ms;   /* salida de overlays */
  --dur-med: 240ms;    /* entrada de overlays */

  /* Alias legacy de transicion (consumidos por reglas existentes) */
  --transition-fast: var(--dur-1) var(--ease);
  --transition-base: var(--dur-2) var(--ease);
  --transition-slow: var(--dur-slow) var(--ease);

  /* =========================================================================
     Alias tipo shadcn — consumidos por los templates (bg-[var(--card)], etc.)
     Se resuelven contra los tokens DS del tema activo. NO renombrar.
     ========================================================================= */
  --background: var(--bg-deep);
  --foreground: var(--tx);

  --card-foreground: var(--tx);

  --popover: var(--card);
  --popover-foreground: var(--tx);

  /* Accion solida: royal en claro, brand-solid en oscuro (ver .dark) */
  --primary: #2A51A3;
  --primary-foreground: #FFFFFF;

  --secondary: var(--hover);
  --secondary-foreground: var(--tx);

  --muted: var(--card-2);
  --muted-foreground: var(--tx2);

  --accent: var(--hover);
  --accent-foreground: var(--tx);

  --destructive: var(--dg);
  --destructive-foreground: #FFFFFF;

  --border: var(--bd);
  --input: var(--bd-2);

  /* Sidebar por tokens: panel claro en light, panel oscuro en dark */
  --sidebar: var(--panel);
  --sidebar-foreground: var(--tx);
  --sidebar-border: var(--bd);
  --sidebar-accent: var(--hover);
  --sidebar-accent-foreground: var(--tx);
  --sidebar-width: 250px;

  /* Graficos — paleta de marca + un semantico */
  --chart-1: var(--azure);
  --chart-2: var(--teal);
  --chart-3: var(--brand);
  --chart-4: var(--indigo);
  --chart-5: var(--warn);

  /* Semanticos (alias) */
  --success: var(--ok);
  --success-foreground: #FFFFFF;
  --warning: var(--warn);
  --warning-foreground: #FFFFFF;
  --info: var(--brand);
  --info-foreground: #FFFFFF;

  /* Radio base (8px = botones/inputs del DS) */
  --radius: 0.5rem;
}

/* --- Tema oscuro (.dark) — Eclipse: near-black calido, hairlines --- */
.dark {
  --acc-glow: rgba(42, 81, 163, .5);

  --bg-deep: #1B1A18;
  --bg: #201F1C;
  --panel: #232120;
  --card: #262421;
  --card-2: #2B2926;
  --hover: #302D29;
  --bd: rgba(255, 255, 255, .05);
  --bd-2: rgba(255, 255, 255, .09);
  /* Fondo de pagina = --bg (no --bg-deep): menos "negro", cards separan por elevacion no por borde */
  --background: var(--bg);
  --bd-acc: rgba(91, 134, 216, .42);
  --tx: #EDEDEB;
  --tx2: #B4B0A9;
  --tx3: #948F88;

  --brand: #5B86D8;
  --brand-h: #6F97E0;
  --brand-txt: #8FB0E8;
  --brand-sub: rgba(91, 134, 216, .15);
  --brand-sub-bd: rgba(91, 134, 216, .32);
  --teal: #63CCCD;

  --ok: #35C883;
  --ok-sub: rgba(53, 200, 131, .14);
  --warn: #E0A44A;
  --warn-sub: rgba(224, 164, 74, .14);
  --dg: #F26A5F;
  --dg-sub: rgba(242, 106, 95, .14);

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --sh-md: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --sh-lg: 0 30px 60px -18px rgba(0, 0, 0, .7);
  --glass: rgba(29, 28, 26, .66);
  --glass-bd: rgba(255, 255, 255, .08);
  --ring: rgba(91, 134, 216, .42);
  --bar-2: #332F2B;

  /* Alias que cambian de valor (no solo de referencia) en oscuro */
  --primary: #2F5FCA;             /* brand-solid: accion frecuente */
  --primary-foreground: #FFFFFF;
  --destructive-foreground: #FFFFFF;
  --success-foreground: #191817;  /* texto oscuro sobre verde claro */
  --warning-foreground: #191817;
  --info-foreground: #191817;
}

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

body {
  margin: 0;
  font-family: 'Onest', 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;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  letter-spacing: -0.011em;
}

/* Transicion suave global para cambio de tema */
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;
}

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

.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 nativos --- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-solid);
}

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

/* =============================================================================
   Sidebar por tokens (ya NO es "siempre oscuro"; en claro usa --panel)
   El fondo lo pone el template via bg-[var(--sidebar)] → var(--panel).
   ============================================================================= */
#app-sidebar nav p,
#app-sidebar nav button[data-nav-toggle] {
  color: var(--tx3);
}
#app-sidebar nav button[data-nav-toggle]:hover {
  color: var(--tx2);
}
#app-sidebar nav a:not(.nav-active) {
  color: var(--tx2);
}
#app-sidebar nav a:not(.nav-active):hover {
  color: var(--tx);
}

/* Logo: el wordmark es blanco; en tema claro se fuerza a negro (README DS) */
.sidebar-logo {
  filter: brightness(0) saturate(1);
}
.dark .sidebar-logo {
  filter: none;
}

/* Micro-interacciones de items de nav */
#app-sidebar a,
#app-sidebar button {
  cursor: pointer;
}

#app-sidebar nav a {
  transition: background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
  will-change: transform;
}

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

#app-sidebar [data-nav-toggle] {
  transition: color var(--dur-2) var(--ease);
}

/* Item activo: fondo suave de marca + texto de marca (DS) */
#app-sidebar nav a.nav-active {
  background-color: var(--brand-sub) !important;
  color: var(--brand-txt) !important;
  font-weight: 600;
}

#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: 800;
  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;
}

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

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

/* --- Inputs: radio 8px del DS --- */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 0.5rem;
}

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

/* --- Badges/Pills legacy --- */
.badge-primary {
  background-color: var(--brand-sub);
  color: var(--brand-txt);
}

/* --- Empty states legacy --- */
.empty-state-icon {
  opacity: 0.3;
}

/* =============================================================================
   Superficies y pulido global (adaptado a tokens DS)
   ============================================================================= */

/* Fondo del contenido principal */
#app-main {
  background: var(--bg-deep);
  min-height: 100vh;
}

/* Tarjetas con hover suave */
.card-soft {
  transition: transform var(--dur-3) var(--ease),
              box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease);
}

.card-soft:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
  border-color: var(--bd-acc);
}

/* Tarjeta con degradado suave (superficie card → card-2) */
.card-gradient {
  background: linear-gradient(145deg, var(--card) 0%, var(--card-2) 100%);
  border: 1px solid var(--bd);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-3) var(--ease),
              box-shadow var(--dur-3) var(--ease),
              border-color var(--dur-3) var(--ease);
}

.card-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--bd-acc);
}

/* Dark: la tarjeta se define por ELEVACION (sombra suave), no por un borde
   blanco. Elimina el "contorno blanco" que se sentia chafa (queja recurrente
   de Gabriel sobre bordes blancos en todo el modo oscuro). */
.dark .card-gradient {
  border-color: rgba(255, 255, 255, .025);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 44px -24px rgba(0, 0, 0, .75);
}

/* Icon badges con degradado (hex + alpha: funcionan en ambos temas) */
.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 de marca */
.progress-gradient {
  background: var(--grad);
  border-radius: 9999px;
}

/* Topbar: glass del DS */
header.sticky {
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
}

/* Sombra sutil para bordes de tarjetas */
.shadow-soft {
  box-shadow: var(--sh-sm);
}

/* --- Animaciones de entrada suaves (stagger) --- */
/* El keyframe final DEBE terminar en `transform: none`, no en `translateY(0)`.
   Estas animaciones corren con fill-mode `both`, asi que el estado final queda
   aplicado permanentemente: un transform distinto de `none` convierte al
   elemento en containing block de sus descendientes `position: fixed` y crea un
   stacking context que encierra sus z-index (menus flotantes desplazados y
   pintados debajo del contenido que sigue). */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.animate-fade-in { animation: fadeInUp var(--dur-med) var(--ease-out) both; }
.animate-stagger-in { animation: fadeInUp var(--dur-med) var(--ease-out) 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 de marca + halo DS */
html .ts-wrapper.focus .ts-control {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--ring) !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(--brand) !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(--brand) !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(--brand) !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: var(--sh-md) !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.
   Valores = paleta Eclipse del DS (card #242220 / card-2 #2A2825 / tx #EDEDEB).
*/
.dark body > .ts-dropdown,
.dark body > .ts-dropdown.single,
.dark body > .ts-dropdown.multi {
  background: #242220 !important;
  background-color: #242220 !important;
  color: #EDEDEB !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

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

.dark body > .ts-dropdown .dropdown-input-wrap {
  background: #242220 !important;
  background-color: #242220 !important;
  border-bottom-color: rgba(255, 255, 255, 0.075) !important;
}

.dark body > .ts-dropdown .dropdown-input {
  background: #2A2825 !important;
  background-color: #2A2825 !important;
  color: #EDEDEB !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

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

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

.dark body > .ts-dropdown .option.option--selected {
  background: rgba(91, 134, 216, 0.15) !important;
  color: #8FB0E8 !important;
}

.dark body > .ts-dropdown .no-results,
.dark body > .ts-dropdown .optgroup-header {
  color: #948F88 !important;
  background: #242220 !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(--brand) !important;
  box-shadow: 0 0 0 1.5px var(--ring) !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: var(--brand-sub) !important;
  color: var(--brand-txt) !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: var(--brand-sub-bd) !important;
  color: var(--brand-txt) !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: var(--brand-sub) !important;
  color: var(--brand-txt) !important;
  border: 1px solid var(--brand-sub-bd) !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(--brand) !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

/* --- 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;
    scroll-behavior: auto !important;
  }
}