/* Kaizen — folha de estilo dos componentes (copie junto com tokens.css para o app). Prefixo k-. Classes reutilizáveis; nada de estilo repetido por elemento. A base usa :where(.k-raiz) para ter especificidade zero: qualquer classe de componente vence. */ /* ---------- base ---------- */ .k-raiz, .k-raiz * { box-sizing: border-box; } .k-raiz { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--font-inter); font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :where(.k-raiz) h1, :where(.k-raiz) h2, :where(.k-raiz) h3, :where(.k-raiz) h4, :where(.k-raiz) p, :where(.k-raiz) ul, :where(.k-raiz) ol, :where(.k-raiz) figure, :where(.k-raiz) dl, :where(.k-raiz) dd { margin: 0; } :where(.k-raiz) ul, :where(.k-raiz) ol { padding: 0; list-style: none; } :where(.k-raiz) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :where(.k-raiz) a { color: var(--cor-destaque); text-decoration: none; font-weight: 500; } :where(.k-raiz) a:hover { text-decoration: underline; } .k-raiz :focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; border-radius: var(--raio-pequeno); } .k-num { font-variant-numeric: tabular-nums; } .k-sec { color: var(--cor-texto-secundario); } .k-ter { color: var(--cor-texto-terciario); } .k-prosa { max-width: 720px; } .k-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* movimento: só ao abrir e fechar painel, diálogo, menu, calendário, folha e cartão */ .k-abre-fecha { transition: opacity var(--tempo-curto) var(--curva-saida), transform var(--tempo-medio) var(--curva-saida); } @media (prefers-reduced-motion: reduce) { .k-raiz *, .k-raiz *::before, .k-raiz *::after { transition: none !important; animation: none !important; } } /* tipografia (espelha tokens.json) */ .k-numero-grande { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.25px; } .k-numero-medio { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.25px; } .k-numero-celular { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.25px; } .k-titulo-tela { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.25px; } .k-titulo-bloco { font-size: 16px; line-height: 24px; font-weight: 600; } .k-marca-kaizen, .k-marca { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.25px; color: var(--cor-texto); } .k-corpo-grande { font-size: 16px; line-height: 24px; } .k-corpo { font-size: 15px; line-height: 22px; } .k-corpo-medio { font-size: 15px; line-height: 22px; font-weight: 500; } .k-rotulo { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--cor-texto-secundario); } .k-rotulo-regular { font-size: 13px; line-height: 16px; font-weight: 400; color: var(--cor-texto-secundario); } .k-rotulo-celular { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cor-texto-secundario); } /* ícones: SVG original do Lucide (ISC), copiado inline; traço padrão do Lucide (2) */ .k-ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .k-ic-20 { width: 20px; height: 20px; } .k-ic-14 { width: 14px; height: 14px; } /* ---------- 6. marca de estado (cor + ícone + palavra) ---------- */ .k-estado { display: inline-flex; align-items: center; gap: var(--espaco-4); height: 24px; padding: 0 var(--espaco-8) 0 6px; border-radius: var(--raio-pequeno); font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; } .k-estado .k-ic { width: 14px; height: 14px; stroke-width: 2; } .k-estado.k-lugar { background: var(--cor-fundo); color: var(--cor-texto-secundario); } .k-estado.k-atencao { background: var(--cor-atencao-fundo); color: var(--cor-atencao); } .k-estado.k-fora { background: var(--cor-fora-fundo); color: var(--cor-fora); } .k-estado.k-sem-dado { background: transparent; color: var(--cor-texto-terciario); border: 1px dashed var(--cor-contorno-forte); } .k-estado.k-grande { height: 28px; font-size: 15px; line-height: 20px; padding: 0 var(--espaco-12) 0 var(--espaco-8); } .k-estado.k-grande .k-ic { width: 16px; height: 16px; } /* marca compacta: ícone 14 + palavra + número, em linha com o texto; onde antes havia só cor */ .k-sinal { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 600; white-space: nowrap; } .k-sinal .k-ic { width: 14px; height: 14px; stroke-width: 2; align-self: center; } .k-sinal.k-atencao { color: var(--cor-atencao); } .k-sinal.k-fora { color: var(--cor-fora); } .k-sinal.k-lugar { color: var(--cor-texto-secundario); } /* etiqueta neutra: situação do cliente (em dia, atrasado, sumido) e classe ABC. Não é estado: sem cor, sem ícone de estado. */ .k-etiqueta { display: inline-flex; align-items: center; gap: var(--espaco-4); height: 24px; padding: 0 var(--espaco-8); border-radius: var(--raio-pequeno); border: 1px solid var(--cor-contorno-forte); background: var(--cor-superficie); color: var(--cor-texto-secundario); font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; } /* ---------- 1. moldura do computador ---------- */ .k-moldura { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 56px auto 1fr; min-height: 100vh; } .k-moldura > .k-menu-lateral { grid-row: 1 / span 3; } .k-moldura > .k-barra-cima { grid-column: 2; grid-row: 1; } .k-moldura > .k-faixa { grid-column: 2; grid-row: 2; } .k-moldura > .k-conteudo { grid-column: 2; grid-row: 3; } .k-menu-lateral { background: var(--cor-superficie); border-right: 1px solid var(--cor-contorno); display: flex; flex-direction: column; padding: 0 var(--espaco-8) var(--espaco-16); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .k-menu-lateral > * { flex-shrink: 0; } .k-menu-lateral .k-marca { flex: none; height: 56px; display: flex; align-items: center; padding: 0 calc(var(--espaco-8) + var(--espaco-12)); margin: 0 calc(-1 * var(--espaco-8)) var(--espaco-8); border-bottom: 1px solid var(--cor-contorno); } .k-menu-grupo { display: flex; align-items: center; gap: var(--espaco-8); height: 32px; padding: 0 var(--espaco-12); margin-top: var(--espaco-8); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--cor-texto-secundario); letter-spacing: 0.02em; } .k-menu-grupo .k-ic { width: 16px; height: 16px; } .k-menu-item { display: flex; align-items: center; gap: var(--espaco-8); height: 36px; padding: 0 var(--espaco-12); border-radius: var(--raio-medio); color: var(--cor-texto); font-weight: 400; white-space: nowrap; text-decoration: none; } .k-menu-item .k-ic { width: 16px; height: 16px; color: var(--cor-texto-secundario); } .k-menu-item:hover { background: var(--cor-fundo); text-decoration: none; } .k-menu-item[aria-current="page"] { background: var(--cor-destaque-fundo); color: var(--cor-destaque-forte); font-weight: 500; } .k-menu-item[aria-current="page"] .k-ic { color: var(--cor-destaque-forte); } .k-menu-sub .k-menu-item { height: 32px; padding-left: calc(var(--espaco-12) + 16px + var(--espaco-8)); } .k-menu-rodape { margin-top: auto; padding-top: var(--espaco-8); } /* ---------- 2. barra de cima (encolhe até 1366 px sem rolar) ---------- */ .k-barra-cima { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-contorno); display: flex; align-items: center; gap: var(--espaco-16); padding: 0 var(--espaco-32); height: 56px; position: sticky; top: 0; z-index: var(--z-faixa); min-width: 0; } .k-barra-cima .k-busca { flex: 1 1 160px; max-width: 320px; min-width: 0; } .k-barra-cima .k-atualizado { color: var(--cor-texto-secundario); margin-left: auto; white-space: nowrap; } .k-seletor-dia { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px; border: 1px solid var(--cor-contorno-forte); border-radius: var(--raio-medio); background: var(--cor-superficie); position: relative; flex: none; } .k-seletor-dia.k-outro-dia { background: var(--cor-destaque-fundo); border-color: var(--cor-destaque); } .k-seletor-dia .k-seta { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--raio-pequeno); color: var(--cor-texto-secundario); } .k-seletor-dia .k-seta:hover { background: var(--cor-fundo); color: var(--cor-texto); } .k-seletor-dia .k-seta:disabled { color: var(--cor-texto-desabilitado); cursor: default; background: none; } .k-seletor-dia .k-dia-texto { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--espaco-8); padding: 0 var(--espaco-8); height: 28px; border-radius: var(--raio-pequeno); } .k-seletor-dia .k-dia-texto:hover { background: var(--cor-fundo); } .k-seletor-dia .k-hoje { color: var(--cor-destaque); font-weight: 500; } .k-seletor-dia.k-outro-dia .k-dia-texto { color: var(--cor-destaque-forte); font-weight: 500; } .k-conta { display: inline-flex; align-items: center; gap: var(--espaco-8); height: 36px; padding: 0 var(--espaco-8); border-radius: var(--raio-medio); font-weight: 500; flex: none; } .k-conta:hover { background: var(--cor-fundo); } .k-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--cor-destaque-fundo); color: var(--cor-destaque-forte); display: grid; place-items: center; font-size: 13px; font-weight: 600; } .k-menu-aberto { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--cor-superficie-elevada); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); box-shadow: var(--sombra-p); padding: var(--espaco-8); z-index: var(--z-menu-aberto); text-align: left; } .k-menu-aberto .k-cabecalho { padding: var(--espaco-8) var(--espaco-12); border-bottom: 1px solid var(--cor-contorno); margin-bottom: var(--espaco-8); } .k-menu-aberto .k-item { display: flex; align-items: center; gap: var(--espaco-8); height: 36px; padding: 0 var(--espaco-12); border-radius: var(--raio-pequeno); width: 100%; text-align: left; font-weight: 400; } .k-menu-aberto .k-item:hover { background: var(--cor-fundo); } /* ---------- 3. calendário ---------- */ .k-calendario { width: 300px; background: var(--cor-superficie-elevada); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); box-shadow: var(--sombra-p); padding: var(--espaco-12); z-index: var(--z-menu-aberto); } .k-seletor-dia .k-calendario { position: absolute; top: calc(100% + 4px); left: 0; } .k-calendario .k-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--espaco-8); font-weight: 600; } .k-calendario table { width: 100%; border-collapse: collapse; } .k-calendario th { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--cor-texto-secundario); padding: 4px 0; text-align: center; } .k-calendario th.k-domingo { color: var(--cor-texto-terciario); } .k-calendario td { text-align: center; padding: 1px; } .k-calendario td button { width: 38px; height: 34px; border-radius: var(--raio-pequeno); position: relative; } .k-calendario td button:hover { background: var(--cor-fundo); } .k-calendario td button:focus-visible { outline-offset: -2px; } /* o anel fica dentro do dia: não encosta no vizinho nem perde um lado */ .k-calendario .k-outro-mes { color: var(--cor-texto-terciario); } .k-calendario .k-sem-expediente { color: var(--cor-texto-terciario); } .k-calendario .k-sem-expediente::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cor-contorno-forte); } .k-calendario .k-hoje { color: var(--cor-destaque); font-weight: 600; box-shadow: inset 0 0 0 1px var(--cor-destaque); } .k-calendario .k-escolhido { background: var(--cor-destaque); color: var(--cor-sobre-destaque); font-weight: 600; } .k-calendario .k-desligado { color: var(--cor-texto-desabilitado); cursor: default; } .k-calendario .k-desligado:hover { background: none; } .k-calendario .k-desligado::after { display: none; } .k-calendario .k-rodape { margin-top: var(--espaco-8); padding-top: var(--espaco-8); border-top: 1px solid var(--cor-contorno); display: flex; justify-content: space-between; align-items: center; } .k-calendario .k-legenda { display: flex; gap: var(--espaco-12); font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } .k-calendario .k-legenda span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--cor-contorno-forte); margin-right: 4px; vertical-align: 2px; } /* ---------- 4. moldura do celular (o app liga o modo celular pondo a classe k-celular na raiz) ---------- */ /* a moldura ocupa a tela inteira (o modo celular vale até 599 px); as duas barras não encolhem e só o conteúdo rola, com a barra de baixo presa ao pé da tela */ .k-celular { width: 100%; height: 100vh; height: 100dvh; background: var(--cor-fundo); position: relative; display: flex; flex-direction: column; font-size: 15px; line-height: 22px; } /* nada abaixo de 14 px no celular: toda regra de 13 px tem aqui a sua versão de 14 px */ .k-celular .k-rotulo, .k-celular .k-rotulo-regular, .k-celular .k-estado:not(.k-grande), .k-celular .k-etiqueta, .k-celular .k-contagem, .k-celular .k-menu-grupo, .k-celular .k-avatar, .k-celular .k-calendario th, .k-celular .k-calendario .k-legenda, .k-celular .k-cartao-pergunta .k-conta-escrita, .k-celular .k-numero-bloco .k-conta-escrita, .k-celular .k-indicador .k-numeros-linha small, .k-celular .k-indicador.k-indicador-cab, .k-celular .k-meta-rotulos, .k-celular .k-meta-rotulos-pos, .k-celular .k-dividida .k-partes, .k-celular .k-tabela th, .k-celular .k-lista-detalhe .k-item .k-sub, .k-celular .k-campo > label, .k-celular .k-campo .k-rotulo-campo, .k-celular .k-mensagem-erro, .k-celular .k-efeito, .k-celular .k-dica-texto, .k-celular .k-bloco-ia .k-aviso { font-size: 14px; line-height: 20px; } .k-barra-cima-celular { flex: none; height: 56px; background: var(--cor-superficie); border-bottom: 1px solid var(--cor-contorno); display: flex; align-items: center; gap: var(--espaco-8); padding: 0 var(--espaco-8) 0 var(--espaco-16); } .k-barra-cima-celular .k-marca { font-size: 16px; } .k-barra-cima-celular .k-dia-celular { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--espaco-8); border-radius: var(--raio-medio); font-weight: 500; margin-left: auto; } .k-barra-cima-celular .k-dia-celular small { font-weight: 400; color: var(--cor-texto-secundario); font-size: 14px; } .k-barra-cima-celular .k-dia-celular:hover { background: var(--cor-fundo); } /* dia que não é hoje: as cores do .k-outro-dia do computador */ .k-barra-cima-celular .k-dia-celular.k-outro-dia, .k-barra-cima-celular .k-dia-celular.k-outro-dia:hover { background: var(--cor-destaque-fundo); border: 1px solid var(--cor-destaque); color: var(--cor-destaque-forte); } .k-conteudo-celular { padding: var(--espaco-16); display: flex; flex-direction: column; gap: var(--espaco-16); flex: 1; min-height: 0; overflow-y: auto; } .k-barra-baixo { flex: none; height: 64px; background: var(--cor-superficie); border-top: 1px solid var(--cor-contorno); display: grid; grid-template-columns: repeat(5, 1fr); } .k-barra-baixo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; font-size: 14px; line-height: 16px; font-weight: 500; color: var(--cor-texto-secundario); text-decoration: none; } .k-barra-baixo a .k-ic { width: 22px; height: 22px; } .k-barra-baixo a[aria-current="page"] { color: var(--cor-destaque-forte); } .k-barra-baixo a[aria-current="page"] .k-ic { stroke-width: 2.5; } .k-botao-icone-44 { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--raio-medio); color: var(--cor-texto); } .k-botao-icone-44:hover { background: var(--cor-fundo); } .k-celular .k-cartao-pergunta .k-excecoes-mini a, .k-celular .k-cartao-pergunta .k-ver, .k-celular .k-excecoes .k-linha a, .k-celular .k-excecoes .k-ver-todos { min-height: 44px; } .k-celular .k-cartao-pergunta .k-linha-excecao a { display: inline-flex; align-items: center; min-height: 44px; } .k-celular .k-cartao-pergunta .k-cab h2 a { display: block; padding: 10px 0; margin: -10px 0; } /* 44 px de área por linha de título, sem mudar o desenho do cartão */ .k-celular .k-cartao-pergunta .k-abre { width: 44px; height: 44px; } .k-celular .k-botao { min-height: 44px; } .k-celular .k-entrada, .k-celular .k-busca .k-entrada { height: 44px; } .k-celular .k-gatilho { width: 44px; height: 44px; margin: 0 0 0 -10px; border-radius: var(--raio-medio); } /* o quadrado de 44 px inteiro recebe o toque: nada do número fica por cima */ .k-celular .k-faixa .k-acao { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; } /* também 44 px nas abas, visões, chips, "Limpar filtros", botões só de ícone (na largura também) e na tabela (ordenar e nome) */ .k-celular .k-aba, .k-celular .k-visoes button, .k-celular .k-chip, .k-celular .k-limpar { height: 44px; } /* no celular, as abas e as visões que não cabem rolam para o lado dentro da própria faixa; a tela não rola para o lado */ .k-celular .k-abas, .k-celular .k-visoes { display: flex; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .k-celular .k-abas::-webkit-scrollbar, .k-celular .k-visoes::-webkit-scrollbar { display: none; } .k-celular .k-abas > *, .k-celular .k-visoes > * { flex: none; } .k-celular .k-abas { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--cor-contorno); } /* a linha de baixo vira sombra interna, para o sublinhado da aba escolhida não ser cortado */ .k-celular .k-aba { margin-bottom: 0; } .k-celular .k-botao.k-icone, .k-celular .k-botao.k-icone.k-pequeno { width: 44px; height: 44px; } .k-celular .k-tabela th, .k-celular .k-tabela td { height: 44px; } .k-celular .k-tabela th button, .k-celular .k-tabela td.k-nome a { display: inline-flex; align-items: center; min-height: 44px; } .k-celular .k-busca .k-limpar-busca { width: 44px; height: 44px; right: 0; } .k-celular .k-menu-colunas label { min-height: 44px; } /* linha do vendedor no cartão aberto: quando o valor desce de linha, 8 px em cima e embaixo, sem encostar na divisória */ .k-celular .k-cartao-pergunta .k-excecoes-mini a, .k-celular .k-cartao-pergunta .k-excecoes-mini .k-linha-neutra { padding: 8px 0; } /* ---------- 21. folha que sobe de baixo ---------- */ .k-veu-celular { position: fixed; inset: 0; background: rgba(21, 20, 25, 0.4); z-index: var(--z-painel); display: flex; align-items: flex-end; } .k-folha { width: 100%; max-height: 85vh; overflow: auto; background: var(--cor-superficie-elevada); border-radius: var(--raio-maior) var(--raio-maior) 0 0; box-shadow: var(--sombra-m); padding: var(--espaco-8) var(--espaco-16) var(--espaco-24); display: flex; flex-direction: column; gap: var(--espaco-12); } .k-folha .k-puxador { width: 36px; height: 4px; border-radius: 2px; background: var(--cor-contorno-forte); margin: 0 auto var(--espaco-4); flex: none; } .k-folha .k-cab { display: flex; align-items: center; justify-content: space-between; min-height: 44px; } .k-folha .k-calendario { width: 100%; box-shadow: none; border: 0; padding: 0; } .k-folha .k-calendario table { table-layout: fixed; } /* as 7 colunas com a mesma largura */ .k-folha .k-calendario td { padding: 0; } .k-folha .k-calendario td button { width: 100%; height: 44px; } .k-folha .k-calendario .k-cab .k-botao { width: 44px; height: 44px; } .k-folha .k-rodape-folha { display: flex; gap: var(--espaco-12); padding-top: var(--espaco-8); } .k-folha .k-rodape-folha .k-botao { flex: 1; } /* ---------- 5. faixa de aviso ---------- */ .k-faixa { display: flex; align-items: center; gap: var(--espaco-12); min-height: 44px; padding: var(--espaco-8) var(--espaco-32); border-bottom: 1px solid var(--cor-contorno); background: var(--cor-fundo); color: var(--cor-texto); } .k-faixa .k-ic { width: 20px; height: 20px; } .k-faixa strong { font-weight: 600; } /* a palavra do estado antes da frase: "Atenção" */ .k-faixa .k-acao { margin-left: auto; white-space: nowrap; font-weight: 500; color: inherit; text-decoration: underline; } .k-faixa.k-atencao { background: var(--cor-atencao-fundo); color: var(--cor-atencao); border-bottom-color: var(--ambar-100); } .k-faixa.k-neutra { background: var(--cor-fundo-faixa-neutra); color: var(--cor-texto); } .k-faixa.k-neutra .k-acao { color: var(--cor-destaque-forte); } .k-faixa.k-sem-conexao { background: var(--cinza-800); color: var(--branco); border-bottom-color: var(--cinza-800); } .k-faixa.k-sem-conexao .k-ic { color: var(--branco); } .k-faixa.k-sem-conexao .k-acao { color: var(--branco); } .k-faixa.k-sem-conexao :focus-visible { outline-color: var(--branco); } /* o anel azul daria 2,9:1 sobre o cinza escuro; branco dá 14,6:1 */ .k-celular .k-faixa { flex: none; padding: var(--espaco-8) var(--espaco-16); font-size: 14px; line-height: 20px; } /* ---------- 7. cartão de pergunta ---------- */ /* Fechado: título com a pergunta, marca, número com comparação, frase-resumo, UMA linha de exceção, rodapé "Ver o desvio". Aberto (botão da seta): barra de meta, lista completa e os outros itens. */ .k-cartao { background: var(--cor-superficie); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); padding: var(--espaco-16); } .k-cartao-pergunta { display: flex; flex-direction: column; gap: var(--espaco-8); padding: var(--espaco-24); position: relative; } .k-cartao-pergunta .k-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espaco-12); } .k-cartao-pergunta .k-cab h2 { font-size: 16px; line-height: 24px; font-weight: 600; } .k-cartao-pergunta .k-cab h2 a { color: inherit; font-weight: inherit; } .k-cartao-pergunta .k-cab h2 a:hover { color: var(--cor-destaque); } .k-cartao-pergunta .k-cab .k-estado { flex: none; } .k-cartao-pergunta .k-numero { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.25px; margin-top: var(--espaco-8); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--espaco-8); } .k-cartao-pergunta .k-numero .k-unidade { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--cor-texto-secundario); letter-spacing: 0; } .k-cartao-pergunta .k-contexto { font-size: 15px; line-height: 22px; color: var(--cor-texto-secundario); } .k-cartao-pergunta .k-frase { font-size: 15px; line-height: 22px; margin-top: var(--espaco-4); } .k-cartao-pergunta .k-linha-excecao { color: var(--cor-texto-secundario); } .k-cartao-pergunta .k-linha-excecao a { color: var(--cor-texto); font-weight: 500; } .k-cartao-pergunta .k-linha-excecao a:hover { color: var(--cor-destaque); } .k-cartao-pergunta .k-acao-cartao { align-self: flex-start; } .k-cartao-pergunta .k-rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-8); border-top: 1px solid var(--cor-contorno); padding-top: var(--espaco-12); margin-top: auto; } .k-cartao-pergunta .k-rodape-acoes { display: flex; align-items: center; gap: var(--espaco-8); margin-left: auto; } .k-cartao-pergunta .k-ver { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; white-space: nowrap; } .k-cartao-pergunta .k-abre { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--raio-medio); color: var(--cor-texto-secundario); } .k-cartao-pergunta .k-abre:hover { background: var(--cor-fundo); color: var(--cor-texto); } .k-cartao-pergunta .k-abre .k-ic { transition: transform var(--tempo-curto) var(--curva-saida); } .k-cartao-pergunta .k-abre[aria-expanded="true"] .k-ic { transform: rotate(180deg); } .k-cartao-pergunta .k-mais { display: none; flex-direction: column; gap: var(--espaco-16); border-top: 1px solid var(--cor-contorno); padding-top: var(--espaco-16); margin-top: var(--espaco-4); } .k-cartao-pergunta.k-aberto .k-mais { display: flex; } .k-cartao-pergunta .k-excecoes-mini { display: flex; flex-direction: column; } .k-cartao-pergunta .k-excecoes-mini .k-rotulo { padding-bottom: var(--espaco-4); } .k-cartao-pergunta .k-excecoes-mini a, .k-cartao-pergunta .k-excecoes-mini .k-linha-neutra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--espaco-12); min-height: 32px; padding: 4px 0; color: var(--cor-texto); font-weight: 500; border-top: 1px solid var(--cor-contorno); } .k-cartao-pergunta .k-excecoes-mini .k-linha-neutra { font-weight: 400; } .k-cartao-pergunta .k-excecoes-mini a:hover { color: var(--cor-destaque); text-decoration: none; } .k-cartao-pergunta .k-excecoes-mini .k-valor { font-weight: 600; margin-left: auto; text-align: right; } /* quando não cabe ao lado do nome, desce para a linha de baixo, à direita */ .k-cartao-pergunta .k-excecoes-mini .k-valor > span { white-space: nowrap; } /* e, se nem assim couber, quebra entre as partes, nunca dentro delas */ .k-cartao-pergunta.k-sem-dado .k-numero { font-size: 20px; line-height: 40px; font-weight: 500; letter-spacing: 0; color: var(--cor-texto-terciario); } .k-cartao-pergunta.k-sem-dado .k-contexto { color: var(--cor-texto-terciario); } .k-cartao-pergunta .k-conta-escrita { font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } .k-celular .k-cartao-pergunta { padding: var(--espaco-16); } .k-celular .k-cartao-pergunta .k-numero { font-size: 28px; line-height: 36px; } /* ---------- 8. número grande com unidade e comparação ---------- */ .k-numero-bloco { display: flex; flex-direction: column; gap: 2px; min-width: 200px; } .k-numero-bloco .k-rotulo { display: flex; align-items: center; gap: 4px; } .k-numero-bloco .k-valor { display: flex; align-items: baseline; gap: var(--espaco-8); flex-wrap: wrap; } .k-numero-bloco .k-unidade { color: var(--cor-texto-secundario); font-weight: 500; font-size: 15px; } .k-numero-bloco .k-contra { color: var(--cor-texto-secundario); display: flex; align-items: center; gap: var(--espaco-8); flex-wrap: wrap; } .k-numero-bloco .k-diferenca { font-weight: 600; color: var(--cor-texto); } .k-numero-bloco .k-conta-escrita { font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } .k-numeros { display: flex; gap: var(--espaco-32); flex-wrap: wrap; } /* ---------- 9. linha de indicador com barra de meta (bullet) ---------- */ /* Trilha até 120% da meta: largura dos filhos em % da trilha (valor ÷ 1,2). Realizado sempre azul; o estado vai na marca ao lado do nome. */ .k-indicador { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; align-items: center; gap: var(--espaco-16); min-height: 44px; padding: var(--espaco-8) 0; border-bottom: 1px solid var(--cor-contorno); } .k-indicador .k-nome { font-weight: 500; display: flex; align-items: center; gap: var(--espaco-8); flex-wrap: wrap; } .k-indicador .k-numeros-linha { text-align: right; white-space: nowrap; } .k-indicador .k-numeros-linha b { font-weight: 600; } .k-indicador .k-numeros-linha small { display: block; font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } /* cabeçalho das linhas: a mesma grade, para as colunas baterem */ .k-indicador.k-indicador-cab { min-height: 0; padding: 0 0 var(--espaco-8); font-size: 13px; line-height: 16px; font-weight: 500; color: var(--cor-texto-secundario); } .k-indicador.k-indicador-cab > :last-child { text-align: right; } /* no celular: uma coluna — o nome, a barra na largura toda e os números embaixo, alinhados à esquerda */ .k-celular .k-indicador { grid-template-columns: minmax(0, 1fr); row-gap: var(--espaco-4); } .k-celular .k-indicador .k-numeros-linha, .k-celular .k-indicador.k-indicador-cab > :last-child { text-align: left; white-space: normal; } .k-meta-bloco { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .k-meta { position: relative; height: 8px; background: var(--cor-grafico-neutro-fraco); border-radius: 2px; margin: var(--espaco-4) 0; } .k-meta .k-realizado { position: absolute; left: 0; top: 0; height: 100%; background: var(--cor-grafico-destaque); border-radius: 2px; } .k-meta .k-projecao { position: absolute; top: 0; width: 2px; height: 8px; margin-left: -1px; background: var(--cor-texto); } .k-meta .k-traco { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--cor-texto); margin-left: -1px; border-radius: 1px; } .k-meta-rotulos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--espaco-8); font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); white-space: nowrap; } .k-meta-rotulos > :last-child { margin-left: auto; } /* quando desce de linha, o da direita continua à direita */ .k-meta-rotulos-pos { position: relative; height: 16px; font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } .k-meta-rotulos-pos span { position: absolute; top: 0; white-space: nowrap; } .k-meta-rotulos-pos .k-rot-meta { transform: translateX(-100%); color: var(--cor-texto); font-weight: 500; padding-right: 6px; } .k-meta.k-fina { height: 6px; } .k-meta.k-fina .k-projecao { height: 6px; } /* ---------- 10. barra dividida em partes (só neutros) ---------- */ .k-dividida-bloco { display: flex; flex-direction: column; gap: var(--espaco-8); } .k-dividida { display: flex; flex-direction: column; gap: var(--espaco-8); } .k-dividida .k-barra { display: flex; height: 16px; border-radius: var(--raio-pequeno); overflow: hidden; gap: 2px; } .k-dividida .k-parte { height: 100%; background: var(--cinza-500); } .k-dividida .k-parte.k-p1 { background: var(--cinza-700); } .k-dividida .k-parte.k-p2 { background: var(--cinza-600); } .k-dividida .k-parte.k-p3 { background: var(--cinza-500); } .k-dividida .k-parte.k-p4 { background: var(--cinza-400); } .k-dividida .k-partes { display: flex; flex-wrap: wrap; gap: var(--espaco-4) var(--espaco-24); font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } .k-dividida .k-partes span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--cinza-500); margin-right: 6px; vertical-align: -1px; } .k-dividida .k-partes span.k-p1::before { background: var(--cinza-700); } .k-dividida .k-partes span.k-p2::before { background: var(--cinza-600); } .k-dividida .k-partes span.k-p3::before { background: var(--cinza-500); } .k-dividida .k-partes span.k-p4::before { background: var(--cinza-400); } .k-dividida .k-partes b { color: var(--cor-texto); font-weight: 600; } /* ---------- 11. tabela ---------- */ .k-tabela-bloco { background: var(--cor-superficie); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); } .k-tabela-bloco .k-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-16); min-height: 48px; padding: 0 var(--espaco-16); border-bottom: 1px solid var(--cor-contorno); } .k-tabela-bloco .k-cab .k-direita { display: flex; align-items: center; gap: var(--espaco-8); position: relative; } .k-tabela-bloco .k-cab .k-sec { white-space: nowrap; } /* no celular, quando o título, a contagem e "Colunas" não cabem numa linha, a contagem e "Colunas" descem, à direita */ .k-celular .k-tabela-bloco .k-cab { flex-wrap: wrap; row-gap: var(--espaco-4); padding-top: var(--espaco-8); padding-bottom: var(--espaco-8); } .k-celular .k-tabela-bloco .k-cab .k-direita { margin-left: auto; } .k-tabela-rolagem { max-height: 420px; overflow: auto; border-radius: 0 0 var(--raio-medio) var(--raio-medio); } .k-tabela { width: 100%; border-collapse: separate; border-spacing: 0; } .k-tabela th, .k-tabela td { height: 36px; padding: 0 var(--espaco-12); text-align: right; border-bottom: 1px solid var(--cor-contorno); white-space: nowrap; vertical-align: middle; } .k-tabela th { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--cor-texto-secundario); background: var(--cor-superficie); position: sticky; top: 0; z-index: 1; } .k-tabela th:first-child, .k-tabela td:first-child, .k-tabela th.k-esq, .k-tabela td.k-esq { text-align: left; } .k-tabela th:first-child, .k-tabela td:first-child { padding-left: var(--espaco-16); } .k-tabela th:last-child, .k-tabela td:last-child { padding-right: var(--espaco-16); } .k-tabela th button { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; } .k-tabela th button:hover { color: var(--cor-texto); } .k-tabela th[aria-sort] button { color: var(--cor-texto); } .k-tabela th[aria-sort] button .k-ic { color: var(--cor-destaque); } .k-tabela th:not([aria-sort]) button .k-ic { opacity: 0; } .k-tabela th:not([aria-sort]) button:hover .k-ic { opacity: 1; } .k-tabela tbody tr.k-clicavel { cursor: pointer; } .k-tabela tbody tr.k-clicavel:hover td, .k-tabela tbody tr.k-mouse td { background: var(--cor-fundo); } .k-tabela tbody tr.k-selecionada td { background: var(--cor-destaque-fundo); } .k-tabela tbody tr.k-selecionada td:first-child { box-shadow: inset 3px 0 0 var(--cor-destaque); } .k-tabela tbody tr.k-selecionada a:hover { color: var(--cor-destaque-forte); } .k-tabela tr.k-grupo td { background: var(--cor-fundo); font-weight: 600; } .k-tabela tr.k-grupo td:first-child .k-ic { vertical-align: -3px; margin-right: 4px; color: var(--cor-texto-secundario); } .k-tabela tr.k-totais td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--cor-contorno-forte); background: var(--cor-superficie); } .k-tabela td.k-comp { color: var(--cor-texto-secundario); } .k-tabela td.k-recuo { padding-left: var(--espaco-40); } .k-tabela td.k-nome a { color: inherit; font-weight: 500; } .k-tabela td.k-nome a:hover { color: var(--cor-destaque); } .k-tabela-vazia { padding: var(--espaco-32) var(--espaco-16); text-align: center; color: var(--cor-texto-secundario); display: flex; flex-direction: column; align-items: center; gap: var(--espaco-8); } .k-tabela-vazia .k-ic { width: 24px; height: 24px; color: var(--cor-contorno-forte); } .k-menu-colunas { position: absolute; top: calc(100% + 4px); right: 0; width: 220px; background: var(--cor-superficie-elevada); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); box-shadow: var(--sombra-p); padding: var(--espaco-8); z-index: var(--z-menu-aberto); display: flex; flex-direction: column; } .k-menu-colunas .k-rotulo { padding: var(--espaco-4) var(--espaco-12) var(--espaco-8); } .k-menu-colunas label { display: flex; align-items: center; gap: var(--espaco-8); min-height: 36px; padding: 0 var(--espaco-12); border-radius: var(--raio-pequeno); font-weight: 400; cursor: pointer; } .k-menu-colunas label:hover { background: var(--cor-fundo); } .k-menu-colunas input { width: 18px; height: 18px; accent-color: var(--cor-destaque); margin: 0; } /* ---------- 12. lista de exceções ---------- */ .k-excecoes { display: flex; flex-direction: column; } .k-excecoes .k-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-16); min-height: 36px; border-top: 1px solid var(--cor-contorno); } .k-excecoes .k-linha a { color: var(--cor-texto); font-weight: 500; flex: 1; display: flex; align-items: center; min-height: 36px; } .k-excecoes .k-linha a:hover { color: var(--cor-destaque); } .k-excecoes .k-linha .k-valor { white-space: nowrap; color: var(--cor-texto); font-weight: 500; } .k-excecoes .k-ver-todos { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; border-top: 1px solid var(--cor-contorno); font-weight: 500; } .k-excecoes .k-vazio { min-height: 36px; display: flex; align-items: center; color: var(--cor-texto-secundario); border-top: 1px solid var(--cor-contorno); } /* ---------- 13. lista-detalhe ---------- */ .k-lista-detalhe { display: grid; grid-template-columns: minmax(360px, 2fr) 3fr; min-height: 360px; background: var(--cor-superficie); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); overflow: hidden; } .k-lista-detalhe.k-tabela-esquerda { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .k-lista-detalhe .k-lista { border-right: 1px solid var(--cor-contorno); overflow: auto; min-width: 0; } .k-lista-detalhe .k-item { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-16); padding: var(--espaco-8) var(--espaco-16); min-height: 52px; border-bottom: 1px solid var(--cor-contorno); width: 100%; text-align: left; } .k-lista-detalhe .k-item:hover { background: var(--cor-fundo); } .k-lista-detalhe .k-item[aria-selected="true"] { background: var(--cor-destaque-fundo); box-shadow: inset 3px 0 0 var(--cor-destaque); } .k-lista-detalhe .k-item .k-texto { display: flex; flex-direction: column; min-width: 0; } .k-lista-detalhe .k-item .k-nome { font-weight: 500; } .k-lista-detalhe .k-item .k-sub { color: var(--cor-texto-secundario); font-size: 13px; line-height: 16px; } .k-lista-detalhe .k-item .k-valor { white-space: nowrap; color: var(--cor-texto-secundario); } .k-lista-detalhe .k-detalhe { padding: var(--espaco-24); display: flex; flex-direction: column; gap: var(--espaco-16); min-width: 0; } .k-lista-detalhe .k-detalhe .k-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espaco-16); } .k-lista-detalhe .k-tabela-bloco { border: 0; border-radius: 0; } .k-dados { display: grid; grid-template-columns: max-content 1fr; gap: var(--espaco-4) var(--espaco-16); } .k-dados dt { color: var(--cor-texto-secundario); } /* ---------- 14. abas, visões, período, filtros, busca ---------- */ .k-abas { display: flex; gap: var(--espaco-24); border-bottom: 1px solid var(--cor-contorno); } .k-aba { height: 40px; padding: 0 2px; display: inline-flex; align-items: center; gap: var(--espaco-8); font-weight: 500; color: var(--cor-texto-secundario); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .k-aba:hover { color: var(--cor-texto); } .k-aba[aria-selected="true"] { color: var(--cor-texto); border-bottom-color: var(--cor-destaque); } .k-contagem { font-size: 13px; line-height: 16px; padding: 2px 6px; border-radius: var(--raio-pilula); background: var(--cor-fundo); color: var(--cor-texto-secundario); font-weight: 500; } .k-aba[aria-selected="true"] .k-contagem { background: var(--cor-destaque-fundo); color: var(--cor-destaque-forte); } .k-visoes { display: inline-flex; padding: 2px; background: var(--cor-fundo); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); } .k-visoes button { height: 32px; padding: 0 var(--espaco-12); border-radius: 6px; font-weight: 500; color: var(--cor-texto-secundario); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .k-visoes button:hover { color: var(--cor-texto); } .k-visoes button[aria-pressed="true"] { background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-xp); } .k-visoes button .k-contagem { padding: 0 6px; } .k-periodo-fixo { color: var(--cor-texto-secundario); white-space: nowrap; } /* o período em texto, quando não há escolha */ .k-filtros { display: flex; align-items: center; gap: var(--espaco-8); flex-wrap: wrap; } .k-filtros .k-recorte { color: var(--cor-texto-secundario); margin-left: var(--espaco-8); } .k-chip { display: inline-flex; align-items: center; gap: var(--espaco-4); height: 32px; padding: 0 var(--espaco-12); border: 1px solid var(--cor-contorno-forte); border-radius: var(--raio-pilula); background: var(--cor-superficie); font-weight: 500; white-space: nowrap; } .k-chip:hover { border-color: var(--cor-texto-secundario); } .k-chip[aria-pressed="true"], .k-chip.k-ativo { background: var(--cor-destaque-fundo); border-color: var(--cor-destaque-forte); color: var(--cor-destaque-forte); } .k-chip .k-ic { width: 14px; height: 14px; } .k-chip .k-remover { margin-left: 2px; margin-right: -6px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; } .k-chip .k-remover:hover { background: rgba(0, 83, 186, 0.12); } .k-limpar { height: 32px; padding: 0 var(--espaco-8); color: var(--cor-texto-secundario); font-weight: 500; } .k-limpar:hover { color: var(--cor-texto); text-decoration: underline; } .k-busca { position: relative; display: inline-flex; align-items: center; width: 100%; } .k-busca .k-ic { position: absolute; left: 12px; color: var(--cor-texto-secundario); pointer-events: none; } .k-busca .k-entrada { padding-left: 36px; height: 36px; } .k-busca .k-limpar-busca { position: absolute; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--cor-texto-secundario); } .k-busca .k-limpar-busca:hover { background: var(--cor-fundo); } /* ---------- 15. botões ---------- */ .k-botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-8); height: 40px; padding: 0 var(--espaco-16); border-radius: var(--raio-medio); font-size: 15px; line-height: 22px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; text-decoration: none; cursor: pointer; } .k-botao:hover { text-decoration: none; } .k-botao.k-pequeno { height: 32px; padding: 0 var(--espaco-12); font-size: 14px; } .k-botao.k-grande { height: 48px; padding: 0 var(--espaco-24); font-size: 16px; } .k-botao.k-principal { background: var(--cor-destaque); color: var(--cor-sobre-destaque); } .k-botao.k-principal:hover, .k-botao.k-principal.k-mouse { background: var(--cor-destaque-forte); } .k-botao.k-principal:active { background: var(--cor-destaque-pressionado); } .k-botao.k-secundario { background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-contorno-forte); } .k-botao.k-secundario:hover, .k-botao.k-secundario.k-mouse { background: var(--cor-fundo); border-color: var(--cor-texto-secundario); } .k-botao.k-secundario:active { background: var(--cinza-100); } .k-botao.k-texto { background: transparent; color: var(--cor-destaque); padding: 0 var(--espaco-8); } .k-botao.k-texto:hover, .k-botao.k-texto.k-mouse { background: var(--cor-destaque-fundo); color: var(--cor-destaque-forte); } .k-botao.k-icone { width: 40px; padding: 0; color: var(--cor-texto-secundario); } .k-botao.k-icone:hover, .k-botao.k-icone.k-mouse { background: var(--cor-fundo); color: var(--cor-texto); } .k-botao.k-icone.k-pequeno { width: 32px; } .k-botao.k-externo .k-ic:last-child { width: 14px; height: 14px; } .k-botao.k-foco { outline: 2px solid var(--cor-foco); outline-offset: 2px; } /* na prancha: mostra o anel de foco, como .k-mouse mostra o mouse em cima */ .k-botao:disabled, .k-botao[aria-disabled="true"] { background: var(--cinza-100); color: var(--cor-texto-desabilitado); border-color: transparent; cursor: not-allowed; } .k-botao.k-icone:disabled, .k-botao.k-texto:disabled { background: transparent; } .k-botao.k-cheio { width: 100%; } .k-botoes { display: flex; gap: var(--espaco-12); align-items: center; flex-wrap: wrap; } /* ---------- 16. formulário ---------- */ .k-campo { display: flex; flex-direction: column; gap: var(--espaco-8); } .k-campo > label, .k-campo .k-rotulo-campo { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--cor-texto); } .k-campo .k-opcional { color: var(--cor-texto-terciario); font-weight: 400; } .k-entrada { height: 40px; padding: 0 var(--espaco-12); border: 1px solid var(--cor-contorno-forte); border-radius: var(--raio-medio); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; width: 100%; } .k-entrada::placeholder { color: var(--cor-texto-terciario); } .k-entrada:hover { border-color: var(--cor-texto-secundario); } .k-entrada:focus, .k-entrada.k-foco { outline: 2px solid var(--cor-foco); outline-offset: 0; border-color: var(--cor-foco); } .k-entrada:disabled { background: var(--cor-fundo); color: var(--cor-texto-desabilitado); border-color: var(--cor-contorno-campo); } .k-entrada.k-num, .k-entrada[inputmode="decimal"] { text-align: right; } .k-campo.k-erro .k-entrada { border-color: var(--cor-fora-marca); } .k-campo.k-erro .k-entrada:focus { outline-color: var(--cor-fora-marca); } .k-campo.k-erro .k-efeito { display: none; } .k-mensagem-erro { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 16px; color: var(--cor-fora); } .k-mensagem-erro .k-ic { width: 14px; height: 14px; } .k-efeito { font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } .k-efeito b { color: var(--cor-texto); font-weight: 500; } .k-entrada-prefixo { position: relative; display: flex; align-items: center; } .k-entrada-prefixo .k-prefixo { position: absolute; left: 12px; color: var(--cor-texto-secundario); pointer-events: none; } .k-entrada-prefixo .k-entrada { padding-left: 40px; } .k-entrada-sufixo { position: relative; display: flex; align-items: center; } .k-entrada-sufixo .k-ic { position: absolute; right: 12px; color: var(--cor-texto-secundario); pointer-events: none; } .k-entrada-sufixo .k-entrada { padding-right: 36px; } .k-selecao { appearance: none; -webkit-appearance: none; padding-right: 36px; } .k-formulario { display: flex; flex-direction: column; gap: var(--espaco-16); } .k-formulario .k-linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-16); } .k-confirmacao { display: flex; gap: var(--espaco-12); align-items: flex-start; padding: var(--espaco-12); background: var(--cor-fundo); border-radius: var(--raio-medio); } .k-confirmacao .k-ic { color: var(--cor-texto-secundario); margin-top: 2px; } .k-marcar { display: flex; align-items: center; gap: var(--espaco-8); min-height: 24px; } .k-marcar input { width: 18px; height: 18px; accent-color: var(--cor-destaque); margin: 0; } .k-aviso-falha { display: flex; align-items: flex-start; gap: var(--espaco-12); padding: var(--espaco-12); background: var(--cor-fora-fundo); color: var(--cor-fora); border-radius: var(--raio-medio); } .k-aviso-falha .k-ic { width: 20px; height: 20px; flex: none; margin-top: 1px; } /* diálogo e painel lateral (fixos na tela; no celular o formulário vai para a folha) */ .k-veu { position: fixed; inset: 0; background: rgba(21, 20, 25, 0.4); z-index: var(--z-painel); display: grid; place-items: center; } .k-dialogo { width: 480px; max-width: calc(100% - 32px); background: var(--cor-superficie-elevada); border-radius: var(--raio-grande); box-shadow: var(--sombra-m); padding: var(--espaco-24); display: flex; flex-direction: column; gap: var(--espaco-16); } .k-dialogo .k-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espaco-16); } .k-dialogo .k-acoes { display: flex; justify-content: flex-end; gap: var(--espaco-12); padding-top: var(--espaco-8); } .k-painel-lateral { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; background: var(--cor-superficie-elevada); box-shadow: var(--sombra-m); display: flex; flex-direction: column; z-index: var(--z-painel); } .k-moldura .k-painel-lateral { top: 56px; } .k-painel-lateral .k-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--espaco-16) 0 var(--espaco-24); border-bottom: 1px solid var(--cor-contorno); min-height: 56px; } .k-painel-lateral .k-corpo { padding: var(--espaco-24); overflow: auto; flex: 1; } .k-painel-lateral .k-rodape { padding: var(--espaco-16) var(--espaco-24); border-top: 1px solid var(--cor-contorno); display: flex; justify-content: flex-end; gap: var(--espaco-12); } /* ---------- 17. gráficos (o JS mede a caixa e desenha o SVG na largura real; letra 13 px) ---------- */ .k-grafico-caixa { display: block; width: 100%; min-height: 150px; } .k-grafico { display: block; width: 100%; overflow: visible; font-family: var(--font-inter); } .k-celular .k-grafico text { font-size: 14px; } .k-grafico text { font-size: 13px; fill: var(--cor-texto-secundario); font-variant-numeric: tabular-nums; } .k-grafico .k-texto-forte { fill: var(--cor-texto); font-weight: 500; } .k-grafico .k-texto-atencao { fill: var(--cor-atencao); font-weight: 600; } .k-grafico .k-texto-fora { fill: var(--cor-fora); font-weight: 600; } .k-grafico .k-grade { stroke: var(--cor-grafico-neutro-fraco); stroke-width: 1; } .k-grafico .k-eixo { stroke: var(--cor-contorno-forte); stroke-width: 1; } .k-grafico .k-zero { stroke: var(--cor-texto); stroke-width: 1.5; } .k-grafico .k-barra { fill: var(--cinza-600); } .k-grafico .k-barra-destaque { fill: var(--cor-grafico-destaque); } .k-grafico .k-barra-fraca { fill: var(--cor-grafico-neutro-fraco); } .k-grafico .k-linha { fill: none; stroke: var(--cor-texto); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .k-grafico .k-linha-meta { fill: none; stroke: var(--cor-grafico-neutro); stroke-width: 1.5; } .k-grafico .k-contorno { fill: none; stroke: var(--cor-superficie); stroke-width: 3.5; } /* 1 px de branco de cada lado da linha da média, sobre as barras escuras */ .k-grafico .k-linha-projecao { fill: none; stroke: var(--cor-texto); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; } .k-grafico .k-ponto { fill: var(--cor-superficie); stroke: var(--cor-texto); stroke-width: 2; } .k-grafico .k-ponto-atencao { fill: var(--cor-atencao-marca); stroke: var(--cor-superficie); stroke-width: 2; } .k-grafico .k-ponto-fora { fill: var(--cor-fora-marca); stroke: var(--cor-superficie); stroke-width: 2; } .k-grafico .k-meta-traco { stroke: var(--cor-texto); stroke-width: 2; } .k-grafico .k-icone { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .k-grafico .k-icone.k-atencao { stroke: var(--cor-atencao); } .k-grafico .k-icone.k-fora { stroke: var(--cor-fora); } .k-sparkline { display: inline-block; width: 64px; height: 16px; vertical-align: -3px; overflow: visible; margin: 0 6px; } .k-sparkline .k-linha { fill: none; stroke: var(--cor-grafico-neutro); stroke-width: 1.5; } .k-sparkline .k-ultimo { fill: var(--cor-texto); } /* ---------- 18. dica de definição ---------- */ /* .k-dica envolve o rótulo, o "i" e o número: a área do mouse inclui o número. O balão abre acima (padrão) ou ao lado (.k-ao-lado), nunca por cima do número. */ .k-dica { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; } .k-dica-rotulo { display: inline-flex; align-items: center; gap: 4px; } .k-gatilho { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--cor-texto-terciario); flex: none; } .k-gatilho:hover { color: var(--cor-texto); background: var(--cor-fundo); } .k-gatilho .k-ic { width: 16px; height: 16px; } .k-dica-texto { position: absolute; left: 0; bottom: calc(100% + 8px); width: 280px; background: var(--cor-superficie-escura); color: var(--branco); font-size: 13px; line-height: 18px; font-weight: 400; padding: var(--espaco-8) var(--espaco-12); border-radius: var(--raio-pequeno); box-shadow: var(--sombra-p); z-index: var(--z-dica); white-space: normal; text-align: left; } .k-dica-texto b { font-weight: 600; } .k-dica-texto::after { content: ""; position: absolute; left: 10px; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--cor-superficie-escura); } .k-dica-texto.k-ao-lado { left: calc(100% + 12px); bottom: auto; top: 50%; transform: translateY(-50%); } .k-dica-texto.k-ao-lado::after { left: -5px; bottom: auto; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--cor-superficie-escura); } .k-sublinhado-dica { text-decoration: underline dotted var(--cor-contorno-forte); text-underline-offset: 3px; cursor: help; } /* ---------- 19. bloco "O que isso significa" ---------- */ .k-bloco-ia { background: var(--cor-superficie); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); } .k-bloco-ia summary { list-style: none; display: flex; align-items: center; gap: var(--espaco-8); min-height: 48px; padding: 0 var(--espaco-16); cursor: pointer; font-weight: 600; } .k-bloco-ia summary::-webkit-details-marker { display: none; } .k-bloco-ia summary .k-ic-abre { margin-left: auto; color: var(--cor-texto-secundario); } /* sem transição: a regra de movimento não inclui este bloco */ .k-bloco-ia[open] summary .k-ic-abre { transform: rotate(180deg); } .k-bloco-ia .k-texto { padding: 0 var(--espaco-16) var(--espaco-16); font-size: 16px; line-height: 24px; max-width: 720px; display: flex; flex-direction: column; gap: var(--espaco-12); } .k-bloco-ia .k-aviso { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 16px; color: var(--cor-texto-secundario); } .k-bloco-ia .k-aviso .k-ic { width: 14px; height: 14px; } .k-bloco-ia .k-indisponivel { color: var(--cor-texto-secundario); font-size: 15px; } /* ---------- 20. estados de tela ---------- */ .k-esqueleto { background: var(--cor-esqueleto); border-radius: var(--raio-pequeno); display: block; } .k-esqueleto.k-texto { height: 14px; } .k-esqueleto.k-numero { height: 32px; width: 160px; } .k-esqueleto.k-linha { height: 20px; width: 100%; } .k-estado-vazio { padding: var(--espaco-40) var(--espaco-24); text-align: center; color: var(--cor-texto-secundario); display: flex; flex-direction: column; align-items: center; gap: var(--espaco-8); } .k-estado-vazio .k-ic { width: 28px; height: 28px; color: var(--cor-contorno-forte); } .k-estado-vazio .k-titulo { color: var(--cor-texto); font-weight: 600; } .k-aviso-erro { display: flex; align-items: center; gap: var(--espaco-12); padding: var(--espaco-12) var(--espaco-16); background: var(--cor-fora-fundo); color: var(--cor-fora); border-radius: var(--raio-medio); } .k-aviso-erro .k-ic { width: 20px; height: 20px; flex: none; } .k-aviso-erro .k-botao { margin-left: auto; color: var(--cor-fora); border-color: var(--cor-fora-marca); background: var(--cor-superficie); } .k-aviso-erro .k-botao:hover { background: var(--cor-fora-fundo); } /* ---------- conteúdo ---------- */ .k-conteudo { padding: var(--espaco-24) var(--espaco-32); max-width: 1600px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--espaco-24); min-width: 0; } .k-tres-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-24); align-items: stretch; } .k-cabecalho-tela { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-16); } /* ---------- carteira: marcar clientes, exportar arquivo e filtrar por produto (rodada 4; só no computador, não entram no .k-celular) ---------- */ /* marcar clientes: a primeira coluna da tabela, com 40 px, leva a caixa .k-marcar (no cabeçalho, "Marcar todos", que fica no estado misto com só uma parte marcada) */ .k-tabela th.k-celula-marcar, .k-tabela td.k-celula-marcar { width: 40px; padding: 0 0 0 var(--espaco-16); } /* linha marcada: fundo azul claro, sem a barra de 3 px da .k-selecionada, que continua sendo a linha aberta ao lado */ .k-tabela tbody tr.k-marcada td { background: var(--cor-destaque-fundo); } /* barra de ações para os clientes marcados: logo acima da tabela, só quando há cliente marcado; "Desmarcar", por último, encosta à direita */ .k-barra-acoes { display: flex; align-items: center; gap: var(--espaco-8); height: 48px; padding: 0 var(--espaco-12); background: var(--cor-destaque-fundo); border: 1px solid var(--cor-destaque); border-radius: var(--raio-medio); } .k-barra-acoes > :last-child { margin-left: auto; } /* âncora: o botão e o que abre logo abaixo dele (o menu de "Passar para…", o painel de busca de produto), alinhados pela esquerda */ .k-ancora { position: relative; display: inline-flex; } .k-ancora > .k-menu-aberto { left: 0; right: auto; } /* exportar arquivo: o botão e, ao lado, a linha de situação (.k-rotulo-regular com aria-live) */ .k-exportar { display: flex; align-items: center; gap: var(--espaco-12); } /* filtro por produto com prazo: cada condição é uma linha que se lê como frase; as linhas e o "+ outra condição de produto" ficam uma embaixo da outra */ .k-filtro-produto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-8); } .k-condicao-produto { display: flex; align-items: center; gap: var(--espaco-8); flex-wrap: wrap; } .k-condicao-produto .k-selecao { width: auto; } .k-condicao-produto .k-entrada.k-num { width: 64px; } /* a caixa dos produtos: um botão com a aparência da .k-entrada (use as duas classes), com os chips e "buscar produto" (.k-ter) no fim */ .k-caixa-produtos { display: inline-flex; align-items: center; gap: var(--espaco-4); width: auto; padding: 0 var(--espaco-12) 0 var(--espaco-4); text-align: left; cursor: pointer; } /* painel de busca de produto: a caixa, a borda e a sombra do .k-menu-aberto, com 360 px, logo abaixo da caixa dos produtos */ .k-busca-produtos { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-menu-aberto); width: 360px; display: flex; flex-direction: column; gap: var(--espaco-8); padding: var(--espaco-8); background: var(--cor-superficie-elevada); border: 1px solid var(--cor-contorno); border-radius: var(--raio-medio); box-shadow: var(--sombra-p); text-align: left; } .k-busca-produtos .k-lista { display: flex; flex-direction: column; } .k-busca-produtos .k-lista .k-marcar { min-height: 36px; padding: 0 var(--espaco-8); } .k-busca-produtos .k-rodape { display: flex; flex-direction: column; gap: var(--espaco-8); padding-top: var(--espaco-8); border-top: 1px solid var(--cor-contorno); } .k-busca-produtos .k-rodape .k-botoes { justify-content: flex-end; } /* ---------- rodada 5: a barra de ações e as peças que as telas do vendedor faziam com estilo local (classes novas: só valem onde forem usadas) ---------- */ /* barra de ações: 'Desmarcar' em cor-destaque-forte (6,2:1 sobre o fundo da barra; com o mouse, fundo branco e 7,1:1); a borda dos secundários em repouso em cor-texto-terciario (4,4:1); com o mouse, a borda continua cor-texto-secundario */ .k-barra-acoes .k-botao.k-texto:enabled { color: var(--cor-destaque-forte); } .k-barra-acoes .k-botao.k-texto:enabled:hover, .k-barra-acoes .k-botao.k-texto.k-mouse { background: var(--cor-superficie); } .k-barra-acoes .k-botao.k-secundario:enabled:not(:hover):not(.k-mouse) { border-color: var(--cor-texto-terciario); } /* caixa de marcar: continua com 18 × 18 px quando o texto ao lado quebra linha */ .k-marcar input, .k-menu-colunas input { flex: none; } /* carregando: blocos de linha com 70% e 40% da largura, e o bloco no lugar da marca de estado */ .k-esqueleto.k-linha-70 { width: 70%; } .k-esqueleto.k-linha-40 { width: 40%; } .k-esqueleto.k-marca-esq { width: 72px; height: 24px; flex: none; } /* cabeçalho do bloco da tabela sem título: a contagem e "Colunas" ficam à direita (com título, nada muda) */ .k-tabela-bloco .k-cab .k-direita { margin-left: auto; } /* rodapé do bloco da tabela:

logo abaixo da tabela, sem borda própria (a última linha da tabela já tem a dela) */ .k-tabela-bloco > .k-rodape-bloco { padding: var(--espaco-12) var(--espaco-16); } /* interruptor: