/* ========================================================================== EMME CRM — navegação e acessibilidade no celular Carregado por último (via PWA_HEAD_TAGS) para vencer o CSS das telas. Alvo de toque mínimo de 48px e um item de menu por linha. ========================================================================== */ /* Botão de ativar notificações: vive dentro do menu, nunca flutuando */ .emme-notify-btn { display: block; width: 100%; margin: 16px 0 4px; padding: 13px 14px; min-height: 48px; border: 1px solid #344054; background: #1d2939; color: #fff; border-radius: 11px; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; } .emme-notify-btn:hover { background: #243244; } .emme-notify-btn:disabled { opacity: .7; cursor: default; } .emme-notify-btn[hidden] { display: none; } .emme-menu-close { display: none; } @media (max-width: 850px) { /* ---------- Menu do dashboard (.sidebar / .nav) ---------- O submenu é flex no desktop; no celular vira bloco, senão o flex-shrink encolhe cada item e eles acabam espremidos dois por linha. */ .nav .gv-submenu { margin: 2px 0 12px 10px; padding-left: 10px; } .nav .gv-submenu.open { display: block !important; } .nav .gv-submenu button { display: block; width: 100% !important; text-align: left; font-size: 14px; padding: 13px 14px; margin: 4px 0; min-height: 48px; white-space: normal; border-radius: 10px; } .nav .gv-module .gv-parent { display: flex !important; align-items: center; justify-content: space-between; width: 100% !important; min-height: 50px; font-size: 13.5px; padding: 13px 14px; } .nav > button { width: 100% !important; min-height: 48px; font-size: 14px; } .nav .gv-parent .gv-arrow { float: none; } .sidebar { width: min(330px, 88vw); overflow-y: auto; padding: 18px 16px calc(90px + env(safe-area-inset-bottom)); } /* O menu precisa passar por cima do cabeçalho fixo (z-index 9000), senão o topo do menu — inclusive o botão de fechar — fica inalcançável. */ .app.menu-open .sidebar, .app-shell.menu-open .crm-sidebar { z-index: 9500 !important; } .app.menu-open::after, .app-shell.menu-open::after { z-index: 9400 !important; } /* ---------- Menu das demais telas (.crm-sidebar) ---------- A posição de "escondido" precisa acompanhar a largura nova, senão sobra uma faixa do menu aparecendo na borda esquerda com o menu fechado. */ .crm-sidebar { width: min(330px, 88vw); left: calc(-1 * min(330px, 88vw) - 12px); overflow-y: auto; padding-bottom: calc(80px + env(safe-area-inset-bottom)); } .app-shell.menu-open .crm-sidebar { left: 0; } .crm-sidebar .module-links a { display: flex; align-items: center; min-height: 48px; font-size: 14.5px; padding: 12px 14px; border-radius: 10px; } .crm-sidebar .module-title { min-height: 50px; display: flex; align-items: center; font-size: 13.5px; padding: 12px 14px; } .app-shell.menu-open::after { content: ''; position: fixed; inset: 0; background: rgba(16,24,40,.55); z-index: 1999; } /* Itens "em breve" não fazem nada e roubavam o topo da tela pequena */ .nav button[disabled], .crm-sidebar .future { display: none !important; } /* Fechar o menu com um toque. Fixo (e não absoluto) para continuar visível enquanto a pessoa rola a lista de módulos. */ .app.menu-open .emme-menu-close, .app-shell.menu-open .emme-menu-close { display: flex; align-items: center; justify-content: center; position: fixed; top: 12px; left: calc(min(330px, 88vw) - 54px); width: 42px; height: 42px; border: 0; border-radius: 11px; background: #1d2939; color: #fff; font-size: 18px; cursor: pointer; z-index: 9600; } .menu-toggle { min-width: 48px; min-height: 48px; font-size: 20px; } /* Sino de alertas no rodapé, para não cobrir o cabeçalho. `top: auto` é obrigatório: o CSS base fixa top:52px e o elemento esticaria. */ /* (quando o sino está no cabeçalho — .no-header — esta regra não se aplica) */ .emme-bell:not(.no-header) { top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; right: 14px !important; min-height: 48px; padding: 12px 16px; font-size: 15px; } .emme-v11-float { left: 12px; right: 12px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); } /* 16px evita o zoom automático do iOS ao focar um campo */ input, select, textarea { font-size: 16px; min-height: 46px; } .btn, button.btn { min-height: 46px; } table { font-size: 13.5px; } } /* ========================================================================== Padrão das telas no celular: nada pode ficar mais largo que a tela. Causa comum encontrada tela a tela: grades com colunas "1fr" (que não encolhem abaixo do conteúdo) e tabelas largas sem rolagem própria. ========================================================================== */ @media (max-width: 850px) { /* Cabeçalho das telas: o título encolhe/quebra e os botões (sino, Sair) ficam visíveis */ .crm-top { gap: 8px; } .crm-top .top-left { flex: 1 1 auto; min-width: 0; gap: 8px; } .crm-top .top-left > * { min-width: 0; } .crm-top .page-title, .emme-hdr-title { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .crm-top .top-user { flex: none; } /* Grades: filhos podem encolher; colunas nunca maiores que a tela */ .kpis > *, .intel-kpis > *, .grid2 > *, .intel-grid > *, .ops-grid > *, .twocol > *, .grid > *, .gv-dtf-layout > *, .gv-dtf-inputs > *, .commercial-kpis > *, .commercial-grid > * { min-width: 0; } .grid2, .intel-grid, .ops-grid, .twocol, .gv-dtf-layout { grid-template-columns: minmax(0, 1fr) !important; } .kpis, .intel-kpis { gap: 10px !important; } .gv-dtf-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .gv-dtf-inputs input, .gv-dtf-inputs select { width: 100%; } /* Cartões de número: valores grandes cabem em duas colunas */ .kpi { padding: 14px !important; } .kpi-value { font-size: 19px !important; overflow-wrap: anywhere; line-height: 1.2; } .kpi-label { font-size: 10.5px !important; letter-spacing: .3px !important; } /* Tabelas largas rolam dentro do próprio cartão, não a página inteira */ div.table, .intel-card > div:has(> table), .ops-card > div:has(> table), .box > div:has(> table) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Faixas de filtros/abas em linha: rolam de lado */ .tf-chips { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tf-chips::-webkit-scrollbar { display: none; } .tf-chips > * { flex: none; } /* Barra de acesso rápido do rodapé: todos os atalhos cabem na largura */ .ar-bottom a { min-width: 0; white-space: nowrap; } /* sem overflow:hidden: a bolinha do "+ Novo" sobe acima da barra e seria cortada */ .ar-bottom a.ar-novo { overflow: visible; } } @media (max-width: 560px) { /* Formulários em duas colunas viram uma coluna no celular */ form .grid, .box .grid { grid-template-columns: minmax(0, 1fr) !important; } } /* A faixa "O que fazer hoje" da Visão Geral tem uma lista dentro de cada cartão: em duas colunas o nome do cliente fica ilegível no celular. */ @media (max-width: 860px) { .kpis.ov-foco-kpis { grid-template-columns: minmax(0, 1fr) !important; } } /* Indicadores: um por linha ate 900px — mesmo ponto em que as tabelas do financeiro viram cartao, para nao existir faixa em que a tabela ja e cartao mas os indicadores ainda estao espremidos em tres colunas de ~142px. Em duas ou tres colunas o valor quebra no meio ("R$" numa linha, o numero noutra) e o terceiro bloco fica orfao embaixo. */ @media (max-width: 900px) { .kpis, .intel-kpis { grid-template-columns: minmax(0, 1fr) !important; } } /* ================= Tabela em cartoes no celular ================= Tabela larga do financeiro so cabe no celular com rolagem lateral, e o que fica escondido e justamente o fim da linha: valor, status e o botao de acao. Abaixo de 900px cada vira um cartao. No computador nada muda. Como usar: por "cartoes" na div .table e dar um papel a cada : cc-titulo nome principal, primeira linha a esquerda cc-tag etiqueta curta (status/tipo), a direita do titulo cc-desc descricao, largura toda, em cinza cc-meta campo com rotulo; varios ficam lado a lado (use .meio p/ 2 por linha em vez de 3, e .cc-fim para alinhar a direita) cc-rodape linha de pe, largura toda, separada por um filete cc-acao botao de acao, ocupa a largura toda O rotulo sai de data-rotulo="..." no proprio . */ @media (max-width: 900px) { .cartoes { overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; margin-top: 12px; } /* thead escondido por recorte, e nao com display:none, para o leitor de tela continuar anunciando o nome de cada campo. */ .cartoes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cartoes table, .cartoes tbody { display: block; width: 100%; } .cartoes tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; border: 1px solid #e4e7ec; border-radius: 14px; background: #fff; padding: 13px 15px; margin: 0 0 10px; box-shadow: 0 1px 2px rgba(16,24,40,.05); } /* border/padding com !important: o