/* ============================================================================ ORION — camada visual mobile / iPhone (2026-09-03) v4 ---------------------------------------------------------------------------- v4: safe-area + área de toque também para a NAV GLOBAL do ORION (.orion-global-header / .orion-nav-mobile / .orion-global-sidebar, injetada por orion-navigation.js nas telas que carregam session.js). Linkado também em balancete.html. ---------------------------------------------------------------------------- NÃO é um segundo ORION. Não muda lógica, nomes, status, permissões nem fluxos. Só ADAPTA a apresentação para iPhone, por cima das media queries que cada tela já tinha. v3 (correção urgente): CABEÇALHO no PWA standalone. Com apple-mobile-web-app-status-bar-style=black-translucent o conteúdo começa em y=0, SOB o relógio/bateria/Wi-Fi e a Dynamic Island — os botões do topo (menu ☰, voltar, sino, avatar, Sair) ficavam por baixo e não recebiam o toque. Aqui: padding-top = safe-area-inset-top + 12px em TODOS os padrões de header, + área de toque 52/48/44px nos controles. Tudo é "mobile-only": @media (max-width:480px|850px|900px) ou @supports(env(safe-area-inset)). Zero efeito no desktop dos operadores. Carregado nas 10 telas prioritárias: login-mc, index, dashboard, financeiro, notificacoes, central-atendimento, leads, james, administracao, admin. ========================================================================== */ /* ========================================================================== 1. UNIVERSAL — iPhone (<= 480px cobre 375 / 390 / 430) ========================================================================== */ @media (max-width: 480px) { /* iOS Safari dá zoom no viewport ao focar campo com fonte < 16px. As telas usam inputs de 8–13px. Só no iPhone, força 16px p/ o foco NÃO disparar zoom — sem mexer no tamanho no desktop. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* Não deixar o iOS inflar texto; matar arrasto/zoom lateral. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { max-width: 100%; overflow-x: hidden; } /* Área de toque mínima em navegação/abas/ações já existentes. */ .nav-item, .tab, .ca-nav a, .lead-actions button, .top-actions > button, .menu-toggle, .actions button { min-height: 40px; } /* Modais/drawers dentro da viewport (elementos já existentes). */ .lead-drawer { width: 100vw !important; } .quit-overlay { padding: 8px !important; } .quit-modal { width: calc(100vw - 16px) !important; max-width: none !important; } /* Filtros: 1 coluna quando há muitos campos (telas ddensas). */ .filter-panel { grid-template-columns: 1fr !important; } .notify-filters { grid-template-columns: 1fr !important; } /* Financeiro: qualquer grade de resumo/kpi em 1 coluna no iPhone. */ #geralResumoV10, .fin10-top, .fin10-metrics, .fin10-grid, .rec14-kpis, .rec14-actions, .rec14-grid { grid-template-columns: 1fr !important; } /* Gráficos Chart.js sem estourar a largura (só limita largura, não altura). */ canvas { max-width: 100% !important; } /* Mídia não estoura a tela. */ img, video, svg { max-width: 100%; height: auto; } } /* ========================================================================== 2. SAFE-AREA — notch / Dynamic Island / home indicator Só ACRESCENTA espaço. Vale em qualquer largura; custo zero no desktop (env(safe-area-inset-*) = 0 fora de tela com recorte). ========================================================================== */ @supports (padding: max(0px)) { /* Rodapé das áreas que rolam — acima da barra de gestos. */ @media (max-width: 480px) { .content, .leads-page, .notify-page { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } } /* ----------------------------------------------------------------------- CABEÇALHO NO iPhone (PWA standalone, status-bar-style=black-translucent) ----------------------------------------------------------------------- O conteúdo começa em y=0, SOB o relógio/bateria/Wi-Fi e a Dynamic Island. Sem isto, os botões do topo (menu ☰, voltar, sino, avatar, Sair) ficam por baixo da status bar e não recebem o toque. Solução: empurrar TODO cabeçalho para baixo do recorte — padding-top = safe-area-inset-top + 12px de folga mínima e dar altura suficiente para os controles. Vale só < 900px. */ @media (max-width: 900px) { /* Todos os padrões de header/topo das 7 telas prioritárias: .topbar -> dashboard, james .notify-top -> notificações .leads-top -> leads .ca-top -> central de atendimento .top -> financeiro .admin-shell header -> administracao .role-layout header -> admin .shell > .sidebar -> james (a sidebar empilha no topo < 1100px) */ .topbar, .notify-top, .leads-top, .ca-top, .top, .admin-shell > main > header, .role-layout > main > header, .shell > .sidebar { padding-top: calc(env(safe-area-inset-top) + 12px) !important; padding-bottom: 8px !important; padding-left: max(14px, env(safe-area-inset-left)) !important; padding-right: max(14px, env(safe-area-inset-right)) !important; height: auto !important; min-height: calc(58px + env(safe-area-inset-top)) !important; box-sizing: border-box; } /* (z-index / position dos headers: mantidos como cada tela já define — auditados, sem elemento transparente por cima roubando o toque.) */ /* ---- Áreas de toque dos controles do topo ---- */ /* Menu hambúrguer — 52x52, nunca colado na borda. */ .menu, .mobile-menu, .menu-toggle, .admin-shell .menu, .role-layout .mobile-menu { display: inline-flex !important; align-items: center; justify-content: center; width: 52px; height: 52px; min-width: 52px; font-size: 24px; margin: 0 4px 0 0; border-radius: 12px; -webkit-tap-highlight-color: transparent; flex: none; position: relative; z-index: 1; } /* Botão/atalho "voltar" (link com ← nas telas leads e notificações) — 48x48 clicáveis mesmo com o texto colapsado para ←. */ .leads-top > a, .notify-top > a, #backLink, #dashboardLink { display: inline-flex !important; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; font-size: 20px !important; flex: none; } .leads-top > a::after, .notify-top > a::after { font-size: 20px !important; } /* Sino / engrenagem / avatar / Sair — 44x44 e com espaçamento. */ .top-actions > button, .top-user button, .notify-top > button, .admin-user > b, .identity > b, .ca-top .ca-btn { min-width: 44px; min-height: 44px; } .top-actions { gap: 10px !important; } .admin-user, .identity, .top-user { gap: 10px !important; } /* "Sair" da Central de Notificações: a notifications.css esconde esse botão < 600px e a tela não tem menu no mobile — sem ele o usuário fica sem logout ali. Mantém visível (compacto) para não remover função. */ .notify-top > button { display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 12px; font-size: 13px; } /* Textos secundários do usuário/página fora do topo no celular (a prioridade é o clique; a informação continua no menu/tela). */ .admin-user span, .identity span, .top-user span, .admin-shell > main > header small, .role-layout > main > header small { display: none !important; } /* ------------------------------------------------------------------- NAV GLOBAL DO ORION (orion-navigation.js, via session.js) — presente em dashboard / financeiro / balancete / administracao / notificacoes / leads. O header dela é position:fixed;top:0 e NÃO tratava safe-area → no PWA standalone o ☰ e o "Sair" ficavam sob a status bar. Aqui: desce o header, aumenta a área de toque, e ajusta o padding-top do body para o conteúdo continuar livre. (orion-navigation.css carrega DEPOIS deste arquivo e usa !important, então subimos a especificidade com html/dupla-classe.) */ .orion-global-header { height: calc(64px + env(safe-area-inset-top)) !important; padding-top: env(safe-area-inset-top) !important; padding-left: max(10px, env(safe-area-inset-left)) !important; padding-right: max(10px, env(safe-area-inset-right)) !important; z-index: 72 !important; } html body.orion-global-nav-ready { padding-top: calc(64px + env(safe-area-inset-top)) !important; } .orion-global-sidebar { padding-top: env(safe-area-inset-top) !important; } .orion-nav-mobile { width: 48px !important; height: 48px !important; font-size: 22px !important; } .orion-global-logout { min-width: 44px !important; height: 44px !important; } } } /* ========================================================================== 3. CENTRAL DE ATENDIMENTO — lista → conversa → detalhes (drawer) Alinha ao breakpoint próprio da tela (@850). NÃO toca backend nem a lógica de atendimento: só apresentação + navegação por classe CSS. A tela já alterna lista/chat pela classe .viewing (definida pelo central-atendimento.js). Aqui: (a) barra "‹ Conversas" + "Detalhes" dentro do chat (injetada por orion-mobile.js, fora do #ca-ch que a JS reescreve), (b) a ficha (.ca-fi) vira gaveta lateral em vez de sumir. ========================================================================== */ @media (max-width: 850px) { .ca-app { height: 100dvh; } /* Barra de navegação mobile do chat (criada por orion-mobile.js). */ .ca-mnav { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ca-border, rgba(148,163,184,.10)); background: var(--ca-bg2, #0d1419); flex: none; } .ca-mnav button { background: var(--ca-panel, #111a20); border: 1px solid var(--ca-border2, rgba(148,163,184,.20)); color: var(--ca-text, #e8eef2); border-radius: 8px; padding: 9px 14px; font-size: 13px; min-height: 40px; cursor: pointer; } .ca-mnav-back { font-weight: 600; } .ca-mnav-fi { margin-left: auto; } /* Ficha do contato como gaveta deslizante (não some mais no mobile). */ .ca-body > .ca-fi { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); transform: translateX(100%); transition: transform .25s ease; z-index: 60; overflow-y: auto; border-left: 1px solid var(--ca-border2, rgba(148,163,184,.20)); box-shadow: -18px 0 45px rgba(0,0,0,.45); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .ca-body.show-fi > .ca-fi { transform: none; } /* Composer acima da barra de gestos. */ .ca-comp { padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)); } } /* A barra mobile só existe abaixo de 850px — esconde em telas maiores (caso o JS já a tenha injetado antes de um resize). */ @media (min-width: 851px) { .ca-mnav { display: none; } } /* ========================================================================== 4. CENTRAL DE ATENDIMENTO — celular / iPhone (<= 768px, v5, 2026-09-05) ---------------------------------------------------------------------------- SÓ <= 768px. Não toca tablet (>= 769) nem desktop. Não altera backend, lógica de atendimento, nomes, status nem fluxos — só apresentação: - topo (.ca-top) pode quebrar em linhas; nada é cortado; - KPIs em 2 colunas compactas; - zero rolagem horizontal; - os botões fixos "⌂ Início / ← Voltar" (orion-shortcuts.js) deixam de sobrepor o conteúdo — o topo abre espaço pra eles; - padding horizontal igual em todas as faixas empilhadas; - recuo fantasma de 46px no cabeçalho do chat removido. Este bloco vem DEPOIS do @supports/@media(max-width:900px) acima de propósito: precisa vencer o padding-top / min-height que aquele impõe. ========================================================================== */ @media (max-width: 768px) { /* Nada de rolagem lateral. */ html, body { max-width: 100%; overflow-x: hidden; } .ca-app { max-width: 100vw; overflow-x: hidden; } .ca-body, .ca-lwrap, .ca-chat, .ca-main { min-width: 0; max-width: 100%; } /* Padding horizontal ÚNICO nas faixas empilhadas (antes: 14 / 12 / 22). */ .ca-top, .ca-kpis, .ca-body, .ca-foot { padding-left: 12px !important; padding-right: 12px !important; } /* TOPO: quebra em linhas, cresce em altura, não corta nada. */ .ca-top { flex-wrap: wrap !important; align-items: center; justify-content: flex-start; column-gap: 10px; row-gap: 8px; height: auto !important; min-height: 0 !important; /* folga vertical para os botões fixos ⌂/← ancorados no canto sup-esq */ padding-top: calc(env(safe-area-inset-top, 0px) + 60px) !important; padding-bottom: 10px !important; } .ca-top .sp { display: none !important; } /* spacer flex:1 não faz sentido com wrap */ .ca-top .ca-clock { margin-left: auto; } /* relógio encosta à direita da 1ª linha */ .ca-top .ca-btn, .ca-top .ca-pill, .ca-top .ca-camila-state { flex: 0 0 auto; } /* "⌂ Início / ← Voltar" (orion-shortcuts.js): compacta e mantém ACIMA do conteúdo — o padding-top do .ca-top reserva a faixa. */ .orion-esc { gap: 6px; } .orion-esc a, .orion-esc button { min-width: 44px !important; min-height: 44px !important; padding: 0 10px !important; font-size: 12px !important; } /* KPIs: 2 colunas compactas. */ .ca-kpis { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .ca-kpi { padding: 11px 12px !important; gap: 9px !important; align-items: center; } .ca-kpi .ic { width: 32px !important; height: 32px !important; } .ca-kpi .ic svg { width: 16px !important; height: 16px !important; } .ca-kpi .v { font-size: 18px !important; } .ca-kpi .k, .ca-kpi .s { font-size: 10.5px; } /* Rodapé: quebra em vez de estourar a largura. */ .ca-foot { flex-wrap: wrap; row-gap: 4px; } .ca-foot .sp { display: none; } /* Cabeçalho do chat: sem o recuo de 46px (o "voltar" agora é o .ca-mnav, que fica FORA do #ca-ch). */ .ca-ch .ca-head-assignment { margin-left: 0 !important; } /* Mensagens ocupam melhor a largura estreita. */ .ca-m { max-width: 88%; } }