/* =========================================================================== propostas.css — TODA a aparência do Propostas mora aqui. --------------------------------------------------------------------------- Antes de 02/set/2026 a aparência do app estava em três lugares: 154 linhas dentro do index.html, 190 injetadas por 11 arquivos js (cada um com o seu pedaço) e 54 atributos style= soltos no meio do código. Qualquer folha de estilo nova brigava com o que os módulos injetavam. A regra daqui em diante: cor, tamanho e espaçamento se escrevem NESTE arquivo. Arquivo de comportamento cuida de comportamento. A base é a biblioteca comum do hub (/hub/v1/hub-ui.css), que já traz a paleta B do brandbook, Sora/Inter, a casca de cima, botões, campos, abas, avisos, selos e modais. Aqui fica só o que é do Propostas — e o que for genérico o bastante para servir ao Pipeline vai para lá, não para cá. =========================================================================== */ /* ===================================================================== 1. OS ESTADOS DA TELA O app é uma página só que troca de cara. `view-abrindo` é o estado neutro do carregamento: nunca mostra o login antes de conferir a sessão (ver o BOOT no index.html). ===================================================================== */ #abrindo,#loginScreen,#listScreen,#consultaScreen{ display:none; } #editorWrap{ display:none; } body.view-abrindo #abrindo{ display:flex; } body.view-login #loginScreen{ display:block; } body.view-list #listScreen{ display:block; } body.view-consulta #consultaScreen{ display:block; } body.view-editor #editorWrap{ display:block; } body:not(.view-editor) .bar{ display:none; } #editorWrap > header{ display:none; } #abrindo{ align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:24px; } #abrindo .aviso-abrindo{ color:var(--texto-2); font-size:13px; } /* ===================================================================== 2. ENTRAR Igual à do hub e à do Pipeline, de propósito: é a mesma casa, e a tela de entrada é onde isso se percebe primeiro. ===================================================================== */ /* a margem da logo vem da biblioteca (.marca-entrar) -- a copia local daqui zerava o respiro de baixo e o cartao ficava 6px diferente dos outros dois */ /* .nome-sistema mora na biblioteca desde 05/set/2026 -- a copia local daqui dizia a mesma coisa e podia divergir na proxima mudanca. */ /* O ERRO DO LOGIN SO OCUPA ESPACO QUANDO EXISTE. O `min-height:18px` reservava a linha mesmo vazia, e com as margens o cartao do Propostas ficava 16px mais alto que o do Pipeline e o do Contratos -- diferenca que nao se explica olhando, so medindo a estrutura. */ #loginErr{ margin:0 0 12px; } #loginErr:empty{ display:none; margin:0; } /* ===================================================================== 3. LISTA DE PROPOSTAS — a tela principal ===================================================================== */ /* As abas usam a barra da biblioteca. A classe .tabs continua no container e .on continua marcando a aba atual: três módulos (listagem, clonar, simulador) leem exatamente isso para saber onde a pessoa está. Trocar por outro nome apagaria o menu ⋮ da lista. */ .tabs{ padding-left:20px; padding-right:20px; } .tabs > button{ appearance:none; background:none; border:0; border-bottom:2px solid transparent; padding:12px 14px; font:600 14px Inter,sans-serif; color:var(--texto-2); cursor:pointer; white-space:nowrap; } .tabs > button:hover{ color:var(--texto); } .tabs > button.on{ color:var(--roxo); border-bottom-color:var(--roxo); } .badge{ margin-left:6px; background:var(--destaque); color:#fff; border-radius:20px; padding:1px 7px; font-size:11px; font-weight:700; } .tabs .aba.on .badge{ background:var(--roxo); } #listWrap{ max-width:1180px; margin:0 auto; padding:22px 20px 90px; } /* A contagem ao lado do título: "148 propostas · 34 aprovadas". */ .barra-pagina .sub b{ color:var(--texto); font-weight:600; } .f-conta{ color:var(--texto-3); font-size:13px; white-space:nowrap; } /* ---- a linha da proposta ------------------------------------------------- Em tela grande é linha de tabela; no celular é cartão. É o MESMO html nos dois: .prop > .pn + .pc + .pm, com .pill dentro de .pm. Essa forma é contrato — o menu ⋮ (listagem.js), o escopo (escopo.js) e a marca da ligação com o Pipeline (virar-processo.js) procuram por ela pelo nome. */ #listRows{ display:block; } .prop{ position:relative; background:var(--papel); border:1px solid var(--borda); border-radius:11px; margin-bottom:7px; padding:13px 58px 13px 15px; cursor:pointer; transition:border-color .12s, background .12s; } .prop:hover{ border-color:var(--roxo-claro); } .prop.sel{ border-color:var(--roxo); background:var(--roxo-tenue); box-shadow:inset 3px 0 0 var(--roxo); } .prop .pn{ color:var(--roxo); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; } .prop .pc{ font-size:15px; font-weight:600; margin:2px 0; color:var(--texto); } .prop .pm{ font-size:12.5px; color:var(--texto-2); display:flex; gap:9px; flex-wrap:wrap; align-items:center; } .pesc{ color:var(--texto-3); font-weight:500; } /* as etiquetas de situação */ .pill{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11.5px; font-weight:600; text-transform:capitalize; white-space:nowrap; } .st-rascunho { background:var(--inerte-bg); color:var(--texto-2); } .st-enviada { background:var(--espera-bg); color:var(--espera); } .st-fechada { background:var(--ok-bg); color:var(--ok); } .st-cancelada{ background:var(--atraso-bg); color:var(--atraso); } /* Em tela grande as três partes viram colunas, e o cabeçalho da tabela fica em cima com os mesmos trilhos. */ @media (min-width:1101px){ .prop, .cab-tabela{ display:grid; grid-template-columns:132px minmax(0,1.3fr) minmax(0,1.3fr); gap:14px; align-items:center; } /* ESTA LINHA É O QUE FAZ O FILTRO FUNCIONAR NA TELA GRANDE. `[hidden]{display:none}` é regra do NAVEGADOR, e qualquer regra do AUTOR a vence — inclusive a de cima. O filtro da lista esconde linha com `el.hidden = true` (index.html, aplicarFiltros); daqui para cima de 1101px isso deixava de ter efeito: o contador dizia "0 de 155" e as 155 linhas continuavam na tela. Estava assim desde o Bloco 1 (c55c71a), que trouxe a grade e o filtro no mesmo commit. Ninguém viu porque o celular funcionava — lá não há grade — e porque os testes conferiam a PROPRIEDADE `hidden`, que estava certa, em vez da tinta. O Sidney achou digitando "155" e não vendo nada mudar. Vale para TODOS os filtros da lista, não só a busca: situação, vendedor e modelo escondem pelo mesmo caminho. */ .prop[hidden], .cab-tabela[hidden]{ display:none; } /* Na aba "Minhas" o vendedor e sempre a mesma pessoa: a coluna nao informa nada e o espaco vai para o nome do cliente. Na aba "Todas" ela volta, e a linha se reorganiza para o nome caber inteiro. */ #areaLista[data-aba="minhas"] .p-dono{ display:none; } #areaLista[data-aba="todas"] .prop, #areaLista[data-aba="todas"] .cab-tabela{ grid-template-columns:132px minmax(0,1fr) minmax(0,1.75fr); } /* Linha que carrega o botao "criar processo" tem um campo a mais e o nome do vendedor sobrava em duas letras. Ali o botao vale mais: e uma pendencia para resolver, e o vendedor esta a um clique no painel do lado. Navegador antigo que nao entenda :has() apenas mantem o nome cortado -- nada quebra. */ .prop:has(.vp-falta) .p-dono{ display:none; } .prop{ padding:10px 52px 10px 15px; } .prop .pn{ white-space:nowrap; } .prop .pc{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* A terceira coluna e uma linha so: situacao, modelo, vendedor e data. A ETIQUETA DE SITUACAO E A DATA NUNCA ENCOLHEM: sao o que a pessoa procura correndo o olho, e "Ra..." no lugar de "Rascunho" nao informa nada. Quem cede espaco sao o modelo e o nome do vendedor, que a pessoa le inteiros no painel do lado. */ .prop .pm{ justify-content:flex-end; flex-wrap:nowrap; gap:11px; min-width:0; } .prop .pm > span{ white-space:nowrap; } .prop .pm > .pill, .prop .pm > .vp-selo, .prop .pm > .vp-falta, .prop .pm > .p-data{ flex:none; } .prop .pm > .p-data{ font-variant-numeric:tabular-nums; } .prop .pm > .p-dono{ overflow:hidden; text-overflow:ellipsis; } /* O modelo (Locação + Venda, Só venda...) sai da linha em tela grande. Cabiam quatro campos no espaço de tres, e o resultado era duas colunas cortadas no meio -- "Loca..." e "Patricia P...". Duas reticencias por linha, 148 vezes, leem como tela quebrada. O modelo continua inteiro no painel do lado e no cartao do celular, que e onde ele e consultado. */ .prop .pm > .p-modo{ display:none; } .cab-tabela{ padding-right:52px; } .cab-tabela span:last-child{ text-align:right; } } @media (max-width:1100px){ /* alvo de toque: a linha inteira, com folga */ .prop{ min-height:66px; padding:14px 60px 14px 15px; } } /* ---- o painel do lado (só em tela grande) -------------------------------- */ #painelProp .painel-linha{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--borda); font-size:13.5px; } #painelProp .painel-linha:last-of-type{ border-bottom:0; } #painelProp .painel-linha span{ color:var(--texto-3); } #painelProp .painel-linha b{ font-weight:600; text-align:right; } #painelProp .painel-num{ color:var(--roxo); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; } #painelProp h2{ font-size:17px; margin:2px 0 3px; line-height:1.3; } /* O painel, o cabeçalho de colunas e a barra de filtros só existem nas abas que listam PROPOSTAS. Em autorizações, usuários e CNPJ/CPF eles não querem dizer nada. ESCRITO AO CONTRÁRIO DE PROPÓSITO. Antes esta regra listava as abas que deviam ESCONDER, e por isso ela nasceu certa e envelheceu errada: quando a aba de CNPJ/CPF chegou, ninguém a acrescentou aqui e ela herdou a barra de filtros sem que nada acusasse. O estrago não foi estético -- o `oninput` da busca continua ligado, e digitar uma letra reescrevia o subtítulo com o total de LINHAS, que naquela aba está vazio: a tela passava a dizer "Nenhuma proposta ainda" com 154 propostas no banco. Frase falsa, e assustadora. Listando quem MOSTRA, a aba nova nasce protegida e o esquecimento passa a custar uma barra a menos, nunca uma mentira a mais. O PREÇO DE ESCREVER AO CONTRÁRIO: o `:not()` também casa quando o atributo ESTÁ AUSENTE -- ausência e "outra aba" viram a mesma coisa. Hoje isso não morde porque o atributo vem escrito no HTML (`
`), não só pelo setTab. Se um dia alguém tirar o atributo de lá, a barra de filtros some para sempre e sem erro nenhum. Ele é parte da regra, não enfeite. */ #areaLista:not([data-aba="minhas"]):not([data-aba="todas"]) #painelProp, #areaLista:not([data-aba="minhas"]):not([data-aba="todas"]) #cabTabela, #areaLista:not([data-aba="minhas"]):not([data-aba="todas"]) #filtros{ display:none; } #areaLista:not([data-aba="minhas"]):not([data-aba="todas"]) .dupla{ grid-template-columns:minmax(0,1fr); } .empty{ text-align:center; color:var(--texto-2); padding:44px 14px; font-size:14px; } /* ===================================================================== 4. AUTORIZAÇÕES — o dono aprova ou nega quem pediu para editar ===================================================================== */ .solrow{ border:1px solid var(--borda); border-radius:12px; padding:15px; margin-bottom:9px; background:var(--papel); } .solrow .pn{ color:var(--roxo); font-weight:600; font-size:14.5px; } .solrow .pm{ font-size:13px; color:var(--texto-2); } .solrow .sb{ display:flex; gap:9px; margin-top:12px; } .solrow .sb button{ flex:1; min-height:40px; border-radius:9px; border:1px solid transparent; font:600 14px Inter,sans-serif; cursor:pointer; } .apv{ background:var(--ok); color:#fff; } .neg{ background:var(--atraso-bg); color:var(--atraso); border-color:transparent; } /* ===================================================================== 5. USUÁRIOS (admin) — quem vê custo, quem cria, quem vê todas ===================================================================== */ .urow{ background:var(--papel); border:1px solid var(--borda); border-radius:12px; padding:15px; margin-bottom:9px; } .urow .un{ font-weight:600; font-size:15.5px; color:var(--texto); } .urow .admtag{ background:var(--roxo-tenue); color:var(--roxo); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; vertical-align:middle; margin-left:4px; } .urow .ue{ font-size:12.5px; color:var(--texto-3); margin:2px 0 11px; } .urow .usw{ display:flex; gap:8px; flex-wrap:wrap; } .urow .sw{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--texto); background:var(--fundo); border:1px solid var(--borda); border-radius:9px; padding:8px 12px; font-weight:500; cursor:pointer; } .urow .sw input{ width:18px; height:18px; flex:none; accent-color:var(--roxo); } .urow .usave{ margin-top:13px; appearance:none; border:none; border-radius:9px; cursor:pointer; background:var(--roxo); color:#fff; font:600 14px Inter,sans-serif; padding:9px 18px; } .urow .usave:hover{ background:var(--roxo-escuro); } .urow .usave:disabled{ opacity:.5; cursor:not-allowed; } /* Em tela grande a lista de gente vira duas colunas: sao fichas curtas, e uma ficha esticada em 1180px fica com o campo de telefone do tamanho de um paragrafo. */ @media (min-width:1101px){ #areaLista[data-aba="usuarios"] #listRows{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; } #areaLista[data-aba="usuarios"] #listRows .empty{ grid-column:1 / -1; } .urow{ margin-bottom:0; } } .urow .uhint{ margin-top:9px; font-size:12.5px; color:var(--texto-3); } /* vindo de js/perfis.js (nome completo, telefone e cargo de cada pessoa) */ .uCad{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0 4px; } .uCad .full{ grid-column:1 / -1; } .uCad label{ display:block; font-size:11.5px; color:var(--texto-3); font-weight:600; margin-bottom:3px; } .uCad input{ width:100%; padding:9px 11px; border:1px solid var(--borda); border-radius:8px; font-size:14px; background:var(--papel); } .uCad input.falta{ border-color:var(--espera); background:var(--espera-bg); } .uFalta{ display:inline-block; margin-left:8px; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; color:var(--espera); background:var(--espera-bg); vertical-align:middle; } .uCadHint{ font-size:12px; color:var(--texto-2); margin-top:3px; } @media (max-width:560px){ .uCad{ grid-template-columns:1fr; } } /* ===================================================================== 6. CONSULTAR PREÇOS — só leitura, não cria proposta ===================================================================== */ #consultaWrap{ max-width:1180px; margin:0 auto; padding:22px 20px 80px; } #cresultados{ display:grid; gap:9px; } @media (min-width:1101px){ #cresultados{ grid-template-columns:1fr 1fr; align-items:start; } } .cprod{ background:var(--papel); border:1px solid var(--borda); border-radius:12px; padding:14px 16px; } .cprod .cd{ font-size:15px; font-weight:600; color:var(--texto); line-height:1.35; } .cprod .cc{ font-size:12px; color:var(--texto-3); margin-top:2px; font-variant-numeric:tabular-nums; } .cprod .ctiers{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .cprod .tier{ padding:4px 12px; border-radius:20px; font-size:13px; font-weight:600; } .cprod .tcusto{ background:var(--inerte-bg); color:var(--texto-2); } .cprod .tvenda{ background:var(--roxo-tenue); color:var(--roxo); } .cprod .cloc{ margin-top:11px; border-top:1px dashed var(--borda); padding-top:9px; } .cprod .cloc .ct{ font-size:11px; color:var(--texto-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; } .cprod .cloc .selo{ background:var(--espera-bg); color:var(--espera); border-radius:20px; padding:2px 8px; font-size:10.5px; font-weight:600; margin-left:8px; } .cprod .ltab{ width:100%; border-collapse:collapse; font-size:12.5px; } .cprod .ltab th{ text-align:left; color:var(--texto-3); font-weight:600; font-size:11px; padding:4px 6px; border-bottom:1px solid var(--borda); } .cprod .ltab th:not(:first-child){ text-align:right; } .cprod .ltab td{ padding:5px 6px; border-bottom:1px solid var(--fundo); color:var(--texto-2); font-variant-numeric:tabular-nums; } .cprod .ltab td:not(:first-child){ text-align:right; } .cprod .ltab td:last-child{ color:var(--roxo); font-weight:600; } .cprod .soven{ font-size:12.5px; color:var(--texto-3); margin-top:9px; } /* ===================================================================== 7. O EDITOR — ainda no formato antigo; o Bloco 2 refaz esta parte. Aqui ele só passa a usar as cores e as fontes da casa, para não parecer outro sistema enquanto espera a vez. ===================================================================== */ /* ESCOPADO AO EDITOR, e nao ao elemento nu (05/set/2026). `header{...}` alcancava tambem a BARRA DO HUB, que e um
-- o menu dela saia em Sora no Propostas e em Inter no Pipeline e no Contratos, numa barra que vem da mesma biblioteca e deveria ser identica nos tres. O fundo nao vazava porque `.hub-topo` tem mais peso; a fonte vazava porque ninguem mais a declarava. O alcance foi conferido antes de mexer: existe UM
proprio no app, o do editor antigo (index.html:163), e ele vive escondido por `#editorWrap > header{display:none}` logo acima. Ou seja, esta regra so tinha efeito visivel na barra que ela nao deveria alcancar. */ #editorWrap > header{ background:var(--roxo); color:#fff; padding:16px 18px; font-weight:600; font-size:18px; position:sticky; top:0; z-index:5; font-family:Sora,Inter,sans-serif; } #editorWrap > header small{ display:block; font-weight:400; font-size:12px; opacity:.85; margin-top:2px; } main{ max-width:680px; margin:0 auto; padding:18px 14px 120px; } /* O BOTAO NAO HERDA FONTE SOZINHO (05/set/2026). `