/* ============================================================
   LM Dropdown — lista compacta + modal "Exibir tudo"
   ------------------------------------------------------------
   Implementa o artboard "Dropdown - Listar e Limpar" (Claude
   Design, projeto 20923643). Os valores vêm dos tokens --ml-*
   de modern-layout.css; nenhum hex solto além dos que o próprio
   artboard fixa (#fff e o rgba do overlay).

   ATENÇÃO: o artboard usa `font-family: var(--ml-font)`, token que
   NÃO existe em modern-layout.css. Aqui o widget herda a fonte da
   página (`inherit`) em vez de referenciar um token inexistente —
   trocar por var(--ml-font) só depois de o token ser criado.
   ============================================================ */

.lm-dd {
    position: relative;
    font-family: inherit;
}

/* ——— Trigger ——— */

.lm-dd-trigger {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-sm);
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 6px 0 12px;
    cursor: pointer;
    font-size: 14px;
    gap: 8px;
    transition: var(--ml-transition);
}

.lm-dd.is-open .lm-dd-trigger {
    border-color: var(--ml-primary-light);
    box-shadow: 0 0 0 3px var(--ml-primary-subtle);
}

/* Espelha o `disabled` do <select> nativo. Quem desabilita continua
   sendo setFieldState()/cleanAndDisable() no <select>; o widget só
   reflete, via MutationObserver. */
.lm-dd.is-disabled .lm-dd-trigger {
    background: var(--ml-neutral-50, #F7FAFC);
    cursor: not-allowed;
    opacity: 0.68;
}

.lm-dd.is-disabled .lm-dd-trigger * {
    pointer-events: none;
}

.lm-dd-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ml-text);
}

.lm-dd.is-empty .lm-dd-value {
    color: var(--ml-text-muted);
}

.lm-dd-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lm-dd-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--ml-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
}

.lm-dd-btn:hover {
    background: var(--ml-surface-hover);
    color: var(--ml-text);
}

.lm-dd-btn:focus-visible {
    outline: 2px solid var(--ml-primary-light);
    outline-offset: 1px;
}

/* O "x" e seu divisor só existem quando há valor — `sc-if bHasValue`
   no artboard. Vale para campo obrigatório também: quem barra o
   vazio é a validação do submit, não a ausência do botão. */
.lm-dd.is-empty .lm-dd-clear,
.lm-dd.is-empty .lm-dd-sep {
    display: none;
}

.lm-dd-sep {
    width: 1px;
    height: 18px;
    background: var(--ml-border);
    margin: 0 2px;
    flex: 0 0 auto;
}

.lm-dd-chevron {
    transition: transform 0.15s ease;
}

.lm-dd.is-open .lm-dd-chevron {
    transform: rotate(180deg);
}

/* ——— Lista compacta ——— */

/* Coluna flex: quando há busca, ela fica fixa no topo e só a lista rola —
   uma barra de pesquisa que some ao rolar não serve para nada. Sem busca o
   resultado visual é o mesmo de antes (só a lista, com o mesmo teto). */
.lm-dd-menu {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-md);
    box-shadow: var(--ml-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px;
}

.lm-dd-menu-lista {
    max-height: 220px;
    overflow-y: auto;
}

/* Sem espaço embaixo (campo no fim do formulário/da janela), o menu abre PARA
   CIMA — decidido por `ajustaPosicao()` em lmDropdown.js. */
.lm-dd.is-up .lm-dd-menu {
    top: auto;
    bottom: calc(100% + 6px);
}

.lm-dd-menu-busca {
    padding: 2px 2px 8px;
    flex: 0 0 auto;
}

/* Versão compacta do campo de busca: dentro do menu ele divide espaço com a
   lista, então é mais baixo e de raio menor que o do modal. */
.lm-dd-menu-busca .lm-dd-search {
    height: 34px;
    padding: 0 12px;
    gap: 8px;
    border-radius: var(--ml-radius-sm);
    box-shadow: none;
}

.lm-dd-menu-busca .lm-dd-search input {
    font-size: 13.5px;
}

.lm-dd-opt {
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    border-radius: var(--ml-radius-sm);
    color: var(--ml-text);
}

