/* ==========================================================================
   SOCIALFLUX - FOLHA DE MARCA  (rebrand v1.0)
   --------------------------------------------------------------------------
   O QUE E ESTE ARQUIVO

   Uma camada de sobreposicao. Ela e carregada DEPOIS do bundle compilado e
   reescreve o visual do produto sem que nada precise ser recompilado - porque
   o codigo-fonte React deste app nao existe mais em lugar nenhum.

   Nao e a forma ideal de aplicar um rebrand. A forma ideal e trocar os tokens
   no projeto e rodar `npm run build`. Enquanto o fonte nao for reconstruido,
   esta folha e o que ha - e ela funciona.

   COMO FUNCIONA

   CSS resolve empate de especificidade pela ordem: a ultima regra vence. Como
   o <link> desta folha fica depois do carregador.php no index.html, cada
   seletor aqui ganha do seletor igual que veio do bundle. Por isso quase nada
   aqui precisa de !important.

   O QUE ELA NAO CONSEGUE FAZER

   . Tema escuro. As telas trazem centenas de utilitarias Tailwind escritas
     direto no JSX que assumem fundo claro. Ligar o escuro por aqui quebraria
     mais do que arruma - ele vem com a reconstrucao.
   . Icone nos avisos. Depende de mexer no JSX.
   . Trocar texto de caixa alta onde o uppercase esta escrito na marcacao.

   Este arquivo nao depende de nada alem de si mesmo: pode ser carregado em
   qualquer subpasta e nao referencia imagem nem fonte externa.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --coral-50:#FFF4F1; --coral-100:#FFE4DC; --coral-200:#FFC6B6; --coral-300:#FBA189;
  --coral-400:#F27B5E; --coral-500:#E85C3C; --coral-600:#CC4022; --coral-700:#A83219;
  --coral-800:#872814; --coral-900:#6B2212;

  --ink-50:#F6F7F9; --ink-100:#EEF0F4; --ink-200:#DDE1E9; --ink-300:#C2C8D6;
  --ink-400:#9AA3B7; --ink-500:#686F81; --ink-600:#4B5262; --ink-700:#363C4A;
  --ink-800:#23262F; --ink-900:#1A1D26; --ink-950:#0F1116;

  --sucesso-50:#ECFDF5; --sucesso-100:#D1FAE5; --sucesso-600:#08875B; --sucesso-700:#066848;
  --alerta-50:#FFFBEB;  --alerta-100:#FEF3C7;  --alerta-600:#B45309;  --alerta-700:#92400E;
  --perigo-50:#FFF1F3;  --perigo-100:#FFE4E8;  --perigo-600:#BE123C;  --perigo-700:#A31734;
  --info-50:#EFF6FF;    --info-100:#DBEAFE;    --info-600:#1D4ED8;    --info-700:#1E40AF;
  --ia-50:#F5F3FF;      --ia-100:#EDE9FE;      --ia-600:#6D3FD4;      --ia-700:#5B32B0;

  --fundo:var(--ink-50); --superficie:#FFFFFF; --superficie-suave:var(--ink-100);
  --texto:var(--ink-900); --texto-2:var(--ink-600); --texto-3:var(--ink-500);
  --borda:var(--ink-200); --borda-forte:var(--ink-300); --borda-controle:#7E8799;
  --acao:var(--coral-600); --acao-hover:var(--coral-700); --acao-suave:var(--coral-50);

  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px;
  --sombra-1:0 1px 2px rgb(26 29 38/.05);
  --sombra-3:0 4px 12px -2px rgb(26 29 38/.09),0 2px 4px -2px rgb(26 29 38/.05);
  --sombra-5:0 24px 48px -12px rgb(26 29 38/.18);
  --anel:0 0 0 3px rgb(204 64 34/.28);
  --dur-1:120ms; --ease:cubic-bezier(.2,0,.2,1);
}

/* ==========================================================================
   2. PALETA
   Gerado a partir do proprio bundle (index-D0dRfivZ.css), regra por regra,
   para que nenhuma variante de opacidade ou gradiente escape. So os 10 degraus
   que mudaram estao aqui - os neutros ink-100 a ink-950 continuam identicos
   aos que o produto ja usava e nao precisam ser tocados.
   ========================================================================== */
