/* ═══════════════════════════════════════════════════════════════════ PROPOZI — CAMADA MOBILE · LISTA DE PROPOSTAS ─────────────────────────────────────────────────────────────────── Só a lista do dashboard mora aqui. Se o problema for numa LINHA de proposta — altura, alinhamento, os botões que aparecem ao tocar — é neste arquivo. O resto do dashboard (indicadores, filtros, gráfico, "Precisa de ação") está em mobile-dashboard.css. Antes: cada proposta era um cartão de ~600px, com 4 botões grandes numa grade 2x2 que estourava a largura da tela. Cabiam 3 propostas por tela, de 137. Agora: linha de ~120px em três andares. Toca na linha, os botões aparecem. ~6 propostas por tela. O prefixo #section-dashboard em toda regra é proposital: o dashboard.js injeta o CSS dele no em tempo de execução, ou seja, depois deste arquivo. O ID garante prioridade sem !important. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ═══ 5. LISTA DE PROPOSTAS: LINHA COMPACTA ══════════════════════ Antes: cartão de ~600px, 4 botões gigantes sempre visíveis, 3 propostas por tela. Agora: quatro andares, ~100px: Nº 135 [PENDENTE] R$ 2.880,00 GUILHERME BATISTA ● Considerado Pacote de vídeos institucionais 18/08/2026 23:34 ⌄ O status subiu pra primeira linha, ao lado do número — antes ele tomava uma linha inteira só pra ele. */ #section-dashboard .dashboard-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "doc badges value" "nome nome value" "proj proj proj" "data data data" "acoes acoes acoes"; gap: 3px 8px; padding: 11px 14px 9px; min-height: 0; align-items: center; cursor: pointer; } /* Truque necessário: "display: contents" faz o .dashboard-maincol sumir como caixa e joga os filhos dele (nome, status, projeto) direto no grid da linha. Sem isso o status ficaria preso dentro do bloco do nome e não teria como subir pra primeira linha — e não dá pra mexer no HTML, que é gerado pelo dashboard.js. */ #section-dashboard .dashboard-maincol { display: contents; } #section-dashboard .dashboard-row > *:nth-child(1) { grid-area: doc; } #section-dashboard .dashboard-meta-badges { grid-area: badges; } #section-dashboard .dashboard-client-name { grid-area: nome; } #section-dashboard .dashboard-project-name { grid-area: proj; } #section-dashboard .dashboard-valuecol { grid-area: value; } #section-dashboard .dashboard-datetime { grid-area: data; } #section-dashboard .dashboard-actions { grid-area: acoes; } #section-dashboard .dashboard-doc-badge { min-width: 0; padding: 4px 8px; font-size: 10px; border-radius: 7px; } #section-dashboard .dashboard-client-name { font-size: 14px; line-height: 1.2; text-align: left; justify-self: start; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #section-dashboard .dashboard-project-name { font-size: 11px; line-height: 1.25; text-align: left; justify-self: start; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* As pastilhas de status dividem a primeira linha com o número. Se houver mais de uma (ex.: "Pendente" + "Parada há 2d") e não couberem, a segunda é cortada em vez de quebrar a linha. */ #section-dashboard .dashboard-meta-badges { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 5px; min-width: 0; overflow: hidden; } #section-dashboard .dashboard-meta-badges > * { flex: 0 0 auto; } #section-dashboard .dashboard-status-badge { font-size: 9px; padding: 2px 7px; } /* Coluna da direita: valor em cima, "Considerado/Ignorado" embaixo */ #section-dashboard .dashboard-valuecol { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 4px; text-align: right; } #section-dashboard .dashboard-value { font-size: 15px; white-space: nowrap; } #section-dashboard .dashboard-toggle-btn { font-size: 9px; padding: 2px 0; } /* Data e hora na mesma linha, não empilhadas */ #section-dashboard .dashboard-datetime { display: flex; flex-direction: row; align-items: baseline; justify-items: start; text-align: left; gap: 6px; font-size: 10px; /* espaço à direita pra setinha de abrir */ padding-right: 26px; } /* ═══ 6. SETINHA DE ABRIR ════════════════════════════════════════ Desenhada só com CSS (duas bordas giradas 45°), por dois motivos: o dashboard.js redesenha a lista toda hora e apagaria qualquer elemento injetado no HTML; e assim ela não depende do Font Awesome ter carregado. */ /* Fica ancorada na linha da data — e não no rodapé do cartão — pra não cair em cima dos botões quando a linha abre. */ #section-dashboard .dashboard-datetime { position: relative; } #section-dashboard .dashboard-datetime::after { content: ""; position: absolute; right: 4px; top: 2px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: 0.65; transform: rotate(45deg); transform-origin: center; transition: transform 0.18s ease; pointer-events: none; } #section-dashboard .dashboard-row.is-open .dashboard-datetime::after { transform: rotate(225deg); } #section-dashboard .dashboard-row.is-open { border-color: #7c4af8; } /* ═══ 7. AÇÕES: ESCONDIDAS ATÉ TOCAR NA LINHA ════════════════════ */ #section-dashboard .dashboard-actions { display: none; } #section-dashboard .dashboard-row.is-open .dashboard-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); } /* "Negócio fechado?" ocupa a linha inteira — é a decisão principal */ #section-dashboard .dashboard-row.is-open .dashboard-context-btn { flex: 1 0 100%; min-width: 0; height: 44px; font-size: 10px; } /* Recusar / WhatsApp / PDF / Editar dividem a linha de baixo */ #section-dashboard .dashboard-row.is-open .dashboard-icon-btn { flex: 1 1 0; min-width: 0; width: auto; height: 44px; font-size: 15px; } }