/* Hover e destaque do teclado são DOIS estados e precisam de dois tons.
   Desde que a lista abre com uma opção destacada (a escolhida ou a
   primeira), o mouse passando por outra linha deixava as duas com o mesmo
   fundo, e não se via qual era a do Enter. O hover fica no tom mais claro,
   só para acompanhar o cursor; o destaque do teclado leva o tom mais firme
   (--ml-surface-active) e o filete. Sobre a própria destacada, o destaque
   vence (vem depois, mesma especificidade). */
.lm-dd-opt:hover {
    background: #FAF7F6;   /* entre o branco e o --ml-surface-hover (#F5F0EE) */
}

/* A opção ativa do TECLADO precisa de mais que o fundo: com o mouse existe
   um cursor explicando onde se está, com o teclado não existe nada. Um
   filete na borda de início dá a posição sem depender de contraste de fundo,
   que é o que se perde em tema escuro e em tela ruim. */
.lm-dd-opt.is-active {
    background: var(--ml-surface-active, #EDE5E2);
    box-shadow: inset 2px 0 0 0 var(--ml-primary);
}

/* O nome INTEIRO, quebrando linha quando precisa. Assuntos e classes do
   catálogo são longos ("Direito Civil (02) | Família (0217) | ...") e diferem
   justamente no fim: com reticências, duas opções viravam o mesmo texto e só
   dava para escolher pelo código. `min-width: 0` deixa o item flex encolher
   abaixo da palavra mais longa, e `overflow-wrap: anywhere` quebra um código
   sem espaço que não caberia na linha. */
.lm-dd-opt-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.lm-dd-opt svg {
    flex: 0 0 auto;
}

.lm-dd-showall {
    color: var(--ml-primary);
    font-weight: 600;
    border-top: 1px solid var(--ml-border-light);
    margin-top: 4px;
    padding-top: 12px;
}

.lm-dd-state {
    padding: 14px 10px;
    text-align: center;
    color: var(--ml-text-muted);
    font-size: 13px;
}

/* ——— Modal "Exibir tudo" ——— */

/* O artboard usa z-index:90, que basta numa tela isolada do Claude Design.
   Na app este overlay concorre com o modal Bootstrap que HOSPEDA o formulário
   da inicial (.modal do BS5 = 1055, backdrop 1050) — em 90 ele nasce atrás e
   fica invisível. 1060 passa à frente do modal hospedeiro sem entrar na faixa
   dos overlays de 9999+ da app. Ver também o append em abreModal(). */
.lm-dd-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(28, 18, 16, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lm-dd-modal {
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: 520px;
    background: #fff;
    border-radius: var(--ml-radius-lg);
    box-shadow: var(--ml-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lm-dd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ml-border-light);
}

.lm-dd-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ml-text);
}

.lm-dd-modal-close {
    width: 28px;
    height: 28px;
}

.lm-dd-modal-search {
    padding: 16px 20px 8px;
}

/* Campo de busca.
   O artboard usa a classe `.lm-search` do components.css do design system —
   arquivo que a APP NÃO CARREGA (só os tokens --ml-* existem, em
   modern-layout.css). Depender dela deixava o container sem estilo nenhum e o
   <input> cru herdando o estilo global de input da plataforma: caixa com borda
   escura e a lupa do lado de fora. Por isso o componente está portado aqui, com
   nome próprio (.lm-dd-search), e os resets são explícitos — o input não tem
   classe, então pega qualquer regra global de `input` da plataforma. */
.lm-dd-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ml-surface);
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-md);
    height: 40px;
    padding: 0 16px;
    box-shadow: var(--ml-shadow-sm);
    transition: var(--ml-transition);
}

.lm-dd-search:focus-within {
    border-color: var(--ml-primary-light);
    box-shadow: 0 0 0 3px var(--ml-primary-subtle);
}

.lm-dd-search svg {
    flex: 0 0 auto;
}

.lm-dd-modal .lm-dd-search input[type="text"],
.lm-dd-search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ml-text);
    font-family: inherit;
}

.lm-dd-modal .lm-dd-search input[type="text"]:focus,
.lm-dd-search input:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

