/* JADE — extensões de tela do design system (prefixo jx-) Painel do gestor e Meu painel: faixa do dia, arco da meta, corrida do mês, lista de ações, fila do salão e mini-números. Só usa tokens de variaveis.css, então o tema escuro vem de graça. Carrega depois de jade-ui.css. */ /* ---------- cabeçalho e utilitários do painel ---------- */ .painel-x .pagina-cab h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.025em; } .painel-x .card { min-width: 0; } .painel-x .card.coluna { display: flex; flex-direction: column; } .painel-x .mt-auto { margin-top: auto; } .painel-x .card-titulo .badge { flex-shrink: 0; } .jx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .jx-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .jx-quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .jx-caixa { min-width: 0; padding: 12px; border-radius: var(--raio-s); background: var(--superficie-2); } .jx-caixa .tx-numero-kpi { display: block; margin-top: 8px; } .jx-caixa .tx-legenda { color: var(--texto-suave); } .jx-num { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .jx-num .tx-legenda { color: var(--texto-suave); } .jx-num .tx-numero-kpi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-sep { height: 1px; background: var(--borda); margin: 16px 0; } .jx-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .jx-ponto-leg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .jx-oport { cursor: pointer; color: var(--texto); text-decoration: none; } .jx-oport:hover { color: var(--texto); } .jx-oport .oport-topo { flex-direction: column; gap: 2px; } /* ---------- A. arco da meta ---------- */ .jx-arco { position: relative; width: min(440px, 100%); margin: 0 auto; } .jx-arco svg { display: block; width: 100%; height: auto; overflow: visible; } .jx-arco-trilha { stroke: var(--neutro-suave); } .jx-arco-fill { stroke: var(--marca-amarelo); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); } .jx-arco-ritmo { transform: rotate(var(--ang, 0deg)); transform-box: view-box; transform-origin: 130px 130px; } .jx-arco-ritmo line { stroke: var(--texto); } .jx-arco-texto { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .jx-arco-texto .tx-numero-heroi { display: block; white-space: nowrap; } .jx-arco-texto .tx-legenda { display: block; margin-top: 2px; } .jx-arco-texto .tx-legenda { color: var(--texto-suave); } .jx-ritmo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 10px; text-align: center; } .jx-ritmo .tx-legenda { color: var(--texto-suave); } .jx-fatos { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--borda); } .jx-fatos > div { min-width: 0; } .jx-fatos .tx-legenda, .jx-fatos dt { display: block; color: var(--texto-suave); } .jx-fatos dd, .jx-fatos .jx-fato { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; font-size: 15px; line-height: 20px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .jx-fatos small { font-size: 12px; font-weight: 500; color: var(--texto-suave); } /* ---------- B. faixa do dia ---------- */ .jx-hoje { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; } .jx-dia { position: relative; height: 72px; margin-top: 26px; } .jx-dia-linha { position: absolute; left: 0; right: 0; top: 40px; height: 2px; border-radius: 1px; background: var(--borda-forte); } .jx-dia-hora { position: absolute; bottom: 0; transform: translateX(-50%); color: var(--texto-suave); white-space: nowrap; } .jx-dia-hora::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 6px; background: var(--borda-forte); } .jx-marco { position: absolute; top: 35px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--texto-suave); } .jx-ev { position: absolute; top: 35px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; box-sizing: border-box; background: var(--texto); box-shadow: 0 0 0 2px var(--superficie); cursor: default; } .jx-ev-rua { background: var(--azul); } .jx-ev-retorno { background: var(--primario); } .jx-ev-aviso { background: var(--laranja); } .jx-ev-venda { background: var(--verde); } .jx-ev-futuro { background: var(--superficie); border: 2px solid var(--texto); } .jx-ev-futuro.jx-ev-rua { border-color: var(--azul); } .jx-ev-futuro.jx-ev-retorno { border-color: var(--primario); } .jx-ev.vivo::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; } .jx-ev-rua.vivo { color: var(--azul); } .jx-ev.vivo { color: var(--texto); } .jx-dia-agora { position: absolute; top: 20px; bottom: 0; width: 2px; margin-left: -1px; background: var(--marca-amarelo); z-index: 2; } .jx-dia-agora::before { content: ""; position: absolute; left: 50%; top: 21px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--marca-amarelo); box-shadow: 0 0 0 2px var(--superficie); } .jx-dia-agora::after { content: ""; position: absolute; left: 50%; top: 21px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 2px solid var(--marca-amarelo); opacity: 0; } .jx-dia-etq { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; white-space: nowrap; } .jx-dia-agora.na-direita .jx-dia-etq { left: auto; right: -2px; transform: none; } .jx-dia-agora.na-esquerda .jx-dia-etq { left: -2px; transform: none; } .jx-dia-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: var(--texto-suave); } .jx-dia-legenda span { display: inline-flex; align-items: center; gap: 6px; } .jx-dia-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; background: var(--texto); } .jx-dia-legenda i.rua { background: var(--azul); } .jx-dia-legenda i.retorno { background: var(--primario); } .jx-dia-legenda i.futuro { background: var(--superficie); border: 2px solid var(--texto); } .jx-dia-legenda i.marco { width: 2px; border-radius: 1px; background: var(--texto-suave); } .jx-dia-vazia { position: absolute; left: 0; right: 0; top: 4px; text-align: center; color: var(--texto-suave); } .jx-contadores { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(88px, auto)); gap: 20px; padding-left: 24px; border-left: 1px solid var(--borda); } .jx-contador { min-width: 0; color: inherit; text-decoration: none; border-radius: var(--raio-s); } a.jx-contador:hover .tx-numero-kpi { color: var(--primario); } .jx-contador span { display: block; } .jx-contador .tx-legenda { color: var(--texto-suave); margin-bottom: 4px; white-space: nowrap; } .jx-contador .tx-numero-kpi { font-size: 20px; line-height: 24px; } .jx-contador.vermelho .tx-numero-kpi { color: var(--vermelho); } /* ---------- C. pista do mês (corrida dos vendedores) ---------- */ .jx-pista-cab, .jx-raia { display: grid; grid-template-columns: 224px minmax(0, 1fr) 124px; align-items: center; gap: 16px; } .jx-pista-cab { min-height: 24px; margin-bottom: 4px; color: var(--texto-suave); text-transform: uppercase; } .jx-pista-cab > span:nth-child(2) { position: relative; height: 24px; } .jx-raia { min-height: 56px; border-top: 1px solid var(--borda); } .jx-raia-quem { display: flex; align-items: center; gap: 10px; min-width: 0; } .jx-raia-nome { min-width: 0; } .jx-raia-nome strong { display: block; font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-raia-nome span { display: block; font-size: 12px; line-height: 16px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-raia.lider .rk-pos { background: var(--marca-amarelo); color: var(--sobre-amarelo); } .jx-pista { position: relative; height: 10px; border-radius: 999px; background: var(--neutro-suave); } .jx-pista-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); border-radius: 999px; background: var(--grafico-base); transform-origin: left center; } .jx-raia.lider .jx-pista-fill { background: var(--marca-amarelo); } .jx-pista-corredor { position: absolute; left: var(--v, 0%); top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--superficie); } .jx-pista-ritmo { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1px dashed var(--borda-controle); } .jx-pista-meta { position: absolute; right: 0; top: -7px; bottom: -7px; width: 0; border-left: 2px dashed var(--texto); } .jx-pista-rotulo { position: absolute; top: 4px; white-space: nowrap; transform: translateX(-50%); color: var(--texto-suave); } .jx-pista-rotulo.fim { transform: translateX(-100%); } .jx-raia-valor { text-align: right; } .jx-raia-valor strong { display: block; font-size: 14px; line-height: 20px; font-weight: 650; letter-spacing: -0.01em; } .jx-raia-valor span { display: block; font-size: 12px; line-height: 16px; color: var(--texto-suave); } /* ---------- D. fila do salão agora (cartão tinta) ---------- */ .jx-vez { display: block; padding: 16px; border-radius: var(--raio-l); color: var(--texto-inverso); text-decoration: none; background: radial-gradient(360px 160px at 100% 0%, color-mix(in srgb, var(--marca-amarelo) 14%, transparent), transparent 70%), var(--escuro); transition: transform var(--dur-base) var(--curva-saida), box-shadow var(--dur-base); } .jx-vez:hover { color: var(--texto-inverso); transform: scale(1.02); box-shadow: var(--sombra-media); } .jx-vez-pessoa { display: flex; align-items: center; gap: 14px; min-width: 0; } .jx-vez-avatar { box-shadow: 0 0 0 3px var(--escuro), 0 0 0 5px var(--marca-amarelo); } .jx-vez-rotulo { display: block; text-transform: uppercase; color: var(--marca-amarelo); } .jx-vez-nome { display: block; margin-top: 2px; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--texto-inverso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-vez-status { display: block; margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--lateral-texto); } .jx-vez .fv-seq { justify-content: flex-start; margin-top: 8px; } .jx-vez .fv-seq-rotulo { display: block; margin-top: 14px; margin-bottom: 6px; } .jx-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .jx-mini > div { padding: 10px 12px; border-radius: var(--raio-s); background: var(--superficie-2); min-width: 0; } .jx-mini .tx-legenda, .jx-mini .tx-numero-kpi { display: block; } .jx-mini .tx-legenda { color: var(--texto-suave); margin-bottom: 2px; } .jx-mini .tx-numero-kpi { font-size: 20px; line-height: 24px; } .jx-mini .kpi-delta { margin-top: 4px; } /* ---------- E. apoio dos gráficos e dos KPIs ---------- */ .jx-fatos-grafico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borda); } .jx-fatos-grafico > div { min-width: 0; } .jx-fatos-grafico span { display: block; } .jx-fatos-grafico .tx-legenda { color: var(--texto-suave); } .jx-fatos-grafico strong { display: block; font-size: 15px; line-height: 20px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-pedidos-barra { display: flex; height: 6px; gap: 2px; border-radius: 999px; overflow: hidden; } .jx-pedidos-barra i { display: block; height: 100%; background: var(--av, var(--grafico-base)); } .jx-pedidos-legenda { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; color: var(--texto-suave); } .jx-pedidos-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--av, var(--grafico-base)); vertical-align: middle; } .jx-funil-mini { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; } .jx-funil-mini i { display: block; height: 100%; transform-origin: left center; } .jx-pips { display: flex; gap: 4px; } .jx-pips i { display: block; width: 14px; height: 10px; border-radius: 3px; background: var(--marca-amarelo); } .jx-pips i.sem { background: var(--neutro-suave); } .jx-pips i.hoje { background: var(--superficie); border: 1.5px solid var(--borda-controle); } .jx-empilhada { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--neutro-suave); } .jx-empilhada i { display: block; height: 100%; width: var(--v, 0%); transform-origin: left center; } .jx-barra-fina { height: 6px; border-radius: 999px; background: var(--escuro-3); overflow: hidden; } .jx-barra-fina i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; transform-origin: left center; } .kpi .kpi-extra .tx-legenda { color: var(--texto-suave); } .kpi-extra .prog-rotulos { margin-bottom: 4px; } .kpi .faisca { display: block; width: 100%; height: 32px; } /* ---------- F. lista de ações e itens ---------- */ .jx-acao { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; margin: 0 -10px; padding: 8px 10px; border-radius: var(--raio-s); transition: background var(--dur-rapida); } .jx-acao:hover { background: var(--superficie-2); } .jx-acao + .jx-acao { box-shadow: inset 0 1px 0 var(--borda); } .jx-acao .prazo { white-space: nowrap; } .jx-acoes { display: flex; gap: 4px; align-items: center; justify-content: flex-end; } .jx-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; } .jx-item + .jx-item { border-top: 1px solid var(--borda); } .jx-item .at-texto strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-item-acoes { grid-column: 2 / -1; display: flex; gap: 6px; } /* ---------- G. minha fila (sequência de vendedores) ---------- */ .jx-seq { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 4px; margin-top: 12px; padding-top: 6px; } .jx-seq::before { content: ""; position: absolute; left: 12%; right: 12%; top: 26px; height: 0; border-top: 1px dashed var(--lateral-texto-suave); } .jx-seq-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; } .jx-seq-item .avatar { box-shadow: 0 0 0 3px var(--escuro); } .jx-seq-item.voce .avatar { box-shadow: 0 0 0 3px var(--escuro), 0 0 0 5px var(--marca-amarelo); } .jx-seq-item strong { display: block; max-width: 100%; font-size: 12px; line-height: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-inverso); } .jx-seq-item .jx-seq-sub { display: block; max-width: 100%; font-size: 11px; line-height: 14px; color: var(--lateral-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-seq-pos { position: absolute; top: 0; left: 50%; margin-left: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--escuro-3); color: var(--lateral-texto); font-size: 10px; line-height: 18px; font-weight: 700; box-shadow: 0 0 0 2px var(--escuro); } .jx-seq-item.voce .jx-seq-pos { background: var(--marca-amarelo); color: var(--sobre-amarelo); } .jx-vez-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .jx-vez-titulo strong { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .sobre-escuro { background: var(--escuro); border-color: var(--escuro-borda); color: var(--texto-inverso); } .sobre-escuro .card-titulo h3, .sobre-escuro .tx-corpo-forte, .sobre-escuro strong { color: var(--texto-inverso); } .sobre-escuro .card-sub, .sobre-escuro .tx-legenda, .sobre-escuro .prog-rotulos { color: var(--lateral-texto); } .sobre-escuro .link-acao { color: var(--marca-amarelo); } .sobre-escuro .link-acao:hover { color: var(--texto-inverso); } .sobre-escuro .tx-sobrelinha { color: var(--lateral-texto-suave); } .sobre-escuro .btn-vazado { border-color: var(--escuro-3); color: var(--texto-inverso); } .sobre-escuro .btn-vazado:hover { background: var(--escuro-2); color: var(--texto-inverso); } .sobre-escuro .vazio { background: transparent; border-color: var(--escuro-3); color: var(--lateral-texto); } /* ---------- animações (só com movimento permitido) ---------- */ @media (prefers-reduced-motion: no-preference) { @keyframes jx-desenhar { from { stroke-dashoffset: 100; } } @keyframes jx-girar-ritmo { from { transform: rotate(0deg); } } @keyframes jx-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes jx-pulsar { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } } @keyframes jx-pulsar-leve { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes jx-crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes jx-aparecer { from { opacity: 0; } to { opacity: 1; } } .jx-arco-fill { animation: jx-desenhar var(--dur-narrativa) var(--curva-saida) both; animation-delay: 120ms; } .jx-arco-ritmo { animation: jx-girar-ritmo var(--dur-narrativa) var(--curva-saida) both; animation-delay: 120ms; } .jx-ev, .jx-marco { animation: jx-entrar var(--dur-lenta) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); } .jx-ev.vivo::after { animation: jx-pulsar-leve 2s var(--curva-saida) infinite; } .jx-dia-agora::after { animation: jx-pulsar 2.2s var(--curva-saida) infinite; } .jx-pista-fill { animation: jx-crescer var(--dur-narrativa) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); } .jx-pista-corredor { animation: jx-aparecer var(--dur-lenta) var(--curva-padrao) both; animation-delay: calc(var(--i, 0) * 90ms + 600ms); } .jx-pedidos-barra i, .jx-funil-mini i, .jx-empilhada i, .jx-barra-fina i { animation: jx-crescer var(--dur-narrativa) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 80ms + 200ms); } .jx-acao, .jx-item, .jx-raia { animation: jx-entrar var(--dur-lenta) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 45ms + 200ms); } .jx-pips i { animation: jx-aparecer var(--dur-base) var(--curva-padrao) both; animation-delay: calc(var(--i, 0) * 60ms + 200ms); } .jx-seq-item { animation: jx-entrar var(--dur-lenta) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 90ms + 240ms); } } /* ---------- responsivo ---------- */ @media (max-width: 900px) { .jx-hoje { grid-template-columns: minmax(0, 1fr); } .jx-contadores { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--borda); } } @media (max-width: 640px) { .painel-x .pagina-cab h2 { font-size: 22px; line-height: 28px; } /* KPI no celular: ícone em cima, número inteiro embaixo (duas colunas estreitas não cortam o valor) */ .kpi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icone" "info"; row-gap: 8px; padding: 12px 14px; } .kpi-icone { width: 28px; height: 28px; } .kpi-valor { font-size: 22px; line-height: 28px; } .kpi-rotulo { margin-bottom: 6px; } .jx-contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jx-dia-hora-impar { display: none; } .jx-arco .tx-numero-heroi { font-size: 34px; line-height: 40px; } .jx-fatos-grafico { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jx-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .jx-pista-cab, .jx-raia { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; } .jx-pista-cab > span:nth-child(2) { display: none; } .jx-raia .jx-pista { order: 3; grid-column: 1 / -1; margin: 2px 0 10px; } .jx-acao { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; } .jx-acao > .prazo, .jx-acao > .jx-acoes { grid-column: 2; justify-content: flex-start; } .jx-quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* cartão de oportunidade dentro da grade de 2: cabe na coluna e o nome quebra */ .jx-quatro .oport { min-width: 0; } .jx-quatro .oport-nome { white-space: normal; overflow-wrap: anywhere; } /* funil em barras: o valor vai para a linha de baixo da contagem (a 390px não cabe ao lado) */ .painel-x .fb-valor small { display: block; margin-left: 0; } .jx-tres { gap: 10px; } .jx-tres .tx-numero-kpi { font-size: 18px; line-height: 24px; } .jx-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .jx-mini > div { padding: 8px 10px; } .jx-mini .tx-numero-kpi { font-size: 18px; } } /* ===== telas redesenhadas ===== */ /* ---------- crm ---------- */ /* JADE — estilos da tela crm (prefixo jx-, escopados em .jx-crm) * A raiz da tela é
; o modal do lead recebe a * mesma classe (fica fora da página, no body). */ /* ---- tag de fase (MQL · SQL · Vendas · Perdidos): CRM e Painel ---- */ .jx-fase-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--raio-pill); font-size: 10.5px; line-height: 1; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--neutro-suave); color: var(--texto-suave); } .jx-fase-tag.mql { background: var(--roxo-suave); color: var(--roxo); } .jx-fase-tag.sql { background: var(--azul-suave); color: var(--azul); } .jx-fase-tag.venda, .jx-fase-tag.ok { background: var(--verde-suave); color: var(--verde); } .jx-fase-tag.perdido, .jx-fase-tag.alerta { background: var(--vermelho-suave); color: var(--vermelho); } .jx-caixa .jx-fase-tag { width: max-content; } /* ---- faixa das fases: MQL → SQL → Vendas (coorte do período) ---- */ .jx-crm .jx-fases-card { margin-bottom: 16px; } .jx-crm .jx-fases { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, .9fr); gap: 10px; align-items: stretch; } .jx-crm .jx-fase { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-s); background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--texto-suave); } .jx-crm .jx-fase.mql { box-shadow: inset 3px 0 0 var(--roxo); } .jx-crm .jx-fase.sql { box-shadow: inset 3px 0 0 var(--azul); } .jx-crm .jx-fase.venda { box-shadow: inset 3px 0 0 var(--verde); } .jx-crm .jx-fase.perdido { box-shadow: inset 3px 0 0 var(--vermelho); } .jx-crm .jx-fase-topo { display: flex; align-items: center; gap: 8px; min-width: 0; } .jx-crm .jx-fase-nome { min-width: 0; font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-crm .jx-fase-num { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--texto); } .jx-crm .jx-fase.venda .jx-fase-num { color: var(--verde); } .jx-crm .jx-fase.perdido .jx-fase-num { color: var(--texto-suave); } .jx-crm .jx-fase-sub { font-size: 12px; line-height: 16px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-crm .jx-fase-seta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 76px; padding: 0 4px; color: var(--texto-suave); font-size: 11.5px; line-height: 14px; text-align: center; } .jx-crm .jx-fase-seta .ico { width: 18px; height: 18px; margin-bottom: 2px; } .jx-crm .jx-fase-seta b { font-size: 15px; line-height: 18px; font-weight: 700; color: var(--texto); } .jx-crm .jx-fases-rodape { margin: 10px 0 0; } @media (max-width: 900px) { .jx-crm .jx-fases { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .jx-crm .jx-fase.mql, .jx-crm .jx-fase.sql, .jx-crm .jx-fase-seta { grid-column: 1 / -1; } .jx-crm .jx-fase-seta { flex-direction: row; justify-content: flex-start; gap: 6px; min-width: 0; padding: 0 4px; } .jx-crm .jx-fase-seta .ico { transform: rotate(90deg); margin: 0; } } @media (max-width: 640px) { .jx-crm .jx-fase.venda .jx-fase-nome, .jx-crm .jx-fase.perdido .jx-fase-nome { display: none; } .jx-crm .jx-fase.venda .jx-fase-sub, .jx-crm .jx-fase.perdido .jx-fase-sub { white-space: normal; } } /* cabeçalho da coluna de fase: contagem por etapa fina numa linha própria */ .jx-crm .fc-cab .jx-fase-tag { flex-shrink: 0; } .jx-crm .fc-sub { order: 10; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: 11.5px; line-height: 16px; color: var(--texto-suave); } .jx-crm .fc-sub b { font-weight: 650; color: var(--texto); font-variant-numeric: tabular-nums; } .jx-crm .fc-sub .zero, .jx-crm .fc-sub .zero b { font-weight: 500; color: var(--texto-suave); } /* cartão: pílula da etapa fina (clicável), espera sem contato, qualificação e WhatsApp rápido */ .jx-crm .jx-subetapa { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; border: 1px solid var(--borda); border-radius: var(--raio-pill); background: var(--superficie); color: var(--texto); font: inherit; font-size: 11.5px; line-height: 1; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-rapida), background var(--dur-rapida); } .jx-crm .jx-subetapa::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--etapa-1)); flex-shrink: 0; } .jx-crm button.jx-subetapa:hover { border-color: var(--primario); background: var(--primario-suave); } .jx-crm .jx-subetapa.estatica { cursor: default; color: var(--texto-suave); } .jx-crm .jx-subetapa.estatica::before { background: var(--vermelho); } .jx-crm .jx-espera .ico { width: 12px; height: 12px; } .jx-crm .oport-rodape .jx-whats { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; } .jx-crm .oport-rodape .jx-whats .ico { width: 14px; height: 14px; } .jx-crm .oport-rodape .jx-whats + .oport-mover { margin-left: 2px; } .jx-crm .jx-etapa-fase { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .jx-crm .jx-etapas-grupo { margin-bottom: 14px; } .jx-crm .jx-etapas-fase { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--texto-suave); } /* cabeçalho da coluna: o nome da etapa quebra em até 2 linhas em vez de ser * cortado ("Orçamento enviado" cabe em seis colunas); quantidade e + nunca * encolhem; o total (com mês e ticket médio) pode quebrar de linha */ .jx-crm .fc-cab { align-items: center; } .jx-crm .fc-nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .jx-crm .fc-qtd, .jx-crm .fc-add { flex-shrink: 0; } .jx-crm .fc-total { min-width: 0; white-space: normal; } .jx-crm .fc-vazia { margin: 0 0 4px; } /* filtros com select embutido (Vendedor: Todos · Origem: Todas) */ .jx-crm .filtro select { height: auto; min-height: 0; width: auto; max-width: 160px; padding: 0 16px 0 0; margin: 0; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; font: inherit; font-size: 13px; font-weight: 600; color: inherit; cursor: pointer; background-position: right 0 center; } .jx-crm .filtro select:focus { outline: none; box-shadow: none; } .jx-crm .filtro:focus-within { border-color: var(--primario); } .jx-crm .barra-ferramentas .check { height: 34px; } /* tabela de follow-ups dentro do card: sem moldura dupla, ocupa a largura do card */ .jx-crm .card > .jx-tabela > .tabela-scroll { margin: 0 -20px -20px; width: calc(100% + 40px); border: 0; border-radius: 0 0 var(--raio) var(--raio); box-shadow: none; border-top: 1px solid var(--borda); } .jx-crm .jx-contato { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; } .jx-crm .jx-contato strong { font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .jx-crm .jx-vendedor { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; } .jx-crm .jx-vendedor a { color: inherit; } /* celular: a oportunidade vira o título do cartão (largura toda, sem rótulo), * com espaço à direita para os ícones de ação — nada fica por cima de nada */ @media (max-width: 640px) { .jx-crm .jx-tabela-fu .tabela-responsiva td:nth-child(2) { grid-column: 1 / -1; order: -1; padding-right: 64px; } .jx-crm .jx-tabela-fu .tabela-responsiva td:nth-child(2)::before { display: none; } .jx-crm .jx-tabela-fu .tabela-responsiva td:last-child { right: 10px; } } /* origem + aniversariantes lado a lado no mesmo card; empilha no celular */ .jx-crm .jx-duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 28px; } .jx-crm .jx-duas > div { min-width: 0; } .jx-crm .jx-duas-lado { border-left: 1px solid var(--borda); padding-left: 28px; } @media (max-width: 900px) { .jx-crm .jx-duas { grid-template-columns: minmax(0, 1fr); gap: 20px 0; } .jx-crm .jx-duas-lado { border-left: 0; padding-left: 0; border-top: 1px solid var(--borda); padding-top: 20px; } } /* de onde vêm os leads: tabela Origem · MQL · SQL · Vendas · Vendido, com a * barra (quantos leads a origem traz) embaixo do nome */ .jx-crm .jx-origens { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; } .jx-crm .jx-origens th { padding: 0 0 8px 12px; border-bottom: 1px solid var(--borda); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); text-align: right; white-space: nowrap; } .jx-crm .jx-origens td { padding: 8px 0 8px 12px; border-bottom: 1px solid var(--borda); text-align: right; vertical-align: top; white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; } .jx-crm .jx-origens th:first-child, .jx-crm .jx-origens td:first-child { padding-left: 0; text-align: left; font-weight: 500; width: 40%; } .jx-crm .jx-origens tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; } .jx-crm .jx-origens td small { display: block; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--texto-suave); } .jx-crm .jx-origem-rotulo { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .jx-crm .jx-origem-rotulo .ico { width: 14px; height: 14px; color: var(--texto-suave); } .jx-crm .jx-origem-trilha { display: block; height: 6px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: var(--neutro-suave); } .jx-crm .jx-origem-fill { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--texto); transform-origin: left center; } @media (max-width: 640px) { .jx-crm .jx-origens td small { display: none; } .jx-crm .jx-origens td:first-child, .jx-crm .jx-origem-rotulo { white-space: normal; } .jx-crm .jx-origens th, .jx-crm .jx-origens td { padding-left: 6px; } .jx-crm .jx-origens th, .jx-crm .jx-origens td { padding-left: 8px; } } /* aniversariantes (lista lateral) */ .jx-crm .jx-aniv { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borda); } .jx-crm .jx-aniv:last-child { border-bottom: 0; padding-bottom: 0; } .jx-crm .jx-aniv:first-child { padding-top: 0; } .jx-crm .jx-aniv-info { flex: 1; min-width: 0; } .jx-crm .jx-aniv-info strong { display: block; font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-crm .jx-aniv-info strong a { color: inherit; text-decoration: none; } .jx-crm .jx-aniv-info strong a:hover { color: var(--primario-forte); } .jx-crm .jx-aniv-info span { display: block; font-size: 12px; line-height: 16px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-crm .jx-aniv .btn-icone { flex-shrink: 0; } /* ---- modal do lead: formulário à esquerda, prévia à direita ---- */ .jx-crm.jx-lead .modal-cab > div { min-width: 0; } .jx-crm.jx-lead .modal-corpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 24px; padding-top: 20px; } @media (max-width: 900px) { .jx-crm.jx-lead .modal-corpo { grid-template-columns: minmax(0, 1fr); } } .jx-crm .jx-lead-col { min-width: 0; } .jx-crm .jx-fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; } .jx-crm .jx-fieldset legend { padding: 0; margin: 0 0 6px; } .jx-crm .jx-quando { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .jx-crm .jx-quando input[type="date"] { width: 172px; } .jx-crm .jx-obs-wrap { margin: -4px 0 12px; } .jx-crm .jx-sugestoes { display: flex; flex-direction: column; gap: 2px; padding: 6px; margin: 2px 0 0; } .jx-crm .jx-sugestao { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-rapida), transform var(--dur-rapida) var(--curva-saida); } .jx-crm .jx-sugestao:hover { background: var(--superficie); } .jx-crm .jx-sugestao:active { transform: scale(.995); } .jx-crm .jx-sugestao strong { min-width: 0; font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-crm .jx-sugestao .jx-fone { font-size: 12.5px; line-height: 16px; color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; } .jx-crm .jx-sugestao .tag { margin-left: auto; } .jx-crm .jx-sugestao[aria-pressed="true"] { background: var(--superficie); box-shadow: 0 0 0 1px var(--primario) inset; } .jx-crm .jx-previa { padding: 16px; margin: 0 0 16px; } .jx-crm .jx-previa .card-titulo { margin-bottom: 12px; } .jx-crm .jx-previa .oport { cursor: default; user-select: text; } .jx-crm .jx-previa-etapa { margin-left: auto; white-space: nowrap; } .jx-crm .jx-enviar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -4px 0 16px; } .jx-crm .jx-enviar .btn[aria-disabled="true"] { opacity: .55; } .jx-crm .jx-depois { padding: 14px 16px; margin: 0 0 8px; } .jx-crm .jx-depois .tx-sobrelinha { margin-bottom: 10px; color: var(--texto-suave); } .jx-crm .jx-passos { display: flex; flex-direction: column; gap: 10px; } .jx-crm .jx-passo { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 17px; color: var(--texto-suave); } .jx-crm .jx-passo b { font-weight: 600; color: var(--texto); } .jx-crm .jx-passo-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--neutro-suave); color: var(--texto-suave); } .jx-crm .jx-passo-ico .ico { width: 13px; height: 13px; } .jx-crm .jx-passo.jx-feito .jx-passo-ico { background: var(--marca-amarelo); color: var(--sobre-amarelo); } /* ---- micro-interações (só com movimento permitido) ---- * A entrada dos cartões vale só enquanto a lane tem .jx-entrando (o módulo * tira a classe depois): assim o pouso do arrastar (.pousou) não briga com * a animação nem a reinicia. */ @media (prefers-reduced-motion: no-preference) { @keyframes jxcrm-entrar { from { opacity: 0; transform: translateY(8px); } } @keyframes jxcrm-crescer { from { transform: scaleX(0); } } .jx-crm .jx-lane.jx-entrando .oport:not(.arrastando):not(.pousou) { animation: jxcrm-entrar var(--dur-lenta) var(--curva-saida) backwards; animation-delay: calc(var(--i, 0) * 45ms + 220ms); } .jx-crm .jx-tabela tbody tr { animation: jxcrm-entrar var(--dur-lenta) var(--curva-saida) backwards; animation-delay: 260ms; } .jx-crm .jx-tabela tbody tr:nth-child(2) { animation-delay: 305ms; } .jx-crm .jx-tabela tbody tr:nth-child(3) { animation-delay: 350ms; } .jx-crm .jx-tabela tbody tr:nth-child(4) { animation-delay: 395ms; } .jx-crm .jx-tabela tbody tr:nth-child(5) { animation-delay: 440ms; } .jx-crm .jx-tabela tbody tr:nth-child(6) { animation-delay: 485ms; } .jx-crm .jx-tabela tbody tr:nth-child(n+7) { animation-delay: 530ms; } .jx-crm .jx-origem-fill { animation: jxcrm-crescer var(--dur-narrativa) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); } .jx-crm .jx-aniv { animation: jxcrm-entrar var(--dur-lenta) var(--curva-saida) backwards; animation-delay: calc(var(--i, 0) * 45ms + 320ms); } .jx-crm .jx-lead-col > * { animation: jxcrm-entrar var(--dur-lenta) var(--curva-saida) both; animation-delay: calc(180ms + var(--i, 0) * 45ms); } } /* ---------- vendas ---------- */ /* JADE — estilos da tela vendas (prefixo jx-, escopados em .jx-vendas) Trilho de etapas (tabela e cartão do pedido), itens do pedido, orçamentos esfriando e descontos do mês. Só tokens de variaveis.css: o tema escuro vem de graça. Nada aqui redefine classe do design system. */ /* ---------- lista: vendedor, etapa e trilho mini ---------- */ .jx-vendas .jx-vend { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; line-height: 18px; } .jx-vendas .jx-tm { display: inline-flex; align-items: center; flex-shrink: 0; } .jx-vendas .jx-tm i { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--neutro-suave); box-shadow: inset 0 0 0 1px var(--borda-forte); } .jx-vendas .jx-tm i + i { margin-left: 12px; } .jx-vendas .jx-tm i + i::before { content: ""; position: absolute; right: 100%; top: 4px; width: 12px; height: 2px; background: var(--neutro-suave); } .jx-vendas .jx-tm i.feito { background: var(--marca-amarelo); box-shadow: none; } .jx-vendas .jx-tm i.feito::before, .jx-vendas .jx-tm i.atual::before { background: var(--marca-amarelo); } .jx-vendas .jx-tm i.atual { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--marca-amarelo); } .jx-vendas .jx-etapa { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; white-space: nowrap; } .jx-vendas .jx-tabela th, .jx-vendas .jx-tabela td { padding-left: 12px; padding-right: 12px; } .jx-vendas .jx-tabela tr.selecionada .acoes-linha .btn-icone { opacity: 1; } .jx-vendas .jx-tabela .celula-principal { min-width: 0; } .jx-vendas .jx-tabela .celula-principal > strong { font-variant-numeric: tabular-nums; } .jx-vendas .jx-tabela .celula-principal > span { white-space: nowrap; } .jx-vendas .jx-itens-cel { display: block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--texto); } .jx-vendas .jx-cli { display: block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-vendas .jx-etapa .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .jx-vendas .jx-tabela .acoes-linha a.btn-icone { color: var(--texto-suave); } .jx-vendas .jx-tabela .acoes-linha a.btn-icone:hover { color: var(--texto); } .jx-vendas .jx-tabela .acoes-linha a.btn-icone.whatsapp, .jx-vendas .jx-tabela .acoes-linha a.btn-icone.whatsapp:hover { color: var(--verde); } /* ---------- trilho de etapas do pedido: círculos de 24px ligados por linha ---------- */ .jx-vendas .jx-trilho { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 4px 0 18px; } .jx-vendas .jx-trilho::before { content: ""; position: absolute; left: 10%; right: 10%; top: 11px; height: 2px; background: var(--neutro-suave); } .jx-vendas .jx-trilho-feito { position: absolute; left: 10%; top: 11px; width: var(--feito, 0%); height: 2px; background: var(--marca-amarelo); transform-origin: left center; } .jx-vendas .jx-passo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0 4px; text-align: center; } .jx-vendas .jx-passo i { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--neutro-suave); color: var(--texto-suave); box-shadow: 0 0 0 3px var(--superficie); } .jx-vendas .jx-passo i .ico { width: 14px; height: 14px; stroke-width: 2.5; } .jx-vendas .jx-passo.feito i { background: var(--marca-amarelo); color: var(--sobre-amarelo); } .jx-vendas .jx-passo.atual i { background: var(--superficie); box-shadow: 0 0 0 3px var(--superficie), inset 0 0 0 2px var(--marca-amarelo); } .jx-vendas .jx-passo.atual i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--marca-amarelo); opacity: 0; } .jx-vendas .jx-passo span { display: block; max-width: 100%; font-size: 12.5px; line-height: 16px; font-weight: 600; overflow-wrap: anywhere; } .jx-vendas .jx-passo small { display: block; max-width: 100%; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texto-suave); overflow-wrap: anywhere; } .jx-vendas .jx-passo.atual span { color: var(--primario); } .jx-vendas .jx-passo.futuro span { color: var(--texto-suave); } .jx-vendas .card > .jx-trilho { margin-bottom: 6px; } /* ---------- itens do pedido ---------- */ .jx-vendas .jx-itens { box-shadow: none; border-radius: var(--raio-s); } .jx-vendas .jx-itens .tx-codigo { color: var(--texto-suave); margin-right: 6px; } .jx-vendas .jx-itens tfoot td { padding: 8px 16px; background: var(--superficie-2); border-bottom: 0; font-weight: 600; color: var(--texto-suave); } .jx-vendas .jx-itens tfoot tr:last-child td { font-size: 14px; font-weight: 700; color: var(--texto); border-top: 1px solid var(--borda); } .jx-vendas .jx-acoes-ped { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .jx-vendas .jx-acoes-ped .jx-direita { margin-left: auto; } .jx-vendas #ven-pedido .card-titulo h3 a { color: inherit; text-decoration: none; } .jx-vendas #ven-pedido .card-titulo h3 a:hover { color: var(--primario); } .jx-vendas #ven-pedido .card-titulo .badge { flex-shrink: 0; } /* ---------- orçamentos esfriando ---------- */ .jx-vendas .jx-frio { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borda); } .jx-vendas .jx-frio:first-child { padding-top: 0; } .jx-vendas .jx-frio:last-child { border-bottom: 0; } .jx-vendas .jx-frio-info { min-width: 0; } .jx-vendas .jx-frio-info strong { display: block; font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-vendas .jx-frio-info strong a { color: inherit; text-decoration: none; } .jx-vendas .jx-frio-info strong a:hover { color: var(--primario); } .jx-vendas .jx-frio-info span { display: block; font-size: 12px; line-height: 16px; color: var(--texto-suave); } .jx-vendas .jx-frio-info em { font-style: normal; font-weight: 600; color: var(--laranja); } .jx-vendas .jx-frio-acoes { display: flex; align-items: center; gap: 4px; } /* ---------- descontos do mês ---------- */ .jx-vendas .jx-desc-valor { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; } .jx-vendas .jx-desc-valor .tx-legenda { color: var(--texto-suave); } /* "ritmo 59%" e o selo do ritmo ficam cada um numa peça só: nada de número quebrado ao lado do selo */ .jx-vendas .kpi-extra .prog-rotulos > span:first-child { white-space: nowrap; } .jx-vendas .kpi-extra .prog-rotulos .badge { flex-shrink: 0; } /* ---------- responsivo ---------- */ @media (min-width: 641px) and (max-width: 1366px) { /* em telas médias a coluna "Itens" sai (o cartão do pedido selecionado já lista os itens) para a tabela caber sem rolagem interna */ .jx-vendas .jx-tabela th:nth-child(3), .jx-vendas .jx-tabela td:nth-child(3) { display: none; } .jx-vendas .jx-cli { max-width: 170px; } } @media (max-width: 1180px) { .jx-vendas .jx-itens-cel { max-width: 240px; } } @media (max-width: 640px) { /* o número do mês inteiro no celular: duas colunas estreitas cortavam o valor */ .jx-vendas .grade-4 > .kpi:first-child { grid-column: 1 / -1; } .jx-vendas .prog-rotulos { flex-wrap: wrap; } .jx-vendas .jx-itens-cel, .jx-vendas .jx-cli { max-width: none; white-space: normal; } .jx-vendas .jx-etapa { white-space: normal; flex-direction: row; flex-wrap: wrap; align-items: center; } /* a etapa (selo + trilho) ocupa a largura toda do cartão: o selo não invade a célula vizinha */ .jx-vendas .jx-tabela td[data-rotulo="Etapa"] { grid-column: 1 / -1; } .jx-vendas .jx-tabela td.celula-principal { padding-right: 104px; } .jx-vendas .jx-tabela .acoes-linha .btn-icone { opacity: 1; } .jx-vendas .jx-frio { grid-template-columns: 32px minmax(0, 1fr); } .jx-vendas .jx-frio-acoes { grid-column: 2; } .jx-vendas .jx-acoes-ped .jx-direita { margin-left: 0; } /* itens do pedido: nome em linha inteira e rodapé em linha (a tabela virou cartões) */ .jx-vendas .jx-itens td[data-rotulo="Item"] { grid-column: 1 / -1; } .jx-vendas .jx-itens .tx-codigo { white-space: nowrap; } .jx-vendas .jx-itens tfoot { display: block; } .jx-vendas .jx-itens tfoot tr { display: flex; justify-content: space-between; gap: 12px; background: var(--superficie-2); } .jx-vendas .jx-itens tfoot tr:last-child { border-top: 1px solid var(--borda); } .jx-vendas .jx-itens tfoot td { display: block; border: 0; padding: 8px 14px; background: transparent; } /* trilho vira lista vertical: cinco colunas não cabem em 358px sem sobrepor texto */ .jx-vendas .jx-trilho { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; margin: 4px 0 12px; } .jx-vendas .jx-trilho::before { left: 11px; right: auto; top: 10%; bottom: 10%; width: 2px; height: auto; } .jx-vendas .jx-trilho-feito { left: 11px; top: 10%; width: 2px; height: var(--feito, 0%); transform-origin: center top; } .jx-vendas .jx-passo { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; padding: 6px 0; text-align: left; } .jx-vendas .jx-passo i { grid-row: 1 / span 2; } .jx-vendas .jx-passo span, .jx-vendas .jx-passo small { grid-column: 2; } } /* ---------- animações (só com movimento permitido) ---------- */ @media (prefers-reduced-motion: no-preference) { @keyframes jxv-entrar { from { opacity: 0; transform: translateY(8px); } } @keyframes jxv-crescer-x { from { transform: scaleX(0); } } @keyframes jxv-crescer-y { from { transform: scaleY(0); } } @keyframes jxv-pulsar { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes jxv-pop { from { transform: scale(.3); } } .jx-vendas .jx-tabela tbody tr { animation: jxv-entrar var(--dur-lenta) var(--curva-saida) backwards; animation-delay: calc(var(--i, 0) * 45ms + 300ms); } .jx-vendas .jx-frio { animation: jxv-entrar var(--dur-lenta) var(--curva-saida) backwards; animation-delay: calc(var(--i, 0) * 45ms + 380ms); } .jx-vendas .jx-trilho-feito { animation: jxv-crescer-x var(--dur-narrativa) var(--curva-saida) both; animation-delay: 320ms; } .jx-vendas .jx-passo.atual i::after { animation: jxv-pulsar 2.4s var(--curva-saida) infinite; animation-delay: 1s; } .jx-vendas .jx-tm i.feito, .jx-vendas .jx-tm i.atual { animation: jxv-pop var(--dur-base) var(--curva-mola) backwards; animation-delay: calc(var(--i, 0) * 45ms + 420ms); } .jx-vendas .jx-tm i:nth-child(2) { animation-delay: calc(var(--i, 0) * 45ms + 480ms); } .jx-vendas .jx-tm i:nth-child(3) { animation-delay: calc(var(--i, 0) * 45ms + 540ms); } .jx-vendas .jx-tm i:nth-child(4) { animation-delay: calc(var(--i, 0) * 45ms + 600ms); } } @media (prefers-reduced-motion: no-preference) and (max-width: 640px) { .jx-vendas .jx-trilho-feito { animation-name: jxv-crescer-y; } } /* ---------- entregas ---------- */ /* JADE — estilos da tela entregas (prefixo jx-, escopados em .jx-entregas) Semana em cartões "fileira", capacidade em três barras, rota do dia com resumo e paradas, aceite por item em pips, listas "Para agendar" e "Montagem pendente", equipe do dia e agenda do dia seguinte. Só tokens de variaveis.css (o tema escuro vem de graça) e nada aqui redefine classe do design system fora deste escopo. */ /* ---------- utilitários ---------- */ .jx-entregas .jx-blk { display: block; } .jx-entregas .jx-legenda { color: var(--texto-suave); } .jx-entregas .jx-mt8 { margin-top: 8px; } .jx-entregas .jx-mb8 { margin-bottom: 8px; } .jx-entregas .jx-flex1 { flex: 1; } .jx-entregas .jx-verde { color: var(--verde); } .jx-entregas .jx-laranja { color: var(--laranja); } .jx-entregas .jx-vermelho { color: var(--vermelho); } .jx-entregas .card-titulo h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .jx-entregas .jx-h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; } .jx-entregas .jx-pedido { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texto-suave); white-space: nowrap; } .jx-entregas .jx-pedido:hover { color: var(--primario); } /* ---------- atenção: lista de avisos acionáveis ---------- */ .jx-entregas .jx-atencao { padding: 8px 20px; } .jx-entregas .jx-at-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .jx-entregas div.at-item { cursor: default; } /* ---------- barra do dia: setas + Hoje + data, rótulo do dia à direita ---------- */ .jx-entregas .jx-barra { margin-bottom: 14px; flex-wrap: wrap; } .jx-entregas .jx-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .jx-entregas .jx-seg .btn-icone { width: 30px; height: 30px; padding: 0; border-radius: 7px; } .jx-entregas .jx-seg .btn-icone .ico { width: 16px; height: 16px; } .jx-entregas .jx-seg .jx-volta .ico { transform: rotate(180deg); } .jx-entregas .jx-data { width: auto; height: 36px; margin: 0; padding: 0 10px; } .jx-entregas .jx-dia-rotulo { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--texto-suave); font-weight: 400; min-width: 0; } .jx-entregas .jx-dia-rotulo strong { color: var(--texto); } /* ---------- fileira da semana: cada dia cresce 4% no hover (sombra aqui; o crescimento só com movimento permitido) ---------- */ .jx-entregas .jx-netflix { position: relative; transition: transform var(--dur-base) var(--curva-saida), box-shadow var(--dur-base) var(--curva-padrao), border-color var(--dur-rapida), background var(--dur-rapida); } .jx-entregas .ent-dia.jx-netflix:hover, .jx-entregas .ent-dia.jx-netflix:focus-visible { box-shadow: var(--sombra-alta); z-index: 2; } .jx-entregas .ent-dia.jx-netflix.selecionado:hover, .jx-entregas .ent-dia.jx-netflix.selecionado:focus-visible { box-shadow: var(--sombra-alta), 0 0 0 1px var(--primario) inset; } .jx-entregas .ent-dia.jx-netflix.fechado:hover { transform: none; box-shadow: none; } /* número e legenda lado a lado: o número nunca encolhe, a legenda corta com reticências */ .jx-entregas .jx-ed-pct { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--texto-suave); } .jx-entregas .jx-ed-pct strong { flex-shrink: 0; font-weight: 650; font-variant-numeric: tabular-nums; } .jx-entregas .jx-ed-pct span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-entregas .ent-dia.fechado .jx-ed-pct, .jx-entregas .ent-dia.fechado .jx-ed-pct strong { color: var(--texto-desabilitado); } /* cartão estreito (tela média, 7 colunas): a legenda some inteira em vez de virar "da ca…" colado no número */ .jx-entregas .ent-dia { container-type: inline-size; } @container (max-width: 139px) { .jx-entregas .jx-ed-pct span { display: none; } } /* ---------- capacidade do dia: três barras com a sobra escrita embaixo ---------- */ .jx-entregas .jx-capacidade { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borda); } .jx-entregas .jx-capacidade > div { min-width: 0; } /* o texto quebra de linha dentro dele; o % fica fixo à direita, nunca por cima do texto */ .jx-entregas .jx-capacidade .prog-rotulos > span:first-child { min-width: 0; overflow-wrap: anywhere; } .jx-entregas .jx-capacidade .prog-rotulos .num { flex-shrink: 0; margin-left: auto; } .jx-entregas .jx-capacidade .jx-legenda { margin-top: 6px; } /* ---------- resumo da rota: três números antes do detalhe ---------- */ .jx-entregas .jx-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .jx-entregas .jx-resumo > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-s); background: var(--superficie-2); } .jx-entregas .jx-resumo .tx-sobrelinha { margin-bottom: 2px; color: var(--texto-suave); text-transform: uppercase; } .jx-entregas .jx-resumo .tx-corpo-forte { overflow-wrap: anywhere; } .jx-entregas .jx-resumo .tx-legenda { margin-top: 2px; color: var(--texto-suave); } /* ---------- paradas: acendem no hover; marco verde quando feita, azul em rota ---------- */ .jx-entregas .jx-parada { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--raio-s); transition: background var(--dur-rapida); } .jx-entregas .jx-parada:hover { background: var(--superficie-2); } .jx-entregas .parada.jx-feita .parada-marco::before { background: var(--verde); } .jx-entregas .parada.jx-viva .parada-marco::before { background: var(--azul); } .jx-entregas .parada-hora { white-space: nowrap; } .jx-entregas .parada-info { min-width: 0; } .jx-entregas .parada-info strong a { color: inherit; } .jx-entregas .parada-info strong a:hover { color: var(--primario); } .jx-entregas .jx-aviso { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: var(--raio-xs); background: var(--amarelo-suave); color: var(--primario); font-size: 12.5px; line-height: 17px; } .jx-entregas .jx-aviso .ico { width: 13px; height: 13px; vertical-align: -2px; } .jx-entregas .jx-montador { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 12.5px; line-height: 18px; color: var(--texto); } .jx-entregas .jx-montador > .ico { width: 14px; height: 14px; color: var(--texto-suave); } .jx-entregas .jx-montador > span { white-space: nowrap; } /* o nome do montador fica na mesma linha do rótulo (o design system deixa da parada em bloco) */ .jx-entregas .jx-montador strong { display: inline; font-size: inherit; line-height: inherit; } .jx-entregas .jx-montador .btn, .jx-entregas .jx-montador .badge { flex-shrink: 0; } .jx-entregas .jx-acoes { justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .jx-entregas .jx-etq { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .jx-entregas .jx-etq .badge { white-space: nowrap; } /* ---------- aceite por item: um pip por unidade aceita (verde) ou recusada (vermelho) ---------- */ .jx-entregas .jx-aceite { margin-top: 16px; padding: 16px 18px; } .jx-entregas .jx-aceite .card-titulo { margin-bottom: 6px; } .jx-entregas .jx-aceite .tx-corpo-p { color: var(--texto-suave); } .jx-entregas .jx-aceite .tx-corpo-p strong { color: var(--texto); } .jx-entregas .jx-pips { flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; } .jx-entregas .jx-pip { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--verde-suave); color: var(--verde); } .jx-entregas .jx-pip.recusado { background: var(--vermelho-suave); color: var(--vermelho); } .jx-entregas .jx-pip .ico { width: 13px; height: 13px; stroke-width: 2.5; } /* ---------- listas (para agendar, montagem pendente): item acende no hover ---------- */ .jx-entregas .jx-item { margin: 0 -8px; padding: 10px 8px; border-radius: var(--raio-s); transition: background var(--dur-rapida); } .jx-entregas .jx-item:hover { background: var(--superficie-2); } .jx-entregas .jx-item > .btn { white-space: nowrap; } .jx-entregas .jx-cel { min-width: 0; } .jx-entregas .jx-cel > span { max-width: none; } .jx-entregas .jx-cel > strong a { color: inherit; } .jx-entregas .jx-cel > strong a:hover { color: var(--primario); } .jx-entregas .jx-etqs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } /* ---------- equipe do dia e agenda do dia seguinte ---------- */ .jx-entregas .jx-sub { flex-wrap: wrap; } .jx-entregas .jx-sub-dir { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .jx-entregas button.link-acao { cursor: pointer; } .jx-entregas .jx-equipe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .jx-entregas .jx-pessoa { display: flex; align-items: center; gap: 8px; min-width: 0; } .jx-entregas .agenda .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* ---------- responsivo ---------- */ @media (max-width: 1366px) { .jx-entregas .jx-ed-pct span { display: none; } } @media (max-width: 640px) { .jx-entregas .jx-montador > span { white-space: normal; } } @media (max-width: 640px) { .jx-entregas .jx-resumo { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* parada no celular: hora | marco | etiquetas em cima, o texto embaixo — nada por cima de nada */ .jx-entregas .parada { grid-template-columns: 48px 18px minmax(0, 1fr); } .jx-entregas .parada-hora { grid-column: 1; grid-row: 1; } .jx-entregas .parada-marco { grid-column: 2; grid-row: 1 / 3; } .jx-entregas .jx-etq { grid-column: 3; grid-row: 1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; min-height: 18px; } .jx-entregas .parada-info { grid-column: 3; grid-row: 2; } .jx-entregas .ag-item { grid-template-columns: 52px 14px minmax(0, 1fr); } .jx-entregas .ag-item .tag { grid-column: 3; justify-self: start; } .jx-entregas .jx-pessoa { width: 100%; } .jx-entregas .jx-barra .jx-dia-rotulo { width: 100%; } } /* ---------- animações (só com movimento permitido) ---------- */ @media (prefers-reduced-motion: no-preference) { .jx-entregas .ent-dia.jx-netflix:hover, .jx-entregas .ent-dia.jx-netflix:focus-visible { transform: scale(1.04); } .jx-entregas .ent-dia.jx-netflix.fechado:hover { transform: none; } @keyframes jx-ent-subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .jx-entregas .jx-entrar > * { animation: jx-ent-subir var(--dur-lenta) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 45ms + 160ms); } @keyframes jx-ent-pip { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .jx-entregas .jx-pip { animation: jx-ent-pip var(--dur-base) var(--curva-mola) both; animation-delay: calc(var(--i, 0) * 45ms + 420ms); } } /* ---------- financeiro ---------- */ /* JADE — estilos da tela Financeiro (prefixo jx-, escopados em .jx-financeiro) Período no cabeçalho, números do fluxo com trilhas realizado × previsto, previsão em colunas, caixa de hoje com a gaveta de dinheiro, comissões com % liberado e resultado por categoria com parte do total. Só tokens de variaveis.css: o tema escuro vem de graça. Nada aqui redefine classe do design system. */ /* ---------- geral ---------- */ .jx-financeiro .card { min-width: 0; } /* KPI mais baixo que o vizinho da linha: rótulo e número ficam no topo, não no meio */ .jx-financeiro .kpi { align-content: start; } .jx-financeiro .card-titulo .badge { flex-shrink: 0; } .jx-financeiro .card-titulo .link-acao { flex-shrink: 0; } .jx-financeiro .card-titulo .titulo-bloco h3 { overflow-wrap: anywhere; } .jx-financeiro .jx-nota { display: block; margin-top: 8px; color: var(--texto-suave); } .jx-financeiro .jx-nota b { color: var(--texto); font-weight: 600; } .jx-financeiro .jx-sep { height: 1px; background: var(--borda); margin: 18px 0; } .jx-financeiro .vazio.embutido .link-acao { margin-top: 10px; } .jx-financeiro .kpi-sub .badge { height: 20px; padding: 0 7px; font-size: 11.5px; } /* ---------- cabeçalho: período ‹ Outubro de 2026 › ---------- */ .jx-financeiro .jx-periodo { display: inline-flex; align-items: center; gap: 2px; } .jx-financeiro .jx-periodo .btn-icone { font-size: 20px; line-height: 1; font-weight: 500; } .jx-financeiro .jx-periodo-rotulo { position: relative; cursor: pointer; } .jx-financeiro .jx-periodo-rotulo strong { font-weight: 650; white-space: nowrap; } .jx-financeiro .jx-periodo-rotulo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } .jx-financeiro .jx-periodo-rotulo:focus-within { box-shadow: 0 0 0 3px var(--primario-suave); } /* ---------- KPI clicável: cresce um pouco no hover, só transform e sombra ---------- */ .jx-financeiro .kpi.jx-netflix { transition: transform var(--dur-base) var(--curva-saida), box-shadow var(--dur-base) var(--curva-padrao), border-color var(--dur-rapida); } .jx-financeiro .kpi.jx-netflix:hover { transform: scale(1.04); box-shadow: var(--sombra-alta); border-color: var(--borda-forte); z-index: 2; } /* ---------- números do fluxo ---------- */ .jx-financeiro .jx-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .jx-financeiro .jx-nums + .jx-nums { margin-top: 14px; } .jx-financeiro .jx-num { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .jx-financeiro .jx-num .tx-legenda { color: var(--texto-suave); } .jx-financeiro .jx-num .tx-numero-kpi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jx-financeiro .jx-leve { font-weight: 500; color: var(--texto-suave); } .jx-financeiro .jx-forte { font-weight: 650; } .jx-financeiro .jx-num-m { font-size: 20px; line-height: 26px; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; } .jx-financeiro .jx-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* trilhas na mesma escala: cheio é o realizado, claro é o que ainda vence */ .jx-financeiro .jx-fluxo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; align-items: center; margin-top: 16px; } .jx-financeiro .jx-trilha { position: relative; height: 8px; border-radius: var(--raio-pill); background: var(--neutro-suave); overflow: hidden; } .jx-financeiro .jx-trilha i { position: absolute; top: 0; bottom: 0; left: 0; display: block; transform-origin: left center; } .jx-financeiro .jx-trilha i.jx-prev { opacity: .32; } /* previsão das próximas 8 semanas */ .jx-financeiro .jx-cab-grafico { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .jx-financeiro .jx-cab-grafico h4 { margin: 0; } .jx-financeiro .g-barra.jx-g-entrada { fill: var(--verde); } .jx-financeiro .g-barra.jx-g-saida { fill: var(--vermelho); } .jx-financeiro .jx-faixa-neg { fill: var(--vermelho-suave); } .jx-financeiro .g-legenda i.jx-leg-neg { background: var(--vermelho-suave); border: 1px solid var(--vermelho); box-sizing: border-box; } /* ---------- caixa de hoje ---------- */ .jx-financeiro .jx-dia-sel { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; } .jx-financeiro .jx-dia-sel input { flex: 1 1 auto; min-width: 0; width: auto; height: 32px; padding: 0 8px; font-size: 13px; } .jx-financeiro .jx-dia-sel .btn-icone { font-size: 20px; line-height: 1; font-weight: 500; flex-shrink: 0; } .jx-financeiro .jx-gaveta-box { margin-top: 16px; padding: 14px 16px; border-radius: var(--raio-s); } .jx-financeiro .jx-gaveta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .jx-financeiro .jx-gaveta-cab strong .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--verde); } .jx-financeiro .jx-gaveta { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 8px; align-items: baseline; font-size: 13px; line-height: 22px; } .jx-financeiro .jx-gaveta .jx-op { color: var(--texto-suave); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; } .jx-financeiro .jx-gaveta .jx-gaveta-sep { grid-column: 1 / -1; height: 1px; margin: 4px 0 2px; background: var(--borda-forte); } .jx-financeiro .jx-gaveta .num { white-space: nowrap; } .jx-financeiro .jx-movs { margin: 8px 0 0; padding: 0; list-style: none; color: var(--texto-suave); } .jx-financeiro .jx-movs li { margin: 2px 0; } .jx-financeiro .jx-acoes-caixa { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; } .jx-financeiro .jx-acoes-caixa .jx-esticar { flex: 1; } /* ---------- tabelas sangrando até a borda do card ---------- */ .jx-financeiro .tabela-scroll.jx-sangra { margin: 0 -20px; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .jx-financeiro .tabela-scroll.jx-sangra-fim { margin-bottom: -20px; border-radius: 0 0 var(--raio) var(--raio); } .jx-financeiro .tabela.jx-tabela th, .jx-financeiro .tabela.jx-tabela td { padding-left: 8px; padding-right: 8px; } .jx-financeiro .tabela.jx-tabela th:first-child, .jx-financeiro .tabela.jx-tabela td:first-child { padding-left: 20px; } .jx-financeiro .tabela.jx-tabela th:last-child, .jx-financeiro .tabela.jx-tabela td:last-child { padding-right: 20px; } .jx-financeiro .tabela.jx-tabela tbody tr.jx-grupo td { padding-top: 7px; padding-bottom: 7px; background: var(--superficie-2); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); } .jx-financeiro .tabela.jx-tabela tbody tr.jx-grupo:hover td { background: var(--superficie-2); } .jx-financeiro .tabela.jx-tabela tr.jx-total td { font-weight: 650; border-top: 1px solid var(--borda-forte); } .jx-financeiro .tabela.jx-tabela tr.jx-saldo td { font-weight: 700; font-size: 14px; padding-top: 12px; padding-bottom: 12px; border-top: 2px solid var(--texto); border-bottom: 0; } .jx-financeiro .tabela.jx-tabela tfoot td { border-bottom: 0; } .jx-financeiro .tabela.jx-tabela td.jx-vazio-linha { padding-left: 32px; color: var(--texto-suave); } .jx-financeiro .tabela.jx-tabela tr.jx-eventos td { padding: 10px 20px 14px; background: var(--superficie-2); } .jx-financeiro .tabela.jx-tabela tr.jx-eventos:hover td { background: var(--superficie-2); } .jx-financeiro .tabela.jx-tabela tr.jx-eventos .tabela-scroll { box-shadow: none; } .jx-financeiro .tabela.jx-compacta th, .jx-financeiro .tabela.jx-compacta td { padding-left: 6px; padding-right: 6px; } .jx-financeiro .tabela.jx-compacta td { padding-top: 10px; padding-bottom: 10px; } .jx-financeiro .tabela.jx-compacta th.jx-caret, .jx-financeiro .tabela.jx-compacta td.jx-caret { width: 28px; padding-left: 2px; } .jx-financeiro .jx-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; } .jx-financeiro .jx-pessoa .celula-principal { min-width: 0; } .jx-financeiro .jx-pct { display: flex; flex-direction: column; gap: 3px; } .jx-financeiro .jx-pct .prog { width: 56px; min-width: 56px; } .jx-financeiro .jx-share { display: flex; align-items: center; gap: 8px; } .jx-financeiro .jx-share .prog { flex: 0 0 56px; min-width: 56px; } .jx-financeiro .jx-nota-com { margin: 10px 0 16px; } .jx-financeiro .card-rodape.jx-rodape { display: flex; align-items: flex-start; gap: 8px; } .jx-financeiro .card-rodape.jx-rodape .ico { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; } /* ---------- animações (só com movimento permitido) ---------- */ @media (prefers-reduced-motion: no-preference) { @keyframes jx-fin-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes jx-fin-crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* backwards, não both: depois de entrar o transform volta a ser o do hover */ .jx-financeiro .jx-entrar { animation: jx-fin-entrar var(--dur-lenta) var(--curva-saida) backwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); } .jx-financeiro .jx-trilha i { animation: jx-fin-crescer var(--dur-narrativa) var(--curva-saida) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); } } /* ---------- responsivo ---------- */ @media (max-width: 900px) { .jx-financeiro .jx-nums { gap: 12px; } .jx-financeiro .jx-nums .tx-numero-kpi { font-size: 22px; line-height: 28px; } } @media (max-width: 640px) { .jx-financeiro .jx-nums { gap: 10px; } /* legenda de duas linhas não desalinha os números: eles se encostam embaixo */ .jx-financeiro .jx-nums .jx-num { justify-content: flex-end; } .jx-financeiro .jx-nums .tx-numero-kpi { font-size: 17px; line-height: 22px; letter-spacing: -0.01em; } .jx-financeiro .jx-num-m { font-size: 18px; line-height: 24px; } .jx-financeiro .jx-dois { gap: 12px; } .jx-financeiro .jx-fluxo { grid-template-columns: 56px minmax(0, 1fr); } .jx-financeiro .jx-periodo-rotulo { padding: 0 8px 0 10px; } /* tabela de comissões vira cartões: rodapé também, eventos em largura cheia */ .jx-financeiro .tabela-responsiva tfoot { display: block; width: 100%; } .jx-financeiro .tabela-responsiva tr.jx-eventos td, .jx-financeiro .tabela-responsiva tr.jx-total td.celula-principal { grid-column: 1 / -1; } .jx-financeiro .tabela-responsiva tr.jx-eventos { padding: 0; } .jx-financeiro .tabela.jx-tabela tr.jx-eventos td { padding: 10px 14px 14px; } .jx-financeiro .tabela-responsiva td.jx-caret { position: absolute; top: 12px; right: 10px; width: auto; padding: 0; } .jx-financeiro .tabela.jx-tabela tr.jx-total td { border-top: 0; } .jx-financeiro .tabela-responsiva tr.jx-total { border-top: 1px solid var(--borda-forte); } /* resultado por categoria: uma linha por categoria (nome · parte · valor), sem rolagem */ .jx-financeiro .jx-tab-cat thead { display: none; } .jx-financeiro .jx-tab-cat, .jx-financeiro .jx-tab-cat tbody, .jx-financeiro .jx-tab-cat tfoot { display: block; width: 100%; } .jx-financeiro .jx-tab-cat tr { display: grid; grid-template-columns: minmax(0, 1fr) 84px max-content; align-items: center; gap: 0 10px; padding: 9px 20px; border-bottom: 1px solid var(--borda); } .jx-financeiro .tabela.jx-tabela.jx-tab-cat td { display: block; min-width: 0; padding: 0; border: 0; } .jx-financeiro .tabela.jx-tabela.jx-tab-cat td.jx-vazio-linha { padding-left: 0; } .jx-financeiro .jx-tab-cat td[colspan="3"] { grid-column: 1 / -1; } .jx-financeiro .jx-tab-cat td[colspan="2"] { grid-column: 1 / 3; } .jx-financeiro .jx-tab-cat tr.jx-grupo { padding: 6px 20px; background: var(--superficie-2); } .jx-financeiro .jx-tab-cat tr.jx-total { border-top: 1px solid var(--borda-forte); } .jx-financeiro .jx-tab-cat tr.jx-saldo { border-top: 2px solid var(--texto); border-bottom: 0; padding-top: 12px; padding-bottom: 12px; } .jx-financeiro .jx-tab-cat .jx-share .prog { flex-basis: 48px; min-width: 48px; } } @media (max-width: 420px) { .jx-financeiro .kpi-valor { font-size: 19px; line-height: 24px; } .jx-financeiro .jx-nums .tx-numero-kpi { font-size: 15px; line-height: 20px; letter-spacing: -0.02em; } } /* ---------- clientes ---------- */ /* JADE — estilos da tela clientes (prefixo jx-, escopados em .jx-clientes) Estante "quem procurar esta semana", tabela de clientes (telefone + WhatsApp, última compra, crediário, aniversário), gaveta Cliente 360 (capa com trilho da jornada, corpo rolável, rodapé) e a ficha completa. Só tokens de variaveis.css: o tema escuro vem de graça. Nada aqui redefine classe do design system. A raiz da lista e da ficha é
; a gaveta (