/* Selo de procedencia do cabecalho — de onde vem o dado e quando chegou.
   Markup canonico (o JS monta o miolo; ver assets/js/sync-selo.js):

     <h1>Envios <span class="sync-selo" id="selo" hidden></span></h1>
     -> <span class="sync-selo sync-selo-ok" title="Fonte: Nibo. ...">
          <i class="sync-dot"></i>Nibo · sincronizado 13/08 01:12
        </span>

   ============================================================
   POR QUE AS CORES SAO LITERAIS E NAO var(--ok) / var(--meta)
   ============================================================
   As 7 telas que carregam esta folha NAO falam o mesmo vocabulario de tokens:
   envios e desempenho nao definem --ok, --meta nem --borda (usam --green,
   --mut, --line), e satisfacao nao define --amber. Uma folha compartilhada
   escrita em cima desses nomes sairia sem cor exatamente nessas telas, e sem
   erro nenhum — o chip apareceria preto sobre transparente e ninguem
   perceberia ate' alguem reclamar que "sumiu".

   Entao os valores moram aqui, e sao os MESMOS hex dos tokens equivalentes das
   telas que os tem (--ok/--amber/--meta de honorarios_ativos.html), para o chip
   nao destoar de quem tem paleta propria.

   ============================================================
   PREFIXO sync- OBRIGATORIO
   ============================================================
   `.selo` ja' existe em controle_contabil.html (escopado a `.prazo .selo`), e
   aquele arquivo registra o aviso de nao reusar o nome. Toda classe daqui leva
   `sync-`.

   E, pelo mesmo motivo do CLAUDE.md sobre metrics.css: o <style> inline da
   pagina vem DEPOIS deste <link> e vence com a mesma especificidade. Ao adotar
   a folha numa tela, confira que nao sobrou regra morta com estes nomes no
   inline. */

.sync-selo {
  --sync-tinta:  #6b6b73;   /* = --meta. --meta2 (#78787f) reprova AA: 4,44:1 */
  --sync-fundo:  #fafbfc;   /* = --card claro */
  --sync-borda:  #e4e4e7;
  --sync-ok:     #16a34a;
  --sync-alerta: #d97706;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
  background: var(--sync-fundo);
  border: 1px solid var(--sync-borda);
  border-radius: 99px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sync-tinta);
  /* O chip vive dentro do <h1>: sem isto ele herda 700 e o tamanho do titulo. */
  font-family: inherit;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: default;
}

/* OBRIGATORIO. `hidden` sozinho nao esconde nada aqui: o atributo vale
   `display:none` na folha do navegador, e QUALQUER `display` de autor ganha
   dele. Sem esta regra o `display:inline-flex` acima vence, e o elemento vazio
   vira uma pilula cinza — que aparece em toda tela enquanto o dado nao chega, e
   fica para sempre nas que nao souberem a data. Especificidade 0,2,0 tambem
   passa na frente do `display:flex` do @media la' embaixo. */
.sync-selo[hidden] {
  display: none;
}

body.dark .sync-selo {
  --sync-tinta:  #828c9d;
  --sync-fundo:  rgba(255, 255, 255, .03);
  --sync-borda:  rgba(255, 255, 255, .09);
  --sync-ok:     #4ade80;
  --sync-alerta: #fbbf24;
}

.sync-selo .sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sync-ok);
}

/* Rodada velha ou que nao terminou bem. O tom vai na BORDA e no ponto, nao no
   fundo: o selo e' procedencia, nao alarme — quem alarma e' o banner #aviso das
   telas de lakehouse, e dois vermelhos competindo no mesmo cabecalho ensinam a
   ignorar os dois. */
.sync-selo-alerta {
  border-color: var(--sync-alerta);
}

/* Cor sozinha nao pode ser o unico portador do estado (WCAG 1.4.1): no alerta
   o ponto vira ANEL, entao a diferenca sobrevive em daltonismo e em impressao
   preto-e-branco. O title= carrega a frase inteira para quem usa leitor. */
.sync-selo-alerta .sync-dot {
  background: transparent;
  border: 2px solid var(--sync-alerta);
  width: 8px;
  height: 8px;
  box-sizing: border-box;
}

/* No celular o cabecalho ja' briga por espaco. O chip desce para a propria
   linha em vez de espremer o titulo, e ai' pode quebrar em duas linhas. */
@media (max-width: 560px) {
  .sync-selo {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    white-space: normal;
  }
}