.lm-dd-search input::placeholder {
    color: var(--ml-text-muted);
    opacity: 1;
}

.lm-dd-modal-list {
    padding: 8px 12px 16px;
    overflow-y: auto;
    flex: 1;
}

.lm-dd-modal-list .lm-dd-opt {
    padding: 10px 12px;
    font-size: 14px;
}

.lm-dd-modal-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--ml-text-muted);
    font-size: 13.5px;
}

/* O <select> nativo continua no DOM como fonte de verdade (é dele que
   saem .val(), o submit e o disabled) — só não aparece. Mesmo motivo
   pelo qual o select2 o escondia. */
select.lm-dd-source {
    display: none !important;
}

/* Opção que o catálogo devolve desabilitada (regra por tribunal). Continua
   visível — com o sufixo que o processResults já anexa — mas não seleciona. */
.lm-dd-opt.is-disabled {
    color: var(--ml-text-muted);
    cursor: not-allowed;
}

.lm-dd-opt.is-disabled:hover {
    background: transparent;
}

/* ============================================================
   Inputs de texto da inicial (Valor da causa, Nº processo de origem,
   Fundamento legal) — mesmo visual do gatilho do dropdown.

   ESCOPADO em #modalProporAcao de propósito: a classe `.form-petition` é
   usada em 10 outras views (partes, conta, peticionamento, modais de parte
   e participante). Estilizá-la crua mudaria inputs de toda a plataforma,
   muito além deste formulário.

   A cor da borda NÃO é a única em jogo: changeColorInput() escreve
   `border-color` INLINE (#D70F0F no erro, neutro quando válido) e inline
   vence folha de estilo. O neutro dele foi alinhado ao token no
   petitions_auxiliar.js (LM_BORDA_NEUTRA) — sem isso o campo voltaria ao
   cinza antigo no primeiro toque, desalinhado dos dropdowns.
   ============================================================ */

#modalProporAcao .form-petition,
#modalProporAcao input.form-petition {
    min-height: 40px;
    border: 1px solid var(--ml-border);
    border-radius: var(--ml-radius-sm);
    background: #fff;
    padding: 0 12px;
    font-size: 14px;
    color: var(--ml-text);
    box-shadow: none;
    transition: var(--ml-transition);
}

#modalProporAcao .form-petition:focus,
#modalProporAcao input.form-petition:focus {
    border-color: var(--ml-primary-light);
    box-shadow: 0 0 0 3px var(--ml-primary-subtle);
    outline: 0;
}

#modalProporAcao .form-petition::placeholder {
    color: var(--ml-text-muted);
    opacity: 1;
}

#modalProporAcao .form-petition:disabled,
#modalProporAcao .form-petition[readonly] {
    background: var(--ml-neutral-50, #F7FAFC);
    color: var(--ml-text-muted);
}

/* ============================================================
   Polos e participantes — APARÊNCIA do widget sobre o select2.
   ------------------------------------------------------------
   Estes 4 campos CONTINUAM sendo select2, com tudo que isso traz: favoritos
   e o optgroup "Favoritos", markup rico nas opções, o atalho "Novo contato/
   Novo participante" e as instâncias dinâmicas do "+ Adicionar". Nada disso
   foi tocado — aqui só se troca a pele.

   ESCOPO: `selectionCssClass: 'lm-s2-sel'` e `dropdownCssClass: 'lm-s2-drop'`
   nos 6 inits em petitions_auxiliar.js. É `selectionCssClass` e NÃO
   `containerCssClass`: esta última é opção do select2 3.x e NÃO EXISTE no
   4.1 (zero ocorrências em select2.js), então o gancho do container era um
   no-op silencioso — foi por isso que a borda e o raio não mudaram na
   primeira tentativa. A classe cai na própria `.select2-selection`; o estado
   (--open, --focus, --disabled) continua no container, que é o pai.

   POR QUE `!important` AQUI: `style.min.css` traz, para a plataforma inteira,
       .select2-container--default .select2-selection--single {
           border: 1px solid #ced4da !important; border-radius: .25rem !important }
   e `!important` vence qualquer especificidade sem `!important`. Só `border`
   e `border-radius` precisam disso; o resto entra por especificidade normal.

   A borda vermelha de validação (`.select2-invalid`, também `!important`)
   é reafirmada no fim do bloco, com especificidade maior que a daqui — senão
   esta pele apagaria o estado de erro.
   ============================================================ */