.divide-ink-50>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(246 247 249 / var(--tw-divide-opacity, 1))}
.border-coral-200{--tw-border-opacity: 1;border-color:rgb(255 198 182 / var(--tw-border-opacity, 1))}
.border-coral-300{--tw-border-opacity: 1;border-color:rgb(251 161 137 / var(--tw-border-opacity, 1))}
.border-coral-400{--tw-border-opacity: 1;border-color:rgb(242 123 94 / var(--tw-border-opacity, 1))}
.border-coral-500{--tw-border-opacity: 1;border-color:rgb(232 92 60 / var(--tw-border-opacity, 1))}
.border-ink-50{--tw-border-opacity: 1;border-color:rgb(246 247 249 / var(--tw-border-opacity, 1))}
.bg-coral-400{--tw-bg-opacity: 1;background-color:rgb(242 123 94 / var(--tw-bg-opacity, 1))}
.bg-coral-400\/40{background-color:#F27B5E66}
.bg-coral-50{--tw-bg-opacity: 1;background-color:rgb(255 244 241 / var(--tw-bg-opacity, 1))}
.bg-coral-50\/40{background-color:#FFF4F166}
.bg-coral-50\/50{background-color:#FFF4F180}
.bg-coral-50\/60{background-color:#FFF4F199}
.bg-coral-50\/70{background-color:#FFF4F1b3}
.bg-coral-500{--tw-bg-opacity: 1;background-color:rgb(232 92 60 / var(--tw-bg-opacity, 1))}
.bg-ink-50{--tw-bg-opacity: 1;background-color:rgb(246 247 249 / var(--tw-bg-opacity, 1))}
.bg-ink-50\/40{background-color:#F6F7F966}
.bg-ink-50\/60{background-color:#F6F7F999}
.bg-ink-50\/70{background-color:#F6F7F9b3}
.from-coral-200{--tw-gradient-from: #FFC6B6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 198 182 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-coral-400{--tw-gradient-from: #F27B5E var(--tw-gradient-from-position);--tw-gradient-to: rgb(242 123 94 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-coral-50{--tw-gradient-from: #FFF4F1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 244 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-coral-500{--tw-gradient-from: #E85C3C var(--tw-gradient-from-position);--tw-gradient-to: rgb(232 92 60 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-coral-500\/70{--tw-gradient-from: rgb(232 92 60 / .7) var(--tw-gradient-from-position);--tw-gradient-to: rgb(232 92 60 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.to-coral-300{--tw-gradient-to: #FBA189 var(--tw-gradient-to-position)}
.to-coral-400{--tw-gradient-to: #F27B5E var(--tw-gradient-to-position)}
.to-coral-600{--tw-gradient-to: #CC4022 var(--tw-gradient-to-position)}
.text-coral-300{--tw-text-opacity: 1;color:rgb(251 161 137 / var(--tw-text-opacity, 1))}
.text-coral-400{--tw-text-opacity: 1;color:rgb(242 123 94 / var(--tw-text-opacity, 1))}
.text-coral-500{--tw-text-opacity: 1;color:rgb(232 92 60 / var(--tw-text-opacity, 1))}
.text-coral-600{--tw-text-opacity: 1;color:rgb(204 64 34 / var(--tw-text-opacity, 1))}
.text-coral-700{--tw-text-opacity: 1;color:rgb(168 50 25 / var(--tw-text-opacity, 1))}
.text-ink-500{--tw-text-opacity: 1;color:rgb(104 111 129 / var(--tw-text-opacity, 1))}
.accent-coral-500{accent-color:#E85C3C}
.ring-coral-100{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 228 220 / var(--tw-ring-opacity, 1))}
.ring-coral-200{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 198 182 / var(--tw-ring-opacity, 1))}
.ring-coral-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(251 161 137 / var(--tw-ring-opacity, 1))}
.ring-coral-400{--tw-ring-opacity: 1;--tw-ring-color: rgb(242 123 94 / var(--tw-ring-opacity, 1))}
.ring-coral-500{--tw-ring-opacity: 1;--tw-ring-color: rgb(232 92 60 / var(--tw-ring-opacity, 1))}

/* ==========================================================================
   3. GEOMETRIA
   O produto usava raio de 18px em card e 14px em botao. Curva larga em card de
   dados le como aplicativo de celular; ferramenta de trabalho pede geometria
   mais contida.
   ========================================================================== */
.rounded-2xl { border-radius: var(--r-xl);  }   /* era 1.125rem = 18px */
.rounded-xl  { border-radius: var(--r-lg);  }   /* era  .875rem = 14px */
.rounded-3xl { border-radius: var(--r-2xl); }   /* era  1.5rem  = 24px */

/* ==========================================================================
   4. NADA LEVITA
   O sistema antigo subia o botao 2px e o card 4px no hover, com sombra de
   28px. E linguagem de pagina de vendas; num painel operado o dia inteiro
   vira ruido e faz a interface parecer template.

   Atencao: -translate-y-1/2 NAO entra aqui - aquele e o truque de centralizar
   elemento, e desliga-lo quebraria layout.
   ========================================================================== */
.btn-primary:hover,
.btn-dark:hover,
.btn-azul:hover,
.btn-aprovar:hover,
.card-hover:hover,
.hover\:-translate-y-0\.5:hover,
.hover\:-translate-y-1:hover { transform: none; }

.card-hover:hover { box-shadow: var(--sombra-3); border-color: var(--borda-forte); }

/* ==========================================================================
   5. VIDRO VIRA SUPERFICIE
   O backdrop-filter derrubava o contraste do texto e custava GPU em tela com
   muitos cards.
   ========================================================================== */
.vidro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.backdrop-blur, .backdrop-blur-sm {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fundo ambiente: antes hospedava manchas desfocadas de 110px. */
.ambiente { background: var(--fundo); }
.ambiente > * { display: none; }

/* ==========================================================================
   6. SUPERFICIES
   A separacao passa a vir da borda; a sombra apenas confirma a camada.
   ========================================================================== */
.card, .card-hover {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-1);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.janela {
  background: var(--superficie);
  border: 0;
  border-radius: var(--r-2xl);
  box-shadow: var(--sombra-5);
}

/* ==========================================================================
   7. BOTOES
   ========================================================================== */
.btn, .btn-primary, .btn-suave, .btn-ghost, .btn-dark,
.btn-danger, .btn-azul, .btn-aprovar, .btn-ia {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  box-shadow: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.btn-sm { min-height: 30px; padding: 0 12px; font-size: 13px; }

/* Primario: a unica acao coral da tela. Branco sobre coral-600 da 4,9:1 -
   o coral antigo (#FF5C39) dava 3,0:1 e reprovava em WCAG AA. */
.btn-primary          { background: var(--acao); color:#FFFFFF; box-shadow: var(--sombra-1); }
.btn-primary:hover    { background: var(--acao-hover); }
.btn-primary:active   { background: var(--coral-800); box-shadow: none; }

.btn, .btn-dark       { background: var(--ink-900); color:#FFFFFF; }
.btn:hover, .btn-dark:hover { background: var(--ink-800); }

.btn-suave            { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn-suave:hover      { background: var(--superficie-suave); border-color: var(--borda-controle); }

.btn-ghost            { background: transparent; color: var(--texto-2); }
.btn-ghost:hover      { background: var(--superficie-suave); color: var(--texto); }

/* Destrutivo contornado: o vermelho de perigo e o coral de acao ficam a ~25
   graus de matiz um do outro. Contorno tira a duvida sobre qual botao apaga. */
.btn-danger           { background: var(--superficie); color: var(--perigo-700); border-color: var(--perigo-600); }
.btn-danger:hover     { background: var(--perigo-50); }
.btn-danger.confirmar { background: var(--perigo-600); color:#FFFFFF; border-color: transparent; }

.btn-azul             { background: var(--info-600);    color:#FFFFFF; }
.btn-azul:hover       { background: var(--info-700); }
.btn-aprovar          { background: var(--sucesso-600); color:#FFFFFF; }
.btn-aprovar:hover    { background: var(--sucesso-700); }

/* IA: o botao antigo era laranja com gradiente pulsando em laco (pulso-ia,
   1,9s, infinito). Duas coisas erradas: competia com o coral da acao, e
   chamar atencao o tempo todo e distracao, nao sinalizacao. Vira violeta -
   a cor que o resto do sistema reserva para "gerado por IA" - e para de
   piscar. */
.btn-ia               { background: var(--ia-600); color:#FFFFFF; animation: none; }
.btn-ia:hover         { background: var(--ia-700); animation: none; filter: none; }

/* ==========================================================================
   8. FORMULARIO
   O campo antigo tinha border-width:0 - o limite so era sugerido por um anel
   claro, o que falha o criterio 1.4.11 da WCAG e some em tela clara.
   ========================================================================== */
.input, select.input, textarea.input {
  min-height: 36px;
  padding: 0 12px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda-controle);   /* 3,4:1 */
  border-radius: var(--r-lg);
  font-size: 14px;
  box-shadow: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
textarea.input { padding: 8px 12px; }
.input::placeholder { color: var(--texto-3); }
.input:hover:not(:focus) { border-color: var(--ink-500); box-shadow: none; }
.input:focus, .input:focus-visible {
  outline: none;
  border-color: var(--acao);
  box-shadow: var(--anel);
}
.input:disabled { background: var(--superficie-suave); color: var(--texto-2); }

/* Etiqueta: caixa alta 11px com tracking largo custa velocidade de leitura em
   formulario longo - e o CRM tem varios. */
.label {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-2);
}

/* ==========================================================================
   9. NAVEGACAO
   O item ativo passa a ser marcado por tres sinais somados - barra, fundo e
   peso - em vez de so cor.
   ========================================================================== */
.lateral-item {
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-2);
}
.lateral-item:hover { background: var(--superficie-suave); color: var(--texto); }
.lateral-item.ativo {
  background: var(--acao-suave);
  color: var(--coral-700);
  font-weight: 600;
}
.lateral-item.ativo::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--acao);
}

/* ==========================================================================
   10. INDICADORES
   ========================================================================== */
.chip { padding: 3px 8px; font-size: 11px; line-height: 16px; font-weight: 600; }
.tag  { border-radius: var(--r-md); border-color: var(--borda-forte); }
.barra > span { background: var(--acao); }
.skeleton { background: var(--superficie-suave); border-radius: var(--r-md); }

/* Avisos: fundo tingido + borda na cor da severidade. O icone por tipo, que
   completaria o sinal, depende de mexer no JSX e vem com a reconstrucao -
   por ora quem carrega a informacao e o proprio texto do aviso. */
.aviso          { border: 1px solid var(--borda); border-left-width: 1px; border-radius: var(--r-lg); }
.aviso.sucesso  { background: var(--sucesso-50); border-color: var(--sucesso-100); color: var(--sucesso-700); }
.aviso.alerta   { background: var(--alerta-50);  border-color: var(--alerta-100);  color: var(--alerta-700);  }
.aviso.perigo   { background: var(--perigo-50);  border-color: var(--perigo-100);  color: var(--perigo-700);  }
.aviso.info     { background: var(--info-50);    border-color: var(--info-100);    color: var(--info-700);    }
.aviso.ia       { background: var(--ia-50);      border-color: var(--ia-100);      color: var(--ia-700);      }

/* ==========================================================================
   11. FOCO
   Um anel so, coral, visivel ao teclado em todo o produto.
   ========================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
}

/* Numero em coluna sempre alinhado. */
.num, .stat, table td { font-variant-numeric: tabular-nums; }

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   ==========================================================================

   ACRESCIMO DA v2.0 - CAMADA DE INTERFACE

   Tudo acima veio da v1.0 e continua igual, linha por linha. Daqui para
   baixo e o que a v2.0 soma. Nenhuma regra da v1.0 foi removida ou alterada.

   O que esta camada NAO tenta fazer, e por que:

   . Cor de grafico. As cores dos SVG estao escritas dentro do bundle
     JavaScript, como atributo - folha de estilo nao alcanca atributo. Isso
     vai no arquivo assets/index-D6Fgnmfq.js que acompanha esta entrega.
   . Ilustracao em estado vazio. Depende de inserir SVG na marcacao.
   . Tema escuro. Centenas de utilitarias no JSX assumem fundo claro.

   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   12. PISO TIPOGRAFICO

   O produto tem texto funcional de 8px a 10,5px. Abaixo de 11px, rotulo e
   celula de tabela falham em tela de alta densidade e no celular - nao e
   questao de estilo, e de conseguir ler.

   Subimos 9,5 / 10 / 10,5 para 11px: salto pequeno, sem risco de estourar
   caixa. Os de 8px e 9px ficam de fora DE PROPOSITO - sao usados no
   calendario, onde a celula e apertada, e um salto de 8 para 11 (37% maior)
   pode quebrar o layout. Esses dois pedem ajuste de caixa junto, o que e
   trabalho de reconstrucao, nao de folha.
   ========================================================================== */

.text-\[9\.5px\],
.text-\[10px\],
.text-\[10\.5px\],
.\!text-\[10px\],
.calendario-rico .tag { font-size: 11px !important; }

/* A ficha impressa fica de fora: papel tem densidade muito maior que tela,
   e subir o corpo ali reflui o documento inteiro. */


/* ==========================================================================
   13. ALVO DE TOQUE

   Densidade de leitura e densidade de alvo sao coisas diferentes. No dedo,
   o texto continua do mesmo tamanho - quem cresce e a area clicavel.

   pointer:coarse pega dedo e caneta sem afetar quem usa mouse, entao o
   painel no desktop continua compacto.
   ========================================================================== */

@media (pointer: coarse) {
  .btn, .btn-primary, .btn-suave, .btn-ghost, .btn-dark,
  .btn-danger, .btn-azul, .btn-aprovar, .btn-ia {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .btn-sm { min-height: 38px; }

  .input, select.input { min-height: 44px; }

  .lateral-item {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Alvo pequeno demais para o dedo ganha area invisivel em volta, sem
     mudar de tamanho na tela. */
  .chip[role="button"],
  .tag[role="button"],
  button.dot { position: relative; }
  .chip[role="button"]::after,
  .tag[role="button"]::after,
  button.dot::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
}


/* ==========================================================================
   14. CONTENCAO HORIZONTAL

   Tabela larga em tela estreita empurrava a pagina inteira de lado - o
   sintoma classico de "o app nao e responsivo". A tabela passa a rolar
   dentro de si mesma.

   display:block na tabela custa o auto-dimensionamento de coluna, por isso
   isto vale SO abaixo de 640px, onde a alternativa e a pagina torta.
   ========================================================================== */

@media (max-width: 640px) {
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table td, table th { white-space: nowrap; }

  /* Bloco largo que nao e tabela tambem para de vazar. */
  pre, .rolagem, .overflow-x-auto { max-width: 100%; overflow-x: auto; }
}

/* Imagem e midia nunca estouram a coluna. */
img, video, canvas, svg { max-width: 100%; }


/* ==========================================================================
   15. RITMO

   O produto herdou espacamentos avulsos. Aqui so se corrige o que se pode
   corrigir sem tocar na marcacao: o respiro interno das superficies e o
   intervalo entre linhas de tabela, que era apertado a ponto de dificultar
   seguir a linha com o olho.
   ========================================================================== */

table td { padding-top: 10px; padding-bottom: 10px; }
table th { padding-bottom: 9px; }

/* Linha zebrada discreta ajuda a percorrer tabela longa sem regua. */
table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink-100) 45%, transparent); }
table tbody tr:hover { background: var(--ink-100); }


/* ==========================================================================
   16. MICRO-INTERACOES

   A v1.0 tirou a levitacao. Esta secao devolve retorno visual - pelo meio
   certo: cor e borda, que nao deslocam nada e nao custam repintura de
   layout.
   ========================================================================== */

.card-hover,
.lateral-item,
.chip, .tag,
.btn, .btn-primary, .btn-suave, .btn-ghost, .btn-dark,
.btn-danger, .btn-azul, .btn-aprovar, .btn-ia {
  transition: background-color var(--dur-1) var(--ease),
              border-color     var(--dur-1) var(--ease),
              color            var(--dur-1) var(--ease),
              box-shadow       var(--dur-1) var(--ease);
}

/* Pressionado responde na hora: 90ms e o limite em que o clique ainda
   parece instantaneo. */
.btn:active, .btn-primary:active, .btn-suave:active, .btn-ghost:active,
.btn-dark:active, .btn-danger:active, .btn-azul:active,
.btn-aprovar:active, .btn-ia:active { transition-duration: 90ms; }

/* Linha de tabela e item de lista clicaveis passam a parecer clicaveis. */
tbody tr[role="button"], tbody tr.clicavel, .lateral-item { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   17. BARRA DE ROLAGEM

   Detalhe pequeno, efeito desproporcional: barra do sistema operacional
   dentro de um painel denso e o tipo de coisa que faz a tela parecer
   montada, nao desenhada.
   ========================================================================== */

* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border: 3px solid var(--superficie);
  border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
*::-webkit-scrollbar-corner { background: transparent; }


/* ==========================================================================
   18. SERIE DE GRAFICOS

   Os seis tons abaixo passaram por seis checagens automaticas: faixa de
   luminosidade, piso de croma, separacao sob protanopia / deuteranopia /
   tritanopia, piso de visao normal e contraste contra a superficie.

   Ficam declarados aqui como referencia unica - e o mesmo conjunto que foi
   gravado dentro do assets/index-D6Fgnmfq.js desta entrega. Quando o fonte
   for reconstruido, os graficos passam a ler destas variaveis e a duplicata
   deixa de existir.

     serie 1  #CC4022  coral      Instagram
     serie 2  #1D4ED8  azul       Facebook
     serie 3  #0E9F6E  verde      WhatsApp
     serie 4  #6D3FD4  violeta    TikTok
     serie 5  #B45309  ambar      LinkedIn
     serie 6  #0891B2  ciano      YouTube

   Regra que nao se quebra: a cor segue a ENTIDADE, nunca a posicao. Se um
   filtro tira o Facebook da tela, o WhatsApp continua verde.
   ========================================================================== */

:root {
  --serie-1: #CC4022;
  --serie-2: #1D4ED8;
  --serie-3: #0E9F6E;
  --serie-4: #6D3FD4;
  --serie-5: #B45309;
  --serie-6: #0891B2;

  /* Rampa sequencial - uma matiz so, do claro ao escuro. Para mapa de
     calor e qualquer leitura de intensidade. Nunca arco-iris: a ordem
     precisa se ler na propria cor. */
  --seq-1: #FFF4F1;
  --seq-2: #FFE4DC;
  --seq-3: #FFC6B6;
  --seq-4: #FBA189;
  --seq-5: #F27B5E;
  --seq-6: #E85C3C;
  --seq-7: #CC4022;
}