/* ============================================================================
   iBooster CRM - tokens da marca e reset

   Direcao: preto, branco e vermelho iBooster. Superficies neutras, tipografia
   Inter e vermelho reservado a marca e acoes. Cores de status usam tokens
   semanticos. Literais da marca ficam neste arquivo.

   O tema escuro redefine SO as variaveis: nenhum componente sabe em que tema
   esta. Token derivado (--e1, --anel, --erro...) e resolvido no <html>, entao
   um escopo que troca --line ou --brand (o painel do Bolt, a perspectiva CEO)
   tem que redefinir tambem os derivados que usar.
   ========================================================================== */

/* Inter variavel servida do proprio dominio: a CSP (default-src 'self') barra
   CDN de fonte, e sem @font-face o Windows desenhava tudo em Segoe com negrito
   falso nos pesos 750/800. Um arquivo (latin, OFL) cobre 100 a 900. */
@font-face{
  font-family:'InterVariable';
  src:url('/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --mobile-vh:100dvh;--mobile-top:0px;
  --mobile-safe-top:env(safe-area-inset-top,0px);--mobile-safe-right:env(safe-area-inset-right,0px);
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);--mobile-safe-left:env(safe-area-inset-left,0px);
  --mobile-nav:calc(64px + var(--mobile-safe-bottom));
  /* ---------- tipografia ---------- */
  --font-sans:'InterVariable','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --fs-2xs:11px;   /* so selo e contador */
  --fs-xs:12px;    /* meta, rotulo, cabecalho de tabela */
  --fs-sm:13px;    /* interface: tabela, botao, navegacao */
  --fs-md:14px;    /* corpo */
  --fs-lg:16px;    /* titulo de secao */
  --fs-xl:20px;    /* titulo de pagina */
  --fs-2xl:24px;   /* numero de KPI, saudacao */
  --fs-3xl:32px;   /* numero heroi */
  --fw-regular:400;
  --fw-medium:500;   /* botao, rotulo, navegacao */
  --fw-semibold:600; /* titulo, nome, enfase */
  --fw-bold:700;     /* so numeral de KPI */
  --lh-tight:1.2;    /* 20px para cima */
  --lh-ui:1.45;
  --lh-read:1.6;     /* chat, briefing, texto corrido */
  --ls-tight:-.02em; /* 20px para cima */
  --ls-ui:-.006em;

  /* ---------- espaco (grade de 4px) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* ---------- raio ---------- */
  --r-xs:6px;    /* chip, kbd, selo */
  --r-sm:8px;    /* botao, campo */
  --r:12px;      /* cartao, linha de lista */
  --r-lg:16px;   /* gaveta, modal, janela flutuante */
  --r-xl:20px;   /* caixa de escrita do chat */
  --r-full:999px;/* pilula, avatar, botao de enviar */

  /* ---------- camadas ---------- */
  --z-nav:30; --z-panel:34; --z-drawer:55; --z-modal:60; --z-toast:80; --z-piloto:9998;

  /* ---------- movimento ---------- */
  --dur-1:120ms;  /* hover, clique */
  --dur-2:180ms;  /* troca de estado: pilula, check, chave */
  --dur-3:240ms;  /* entrada de componente: cartao, popover */
  --dur-4:320ms;  /* gaveta, painel, pagina */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --transicao:var(--dur-1) var(--ease);

  /* ---------- superficie ---------- */
  --bg:#F5F6F8;
  --bg-2:#ECEEF2;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --surface-3:#F0F2F5;     /* hover e selecionado */
  --surface-raised:#FFFFFF;/* o que sobe de um trilho: segmento ativo, bola da chave, popover */
  --hover:rgba(17,19,24,.04);  /* fundo de hover que serve em qualquer superficie */
  --ativo:rgba(17,19,24,.065); /* item ativo de navegacao e lista */
  --line:rgba(17,19,24,.08);
  --line-soft:rgba(17,19,24,.05);
  --line-strong:rgba(17,19,24,.14);
  --track:#E5E7EB;         /* trilho de barra, chave, rolagem: o fio com alfa some ali */

  /* ---------- tinta ---------- */
  --ink:#111318;
  --ink-2:#4B505A;
  --ink-3:#6B7079;         /* meta: ~5:1 no branco, passa AA */
  --ink-4:#A1A5AD;         /* so placeholder e desabilitado */

  /* ---------- marca e semantica ---------- */
  --brand:#DC2626;         /* texto e icone da marca */
  --brand-2:#B91C1C;       /* hover do preenchimento */
  --brand-fill:#DC2626;    /* fundo de botao primario */
  --on-brand:#FFFFFF;
  --brand-soft:#FEF2F2;
  --brand-line:#FECACA;
  --danger:#D92D20;
  --danger-soft:#FEF3F2;
  --danger-line:#FECDCA;
  /* Verde identifica sucesso; a marca e as acoes usam vermelho. */
  --ok:#137B4A;      --ok-soft:#EAF6F0;
  --warn:#93600F;    --warn-soft:#FBF3E4;
  --info:#326A90;    --info-soft:#EAF2F7;
  --roxo:#7354C7;    --roxo-soft:#F1EEFC;

  /* ---------- Bolt: assinatura, nunca superficie ---------- */
  --bolt-tile:#080D15;
  --bolt:#DC2626;
  --bolt-3d-red:#DC2626; /* luz do personagem, mesmo na perspectiva CEO */
  --bolt-2:#B91C1C;
  --bolt-soft:#FEF2F2;
  --bolt-line:#FECACA;
  --bolt-grad:linear-gradient(140deg,#F05252 0%,#DC2626 48%,#9F1239 100%);
  --bolt-brilho:0 4px 12px -4px rgba(220,38,38,.45);
  /* destaque das superficies do Bolt (foco, envio, marca). A perspectiva CEO
     troca por grafite no escopo dela (copiloto-manual.css). */
  --accent:var(--bolt);

  /* ---------- elevacao: fio OU sombra, nunca borda + sombra ---------- */
  --e1:0 0 0 1px var(--line);
  --e2:0 0 0 1px var(--line),0 1px 2px rgba(17,19,24,.04),0 8px 24px -8px rgba(17,19,24,.12);
  --e3:0 0 0 1px var(--line),0 24px 64px -16px rgba(17,19,24,.28);
  --sombra-1:0 1px 2px rgba(17,19,24,.05);
  --sombra-2:0 1px 2px rgba(17,19,24,.04),0 8px 24px -8px rgba(17,19,24,.12);
  --sombra-3:0 24px 64px -16px rgba(17,19,24,.28),0 2px 8px rgba(17,19,24,.05);
  --sombra-brand:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(185,28,28,.22);
  --anel:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent);

  /* ---------- nomes antigos que continuam valendo ---------- */
  --erro:var(--danger);
  --erro-soft:var(--danger-soft);
  --card:var(--surface);
  --mute:var(--ink-3);
  --linha:var(--line);
  --brilho:none;

  --sidebar:248px;
  --sidebar-bg:#0B0D12;    /* a lateral fica entre o fundo e o cartao */
  --topo:56px;
}