/* ——— Gatilho (fechado) ——— */

/* NÃO tente centralizar por flex aqui. `display:flex` neste seletor PERDE a
   cascata: o select2.min.css traz
       .select2-container .select2-selection--single { display: block }
   com a MESMA especificidade (0,2,0) e é carregado DEPOIS deste arquivo no
   header_sistema.php — empate resolve por ordem, e quem vem depois ganha.
   O `align-items:center` que estava aqui era inerte, e a centralização vertical
   vinha, sem ninguém perceber, do `padding:.3rem` do style.min.css sobre o
   texto. Ao zerar aquele padding, o texto subiu.

   O gatilho continua sendo o bloco que o select2 monta; a centralização é feita
   por line-height no texto (ver a regra do __rendered abaixo), que é como o
   próprio select2 centraliza o dele. Mudar para flex aqui ligaria de uma vez as
   regras de `order`/`flex` do "x" e da seta, alterando a estrutura destes
   campos — exatamente o que esta repaginada não deve fazer. */
.lm-s2-sel.select2-selection--single {
    min-height: 40px;
    /* `height:40px!important` do style.min.css vence de qualquer forma; 40px é
       a mesma altura do gatilho do widget, então não há o que disputar. */
    border: 1px solid var(--ml-border) !important;
    border-radius: var(--ml-radius-sm) !important;
    background: #fff;
    padding: 0 6px 0 12px;
    font-size: 14px;
    transition: var(--ml-transition);
}

.select2-container--focus .lm-s2-sel.select2-selection--single,
.select2-container--open .lm-s2-sel.select2-selection--single {
    border-color: var(--ml-primary-light) !important;
    box-shadow: 0 0 0 3px var(--ml-primary-subtle);
}

/* O texto (placeholder E valor selecionado) recebe recuo de duas regras:
     select2.min.css  .select2-container .select2-selection--single
                      .select2-selection__rendered { padding-left: 8px }
     style.min.css    ...mesmo seletor... { padding: .3rem .75rem !important }
   A segunda são 12px que somavam aos 12px do gatilho: 24px de recuo.

   !important NÃO BASTA aqui. Quando os dois lados têm !important, quem decide
   é a ESPECIFICIDADE, e a do style.min.css é (0,3,0). Um seletor
   `.lm-s2-sel .select2-selection__rendered` é só (0,2,0) e PERDE — foi
   exatamente o que aconteceu na primeira tentativa. Daí o `.select2-container`
   à frente, que leva este seletor a (0,4,0).

   (jsdom não arbitra conflito de !important por especificidade — pega a última
   regra —, então o valor computado que ele devolve aqui NÃO serve de prova:
   confira no navegador.)

   O recuo do campo é responsabilidade do GATILHO (`padding: 0 6px 0 12px`),
   nunca do texto. O `.3rem` vertical também cai e não faz falta: o gatilho é
   flex com align-items:center e min-height 40px. */
.select2-container .lm-s2-sel.select2-selection--single .select2-selection__rendered {
    /* Centralização vertical: o gatilho tem 40px com box-sizing:border-box e
       1px de borda, logo 38px de caixa de conteúdo. É assim que o próprio
       select2 centraliza o dele (line-height:28px numa caixa de 30px). Não use
       padding vertical para isto: era o `.3rem` do style.min.css que segurava o
       texto no meio, por acidente, e ele cai junto com o padding-left. */
    line-height: 38px;
    /* À esquerda, zero: o recuo do campo é do gatilho. À direita, 16px, porque
       a seta é `position:absolute; right:1px; width:20px` — fora do fluxo, ela
       não empurra nada. Quem reservava o espaço dela era o `padding-right:20px`
       que o select2 põe AQUI; zerar os dois lados faria o texto longo passar
       por baixo da seta, com as reticências escondidas atrás dela.

       34px + os 6px do gatilho = 40px da borda, que é exatamente onde o texto
       do widget termina (6px + botão de 26px + 8px de gap). A seta ocupa de
       6px a 32px, então ainda sobram 8px entre o texto e ela. */
    padding: 0 34px 0 0 !important;
    color: var(--ml-text);
}

