/* Visual (cor, forma, tipografia) fica por conta do Pico.css classless carregado no index.html -- aqui só o que é FUNCIONAL pro app rodar, coisa que nenhum framework de estilo resolve sozinho. */ /* Mobile-first -- autônomo de campo usa isso no celular, não no desktop. Pico classless só centraliza header/main/footer diretos do body (não é o nosso caso, usamos
), então isso continua sendo nosso. */ body { max-width: 480px; margin: 0 auto; padding: 16px; } /* Achado no print do usuário: existia só ".view.hidden" (seletor composto -- exige as DUAS classes) -- funcionava pras
, mas #logo-preview usa só class="hidden" (sem "view"), então esconder virava NADA pra ela: ícone de imagem quebrada + alt="Logo atual" apareciam sempre, mesmo autônomo sem logo nenhuma. Regra genérica cobre os dois casos com uma linha só -- ".view" continua existindo só como marcador pro querySelectorAll(".view") de mostrarView(), não precisa de CSS. */ .hidden { display: none; } /* Reforça o tema claro fixado no (ver o comentário longo lá): color-scheme diz ao NAVEGADOR pra desenhar os controles nativos (calendário do type="date", spinner do type="number", barra de rolagem) na versão clara também -- sem isso, o campo de data continuaria com o miolo escuro dentro de uma tela branca. */ :root { color-scheme: light; } input, select, button { width: 100%; font-size: 16px; /* evita zoom automático no iOS ao focar input */ box-sizing: border-box; } /* Pedido do usuário: botões empilhados (Home, Agenda, Perfil, Novo orçamento etc.) ficavam colados um no outro -- width:100% sem margem nenhuma entre eles. `li button` (regra mais específica, abaixo) sobrepõe isso pros botões de ação dentro de item de lista, que já tinham o próprio espaçamento -- essa aqui é só pros botões de tela inteira. */ button { margin-bottom: 8px; } /* Botões DENTRO de item de lista (ex: "Lembrar"/"Concluído"/"Cancelar" na Agenda, "Marcar concluído" na Home) são ação secundária de uma linha, não CTA de tela inteira -- sem isso herdam width:100% e cada botão vira uma linha própria, deixando a lista gigante. */ li button { width: auto; display: inline-block; margin: 4px 4px 0 0; padding: 6px 10px; font-size: 14px; } /* Achado no print do usuário: texto + botões ficavam soltos dentro do mesmo
  • (elementos inline), então quebravam de linha de forma inconsistente dependendo do tamanho do nome do cliente -- às vezes o 1º botão colava do lado do texto, às vezes ia todo mundo pra linha de baixo. app.js agora bota os botões dentro deste wrapper (div é block-level por padrão) -- garante SEMPRE a mesma linha nova abaixo de data/nome, com o mesmo espaçamento, em todo item da lista. 2º achado no print do usuário: com 4 botões na Agenda (Lembrar/Gerar orçamento/Concluído/Cancelar), o texto "Gerar orçamento" sozinho não cabe mais nos 480px do container -- fazia o 4º botão (Cancelar) cair pra uma 2ª linha, um "quebrado" que o usuário não quer. Em vez de apertar fonte/padding até talvez ainda não caber, ou deixar quebrar, vira uma fileira que ROLA na horizontal (flex + overflow-x) -- todo botão sempre "um ao lado do outro" numa linha só, com scroll de dedo se a tela for estreita demais pra mostrar tudo de uma vez. Padrão comum em app mobile pra fileira de ações (ex: chips de ação do Gmail). */ .linha-acoes { margin-top: 4px; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; /* não corta a borda/sombra do botão ao rolar */ /* CAUSA REAL da "mancha" relatada pelo usuário (v27→v29): a v27 tentou o aviso de "tem mais botão pra rolar" com um ::after de degradê (position:absolute, right:0) indo de transparent até a cor de FUNDO DA TELA (branco/rosa). Isso pinta um retângulo dessa cor por cima de QUALQUER botão que caia sob os últimos 18px da fileira -- e os botões daqui são AZUIS (.linha-acoes button:not(.btn-perigo)..., mais abaixo), não brancos. Resultado: branco em cima de azul, a "sombra" no meio do botão "Calendário" -- 100% reproduzível parado, nunca foi um artefato de compositing/scroll (por isso remover -webkit-overflow-scrolling, tentativa da v28, não resolveu). Fix: mask-image em vez de retângulo colorido. Mask desbota o CONTEÚDO real (a cor do próprio botão) perto da borda, em vez de empastar uma cor de fundo que não combina com o que está por baixo -- não depende mais de casar cor de fundo por cartão, então o --cor-fundo-fade e o override pro compromisso vencido saem daqui. */ mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); } .linha-acoes button { flex: 0 0 auto; white-space: nowrap; margin: 0; /* espaçamento já vem do gap do flex, não duplica com li button */ } /* Preview da logo em "Meu perfil". Achado no print do usuário: sem width/height fixos, uma logo pequena aparecia minúscula (ilegível) e uma sem "hidden" funcionando (bug à parte, ver .hidden acima) mostrava ícone de imagem quebrada. Caixa fixa + object-fit:contain resolve os dois lados: logo grande é reduzida, logo pequena é ampliada, sempre sem distorcer proporção (contain nunca corta nem estica). Fundo cinza claro é só pra logo com PNG transparente não sumir contra o branco da página. */ #logo-preview { display: block; width: 140px; height: 90px; object-fit: contain; background: #f4f4f4; border-radius: 4px; } /* Tabela do Financeiro (coluna Serviço concatena itens, pode passar dos 480px do container) -- rola só ela na horizontal, sem forçar a página toda a rolar de lado num celular estreito. */ .tabela-scroll { overflow-x: auto; } /* Achado na revisão visual (print real do Financeiro em 430px): a tabela ficava mais larga que a tela e a coluna VALOR -- a que o autônomo mais olha -- era a última, então saía do enquadramento: ele via "R$ 1.00..." cortado na borda e precisava rolar de lado pra ler dinheiro. table-layout: fixed trava a tabela na largura da tela e distribui as colunas por porcentagem; quem cede espaço é Serviço (texto descritivo, quebra sem prejuízo), e o dinheiro fica inteiro, alinhado à direita como em qualquer extrato. */ .tabela-scroll table { table-layout: fixed; width: 100%; font-size: 0.85rem; /* cabe as 4 colunas em tela de 360-430px */ } /* Padding do Pico é generoso pra desktop; em 4 colunas no celular ele sozinho já consome ~25% da largura útil. */ .tabela-scroll th, .tabela-scroll td { padding-left: 4px; padding-right: 4px; overflow-wrap: anywhere; /* descrição concatenada pode ter palavra longa */ vertical-align: top; /* Cliente quebra em 2 linhas; alinhado em cima fica com "cara de extrato" ao lado da Data em vez de flutuar centralizado na linha. */ } /* Data e Valor não quebram (data partida em "10/01/202" + "6" e dinheiro partido em duas linhas eram o que mais poluía a leitura); Cliente e Serviço são texto e cedem espaço. Achado do usuário (print real): com só 4px de padding dos dois lados, "06/09/2026" e "Monica Sousa" ficavam praticamente colados -- sem separador nenhum entre as colunas 1 e 2, a tabela lia como um bloco só. Sobe o respiro só NESSA borda (a que faltava), sem mexer nas outras -- Serviço/Valor já tinham a borda direita da tela como limite natural. */ .tabela-scroll th:nth-child(1), .tabela-scroll td:nth-child(1) { width: 21%; white-space: nowrap; padding-right: 10px; } .tabela-scroll th:nth-child(2), .tabela-scroll td:nth-child(2) { width: 24%; padding-left: 10px; } .tabela-scroll th:nth-child(3), .tabela-scroll td:nth-child(3) { width: 27%; } .tabela-scroll th:nth-child(4), .tabela-scroll td:nth-child(4) { width: 28%; text-align: right; white-space: nowrap; } /* Pedido do usuário: "dias" visível do lado do número de validade, não só no rótulo de cima -- input encolhe (sobrepõe o width:100% genérico) e divide a linha com a palavra fixa ao lado. */ .campo-com-sufixo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .campo-com-sufixo input { width: auto; flex: 1; margin-bottom: 0; } .campo-com-sufixo .sufixo { white-space: nowrap; color: #555; } /* Bairros do perfil (pedido do usuário): input + botão "Adicionar" numa linha só, mesma ideia de layout do .campo-com-sufixo acima -- o botão não pode encolher (senão o texto "Adicionar" quebra linha). */ .campo-com-botao { display: flex; align-items: center; gap: 8px; } .campo-com-botao input { flex: 1; margin-bottom: 0; } .campo-com-botao button { flex-shrink: 0; width: auto; margin-bottom: 0; } /* Lista de "chips" (bairros adicionados) -- cada um removível com o ×. role=list/listitem não muda (já são ul/li); o × é role=button pro mesmo motivo dos alertas da Home (foco de teclado, Enter/Espaço). */ .lista-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 16px; } .lista-chips li { display: flex; align-items: center; gap: 6px; /* rgba fixo em vez de color-mix() -- color-mix() não roda em navegador Android mais antigo, e o público daqui é autônomo com celular variado, não dev com Chrome atualizado. */ background: rgba(1, 39, 98, 0.08); border: 1px solid rgba(1, 39, 98, 0.25); color: var(--marca-azul); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.9rem; } .lista-chips button { all: unset; cursor: pointer; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; color: var(--marca-azul); } .lista-chips button:hover, .lista-chips button:focus-visible { background: rgba(1, 39, 98, 0.15); outline: none; } /* Resultados da busca de cidade (autocomplete). Lista simples abaixo do campo -- de propósito NÃO é um overlay/dropdown flutuante (position: absolute) pra não abrir espaço pra bug de z-index/recorte em telas pequenas; empurra o conteúdo abaixo, que é aceitável aqui (a lista já limita a 8 resultados). */ .lista-sugestoes { list-style: none; padding: 0; margin: -8px 0 12px; border: 1px solid #ccc; border-radius: 6px; max-height: 220px; overflow-y: auto; } /* ACHADO NA REVISÃO (renderizado com o Pico real pra confirmar): o app.js põe role="button" em cada
  • de sugestão -- correto pra acessibilidade (o item é clicável) -- mas o Pico estiliza QUALQUER elemento com role="button" como botão azul preenchido dele. Resultado: a busca de cidade virava uma pilha de botões azuis gigantes com texto centralizado, em vez de uma lista de sugestões. É exatamente o mesmo bug que as caixas de aviso da Home já tinham tido; a correção não havia sido replicada aqui. Desfaz o botão e devolve a cara de lista. */ .lista-sugestoes li, .lista-sugestoes li[role="button"] { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; background: transparent; color: inherit; border-radius: 0; border-left: none; border-right: none; border-top: none; text-align: left; font-weight: normal; font-size: 1rem; line-height: 1.4; box-shadow: none; margin: 0; width: auto; display: block; } .lista-sugestoes li:hover, .lista-sugestoes li:focus-visible { background: rgba(1, 39, 98, 0.08); outline: none; } .lista-sugestoes li:last-child { border-bottom: none; } .lista-sugestoes li:hover, .lista-sugestoes li:focus-visible { background: rgba(1, 39, 98, 0.08); outline: none; } /* Gráfico de faturamento (Financeiro) -- SVG desenhado à mão (ver app.js), sem lib de gráfico nova. */ /* Fundo branco explícito (achado na revisão): as barras e os rótulos do gráfico são desenhados com cor FIXA da marca (azul-marinho #012762 e cinza). O Pico troca pro tema escuro sozinho quando o celular está no modo noturno -- e aí azul-marinho sobre fundo escuro simplesmente some. Mesmo tratamento que as caixas de aviso da Home já receberam pelo mesmo motivo: o bloco carrega o próprio fundo, então não depende do tema. */ .grafico-financeiro { margin: 8px 0 16px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 8px 4px; } .grafico-financeiro svg { width: 100%; height: auto; display: block; } .indicadores-financeiro { line-height: 1.8; } /* Pedido do usuário: título padronizado em TODO o app -- Opção B ("Bloco Sólido Anguloso") escolhida entre 4 mockups (brainstorm/mockup_titulos_v2.html): bloco azul sólido com barra amarela na lateral esquerda, ângulos retos (sem border-radius, ao contrário da Opção A anterior -- "anguloso" é o ponto central da B). 3 variantes, uma família só de cor/borda, porque nem todo título é do mesmo tipo: - .titulo-pagina:

    no topo de cada tela. - .titulo-secao-numerada: seção numerada (Perfil 1/2, Novo Compromisso 1/2, Novo Orçamento 1/2/3) -- número vira "bolha" amarela ao lado do texto (era número gigante translúcido de fundo na Opção A; não existe mais nesta opção). - .titulo-subsecao:

    "divisor de lista" dentro da tela (Home: Precisam de Você/Concluídos Recentes; Financeiro: Faturamento por Mês/Quem Mais Rendeu) -- fundo claro (não azul sólido) pra não pesar demais empilhado em cima de lista/gráfico/tabela. Espaçamento (pedido do usuário): 28px embaixo do título de página/seção numerada, 18px embaixo da subseção -- mesmo valor nas 3 telas que usam cada tipo, pra manter o respiro coerente em todo o app. */ .titulo-pagina { background: var(--marca-azul); color: #fff; border-left: 6px solid var(--marca-amarelo); padding: 12px 16px; margin: 0 0 28px; font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; } .titulo-secao-numerada { background: var(--marca-azul); border-left: 6px solid var(--marca-amarelo); padding: 10px 14px; margin: 22px 0 28px; } /* 1ª seção da tela não precisa do respiro de cima (já tem o

    ali). */ .titulo-secao-numerada:first-child, h1 + .titulo-secao-numerada, .titulo-pagina + .titulo-secao-numerada { margin-top: 0; } .tsn-cabecalho { display: flex; align-items: center; gap: 10px; } .tsn-numero { background: var(--marca-amarelo); color: var(--marca-azul-escuro); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; flex-shrink: 0; } .tsn-titulo { color: #fff; font-size: 0.98rem; font-weight: 700; margin: 0; } .tsn-sub { color: var(--marca-amarelo); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; /* Alinhado embaixo do TEXTO do título, não da bolha (22px + 10px de gap = 32px), pra ficar visualmente "dentro" do título, não solto. */ margin: 4px 0 0 32px; } .titulo-subsecao { display: block; background: #eef1f8; color: var(--marca-azul); padding: 6px 10px; margin: 22px 0 18px; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; } .titulo-subsecao:first-of-type { margin-top: 16px; } /* Pedido do usuário: faixa de avisos no topo da Home ("compromisso nas próximas 48h", "orçamento enviado sem resposta"). Cores de fundo fixas e texto escuro explícito de propósito: o Pico troca o tema automaticamente (claro/escuro) conforme o sistema, e sem o texto fixo o aviso ficaria ilegível no tema escuro (texto claro sobre fundo claro). Mesma escolha da caixa do PIX no PDF. */ /* Espaçamento igual ao dos botões da Home: o Pico separa cada botão por --pico-spacing, então o bloco de avisos usa a MESMA variável em vez de um valor chutado em px -- se o tema mudar a escala, os avisos acompanham sozinhos (achado no print do usuário: com 14px fixos o aviso ficava colado no "+ Novo orçamento"). */ #home-alertas { display: flex; flex-direction: column; /* entre os próprios avisos o espaço é menor de propósito -- eles são um grupo só; o respiro maior fica entre o grupo e os botões. */ gap: calc(var(--pico-spacing, 1rem) / 2); margin: 0 0 var(--pico-spacing, 1rem); } /* Seletor com o id (#home-alertas .alerta) de propósito, e não só `.alerta`: o Pico estiliza QUALQUER elemento com role="button" como botão azul dele, e o app.js precisa desse role pra faixa continuar acessível por teclado/leitor de tela. Empatando em especificidade o Pico vencia dependendo da ordem de carga (foi o que apareceu no print do usuário: aviso com cara de botão azul). Com o id na frente, a disputa acaba. Mesmo motivo do background-color explícito abaixo. */ #home-alertas .alerta { padding: 10px 12px; border-radius: 6px; border-left: 5px solid; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; font-size: 0.95rem; line-height: 1.35; text-align: left; color: #222; box-shadow: none; } /* Três níveis de urgência do compromisso (pedido do usuário: 12h / 24h / 48h). A cor sobe de intensidade conforme aperta o prazo; o app.js ainda põe um emoji junto, porque cor sozinha falha no sol e pra daltônico. */ #home-alertas .alerta-urgente { background-color: #fde2e0; border-left-color: #c0392b; } #home-alertas .alerta-atencao { background-color: #ffeccc; border-left-color: #e07b00; } #home-alertas .alerta-agenda { background-color: #e3f0fb; border-left-color: #1a6faa; } #home-alertas .alerta-orcamento { background-color: #fff7d6; border-left-color: #d2a800; } #home-alertas .alerta:hover, #home-alertas .alerta:focus { filter: brightness(0.96); outline: none; } /* Destaque temporário nos orçamentos parados, ao clicar no aviso -- evita ter que criar uma tela de lista filtrada só pra isso. */ li.destacado { background: #fff7d6; color: #222; border-radius: 6px; padding: 6px 8px; } /* Termo de consentimento do portal (LGPD art. 8º, §1º: quando o consentimento vem junto de outros assuntos, ele precisa estar em DESTAQUE). Por isso o termo é um bloco visível na própria tela, com moldura e fundo próprios -- e não um link "leia os termos", que é justamente o padrão que a lei não aceita. white-space: pre-line preserva as quebras de linha do texto original sem precisar de HTML dentro dele (ver TERMO_PORTAL em app.js). */ /* Definição ÚNICA do bloco do termo. Antes existia um segundo ".termo" mais abaixo no arquivo sobrescrevendo white-space e padding -- as declarações daqui eram código morto, e o comentário que justificava o `pre-line` descrevia um comportamento que já não existia (o termo deixou de ser texto pré-formatado quando virou HTML estruturado). Valores finais consolidados aqui. */ .termo { white-space: normal; background: #f7f7f7; color: #222; border: 1px solid #d8d8d8; border-radius: 6px; padding: 16px 18px; margin: var(--pico-spacing, 1rem) 0 calc(var(--pico-spacing, 1rem) / 2); font-size: 0.92rem; line-height: 1.5; } /* Sem max-height/scroll de propósito: com o termo cortado, a parte "IMPORTANTE SABER" (a que avisa que o telefone fica público) ficava escondida atrás de rolagem -- e o público-alvo não rola. Informação que sustenta o consentimento não pode depender do autônomo descobrir que há mais texto embaixo. O termo é curto; cabe inteiro. */ /* Caixa e texto na mesma linha, alinhados pelo topo -- em celular o rótulo ocupa 2-3 linhas e, sem isso, a caixa ficaria centralizada no meio do texto, longe do começo da frase. */ .linha-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; } .linha-toggle input { flex: 0 0 auto; margin: 0; } .aviso-sutil { color: #555; font-size: 0.88rem; margin: 4px 0 var(--pico-spacing, 1rem); min-height: 1.2em; } /* Linha de lista vazia ("Nenhum orçamento aguardando resposta") -- some o marcador de bullet, que num texto de estado fica parecendo item real. */ .linha-vazia { list-style: none; margin-left: -1.2rem; color: #555; font-style: italic; } /* ==================================================================== Sistema de botões -- hierarquia visual ==================================================================== Problema que isto resolve: todos os botões do app eram idênticos (o azul padrão do Pico), empilhados e do mesmo tamanho. Quando tudo tem o mesmo peso, nada tem destaque -- e a ação que gera dinheiro ("Novo Orçamento") competia em pé de igualdade com "Voltar". As cores saíram da própria logo do Combinado (amostradas do PNG), pra o app e o PDF falarem a mesma língua visual: azul-marinho #012762 -- contraste 14.3:1 com branco (WCAG AAA) turquesa #05bbbb -- 2.4:1 com branco: REPROVA pra texto branco, por isso só aparece como detalhe/foco amarelo #fec51d -- destaque pontual (caixa do PIX no PDF) ==================================================================== */ :root { --marca-azul: #012762; --marca-azul-escuro: #001b45; --marca-turquesa: #05bbbb; --marca-amarelo: #fec51d; --perigo: #b3261e; } /* PRIMÁRIO -- uma por tela, a ação que o autônomo veio fazer. Também se aplica a (achado no Portal: cadastro.html usa um link, não um