/* local-ui.css — overrides cosméticos pro cliente Klify.
 * A fonte real da paleta/tipografia é identidade/design-guide.md (seção 0)
 * — o painel lê esse markdown via JS e aplica as variáveis em runtime. Os
 * valores abaixo são só um fallback pra não piscar a cor errada (vermelho
 * padrão Vissia OS) no instante entre o primeiro paint e o JS carregar.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --red:      #C2A470; /* era #D0300A (vermelho padrão Vissia OS) */
  --red-deep: #A88A54; /* era #A82408 */
  --syne:     'Inter', system-ui, sans-serif; /* era Syne (display) */
  --sans:     'Inter', system-ui, sans-serif; /* era DM Sans */
  --mono:     'Inter', system-ui, sans-serif; /* era DM Mono — nunca foi carregada como webfont, caía pro mono genérico do sistema */
}

/* Com logo real ativa, o sistema mostrava a marca 3x na sidebar: imagem +
 * texto "Klify" (.mark, só reduz opacidade quando há logo, não some) + tag
 * "KLIFY" (nome do negócio, .tag). Escondendo as duas versões em texto —
 * a logo já comunica a marca sozinha. */
.brand-logo.show ~ .mark,
.brand .tag {
  display: none;
}

/* A logo é navy sobre fundo claro no site original — sobre o fundo quase
 * preto da sidebar ela ficava sem contraste. Chip claro atrás resolve. */
.brand-logo.show {
  background: var(--paper);
  border-radius: 10px;
  padding: 10px 16px;
  max-width: fit-content;
}

/* Sidebar não tinha scroll e com Concorrentes + Inteligência de Mercado +
 * Narrativa + Funis somados aos painéis nativos, os itens de baixo (Funis)
 * ficavam cortados fora da altura de 100vh. Comprime espaçamento em vez de
 * adicionar scroll — usuário pediu pra ver tudo de uma vez, sem rolar. */
.brand { padding: 0 24px 14px; margin-bottom: 8px; }
.nav-item { padding: 7px 14px; font-size: 13px; }
.nav-sep { margin: 6px 14px 4px; }
.sidebar-footer { padding: 8px 24px 0; margin-top: 8px; gap: 4px; }