.lm-s2-sel .select2-selection__placeholder {
    color: var(--ml-text-muted);
}

/* O "x" nativo (allowClear) no lugar e no tom do "x" do widget. */
.lm-s2-sel .select2-selection__clear {
    order: 2;
    width: 26px;
    height: 26px;
    margin: 0 2px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--ml-text-muted);
    font-size: 16px;
    font-weight: 400;
    flex: 0 0 auto;
}

.lm-s2-sel .select2-selection__clear:hover {
    background: var(--ml-surface-hover);
    color: var(--ml-text);
}

/* Seta: o select2 desenha um triângulo por borda CSS; entra o mesmo chevron
   dos campos repaginados, como SVG de fundo.

   A GEOMETRIA precisa de (0,4,0). O select2.min.css fixa
   `.select2-container--default .select2-selection--single .select2-selection__arrow
   {position:absolute; top:1px; right:1px; width:20px}` em (0,3,0): com um
   seletor de (0,2,0) a seta ficava a 1px da borda, com o chevron de 14px
   terminando a 4px dela — colada, contra os 12px do gatilho do widget.

   Ela se posiciona contra o `.select2-container` (position:relative, 40px de
   altura, sem borda), NÃO contra o gatilho, que é `position:static`.
   Espelhando o widget: botão de 26px a 6px da borda, chevron de 14px centrado
   nele, ou seja terminando a 6+6=12px — o mesmo recuo do `.lm-dd-btn`.
   Vertical: (40-26)/2 = 7px.

   `top` em vez de translateY de propósito: o estado aberto usa `transform`
   para girar a seta, e centralizar por transform faria os dois brigarem. */
.select2-container .lm-s2-sel.select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 7px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239C8E87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.15s ease;
}

.lm-s2-sel .select2-selection__arrow b {
    display: none;   /* o triângulo nativo */
}

/* Mesma especificidade (0,4,0) da regra acima, e DEPOIS dela no arquivo, para
   o giro vencer sem precisar de !important. */
.select2-container--open .lm-s2-sel.select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
}

