:root{ /* diz ao navegador que o tema é escuro: sem isto o menu nativo do ` cru, e pintar bloco lá quebraria os anexos da tarefa. */ .areaArquivo{display:flex;flex-direction:column;align-items:center;gap:9px; padding:20px 16px;margin:14px 0;border:1px dashed var(--mare-2);border-radius:12px; background:var(--casco);cursor:pointer;text-align:center} .areaArquivo:hover{border-color:var(--azul);background:var(--doca)} .areaArquivo .sub{margin:0} /* ------------------------------------------------------ painel lateral */ .contexto{width:320px;flex-shrink:0;background:var(--doca);border-left:1px solid var(--mare);padding:18px 18px 60px;position:sticky;top:var(--topo);height:calc(100vh - var(--topo));overflow:auto} .dl{display:grid;grid-template-columns:100px 1fr;gap:8px 10px;font-size:13px;margin:14px 0} .dl dt{color:var(--nevoa)} .dl dd{margin:0} .fecha{position:absolute;right:14px;top:12px;color:var(--nevoa);font-size:18px;line-height:1} .historico{margin-top:16px;font-size:12px;color:var(--nevoa)} .historico div{padding:6px 0;border-top:1px solid var(--mare)} /* O histórico de OBSERVAÇÕES da tarefa (18/09). Ele NÃO é o `.historico` de cima: aquele é o rastro do sistema, cinza e miúdo de propósito, e este é texto escrito por gente para outra gente ler. Por isso o recado sai na cor do corpo e só a assinatura — quem e quando — fica em `sub`. Com teto de altura: uma tarefa de doze meses de recado não pode empurrar o botão de concluir para fora da tela. */ .obsHistorico{max-height:220px;overflow-y:auto;margin:0 0 8px} .obsLinha{padding:7px 0;border-top:1px solid var(--mare)} .obsLinha:first-child{border-top:0;padding-top:0} .obsLinha div{white-space:pre-wrap;word-break:break-word} /* ------------------------------------------------------------- diálogo */ .fundo{position:fixed;inset:0;background:rgba(4,12,20,.68);z-index:60;display:flex; align-items:flex-start;justify-content:center;padding:18px;overflow-y:auto;overscroll-behavior:contain} .dialogo{background:var(--doca);border:1px solid var(--mare-2);border-radius:16px;padding:20px;width:100%; max-width:420px;max-height:calc(100vh - 36px);overflow-y:auto;margin:auto 0;position:relative} .recado{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:var(--mare);border:1px solid var(--mare-2);color:var(--cal);padding:10px 16px;border-radius:99px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.4)} /* A aba que ficou para trás — ver `confereVersao` em web/app.js. Ela FICA na tela: não é recado que some em três segundos, é o sistema dizendo que o que está na frente da pessoa é de antes da última publicação. */ .versaoNova{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80; display:flex;align-items:center;gap:14px;width:max-content;max-width:min(560px,calc(100vw - 24px)); background:var(--mare);border:1px solid var(--azul);color:var(--cal); padding:11px 12px 11px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.45)} .versaoNova>div{flex:1;min-width:0} .versaoNova b{display:block;font-family:var(--display);font-size:13.5px} .versaoNova span{display:block;color:var(--nevoa);font-size:12.5px} .versaoNova .acao{flex:0 0 auto} /* No celular ela ocupa a largura toda: centrada e do tamanho do texto, virava uma coluna estreita e alta no meio da tela. E sobe acima das abas de baixo. */ @media (max-width:900px){.versaoNova{left:12px;right:12px;bottom:96px;transform:none;width:auto;max-width:none}} .erro{color:var(--vermelho);font-size:12.5px;margin:6px 0 0} .carregando{padding:40px;text-align:center;color:var(--nevoa)} /* ------------------------------------------------------------- celular */ .abas{display:none} .flutuante{display:none} @media (max-width:900px){ .doca,.contexto,.busca{display:none !important} .trabalho{padding:16px 14px 96px} .topo{padding:9px 12px} table thead{display:none} table,tbody,tr,td{display:block;width:100%} tbody tr{border:1px solid var(--mare);border-radius:12px;margin-bottom:9px;padding:11px 13px;background:var(--doca)} td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:12px;align-items:center} td::before{content:attr(data-r);color:var(--nevoa);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase} td.cheia{display:block} td.cheia::before{display:block;margin-bottom:5px} .abas{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--doca);border-top:1px solid var(--mare);padding:7px 4px calc(7px + env(safe-area-inset-bottom))} .abas button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--nevoa);padding:5px 2px;font-weight:500} .abas button[aria-current="page"]{color:var(--destaque)} .abas .ic{font-size:17px;line-height:1} .flutuante{display:grid;place-items:center;position:fixed;right:16px;bottom:80px;z-index:49;background:var(--azul);color:#fff;width:52px;height:52px;border-radius:16px;font-size:26px;box-shadow:0 8px 22px rgba(0,0,0,.4)} .contextoAberto .contexto{display:block !important;position:fixed;inset:auto 0 0 0;width:100%;height:82vh;z-index:60;border-radius:18px 18px 0 0;border:1px solid var(--mare-2)} } @media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}} /* --------------------------------------------------------------- kanban */ .kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;scroll-snap-type:x proximity} .coluna{flex:0 0 268px;background:var(--doca);border:1px solid var(--mare);border-radius:14px;padding:12px;scroll-snap-align:start} .coluna > header{display:flex;align-items:baseline;gap:8px;margin-bottom:10px} .coluna h2{margin:0;flex:1} .coluna .conta{font-family:var(--display);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums} .coluna .valor{font-size:11px;color:var(--nevoa);font-variant-numeric:tabular-nums} .coluna .trilho{height:3px;border-radius:99px;margin-bottom:10px;background:var(--mare-2)} .coluna[data-etapa="Ganho"] .trilho{background:var(--turquesa)} .coluna[data-etapa="Perdido"] .trilho{background:var(--vermelho)} .coluna[data-etapa="Negociação"] .trilho{background:var(--ambar)} .coluna[data-etapa="Proposta"] .trilho,.coluna[data-etapa="Diagnóstico"] .trilho{background:var(--azul-forte)} .card{background:var(--casco);border:1px solid var(--mare);border-radius:11px;padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s} .card:hover{border-color:var(--azul)} .card b{display:block;font-weight:600;font-size:13.5px;line-height:1.3} .card .meta{color:var(--nevoa);font-size:11.5px;margin-top:3px} .card .rodape{display:flex;align-items:center;gap:8px;margin-top:9px} /* Descartar mora dentro do card, e por isso fica DISCRETO e sem ícone: o clique distraído não pode parecer o clique normal. Ele só abre a janela de confirmação, que exige escolher o desfecho e escrever o motivo — a decisão acontece lá, nunca aqui. */ .card{position:relative} .card .descartaCard{position:absolute;top:8px;right:8px;background:none;border:1px solid transparent; color:var(--nevoa);font:inherit;font-size:11px;line-height:1;padding:3px 6px; border-radius:6px;cursor:pointer;opacity:.45;transition:opacity .15s,color .15s,border-color .15s} /* Fraco, nunca invisível: em telefone não há hover, e botão que só existe no passar do mouse é botão que não existe para metade das pessoas. */ .card:hover .descartaCard,.card:focus-within .descartaCard{opacity:1} .card .descartaCard:hover,.card .descartaCard:focus{color:var(--vermelho);border-color:var(--vermelho);opacity:1} .card .descartaCard:focus-visible{outline:2px solid var(--vermelho);outline-offset:1px} .card .valor{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;font-size:13px} .card .docs{margin-left:auto;font-size:11px;color:var(--nevoa);font-variant-numeric:tabular-nums} .card .docs.ok{color:var(--turquesa)} .coluna .vazioCol{padding:14px 6px;text-align:center;color:var(--nevoa);font-size:12px;border:1px dashed var(--mare-2);border-radius:10px} .dialogo.largo{max-width:580px} .passos{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 4px} .passos button{padding:6px 11px;border-radius:99px;border:1px solid var(--mare-2);color:var(--nevoa);font-size:12px} .passos button[aria-pressed="true"]{background:var(--mare);color:var(--cal)} @media (max-width:900px){ .kanban{gap:10px} .coluna{flex:0 0 82vw} } /* ------------------------------------------------- proposta no pop-up */ .cabProposta{display:grid;grid-template-columns:1fr 172px 138px 138px 28px;gap:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--nevoa);font-family:var(--display);margin-bottom:6px} .linhaProposta{display:grid;grid-template-columns:1fr 172px 138px 138px 28px;gap:8px;margin-bottom:7px;align-items:center} .linhaProposta[data-sv]{grid-template-columns:1fr 148px 108px 28px} .cabServico{display:grid;grid-template-columns:1fr 148px 108px 28px;gap:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--nevoa);font-family:var(--display);margin-bottom:6px} .linhaProposta input,.linhaProposta select{background:var(--casco);border:1px solid var(--mare-2);border-radius:9px;padding:8px 10px;font-size:13px;width:100%;font-variant-numeric:tabular-nums} .linhaProposta .tira{color:var(--nevoa);font-size:15px;line-height:1;padding:4px} .linhaProposta .tira:hover{color:var(--vermelho)} .somaProposta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--mare)} .somaProposta > div{flex:1;min-width:110px;background:var(--casco);border:1px solid var(--mare);border-radius:11px;padding:9px 12px} .somaProposta b{display:block;font-family:var(--display);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px} .somaProposta > div:last-child b{color:var(--turquesa)} .card.arrastando{opacity:.4} .coluna.sobre{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul)} .card[draggable="true"]{cursor:grab} .card[draggable="true"]:active{cursor:grabbing} @media (max-width:900px){ .cabProposta,.cabServico{display:none} .linhaProposta,.linhaProposta[data-sv]{grid-template-columns:1fr 28px;gap:6px} .linhaProposta .tira{grid-row:span 4} .linhaProposta[data-sv] .tira{grid-row:span 3} } .listaCol{display:grid;place-items:center;color:var(--nevoa);padding:3px;border-radius:7px;line-height:0} .listaCol:hover{color:var(--destaque);background:var(--casco)} .coluna > header{align-items:center} /* ------------------------------------------------ documentação por CNPJ */ .blocoDocs{border:1px solid var(--mare);border-radius:11px;padding:11px 12px;margin-bottom:9px;background:var(--casco)} .tituloDocs{display:flex;align-items:center;gap:8px;margin-bottom:9px} .tituloDocs b{flex:1;font-size:13.5px} .gradeDocs{display:grid;grid-template-columns:1fr 1fr;gap:7px} .marcaDoc{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--mare-2);border-radius:9px;padding:8px 10px;font-size:12.5px;color:var(--nevoa);line-height:1.25} .marcaDoc:hover{border-color:var(--azul);color:var(--cal)} .marcaDoc .sinal{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;background:var(--mare);font-size:12px} .marcaDoc.ok{color:var(--cal);border-color:rgba(41,211,192,.45)} .marcaDoc.ok .sinal{background:var(--turquesa);color:#062} /* caixinha que vem de um perfil: mostra o que a pessoa pode, mas não é aqui que se muda — quem manda é a linha do perfil */ .marcaDoc.travada{opacity:.62;border-style:dashed;cursor:not-allowed} .marcaDoc.travada:hover{border-color:var(--mare-2);color:var(--nevoa)} /* grade de preço do terceirizado: rótulo à esquerda, valor à direita */ .gradePreco{display:grid;grid-template-columns:1fr 120px;gap:6px 10px;align-items:center;margin:6px 0 4px} .gradePreco .rot{font-size:12.5px;color:var(--nevoa)} .gradePreco input{width:100%} @media (max-width:900px){.gradeDocs{grid-template-columns:1fr}} /* --------------------------------------------------- árvore de documentos */ /* `align-items:flex-start` e o `.nm` com `min-width:0`: razão social de empresa brasileira não cabe em 268px, e antes daqui ela era cortada pela largura da coluna. Agora ela dobra a linha e a contagem fica no alto, do lado — a etiqueta não encolhe nunca, porque número pela metade não é número. */ .itemArvore{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;padding:7px 9px;border-radius:8px;color:var(--nevoa);font-size:13px;margin-bottom:2px} .itemArvore .nm{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.35} .itemArvore .etq{margin-left:auto;font-size:10.5px;flex-shrink:0} .itemArvore:hover{background:var(--casco);color:var(--cal)} .itemArvore.atual{background:var(--mare);color:var(--cal);font-weight:600} .itemArvore.filho{padding-left:20px;font-size:12.5px} .itemArvore.neto{padding-left:34px;font-size:12px} .buscaDoc{width:100%;background:var(--casco);border:1px solid var(--mare-2);border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--cal)} .linhaEmpresaKo{display:grid;grid-template-columns:1fr 130px 1fr;gap:8px} .linhaEmpresaKo .campo span{font-size:11px} .marcaDoc .sub{font-size:11px;line-height:1.3} @media (max-width:900px){.linhaEmpresaKo{grid-template-columns:1fr}} /* ------------------------------------------------- filtros por coluna */ .linhaFiltros th{padding:0 6px 10px;vertical-align:top} /* O teto era 190px, e razão social de empresa brasileira não cabe nele: a lista suspensa fechada mostrava "COMERCIAL DE ALIMENTOS SAN…" em toda barra de filtro. 300px é o que cabe na coluna mais estreita sem empurrar as outras; acima disso a coluna manda, porque a largura é 100%. */ .filtroCol{width:100%;background:var(--casco);border:1px solid var(--mare);border-radius:8px; padding:6px 8px;font-size:11.5px;color:var(--nevoa);font-family:var(--corpo);max-width:300px} .filtroCol:hover{border-color:var(--mare-2);color:var(--cal)} .filtroCol:has(option:checked:not(:first-child)){border-color:var(--azul);color:var(--cal)} @media (max-width:900px){ table thead{display:block} table thead tr:not(.linhaFiltros){display:none} .linhaFiltros{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px} .linhaFiltros th{padding:0;display:block} .filtroCol{max-width:none} } /* ------------------------------------------------------------ calendário */ .semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px} .semana span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--nevoa);text-align:center;font-family:var(--display)} .calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .dia{min-height:84px;background:var(--casco);border:1px solid var(--mare);border-radius:9px;padding:5px;cursor:pointer;overflow:hidden} .dia:hover{border-color:var(--azul)} .dia.fora{background:transparent;border-color:transparent;cursor:default} .dia.atual{border-color:var(--turquesa);box-shadow:inset 0 0 0 1px var(--turquesa)} .numDia{font-size:11.5px;color:var(--nevoa);display:block;margin-bottom:3px} .dia.atual .numDia{color:var(--turquesa);font-weight:600} .evento{display:block;width:100%;text-align:left;font-size:10.5px;line-height:1.25;padding:3px 5px;border-radius:5px; margin-bottom:3px;background:var(--mare);color:var(--cal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .evento b{font-variant-numeric:tabular-nums;margin-right:3px} .evento.esp{background:rgba(62,155,224,.22);border-left:2px solid var(--azul-forte)} .evento.per{background:rgba(242,179,61,.2);border-left:2px solid var(--ambar)} .evento.ok{background:rgba(41,211,192,.18);border-left:2px solid var(--turquesa)} .evento.feito{opacity:.5;text-decoration:line-through} @media (max-width:900px){ .dia{min-height:62px;padding:3px} .evento{font-size:9.5px} } /* A conferência do CRM vive recolhida: o número fica na linha do título e a lista só aparece quando alguém pede. Sem isto ela empurrava o funil inteiro para baixo da dobra em toda visita. */ .conferenciaCrm>summary{cursor:pointer;padding:15px 16px;margin:0;list-style:none;user-select:none} .conferenciaCrm>summary::-webkit-details-marker{display:none} .conferenciaCrm>summary::after{content:"▾";color:var(--nevoa);font-size:12px;margin-left:2px} .conferenciaCrm[open]>summary::after{content:"▴"} .conferenciaCrm>summary:hover h2{color:var(--azul-forte)} .conferenciaCrm .corpoConferencia{padding:0 16px 15px} .conferenciaCrm .corpoConferencia h3{font-size:13px} .filtrosCrm{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .filtrosCrm select,.filtrosCrm input{background:var(--casco);border:1px solid var(--mare);border-radius:9px; padding:7px 10px;font-size:12.5px;color:var(--cal);min-width:150px} .filtrosCrm input{flex:1;min-width:190px} .marcaDoc input[type="checkbox"]{accent-color:var(--destaque);width:15px;height:15px;flex-shrink:0;margin-right:2px} .marcaDoc:has(input:checked){color:var(--cal);border-color:rgba(41,211,192,.45)} .filtroData{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--nevoa)} .filtroData input{min-width:0;width:140px} /* --------------------------------------------------- tabela de valores */ .gradeTabela{display:grid;grid-template-columns:1fr 130px;gap:1px;background:var(--mare);border:1px solid var(--mare);border-radius:10px;overflow:hidden} .gradeTabela.tres{grid-template-columns:1fr 130px 130px} .celTab{background:var(--doca);padding:9px 12px;font-size:13px} .celTab.cab{background:var(--casco);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--nevoa);font-family:var(--display)} .celTab.dir{text-align:right;font-variant-numeric:tabular-nums} .valorTab{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;color:var(--cal); border-bottom:1px dashed var(--mare-2);padding:1px 2px} .valorTab:hover{color:var(--turquesa);border-color:var(--turquesa)} /* ------------------------------------------------------------ atendimento */ .conversa{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:10px;border-radius:11px;margin-bottom:4px} .conversa:hover{background:var(--casco)} .conversa.atual{background:var(--mare)} .conversa .txt{flex:1;min-width:0} .conversa .txt b{display:block;font-size:13.5px} .conversa .previa{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--nevoa)} .conversa .lado{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0} .conversaCorpo{flex:1;overflow-y:auto;max-height:44vh;display:flex;flex-direction:column;gap:8px;padding:6px 2px} .balao{max-width:78%;padding:9px 12px;border-radius:13px;font-size:13.5px;position:relative;line-height:1.4} .balao.cliente{background:var(--mare);align-self:flex-start;border-bottom-left-radius:4px} .balao.escritorio{background:var(--azul);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} .balao.sistema{background:transparent;border:1px dashed var(--mare-2);color:var(--nevoa);align-self:center;font-size:12px;max-width:92%;text-align:center} .balao .quem{display:block;font-size:10.5px;opacity:.75;margin-bottom:2px} .balao .hora{display:block;font-size:10px;opacity:.6;text-align:right;margin-top:3px} @media (max-width:900px){.conversaCorpo{max-height:52vh}.balao{max-width:88%}} .linhaGrupo{display:flex;align-items:center;gap:10px;margin:10px 0 5px} .linhaGrupo .sub{flex:1} /* ================================================================ gráficos Marcas finas, eixo discreto, rótulo direto. As cores vêm do graficos.js, que usa paleta CATEGÓRICA — separada das cores de estado (turquesa, âmbar, vermelho), que continuam significando entregue/vencendo/atrasado. */ .grafico{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .grafico .semDado{color:var(--nevoa);font-size:13px;margin:10px 2px;font-style:italic} .pizza{width:190px;height:190px;flex-shrink:0} .pizza .fatia{transition:opacity .12s} .pizza .fatia[data-ir-grafico]{cursor:pointer} .pizza:hover .fatia{opacity:.45} .pizza .fatia:hover,.pizza .fatia:focus{opacity:1;outline:none} /* anel da superfície nas marcas que se tocam */ /* o miolo e os textos não podem roubar o ponteiro das fatias */ .pizza .furo,.pizza .furoNum,.pizza .furoRot{pointer-events:none} .pizza .furo{fill:var(--doca)} .pizza .furoNum{fill:var(--cal);font-family:var(--display);font-size:26px;font-weight:600; /* o tamanho vem do próprio SVG quando o valor é longo (R$ 1.480.000) */ text-anchor:middle;font-variant-numeric:tabular-nums} .pizza .furoRot{fill:var(--nevoa);font-size:10px;text-anchor:middle;letter-spacing:.1em;text-transform:uppercase} .legenda{list-style:none;margin:0;padding:0;flex:1;min-width:190px;display:flex;flex-direction:column;gap:1px} .legenda li{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:7px;font-size:13px;color:var(--nevoa)} .legenda li[data-ir-grafico]{cursor:pointer} .legenda li:hover{background:var(--casco);color:var(--cal)} .legenda i{width:9px;height:9px;border-radius:3px;flex-shrink:0} .legenda .rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .legenda b{color:var(--cal);font-variant-numeric:tabular-nums} .legenda .parte{width:38px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums} .barras{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:7px} .barras li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--nevoa);padding:2px 4px;border-radius:7px} .barras li[data-ir-grafico]{cursor:pointer} .barras li:hover{background:var(--casco);color:var(--cal)} /* 150px cortava quase toda razão social. 210px é o que cabe sem encolher a pista da barra abaixo de uma leitura útil, e o `title` (posto em `web/graficos.js`) guarda o nome inteiro — em gráfico o rótulo TEM de ser uma linha só, senão as barras deixam de estar alinhadas e a comparação, que é o trabalho do gráfico, se perde. */ .barras .rot{width:210px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:760px){.barras .rot{width:130px}} .barras .pista{flex:1;min-width:60px;height:9px;background:var(--mare);border-radius:99px;overflow:hidden} /* Ponta arredondada de 4px, ancorada na linha de base. Nome próprio de propósito: já existe uma .barra neste CSS, usada como trilho noutra tela — reaproveitar o nome dava colisão silenciosa (a barra sumia). */ .barras .preenche{display:block;height:100%;border-radius:0 4px 4px 0;transition:width .3s} .barras b{width:46px;text-align:right;color:var(--cal);font-variant-numeric:tabular-nums} .balaoGrafico{position:fixed;top:0;left:0;z-index:60;pointer-events:none; background:var(--mare);border:1px solid var(--mare-2);border-radius:9px;padding:7px 10px; box-shadow:0 8px 22px rgba(0,0,0,.35);font-size:12.5px;color:var(--cal); display:flex;flex-direction:column;gap:2px;max-width:230px} .balaoGrafico b{font-size:13px} .balaoGrafico span{color:var(--nevoa);font-variant-numeric:tabular-nums} .balaoGrafico .dica{font-size:11px;color:var(--azul-forte)} .tabelaGrafico{width:100%;margin-top:12px;font-size:12.5px} .tabelaGrafico th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--nevoa); text-align:left;padding:4px 8px;border-bottom:1px solid var(--mare)} .tabelaGrafico td{padding:5px 8px;border-bottom:1px solid var(--mare);color:var(--nevoa)} .tabelaGrafico td.num{text-align:right;color:var(--cal);font-variant-numeric:tabular-nums} .verTabela{background:none;border:0;color:var(--nevoa);font-size:11.5px;cursor:pointer; padding:4px 0;text-decoration:underline;text-underline-offset:3px} .verTabela:hover{color:var(--cal)} /* ------------------------------------------------- marcas de eixo (07/09) Linha, coluna, combo, medidor, cascata e empilhada. O SVG escala inteiro (sem preserveAspectRatio="none"): esticar o desenho estica o texto junto, e um eixo com número achatado é pior do que eixo nenhum. */ .grafico.coluna{display:block} .eixos{width:100%;height:auto;display:block;overflow:visible} .eixos .grade{stroke:var(--mare);stroke-width:1} .eixos .zero{stroke:var(--mare-2);stroke-width:1.5} .eixos .ligacao{stroke:var(--mare-2);stroke-width:1;stroke-dasharray:3 3} .eixos .eixoY{fill:var(--nevoa);font-size:11.5px;text-anchor:end;font-variant-numeric:tabular-nums} .eixos .eixoY.dir{text-anchor:start} .eixos .eixoX{fill:var(--nevoa);font-size:11.5px;text-anchor:middle} .eixos .eixoX.fraco{fill:var(--neutro);font-size:10px;font-variant-numeric:tabular-nums} .eixos .valorCol{fill:var(--cal);font-size:10.5px;text-anchor:middle;font-variant-numeric:tabular-nums} /* a marca inteira reage, não só o pixel embaixo do ponteiro */ .eixos .col rect,.eixos .bolinha{transition:opacity .12s,r .12s} .eixos:hover .col rect{opacity:.5} .eixos .col:hover rect{opacity:1} .eixos .ponto:hover .bolinha{r:5.5} .eixos .traco{stroke-dasharray:1400;stroke-dashoffset:0} @media (prefers-reduced-motion:no-preference){ .eixos .traco{animation:tracar .5s ease-out} @keyframes tracar{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}} } .legendaLinha{list-style:none;display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 0;padding:0; font-size:12px;color:var(--nevoa)} .legendaLinha li{display:flex;align-items:center;gap:6px} .legendaLinha i{width:9px;height:9px;border-radius:3px;flex-shrink:0} .legendaLinha i.risco{width:14px;height:3px;border-radius:2px} .medidor{justify-content:center} .medidor svg{width:220px;height:auto} .medidor .medNum{fill:var(--cal);font-family:var(--display);font-size:27px;font-weight:600; text-anchor:middle;font-variant-numeric:tabular-nums} .medidor .medRot{fill:var(--nevoa);font-size:10px;text-anchor:middle;letter-spacing:.08em;text-transform:uppercase} .faisca{width:100%;height:26px;display:block;margin-top:6px;opacity:.9} .fichaNum .faisca{margin-bottom:-2px} /* ---------------------------------------------------------- doca retrátil */ .doca{transition:width .18s ease;overflow:hidden} /* a lista rola por dentro; o botão de recolher fica fora do rolamento e por isso continua alcançável por mais itens que o menu tenha */ .docaItens{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin} .recolher{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;flex-shrink:0; padding:9px 10px;border-radius:8px;color:var(--nevoa);font-size:12px; border:1px solid var(--mare);background:var(--doca);cursor:pointer;width:100%; } .recolher:hover{background:var(--casco);color:var(--cal)} .recolher .chevron{font-size:11px;transition:transform .18s} body[data-doca="minima"] .doca{width:56px;padding:14px 8px} body[data-doca="minima"] .docaItens{align-items:center} body[data-doca="minima"] .doca .grupo{display:none} body[data-doca="minima"] .doca button{justify-content:center;padding:9px 0;gap:0} body[data-doca="minima"] .doca button > span:not(.pt):not(.ic){display:none} body[data-doca="minima"] .doca .pt{position:absolute;left:4px;height:18px} body[data-doca="minima"] .doca button{position:relative} body[data-doca="minima"] .doca .selo{position:absolute;top:2px;right:2px;margin:0;font-size:10px;padding:0 4px} body[data-doca="minima"] .recolher .rotuloRecolher{display:none} body[data-doca="minima"] .recolher .chevron{transform:rotate(180deg)} .doca .ic{font-size:15px;width:18px;text-align:center;flex-shrink:0;line-height:1} @media (max-width:900px){ .recolher{display:none} } /* ------------------------------------------------- campo de arquivo real */ .campoArquivo input[type="file"]{ display:block;width:100%;background:var(--casco);border:1px dashed var(--mare-2); border-radius:10px;padding:9px 11px;color:var(--nevoa);font-size:12.5px;cursor:pointer; } .campoArquivo input[type="file"]::file-selector-button{ background:var(--mare);border:0;border-radius:7px;padding:5px 11px;margin-right:10px; color:var(--cal);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit; } .campoArquivo input[type="file"]:hover{border-color:var(--azul)} .campoArquivo .estadoArquivo{display:block;margin-top:5px;line-height:1.35} .campoArquivo.ok input[type="file"]{border-style:solid;border-color:rgba(41,211,192,.5)} .campoArquivo.ok .estadoArquivo{color:var(--turquesa)} .campoArquivo.ruim input[type="file"]{border-color:rgba(229,97,107,.6)} .campoArquivo.ruim .estadoArquivo{color:var(--vermelho)} /* ------------------------------------------------------- OS do Paralegal */ .faixa .ruim .v{color:var(--vermelho)} .linhaSocio{margin-bottom:2px} .linhaSocio .campo{margin-bottom:8px} .linhaSocio .tiraSocio{margin-bottom:8px} /* Filtros da barra da OS: é escolher no escuro. */ .listaDescarte{display:flex;flex-direction:column;gap:8px} .escolhaDescarte{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;cursor:pointer; background:var(--casco);border:1px solid var(--mare);border-radius:10px;transition:border-color .15s} .escolhaDescarte:hover{border-color:var(--azul)} .escolhaDescarte:has(input:checked){border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul)} .escolhaDescarte input{margin-top:3px;flex:0 0 auto} .escolhaDescarte>span{display:flex;flex-direction:column;gap:3px} .escolhaDescarte b{font-size:13.5px;font-weight:600} .escolhaDescarte .sub{font-size:11.5px;line-height:1.45;color:var(--nevoa)} /* ---- CNPJ da proposta que já é nosso ---- A linha travada precisa PARECER travada, senão alguém tenta corrigir a razão social aqui e o servidor descarta em silêncio — dois lugares dizendo o mesmo dado é como eles divergem. */ .linhaProposta.daBase{position:relative;padding-bottom:16px} .linhaProposta.daBase input[readonly],.linhaProposta.daBase select[disabled]{ opacity:.72;cursor:not-allowed;background:var(--doca)} .linhaProposta .marcaBase{grid-column:1/-1;margin-top:2px;font-size:11px;color:var(--turquesa)} /* ---- busca de empresa na base ---- */ .listaBase{max-height:320px;overflow:auto;margin-top:6px;display:flex;flex-direction:column;gap:4px} /* ------------------------------------- o cadastro da contabilidade O logo à esquerda, com moldura do tamanho em que ele vai sair no papel, e os campos de identidade à direita. A moldura existe mesmo sem logo: espaço que aparece só depois de alguém escolher um arquivo não convida a escolher. */ .linhaMarca{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .logoEscritorio{flex:0 0 190px} .camposMarca{flex:1;min-width:280px} .molduraLogo{width:190px;height:96px;border:1px dashed var(--mare-2);border-radius:10px; background:var(--casco);display:grid;place-items:center;overflow:hidden} .molduraLogo img{max-width:100%;max-height:100%;object-fit:contain} .logoEscritorio input[type="file"]{display:none} .camposMarca input[type="color"]{padding:2px;height:34px;cursor:pointer} @media (max-width:760px){ .logoEscritorio,.molduraLogo{flex-basis:auto;width:100%} } /* --------------------------------------- as duas perguntas do lead novo Duas ou três escolhas grandes, uma por linha, com a consequência escrita embaixo. Botão pequeno com rótulo de uma palavra ("Sim", "Não") obrigaria quem clica a lembrar o que cada resposta desencadeia — e o que elas desencadeiam é a diferença entre cadastrar uma empresa e não cadastrar. */ .escolhaLead{display:flex;flex-direction:column;gap:8px;margin:12px 0} .escolhaLead .itemBase{align-items:flex-start} .itemBase{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; background:var(--casco);border:1px solid var(--mare);border-radius:9px;padding:9px 11px; color:inherit;font:inherit;transition:border-color .15s} .itemBase:hover,.itemBase:focus-visible{border-color:var(--azul)} .itemBase.escolhido{border-color:var(--azul);background:color-mix(in srgb,var(--azul) 12%,transparent)} .itemBase .txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .itemBase b{font-size:13px;font-weight:600} .itemBase .sub{font-size:11px;color:var(--nevoa)} /* ==================================================== A ÁREA DO USUÁRIO Avatar, menu do topo, controles de preferência e as duas escalas que a pessoa escolhe (densidade e tamanho do texto). */ /* ---------------------------------------------------------- o avatar `.pessoa` separa o avatar de GENTE do avatar de cliente, que a lista de itens já desenhava com as iniciais da razão social. Sem essa marca, a cor escura do texto de um cairia sobre o fundo escuro do outro — e as iniciais do cliente sumiriam de todas as listas do sistema. */ .avatar{position:relative;background-repeat:no-repeat;background-size:cover;background-position:center} /* `background-color`, e NUNCA o atalho `background`. O atalho reescreve TODAS as propriedades da família — inclusive o `background-size:cover` e o `background-position:center` da linha de cima, que voltam para `auto` e `0% 0%`. Foi assim que a foto de 256px entrou num avatar de 96px pelo canto superior esquerdo, mostrando um pedaço do fundo em vez do rosto (05/09). O sintoma parecia recorte errado; o recorte estava certo desde sempre. */ .avatar.pessoa{background-color:var(--av);color:#08131c;font-weight:700} .avatar.comFoto{color:transparent} .avatar.grande{width:40px;height:40px;border-radius:11px;font-size:14px} .avatar.enorme{width:96px;height:96px;border-radius:22px;font-size:30px} /* a bolinha do status, no canto do avatar. O anel na cor do fundo é o que a separa da foto: sem ele, uma foto clara come a bolinha branca. */ .avatar[data-st]::after{content:"";position:absolute;right:-3px;bottom:-3px;width:10px;height:10px; border-radius:99px;border:2px solid var(--doca);background:var(--neutro)} .avatar.enorme[data-st]::after{width:18px;height:18px;border-width:3px;right:2px;bottom:2px} .avatar[data-st="ok"]::after{background:var(--turquesa)} .avatar[data-st="agora"]::after{background:var(--ambar)} .avatar[data-st="esp"]::after{background:var(--azul-forte)} .avatar[data-st="neutro"]::after{background:var(--neutro)} .avatar[data-st="atr"]::after{background:var(--vermelho)} .bola{width:9px;height:9px;border-radius:99px;background:var(--neutro);display:inline-block;flex-shrink:0} .bola.ok{background:var(--turquesa)} .bola.agora{background:var(--ambar)} .bola.esp{background:var(--azul-forte)} .bola.neutro{background:var(--neutro)} .bola.atr{background:var(--vermelho)} .etq.agora{color:var(--ambar);border-color:rgba(242,179,61,.4)} .etq.neutro{color:var(--neutro);border-color:var(--mare-2)} .etq .bola{margin-right:5px;vertical-align:baseline} /* ------------------------------------------------- o menu do usuário */ .quem{position:relative} .euBotao{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:10px;border:1px solid transparent} .euBotao:hover,.euBotao[aria-expanded="true"]{border-color:var(--mare-2);background:var(--casco)} .euTexto{display:flex;flex-direction:column;line-height:1.2;text-align:left} .euTexto b{color:var(--cal);font-size:12.5px;font-weight:600} .euTexto span{color:var(--nevoa);font-size:11px} @media (max-width:640px){.euTexto{display:none}} .menuEu{position:absolute;right:0;top:calc(100% + 8px);width:264px;z-index:50; background:var(--doca);border:1px solid var(--mare-2);border-radius:14px;padding:8px; box-shadow:0 18px 44px rgba(0,0,0,.45)} .euCabeca{display:flex;gap:11px;align-items:center;padding:8px 8px 12px;border-bottom:1px solid var(--mare)} .euCabeca .txt{min-width:0} .euCabeca b{display:block;color:var(--cal);font-family:var(--display)} .euCabeca .sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .euBloco{padding:8px 0;border-bottom:1px solid var(--mare)} .euBloco:last-child{border-bottom:0;padding-bottom:2px} .euBloco>b{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--nevoa);font-family:var(--display);padding:2px 8px 6px} .euItem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 8px; border-radius:8px;font-size:13px;color:var(--nevoa)} .euItem:hover{background:var(--casco);color:var(--cal)} .euItem[aria-pressed="true"]{color:var(--cal);background:var(--mare)} .euItem.sub{font-size:11.5px} /* ------------------------------------------ os controles de preferência */ .prefLinha{display:flex;gap:18px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--mare);flex-wrap:wrap} .prefLinha:first-of-type{border-top:0} .prefTexto{flex:1;min-width:230px} .prefTexto b{display:block;color:var(--cal);margin-bottom:2px} .prefTexto .sub{display:block;max-width:60ch} .prefControle{flex-shrink:0;max-width:100%} .segmento{display:inline-flex;border:1px solid var(--mare-2);border-radius:10px;overflow:hidden;flex-wrap:wrap} .segmento button{padding:7px 12px;font-size:12.5px;color:var(--nevoa);border-right:1px solid var(--mare-2)} .segmento button:last-child{border-right:0} .segmento button:hover{color:var(--cal);background:var(--casco)} .segmento button[aria-pressed="true"]{background:var(--mare);color:var(--cal);font-weight:600} /* a chavinha de liga-desliga */ .chave{display:inline-flex;cursor:pointer} .chave input{position:absolute;opacity:0;width:0;height:0} .chave .trilho{width:42px;height:24px;border-radius:99px;background:var(--casco); border:1px solid var(--mare-2);position:relative;transition:background .15s} .chave .trilho::after{content:"";position:absolute;left:3px;top:2px;width:17px;height:17px;border-radius:99px; background:var(--nevoa);transition:transform .15s,background .15s} .chave input:checked+.trilho{background:var(--mare);border-color:var(--destaque)} .chave input:checked+.trilho::after{transform:translateX(18px);background:var(--destaque)} .chave input:focus-visible+.trilho{outline:2px solid var(--destaque);outline-offset:2px} .paleta{display:flex;gap:7px;flex-wrap:wrap;max-width:260px} /* 24 telas em duas colunas viram uma parede. Três cabem, e a lista deixa de ser mais alta do que a seção inteira em que ela mora. */ .prefControle .gradeDocs{grid-template-columns:repeat(3,minmax(150px,1fr));max-width:520px} @media (max-width:900px){.prefControle .gradeDocs{grid-template-columns:1fr 1fr}} .corBotao{width:26px;height:26px;border-radius:9px;background:var(--av);border:2px solid transparent} .corBotao[aria-pressed="true"]{border-color:var(--cal);box-shadow:0 0 0 2px var(--doca) inset} /* ------------------------------------------------- a ficha de "quem sou" */ .euFicha{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap} .euRetrato{display:flex;flex-direction:column;align-items:center;gap:9px;width:120px} .euCampos{flex:1;min-width:280px} .euResumo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px; padding-top:13px;border-top:1px solid var(--mare)} /* A caixa de recorte é MAIOR que o quadrado que ela entrega: a faixa em volta é o que sobra da foto, escurecido. É ela que faz o corte ser visível — sem ela, a pessoa só descobre o que ficou de fora depois de salvar. */ .recorteFoto{position:relative;max-width:100%;margin:0 auto;border-radius:14px; overflow:hidden;background:var(--casco);border:1px solid var(--mare-2);aspect-ratio:1} .recorteFoto canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none} .recorteFoto canvas:active{cursor:grabbing} .recorteFoto canvas:focus-visible{outline:2px solid var(--destaque);outline-offset:-4px} .recorteFoto .semFoto{position:absolute;inset:0;display:grid;place-items:center;color:var(--nevoa);font-size:12.5px} /* A prévia nos DOIS tamanhos em que o avatar aparece de verdade. Prévia fora do tamanho do uso não prova nada: rosto que se lê a 96px some a 28px. */ .previaFoto{display:flex;align-items:center;gap:12px;margin-top:12px} .previaFoto .pv{border-radius:22px;flex-shrink:0;background:var(--casco)} .previaFoto .pv.grande{width:64px;height:64px} .previaFoto .pv.peq{width:28px;height:28px;border-radius:8px} .previaFoto .sub{line-height:1.3} .dialogo.estreito{max-width:400px} /* ==================================================== DENSIDADE E TEXTO Duas perguntas diferentes: densidade mexe no espaço em volta, tamanho do texto mexe na letra. Quem tem tela pequena quer a primeira; quem tem dificuldade de leitura quer a segunda, e elas se combinam. */ body[data-densidade="compacto"] .painel{padding:11px 12px;margin-bottom:10px} body[data-densidade="compacto"] table td, body[data-densidade="compacto"] table th{padding-top:5px;padding-bottom:5px} body[data-densidade="compacto"] .item{padding:6px 0} body[data-densidade="compacto"] .doca button{padding:5px 10px} body[data-densidade="compacto"] .cabecalho{margin-bottom:11px} body[data-densidade="compacto"] .prefLinha{padding:9px 0} /* O tamanho do texto muda a base E as poucas medidas que o sistema crava em px, porque o CSS daqui é escrito em pixel. Escala só a leitura: prazo, etiqueta e número continuam proporcionais ao resto. */ body[data-texto="menor"]{font-size:13px} body[data-texto="menor"] table{font-size:12.5px} body[data-texto="menor"] .sub{font-size:11px} body[data-texto="maior"]{font-size:15.5px} body[data-texto="maior"] table{font-size:15px} body[data-texto="maior"] .sub{font-size:13px} body[data-texto="maior"] h1{font-size:21px} body[data-texto="maior"] h3{font-size:16.5px} body[data-texto="maior"] .etq{font-size:12px} body[data-texto="maior"] .doca button{font-size:15px} body[data-texto="grande"]{font-size:17px} body[data-texto="grande"] table{font-size:16.5px} body[data-texto="grande"] .sub{font-size:14px} body[data-texto="grande"] h1{font-size:23px} body[data-texto="grande"] h2{font-size:14.5px} body[data-texto="grande"] h3{font-size:18px} body[data-texto="grande"] .etq{font-size:13px} body[data-texto="grande"] .doca button{font-size:16px} body[data-texto="grande"] .cabecalho p{font-size:15px} /* ---------------------------------------------- coleta do Drive O motivo é a parte mais importante da linha da fila: é ele que diz por que o robô não deu baixa sozinho, e é lendo ele que a pessoa decide em um segundo. Por isso tem bloco próprio, e não vira mais uma linha de "sub". */ .coletaItem { align-items: flex-start; } /* A linha usa `.item` da casa, que é quem desenha o traço entre um documento e o seguinte. Sem ele os três da fila viram um bloco só de texto — foi o que a primeira olhada em navegador de verdade mostrou. */ .coletaItem .nomeColeta { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .botoesColeta { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: 0 0 auto; } .motivoColeta { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--destaque, var(--turquesa)); background: var(--fundo2, rgba(127, 127, 127, .08)); border-radius: 0 6px 6px 0; font-size: .92em; } .trechoColeta { max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: .8em; line-height: 1.35; margin: 6px 0 0; padding: 8px; background: var(--fundo2, rgba(127, 127, 127, .08)); border-radius: 6px; } .copiavel { display: inline-block; margin-top: 4px; padding: 3px 7px; border-radius: 5px; background: var(--fundo2, rgba(127, 127, 127, .12)); user-select: all; /* `break-all` partia o endereço no meio de uma palavra ("…gservi / ceaccount") e ninguém copia um e-mail assim com o olho. Quebra só onde há sinal. */ overflow-wrap: anywhere; font-size: .92em; } /* ------------------------------------------------------ a barra de páginas Ela só é desenhada quando existe mais de uma página (`barraPaginas` em web/app.js): barra permanente que nunca faz nada vira paisagem, e no dia em que ela importa ninguém a lê. */ .barraPaginas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px; padding-top:10px;border-top:1px solid var(--mare)} .barraPaginas .paginas{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .barraPaginas .paginas button{min-width:30px;height:28px;padding:0 8px;border-radius:8px; border:1px solid var(--mare);color:var(--nevoa);font-size:12.5px;font-variant-numeric:tabular-nums} .barraPaginas .paginas button:hover:not(:disabled){border-color:var(--azul);color:var(--cal)} /* A página atual é a única que não é botão de ir a lugar nenhum. Ela fica marcada E desabilitada: marcada sem desabilitar convida ao clique que não faz nada, e desabilitada sem marcar esconde onde a pessoa está. */ .barraPaginas .paginas button[aria-current="true"]{border-color:var(--azul);color:var(--cal); box-shadow:inset 0 0 0 1px var(--azul);opacity:1} .barraPaginas .paginas button:disabled{opacity:.4;cursor:default} .barraPaginas .paginas button[aria-current="true"]:disabled{opacity:1} .barraPaginas .reticencia{color:var(--nevoa);padding:0 2px;font-size:12.5px} .barraPaginas > .sub{margin-right:auto;font-variant-numeric:tabular-nums} .barraPaginas .porPagina select{width:auto;min-width:0} /* O aviso de "voltei para a última página" ocupa a linha inteira, acima dos números: ele explica por que a página mudou sozinha, e explicação que divide a linha com os controles não é lida. */ .barraPaginas .avisoPagina{flex-basis:100%;margin:0;color:var(--ambar)} @media (max-width:760px){ .barraPaginas > .sub{margin-right:0;flex-basis:100%;order:3} .barraPaginas .porPagina{order:2} } /* ------------------------------------- a caixa de busca como CAMPO de formulário Até aqui ela só servia de filtro de tela, e por isso o estilo dela só previa a barra de filtros. Como campo de janela ela divide a linha com `` e `