/* =================================================================== EFICÁCIA CRM — mobile-toque.css Camada de acessibilidade ao toque. Carregada por ÚLTIMO para poder corrigir de forma transversal o que os módulos individuais deixam pequeno demais para um dedo. PORQUÊ ESTE FICHEIRO A auditoria automática (tools/run-responsive-audit.js, 26 rotas x 9 viewports) mostrou o layout sólido — zero scroll horizontal, zero transbordos, zero sobreposições, zero tabelas desprotegidas, e NADA a assinalar de 768px para cima. O que falhava era sempre a mesma coisa e só abaixo de 768px: · 228 alvos de toque abaixo de 44x44 px (WCAG 2.5.5) · 416 textos abaixo de 12 px Três causas concentravam 200 das 228: o link do breadcrumb (26 rotas), as células do mapa de férias e os campos de data. REGRA: tudo aqui é `@media (max-width: 767px)`. Acima disso este ficheiro não existe — o desktop já passava e não se toca no que está bom. =================================================================== */ @media (max-width: 767px) { /* --------------------------------------------------------------- 1. Mínimos globais de toque e de leitura Variáveis para os módulos poderem referenciar em vez de repetir. --------------------------------------------------------------- */ :root { --toque-min: 44px; /* WCAG 2.5.5 */ --fonte-min: 12px; /* O escalão mais pequeno da tipografia era 0.6875rem = 11px e era a origem de quase todos os textos ilegíveis em mobile. Subir o token corrige-os todos de uma vez, sem ter de perseguir classe a classe (e cobre os módulos que ainda estão a ser construídos). */ --text-xs: 0.75rem; /* 12px */ } /* --------------------------------------------------------------- 2. Cabeçalho — o breadcrumb era 132 das 228 críticas O header tem 56px em mobile, por isso um alvo de 44px cabe. --------------------------------------------------------------- */ .breadcrumbs a, .ds-breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque-min); /* "Home" mede ~37px: sem folga horizontal continuava abaixo dos 44. */ min-width: var(--toque-min); padding: 0 4px; font-size: var(--fonte-min); } .breadcrumbs .separator, .ds-breadcrumb-sep { font-size: var(--fonte-min); display: inline-flex; align-items: center; } .breadcrumbs .current, .ds-breadcrumb [aria-current] { font-size: var(--fonte-min); } #mobileSidebarToggle, .mobile-sidebar-toggle { min-width: var(--toque-min); min-height: var(--toque-min); } /* o avatar é decorativo, mas a inicial a 10px era ilegível */ .header-avatar { font-size: var(--fonte-min); } /* --------------------------------------------------------------- 3. Botões — todos os grupos, legado e design system min-height (não height) para não partir botões multi-linha. --------------------------------------------------------------- */ .btn, .ds-btn, .action-btn, .ds-icon-btn, .btn-sm, .btn.btn-sm, .login-btn, button.icon-btn, .pag-btn, .tab-btn, .ds-tab { min-height: var(--toque-min); } /* botões estreitos: garantir também a largura */ .action-btn, .ds-icon-btn, button.icon-btn, .btn.btn-icon, .btn.btn-sm, .btn.btn-ghost { min-width: var(--toque-min); } /* --------------------------------------------------------------- 4. Campos de formulário — os date pickers vinham a 20px de altura --------------------------------------------------------------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, .dp-input, .dp-input.sm, .ds-input, .ds-select { min-height: var(--toque-min); font-size: max(16px, var(--fonte-min)); /* 16px evita o zoom automático do iOS ao focar */ } textarea { min-height: calc(var(--toque-min) * 2); } /* --------------------------------------------------------------- 5. Caixas de verificação e rádios Ampliadas e com área de toque estendida pelo rótulo, que é o que o dedo acerta na prática. --------------------------------------------------------------- */ input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-width: 22px; min-height: 22px; } label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), .check-wrap, .ds-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--toque-min); } /* --------------------------------------------------------------- 6. Linhas de tabela clicáveis Abaixo de 768px as tabelas viram cartões, mas onde a linha continuar a ser o alvo tem de ter altura de dedo. --------------------------------------------------------------- */ /* min-height num é ignorado (display:table-row) — a altura da linha vem do padding das células. É por aí que se faz. */ tbody td, .ds-table tbody td { padding-top: 12px; padding-bottom: 12px; } /* --------------------------------------------------------------- 7. Textos abaixo do mínimo legível Etiquetas de filtro, separadores, badges e cabeçalhos de tabela andavam nos 10–11px. --------------------------------------------------------------- */ .filter-label, .ds-filter-label, .form-label, .ds-label, .ds-badge, .badge, .chip, .ds-chip, .ds-help, .form-hint, /* especificidade suficiente para ganhar às regras .data-table thead th */ table thead th, .data-table thead th, .ds-table thead th, .ferias-day-header, .ma-preco-rotulo, .nav-section-title, .user-role, .sidebar-search kbd, kbd { font-size: var(--fonte-min); } /* --------------------------------------------------------------- 8. Mapa de Férias — 60 das 228 críticas Uma grelha de 7 colunas nunca dá 44px por célula a 320px sem comprimir tudo. Solução: células de 44px e, quando não cabem, o mês desliza na horizontal dentro do seu cartão (o contentor tem overflow-x, por isso não é "tabela desprotegida"). --------------------------------------------------------------- */ .ferias-month-card, .ferias-month { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ferias-month-grid { grid-template-columns: repeat(7, minmax(var(--toque-min), 1fr)); min-width: calc(var(--toque-min) * 7); gap: 2px; } .ferias-day { min-height: var(--toque-min); display: flex; align-items: center; justify-content: center; font-size: var(--fonte-min); padding: 0; line-height: 1.2; } .ferias-day-header { min-height: 24px; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------- 9. Módulo de Agenda/Calendário (mod-tickets, prefixo mtk-) Segmentos, legenda e células do mês. --------------------------------------------------------------- */ .mtk-seg, .mtk-leg-item { min-height: var(--toque-min); } /* NOTA: nada de min-width nas células do mês. Sete colunas a 44px pedem 308px + espaçamentos, o que a 320px transbordava e fazia as células sobreporem-se umas às outras — a primeira versão desta folha introduziu 14 sobreposições que não existiam. A altura resolve o alvo de toque; a largura fica pela coluna. */ .mtk-cal-cel { min-height: var(--toque-min); } .mtk-cal-dia-num, .mtk-cal-cab { font-size: var(--fonte-min); } /* Barra do editor de texto: os selects (tipo de bloco, tamanho) estavam a colapsar para 14px de largura. `flex: 0 1 auto` com `min-width: 0` numa barra apertada encolhe-os até desaparecerem — a 1280px medem 118px, a 375px ficavam ilegíveis e impossíveis de acertar. Deixa-se a barra quebrar linha em vez de espremer o conteúdo. */ .ds-richtext-toolbar, .meq-rt-toolbar { flex-wrap: wrap; row-gap: 6px; } .ds-richtext-toolbar select, .ds-richtext-toolbar .ds-select, .meq-rt-toolbar select, .meq-rt-toolbar .ds-select { flex: 0 0 auto; min-width: 96px; } /* Totais de contrato/proposta fixos no fundo em mobile. Num contrato com muitas linhas, o total ficava a dezenas de scrolls de distância das linhas que se estão a editar — é o número que interessa ver enquanto se mexe. */ .mc-totais, .mp-totais, .ds-form-totais { position: sticky; bottom: 0; z-index: 5; background: var(--neutral-0, #fff); box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); } /* Calendário anual de férias (mod-frota, prefixo mf-) */ .mf-dia-cab, .mf-semana-num, .mf-mes-nome { font-size: var(--fonte-min); } /* `.mf-dia` junta `aspect-ratio: 1/1` com `min-height: 44px`. Numa grelha de 7 colunas a 320px cada coluna mede ~36px, mas o rácio força a largura a acompanhar a altura mínima e o botão fica com 44px — 8px a mais do que o espaço que tem. O excedente vai por cima do dia vizinho: a auditoria apanhou 36 sobreposições de dias adjacentes, e tocar perto da margem acertava no dia errado. A altura de dedo mantém-se; o quadrado perfeito é que não cabe. */ .mf-dia { aspect-ratio: auto; width: 100%; min-width: 0; } /* --------------------------------------------------------------- 10. Ligações de telefone e email Num cartão de cliente, o número é um — é o alvo que se carrega para ligar, e media 77x15px. Foi a origem de 48 das 49 violações críticas da última auditoria completa. --------------------------------------------------------------- */ a[href^="tel:"], a[href^="mailto:"], a[href^="sms:"] { display: inline-flex; align-items: center; min-height: var(--toque-min); } /* --------------------------------------------------------------- 11. Itens de navegação --------------------------------------------------------------- */ .nav-item, .nav-sub-item, .sidebar-user-dropdown-item, .quick-add-item, .notifications-list .notification-item { min-height: var(--toque-min); display: flex; align-items: center; } } /* =================================================================== Até 1023px — apanha também o telemóvel em paisagem (844x390), que é demasiado largo para o bloco acima mas demasiado estreito para caber uma barra de filtros de uma só linha. =================================================================== */ @media (max-width: 1023px) { /* .filter-row tem `flex-wrap: nowrap` no style.css. Quando os filtros não cabem, em vez de mudarem de linha ficam por cima uns dos outros — a auditoria apanhou o select de iluminação sobreposto ao botão de procurar nos Monopostes a 844px. Sobrepor nunca é aceitável; mudar de linha é. Regra só aqui, sem tocar no style.css. */ .filter-row { flex-wrap: wrap; row-gap: 12px; } /* Só `flex-wrap: wrap` não chegava. `.filter-group` tem `flex: 1 1 0` com `min-width: 0`: os grupos encolhem indefinidamente em vez de passarem à linha seguinte — a soma nunca ultrapassa o contentor, por isso a quebra nunca dispara. Só que um