/* ============================================================
   VX CRM — Design System
   Identidade: Vieira Xavier Advogados (azul-marinho + azul de ação)
   Guia: clientes/vieira-xavier-advocacia/design-guide.md
   Tipografia: Inter Tight / Inter / JetBrains Mono — a dos painéis
   Superfícies de vidro sobre foto do escritório. Contraste medido em
   teste-contraste.mjs, que roda no npm test.
   ============================================================ */

:root {
  /* ---- Marca — Vieira Xavier ---- */
  --navy: #030D35;          /* âncora da marca */
  --accent: #2143CB;        /* azul de ação */
  --accent-soft: #8FA6FF;   /* link e rótulo sobre fundo escuro */
  --on-accent: #FFFFFF;     /* texto sobre o azul de ação */

  /* O guia manda escurecer no hover (#1A35A6) porque o site é claro.
     Aqui o fundo é escuro: escurecer faria o botão sumir. Mesma matiz,
     direção invertida — clarear no hover, escurecer no clique. */
  --accent-hover: #3355DC;
  --accent-press: #1A35A6;

  /* ============================================================
     SUPERFÍCIES DE VIDRO — 05/09/2026

     Antes eram degraus opacos de navy. Agora são véus de branco sobre o
     navy, com desfoque atrás. Decisão do Gabriel, ciente de que o
     design-guide pedia canto reto e superfície chapada.

     ⚠️ SÃO GRADIENTES, E ISSO EXIGIU UMA CONFERÊNCIA ANTES.
     `background-color` não aceita gradiente — só `background`. Os 140 usos
     destes tokens no sistema foram varridos: nenhum usa background-color.
     Se alguém escrever um, o fundo some sem erro no console.

     ⚠️ O TEXTO SECUNDÁRIO PRECISOU CLAREAR.
     Vidro sobre navy resulta num fundo MAIS CLARO que o card opaco de
     antes (#20294C contra #0A1746). Fundo mais claro com texto claro =
     menos contraste. O --subtle antigo caía de 4,12:1 para 3,40:1 e
     reprovava. Medido, não achado: ver teste-contraste.mjs.
     ============================================================ */
  --navy-deep: #01081F;     /* atrás de tudo. O vidro precisa de algo escuro
                               por baixo, senão vira leitoso */
  --bg: #030D35;

  /* ⚠️ CADA UM TEM DUAS CAMADAS: o brilho branco EM CIMA de uma base navy
     semiopaca. A base é o que torna o painel independente do que está atrás
     dele — com ela, a foto do escritório pode aparecer no fundo sem que o
     contraste do texto mude de um canto da tela para o outro.
     Sem a base, ou a foto some sob um véu quase opaco, ou o texto falha
     onde a foto clareia. Foi essa a escolha que apareceu ao medir. */
  --glass:        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)), rgba(7, 18, 52, .80);
  --glass-strong: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)), rgba(10, 23, 62, .88);
  --glass-faint:  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), rgba(7, 18, 52, .62);
  --blur: blur(26px) saturate(118%);

  --surface: var(--glass);
  --surface-2: var(--glass-strong);
  --surface-3: var(--glass-strong);
  --border: rgba(255, 255, 255, .16);
  --border-2: rgba(255, 255, 255, .24);

  /* A cor sólida equivalente ao vidro, para quando um lugar precisar de cor
     de verdade — gradiente não serve em box-shadow nem em border-color. */
  --surface-solid: #20294C;

  --white: #FFFFFF;
  --text: #FFFFFF;
  --muted: #C2CBE6;         /* era #A8B4D8 — 8,9:1 sobre o vidro */
  --subtle: #A2ACCB;        /* era #6E7BA6, que dava 3,40:1 e reprovava */

  /* Vermelho e âmbar seguem coloridos de propósito: carregam
     significado, não marca. Em azul sumiriam. */
  /* 15/10/2026, cores de identificação mais vivas (pedido do Gabriel, com a foto do GorgonOID
     de referência). O vermelho é o mais saturado que ainda passa 4,5:1 no pior vidro: o
     #FF5A6E dos outros painéis dá 3,9:1 aqui. Verde e azul são os vivos da casa. Cada um tem
     a versão em canais (--x-rgb) para as tintas: rgba(var(--danger-rgb),.15) segue o tema. */
  --danger: #FF7389;   /* era #FF8DA1; o #E9446A de antes dava 2,31:1 no vidro */
  --danger-rgb: 255, 115, 137;
  --warning: #FFA42B;  /* já era o mais saturado do trio, ficou */
  --warning-rgb: 255, 164, 43;
  --info: #4FE0FF;     /* era #8FA6FF; o azul de link segue em --accent-soft */

  /* Faltava o verde do trio de estado. Sem ele, "ligado" era pintado com
     --accent, e aí o controle ficava da mesma cor da marca: medido em
     2,23:1 contra o card (#0A1746) — abaixo do mínimo de 3:1 que a
     WCAG 1.4.11 exige de componente de interface. Não era impressão.

     NÃO é o #25D366: o guia reserva aquele verde ao botão de WhatsApp e
     proíbe espalhá-lo como cor de marca. Este é mais fechado, não se
     confunde com o WhatsApp, e mede 6,75:1 contra o card. */
  --ok: #3DF0B0;       /* 15/10: era #3FB950. Menta, não o verde do WhatsApp (matiz 158 contra 142) */
  --ok-rgb: 61, 240, 176;
  --ok-hover: #6AF5C5;
  --ok-press: #2ED69C;
  --ok-glow: rgba(61, 240, 176, .34);

  /* ---- Compatibilidade ----
     108 usos de --green/--black no código herdado do Gabify. Em vez de
     reescrever todos, os nomes viraram apelido do valor novo. Código
     novo usa --accent e --navy. */
  --green: var(--accent);
  /* --green-hover quase sempre pinta TEXTO (valor em dinheiro, link, rótulo),
     não fundo de botão. Sobre o navy o azul médio não lê — o guia manda usar
     o azul claro nesse caso. O hover real do botão está em .btn-primary. */
  --green-hover: var(--accent-soft);
  --green-press: var(--accent-press);
  --black: var(--navy);

  /* ---- Tipografia — a dos painéis, desde 05/09 ----
     Saíram Anton (display pesada), Geist e Pixelify Sans. A última era
     fonte de pixel art, sobra do Gabify Pro, num sistema de escritório de
     advocacia.

     ⚠️ JetBrains Mono FICA, e isso não é descuido.
     O painel usa Inter também para número. Aqui não dá: são tabelas de
     honorário e de prazo, e em fonte proporcional a coluna de valores
     dança a cada dígito. Monoespaçada é o que faz a coluna alinhar. */
  --font-hero: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --font-pixel: var(--font-hero);   /* apelido: a pixel saiu, os usos ficam */

  /* Forma — o canto abriu. 8/12 eram do guia antigo; 16/22 são dos painéis. */
  --radius: 16px;
  --radius-lg: 22px;
  --pill: 500px;
  --shadow: 0 24px 60px -34px rgba(0, 0, 0, .7);

  /* Curvas dos painéis: saída suave, sem elástico. */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ============================================================
   O FUNDO — 05/09/2026

   O vidro precisa de algo por baixo, senão fica leitoso: superfície
   translúcida sobre cor chapada não parece vidro, parece plástico.

   Quatro camadas, e a ordem importa:
     1. o símbolo da VX, gigante e quase invisível, em camada própria
     2. dois halos de azul da marca, para o desfoque ter o que borrar
     3. o véu de navy quase opaco
     4. a foto do escritório, por baixo de tudo

   ⚠️ A LOGO FICA EM 3% DE OPACIDADE, e não é timidez.
   Este é um sistema de trabalho, aberto oito horas por dia, com tabela de
   prazo e valor em cima. Marca d'água forte atrás de número é o jeito mais
   rápido de tornar o número difícil de ler — e aqui o número é prazo de
   exigência. Ela se vê no espaço vazio e some sob o conteúdo.
   ============================================================ */
