/* ═══════════════════════════════════════════════════════════════════ PROPOZI — CAMADA MOBILE · NOVA PROPOSTA ─────────────────────────────────────────────────────────────────── O BUG QUE ESTAVA AQUI (e que este arquivo conserta): O CSS mobile já mandava os blocos aparecerem na ordem certa — Cliente, Formulário do item, Lista de itens, Resumo — e já tinha uma barra "Salvar" fixa no rodapé. Só que essas regras apontavam para a classe .proposal-v1-side-card, e o bloco do total hoje se chama .proposal-summary-card no HTML. A classe foi trocada num refactor e as regras ficaram órfãs, sem efeito nenhum. Consequência prática: o bloco de TOTAL + SALVAR pulou pro topo da tela (antes até de você digitar o cliente) e a barra fixa nunca apareceu. Por isso era preciso rolar até o fim pra ver os itens e voltar até o topo pra salvar. O QUE MUDA AGORA: 1. Ordem correta: Cliente → Item → Lista → Resumo 2. Barra fixa no rodapé com o total ao vivo + botão Salvar (montada pelo js/mobile-proposta.js) 3. Catálogo compacto: descrição cortada em 2 linhas e preço visível — antes cada item do catálogo ocupava meia tela 4. Itens adicionados em linhas de ~90px em vez de ~500px O #section-proposta na frente de tudo é de propósito: o proposal-styles.js injeta o CSS dele no em tempo de execução, ou seja, depois deste arquivo. O ID garante prioridade. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ═══ 1. A ORDEM CERTA DOS BLOCOS ════════════════════════════════ É assim que a cabeça funciona ao montar um orçamento: pra quem é → o que entra → confere → fecha o valor. */ #section-proposta .proposal-v1-top-card { order: 1; } /* Cliente */ #section-proposta .proposal-v1-form-card { order: 2; } /* Item */ #section-proposta .proposal-v1-list-card { order: 3; } /* Lista */ #section-proposta .proposal-summary-card { order: 4; } /* Resumo */ /* Espaço embaixo pra barra fixa de total não tapar o fim da tela */ #section-proposta { padding-bottom: 92px; } #section-proposta .proposal-v1-wrap { gap: 12px; } #section-proposta .proposal-v1-card { padding: 14px; border-radius: 14px; } /* ═══ 2. O BOTÃO SALVAR DE DENTRO DO CARD ════════════════════════ Sai daqui porque agora ele mora na barra fixa do rodapé, sempre ao alcance. Continua existindo no HTML — a barra fixa apenas aciona ele — então nada de lógica muda. */ #section-proposta .proposal-v1-main-actions { display: none; } /* ═══ 3. RESUMO / DESCONTO GLOBAL ════════════════════════════════ O total gigante sai daqui (está na barra fixa). Sobra o que realmente é ajuste fino: desconto global e "exibir total no PDF". */ #section-proposta .proposal-summary-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } #section-proposta .proposal-v1-total-value { font-size: 24px; } #section-proposta .proposal-v1-discount-grid { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: center; } #section-proposta .proposal-v1-apply-discount-btn { min-height: 46px; padding: 0 14px; white-space: nowrap; } /* ═══ 4. CATÁLOGO DE ITENS ═══════════════════════════════════════ Antes: cada item mostrava a descrição inteira (às vezes 8 linhas) e o preço ficava escondido no fim do texto. Agora: título, duas linhas de descrição e o preço em destaque à direita. */ /* A lista do catálogo é um painel flutuante (position: absolute) com 360px fixos. Em vh ela se ajusta ao aparelho. Como o teclado não abre mais junto (ver js/mobile-proposta.js), dá pra usar mais tela. */ #section-proposta .proposal-suggestions { max-height: min(60vh, 460px); overscroll-behavior: contain; } /* ── BUG CORRIGIDO: categoria com 2 ou 3 itens não rolava ────────── Duas coisas se somavam: 1) TRÊS áreas de rolagem encaixadas uma na outra — o painel do catálogo (.proposal-suggestions), a lista de categorias (.proposal-category-list, 380px) e os itens de cada categoria (.proposal-category-items, 220px). O dedo ficava preso na de dentro, que muitas vezes não tinha o que rolar. 2) Pior: a lista de categorias é um flex em coluna com altura travada em 380px. Flex encolhe os filhos pra caber — então as categorias eram ESPREMIDAS, e como cada uma tem "overflow: hidden", o que sobrava era simplesmente cortado. Sem barra de rolagem, sem aviso: o 2º e o 3º item da categoria deixavam de existir na tela. Categoria com muitos itens parecia funcionar porque aí a lista interna tinha rolagem própria e dava pra chegar nos de baixo. A correção: uma área de rolagem só (o painel de fora), e as categorias proibidas de encolher (flex: 0 0 auto). Regra geral: nunca empilhe áreas roláveis no celular. */ #section-proposta .proposal-category-list { max-height: none; overflow: visible; } /* 0 0 auto = "não cresce, NÃO ENCOLHE, use a altura do conteúdo" */ #section-proposta .proposal-category-group { flex: 0 0 auto; } #section-proposta .proposal-category-items { max-height: none; overflow: visible; } #section-proposta .proposal-suggestion-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title price" "meta meta"; gap: 2px 10px; padding: 12px; align-items: baseline; min-height: 56px; } #section-proposta .proposal-suggestion-title { grid-area: title; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #section-proposta .proposal-suggestion-price { grid-area: price; white-space: nowrap; } #section-proposta .proposal-suggestion-meta { grid-area: meta; font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #section-proposta .proposal-category-toggle { min-height: 48px; } /* ═══ 4b. BOTÃO DE TECLADO NO CAMPO DE ITEM ══════════════════════ Tocar no campo abre só a lista do catálogo, sem teclado. Quem quiser digitar um item que não está no catálogo toca no botãozinho de teclado — que é um