/* ============================================================
   Melhor Passagem · CRM — camada SITE (aditiva)
   ------------------------------------------------------------
   A linha que aparece embaixo do campo "Link da tarifa" (tela
   Balcão) dizendo de que site é o endereço colado — e avisando
   quando o select Fonte discorda dele.

   Nasceu do @unlumen-ui/favicon-search, que troca a lupa do
   campo pelo favicon do site enquanto se digita. Do original
   ficou a IDEIA (o campo reconhecer o site na hora). A mecânica
   é o oposto, de propósito, e o porquê está em
   ~/.claude/snippets/unlumen-ui-favicon-search.tsx:
     · lá o ícone vem de google.com/s2/favicons, ou seja, cada
       pausa de digitação manda o conteúdo do campo para o
       Google. Aqui NADA sai da máquina: o catálogo é fechado e
       mora em crm/core/fonte_link.py (e a cópia do ds-site.js);
     · lá o favicon "encontrado" é, metade das vezes, o globo
       cinza que o Google devolve com HTTP 404 — medido: smiles
       e azul caem nele. Aqui, site fora do catálogo é dito com
       todas as letras em vez de ganhar um ícone qualquer;
     · o selo é o avatar de companhia que o CRM já tem
       (.ds-avatar-cia + --ds-cia-*), então LATAM sai vermelha e
       Azul sai azul sem baixar logo de ninguém.

   Quem decide o texto é o ds-site.js; aqui só o desenho.
   Reversão: tirar este <link> e o <script>. Sem os dois o campo
   volta a ser um input comum — nada aqui é estrutural.
   ============================================================ */

.ds-site-linha {
  display: flex;
  align-items: center;
  gap: var(--ds-esp-8, 8px);
  margin: 6px 0 2px;
  min-height: 22px;
  font-family: var(--ds-fonte, inherit);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ds-texto-meta, #737373);
  /* a linha nasce reservada: sem isso o campo Observações pula
     para baixo na primeira colagem */
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .16s ease-out, transform .16s ease-out;
}
.ds-site-linha.ds-site-visivel { opacity: 1; transform: none; }

/* o selo: mesma bolinha do avatar de companhia, no tamanho de
   texto. O fundo NÃO mora aqui: as classes de cor da casa
   (.ds-cia-latam e irmãs, no ds-components.css) valem uma classe
   só, igual a esta, e como o ds-site.css é carregado depois um
   `background` aqui apagaria a cor da companhia — medido no
   tema escuro, onde a LATAM saiu azul. Quem não é companhia
   ganha .ds-site-neutro logo abaixo. */
.ds-site-selo {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ds-branco, #fff);
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  /* a entrada do selo é a única herança visual do original */
  transform: scale(.72);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.2);
}
.ds-site-linha.ds-site-visivel .ds-site-selo { transform: none; }
.ds-site-selo.ds-site-neutro { background: var(--ds-cia-neutra, #1A2DB3); }
.ds-site-selo.ds-site-vazio {
  background: var(--ds-n-100, #F5F5F5);
  color: var(--ds-texto-meta, #737373);
  box-shadow: inset 0 0 0 1px var(--ds-n-200, #E5E5E5);
}

.ds-site-nome { color: var(--ds-texto-forte, #262626); font-weight: 600; }
.ds-site-linha.ds-site-ok .ds-site-nome { color: var(--ds-ok-texto, #006045); }
.ds-site-linha.ds-site-atencao { color: var(--ds-alerta-texto, #894B00); }
.ds-site-linha.ds-site-atencao .ds-site-nome { color: var(--ds-alerta-texto, #894B00); }
.ds-site-linha.ds-site-atencao .ds-site-selo {
  box-shadow: 0 0 0 2px var(--ds-alerta-fundo, #FDEAD7);
}

/* Quem lê com o movimento desligado recebe o mesmo texto, sem a
   mola nem o deslize — o original anima scale + blur sem olhar
   para esta preferência. */
@media (prefers-reduced-motion: reduce) {
  .ds-site-linha, .ds-site-selo { transition: none; transform: none; }
}

@media (max-width: 640px) {
  /* no celular a frase quebra em vez de espremer o selo */
  .ds-site-linha { align-items: flex-start; }
  .ds-site-selo { margin-top: 1px; }
}