/* ===================================================================== VERSAO DA FOLHA: v=102 Mexeu aqui? SOBE o numero em painel.html: sed -i 's|admin.css?v=101|admin.css?v=93|' Erp/public/painel.html Sem isso o navegador serve a copia velha e a regra nova simplesmente nao existe pra quem ja tinha o painel aberto. Nao aparece erro nenhum: o seletor fica sem estilo e parece decisao de desenho. Aconteceu com o selo de candidatura em 28/08 e com a chunt.css em 25/08. ===================================================================== Central do Hunter — design system ===================================================================== Extraído de painel.html (Etapa 0 da migração de visual). Nesta etapa o conteúdo é IDÊNTICO ao que estava inline — nenhuma cor, medida ou regra foi alterada. O objetivo era só tirar o CSS de dentro do HTML. REGRA: nunca escreva hex solto no CSS das páginas. Precisa de cor nova? Declare como token no :root primeiro. ACESSIBILIDADE: todo par texto/fundo deve passar WCAG AA (4.5:1 texto normal, 3:1 texto grande). Ao mexer em cor, MEÇA — não confie no olho. Cache: as páginas linkam com ?v=N. Ao alterar este arquivo, INCREMENTE o N em todas elas, senão o navegador serve a versão velha do cache. ===================================================================== */ :root{ /* Paleta da marca c·hunt. TODOS os pares texto/fundo foram medidos (WCAG AA) antes de entrar aqui — ver o quadro no fim deste bloco. Ao mexer em qualquer cor, MEÇA de novo: 5 pares reprovavam na paleta anterior sem ninguém ter notado, inclusive o botão primário. */ --navy:#296FBA; --navy2:#2564A7; --blue:#296FBA; --blue-l:#8FC0EA; /* --brand era usado em 24 regras e nunca tinha sido definido: todas caiam em transparente, em silencio (verificador 30, 18/09/2026). */ --brand:var(--navy); --bg:#F6F8FC; --card:#ffffff; --line:#E2E8F2; --ink:#0B132B; --muted:#4A5568; --ok:#12734B; --warn:#8A5200; --red:#9B2226; /* Menu lateral é sempre escuro — é a "casca" de navegação, não o conteúdo, e carrega a marca. Por isso tem os próprios tokens --side-*, independentes de --ink/--line/--card/--muted. */ --side-bg:#0A1120; --side-active-bg:#296FBA; --side-active-fg:#FFFFFF; --side-icon:#8FA4C9; --side-text:#A9BCDF; --side-hover:#16203A; --side-line:#1B2540; --side-btn-bg:#16203A; --brand-dark:#0A1120; --brand-accent:#296FBA; --brand-accent2:#4FD8E8; /* MEDIDO (mínimo AA 4.5:1 texto normal): ink/card 18,4 · ink/bg 17,3 · muted/card 7,5 · muted/bg 7,1 navy/card 5,2 · navy/bg 4,8 · branco/navy 5,2 · branco/navy2 6,1 ok/card 5,9 · warn/card 6,4 · red/card 7,9 side-text/side-bg 9,8 · side-icon/side-bg 7,5 · branco/side-active 5,2 --blue-l e --brand-accent2 NUNCA como texto sobre fundo claro: são anel de foco / destaque sobre a sidebar escura. */ /* CAMPOS DE FORMULÁRIO. A borda de um campo é a única coisa que diz onde ele começa: sobre --card branco não existe fundo pra separar. A WCAG 1.4.11 pede 3:1 pra esse contorno, e o --line (1,23:1) foi desenhado pra beirada de cartão, não pra campo. MEDIDO: field-line/card 3,35:1 · field-line/bg 3,15:1. */ --field-line:#7F8DA6; /* O realce do que acabou de mudar. Azul da marca bem lavado: precisa chamar o olho por um segundo e não competir com o vermelho de atrasado nem com o verde de em dia, que estão na MESMA lista. */ --mudou:#B9D8F6; /* O anel de foco. Sai do --navy, com alfa, pra ser o mesmo azul da marca sem virar um segundo tom. */ --ring:0 0 0 3px rgba(41,111,186,.16); /* Setas e lupa desenhadas por nós. Ficam aqui, e não soltas na regra, porque o hex mora DENTRO do SVG e a folha proíbe hex solto lá embaixo. O tom é o --muted (#4A5568); a versão clara é pro select que vive sobre fundo escuro (hero da Bússola). */ --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.7 6 6.3 11 1.7' stroke='%234A5568' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chevron-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.7 6 6.3 11 1.7' stroke='%23FFFFFF' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Ccircle cx='6.4' cy='6.4' r='4.5' stroke='%234A5568' stroke-width='1.6'/%3E%3Cpath d='M9.9 9.9 13.3 13.3' stroke='%234A5568' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); /* Grade de espaçamento e escala visual (design tokens — não muda cores da marca) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --r-sm:6px; --r-md:10px; --r-lg:14px; --sh-sm:0 1px 2px rgba(11,42,74,.06); --sh-md:0 4px 14px rgba(11,42,74,.12); --sh-lg:0 10px 30px rgba(11,42,74,.16); --ease:.15s ease; --font-ui:'Inter',system-ui,'Segoe UI',Arial,sans-serif; --font-display:'Sora',var(--font-ui); --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace; } *{box-sizing:border-box} body{margin:0;font-family:var(--font-ui);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased} button{font-family:inherit;cursor:pointer} input,select,textarea{font-family:inherit;font-size:14px} /* ===================================================================== PRIMITIVOS DE FORMULÁRIO Até aqui a folha só dizia, na linha acima, qual fonte e qual tamanho. Todo o resto era POR TELA: quem tinha classe (.f, .mc-toolbar, .crm-filtros) ganhava desenho, e quem não tinha caía no visual nativo do navegador. É de onde vinha a cara de sistema antigo: a caixa quadrada sem respiro, a setinha cinza do select, o "Escolher arquivo" do Windows. São 103 selects, 30 campos de data, 14 buscas e 4 de arquivo que nunca tiveram uma regra sequer. A ESPECIFICIDADE É ZERO DE PROPÓSITO. O :where() vale 0-0-0, então QUALQUER regra de tela que já exista continua ganhando desta aqui. Isto não redesenha nada que já tinha desenho: só veste o que estava sem ninguém. Foi o jeito de mexer em 150 campos sem auditar 150 telas. ===================================================================== */ /* A lista de exceções é o miolo da regra. Caixa de marcar, botão de escolha, faixa deslizante e seletor de cor têm desenho próprio do sistema operacional e ficam MELHORES nativos — padding e borda neles só quebram. O de arquivo sai daqui porque tem tratamento próprio mais abaixo. Campo sem type= é campo de texto, e entra. */ /* NÃO quebre estes seletores em duas linhas: espaço dentro de um seletor composto vira combinador de descendente, e a regra passa a valer pra outra coisa sem avisar. */ :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),select,textarea){ padding:9px 12px; border:1px solid var(--field-line); border-radius:var(--r-md); /* background-COLOR em campo, NUNCA o atalho `background`. O atalho zera o background-image junto, e e ele que desenha a seta do select e a lupa da busca. Ver ferramentas/verificar-seta-select.js */ background-color:var(--card); color:var(--ink); line-height:1.45; transition:border-color var(--ease), box-shadow var(--ease); } /* O Firefox apaga o texto de dica por conta própria; o opacity devolve ele pro tom que a gente mediu. */ ::placeholder{color:var(--muted);opacity:1} :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),select,textarea):hover:not(:disabled):not([readonly]){ border-color:var(--muted); } /* O anel de foco SOMA com o outline do :focus-visible lá de cima, que continua sendo o indicador de teclado. Aqui é o campo dizendo "estou recebendo o que você digita", que vale pro mouse também. */ :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),select,textarea):focus{ border-color:var(--navy); box-shadow:var(--ring); } :where(input,select,textarea):disabled{ /* background-COLOR, e nao o atalho: o atalho zera o background-image e o select desabilitado ficava sem seta nenhuma. */ background-color:var(--bg);color:var(--muted);cursor:not-allowed; } /* O SELECT. A seta nativa é o item mais datado da tela inteira: cada sistema operacional desenha a sua, nenhuma combina com o resto, e no Windows ela vem dentro de um quadradinho cinza com relevo. appearance:none apaga a nativa e o --chevron entra no lugar. */ :where(select){ appearance:none; -webkit-appearance:none; padding-right:34px; background-image:var(--chevron); background-repeat:no-repeat; background-position:right 12px center; } /* CAMPO DE DATA. O ícone do calendário é do navegador e não dá pra trocar; dá pra deixar ele discreto e acender no passar do mouse, que é o que tira o ar de formulário de 1998. */ :where(input[type=date],input[type=month],input[type=time],input[type=datetime-local]){ min-height:40px; } input[type=date]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.5; transition:opacity var(--ease); } input[type=date]:hover::-webkit-calendar-picker-indicator, input[type=month]:hover::-webkit-calendar-picker-indicator, input[type=time]:hover::-webkit-calendar-picker-indicator, input[type=datetime-local]:hover::-webkit-calendar-picker-indicator{opacity:1} /* CAMPO DE ARQUIVO. O pior de todos: "Escolher arquivo · Nenhum arquivo escolhido", com o botão cinza de relevo. O ::file-selector-button deixa vestir o botão sem tocar em uma linha de HTML. A borda tracejada é de propósito: diz "solte algo aqui" antes de qualquer texto explicar. */ :where(input[type=file]){ padding:7px 11px; border:1px dashed var(--field-line); border-radius:var(--r-md); background:var(--card); color:var(--muted); font-size:13px; max-width:100%; } input[type=file]::file-selector-button{ margin-right:11px; padding:7px 13px; border:1px solid var(--field-line); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); font:600 13px var(--font-ui); cursor:pointer; transition:background var(--ease),border-color var(--ease); } input[type=file]::file-selector-button:hover{background:var(--card);border-color:var(--navy)} :where(textarea){resize:vertical;line-height:1.5} /* CAMPO DE BUSCA. A lupa morava DENTRO do texto de dica, e sumia no primeiro caractere digitado — justo quando a pessoa mais precisa enxergar que aquilo ali é uma busca. Agora ela é desenho do campo e fica. O min-height existe porque busca é o campo mais tocado no celular e 42px é o alvo confortável de dedo. */ .busca{ padding-left:36px; min-height:42px; background-image:var(--lupa); background-repeat:no-repeat; background-position:left 12px center; } /* ===================================================================== MOVIMENTO Três momentos, e só três: o toque no botão, o modal abrindo e a troca de tela. São os gestos que a pessoa repete o dia inteiro, e eram os únicos três sem retorno nenhum. TUDO AQUI É `transform` E `opacity`. Só essas duas o navegador anima na placa de vídeo, sem recalcular layout — é o que separa movimento de travada no celular, que é onde o sistema mais roda. Quem pediu menos movimento no sistema operacional já está atendido pela trava global de prefers-reduced-motion mais abaixo: ela zera animation-duration em tudo, com !important. Nada aqui precisa repetir essa conta. ===================================================================== */ /* O BOTÃO QUE RESPONDE AO TOQUE. No celular não existe hover: entre o toque e a ação terminar o botão não dava retorno NENHUM, e quem não vê resposta toca de novo. */ .btn:active:not(:disabled), button:active:not(:disabled){transform:scale(.97)} /* O MODAL ENTRANDO. Antes ele materializava: fundo escuro cheio e caixa em tamanho final, no mesmo quadro. A classe é posta pelo overlay() SÓ quando o modal nasce, e sai sozinha depois. Se ficasse, todo modal que se redesenha por dentro (e são vários) reanimaria a caixa inteira a cada clique lá dentro. */ .ovl-entra{animation:ovlFundo .18s ease} .ovl-entra .modal{animation:ovlCaixa .22s cubic-bezier(.2,.8,.3,1)} .ovl-sai{animation:ovlFundoSai .16s ease forwards;pointer-events:none} @keyframes ovlFundo{from{opacity:0}} @keyframes ovlCaixa{from{opacity:0;transform:translateY(10px) scale(.985)}} @keyframes ovlFundoSai{to{opacity:0}} /* A TELA QUE ENTRA. Trocar de aba era um corte seco entre 21 telas. O `transform` de um ancestral vira bloco de contenção pros filhos `position:fixed` — e o painel do script (#scr-painel, fixed) é desenhado DENTRO do #view-capta. Por isso a animação não tem `forwards`: ela termina em transform nenhum, e 170ms depois o filho fixo volta a se posicionar pela janela. O painel do script só existe na tela com body.scr-on, que não é o caso de quem acabou de trocar de aba. O #view-time fica de fora no JS: ele é `position:fixed;inset:0`, uma tela cheia por cima de tudo, e não se comporta como as outras. */ .view-entra{animation:viewEntra .17s ease-out} @keyframes viewEntra{from{opacity:0;transform:translateY(6px)}} /* O QUE ACABOU DE MUDAR. Este é o único movimento da folha que não é enfeite: a tela se redesenha INTEIRA depois de gravar, e até aqui a pessoa tinha que caçar com o olho o que tinha mudado no meio de quarenta linhas. Sem `forwards` de propósito: a animação termina e a cor volta a ser a que o elemento já tinha, seja qual for. Assim funciona no card do Kanban (branco), no card do CRM e em qualquer lista que venha depois, sem eu ter que saber a cor de cada uma. */ .mudou{outline:3px solid transparent;outline-offset:-3px;z-index:2;animation:mudouAcende 1.9s cubic-bezier(.2,.8,.3,1)} /* SEGURA e depois apaga, em vez de apagar desde o primeiro quadro. A primeira versão era `from{cor}` com ease-out: a cor drenava logo no comeco e, no tempo em que a pessoa levava pra olhar, o card ja estava quase branco de novo. Ninguem via. Agora fica acesa 55% do tempo e so entao apaga. O contorno usa `outline` e nao `box-shadow` de proposito: o card do Kanban ja tem sombra propria, e box-shadow substituiria a dele durante a animacao. O 100% e implicito: sem declarar, a animacao volta pro que o elemento ja tinha, seja qual for a cor da lista. Declarar `transparent` ali faria o card ficar vazado no ultimo quadro. */ /* O QUE O OLHO PEGA É MOVIMENTO, e não cor. Duas versões só de cor passaram batidas: num quadro cheio de cards coloridos, mais uma cor clara some no meio. Um card que CRESCE e volta, não. A cor e o contorno ficam pra dizer QUAL é depois que o movimento já chamou o olho pra lá. */ @keyframes mudouAcende{ 0% {background-color:var(--mudou);outline-color:var(--blue);transform:scale(1)} 14% {background-color:var(--mudou);outline-color:var(--blue);transform:scale(1.04)} 34% {background-color:var(--mudou);outline-color:var(--blue);transform:scale(1)} 62% {background-color:var(--mudou);outline-color:var(--blue)} } /* O ESQUELETO DA ESPERA. Não entra nos 77 "Carregando…" do painel: aquelas chamadas voltam em 55ms e ninguém veria o esqueleto piscar. Entra só onde a espera é de VERDADE — a IA, que leva segundos — e onde o que vem tem forma conhecida: um parágrafo de texto. Esqueleto de coisa que você não sabe o formato é enfeite; esse aqui promete o que vai chegar. O que ele resolve é o texto PARADO. "Lendo o perfil…" sem nenhum movimento, por cinco segundos, se lê como travado. */ .esq{display:flex;flex-direction:column;gap:7px;margin-top:9px} .esq i{display:block;height:9px;border-radius:5px; background:linear-gradient(90deg,var(--line) 20%,var(--bg) 38%,var(--line) 56%); background-size:300% 100%;animation:esqBrilho 1.5s ease-in-out infinite} .esq i:nth-child(2){width:94%} .esq i:nth-child(3){width:76%} @keyframes esqBrilho{from{background-position:150% 0}to{background-position:-50% 0}} /* A grade da semana do horário de atendimento. Uma linha por dia, com o nome à esquerda e as horas à direita — no celular ela quebra e o dia fica em cima das horas, que é como se lê de qualquer jeito. */ .ag-grade{display:flex;flex-direction:column;gap:6px;max-width:520px} .ag-dia{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)} .ag-dia-nome{display:flex;align-items:center;gap:7px;min-width:132px; font-size:13.5px;font-weight:600;cursor:pointer} .ag-dia-horas{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)} .ag-dia-horas input[type=time]{padding:5px 8px;font-size:13px;min-height:34px} .ag-dia-fechado{font-size:12.5px;color:var(--muted);font-style:italic} .ag-dia-horas[hidden],.ag-dia-fechado[hidden]{display:none} .hidden{display:none!important} button,a,[tabindex]{transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform var(--ease),color var(--ease)} :focus-visible{outline:2px solid var(--blue-l);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}} /* Login */ #login{min-height:100vh;display:flex;align-items:center;justify-content:center} .login-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px;width:340px;box-shadow:0 10px 30px rgba(11,42,74,.12)} .login-card h1{font-size:20px;margin:0 0 4px;color:var(--navy)} .login-card p{margin:0 0 20px;color:var(--muted);font-size:13px} .login-card label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px} .login-card input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px} .btn{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:600} .btn:hover{background:var(--navy2)} .btn.sec{background:#fff;color:var(--navy);border:1px solid var(--line)} .btn.danger{background:var(--red)} .msg{font-size:13px;margin-top:12px;min-height:16px} .msg.err{color:var(--red)} .msg.ok{color:var(--ok)} /* App */ header{background:var(--card);color:var(--ink);padding:10px 18px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);position:relative;z-index:5} header .logo{font-family:var(--font-display);font-weight:700;letter-spacing:.3px;font-size:15px;color:var(--ink)} header .logo b{color:var(--navy)} header .spacer{flex:1} header .who{font-size:13px;color:var(--muted)} /* Título da tela atual, preenchido por showTab() via aplicarTituloTela(). */ .topbar-titulo{display:flex;flex-direction:column;min-width:0;line-height:1.25} .topbar-titulo b{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-titulo small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:760px){ .topbar-titulo small{display:none} } /* Em tela estreita o rotulo do botao da Vega sai e fica so a marca dela, o brilho. Sao ~38px devolvidos ao nome da tela, que e a unica coisa do topo que diz onde a pessoa esta. O title e o aria-label ficam. */ @media(max-width:420px){ .topo-lbl{display:none} } /* .tabs/.tab (a barra de abas horizontal) foram removidas: o menu virou sidebar e nada mais usava essas classes. Não confundir com .subtab, que é a abas DENTRO das telas (Financeiro, Histórico) e segue em uso. */ /* Menu lateral (sidebar) */ .sidebar{width:220px;flex-shrink:0;background:var(--side-bg);border-right:1px solid var(--side-line);display:flex;flex-direction:column;padding:12px 0;transition:width var(--ease);position:sticky;top:0;height:100vh;overflow-y:auto} .sidebar.collapsed{width:64px} .sidebar.collapsed .side-item span,.sidebar.collapsed .sidebar-brand span{display:none} .sidebar.collapsed #sidebar-collapse-btn{transform:rotate(180deg)} .sidebar-brand{display:flex;align-items:center;gap:10px;padding:0 16px 14px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--side-text);white-space:nowrap;overflow:hidden} .sidebar-brand-mark{width:26px;height:26px;border-radius:7px;background:var(--brand-dark);color:#fff;display:flex;align-items:center;justify-content:center;font:700 13px var(--font-display);flex-shrink:0} .sidebar-brand-mark b{color:var(--brand-accent2)} .login-card .chunt-wordmark{font:700 30px var(--font-display);color:var(--brand-dark);letter-spacing:-0.5px} .login-card .chunt-wordmark b{color:var(--brand-accent)} .login-card .chunt-full{margin:2px 0 20px} /* Seções do menu. O rótulo some junto com a seção quando o perfil não tem nenhum item dela (sidebarAjustarSecoes) e some sozinho quando a sidebar está recolhida, onde não há largura pra texto. */ .side-group{display:flex;flex-direction:column;margin-bottom:10px} .side-label{padding:0 18px 5px;font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--side-icon);white-space:nowrap;overflow:hidden} .sidebar.collapsed .side-label{visibility:hidden;height:6px;padding:0} /* Sanfona: Gestão/Apoio/Conta abrem no clique do rótulo; Operação é fixa. O item ATIVO de uma seção fechada continua visível — a pessoa precisa ver onde está. No modo ícone (sidebar recolhida ou mobile) não há rótulo pra clicar, então a sanfona é ignorada e tudo aparece. */ .side-label-btn{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;padding:4px 18px 5px} .side-label-btn:hover{color:var(--side-text)} .side-chev{font-style:normal;font-size:9px;transition:transform var(--ease)} .side-group.fechada .side-chev{transform:rotate(-90deg)} .side-group.fechada .side-item{display:none} .side-group.fechada .side-item.active,.side-group.fechada .side-item.btn-topo-ativo{display:flex} .sidebar.collapsed .side-group.fechada .side-item{display:flex} /* Item = pílula recuada das bordas: por isso margin lateral + width auto em vez de width:100%, senão o fundo do item ativo encosta na borda. */ .side-item{display:flex;align-items:center;gap:10px;margin:1px 8px;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:500;color:var(--side-icon);background:transparent;border:0;text-align:left;width:auto;white-space:nowrap;overflow:hidden} /* --------------------------------------------------------------------- O ITEM DO MENU RESPONDE AO MOUSE (07/09/2026) Cresce PRA DIREITA (transform-origin:left), e nao pros dois lados: a pilula fica encostada na borda esquerda e, crescendo do centro, ela invadiria a margem e o texto pularia pro lado errado. O trilho da esquerda e o mesmo desenho da linha da tabela e do item da tela aberta no menu da conta. Terceira vez que aparece: e linguagem, nao enfeite. Sem sombra: em fundo quase preto ela nao aparece, so borra a borda. Quem faz o relevo aqui e o fundo mais claro. --------------------------------------------------------------------- */ .side-item{transform-origin:left center; transition:background-color .16s ease,color .16s ease,transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease} .side-item .side-ico{transition:color .16s ease,transform .16s cubic-bezier(.2,.7,.3,1)} .side-item:hover,.side-item:focus-visible{ background:#1D2A48;color:#FFFFFF;transform:translateX(2px) scale(1.03); box-shadow:inset 3px 0 0 var(--side-active-bg);outline:none} .side-item:hover .side-ico,.side-item:focus-visible .side-ico{color:#6FA8E8;transform:scale(1.08)} .side-item:active{transform:translateX(1px) scale(1)} /* O ATIVO ja e azul cheio: no hover ele so clareia um tom, senao a pessoa perde de vista onde esta enquanto passeia o mouse. */ .side-item.active,.side-item.btn-topo-ativo{background:var(--side-active-bg);color:var(--side-active-fg);font-weight:600} .side-item.active:hover,.side-item.btn-topo-ativo:hover{ background:#3480CE;box-shadow:inset 3px 0 0 #9FC8F2} .side-item.active:hover .side-ico{color:#FFFFFF} /* Quem pediu menos movimento fica com a cor, que e o que informa, e sem o crescimento, que e o que enfeita. */ @media (prefers-reduced-motion:reduce){ .side-item,.side-item .side-ico{transition:none} .side-item:hover,.side-item:focus-visible,.side-item:active{transform:none} .side-item:hover .side-ico{transform:none} } .sidebar.collapsed .side-item{justify-content:center;padding:9px 0;transform-origin:center} .sidebar.collapsed .side-item:hover{transform:scale(1.06)} /* Ícones de linha (SVG, estilo Feather): herdam currentColor do item — cinza-azulado no repouso, branco no ativo. Nada de emoji colorido. */ .side-ico{width:16px;height:16px;flex-shrink:0} .topbar-ico{width:18px;height:18px;display:block} .fab-reportar .fab-ico{width:16px;height:16px;flex-shrink:0} .side-sep{height:1px;background:var(--side-line);margin:8px 16px} /* Card do usuário no pé do menu (nome + e-mail + avatar com iniciais). */ /* O CARTAO DO USUARIO SAIU DAQUI (06/09/2026): nome, e-mail e iniciais subiram pro menu da conta, no alto da tela (.usermenu). As regras foram embora junto com ele. */ .side-collapse{align-self:center;margin-top:8px;width:28px;height:28px;border-radius:50%;border:1px solid var(--side-line);background:var(--side-btn-bg);color:var(--side-text);font-size:14px;display:flex;align-items:center;justify-content:center} /* Hambúrguer do topo (só aparece no mobile) + véu atrás do drawer — padrão PoliNexus: no celular o menu vira gaveta que desliza da esquerda, com rótulos completos, em vez do trilho de ícones mudo. */ .menu-toggle{display:none;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink);padding:6px;margin-left:-4px;flex-shrink:0} .menu-toggle svg{width:22px;height:22px} .side-overlay{display:none;position:fixed;inset:0;background:rgba(11,19,43,.5);z-index:55} .side-overlay.on{display:block} .main-col{flex:1;min-width:0;display:flex;flex-direction:column} /* Mobile: Gestor/Comercial ainda navegam pelo celular (aplicarGateMobile só restringe QUAIS itens aparecem, não bloqueia o app inteiro pra eles) — a sidebar não pode sumir, só fica sempre em modo ícone pra caber. */ @media(max-width:760px){ /* Drawer (padrão PoliNexus): o menu fica FORA da tela e desliza da esquerda pelo botão ☰ do topo — antes era um trilho de 56px só com ícones e sem nenhum botão pra expandir (reportado no iOS). As regras .collapsed são neutralizadas de propósito: o estado "recolhido" salvo no desktop não pode deixar a gaveta sem rótulos. */ .sidebar,.sidebar.collapsed{position:fixed;left:0;top:0;bottom:0;height:100%;width:min(280px,84vw);transform:translateX(-100%);transition:transform var(--ease);z-index:60;box-shadow:0 0 44px rgba(2,8,20,.45);padding-top:calc(12px + env(safe-area-inset-top))} .sidebar.aberta{transform:none} .sidebar.collapsed .side-item span,.sidebar.collapsed .sidebar-brand span{display:inline} .sidebar.collapsed .side-label{visibility:visible;height:auto;padding:0 18px 5px} .sidebar.collapsed .side-label-btn{padding:4px 18px 5px} .sidebar.collapsed .side-item{justify-content:flex-start;padding:9px 10px} .sidebar.collapsed .side-group.fechada .side-item{display:none} .sidebar.collapsed .side-group.fechada .side-item.active,.sidebar.collapsed .side-group.fechada .side-item.btn-topo-ativo{display:flex} .side-collapse{display:none} .menu-toggle{display:flex} /* O safe-area do header (topo cortado no iOS) fica no bloco "===== Mobile (Android/iOS) =====" mais abaixo, que é quem define o padding do header no celular. */ } /* Aviso fixo "atuando como" (impersonação) */ .imperson-banner{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 16px;background:var(--warn);color:#3a2a00;font-size:12.5px;font-weight:600;flex-wrap:wrap} .imperson-banner button{background:#3a2a00;color:#fff;border:0;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer} /* NO CELULAR A FAIXA CABE EM UMA LINHA (17/09/2026). Em 375px ela quebrava em tres e empurrava o trabalho para fora da primeira tela; o texto longo some e fica o essencial: onde voce esta e como sair. */ @media (max-width:760px){ .imperson-banner{flex-wrap:nowrap;gap:8px;padding:0 10px;height:34px;font-size:12.5px; justify-content:flex-start;overflow:hidden} .imperson-banner>span:first-child{flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .imperson-banner b{font-weight:700} .imperson-banner button{flex:0 0 auto;min-height:26px;padding:0 10px} } /* Sino de lembretes (header) */ .sino-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px} /* --------------------------------------------------------------------- O MENU DA CONTA (06/09/2026) Nome e iniciais no canto superior direito, e dentro dele tudo que e da pessoa. E onde esse menu mora em qualquer sistema, e foi o pedido: tirar do menu da esquerda, que e das TELAS, o que e da PESSOA. No celular fica so a bolinha das iniciais: o nome e a seta saem, que e a mesma economia de largura ja feita no rotulo da Vega. --------------------------------------------------------------------- */ .usermenu-wrap{position:relative;display:inline-flex;flex:0 0 auto} .usermenu-btn{display:inline-flex;align-items:center;gap:8px;background:var(--card); border:1px solid var(--line);border-radius:22px;padding:4px 10px 4px 4px;cursor:pointer; font:600 12.5px var(--font-ui);color:var(--ink);min-height:36px; transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease} .usermenu-btn:hover{background:var(--bg);border-color:var(--navy); box-shadow:0 6px 14px -10px rgba(11,42,74,.6)} .usermenu-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px} .usermenu-ava{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:inline-flex; align-items:center;justify-content:center;background:var(--brand-dark);color:#fff; font:700 11px var(--font-display);letter-spacing:.3px} .usermenu-ava.grande{width:40px;height:40px;font-size:14px} .usermenu-nome{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .usermenu-btn .kchev{width:13px;height:13px;flex:0 0 auto;color:var(--muted);transition:transform .18s ease} .usermenu-btn[aria-expanded="true"] .kchev{transform:rotate(180deg)} .usermenu{position:absolute;top:calc(100% + 8px);right:0;width:268px;background:var(--card); border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-md);padding:6px;z-index:60} .usermenu-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px; border-bottom:1px solid var(--line);margin-bottom:6px} .usermenu-head-txt{display:flex;flex-direction:column;min-width:0;gap:2px} .usermenu-head-txt b{font:600 13px var(--font-display);color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .usermenu-head-txt small{font-size:11px;color:var(--muted);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .usermenu-head-txt select{margin-top:4px;max-width:100%} /* A FOTO (426). As iniciais continuam no elemento, debaixo da imagem: tirar a foto e so apagar o background, sem recarregar a tela. */ .usermenu-ava.com-foto{background-size:cover;background-position:center;color:transparent} .usermenu-foto{position:relative;background:none;border:0;padding:0;cursor:pointer; border-radius:50%;flex:0 0 auto;line-height:0} .usermenu-foto:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .usermenu-foto-cam{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center; justify-content:center;background:rgba(11,19,43,.55);color:#fff;opacity:0;transition:opacity .15s ease} .usermenu-foto-cam svg{width:16px;height:16px} .usermenu-foto:hover .usermenu-foto-cam,.usermenu-foto:focus-visible .usermenu-foto-cam{opacity:1} .usermenu-foto-acoes{display:flex;gap:10px;margin-top:5px} .usermenu-foto-link{background:none;border:0;padding:0;font:600 11px var(--font-ui); color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .usermenu-foto-link:hover{color:var(--navy)} .usermenu-foto-link.remover{color:var(--muted)} .usermenu-foto-link.remover:hover{color:var(--red)} @media (prefers-reduced-motion:reduce){ .usermenu-foto-cam{transition:none} } .usermenu-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0; border-radius:8px;padding:8px 9px;font:500 13px var(--font-ui);color:var(--ink); cursor:pointer;text-align:left;transition:background-color .13s ease} .usermenu-item:hover{background:var(--bg)} .usermenu-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px} .usermenu-item svg{width:16px;height:16px;flex:0 0 auto;color:var(--muted)} .usermenu-item:hover svg{color:var(--navy)} .usermenu-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .usermenu-fio{height:1px;background:var(--line);margin:6px 4px} /* O item da tela ABERTA. O .btn-topo-ativo desenha um contorno azul que serve num botao solto do topo e fica estranho dentro de uma lista; aqui ele vira o mesmo trilho a esquerda que a linha da tabela usa. */ .usermenu-item.btn-topo-ativo{outline:none;background:var(--bg); box-shadow:inset 3px 0 0 var(--blue);font-weight:600} /* Sair em vermelho, e so ele: e a unica acao do menu que a pessoa nao desfaz com outro clique. */ #btn-sair-side{color:var(--red)} #btn-sair-side svg{color:var(--red)} #btn-sair-side:hover{background:#fdeeeb} @media (prefers-reduced-motion:reduce){ .usermenu-btn,.usermenu-btn .kchev,.usermenu-item{transition:none} } .sino-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:320px;max-height:60vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-md);padding:8px;z-index:30} .sino-dropdown .lemb-pop-item{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;font-size:12px;color:var(--ink)} .sino-dropdown .lemb-pop-item:last-child{margin-bottom:0} .sino-dropdown .lemb-pop-item:hover{border-color:var(--blue)} /* Sino e popup do bom dia: a etiqueta do ASSUNTO (cor vem por style, uma por categoria) e a urgencia ao lado, em texto. Cor nunca sozinha: quem nao separa as cores le o nome do assunto do mesmo jeito. */ .lemb-topo{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px} .lemb-assunto{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:1px 7px;line-height:1.6;white-space:nowrap} .lemb-nivel{font-size:10.5px;color:var(--muted)} .lemb-nivel.urg{color:var(--red);font-weight:700} /* A legenda do bom dia e FILTRO (13/09/2026): botao por assunto, com a contagem; o ligado fica escuro. 32px de altura para o dedo no celular. */ .lemb-legenda{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .lemb-filtro{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:12px;font-weight:600;line-height:1.2;cursor:pointer} .lemb-filtro i{width:9px;height:9px;border-radius:3px;flex:0 0 auto} .lemb-filtro b{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .lemb-filtro:hover{border-color:var(--blue)} .lemb-filtro[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .lemb-filtro[aria-pressed="true"] b{color:#cfd8e6} .lemb-filtro:focus-visible{outline:2px solid var(--navy);outline-offset:2px} /* A dobra de "inativos" numa lista: linha discreta, que separa sem parecer mais um registro. Serve a Configurações/Hunters e ao Bônus. */ .lst-dobra td{background:var(--bg);border-top:1px solid var(--line);padding:6px 10px} .lst-dobra .btn{padding:3px 10px;font-size:11.5px} /* Prévia da confirmação da entrevista, dentro do card da Agenda. */ .ag-envio-cx{margin-top:10px;border:1px solid var(--blue);border-radius:10px;padding:10px 12px;background:var(--bg)} .ag-envio-tt{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px} .ag-envio-msg{margin:0 0 9px;font-family:inherit;font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word; color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 11px;max-height:240px;overflow:auto} .ag-envio-acoes{display:flex;gap:7px;flex-wrap:wrap} .ag-envio-acoes .btn{padding:6px 12px;font-size:12.5px} /* A tabela "quem recebe o quê" tem 7 colunas: abaixo de 760px elas se espremem e os valores encostam. O wrapper rola de lado nessa faixa; no celular o bloco abaixo troca a tabela por cartões e a rolagem lateral some de vez. */ .bon-tbl{min-width:760px} .bon-tbl-wrap{overflow-x:auto} /* ---- Bônus no celular ------------------------------------------------- Medido em 390px: eram 752px de rolagem antes de chegar em "quem recebe o quê", e a tabela abria 973px dentro da tela, obrigando a arrastar de lado para ler o total de cada pessoa. Duas correções, as duas por CSS (nada de decidir layout no JS: rodar o celular mudaria a largura e o desenho ficaria preso no que foi escolhido na carga). 1. O herói e os cartões encolhem, sem perder nenhum número. 2. A tabela vira um cartão por pessoa. O cabeçalho some e o rótulo de cada coluna volta pelo data-r da célula: sem isso, "R$ 0,00" três vezes seguidas não diz qual é parcela 1 e qual é captação. */ @media(max-width:560px){ .bon-hero{padding:14px 15px;gap:12px;border-radius:14px} .bon-hero .val{font-size:30px;margin:5px 0 5px} .bon-hero .sub{font-size:12px} .bon-hero .sp{display:none} .bon-hero .hero-acoes{width:100%;justify-content:flex-start;gap:6px} .bon-hero .hero-acao{padding:7px 11px;font-size:12px} /* O input nativo de mês não aceita largura pequena em alguns navegadores; min-width:0 destrava o encolhimento dentro do flex. */ .bon-mes{flex:1 1 150px;min-width:0} .bon-mes input{flex:1;min-width:0;width:100%} /* Cartões de indicador: dois por linha, sem rolagem lateral. */ #view-bonus .vgind-wrap{flex-wrap:wrap;overflow-x:visible;gap:8px} #view-bonus .vgind-box{flex:1 1 calc(50% - 4px);width:auto;min-width:0;padding:9px 10px;border-radius:9px} #view-bonus .vgind-big{font-size:19px!important} #view-bonus .vgind-ttl{font-size:9.5px;letter-spacing:.04em} #view-bonus .vgind-box .op3hint{font-size:10.5px;line-height:1.4} /* A tabela vira lista de cartões. */ #view-bonus .bon-tbl-wrap{overflow:visible} #view-bonus .bon-tbl{min-width:0;width:100%;border:0;background:none} #view-bonus .bon-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #view-bonus .bon-tbl tbody tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:11px; padding:10px 12px;margin-bottom:8px} #view-bonus .bon-tbl tbody tr.lst-dobra{padding:0;border:0;background:none;margin-bottom:8px} #view-bonus .bon-tbl tbody tr.lst-dobra td{display:block;background:none;border:0;padding:0} /* .op3tbl td tem white-space:nowrap, que serve a tabela larga e aqui impedia a quebra: a linha ficava do tamanho do texto mais comprido e a tabela abria 732px dentro de 390px. */ #view-bonus .bon-tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:10px; border:0;padding:3px 0;text-align:left!important;font-size:13px; white-space:normal;min-width:0} #view-bonus .bon-tbl td>*{min-width:0} #view-bonus .bon-tbl td[data-r]>*:not(:first-child),.bon-tbl td[data-r]{overflow-wrap:anywhere} /* A primeira célula é o nome: fica em cima, sozinha, como título. */ #view-bonus .bon-tbl td:first-child{display:block;font-size:14.5px;padding:0 0 6px;border-bottom:1px solid var(--line); margin-bottom:6px;white-space:normal} #view-bonus .bon-tbl td[data-r]::before{content:attr(data-r);color:var(--muted);font-size:11px;font-weight:600;flex:0 0 auto} /* Producao tem duas ou tres linhas de texto: lado a lado com o rotulo ela quebra em coluna estreita e fica ilegivel. Aqui o rotulo sobe. */ #view-bonus .bon-tbl td[data-r="Produção no mês"]{display:block} #view-bonus .bon-tbl td[data-r="Produção no mês"]::before{display:block;margin-bottom:2px} #view-bonus .bon-tbl td.bon-total{margin-top:5px;padding-top:6px;border-top:1px solid var(--line)} #view-bonus .bon-tbl td.bon-total::before{color:var(--ink);font-size:12px;font-weight:700} /* Sem dado não vira linha vazia com rótulo pendurado. */ /* A seta e a celula vazia do colspan so fazem sentido na tabela larga: no cartao viram uma linha solta no rodape. */ #view-bonus .bon-tbl td.bon-vazia, #view-bonus .bon-tbl td.bon-seta, #view-bonus .bon-tbl td:not([data-r]):empty{display:none} #view-bonus .bon-tbl td:empty{display:none} } /* ---- Roteiro do acompanhamento (472): a gaveta que conduz o telefonema. Fica no canto, como painel de CRM, porque a pessoa precisa da LISTA e do roteiro ao mesmo tempo: modal por cima esconderia a fila. No celular ela ocupa a tela toda, que e onde a ligacao acontece. z-index 19 e deliberado: FICA ABAIXO do .overlay (20). A gaveta e superficie de trabalho, nao alerta; se um modal abrir enquanto ela esta aberta, e o modal que tem de aparecer. E fica abaixo do menu lateral (60), que no celular precisa abrir por cima dela. */ .rtr-gaveta{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:19;display:flex;flex-direction:column; background:var(--card);border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(16,24,40,.14); animation:rotEntra .22s cubic-bezier(.22,.8,.3,1) both} @keyframes rotEntra{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}} body.rtr-on{overflow-x:hidden} .rtr-topo{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;background:var(--navy);color:#fff} .rtr-marco{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.82} .rtr-quem{font-size:16px;font-weight:700;line-height:1.25;margin-top:1px} .rtr-emp{font-size:11.5px;opacity:.85;margin-top:2px} .rtr-x{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:8px;width:28px;height:28px;font-size:14px;cursor:pointer;flex:0 0 auto} .rtr-x:hover{background:rgba(255,255,255,.26)} .rtr-corpo{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px} .rtr-porque{font-size:12.5px;line-height:1.55;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px} .rtr-trilha{display:flex;align-items:center;gap:6px;justify-content:center} .rtr-trilha i{flex:1;height:2px;background:var(--line);max-width:44px} .rtr-bola{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--muted); font-weight:800;font-size:12px;cursor:pointer;flex:0 0 auto;transition:transform .14s,background .14s,color .14s} .rtr-bola:hover{transform:scale(1.08)} .rtr-bola.on{border-color:var(--blue);color:var(--blue)} .rtr-bola.ok{background:#1f9d55;border-color:#1f9d55;color:#fff} .rtr-progresso{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted)} .rtr-passo{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)} .rtr-passo.aberto{border-color:var(--blue)} .rtr-cab{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;background:none;border:0;cursor:pointer; font-size:13px;font-weight:600;color:var(--ink);font-family:inherit} .rtr-cab:hover{background:var(--bg)} .rtr-cab.ok{color:#1f7a47} .rtr-ico{font-size:15px;flex:0 0 auto} .rtr-selo{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#1f9d55;border:1px solid #1f9d55;border-radius:999px;padding:1px 6px} .rtr-seta{color:var(--muted);font-size:11px} .rtr-dentro{padding:0 11px 11px;display:flex;flex-direction:column;gap:9px; animation:rotAbre .2s ease both} @keyframes rotAbre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .rtr-alvo{display:flex;flex-direction:column;gap:1px;font-size:13px} .rtr-alvo small{color:var(--muted);font-size:11px} .rtr-acoes{display:flex;gap:6px;flex-wrap:wrap} .rtr-acoes .btn{padding:6px 11px;font-size:12px;text-decoration:none;display:inline-flex;align-items:center} .rtr-bloco{border-left:3px solid var(--line);padding-left:9px} .rtr-bloco.alerta{border-left-color:#E8950C} .rtr-rot{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px} .rtr-bloco p{margin:0;font-size:13px;line-height:1.6;color:var(--ink)} .rtr-bloco ol{margin:0;padding-left:18px;font-size:13px;line-height:1.65;color:var(--ink)} .rtr-bloco ol li{margin-bottom:4px} .rtr-aviso{font-size:12px;line-height:1.5;color:#8a5a00;background:#fff6e6;border:1px solid #f3d9a4;border-radius:8px;padding:7px 9px} .rtr-txt{width:100%;font-family:inherit;font-size:13px;line-height:1.5;padding:7px 9px;border:1px solid var(--line);border-radius:8px;resize:vertical;background:var(--card);color:var(--ink)} .rtr-txt:focus{outline:none;border-color:var(--blue)} .rtr-previa{margin:0;font-family:inherit;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px} .rtr-pe{display:flex;gap:7px;padding:10px 14px;border-top:1px solid var(--line);background:var(--bg)} .rtr-pe .btn{padding:8px 12px;font-size:13px} @media(max-width:820px){ .rtr-gaveta{width:100vw;border-left:0} } @media(prefers-reduced-motion:reduce){ .rtr-gaveta,.rtr-dentro{animation:none} .rtr-bola{transition:none} } /* Widget do topo: saudação + relógio/data/clima, visível em toda tela */ /* Relógio/data/clima na topbar — herdeiros da segunda linha eliminada. */ /* O par C-Whats + sino mora num span (o balao do sino pendura nele). Como span inline, os dois botoes QUEBRAVAM em duas linhas quando a engrenagem chegou ao topo e o espaco apertou; em inline-flex eles ficam lado a lado e quem encolhe e o titulo, que tem reticencias. */ .topbar-acoes{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;position:relative} @media(max-width:760px){ .topbar-acoes{gap:2px} } #btn-topo-mais{display:none;position:relative} .gv-curto{display:none} .topo-mais-menu{position:absolute;top:calc(100% + 6px);right:0;width:240px;background:var(--card);border:1px solid var(--line); border-radius:12px;box-shadow:var(--sh-md);padding:6px;z-index:30;display:flex;flex-direction:column;gap:2px} .topo-mais-menu.hidden{display:none} .topo-mais-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:8px; background:transparent;color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer} .topo-mais-menu button:hover,.topo-mais-menu button:focus-visible{background:var(--bg);outline:none} .topo-mais-menu .tm-num{margin-left:auto;background:var(--red);color:#fff;border-radius:10px;padding:1px 8px;font-size:12px} /* min-width:0 e overflow: a REDE DE SEGURANCA. Sem eles, um item `nowrap` nunca encolhe abaixo do proprio conteudo e a barra inteira empurra a pagina para a direita (medido em 10/09/2026: 1436px de rolagem num viewport de 1280). Com eles, o pior caso e o texto cortar, e nao a tela sair do lugar. */ .topbar-info{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap; min-width:0;overflow:hidden;flex-shrink:1} .topbar-info .topo-sep{opacity:.5} .topbar-info #topo-relogio{font-family:var(--font-mono);font-weight:700;color:var(--ink)} /* No celular sobra só o relógio: data por extenso + clima não cabem. */ /* 1400 e nao 900: a conta e do HEADER, nao do viewport. Com o menu lateral aberto (235px), um viewport de 1280 deixa 1045 para a barra, e a data por extenso mais o clima pedem 618 so para elas. So aparecem quando ha espaco de verdade. */ @media(max-width:1400px){ .topbar-info .topbar-info-extra{display:none} } /* Nome comprido na conta tambem nao pode empurrar a barra. */ .usermenu-nome{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Reportar flutuante (padrão PoliNexus). z-index 15 de propósito: ABAIXO do .overlay (20) pra nunca pairar sobre um modal aberto. */ .fab-reportar{position:fixed;right:18px;bottom:18px;z-index:15;display:flex;align-items:center;gap:7px;background:var(--side-bg);color:#fff;border:0;border-radius:24px;padding:12px 20px;font-size:13px;font-weight:600;box-shadow:var(--sh-md);cursor:pointer} .fab-reportar:hover{background:var(--side-hover);box-shadow:var(--sh-lg)} @media(max-width:760px){ .fab-reportar{padding:10px 14px;right:12px;bottom:12px} } /* ===================================================================== A ALTURA DO C·WHATS, EM QUALQUER LARGURA Estas quatro regras viviam dentro do bloco do celular. No computador valia um `height:calc(100vh - 118px)` escrito no proprio elemento — e o 118 era a barra do topo MEDIDA A OLHO. A barra tem 57px, entao sobravam 61px de faixa morta embaixo do quadro. Ninguem via, porque era exatamente ali que o botao Reportar flutuava. Ficou visivel quando a conexao do C·Whats virou um rodape dentro do iframe: passaram a existir DUAS faixas, o rodape e a sobra, e o Reportar numa e o "Conectado" na outra. O pedido de por os dois na mesma linha e, na verdade, o pedido de acabar com a sobra. Sem conta de altura: com a aba ativa o body trava em 100dvh e o quadro estica por flex (o .main-col ja e coluna flex). As outras abas nao mudam — a classe so existe enquanto o C·Whats esta aberto. A corrente inteira precisa de altura: body -> #app -> .main-col. Sem o #app fixado, o height:100% do filho cai no vazio e o view colapsa pro tamanho do conteudo (aconteceu: 154px). ===================================================================== */ /* --------------------------------------------------------------------- TELA DE QUADRO (07/09/2026) Kanban e funil do CRM ocupam a janela inteira. A barra de rolagem horizontal do quadro passa a ficar no PE DA TELA, a vista, em vez de no pe de um quadro mais alto que a janela — que obrigava a rolar a pagina pra baixo (e perder o topo) antes de poder andar pras colunas da direita. Flex, e nao aritmetica: o `min-height:calc(100vh - 120px)` do #board era um chute sobre a altura do topo mais a barra de ferramentas, e essa altura mudou tres vezes so nesta semana. Aqui o quadro estica pelo que sobrar, seja quanto for. So no modo QUADRO. Em Lista a pagina volta a rolar normalmente, porque lista comprida e pra rolar mesmo. --------------------------------------------------------------------- */ body.aba-quadro{height:100dvh;overflow:hidden} body.aba-quadro #app{height:100dvh} body.aba-quadro .main-col{height:100%;min-height:0} body.aba-quadro #view-kanban,body.aba-quadro #view-capta{ flex:1 1 auto;min-height:0;display:flex;flex-direction:column} /* O que NAO e o quadro (barra de ferramentas, heroi, sub-abas) fica no tamanho natural; so o quadro estica. */ body.aba-quadro #view-kanban>*:not(#board), body.aba-quadro #view-capta>*:not(.crm-area){flex:0 0 auto} /* No CRM o quadro vem dentro de um bloco (titulo do funil + quadro): quem estica e o bloco, e o quadro estica dentro dele. */ body.aba-quadro #view-capta>.crm-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column} body.aba-quadro .crm-area>*:not(.crm-board){flex:0 0 auto} body.aba-quadro #board,body.aba-quadro .crm-board{ flex:1 1 auto;min-height:0;height:auto;overflow-y:hidden} /* Vence o min-height de 100vh-120px, que e o que empurrava a barra pra fora da janela. */ body.aba-quadro #board{min-height:0} body.aba-quadro .col,body.aba-quadro .crm-col{max-height:100%} body.aba-cwhats{height:100dvh;overflow:hidden} body.aba-cwhats #app{height:100dvh} body.aba-cwhats .main-col{height:100%;min-height:0} body.aba-cwhats #view-cwhats{flex:1 1 auto;height:auto !important;min-height:0 !important} /* Caixa de saudação do dia — uma vez por dia, some sozinha em 12s. */ .sauda-card{position:fixed;top:64px;right:18px;z-index:15;max-width:340px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:12px;padding:14px 36px 14px 16px;box-shadow:var(--sh-lg)} .sauda-card .sauda-titulo{font-weight:700;color:var(--ink);font-size:13.5px} .sauda-card .sauda-frase{font-size:12px;font-style:italic;color:var(--muted);margin-top:4px;line-height:1.5} .sauda-card .sauda-fechar{position:absolute;top:8px;right:8px;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:12px;line-height:1} .sauda-card .sauda-fechar:hover{background:var(--bg);color:var(--ink)} @media(max-width:760px){ .sauda-card{left:12px;right:12px;max-width:none} } /* Board */ #board{display:flex;gap:14px;padding:16px;overflow-x:auto;overflow-y:hidden;align-items:flex-start;min-height:calc(100vh - 120px);scroll-padding-left:16px} #board::-webkit-scrollbar{height:10px} #board::-webkit-scrollbar-thumb{background:#c3d2e0;border-radius:6px} #board::-webkit-scrollbar-track{background:transparent} /* Fundo da coluna: cor própria (não var(--side-bg)) — essa variável virou "sempre escura" pro menu lateral (ver comentário em :root), e o Kanban não deve herdar isso; o tema escuro já tem seu próprio override abaixo. */ .col{background:#F4F5F7;border:1px solid var(--line);border-radius:var(--r-lg);flex:1 1 320px;min-width:290px;max-width:380px;display:flex;flex-direction:column;max-height:calc(100vh - 150px);transition:max-width var(--ease),min-width var(--ease)} .col h3{margin:0;padding:11px 12px;font-size:13px;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line)} .col h3 .htxt{display:flex;flex-direction:column;gap:1px;min-width:0} .col h3 .kicker{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);opacity:.85} .col h3 .lbl{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .col h3 .right{display:flex;align-items:center;gap:6px;flex:0 0 auto} .col h3 .n{background:var(--navy);color:#fff;border-radius:10px;padding:2px 9px;font-size:11px;font-weight:700} .col .collapse-btn{background:transparent;border:1px solid var(--line);color:var(--muted);width:22px;height:22px;border-radius:6px;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .col .collapse-btn:hover{background:#fff;color:var(--navy)} .col .drop{padding:8px;overflow-y:auto;flex:1;min-height:40px} .col.dragover .drop{background:#d3e2f2;outline:2px dashed var(--blue)} .col.collapsed{min-width:168px;max-width:168px} .col.collapsed .drop,.col.collapsed .addcard{display:none} .col.collapsed h3 .lbl{max-width:90px} .card{position:relative;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r-md);padding:10px 12px 20px;margin-bottom:8px;cursor:grab;box-shadow:var(--sh-sm);transition:box-shadow .15s,transform .15s} .card-idvaga{position:absolute;right:10px;bottom:6px;font-family:var(--font-mono);font-size:10px;color:var(--muted);font-weight:600} .card:active{cursor:grabbing} .card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)} .card:focus-visible{outline:2px solid var(--blue-l);outline-offset:2px} .card-head{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px} .card-sel-mode{cursor:pointer} .card-selected{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-l)} .card-chk{font-size:15px;line-height:1;flex:0 0 auto;color:var(--blue)} .card-rev-chk{font-size:15px;line-height:1;flex:0 0 auto;color:var(--muted);cursor:pointer;padding:1px} .card-rev-chk.on{color:var(--ok)} .card.card-revisado{opacity:.72} #btn-kanban-sel.on{background:var(--blue);color:#fff} /* z-index 18: acima do conteudo e do .fab-reportar (15), porem ABAIXO do .overlay (20). Estava em 60 e flutuava por cima de modal aberto — e como ela mora no rodape, no celular caia justo nos botoes do .foot, o mesmo jeito que o .toast quebrou o Cancelar em 16/08/2026. */ .kanban-sel-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:18;background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(0,0,0,.25);flex-wrap:wrap;max-width:92vw} .kanban-sel-bar select{padding:6px 8px;border-radius:6px;border:1px solid var(--line);font-size:12px} .sem-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;flex:0 0 auto} .sem-dot.sem-vencida,.sem-dot.sem-urgente{background:var(--red)} .sem-dot.sem-alerta{background:var(--warn)} .sem-dot.sem-inicio{background:var(--ok)} .card .t{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--navy);line-height:1.3;flex:1 1 auto;min-width:0;overflow-wrap:break-word} .card-head .tag.periodo{flex:0 0 auto;margin-top:1px} .card .sub{font-size:12px;color:var(--muted);margin-bottom:2px} .card .tags{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .card .tags-meta{margin-top:4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .card-cand{margin-top:4px;font-size:11px;color:#1e7a46;background:#e9f6ee;border:1px solid #c9e9d5;border-radius:10px;padding:3px 8px;line-height:1.4;overflow-wrap:break-word} .card-match{margin-top:4px;font-size:11px;font-weight:700;color:var(--navy);background:#eaf1f8;border:1px solid #d5e3f2;border-radius:10px;padding:3px 8px;line-height:1.4;overflow-wrap:break-word} .tag{font-size:10.5px;padding:2px 8px;border-radius:20px;background:#eaf1f8;color:var(--navy);border:1px solid #d5e3f2;font-weight:600;line-height:1.5} .tag.id{font-family:var(--font-mono);background:transparent;color:var(--muted);border-color:var(--line);font-weight:600} .tag.nivel{background:#e9f6ee;color:#1e7a46;border-color:#c9e9d5} .tag.hunter{background:#fdf1e3;color:#9a6412;border-color:#f2ddba} /* Cores por valor — Origem e Comercial responsável (pedido do usuário) */ .tag.origem-reativado{background:#4a2172;color:#fff;border-color:#4a2172} .tag.origem-clientenovo{background:#e3f7ea;color:#1e7a46;border-color:#c9e9d5} .tag.fonte-carteira{background:#e3f7ea;color:#1e7a46;border-color:#c9e9d5} .tag.fonte-docsrp{background:#f1e6fb;color:#7c3fae;border-color:#e3cdf5} .tag.fonte-gestor{background:#E8950C;color:#fff;border-color:#E8950C} .tag.hunter-1,.meta-lo.hunter-1{background:#ffd9e8;color:#9a1f52;border-color:#f7bcd6} .tag.hunter-2,.meta-lo.hunter-2{background:#fff2b8;color:#8a6d00;border-color:#f2e08a} .tag.hunter-3,.meta-lo.hunter-3{background:#1c3f66;color:#fff;border-color:#1c3f66} .meta-lo.hunter-1,.meta-lo.hunter-2,.meta-lo.hunter-3{padding:2px 7px;border-radius:6px;border:1px solid transparent;font-weight:600} .meta-lo{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px} .meta-lo.warn{color:#a85b1a;font-weight:700} /* CARD COM PONTA SOLTA — fundo laranja pra pular aos olhos. Vale pro que não tem hunter responsável e pro que não teve as boas-vindas com a empresa: são a mesma pendência, do mesmo dono e no mesmo momento do funil, e mereciam a mesma cor (07/09/2026). O aviso escrito dentro do card continua ali — a cor nunca carrega o recado sozinha, e quem não distingue laranja de branco lê o "⚠ Falta boas-vindas" do mesmo jeito. A borda esquerda mais forte e o fundo mais quente que o do card normal são o que faz o cartão ser achado de longe, rolando a coluna. */ .card.need-hunter,.card.card-falta{background:#fff2e2;border-left-color:#e8950c} /* Na visao Lista nao precisa de regra propria: .card.klist-row ja usa border-left de 3px, e a cor acima pinta ela de ambar do mesmo jeito. Conferido no navegador: a linha com pendencia sai com a borda em rgb(232,149,12) e a linha completa em azul. */ .addcard{width:100%;background:transparent;border:1px dashed var(--blue);color:var(--blue);border-radius:var(--r-md);padding:8px;font-weight:600;font-size:12px} .addcard:hover{background:rgba(46,123,196,.08)} .board-skel{color:var(--muted);font-size:13px;padding:24px;width:100%;text-align:center} /* Modal */ .overlay{position:fixed;inset:0;background:rgba(11,42,74,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20} .modal{background:#fff;border-radius:14px;width:640px;max-width:100%;max-height:92vh;display:flex;flex-direction:column} .modal header{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);border-radius:14px 14px 0 0} .modal .body{padding:16px;overflow-y:auto} .grp{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px} .grp h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--blue)} /* 12 colunas: cada campo pede a largura do dado que guarda (--sp, padrao 6 = metade). O JS fecha as linhas, entao nao sobra buraco. */ .fields{display:grid;grid-template-columns:repeat(12,1fr);gap:10px 12px} .f{display:flex;flex-direction:column;grid-column:span var(--sp,6)} .cursos-pret-linha{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .disp-strip{display:flex;flex-wrap:wrap;gap:6px} .disp-dia{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:52px;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-size:11px;gap:1px;background:#fff} .disp-dia .disp-dow{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:600} .disp-dia .disp-num{font-weight:700;color:var(--navy);font-size:12px} .disp-dia .disp-cnt{font-size:9px;color:var(--muted)} .disp-dia.disp-ok{border-color:var(--ok);background:#e9f6ee} .disp-dia.disp-parcial{border-color:var(--warn);background:#fdf3d9} .disp-dia.disp-full{border-color:var(--red);background:#fdeeeb} .disp-dia.disp-off{border-color:var(--line);background:#f2f4f7;color:var(--muted);cursor:default;opacity:.55} .disp-dia.disp-off .disp-num,.disp-dia.disp-off .disp-dow{color:var(--muted)} .f.full{grid-column:span 12} /* COMPARTILHAR VAGA, agrupado por destinatario (06/09/2026). Cada grupo tem um rotulo curto e os botoes numa faixa que quebra por conta propria. Antes eram seis controles numa linha so, com o seletor de sigilo espremido a "Sigi" e um vazio a direita. */ /* Meu RH (MOD-19), Fase 2: a faixa de vencimentos e os selos que faltavam. */ .st-pend{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#FEF0C7;color:#B54708} .st-info{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#EAECF0;color:#475467} .rh-alertas{display:flex;flex-direction:column;gap:6px} .rh-alerta{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font:inherit;color:var(--ink)} .rh-alerta:hover{border-color:var(--navy)} .rh-alerta-nivel{flex-shrink:0;min-width:74px;text-align:center} .rh-alerta-txt{font-size:12.5px;line-height:1.35;min-width:0} /* Meu RH (MOD-19), Fase 1: a lista de recursos com interruptor. */ .rh-recs{display:flex;flex-direction:column;gap:8px} .rh-rec{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)} .rh-rec-off{opacity:.7} .rh-rec-nome{font-weight:700;font-size:13.5px;color:var(--ink)} .rh-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px} .rh-sw{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0} .rh-sw input{opacity:0;width:0;height:0} .rh-sw span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s ease;cursor:pointer} .rh-sw span::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease} .rh-sw input:checked + span{background:var(--navy)} .rh-sw input:checked + span::after{transform:translateX(18px)} .rh-sw input:disabled + span{cursor:not-allowed;opacity:.5} .rh-sw input:focus-visible + span{outline:2px solid var(--navy);outline-offset:2px} /* O botao que abre a divulgacao. Roxo #6B4FC4, o mesmo da Vega: e a cor que a casa ja usa para "isto faz alguma coisa acontecer", e distingue esta acao dos campos de cadastro em volta. */ #cv-bloco{margin-bottom:12px} .cv-abre{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border-radius:10px; border:1px solid #6B4FC4;background:#6B4FC4;color:#fff;cursor:pointer;font:inherit;font-weight:700;font-size:13px; transition:background .15s ease} .cv-abre:hover{background:#5B41AD;border-color:#5B41AD} .cv-abre.on{border-bottom-left-radius:0;border-bottom-right-radius:0} .cv-abre-ico{font-size:15px;line-height:1} .cv-abre-txt{flex:1;text-align:left} .cv-abre-seta{font-size:11px;opacity:.9} .cv-painel{border:1px solid #6B4FC4;border-top:0;border-radius:0 0 10px 10px;padding:0 12px 12px} /* Divulgar e compartilhar em sanfona (10/09/2026): uma linha por caminho, com a frase do que ele faz. */ /* Candidatura esperando: selo no card e faixa no topo do quadro. */ .card-pend{margin-top:6px;font-size:11px;font-weight:700;color:#8a5a06;background:rgba(229,164,0,.16);border-radius:8px;padding:3px 8px;display:inline-block} .kanban-aviso{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:1px solid var(--warn);background:rgba(229,164,0,.09);border-radius:10px} .kanban-aviso .ka-ico{font-size:18px} .kanban-aviso .ka-txt{flex:1;min-width:180px;display:grid;gap:1px} .kanban-aviso .ka-txt b{font-size:13px;color:var(--ink)} .kanban-aviso .ka-txt small{font-size:11.5px;color:var(--muted)} /* NOVO 8: a faixa dos alertas do funil. Mesma caixa, cor de atencao (nao de aviso), e os botoes por tipo quebram linha no celular. */ .kanban-aviso-oper{border-color:#c0392b;background:rgba(192,57,43,.06)} .kanban-aviso .ka-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%} .kanban-aviso .ka-chip{padding:5px 10px;font-size:12px;white-space:nowrap} .kanban-aviso .ka-chip b{font-size:13px} /* Recolhida por hoje: uma linha fina com o alerta, e o quadro sobe (13/09/2026). A linha inteira e o botao de abrir. */ .kanban-aviso.ka-fina{width:100%;padding:5px 12px;gap:8px;flex-wrap:nowrap;font:inherit;text-align:left;cursor:pointer;color:var(--ink);min-height:32px} .kanban-aviso.ka-fina .ka-ico{font-size:14px} .ka-fina-txt{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ka-fina-txt b{font-weight:700} .ka-fina-abrir{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap} .ka-recolher{border:0;background:transparent;cursor:pointer;padding:6px 4px;min-height:32px;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap} .ka-recolher:hover,.kanban-aviso.ka-fina:hover .ka-fina-abrir{color:var(--ink)} .ka-recolher:focus-visible,.kanban-aviso.ka-fina:focus-visible{outline:2px solid var(--navy);outline-offset:2px} /* A faixa do hunter e a nota da agencia na aba Rede (13/09/2026). Cartao claro abaixo do heroi; o que pesa contra fica em vermelho. */ .rbf,.cna{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px;display:grid;gap:10px} .rbf-topo{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-end;justify-content:space-between} .rbf-rot,.cna-titulo{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .rbf-atual{display:grid;gap:1px} .rbf-atual b{font:700 20px var(--font-display);color:var(--ink)} .rbf-lim{font-size:13px;color:var(--ink);display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline} .rbf-lim small{flex:1 1 100%;color:var(--muted);font-size:11.5px} .rbf-alerta{background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.35);border-radius:9px;padding:8px 10px;font-size:12.5px;color:var(--ink)} .rbf-bloco{font-size:13px;color:var(--ink)} .rbf-bloco small{color:var(--muted);font-size:11.5px} .rbf-bloco ul{margin:6px 0 4px;padding-left:18px} .rbf-bloco li{margin:3px 0} .rbf-bloco p{margin:6px 0 0;color:var(--muted);font-size:12.5px} .rbf-bloco ul.rbf-eventos{list-style:none;padding-left:0;display:grid;gap:4px} .rbf-eventos li{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:8px;background:var(--bg);margin:0} .rbf-eventos li b{font-variant-numeric:tabular-nums} .rbf-eventos li.tem{background:rgba(192,57,43,.08);color:#8f2a1f} .rb-nota-ag{font-size:12px;color:var(--muted);margin:4px 0 2px} .rb-nota-ag b{color:var(--ink)} .rb-nota-ag.baixa b{color:#b03024} .cna-linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .cna-num{display:flex;align-items:baseline;gap:4px} .cna-num b{font:700 32px var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums} .cna-num span{font-size:12px;color:var(--muted)} .cna-txt{display:grid;gap:2px;flex:1;min-width:180px} .cna-rot{font:700 16px var(--font-display);color:var(--ink)} .cna-txt small{font-size:12px;color:var(--muted)} .cna-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px} .cna-metricas div{background:var(--bg);border-radius:9px;padding:7px 9px;display:grid;gap:1px;min-width:0} .cna-metricas small{font-size:11px;color:var(--muted)} .cna-metricas b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums} .cna-eventos{font-size:13px;color:var(--ink)} .cna-eventos ul{margin:6px 0;padding-left:0;list-style:none;display:grid;gap:4px} .cna-eventos li{display:flex;gap:8px;font-size:12.5px} .cna-eventos li span{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} .cna-eventos p{margin:6px 0;color:var(--muted);font-size:12.5px} .cna-acoes{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px} .ka-lista{display:grid;gap:6px;max-height:min(60vh,520px);overflow:auto} .ka-linha{display:grid;gap:2px;text-align:left;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer;font:inherit;color:var(--ink)} .ka-linha:hover{border-color:var(--navy)} .ka-linha b{font-size:13px} .ka-linha small{font-size:11.5px;color:var(--muted)} .cv-item{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--card);overflow:hidden} .cv-item.on{border-color:var(--brand)} .cv-cab{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit} .cv-cab:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)} .cv-ico{flex:0 0 auto;font-size:16px;line-height:1.2} .cv-txt{flex:1;min-width:0;display:grid;gap:2px} .cv-txt b{font-size:13px;color:var(--ink)} .cv-txt small{font-size:11.5px;color:var(--muted);line-height:1.45} .cv-seta{flex:0 0 auto;color:var(--muted);font-size:12px;margin-top:2px} .cv-corpo{padding:0 12px 12px;border-top:1px solid var(--line)} .cv-corpo>*:first-child{margin-top:10px} .cv-grupo{margin-top:12px} .cv-rot{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px} .cv-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch} .cv-acoes .btn{flex:0 1 auto} /* O sigilo e MODIFICADOR do botao de copiar texto, e nao um irmao dele: fica na linha de baixo, em texto corrido, com o seletor no meio da frase. */ .cv-sigilo-linha{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:12px;color:var(--muted)} /* min-width folgado: no celular a regra de acessibilidade sobe todo select para 16px (o Safari da zoom abaixo disso e nao volta), e o que cabia em 104px passa a cortar a ultima letra. */ .cv-sigilo-linha select{width:auto;min-width:150px;padding:4px 8px;font-size:12px} /* O `padding:` acima come o espaco da seta do select, que a folha reserva com padding-right. Devolver DEPOIS, e nao no atalho, e o que o verificar-seta-select.js cobra: no atalho, qualquer ajuste futuro no lado esquerdo apagaria a seta de novo sem aviso. */ .cv-sigilo-linha select{padding-right:28px} @media(max-width:760px){ /* No celular cada acao ocupa a linha inteira: botao de meia linha ao lado de outro deixa os dois com o texto cortado. */ .cv-acoes .btn{flex:1 1 100%} } .f label{font-size:11px;color:var(--muted);margin-bottom:3px} .f input,.f select,.f textarea{padding:8px;border:1px solid var(--line);border-radius:7px;width:100%} .f.campo-faltando label{color:var(--red);font-weight:700} .f.campo-faltando input,.f.campo-faltando select,.f.campo-faltando textarea{background-color:#fdeceb;border-color:var(--red)} .modal .foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end} /* ===== MOD-20: painel de regras do bonus (prefixo bnr-) ===== Duas colunas: a navegacao com as secoes que AQUELA PESSOA ve (quem nao e hunter nao ve a regra do hunter) e o conteudo, que entra escalonado. No celular a navegacao vira uma faixa rolavel no topo. O escalonamento nao e enfeite: ele guia o olho na ordem em que a regra deve ser lida, que e a ordem em que ela se aplica. */ /* O icone de atualizar girando enquanto a tela carrega. */ #btn-atualizar.girando .topbar-ico{animation:atzGira .7s linear infinite} @keyframes atzGira{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ #btn-atualizar.girando .topbar-ico{animation:none;opacity:.5} } .bnr-modal{width:min(900px,96vw)} .bnr-modal .body{padding:0;display:flex;max-height:min(70vh,600px);overflow:hidden} .bnr-nav{flex:0 0 196px;border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px; background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 7%,transparent),transparent 60%)} .bnr-tab{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:transparent; border:1px solid transparent;border-radius:10px;padding:10px 11px;font:inherit;font-size:13px;font-weight:600; color:var(--muted);cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease} .bnr-tab:hover{background:var(--card);color:var(--ink)} .bnr-tab:active{transform:scale(.985)} .bnr-tab.on{background:var(--card);border-color:var(--line);color:var(--navy);box-shadow:0 1px 3px rgba(11,19,43,.09)} .bnr-tab .bnr-ico{font-size:16px;line-height:1.2;flex:0 0 auto} .bnr-tab small{display:block;font-weight:500;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35} .bnr-corpo{flex:1;min-width:0;overflow:auto;padding:18px 22px 22px} .bnr-sec{display:none} .bnr-sec.on{display:block} .bnr-h{font-size:17px;font-weight:800;color:var(--ink);margin:0 0 3px;letter-spacing:-.2px} .bnr-sub{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.5} .bnr-item{opacity:0;transform:translateY(7px);animation:bnrEntra .32s cubic-bezier(.2,.75,.3,1) forwards; animation-delay:calc(var(--i,0) * 45ms)} @keyframes bnrEntra{to{opacity:1;transform:none}} .bnr-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:var(--card)} .bnr-card b.t{display:block;font-size:13.5px;margin-bottom:3px;color:var(--ink)} .bnr-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.55} .bnr-card p + p{margin-top:7px} .bnr-card.dest{border-left:3px solid var(--navy)} .bnr-card.aviso{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 6%,var(--card))} .bnr-card.bom{border-left:3px solid var(--ok);background:color-mix(in srgb,var(--ok) 5%,var(--card))} .bnr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:0 0 10px} .bnr-grid .bnr-card{margin:0} .bnr-num{font-size:22px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.15} .bnr-faixas{display:grid;gap:6px;margin:0 0 10px} .bnr-faixa{display:flex;align-items:center;gap:10px;font-size:13px;position:relative;padding:8px 11px;border-radius:9px; background:var(--bg);overflow:hidden} .bnr-faixa i{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--navy) 13%,transparent); animation:bnrBarra .55s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(var(--i,0) * 60ms + 130ms)} @keyframes bnrBarra{to{width:var(--w,0%)}} .bnr-faixa span{position:relative;flex:1;color:var(--ink)} .bnr-faixa b{position:relative;font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap} .bnr-faixa.zero b{color:var(--muted)} .bnr-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px; background:color-mix(in srgb,var(--navy) 11%,transparent);color:var(--navy);white-space:nowrap} .bnr-passos{display:grid;gap:9px;counter-reset:bnr;margin:0 0 10px} .bnr-passo{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.55} .bnr-passo::before{counter-increment:bnr;content:counter(bnr);flex:0 0 22px;height:22px;border-radius:50%; background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px} .bnr-passo b{color:var(--ink)} .bnr-lista{display:grid;gap:7px;margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.55} .bnr-lista div{display:flex;gap:9px;align-items:flex-start} .bnr-lista div::before{content:'✓';color:var(--ok);font-weight:700;flex:0 0 auto;margin-top:1px} .bnr-lista.nao div::before{content:'×';color:var(--red)} .bnr-rodape{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;font-size:12px;color:var(--muted);line-height:1.5} @media(max-width:700px){ .bnr-modal .body{flex-direction:column;max-height:none} .bnr-nav{flex:0 0 auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px;gap:6px} .bnr-tab{width:auto;white-space:nowrap;flex:0 0 auto;align-items:center} .bnr-tab small{display:none} .bnr-corpo{padding:14px 15px 18px} } @media(prefers-reduced-motion:reduce){ .bnr-item{animation-duration:.01ms;animation-delay:0ms} .bnr-faixa i{animation:none;width:var(--w,0%)} } /* 526: o roxo da indicacao de empresa. Uma cor so para o assunto, na aba, nos botoes, no guia e no CRM, para a pessoa reconhecer sem ler. */ .btn.rb-roxo{background:#6B4FD8;border-color:#6B4FD8;color:#fff} .btn.sec.rb-roxo{background:color-mix(in srgb,#6B4FD8 10%,var(--card));border-color:color-mix(in srgb,#6B4FD8 38%,transparent);color:#5b3fc4} .btn.hero-acao.rb-roxo{background:#6B4FD8;border-color:#8b74e6;color:#fff} .bnr-chip.rb-roxo-chip{background:color-mix(in srgb,#6B4FD8 13%,transparent);color:#5b3fc4} /* 528: a prioridade da indicacao na vaga, com o relogio. O pulso na borda e o "tempo correndo" sem precisar de numero piscando. */ .rb-prio{display:flex;gap:7px;align-items:flex-start;margin:6px 0 4px;padding:8px 10px;border-radius:9px;font-size:12.5px; line-height:1.45;color:#5b3fc4;background:color-mix(in srgb,#6B4FD8 9%,var(--card)); border:1px solid color-mix(in srgb,#6B4FD8 30%,transparent);animation:rbPrioPulso 2.6s ease-in-out infinite} .rb-prio b{font-variant-numeric:tabular-nums} /* 530: a caixa do aditivo no pe do guia. Empurra os botoes para a direita e quebra linha no celular, em vez de espremer o texto. */ .bnr-modal .foot{flex-wrap:wrap} .rig-aditivo{display:flex;gap:8px;align-items:flex-start;margin-right:auto;max-width:440px; font-size:12.5px;line-height:1.45;color:var(--ink);cursor:pointer} .rig-aditivo input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:#6B4FD8} @keyframes rbPrioPulso{0%,100%{box-shadow:0 0 0 0 rgba(107,79,216,0)}50%{box-shadow:0 0 0 4px rgba(107,79,216,.14)}} @media(prefers-reduced-motion:reduce){.rb-prio{animation:none}} /* O convite do Plano Hunter, no padrao premium das Regras do bonus. */ .pln-modal{width:min(560px,94vw);overflow:hidden} .pln-heroi{position:relative;overflow:hidden;padding:22px 22px 18px;color:#fff; background:linear-gradient(135deg,#0B132B 0%,#1d2f6f 58%,#6B4FD8 135%)} .pln-brilho{position:absolute;inset:-40% -20%;pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%); transform:translateX(-70%);animation:plnBrilho 3.4s ease-in-out infinite} @keyframes plnBrilho{0%{transform:translateX(-70%)}60%,100%{transform:translateX(70%)}} .pln-chip{background:rgba(255,255,255,.14);color:#fff;position:relative} .pln-titulo{position:relative;font:800 20px/1.25 var(--font-display);margin:10px 0 8px;letter-spacing:-.3px; opacity:0;transform:translateY(6px);animation:bnrEntra .4s .05s cubic-bezier(.2,.75,.3,1) forwards} .pln-preco{position:relative;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; opacity:0;transform:translateY(6px);animation:bnrEntra .4s .16s cubic-bezier(.2,.75,.3,1) forwards} .pln-preco b{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums} .pln-preco span{font-size:12.5px;opacity:.85} .pln-modal .body.pln-corpo{padding:16px 18px 6px} .pln-msg{margin:0 0 12px;font-size:13.5px;color:var(--ink);line-height:1.55} .bnr-card.pln-abre{border-left:3px solid #6B4FD8;background:color-mix(in srgb,#6B4FD8 5%,var(--card))} .bnr-lista.pln-estrela div::before{content:'★';color:#6B4FD8} .btn.pln-cta{background:#6B4FD8;border-color:#6B4FD8;color:#fff} @media(prefers-reduced-motion:reduce){ .pln-brilho{animation:none;display:none} .pln-titulo,.pln-preco{animation:none;opacity:1;transform:none} } /* ===== 512: a trilha da vaga (trl-) e a ficha do candidato (qlf-) ===== Quem entra na rede e um estudante que nunca recrutou. A fita de cinco passos e a resposta visual para a unica pergunta que ele tem o tempo todo: "e agora, o que eu faco?". */ .trl{margin:10px 0 2px;padding:10px 12px;border-radius:12px; background:color-mix(in srgb,var(--navy) 4%,transparent);border:1px solid var(--line)} .trl-fita{display:flex;align-items:center;gap:0;margin-bottom:9px} .trl-p{flex:0 0 auto;width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;background:var(--card);border:1.5px solid var(--line);color:var(--muted); transition:transform .18s ease} .trl-l{flex:1 1 auto;height:2px;background:var(--line);min-width:6px} .trl-p.ok{background:var(--ok);border-color:var(--ok);color:#fff} .trl-l.ok{background:var(--ok)} /* O PASSO ATUAL PULSA. Sem isso a fita e um enfeite: com isso ela aponta. */ .trl-p.agora{background:var(--navy);border-color:var(--navy);color:#fff;transform:scale(1.18); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 16%,transparent)} .trl-agora{font-size:13px;line-height:1.5;color:var(--ink)} .trl-agora b{display:block;font-size:13.5px;margin-bottom:1px} .trl-agora span{color:var(--muted);font-size:12.5px} .trl-premio{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line); font-size:12.5px;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums} .trl-premio.fim{color:var(--navy)} /* A ficha. Uma pergunta por cartao, e a resposta em dois botoes do tamanho do polegar: ele esta com o telefone na orelha. */ .qlf-modal{width:min(640px,96vw)} .qlf-modal .body{padding:0;max-height:min(74vh,660px);overflow:auto} .qlf-topo{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--navy);color:#fff} .qlf-topo b{display:block;font-size:15px} .qlf-topo span{font-size:12px;color:#A9BCDF} /* A ficha da pessoa, no alto do modal: e o que ele le antes de perguntar qualquer coisa. */ .qlf-pessoa{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)} .qlf-pl{font-size:13px;color:var(--muted);line-height:1.55} .qlf-pl.forte{color:var(--ink);font-weight:600} .qlf-disc{margin-top:10px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--card)} .qlf-disc.vazio{font-size:12px;color:var(--muted);line-height:1.55;background:transparent;border-style:dashed} .qlf-disc-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:9px} .qlf-disc-top b{font-size:16px;color:var(--navy);letter-spacing:-.2px} .qlf-disc-top span{font-size:11.5px;color:var(--muted)} .qlf-barras{display:grid;gap:6px} .qlf-barras div{display:flex;align-items:center;gap:9px;font-size:12px} .qlf-barras span{flex:0 0 92px;color:var(--muted)} .qlf-barras i{flex:1;height:7px;background:var(--line);border-radius:4px;overflow:hidden} .qlf-barras i b{display:block;height:100%;background:var(--navy)} .qlf-barras em{flex:0 0 30px;text-align:right;font-style:normal;font-weight:700;color:var(--navy); font-variant-numeric:tabular-nums} .qlf-textos{margin-top:10px;display:grid;gap:8px} .qlf-textos div{font-size:12.5px;color:var(--muted);line-height:1.55} .qlf-textos b{display:block;font-size:11.5px;color:var(--ink);font-weight:700} .qlf-lista{padding:14px 16px;display:grid;gap:10px} .qlf-q{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--card)} .qlf-q.resp{border-left:3px solid var(--ok)} .qlf-q.nao{border-left:3px solid var(--red)} .qlf-q p{margin:0 0 3px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.45} .qlf-q small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:9px} .qlf-sn{display:flex;gap:8px} .qlf-sn button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--line);background:var(--card); font:600 13.5px inherit;color:var(--muted);cursor:pointer;transition:all .14s ease} .qlf-sn button:active{transform:scale(.97)} .qlf-sn button.on{background:var(--ok);border-color:var(--ok);color:#fff} .qlf-sn button.on.nao{background:var(--red);border-color:var(--red)} .qlf-campos{display:grid;grid-template-columns:1fr 1fr;gap:8px} .qlf-campos label{font-size:11.5px;font-weight:600;color:var(--muted);display:block;margin-bottom:3px} .qlf-campos input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.5px} .qlf-campos .wide{grid-column:1 / -1} /* A conta do transporte: e o achado da tela, e por isso tem peso. */ .qlf-conta{margin-top:10px;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.55} .qlf-conta.ok{background:color-mix(in srgb,var(--ok) 8%,var(--card));color:var(--ink);border:1px solid color-mix(in srgb,var(--ok) 30%,var(--line))} .qlf-conta.medio{background:color-mix(in srgb,var(--warn) 9%,var(--card));border:1px solid color-mix(in srgb,var(--warn) 34%,var(--line))} .qlf-conta.alto{background:color-mix(in srgb,var(--red) 8%,var(--card));border:1px solid color-mix(in srgb,var(--red) 30%,var(--line))} .qlf-conta b{display:block;font-size:17px;font-variant-numeric:tabular-nums;margin-bottom:2px} .qlf-veredito{padding:13px 16px;border-top:1px solid var(--line);display:grid;gap:8px} .qlf-selo{font-size:14.5px;font-weight:800;letter-spacing:-.2px} .qlf-selo.serve{color:var(--ok)} .qlf-selo.com_ressalva{color:var(--warn)} .qlf-selo.nao_serve{color:var(--red)} .qlf-selo.incompleta{color:var(--muted)} .qlf-al{font-size:12.5px;line-height:1.55;padding:8px 11px;border-radius:9px} .qlf-al.alto{background:color-mix(in srgb,var(--red) 8%,var(--card));border-left:3px solid var(--red)} .qlf-al.medio{background:color-mix(in srgb,var(--warn) 9%,var(--card));border-left:3px solid var(--warn)} .qlf-al.baixo{background:var(--bg);border-left:3px solid var(--line);color:var(--muted)} .qlf-pend{font-size:12.5px;color:var(--muted);line-height:1.6} .qlf-pend b{color:var(--ink)} @media(max-width:700px){ .qlf-lista{padding:12px 13px} .qlf-campos{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .trl-p.agora{transition:none} } /* pointer-events:none e OBRIGATORIO. O toast fica no DOM o tempo todo, fixo no rodape e com z-index 40 — acima do .overlay (20). Invisivel por opacity nao para de receber toque, e toast() nunca limpa o texto, so a opacidade: depois de qualquer mensagem sobra uma barra invisivel da largura daquele texto. No CELULAR o modal cola no rodape (.overlay{align-items:flex-end}), entao essa barra caia exatamente em cima do botao Cancelar e engolia o toque. No desktop nao aparecia porque o modal e centralizado verticalmente. */ /* --------------------------------------------------------------------- Triagem em série de candidatos — painel que desliza pela direita --------------------------------------------------------------------- Mesma mecânica do .scr (fixed + transform + visibility, alternado por uma classe no body): por cima e não ao lado, senão a lista de trás re-renderiza e o candidato que a pessoa estava lendo salta de lugar. Existe porque o hunter tria em VOLUME: com 11 candidatos, abrir a sanfona do bairro, ler um, fechar e procurar o próximo custa mais tempo do que ler. Aqui ele abre o primeiro e vai de Próximo até o fim, com o contador dizendo quanto falta. z-index 19: ABAIXO do .overlay (20), porque um modal aberto tem que cobrir a triagem — a lição do toast que engolia o Cancelar no celular (ver ferramentas/verificar-camadas-css.js). Acima do resto da tela. --------------------------------------------------------------------- */ .trg{position:fixed;top:0;right:0;bottom:0;width:min(430px,96vw);z-index:19; background:var(--card);border-left:1px solid var(--line); box-shadow:-14px 0 34px rgba(11,19,43,.14); display:flex;flex-direction:column; transform:translateX(100%);visibility:hidden; transition:transform .22s ease, visibility .22s} body.trg-on .trg{transform:none;visibility:visible} @media (prefers-reduced-motion:reduce){ .trg{transition:none} } .trg-topo{padding:14px 16px;background:var(--brand-dark);color:#fff;flex-shrink:0} .trg-topo-l1{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#A9BCDF} .trg-contador{font-weight:700;letter-spacing:.03em} .trg-x{margin-left:auto;background:none;border:0;color:#A9BCDF;font-size:17px; cursor:pointer;line-height:1;padding:2px 6px;min-height:44px;min-width:44px} .trg-x:hover{color:#fff} /* O Voltar da triagem: existe pro CELULAR (o ✕ sozinho e pequeno e a tela cobre o painel inteiro — sem um caminho obvio de volta, a pessoa se sente presa). No desktop fica escondido: la o painel e lateral e o ✕ resolve. */ .trg-voltar{display:none;align-items:center;gap:4px;background:rgba(255,255,255,.14);border:0;color:#fff;font:600 12.5px var(--font-ui);padding:5px 10px;border-radius:8px;cursor:pointer;margin-right:6px} .trg-x:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:5px} .trg-nome{font:600 17px/1.25 var(--font-display);margin-top:6px;word-break:break-word} .trg-onde{font-size:12px;color:#A9BCDF;margin-top:3px} .trg-corpo{flex:1;overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch} .trg-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} /* Ficha em duas colunas: rótulo apagado à esquerda, valor firme à direita. Grid e não tabela — no celular a coluna do valor precisa poder quebrar sem empurrar o rótulo. */ .trg-ficha{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;font-size:13px} .trg-ficha dt{color:var(--muted);font-size:11.5px;text-transform:uppercase; letter-spacing:.05em;font-weight:700;padding-top:1px} .trg-ficha dd{margin:0;color:var(--ink);word-break:break-word} .trg-vazio{color:var(--muted);font-style:italic} /* O que o candidato escreveu no formulario publico. pre-line mantem as quebras entre Formacao / Experiencia / Obs. sem virar uma parede. */ .trg-relato{margin-top:16px;background:var(--bg-alt,#F3F6FB);border:1px solid var(--line); border-radius:10px;padding:11px 13px} .trg-relato-t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--muted);margin-bottom:5px} .trg-relato-x{font-size:13px;color:var(--ink);line-height:1.55;white-space:pre-line;word-break:break-word} /* O aviso de "ainda buscando" / "nao consegui". Fundo transparente e texto apagado de proposito: e recado do sistema, e nao conteudo da pessoa — quem bate o olho precisa distinguir os dois na hora. */ .trg-relato-mudo{background:transparent;border-style:dashed;color:var(--muted); font-size:12.5px;line-height:1.5} .trg-acoes{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);flex-shrink:0} .trg-acoes .btn{flex:1;min-height:44px;display:flex;align-items:center; justify-content:center;gap:6px;font-size:14px} /* Rodapé de navegação: alvos grandes, porque o dedo do hunter vai bater aqui dezenas de vezes seguidas. 44px é o mínimo confortável. */ .trg-nav{display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);background:var(--bg-alt,#F3F6FB);flex-shrink:0} .trg-nav button{flex:1;min-height:44px;border:1px solid var(--line);background:var(--card); color:var(--ink);border-radius:9px;font:700 13.5px/1 var(--font-ui,inherit);cursor:pointer} .trg-nav button:disabled{opacity:.45;cursor:default} .trg-nav button:focus-visible{outline:2px solid var(--navy);outline-offset:2px} .trg-nav .prox{background:var(--navy);border-color:var(--navy);color:#fff} /* A linha da lista vira alvo de toque: o hunter abre a triagem por ela. */ .mc-item{cursor:pointer} .mc-item:hover{background:var(--bg-alt,#F3F6FB)} .mc-item:focus-visible{outline:2px solid var(--navy);outline-offset:-2px} /* Idade do registro. Âmbar a partir de 3 dias: é quando uma candidatura esfria e o candidato já respondeu a outro anúncio. */ .mc-idade{font-size:11px;color:var(--muted);white-space:nowrap} .mc-idade.velho{color:var(--warn);font-weight:700} .toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;z-index:40;opacity:0;transition:opacity .2s;pointer-events:none} .toast.show{opacity:1} table.hunters{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden} table.hunters th,table.hunters td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;text-align:left} table.hunters th{background:#eaf1f8;color:var(--navy)} .wrap{padding:16px} /* Op3 */ .subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap} .subtab{background:#fff;border:1px solid var(--line);color:var(--navy);padding:7px 14px;border-radius:20px;font-weight:600;font-size:13px} .subtab.active{background:var(--navy);color:#fff;border-color:var(--navy)} .op3tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:13px;box-shadow:var(--sh-sm)} .op3tbl th,.op3tbl td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:top} .op3tbl th{background:#eaf1f8;color:var(--navy);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em} .op3tbl tr.r-atras td{background:#fdeeeb} /* --------------------------------------------------------------------- A LINHA DA TABELA RESPONDE AO MOUSE (06/09/2026) Mesma linguagem dos cartoes da Agenda: a cor do realce e a cor do ESTADO da linha, e nao um cinza igual pra todas. Vermelho quando o prazo estourou, ambar quando esta perto, verde quando ja contratou, grafite quando encerrou, azul no resto. O SALTO NAO CABE AQUI. Com border-collapse, uma linha levantada descola as bordas das vizinhas e a tabela inteira parece quebrada. Entao o realce e desenhado DENTRO da celula: trilho de 3px nas duas pontas, fio da mesma cor em cima e embaixo, e o fundo com a mesma tinta. Da o mesmo "esta linha e um botao" sem mexer no desenho da tabela. --------------------------------------------------------------------- */ /* O AVISO DE TELA QUE NAO CARREGOU (06/09/2026). Uma tela que falhou tem de PARECER que falhou: o vazio silencioso faz a pessoa achar que perdeu o dado. Mesmo desenho em toda tela que precisar. */ .board-erro{background:var(--card);border:1px solid #F2C4BD;border-left:3px solid var(--red); border-radius:var(--r-md);padding:16px 18px;margin:14px;max-width:520px; display:flex;flex-direction:column;gap:8px;align-items:flex-start;box-shadow:var(--sh-sm)} .board-erro b{color:var(--ink);font:600 14px var(--font-display)} .board-erro div{color:var(--muted);font-size:13px} .op3tbl tr.vg-row{--vg-cor:var(--blue);--vg-tinta:rgba(41,111,186,.08);--vg-fio:rgba(41,111,186,.30)} .op3tbl tr.vg-row.vg-r-atrasada{--vg-cor:#d8503f;--vg-tinta:rgba(216,80,63,.09);--vg-fio:rgba(216,80,63,.34)} .op3tbl tr.vg-row.vg-r-perto{--vg-cor:#E8950C;--vg-tinta:rgba(232,149,12,.12);--vg-fio:rgba(232,149,12,.38)} .op3tbl tr.vg-row.vg-r-ok{--vg-cor:#1e9e5a;--vg-tinta:rgba(30,158,90,.09);--vg-fio:rgba(30,158,90,.32)} .op3tbl tr.vg-row.vg-r-fim{--vg-cor:#7b8ca6;--vg-tinta:rgba(123,140,166,.11);--vg-fio:rgba(123,140,166,.34)} .op3tbl tr.vg-row td{transition:background-color .15s ease,box-shadow .15s ease} .op3tbl tr.vg-row:hover td{background:var(--vg-tinta); box-shadow:inset 0 1px 0 var(--vg-fio),inset 0 -1px 0 var(--vg-fio)} .op3tbl tr.vg-row:hover td:first-child{box-shadow:inset 3px 0 0 var(--vg-cor), inset 0 1px 0 var(--vg-fio),inset 0 -1px 0 var(--vg-fio)} .op3tbl tr.vg-row:hover td:last-child{box-shadow:inset -3px 0 0 var(--vg-cor), inset 0 1px 0 var(--vg-fio),inset 0 -1px 0 var(--vg-fio)} /* A etiqueta de estado acende junto, que e o que a pessoa foi mirar. */ .op3tbl tr.vg-row:hover .st{filter:saturate(1.15) brightness(1.03)} @media (prefers-reduced-motion:reduce){ .op3tbl tr.vg-row td{transition:none} } .op3tbl tr.doc-emp-row{cursor:pointer} .op3tbl tr.doc-emp-row td{background:#f7f9fc;transition:background .15s} .op3tbl tr.doc-emp-row:hover td{background:#eaf1f8} .doc-emp-tgl{display:inline-block;width:12px;color:var(--muted);transition:transform .15s} .doc-emp-row.aberto .doc-emp-tgl{transform:rotate(90deg)} /* Admissão e desligamento (ciclo CLT, 449): grupos por pessoa */ .adm-grupo{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--card);overflow:hidden} .adm-pessoa{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;flex-wrap:wrap} .adm-pessoa:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)} .adm-itens{border-top:1px solid var(--line)} .adm-item{display:grid;grid-template-columns:minmax(180px,2fr) auto minmax(110px,1fr) minmax(120px,1.4fr) minmax(140px,1.6fr) auto;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);font-size:13px} .adm-item:first-child{border-top:0} .adm-item.feito{opacity:.62} .adm-item.feito .adm-chk span{text-decoration:line-through} .adm-item.atras{background:rgba(192,57,43,.05)} .adm-chk{display:flex;align-items:center;gap:8px;margin:0;font-weight:500;cursor:pointer} .adm-chk input{width:16px;height:16px;margin:0;flex:0 0 auto} .adm-venc{font-size:12px;color:var(--muted)} .adm-ag{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .adm-obs{padding:2px 8px;font-size:11px;justify-self:start} .adm-arq{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .adm-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:color-mix(in srgb,var(--brand) 10%,transparent);border-radius:10px;padding:2px 4px 2px 8px;max-width:100%} .adm-chip a{color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} .adm-chip button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;padding:0 4px;line-height:1} .adm-chip button:hover{color:#c0392b} /* Como a conta usa o sistema (447): cartoes de escolha */ .uso{display:grid;gap:8px} .uso-op{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;cursor:pointer;font-weight:400;background:var(--card)} .uso-op:hover{border-color:var(--brand)} .uso-op.sel{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)} .uso-op input{width:16px;height:16px;margin:3px 0 0;flex:0 0 auto} .uso-op span{display:grid;gap:2px} .uso-op b{font-size:13px;color:var(--ink)} .uso-op small{font-size:11px;color:var(--muted)} .rhm-off td{opacity:.55} .rhm-off td input[type=text]{text-decoration:line-through} @media (max-width:720px){ .adm-item{grid-template-columns:1fr 1fr} .adm-chk{grid-column:1 / -1} } .op3tbl tr.doc-sub td:first-child{padding-left:22px} .sub2{font-size:11px;color:var(--muted);white-space:normal} .ven{font-size:12px} .ven.atras{color:var(--red);font-weight:700} .marco{background:#eaf1f8;border:1px solid #d5e3f2;border-radius:20px;padding:2px 10px;font-size:11px;color:var(--navy);font-weight:700} .st{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700} .st-pendente{background:#fdf1e3;color:#9a6412} .st-recebido,.st-feito{background:#eaf1f8;color:var(--navy)} .st-assinado{background:#e9f6ee;color:#1e7a46} .st-vencido,.st-risco{background:#fbe9ea;color:#9B2226} .ck{font-size:11px;color:var(--muted);margin-right:8px;display:inline-flex;align-items:center;gap:3px} .op3search{display:flex;align-items:center;gap:8px;margin-bottom:12px} #deslq{flex:1;padding:9px;border:1px solid var(--line);border-radius:8px} .op3res{display:flex;flex-direction:column;gap:8px} .op3card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px} .op3card .t{font-weight:600;color:var(--navy)} .op3hint{color:var(--muted);font-size:13px;padding:8px} .op3err{color:var(--red);font-size:13px;padding:8px} /* Indicadores do Controle de Vagas */ /* --------------------------------------------------------------------- BARRA DE FERRAMENTAS DE TELA (06/09/2026) A medida saiu da barra do Kanban e ganhou nome proprio pra outras telas usarem: uma altura so (34px), um raio so (9px), os controles todos alinhados e o conjunto num cartao, em vez de botoes soltos boiando sobre o fundo. Icone de traco no lugar do emoji, com a excecao ja conhecida do brilho da Vega. --------------------------------------------------------------------- */ .tbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px; background:var(--card);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:0 1px 2px rgba(11,42,74,.04),0 10px 26px -20px rgba(11,42,74,.45)} .tbar h2{margin:0;color:var(--ink);font-size:17px} /* Titulo, ajuda e etiqueta de escopo andam juntos: no celular eles sao UMA celula da grade, e aqui continuam a mesma linha de antes. */ .vg-tit{display:flex;align-items:center;gap:8px;min-width:0} .tbar .btn{min-height:34px;border-radius:9px;font-size:12.5px;padding:0 12px; display:inline-flex;align-items:center;gap:7px;font-weight:600} .tbar .btn.sec{color:var(--ink);background:var(--card);border-color:var(--line)} .tbar .btn.sec:hover{background:var(--bg);border-color:var(--navy)} .tbar select,.tbar input[type=text],.tbar input[type=month]{min-height:34px;border-radius:9px;font-size:12.5px} .tbar label{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;white-space:nowrap} /* O icone de traco, em qualquer barra. Herda a cor do botao e escurece junto com ele no hover. */ .kico{width:15px;height:15px;flex:0 0 auto;color:var(--muted)} .btn.sec:hover .kico,.tbar .btn.sec:hover .kico{color:var(--navy)} .btn:not(.sec) .kico{color:currentColor} /* O botao que abre e fecha um bloco (Indicadores, Desligamentos do mes): mesma altura dos vizinhos e a seta girando, em vez do triangulo de texto que mudava de largura ao abrir. */ .vgindtoggle{background:var(--card);color:var(--navy);border:1px solid var(--line);border-radius:9px; padding:0 12px;min-height:34px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px; font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease} .vgindtoggle:hover{background:var(--bg);border-color:var(--navy)} .vgindtoggle:focus-visible{outline:2px solid var(--blue);outline-offset:1px} .vgindtoggle .kchev{width:13px;height:13px;transition:transform .18s ease} .vgindtoggle.aberta .kchev{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){ .vgindtoggle,.vgindtoggle .kchev{transition:none} } /* Todos os cartões de indicador na MESMA linha, sempre — em vez de quebrar quando não cabe, a fileira rola na horizontal (mesmo padrão do quadro do Kanban). */ .vgind-wrap{display:flex;flex-wrap:nowrap;gap:10px;margin:0 0 14px;overflow-x:auto;padding-bottom:4px} .vgind-wrap::-webkit-scrollbar{height:8px} .vgind-wrap::-webkit-scrollbar-thumb{background:#c3d2e0;border-radius:6px} .vgind-box{flex:0 0 auto;width:230px} .vgind-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px} .vgind-ttl{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px} .vgind-big{font-size:30px;font-weight:800;color:var(--navy)} .vgind-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px} .vgind-lb{flex:0 0 auto;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .vgind-bar{flex:1;height:8px;border-radius:4px;background:#eaf1f8;overflow:hidden} .vgind-fill{height:100%;border-radius:4px} .vgind-n{flex:0 0 auto;color:var(--muted);font-weight:600;min-width:18px;text-align:right} #cd-busca-resultados{margin-top:6px;max-height:180px;overflow-y:auto;border-radius:8px} #cd-busca-resultados:not(:empty){border:1px solid var(--line)} .cd-cli-item{padding:8px 10px;font-size:13px;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line)} .cd-cli-item:last-child{border-bottom:none} .cd-cli-item:hover{background:#eaf1f8} .g-pos{color:var(--ok);font-weight:600} .g-neg{color:var(--red);font-weight:600} /* Ícone de ajuda (?) */ .helpIc{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#eaf1f8;color:var(--blue);font-size:11px;font-weight:800;cursor:pointer;margin-left:6px;border:1px solid #d5e3f2;vertical-align:middle;flex:0 0 auto;line-height:1} .helpIc:hover{background:var(--blue);color:#fff} .pnl .helpIc{background:#12274a;border-color:#1d3a66;color:#7fb0f0} .helpBody{font-size:14px;line-height:1.6} /* Setores do Kanban (visão do gestor) */ .col{border-top:3px solid transparent} .col.sec-comercial{border-top-color:#f0a35a} .col.sec-comercial>h3{background:#ffe8d1;color:#a85b1a} .col.sec-coord{border-top-color:#a583e0} .col.sec-coord>h3{background:#ece3fb;color:#6b46b0} .col.sec-hunter{border-top-color:#9fb1c1} .col.sec-ok{border-top-color:var(--ok)} .col.sec-ok>h3{background:#dff3e6;color:#1e7a46} .col.sec-red{border-top-color:var(--red)} .col.sec-red>h3{background:#fce4e0;color:#b23a2a} .col.sec-comercial>h3 .n,.col.sec-coord>h3 .n,.col.sec-ok>h3 .n,.col.sec-red>h3 .n{background:rgba(0,0,0,.30)} .klegend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:10px 16px;margin:0 16px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);font-size:12px;color:var(--muted);box-shadow:var(--sh-sm)} .klegend span{display:inline-flex;align-items:center;gap:5px} .klegend i{width:12px;height:12px;border-radius:3px;display:inline-block} .klegend-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid transparent;padding:3px 6px;border-radius:6px;color:var(--muted);font-size:12px;font-family:inherit;cursor:pointer} .klegend-btn:hover{background:var(--bg);border-color:var(--line)} /* --------------------------------------------------------------------- A BARRA DO KANBAN (06/09/2026) Cinco quadradinhos coloridos abriam a barra e competiam com a busca e com as acoes. Ficam a vista os DOIS setores com mais vagas no quadro de hoje, e os outros abrem no "+3". A legenda tambem e atalho: clicar rola ate a primeira coluna do setor. O numero ao lado do nome fica a vista de proposito: e ele que decide quais dois aparecem, e sem ele a escolha pareceria sorteio. --------------------------------------------------------------------- */ .klegend:not(.klegend-aberta) .klegend-extra{display:none} .klegend-btn i{width:9px;height:9px;border-radius:50%} .klegend-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);background:var(--bg); border:1px solid var(--line);border-radius:20px;padding:0 6px;font-size:10.5px;line-height:16px} .klegend-mais{font-weight:600} .klegend-mais .kchev{width:13px;height:13px;transition:transform .18s ease} .klegend-aberta .klegend-mais .kchev{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){ .klegend-mais .kchev{transition:none} } /* Uma altura so, um raio so. Os botoes vinham com alturas diferentes (btn de 42px, o par Quadro/Lista de 34, o select e a busca de outro tamanho) e a barra parecia remendo. Os emojis dos rotulos viraram icones de traco; o unico emoji que fica e o brilho da Vega, que e a marca dela no produto inteiro. */ .klegend .btn{min-height:34px;border-radius:9px;font-size:12.5px;padding:0 12px; display:inline-flex;align-items:center;gap:7px;font-weight:600} .klegend .btn.sec{color:var(--ink);background:var(--card);border-color:var(--line)} .klegend .btn.sec:hover{background:var(--bg);border-color:var(--navy)} .klegend .kico{width:15px;height:15px;flex:0 0 auto;color:var(--muted)} .klegend .btn.sec:hover .kico{color:var(--navy)} /* O "Mais" e do celular. Aqui ele so aparece porque .klegend .btn (0-2-0) vence .cel-mais (0-1-0) e reacende o display. Casa o peso. */ .klegend .btn.cel-mais{display:none} .klegend .crm-toggle{border-radius:9px} /* 26 + 6 do trilho + 2 da borda = os mesmos 34px dos vizinhos. */ .klegend .crm-toggle button{min-height:26px;padding:0 11px;display:inline-flex;align-items:center;gap:6px} .tbar .tbar-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 0} /* .klegend span ja vale 0-1-1 e apagaria um .ktool-sep de 0-1-0. */ .klegend .ktool-sep{display:block;width:1px;align-self:stretch;background:var(--line);margin:2px 0} /* O acabamento: a barra ganha a mesma sombra curta de cartao do resto do sistema, as pilulas de setor viram chips de verdade (fundo e fio de contorno, e nao texto solto) e o par Quadro/Lista vira um seletor segmentado com trilho — a pastilha escura corre dentro dele. */ .klegend{padding:10px 14px;gap:10px;box-shadow:0 1px 2px rgba(11,42,74,.04),0 10px 26px -20px rgba(11,42,74,.45)} .klegend-btn{background:var(--card);border-color:var(--line);padding:5px 10px;border-radius:20px; min-height:28px;font-weight:600;gap:7px} .klegend-btn:hover{background:var(--bg);border-color:var(--navy);color:var(--ink)} .klegend-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px} .crm-toggle{background:var(--bg);padding:3px;gap:2px;border-radius:11px} .crm-toggle button{border-radius:8px;min-height:28px} .crm-toggle button.on{box-shadow:0 1px 3px rgba(11,42,74,.28)} .btn-topo-ativo{outline:2px solid var(--blue-l);outline-offset:1px} .kbusca-wrap{position:relative;display:inline-flex;align-items:center} #kanban-hunter{padding:0 10px;min-height:34px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-size:12.5px;max-width:180px} #kanban-busca{padding:0 30px 0 36px;height:34px;min-height:34px;border-radius:9px;background-color:var(--card);color:var(--ink);font-size:12.5px;width:240px} #kanban-busca:focus{border-color:var(--navy)} #kanban-busca-limpar{position:absolute;right:7px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:3px;border-radius:4px} #kanban-busca-limpar:hover{color:var(--red)} .card.card-hide{display:none} .card.card-match{outline:2px solid var(--blue);outline-offset:-1px} .tag.data{background:#eae3fb;color:#6b46b0;border-color:#d6c8f2} /* Tema escuro */ /* Op3 documentação v2 */ .stepper{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .stp{background:#eef2f7;border:1px solid var(--line);color:var(--muted);border-radius:14px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer} .stp.on{background:#e9f6ee;border-color:#c9e9d5;color:#1e7a46} .stp.volt{margin-left:8px;color:var(--red);border-color:#f2d0c9} .stparr{color:var(--muted);font-size:11px} .declsum{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap} .dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 18px;display:flex;flex-direction:column;min-width:110px;box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s} .dcard:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .grupo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .grupo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s,border-color .15s} .grupo-card:hover{border-color:var(--blue-l);transform:translateY(-2px);box-shadow:var(--sh-md)} .grupo-ico{width:38px;height:38px;border-radius:11px;background:#eaf1f8;color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto} .grupo-info{min-width:0} .grupo-nome{font-weight:700;color:var(--ink);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vaga-row{cursor:pointer} .vaga-row:hover td{background:rgba(91,155,224,.08)} .pool-badge{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:3px 10px;white-space:nowrap} .pool-badge.on{color:var(--blue);border-color:var(--blue-l);background:rgba(91,155,224,.12)} .pool-caret{color:var(--muted);font-size:11px;margin-left:auto;transition:transform .15s;display:inline-block} .vaga-expand-row td{background:var(--bg);padding:12px 16px} .pool-inline{max-width:640px} .dcard b{font-size:22px;color:var(--ink)} .dcard span{font-size:11px;color:var(--muted)} .dcard.ok b{color:var(--ok)} .dcard.warn b{color:var(--warn)} .tcebtns{display:flex;gap:4px;flex-wrap:wrap} .tcebtns .btn{padding:4px 8px;font-size:11px} /* Dashboard / Visão do time */ .dashgrid{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px} .dashgrid.tvgrid{justify-content:center;gap:22px} .dashcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s} .dashcard:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(11,42,74,.14)} .dashcard.big{border-color:var(--blue)} .dashcard.tv{padding:22px} .dashttl{font-weight:700;color:var(--navy);font-size:13px} .donut{display:flex;flex-direction:column;align-items:center;gap:6px} .donlbl{font-weight:600;color:var(--ink);font-size:13px;text-align:center} .dashsec{margin-bottom:18px} .dashsec h3{color:var(--navy);font-size:14px;margin:0 0 8px} .dashrow{display:flex;gap:10px;flex-wrap:wrap} .dashcard.mini{min-width:120px} .dashcard.mini b{font-size:26px;color:var(--navy)} .dashcard.mini span{font-size:11px;color:var(--muted)} .dashcard.mini.warn b{color:var(--red)} .funil{display:flex;flex-wrap:wrap;gap:8px} .funrow{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;min-width:120px} .funrow span{font-size:11px;color:var(--muted)} .funrow b{font-size:20px;color:var(--navy)} .teamhead{font-size:28px;font-weight:800;color:var(--navy);text-align:center;margin:6px 0 18px} .dashcard.kpi{justify-content:center} .kpinum{font-size:54px;font-weight:800;line-height:1;color:var(--navy)} .kpisub{font-size:12px;color:var(--muted);text-align:center} .nivrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center} .niv{font-size:11px;padding:2px 8px;border-radius:10px;background:#eaf1f8;color:var(--navy)} .niv.medio{background:#e9f2fb;color:var(--navy2)} .niv.tec{background:#fff4e0;color:#9a6412} .niv.sup{background:#e9f6ee;color:#1e7a46} .motrow{display:flex;align-items:center;gap:8px;margin-top:6px} .motrow span{font-size:12px;color:var(--ink);min-width:130px} .motbar{flex:1;background:#eef2f7;border-radius:6px;height:14px;overflow:hidden} .motbar i{display:block;height:100%;background:var(--blue);border-radius:6px} .motrow b{font-size:13px;color:var(--navy);min-width:24px;text-align:right} /* ===== Modo TV (Visão do Time) — layout do painel oficial ===== */ #view-time{position:fixed;inset:0;z-index:90;padding:0;margin:0;background:radial-gradient(1400px 700px at 50% -15%,#16345f 0%,transparent 55%),linear-gradient(180deg,#06101f,#040b16);color:#eef4fc;font-family:'Inter',system-ui,sans-serif;display:flex;flex-direction:column;overflow:auto} #view-dash{padding:0!important;background:radial-gradient(1100px 520px at 85% -8%,#173461 0%,transparent 52%),linear-gradient(180deg,#081222,#070f1d);color:#eef4fc;font-family:'Inter',system-ui,sans-serif;min-height:calc(100vh - 118px)} .pnl .tsel{font-size:12px;color:#90a8cd;display:flex;gap:6px;align-items:center} .pnl .tsel input{background:#0e1d35;color:#eef4fc;border:1px solid #1d3a66;border-radius:8px;padding:7px} .pnl .thead{display:flex;align-items:center;gap:14px;padding:12px 26px;border-bottom:1px solid #1d3a66;background:#06101f;position:sticky;top:0;z-index:20} .pnl .tlogo{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;color:#fff} .pnl .tlogo b{color:#5B9BE0} .pnl .th2{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:#eef4fc} .pnl .tclock{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:22px;letter-spacing:2px;color:#fff} .pnl .tclose{padding:11px 18px;border-radius:11px;border:1px solid #1d3a66;background:transparent;color:#90a8cd;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif} .pnl .tclose:hover{border-color:#e0524b;color:#ff8b84} .pnl .tbody{flex:1;max-width:1700px;margin:0 auto;width:100%;padding:14px 26px 40px;display:flex;flex-direction:column;gap:14px} .pnl .tRow{display:grid;gap:12px} .pnl .tRow.r1{grid-template-columns:1fr 1fr 1fr} @media(max-width:1100px){.pnl .tRow,.pnl .tRow.r1{grid-template-columns:1fr 1fr!important}} .pnl .tCard{background:#0e1d35;border:1px solid #1d3a66;border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:6px;min-height:0;transition:transform .2s,box-shadow .2s,border-color .2s} .pnl .tCard:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.45);border-color:#2c4a72} .pnl .tCard .ttl{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#90a8cd} .pnl .liqCard{justify-content:center;align-items:center;text-align:center;border-width:2px} /* BUG 3: o rotulo do bloco "posicao atual", que separa retrato de periodo. */ .pnl .tSecao{display:flex;align-items:baseline;gap:10px;margin:6px 2px -4px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#90a8cd} .pnl .tSecao small{font-weight:500;letter-spacing:0;text-transform:none;color:#5d77a1;font-size:11px} .pnl .liqHuge{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(48px,8vh,86px);line-height:.95;letter-spacing:-3px} .pnl .liqMeta{font-size:13px;color:#90a8cd;font-weight:600} .pnl .note{font-size:12px;color:#90a8cd;text-align:center} .pnl .donutWrap{display:flex;align-items:center;gap:16px;justify-content:center;flex:1} .pnl .donut{position:relative;width:clamp(96px,13vh,132px);height:clamp(96px,13vh,132px);flex-shrink:0} .pnl .donut svg{transform:rotate(-90deg);width:100%;height:100%} .pnl .donut .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .pnl .donut .ctr .n{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(22px,3.4vh,30px);letter-spacing:-1px;color:#eef4fc} .pnl .donut .ctr .of{font-size:11px;color:#90a8cd;font-weight:600} .pnl .di .big2{font-family:'Sora',sans-serif;font-weight:800;font-size:26px;color:#eef4fc} .pnl .di .lab2{font-size:12px;color:#90a8cd;margin-top:3px} .pnl .niv{display:flex;gap:14px;justify-content:center;margin-top:6px} .pnl .niv .nc{text-align:center} .pnl .niv .nv{font-family:'Sora',sans-serif;font-weight:800;font-size:20px} .pnl .niv .nl{font-size:10px;color:#90a8cd} .pnl .opNome{font-family:'Sora',sans-serif;font-weight:800;font-size:15px;color:#eef4fc} .pnl .opSub{font-size:11px;color:#90a8cd;margin-left:6px} .pnl .motivos{display:flex;flex-direction:column;gap:7px;flex:1;justify-content:center} .pnl .mvRow{display:flex;align-items:center;gap:10px} .pnl .mvRow .ml{width:130px;font-size:12px;color:#90a8cd;font-weight:600} .pnl .mvRow .mt{flex:1;height:20px;background:#081326;border-radius:6px;overflow:hidden;border:1px solid #1d3a66} .pnl .mvRow .mf{height:100%;border-radius:6px;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;padding-left:8px;min-width:26px} .pnl .mvRow .mn{width:30px;text-align:right;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px} .pnl .docGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;align-content:center} .pnl .docBox{background:#081326;border:1px solid #1d3a66;border-radius:12px;padding:12px 8px;text-align:center} .pnl .docBox .dn{font-family:'Sora',sans-serif;font-weight:800;font-size:30px;letter-spacing:-1px;color:#eef4fc} .pnl .docBox .dl{font-size:10.5px;color:#90a8cd;margin-top:4px} .pnl .hist3m{display:flex;gap:10px;justify-content:center;margin-top:2px} .pnl .histLabel{font-size:10px;color:#90a8cd;text-align:center;margin:2px 0 4px} .pnl .mdon{display:flex;flex-direction:column;align-items:center;gap:2px} .pnl .mdon-l{font-size:10px;color:#90a8cd;font-weight:600} .pnl .hcRow{display:flex;gap:14px;justify-content:center;align-items:flex-start;flex-wrap:wrap} .pnl .hcCol{display:flex;flex-direction:column;align-items:center;gap:2px} .pnl .hcRow .donut{width:clamp(78px,10vh,104px);height:clamp(78px,10vh,104px)} .pnl .opCancel{font-size:11px;font-weight:700;color:#5a7291;text-align:center;padding:5px 8px;border-radius:9px;background:#0a1830;border:1px solid #1d3a66;margin-top:2px;width:100%} .pnl .opCancel.on{color:#ff8b84;border-color:rgba(224,82,75,.4);background:rgba(224,82,75,.12)} /* ===== Tablet ===== */ @media(max-width:1100px) and (min-width:761px){ .col{flex:1 1 260px;min-width:250px;max-width:300px} .klegend{gap:10px} #kanban-busca{width:180px} } /* ===== Mobile (Android/iOS) ===== */ @media(max-width:760px){ input,select,textarea{font-size:16px!important} /* evita o zoom automático do iOS ao focar */ /* padding-top com safe-area: no iOS (PWA/notch) o conteúdo começava DEBAIXO da barra de status — "topo cortado". */ header{padding:calc(8px + env(safe-area-inset-top)) 10px 8px;gap:8px} header .who{display:none} header .logo{font-size:14px} #btn-config{font-size:12px;padding:8px 10px} .wrap{padding:10px} .klegend{padding:8px 10px;margin:0 10px 10px;gap:8px;font-size:11px} /* A busca volta aos 42px de alvo de dedo que o resto do sistema usa: o #kanban-busca compacto e desenho de desktop. E o tracinho que separa os grupos de botoes nao faz sentido numa barra que quebra em varias linhas. */ #kanban-busca{height:42px;min-height:42px} .klegend .btn.cel-mais{display:inline-flex} .klegend .ktool-sep{display:none} /* --------------------------------------------------------------- O TOPO DO KANBAN NO CELULAR (10/09/2026) Media antes: 144px de altura, o seletor de hunter comecando em x=201 (191px de vazio a esquerda) e a busca terminando em x=261 (114px de vazio a direita). Tres linhas, cada uma sobrando num lugar diferente, porque `flex-wrap` quebra onde calha e o espacador do desktop (.k-espaco, flex:1) continuava empurrando o vizinho. Vira uma GRADE de duas linhas com lugar definido para cada peca: busca em cima, ocupando tudo (e o que mais se usa); embaixo, o filtro de hunter esticando e, a direita, Quadro/Lista e o Mais. Nada de flex-wrap adivinhando. */ .klegend{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center} .klegend .k-espaco{display:none} .klegend .kbusca-wrap{grid-column:1/-1;grid-row:1;width:100%} .klegend #kanban-busca{width:100%} .klegend #kanban-hunter{grid-column:1;grid-row:2;width:100%;min-width:0;height:38px} /* So o icone: o nome do hunter precisa da largura, e as duas figuras (colunas e linhas) dizem o que sao. O title e o aria-label continuam com o nome escrito. */ .klegend .crm-toggle .kvis-rot{display:none} .klegend .crm-toggle button{padding-left:12px;padding-right:12px} .klegend .crm-toggle{grid-column:2;grid-row:2;margin:0} .klegend .btn.cel-mais{grid-column:3;grid-row:2;white-space:nowrap} /* Vazio (sem busca ativa) nao pode reservar uma linha inteira. */ .klegend #kanban-busca-info{grid-column:1/-1;grid-row:3;padding:0} .klegend #kanban-busca-info:empty{display:none} /* Sem o filtro de hunter (perfil que so ve os proprios cards), o Quadro/Lista assume a esquerda em vez de ficar solto no canto. */ .klegend #kanban-hunter.hidden + .kbusca-wrap ~ .crm-toggle{grid-column:1} /* O aviso de candidaturas segue a mesma margem da barra, senao um encosta na borda e o outro nao. */ #kanban-aviso-cand,#kanban-aviso-oper{margin:0 10px} #board{padding:10px;gap:8px;-webkit-overflow-scrolling:touch} .col{min-width:240px;max-width:240px;max-height:calc(100dvh - 190px)} .col.collapsed{min-width:140px;max-width:140px} .overlay{padding:0;align-items:flex-end} .modal{width:100%!important;max-width:100%;max-height:94vh;max-height:94dvh;border-radius:14px 14px 0 0} /* No celular tudo vira uma coluna: o span sai de cena pela variavel, sem !important brigando com o style inline. */ .fields{grid-template-columns:1fr} .fields .f{--sp:1 !important} /* vence o style inline que cardAcomodar escreve */ .f.full{grid-column:auto} .cursos-pret-linha{grid-template-columns:1fr} .modal .foot{position:sticky;bottom:0;background:inherit} #view-op3,#view-vagas,#view-agenda,#view-hunters,#view-financeiro{overflow-x:auto;-webkit-overflow-scrolling:touch} .op3tbl,.agtbl,table.hunters{min-width:640px} .aghead{gap:8px} .agc-l1,.agc-l2{flex-wrap:wrap} .agcand .agc-cpf{width:46%} .agcand .agc-hora{width:46%} .agcand .agc-genero{width:46%} .agcand .agc-whatsapp{width:46%} .pnl .tRow,.pnl .tRow.r1{grid-template-columns:1fr!important} .pnl .tbody{padding:10px 12px 30px;gap:10px} .pnl .thead{padding:10px 12px;gap:8px} .pnl .th2{font-size:14px} .pnl .tclock{font-size:15px;letter-spacing:1px} .pnl .liqHuge{font-size:52px} .pnl .docGrid{grid-template-columns:repeat(2,1fr)!important} .dashgrid,.dashrow{gap:8px} } /* ------------------------------------------------------------------ Painel de resumo em fundo CLARO. Nasceu pro Resumo do Financeiro, que antes reaproveitava a casca escura do Dashboard/TV (.pnl/.tCard) aninhada dentro de uma aba clara — o verde e o vermelho vibrantes de lá só são legíveis sobre fundo escuro. Aqui as cores vêm de --ok/--red, medidos sobre claro. É componente, não estilo de uma tela: qualquer aba pode usar. ------------------------------------------------------------------ */ .pnlc{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden} .pnlc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)} .pnlc-head h3{margin:0;font:700 14px var(--font-display);color:var(--ink)} .pnlc-head .sp{flex:1} .pnlc-head label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)} .pnlc-head input[type=month]{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font-size:12px} .pnlc-body{display:flex;flex-direction:column;gap:14px;padding:16px} /* Cartão de indicador. A cor do valor tem SIGNIFICADO (verde = entra, vermelho = sai ou resultado negativo) — não é enfeite. */ .kpi-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .kpi{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px} .kpi-rot{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)} .kpi-val{font:700 30px var(--font-display);color:var(--ink);margin:6px 0 5px;font-variant-numeric:tabular-nums;line-height:1.1} .kpi-val.pos{color:var(--ok)} .kpi-val.neg{color:var(--red)} .kpi-val.info{color:var(--navy)} /* Âmbar: usado no "potencial de corte" — é um alerta que pede decisão, não um erro (vermelho) nem um resultado bom (verde). */ .kpi-val.warn{color:var(--warn)} .kpi-nota{font-size:11.5px;color:var(--muted);line-height:1.45} .kpi-nota a{color:var(--navy);font-weight:600} .kpi.centro{display:flex;flex-direction:column;align-items:center;text-align:center} /* Barras de evolução mês a mês. Altura vem inline (é dado), cor vem daqui. */ .hist{display:flex;gap:6px;align-items:flex-end;padding:10px 0;border-bottom:1px solid var(--line)} .hist-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:5px;min-width:0} .hist-barras{display:flex;align-items:flex-end;gap:3px;height:110px} .hist-barras i{display:block;width:16px;border-radius:3px 3px 0 0} .hist-barras i.receita{background:var(--ok)} .hist-barras i.despesa{background:var(--red)} .hist-lbl{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .legenda-inline{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px} .legenda-inline span{display:flex;align-items:center;gap:6px} .legenda-inline i{width:10px;height:10px;border-radius:2px;flex-shrink:0} .legenda-inline i.receita{background:var(--ok)} .legenda-inline i.despesa{background:var(--red)} /* --------------------------------------------------------------------- PAINEL FINANCEIRO (Resumo e Projeção) — 15/08/2026. Layout de dashboard: um cartão-herói escuro com o número que resume o mês, cartões de indicador com selo e variação, gráfico de fluxo (entra pra cima, sai pra baixo) e rosca de composição. Cores: só tokens da marca. O escuro é o mesmo da sidebar (--brand-dark) — é a "casca" do produto, e repeti-la aqui amarra o painel à marca em vez de inventar um segundo azul. Verde = entra, vermelho = sai: a mesma convenção do resto do Financeiro, nunca invertida. --------------------------------------------------------------------- */ .fin-hero{background:var(--brand-dark);color:#fff;border-radius:16px;padding:20px 22px; display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start; /* Brilho sutil no canto: dá profundidade sem custar contraste, porque fica ATRÁS do texto e no lado oposto a ele. */ background-image:radial-gradient(120% 140% at 100% 0%, rgba(41,111,186,.55) 0%, rgba(10,17,32,0) 60%)} .fin-hero .rot{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#A9BCDF} /* NO CELULAR O HEROI ENCOLHE (17/09/2026): 168px para tres numeros e o que mais empurrava o primeiro cartao para fora da tela. O numero principal continua grande; o resto vira uma linha. */ @media (max-width:760px){ .fin-hero{padding:12px 14px;border-radius:12px;gap:8px} .fin-hero .rot{font-size:10px;letter-spacing:.5px} .fin-hero .val{font-size:26px;margin:2px 0 3px} .fin-hero .sub{font-size:12px} .fin-hero-lado{gap:16px} .fin-hero-lado .val{font-size:18px} /* NO CRM O HEROI VIRA UMA FAIXA. Ele tem duas fileiras, e em 375px elas empilham: 166px so para o topo da tela. Os dois indicadores da direita (conversas marcadas, viraram card) ja estao no Dashboard do proprio CRM, a uma aba de distancia, entao aqui fica o numero que a tela existe para mostrar. No Financeiro o heroi continua inteiro: la ele E a tela. */ #view-capta .fin-hero{padding:10px 14px} #view-capta .fin-hero .rot{font-size:9.5px} #view-capta .fin-hero .val{font-size:22px;margin:1px 0 2px} #view-capta .fin-hero .sub{font-size:11.5px;line-height:1.35} #view-capta .fin-hero-lado{display:none} } .fin-hero .val{font:700 40px/1.05 var(--font-display);margin:8px 0 6px;font-variant-numeric:tabular-nums} .fin-hero .val.neg{color:#F4A6A6} .fin-hero .sub{font-size:12.5px;color:#A9BCDF;line-height:1.5} .fin-hero .sp{flex:1;min-width:12px} .fin-hero-lado{display:flex;gap:26px;flex-wrap:wrap} .fin-hero-lado .val{font-size:22px;margin:6px 0 2px} /* Botões DENTRO do herói escuro (atalhos da Config). Contorno claro sobre o fundo navy — btn/btn.sec são desenhados pra fundo claro e sumiriam aqui. Branco puro sobre o navy do herói passa folgado de contraste (o texto do herói já é branco). */ .fin-hero .hero-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end} .fin-hero .hero-acao{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);color:#fff; border-radius:10px;padding:8px 13px;font:600 12.5px var(--font-ui);cursor:pointer; transition:background-color .15s} .fin-hero .hero-acao:hover{background:rgba(255,255,255,.22)} .fin-hero .hero-acao:focus-visible{outline:2px solid #fff;outline-offset:2px} /* Cartão de indicador com selo e variação, no lugar do .kpi cru. */ .fin-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .fin-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px} .fin-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px} .fin-selo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:16px;background:#EAF2FB;flex-shrink:0} .fin-selo.ok{background:#E4F1EA} .fin-selo.neg{background:#FAE9E9} .fin-selo.warn{background:#F7EFE0} .fin-card .val{font:700 26px var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15} .fin-card .val.pos{color:var(--ok)} .fin-card .val.neg{color:var(--red)} .fin-card .val.info{color:var(--navy)} .fin-card .val.warn{color:var(--warn)} .fin-card .rot{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)} .fin-card .nota{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:6px} .fin-card .nota a{color:var(--navy);font-weight:600} /* Pílula de variação: fundo de baixa saturação pra não competir com o número, que é o que a pessoa veio ler. */ .fin-pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700; padding:3px 8px;border-radius:999px;background:#EEF2F8;color:var(--muted);margin-left:auto} .fin-pill.sobe{background:#E4F1EA;color:var(--ok)} .fin-pill.desce{background:#FAE9E9;color:var(--red)} /* Bloco de painel (gráfico, rosca, tabela) */ .fin-bloco{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px} .fin-bloco-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px} .fin-bloco-head h4{margin:0;font:700 14px var(--font-display);color:var(--ink)} .fin-bloco-head .dim{font-size:11.5px;color:var(--muted)} .fin-bloco-head .sp{flex:1} .fin-duo{display:grid;gap:14px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} @media (max-width:900px){ .fin-duo{grid-template-columns:1fr} } /* Lista de composição ao lado da rosca */ .fin-comp{display:flex;flex-direction:column;gap:8px;margin-top:10px} .fin-comp-linha{display:flex;align-items:center;gap:10px} .fin-comp-pct{min-width:44px;text-align:center;font-size:11.5px;font-weight:700;padding:3px 6px; border-radius:999px;background:#EEF2F8;color:var(--ink);font-variant-numeric:tabular-nums} .fin-comp-nome{flex:1;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fin-comp-val{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} /* Barra de progresso da meta (Projeção) */ .fin-prog{height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;margin:10px 0 6px} .fin-prog i{display:block;height:100%;border-radius:999px;background:var(--brand-accent2)} .fin-prog.claro{background:var(--line)} .fin-prog.claro i{background:var(--navy)} /* --------------------------------------------------------------------- Meus Candidatos — banco de talentos (piloto do refresh visual, 07/08). Cores reaproveitadas de pares já testados (WCAG) em outro lugar deste arquivo: navy/#4a2172/#E8950C/#1c3f66 já servem de fundo sólido com texto branco em cima (.usermenu-ava, .tag.origem-reativado, .tag.fonte-gestor, .tag.hunter-3) — nenhuma cor nova, só reorganização. --------------------------------------------------------------------- */ .mc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)} .mc-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s} .mc-stat:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .mc-stat-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto} .mc-stat-ico.blue{background:#eaf1f8;color:var(--navy)} .mc-stat-ico.green{background:#e9f6ee;color:#1e7a46} .mc-stat-ico.amber{background:#fdf1e3;color:#9a6412} .mc-stat b{font:800 24px/1.1 var(--font-display);color:var(--ink);display:block} .mc-stat span{font-size:11.5px;color:var(--muted)} .mc-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:var(--sp-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;box-shadow:var(--sh-sm)} .mc-toolbar input[type=text],.mc-toolbar select{border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--ink);font-family:var(--font-ui)} .mc-toolbar input[type=text]{flex:2;min-width:200px} .mc-toolbar select{flex:1;min-width:200px} .mc-toolbar input:focus,.mc-toolbar select:focus{outline:none;border-color:var(--blue)} /* Barra de contexto: a vaga escolhida deixou de ser um seletor no meio da barra de ferramentas e virou o cabeçalho da tela, porque é ela que decide a ordem de tudo embaixo. A borda azul à esquerda é a mesma marca de "isto define o resto" usada nos outros painéis. */ .mc-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:10px;box-shadow:var(--sh-sm)} .mc-ctx-rot{font:700 10.5px var(--font-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto} .mc-ctx select{border-radius:10px;padding:9px 12px;font-size:14px;font-weight:700;color:var(--ink);font-family:var(--font-ui);min-width:240px;max-width:100%} .mc-ctx select:focus{outline:none;border-color:var(--blue)} .mc-ctx-nota{font-size:11.5px;color:var(--muted);flex:1;min-width:200px;line-height:1.45} /* Filtros rápidos, no lugar de abrir pasta por pasta. Contraste medido: ligado é #296FBA sobre #eaf1f8 (4,52:1) e desligado é o texto apagado sobre o cartão (7,53:1) — os dois passam. O ligado raspa no mínimo, e por isso ele NÃO se distingue só pela cor: ganha borda azul também, que é o que sustenta a leitura pra quem enxerga pouco contraste. */ .mc-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--sp-3)} .mc-chip{font:700 11.5px var(--font-ui);padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s} .mc-chip:hover:not(:disabled){border-color:var(--blue-l);color:var(--ink)} .mc-chip.on{background:#eaf1f8;border-color:var(--navy);color:var(--navy)} .mc-chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px} .mc-chip:disabled{opacity:.55;cursor:not-allowed} /* Lista de vagas no portal publico. A linha inteira e o