/* ============================================================================ bp-mobile.css - Legibilidade + robustez de layout no CELULAR ---------------------------------------------------------------------------- App bp_web (Tailwind CDN + Alpine, ~49 paginas). Injetado GLOBALMENTE via Send-FileResponse (apos ), igual aos bp-*.js. PRINCIPIOS (producao / conservador): - So atua em <=640px (mobile). Desktop fica INTOCADO. - Bump MODERADO das fontes minusculas: piso confortavel ~12-13px, sem inflar. Nao mexe em text-sm/base/lg pra nao estourar cabecalhos/cards. - !important e OBRIGATORIO: as classes-alvo sao utilitarias do Tailwind CDN (mesma especificidade de classe) e muitas vem com sm:/md: a vencer no mobile. - Escaping Tailwind arbitrario: a classe HTML `text-[10px]` vira o seletor CSS `.text-\[10px\]` (colchetes escapados com barra invertida). - KILL-SWITCH: remover a linha de injecao do server.ps1 desliga tudo, sem tocar em nenhuma das 49 paginas. ============================================================================ */ /* ========================================================================== BLOCO 0 - Base segura (qualquer largura, custo ~zero) ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, svg, video, canvas { max-width: 100%; height: auto; } /* (01/08) celular: scroll dentro de popups/iframes NAO encadeia p/ a pagina de tras — o encadeamento esconde/mostra a barra do Chrome Android e o viewport fica "se re-encaixando" (relato Paulo: janelas aumentando e diminuindo com popups aninhados abertos). Contain e inofensivo no desktop. */ html, body { overscroll-behavior-y: contain; } /* ========================================================================== ============ @media (max-width: 640px) - MOBILE ======================== ========================================================================== */ @media (max-width: 640px) { /* ---- BLOCO 1: BUMP DAS FONTES MINUSCULAS (problema no 1) ---- */ .text-\[7px\], .text-\[8px\] { font-size: 11px !important; line-height: 1.35 !important; } .text-\[9px\], .text-\[9\.5px\] { font-size: 11px !important; line-height: 1.4 !important; } .text-\[10px\], .text-\[10\.5px\] { font-size: 12px !important; line-height: 1.4 !important; } .text-\[11px\], .text-\[11\.5px\] { font-size: 13px !important; line-height: 1.4 !important; } .text-\[12px\] { font-size: 13px !important; line-height: 1.45 !important; } .text-\[13px\] { font-size: 13px !important; line-height: 1.45 !important; } .text-xs { font-size: 13px !important; line-height: 1.45 !important; } /* ---- BLOCO 2: TRACKING (letter-spacing) de rotulos uppercase ---- */ .tracking-widest { letter-spacing: 0.04em !important; } .tracking-wider { letter-spacing: 0.03em !important; } .tracking-wide { letter-spacing: 0.02em !important; } /* ---- BLOCO 3: GUARDAS DE OVERFLOW ---- */ pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; -webkit-overflow-scrolling: touch; } .overflow-x-auto, .table-wrapper { -webkit-overflow-scrolling: touch; } table { max-width: 100%; } thead th, tbody td { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; } /* ---- BLOCO 4: min-w fixo (200-350px) em inputs/flex-containers ---- */ .min-w-\[200px\], .min-w-\[220px\], .min-w-\[240px\], .min-w-\[250px\], .min-w-\[260px\], .min-w-\[280px\], .min-w-\[300px\], .min-w-\[320px\], .min-w-\[350px\], .min-w-\[360px\] { min-width: 0 !important; max-width: 100% !important; } /* ---- BLOCO 5: HEADER respirando (sticky) ---- */ header.sticky { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; } header.sticky + * { margin-top: 0.25rem; } /* ---- BLOCO 6: MODAIS (fixed inset-0) com padding/largura mobile ---- */ .fixed.inset-0 { padding: 0.5rem !important; } .fixed.inset-0 > div { max-width: 100% !important; margin-top: 0.5rem !important; } /* barra de titulo injetada pelo bp-janelas.js (data-bpjan) encolhe no mobile */ [data-bpjan] { height: 30px !important; font-size: 12px !important; } /* ---- BLOCO 7: GRIDS 2/3/4-col sem breakpoint -> empilha (1 coluna) ---- So pega grid-cols-N SEM prefixo (grid-cols-1 sm:grid-cols-2 fica intacto, porque o base ja e grid-cols-1). Empilhar no celular e o comportamento certo. */ .grid-cols-2 { grid-template-columns: 1fr !important; } .grid-cols-3 { grid-template-columns: 1fr !important; } .grid-cols-4 { grid-template-columns: 1fr !important; } /* ---- BLOCO 8: TAP TARGETS + inputs sem zoom-ao-focar (iOS) ---- */ input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], select, textarea { font-size: 16px !important; } button, a[role="button"], .btn { min-height: 36px; } } /* ========================================================================== ============ @media (max-width: 420px) - CELULAR PEQUENO =============== ========================================================================== */ @media (max-width: 420px) { /* nowrap combinado com fonte maior estoura em telas minusculas: libera quebra */ .whitespace-nowrap { white-space: normal !important; overflow-wrap: break-word; } .gap-6 { gap: 0.75rem !important; } .gap-8 { gap: 0.9rem !important; } .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .px-8 { padding-left: 0.9rem !important; padding-right: 0.9rem !important; } }