body {
  background:
    /* 1. os halos da marca, que dão ao vidro o que borrar */
    radial-gradient(900px 620px at 82% -6%, rgba(33, 67, 203, .20), transparent 62%),
    radial-gradient(760px 520px at 6% 102%, rgba(143, 166, 255, .16), transparent 60%),
    /* 2. o azul da marca, em degradê, dando corpo ao fundo */
    linear-gradient(160deg, #071A4E 0%, #030D35 46%, #01081F 100%),
    var(--navy-deep);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

/* A marca d'agua, em camada propria porque background-image nao tem opacidade.
   `pointer-events:none` e obrigatorio: sem ele a camada come o clique da tela
   inteira, e o sistema fica bonito e inutil. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/logo/vx-simbolo.svg") no-repeat 72% 42% / min(58vh, 620px) auto;
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}

/* O conteudo sobe acima da marca d'agua. */
.app { position: relative; z-index: 1; }

/* ============================================================
   O DESFOQUE

   Os tokens de superficie dao a translucidez; o desfoque tem de ser
   aplicado no elemento. Sem ele o vidro vira so um veu claro.

   O -webkit- NAO e opcional: sem ele o Safari e o iPhone nao desfocam nada
   e a tela fica com aparencia de rascunho.
   ============================================================ */
.sidebar, .topbar, .panel, .card, .kpi, .table-wrap,
.menu, .drawer, .modal, .cmdk, .ge-estado, .ge-item,
.pp-col, .co-card, .gpa-item, .gpc-day {
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsla(0, 0%, 100%, .3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, .5); }

/* O Firefox não entende as regras -webkit- acima: ele tem propriedade
   própria. Sem esta linha ele desenha a barra CLARA do sistema em cima de
   um painel escuro — e a barra é a única coisa branca da tela inteira. */
* { scrollbar-width: thin; scrollbar-color: hsla(0, 0%, 100%, .3) transparent; }

/* ============================================================
   MOVIMENTO REDUZIDO

   Quem marcou "reduzir movimento" no sistema pediu por um motivo: para
   parte das pessoas, animação escalonada dá enjoo de verdade. O CRM tem
   52 animações e 40 atrasos em cascata, e só duas telas respeitavam a
   preferência.

   ⚠️ POR QUE NÃO `animation: none`.
   Muita animação daqui usa `backwards`: o elemento fica preso no estado
   INICIAL — quase sempre invisível — até a animação começar. Desligar a
   animação deixaria gráfico e cartão invisíveis para sempre, e isso é
   pior que o enjoo.

   Então ela continua acontecendo, só que instantânea: o estado final é
   aplicado, e o atraso vai a zero para o cartão não esperar 350ms
   invisível antes de aparecer.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* ⚠️ EXCEÇÃO: o que existe para dizer "estou trabalhando".
     Parar o girador tira o único sinal de que o sistema não travou — a
     pessoa fica olhando uma tela imóvel sem saber se deu erro. O
     Assistente já tinha resolvido isso do jeito certo em 07/08:
     desacelera para 2.4s em vez de parar. A regra em bloco acima
     atropelaria essa decisão, então ela é repetida aqui — de outro jeito
     o `!important` do geral venceria o específico. */
  .as-giro,
  .ge-giro,
  .cloud-status.syncing .cs-dot,
  #view-pipeline .pp-ind {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ---------- Botões (pill) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 32px;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(.98); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

/* Aqui o texto é escuro de propósito: o fundo é branco, não o acento. */
.btn-white { background: var(--white); color: var(--navy); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid hsla(0, 0%, 100%, .3);
}
.btn-ghost:hover { border-color: var(--white); }

.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--white); }

.btn-sm { padding: 8px 20px; font-size: 13px; }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--pill);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}
.pill-green { background: rgba(33, 67, 203, .28); color: var(--accent-soft); }
.pill-gray { background: hsla(0, 0%, 100%, .08); color: var(--muted); }
.pill-red { background: rgba(var(--danger-rgb), .15); color: var(--danger); }
.pill-yellow { background: rgba(255, 164, 43, .15); color: var(--warning); }
.pill-blue { background: rgba(143, 166, 255, .16); color: var(--info); }

/* Estado ligado. Separada da .pill-green de propósito: aquela é usada em
   rótulo neutro ("Padrão", "v2.0", previsão), onde o azul da marca está
   certo. Verde aqui significa ligado, e só isso — o guia do escritório
   pede o verde contido, não espalhado. */
.pill-ok { background: rgba(var(--ok-rgb), .17); color: var(--ok); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  transition: background .2s ease;
}
.card:hover { background: var(--surface-2); }

/* ---------- Tipografia utilitária ---------- */
.display {
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .5px;
}
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.5px;
  color: var(--white);
}
.logo svg, .logo img { flex-shrink: 0; }
.logo-text { letter-spacing: .5px; }