/**
 * ============================================
 * MSI STUDIO DESIGN SYSTEM - SELECT2 INTEGRATION
 * ============================================
 *
 * Este archivo contiene la integración y personalización de Select2
 * para que se adapte perfectamente al design system de MSI Studio.
 *
 * Select2 es una librería jQuery que mejora los elementos select estándar
 * con búsqueda, opciones múltiples, carga remota de datos y más.
 *
 * INSTALACIÓN:
 * 1. Incluir jQuery (requisito de Select2):
 *    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 *
 * 2. Incluir Select2:
 *    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
 *    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 *
 * 3. Incluir este archivo después de select2.css:
 *    <link rel="stylesheet" href="design-system/select2.css">
 *
 * USO BÁSICO:
 * $('.select2-basic').select2({
 *   theme: 'msi-studio'
 * });
 *
 * CARACTERÍSTICAS:
 * - Tema personalizado compatible con light/dark mode
 * - Estilos coherentes con el design system
 * - Soporte para búsqueda, tags, y selección múltiple
 * - Estados de validación (success, error, warning)
 * - Tamaños (sm, md, lg)
 * - Accesibilidad mejorada
 */

/* ============================================
   SELECT2 - CONTENEDOR PRINCIPAL
   ============================================ */

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;

  background-color: transparent;
  border: none;
}

/* ============================================
   SELECT2 - SELECCIÓN (Campo Principal)
   ============================================ */

.select2-container--msi-studio .select2-selection {
  width: 100%;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-body-md);
  line-height: var(--line-height-body-md);
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--bg-invert) !important;
  border-radius: var(--radius-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}

.select2-container--msi-studio .select2-selection:hover {
  border-color: var(--border-hover);
}

.select2-container--msi-studio.select2-container--focus .select2-selection,
.select2-container--msi-studio.select2-container--open .select2-selection {
  border-color: var(--border-info);
  box-shadow: var(--gaia-control-focus-ring);
  background-color: var(--bg-primary);
}

[data-bs-theme="dark"] .select2-container--msi-studio.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .select2-container--msi-studio.select2-container--open .select2-selection {
  box-shadow: var(--gaia-control-focus-ring);
}

/* Estado Deshabilitado */
.select2-container--msi-studio.select2-container--disabled .select2-selection {
  background-color: var(--bg-disabled);
  border-color: var(--border-disabled);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================
   SELECT2 - SELECCIÓN SIMPLE
   ============================================ */

.select2-container--msi-studio .select2-selection--single {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--gaia-control-height);
  min-height: var(--gaia-control-height);
  padding: var(--gaia-control-padding-block) var(--spacing-40) var(--gaia-control-padding-block) var(--gaia-control-padding-inline);
  line-height: var(--gaia-control-line-height);
}

.select2-container--msi-studio .select2-selection--single .select2-selection__rendered {
  display: block;
  padding: 0;
  line-height: var(--gaia-control-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.select2-container--msi-studio .select2-selection--single .select2-selection__placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.select2-container--msi-studio .select2-selection--single .select2-selection__arrow {
  position: absolute;
  right: var(--spacing-12);
  top: 50%;
  transform: translateY(-50%);
  width: var(--gaia-control-line-height);
  height: var(--gaia-control-line-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.select2-container--msi-studio .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-secondary) transparent transparent transparent;
  border-style: solid;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  border-width: 6px 5px 0;
  height: 0;
  width: 0;
  margin-left: -5px;
  margin-top: -2px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.select2-container--msi-studio.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-secondary) transparent;
  border-width: 0 5px 6px;
}

/* ============================================
   SELECT2 - SELECCIÓN MÚLTIPLE
   ============================================ */

.select2-container--msi-studio .select2-selection--multiple {
  min-height: var(--gaia-control-height);
  padding: var(--spacing-4) var(--spacing-12);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-6);
}

.select2-container--msi-studio .select2-selection--multiple 
.select2.select2-container.select2-container--msi-studio {
  display: none ;
}

.select2-container--msi-studio .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.select2-container--msi-studio .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-body-sm);
  line-height: 1;
  margin: 0;
  cursor: default;
}

.select2-container--msi-studio .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--text-primary);
  cursor: pointer;
  font-weight: bold;
  margin-left: 0;
  margin-right: var(--spacing-4);
  order: -1;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.select2-container--msi-studio .select2-selection--multiple .select2-selection__choice__remove:hover {
  opacity: 1;
}

.select2-container--msi-studio .select2-selection--multiple .select2-search {
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 100px;
}

.select2-container--msi-studio .select2-selection--multiple .select2-search__field {
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
  width: 100%;
}