html[data-tema="escuro"]{
  --bg:#0B0C0F;
  --bg-2:#101216;
  --surface:#131519;
  --surface-2:#181B20;
  --surface-3:#1F2329;
  --surface-raised:#262A31;
  --hover:rgba(255,255,255,.045);
  --ativo:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.07);
  --line-soft:rgba(255,255,255,.045);
  --line-strong:rgba(255,255,255,.12);
  --track:#2A2E35;

  --ink:#EDEEF0;
  --ink-2:#B4B9C2;
  --ink-3:#8B919C;
  --ink-4:#5E646E;

  --brand:#F87171;         /* so texto e icone: branco sobre ele nao passa */
  --brand-2:#B91C1C;
  --brand-fill:#DC2626;    /* botao: branco a 5,4:1 */
  --brand-soft:#291719;
  --brand-line:#582429;
  --danger:#F97066;
  --danger-soft:#2A1614;
  --danger-line:#5C2320;
  --ok:#4FD79A;      --ok-soft:#12241C;
  --warn:#E0A03A;    --warn-soft:#28200F;
  --info:#5FA8D0;    --info-soft:#12212A;
  --roxo:#A18AEB;    --roxo-soft:#1C1730;

  --bolt:#F87171;
  --bolt-2:#FCA5A5;
  /* fundo de botao do Bolt no escuro: branco sobre #F87171 dava 2,8:1 (abaixo de AA) */
  --bolt-fill:#DC2626;
  --bolt-fill-2:#B91C1C;
  --bolt-soft:#2A1618;
  --bolt-line:#5C2328;
  --bolt-brilho:0 4px 14px -4px rgba(220,38,38,.55);

  --e2:0 0 0 1px var(--line),0 8px 24px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  --e3:0 0 0 1px var(--line-strong),0 24px 64px -12px rgba(0,0,0,.75);
  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
  --sombra-3:0 24px 64px -12px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.4);
  --sombra-brand:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.45);
  --sidebar-bg:#090B0F;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light}
html[data-tema="escuro"]{color-scheme:dark}
body{
  font-family:var(--font-sans);
  background:var(--bg);color:var(--ink);
  font-size:var(--fs-md);line-height:1.5;letter-spacing:var(--ls-ui);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  /* cv11/ss01 valem quando a Inter completa entrar; o corte latino atual so tem calt e tnum */
  font-feature-settings:'cv11','ss01','calt';
}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:none;color:inherit}
a{color:inherit;text-decoration:none}
svg{display:block}
[hidden]{display:none !important}
h1,h2,h3,h4{font-weight:var(--fw-semibold)}
/* <b> e <strong> do navegador sao 700; na escala da casa enfase e 600 */
b,strong{font-weight:var(--fw-semibold)}

/* Todo icone de icones.js nasce com .ic. O svg so tem viewBox, entao SEM tamanho
   base ele estica ate preencher o container - foi o que aconteceu com os titulos
   de cartao em producao. Regras mais especificas por contexto sobrescrevem. */
.ic{width:16px;height:16px;flex:none}
::selection{background:color-mix(in srgb,var(--brand) 22%,transparent);color:inherit}

/* scrollbar discreta: some no fundo em vez de virar uma barra cinza gritante */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--track);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-4);background-clip:content-box;border:3px solid transparent}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* tipografia utilitaria: rotulo em caixa de frase, nunca caixa-alta espacada */
.num{font-variant-numeric:tabular-nums}
.rotulo{font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:0;color:var(--ink-3)}
.silencio{color:var(--ink-3)}
.truncar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

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