/*===================================================== GCA MOBILE — SHELL + TELAS (Fase 1: 2026-08-20, Fase 2: em andamento) Arquivo único cobrindo o mobile do GCA, tela por tela, na mesma ordem do pedido original: Fase 1 foi a estrutura global (breakpoints, navegação inferior — #navMobile, substitui #sidebar no celular —, painel "Mais", header mobile, #view, aviso de assinatura/toast/blur, carrossel de KPIs do Dashboard). A partir da Fase 2, cada tela ganha sua própria seção aqui (tabelas viram listas/cards, formulários e modais ganham tratamento de toque, uma tela por vez). Carregado por último em index.html — vence a cascata sem precisar de !important em nenhuma regra. BREAKPOINTS (testados em 360/390/430/768/1024/1440+): phone max-width: 767px → 360, 390, 430 tablet min-width:768px e max-width:1023px → 768 (shell desktop mantido) desktop min-width: 1024px → 1024, 1440+ (intocado) #sidebar/#header/etc. (sidebar.css, header.css, layout.css) nunca são editados diretamente — toda adaptação mobile vive aqui. =====================================================*/ /* =========================== 1. SHELL — sidebar/nav mobile, exclusivos entre si =========================== */ #navMobile{ display:none; } @media (max-width:767px){ #sidebar{ display:none; } #navMobile{ display:flex; } /* Espaço pra nav inferior fixa não tapar o fim do conteúdo — altura da nav (56px) + a barra de gestos do iOS. min() de 12px como piso (2026-09-11, achado em produção: em alguns Android/ Chrome mobile — navegador comum, não só o app instalado — env(safe-area-inset-bottom) volta 0, e sem nenhuma folga a barra de gestos do Android encostava direto na nav, cortando o rodapé visualmente). Mesmo ajuste na própria .nav-mobile logo abaixo. */ #view{ padding:16px 16px calc(56px + max(12px, env(safe-area-inset-bottom)) + 16px); /* "contain" (não "none"), achado na auditoria mobile, 2026-08-21: mantém o "bounce" natural de rolar até o fim (sensação de app), só impede que ESSE bounce vaze pro body por trás — sem isto, puxar mais no topo/fundo do conteúdo arriscava disparar pull-to-refresh do navegador ou revelar o fundo do sistema operacional atrás da página. */ overscroll-behavior-y:contain; /* Barreira estrutural (auditoria mobile, 2026-09-05) — #view só declara overflow-y:auto (css/layout.css); pela regra de interoperabilidade do CSS (overflow-x "visible" ao lado de overflow-y não-"visible"), o navegador computa os dois eixos como "auto", então #view TAMBÉM rolava de lado sempre que algum filho vazasse mais largo que a tela — já corrigido um caso real assim (.periodo-filtro, Comissões) resetando o scroll ao trocar de tela (js/app.js), mas aquilo era reativo, não uma trava. Isto é a trava: a PÁGINA em si nunca rola de lado, ponto. Não afeta nenhum componente com rolagem própria — .funil-board, .status-buttons, .table-scroll, o carrossel de KPIs do Dashboard e o menu do GCA Select já contêm a própria rolagem (overflow-x:auto neles mesmos, um elemento filho de #view) e continuam rolando normalmente; só a rolagem da PÁGINA COMO UM TODO (o sintoma do bug relatado) fica bloqueada. Verificado antes de aplicar: nenhuma tela do sistema depende hoje da rolagem de #view pra mostrar conteúdo que não tenha rolagem própria (única tabela fora do padrão .table-scroll, em Configurações → Membros da Equipe, tem só 2 colunas curtas, nunca estoura a largura da tela). */ overflow-x:hidden; } .nav-mobile-mais-folha, .gca-select-menu{ overscroll-behavior-y:contain; } } /* =========================== 2. NAVEGAÇÃO INFERIOR =========================== */ /* Cores tokenizadas (achado na auditoria mobile, 2026-08-21): antes eram hex fixo e a nav ficava sempre "escura" mesmo no GCA Light — única seção do CSS mobile sem tokens de tema. As regras abaixo (sem [data-theme]) são a base pro GCA Light; o bloco [data-theme="dark-premium"] logo depois de "3. PAINEL MAIS" restaura os valores hex originais, então quem usa Dark Premium (tema padrão) não vê nenhuma mudança visual. */ .nav-mobile{ position:fixed; left:0; right:0; bottom:0; z-index:500; align-items:stretch; justify-content:space-around; /* min-height, não height (2026-09-11) — com box-sizing:border-box, "height:56px" fixo fazia o padding-bottom de segurança abaixo COMER da área dos ícones/texto em vez de somar embaixo dela (o oposto do que essa folga deveria fazer). min-height deixa a barra crescer quando precisa da folga extra, sem espremer o conteúdo nos casos em que env() já vinha 0 antes. */ min-height:56px; padding-bottom:max(12px, env(safe-area-inset-bottom)); background:var(--gca-fundo-header); border-top:1px solid var(--gca-borda); box-shadow:0 -8px 24px rgba(0,0,0,.08); } /* Reset do .menu-item vindo de sidebar.css (lista vertical, ícone ao lado do texto) — aqui é uma barra horizontal, ícone em cima do texto, cada item ocupando fração igual da largura. Especificidade ".nav-mobile .menu-item" já vence ".menu-item" sozinho, sem precisar de !important. */ .nav-mobile .menu-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; margin-bottom:0; border-radius:0; color:var(--gca-texto-terciario); font-size:10.5px; font-weight:500; text-align:center; } .nav-mobile .menu-item i{ width:20px; height:20px; } .nav-mobile .menu-item.active{ background:none; box-shadow:none; color:var(--gca-texto-principal); font-weight:600; } .nav-mobile .menu-item.active i{ color:#8B0000; } /* Sem o acento lateral de 3px (sidebar.css) — não faz sentido numa barra horizontal; a cor do ícone já marca o item ativo. */ .nav-mobile .menu-item.active::before{ content:none; } .nav-mobile-mais{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px; border:none; background:none; cursor:pointer; color:var(--gca-texto-terciario); font-size:10.5px; font-weight:500; } .nav-mobile-mais i{ width:20px; height:20px; } .nav-mobile-mais.aberto{ color:var(--gca-texto-principal); } .nav-mobile-mais.aberto i{ color:#8B0000; } /* =========================== 3. PAINEL "MAIS" (bottom sheet) =========================== */ .nav-mobile-mais-backdrop{ position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.5); } /* Mesma causa raiz já corrigida várias vezes nas Assinaturas: .menu-item (sidebar.css) tem display:flex sem guarda de [hidden] — sem esta regra, esconder o painel via atributo hidden não funcionaria de verdade. */ .nav-mobile-mais-backdrop[hidden]{ display:none; } .nav-mobile-mais-folha{ position:fixed; left:0; right:0; bottom:0; z-index:601; display:flex; flex-direction:column; gap:4px; max-height:70vh; overflow-y:auto; padding:12px 12px calc(max(12px, env(safe-area-inset-bottom)) + 12px); background:var(--gca-fundo-card-solido); border-radius:20px 20px 0 0; box-shadow:0 -12px 32px rgba(0,0,0,.12); } .nav-mobile-mais-folha[hidden]{ display:none; } .nav-mobile-mais-alca{ width:40px; height:4px; margin:2px auto 10px; border-radius:99px; background:var(--gca-borda-sutil); } /* Dentro da folha o .menu-item volta a ser horizontal (ícone + texto lado a lado), como na sidebar — só recebe cor/toque adequados pro fundo da folha. */ .nav-mobile-mais-folha .menu-item{ display:flex; flex-direction:row; align-items:center; gap:14px; padding:14px 12px; margin-bottom:0; border-radius:12px; color:var(--gca-texto-secundario); font-size:15px; font-weight:500; } .nav-mobile-mais-folha .menu-item:active{ background:var(--gca-fundo-elevado-hover); } /* O seletor "i" nunca bateu de verdade (achado 2026-09-05, feedback do usuário: ícones "desalinhados" na folha "Mais") — o Lucide (js/app.js, lucide.createIcons()) SUBSTITUI cada por um , removendo a tag do DOM; a regra abaixo, escrita pra "i", nunca alcançou o real. Sem nenhum tamanho forçado, cada ícone ficava no padrão cru do Lucide (24x24, sem exceção) — o próprio desenho de cada ícone (mapa, engrenagem, cartão...) ocupa uma fração diferente dessa caixa de 24px, e numa lista compacta de texto 15px isso lia como "desalinhado". Troquei o seletor pra "svg" (o que o Lucide realmente cria) e reduzi a caixa pra 20px — mesma proporção ícone/ texto já usada em outras listas mobile (ver .nav-mobile .menu-item i, também 20px). Only escopo: esta folha "Mais"; não mexi na sidebar desktop (mesmo bug lá, fora do pedido de hoje). */ .nav-mobile-mais-folha .menu-item svg{ display:block; width:20px; height:20px; min-width:20px; max-width:20px; flex:0 0 20px; color:var(--gca-texto-terciario); } /* Ajuste fino de peso óptico (2026-09-11, pedido do usuário) — a caixa dos 7 ícones já mede pixel-idêntica (conferido); o que ainda lia como "desalinhado" numa lista vertical é o desenho de cada ícone pesando diferente dentro da mesma caixa de 20px (mapa, busca de usuário e o par de usuários têm mais espaço vazio à esquerda que calculadora/engrenagem/cartão, que preenchem quase toda a caixa). Nudge de 1-1.5px, só nesta folha — não mexe em nenhum outro lugar que use os mesmos ícones (sidebar desktop, por exemplo). */ .nav-mobile-mais-folha .menu-item svg[data-lucide="map"]{ transform:translateX(-1.5px); } .nav-mobile-mais-folha .menu-item svg[data-lucide="user-round-search"]{ transform:translateX(-1.5px); } .nav-mobile-mais-folha .menu-item svg[data-lucide="users-round"]{ transform:translateX(-1px); } .nav-mobile-mais-folha .menu-item svg[data-lucide="credit-card"]{ transform:translateY(-1px); } .nav-mobile-mais-folha .menu-item.active{ color:var(--gca-texto-principal); } .nav-mobile-mais-folha .menu-item.active svg{ color:#8B0000; } .nav-mobile-mais-folha .menu-secao-titulo{ margin-top:4px; padding:10px 12px 4px; border-top:1px solid var(--gca-borda-sutil); color:var(--gca-texto-terciario); } /* =========================== Dark Premium — preserva o visual ORIGINAL pixel a pixel (tema padrão do sistema, ver auditoria mobile 2026-08-21). As regras acima (sem [data-theme]) só existem pra dar suporte real ao GCA Light, que nunca tinha sido validado nesta camada — ninguém deve notar diferença nenhuma aqui em Dark Premium. =========================== */ [data-theme="dark-premium"] .nav-mobile{ background:#14161C; border-top-color:rgba(255,255,255,.08); box-shadow:0 -8px 24px rgba(0,0,0,.35); } [data-theme="dark-premium"] .nav-mobile .menu-item{ color:#8A93A3; } [data-theme="dark-premium"] .nav-mobile .menu-item.active{ color:#F5F7FA; } [data-theme="dark-premium"] .nav-mobile .menu-item.active i{ color:#E63950; } [data-theme="dark-premium"] .nav-mobile-mais{ color:#8A93A3; } [data-theme="dark-premium"] .nav-mobile-mais.aberto{ color:#F5F7FA; } [data-theme="dark-premium"] .nav-mobile-mais.aberto i{ color:#E63950; } [data-theme="dark-premium"] .nav-mobile-mais-folha{ background:#1A1E24; box-shadow:0 -12px 32px rgba(0,0,0,.4); } [data-theme="dark-premium"] .nav-mobile-mais-alca{ background:rgba(255,255,255,.18); } [data-theme="dark-premium"] .nav-mobile-mais-folha .menu-item{ color:#D8DCE3; } [data-theme="dark-premium"] .nav-mobile-mais-folha .menu-item:active{ background:rgba(255,255,255,.06); } [data-theme="dark-premium"] .nav-mobile-mais-folha .menu-item svg{ color:#8A93A3; } [data-theme="dark-premium"] .nav-mobile-mais-folha .menu-item.active{ color:#F5F7FA; } [data-theme="dark-premium"] .nav-mobile-mais-folha .menu-item.active svg{ color:#E63950; } /* =========================== 4. HEADER MOBILE =========================== */ @media (max-width:767px){ /* overflow-x:hidden (achado 2026-09-05, feedback do usuário: tela de Assembleias arrastando de lado no celular) — barreira igual à já existente em #view (Fase 1), mas aqui pro header, que é IRMÃO de #view (css/layout.css), não filho — a trava de #view nunca cobriu o header. Causa provável do estouro real: o conteúdo que cada módulo injeta em #headerExtra (ex.: o toggle Imóveis/Veículos) podia ficar mais largo que o esperado no navegador do celular de verdade (autosizer do Chrome/Android, ver css/style.css) e empurrar o header — sem nenhuma contenção, isso arrastava a PÁGINA INTEIRA de lado, não só o header. Seguro: o único filho do header que visualmente ultrapassa a própria altura (o painel de notificações) já vira position:fixed no mobile (nav-mobile.css, seção 22) — fixed escapa de overflow:hidden de ancestrais sem transform, então não é cortado por esta regra. */ #header, .header{ height:56px; overflow-x:hidden; } .header-left{ gap:12px; } .header-left h2{ font-size:18px; } /* Subtítulo da página — sem espaço pra ele num header de 56px, e a nav inferior já dá contexto de onde a pessoa está. */ #subtituloPagina{ display:none; } .header-right{ gap:10px; } /* Nome/papel de quem está logado somem — o avatar sozinho já identifica a conta, e o texto completo não cabe num header compacto. ":not(.avatar)" (2026-09-14) — sem isto, o próprio avatar (também um
filho de .user) sumia junto, já que este seletor é mais específico que ".avatar{display:flex}". */ .user > div:not(.avatar){ display:none; } /* Área de toque mínima recomendada (~44px) pro sino de notificação e o botão Sair — hoje herdam 45px de header.css no desktop, então isto só reforça o mínimo em telas pequenas. */ .notification, .btn-sair{ min-width:44px; min-height:44px; } /* Mudou pro canto direito da saudação do Dashboard, ver .btn-instalar-app-saudacao mais abaixo. */ .btn-instalar-app-header{ display:none; } } /* =========================== 5. TOAST — sem cobertura mobile hoje (comissoes.css), zero @media =========================== */ @media (max-width:767px){ .toast-container{ top:auto; bottom:calc(56px + env(safe-area-inset-bottom) + 12px); right:12px; left:12px; } .toast{ min-width:0; width:100%; } } /* =========================== 6. PERFORMANCE — reduz o blur do Dark Premium no mobile (--gca-blur-glass só existe em Dark Premium; no tema claro já é "none", não precisa de ajuste nenhum ali). =========================== */ @media (max-width:767px){ :root[data-theme="dark-premium"]{ --gca-blur-glass:blur(6px); } } /* =========================== 7. DASHBOARD MOBILE — saudação + carrossel de KPIs =========================== */ .dashboard-mobile-topo{ display:none; } /* Rótulo curto dos 3 botões do Gráfico 1 (auditoria mobile, 2026-09-05, aprovado pelo usuário) — "Crédito Comercializado"/ "Ticket Médio" ficam compridos demais pra 3 botões numa linha só em celular sem quebrar texto/comprimir; no desktop o rótulo completo de sempre continua igual (por isso o padrão, fora do @media, é esconder o curto — só o @media abaixo inverte). Puramente CSS, o data-modo que js/dashboard.js lê não muda. */ .toggle-rotulo-curto{ display:none; } @media (max-width:767px){ .dashboard-mobile-topo{ display:block; margin-bottom:16px; } .toggle-rotulo-completo{ display:none; } .toggle-rotulo-curto{ display:inline; } /* O resto do Dashboard (grid de 5 cards, gráficos, listas) já tem seus próprios breakpoints em dashboard.css — aqui só escondemos a grade de cards desktop, que o carrossel substitui. */ .dashboard-cards-topo{ display:none; } /* Hierarquia pedida: Últimas Vendas antes de Top Investidores no mobile (no desktop a ordem no DOM já é a inversa) — os dois já são .panel irmãos dentro do mesmo grid (.dashboard-listas, dashboard.css), então só troca de ordem visual, sem markup novo. */ .dashboard-listas{ display:flex; flex-direction:column; } .panel-ultimas-vendas{ order:1; } .panel-top-investidores{ order:2; } } .dashboard-mobile-saudacao{ margin-bottom:14px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .dashboard-mobile-saudacao-texto{ min-width:0; } .dashboard-mobile-saudacao h2{ font-size:19px; margin-bottom:2px; } .dashboard-mobile-saudacao p{ font-size:13px; color:var(--gca-texto-secundario); } .btn-instalar-app-saudacao{ flex-shrink:0; height:34px; padding:0 12px; font-size:12.5px; white-space:nowrap; } .btn-instalar-app-saudacao i{ width:15px; height:15px; flex-shrink:0; } /* .btn-primary usa display:flex, que vence o display:none padrão do atributo hidden sem esta guarda (mesmo padrão de #btnInstalarAppHeader, css/header.css). */ #btnInstalarAppSaudacao[hidden]{ display:none; } /* v2 (auditoria mobile, 2026-09-05, aprovado pelo usuário) — deixou de ser um carrossel de rolagem horizontal (deixava sempre um card "cortado" na borda, sensação de desktop comprimido) e virou uma grade 2x2: os 4 cards "simples" (Clientes/Comissão/Crédito no Mês/ Crédito Total) cabem inteiros, sem cortar nada, sem rolagem nenhuma — nem da página, nem do próprio componente. O 5º card (Meta do Mês, com barra de progresso) NÃO faz parte desta grade — é um elemento irmão logo abaixo dela (.dashboard-mobile-meta, ver views/dashboard.html), largura cheia, por ter mais conteúdo que os outros 4. */ .kpi-carousel{ display:grid; /* minmax(0, 1fr), não só 1fr (achado corrigindo o corte do "Crédito Total", 2026-09-05) — item de grid tem min-width:auto implícito (mesma causa-raiz já documentada em .content, css/layout.css): sem isto, um valor monetário longo (mais dígitos que o normal) forçava a COLUNA a crescer pra caber o texto inteiro numa linha só, empurrando a grade (e a página) mais larga que a tela — com #view (Fase 1) contendo essa largura extra, o excesso simplesmente ficava invisível/cortado em vez de virar rolagem de página. minmax(0, ...) deixa a coluna encolher até o espaço real disponível; o valor que não couber quebra linha (ver overflow-wrap abaixo), a coluna nunca mais força a grade a crescer. */ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } /* Rede de segurança pra valor MUITO longo (raro) — só entra em jogo quando mesmo depois de quebrar no espaço "R$ / 12.700.000,00" (js/dashboard.js, espelharKpisParaCarrosselMobile troca o espaço não-quebrável do toLocaleString por um espaço normal só na cópia mobile) o número ainda não coube; aí sim quebra em qualquer ponto, inclusive no meio dos dígitos, em vez de vazar/cortar. Valor curto nunca aciona nada disto. */ .dashboard-mobile-topo .dash-card .card-content h2{ overflow-wrap:anywhere; } /* Dark Premium é o tema padrão do app, e o h2 do KPI nele usa 30px (css/dashboard.css:579-584, pensado pro grid de 5 colunas do desktop) — na grade 2x2 do celular (achado 2026-09-05, feedback do usuário: números "R$ 516,97" e "R$ 2.608.380,00" quebrando/cortando feio) esse tamanho nunca tinha sido revisado pro espaço real disponível (~100px por card em 360px, o mais estreito testado). 14px foi medido de propósito (não é um "chute redondo"): é o maior tamanho em que "R$ 2.608.380,00" (o valor real do print do usuário) cabe em 2 linhas limpas — "R$" numa linha, o número inteiro na outra — mesmo no telefone mais estreito testado; em 15px+ o número já não cabe mais numa linha só e quebra de novo no meio dos dígitos (rede de segurança acima). Valores bem maiores que o normal (dezenas de milhões) ainda podem precisar de uma 3ª linha — não tem tamanho de fonte legível que resolva isso pra qualquer valor, só medida maior de card resolveria, fora do pedido desta correção. Mesmo tamanho de outros valores "grandes" já usados no mobile (ver .linha-mobile-valor, 14px, nav-mobile.css). Escopado só ao carrossel mobile — o grid desktop de 5 colunas continua 30px, intocado. */ [data-theme="dark-premium"] .dashboard-mobile-topo .dash-card .card-content h2{ font-size:14px; } .dashboard-mobile-meta{ margin-top:12px; } /* Top Investidores / Últimas Vendas — listas de cards no mobile em vez da tabela comprimida (Fase 2, 2026-08-20). Escopado só a estes dois painéis de propósito: outras telas com .table-scroll ainda não têm uma versão .lista-mobile própria, e uma regra genérica esconderia a tabela delas sem nada pra mostrar no lugar. */ @media (max-width:767px){ .panel-top-investidores .table-scroll, .panel-ultimas-vendas .table-scroll{ display:none; } .tipo-toggle--full .status-btn{ padding:10px 8px; font-size:12px; min-height:40px; } .panel-header--com-toggle .tipo-toggle .status-btn{ padding:9px 14px; min-height:40px; } } .lista-mobile{ display:none; } @media (max-width:767px){ .lista-mobile{ display:flex; flex-direction:column; gap:10px; } } .linha-mobile{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:var(--gca-fundo-elevado); } .linha-mobile-principal{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .linha-mobile-principal strong{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .linha-mobile-principal span{ font-size:12px; color:var(--gca-texto-secundario); } .linha-mobile-valor{ font-size:14px; font-weight:700; white-space:nowrap; } /* Últimas Vendas — layout vertical (nome+tipo em cima, detalhes embaixo) — diferente do Top Investidores (linha única horizontal), porque tem mais informação (data, crédito e comissão) pra caber. */ .linha-mobile--vertical{ flex-direction:column; align-items:stretch; gap:8px; } .linha-mobile--vertical .linha-mobile-principal{ flex-direction:row; align-items:center; justify-content:space-between; } .linha-mobile-detalhes{ display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--gca-texto-secundario); } .lista-mobile-vazia{ padding:20px; text-align:center; font-size:13px; color:var(--gca-texto-terciario); } /* =========================== 8. COMISSÕES — tabela vira lista de cards com toque pra expandir (Fase 2, 2026-08-20). Mesma lógica/estado de sempre (comissoesState.linhaExpandidaId, alternarExpansaoLinha — ver js/comissoes.js) — só troca o CSS de / pra layout de card, reaproveitando os data-label já adicionados nas células. Nenhuma duplicação de markup/lógica, ao contrário do Dashboard: essa tabela é grande demais (parcelas, histórico aninhado, badges) pra valer a pena um segundo template mobile — a técnica de "tabela responsiva" (thead escondido, td vira bloco com rótulo) é o que "conforme o contexto" pedia aqui. =========================== */ @media (max-width:767px){ .comissoes-table thead{ display:none; } .comissoes-table, .comissoes-table tbody{ display:block; width:100%; } .comissoes-table tr.linha-venda{ display:block; position:relative; margin-bottom:12px; padding:14px 46px 14px 14px; border-radius:14px; background:var(--gca-fundo-elevado); } .comissoes-table tr.linha-venda:hover{ background:var(--gca-fundo-elevado); box-shadow:none; } .comissoes-table tr.linha-venda td{ display:block; padding:5px 0; border:none; } .comissoes-table tr.linha-venda td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gca-texto-terciario); } .comissoes-table tr.linha-venda td.expandir{ position:absolute; top:14px; right:14px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border-radius:50%; background:var(--gca-fundo-flutuante); } .comissoes-table tr.linha-venda td.acoes{ display:flex; gap:6px; padding-top:10px; margin-top:6px; border-top:1px solid var(--gca-borda); } /* 40px, não 36 (achado na auditoria mobile, 2026-08-21) — mais perto do alvo de toque recomendado (~44px), mesmo valor já usado nos ícones equivalentes de Administrador. */ .comissoes-table .icon-btn{ min-width:40px; min-height:40px; } /* Linha de detalhe expandida: já vira 1 coluna sozinha em 1100px (.detalhe-venda, comissoes.css) — só precisa voltar a ser bloco normal aqui, já que o reset acima transforma toda / da tabela em elemento de bloco. */ .comissoes-table tr.linha-detalhe{ display:block; } .comissoes-table tr.linha-detalhe td{ display:block; padding:0; } /* Botões de status (Todos/Ativos/Inadimplentes/...) — não cabem 5 numa linha só em tela de celular; scroll horizontal em vez de quebrar/espremer o texto. A caixa em si só respeita a largura da tela por causa do width:100% em css/comissoes.css (mesmo breakpoint) — aqui só o comportamento de rolagem. */ .status-buttons{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; } .status-buttons .status-btn{ flex:0 0 auto; min-height:40px; } /* Filtro de período (Comissões, 2 de 126px cada) — achado testando no celular, 2026-09-05: é o único filtro do app sem rolagem própria (diferente de .status-buttons acima, do board do Funil de Vendas, do carrossel de KPIs do Dashboard...). width:100% (regra base, comissoes.css) só afeta o CONTAINER — não encolhe os dois campos de data, que numa tela de celular somados ficam mais largos que a tela. Sem conter essa rolagem aqui, ela vazava pra #view inteiro (mesma causa raiz do scrollLeft não resetado em carregarPagina, js/app.js): a PRÓXIMA tela trocada ficava com o conteúdo inteiro deslocado, cortado dos dois lados. */ .periodo-filtro{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; max-width:100%; /* Reduzidos só no celular (2026-09-13, achado em produção: o campo de data nativo do Android, com pouca sobra de espaço, chegava a esconder o texto "dd/mm/aaaa" e só mostrar a seta) — encolhe ícone/separador/gap/preenchimento pra sobrar mais espaço pros dois campos de data em si, que crescem logo abaixo. */ gap:5px; padding:8px 10px; } .periodo-filtro i{ width:14px; height:14px; } .periodo-filtro-separador{ font-size:11px; } .periodo-filtro-limpar{ width:18px; height:18px; } .periodo-filtro input[type="date"]{ flex-shrink:0; width:138px; } /* "Ordenar por" (2026-09-13) — só existe no celular, onde a tabela vira cards sem cabeçalho compartilhado pra clicar (ver th-ordenavel, css/comissoes.css). Largura cheia, mesmo padrão de botão de ação principal já usado em outras telas mobile (ex.: .config-footer button). */ .comissoes-ordenar-mobile-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; } /* "Nova Venda" (+ as 2 ações beta, quando visíveis) primeiro na barra, largura cheia (pedido do usuário, 2026-09-13 — mais visível que escondido embaixo dos filtros). order:-1 vence o order:1 do desktop (css/comissoes.css); margin-left:0 desfaz o auto que empurrava pra direita lá. Migrado de #btnNovaVenda pro wrapper .comissoes-acoes (2026-09-23) junto com o CSS — mesmo raciocínio da nota em css/comissoes.css. */ .comissoes-acoes{ order:-1; margin-left:0; width:100%; } #btnNovaVenda{ width:100%; justify-content:center; min-height:46px; } /* Ações beta (Exportar CSV/Relatório de Comissões) — mesmo alvo de toque de ~44px já usado no resto do app; metade da largura cada, lado a lado, já que Nova Venda acima de cada uma ocupa a linha toda sozinha. */ #btnExportarCsvComissoes, #btnRelatorioComissoes{ flex:1 1 calc(50% - 5px); justify-content:center; min-height:44px; font-size:13px; } } /* =========================== 9. ASSEMBLEIAS — tabela vira lista de cards (Fase 2, 2026-08-20). Mais simples que Comissões: sem linha expansível, sem botão de ação por linha (tabela só de leitura) — mesma técnica de "tabela responsiva" (thead escondido, td vira bloco com rótulo via data-label), com uma reordenação visual por CSS (order): Status é a última coluna no HTML mas é o dado mais importante da tela (é literalmente o que "Assembleias" existe pra mostrar), então sobe pra logo depois do nome do cliente. =========================== */ @media (max-width:767px){ .assembleias-table thead{ display:none; } .assembleias-table, .assembleias-table tbody{ display:block; width:100%; } .assembleias-table tbody tr{ display:grid; grid-template-columns:1fr; margin-bottom:12px; padding:14px; border-radius:14px; background:var(--gca-fundo-elevado); } .assembleias-table tbody tr:hover{ background:var(--gca-fundo-elevado); } .assembleias-table tbody tr td{ display:block; padding:4px 0; border:none; } .assembleias-table tbody tr td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gca-texto-terciario); } .assembleias-table td[data-label="Cliente"]{ order:1; } .assembleias-table td[data-label="Status"]{ order:2; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--gca-borda); } .assembleias-table td[data-label="Distância da 1ª Chamada"]{ order:3; } .assembleias-table td[data-label="Nº Sorteado (1ª Chamada)"]{ order:4; } .assembleias-table td[data-label="Grupo"]{ order:5; } .assembleias-table td[data-label="Cota"]{ order:6; } .assembleias-table td[data-label="Participantes"]{ order:7; } } /* =========================== FUNIL DE VENDAS — view Lista vira cards no mobile (Funil Premium, 2026-08-23). Mesma técnica de tabela responsiva do bloco Assembleias acima (mais simples que Comissões: sem linha expansível, sem coluna de ações) — só troca o CSS de /, reaproveita os data-label já no HTML (views/funil-vendas.html). =========================== */ @media (max-width:767px){ .funil-tabela-lista thead{ display:none; } .funil-tabela-lista, .funil-tabela-lista tbody{ display:block; width:100%; } .funil-tabela-lista tbody tr{ display:grid; grid-template-columns:1fr; margin-bottom:12px; padding:14px; border-radius:14px; background:var(--gca-fundo-elevado); } .funil-tabela-lista tbody tr td{ display:block; padding:4px 0; border:none; } .funil-tabela-lista tbody tr td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gca-texto-terciario); } .funil-tabela-lista td[data-label="Etapa"]{ padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--gca-borda); } } /* =========================== 10. FUNIL DE VENDAS — botão "mover" + folha de etapas (Fase 2, 2026-08-20). O board em si (colunas de scroll horizontal, .funil-board/.funil-coluna) já é um layout razoável pra celular — não mexi nisso. O problema real era só a interação: arrastar usa a API nativa de Drag and Drop do HTML5, que não dispara em touch, e não tinha nenhuma alternativa. Toque no card continua abrindo o modal de editar (inalterado); o botão novo abre uma folha listando as outras etapas, chamando o MESMO funilAtualizarLead() que o "drop" já usava. =========================== */ /* Escondido por padrão (desktop) — no mouse, arrastar já funciona, um segundo botão só adicionaria ruído visual sem necessidade. Vem ANTES do @media abaixo de propósito: mesma especificidade das duas regras, então a ordem no arquivo decide, e a versão condicional (dentro do @media) precisa vir por último pra vencer. */ .funil-card-mover{ display:none; } @media (max-width:767px){ .funil-card{ position:relative; padding-right:40px; } .funil-card-mover{ position:absolute; top:8px; right:8px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:none; border-radius:50%; background:var(--gca-fundo-elevado); color:var(--gca-texto-secundario); cursor:pointer; } .funil-card-mover i{ width:15px; height:15px; } } .folha-mover-titulo{ padding:4px 8px 12px; font-size:14px; font-weight:600; color:var(--gca-texto-principal); } .folha-mover-opcao{ display:block; width:100%; padding:14px 12px; margin-bottom:2px; border:none; border-radius:12px; background:none; /* Achado na auditoria mobile, 2026-09-05: era #D8DCE3 fixo, sem [data-theme="dark-premium"] — uma cor clara pensada só pro fundo escuro, aplicada sem condição nenhuma. No GCA Light isso ficava quase ilegível (texto claro sobre fundo claro). Mesmo padrão já usado no componente irmão (.nav-mobile-mais-folha .menu-item, acima): token no claro, override abaixo preserva o hex original exato no Dark Premium — zero mudança visual pra quem já usa o tema padrão. */ color:var(--gca-texto-secundario); font-size:15px; font-weight:500; text-align:left; cursor:pointer; } .folha-mover-opcao:active{ background:var(--gca-fundo-elevado-hover); } /* Preserva o valor ORIGINAL exato (era o único usado, sem condição) — quem já usa Dark Premium (tema padrão do sistema) não vê nenhuma mudança visual com o fix acima. */ [data-theme="dark-premium"] .folha-mover-opcao{ color:#D8DCE3; } [data-theme="dark-premium"] .folha-mover-opcao:active{ background:rgba(255,255,255,.06); } /* =========================== 11. MODAIS (sistema inteiro) — bottom sheet no celular (Fase 2, 2026-08-20). .modal-overlay/.modal/.modal-header/ .modal-body/.modal-footer/.modal-pequeno são classes compartilhadas por TODAS as telas (Comissões, Assembleias, Funil de Vendas, Configurações, Administrador, etc.) — uma passada só aqui cobre todos os modais do sistema, ao contrário de refazer tela por tela. Dois tamanhos já existem no HTML de cada modal (.modal = grande, .modal-pequeno = pequeno) e mapeiam direto pros dois padrões pedidos: modal grande (Nova Venda, Nova Assembleia) vira quase tela cheia; modal pequeno (Pagamento de Parcela, Novo Funil) vira um bottom sheet compacto, do tamanho do conteúdo. Cabeçalho e rodapé já ficam fixos (não rolam) na arquitetura atual — .modal já é display:flex/flex-direction:column com só .modal-body rolando — então "ações fixas embaixo" já vem de graça, não precisou de nada novo pra isso. Correção (auditoria mobile, 2026-09-05): a regra abaixo estava escrita ".modal--pequeno" (dois travessões, BEM), e foi trocada nesta data pra ".modal-pequeno" (um travessão) — na hora, pareceu um seletor morto (a suposição foi checada só contra o HTML de Funil de Vendas/Funil Contratação, que usa ".modal-pequeno"). Descoberta depois, na mesma auditoria: NÃO era morto — Comissões (modal de Pagamento de Parcela), Carteira Inteligente e Administrador usavam ".modal--pequeno" (dois travessões) nos seus HTMLs, então aquela troca tirou o tratamento mobile desses 3 e deu pros outros 6. Unificado: os 3 HTMLs foram corrigidos pra ".modal-pequeno" (mesma convenção, sem "--", usada em todo o resto do projeto) — agora os 9 modais pequenos do sistema usam a MESMA classe e recebem o mesmo tratamento aqui. Fase 2 (auditoria mobile, 2026-09-05): comissoes.css tinha uma segunda cópia de .modal/.modal-body/.form-grid/.modal-header/ .modal-footer num @media(max-width:720px) próprio — como este arquivo é carregado por último em index.html, essas regras já venciam a cascata mesmo antes desta limpeza (a cópia de lá nunca teve efeito visual real). Removida de lá; só .composicao-grid (específica de Comissões) continua em comissoes.css. =========================== */ @media (max-width:767px){ .modal-overlay{ align-items:flex-end; } .modal{ width:100%; max-width:100%; max-height:92vh; border-radius:20px 20px 0 0; animation:modalSubirMobile .22s ease; } .modal-pequeno{ width:100%; max-height:none; } .modal-header{ padding:18px 20px; } .modal-header h2{ font-size:19px; } .modal-close{ width:38px; height:38px; } .modal-body{ padding:18px 20px; } .modal-footer{ flex-wrap:wrap; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); } /* Botões do rodapé lado a lado, largura igual — mais fácil de alcançar/tocar do que botões pequenos alinhados à direita. */ .modal-footer button{ flex:1; justify-content:center; min-height:46px; } .form-grid{ grid-template-columns:1fr; gap:16px; } } @keyframes modalSubirMobile{ from{ transform:translateY(40px); opacity:0; } to{ transform:translateY(0); opacity:1; } } /* =========================== 12. CALCULADORA DE VENDA DA CARTA — tabela "Resumo por Período" vira lista de cards (2026-08-21). O resto da tela (inputs, cards de resultado, comparação de cenários) já reflow pra 1 coluna a partir de 700px via regra genérica em calculadora-venda-carta.css — só essa tabela de 6 colunas ficava sem tratamento nenhum. Mesma técnica de Assembleias: thead escondido, td vira bloco com rótulo via data-label, sem reordenação (a ordem das colunas já é a correta: mês primeiro, resultado por último). =========================== */ @media (max-width:767px){ .cvc-tabela-resumo thead{ display:none; } .cvc-tabela-resumo, .cvc-tabela-resumo tbody{ display:block; width:100%; } .cvc-tabela-resumo tbody tr{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; margin-bottom:12px; padding:14px; border-radius:14px; background:var(--gca-fundo-elevado); } .cvc-tabela-resumo tbody tr td{ display:block; padding:4px 0; border:none; } .cvc-tabela-resumo tbody tr td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gca-texto-terciario); } .cvc-tabela-resumo td[data-label="Mês"]{ grid-column:1 / -1; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--gca-borda); font-size:15px; font-weight:700; } .cvc-tabela-resumo tbody tr td[data-label="Mês"]::before{ display:none; } } /* =========================== 13. CONFIGURAÇÕES — só o botão "Salvar" (2026-08-21). Auditoria: o resto da tela já herda tudo (grade de cards colapsa a 900px, já existente; .form-grid vira 1 coluna via regra genérica da seção 11; tabela "Membros da Equipe" só tem 2 colunas de texto curto, cabe sem ajuste). O único ponto real era o botão principal da tela, com 39px de altura — abaixo do padrão de toque de 44-46px já usado nos rodapés de modal (seção 11); mesmo tratamento aplicado aqui. =========================== */ @media (max-width:767px){ .config-footer button{ width:100%; min-height:46px; justify-content:center; } } /* =========================== 14. PAINEL DA EQUIPE (GESTOR) — 2026-08-21. gestor.css não tinha NENHUM @media — .gestor-cards-topo era grid fixo de 4 colunas (repeat(4,1fr)), sem reflow nenhum, e a tabela de Ranking (5 colunas: #, Consultor, Vendas, Crédito Total, % da Meta) não tinha tratamento algum. Cards colapsam pra 1 coluna (mesmo problema que os outros módulos já tinham antes da Fase 2); tabela vira lista de cards, mesma técnica de Assembleias/Calculadora — Consultor é o dado mais importante depois da posição, sobe pro topo do card com separador, mesma ideia do "Status" em Assembleias. =========================== */ @media (max-width:767px){ .gestor-cards-topo{ grid-template-columns:1fr; } .gestor-tabela-ranking thead{ display:none; } .gestor-tabela-ranking, .gestor-tabela-ranking tbody{ display:block; width:100%; } .gestor-tabela-ranking tbody tr{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; margin-bottom:12px; padding:14px; border-radius:14px; background:var(--gca-fundo-elevado); } .gestor-tabela-ranking tbody tr.tabela-vazio{ display:block; text-align:center; } .gestor-tabela-ranking tbody tr td{ display:block; padding:4px 0; border:none; } .gestor-tabela-ranking tbody tr td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:2px; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gca-texto-terciario); } .gestor-tabela-ranking td[data-label="#"]{ order:1; grid-column:1/-1; } .gestor-tabela-ranking tbody tr td[data-label="#"]::before{ display:none; } .gestor-tabela-ranking td[data-label="Consultor"]{ order:2; grid-column:1/-1; padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--gca-borda); } .gestor-tabela-ranking td[data-label="Vendas"]{ order:3; } .gestor-tabela-ranking td[data-label="Crédito Total"]{ order:4; } .gestor-tabela-ranking td[data-label="% da Meta"]{ order:5; grid-column:1/-1; } } /* =========================== 15. FEEDBACK TÁTIL — estado :active nas superfícies mais tocadas do sistema (achado na auditoria mobile, 2026-08-21). Antes disso, só a nav inferior e o painel "Mais" tinham qualquer feedback de toque próprio — o resto do app (cartões, linhas de tabela viradas card, botões) dependia só do flash cinza padrão do navegador (agora removido globalmente via -webkit-tap-highlight-color, ver css/style.css), então tocar neles não dava feedback nenhum. transform:scale + opacity de propósito, não cor: funciona igual nos dois temas sem precisar de token nenhum, e não briga com o transform:translateY(-6px) do :hover de .card (cards.css) — esta regra vem depois na cascata (nav-mobile.css é sempre o último CSS carregado) e vence quando as duas poderiam se aplicar. =========================== */ @media (max-width:767px){ .card, .dash-card, .linha-mobile, .funil-card, .btn-primary, .btn-secondary, .icon-btn, .comissoes-table tr.linha-venda, .assembleias-table tbody tr, .cvc-tabela-resumo tbody tr, .gestor-tabela-ranking tbody tr{ transition:transform .1s ease, opacity .1s ease; } .card:active, .dash-card:active, .linha-mobile:active, .funil-card:active, .btn-primary:active, .btn-secondary:active, .icon-btn:active, .comissoes-table tr.linha-venda:active, .assembleias-table tbody tr:active, .cvc-tabela-resumo tbody tr:active, .gestor-tabela-ranking tbody tr:active{ transform:scale(.97); opacity:.85; } /* .card:hover já move -6px no eixo Y (cards.css) — sem isto, tocar um KPI card do Dashboard faria o scale(.97) da regra acima brigar visualmente com esse deslocamento ainda ativo por causa do hover "grudado" que touchscreens simulam no primeiro toque. */ .card:active{ transform:scale(.97) translateY(0); } } /* =========================== 16. TECLADO MOBILE — evita o zoom automático do Safari iOS (achado na auditoria mobile, 2026-08-21). Todo campo abaixo tinha font-size < 16px nas regras base (comissoes.css/assembleias.css/ assinaturas.css) — abaixo desse valor, o iOS interpreta que o conteúdo é "pequeno demais" e dá zoom na página inteira ao focar o campo. Escopado só ao mobile de propósito: bumpar pra 16px nas regras base mudaria (ainda que 1-2px) a densidade visual do desktop, que o projeto trata como intocado nesta fase — aqui corrige só onde o bug realmente acontece. =========================== */ @media (max-width:767px){ .form-group input, .form-group select, .periodo-filtro input[type="date"], .mes-ano-campo input, .resultados-table input, .asn-pix-dados textarea{ font-size:16px; } } /* =========================== 17. ADMINISTRADOR — tabelas viram lista de cards + alternativa touch pro de "Gestores responsáveis" (usado 2x: Criar equipe e Editar equipe) ganha uma lista de checkboxes ao lado — ver sincronizarSelecaoMultiplaMobile() em js/administrador.js, que escreve direto no .selected de cada