.select2-container--msi-studio .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.select2.select2-container.select2-container--msi-studio.select2-container--below
span.select2.select2-container.select2-container--msi-studio.select2-container--below {
  visibility: hidden;
  height: 0;
}

/* ============================================
   SELECT2 - DROPDOWN
   ============================================ */

.select2-container--msi-studio .select2-dropdown {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: var(--spacing-4);
  overflow: hidden;
}

.select2-container--msi-studio.select2-container--above .select2-dropdown {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
}

/* ============================================
   SELECT2 - BÚSQUEDA EN DROPDOWN
   ============================================ */

.select2-container--msi-studio .select2-search--dropdown {
  padding: var(--spacing-12);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
}

.select2-container--msi-studio .select2-search--dropdown .select2-search__field {
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.select2-container--msi-studio .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.select2-container--msi-studio .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--border-info);
  box-shadow: var(--gaia-control-focus-ring);
}

/* ============================================
   SELECT2 - RESULTADOS
   ============================================ */

.select2-container--msi-studio .select2-results {
  display: block;
  max-height: 300px;
  overflow-y: auto;
}

.select2-container--msi-studio .select2-results__options {
  list-style: none;
  margin: 0;
  padding: var(--spacing-4) 0;
}

.select2-container--msi-studio .select2-results__option {
  padding: var(--spacing-10) var(--spacing-16);
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

/* Estado Hover */
.select2-container--msi-studio .select2-results__option--highlighted {
  background-color: var(--bg-accent-secondary);
  color: var(--text-primary);
}

.select2-container--msi-studio .select2-results__option--highlighted:hover {
  background-color: var(--bg-tertiary);
  color: var(--bg-invert);
}

/* Estado Seleccionado */
.select2-container--msi-studio .select2-results__option--selected {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: var(--font-weight-demi-bold);
  position: relative;
}

.select2-container--msi-studio .select2-results__option--selected::after {
  content: '✓';
  position: absolute;
  right: var(--spacing-16);
  color: var(--text-success);
  font-weight: bold;
}

/* Estado Deshabilitado */
.select2-container--msi-studio .select2-results__option--disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Sin Resultados */
.select2-container--msi-studio .select2-results__message {
  color: var(--text-secondary);
  padding: var(--spacing-16);
  text-align: center;
  font-size: var(--font-size-body-sm);
}

/* ============================================
   SELECT2 - GRUPOS DE OPCIONES
   ============================================ */

.select2-container--msi-studio .select2-results__group {
  display: block;
  padding: var(--spacing-12) var(--spacing-16) var(--spacing-4);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.select2-container--msi-studio .select2-results__option[role="group"] {
  padding: 0;
}

.select2-container--msi-studio .select2-results__option[role="group"] .select2-results__options--nested .select2-results__option {
  padding-left: var(--spacing-32);
}

/* ============================================
   SELECT2 - LOADING
   ============================================ */

.select2-container--msi-studio .select2-results__option--loading {
  color: var(--text-secondary);
  padding: var(--spacing-16);
  text-align: center;
}

.select2-container--msi-studio .select2-results__option--loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-primary);
  border-top-color: var(--bg-accent);
  border-radius: 50%;
  animation: select2-spin 0.6s linear infinite;
  margin-left: var(--spacing-8);
  vertical-align: middle;
}

@keyframes select2-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   SELECT2 - TAMAÑOS
   ============================================ */

/* Small */
.select2-container--msi-studio.select2-small .select2-selection {
  min-height: 40px;
  padding: var(--spacing-8) var(--spacing-32) var(--spacing-8) var(--spacing-12);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
}

.select2-container--msi-studio.select2-small .select2-selection--multiple {
  min-height: 40px;
  padding: var(--spacing-2) var(--spacing-8);
}

.select2-container--msi-studio.select2-small .select2-selection--multiple .select2-selection__choice {
  font-size: var(--font-size-caption);
  padding: var(--spacing-2) var(--spacing-6);
}

/* Large */
.select2-container--msi-studio.select2-large .select2-selection {
  min-height: 56px;
  padding: var(--spacing-16) var(--spacing-48) var(--spacing-16) var(--spacing-20);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.select2-container--msi-studio.select2-large .select2-selection--multiple {
  min-height: 56px;
  padding: var(--spacing-6) var(--spacing-16);
}

.select2-container--msi-studio.select2-large .select2-selection--multiple .select2-selection__choice {
  font-size: var(--font-size-body-md);
  padding: var(--spacing-6) var(--spacing-10);
}

/* ============================================
   SELECT2 - ESTADOS DE VALIDACIÓN
   ============================================ */

/* Success */
.select2-container--msi-studio.select2-success .select2-selection {
  border-color: var(--border-success) !important;
}

.select2-container--msi-studio.select2-success.select2-container--focus .select2-selection,
.select2-container--msi-studio.select2-success.select2-container--open .select2-selection {
  border-color: var(--border-success);
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.1);
}

