/* ═══════════════════════════════════════════════════════════════════════════ public/mobile/00-base.css — PEÇA 00, a BASE da camada mobile do CRM. Carregada DEPOIS de styles.css e contratos.css, ANTES de 10/20/30/40/50. O QUE ESTA PEÇA COBRE - os tokens `--m-*` e `--kb` em :root (consumidos pelas 5 peças seguintes); - `color-scheme` por tema (widget nativo deixa de abrir claro sobre app escuro); - a casca: `html{overflow-x:clip}`, `.app`/`.login-wrap`/`.boot` em dvh, `body{-webkit-tap-highlight-color:transparent}`; - o bloco `@media (hover:none)` que neutraliza os :hover que grudam no toque; - o PISO de 16px de fonte + 44px de alvo em TODO campo do app; - a promoção global de `input.f` (hoje input cru do navegador fora de `.filters`); - `.toast-wrap`/`.toast` movidos para o TOPO (o teclado come o rodapé); - a forma base de alvo de toque dos primitivos: `.chip-btn`, `.newlead-btn`, `.data-save`, `.lead-delete`, `.toggle`, `#canaisRecalc`, e o eco do dinheiro. O QUE ESTA PEÇA NÃO COBRE (e quem é o dono do seletor vizinho) - `header.top`, `.brand`, `.spacer`, `.search` + `.search input`, `.who`, `.icon-btn` (geometria), `.menu`, `.menu-wrap`, `nav.tabs` (geometria/posição), `.tab-badge`, `#tabsMais`, `main`, `thead th`, `.khead` ....... peça 10-casca - `.drawer` e as folhas: `.dhead`, `.dbody`, `.icon-close`, `.meta-grid`, `.contact-row`, `.cbtn`, `.brief-thread`, `.ag-slot*`, `.nf-lead-form`, `.tag`, `.pr-tab`, `.ob`, `.call-resp` ......................... peça 20-folha - `.tablewrap`, `table`, `tbody`, `tr`, `td`, `td[data-lab]`, `.cell-qa`, `.nf-acoes`, `.ct-acoes`, `.qa`, `.pager`, `.cell-name` ....... peça 30-cartao - tudo `.chat-*` (inclusive o PADDING do `.chat-composer textarea` e da busca de conversas — aqui só entra o font-size/altura) ..... peça 40-conversas - qualquer `#view-*`, `.qcard` (geometria), `.qc-wa`, `.qmore`, `.kanban`, `.kcard` (geometria), `.nf-form`, `.nf-comis`, `.ct-*` ....... peça 50-paineis REGRAS QUE ESTE ARQUIVO OBEDECE - Tudo dentro de `@media (max-width:780px)`, com as TRÊS exceções nominais que o CONTRATO.md autoriza SÓ para esta peça (seções A, B e C abaixo). - Zero `!important`. Onde a especificidade do original é maior, o seletor é IGUALADO (media query não soma especificidade). - `overflow-x:clip`, NUNCA `hidden`: `hidden` no root propaga pro viewport e troca o contêiner de rolagem, matando o `position:sticky` do `header.top` e do `thead`. `clip` não cria contêiner de rolagem. - Nenhum `maximum-scale`, nenhum `user-scalable=no` (nem existe CSS pra isso). ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SEÇÃO A — TOKENS (EXCEÇÃO 1 do contrato: FORA da @media) Só declaram variáveis; não pintam nada, não ocupam espaço, não têm como regredir o desktop. Precisam viver fora da media query porque as peças 10..50 as consomem dentro das DELAS e `var()` resolve no elemento, não na regra — se ficassem dentro de `@media`, acima de 781px cada `var(--m-*)` cairia no fallback e a camada ficaria errada em silêncio. Os nomes e os valores são cópia literal da lista TOKENS do CONTRATO.md. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* o breakpoint, só como documentação legível: media query não aceita var() */ --m-bp: 780px; /* altura real do cabeçalho no celular: padding 8+8 + .icon-btn 44 = 60px, que é IGUAL aos 60 que styles.css:160 e :189 já assumem (`thead th{top:60px}`, `.khead{...top:60px}`) — o sticky fica certo só desfazendo o `top:0` da 312. ⚠️ MAIS a faixa do topo, por causa do modo APP (manifest.json, display:standalone): instalado na tela inicial não existe barra do navegador, e sem reservar o inset o cabeçalho nasceria debaixo do relógio e do notch. Numa aba normal de navegador esse env vale 0, então a conta não muda nada lá. Quem consome: o sticky do thead e do .khead (peça 10), a altura das Conversas (peça 40), o teto da folha de mover (peça 50) e o offset do toast (mais abaixo). */ --m-header-h: calc(60px + env(safe-area-inset-top, 0px)); /* altura da barra inferior: padding 5+5 + botão min-height 46. Consumido pelo padding-bottom do `main` (peça 10) e pelo cálculo de altura das Conversas (peça 40). */ --m-nav-h: 56px; /* faixa do indicador de home. Só devolve valor real porque mobile.js acrescenta viewport-fit=cover à meta viewport; sem isso é 0. */ --m-safe-b: env(safe-area-inset-bottom, 0px); /* usado pelo toast, que passa a viver no topo (seção F) */ --m-safe-t: env(safe-area-inset-top, 0px); /* alvo mínimo de toque (iOS HIG 44 / Material 48dp). A EVIDENCIA §7 mediu 15 elementos abaixo de 40px só no Dashboard. */ --m-tap: 44px; /* alvo de ação com consequência: emitir nota, gerar contrato, dar baixa em parcela */ --m-tap-lg: 48px; /* raio do cartão e da caixa; igual ao --radius do app para o celular não parecer outro produto */ --m-r: 14px; /* raio de botão e de campo; igual ao --radius-sm */ --m-r-sm: 10px; /* respiro entre título e selo dentro do cartão */ --m-gap: 10px; /* padding do cartão de tabela */ --m-card-pad: 12px 14px; /* distância entre dois cartões */ --m-card-gap: 10px; /* valor de campo dentro do cartão */ --m-fs: 14px; /* título do cartão: nome do lead, do cliente, do aluno */ --m-fs-tit: 15px; /* micro-rótulo em versalete (o content:attr(data-lab)) e o selo da direita */ --m-fs-lab: 10.5px; /* largura reservada ao micro-rótulo, para os valores alinharem em coluna. Em 375px sobram ~240px de valor. */ --m-lab-w: 74px; /* altura do teclado virtual, publicada por mobile.js via visualViewport (`documentElement.style.setProperty("--kb", h+"px")` — estilo inline vence esta declaração). Este 0px é o valor de repouso: sem ele, `var(--kb)` sem fallback resolveria para nada e o calc() de quem consome ficaria inválido. Consumido pela peça 40 (Conversas) e, pelo furo [21], também pela peça 20 (altura da folha com o teclado aberto). */ --kb: 0px; } /* Nenhum token `--m-*` tem valor diferente no tema escuro: a lista do contrato não contém cor nenhuma (são medidas, raios e tamanhos de fonte). Por isso NÃO existe aqui um bloco `[data-theme="dark"]{--m-*:…}` — declarar um bloco vazio, ou inventar valor escuro para medida, seria pior que não ter. */ /* ═══════════════════════════════════════════════════════════════════════════ SEÇÃO B — COLOR-SCHEME (EXCEÇÃO 2 do contrato: FORA da @media) Sem isto o navegador pinta TODO widget nativo em claro: a roda dos 14 `` de Capturas (index.html:122), as barras de rolagem e o teclado — tudo claro sobre um app escuro. É ganho também no desktop e risco zero: `color-scheme` não pinta nada do app, só informa o UA. `:root` e `[data-theme="dark"]` têm a MESMA especificidade (0,1,0) — a ordem abaixo é load-bearing, o dark tem que vir depois para vencer o empate. ═══════════════════════════════════════════════════════════════════════════ */ :root{ color-scheme: light } [data-theme="dark"]{ color-scheme: dark } /* ═══════════════════════════════════════════════════════════════════════════ SEÇÃO C — PROMOÇÃO DE `input.f` (EXCEÇÃO 3 do contrato: FORA da @media) styles.css:148 é `select.f, .filters input.f{…}`: o SELECT vale em qualquer lugar, o INPUT só dentro de `.filters`. Resultado medido, e vale no desktop TAMBÉM: `#ctBusca` (contratos.js:72, dentro de `.ct-barra`) e `#emQuando` (app.js:3257, `input type="datetime-local" class="f"` dentro de `.var-chips`) são o input CRU do navegador — border:2px inset rgb(118,118,118), 22px de altura, padding 1px 2px, fonte 13.33px. As 8 declarações do bloco `input.f` abaixo são CÓPIA IDÊNTICA às de styles.css:148, de propósito: são exatamente as propriedades que `.filters input.f` (0,2,1) já declara e continua vencendo em `input.f` (0,1,1), então os campos que hoje estão certos (#capFrom, #capTo, #kSearch, #cfBusca) ficam pixel a pixel como estão. Qualquer propriedade FORA dessa lista de 8 não teria concorrente e mudaria o desktop — por isso `font-family` e `:focus` ficam escopados logo abaixo, e não no `input.f` nu. ═══════════════════════════════════════════════════════════════════════════ */ input.f{ border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 8px 11px; border-radius: 9px; font-size: 12.5px; outline: none; font-weight: 500; } /* ⚠️ `font-family` e `:focus` NÃO existem em styles.css:148/149 para input nenhum (a 149 só dá :focus a `select.f`). Declarados em `input.f` nu eles venceriam por AUSÊNCIA de concorrente e mudariam também o desktop em 4 campos que hoje estão certos: #capFrom e #capTo (index.html:122), #kSearch (index.html:189) e #cfBusca (app.js:3566). Por isso ficam escopados aos dois contêineres onde o input está de fato cru: `.ct-barra` (#ctBusca, contratos.js:72) e `.var-chips` (#emQuando, app.js:3257). Fora deles, zero mudança de desktop. */ .ct-barra input.f, .var-chips input.f{ font-family: inherit } .ct-barra input.f:focus, .var-chips input.f:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ═══════════════════════════════════════════════════════════════════════════ ═══ DAQUI PARA BAIXO: TUDO DENTRO 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){ /* ───────────────────────────────────────────────────────────────────────── D — CASCA: conter o estouro horizontal e trocar vh por dvh ───────────────────────────────────────────────────────────────────────── */ /* Cinto de segurança do estouro horizontal. Medido: clientWidth 375 contra scrollWidth 1146 no Dashboard (EVIDENCIA §1) e 461 com a ficha aberta (§2) — e é esse documento de 461px que a `.drawer{right:0}` de styles.css:208 usa como bloco contentor, jogando 87px da ficha fora da tela. As peças 10 (cabeçalho) e 20 (folha) consertam as FONTES do estouro; esta regra garante que nenhuma fonte nova volte a deslocar overlay fixo. ⚠️ LOAD-BEARING que seja `clip` e nunca `hidden`: `overflow` no elemento raiz propaga pro viewport; com `hidden` o viewport vira contêiner de rolagem e o `position:sticky` do `header.top` (styles.css:52) e do `thead th` (styles.css:160) para de prender. Com `clip` em x e `visible` em y, nenhum dos dois eixos é mutado (CSS Overflow 3: a mutação só ocorre quando um dos eixos NÃO é visible/clip) e o sticky continua vivo. DESFAZ a ausência de overflow-x em styles.css:29 (html,body{margin:0;height:100%}). */ html{ overflow-x: clip } /* `100vh` no celular é a altura COM as barras do navegador recolhidas, então sobra sempre uma faixa rolável e o rodapé de quem mede 100vh cai atrás da barra de endereço. `dvh` é a altura dinâmica, a que existe agora. Sem fallback explícito de propósito: quem não tem `dvh` DESCARTA a declaração e fica com o `100vh` que o próprio styles.css já dá. DESFAZ styles.css:51 (.app{min-height:100vh}), DESFAZ styles.css:36 (.login-wrap{min-height:100vh}), DESFAZ styles.css:262 (.boot{min-height:100vh}). */ .app{ min-height: 100dvh } .login-wrap{ min-height: 100dvh } .boot{ min-height: 100dvh } /* O retângulo azul do iOS pisca em cada toque, inclusive em `tbody tr` (que é `cursor:pointer`, styles.css:165) e em `.qcard`/`.kcard`. ⚠️ Esta regra é PRÉ-REQUISITO do que vem depois: tirando o realce padrão, o retorno de toque passa a ser responsabilidade dos `:active` da seção G e dos das peças 10/30. Sem eles, o toque fica sem resposta visual. */ body{ -webkit-tap-highlight-color: transparent } /* ───────────────────────────────────────────────────────────────────────── E — O PISO DE 16px (fonte) + 44px (alvo) EM TODO CAMPO DO APP Por que 16px e não 15: o Safari do iPhone dá zoom (~1,19×) ao focar campo com `font-size < 16px` e NÃO desfaz no blur. Somado a um documento mais largo que a tela, a pessoa fica ampliada E deslocada — sai do campo olhando outro pedaço da tela. 16px é o limiar exato; é o único jeito correto. `maximum-scale=1`/`user-scalable=no` está PROIBIDO: quebra o pinch-to-zoom de quem precisa ampliar um laudo, e o iOS os ignora. ⚠️ FURO [3] APLICADO: `.search input` está FORA desta regra coletiva. Um shorthand `padding` aqui destruiria o `padding-left:34px` que styles.css:66 usa para reservar espaço ao ícone de lupa (`.search svg{position:absolute;left:11px}`, styles.css:65, que não ocupa espaço no fluxo) e a lupa ficaria POR CIMA do texto do #globalSearch. `.search` é da peça 10, e é lá que o campo recebe os quatro longhands. Regra geral seguida aqui: nunca usar o shorthand `padding` sobre campo cujo padding original é assimétrico. Conferido um por um antes de escrever: styles.css:148 `select.f,.filters input.f` → 8px 11px simétrico ✔ seção C `input.f` → 8px 11px simétrico ✔ styles.css:224 `.field select/input/textarea`→10px 12px simétrico ✔ styles.css:732 `.dinheiro input` → 8px 10px simétrico ✔ styles.css:41 `.login-card input` →12px 14px simétrico ✔ styles.css:66 `.search input` → 9px 12px 9px 34px ✘ → peça 10 ───────────────────────────────────────────────────────────────────────── */ /* DESFAZ styles.css:148 (font-size:12.5px nos 14 filtros de Leads, index.html:158-168, e nos selects de campanha/e-mail), DESFAZ a seção C acima (12.5px, que é cópia da 148), DESFAZ styles.css:224 (font-size:13px — a ficha inteira, os 26 `