/* ============================================================ TEXTO SEM SALTO — a causa real do "tudo mexe" O problema não eram os ícones: era a POPPINS. O texto desenha primeiro na fonte do sistema (Arial/Segoe UI) e, quando a Poppins chega, cada palavra muda de largura — e como praticamente tudo na página é texto, tudo se desloca ao mesmo tempo: botões, itens do menu, títulos de secção. A correcção tem duas partes: 1. FONTE DE RECURSO AJUSTADA Define-se uma fonte local (Arial) com as métricas corrigidas para ocupar exactamente o mesmo espaço que a Poppins. Enquanto a real não chega, o texto já está no sítio certo — quando troca, nada se move. Os valores vêm da razão entre as métricas das duas fontes. 2. PRÉ-CARREGAMENTO dos dois pesos usados em quase toda a página (400 normal e 600 dos títulos), no , antes do CSS. ============================================================ */ @font-face { font-family: 'Poppins Recurso'; src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'); size-adjust: 106%; /* Poppins é mais larga que a Arial */ ascent-override: 95%; descent-override: 32%; line-gap-override: 0%; } /* A cadeia passa a ter a fonte ajustada como primeiro recurso. */ body, .sidebar, .topbar, .card-of, .btn-verde, .btn-branco, .btn-vermelho, .form-control, table, input, select, textarea, button { font-family: 'Poppins', 'Poppins Recurso', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } /* Estabilidade estrutural: alturas que não dependem do texto carregado. */ .topbar { height: 58px; } .sidebar nav a { min-height: 40px; display: flex; align-items: center; } .btn-verde, .btn-branco, .btn-vermelho { min-height: 36px; } .form-control { min-height: 36px; } .card-of .card-of-head { min-height: 46px; } /* O corpo da página nunca desliza para o lado. */ html, body { overflow-x: hidden; max-width: 100%; }