/* Asegura que el dropdown no se salga de la pantalla */
.select2-container--open .select2-dropdown {
  max-width: 100vw !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* 🎨 Estilo general del Select2 (Modo Claro por defecto) */
.select2-container .select2-selection {
  /* Utiliza la variable de borde del modo claro */
  border: 1px solid var(--tblr-border-color, #dadfe5); /* Agregamos un fallback por si la variable no está definida */
  border-radius: 5px;
  padding: 5px;
  height: auto;
  font-size: 14px;
  /* Utiliza la variable de fondo de formularios del modo claro */
  background-color: var(--tblr-bg-forms, var(--tblr-bg-surface, white));
}

/* 🎨 Estilo cuando el Select2 está en foco (Modo Claro) */
.select2-container .select2-selection:focus,
.select2-container .select2-selection:active {
  border-color: var(--tblr-primary, #0054a6); /* Usamos la variable primary de Tabler */
  /* Considera usar una variable para el box-shadow si la tienes, o ajusta el color */
  box-shadow: 0 0 5px rgba(var(--tblr-primary-rgb, 0, 84, 166), 0.5);
}

/* 🎨 Flecha del Select2 */
.select2-selection__arrow {
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}
/* Ajuste específico para la flecha que ya tenías */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 26px !important;
  position: absolute !important;
  top: 20px !important; /* Revisa si este 'top' es el adecuado o si debe ser dinámico */
  right: 9px !important;
  width: 25px !important;
}
/* Para el color del icono de la flecha, Select2 a veces usa un caracter de fuente o una imagen de fondo.
 Si es un caracter, puedes intentar cambiar su color. Si es una imagen, necesitarás una versión para modo oscuro. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--tblr-icon-color, #667382) transparent transparent transparent; /* Color por defecto de ícono en claro */
}


/* 🎨 Estilo del dropdown (Modo Claro) */
.select2-dropdown {
  border: 1px solid var(--tblr-border-color, #ccc);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Fondo del dropdown en modo claro */
  background-color: var(--tblr-bg-surface, white);
}

/* 🎨 Opciones del Select2 (Modo Claro) */
.select2-results__option {
  padding: 6px;
  font-size: 14px;
  /* Color de texto de las opciones en modo claro */
  color: var(--tblr-body-color, #182433);
}

/* 🎨 Opción resaltada (Modo Claro) */
.select2-results__option--highlighted {
  background-color: var(--tblr-primary, #0054a6);
  color: var(--tblr-primary-fg, var(--tblr-light, white));
}

/* Color del texto seleccionado (Modo Claro) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--tblr-body-color, #39393a) !important; /* Usamos la variable de color de texto del body */
}


/* 🌙 ESTILOS PARA MODO OSCURO 🌙 */
[data-bs-theme=dark] .select2-container .select2-selection {
  border: 1px solid var(--tblr-border-color); /* Ya tienes --tblr-border-color definido para dark */
  background-color: var(--tblr-bg-forms); /* Fondo de formularios en dark */
}

[data-bs-theme=dark] .select2-container .select2-selection:focus,
[data-bs-theme=dark] .select2-container .select2-selection:active {
  border-color: var(--tblr-primary); /* Mantenemos el primary, que ya tiene su versión dark si la configuras */
  /* Ajusta el shadow para el modo oscuro, quizás usando un color más claro o una opacidad diferente si es necesario */
  box-shadow: 0 0 5px rgba(var(--tblr-primary-rgb), 0.6); /* Puedes ajustar la opacidad o el color aquí */
}

/* Flecha en modo oscuro */
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--tblr-icon-color, var(--tblr-body-color)) transparent transparent transparent; /* Color de ícono o body en dark */
}

[data-bs-theme=dark] .select2-dropdown {
  border: 1px solid var(--tblr-border-color);
  background-color: var(--tblr-bg-surface); /* Fondo del dropdown en dark */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más sutil o diferente en dark */
}

[data-bs-theme=dark] .select2-results__option {
  color: var(--tblr-body-color); /* Color de texto de las opciones en dark */
}

[data-bs-theme=dark] .select2-results__option--highlighted {
  /* El color primario puede funcionar bien, pero puedes crear una variable específica si lo prefieres */
  background-color: var(--tblr-primary);
  color: var(--tblr-primary-fg); /* El foreground del primary ya debería ser claro */
}

[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--tblr-body-color) !important; /* Color del texto seleccionado en dark */
}

/* Adicional: Placeholder color */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--tblr-gray-500); /* Un color de placeholder genérico */
}

[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--tblr-secondary-color, var(--tblr-gray-500)); /* Color de placeholder en dark */
}