/*
 * Tema visual compartido para select2 (single-select).
 *
 * Antes duplicado en varias plantillas como bloques <style> inline. Las reglas
 * de estructura son las mismas en todas las variantes; solo cambian los
 * valores (color, tamaño), parametrizados aqui como variables CSS. Cada
 * variante fija esas variables sobre una clase ya existente en la pantalla
 * que la usa (ver comentario de cada bloque .select2-theme-*).
 *
 * IMPORTANTE: todas las reglas de base van prefijadas por las tres clases de
 * tema (.select2-theme-erv5-lg / -sm / -dark). Sin ese prefijo, la regla se
 * aplicaria a CUALQUIER select2 de CUALQUIER pagina que cargue este fichero
 * (incluidos los multi-select de "destinatarios de prueba" que no deben
 * tocarse). Solo el select2 cuyo wrapper tenga una de esas clases adopta el
 * tema; el resto sigue con el estilo por defecto de select2.
 *
 * El desplegable de opciones (.select2-dropdown) lo inserta select2 como hijo
 * de <body> por defecto, fuera del wrapper donde viven estas clases/variables
 * CSS. Para que el tema le llegue, cada select2() que use una variante debe
 * inicializarse con `dropdownParent: $(...).closest('.select2-theme-xxx')`
 * (ver los JS de cada pantalla). Sin eso, el desplegable cae a los valores
 * por defecto de select2 aunque la caja cerrada se vea bien.
 *
 * La flecha del desplegable no esta parametrizada: erv5 usa un icono de
 * fondo, "dark" dibuja un triangulo con bordes CSS. Son tecnicas distintas,
 * no solo valores distintos, asi que cada variante trae su propia regla de
 * flecha.
 */

.select2-theme-erv5-lg .select2-container--default .select2-selection--single,
.select2-theme-erv5-sm .select2-container--default .select2-selection--single,
.select2-theme-dark .select2-container--default .select2-selection--single {
  border: var(--select2-border-width, 1px) solid var(--select2-border-color, #DFE2E5);
  border-radius: var(--select2-border-radius, 3px);
  height: var(--select2-height, 32px);
  font-size: var(--select2-font-size, 13px);
  font-weight: var(--select2-font-weight, normal);
  background-color: var(--select2-bg, #FFFFFF);
  font-family: var(--select2-font-family, inherit);
}

.select2-theme-erv5-lg .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-theme-erv5-sm .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--select2-text-color, #657390);
  padding-left: var(--select2-padding-left, 16px);
  padding-right: var(--select2-padding-right, 32px);
  line-height: var(--select2-line-height, 30px);
  font-size: var(--select2-rendered-font-size, var(--select2-font-size, 13px));
  font-weight: var(--select2-font-weight, normal);
  font-family: var(--select2-font-family, inherit);
}

/*
 * El buscador dentro del desplegable solo se fuerza visible en erv5 (lg/sm):
 * son los temas con selects que quieren buscador. El tema "dark" (resources/)
 * lo desactiva a proposito con minimumResultsForSearch: Infinity en JS; no
 * incluir aqui .select2-theme-dark o ese ajuste queda anulado.
 */
.select2-theme-erv5-lg .select2-search--dropdown,
.select2-theme-erv5-sm .select2-search--dropdown {
  display: block;
  padding: 8px;
}

.select2-theme-erv5-lg .select2-container--default .select2-search--dropdown .select2-search__field,
.select2-theme-erv5-sm .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--select2-border-color, #DFE2E5);
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  font-family: 'National 2', sans-serif;
  transition: all 0.2s;
  color: #000;
  background-color: #FFFFFF;
  border-radius: var(--select2-border-radius, 3px);
}

.select2-theme-erv5-lg .select2-dropdown,
.select2-theme-erv5-sm .select2-dropdown,
.select2-theme-dark .select2-dropdown {
  border: var(--select2-border-width, 1px) solid var(--select2-border-color, #DFE2E5);
  border-radius: var(--select2-border-radius, 3px);
  box-shadow: var(--select2-dropdown-box-shadow, none);
}

/*
 * select2.min.css quita el borde de union (top si el dropdown abre debajo,
 * bottom si abre encima) para que no se dupliquen con el borde de la caja
 * cerrada. Esa regla nativa tiene la misma especificidad (2 clases) que la
 * de arriba; al empatar gana la que carga despues (esta hoja, tras
 * select2.min.css), reinstaurando el borde duplicado. Se repite aqui con una
 * clase mas de especificidad para que la union vuelva a quitarse.
 */
.select2-theme-erv5-lg .select2-container--open .select2-dropdown--below,
.select2-theme-erv5-sm .select2-container--open .select2-dropdown--below,
.select2-theme-dark .select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-theme-erv5-lg .select2-container--open .select2-dropdown--above,
.select2-theme-erv5-sm .select2-container--open .select2-dropdown--above,
.select2-theme-dark .select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-theme-erv5-lg .select2-results__option,
.select2-theme-erv5-sm .select2-results__option,
.select2-theme-dark .select2-results__option {
  font-size: var(--select2-option-font-size, 13px);
  padding: var(--select2-option-padding, 8px);
  color: var(--select2-option-color, #657390);
  font-family: var(--select2-font-family, inherit);
  transition: all 0.2s;
}

.select2-theme-erv5-lg .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-theme-erv5-sm .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-theme-dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-theme-erv5-lg .select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-theme-erv5-sm .select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--select2-option-highlighted-bg, #FFFFFF);
  color: var(--select2-option-highlighted-color, #000000);
}

.select2-theme-erv5-lg .select2-container--default .select2-results__option--selected,
.select2-theme-erv5-sm .select2-container--default .select2-results__option--selected,
.select2-theme-dark .select2-container--default .select2-results__option--selected,
.select2-theme-erv5-lg .select2-container--default .select2-results__option[aria-selected=true],
.select2-theme-erv5-sm .select2-container--default .select2-results__option[aria-selected=true],
.select2-theme-dark .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--select2-option-selected-bg, transparent);
  color: var(--select2-option-selected-color, inherit);
}

