/* ═══════════════════════════════════════════════════════════════════════════════ PEÇA 30 — O CARTÃO. public/mobile/30-cartao.css Carregada DEPOIS de styles.css e contratos.css (index.html), mesma origem: em empate de especificidade vence esta folha. Lembre: @media NÃO soma especificidade — onde o original é mais específico, o seletor é IGUALADO aqui em vez de receber !important. O QUE ESTA PEÇA COBRE - O padrão único "tabela vira cartão", com opt-in pelo DOM: `:has(td[data-lab])`. Serve às TRÊS tabelas com rótulo, com o MESMO CSS: · Leads — 11 colunas / 1283px (app.js:1153-1163) · Vendas — 9 col. admin / 7 col. vendedor / 1407px (app.js:3859-3869) · Contratos — 6 colunas / 819px (contratos.js:115-120) - As três células de ação, pelas classes que já existem: `.cell-qa` (app.js:1163), `.nf-acoes` (app.js:3869), `.ct-acoes` (contratos.js:120), e os botões dentro delas. - As três linhas SEM rótulo que dividem as mesmas tabelas e NÃO podem virar cartão: estado vazio (``, app.js:1167), `.ct-hist` (contratos.js:121) e `.nf-form-row` (app.js:4101-4102, o formulário de emissão de nota). - O `.pager` de Leads, que vive DENTRO do `.tablewrap` (index.html:166-168). - As listas de `display:none` por `data-lab`, por superfície. - Uma exceção nominal, por VIEW, para as tabelas SEM `data-lab` que têm AÇÃO na última célula (furos [1] e [2]) — ver seção 12. O QUE ESTA PEÇA NÃO COBRE (e de quem é) - `header.top`, `nav.tabs`, `main`, `.khead`, `thead th{top:...}` no geral → peça 10. Aqui só existe `table:has(td[data-lab]) thead th{top:...}`, escopado (furo [6]). - `.drawer`, `.dhead`, `.dbody`, `.meta-grid`, `.contact-row`, `.tag`, `.ag-slot*`, `.nf-lead-form` → peça 20 (tudo isso só existe DENTRO da folha). - A forma BASE de `.chip-btn` / `.newlead-btn`, o piso de 16px dos campos, o toast, `.dinheiro-eco` → peça 00. Aqui esses botões são ajustados SÓ dentro das células de ação da tabela. - `.nf-form` (inclusive a que nasce dentro da `.nf-form-row`), `div.nf-acoes` do painel, `.nf-resumo`, `.parc-*`, `.ct-form`, `.ct-previa`, `#vNova` → peça 50. - As Conversas inteiras → peça 40. PROIBIÇÕES RESPEITADAS - Nenhum `td:nth-child`: Vendas tem 9 colunas para admin e 7 para vendedor (app.js:3865-3866) e o colspan do vazio confirma (`ehAdmin ? 9 : 7`, app.js:3922). Rótulo por posição estaria certo para o dono e ERRADO para o vendedor, em silêncio. - `!important` uma única vez, e só o autorizado: `white-space:normal !important` para vencer `style="white-space:nowrap"` INLINE (app.js:3869, 5094, 5202). - Nada fora de `@media (max-width:780px)`. ═══════════════════════════════════════════════════════════════════════════════ */ /* ⚠️ A CONDICAO DA CAMADA MOBILE, identica nos 6 arquivos: largura ate 780px OU (altura ate 520px E ponteiro grosso) O segundo ramo existe porque celular DEITADO nao cabe no primeiro: um iPhone 12/13/14 em paisagem mede 844px de largura (Pro Max, 926) e caia FORA da camada — recebia o layout de desktop numa tela de 375px de altura, com estouro horizontal de 45px (medido). `max-height:520px` pega paisagem de celular (375-428px de altura) e nao pega iPad deitado (768). `pointer:coarse` garante que nenhuma janela de desktop encolhida na vertical entre aqui. */ @media (max-width:780px), (max-height:520px) and (pointer:coarse){ /* ═══ 1 ─ DESMONTA A MOLDURA DE TABELA ══════════════════════════════════════ Opt-in pelo DOM: só casa onde as células têm `data-lab`. As 7 tabelas sem `data-lab` (canais app.js:516-529 · prévia de importação 2121 · campanhas 3273 · destinatários 3572 · ranking 5017 · parcelamentos 5088 · produtos 5198) não casam e seguem exatamente como hoje. Modo de falha se `:has()` não existir = status quo (`.tablewrap{overflow-x:auto}`, styles.css:311), não página quebrada. */ /* DESFAZ styles.css:311 (.tablewrap{overflow-x:auto}) e styles.css:156 (moldura): o cartão traz a própria borda, e o wrap não pode ser contêiner de rolagem. LOAD-BEARING: enquanto o wrap rola na horizontal, `overflow-y` computa para auto (CSS Overflow 3) e ele passa a ser o scrollport mais próximo — foi isso que prendeu o `` sticky no lugar errado. */ .tablewrap:has(td[data-lab]){ overflow:visible; background:transparent; border:0; box-shadow:none; border-radius:0; } table:has(td[data-lab]){display:block;width:100%} table:has(td[data-lab]) > thead{display:none} table:has(td[data-lab]) > tbody{display:block} table:has(td[data-lab]) > tbody > tr{display:block} /* Furo [6]: o offset do sticky só é verdade para tabela que rola contra o VIEWPORT. Aqui é inócuo (o thead está em display:none) e existe para manter o token coerente e para que a peça 10 NÃO precise desfazer `thead th{top:0}` no geral — nas 7 tabelas que continuam tabela, `top:0` é o comportamento correto. */ table:has(td[data-lab]) thead th{top:var(--m-header-h)} /* ═══ 2 ─ A LINHA COM RÓTULOS VIRA CARTÃO ═══════════════════════════════════ */ table:has(td[data-lab]) > tbody > tr:has(td[data-lab]){ display:grid; grid-template-columns:minmax(0,1fr) auto; /* col 1 = título · col 2 = selo */ align-items:start; gap:3px var(--m-gap); padding:var(--m-card-pad); margin:0 0 var(--m-card-gap); background:var(--surface); border:1px solid var(--border); border-radius:var(--m-r); box-shadow:var(--shadow); } table:has(td[data-lab]) > tbody > tr:last-child{margin-bottom:0} /* ═══ 3 ─ CÉLULA = LINHA "RÓTULO valor", LARGURA CHEIA ═════════════════════ DESFAZ styles.css:164 (tbody td{padding:11px 14px;border-bottom:1px solid}) e contratos.css:10 (.ct-lista td{vertical-align:top}). */ table:has(td[data-lab]) > tbody > tr > td{ display:block; grid-column:1 / -1; border:0; padding:0; min-width:0; font-size:var(--m-fs); line-height:1.4; vertical-align:baseline; overflow-wrap:anywhere; /* e-mail e URL não estouram o cartão */ } /* O micro-rótulo. `:not([data-lab=""])` é OBRIGATÓRIO: a célula de ações de Leads tem `data-lab=""` (app.js:1163) e attr() devolveria "" num inline-block vazio de 74px. As células de ação de Vendas e Contratos não têm o atributo, então nem casam (app.js:3869 `class="nf-acoes"`, contratos.js:120 `class="ct-acoes"`). */ table:has(td[data-lab]) td[data-lab]:not([data-lab=""])::before{ content:attr(data-lab); display:inline-block; /* ⚠️ `min-width` É PISO, NÃO TETO — e por isso um rótulo LONGO encostava no valor. Medido em 375px na aba Qbank: "CONSULTORIA" mede 84,35px e a pílula "A agendar" começava em x=84 — 0,35px de folga, que na tela lê como a borda da pílula cortando o "A" final. Nos rótulos curtos (COMPRA, QBANK, DATA, Nº) o piso de 74px já dava o respiro, e por isso o defeito só apareceu com a tabela nova. O par `border-box` + `padding-right` conserta SEM mexer nos cartões que já existem: dentro do piso de 74px a borda passa a incluir os 6px, então rótulo curto fica exatamente onde estava; passando de 74px, os 6px viram folga de verdade. (`::before` não herda o `border-box` global — aqui ele computava `content-box`.) */ box-sizing:border-box; min-width:var(--m-lab-w); padding-right:6px; font-size:var(--m-fs-lab); font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); vertical-align:2px; } /* ═══ 4 ─ TÍTULO DO CARTÃO: o sujeito da linha, sem rótulo, coluna 1 ═════════ Cada um destes `data-lab` aparece UMA vez por linha e em UMA só das três tabelas (conferido: "Lead" só em app.js:1153, "Cliente" só em app.js:3860, "Aluno" só em contratos.js:117) — a verificação que o furo [18] exige. */ table:has(td[data-lab]) td[data-lab="Lead"], table:has(td[data-lab]) td[data-lab="Cliente"], table:has(td[data-lab]) td[data-lab="Aluno"]{ grid-column:1; order:-2; font-size:var(--m-fs-tit); font-weight:700; } /* ⚠️ O `:not([data-lab=""])` aqui NÃO é decorativo: sem ele estes três seletores ficam em (0,2,4) contra os (0,3,4) da regra geral de rótulo logo acima, e media query não soma especificidade — a regra geral venceria e TODO cartão nasceria com um bloco de 74px em versalete escrito LEAD / CLIENTE / ALUNO antes do nome, espremendo o nome em ~245px de um cartão de ~319px. Com o `:not` os dois lados empatam em (0,3,4) e este, por vir depois no arquivo, ganha. */ table:has(td[data-lab]) td[data-lab="Lead"]:not([data-lab=""])::before, table:has(td[data-lab]) td[data-lab="Cliente"]:not([data-lab=""])::before, table:has(td[data-lab]) td[data-lab="Aluno"]:not([data-lab=""])::before{content:none;min-width:0} /* ═══ 5 ─ SELO DO CANTO DIREITO ═════════════════════════════════════════════ FURO [18] APLICADO: o selo é escopado por VIEW, e não pelo rótulo global. Em Contratos a MESMA linha tem `Nº` (contratos.js:115) e `Data` (116); mandar as duas para a coluna 2 com o mesmo `order` empurrava `Data` para a linha 2 da grade e deixava a metade esquerda vazia, com uma data nua e órfã. Aqui só o `Nº` é selo; a `Data` de Contratos cai no fluxo de largura cheia COM o rótulo dela visível (nenhuma exceção de `content:none` a alcança). */ #view-leads table:has(td[data-lab]) td[data-lab="Adicionado"], #view-nfse table:has(td[data-lab]) td[data-lab="Data"], #view-contratos table:has(td[data-lab]) td[data-lab="Nº"]{ grid-column:2; order:-1; justify-self:end; text-align:right; font-size:var(--m-fs-lab); font-weight:600; color:var(--muted); white-space:nowrap; } #view-leads table:has(td[data-lab]) td[data-lab="Adicionado"]::before, #view-nfse table:has(td[data-lab]) td[data-lab="Data"]::before{content:none;min-width:0} #view-contratos table:has(td[data-lab]) td[data-lab="Nº"]::before{ content:"nº "; min-width:0; font-size:inherit; } /* ═══ 6 ─ AÇÕES: faixa de botões de 44px no pé do cartão ════════════════════ */ /* A célula de ações deixa de ser coluna e passa a ser faixa. `white-space:normal` com !important é a ÚNICA ocorrência de !important desta peça, e é a autorizada: app.js:3869 escreve `style="white-space:nowrap"` INLINE no ``, e estilo inline vence qualquer seletor de folha externa sem !important. */ table:has(td[data-lab]) td.cell-qa, table:has(td[data-lab]) td.nf-acoes, table:has(td[data-lab]) td.ct-acoes, table:has(td[data-lab]) td.veq-acoes{ grid-column:1 / -1; order:99; display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; min-width:0; white-space:normal !important; /* vence o style INLINE de app.js:3869 */ } /* DESFAZ contratos.css:11 (.ct-acoes{min-width:230px}), que está FORA de media query. contratos.css:55 só a zera em 640px — na banda 641-780 ela ainda valia e o cartão de contrato nasceria com 230px de largura mínima numa tela de 375. */ table:has(td[data-lab]) td.ct-acoes{min-width:0} /* Os botões dentro das faixas. `a.chip-btn` está listado à parte porque styles.css:675 e contratos.css:12 declaram `display:inline-block` nele. */ table:has(td[data-lab]) td.nf-acoes > .chip-btn, table:has(td[data-lab]) td.nf-acoes > a.chip-btn, table:has(td[data-lab]) td.ct-acoes > .chip-btn, table:has(td[data-lab]) td.ct-acoes > a.chip-btn, table:has(td[data-lab]) td.veq-acoes > .chip-btn{ flex:1 1 auto; margin:0; /* zera o margin:0 2px 5px 0 de contratos.css:12 */ min-height:var(--m-tap); display:inline-flex; align-items:center; justify-content:center; padding:0 14px; font-size:13.5px; font-weight:600; border-radius:var(--m-r-sm); text-decoration:none; } /* Leads: os dois atalhos (WhatsApp e E-mail) eram 30x30 (styles.css:173). O `
` é o único filho do `` (app.js:1163-1166), e o handler de linha o exclui do clique que abre a ficha (app.js:1177). */ table:has(td[data-lab]) td.cell-qa .qa{gap:8px} table:has(td[data-lab]) td.cell-qa .qa a{width:var(--m-tap);height:var(--m-tap)} /* AÇÃO PRINCIPAL em cima, em faixa própria. `.ct-destaque` = "📄 Via assinada" (assinado) ou "✉️ Enviar para assinatura" (rascunho), contratos.js:98/105 — mutuamente exclusivas pelo status. `.nf-emitir` = "Emitir nota" / "Emitir" / "Tentar de novo", app.js:3824/3830/3836. */ /* ⚠️ o seletor com o TIPO (`a.ct-destaque`) é obrigatório: "📄 Via assinada" é um `` (contratos.js:100), e o bloco genérico acima declara `td.ct-acoes > a.chip-btn` em (0,3,4) — que venceria `> .ct-destaque` em (0,3,3) e devolveria o botão principal do contrato ASSINADO para a fileira dividida com "Reenviar vias" e "PDF enviado". */ table:has(td[data-lab]) td.ct-acoes > .ct-destaque, table:has(td[data-lab]) td.ct-acoes > a.ct-destaque, table:has(td[data-lab]) td.nf-acoes > .nf-emitir, table:has(td[data-lab]) td.nf-acoes > a.nf-emitir{ order:-1; flex:1 1 100%; font-weight:700; } /* FURO [17] APLICADO — a regra dura que faltava: toda ação destrutiva ou irreversível vai para faixa de largura cheia, com order >= 80 e margin-top >= 10px, e NENHUMA fica na mesma fileira flex de uma ação de leitura. Faixa 80 — as três que o contrato havia deixado de fora, isoladas pelo ATRIBUTO que cada uma já tem (não existe classe de risco nelas): · `[data-ct-cancelar]` (contratos.js:107) — "Cancelar" INVALIDA o link de assinatura JÁ enviado ao aluno, e a guarda é um confirm() de um toque (contratos.js:188). Ficava entre "Editar" e "Ficha", separada por 8px. · `[data-descartar]` (app.js:3837) — joga fora o rascunho da nota. · `[data-nao-matricular]` (app.js:3853) — barra a matrícula do aluno. Estas regras vêm DEPOIS do bloco genérico de botões acima de propósito: mesma especificidade (0,3,3), então quem vem depois vence e o `margin-top` sobrevive ao `margin:0`. */ table:has(td[data-lab]) td.ct-acoes > [data-ct-cancelar], table:has(td[data-lab]) td.nf-acoes > [data-descartar], table:has(td[data-lab]) td.nf-acoes > [data-cancelar-parc], /* "Parar de cobrar": encerra o parcelamento de um cliente real */ table:has(td[data-lab]) td.nf-acoes > [data-nao-matricular]{ order:80; flex:1 1 100%; margin-top:10px; color:var(--muted); } /* Faixa 90 — destruição de documento: cancelar nota fiscal emitida (app.js:3838, guarda "digite CANCELAR") e apagar contrato de vez (contratos.js:111, só admin). Cor já existia em styles.css:653; o que faltava era o dedo não alcançar por acidente. */ table:has(td[data-lab]) td.nf-acoes > .nf-cancelar, table:has(td[data-lab]) td.ct-acoes > .ct-apagar{ order:90; flex:1 1 100%; margin-top:4px; color:var(--rose); border-color:var(--rose); } /* ═══ 7 ─ LINHAS SEM RÓTULO: bloco, nunca cartão ════════════════════════════ `tr:not(:has(td[data-lab]))` casa exatamente nas três: estado vazio (app.js:1167 / 3922), `.ct-hist` (contratos.js:121) e `.nf-form-row` (app.js:4101). A guarda sai por construção — nenhuma delas tem um único td com `data-lab`. */ table:has(td[data-lab]) > tbody > tr:not(:has(td[data-lab])) > td{ display:block; grid-column:auto; border:0; padding:10px 2px; } /* Histórico do contrato: caixa própria, sem virar cartão. O `background` sai do td (contratos.css:25) e vai para o `tr`, senão o retângulo quadrado do td apareceria por cima do canto arredondado. */ table:has(td[data-lab]) > tbody > tr.ct-hist{ background:var(--surface-2); border-radius:var(--m-r); padding:8px 14px; margin:0 0 var(--m-card-gap); } table:has(td[data-lab]) > tbody > tr.ct-hist > td{ background:transparent; padding:0; } /* Formulário de EMISSÃO DE NOTA. É aqui que a nota sai, e ele nascia herdando os 1407px da tabela (``, app.js:4101-4102). Com a tabela em display:block ele passa a medir a largura do cartão. DEPENDÊNCIA DECLARADA: o `.nf-form` de dentro (flex-wrap, `.field{flex:1 1 150px}`, styles.css:643-644) é da peça 50 — sem ela empilhar os campos, este bloco fica usável mas com campos de 150px lado a lado. Registrado como pedido no relatório. */ table:has(td[data-lab]) > tbody > tr.nf-form-row{margin:0 0 var(--m-card-gap)} table:has(td[data-lab]) > tbody > tr.nf-form-row > td{ padding:12px 14px; border:1px solid var(--border); border-radius:var(--m-r); } /* Painel "Notas e detalhes" do Qbank (qbank.js, ``). ⚠️ GRUDADO NO CARTÃO DO ALUNO, não solto no meio: sem isto ele começava depois do vão de baixo do cartão da Maria e o cartão do João encostava no pé dele — no celular, com o cartão da Maria rolado para fora da tela, dava para registrar "com quem e quando" achando que era do João. A margem negativa come o vão do cartão de cima; a borda de destaque e o nome no topo do painel (`.qb-painel-quem`) dizem de quem é. */ table:has(td[data-lab]) > tbody > tr.qb-painel{margin:calc(-1 * var(--m-card-gap) + 2px) 0 var(--m-card-gap)} /* `:not(:has(td[data-lab]))` repetido de propósito: sem ele este seletor fica em (0,2,5) contra os (0,2,6) da regra geral de linha sem rótulo acima (`border:0`), e a borda nunca aparecia (medido). */ table:has(td[data-lab]) > tbody > tr.qb-painel:not(:has(td[data-lab])) > td{ padding:12px 12px 14px; border:1px solid var(--accent); border-top-width:3px; border-radius:0 0 var(--m-r) var(--m-r); } /* ═══ 8 ─ ESTADO VAZIO DE LEADS ═════════════════════════════════════════════ Caso de borda que o opt-in por célula cria: com ZERO leads não existe nenhum `td[data-lab]` na tabela, então NADA da seção 1 casa — o `` de 11 `` nowrap sobrevive, a tabela volta a medir ~1283px e o texto "Nenhum lead encontrado", centralizado num ``, nasce fora da tela. `class="empty"` é único no projeto: só existe em app.js:1167 (conferido com grep), então `.tablewrap:has(.empty)` não alcança nenhuma outra tabela. */ .tablewrap:has(.empty) > table > thead{display:none} .tablewrap:has(.empty) > table, .tablewrap:has(.empty) > table > tbody, .tablewrap:has(.empty) > table > tbody > tr, .tablewrap:has(.empty) > table > tbody > tr > td{display:block;width:auto} .tablewrap:has(.empty){overflow:visible;background:transparent;border:0;box-shadow:none} .tablewrap:has(.empty) .empty{padding:44px 12px} /* era 60px 20px, styles.css:179 */ /* ESTADO VAZIO DE VENDAS. Ele não tem `class="empty"` nem `data-lab`: é um `` (app.js:3922). Sem isto, com zero vendas no filtro, o `` de 9 `` nowrap sobrevive e a mensagem nasce fora da tela — e a válvula da seção 12 (`#view-nfse .tablewrap:not(:has(td[data-lab])) {overflow-x:auto}`, (1,2,1)) a manteria como tabela. O gancho é o `colspan`: as tabelas de parcelamentos, produtos e ranking não têm nenhum, e `.ct-hist` e `.nf-form-row` (que têm) vivem em tabelas COM data-lab, já excluídas pelo `:not`. Especificidade (1,3,2), acima da válvula. */ #view-nfse .tablewrap:not(:has(td[data-lab])):has(tbody > tr > td[colspan]) > table > thead{display:none} #view-nfse .tablewrap:not(:has(td[data-lab])):has(tbody > tr > td[colspan]) > table, #view-nfse .tablewrap:not(:has(td[data-lab])):has(tbody > tr > td[colspan]) > table > tbody, #view-nfse .tablewrap:not(:has(td[data-lab])):has(tbody > tr > td[colspan]) > table > tbody > tr, #view-nfse .tablewrap:not(:has(td[data-lab])):has(tbody > tr > td[colspan]) > table > tbody > tr > td{ display:block; width:auto; } #view-nfse .tablewrap:not(:has(td[data-lab])):has(tbody > tr > td[colspan]){ overflow:visible; background:transparent; border:0; box-shadow:none; } #view-nfse .tablewrap:not(:has(td[data-lab])):has(tbody > tr > td[colspan]) td[colspan]{ padding:36px 12px; text-align:center; } /* ═══ 9 ─ O PAGER, que vive DENTRO do .tablewrap em Leads (index.html:166-168) ══ Sem a moldura da tabela ele ficava solto, com um border-top órfão e alvos de 32px (styles.css:181-184). Vira caixa própria, centralizada. */ .tablewrap:has(td[data-lab]) .pager, .tablewrap:has(.empty) .pager{ border-top:0; border:1px solid var(--border); background:var(--surface); border-radius:var(--m-r); justify-content:center; gap:12px; padding:10px 12px; margin-top:var(--m-card-gap); flex-wrap:wrap; } .tablewrap:has(td[data-lab]) .pager button, .tablewrap:has(.empty) .pager button{width:var(--m-tap);height:var(--m-tap)} /* o `