/* ============================================================
   tema.css — cor de acento do TrackAI
   ============================================================

   POR QUE ESTE ARQUIVO EXISTE
   ---------------------------
   Até 11/09/2026 a cor de acento vivia copiada no :root de 14
   páginas. Trocar a identidade da marca significava editar 14
   arquivos e torcer pra não esquecer nenhum.

   E o risco não era teórico: uma das cópias já tinha divergido
   sozinha. acessos.html chamava o token de --gold e usava um
   dourado um pouco mais claro que o das outras treze páginas.
   Ninguém decidiu isso em algum momento; a cópia simplesmente
   envelheceu separada das irmãs. É exatamente o que acontece
   quando o mesmo valor mora em 14 lugares.

   Daqui pra frente o acento mora AQUI, num lugar só. Trocar a
   cor da marca é editar as linhas abaixo — não quatorze arquivos.

   O QUE NÃO ESTÁ AQUI, DE PROPÓSITO
   ---------------------------------
   Fundos (--bg, --surface, --border, --text...) e cores
   semânticas (--green, --red, --yellow...) continuam no :root de
   cada página. Não é esquecimento: hoje eles REALMENTE divergem
   entre as telas. O --bg varia de #0e0e12 a #0f1117, e o --green
   do atendimento é o verde do WhatsApp (#25D366), não o verde
   das outras páginas. Puxar isso pra cá agora mudaria a
   aparência de telas que estão em uso — é outra tarefa, com
   outro olho em cima.
   ============================================================ */

:root{
  /* Azul petróleo: identidade do TrackAI como produto próprio.
     Substituiu o dourado que era herança visual da marca da rede
     (LVO/Ortoestética). Sair da cor é sair da marca do sócio. */
  --primary:       #0E9AA7;
  --primary-hover: #17b8c6;

  /* Texto POR CIMA do acento. O petróleo é claro o bastante pra
     que texto branco fique no limite do confortável, então a
     identidade define um tom escuro pra usar em cima dele.
     ATENÇÃO: ainda não está ligado. Os botões trazem color:#fff
     escrito dentro da própria regra (.btn-primary, .topnav
     a.active, .tab.on ...), então mudar pra cá exige uma passada
     nessas regras — mexe em layout, não só em token, e por isso
     ficou fora desta troca. O token fica pronto pra ela. */
  --on-primary:    #04262a;

  /* Apelido legado. acessos.html batizou o acento de --gold e
     usa var(--gold) nas regras dela; index.html também pede
     var(--gold) na .tenant-tag. Apontar pro mesmo token faz as
     duas acompanharem a marca sozinhas na próxima troca de cor.
     Quando essas regras passarem a usar --primary direto, esta
     linha pode sair — e o nome "gold" morre junto com ela. */
  --gold: var(--primary);

  /* Declara pro navegador que a página é escura. É o conserto de
     RAIZ da barra de rolagem branca: sem isto o Chrome assume
     tema claro e pinta a barra (e selects, e caixas de data) de
     cinza-claro, por mais escuro que o CSS pinte o resto. As
     regras abaixo afinam a aparência; esta faz o navegador parar
     de trabalhar contra o tema. */
  color-scheme: dark;
}

/* ============================================================
   BARRA DE ROLAGEM
   ============================================================
   Mora aqui, e não nas páginas, porque o problema é o mesmo em
   todas: o quadro de leads rolando na horizontal com uma barra
   clara cortando o fundo escuro. Resolver em 14 arquivos seria
   repetir o erro que este arquivo existe pra não repetir.

   Dois motores, porque nenhum navegador entende os dois:
   - scrollbar-color / scrollbar-width: Firefox e o padrão novo
   - ::-webkit-scrollbar-*: Chrome, Edge e Safari
   Quem entender os dois aplica o padrão e ignora o -webkit-.

   O polegar é var(--border) — o mesmo cinza das divisórias da
   interface. Não é o petróleo de propósito: a barra é apoio,
   não conteúdo; pintá-la com a cor da marca puxaria o olho pro
   canto da tela toda vez que alguém rola uma lista.
   ============================================================ */

/* O seletor universal, e não só html/body, porque a barra que
   incomoda é a do quadro de leads — um contêiner interno com
   overflow, que tem barra própria e não herda a da página. */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--border, #2e3348) var(--bg, #0f1117); /* polegar, trilho */
}

*::-webkit-scrollbar{
  /* width vale pra barra vertical, height pra horizontal — a do
     quadro de leads é a horizontal, então as duas precisam estar aqui. */
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track{
  background: var(--bg, #0f1117);
}

/* Sem border/box-shadow no polegar: algumas telas (o quadro do
   crm.html) já declaram barras finas de 4px, e uma borda aqui
   comeria o polegar delas inteiro. */
*::-webkit-scrollbar-thumb{
  background: var(--border, #2e3348);
  border-radius: 6px;
}

/* Clareia no hover em vez de escurecer: o polegar já é mais claro
   que o fundo, então o caminho de "aparecer mais" é pra cima. */
*::-webkit-scrollbar-thumb:hover{
  background: var(--muted, #718096);
}

/* O quadradinho onde a barra horizontal encontra a vertical —
   fica branco por padrão e é o que mais denuncia o tema claro. */
*::-webkit-scrollbar-corner{
  background: var(--bg, #0f1117);
}