/* ===================================================================== CRM VDC — folha única Sem framework: o projeto inteiro é dependency-free por escolha, e um passo de build tornaria "abrir o sistema" mais difícil, não mais fácil. DENSIDADE (revisão global de 04/09/2026): o CRM é sistema de gestão, não página de apresentação. Os espaçamentos vivem em poucos tokens (abaixo) e todo componente usa esses tokens — compactar aqui compacta o sistema inteiro. Regra: encolher ESPAÇO (padding, margem, altura mínima, vazio), não a fonte nem a área clicável. ===================================================================== */ :root{ /* O padrão que vale antes de qualquer refinamento — na mesma família de superfícies do design aprovado, para não haver um "primeiro quadro" com outra paleta enquanto a folha carrega. */ --fundo:#ffffff; --fundo2:#f2f4f2; --fundo3:#f7f8f7; --linha:#ccd4cf; --linha2:#ccd4cf; --tinta:#14201a; --tinta2:#5e6b64; --tinta3:#5e6b64; --azul:#2563c9; --azul-f:#e8f0fd; --azul-e:#1b4a99; --verde:#17794a; --verde-f:#e4f4ec; --ambar:#a86400; --ambar-f:#fdf2df; --vermelho:#b3261e; --vermelho-f:#fdeceb; --roxo:#6741a8; --roxo-f:#f0ebfa; --sombra:0 1px 2px rgba(20,32,26,.05); /* tokens de densidade */ --esp-1:4px; --esp-2:6px; --esp-3:8px; --esp-4:12px; --esp-5:16px; --pad-pagina:10px 20px 70px; /* página: menos ar em cima, espaço embaixo para a barra fixa */ --pad-cartao:10px 14px; /* cartão */ --gap-secao:10px; /* entre cartões/seções */ --pad-celula:5px 8px; /* célula de tabela (~32px por linha) */ --altura-input:30px; --raio:8px; --raio-g:10px; --fonte:13.5px; --fonte-p:12px; --fonte-pp:11px; --largura-max:1440px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font:var(--fonte)/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif; color:var(--tinta); background:var(--fundo2); -webkit-font-smoothing:antialiased; } a{color:var(--azul-t);text-decoration:none} a:hover{text-decoration:underline} button{font:inherit} /* ---------------- cabeçalho ---------------- */ header.topo{ background:var(--fundo); border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:40; } .topo .linha{max-width:var(--largura-max);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:16px;height:46px} .marca{font-weight:760;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:7px;text-decoration:none;min-width:0} .marca:hover{text-decoration:none} .marca img{height:26px;max-width:150px;object-fit:contain;display:block} .marca img.placa{background:#fff;border-radius:6px;padding:2px 6px} .marca span{color:var(--tinta3);font-weight:500} .marca #marcaNome{color:var(--azul-t);font-weight:760;overflow:hidden;text-overflow:ellipsis;max-width:200px} .btn-tema{min-width:28px;padding:2px 7px;font-size:13px;line-height:1} .modulos{display:flex;gap:3px} .modulos a{ padding:5px 12px;border-radius:7px;font-size:13px;font-weight:640; color:var(--tinta2);text-decoration:none } .modulos a:hover{background:var(--fundo3);text-decoration:none} .modulos a.on{background:var(--azul);color:var(--marca-sobre-primaria)} .topo .fim{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0} /* Nome comprido encurta com reticências em vez de empurrar o cabeçalho para uma segunda linha. O nome inteiro fica no title, ao passar o mouse. */ .quem{ font-size:12px;color:var(--tinta2);text-align:right;line-height:1.3; min-width:0;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .quem b{ display:block;color:var(--tinta);font-size:12.5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis } /* Submenu do módulo: linha própria, logo abaixo dos módulos. */ .submenu{ max-width:var(--largura-max);margin:0 auto;padding:0 20px;display:flex;gap:2px; overflow-x:auto;scrollbar-width:none } .submenu::-webkit-scrollbar{display:none} .submenu:empty{display:none} .submenu a{ padding:6px 10px;font-size:12px;font-weight:620;color:var(--tinta2); text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap } .submenu a:hover{color:var(--tinta);text-decoration:none} .submenu a.on{color:var(--azul-t);border-bottom-color:var(--azul)} .selo-homolog{ background:var(--ambar-f);color:var(--ambar);border:1px solid var(--ambar-b); font-size:10px;font-weight:760;letter-spacing:.05em;padding:3px 8px;border-radius:6px; white-space:nowrap } .trilha{max-width:var(--largura-max);margin:0 auto;padding:5px 20px 0;font-size:12px;color:var(--tinta3);min-height:0} .trilha:empty{display:none} .trilha a{color:var(--tinta2)} .trilha i{font-style:normal;margin:0 6px;color:var(--linha2)} main{max-width:var(--largura-max);margin:0 auto;padding:var(--pad-pagina)} /* ---------------- títulos ---------------- */ /* Cabeçalho de página: código + título + subtítulo curto à esquerda, ações à direita, numa faixa baixa. Não é banner. */ .cabpag{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:2px 0 10px;flex-wrap:wrap} .cabpag .cod{font-size:10.5px;color:var(--tinta3);font-weight:700;letter-spacing:.07em;text-transform:uppercase} .cabpag h1{font-size:18px;margin:0;letter-spacing:-.015em;font-weight:720;line-height:1.25} .cabpag h2{font-size:15px;margin:0;font-weight:700} .cabpag .sub{font-size:12px;color:var(--tinta2);margin-top:1px} .acoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center} /* ---------------- cartões ---------------- */ /* Cartão só quando há agrupamento real. Padding moderado, título baixo. */ .cartao{background:var(--fundo);border:1px solid var(--linha);border-radius:var(--raio-g);padding:var(--pad-cartao);margin-bottom:var(--gap-secao);box-shadow:var(--sombra)} .cartao h2{font-size:13.5px;margin:0 0 8px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3} .cartao h2 .cont{font-size:11.5px;font-weight:500;color:var(--tinta3)} .cartao h2 .dir{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} .cartao > .nota:last-child{margin-bottom:0} .nota{font-size:11.5px;color:var(--tinta3);line-height:1.45;margin-top:8px} /* Texto de orientação longo vira "Saiba mais": a tela guarda só o que é preciso para operar (VDC.compactarAjuda faz a troca ao renderizar). */ details.ajuda{font-size:11.5px;color:var(--tinta3);margin-top:6px} details.ajuda summary{cursor:pointer;color:var(--tinta2);font-weight:600;font-size:11.5px;list-style:none;display:inline-flex;align-items:center;gap:5px;padding:2px 0} details.ajuda summary::-webkit-details-marker{display:none} details.ajuda summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--linha2);font-size:10px;font-weight:700;color:var(--tinta3)} details.ajuda[open] summary{margin-bottom:3px} details.ajuda .nota,details.ajuda .dica{margin:0;line-height:1.45} /* ---------------- números ---------------- */ /* Indicadores: tiras baixas, várias por linha. Um número não ocupa meia tela. */ .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden} .num{background:var(--fundo);padding:6px 10px;min-width:0} .num .v{font-size:16px;font-weight:720;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .num .r{font-size:11px;color:var(--tinta3);margin-top:1px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .num .d{font-size:10.5px;color:var(--tinta3);margin-top:1px} /* Indicador que É um caminho: o número leva à lista que o explica. Mesma célula, sem enfeite de link — muda só o cursor e um realce ao passar. */ a.num{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:background .12s} a.num:hover{background:var(--fundo3)} /* Indicadores do Financeiro: a célula precisa caber o número INTEIRO. Com a largura mínima de 120px, no celular "R$ 377.161,20" virava "R$ 377.161,…" — e um valor cortado é pior do que valor nenhum, porque parece exato. Mais largura, menos colunas, número legível. */ .nums.fin-nums{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .nums.fin-nums .v{white-space:normal;overflow:visible;text-overflow:clip} /* E O RÓTULO TAMBÉM CABE INTEIRO, pela mesma razão do valor: cortado, "Realizado com orça…" e "Realizado total" viram a mesma palavra de relance, e o leitor compara dois números que não se comparam. */ .nums.fin-nums .r{white-space:normal;overflow:visible;text-overflow:clip} .nums + .nums{margin-top:var(--esp-3)} /* ---------------- linhas de cartões lado a lado ---------------- */ /* O Resumo põe dois ou três cartões por linha no computador. No celular isso vira mosaico ilegível — e era o que acontecia, porque a grade estava escrita no `style=` de cada linha e estilo em linha não cede a media query nenhuma. Aqui é uma classe só, com `auto-fit`: no computador cabem dois ou três; abaixo de ~660 px a própria grade quebra em uma coluna, sem media query e sem mosaico. */ .linha-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-bottom:12px} .linha-cartoes > .cartao{margin:0} /* A tabela de performance por corretor/origem/categoria segue a mesma ideia, com coluna mais estreita porque o conteúdo é tabela e não indicador. */ .linha-tabelas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px} /* ---------------- cards de lista ---------------- */ /* Cartões de empreendimento compactos: vários por linha e por tela. */ .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px} .card{background:var(--fundo);border:1px solid var(--linha);border-radius:var(--raio-g);padding:10px 12px;box-shadow:var(--sombra);cursor:pointer;transition:border-color .12s} .card:hover{border-color:var(--azul)} .card .cod{font-size:10px;color:var(--tinta3);font-weight:700;letter-spacing:.06em} .card h3{font-size:14px;margin:2px 0 6px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .card .linha{display:flex;gap:10px 14px;font-size:12px;color:var(--tinta2);flex-wrap:wrap} .card .linha b{color:var(--tinta);font-variant-numeric:tabular-nums} /* ---------------- tabelas ---------------- */ /* A tabela é a forma padrão do que é comparável: linhas baixas, muitas por tela. */ .rol{overflow-x:auto;margin:0 -14px;padding:0 14px} /* DINHEIRO NÃO QUEBRA LINHA. Nas tabelas do Financeiro as colunas são muitas e estreitas, e "R$" numa linha com "247,46" na de baixo deixa de ser número e vira enigma. A tabela fica mais larga e rola dentro do `.rol`, que é para isso que ele existe. */ table.fin td,table.fin th{white-space:nowrap} table{width:100%;border-collapse:collapse;font-size:12.5px} th{text-align:left;font-size:10.5px;color:var(--tinta3);font-weight:700;letter-spacing:.05em; text-transform:uppercase;padding:0 8px 4px;border-bottom:1px solid var(--linha);white-space:nowrap} td{padding:var(--pad-celula);border-bottom:1px solid var(--fundo3);vertical-align:middle;line-height:1.3} tbody tr:hover{background:var(--fundo2)} tbody tr.sel{background:var(--azul-f)} table.num-dir td:nth-child(n+3),table.num-dir th:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums} td.acao{text-align:right;white-space:nowrap} /* A COLUNA DE AÇÃO NUNCA É O QUE CAI PARA FORA. Achado do dono, 21/09/2026: na lista de contas esperando aprovação ele viu as duas contas e concluiu que não havia como aprovar. O botão existia — 314 px à direita, dentro da rolagem da tabela, invisível e sem nada que dissesse que estava lá. Numa tela operacional a ação é o motivo de a tela existir; quem sai de cena são as colunas do meio. Grudada à direita, ela acompanha a rolagem e fica sempre alcançável; o fio à esquerda mostra que há conteúdo passando por baixo. */ table.fin td.acao,table.fin th.acao{position:sticky;right:0;z-index:2; background:var(--fundo);box-shadow:-8px 0 8px -8px rgba(0,0,0,.28)} table.fin th.acao{background:var(--fundo);z-index:3} tbody tr:hover td.acao{background:var(--fundo2)} tbody tr.sel td.acao{background:var(--azul-f)} td .btn.s{padding:2px 7px;font-size:11.5px} /* Estado vazio: uma linha — frase + ação. Não uma seção. */ .vazio{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:8px 10px;color:var(--tinta3);font-size:12.5px; background:var(--fundo2);border:1px dashed var(--linha2);border-radius:var(--raio)} .vazio .i{display:none} .vazio b{color:var(--tinta2);font-size:12.5px;font-weight:650} .vazio .t{color:var(--tinta3)} .vazio .a{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} .vazio .a .btn{padding:3px 9px;font-size:12px} /* ---------------- etiquetas ---------------- */ .et{display:inline-block;padding:1.5px 7px;border-radius:20px;font-size:10.5px;font-weight:660;white-space:nowrap;line-height:1.5} .et-v{background:var(--verde-f);color:var(--verde)} .et-a{background:var(--ambar-f);color:var(--ambar)} .et-r{background:var(--vermelho-f);color:var(--vermelho)} .et-z{background:var(--azul-f);color:var(--azul-t)} .et-x{background:var(--roxo-f);color:var(--roxo)} .et-c{background:var(--fundo3);color:var(--tinta2)} /* ---------------- botões ---------------- */ /* Menor no padding, não na área mínima: 30px de altura continua confortável. */ .btn{background:var(--fundo);border:1px solid var(--linha2);border-radius:7px;padding:5px 11px;min-height:30px; font-size:12.5px;font-weight:620;color:var(--tinta);cursor:pointer;white-space:nowrap;transition:.12s;line-height:1.3} .btn:hover:not(:disabled){background:var(--fundo2);border-color:var(--tinta3)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn:focus-visible,.chip:focus-visible,a:focus-visible{outline:2px solid var(--marca-foco);outline-offset:1px} .btn.p{background:var(--azul);border-color:var(--azul);color:var(--marca-sobre-primaria)} .btn.p:hover:not(:disabled){background:var(--azul-e);border-color:var(--azul-e)} .btn.v{background:var(--verde);border-color:var(--verde);color:#fff} .btn.v:hover:not(:disabled){filter:brightness(1.1)} .btn.d{background:var(--vermelho);border-color:var(--vermelho);color:#fff} .btn.s{padding:3px 8px;min-height:26px;font-size:11.5px} /* ---------------- avisos ---------------- */ .aviso{border-radius:var(--raio);padding:7px 10px;font-size:12.5px;margin:8px 0;line-height:1.45;border:1px solid} .aviso.i{background:var(--azul-f);border-color:var(--azul-b);color:var(--azul-t)} .aviso.ok{background:var(--verde-f);border-color:var(--verde-b);color:var(--verde-t)} .aviso.at{background:var(--ambar-f);border-color:var(--ambar-b);color:var(--ambar-t)} .aviso.er{background:var(--vermelho-f);border-color:var(--vermelho-b);color:var(--vermelho-t)} /* ---------------- formulário ---------------- */ /* Campos lado a lado quando há largura (.lin); um por linha só no celular. */ .form{display:flex;flex-direction:column;gap:8px} .form label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:640;color:var(--tinta2);flex:1;min-width:0} .form input,.form select,.form textarea{ border:1px solid var(--linha2);border-radius:7px;padding:5px 9px;font:inherit;font-size:13px;min-height:var(--altura-input); background:var(--fundo);color:var(--tinta);width:100%} .form textarea{min-height:56px} /* Controles dentro de células de tabela (ex.: linha de condições da negociação) não podem ocupar 100% da célula cada um: ficam na largura do conteúdo. */ .form td input,.form td select{width:auto;max-width:100%} .form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--marca-foco);outline-offset:-1px} .form .lin{display:flex;gap:10px;flex-wrap:wrap} .form .lin > label{flex:1 1 180px} .form .dica{font-size:11.5px;color:var(--tinta3);line-height:1.45} .erro-campo{color:var(--vermelho);font-size:11px;font-weight:600} /* "← Voltar" é navegação, não ação: fica à esquerda das ações e não compete com elas. */ .acoes .btn.voltar{font-weight:650;border-style:dashed} /* Data que o teclado aceita e o calendário não (31/02): o campo avisa na hora, sem esperar o servidor. */ .form input.data-invalida,input.data-invalida{border-color:var(--vermelho);background:var(--vermelho-f)} input[type=checkbox]{width:15px;height:15px;margin:0} /* ---------------- diálogo ---------------- */ /* Tamanho proporcional ao conteúdo: padrão para formulários, .g para tabelas. */ .veu{position:fixed;inset:0;background:rgba(20,32,26,.42);display:flex;align-items:center; justify-content:center;z-index:100;padding:16px;backdrop-filter:blur(2px)} .dlg{background:var(--fundo);border-radius:11px;max-width:620px;width:100%;max-height:92vh; display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(20,32,26,.3)} .dlg.g{max-width:1040px} .dlg.m{max-width:820px} .dlg .cb{padding:10px 16px;border-bottom:1px solid var(--linha);display:flex; justify-content:space-between;align-items:center;gap:12px} .dlg .cb h2{margin:0;font-size:14.5px;font-weight:700} .dlg .cp{padding:12px 16px;overflow-y:auto;flex:1} .dlg .cp .cartao{padding:8px 12px;margin-bottom:8px} .dlg .cp .rol{margin:0 -12px;padding:0 12px} .dlg .pe{padding:8px 16px;border-top:1px solid var(--linha);display:flex;justify-content:flex-end;gap:8px} .x{background:none;border:0;font-size:20px;color:var(--tinta3);cursor:pointer;line-height:1;padding:0 4px} /* ---------------- barra de seleção ---------------- */ /* FIXA, não sticky. `sticky bottom:0` no último elemento do documento fica ABAIXO da dobra e nunca aparece — a barra de ação some justamente quando há seleção, que é quando ela precisa existir. Descoberto usando a tela, não lendo o código. */ .selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:60; width:min(1120px,calc(100vw - 40px)); background:var(--barra-fundo);color:var(--barra-tinta);border-radius:10px; padding:8px 16px;display:flex;align-items:center;gap:12px;font-size:12.5px; box-shadow:0 8px 28px rgba(20,32,26,.32);flex-wrap:wrap} .selbar b{font-variant-numeric:tabular-nums} .selbar .dir{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .selbar select{border:0;border-radius:7px;padding:5px 9px;font:inherit;font-size:12.5px} /* ---------------- avisos e carregamento ---------------- */ .carregando{display:flex;align-items:center;gap:8px;color:var(--tinta3);font-size:12.5px;padding:14px 0} .spin{width:14px;height:14px;border:2px solid var(--linha2);border-top-color:var(--azul); border-radius:50%;animation:gira .7s linear infinite} @keyframes gira{to{transform:rotate(360deg)}} #toasts{position:fixed;bottom:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px} .toast{background:var(--barra-fundo);color:var(--barra-tinta);padding:9px 14px;border-radius:9px;font-size:12.5px; max-width:420px;box-shadow:0 6px 24px rgba(20,32,26,.28);animation:sobe .18s} .toast.ok{background:var(--verde)} .toast.er{background:var(--vermelho)} .toast.at{background:var(--ambar);color:#241a00} @keyframes sobe{from{transform:translateY(8px);opacity:0}} /* ---------------- barra de progresso ---------------- */ .barra{height:5px;background:var(--fundo3);border-radius:4px;overflow:hidden;margin:5px 0} .barra i{display:block;height:100%;background:var(--azul);border-radius:4px;transition:width .3s} .barra.v i{background:var(--verde)} .barra.a i{background:var(--ambar)} /* ---------------- filtros ---------------- */ /* Uma barra baixa; nunca um cartão só para filtros. */ .filtros{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .filtros input,.filtros select{border:1px solid var(--linha2);border-radius:7px;padding:4px 9px;min-height:28px; font:inherit;font-size:12.5px;background:var(--fundo)} .chip{border:1px solid var(--linha2);background:var(--fundo);border-radius:20px;padding:3px 10px;min-height:26px; font-size:12px;font-weight:600;cursor:pointer;color:var(--tinta2);display:inline-flex;align-items:center;text-decoration:none} .chip:hover{text-decoration:none;border-color:var(--tinta3)} .chip.on{background:var(--marca-primaria-suave);border-color:var(--marca-primaria);color:var(--marca-primaria-texto)} /* ---------------- seções recolhíveis (resumo visível, detalhe sob demanda) ---------------- */ details.secao{background:var(--fundo);border:1px solid var(--linha);border-radius:var(--raio-g);margin-bottom:var(--gap-secao);box-shadow:var(--sombra)} details.secao > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;font-size:13.5px;font-weight:700;line-height:1.3} details.secao > summary::-webkit-details-marker{display:none} details.secao > summary::before{content:"▸";color:var(--tinta3);font-size:11px;width:10px;transition:transform .12s} details.secao[open] > summary::before{transform:rotate(90deg)} details.secao > summary .cont{font-size:11.5px;font-weight:500;color:var(--tinta3)} details.secao > summary .dir{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} details.secao > .corpo{padding:0 14px 10px} details.secao > .corpo > .rol{margin:0 -14px;padding:0 14px} @media (max-width:900px){ .topo .linha{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px} .quem{max-width:150px} .submenu,.trilha{padding-left:12px;padding-right:12px} main{padding:10px 12px 70px} .grade{grid-template-columns:1fr} .form .lin > label{flex-basis:100%} .dlg,.dlg.g,.dlg.m{max-width:100%} .vazio .a{margin-left:0} } /* Paginação de listas longas. */ .pag{ display:flex;align-items:center;justify-content:center;gap:12px; padding:8px 0 0;font-size:12px;color:var(--tinta2) } .pag button[disabled]{opacity:.4;cursor:default} /* ---------- ROTEIRO OPERACIONAL DO EMPREENDIMENTO (cards em grade) ---------- Grupos lado a lado quando cabem (flex), cards em grade dentro do grupo. O card responde: o que é · qual o status · o que falta · onde clico. */ .roteiro-wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;margin:0 0 14px} .roteiro-wrap > .progresso,.roteiro-wrap > .proxima{flex:1 1 100%} .roteiro-g{flex:1 1 170px;min-width:0;max-width:100%} .rg-t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3);margin:0 0 5px;display:flex;gap:8px;align-items:center} .rg-t span{font-weight:650;color:var(--tinta2);letter-spacing:0;font-variant-numeric:tabular-nums} .roteiro{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px} .tarefa{background:var(--fundo);border:1px solid var(--linha);border-left-width:3px;border-radius:var(--raio-g);padding:7px 10px 8px;display:flex;flex-direction:column;min-height:116px;min-width:0} .tarefa.ok{border-left-color:var(--verde)} .tarefa.pend{border-left-color:var(--ambar-viva)} .tarefa.ini{border-left-color:var(--azul)} .tarefa.trav{border-left-color:var(--linha2);background:var(--fundo3)} .tarefa.opc,.tarefa.par{border-left-color:var(--linha2)} .tarefa .tn{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--tinta3);min-height:18px} .tarefa .tnum{font-variant-numeric:tabular-nums} .tarefa .tg{font-size:12px;line-height:1} .tarefa.ok .tg{color:var(--verde)} .tarefa.pend .tg{color:var(--ambar)} .tarefa.ini .tg{color:var(--azul-t)} .tarefa .tt{font-size:12.5px;font-weight:700;line-height:1.25;margin:3px 0 4px} .tarefa .ts{font-size:15px;font-weight:720;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tarefa .tp{font-size:11px;color:var(--tinta2);margin-top:2px;min-height:15px;line-height:1.35} .tarefa .ta{margin-top:auto;padding-top:6px;display:flex;gap:6px;align-items:center} .tarefa.trav .tt,.tarefa.trav .ts,.tarefa.opc .ts,.tarefa.par .ts{color:var(--tinta3)} .tarefa.trav .ts{font-size:13px} .progresso{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--tinta2)} .progresso b{color:var(--tinta)} .progresso .barra{flex:0 0 160px;margin:0} .proxima{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--azul-f);border:1px solid var(--azul-b);border-radius:var(--raio);padding:6px 10px;font-size:12.5px;color:var(--azul-t)} .proxima .rot{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .proxima b{font-size:13.5px;color:var(--tinta)} .proxima .btn{margin-left:auto} @media (max-width:900px){ .roteiro-g{flex-basis:100%} .roteiro{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .proxima .btn{margin-left:0} } /* ---------- NOVA NEGOCIAÇÃO (jornada em quatro passos, como no Sistema Comercial) ---------- */ .passos{display:flex;gap:8px;list-style:none;margin:0 0 10px;padding:0;flex-wrap:wrap} .passo{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border:1px solid var(--linha);border-radius:20px;font-size:12.5px;color:var(--tinta2);background:var(--fundo)} .passo span{width:22px;height:22px;border-radius:50%;background:var(--fundo3);color:var(--tinta2);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700} .passo.ativo{border-color:var(--azul);color:var(--tinta);font-weight:700} .passo.ativo span{background:var(--azul);color:var(--marca-sobre-primaria)} .passo.feito{cursor:pointer} .passo.feito span{background:var(--verde);color:#fff} .jornada h2{font-size:16px;margin:0 0 6px} .jornada .fixo-info{min-height:var(--altura-input);display:flex;align-items:center;gap:6px;padding:4px 0} .jornada .registrado{font-size:12px;color:var(--tinta2);background:var(--fundo3);border-radius:var(--raio);padding:6px 10px;margin-top:8px} .acoes-passo{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .acoes-passo.centro{justify-content:center} .busca-cpf{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:0 0 8px} .busca-cpf label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600} .busca-cpf input{border:1px solid var(--linha2);border-radius:7px;padding:5px 9px;font:inherit;font-size:13px;min-height:var(--altura-input)} .faixa{border-radius:var(--raio);padding:7px 10px;font-size:12.5px;margin:0 0 8px;border:1px solid} .faixa.ok{background:var(--verde-f);border-color:var(--verde-b);color:var(--verde-t)} .faixa.novo{background:var(--azul-f);border-color:var(--azul-b);color:var(--azul-t)} .faixa .obs{font-size:11.5px;margin-top:3px;color:var(--tinta2)} .cadastro{border:1px solid var(--linha);border-radius:var(--raio-g);padding:8px 12px 10px;margin:0 0 8px;background:var(--fundo)} .cadastro-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 4px} .cadastro-cab h3{font-size:13.5px;margin:0} .cadastro .sub-titulo,.neg-imovel .sub-titulo{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3);margin:8px 0 2px} .cadastro input.travado,.cadastro select.travado{background:var(--fundo3);color:var(--tinta2)} .pessoa-extra{margin-top:6px;padding-top:6px;border-top:1px dashed var(--linha2)} .btn.tracejado{border-style:dashed;width:100%;justify-content:center} .neg-imovel{border:1px solid var(--linha);border-radius:var(--raio-g);padding:8px 12px 10px;margin:0 0 8px;background:var(--fundo)} .neg-imovel .imovel-cab{display:flex;justify-content:space-between;align-items:center;margin:0 0 4px} .neg-imovel .imovel-cab h3{font-size:13.5px;margin:0} .ficha{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 12px;background:var(--fundo3);border-radius:var(--raio);padding:8px 10px;margin:6px 0 8px} .ficha dt{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3)} .ficha dd{margin:1px 0 0;font-size:13px;font-variant-numeric:tabular-nums} .receb{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end;margin:0 0 6px} .receb label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600} .receb input,.receb select{border:1px solid var(--linha2);border-radius:7px;padding:5px 9px;font:inherit;font-size:13px;min-height:var(--altura-input);width:100%} .resumo-bloco{border:1px solid var(--linha);border-radius:var(--raio-g);padding:8px 12px;margin:0 0 8px;background:var(--fundo)} .resumo-bloco h4{font-size:13px;margin:0 0 4px} .linha-resumo{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border-bottom:1px dashed var(--linha);font-size:12.5px} .linha-resumo:last-child{border-bottom:0} .linha-resumo span:first-child{color:var(--tinta2)} .linha-resumo span:last-child{font-weight:650;text-align:right} .confirma{display:flex;align-items:center;gap:10px;background:var(--ambar-f);border:1px solid var(--ambar-b);border-radius:var(--raio);padding:8px 10px;margin:8px 0 0;font-size:13px;cursor:pointer} .confirma input{width:18px;height:18px} .sucesso{text-align:center;padding:10px 0} .sucesso-icone{width:56px;height:56px;border-radius:50%;background:var(--verde-f);color:var(--verde);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;margin:0 0 6px} .sucesso h2{margin:0 0 4px} .sucesso-id{font-size:13px;color:var(--tinta2);margin:0 0 10px} .sucesso-id b{font-family:ui-monospace,Menlo,monospace;background:var(--fundo3);padding:2px 8px;border-radius:6px} @media (max-width:900px){ .receb{grid-template-columns:1fr 1fr} .ficha{grid-template-columns:repeat(2,1fr)} } /* ---------------- condição especial (aporte adicional e desconto) ---------------- Exceção não ocupa o lugar do caso normal. Recolhida, é UMA LINHA de texto no fim das condições de pagamento: sem moldura, sem fundo, sem peso — nada que a faça parecer parte obrigatória da venda. Só quando a pessoa abre é que ganha corpo. */ .especial{margin:10px 0 0;padding-top:8px;border-top:1px dashed var(--linha)} .especial-link{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 0; background:none;border:0;font:inherit;font-size:12.5px;font-weight:650;color:var(--azul-t); cursor:pointer;text-align:left} .especial-link:hover{text-decoration:underline} .especial-cab{font-size:12.5px;font-weight:700;color:var(--tinta2);padding:4px 0} .especial-ajuda{margin:0;font-size:11.5px;color:var(--tinta3);line-height:1.45;max-width:62ch} .especial-corpo{margin:8px 0 0;padding:10px;background:var(--fundo3);border-radius:var(--raio)} .especial-corpo .sub-titulo:first-child{margin-top:0} .especial-status{display:flex;flex-direction:column;gap:4px;margin:0 0 8px;font-size:12.5px} .especial-status .obs{font-size:11.5px;color:var(--tinta3);margin-top:2px} /* No celular o link precisa de alvo de toque de verdade — discreto, não pequeno. E os campos da gaveta deixam de disputar a mesma linha. */ @media (pointer:coarse){.especial-link{min-height:44px;padding:10px 0}} @media (max-width:600px){ .especial-corpo{padding:10px 8px} .especial-corpo .lin{flex-direction:column;gap:8px} .especial-corpo .lin > label{flex:1 1 auto} } /* configuração aberta em janela a partir do card do roteiro */ .pc-modal h2{font-size:13.5px;margin:0 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pc-modal h2 .dir{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .pc-modal h2 .cont{font-weight:500;color:var(--tinta3);font-size:12px} .pc-modal .rol{max-height:440px} .pc-modal .nota{margin-top:8px} /* obrigatório × paralelo no roteiro */ .rg-sec{flex:1 1 100%;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-t);border-bottom:2px solid var(--azul-f);padding:2px 0 4px;margin-top:2px} .rg-sec span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--tinta3);margin-left:6px} .rg-sec.paralelo{color:var(--tinta2);border-bottom-color:var(--linha)} .roteiro-g.par .tarefa{background:var(--fundo2)} /* ===================================================================== ACABAMENTO VISUAL (rodada noturna de 04→05/09/2026) Mesma identidade (azul VDC, verde, âmbar), mesma densidade; menos cinza lavado, hierarquia mais clara, estados mais legíveis. Regras abaixo afinam os componentes já existentes — nada de layout novo. ===================================================================== */ :root{ /* AS CAMADAS DE SUPERFÍCIE, EXATAMENTE COMO NO DESIGN APROVADO. ================================================================ O defeito era a IMPLEMENTAÇÃO das camadas, não a paleta. A 1ª tentativa desta rodada errou duas vezes: primeiro achatou as camadas (superfície branca sobre fundo azulado se distinguia por 1,08, e o cartão não tinha borda em três lados), e depois eu INVENTEI uma família de neutros nova em vez de reproduzir a aprovada. As duas coisas foram descartadas. Os valores abaixo são os do design system aprovado, sem reinterpretação: design aqui claro escuro --bg --fundo2 #F2F4F2 #0D1512 fundo da página --surface --fundo #FFFFFF #15211B card, painel, modal, lateral --surface2 --fundo3 #F7F8F7 #1A2820 preenchimento (cabeçalho de grupo) --line --linha #CCD4CF #28362F contorno e divisor --strong --forte #14201A #3B4C43 a régua de 2 px que fecha o grupo --ink --tinta #14201A #F1F4F2 texto principal --muted --tinta2/3 #5E6B64 #9AA8A1 texto secundário DUAS DECISÕES DO DESIGN que a implementação passou a seguir: · UM valor de linha, não três. O design usa --line no contorno da caixa E na linha de tabela. Os três tokens continuam existindo com papéis nomeados (contorno, controle, divisor) para uma rodada futura poder diferenciá-los, mas o VALOR é o aprovado. A linha do design é suave o bastante (1,51 sobre o branco) — não dá aparência de planilha. · DOIS níveis de tinta, não três. O design tem `ink` e `muted`, e usa `muted` também no metadado e no cabeçalho de tabela. `--tinta3` passa a valer o mesmo `muted`, o que deixa o texto auxiliar mais legível (5,58:1 contra 4,57:1) — e é o que o mockup mostra. A CAIXA APARECE PELA LINHA, não pelo tom: no design, superfície/fundo é só 1,105, e linha/fundo é 1,368. O contorno de 1 px nos quatro lados (refinamento desta rodada) é a implementação disso. */ --fundo2:#f2f4f2; --fundo3:#f7f8f7; --linha:#ccd4cf; --linha2:#ccd4cf; --divisor:#ccd4cf; --tinta:#14201a; --tinta2:#5e6b64; --tinta3:#5e6b64; /* A MARCA (09/09/2026). Duas cores escolhidas pela empresa; tudo o mais é derivado por publico/app/cores.js e escrito nestas variáveis em tempo de execução. Os valores aqui são o TEMA PADRÃO — valem quando ninguém configurou nada e quando o JavaScript ainda não rodou. */ /* Os valores abaixo são EXATAMENTE o que cores.js deriva para a paleta padrão (#1f5fc4 / #157347) — o teste de marca confere a igualdade. */ --marca-primaria:#1f5fc4; --marca-primaria-hover:#1b52aa; --marca-primaria-pressed:#174894; --marca-sobre-primaria:#ffffff; --marca-primaria-texto:#1f5fc4; --marca-primaria-viva:#1f5fc4; --marca-primaria-suave:#e4ecf8; --marca-primaria-sutil:#f4f7fc; --marca-primaria-borda:#b7ccec; --marca-primaria-profunda:#142643; --marca-foco:#1f5fc4; --marca-destaque:#157347; --marca-destaque-hover:#105937; --marca-destaque-pressed:#0c442a; --marca-sobre-destaque:#ffffff; --marca-destaque-texto:#157347; --marca-destaque-viva:#157347; --marca-destaque-suave:#e3eee9; --marca-destaque-sutil:#f3f8f6; --marca-destaque-borda:#b4d2c4; /* Os nomes antigos continuam valendo — apontam para a marca. `-t` é a versão para TEXTO (contraste garantido sobre o fundo); `-b` é borda. */ --azul:var(--marca-primaria); --azul-f:var(--marca-primaria-suave); --azul-e:var(--marca-primaria-hover); --azul-t:var(--marca-primaria-texto); --azul-b:var(--marca-primaria-borda); --verde:#157347; --verde-f:#e3f5ea; --verde-t:#0f5233; --verde-b:#bfe3d0; /* O ÂMBAR SEMÂNTICO tem dois papéis, e por isso dois tokens — a mesma separação que a marca já tinha entre `-texto` e `-viva`: --ambar / --ambar-t TEXTO e etiqueta: escuro, para ler sobre o creme --ambar-viva FILETE, ponto e barra: vivo, para APARECER O laranja vivo do artboard é o segundo caso. Sem esta separação o filete de "Precisa da sua atenção" saía marrom (o âmbar de texto) e ficava visivelmente diferente do design aprovado. É cor da PLATAFORMA nos dois casos — nunca a cor de destaque da empresa. (Nenhum hex do mockup ou da empresa é escrito nesta folha: a bateria D9 reprova, inclusive em comentário, e está certa em reprovar.) */ --ambar:#9a5b00; --ambar-f:#fff3dc; --ambar-t:#7a4a00; --ambar-b:#f0d9ac; --ambar-viva:#dd7418; --vermelho:#b42318; --vermelho-f:#fdecea; --vermelho-t:#8c1d18; --vermelho-b:#f5c9c6; --barra-fundo:#14201a; --barra-tinta:#ffffff; /* SOMBRA DISCRETA, e só. O artboard 1a usa 0 1px 2px nos cards independentes da Home; nada além disso. Sem efeito flutuante. */ --sombra:0 1px 2px rgba(20,32,26,.07); --sombra-2:0 2px 6px rgba(20,32,26,.10); } /* ---------- TEMA ESCURO. Mesmos tokens, outros valores: nenhum componente sabe em que tema está. `data-tema` vai na raiz (a sessão decide) e pode ir num elemento qualquer (a prévia da identidade usa isso para mostrar os dois temas lado a lado). */ [data-tema="escuro"]{ /* As mesmas camadas, nos valores do tema escuro do design aprovado. */ --fundo:#15211b; --fundo2:#0d1512; --fundo3:#1a2820; --linha:#28362f; --linha2:#28362f; --divisor:#28362f; --tinta:#f1f4f2; --tinta2:#9aa8a1; --tinta3:#9aa8a1; /* Paleta padrão no ESCURO, também exatamente como cores.js deriva. */ --marca-primaria:#1f5fc4; --marca-primaria-hover:#256cdd; --marca-primaria-pressed:#174894; --marca-sobre-primaria:#ffffff; --marca-primaria-texto:#4884e1; --marca-primaria-viva:#1f5fc4; --marca-primaria-suave:#172843; --marca-primaria-sutil:#162133; --marca-primaria-borda:#1a396b; --marca-primaria-profunda:#0f1d33; --marca-foco:#4884e1; --marca-destaque:#157347; --marca-destaque-hover:#105937; --marca-destaque-pressed:#0c442a; --marca-sobre-destaque:#ffffff; --marca-destaque-texto:#1d975b; --marca-destaque-viva:#157347; --marca-destaque-suave:#152c2a; --marca-destaque-sutil:#152327; --marca-destaque-borda:#154233; --verde:#3fbf7f; --verde-f:#12301f; --verde-t:#8fe0b4; --verde-b:#215c3e; --ambar:#e0a030; --ambar-f:#332a12; --ambar-t:#ffd58a; --ambar-b:#5a4514; --ambar-viva:#f0952f; --vermelho:#f0655c; --vermelho-f:#3a1b19; --vermelho-t:#ffb3ad; --vermelho-b:#6a2723; --roxo:#a98ce6; --roxo-f:#2a2140; --barra-fundo:#f1f4f2; --barra-tinta:#14201a; --sombra:0 1px 2px rgba(0,0,0,.5); --sombra-2:0 2px 8px rgba(0,0,0,.6); color-scheme:dark; } /* Um elemento marcado como CLARO dentro de uma página escura (a prévia "Claro" da central com o CRM no tema escuro) volta aos neutros claros — sem isto ele herdava os escuros da raiz e a prévia clara saía escura. */ [data-tema="claro"]{ --fundo:#ffffff; --fundo2:#f2f4f2; --fundo3:#f7f8f7; --linha:#ccd4cf; --linha2:#ccd4cf; --divisor:#ccd4cf; --tinta:#14201a; --tinta2:#5e6b64; --tinta3:#5e6b64; --verde:#157347; --verde-f:#e3f5ea; --verde-t:#0f5233; --verde-b:#bfe3d0; --ambar:#9a5b00; --ambar-f:#fff3dc; --ambar-t:#7a4a00; --ambar-b:#f0d9ac; --ambar-viva:#dd7418; --vermelho:#b42318; --vermelho-f:#fdecea; --vermelho-t:#8c1d18; --vermelho-b:#f5c9c6; --roxo:#6741a8; --roxo-f:#f0ebfa; --barra-fundo:#14201a; --barra-tinta:#ffffff; --sombra:0 1px 2px rgba(20,32,26,.07); --sombra-2:0 2px 6px rgba(20,32,26,.10); color-scheme:light; } header.topo{box-shadow:0 1px 0 var(--linha),0 2px 8px rgba(0,0,0,.04)} .marca{color:var(--azul-t)} .cartao{box-shadow:var(--sombra)} .cartao h2{color:var(--tinta)} .cabpag h1{color:var(--tinta)} .btn{border-color:var(--linha2);box-shadow:0 1px 1px rgba(20,32,26,.04)} .btn:hover{border-color:var(--tinta3);background:var(--fundo2)} .btn.p{background:var(--marca-primaria);border-color:var(--marca-primaria-hover);color:var(--marca-sobre-primaria);box-shadow:0 1px 2px rgba(20,32,26,.18)} .btn.p:hover:not(:disabled){background:var(--marca-primaria-hover);border-color:var(--marca-primaria-pressed)} .btn.p:active:not(:disabled){background:var(--marca-primaria-pressed)} .btn.d{background:var(--vermelho);border-color:#8f1c13;color:#fff} .btn.d:hover{background:#9c1f16} .btn.v{background:var(--verde);border-color:#0f5b38;color:#fff} .btn:disabled{opacity:.55;box-shadow:none} .et{border:1px solid rgba(20,32,26,.06);font-weight:700} .et-v{border-color:rgba(21,115,71,.18)} .et-a{border-color:rgba(154,91,0,.2)} .et-r{border-color:rgba(180,35,24,.18)} .et-z{border-color:rgba(31,95,196,.18)} table th{background:var(--fundo2);color:var(--tinta2);border-bottom:1px solid var(--linha2)} tbody tr:hover td{background:var(--fundo2)} .nums{box-shadow:var(--sombra)} .num .v{color:var(--tinta)} .aviso{border-left-width:3px} .aviso.i{border-left-color:var(--azul)} .aviso.ok{border-left-color:var(--verde)} .aviso.at{border-left-color:var(--ambar)} .aviso.er{border-left-color:var(--vermelho)} .dlg{box-shadow:0 18px 50px rgba(20,32,26,.28);border:1px solid var(--linha)} .dlg .cb{border-bottom:1px solid var(--linha)} .dlg .cb h3{font-size:15px;font-weight:750} .dlg .pe{border-top:1px solid var(--linha);background:var(--fundo2)} /* roteiro: estado legível de longe */ .tarefa{box-shadow:var(--sombra);transition:box-shadow .12s,transform .12s} .tarefa:hover{box-shadow:var(--sombra-2)} .tarefa.ok{background:var(--fundo);border-left-color:var(--verde)} .tarefa.ini{border-left-color:var(--azul)} .tarefa.trav{background:var(--fundo3);border-style:dashed;border-left-style:solid;border-left-color:var(--linha2)} .tarefa .tt{color:var(--tinta)} .tarefa.ok .tg{background:var(--verde-f);border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px} .tarefa.pend .tg{background:var(--ambar-f);border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:11px} .proxima{background:var(--azul-f);border-color:var(--azul-b)} .progresso .barra{height:6px} /* jornada de venda */ .passo.ativo{background:var(--azul-f);border-color:var(--azul-b)} .passo.feito{background:var(--verde-f);border-color:var(--verde-b)} .ficha{background:var(--fundo3);border:1px solid var(--linha)} .resumo-bloco{box-shadow:var(--sombra)} .faixa.ok{border-left:3px solid var(--verde)} .faixa.novo{border-left:3px solid var(--azul)} /* cards de lista */ .card{box-shadow:var(--sombra)} .card:hover{box-shadow:var(--sombra-2);border-color:var(--azul-b)} .chip.on{box-shadow:0 1px 2px rgba(20,32,26,.18)} /* ===================================================================== PLATAFORMA (09/09/2026): tela inicial, central de identidade, login e rodapé da organização. Usa só tokens — muda com a marca e com o tema. ===================================================================== */ /* ---------- rodapé da organização ---------- */ .rodape-org{max-width:var(--largura-max);margin:18px auto 0;padding:10px 0 0;border-top:1px solid var(--linha);font-size:11.5px;color:var(--tinta3);display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center} .rodape-org:empty{display:none} .rodape-org b{color:var(--tinta2);font-weight:650} .rodape-org .plat{margin-left:auto;opacity:.8} @media (max-width:900px){.rodape-org .plat{margin-left:0}} /* ---------- tela inicial ---------- */ .home-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 12px} .home-cab h1{font-size:20px;margin:0;letter-spacing:-.02em;font-weight:740;line-height:1.2} .home-cab .org{font-size:12.5px;color:var(--tinta2);margin-top:2px} .home-cab .org b{color:var(--azul-t)} .home-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px 28px;align-items:start} .home-col{display:flex;flex-direction:column;gap:var(--gap-secao);min-width:0} .home-col > .cartao{margin-bottom:0} .home-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px} .home-mod{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--fundo);text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s;min-height:86px;border-top:3px solid var(--marca-primaria)} .home-mod:hover{text-decoration:none;border-color:var(--azul-b);box-shadow:var(--sombra-2)} .home-mod .t{font-size:14px;font-weight:720;color:var(--tinta);display:flex;align-items:center;gap:8px} .home-mod .t .et{margin-left:auto} .home-mod .d{font-size:11.5px;color:var(--tinta2);line-height:1.4} .home-mod .n{margin-top:auto;font-size:11px;color:var(--tinta3);display:flex;gap:10px;flex-wrap:wrap} .home-mod .n b{color:var(--tinta);font-variant-numeric:tabular-nums} .home-mod.breve{opacity:.6;border-top-color:var(--linha2);cursor:default} .home-atalhos{display:flex;gap:6px;flex-wrap:wrap} .home-atalhos .chip{gap:6px} .home-atalhos .chip i{font-style:normal;color:var(--azul-t);font-weight:800} .home-alerta{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--fundo3);font-size:12.5px} .home-alerta:last-child{border-bottom:0} .home-alerta .pt{width:8px;height:8px;background:var(--ambar-viva);flex:0 0 8px} .home-alerta.grave .pt{background:var(--vermelho)} .home-alerta .tx{flex:1;min-width:0;line-height:1.35} .home-alerta .tx small{display:block;color:var(--tinta3);font-size:11px} .home-alerta .btn{flex:0 0 auto} .home-ativ{list-style:none;margin:0;padding:0} .home-ativ li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--fundo3);font-size:12.5px} .home-ativ li:last-child{border-bottom:0} .home-ativ time{color:var(--tinta3);font-size:11px;white-space:nowrap;flex:0 0 76px;font-variant-numeric:tabular-nums} .home-ativ .q{color:var(--tinta3);font-size:11.5px} .home-ok{display:flex;align-items:center;gap:8px;color:var(--verde-t);font-size:12.5px;padding:6px 0} .home-ok .pt{width:8px;height:8px;border-radius:50%;background:var(--verde)} @media (max-width:1000px){.home-grid{grid-template-columns:1fr}} /* ---------- central de identidade ---------- */ .idv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:12px;align-items:start} .idv-grid > .home-col > .cartao{margin-bottom:0} .idv-principio{font-size:12px;color:var(--tinta2);background:var(--fundo3);border-radius:var(--raio);padding:7px 10px;margin-bottom:10px} .idv-principio b{color:var(--tinta)} .idv-logo{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .idv-logo .quadro{width:180px;height:72px;border:1px dashed var(--linha2);border-radius:var(--raio);display:flex;align-items:center;justify-content:center;background:var(--fundo2);overflow:hidden;position:relative} .idv-logo .quadro.escuro{background:#15211b} .idv-logo .quadro img{max-width:92%;max-height:80%;object-fit:contain} .idv-logo .quadro .vazio-l{font-size:11px;color:var(--tinta3);text-align:center;padding:6px} .idv-logo .acoes-l{display:flex;flex-direction:column;gap:5px} .idv-cores{display:flex;gap:14px;flex-wrap:wrap} .idv-cor{display:flex;align-items:center;gap:8px;flex:1 1 200px} .idv-cor input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--linha2);border-radius:7px;background:none;cursor:pointer} .idv-cor input[type=text]{width:100px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px} .idv-cor label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;font-weight:640;color:var(--tinta2)} .idv-amostra{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap} .idv-amostra span{display:inline-block;width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08)} .idv-aparencia{display:flex;gap:6px;flex-wrap:wrap} .idv-aparencia label{display:flex;align-items:center;gap:6px;border:1px solid var(--linha2);border-radius:20px;padding:4px 11px;font-size:12.5px;cursor:pointer;background:var(--fundo)} .idv-aparencia label.on{border-color:var(--azul);background:var(--azul-f);color:var(--azul-t);font-weight:650} .idv-aparencia input{width:auto;margin:0} .idv-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px} .idv-app{border:1px solid var(--linha);border-radius:var(--raio);padding:7px 9px;font-size:12px;background:var(--fundo2)} .idv-app b{display:block;font-size:12.5px;color:var(--tinta)} .idv-app small{color:var(--tinta3);font-size:11px} .idv-app .et{margin-top:3px} /* prévia */ .idv-previa-cab{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .idv-previa-cab .dir{margin-left:auto;display:flex;gap:6px} .idv-frame{border:1px solid var(--linha2);border-radius:12px;overflow:hidden;background:var(--fundo2);color:var(--tinta);margin:0 auto;transition:max-width .2s} .idv-frame.desktop{max-width:100%} .idv-frame.celular{max-width:300px} .idv-frame .f-topo{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--fundo);border-bottom:1px solid var(--linha)} .idv-frame .f-topo img{height:20px;max-width:110px;object-fit:contain} .idv-frame .f-topo img.placa{background:#fff;border-radius:5px;padding:1px 5px} .idv-frame .f-topo .n{font-weight:760;color:var(--azul-t);font-size:12.5px} .idv-frame .f-topo .m{margin-left:auto;display:flex;gap:3px} .idv-frame .f-topo .m span{font-size:10.5px;padding:3px 8px;border-radius:6px;color:var(--tinta2);font-weight:640} .idv-frame .f-topo .m span.on{background:var(--marca-primaria);color:var(--marca-sobre-primaria)} .idv-frame .f-selo{font-size:9px;font-weight:760;letter-spacing:.05em;padding:2px 6px;border-radius:5px;background:var(--ambar);color:#3a2c00;white-space:nowrap} .idv-frame .f-corpo{padding:10px} .idv-frame .f-login{display:flex;align-items:center;justify-content:center;padding:18px 10px;background:var(--fundo3);position:relative;min-height:120px} .idv-frame .f-login.com-fundo{background-image:var(--fundo-login);background-size:cover;background-position:center} .idv-frame .f-login.com-fundo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,14,22,.45),rgba(10,14,22,.7))} .idv-frame .f-login .cx{position:relative;background:var(--fundo);border-radius:9px;padding:12px 14px;width:min(240px,90%);box-shadow:var(--sombra-2);text-align:center} .idv-frame .f-login .cx img{height:24px;max-width:140px;object-fit:contain;margin-bottom:6px} .idv-frame .f-login .cx .n{font-weight:760;color:var(--azul-t);font-size:13px;margin-bottom:6px} .idv-frame .f-btn{display:inline-block;background:var(--marca-primaria);color:var(--marca-sobre-primaria);border-radius:6px;padding:5px 11px;font-size:11.5px;font-weight:650} .idv-frame .f-btn.sec{background:var(--marca-destaque);color:var(--marca-sobre-destaque)} .idv-frame .f-card{background:var(--fundo);border:1px solid var(--linha);border-radius:8px;padding:8px 10px;margin-top:8px;font-size:11.5px} .idv-frame .f-card b{display:block;font-size:12px} .idv-frame .f-card a{color:var(--azul-t);font-size:11px} .idv-frame .f-et{display:inline-block;padding:1px 6px;border-radius:10px;font-size:9.5px;font-weight:700;background:var(--marca-destaque-suave);color:var(--marca-destaque-texto);border:1px solid var(--marca-destaque-borda)} .idv-frame .f-rel{margin-top:8px;background:#fff;color:#111;border-radius:6px;overflow:hidden;font-size:10.5px;border:1px solid var(--linha)} .idv-frame .f-rel .barra-rel{height:5px;background:var(--marca-primaria)} .idv-frame .f-rel .cab-rel{display:flex;justify-content:space-between;padding:6px 8px 2px;font-weight:700;color:var(--marca-primaria)} .idv-frame .f-rel .cab-rel img{height:14px;max-width:80px;object-fit:contain} .idv-frame .f-rel .lin-rel{display:flex;justify-content:space-between;padding:2px 8px;border-top:1px solid #eee} .idv-frame .f-rel .rod-rel{padding:4px 8px;color:#666;font-size:9.5px;border-top:1px solid #ddd} .idv-frame .f-rodape{padding:6px 10px;font-size:10px;color:var(--tinta3);border-top:1px solid var(--linha);display:flex;gap:8px;flex-wrap:wrap} .idv-upload{border:1px dashed var(--linha2);border-radius:var(--raio);padding:8px 10px;font-size:12px;color:var(--tinta2);background:var(--fundo2)} .idv-upload input[type=file]{font-size:12px} .idv-ajuste{font-size:11.5px;color:var(--ambar-t);background:var(--ambar-f);border:1px solid var(--ambar-b);border-radius:var(--raio);padding:5px 8px;margin-top:6px} .idv-estado{font-size:11.5px;color:var(--tinta3);display:flex;gap:10px;flex-wrap:wrap;align-items:center} .idv-estado .et{font-size:10px} details.idv-avancado{border:1px solid var(--linha);border-radius:var(--raio-g);padding:0 12px;background:var(--fundo)} details.idv-avancado summary{cursor:pointer;padding:9px 0;font-size:12.5px;font-weight:650;color:var(--tinta2)} details.idv-avancado .form{padding:0 0 12px} @media (max-width:1000px){.idv-grid{grid-template-columns:1fr}} /* ---------- login ---------- */ .login-pagina{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin:-10px -20px -70px;padding:32px 16px;position:relative;background:var(--fundo2)} .login-pagina.com-fundo{background-image:var(--login-fundo);background-size:cover;background-position:center} .login-pagina.com-fundo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,14,22,.5),rgba(10,14,22,.72))} .login-pagina > *{position:relative} .login-cartao{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:26px 28px 22px;width:min(440px,100%);box-shadow:0 18px 50px rgba(20,32,26,.18);text-align:center} .login-cartao .login-logo{max-height:56px;max-width:220px;object-fit:contain;margin:0 auto 10px;display:block} .login-cartao .login-logo.placa{background:#fff;border-radius:8px;padding:6px 10px} .login-cartao .login-nome{font-size:20px;font-weight:760;color:var(--azul-t);letter-spacing:-.02em;margin-bottom:6px} .login-cartao .login-titulo{font-size:13px;color:var(--tinta2);margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .login-cartao .btn.p{width:100%;padding:12px;font-size:14px} .login-cartao .nota{text-align:left} .login-cartao .aviso{text-align:left} .login-rodape{font-size:11.5px;color:var(--tinta3);text-align:center;display:flex;gap:6px 12px;flex-wrap:wrap;justify-content:center;max-width:560px} .login-pagina.com-fundo .login-rodape{color:rgba(255,255,255,.85)} .login-personas{width:min(560px,100%)} @media (max-width:900px){.login-pagina{margin:-10px -12px -70px;padding:20px 12px;min-height:calc(100vh - 80px)}.login-cartao{padding:20px 18px 16px}} /* ===================================================================== SISTEMA (rodada noturna de 09/09/2026) — o que faltava para o conjunto parecer um só produto: esqueleto de carregamento, alvo de toque, foco por teclado em tudo, transição de tema, cabeçalho no celular. ===================================================================== */ /* Esqueleto: blocos neutros que pulsam de leve enquanto o dado não chega. */ .esq{background:linear-gradient(90deg,var(--fundo3) 25%,var(--fundo2) 50%,var(--fundo3) 75%);background-size:400% 100%;border-radius:6px;animation:esq 1.3s ease-in-out infinite;min-height:12px} .esq.t{height:16px;width:40%} .esq.l{height:12px;width:70%;margin-top:6px} .esq.n{height:34px;width:100%;margin-top:8px} .esq.c{height:86px;width:100%} @keyframes esq{0%{background-position:100% 0}100%{background-position:0 0}} @media (prefers-reduced-motion:reduce){.esq{animation:none}.tema-animado *{transition:none!important}} /* Toque: em tela de dedo o botão pequeno cresce, sem mudar o desktop. */ @media (pointer:coarse){.btn.s{min-height:34px;padding:5px 11px}.chip{min-height:34px}.x{padding:6px 10px}} /* Foco por teclado visível em TODO controle, sempre na cor de foco da marca. */ input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--marca-foco);outline-offset:1px} /* Troca de tema suave — só depois da primeira pintura (a classe entra por JS). */ /* O fundo da página troca sem transição: numa aba oculta a transição fica congelada e a página aparece metade clara, metade escura. Cartões e botões transitam; a página, não. */ .tema-animado .cartao,.tema-animado header.topo,.tema-animado .btn,.tema-animado .home-mod,.tema-animado .idv-frame{transition:background-color .18s ease,color .18s ease,border-color .18s ease} /* Cabeçalho no celular: os módulos rolam, o nome encurta, nada estoura. */ @media (max-width:600px){ .topo .linha{gap:6px 10px} .modulos{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .modulos::-webkit-scrollbar{display:none} .quem{max-width:120px;font-size:11px} .quem b{font-size:12px} .marca img{height:22px;max-width:120px} .selo-homolog{font-size:9px;padding:2px 6px} /* No celular o selo já diz o ambiente; o sufixo "· Homologação" ao lado da marca é repetição. */ #marcaAmbiente{display:none} } /* Estado "sem acesso" e erro de bloco: mesma família visual do vazio. */ .bloco-erro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px dashed var(--vermelho-b);border-radius:var(--raio);background:var(--vermelho-f);color:var(--vermelho-t);font-size:12.5px} .bloco-erro .btn{margin-left:auto} .sem-acesso{max-width:520px;margin:40px auto;text-align:center} .sem-acesso .ic{width:44px;height:44px;border-radius:50%;background:var(--fundo3);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:8px} /* Módulo: a ação clara no rodapé do card. */ .home-mod .ir{margin-top:auto;padding-top:6px;font-size:12px;font-weight:650;color:var(--azul-t);display:flex;align-items:center;gap:4px} .home-mod .ir::after{content:"→";transition:transform .12s} .home-mod:hover .ir::after{transform:translateX(3px)} .home-mod .n{margin-top:6px} /* Minhas vendas (quem vende) */ .home-minhas li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--fundo3);font-size:12.5px} .home-minhas li:last-child{border-bottom:0} .home-minhas time{color:var(--tinta3);font-size:11px;flex:0 0 70px;font-variant-numeric:tabular-nums} .home-minhas .e{color:var(--tinta3);font-size:11.5px} /* Zona de envio de imagem (arrastar e soltar). */ .idv-zona{border:1.5px dashed var(--linha2);border-radius:var(--raio-g);padding:12px 14px;background:var(--fundo2);display:flex;gap:12px;align-items:center;flex-wrap:wrap;transition:border-color .12s,background .12s;cursor:pointer} .idv-zona:hover,.idv-zona.sobre{border-color:var(--azul);background:var(--azul-f)} .idv-zona .tx{flex:1;min-width:160px;font-size:12.5px;color:var(--tinta2)} .idv-zona .tx b{display:block;color:var(--tinta);font-size:13px} .idv-zona .tx small{color:var(--tinta3);font-size:11px} .idv-zona input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .idv-zona.enviando{opacity:.7;pointer-events:none} .idv-status{font-size:11.5px;color:var(--tinta3);display:inline-flex;align-items:center;gap:6px} .idv-status .pt{width:7px;height:7px;border-radius:50%;background:var(--verde)} .idv-status.pend .pt{background:var(--ambar)} .idv-frame .f-form{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap} .idv-frame .f-form label{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--tinta2);flex:1 1 90px} .idv-frame .f-form .cx-in{border:1px solid var(--linha2);border-radius:5px;padding:4px 7px;font-size:10.5px;background:var(--fundo);color:var(--tinta)} .idv-frame .f-form .cx-in.foco{outline:2px solid var(--marca-foco);outline-offset:-1px} .login-cartao{border-top:3px solid var(--marca-primaria)} .rotulo-campo{font-size:11.5px;font-weight:640;color:var(--tinta2);margin-bottom:5px} /* A zona de envio é um