/* ===== hub-dispositivos.css — device-scoped layer (phones / Fold / iPad) ===== EVERY top-level selector in this file MUST start with html.hx- (grep-audited in review). No bare media queries: a narrow desktop window must keep today's exact behavior — only devices classified by js/modo.js get hx-* classes. Desktop gets no class, so this whole file is inert there. Loaded AFTER hub.css so same- specificity rules here win; hub.css itself is never edited by the mobile work. */ /* ---- A) html.hx-phone — phone base (applies to BOTH simples and completo) ---- */ /* chavinha (mode toggle) + per-tab switch — mounted by modo.js only on phones */ html.hx-phone #hxModo{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-left:auto;flex:0 0 auto} html.hx-phone #hxModo .hx-modo-op{border:0;background:transparent;color:var(--tx2);font-size:.72rem;padding:7px 12px;min-height:34px;cursor:pointer} html.hx-phone #hxModo .hx-modo-op.on{background:var(--panel2);color:var(--tx)} html.hx-phone #hxModoTab{min-height:34px;flex:0 0 auto} /* base: stop mobile-browser text inflation and tap flash */ html.hx-phone{-webkit-text-size-adjust:100%} html.hx-phone body{-webkit-tap-highlight-color:transparent} /* touch targets — inline per-element paddings (tight table buttons) still win */ html.hx-phone .btn{min-height:42px;padding:9px 16px} html.hx-phone .hx-btnx{min-height:40px;min-width:40px} html.hx-phone .chip{min-height:36px;display:inline-flex;align-items:center} html.hx-phone #hxBurger{width:42px;height:42px} /* 16px inputs: kills the focus auto-zoom on Android Chrome / iOS Safari */ html.hx-phone input,html.hx-phone select,html.hx-phone textarea, html.hx-phone .hx-toolbar .hx-search{font-size:16px} /* rede de segurança: muitas telas trazem `style="width:240px"` inline em campo de formulário — larguras pensadas no desktop. Fora de tabela (onde a rolagem lateral é intencional), nenhum campo pode passar da largura da tela. */ html.hx-phone #conteudo :not(td):not(th)>input, html.hx-phone #conteudo :not(td):not(th)>select, html.hx-phone #conteudo :not(td):not(th)>textarea, html.hx-phone .modal input,html.hx-phone .modal select,html.hx-phone .modal textarea{max-width:100%} /* KPI cards: 2 per row at 412px (auto-fit minmax(190px) collapses to 1 col there). minmax(0,1fr) e não 1fr: `1fr` respeita o tamanho mínimo do CONTEÚDO, então um valor longo (um número grande sem espaço, um SKU comprido) alarga a coluna e leva a página junto. */ html.hx-phone .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html.hx-phone .card{padding:12px} html.hx-phone .card .val{font-size:1.2rem} html.hx-phone .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} /* content area breathes above the gesture bar. min-width:0 (27/07/2026): o é flex e o #main é item flex, cujo tamanho mínimo automático é o do conteúdo. Bastava UM filho largo (uma tabela, um título comprido, uma linha sem espaço) pra esticar o #main além da tela e fazer a PÁGINA INTEIRA rolar de lado — o sintoma clássico de "não cabe no celular". Com 0, o filho largo rola dentro da própria caixa (.hx-wrap e afins) e a página fica fixa. */ html.hx-phone #main{padding:14px 12px calc(20px + env(safe-area-inset-bottom));min-width:0} /* ---- topbar compacta (27/07/2026) -------------------------------------------------- O que estava errado: a 412px o cabeçalho ocupava ~215px de uma tela de 915 — título, chip de saúde, chavinha, SETE chips de canal quebrando em 3 linhas, o chip do usuário e mais três botões. Um quarto da tela, em toda aba, antes de qualquer conteúdo. Agora: LINHA 1 = ☰ + título + saúde + chavinha; LINHA 2 = faixa de canais que rola no dedo. Conta e ações saem da topbar (vão pro menu lateral em Completo e pra aba "Mais" em Simples — ver montarUserChip() no core.js). ~92px no lugar de ~215px. */ html.hx-phone #topbar{gap:6px;row-gap:6px;padding:8px 0} /* flex-basis 0 (não `auto`): a quebra de linha do flex usa o tamanho HIPOTÉTICO do item, não o mínimo. Com basis auto um título comprido ("RH & Avaliações — competências e potencial…") vale ~712px na conta da quebra e é jogado sozinho pra uma linha só dele ANTES de encolher. Com basis 0 ele fica na 1ª linha e cresce no espaço que sobra, com reticências. */ html.hx-phone #topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; font-size:1rem;flex:1 1 0} /* chip de saúde vira só o pontinho: o texto ("tudo em dia") custa ~110px que o título quer */ html.hx-phone #hxHealth{padding:6px 9px;flex:0 0 auto} html.hx-phone #hxHealth .hx-txt{display:none} html.hx-phone #hxHealth .hx-pop{position:fixed;left:12px;right:12px;top:auto; bottom:calc(14px + env(safe-area-inset-bottom));max-width:none;min-width:0} html.hx-phone #hxModo .hx-modo-op{font-size:.68rem;padding:6px 9px} /* itens grandes e ocasionais descem pra 2ª linha em vez de espremer o título */ html.hx-phone #topbar .testmode{order:97} html.hx-phone #hxModoTab{order:98} /* faixa de canais: UMA linha, rolagem horizontal, sem barra à mostra. min-width:0 é obrigatório: como item flex, o tamanho mínimo automático dele é o CONTEÚDO (os 7 chips em nowrap ≈ 950px) — sem isto ele empurra a topbar, o #main e a página inteira pra 950px em vez de rolar dentro da própria faixa. O background também é obrigatório (28/07): a faixa sangra 12px para FORA da #topbar, que é sticky e só pinta a própria caixa — sem ele o conteúdo da página aparecia rolando por baixo nas duas tiras laterais e o cabeçalho parecia furado. */ html.hx-phone #hxCanais{display:flex;order:99;flex:0 0 100%;min-width:0;gap:6px;flex-wrap:nowrap; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--bg); /* sangra até a borda da tela: a faixa "continua" visualmente, o que sinaliza que rola */ margin:0 -12px;padding:0 12px 2px} html.hx-phone #hxCanais::-webkit-scrollbar{display:none} html.hx-phone #hxCanais .chip{flex:0 0 auto} /* tables: keep horizontal scroll, pin the anchor column (Canal/SKU/Dia) */ html.hx-phone td,html.hx-phone th{padding:10px 12px} html.hx-phone .hx-wrap td:first-child,html.hx-phone .hx-wrap th:first-child{ position:sticky;left:0;background:var(--panel);z-index:2; box-shadow:6px 0 8px -6px rgba(0,0,0,.5)} html.hx-phone .hx-wrap th:first-child{background:var(--panel2);z-index:3} html.hx-phone .hx-wrap tr:hover td:first-child{background:var(--panel2)} /* modals become bottom sheets (thumb-reachable, keyboard-friendly) */ html.hx-phone .modal{align-items:flex-end} html.hx-phone .modal .box{width:100vw;max-width:none;max-height:94vh;max-height:94dvh; border-radius:16px 16px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))} html.hx-phone #hxConfirm{align-items:flex-end} html.hx-phone #hxConfirm .hx-cbox{width:100vw;border-radius:16px 16px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom))} html.hx-phone #hxConfirm .hx-cbtns{flex-direction:column-reverse} html.hx-phone #hxConfirm .hx-cbtns .btn{width:100%;min-height:48px} /* range-picker popover: 258px absolute clips inside scroll parents — anchor it low */ html.hx-phone .cal-pop{position:fixed;left:12px;right:12px;top:auto; bottom:calc(16px + env(safe-area-inset-bottom));width:auto;z-index:70} html.hx-phone .cal-grid{grid-template-columns:repeat(7,1fr)} html.hx-phone .cal-d{width:auto;height:42px} html.hx-phone .cal-sem span{width:auto} /* financial waterfall: 210px labels overflow a 412px viewport */ html.hx-phone .wfrow{font-size:.74rem} html.hx-phone .wfrow .wl{width:118px} html.hx-phone .wfrow .wt{width:92px} /* side-by-side desktop grids (Cockpit cascade, Fluxo entradas/saídas, Elasticidade, Fechamento) carry class .hx-duo in the markup and stack into one column on phones. !important is required to beat their inline grid-template-columns — sanctioned exception, keep it scoped to .hx-duo only. minmax(0,1fr) e não 1fr (27/07): a trilha `1fr` ainda respeita o tamanho MÍNIMO do conteúdo, então um filho largo (o Fechamento tinha um de 442px) empurrava a coluna além da tela mesmo já empilhada numa coluna só. */ html.hx-phone .hx-duo{grid-template-columns:minmax(0,1fr) !important} html.hx-phone .hx-duo>*{min-width:0} /* 27/07: três grades inline de desktop ficaram fora dessa lista e, mesmo sem estourar a tela, viravam colunas ilegíveis a 412px — Concorrência (1.4fr 1fr), o painel de Postagem (1.6fr 1fr) e a régua de 4 KPIs dos Postos de Trabalho. As duas primeiras viraram .hx-duo; a de 4 KPIs vira 2×2, que é o que cabe. */ html.hx-phone .hx-quad{grid-template-columns:repeat(2,minmax(0,1fr)) !important} html.hx-phone .hx-quad>*{min-width:0} /* financial calendar month grid: 7 cells of nowrap currency floor at min-content (~660px total) and force page-level scroll; minmax(0,1fr) lets cells shrink — the values already ellipsize (.calv has overflow:hidden) */ html.hx-phone .calgrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px} html.hx-phone .calc{min-height:56px;padding:4px 5px} html.hx-phone .cald{font-size:.64rem} html.hx-phone .calv{font-size:.56rem} /* office scene (full mode): pan horizontally instead of shrinking to a stamp */ html.hx-phone #officeWrap>div:first-child{overflow-x:auto;-webkit-overflow-scrolling:touch} html.hx-phone #officeSvg{min-width:780px} /* chat: full-screen app feel on phones (drawer CSS itself stays untouched) */ html.hx-phone #chatBox{width:100vw;height:100dvh} html.hx-phone #chatRodape{padding-bottom:calc(10px + env(safe-area-inset-bottom))} html.hx-phone #chatTexto{font-size:16px;min-height:48px} html.hx-phone #chatEnviarBtn{min-width:48px;min-height:48px} html.hx-phone .ch-b{font-size:.9rem;max-width:92%} html.hx-phone #chatVoltar{display:inline-flex;min-height:40px;align-items:center} html.hx-phone #chatFechar{display:none} html.hx-phone #chatInfo{display:none} /* toast: bottom-right desktop anchor sits under the thumb/gesture area */ html.hx-phone #toast{left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));max-width:none} /* Conta do usuário fora da topbar (27/07/2026): no celular o #userChip é montado dentro do menu lateral (core.js), como um bloco no rodapé do drawer. Em Simples o drawer nem abre — quem cobre a conta lá é a aba "Mais", que já tem senha, 2FA e sair. */ html.hx-phone #side #userChip{display:flex;flex-wrap:wrap;gap:6px;margin:16px 4px 8px; padding:10px 12px;border-radius:12px;font-size:.8rem} html.hx-phone #side #userChip .hx-btnx{min-height:38px} /* ---- B) html.hx-phone.hx-completo — full-mode-only refinements ---- */ /* ---- C) html.hx-phone.hx-simples — simplified shell (bottom nav, Início, resumos) ---- */ /* bottom navigation: mounted by modo.js on phones; visible only in simples */ html.hx-phone #hxNav{display:none} html.hx-phone.hx-simples #hxNav{position:fixed;left:0;right:0;bottom:0;display:flex; background:var(--panel);border-top:1px solid var(--border);z-index:45; padding-bottom:env(safe-area-inset-bottom)} html.hx-phone.hx-simples #hxNav .hx-nav-it{flex:1;min-height:56px;border:0;background:transparent; color:var(--tx2);display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;font-family:inherit;position:relative;cursor:pointer} html.hx-phone.hx-simples #hxNav .hx-nav-it.on{color:var(--verde);box-shadow:inset 0 2px 0 var(--verde)} html.hx-phone.hx-simples #hxNav .hx-nav-ic{font-size:1.15rem;line-height:1} html.hx-phone.hx-simples #hxNav .hx-nav-rot{font-size:.6rem;text-transform:uppercase;letter-spacing:.5px} html.hx-phone.hx-simples #hxNav .hx-nav-badge{position:absolute;top:6px;right:calc(50% - 24px); background:rgba(242,109,109,.16);color:var(--verm);border:1px solid rgba(242,109,109,.4); border-radius:10px;font-size:.6rem;padding:0 6px;font-weight:700} /* room for the bar + declutter: burger and user chip live in "Mais" on simples */ html.hx-phone.hx-simples #main{padding-bottom:calc(76px + env(safe-area-inset-bottom))} html.hx-phone.hx-simples #toast{bottom:calc(76px + env(safe-area-inset-bottom))} html.hx-phone.hx-simples #hxBurger{display:none} /* channel strip only where canal matters (set per view by modo.js). Esconde a FAIXA inteira: a regra antiga só apagava os .chip[data-c] e deixava TikTok/Shein (que não têm data-c) boiando sozinhos numa linha vazia. */ html.hx-phone.hx-sem-canais #hxCanais{display:none} /* shared narrow column for simplified-native screens and resumos */ html.hx-phone .rs-wrap{max-width:560px;margin:0 auto} html.hx-phone .rs-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:4px} html.hx-phone .rs-lista{display:flex;flex-direction:column;gap:6px} html.hx-phone .rs-row{display:flex;align-items:center;gap:10px;min-height:44px;background:var(--panel); border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:.82rem} html.hx-phone .rs-row>b:last-child{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap} html.hx-phone .rs-row .rs-bar{flex:1;height:8px;background:var(--panel2);border-radius:4px;overflow:hidden} html.hx-phone .rs-row .rs-bar i{display:block;height:100%;background:var(--verde);border-radius:4px} html.hx-phone .rs-row2{flex-wrap:wrap} html.hx-phone .rs-row2 .rs-quebra{flex:1 1 100%;color:var(--tx2);font-size:.78rem} html.hx-phone .rs-acao{width:100%;min-height:52px;border:1px solid var(--border);border-radius:12px; background:var(--panel);color:var(--tx);font-size:.92rem;font-weight:700;cursor:pointer; font-family:inherit;margin:12px 0 0} html.hx-phone .rs-vercompleto{width:100%;min-height:48px;border:1px dashed var(--border);border-radius:12px; background:transparent;color:var(--tx2);font-size:.85rem;cursor:pointer;font-family:inherit;margin:14px 0 4px} /* "Mais" directory */ html.hx-phone .hx-mais-it{display:flex;align-items:center;gap:10px;width:100%;min-height:48px; padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:12px; margin-bottom:8px;color:var(--tx);font-size:.9rem;cursor:pointer;font-family:inherit;text-align:left} html.hx-phone .hx-mais-it .badge{margin-left:auto;background:rgba(242,109,109,.16);color:var(--verm); border:1px solid rgba(242,109,109,.4);border-radius:10px;font-size:.62rem;padding:1px 7px;font-weight:700} html.hx-phone .hx-mais-it .chev{margin-left:auto;color:var(--tx2)} html.hx-phone .hx-mais-it .badge ~ .chev{margin-left:8px} html.hx-phone .hx-mais-conta{font-size:.85rem;color:var(--tx2);margin:0 2px 10px} /* Início */ html.hx-phone .in-oi{font-size:1.35rem;font-weight:800;margin-top:6px} html.hx-phone .in-data{font-size:.78rem;color:var(--tx2);margin:2px 0 14px;text-transform:capitalize} html.hx-phone .in-teste{background:#3b2f10;color:var(--amarelo);border:1px solid #5c4a1a; padding:8px 12px;border-radius:10px;font-size:.75rem;margin-bottom:12px} html.hx-phone .in-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} html.hx-phone .in-kpi{background:var(--panel);border:1px solid var(--border);border-radius:12px; padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer; color:var(--tx);font-family:inherit;min-height:64px;justify-content:center} html.hx-phone .in-kpi b{font-size:1.15rem} html.hx-phone .in-kpi span{font-size:.62rem;color:var(--tx2);text-align:center} html.hx-phone .in-kpi.alerta{border-color:rgba(242,109,109,.5)} html.hx-phone .in-kpi.alerta b{color:var(--verm)} html.hx-phone .in-acao{width:100%;min-height:52px;border:1px solid var(--border);border-radius:12px; background:var(--panel);color:var(--tx);font-size:.92rem;font-weight:700;cursor:pointer; font-family:inherit;margin-bottom:8px} /* Início — ask box (the ChatGPT moment) + agent directory */ html.hx-phone .in-ask{margin-bottom:12px} html.hx-phone .in-ask textarea{width:100%;margin:8px 0;resize:none} html.hx-phone .in-ask-btn{width:100%;min-height:48px} html.hx-phone .in-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} html.hx-phone .in-continuar{margin-bottom:12px} html.hx-phone .in-ask-nota{font-size:.66rem;color:var(--tx2);margin-top:8px} html.hx-phone .in-agentes{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} html.hx-phone .in-ag{display:flex;align-items:center;gap:12px;width:100%;min-height:64px; padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:12px; cursor:pointer;font-family:inherit;color:var(--tx);text-align:left} html.hx-phone .in-av{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-weight:800;color:#08281e;font-size:1.05rem} html.hx-phone .in-av i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px; border-radius:50%;border:2px solid var(--panel)} html.hx-phone .in-ag-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} html.hx-phone .in-ag-tx b{font-size:.92rem} html.hx-phone .in-ag-sub{font-size:.68rem;color:var(--tx2)} html.hx-phone .in-ag-fala{font-size:.72rem;color:var(--tx2);overflow:hidden;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical} html.hx-phone .in-ag-st{font-size:.62rem;color:var(--tx2);white-space:nowrap;flex:0 0 auto} /* Escritório em lista + overlay da cena pixel-art */ html.hx-phone .of-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 12px} html.hx-phone .of-prog{display:block;height:5px;background:var(--panel2);border-radius:3px;overflow:hidden;margin-top:4px} html.hx-phone .of-prog i{display:block;height:100%;background:var(--verde)} html.hx-phone #officeOverlay{position:fixed;inset:0;background:var(--bg);z-index:900;display:flex;flex-direction:column} html.hx-phone .of-ov-top{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:10px 12px;border-bottom:1px solid var(--border);font-size:.78rem; padding-top:calc(10px + env(safe-area-inset-top))} html.hx-phone .of-ov-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px} html.hx-phone .of-ov-scroll #officeSvg{min-width:980px} html.hx-phone .of-ov-scroll #officeWrap{grid-template-columns:1fr} /* Fila de Aprovação no celular */ html.hx-phone .fl-alerta{flex-wrap:wrap;padding:10px 0} html.hx-phone .fl-alerta .hx-btnx{min-width:44px;min-height:44px} html.hx-phone .anv-fotos{flex-wrap:nowrap;overflow-x:auto;max-width:none;-webkit-overflow-scrolling:touch} html.hx-phone .hist-prev{left:12px !important;right:12px;top:auto !important; bottom:calc(12px + env(safe-area-inset-bottom));max-width:none !important;width:auto; max-height:75dvh;overflow-y:auto} html.hx-phone .cf-item{background:var(--panel2);border:1px solid var(--border);border-radius:10px; padding:10px;margin-bottom:8px} html.hx-phone .cf-item input{margin-top:6px} html.hx-phone .fl-hist-det summary{cursor:pointer;font-size:.9rem;font-weight:700;margin:20px 0 10px} html.hx-phone .card .btn.b-ap{flex:2} html.hx-phone .card .btn.b-rj{flex:1} /* ---- Trilha do dinheiro — tela de quem OPERA pagamentos sem poder pagar (12/08/2026) ---- A Grazy faz este trabalho no celular. O trabalho dela é uma SEQUÊNCIA de verdade (cadastrar → montar → entregar → conciliar), então numerar as etapas aqui informa em vez de enfeitar. O elemento que carrega a tela é o TRILHO: uma linha vertical ligando as estações, que muda de sólida/verde (é sua) para tracejada/roxa com cadeado na 4ª faixa (é do Victor) e volta a ser dela na conciliação. É de propósito que o passo que ela NÃO pode fazer apareça em vez de ser escondido: a regra que ela nunca pode confundir é "entreguei ≠ paguei", e o desenho é quem ensina isso todo dia. Uma única animação (o trilho preenchendo ao abrir), desligada em prefers-reduced-motion. Alvos de toque ≥ 44px; nada aqui depende de hover. */ html.hx-phone .tr-wrap{max-width:560px;margin:0 auto} html.hx-phone .tr-topo{background:var(--panel);border:1px solid var(--border);border-radius:14px; padding:14px 15px;margin-bottom:14px} html.hx-phone .tr-olho{display:block;font-size:.58rem;color:var(--tx2);text-transform:uppercase; letter-spacing:.14em} html.hx-phone .tr-titulo{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;margin:3px 0 2px} html.hx-phone .tr-sub{font-size:.76rem;color:var(--tx2)} html.hx-phone .tr-prog{display:flex;gap:5px;margin-top:11px} html.hx-phone .tr-prog span{flex:1;height:6px;border-radius:3px;background:var(--panel2);overflow:hidden} html.hx-phone .tr-prog span i{display:block;height:100%;width:0;background:var(--verde); transition:width .55s cubic-bezier(.4,0,.2,1)} html.hx-phone .tr-prog span.f i{width:100%} html.hx-phone .tr-festa{margin-top:11px;background:#12352b;color:var(--verde);border-radius:10px; padding:9px 11px;font-size:.78rem;font-weight:700} html.hx-phone .tr-trilha{list-style:none;padding:0;margin:0} html.hx-phone .tr-est{position:relative;display:grid;grid-template-columns:34px 1fr;gap:11px; padding-bottom:12px} /* o trilho: linha entre o marcador desta estação e o da próxima */ html.hx-phone .tr-est::before{content:'';position:absolute;left:16px;top:30px;bottom:0;width:2px; background:var(--border)} html.hx-phone .tr-est:last-child::before{display:none} html.hx-phone .tr-est.ok::before{background:var(--verde)} html.hx-phone .tr-est.dele::before{background:repeating-linear-gradient(to bottom, var(--roxo) 0 5px,transparent 5px 10px)} html.hx-phone .tr-marca{width:34px;height:34px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums; border:2px solid var(--border);background:var(--panel);color:var(--tx2);position:relative;z-index:1} html.hx-phone .tr-est.ok .tr-marca{background:var(--verde);border-color:var(--verde);color:#08281e} html.hx-phone .tr-est.agora .tr-marca{border-color:var(--verde);color:var(--verde); box-shadow:0 0 0 4px rgba(45,212,167,.14)} html.hx-phone .tr-est.dele .tr-marca{border-color:var(--roxo);color:var(--roxo);border-style:dashed} html.hx-phone .tr-corpo{background:var(--panel);border:1px solid var(--border);border-radius:12px; padding:11px 13px;min-width:0} html.hx-phone .tr-est.agora .tr-corpo{border-color:var(--verde)} html.hx-phone .tr-est.dele .tr-corpo{border-color:var(--roxo);border-style:dashed} html.hx-phone .tr-est.ok .tr-corpo{background:transparent;border-color:transparent;padding:6px 0} html.hx-phone .tr-nome{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em} html.hx-phone .tr-est.ok .tr-nome{font-weight:600;color:var(--tx2)} html.hx-phone .tr-det{display:block;font-size:.76rem;color:var(--tx2);margin-top:3px} html.hx-phone .tr-det b{color:var(--tx);font-variant-numeric:tabular-nums} html.hx-phone .tr-det .alerta{color:var(--verm)} html.hx-phone .tr-acao{display:block;width:100%;min-height:48px;margin-top:10px;border:0; border-radius:11px;background:var(--verde);color:#08281e;font-weight:800;font-size:.92rem; cursor:pointer;font-family:inherit} html.hx-phone .tr-acao.calma{background:var(--panel2);color:var(--tx);border:1px solid var(--border)} html.hx-phone .tr-lote{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 0; border-top:1px solid var(--border);font-size:.78rem} html.hx-phone .tr-lote:first-of-type{border-top:0} html.hx-phone .tr-lote b{margin-left:auto;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ html.hx-phone .tr-prog span i{transition:none} } /* ---- D) html.hx-phone.hx-fold — Fold 4 open / 560-899 min-dimension ---- */ /* hx-fold always accompanies hx-phone; these come later in the file so they win */ html.hx-fold .grid.g4{grid-template-columns:repeat(3,1fr)} html.hx-fold .fgrid{grid-template-columns:repeat(3,1fr)} html.hx-fold .wfrow .wl{width:170px} html.hx-fold .wfrow .wt{width:110px} html.hx-fold #officeSvg{min-width:980px} /* ---- E) html.hx-ipad — desktop layout + touch/Safari fixes only ---- */ html.hx-ipad{-webkit-text-size-adjust:100%} /* 16px inputs: the single most important Safari fix (no zoom on focus) */ html.hx-ipad input,html.hx-ipad select,html.hx-ipad textarea, html.hx-ipad .hx-toolbar .hx-search{font-size:16px} html.hx-ipad .btn{min-height:44px} html.hx-ipad .chip{min-height:38px;display:inline-flex;align-items:center} html.hx-ipad .hx-btnx{min-height:40px;min-width:40px} html.hx-ipad #side .item{padding:11px 10px} html.hx-ipad table th.hx-sortable{padding-top:11px;padding-bottom:11px} html.hx-ipad #side,html.hx-ipad .modal .box,html.hx-ipad #feed{-webkit-overflow-scrolling:touch}