/*
 * Variante "erv5-lg" (48px): tema de encuestas (survey_edit_design.html,
 * survey_edit_questions.html). Reproduce exactamente los valores que antes
 * vivian duplicados en survey.css.
 */
.select2-theme-erv5-lg {
  --select2-border-color: #DFE2E5;
  --select2-border-radius: 3px;
  --select2-height: 48px;
  --select2-line-height: 32px;
  --select2-text-color: #000;
  --select2-padding-right: 20px;
  --select2-font-family: 'National 2', sans-serif;
}

.select2-theme-erv5-lg .select2-container--default .select2-selection--single .select2-selection__arrow b {
  margin-left: -21px;
  width: 10px;
  height: 6px;
  background: url("/static/img/erv5/icons/icon-8-select-arrow-grey.2f6ce608f75c.svg") no-repeat;
  top: calc(50% + 10px);
  border-style: none;
}

/*
 * Variante "erv5-sm" (32px): tema del selector de campana del autoresponder
 * (new_campaign_step_when.html), aplicada mediante esta misma clase.
 */
.select2-theme-erv5-sm {
  --select2-border-color: #DFE2E5;
  --select2-border-radius: 3px;
  --select2-height: 32px;
  --select2-line-height: 30px;
  --select2-text-color: #657390;
  --select2-padding-right: 32px;
  --select2-font-family: 'National 2', sans-serif;
}

.select2-theme-erv5-sm .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 30px;
  right: 8px;
}

.select2-theme-erv5-sm .select2-container--default .select2-selection--single .select2-selection__arrow b {
  width: 10px;
  height: 6px;
  background: url("/static/img/erv5/icons/icon-8-select-arrow-grey.2f6ce608f75c.svg") no-repeat center;
  border-style: none;
  margin-left: 0;
  margin-top: 0;
}

.select2-theme-erv5-sm .select2-results__option {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * Variante "dark" (bordes negros gruesos): tema de las herramientas
 * gratuitas de resources/ (email_signature_generator.html, schema_markup_generator.html).
 */
.select2-theme-dark {
  --select2-border-width: 3px;
  --select2-border-color: #000000;
  --select2-border-radius: 4px;
  --select2-height: 48px;
  --select2-line-height: 48px;
  --select2-font-size: 16px;
  --select2-font-weight: bold;
  --select2-rendered-font-size: 16px;
  --select2-text-color: #000000;
  --select2-padding-right: 40px;
  --select2-font-family: 'National 2 Narrow', Arial, sans-serif;
  --select2-option-color: #000000;
  --select2-option-padding: 12px 16px;
  --select2-option-font-size: 16px;
  --select2-option-highlighted-bg: #3182ce;
  --select2-option-highlighted-color: #ffffff;
  --select2-option-selected-bg: #f3f4f6;
  --select2-option-selected-color: #000000;
  --select2-dropdown-box-shadow: 0 0 3px 0 rgba(0,0,0,0.08), 0 5px 10px 0 rgba(0,0,0,0.04), 0 10px 18px 0 rgba(0,0,0,0.02), 0 16px 30px 0 rgba(0,0,0,0.04), 0 40px 80px 0 rgba(0,0,0,0.04);
}

.select2-theme-dark .select2-results__option {
  font-family: 'National 2', Arial, sans-serif;
}

.select2-theme-dark .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: 12px;
}

.select2-theme-dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #000000 transparent transparent transparent;
  border-width: 6px 6px 0 6px;
}

.select2-theme-dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #000000 transparent;
  border-width: 0 6px 6px 6px;
}

.select2-theme-dark .select2-container {
  width: 100% !important;
}

.select2-theme-dark .select2-container--default .select2-selection--single:focus,
.select2-theme-dark .select2-container--default.select2-container--focus .select2-selection--single,
.select2-theme-dark .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--select2-focus-border-color, #000000) !important;
  outline: none;
  box-shadow: none;
}

/*
 * Modificador: variante azul del borde de foco (email_signature_generator.html).
 * Se añade junto a select2-theme-dark; sin ella, el foco es negro por defecto.
 */
.select2-theme-dark--focus-blue {
  --select2-focus-border-color: #3182ce;
}

/*
 * Regla compartida de multi-select: "quitar destinatario" en rojo subrayado.
 * Duplicada identica en certified_email_send.html, new_campaign_summary.html
 * y sms_quick_send.html (email de prueba / destinatarios). Sin variante, sin
 * scoping: se aplica igual en las tres pantallas, ninguna usa una clase de tema.
 */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display.font-color-red-1 {
  color: #D1192F !important;
  text-decoration: underline;
}
