/* ========================================================================= TradeFlexPro — Design System compartilhado (site · promotor · cliente · admin) Redesign 2026: SaaS moderno, marca fiel, mobile-first e acessível (AA). ── TOKENS (use sempre via var(--token); não use hex solto) ─────────────── COR · marca --azul / --navy ........ #102A43 Azul TradeFlex (manual v1.0) --azul-escuro .......... #0B1D2F navy para seções escuras/gradientes --azul-900 ............. #071523 navy mais profundo (profundidade) --azul-claro ........... #E3EBF3 tinta navy clara (chips/realces em fundo claro) --laranja .............. #FF6B00 Laranja Agilidade (cor de AÇÃO, não de texto) --laranja-escuro ....... #E85F00 laranja hover/pressed --laranja-claro ........ #FFF0E5 tinta laranja clara --laranja-texto ........ #B34A00 laranja legível como texto (5.4:1 no branco) --cinza-ardosia ........ #627D98 Cinza Ardósia oficial (rótulos, ícones, bordas) COR · texto --texto ................ #0B0F14 texto principal (sobre claro) --cinza ................ #556E88 texto secundário/mudo (sobre claro) --texto-claro .......... #F4F7FA texto sobre fundo escuro --muted-escuro ......... #A7BACE texto secundário sobre fundo escuro COR · superfície --fundo ................ #F4F7FA fundo da página --carta ................ #FFFFFF superfície de cartão --borda ................ #DCE4EC borda sutil --borda-forte .......... #C5D0DC borda de contraste COR · funcional (harmonizadas com a marca) --verde / --verde-claro sucesso / repasse --vermelho / --vermelho-claro erro / disputa --amarelo / --amarelo-claro aviso / pendente ESPAÇO (escala 4px): --e1 4 · --e2 8 · --e3 12 · --e4 16 · --e5 20 · --e6 24 · --e8 32 · --e10 40 · --e12 48 · --e16 64 RAIO: --raio-xs 6 · --raio-sm 8 · --raio 12 · --raio-lg 16 · --raio-xl 22 · --raio-full 999 SOMBRA (elevação): --sombra-1 (repouso) · --sombra-2 (cartão/hover) · --sombra-3 (flutuante) TIPO: --fonte (Inter + system) · escala --fs-display..--fs-xs (clamp) MOVIMENTO: --trans (180ms) · respeita prefers-reduced-motion Z: --z-nav 100 · --z-topo 200 · --z-modal 1000 · --z-toast 9999 ========================================================================= */ /* A fonte Inter é carregada de forma ASSÍNCRONA nos dos HTMLs (), nunca bloqueando o render. Sem rede/Inter, cai graciosamente para a pilha system-ui de --fonte. */ :root { /* marca */ --azul: #102A43; --navy: #102A43; --azul-escuro: #0B1D2F; --azul-900: #071523; --azul-claro: #E3EBF3; --laranja: #FF6B00; --laranja-escuro: #E85F00; --laranja-claro: #FFF0E5; --laranja-texto: #B34A00; /* laranja legivel como TEXTO (5.4:1 no branco) */ --cinza-ardosia: #627D98; /* Cinza Ardosia oficial do manual */ /* funcionais */ --verde: #16A34A; --verde-claro: #E7F6EC; --vermelho: #DC2626; --vermelho-claro: #FDECEC; --amarelo: #B45309; --amarelo-claro: #FDF1DF; /* neutros / texto / superfície */ --cinza: #556E88; --muted-escuro: #A7BACE; --texto: #0B0F14; --texto-claro: #F4F7FA; --fundo: #F4F7FA; --carta: #FFFFFF; --borda: #DCE4EC; --borda-forte: #C5D0DC; /* espaçamento */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px; --e16: 64px; /* raios */ --raio-xs: 6px; --raio-sm: 8px; --raio: 12px; --raio-lg: 16px; --raio-xl: 22px; --raio-full: 999px; /* sombras em camadas (tom navy) */ --sombra-1: 0 1px 2px rgba(16, 42, 67, .06), 0 1px 3px rgba(16, 42, 67, .05); --sombra-2: 0 2px 8px rgba(16, 42, 67, .07), 0 10px 28px rgba(16, 42, 67, .07); --sombra-3: 0 16px 40px rgba(16, 42, 67, .16), 0 6px 14px rgba(16, 42, 67, .08); --sombra: var(--sombra-2); --foco: 0 0 0 3px rgba(255, 107, 0, .28); /* tipografia */ --fonte: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fonte-mono: ui-monospace, "SF Mono", Consolas, "Roboto Mono", monospace; --fs-display: clamp(34px, 5.2vw, 56px); --fs-h1: clamp(27px, 3.6vw, 38px); --fs-h2: clamp(22px, 2.4vw, 30px); --fs-h3: 18px; --fs-h4: 15.5px; --fs-body: 15.5px; --fs-small: 13px; --fs-xs: 11.5px; /* movimento + z-index */ --trans: 180ms cubic-bezier(.4, 0, .2, 1); --z-nav: 100; --z-topo: 200; --z-modal: 1000; --z-toast: 9999; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--fonte); background: var(--fundo); color: var(--texto); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; color: var(--azul); letter-spacing: -.01em; font-weight: 800; } h1 { font-size: var(--fs-h1); letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); letter-spacing: -.015em; } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 1em; } a { color: var(--azul); } img { max-width: 100%; } ::selection { background: rgba(255, 107, 0, .22); } /* foco acessível visível (teclado) */ :focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-sm); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--foco); } /* ---------- ícones SVG (set Lucide-like, ver tf.js) ---------- */ .tf-i { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; line-height: 0; color: inherit; } .tf-i svg, svg.tf-i { display: block; } /* título/rótulo com ícone alinhado à esquerda do texto */ .linha-ic { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .linha-ic .tf-i { color: var(--laranja-escuro); } /* ícone dentro de uma "bolha" arredondada (destaques) */ .ic-bolha, .ic-bolha-verde { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--raio-lg); flex: 0 0 auto; box-shadow: var(--sombra-1); } .ic-bolha { background: var(--azul-claro); color: var(--azul); } .ic-bolha-verde { background: #fff; color: #117a39; } .ic-bolha .tf-i, .ic-bolha svg, .ic-bolha-verde .tf-i, .ic-bolha-verde svg { width: 30px; height: 30px; } /* ícone grande centralizado (telas de status: análise, certificado, vazio…) */ .ic-destaque { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: var(--raio-lg); background: var(--azul-claro); color: var(--azul); display: flex; align-items: center; justify-content: center; } .ic-destaque .tf-i, .ic-destaque svg { width: 32px; height: 32px; } .ic-destaque.verde { background: var(--verde-claro); color: #117a39; } .ic-destaque.vermelho { background: var(--vermelho-claro); color: var(--vermelho); } .ic-destaque.laranja { background: var(--laranja-claro); color: var(--laranja-texto); } /* ---------- marca ---------- */ /* A assinatura TradeFlexPro e um desenho fixo (Manual de Identidade Visual v1.0, pag. 11): nunca e redigitada nem recriada com fonte. Entra sempre pelo SVG oficial em /assets/marca/. Minimo digital da horizontal: 160px de largura. */ .logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; } /* 46px de altura = 160px de largura, o minimo digital da assinatura horizontal (manual pag. 8). Nao reduzir abaixo disso; em espaco apertado use .logo-mini, que troca a assinatura pelo simbolo. */ .logo img { height: 46px; width: auto; display: block; } .logo-grande img { height: 60px; } .logo-mini img { height: 34px; } /* simbolo + rotulo de area interna (Gestao, Socio): permitido quando a marca ja esta contextualizada (manual pag. 7) */ .logo-mini { gap: 10px; } .logo-rotulo { font-weight: 600; font-size: 17px; color: #fff; line-height: 1; letter-spacing: -.01em; } /* Slogan / kicker da marca */ .kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--fs-small); letter-spacing: 1.4px; text-transform: uppercase; color: var(--laranja-texto); margin-bottom: 12px; } .kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--laranja); } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; border-radius: var(--raio-sm); cursor: pointer; font: inherit; font-weight: 700; padding: 10px 18px; text-decoration: none; transition: background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans), transform var(--trans); white-space: nowrap; color: var(--azul); background: var(--azul-claro); min-height: 42px; letter-spacing: -.01em; } .btn:hover { background: #d8e3f0; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn .tf-i { vertical-align: -.22em; } .btn-primario { background: var(--laranja); color: var(--azul); box-shadow: 0 2px 8px rgba(255, 107, 0, .28); } .btn-primario:hover { background: var(--laranja-escuro); box-shadow: 0 4px 14px rgba(255, 107, 0, .34); } .btn-azul { background: var(--azul); color: #fff; } .btn-azul:hover { background: var(--azul-escuro); } .btn-contorno { background: #fff; border-color: var(--borda-forte); color: var(--azul); } .btn-contorno:hover { background: var(--fundo); border-color: var(--cinza); } .btn-perigo { background: var(--vermelho-claro); color: var(--vermelho); } .btn-perigo:hover { background: #f9dada; } .btn-verde { background: var(--verde); color: #fff; } .btn-verde:hover { background: #128a3e; } .btn-bloco { width: 100%; } .btn-mini { padding: 6px 13px; font-size: 13.5px; border-radius: var(--raio-xs); min-height: 34px; } .btn-grande { padding: 14px 28px; font-size: 17px; border-radius: var(--raio); min-height: 52px; } /* ---------- cartões e layout ---------- */ .carta { background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-1); padding: var(--e5); } .carta + .carta { margin-top: var(--e4); } .grade { display: grid; gap: var(--e4); } /* tracks 1fr têm mínimo "auto" (= largura do conteúdo): sem isto, o card com a palavra mais larga estica e fica maior que os outros (grid blowout). */ .grade > * { min-width: 0; } /* Dentro de um grid, a regra ".carta + .carta" (margem entre cartas empilhadas) não vale: sem isto o 1º card fica visualmente maior que os vizinhos da linha. */ .grade > .carta { margin-top: 0; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } .g-form { grid-template-columns: 1.5fr 1fr; align-items: start; } .g-detalhe { grid-template-columns: 1.4fr 1fr; align-items: start; } @media (max-width: 900px) { .g3, .g4, .g5 { grid-template-columns: repeat(2, 1fr); } .g-form, .g-detalhe { grid-template-columns: 1fr; } } @media (max-width: 600px) { .g2, .g3, .g4, .g5 { grid-template-columns: 1fr; } } .linha { display: flex; align-items: center; gap: 10px; } .entre { justify-content: space-between; } .quebra { flex-wrap: wrap; } .cresce { flex: 1; } .centro { text-align: center; } .mudo { color: var(--cinza); } .mini { font-size: var(--fs-small); } .forte { font-weight: 700; } .sem-margem { margin: 0; } .mt { margin-top: var(--e4); } .mb { margin-bottom: var(--e4); } /* ---------- selos de status ---------- */ .selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--raio-full); font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--azul-claro); color: var(--azul); line-height: 1.3; } .selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } /* quando o selo traz um ícone SVG, dispensa o "dot" marcador */ .selo:has(.tf-i)::before, .selo:has(svg)::before { display: none; } .selo .tf-i { margin: -2px 0; } .selo-aberto { background: #e0f0fb; color: #1763a3; } .selo-aceito { background: #ede9fe; color: #6d28d9; } .selo-em_execucao { background: var(--amarelo-claro); color: var(--amarelo); } .selo-concluido { background: #dbeafe; color: #1d4ed8; } .selo-aprovado { background: var(--verde-claro); color: #117a39; } .selo-pago { background: var(--verde); color: #fff; } .selo-cancelado { background: #eceff3; color: var(--cinza); } .selo-em_disputa { background: var(--vermelho-claro); color: var(--vermelho); } .selo-pendente { background: var(--amarelo-claro); color: var(--amarelo); } .selo-reprovado, .selo-bloqueado { background: var(--vermelho-claro); color: var(--vermelho); } .selo-recebido { background: #dbeafe; color: #1d4ed8; } .selo-conferido { background: var(--amarelo-claro); color: var(--amarelo); } .selo-repassado { background: var(--verde-claro); color: #117a39; } .selo-estornado { background: #eceff3; color: var(--cinza); } .selo-laranja { background: var(--laranja-claro); color: var(--laranja-escuro); } /* ---------- formulários ---------- */ .campo { margin-bottom: var(--e3); } .campo label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--azul); } .campo input, .campo select, .campo textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--borda-forte); border-radius: var(--raio-sm); font: inherit; background: #fff; color: var(--texto); transition: border-color var(--trans), box-shadow var(--trans); } .campo input::placeholder, .campo textarea::placeholder { color: #9aa8b5; } .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--cinza); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--laranja); box-shadow: var(--foco); } .campo .dica { font-size: 12.5px; color: var(--cinza); margin-top: 5px; } .campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } @media (max-width: 540px) { .campos-2 { grid-template-columns: 1fr; } } /* ---------- tabelas ---------- */ .tabela-rolagem { overflow-x: auto; border-radius: var(--raio); } table.tf { width: 100%; border-collapse: collapse; font-size: 14px; } table.tf th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza); padding: 10px 12px; border-bottom: 1.5px solid var(--borda); white-space: nowrap; background: #FAFCFE; } table.tf td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; } table.tf tr:last-child td { border-bottom: none; } table.tf tbody tr { transition: background var(--trans); } table.tf tbody tr:hover td { background: #f6f9fc; } /* ---------- estatísticas ---------- */ .stat { padding: var(--e5); position: relative; } .stat .rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza); display: flex; align-items: center; gap: 7px; } .stat .rotulo .tf-i { color: var(--laranja-escuro); } .stat .valor { font-size: 28px; font-weight: 800; color: var(--azul); margin-top: 4px; letter-spacing: -.02em; line-height: 1.1; } .stat .extra { font-size: 12.5px; color: var(--cinza); margin-top: 2px; } /* ---------- abas ---------- */ .abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--e4); } .aba { border: 1.5px solid var(--borda); background: #fff; border-radius: var(--raio-full); padding: 8px 17px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--cinza); transition: background var(--trans), color var(--trans), border-color var(--trans); display: inline-flex; align-items: center; gap: 7px; } .aba:hover { border-color: var(--borda-forte); color: var(--azul); } .aba.ativa { background: var(--azul); border-color: var(--azul); color: #fff; } /* ---------- avisos ---------- */ /* Bloco (não-flex): o texto é um parágrafo com markup inline e o ícone acompanha o início do texto via vertical-align — sem quebrar o fluxo. */ .aviso { border-radius: var(--raio); padding: 13px 15px; font-size: 14px; margin-bottom: var(--e4); border: 1px solid; } .aviso .tf-i { vertical-align: -.2em; margin-right: 3px; } .aviso-info { background: var(--azul-claro); border-color: #c8dcee; color: #0c4a73; } .aviso-ok { background: var(--verde-claro); border-color: #bfe5cc; color: #115e35; } .aviso-erro { background: var(--vermelho-claro); border-color: #f3c4c4; color: #991b1b; } .aviso-atencao { background: var(--amarelo-claro); border-color: #ecd3a8; color: var(--amarelo); } /* ---------- toast ---------- */ #tf-toasts { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; width: min(440px, calc(100vw - 32px)); pointer-events: none; } .toast { background: var(--azul-escuro); color: #fff; border-radius: var(--raio); padding: 13px 16px; font-size: 14px; font-weight: 600; box-shadow: var(--sombra-3); animation: subir .28s cubic-bezier(.2, .8, .25, 1); display: flex; gap: 10px; align-items: flex-start; border: 1px solid rgba(255, 255, 255, .08); pointer-events: auto; } .toast .tf-i { margin-top: 1px; } .toast.erro { background: var(--vermelho); } .toast.ok { background: var(--verde); } /* Notificação acionável: resolve direto no toast, sem procurar o pedido no menu. */ .toast.com-acao { align-items: center; padding-right: 12px; } .toast .toast-acao { flex: 0 0 auto; margin-left: 4px; background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--raio-full); padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background var(--trans); } .toast .toast-acao:hover { background: rgba(255, 255, 255, .3); } .toast .toast-fechar { flex: 0 0 auto; background: none; border: none; color: rgba(255, 255, 255, .6); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: 2px; } .toast .toast-fechar:hover { color: #fff; } @keyframes subir { from { opacity: 0; transform: translateY(12px) scale(.98); } } /* ---------- modal ---------- */ .veu { position: fixed; inset: 0; background: rgba(11, 29, 47, .58); backdrop-filter: blur(4px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 16px; animation: surgir-veu .2s ease; } .modal { background: #fff; border-radius: var(--raio-lg); width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: var(--e6); box-shadow: var(--sombra-3); animation: surgir-modal .26s cubic-bezier(.2, .8, .25, 1); } @keyframes surgir-veu { from { opacity: 0; } } @keyframes surgir-modal { from { opacity: 0; transform: translateY(16px) scale(.97); } } /* ---------- chat ---------- */ .chat { display: flex; flex-direction: column; gap: 8px; } .bolha { max-width: 82%; border-radius: var(--raio-lg); padding: 10px 14px; font-size: 14px; position: relative; } .bolha .meta { font-size: 11px; opacity: .75; margin-top: 3px; } /* Os dois lados ficam destacados, com diferença LEVE de cor (antes era navy sólido x branco, o que fazia a fala do outro sumir no fundo). Tinta navy para mim, tinta laranja para o outro. */ .bolha-eu { align-self: flex-end; background: var(--azul-claro); color: var(--texto); border: 1px solid #cfdff0; border-bottom-right-radius: 5px; } .bolha-outro { align-self: flex-start; background: var(--laranja-claro); color: var(--texto); border: 1px solid #f6ddc6; border-bottom-left-radius: 5px; } .bolha-eu .autor, .bolha-outro .autor { font-size: 11.5px; font-weight: 800; letter-spacing: .2px; margin-bottom: 2px; } .bolha-eu .autor { color: var(--azul); } .bolha-outro .autor { color: var(--laranja-escuro); } .bolha-sistema { align-self: center; background: #e9eef3; color: var(--cinza); font-size: 12.5px; border-radius: var(--raio-full); padding: 5px 14px; text-align: center; } .bolha img { border-radius: var(--raio-sm); margin-top: 6px; max-height: 200px; display: block; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { border: 1.5px solid var(--borda-forte); background: #fff; border-radius: var(--raio-full); cursor: pointer; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--azul); transition: border-color var(--trans), color var(--trans), background var(--trans); display: inline-flex; align-items: center; gap: 6px; } .chip:hover { border-color: var(--laranja); color: var(--laranja-texto); background: var(--laranja-claro); } /* ---------- tarefas do checklist com fotos exigidas (jornada da execução) ---------- */ .tarefa { border: 1.5px solid var(--borda); border-radius: var(--raio); padding: 11px 13px; margin: 9px 0; background: #fff; transition: border-color var(--trans), background var(--trans); } .tarefa.feita { border-color: #bfe5cc; background: var(--verde-claro); } .tarefa-fotos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; } .chip-foto { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; font-size: 13px; font-weight: 700; border: 1.5px dashed var(--laranja); background: #fff; color: var(--laranja-escuro); border-radius: var(--raio-full); cursor: pointer; font-family: inherit; transition: border-color var(--trans), color var(--trans), background var(--trans); } .chip-foto:hover { background: var(--laranja-claro); } .chip-foto.ok { border-style: solid; border-color: #bfe5cc; background: var(--verde-claro); color: #117a39; } .chip-foto img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin: -3px 0; } .chip-foto.escolha { padding: 5px 11px; font-size: 12px; border-style: solid; border-color: var(--borda-forte); color: var(--cinza); } .chip-foto.escolha:hover { border-color: var(--laranja); color: var(--laranja-texto); } .chip-foto.escolha.ativa { border-color: var(--laranja); background: var(--laranja-claro); color: var(--laranja-texto); } .tag-foto { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; border-radius: var(--raio-full); background: var(--laranja-claro); color: var(--laranja-escuro); white-space: nowrap; } .tag-foto.ok { background: var(--verde-claro); color: #117a39; } /* barra de progresso da execução */ .progresso { height: 10px; background: #eef2f7; border-radius: var(--raio-full); overflow: hidden; margin-top: 8px; } .progresso > span { display: block; height: 100%; border-radius: var(--raio-full); background: linear-gradient(90deg, var(--laranja), var(--laranja-escuro)); transition: width .45s cubic-bezier(.2, .8, .25, 1); } .progresso.completo > span { background: linear-gradient(90deg, var(--verde), #117a39); } /* passos da jornada (check-in → tarefas → fotos → concluir) */ .jornada-passos { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; } .jornada-passos .jp { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--cinza); flex: 1; text-align: center; } .jornada-passos .jp .jp-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2f7; color: var(--cinza); transition: background var(--trans), color var(--trans); } .jornada-passos .jp.ok { color: #117a39; } .jornada-passos .jp.ok .jp-ic { background: var(--verde-claro); color: #117a39; } .jornada-passos .jp.atual { color: var(--laranja-escuro); } .jornada-passos .jp.atual .jp-ic { background: var(--laranja-claro); color: var(--laranja-escuro); box-shadow: 0 0 0 3px rgba(255, 107, 0, .18); } /* linha de tarefa no formulário da empresa */ .tarefa-nova { border: 1.5px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 9px; background: #fff; } .tarefa-nova .t-texto { border: none; padding: 4px 2px; font-weight: 600; width: 100%; font: inherit; } .tarefa-nova .t-texto:focus-visible { box-shadow: none; outline: none; border-bottom: 1.5px solid var(--laranja); border-radius: 0; } /* ---------- fotos ---------- */ .grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .grade-fotos figure { margin: 0; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--borda); background: #fff; } .grade-fotos img { width: 100%; height: 110px; object-fit: cover; display: block; cursor: zoom-in; transition: transform var(--trans); } .grade-fotos figure:hover img { transform: scale(1.04); } .grade-fotos figcaption { font-size: 11.5px; color: var(--cinza); padding: 6px 9px; } /* ---------- fotos AGRUPADAS POR TAREFA (visão da empresa) ---------- Cada tarefa do checklist vira um bloco com suas fotos; antes/depois ficam lado a lado para comparação direta. Foto faltando aparece como vaga vazia. */ .bloco-tarefa { border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; margin-bottom: 12px; overflow: hidden; } .bloco-tarefa > header { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: var(--fundo); border-bottom: 1px solid var(--borda); } .bloco-tarefa > header .t-nome { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; } .bloco-tarefa > header .t-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--raio-full); background: var(--azul-claro); color: var(--azul); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .bloco-tarefa.feita > header { background: var(--verde-claro); border-bottom-color: #bfe5cc; } .bloco-tarefa.feita > header .t-num { background: #16A34A; color: #fff; } .bloco-tarefa.pendente > header .t-num { background: var(--laranja-claro); color: var(--laranja-escuro); } .bloco-tarefa .tiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 12px 13px; } .bloco-tarefa.duo .tiras { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .foto-slot { margin: 0; border-radius: var(--raio-sm); overflow: hidden; border: 1px solid var(--borda); background: var(--fundo); position: relative; } .foto-slot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; transition: transform var(--trans); background: #eef2f6; } .foto-slot:hover img { transform: scale(1.05); } .foto-slot figcaption { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--cinza); padding: 6px 9px; background: #fff; } .foto-slot .rotulo-tipo { position: absolute; top: 7px; left: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: var(--raio-full); background: rgba(16, 42, 67,.82); color: #fff; backdrop-filter: blur(3px); } .foto-slot.antes .rotulo-tipo { background: rgba(90,107,123,.88); } .foto-slot.depois .rotulo-tipo { background: rgba(22,163,74,.9); } .foto-slot.vazia { border-style: dashed; border-color: var(--borda-forte); } .foto-slot.vazia .falta { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--cinza); font-size: 12px; text-align: center; padding: 8px; } /* Lightbox: abre a foto grande sem sair da página, com navegação por teclado. */ .lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(5,18,31,.93); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; } .lightbox img { max-width: min(94vw, 1200px); max-height: 78vh; border-radius: var(--raio); object-fit: contain; box-shadow: var(--sombra-3); } .lightbox .lb-info { color: var(--texto-claro); font-size: 13px; margin-top: 12px; text-align: center; max-width: 90vw; } .lightbox .lb-info strong { color: #fff; } .lightbox .lb-fechar { position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: var(--raio-full); width: 40px; height: 40px; font-size: 22px; line-height: 1; cursor: pointer; } .lightbox .lb-fechar:hover { background: rgba(255,255,255,.26); } .lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: var(--raio-full); width: 46px; height: 46px; font-size: 24px; line-height: 1; cursor: pointer; } .lightbox .lb-nav:hover { background: rgba(255,255,255,.28); } .lightbox .lb-nav.ant { left: 14px; } .lightbox .lb-nav.prox { right: 14px; } @media (max-width: 560px) { .lightbox .lb-nav { width: 38px; height: 38px; font-size: 20px; } } /* ---------- Financeiro: abas, período, gráfico e barras de categoria ---------- */ .abas-fin { display: flex; gap: 4px; border-bottom: 1.5px solid var(--borda); margin: 14px 0 18px; overflow-x: auto; } .aba-fin { padding: 9px 16px; font-size: 14px; font-weight: 700; color: var(--cinza); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1.5px; transition: color var(--trans), border-color var(--trans); } .aba-fin:hover { color: var(--laranja-escuro); } .aba-fin.ativa { color: var(--azul); border-bottom-color: var(--laranja); } .seletor-periodo { padding: 7px 11px; border: 1.5px solid var(--borda); border-radius: 9px; font: inherit; font-size: 13px; background: #fff; max-width: 240px; } .area-grafico { margin: 14px 0 8px; min-height: 260px; } .area-grafico svg { display: block; overflow: visible; } .ch-barra { transition: opacity var(--trans); } .ch-barra:hover { opacity: 1 !important; } .legenda-gr { display: flex; gap: 14px; font-size: 12px; color: var(--cinza); flex-wrap: wrap; } .legenda-gr .ch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .ch-rec { background: var(--verde); } .ch-des { background: var(--vermelho); } .ch-luc { background: var(--laranja); border-radius: 999px !important; } .barra-cat + .barra-cat { margin-top: 11px; } .barra-cat .trilho { height: 8px; border-radius: var(--raio-full); background: var(--fundo); overflow: hidden; margin-top: 5px; } .barra-cat .preenche { height: 100%; border-radius: var(--raio-full); background: linear-gradient(90deg, var(--laranja), var(--laranja-escuro)); } table.tf tr.linha-total td { border-top: 2px solid var(--borda-forte); background: var(--fundo); font-weight: 700; } table.tf tr.inativa td { opacity: .5; } .carta.stat.lucro-positivo { border-left: 4px solid var(--verde); } .carta.stat.lucro-negativo { border-left: 4px solid var(--vermelho); } .carta.stat.destaque-receita { border-left: 4px solid var(--verde); } /* ---------- fotos extras e pedidos adicionais: um item por linha ---------- */ .lista-pedidos { list-style: none; margin: 4px 0 8px; padding: 0; } .lista-pedidos li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--cinza); padding: 5px 0; border-bottom: 1px dashed var(--borda); } .lista-pedidos li:last-child { border-bottom: none; } .lista-pedidos li .tf-i, .lista-pedidos li svg { flex: 0 0 auto; margin-top: 2px; color: var(--laranja-escuro); } /* ---------- caixa do pedido: reservado no gateway x efetivamente pago ---------- */ .faixa-caixa { display: flex; gap: 11px; align-items: flex-start; border-radius: var(--raio); padding: 11px 14px; margin: 10px 0 4px; font-size: 13.5px; } .faixa-caixa .tf-i, .faixa-caixa svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; } .faixa-caixa .mini { font-size: 12px; opacity: .85; margin-top: 2px; } .faixa-caixa.reservado { background: var(--laranja-claro); color: #8a4200; } .faixa-caixa.pago { background: var(--verde-claro); color: #115e35; } .faixa-caixa.estornado { background: var(--vermelho-claro); color: #8c2020; } /* ---------- funil de espera da carteira (por que não há nada a faturar) ---------- */ .funil-espera { margin-top: 12px; border-top: 1px dashed var(--borda); padding-top: 11px; } .funil-espera .degrau { display: flex; gap: 10px; align-items: center; padding: 7px 0; } .funil-espera .degrau + .degrau { border-top: 1px dashed var(--borda); } /* ---------- procuração / aceite em destaque ---------- */ .cartao-procuracao { border-left: 4px solid var(--laranja); background: var(--laranja-claro); } .caixa-aceite { border: 1.5px solid var(--borda-forte); border-radius: var(--raio); padding: 11px 13px; background: var(--azul-claro); } .caixa-aceite:has(input:checked) { border-color: #bfe5cc; background: var(--verde-claro); } /* ---------- estrelas ---------- */ .estrelas { color: #f59e0b; letter-spacing: 2px; font-size: 15px; } .estrelas-escolha button { background: none; border: none; font-size: 30px; cursor: pointer; color: #d4dbe2; padding: 2px; transition: color var(--trans), transform var(--trans); } .estrelas-escolha button:hover { transform: scale(1.12); } .estrelas-escolha button.acesa { color: #f59e0b; } /* ---------- listas vazias ---------- */ .vazio { text-align: center; color: var(--cinza); padding: var(--e10) var(--e4); } .vazio .icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: var(--raio-full); background: var(--azul-claro); color: var(--azul); } .vazio .icone .tf-i, .vazio .icone svg { width: 30px; height: 30px; } /* ---------- skeletons (carregando) ---------- */ .sk { position: relative; overflow: hidden; background: #e9eef4; border-radius: var(--raio-sm); } .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: brilho 1.3s infinite; } .sk-linha { height: 12px; margin: 8px 0; } .sk-titulo { height: 20px; width: 55%; margin: 6px 0 12px; } .sk-cartao { height: 96px; border-radius: var(--raio-lg); } @keyframes brilho { 100% { transform: translateX(100%); } } /* ---------- barra do app (mobile) ---------- */ .barra-app { position: sticky; top: 0; z-index: var(--z-nav); background: linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 100%); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; box-shadow: 0 2px 14px rgba(11, 29, 47, .28); padding-top: max(13px, env(safe-area-inset-top)); } .barra-app .logo, .barra-app .logo em { color: #fff; } .nav-fundo { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--borda); display: flex; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 16px rgba(16, 42, 67, .07); } .nav-fundo a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 9px 4px 7px; text-decoration: none; min-height: 56px; color: var(--cinza); font-size: 11px; font-weight: 700; transition: color var(--trans); position: relative; } .nav-fundo a .ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .nav-fundo a .ico svg, .nav-fundo a .ico .tf-i { width: 23px; height: 23px; } .nav-fundo a.ativa { color: var(--laranja-escuro); } .nav-fundo a.ativa::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--laranja); } .sino { position: relative; background: none; border: none; color: #fff; cursor: pointer; padding: 6px; line-height: 0; display: inline-flex; border-radius: var(--raio-sm); transition: background var(--trans); } .sino:hover { background: rgba(255, 255, 255, .12); } .sino svg, .sino .tf-i { width: 22px; height: 22px; } .sino .bola { position: absolute; top: -1px; right: -2px; background: var(--laranja); color: #fff; font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px; border-radius: var(--raio-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--azul); } /* ---------- layout com lateral (cliente/admin) ---------- */ .app-lateral { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; } .lateral { background: linear-gradient(180deg, var(--azul-escuro) 0%, var(--azul-900) 100%); color: var(--muted-escuro); padding: var(--e5) var(--e3); display: flex; flex-direction: column; gap: 3px; } .lateral .logo, .lateral .logo em { color: #fff; } .lateral .logo { margin: 4px 8px 20px; } .lateral a.item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--raio-sm); color: var(--muted-escuro); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background var(--trans), color var(--trans); } .lateral a.item .tf-i, .lateral a.item svg { width: 19px; height: 19px; flex: 0 0 auto; } .lateral a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; } .lateral a.item.ativa { background: var(--laranja); color: #fff; box-shadow: 0 4px 14px rgba(255, 107, 0, .3); } .lateral .rodape-lateral { margin-top: auto; padding: 10px 13px; font-size: 12.5px; color: #8098ad; } .conteudo { padding: var(--e6) clamp(16px, 3vw, 36px); max-width: 1200px; width: 100%; } @media (max-width: 860px) { .app-lateral { grid-template-columns: 1fr; } .lateral { flex-direction: row; align-items: center; overflow-x: auto; position: sticky; top: 0; z-index: var(--z-nav); padding: 10px; gap: 2px; } .lateral .logo { margin: 0 10px 0 4px; } .lateral .logo em { display: none; } .lateral a.item { white-space: nowrap; padding: 9px 12px; font-size: 13.5px; } .lateral .rodape-lateral { display: none; } } /* ---------- linha do tempo ---------- */ .tempo { list-style: none; margin: 0; padding: 0; } .tempo li { position: relative; padding: 0 0 18px 28px; } .tempo li::before { content: ""; position: absolute; left: 6px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--borda-forte); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--borda-forte); } .tempo li::after { content: ""; position: absolute; left: 11px; top: 18px; bottom: 0; width: 2px; background: var(--borda); } .tempo li:last-child::after { display: none; } .tempo li.feita::before { background: var(--verde); box-shadow: 0 0 0 1.5px var(--verde); } .tempo li.atual::before { background: var(--laranja); box-shadow: 0 0 0 3px rgba(255, 107, 0, .22); } /* ---------- barras de gráfico (colunas) ---------- */ .barras { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 18px; border-bottom: 2px solid var(--borda); } .barras .b { flex: 1; background: linear-gradient(180deg, #1c3b59 0%, var(--azul) 100%); border-radius: 5px 5px 0 0; min-height: 4px; position: relative; transition: background var(--trans), transform var(--trans); } .barras .b:hover { background: linear-gradient(180deg, var(--laranja) 0%, var(--laranja-escuro) 100%); transform: scaleY(1.02); transform-origin: bottom; } /* o número fica oculto e só aparece no hover (evita rótulos sobrepostos) */ .barras .b .tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #fff; background: var(--azul-escuro); padding: 2px 7px; border-radius: 6px; white-space: nowrap; margin-bottom: 5px; opacity: 0; transition: opacity var(--trans); pointer-events: none; box-shadow: var(--sombra-1); } .barras .b:hover .tip { opacity: 1; } /* trilho/preenchimento de barra (compartilhado por distribuição e pedidos/dia) */ .trilho { height: 12px; background: #eef2f7; border-radius: var(--raio-full); overflow: hidden; } .preenche { display: block; height: 100%; border-radius: var(--raio-full); background: linear-gradient(90deg, var(--azul), #1c3b59); transition: width .5s cubic-bezier(.2, .8, .25, 1); } /* ---------- gráfico de barras horizontais (distribuição por status, clicável) ---------- */ .barras-h { display: flex; flex-direction: column; gap: 6px; } .barras-h .linha-bh { display: grid; grid-template-columns: 168px 1fr 34px 16px; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 5px 8px; margin: 0 -8px; border-radius: var(--raio-sm); transition: background var(--trans); } .barras-h a.linha-bh:hover { background: #f6f9fc; } .barras-h a.linha-bh:hover .pend-go { color: var(--laranja); } .barras-h .linha-bh > div:first-child { min-width: 0; overflow: hidden; } .barras-h .linha-bh .selo { max-width: 100%; } .barras-h .num { font-weight: 800; color: var(--azul); text-align: right; font-size: 14px; } .barras-h .pend-go { width: 16px; height: 16px; } /* ---------- pedidos por dia (data · barra · nº · faturamento) ---------- */ .serie-dia { display: flex; flex-direction: column; gap: 9px; max-height: 230px; overflow-y: auto; } .linha-dia { display: grid; grid-template-columns: 46px 1fr 28px 88px; align-items: center; gap: 11px; } .linha-dia .dia-data { font-size: 12px; font-weight: 700; color: var(--cinza); } .linha-dia .preenche { background: linear-gradient(90deg, var(--laranja), var(--laranja-escuro)); } .linha-dia .dia-n { font-weight: 800; color: var(--azul); text-align: right; font-size: 13.5px; } .linha-dia .dia-fat { font-weight: 700; color: #117a39; text-align: right; font-size: 12.5px; white-space: nowrap; } /* variante por mês — o rótulo é "ago/26", precisa de mais espaço que "07/08" */ .serie-dia.por-mes .linha-dia { grid-template-columns: 112px 1fr 32px 92px; } .serie-dia.por-mes .dia-data { text-transform: capitalize; } /* ---------- input inline dentro de tabela (orçamento por categoria) ---------- */ .entrada-mini { padding: 5px 8px; border: 1.5px solid var(--borda); border-radius: 7px; font: inherit; font-size: 13px; background: #fff; text-align: right; transition: border-color var(--trans); } .entrada-mini:focus { outline: none; border-color: var(--laranja); } .entrada-mini::placeholder { color: var(--borda-forte); } /* ---------- variação vs. período anterior (MoM) ---------- */ .mom { font-size: 12px; font-weight: 800; margin-left: 7px; letter-spacing: 0; vertical-align: middle; padding: 2px 6px; border-radius: var(--raio-full); white-space: nowrap; } .mom.sobe { color: #117a39; background: var(--verde-claro); } .mom.desce { color: #b42318; background: #fdeceb; } /* num KPI onde cair é bom (custo, disputa), inverta com .mom-invertido no pai */ .mom-invertido .mom.sobe { color: #b42318; background: #fdeceb; } .mom-invertido .mom.desce { color: #117a39; background: var(--verde-claro); } /* ---------- teaser de bloco travado por plano ---------- */ .borrado { filter: blur(3.5px); opacity: .55; user-select: none; pointer-events: none; } .destrava { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .destrava:hover { color: var(--laranja-escuro); } /* ---------- cards de pendência (ação) ---------- */ .pend-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .pend-grade { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pend-grade { grid-template-columns: 1fr; } } .pend-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; color: inherit; border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--carta); box-shadow: var(--sombra-1); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); } .pend-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); } .pend-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--raio); display: flex; align-items: center; justify-content: center; background: var(--laranja-claro); color: var(--laranja-escuro); } .pend-ic .tf-i, .pend-ic svg { width: 24px; height: 24px; } .pend-card .pend-n { font-size: 26px; font-weight: 800; color: var(--azul); line-height: 1; letter-spacing: -.02em; } .pend-card .pend-rot { font-size: 13px; color: var(--cinza); font-weight: 600; margin-top: 3px; } .pend-card .pend-go { color: var(--borda-forte); flex: 0 0 auto; transition: color var(--trans), transform var(--trans); } .pend-card:hover .pend-go { color: var(--laranja); transform: translateX(2px); } /* zerada = tudo em dia (verde, discreta) */ .pend-card.zerada .pend-ic { background: var(--verde-claro); color: #117a39; } .pend-card.zerada .pend-n { color: #117a39; } /* ---------- credencial ---------- */ .credencial { background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 60%, var(--azul-900) 100%); color: #fff; border-radius: var(--raio-xl); padding: var(--e6); position: relative; overflow: hidden; box-shadow: var(--sombra-3); border: 1px solid rgba(255, 255, 255, .06); } .credencial::before { content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 0, .42), transparent 70%); } .credencial::after { content: ""; position: absolute; left: -40px; bottom: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 158, 214, .22), transparent 70%); } .credencial > * { position: relative; } .credencial .qr { background: #fff; border-radius: var(--raio); padding: 10px; width: fit-content; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); } .credencial .codigo { font-family: var(--fonte-mono); letter-spacing: 1px; } /* ---------- diversos ---------- */ .divisor { border: none; border-top: 1px solid var(--borda); margin: var(--e4) 0; } .rotulo-secao { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--cinza); margin: var(--e5) 0 var(--e2); display: flex; align-items: center; gap: 8px; } .numero-pedido { font-family: var(--fonte-mono); font-weight: 700; color: var(--cinza); font-size: 13px; } .preco-grande { font-size: 24px; font-weight: 800; color: var(--verde); letter-spacing: -.01em; } .caixa-rolavel { max-height: 380px; overflow-y: auto; padding-right: 4px; } /* ===================== Site institucional (landing) ===================== */ .site { background: #fff; } .topo { position: sticky; top: 0; z-index: var(--z-topo); background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--borda); } .topo-inner { max-width: 1120px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 22px; } .topo nav { display: flex; gap: 20px; flex: 1; } .topo nav a { text-decoration: none; color: var(--cinza); font-weight: 600; font-size: 14.5px; transition: color var(--trans); } .topo nav a:hover { color: var(--laranja-escuro); } .secao { max-width: 1120px; margin: 0 auto; padding: var(--e16) 20px; } @media (max-width: 700px) { .secao { padding: var(--e12) 18px; } .topo nav { display: none; } } /* Cards do site: mesma altura por fileira e topo alinhado. O height:100% faz o card preencher a linha do grid; o margin-top:0 anula a regra ".carta + .carta" (pensada para cards empilhados) que, dentro do grid, empurrava os vizinhos 16px para baixo e fazia o 1º parecer "maior". Escopado em .site (não afeta os apps). */ .site .grade > .carta { height: 100%; margin-top: 0; } .heroi { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--e10); align-items: center; } @media (max-width: 860px) { .heroi { grid-template-columns: 1fr; gap: var(--e8); } } .heroi h1 { font-size: var(--fs-display); letter-spacing: -.025em; margin-bottom: 16px; line-height: 1.06; } .heroi h1 .grifo { color: var(--laranja); } .heroi .sub { font-size: 18px; color: var(--cinza); max-width: 540px; line-height: 1.6; } /* ilustração vetorial do herói (empresas/promotores) */ .ilustra { display: flex; align-items: center; justify-content: center; } .ilustra svg { width: 100%; max-width: 460px; height: auto; filter: drop-shadow(0 24px 50px rgba(16, 42, 67, .22)); } @media (max-width: 860px) { .ilustra { margin-top: 8px; } .ilustra svg { max-width: 380px; } } .selinhos { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--e5) 0 0; } .selinho { display: inline-flex; align-items: center; gap: 7px; background: var(--azul-claro); color: var(--azul); border-radius: var(--raio-full); padding: 8px 15px; font-size: 13px; font-weight: 700; } .selinho .tf-i { color: var(--laranja-escuro); } .precos-hero { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--e5) 0 8px; } .preco-chip { background: var(--verde-claro); color: #117a39; border-radius: var(--raio); padding: 10px 17px; font-size: 19px; font-weight: 800; } .preco-chip small { font-size: 13px; font-weight: 600; color: var(--cinza); } /* comparação "por que TradeFlexPro" */ .vs-mercado ul { padding-left: 4px; line-height: 1.9; margin: 0; list-style: none; } .vs-mercado li { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; } .vs-mercado li .tf-i { margin-top: 3px; flex: 0 0 auto; } .vs-ruim { background: #fbf4f4; border-color: #ecd3d3 !important; } .vs-ruim h3 { color: var(--cinza); } .vs-ruim li .tf-i { color: var(--vermelho); } .vs-bom { border: 2px solid var(--verde) !important; box-shadow: 0 10px 30px rgba(22, 163, 74, .12); } .vs-bom h3 { color: #117a39; } .vs-bom li .tf-i { color: var(--verde); } /* cartões de escolha de público */ .escolha-cartao { display: flex; flex-direction: column; text-align: center; padding: var(--e8) var(--e6); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); text-decoration: none; color: inherit; } .escolha-cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); border-color: var(--laranja); } .escolha-cartao .ic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: var(--raio-lg); background: var(--azul-claro); color: var(--azul); } .escolha-cartao .ic .tf-i, .escolha-cartao .ic svg { width: 32px; height: 32px; } /* Novo pedido: seleção de promotor + resumo */ .escolha-promotor { display: grid; gap: 8px; max-height: 320px; overflow: auto; padding: 2px; } .cartao-promotor { border: 1.5px solid var(--borda); border-radius: var(--raio); padding: 11px 13px; cursor: pointer; transition: border-color var(--trans), box-shadow var(--trans), background var(--trans); background: #fff; } .cartao-promotor:hover { border-color: var(--laranja); } .cartao-promotor.marcado { border-color: var(--laranja); box-shadow: 0 0 0 2px rgba(255, 107, 0, .18); background: var(--laranja-claro); } .resumo-valor { font-size: 14px; } .linha-v { display: flex; justify-content: space-between; padding: 5px 0; } .linha-v.total { border-top: 1.5px solid var(--borda); margin-top: 6px; padding-top: 9px; font-weight: 800; font-size: 16px; } /* celular ilustrativo (mockup do app) */ .fone { width: 300px; margin: 0 auto; background: linear-gradient(165deg, #16324f, var(--azul-900)); border-radius: 42px; padding: 13px; box-shadow: var(--sombra-3), inset 0 0 0 2px rgba(255, 255, 255, .06); position: relative; } .fone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 86px; height: 22px; background: var(--azul-900); border-radius: var(--raio-full); z-index: 2; } .fone .tela { background: var(--fundo); border-radius: 32px; overflow: hidden; position: relative; } .fone .tela .cab { background: linear-gradient(160deg, var(--azul), var(--azul-escuro)); color: #fff; padding: 26px 16px 14px; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; } .fone .tela .corpo { padding: 14px; } .cartao-chamado { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 13px; margin-bottom: 11px; box-shadow: var(--sombra-1); } .cartao-chamado:last-child { margin-bottom: 0; } .cartao-chamado .v { color: var(--verde); font-weight: 800; font-size: 18px; } .pix { display: inline-flex; align-items: center; gap: 5px; background: var(--verde-claro); color: #117a39; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--raio-full); } .passos { counter-reset: passo; } .passo { position: relative; padding: var(--e6); } .passo::before { counter-increment: passo; content: counter(passo); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--raio); background: linear-gradient(135deg, var(--laranja), var(--laranja-escuro)); color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(255, 107, 0, .3); } .plano-carta { position: relative; display: flex; flex-direction: column; } .plano-carta .preco { font-size: 30px; font-weight: 800; color: var(--azul); letter-spacing: -.02em; } .plano-carta .preco small { font-size: 14px; color: var(--cinza); font-weight: 600; } .plano-carta ul { margin: 0 0 16px; padding-left: 4px; color: var(--cinza); font-size: 14px; flex: 1; list-style: none; } .plano-carta li { margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; } .plano-carta li .tf-i { color: var(--verde); margin-top: 2px; flex: 0 0 auto; } .plano-destaque { border: 2px solid var(--laranja); box-shadow: 0 14px 36px rgba(255, 107, 0, .18); } .faixa { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--laranja), var(--laranja-escuro)); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 15px; border-radius: var(--raio-full); white-space: nowrap; box-shadow: 0 4px 12px rgba(255, 107, 0, .35); } .faixa-escura { background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 55%, var(--azul-900) 100%); color: var(--texto-claro); position: relative; overflow: hidden; } .faixa-escura h2, .faixa-escura h3 { color: #fff; } .faixa-escura .mudo { color: var(--muted-escuro); } .num-grande { font-size: 36px; font-weight: 800; color: var(--laranja); letter-spacing: -.02em; } details.faq { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 10px; transition: border-color var(--trans), box-shadow var(--trans); } details.faq[open] { border-color: var(--borda-forte); box-shadow: var(--sombra-1); } details.faq summary { font-weight: 700; cursor: pointer; color: var(--azul); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--cinza); border-bottom: 2px solid var(--cinza); transform: rotate(45deg); transition: transform var(--trans); flex: 0 0 auto; margin-right: 4px; } details.faq[open] summary::after { transform: rotate(-135deg); } details.faq p { margin: 10px 0 0; color: var(--cinza); } .rodape { background: linear-gradient(180deg, var(--azul-escuro), var(--azul-900)); color: var(--muted-escuro); padding: var(--e10) 20px; font-size: 13.5px; } .rodape a { color: #cfe0ec; text-decoration: none; transition: color var(--trans); } .rodape a:hover { color: #fff; } /* ---------- efeitos do site (home · empresas · promotores) ---------- */ /* sombra no topo ao rolar (ativada por TF.efeitosSite) */ .topo { transition: box-shadow var(--trans), background var(--trans); } .topo.rolado { box-shadow: 0 2px 18px rgba(16, 42, 67, .09); } /* cabeçalho cabe em uma linha no celular (logo + os dois botões) */ @media (max-width: 560px) { .topo-inner { gap: 8px; } .topo-inner .logo { font-size: 16px; } .topo-inner .logo .cubo { width: 30px; height: 30px; } .topo .btn-contorno, .topo .btn-primario { padding: 8px 11px; font-size: 12.5px; min-height: 38px; } } /* revelar ao rolar — só com JS (.js-reveal) e sem movimento reduzido */ @media (prefers-reduced-motion: no-preference) { .js-reveal .revelar { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .8, .25, 1), transform .7s cubic-bezier(.2, .8, .25, 1); } .js-reveal .revelar.visivel { opacity: 1; transform: none; } .js-reveal .revelar[data-atraso="1"] { transition-delay: .07s; } .js-reveal .revelar[data-atraso="2"] { transition-delay: .14s; } .js-reveal .revelar[data-atraso="3"] { transition-delay: .21s; } .js-reveal .revelar[data-atraso="4"] { transition-delay: .28s; } .js-reveal .revelar[data-atraso="5"] { transition-delay: .35s; } .js-reveal .revelar[data-atraso="6"] { transition-delay: .42s; } } /* ---------- preferência de movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Balão otimista: aparece antes da confirmação do servidor. */ .bolha.enviando { opacity: .62; } /* Tarefa suspeita de ser duplicata de outra do mesmo checklist. */ .tarefa-nova.parecida { border-color: var(--amarelo); background: var(--amarelo-claro); } /* ---------- matriz de benefícios dos planos (área do cliente) ---------- */ table.tabela-planos td { font-size: 13px; } table.tabela-planos td:first-child { white-space: normal; } table.tabela-planos th:not(:first-child) { text-align: center; } /* ---------- bloco travado por plano (abre o pop-up de upgrade) ---------- */ .bloco-travado { position: relative; cursor: pointer; border: 1px dashed var(--borda-forte); background: #fbfcfe; transition: border-color var(--trans), background var(--trans); } .bloco-travado:hover { border-color: var(--laranja); background: #fff8f2; } .bloco-travado input, .bloco-travado select, .bloco-travado textarea { pointer-events: none; background: #f2f5f8; color: var(--cinza); } .bloco-travado h3 { color: var(--cinza); } /* ---------- lançamento de despesa com boleto (01/09/2026) ---------- */ /* O boleto vem primeiro no formulário porque é o documento que origina a conta: quem lança está com ele na mão, e dele saem valor e vencimento. */ .bloco-boleto { background: var(--laranja-claro); border: 1px solid #FFD9BF; border-radius: var(--raio); padding: var(--e4); } .bloco-boleto input[type="file"] { width: 100%; font: inherit; font-size: 14px; padding: 10px; background: var(--carta); border: 1.5px dashed var(--borda-forte); border-radius: var(--raio-sm); cursor: pointer; } .bloco-boleto input[type="file"]:hover { border-color: var(--laranja); } .link-anexo { display: inline-flex; align-items: center; gap: 4px; color: var(--laranja-texto); font-weight: 600; text-decoration: none; } .link-anexo:hover { text-decoration: underline; } .link-anexo .tf-i { width: 14px; height: 14px; } /* ---------- leitor do contrato (aceite só depois de rolar até o fim) ---------- */ /* O contrato deixou de ser um link para outra aba: ele é lido aqui dentro, e a barra abaixo da caixa mostra o quanto falta. Sem chegar ao fim, o aceite fica desligado. */ .leitor-contrato { max-height: 46vh; min-height: 240px; overflow-y: auto; border: 1.5px solid var(--borda); border-radius: 12px; padding: 16px 18px; background: #fff; font-size: 13px; line-height: 1.65; color: var(--texto); scroll-behavior: auto; -webkit-overflow-scrolling: touch; } .leitor-contrato p { margin: 0 0 9px; } .leitor-contrato .ct-cabecalho { font-weight: 700; font-size: 14px; color: var(--azul); text-align: center; margin-bottom: 2px; } .leitor-contrato .ct-subcabecalho { text-align: center; color: var(--cinza); font-size: 12px; margin-bottom: 14px; } .leitor-contrato .ct-titulo { font-weight: 700; color: var(--azul); margin-top: 16px; } .leitor-contrato .ct-forte { font-weight: 600; } .leitor-contrato .ct-assinatura { font-weight: 700; color: var(--azul); border-top: 1px solid var(--borda); padding-top: 6px; margin-top: 22px; } .leitor-contrato .ct-fim { margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--laranja); color: var(--verde); font-weight: 600; text-align: center; } .ct-trava { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; padding: 9px 12px; background: var(--gelo); border: 1px solid var(--borda); border-radius: 10px; color: var(--laranja-texto); font-weight: 600; } .ct-trava.lido { color: var(--verde); background: #edf9f1; border-color: #bfe6cd; } .ct-trava .tf-i { width: 15px; height: 15px; vertical-align: -3px; } .ct-barra { flex: 0 0 88px; height: 7px; background: #e2e9f1; border-radius: 999px; overflow: hidden; } .ct-barra > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--laranja), var(--laranja-escuro)); transition: width .2s linear; } .ct-trava.lido .ct-barra > span { background: var(--verde); } /* ---------- tarefa travada pela foto ---------- */ /* A caixa da tarefa que pede foto não é clicável: ela marca sozinha quando as fotos chegam. O cadeado explica por que o dedo do promotor não resolve. */ .tarefa .check-item input[disabled] { cursor: not-allowed; opacity: .55; } .tarefa-trava { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--laranja-texto); } .tarefa-trava .tf-i { width: 13px; height: 13px; } .tarefa.feita .tarefa-trava { color: var(--verde); } /* ---------- NF a emitir: aviso no app ---------- */ /* A nota parada trava o repasse. Ela aparece como cartão no feed e como bolinha na aba Carteira, para o promotor não precisar entrar na aba para descobrir que tem pendência. */ .cartao-nf { border-left: 4px solid var(--laranja); background: var(--laranja-claro); cursor: pointer; margin-bottom: 14px; } .cartao-nf:hover { filter: brightness(.985); } .cartao-nf > .linha > .tf-i { width: 18px; height: 18px; color: var(--laranja-texto); flex: 0 0 auto; align-self: center; } .nav-fundo a.tem-pendencia { position: relative; } .nav-fundo a.tem-pendencia::after { content: ''; position: absolute; top: 4px; left: 50%; margin-left: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 2px #fff; } /* ---------- planos: por que cada linha importa ---------- */ /* A tabela dizia só o QUE cada plano tem. A linha de baixo diz o que aquilo resolve — é o que faz o cliente entender a diferença sem precisar de vendedor do lado. */ .tabela-planos td .ben-porque { display: block; margin-top: 3px; max-width: 42ch; font-size: 11.5px; font-weight: 400; line-height: 1.45; color: var(--cinza); } .plano-ganho { margin: 8px 0 10px; padding: 7px 10px; background: var(--gelo); border-left: 3px solid var(--laranja); border-radius: 0 8px 8px 0; font-size: 12px; font-weight: 600; color: var(--azul); }