/* ===========================================================================================================================
 * RESPONSIVO — o aplicativo em celular, tablet e computador. Ferramenta compartilhada (Módulo Componentes, 15).
 * Uma linha em cada tela, logo depois do rolagem-fina.css:
 *     <link rel="stylesheet" href="../../geral/componentes/responsivo.css">
 *
 * Os três tamanhos do aplicativo (use sempre estes cortes nas regras @media das telas):
 *   celular     até 760 px          menu em gaveta (18), barra de cima numa linha só com ícones (10), janelas em tela cheia (15)
 *   tablet      de 761 a 1024 px    menu só de ícones, que abre por cima do conteúdo (18); barra de cima numa linha (10)
 *   computador  a partir de 1025 px sem ajustes
 * Cada componente cuida do próprio tamanho no módulo dono (Menu no 18, barra de cima no 10, cartão do usuário no 01, janelas no 15).
 * Aqui ficam só as regras que valem para todas as telas.
 * =========================================================================================================================== */

/* O celular não aumenta a letra sozinho ao girar a tela */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media (max-width:760px){
  /* Nada passa da largura da tela: o que é mais largo rola dentro do próprio quadro, nunca a página para os lados */
  body{overflow-x:clip}
  img,video{max-width:100%}
  pre{max-width:100%;overflow-x:auto}
}

/* Tela de toque (celular e tablet): campos com letra de 16 px, para o navegador não ampliar a página ao tocar num campo */
@media (pointer:coarse) and (max-width:1024px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea{font-size:max(16px,1em)}
}