/* =========================================================================== naveg-mobile.css — camada mobile do painel Naveg Hub. --------------------------------------------------------------------------- Escopo: AMBIENTE ISOLADO (_visual). Nao existe no repositorio. Tudo abaixo vive dentro de @media (max-width:720px). Acima disso o painel fica byte a byte igual ao de hoje — a sala de controle nao muda. Medicao que originou cada regra (iframe de 390px, naveg_hub.html): sidebar 246px fixa sobre 390px de tela .... vira gaveta off-canvas 95 elementos entre 9px e 11px ............. piso de fonte 38 alvos de toque abaixo de 40px .......... piso de 40px topbar com 101px de altura ................ compacta Tokens vindos do DESIGN.md do proprio projeto. Sem emoji (PRODUCT.md). =========================================================================== */ @media (max-width: 720px) { /* ========================================================================= ATENCAO AO PREFIXO html.nv-top NESTE BLOCO. As paginas rodam em dois contextos: sozinhas na janela, e embutidas no iframe do naveg_hub. O JS marca so no primeiro. Sem esse prefixo, a pagina embutida ganhava um segundo menu e um segundo botao "Acoes" empilhados sob os do hub — e, pior, a sidebar dela (a lista de conversas do whatsapp) virava gaveta escondida sem nenhum botao que a abrisse, sumindo com o conteudo. O default (sem a classe) e o layout normal: se o JS nao rodar, nada some. ========================================================================= */ /* --- 1. Sidebar vira gaveta off-canvas --------------------------------- */ /* Antes: position:fixed com 246px, plantada por cima do conteudo, sem jeito de sair. Agora sai da tela e volta por um botao. */ html.nv-top .sidebar { position: fixed !important; top: 0; left: 0; height: 100vh; height: 100dvh; /* desconta a barra do navegador movel */ width: min(84vw, 300px) !important; max-width: 300px; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); z-index: 1200; padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; overflow-y: auto; } html.nv-top body.nv-drawer .sidebar { transform: translateX(0); } /* O estado "collapsed" do desktop nao faz sentido numa gaveta. */ html.nv-top .sidebar.collapsed { width: min(84vw, 300px) !important; } /* Backdrop: escurece o conteudo e fecha ao toque. */ .nv-backdrop { position: fixed; inset: 0; background: rgba(4, 8, 14, .62); z-index: 1150; opacity: 0; pointer-events: none; transition: opacity .26s ease; } html.nv-top body.nv-drawer .nv-backdrop { opacity: 1; pointer-events: auto; } /* Botao de abrir — desenhado em CSS puro, sem icone externo. */ .nv-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 42px; flex: none; padding: 0 10px; margin-right: 2px; background: transparent; border: 1px solid var(--border, #1e2b3d); border-radius: 8px; cursor: pointer; } /* Quando o botao carrega a marca do WhatsApp em vez das tres barras. */ .nv-burger.nv-burger-marca { flex-direction: row; align-items: center; justify-content: center; gap: 0; padding: 0; } .nv-burger.nv-burger-marca svg { width: 24px; height: 24px; color: var(--accent, #2dd4bf); fill: currentColor; } .nv-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--text-secondary, #93a4bb); } .nv-burger:active { background: rgba(45, 212, 191, .1); } .nv-burger:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; } /* --- 1a. A casca vira uma coluna so ------------------------------------ */ /* O naveg_hub monta a casca com `.app { display:grid; grid-template-columns: auto 1fr }` — trilha 1 para a sidebar, trilha 2 para o main. Ao virar gaveta, a sidebar ganha position:fixed e SAI DO FLUXO, deixando de ocupar celula. O grid nao encolhe por isso: o `main` escorrega para a trilha 1 (auto, do tamanho do conteudo) e a trilha 2 (1fr) fica VAZIA. Resultado medido a 505px: main com 340px e uma faixa morta de 165px. Uma coluna so resolve, e vale para qualquer nome de casca usado no painel. */ html.nv-top .app, html.nv-top .shell, html.nv-top .layout { grid-template-columns: 1fr !important; grid-template-areas: none !important; } /* O conteudo ocupa a largura toda: a gaveta flutua, nao empurra. */ .content, .main, .viewframe, #viewFrame { width: 100% !important; } html.nv-top .app > main, html.nv-top .shell > main, html.nv-top .layout > main { grid-column: 1 / -1 !important; min-width: 0; } /* --- 2. Piso de legibilidade ------------------------------------------ */ /* 95 elementos estavam entre 9px e 11px. Em telefone isso nao se le. O piso e 12.5px; quem ja era maior nao e tocado. */ body { -webkit-text-size-adjust: 100%; } .nv-mob-sm { font-size: 12.5px !important; line-height: 1.45 !important; } /* --- 3. Alvos de toque ------------------------------------------------- */ /* 40px e o minimo confortavel para o polegar. Aplica altura minima sem esticar o que ja e grande. */ /* Seletor por [type] nao serve: campo sem atributo type e text por padrao, mas [type="text"] nao casa com ele. A busca da topbar ficava com 20px de altura por causa disso. Pega todo input, menos os que nao sao clicaveis por area (checkbox/radio/range tem alvo proprio). */ .sidebar a, .sidebar .item, .nav-item, button, .btn, [role="button"], select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) { min-height: 40px; } .sidebar a, .sidebar .item, .nav-item { display: flex; align-items: center; } /* Botao dentro de celula de tabela nao precisa de 40px — viraria tabelao. */ td button, td .btn, th button { min-height: 32px; } /* iOS aplica zoom no foco quando a fonte do campo e menor que 16px. */ input, select, textarea { font-size: 16px !important; } /* --- 4. Topbar compacta ------------------------------------------------ */ /* Tinha 101px de altura por quebrar em duas linhas. */ /* Uma linha so, rolando na horizontal. Empilhar (flex-wrap:wrap) parecia a solucao obvia e era pior: a barra foi de 101px para 107px de altura, comendo 13% da tela do telefone. Barra de ferramentas que rola de lado e o padrao movel correto — nada fica inalcancavel e a altura e fixa. */ .topbar { min-height: 52px !important; height: auto; padding: 8px 12px !important; gap: 8px !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-top: calc(8px + env(safe-area-inset-top)); } .topbar::-webkit-scrollbar { display: none; } .topbar > * { flex: none; } /* --- 4.1 Topbar recolhida atras de um botao ---------------------------- */ /* Rolar de lado resolvia o transbordo mas escondia acao: ninguem descobre um botao que so aparece arrastando. Aqui a barra guarda so o titulo (e o menu), e o resto — busca e acoes — abre num painel. Nada de mover DOM: as paginas consultam seletores como ".topbar .search" no proprio JS delas. Só a apresentacao muda; a arvore fica intacta. */ html.nv-top .topbar > *:not(h1):not(.nv-burger):not(.nv-tb-toggle) { display: none; } .nv-tb-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; height: 40px; padding: 0 12px; background: transparent; color: var(--text-secondary, #93a4bb); border: 1px solid var(--border, #1e2b3d); border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; } .nv-tb-toggle:active { background: rgba(45, 212, 191, .1); } .nv-tb-toggle:focus-visible { outline: 2px solid var(--accent, #2dd4bf); outline-offset: 2px; } /* seta que gira ao abrir — desenhada em CSS, sem icone externo */ .nv-tb-toggle i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s ease; } .topbar.nv-open .nv-tb-toggle { color: var(--accent, #2dd4bf); border-color: var(--accent, #2dd4bf); } .topbar.nv-open .nv-tb-toggle i { transform: rotate(-135deg) translate(-2px, -2px); } /* Aberta: a barra cresce para baixo e revela o que estava recolhido. */ .topbar.nv-open { flex-wrap: wrap !important; overflow: visible; row-gap: 8px !important; padding-bottom: 12px !important; } html.nv-top .topbar.nv-open > *:not(h1):not(.nv-burger):not(.nv-tb-toggle) { display: flex; flex: 1 1 100%; min-width: 0; } /* Dentro do painel aberto, as acoes ficam lado a lado e respiram. */ .topbar.nv-open .tb-actions, .topbar.nv-open .topbar-right { flex-wrap: wrap; gap: 8px; } .topbar.nv-open .search { width: 100%; } .topbar.nv-open .search input { width: 100%; } .topbar .title, .topbar h1, .topbar .crumb { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* --- 5. Conteudo respira ----------------------------------------------- */ .card, .panel, .box, .sec, .section { padding: 12px !important; } h1 { font-size: 19px !important; } h2 { font-size: 16px !important; } h3 { font-size: 14.5px !important; } /* Rolagem vertical com inercia e sem "quique" preso. */ .content, .dt-body, .nv-scroll { -webkit-overflow-scrolling: touch; } /* Respeita o recorte inferior (iPhone). */ body { padding-bottom: env(safe-area-inset-bottom); } } /* --- 6. Telefone estreito (<=400px) -------------------------------------- */ /* Aqui havia um `display:none` em .topbar .subtitle, .topbar .meta e .badge-secundario. Foi removido de proposito: esconder informacao para ganhar espaco e exatamente o que nao se quer neste painel — nenhum icone nem opcao pode ser ignorado. Quem ganha espaco agora e o espacamento. */ @media (max-width: 400px) { .card, .panel, .box { padding: 10px !important; } .topbar .subtitle, .topbar .meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* --- 7. Controles moveis nao vazam para o desktop ------------------------ */ /* O JS cria o menu e o botao "Acoes" em qualquer largura, mas o estilo deles vive so na media query de 720px. Acima disso apareciam sem estilo nenhum — medidos com 4px e 19px de altura, sujando a barra. Fora da largura movel eles simplesmente nao existem visualmente. */ @media (min-width: 721px) { .nv-burger, .nv-tb-toggle, .nv-backdrop { display: none !important; } } @media (prefers-reduced-motion: reduce) { .sidebar, .nv-backdrop { transition: none !important; } }