*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── IDENTIDADE "TINTA" (TASK-031, 2026-08-03) ────────────────────────────── Grafite quente + terracota. Substitui o azul var(--ouro) (padrão Tailwind, a cor de milhares de projetos gerados por IA) e o cinza-azulado de fundo. Decisão da Amanda entre três direções; "zero azul" é literal — inclusive o azul de marca (var(--ouro)) saiu. NOMES POR PAPEL, não por cor: `--acao` diz o que a variável faz; `--azul` dizia só como ela parece, e foi por isso que o produto acumulou 110 cores distintas em 531 lugares. Os nomes antigos continuam existindo como ALIAS logo abaixo — trocar 531 ocorrências e os nomes no mesmo commit seria impossível de revisar. */ :root { /* ── AÇÃO: UMA COR SÓ, E ELA TEM DOIS PAPÉIS (TASK-039, 2026-08-07) ─────── A terracota #B4552D saiu. Duas gerações de paleta conviviam — 202 usos de terracota contra 59 do dourado — e a cor que dominava o produto não era a que a Amanda aprovou no Figma. Pior: terracota (18°, 44%) e vermelho de urgência (6°, 46%) ficam a 12° e 2 pontos de distância; a regra "vermelho é só urgência" existia no documento, não na tela. ⚠️ DOURADO NÃO É SUBSTITUTO MECÂNICO DA TERRACOTA. Terracota é ESCURA e aceita texto branco; dourado é CLARO e com branco mede 2,24:1. Por isso ele tem dois papéis, e cada uso foi migrado para o certo: FUNDO → `--ouro` SEMPRE com texto `--tinta` (8,01:1) TEXTO → `--ouro-texto` SEMPRE, e sobre card branco (4,78:1) — sobre a mesa mede 3,92:1, só serve a texto grande Os nomes ficam por PAPEL: `--ouro` diz a cor, `--ouro-texto` diz o uso. */ /* Semânticos — recalibrados para a família quente. O SIGNIFICADO não muda (ver BUSINESS_RULES): vermelho é urgência de prazo e nada mais. */ --verde: #2F6B4F; /* BADGES TINTADOS (TASK-039): mediam ~1,1:1 contra o card branco — o status não saltava na lista. Escurecidos ate 1,5:1 MISTURANDO CADA UM COM A PROPRIA COR FORTE, nao com preto: escurecer para o preto dessaturava os quatro em cinzas quase identicos, e badge que perde o matiz perde a funcao. Texto de cada um remedido para AA sobre o novo fundo. */ --verde-claro: #C5D7CE; /* era #EDF4F0 (1,12:1) — TASK-039, agora 1,5:1 */ --verde-escuro: #1E4A36; --amarelo: #B8860B; --amarelo-claro: #E6D19F; /* era #FBF3E2 (1,10:1) — TASK-039, agora 1,5:1 */ --amarelo-escuro:#755608; /* AA (4,52:1) sobre o novo --amarelo-claro */ --vermelho: #C03A2B; --vermelho-escuro:#8E2618; /* texto sobre --vermelho-claro; o cheio da 3,6:1 */ --vermelho-claro:#F0CAC6; /* era #FBECEA (1,15:1) — TASK-039, agora 1,5:1 */ /* Neutros quentes — o "papel" da identidade. RECALIBRADOS em 05/08 ("está tudo muito bege"): quando a sidebar grafite saiu (TASK-036), a tela perdeu o polo escuro — página 91,5% de luminância, sidebar 94,1%, card 100%, tudo separado por razões de 1,03–1,09, abaixo do que o olho registra como superfícies diferentes. A resposta é a mesma do desenho do Figma: TINTA mais forte e a página um degrau mais escura, para o card branco voltar a ser "papel sobre mesa" (card × página passou de 1,09 para 1,22, medido). */ --cinza: #676159; /* escurecido junto com a mesa: sobre ela media 3,72 e cairia para 3,33. Agora 4,50 na mesa, 6,12 no card. */ --cinza-claro: #F0EDE8; --cinza-mid: #E4DFD8; --texto: #1A1614; /* = --tinta do desenho (era #332F2A) */ --texto-sec: #5C554B; /* 7,35:1 sobre card (era #6E675D, 5,58:1) */ --borda: #E4DFD8; --bg: #E4DCCE; /* a MESA. TASK-039: desceu de #EDE8DF. Degrau mesa->card foi de 9,8 para 14,9 pontos HSL (minimo 8), e mesa->sidebar de 6,9 para 12 (minimo 4). Familia creme quente mantida -- o leiloa.ai e frio, dele se transpoe a ESTRUTURA, nao a temperatura. */ --bg-card: #FFFFFF; /* Superfície de COLUNA (board de Oportunidades): fica ENTRE a mesa e o cartão, para o cartão branco subir de dentro dela em vez de se confundir com o fundo. Token próprio porque não é card nem mesa — é o terceiro degrau, e cravar #FAF8F5 no lugar quebraria o tema escuro. */ --coluna-bg: #FAF8F5; --nav-bg: #221F1C; /* grafite escuro — moldura, nunca fundo de conteúdo */ /* ── TOKENS DO DESENHO (TASK-036, medidos por estilo computado em 05/08) ── Valores lidos das telas /painel e /painel/kanban do figma.site. Quem mexer aqui remede o desenho antes — ver tasks/TASK-036-TOKENS-MEDIDOS.md. A sidebar deixou de ser grafite (#2B2825) e passou a ser CLARA: é o que o desenho oficial mostra. A moldura escura continua existindo só em --nav-bg, para os poucos lugares que a usam de propósito. */ /* ── SIDEBAR EM TINTA (Ponte visual vitrine → painel, 08/08) ────────────── A sidebar volta a ser ESCURA — e isso reverte a TASK-036, que a havia clareado por fidelidade ao Figma Make ("o design do Figma, não o seu", 05/08). A decisão nova é da Amanda e vem do handoff da auditoria: a vitrine (preta e dourada) e o produto (claro) não se pareciam, e a sidebar é a peça que os dois têm em comum. O produto continua CLARO — muda a moldura, não a mesa. ⚠️ Efeito colateral a vigiar: a "âncora escura por tela" (TASK-036) parte do princípio de que existe UM elemento escuro por vez. Com a sidebar escura permanente, o card do dia no Kanban e o card do líder na Inteligência deixam de ser os únicos — se começarem a competir, quem cede é a âncora, não a sidebar. Tokens PRÓPRIOS, não os gerais: `--neutro-menu` e `--ouro-texto` foram calibrados contra superfície CLARA e viram texto ilegível aqui. Mesma lição da lista de estados na mesa — token é aprovado contra uma superfície, não em abstrato. */ --sidebar-bg: #1A1614; --sidebar-largura: 224px; --sidebar-borda: rgba(240,237,232,.10); --sidebar-texto: #F0EDE8; /* item do menu e marca: 15,2:1 sobre a tinta */ --sidebar-hover: rgba(240,237,232,.07); /* O handoff pede .45 para o rótulo de grupo; medido, dá 4,03:1 num texto de 10px. Subiu para .55 (5,39:1). "Tokens de contraste AA" está na lista do que NÃO mexer do próprio handoff — então aqui o AA ganha do valor. */ --sidebar-secao: rgba(240,237,232,.55); --sidebar-ativo-bg: rgba(200,169,110,.16); --sidebar-ativo-texto: #C8A96E; /* 6,01:1 sobre o fundo ativo */ --ouro: #C8A96E; /* acento de FUNDO e sobre escuro (botão, barra, contador) */ /* Dourado como TEXTO sobre claro: #C8A96E mede 2,1:1 na sidebar — ilegível. Mesmo dourado escurecido até 4,5:1 (maratona 06/08). O de fundo não muda. */ --ouro-texto: #847049; --ouro-fraco: rgba(200,169,110,.08); /* Peças que a TASK-039 precisou e não existiam. `--ouro-escuro` é o hover do botão dourado (escurece o FUNDO, mantendo texto tinta); `--ouro-mid` herda o papel de borda intermediária que era do `--acao-mid`. */ --ouro-escuro: #B08F4E; /* hover do FUNDO dourado; com tinta da 5,89:1 */ --ouro-clara: #E2D1B1; /* fundo tintado (badge e superficie): 1,5:1 contra o card */ --ouro-texto-forte:#69593A; /* texto SOBRE --ouro-clara: 4,53:1 (o --ouro-texto so da 3,18) */ /* --tinta tinha DOIS papéis e no claro isso não aparecia: texto normal e texto sobre fundo dourado. No escuro os dois se separam — o primeiro precisa clarear, o segundo não pode, porque o dourado continua claro. Mesma lição da TASK-039 com --ouro (fundo × texto). */ --sobre-ouro: #1A1614; /* texto sobre --ouro. NUNCA muda com o tema. */ /* Texto sobre --verde. Este, ao contrário do dourado, PRECISA virar com o tema: no claro o verde é escuro (#2F6B4F, branco dá 5,9:1); no escuro ele clareia para #7FC9A4 e branco cairia para 1,7:1 — ilegível. Par declarado junto para ninguém escrever `color:#fff` cru sobre o verde e só descobrir no tema escuro. */ --sobre-verde: #FFFFFF; --sobre-vermelho: #FFFFFF; /* texto sobre --vermelho; vira no escuro, como o verde */ --inverso-bg: #1A1614; /* superfície deliberadamente invertida (herói, card do líder) */ --inverso-texto: #FFFFFF; /* texto sobre --inverso-bg: viram JUNTOS ou o card some */ /* Dourado como TEXTO sobre a superfície INVERTIDA (08/08). É o quarto papel do dourado, e existe porque a superfície invertida anda na contramão do tema: no claro ela é escura e pede o dourado claro; no escuro ela CLAREIA e pede o dourado escuro — exatamente o oposto de --ouro-texto. Sem ele, o rótulo do cabeçalho do onboarding mede 2,4:1 no tema escuro. */ --ouro-inverso: #C8A96E; /* Verde que vive SOBRE a superficie invertida (mesmo papel do --ouro-inverso). No claro a superficie e tinta, entao o verde clareia. */ --verde-inverso: #7FA98A; --tinta: #1A1614; --neutro-menu: #7A716B; /* era #9C9189 do desenho: 2,9:1 na sidebar, reprovado AA — escurecido p/ 4,5:1 (maratona 06/08) */ --neutro-meta: #68605A; /* idem: 3,74 -> 4,52 sobre a mesa nova */ /* ── LADO A / LADO B DOS COMPARATIVOS (2026-08-20) ──────────────────────── A e B usavam --ouro e --amarelo: dois dourados quase iguais, e o título do card chegava a dizer "(A azul × B laranja)" sem nada azul nem laranja na tela. Cor aqui é IDENTIDADE DE LADO, não mérito — o comparativo não declara vencedor (ver _renderComparativoEstados). `--comp-*` é o tom CHEIO (barra, chip com texto branco); `--comp-*-texto` é o mesmo papel do par --ouro/--ouro-texto: o que pode virar texto sobre o card. No escuro os dois clareiam, senão azul-marinho sobre card escuro some. */ SÃO TRÊS TONS POR LADO, e não um, porque a cor faz três trabalhos com exigências opostas — no claro os três coincidem, no escuro não: --comp-* preenchimento GRÁFICO (barra, fatia do donut). Precisa se destacar do trilho; --comp-*-solido fundo de chip que carrega TEXTO BRANCO. Precisa ser escuro o bastante para 4,5:1; --comp-*-texto texto sobre o card; --comp-*-bg fundo do pill de diferença. */ --comp-a: #1F4E9C; --comp-a-solido: #1F4E9C; /* branco em cima: 7,99:1 */ --comp-a-texto: #1F4E9C; /* 7,99:1 sobre o card branco */ --comp-a-bg: #E3EAF6; --comp-b: #B4551D; --comp-b-solido: #B4551D; /* branco em cima: 4,93:1 */ --comp-b-texto: #9A4818; /* o cheio dá 4,42:1 no card; este dá 6,34:1 */ --comp-b-bg: #F5E4D8; /* Cores de coluna do Kanban — a borda superior de 3px que o desenho usa para dar identidade a cada coluna sem pintar o cartão inteiro. */ --col-novo: #1A1614; --col-contato: #1D4ED8; --col-indicado: #15803D; --col-radar: #D97706; /* Os apelidos --azul* foram APOSENTADOS na TASK-039 (07/08). Eles eram a ponte da migracao azul -> terracota (TASK-031) e sobreviveram sem consumidor: o grep em src/public/ nao achou nenhum uso fora deste bloco. Ponte sem ninguem atravessando e so mais um nome para manter. */ /* As duas famílias de raio viraram uma (08/08). `--radius`/`--radius-sm` conviviam com `--raio*` dizendo quase a mesma coisa — `--radius` e `--raio` eram os MESMOS 8px, e `--radius-sm` (6px) só diferia 2px do `--raio-sm`. Duas escalas para um eixo é o defeito que a TASK-038 já tinha corrigido nas sombras. Ficou a família `--raio*`, que tem a escala completa (sm/base/lg/pílula); as 30 ocorrências foram migradas. */ /* ── SOMBRA: DOIS DEGRAUS, SÓ (TASK-038, item 2) ──────────────────────── Eram 17 valores distintos de `box-shadow` espalhados pelo arquivo — nove deles diferindo entre si por 1px ou por 0,02 de alfa, diferença que ninguém enxerga mas que todo mundo precisa manter. Elevação não é um eixo contínuo: ou a superfície está APOIADA na página, ou está FLUTUANDO acima dela. Dois tokens dizem isso inteiro. Os dois valores já existiam no arquivo (o de repouso era `--sombra`, o de flutuar era o do `.alerta-flutuante`) — nada foi inventado aqui, o que mudou é que agora são os únicos. Quem estava no meio do caminho (hover de card, modal, gaveta) foi arredondado para o degrau vizinho. Nenhuma sombra literal fora deste bloco: se precisar de uma terceira, a pergunta certa é qual dos dois papéis o elemento tem. */ --sombra-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --sombra-flutuante: 0 4px 12px rgba(0,0,0,.15); /* ANÉIS — também são `box-shadow`, mas não são sombra: não simulam altura, desenham contorno (foco, seleção, fio de contenção). Ficam separados de propósito, senão voltam a virar sombra literal espalhada. */ --anel-foco: 0 0 0 3px rgba(200,169,110,.22); /* dourado (TASK-039); opacidade subiu de .12 p/ .22 porque o dourado e mais claro que a terracota e sumia no card */ --anel-selecao: 0 0 0 2px rgba(200,169,110,.30); /* idem */ --anel-fino: 0 0 0 1px var(--borda); /* Escala de z-index — fonte única de empilhamento (ver DESIGN_SYSTEM.md §12). Camadas em passos de 100, do fundo ao topo. Nunca usar z-index numérico ad-hoc: sempre referenciar uma destas variáveis (inclusive em style inline). */ --z-nav: 100; /* barra superior fixa (sticky) */ --z-modal: 200; /* .modal-overlay genérico */ --z-drawer: 300; /* gaveta lateral (perfil de leiloeiro/vara) */ --z-modal-elevado: 400; /* modal sobre uma gaveta (#modal-decisao) */ --z-popover: 500; /* popover ancorado (sino de notificações) */ --z-menu-mobile: 600; /* gaveta do menu no mobile (overlay + sidebar) */ --z-onboarding: 700; /* modais de onboarding (primeiro uso / hint de aba) */ --z-modal-dossie: 800; /* #kb-modal (Dossiê Inteligente, tela cheia) */ --z-toast: 900; /* avisar() — feedback flutuante */ --z-confirmar: 1000; /* confirmar() — sempre no topo (bloqueia decisão) */ } /* ── TIPOGRAFIA (TASK-031, fase 2) ────────────────────────────────────────── Pareamento editorial: SERIFA nos títulos, sans no corpo. É o que separa "produto" de "template" mais depressa que qualquer cor — e é a metade da identidade Tinta que não depende de paleta. Sem CDN e sem arquivo de fonte: as duas famílias são pilhas de fontes que já existem no sistema. A TASK proíbe CDN externo (escritório com rede variável), e baixar um arquivo de fonte licenciada é decisão da Amanda — registrado em DESIGN_SYSTEM como o próximo degrau desta fase. */ :root { /* TASK-036 (2026-08-05): as três fontes do desenho do Figma. A serifa (Iowan Old Style) saiu — era a identidade da TASK-031, e o desenho aprovado usa Epilogue nos títulos e números. São TRÊS, não quatro: a contagem de elementos na tela do painel do Figma deu Inter 365× · JetBrains Mono 152× · Epilogue 14× · Plus Jakarta Sans 1×. Uma ocorrência única é resíduo do gerador, não decisão de design (medido pela Amanda, 05/08) — os números vão para Epilogue. */ --fonte-titulo: 'Epilogue', 'Segoe UI', Arial, sans-serif; --fonte-corpo: 'Inter', 'Segoe UI', Arial, sans-serif; --fonte-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; /* ── ESCALA TIPOGRÁFICA (TASK-033, 2026-08-04) ──────────────────────────── 7 degraus no lugar de 27 tamanhos. Medido antes de mexer: das 786 declarações de `font-size`, **539 (69%) estavam entre 11 e 13px** — não havia escala, havia uma poça. Sem contraste de tamanho nenhuma paleta resolve, e foi por isso que a troca de tinta da TASK-031 não matou a sensação de "genérico". REGRA: nada entre degraus. 12px e 12,5px deixam de existir. Componente que não usar a escala é bug, não estilo. */ --txt-xs: 11px; /* micro-rótulo, metadado */ --txt-sm: 13px; /* corpo — o degrau mais usado */ --txt-md: 15px; /* corpo em destaque, título de card */ --txt-lg: 18px; /* título de seção */ --txt-xl: 24px; /* título de tela */ --txt-2xl: 32px; /* herói secundário */ --txt-3xl: 44px; /* O HERÓI — um por tela, e só um */ /* ── RAIO (3 degraus + pílula) ─────────────────────────────────────────── Eram 14 valores distintos em 140 declarações. */ --raio-sm: 4px; --raio: 8px; --raio-lg: 12px; --raio-pilula: 999px; /* não é raio, é forma: chip, badge, ponto */ /* ── RITMO DE ESPAÇO (6 degraus) ───────────────────────────────────────── Eram 27 valores em 1.115 declarações, 56% fora de qualquer ritmo. O agrupamento por PROXIMIDADE (mesmo assunto junto, grupos separados por espaço) é o que substitui borda e caixa. */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; } /* ── MICRO-RÓTULO ──────────────────────────────────────────────────────────── O componente que dá ar de instrumento em vez de formulário: caixa alta, pequeno, espaçado, cor secundária. Um só, reutilizado — antes disso cada tela escrevia a sua variação de `font-size: var(--txt-xs);text-transform:uppercase`. */ .rotulo { font-size: var(--txt-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-sec); } .rotulo--fraco { color: var(--cinza); font-weight: 600; } /* Rótulo dourado do cabeçalho do onboarding — hoje a única superfície invertida com texto dourado. Ver --ouro-inverso no :root. */ .ob-kicker { color: var(--ouro-inverso); } /* ── HERÓI ─────────────────────────────────────────────────────────────────── O número que responde à pergunta da tela. UM por tela — a regra que faz a hierarquia existir. `tabular-nums` porque herói costuma ser dinheiro ou contagem, e dígito desalinhado num tamanho desses salta aos olhos. */ .heroi { font-size: var(--txt-3xl); font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texto); } .heroi-rot { margin-top: var(--e-1); } /* o micro-rótulo embaixo do herói */ .im-heroi { margin-bottom: var(--e-4); } /* Herói de Contatos: a resposta da tela é um e-mail, não uma métrica — então o topo da escala vai para a BUSCA, que é como se chega até ele. */ .ag-busca-heroi { font-size: var(--txt-lg); padding: var(--e-3) var(--e-4); border-radius: var(--raio-lg); max-width: 560px; } /* Identificador (número de processo, CNPJ, código de convite) em monoespaçada: é código, não prosa — e alinha quando repetido em lista. */ .ident { font-family: var(--fonte-mono); font-size: var(--txt-xs); letter-spacing: -.02em; } body { font-family: var(--fonte-corpo); background: var(--bg); color: var(--texto); font-size: var(--txt-md); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Títulos em serifa. `h1..h3` cobre a maior parte das telas; as classes de título que não usam heading estão listadas junto para não sobrar meio caminho — foi a migração parcial que a TASK apontou como o pior resultado. */ h1, h2, h3, .rel-hero-titulo, .not-grupo-t, .kb-card-linha1, .im-card-t, .saude-veredito-t, .ag-grupo-comarca, .modal-header h3 { font-family: var(--fonte-titulo); letter-spacing: -.01em; } /* DINHEIRO E NÚMERO alinham em coluna: sem tabular-nums, "R$ 1.234" e "R$ 987" desencontram os dígitos e a tabela fica torta. */ .kb-card-valor, .im-num, .cvc-txt, .ag-caminho-n, td, .kb-count, .saude-numeros { font-variant-numeric: tabular-nums; } /* ── BOTÕES ──────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--e-2); padding: 8px 16px; border-radius: var(--raio-sm); font-size: var(--txt-sm); font-weight: 500; cursor: pointer; border: 1px solid var(--borda); background: var(--bg-card); color: var(--texto); text-decoration: none; transition: all 0.15s; font-family: inherit; letter-spacing: -.01em; box-shadow: var(--sombra-card); } .btn:hover { background: var(--cinza-claro); border-color: var(--cinza-mid); } .btn-primary { background: var(--ouro); color: var(--sobre-ouro); border-color: var(--ouro-texto); box-shadow: var(--sombra-card); } .btn-primary:hover { background: var(--ouro-escuro); border-color: var(--ouro-texto); } .btn-sm { padding: 6px 12px; font-size: var(--txt-sm); } /* --vermelho-escuro, nao --vermelho: sobre --vermelho-claro o tom cheio da 3,6:1. Mesma logica do par --ouro-clara/--ouro-texto-forte. */ .btn-danger { background: var(--vermelho-claro); color: var(--vermelho-escuro); border-color: var(--vermelho-claro); box-shadow: none; } .btn-danger:hover { background: var(--vermelho-claro); } .btn-success { background: var(--verde-claro); color: var(--verde-escuro); border-color: var(--verde-claro); box-shadow: none; } /* ── FORMULÁRIOS ─────────────────────────────────────────────────────────────── */ input, select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); font-size: var(--txt-sm); font-family: inherit; background: var(--bg-card); color: var(--texto); transition: border-color 0.15s, box-shadow 0.15s; box-shadow: var(--sombra-card); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ouro-texto); box-shadow: var(--anel-foco); } textarea { resize: vertical; min-height: 80px; } label { display: block; font-size: var(--txt-sm); color: var(--texto-sec); margin-bottom: var(--e-2); font-weight: 500; letter-spacing: .01em; } .form-row { margin-bottom: var(--e-4); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); } /* ── CARDS ───────────────────────────────────────────────────────────────────── */ .card { background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-5); box-shadow: var(--sombra-card); } /* ── BADGES ──────────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--e-1); padding: 3px 10px; border-radius: var(--raio-lg); font-size: var(--txt-xs); font-weight: 600; letter-spacing: .02em; } .badge-apta { background: var(--verde-claro); color: var(--verde-escuro); } .badge-possivel { background: var(--amarelo-claro); color: var(--amarelo-escuro); } .badge-negativo { background: var(--amarelo-claro); color: var(--amarelo-escuro); font-weight: 700; } .badge-aguardando { background: var(--ouro-clara); color: var(--ouro-texto-forte); } .proc-card.negativo { border-left: 4px solid var(--amarelo); background: linear-gradient(to right, var(--amarelo-claro) 0%, var(--bg-card) 60%); } .badge-nomeado { background: var(--verde-claro); color: var(--verde-escuro); } .badge-perdido { background: var(--vermelho-claro); color: var(--vermelho); } .badge-expirado { background: var(--cinza-claro); color: var(--cinza); } /* ── ALERTA ──────────────────────────────────────────────────────────────────── */ .alerta { padding: 10px 14px; border-radius: var(--raio-sm); font-size: var(--txt-sm); margin-bottom: var(--e-3); display: none; font-weight: 500; } .alerta.erro { background: var(--vermelho-claro); color: var(--vermelho); border: 1px solid var(--vermelho-claro); } .alerta.ok { background: var(--verde-claro); color: var(--verde-escuro); border: 1px solid var(--verde-claro); } .alerta.visivel { display: block; } .alerta.aviso { background: var(--amarelo-claro); color: var(--amarelo-escuro); border: 1px solid var(--amarelo-claro); } /* Avisos flutuantes (helper avisar() em aviso.js) — z-index acima do #kb-modal (9999) */ #avisos-flutuantes { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--e-2); max-width: min(520px, 90vw); } .alerta-flutuante { margin-bottom: 0; box-shadow: var(--sombra-flutuante); cursor: pointer; animation: alertaEntra .25s ease; } .alerta-flutuante.saindo { opacity: 0; transition: opacity .3s ease; } /* Botão de ação dentro do aviso (o "desfazer" do × do Kanban, 2026-08-03). Herda a cor do próprio alerta em vez de trazer a sua: o desfazer pertence à mensagem, não compete com ela. */ .alerta-acao { margin-left: var(--e-3); padding: 2px 10px; border-radius: var(--raio-pilula); border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: var(--txt-sm); font-weight: 700; cursor: pointer; } .alerta-acao:hover { background: rgba(0,0,0,.06); } @keyframes alertaEntra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ── NAV ─────────────────────────────────────────────────────────────────────── */ /* Faixa branca fina do desenho (TASK-036): título da tela à esquerda, utilitários à direita. A identidade (marca + usuário) mudou-se para a sidebar — a faixa é contexto, não marca. */ .nav { background: var(--bg-card); border-bottom: 1px solid var(--borda); padding: 0 24px; height: 44px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: var(--z-nav); } .nav-titulo { font-family: var(--fonte-titulo); font-size: var(--txt-md); font-weight: 700; color: var(--tinta); letter-spacing: -.01em; } /* Marca dentro da sidebar, como no desenho. */ .sb-marca { padding: 14px 18px 10px; border-bottom: 1px solid var(--sidebar-borda); margin-bottom: var(--e-2); } .sb-marca-logo { display: flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--sidebar-texto); text-decoration: none; } /* ── Bloco do usuário na sidebar (handoff "Auditoria de Design", 10/08) ────── Medidas do protótipo: avatar 32px redondo, nome 13px/600, sub 11.5px. O `min-width:0` no bloco de texto não é decorativo: sem ele o flex recusa encolher e o nome longo empurra o avatar para fora da sidebar em vez de ganhar reticências — foi o que "Thais Silva Moreira de Sousa" mostrou. */ .sb-user { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sidebar-borda); margin-bottom: var(--e-2); } .sb-user-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--verde); color: var(--sobre-verde); font-size: 13px; font-weight: 600; letter-spacing: .01em; } .sb-user-txt { min-width: 0; } .sb-user-nome { font-size: 13px; font-weight: 600; color: var(--sidebar-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-user-sub { font-size: 11.5px; color: var(--sidebar-secao); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-logo span { color: var(--ouro-texto); } .nav-right { display: flex; align-items: center; gap: var(--e-3); } .nav-right span { color: var(--cinza); font-size: var(--txt-sm); } .nav-right .btn { background: transparent; border-color: var(--borda); color: var(--texto-sec); box-shadow: none; font-size: var(--txt-sm); } .nav-right .btn:hover { background: rgba(26,22,20,.04); color: var(--texto); } /* ── LAYOUT PAINEL ───────────────────────────────────────────────────────────── */ .painel-layout { display: flex; min-height: calc(100vh - 56px); } .sidebar { width: var(--sidebar-largura); background: var(--sidebar-bg); padding: 16px 0; flex-shrink: 0; /* Sidebar clara precisa de fio: sem a borda ela e o conteúdo branco viram uma superfície só, e a navegação perde o lugar. */ border-right: 1px solid var(--sidebar-borda); } /* Menu lateral — refinamento estilo Linear/Notion (2026-07-09): mais respiro entre grupos e títulos de seção mais leves. A coluna de ícones (`.sb-ico`) SAIU em 10/08. Ela existia para alinhar rótulos apesar das larguras irregulares dos emojis; quando os emojis foram removidos, sobraram 24 spans vazios reservando 20px cada — um recuo fantasma sem nada dentro. O protótipo do handoff mostra o item de menu como rótulo puro, então o recuo foi embora com eles. (O README do pacote pedia o contrário — preencher os 24 com SVG. Vale o `.dc.html`, por decisão da Amanda em 09/08.) */ /* Micro-rótulo de seção: mono 9px com letter-spacing largo, como no desenho. É a menor tipografia do produto e a que mais organiza a navegação. */ /* Micro-rótulo em JetBrains Mono: 10px, peso 500, letter-spacing .08em — a régua de micro-rótulo da Ponte visual (08/08). */ .sb-section { padding: 24px 18px 6px; font-family: var(--fonte-mono); font-size: 10px; font-weight: 500; color: var(--sidebar-secao); text-transform: uppercase; letter-spacing: .08em; } .sb-section:first-child { padding-top: var(--e-2); } /* Menu enxuto (2026-07-10): seções recolhíveis — o título vira botão, com chevron indicando o estado; itens recolhidos somem via classe própria (nunca inline display, para não atropelar Curadoria/Equipe/Chat que já têm regras de visibilidade próprias). */ .sb-section { cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--e-2); } .sb-section::before { content: '▾'; font-size: var(--txt-xs); opacity: .65; transition: transform .15s; } .sb-section.recolhida::before { transform: rotate(-90deg); } .sb-section:hover { color: var(--sidebar-texto); } .sb-item.sb-oculto { display: none; } .sb-item.sb-solo-oculto { display: none; } .sb-item { display: flex; align-items: center; gap: var(--e-3); padding: 8px 16px; font-size: 12px; cursor: pointer; color: var(--sidebar-texto); text-decoration: none; position: relative; font-weight: 500; transition: color 0.12s, background 0.12s; margin: 1px 8px; border-radius: var(--raio); } /* Ícones SVG de traço (TASK-031, fase 3). `currentColor` no traço faz o ícone herdar a cor do item — ativo, hover e desabilitado funcionam sem variante. */ .ico { width: 17px; height: 17px; display: block; } /* Ícone DENTRO de uma frase (TASK-038, item 3): "✉ contato", "· e-mail@vara". O `.ico` de menu é `display:block` e quebraria a linha; aqui ele anda junto com o texto e senta na linha de base. Mesmo traço, mesma cor herdada. */ .ico--inline { display: inline-block; width: 15px; height: 15px; vertical-align: -.18em; } /* Ponto de status: a cor É a informação (era o que 🔴🟢🟡 carregavam). */ .ponto-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; margin-right: var(--e-2); } .btn .ico, .kb-card-btn .ico { width: 15px; height: 15px; margin-right: -1px; } /* Saída de emergência no rodapé do menu (TASK-036): separada dos grupos, porque não é área do produto — é para quem travou. */ .sb-item--rodape { margin-top: var(--e-4); opacity: .75; } .sb-item--rodape:hover { opacity: 1; } /* PLANO DA CONTA (TASK-055 fatia 2): uma linha, no fim do menu, só para a conta Inteligência. Decisão da Amanda: nada de cadeado em cima dos itens que ela não tem — o que não é do plano some, e sobra esta menção discreta. `--sidebar-bg` é escuro nos DOIS temas, então a cor é a mesma nos dois e não precisa de bloco no `[data-tema="escuro"]`. O dourado aqui é `--ouro` (o de FUNDO e de texto sobre escuro), não `--ouro-texto`, que é para card claro e daria 1,7:1 aqui. */ .sb-plano { margin: var(--e-3) 8px var(--e-4); padding: 8px 16px; border-top: 1px solid rgba(240,237,232,.10); font-family: var(--fonte-mono); font-size: 10.5px; line-height: 1.5; color: rgba(240,237,232,.72); display: flex; flex-wrap: wrap; gap: 0 5px; } .sb-plano-sep { opacity: .5; } .sb-plano-conhecer { color: var(--ouro); } /* Item e seção que não são do plano somem — classe própria, nunca inline display, pelo mesmo motivo de `sb-oculto`: aqui há três regras de visibilidade empilhadas (admin, solo, plano) e a última a escrever venceria as outras se todas usassem style. */ .sb-item.sb-fora-do-plano, .sb-section.sb-fora-do-plano { display: none; } /* Hover e ativo em cima da sidebar CLARA: escurecer levemente em vez de clarear, que era o gesto da versão grafite. */ .sb-item:hover { background: var(--sidebar-hover); color: var(--sidebar-texto); } /* Ativo do desenho: dourado sobre um véu do próprio dourado. A barrinha vertical à esquerda saiu — o desenho marca o ativo só por cor e fundo, e com a sidebar clara a barra virava um segundo acento competindo. */ .sb-item.ativo { background: var(--sidebar-ativo-bg); color: var(--sidebar-ativo-texto); font-weight: 600; } .sb-item.ativo:hover { background: var(--sidebar-ativo-bg); color: var(--sidebar-ativo-texto); } /* Contador: mono 9px, dourado sólido com tinta por cima, raio pequeno. */ .sb-badge { margin-left: auto; background: var(--ouro); color: #080808; font-family: var(--fonte-mono); font-size: 9px; font-weight: 500; padding: 2px 6px; border-radius: 3px; } .painel-main { flex: 1; padding: 28px 32px; overflow-y: auto; min-width: 0; } /* ── STATS GRID ──────────────────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-5); } .stat { background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra-card); } .stat-label { font-size: var(--txt-xs); color: var(--texto-sec); margin-bottom: var(--e-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .stat-val { font-size: var(--txt-xl); font-weight: 800; letter-spacing: -.5px; } /* ── RELATÓRIO: CARD HERÓI ──────────────────────────────────────────────────── */ /* O bloco do herói (TASK-033). A CAIXA ficou mais discreta de propósito: com o número em 44px, o fundo tintado e a borda viravam ruído em volta do que já grita sozinho. Menos superfície, mais contraste — é a troca da TASK. */ .rel-hero { position: relative; background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: var(--e-5) var(--e-5) var(--e-4); margin-bottom: var(--e-4); } /* Âncora escura da tela (05/08, "está tudo muito bege"): o card do dia em TINTA sólida — um elemento escuro por tela, nunca mais. É o mesmo gesto do card "MUITO ALTO" da Inteligência no desenho do Figma: com um polo escuro, todo o resto parece claro por comparação, sem escurecer o produto. Vale SÓ para o herói do dia; os estados menores (carregando/erro) continuam claros — âncora repetida deixa de ancorar. */ /* A SUPERFÍCIE INVERTIDA VIRA COM O TEMA — E O CONTEÚDO DELA TEM DE VIRAR JUNTO (corrigido em 10/08, Bloco 2 da blindagem). `--inverso-bg` já virava (#1A1614 no claro → #F2EDE6 no escuro), mas o que vive em cima estava cravado em branco e no dourado que não vira: no tema escuro o herói era texto branco sobre fundo quase branco — 1,13:1. Agora tudo aqui deriva de `--inverso-texto`, que vira junto: o `color-mix` com `transparent` reproduz o mesmo esmaecimento das opacidades antigas, só que na cor certa de cada tema. */ .rel-hero--tinta { background: var(--inverso-bg); border-color: var(--inverso-bg); } .rel-hero--tinta .heroi { color: var(--inverso-texto); } .rel-hero--tinta .heroi-rot { color: var(--ouro-inverso); } .rel-hero--tinta .rel-hero-msg { color: color-mix(in srgb, var(--inverso-texto) 78%, transparent); } .rel-hero--tinta .kb-hero-negocio { color: color-mix(in srgb, var(--inverso-texto) 70%, transparent); } .rel-hero--tinta .kb-hero-negocio strong { color: var(--inverso-texto); } .rel-hero--tinta .kb-hero-rodape { color: color-mix(in srgb, var(--inverso-texto) 62%, transparent); border-top-color: color-mix(in srgb, var(--inverso-texto) 14%, transparent); } /* O botão do desenho é DOURADO sobre o escuro (como na landing) — a terracota sumiria contra a tinta. */ .rel-hero--tinta .btn-primary { background: var(--ouro); border-color: var(--ouro); color: #080808; box-shadow: none; } .rel-hero--tinta .btn-primary:hover { background: #D6BA85; border-color: #D6BA85; } .rel-hero--tinta .btn:not(.btn-primary) { background: rgba(127,127,127,.14); border-color: rgba(127,127,127,.30); color: var(--inverso-texto); } .rel-hero-hora { position: absolute; top: var(--e-4); right: var(--e-5); font-size: var(--txt-xs); color: var(--texto-sec); } .rel-hero-titulo { font-size: var(--txt-lg); font-weight: 800; letter-spacing: -.01em; color: var(--texto); margin-bottom: var(--e-1); } .rel-hero-msg { font-size: var(--txt-sm); color: var(--texto-sec); line-height: 1.5; margin: var(--e-3) 0 var(--e-4); max-width: 560px; } .rel-hero-cta { font-size: var(--txt-sm); } .rel-apoio { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: var(--e-5); font-size: var(--txt-sm); color: var(--texto-sec); } /* ── HOME (dashboard executivo do dia) ──────────────────────────────────────── */ /* Topo "Mercado" — deliberadamente discreto (2026-07-07): a usuária deve olhar primeiro pro Hero pessoal, não pros números nacionais. Números em estilo `.mapa-kpi` (já existente na Inteligência de Mercado) — número grande primeiro, rótulo pequeno depois: o cérebro bate no número antes (pedido da Amanda, revisão de 2026-07-07). */ /* ── PROCESSO CARD ───────────────────────────────────────────────────────────── */ .proc-card { background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; margin-bottom: var(--e-3); border-left: 4px solid var(--borda); box-shadow: var(--sombra-card); transition: box-shadow 0.15s; } .proc-card:hover { box-shadow: var(--sombra-flutuante); } .proc-card.apta { border-left-color: var(--verde); } .proc-card.possivel { border-left-color: var(--amarelo); } .proc-card.aguardando{ border-left-color: var(--ouro-texto); } .proc-card.nomeado { border-left-color: var(--verde); } .proc-card.perdido { border-left-color: var(--vermelho); } .proc-card.expirado { border-left-color: var(--cinza); } .proc-top { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-2); } .proc-num { font-family: var(--fonte-mono); font-size: var(--txt-xs); background: var(--cinza-claro); padding: 2px 8px; border-radius: var(--raio-sm); letter-spacing: .02em; color: var(--texto-sec); } .proc-trib { font-size: var(--txt-xs); font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .06em; } .proc-meta { font-size: var(--txt-sm); color: var(--texto-sec); margin-bottom: var(--e-2); } .proc-trecho { font-size: var(--txt-sm); line-height: 1.6; color: var(--texto); } .proc-trecho mark { background: var(--amarelo-claro); padding: 0 2px; border-radius: var(--raio-sm); } .proc-acoes { display: flex; gap: var(--e-4); align-items: center; flex-wrap: wrap; margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--cinza-claro); } .proc-acoes a { font-size: var(--txt-sm); color: var(--ouro-texto); cursor: pointer; font-weight: 600; text-decoration: none; transition: color 0.1s; } .proc-acoes a:hover { color: var(--ouro-texto); text-decoration: underline; } .proc-motivo { font-size: var(--txt-xs); color: var(--texto-sec); } .urgente-tag { font-size: var(--txt-xs); background: var(--vermelho-claro); color: var(--vermelho); padding: 2px 8px; border-radius: var(--raio-lg); font-weight: 700; } /* ── PRAZO BAR ───────────────────────────────────────────────────────────────── */ .prazo-bar { height: 4px; background: var(--cinza-claro); border-radius: var(--raio-sm); margin-top: var(--e-1); overflow: hidden; } .prazo-fill { height: 4px; border-radius: var(--raio-sm); background: var(--ouro); transition: width 0.3s; } .prazo-fill.urgente { background: var(--vermelho); } .prazo-fill.ok { background: var(--verde); } /* ── FILTROS ─────────────────────────────────────────────────────────────────── */ .filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); } .filtro { padding: 5px 14px; border-radius: var(--raio-lg); font-size: var(--txt-sm); border: 1px solid var(--borda); cursor: pointer; background: var(--bg-card); color: var(--texto-sec); font-weight: 500; transition: all 0.12s; box-shadow: var(--sombra-card); } .filtro:hover { border-color: var(--ouro); color: var(--ouro-texto); } .filtro.ativo { background: var(--ouro); color: var(--sobre-ouro); border-color: var(--ouro-texto); box-shadow: var(--sombra-card); } /* ── INTELIGÊNCIA DE MERCADO (componentes premium padronizados) ──────────────── */ .mapa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-3); margin-bottom: var(--e-5); } .mapa-kpi { background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra-card); transition: box-shadow .15s, transform .15s; } .mapa-kpi:hover { box-shadow: var(--sombra-flutuante); transform: translateY(-1px); } .mapa-kpi .v { font-size: var(--txt-xl); font-weight: 800; letter-spacing: -.5px; line-height: 1; color: var(--texto); } .mapa-kpi .l { font-size: var(--txt-xs); color: var(--texto-sec); text-transform: uppercase; letter-spacing: .6px; margin-top: var(--e-2); } /* Comparador de Estados (2026-07-11) — lado a lado, sem coroar vencedor. */ .cmp-head { display: flex; align-items: center; justify-content: center; gap: var(--e-4); margin: 4px 0 14px; font-size: var(--txt-lg); font-weight: 800; } .cmp-vs { color: var(--texto-sec); font-weight: 700; } .cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3); padding: 9px 0; border-bottom: 1px solid var(--borda); } .cmp-row:last-child { border-bottom: 0; } .cmp-val { font-size: var(--txt-md); font-variant-numeric: tabular-nums; font-weight: 600; } .cmp-a { text-align: right; } .cmp-b { text-align: left; } .cmp-forte { font-weight: 800; font-size: var(--txt-lg); } .cmp-rot { font-size: var(--txt-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-sec); text-align: center; cursor: help; min-width: 116px; } .cmp-resumo { margin-top: var(--e-4); padding: 14px 16px; background: var(--cinza-claro, var(--bg)); border-radius: var(--raio); border-left: 3px solid var(--ouro); } .cmp-resumo-t { font-size: var(--txt-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: var(--e-2); } .cmp-resumo-t span { font-weight: 600; color: var(--texto-sec); text-transform: none; letter-spacing: 0; } /* ── IDENTIDADE DE LADO A/B (2026-08-20) ─────────────────────────────────── Cor é identidade de LADO, não de mérito: o comparativo continua sem declarar vencedor. Antes A e B eram --ouro e --amarelo, dois dourados quase iguais — ler qual coluna era qual dependia da posição, não da cor. */ .comp-legenda { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--e-4); } /* `flex-wrap` na linha + `nowrap` no chip: nome longo ("Zuk Leilões (Dora Plat e Mauro Zukerman)") quebra por chip inteiro, nunca no meio do pill. */ .comp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--txt-sm); font-weight: 700; color: #fff; padding: 5px 13px; border-radius: 999px; white-space: nowrap; } .comp-chip--a { background: var(--comp-a-solido); } .comp-chip--b { background: var(--comp-b-solido); } .comp-legenda-nota { font-size: var(--txt-xs); color: var(--texto-sec); } /* Quadradinho "A"/"B" antes da barra: diz o lado sem depender de o olho lembrar qual linha é qual. */ .comp-tag { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; border-radius: 3px; font-family: var(--fonte-mono); font-size: 10px; font-weight: 700; color: #fff; } .comp-tag--a { background: var(--comp-a-solido); } .comp-tag--b { background: var(--comp-b-solido); } .comp-linha { margin: 12px 0; } .comp-linha-t { display: flex; justify-content: space-between; align-items: center; font-size: var(--txt-sm); margin-bottom: var(--e-2); } .comp-linha-rot { font-weight: 600; } .comp-barra-linha { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-1); } .comp-valor { font-family: var(--fonte-mono); font-weight: 700; font-size: var(--txt-sm); min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; } .comp-valor--a { color: var(--comp-a-texto); } .comp-valor--b { color: var(--comp-b-texto); } /* Diferença: pill, não texto solto. É o número que responde a pergunta da tela, e como texto colorido tinha o mesmo peso do rótulo ao lado. */ .comp-delta { font-family: var(--fonte-mono); font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; } .comp-delta--a { color: var(--comp-a-texto); background: var(--comp-a-bg); } .comp-delta--b { color: var(--comp-b-texto); background: var(--comp-b-bg); } .comp-delta--zero { color: var(--texto-sec); background: var(--cinza-claro); } /* Crescimento vira mini-card com a borda superior do lado — mesmo recurso que as colunas do Kanban usam para dar identidade sem pintar a caixa. */ .comp-cresc { flex: 1 1 150px; min-width: 150px; border: 1px solid var(--borda); border-top: 3px solid var(--cinza); border-radius: 8px; padding: 12px 14px; background: var(--bg-card); } .comp-cresc--a { border-top-color: var(--comp-a); } .comp-cresc--b { border-top-color: var(--comp-b); } .comp-cresc-n { font-weight: 700; font-size: var(--txt-sm); } .comp-cresc--a .comp-cresc-n { color: var(--comp-a-texto); } .comp-cresc--b .comp-cresc-n { color: var(--comp-b-texto); } .comp-kicker { font-family: var(--fonte-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-sec); margin: 18px 0 8px; } /* Select do lado: fio de 3px na cor, para o controle e a coluna serem reconhecidos como a mesma coisa. */ .comp-campo-a .im-select { border-left: 3px solid var(--comp-a); } .comp-campo-b .im-select { border-left: 3px solid var(--comp-b); } .comp-campo-a > label { color: var(--comp-a-texto); font-weight: 700; } .comp-campo-b > label { color: var(--comp-b-texto); font-weight: 700; } /* Estado × Estado: vencedor da linha cheio, perdedor recuado — a hierarquia é de LEITURA (qual número é maior), não de mérito. */ .cmp-val--a { color: var(--comp-a-texto); } .cmp-val--b { color: var(--comp-b-texto); } /* 18px (--txt-lg) contra 15px (--txt-md, o tamanho base da linha). O handoff pedia 17 × 14; usei os degraus da escala tipográfica em vez de dois valores soltos — a diferença de leitura é a mesma e não cria tamanho órfão. */ .cmp-fraco { opacity: .75; } .cmp-qual { font-weight: 400; } /* Barras espelhadas: cabo-de-guerra a partir do rótulo central. */ .cmp-trilho { background: var(--cinza-mid); border-radius: 4px; height: 7px; max-width: 220px; overflow: hidden; margin-top: 5px; display: flex; } .cmp-trilho--a { margin-left: auto; justify-content: flex-end; } .cmp-trilho--b { margin-right: auto; justify-content: flex-start; } .cmp-trilho > span { display: block; height: 100%; border-radius: 4px; transition: width .45s cubic-bezier(.22,.61,.36,1); } .cmp-trilho--a > span { background: var(--comp-a); } .cmp-trilho--b > span { background: var(--comp-b); } /* Mapa estratégico (2026-07-11) — classe por cor + resumo executivo no hover. */ .geo-legenda { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: var(--e-2); font-size: var(--txt-xs); color: var(--texto-sec); } .geo-legenda span { display: inline-flex; align-items: center; gap: var(--e-2); } .geo-dot { width: 12px; height: 12px; border-radius: var(--raio-sm); display: inline-block; } .geo-resumo { min-height: 80px; padding: 14px 16px; background: var(--cinza-claro, var(--bg)); border-radius: var(--raio); } .geo-classe { display: inline-block; font-size: var(--txt-sm); font-weight: 800; margin: 6px 0 10px; padding: 3px 10px; border-radius: var(--raio-lg); } .geo-classe--entrada { background: var(--verde-claro); color: var(--verde); } .geo-classe--competitivo { background: var(--amarelo-claro); color: var(--amarelo-escuro); } .geo-classe--dominado { background: var(--vermelho-claro); color: var(--vermelho); } .geo-classe--sem-dados { background: var(--bg); color: var(--texto-sec); } .geo-ind { list-style: none; margin: 0 0 12px; padding: 0; } .geo-ind li { font-size: var(--txt-sm); padding: 3px 0 3px 16px; position: relative; } .geo-ind li::before { content: '•'; position: absolute; left: 2px; color: var(--texto-sec); } .geo-carac { font-size: var(--txt-sm); line-height: 1.55; border-top: 1px solid var(--borda); padding-top: var(--e-3); } .geo-carac span { display: block; font-size: var(--txt-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-sec); margin-bottom: var(--e-1); } /* Prioridade do dia (2026-07-11) — Painel de Hoje orientado à ação. */ .prio-bloco { background: var(--bg-card); border: 1px solid var(--borda); border-left: 3px solid var(--ouro); border-radius: var(--raio); padding: 14px 16px; margin-bottom: var(--e-3); box-shadow: var(--sombra-card); } .prio-bloco.prio-aviso { border-left-color: var(--amarelo); } .prio-bloco.prio-ok { border-left-color: var(--verde); } .prio-tit { font-size: var(--txt-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--e-2); } .prio-bloco.prio-magico { border-left-color: var(--verde); background: linear-gradient(135deg, var(--verde-claro, var(--verde-claro)), var(--bg-card)); position: relative; } .prio-magico-x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: var(--txt-lg); line-height: 1; cursor: pointer; color: var(--texto-sec); } .prio-magico-x:hover { color: var(--texto); } /* Funil de prospecção (2026-07-11, Ciclo 6) — métricas de conversão honestas. */ .funil { background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 16px; margin-bottom: var(--e-4); box-shadow: var(--sombra-card); } .funil-tit { font-size: var(--txt-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-sec); margin-bottom: var(--e-2); } .funil-etapas { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; } .funil-etapa { text-align: center; min-width: 76px; } .funil-n { font-size: var(--txt-xl); font-weight: 800; letter-spacing: -.5px; line-height: 1; } .funil-l { font-size: var(--txt-xs); color: var(--texto-sec); text-transform: uppercase; letter-spacing: .03em; margin-top: var(--e-1); } .funil-pct { font-size: var(--txt-xs); font-weight: 700; color: var(--verde); margin-top: var(--e-1); } .funil-seta { color: var(--texto-sec); font-size: var(--txt-lg); } .funil-nota { font-size: var(--txt-xs); color: var(--texto-sec); margin-top: var(--e-2); line-height: 1.4; } /* CRM de Oportunidades (2026-07-11) — board por próxima ação, separado do Kanban. */ /* ── OPORTUNIDADES v2 (10/08) ──────────────────────────────────────────────── Board por próxima ação. Duas mudanças estruturais em relação à v1: 1. GRID DE 4, NÃO ROLAGEM HORIZONTAL. Era `flex` com colunas de 250px fixos e `overflow-x:auto` — em tela menor a quarta coluna saía da vista, e "Aguardando decisão" desaparecia justamente de quem tem funil cheio. Agora `repeat(4, minmax(0,1fr))`: as quatro cabem sempre, e o `minmax` com mínimo 0 é o que permite encolher (com `1fr` puro o conteúdo empurraria a coluna e a rolagem voltaria pela porta dos fundos). 2. COLUNA É SUPERFÍCIE CALMA. Fundo quase-branco e cartão branco por cima: o cartão sobe da coluna, e a coluna sobe da mesa. Só "Fazer hoje" tem cor — borda superior vermelha e contador vermelho. Se toda coluna gritasse, nenhuma gritaria. */ /* ── LAUDOS DE AVALIAÇÃO — QUADRO POR IDADE (10/08) ───────────────────────── Reusa as colunas do quadro de prospecção (`.oport-col*`): mesma superfície calma, mesmo cabeçalho, mesmo contador tingido. Duas telas que fazem a mesma pergunta ("em que degrau está isto?") não podem ter dois desenhos de coluna diferentes — e um terceiro conjunto de classes seria manutenção duplicada sem nada em troca. A coluna cresce com rolagem própria: são 238 cards na maior, e sem teto a página inteira viraria uma coluna de 4 metros. */ .lau-topo { display: flex; align-items: baseline; gap: var(--e-2); margin-bottom: var(--e-3); flex-wrap: wrap; } .lau-n { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums; } .lau-n-l { font-size: var(--txt-sm); color: var(--texto-sec); } /* Recorte escrito da tela de laudos (25/08) — BUSINESS_RULES 6.2: a lista diz quais estados cobre, quantos em cada um e de que período. Sem isto, uma lista recortada por estado parece a lista completa. */ .lau-escopo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; font-size: var(--txt-xs); color: var(--texto-sec); margin: 0 0 var(--e-3); padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-sec, var(--bg)); line-height: 1.5; } .lau-escopo-t { font-weight: 700; color: var(--tinta); } .lau-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px; border: 1px solid var(--borda); border-radius: 999px; background: var(--bg-card); font-variant-numeric: tabular-nums; } .lau-chip strong { color: var(--tinta); } /* Chip que FILTRA (26/08). A Amanda pediu para ver os laudos separados por tribunal — os números por estado já estavam no cabeçalho, só não faziam nada. Filtro e não coluna: a coluna é o estado do trabalho e é ela que recebe o arrastar. */ .lau-chip--btn { font-family: inherit; font-size: var(--txt-xs); cursor: pointer; /* `color` EXPLÍCITO, e não herdado: o chip virou