/* Selector de idiomas - CSS mínimo para Tom Select */

/* CSS básico solo para imágenes */

/* Fallback: clase nativa que usa Tom Select para ocultar el elemento original */
.ts-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;
  white-space: nowrap !important;
}

.selector-idiomas-wrapper {
  position: relative;
  vertical-align: middle;
  min-height: 2rem;



  /* Refuerzo: si por conflictos de tema el select original persiste visible */
  select.select-idiomas {
    display: none !important;
  }

  /* --- FIX: evitar salto de línea en single select (maxItems:1) --- */
  .ts-wrapper.single .ts-control {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 1rem;
    line-height: normal;
  }

  /* Imagen de la bandera dentro del ítem seleccionado */
  .ts-wrapper img {
    width: 1.5rem;
    height: 1.5rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    border: 2px solid #DDD;
    border-radius: 100px;
    margin-right: 0.5rem;
  }

  .option-wrapper {
    display: flex;
    align-items: center;
    font-size: 1rem;
    text-transform: capitalize;
  }

  /* Ocultar completamente el input cuando hay un ítem seleccionado */
  .ts-wrapper.single.has-items .ts-control input {
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    caret-color: transparent !important; /* ocultar el cursor */
  }

  /* Cuando NO hay ítems, permitir que el input sea visible para búsqueda */
  .ts-wrapper.single:not(.has-items) .ts-control input {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  .ts-wrapper.single:not(.input-active) {
    color: transparent !important;

    /* Ocultar el dropdown cuando no está activo (evita la "rallita" de borde) */
    .ts-dropdown {
      display: none !important;
    }
  }

  /* Spinner de carga */
  .loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    right: -2rem;
    top: calc(50% - 0.75rem);
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}