/* Campo desabilitado, no mesmo tom do gatilho desabilitado do widget */
.select2-container--disabled .lm-s2-sel.select2-selection--single {
    background: var(--ml-neutral-50, #F7FAFC);
    opacity: 0.68;
    cursor: not-allowed;
}

/* ——— Dropdown ——— */

.lm-s2-drop.select2-dropdown {
    border: 1px solid var(--ml-border) !important;
    border-radius: var(--ml-radius-md) !important;
    box-shadow: var(--ml-shadow-lg);
    padding: 6px;
    background: #fff;
}

/* O `>` NÃO é decorativo. A <ul> aninhada do grupo também carrega a classe
   `select2-results__options`, então sem o combinador de filho direto ela
   ganhava `max-height` SEM `overflow` — o conteúdo transbordava e pintava por
   cima do que vem depois na lista, que é justamente o "Novo contato".
   O próprio select2 escreve a regra com `>` pelo mesmo motivo:
     .select2-results > .select2-results__options{max-height:200px;overflow-y:auto} */
.lm-s2-drop .select2-results > .select2-results__options {
    max-height: 220px;
}

/* CUIDADO com o que é "option" aqui. No select2 4.1 o GRUPO também é um
   .select2-results__option:

     <li class="select2-results__option select2-results__option--group">
       <strong class="select2-results__group">Favoritos</strong>
       <ul class="select2-results__options select2-results__options--nested"> … </ul>
     </li>

   Uma regra genérica de padding pega o container do grupo e empurra a lista
   aninhada inteira mais 10px para dentro — além de desalinhar o "Novo
   contato", que é item de nível raiz e não fica dentro de grupo nenhum.
   Por isso o :not() abaixo.

   O "Novo contato" fica FORA desta regra de propósito: ele tem estilo próprio,
   injetado por ensureSelect2NewShortcutStyle() em petitions_auxiliar.js
   (label #718096, peso 600, fundo sempre transparente). Impor fonte, cor e
   espaçamento por cima descaracterizava o atalho. */
/* Mesmo espaçamento das opções do widget (menu 6px + item 10px), para os
   dois dropdowns do formulário terem a mesma lista. */
.lm-s2-drop .select2-results__option:not(.select2-results__option--group):not(.select2-new-shortcut) {
    padding: 8px 10px;
    font-size: 13.5px;
    border-radius: var(--ml-radius-sm);
    color: var(--ml-text);
}

/* O atalho "Novo contato" fica FORA da regra acima de propósito: ele tem
   fonte, cor e fundo próprios (ver `ensureSelect2NewShortcutStyle`), e impor
   os do item o descaracterizava. Mas o RECUO ele tem de compartilhar, senão
   fica 4px à esquerda das demais linhas — só o padding-left, nada mais. */
.lm-s2-drop .select2-results__option.select2-new-shortcut {
    padding-left: 10px;
}

/* O container do grupo não recua nada: quem recua é o item. */
.lm-s2-drop .select2-results__option--group {
    padding: 0;
}

.lm-s2-drop .select2-results__options--nested {
    padding: 0;
}

/* Fundo do item sob o cursor/teclado. O atalho "Novo contato" traz o próprio
   `background-color: transparent !important` (ensureSelect2NewShortcutStyle),
   então continua se desenhando como antes — não brigamos com ele. */
/* !important aqui por causa de
     modern-layout.min.css  body.modern-layout .select2-results__option--highlighted
       { background: var(--ml-primary-subtle) !important; color: var(--ml-primary-dark) !important }
   que pinta o item sob o cursor de rosado em TODO select2 da plataforma. Nos
   campos repaginados o hover é cinza (--ml-surface-hover); sem isto, o
   dropdown dos polos destoaria dos vizinhos dentro do mesmo formulário.
   O escopo .lm-s2-drop garante que só estes 4 campos mudam — o resto da
   plataforma segue com o rosado. */
.lm-s2-drop .select2-results__option--highlighted:not(.select2-new-shortcut):not(.select2-results__option--group) {
    background: var(--ml-surface-hover) !important;
    color: var(--ml-text) !important;
}

/* No 4.1 o item escolhido ganha a CLASSE --selected (o atributo
   aria-selected="true" é do 4.0). O :not() repete aqui para o atalho "Novo
   contato" nunca ser pintado como selecionado. */
.lm-s2-drop .select2-results__option--selected:not(.select2-new-shortcut) {
    background: var(--ml-primary-subtle);
    color: var(--ml-text);
}

/* Cabeçalho do optgroup "Favoritos" */
.lm-s2-drop .select2-results__group {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ml-text-muted);
}

/* Busca do dropdown, no desenho da busca do menu do widget */
.lm-s2-drop .select2-search--dropdown {
    padding: 2px 2px 8px;
}

.lm-s2-drop .select2-search--dropdown .select2-search__field {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ml-border) !important;
    border-radius: var(--ml-radius-sm) !important;
    background: var(--ml-surface);
    font-size: 13.5px;
    color: var(--ml-text);
    outline: 0;
    transition: var(--ml-transition);
}

.lm-s2-drop .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ml-primary-light) !important;
    box-shadow: 0 0 0 3px var(--ml-primary-subtle);
}

.lm-s2-drop .select2-results__message {
    padding: 14px 10px;
    text-align: center;
    color: var(--ml-text-muted);
    font-size: 13px;
}

/* ——— Estado de erro ———
   `.select2-invalid` (aplicada ao CONTAINER por validateNomeAutoridadeCoatora
   e afins) pinta a borda de vermelho com !important. A pele acima também usa
   !important, então sem esta reafirmação — de especificidade maior — o erro
   deixaria de aparecer. */
.select2-container.select2-invalid .lm-s2-sel.select2-selection--single,
.select2-container.select2-invalid .lm-s2-sel.select2-selection {
    border-color: #d70f0f !important;
    box-shadow: none;
}