/* ============================================================================ DENSIDADE DA INTERFACE — escala global do sistema Sistema: GestãoApp Security Autor: Fernando | GESTÃOAPP (https://gestaoapp.ia.br) OBJETIVO Com o Chrome em 100%, entregar a mesma densidade que antes só se obtinha colocando o navegador em 75%. COMO, E POR QUE NÃO É `zoom` NEM `transform: scale()` O Tailwind expressa QUASE TUDO em `rem` — padding, margin, gap, font-size, width, height, border-radius. `rem` é relativo ao font-size do . Então mudar UM valor no reescala o sistema inteiro, e o layout continua sendo layout real: os elementos são de fato menores, e não desenhados grandes e depois espremidos. Flex e grid recalculam, a página ocupa 100% da viewport, e não sobra a faixa morta que o `scale()` deixa. As media queries do Tailwind continuam em PIXEL, então os breakpoints não se mexem: `lg:` ainda vira lg aos 1024px reais de tela. É isso que mantém a responsividade intacta enquanto só a densidade muda. ESCALA POR TAMANHO DE TELA Não é uma redução única para todo mundo. Quanto maior o monitor, mais densa a interface; abaixo de 1024px NADA muda, e tablet e celular ficam exatamente como estavam (é também o que evita o zoom automático que o iOS aplica em campo com fonte menor que 16px). ONDE MEXER DEPOIS Só na variável `--ga-densidade`. Trocar um número aqui reescala tudo. ============================================================================ */ :root { /* 1 = tamanho original. Cada faixa abaixo redefine para telas maiores. */ --ga-densidade: 1; } /* A âncora de todo o sistema. 16px é o padrão do navegador; a variável desloca a partir dele. `html` e não `:root` por legibilidade — é o mesmo elemento. */ html { font-size: calc(16px * var(--ga-densidade)); } /* Tablet em paisagem e notebooks pequenos: um passo suave. */ @media (min-width: 1024px) { :root { --ga-densidade: 0.875; } /* 14px */ } /* Notebooks 1366x768 e monitores intermediários. */ @media (min-width: 1280px) { :root { --ga-densidade: 0.8125; } /* 13px */ } /* 1600x900, 1920x1080 e acima: a densidade que equivale ao zoom 75%. */ @media (min-width: 1536px) { :root { --ga-densidade: 0.75; } /* 12px */ } /* ---------------------------------------------------------------------------- CONTAINERS DE PÁGINA — largura ancorada em pixel Aqui há um DESVIO DELIBERADO da referência, e vale saber por quê. `max-w-7xl` são 80rem. Escalando junto, viraria 960px numa tela de 1920 — e a faixa vazia nas laterais saltaria de 370px para 754px (MEDIDO): o aproveitamento da largura cairia de 78% para 56%. É o que acontece hoje com o navegador em 75%, só que lá passa despercebido porque a viewport lógica também cresce. Dividir pela densidade mantém o container do MESMO tamanho em pixel que tem hoje, enquanto o conteúdo dentro dele encolhe — que é o ponto: cabe cerca de um terço mais de conteúdo na mesma caixa. Só os wrappers LARGOS entram. `max-w-2xl` e `max-w-3xl` seguram formulários estreitos e blocos de texto, onde a medida existe para limitar o comprimento da linha de leitura: ali encolher junto é o comportamento certo. `html .max-w-*` em vez de `.max-w-*` porque o Tailwind vem do CDN e injeta o próprio