/* ============================================================================
   Select2 vestido con los tokens del CMP.

   Select2 trae su propio aspecto —caja de 28 px, bordes #aaa, azul de
   selección— que no se parece a ningún otro campo del sistema. Aquí se le
   iguala a .form-select: mismo alto, mismo borde, mismo radio y mismo anillo
   de foco. Depende de cmp-tokens.css y de select2.min.css, en ese orden.

   Los selectores llevan --default porque es el tema que se usa; acotarlo evita
   pisar otro tema si algún día se añade uno.
   ============================================================================ */

/* ---- La caja cerrada ------------------------------------------------------ */
.select2-container--default .select2-selection--single{
  height: var(--h-input);
  padding: 0 .25rem;
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  background: var(--paper);
  display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left: .75rem; padding-right: 2rem;
  line-height: 1.4;
  font-size: .9rem;
  color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: var(--ink-disabled);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 100%; right: .25rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: var(--ink-mute) transparent transparent transparent;
}

/* Foco. Select2 marca el contenedor con --open o --focus según cómo se llegue;
   se cubren los dos para que el anillo no dependa de si se abrió con ratón o
   con el tabulador. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single{
  border-color: var(--purple-soft);
  box-shadow: 0 0 0 .2rem rgba(104,30,91,.12);
}

/* Apagado: mismo gris que un .form-select deshabilitado. Importa porque
   provincia y distrito arrancan así hasta que se elige el nivel de arriba. */
.select2-container--default.select2-container--disabled .select2-selection--single{
  background: var(--line-divider);
  border-color: var(--line-muted);
  cursor: not-allowed;
}
.select2-container--default.select2-container--disabled
  .select2-selection--single .select2-selection__rendered{ color: var(--ink-disabled); }

/* ---- La caja múltiple -----------------------------------------------------
   El campo de especialidades. A diferencia del sencillo NO se le fija el alto:
   crece con las etiquetas elegidas. Fijarlo a 44 px dejaría la segunda fila
   recortada en cuanto se eligen tres o cuatro.
   -------------------------------------------------------------------------- */
.select2-container--default .select2-selection--multiple{
  min-height: var(--h-input);
  padding: .25rem .3rem;
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open  .select2-selection--multiple{
  border-color: var(--purple-soft);
  box-shadow: 0 0 0 .2rem rgba(104,30,91,.12);
}

/* Cada especialidad elegida. Morado de marca en tinta clara: son varias y en
   bloque, así que un relleno sólido pesaría demasiado en el formulario. */
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  margin: .2rem .3rem .2rem 0;
  padding: .18rem .5rem;
  border: 1px solid rgba(104,30,91,.22);
  border-radius: var(--r-pill);
  background: var(--purple-tint);
  color: var(--purple-deep);
  font-size: .8rem; line-height: 1.4;
  display: inline-flex; align-items: center; gap: .35rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  order: 2;                                  /* la aspa a la derecha, no delante */
  margin: 0; padding: 0 0 0 .1rem;
  border: none; background: none;
  color: var(--purple-soft); font-size: 1rem; line-height: 1;
}
.select2-container--default .select2-selection--multiple
  .select2-selection__choice__remove:hover{ color: var(--err); background: none; }

.select2-container--default .select2-selection--multiple .select2-search__field{
  margin-top: .25rem;
  font-size: .9rem; color: var(--ink);
}
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder{
  color: var(--ink-disabled);
}

/* Al llegar al tope, Select2 inserta este aviso en la lista. */
.select2-container--default .select2-results__option--disabled{
  color: var(--warn); font-size: .82rem;
}

/* ---- El desplegable ------------------------------------------------------- */
.select2-container--default .select2-dropdown{
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-panel);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown{ padding: .5rem; }
.select2-container--default .select2-search--dropdown .select2-search__field{
  border: 1px solid var(--line-input);
  border-radius: 7px;
  padding: .45rem .6rem;
  font-size: .88rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  outline: none;
  border-color: var(--purple-soft);
  box-shadow: 0 0 0 .2rem rgba(104,30,91,.12);
}

.select2-container--default .select2-results__option{
  padding: .5rem .75rem;
  font-size: .88rem;
}
/* Morado del CMP en lugar del azul de Select2. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{
  background: var(--purple-tint);
  color: var(--purple-deep);
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true]{
  background: var(--cmp-purple);
  color: #fff;
}
.select2-container--default .select2-results__message{
  color: var(--ink-mute); font-size: .85rem;
}

/* ---- Sobre fondo crema ---------------------------------------------------
   En el acceso los campos son crema, no blancos. Si algún combo acaba dentro
   de una caja .campo, tiene que seguir la misma pauta.
   -------------------------------------------------------------------------- */
.campo .select2-container--default .select2-selection--single{
  background: var(--cmp-cream);
  border-color: transparent;
  height: 68px;
  border-radius: 14px;
}

/* ---- Error de validación -------------------------------------------------
   El adaptador discreto marca el <select> original, que está escondido, así
   que el borde rojo no se vería. Se traslada a la caja de Select2 mediante el
   hermano inmediato, que es como Select2 la inserta.
   -------------------------------------------------------------------------- */
.form-select.input-validation-error + .select2-container--default .select2-selection--single{
  border-color: var(--err);
}

/* ---- Pantalla táctil -----------------------------------------------------
   El teclado en pantalla tapa el desplegable si la lista es larga; acotarla
   deja ver a la vez lo que se escribe y lo que se encuentra.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px){
  .select2-container--default .select2-results > .select2-results__options{ max-height: 40vh; }
}