/* ==================================================================== CF Obras — Foundation Touch (PACOTE 12.1) CSS global que torna o sistema usavel em tablet e celular. Carrega em todas as paginas via no . Principios: - Aplicar apenas em touch devices ou viewport <=1024px - NAO mexer em layout/estilo dos modulos individuais - Mudancas reversiveis (sem !important agressivo onde possivel) ==================================================================== */ /* === 1. Inputs sem zoom no iOS Safari === iOS forca zoom em qualquer input com font-size <16px ao focar. Mantemos no minimo 16px em mobile. */ @media (max-width: 1024px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } } /* === 2. Touch targets minimo 44pt (Apple HIG) / 48dp (Material) === Garante area de toque suficiente sem mexer no visual desktop. */ @media (max-width: 1024px) { button, a.btn, .btn, a.button, .button, input[type=button], input[type=submit], [role=button] { min-height: 44px; min-width: 44px; } input[type=checkbox], input[type=radio] { min-width: 22px; min-height: 22px; } /* Ícones de ação em tabelas/listas */ a.action-icon, .icon-btn, .btn-icon { min-height: 44px; min-width: 44px; padding: 0.5rem; } } /* === 3. Hover guarded — só em devices com mouse === Em touch, hover-only fica "preso" depois de tap (botoes "presos amarelos", modais que nao fecham). Desabilita hover em devices sem mouse. */ @media (hover: none) { button:hover, a:hover, .btn:hover, [role=button]:hover, .menu-item:hover, li:hover, tr:hover { background-color: revert; color: revert; transform: none; box-shadow: revert; } } /* === 4. Active state como feedback de touch === Substitui hover por active em touch — feedback visual ao tap. */ @media (hover: none) { button:active, a.btn:active, .btn:active, a.button:active, .button:active, [role=button]:active { opacity: 0.7; transform: scale(0.98); transition: transform 0.05s ease-out, opacity 0.05s ease-out; } } /* === 5. Touch-action manipulation — remove delay 300ms === Browsers móveis adicionam 300ms ao click esperando double-tap. Esta propriedade remove o delay onde fizer sentido (NAO em canvas que precisa gestos custom, como Konva no concretagem/quantObra). */ button, a, input[type=button], input[type=submit], [role=button], .btn, .button, [data-action], input[type=checkbox], input[type=radio], select { touch-action: manipulation; } /* === 6. Scroll suave em iOS === -webkit-overflow-scrolling: touch ativa scroll momentum em iOS Safari. */ .modal-body, .modal-content, .scroll-container, .table-wrap-auto, [class*="overflow"] { -webkit-overflow-scrolling: touch; } /* === 7. Tabelas responsivas — wrapper auto === Wrapper criado por touch-foundation.js. CSS aplica scroll horizontal. */ .table-wrap-auto { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Sombra discreta nas bordas pra indicar overflow */ background: linear-gradient(90deg, rgba(0,0,0,0.05), transparent) left/14px 100% no-repeat, linear-gradient(-90deg, rgba(0,0,0,0.05), transparent) right/14px 100% no-repeat; } .table-wrap-auto table { /* Permite tabela manter largura natural dentro do scroll */ min-width: max-content; } /* Opt-out por modulo: classe .no-wrap-touch no */ .table-wrap-auto:has(table.no-wrap-touch) { overflow-x: visible; background: none; } /* === 8. Modais full-screen em mobile === Modais cortados deixam de ter botão "Salvar" visível. Em <=768px, modais ocupam tela inteira com header sticky e botões no fundo. */ @media (max-width: 768px) { .modal-overlay, .modal-backdrop, [class*="modal-overlay"], [class*="modal-backdrop"] { padding: 0 !important; } .modal, .modal-dialog, .dialog, [class*="modal-dialog"], [class*="dialog-content"] { max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; } .modal-body, .modal-content, [class*="modal-body"] { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: none !important; } .modal-footer, [class*="modal-footer"] { flex-shrink: 0; padding: 0.75rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); } } /* === 9. Selecao de texto em botoes (UX em touch) === Long-press em botoes nao deve selecionar texto. tap-highlight transparente remove o "flash azul" do iOS. */ button, a.btn, .btn, a.button, .button, [role=button] { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* === 10. Body comportamento de scroll === Previne "rubber band" overflow no body em iOS, mantendo o sistema firme. Modais e canvas podem opt-out via classe especifica. */ html, body { overscroll-behavior-y: contain; } /* === 11. Inputs date/time confortaveis em mobile === Bumps min-height pra ficar comodo de tap. */ @media (max-width: 1024px) { input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] { min-height: 44px; padding: 0.5rem; } } /* === 12. Class helper pra esconder em mobile / so mobile === Pra modulos que quiserem opt-in. */ @media (max-width: 1024px) { .desktop-only { display: none !important; } } @media (min-width: 1025px) { .mobile-only { display: none !important; } } /* === 13. body com classe is-touch (setada por JS) === Hook pra modulos detectarem touch via CSS sem matchMedia. */ .is-touch [data-tooltip]::after { /* Tooltips desktop-only somem em touch (devem virar tap) */ display: none; } /* === END PACOTE 12.1 === */ /* ============================================================ PACOTE 12.4 — Konva touch: bloqueia scroll/zoom do browser sobre o canvas. Sem isso, pinch dentro do canvas dispara zoom da página inteira ou scroll vertical do body. ============================================================ */ #konvaContainerConc, #konva-container, #konva-rapido-container { touch-action: none; -ms-touch-action: none; } #konvaContainerConc canvas, #konva-container canvas, #konva-rapido-container canvas, .konvajs-content, .konvajs-content canvas { touch-action: none; -ms-touch-action: none; } /* === END PACOTE 12.4 === */ /* ============================================================ PACOTE 12.5 — Crosshair de precisão em touch PACOTE 12.15 — desativado nos stages principais (konvaStage, konvaStageConc) PACOTE 12.16 — desativado tambem no konvaRapidaStage. Classes REMOVIDAS aqui. Substituido por lupa automatica em touch+precisao nos 3 stages. ============================================================ */ /* ============================================================ PACOTE 12.6 — Layout compacto em telas CAD (Concretagem/quantObra) ============================================================ */ /* === 1. Opt-out do min-height: 44px em toolbars CAD-densas === Botões da toolbar têm tap area suficiente com 36px em mobile + font 13px. Padding lateral reduzido pra caber mais botões/linha. */ @media (max-width: 1024px) { .mapa-toolbar .mapa-btn-tool, .tools-grid .tool-btn, .tools-grid .tool-btn-quant { min-height: 36px !important; min-width: 0 !important; padding: 6px 10px !important; font-size: 13px !important; line-height: 1.2 !important; } /* Reduz gap entre botões da toolbar */ .mapa-toolbar { gap: 4px !important; padding: 6px !important; } .tools-grid { gap: 4px !important; } /* Badge de escala compacto */ .mapa-escala-badge { font-size: 11px !important; padding: 4px 8px !important; } } /* === 2. Modal de mapeamento full-screen em mobile === O modal-card-conc da Concretagem não pega o seletor genérico do foundation. Tratar explicitamente aqui. */ @media (max-width: 1024px) { .modal-overlay-conc, .modal-card-conc.mapa-modal-card, .modal-card-conc { max-width: 100vw !important; max-height: 100vh !important; max-height: 100dvh !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; padding: 0 !important; } .modal-body-conc.mapa-modal-body { padding: 0 !important; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow: hidden; } .modal-header-conc { padding: 8px 12px !important; min-height: 48px; } .modal-header-conc h3 { font-size: 16px !important; margin: 0 !important; } /* Layout do mapa em mobile: empilha verticalmente OU mantém horizontal com painéis colapsáveis. Mantemos horizontal pq colapsável é melhor. */ .mapa-layout, .prancheta-layout { height: calc(100% - 90px); /* desconta toolbar topo */ } } /* === 3. Painéis laterais colapsáveis === Aplica em: - Concretagem: .mapa-plantas-list (esq), .mapa-medicoes-list (dir) - quantObra: .painel-ferramentas (esq), .painel-medicoes (dir) */ .mapa-plantas-list, .mapa-medicoes-list, .painel-ferramentas, .painel-medicoes, .pr-painel-esq { transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease; position: relative; } /* Estado COLAPSADO — vira faixa fina com só o botão de expandir */ .mapa-plantas-list.cad-colapsado, .mapa-medicoes-list.cad-colapsado, .painel-ferramentas.cad-colapsado, .painel-medicoes.cad-colapsado, .pr-painel-esq.cad-colapsado { width: 40px !important; min-width: 40px !important; max-width: 40px !important; overflow: hidden; flex: 0 0 40px !important; } /* Conteúdo do painel some quando colapsado, exceto o botão toggle */ .mapa-plantas-list.cad-colapsado > *:not(.cad-painel-toggle-wrap), .mapa-medicoes-list.cad-colapsado > *:not(.cad-painel-toggle-wrap), .painel-ferramentas.cad-colapsado > *:not(.cad-painel-toggle-wrap), .painel-medicoes.cad-colapsado > *:not(.cad-painel-toggle-wrap), .pr-painel-esq.cad-colapsado > *:not(.cad-painel-toggle-wrap) { display: none !important; } /* Wrapper do botão toggle (visível em qualquer estado) */ .cad-painel-toggle-wrap { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 6px; background: inherit; z-index: 2; } /* Quando colapsado, o wrapper ocupa o painel inteiro com o botão centrado */ .cad-colapsado .cad-painel-toggle-wrap { height: 100%; justify-content: center; align-items: flex-start; padding-top: 12px; } /* Painel esquerdo: botão fica à direita (aponta pra esquerda quando expandido) */ .mapa-plantas-list .cad-painel-toggle-wrap, .painel-ferramentas .cad-painel-toggle-wrap, .pr-painel-esq .cad-painel-toggle-wrap { justify-content: flex-end; } /* Painel direito: botão fica à esquerda */ .mapa-medicoes-list .cad-painel-toggle-wrap, .painel-medicoes .cad-painel-toggle-wrap { justify-content: flex-start; } /* Botão toggle em si */ .cad-painel-toggle { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; width: 28px; height: 28px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #4a5568; padding: 0; line-height: 1; } .cad-painel-toggle:active { background: rgba(0, 0, 0, 0.1); } /* === END PACOTE 12.6 === */ /* ============================================================ PACOTE 12.10 — Toggle do pop-up Precisao (ocultar/mostrar) Aplicado em ambos modulos: Concretagem (.mapa-precisao-box) e quantObra (.snap-config-box) com paridade visual. ============================================================ */ /* Botão ✕ pra OCULTAR o pop-up (dentro do header) */ .btn-fechar-precisao { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; cursor: pointer; padding: 0; font-size: 12px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #4a5568; line-height: 1; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; } .btn-fechar-precisao:hover { background: rgba(239, 68, 68, 0.15); color: #b91c1c; border-color: rgba(239, 68, 68, 0.3); } .btn-fechar-precisao:active { background: rgba(239, 68, 68, 0.25); } /* Botão flutuante 🎯 pra REABRIR (verde teal, canto sup direito do canvas) */ .btn-reabrir-precisao { position: absolute; top: 12px; right: 12px; background: rgba(16, 185, 129, 0.95); color: #fff; border: 1px solid #059669; border-radius: 8px; cursor: pointer; padding: 0; font-size: 18px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 50; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease, background 0.15s ease; } .btn-reabrir-precisao:hover { background: #059669; transform: scale(1.05); } .btn-reabrir-precisao:active { background: #047857; transform: scale(0.95); } /* Em mobile/tablet, botão reabrir um pouco maior pra touch target */ @media (max-width: 1024px) { .btn-fechar-precisao { width: 28px; height: 28px; font-size: 14px; } .btn-reabrir-precisao { width: 44px; height: 44px; font-size: 20px; } } /* === END PACOTE 12.10 === */ /* ============================================================ PACOTE 12.11 — Botões de zoom global no PWA standalone Posicionado no canto INFERIOR ESQUERDO pra não atrapalhar o "Console Dev" (canto inf direito) ou painéis laterais. ============================================================ */ .pwa-zoom-container { position: fixed; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 24px; padding: 4px; z-index: 100000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .pwa-zoom-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); color: #4f46e5; font-size: 16px; font-weight: 600; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.15s ease, transform 0.1s ease; } .pwa-zoom-btn:hover { background: rgba(99, 102, 241, 0.2); } .pwa-zoom-btn:active { transform: scale(0.92); background: rgba(99, 102, 241, 0.3); } .pwa-zoom-label { font-size: 11px; font-weight: 600; color: #4f46e5; padding: 0 6px; min-width: 36px; text-align: center; } /* Em telas muito pequenas, container mais compacto */ @media (max-width: 480px) { .pwa-zoom-container { bottom: 8px; left: 8px; padding: 3px; } .pwa-zoom-btn { width: 28px; height: 28px; font-size: 14px; } .pwa-zoom-label { font-size: 10px; min-width: 32px; } } /* === END PACOTE 12.11 === */ /* ─────────────────────────────────────────────────────────────── FIX: modais .modal FECHADOS não devem aparecer em telas <=768px. A regra .modal { display:flex } (mobile) deste arquivo forçava modais fechados (ex.: #epiEditModal) a ficarem visíveis. Aqui re-escondemos apenas os .modal SEM display inline (= fechados), preservando os ABERTOS (o JS seta display:block/flex inline) e sem tocar nos seletores .modal-dialog/.dialog/[class*="dialog"]. ─────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .modal:not([style*="display: block"]):not([style*="display:block"]):not([style*="display: flex"]):not([style*="display:flex"]) { display: none !important; } }