/* Error */
.select2-container--msi-studio.select2-error .select2-selection {
  border-color: var(--border-error) !important;
}

.select2-container--msi-studio.select2-error.select2-container--focus .select2-selection,
.select2-container--msi-studio.select2-error.select2-container--open .select2-selection {
  border-color: var(--border-error);
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.1);
}

/* Warning */
.select2-container--msi-studio.select2-warning .select2-selection {
  border-color: var(--border-warning) !important;
}

.select2-container--msi-studio.select2-warning.select2-container--focus .select2-selection,
.select2-container--msi-studio.select2-warning.select2-container--open .select2-selection {
  border-color: var(--border-warning);
  box-shadow: 0 0 0 3px rgb(234 179 8 / 0.1);
}

/* ============================================
   SELECT2 - CLEAR BUTTON
   ============================================ */

.select2-container--msi-studio .select2-selection__clear {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  margin-right: var(--spacing-8);
  padding: 0 var(--spacing-4);
  transition: color 0.2s ease;
}

.select2-container--msi-studio .select2-selection__clear:hover {
  color: var(--error-red);
}

/* ============================================
   SELECT2 - SCROLLBAR PERSONALIZADO
   ============================================ */

.select2-container--msi-studio .select2-results__options::-webkit-scrollbar {
  width: 8px;
}

.select2-container--msi-studio .select2-results__options::-webkit-scrollbar-track {
  background: var(--bg-card) !important;
  border-radius: var(--radius-sm);
}

.select2-container--msi-studio .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--bg-card) !important;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.select2-container--msi-studio .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* Firefox */
.select2-container--msi-studio .select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-card) var(--bg-card);
}

/* ============================================
   SELECT2 - COMPATIBILIDAD CON FORM-GROUP
   ============================================ */

.form-group .select2-container--msi-studio {
  display: block;
  width: 100%;
}

/* ============================================
   SELECT2 - CLASES HELPER
   ============================================ */

/* Para aplicar el tema automáticamente */
.select2-msi {
  width: 100%;
}

/* Para ocultar el select original */
.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

/* ============================================
   SELECT2 - RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
  .select2-container--msi-studio .select2-dropdown {
    max-width: calc(100vw - 32px);
  }
  
  .select2-container--msi-studio .select2-results {
    max-height: 240px;
  }
}

/* ============================================
   SELECT2 - ACCESIBILIDAD
   ============================================ */

.select2-container--msi-studio .select2-selection:focus-visible {
  outline: 2px solid var(--border-info);
  outline-offset: 2px;
}

.select2-container--msi-studio .select2-search__field:focus-visible {
  outline: 2px solid var(--border-info);
  outline-offset: 2px;
}

/* ============================================
   SELECT2 - ANIMACIONES
   ============================================ */

.select2-container--msi-studio .select2-dropdown {
  animation: select2-dropdown-fade-in 0.2s ease;
}

@keyframes select2-dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   SELECT2 - SOPORTE PARA TAGS
   ============================================ */

.select2-container--msi-studio .select2-selection--multiple .select2-selection__choice.select2-tag {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px dashed var(--border-primary);
}

.select2-container--msi-studio .select2-selection--multiple .select2-selection__choice.select2-tag .select2-selection__choice__remove {
  color: var(--text-primary);
}

/* ============================================
   SELECT2 - PLACEHOLDER MEJORADO
   ============================================ */

.select2-container--msi-studio .select2-selection--single .select2-selection__placeholder,
.select2-container--msi-studio .select2-selection--multiple .select2-selection__placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
  font-style: italic;
}

/* ============================================
   SELECT2 - INPUT GROUP
   ============================================ */

.input-group .select2-container .select2-selection--single {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  html .select2-container--msi-studio .select2-selection,
  html .select2-container--msi-studio .select2-selection--multiple .select2-selection__choice__remove,
  html .select2-container--msi-studio .select2-search--dropdown .select2-search__field,
  html .select2-container--msi-studio .select2-results__option,
  html .select2-container--msi-studio .select2-selection__clear,
  html .select2-container--msi-studio .select2-results__options::-webkit-scrollbar-thumb {
    transition: none;
  }

  html .select2-container--msi-studio .select2-dropdown,
  html .select2-container--msi-studio .select2-results__option--loading::after {
    animation: none;
  }
}