/* ===========================================================================================================================
 * 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}

  /* ---------- Folha de Opções (revisão de 11/11/2026) ----------
     No celular, o painel Opções de qualquer tela (class "opcoes", com id, aberto por um botão com aria-controls) abre como folha presa
     embaixo, com rolagem própria, sem empurrar a página: largura inteira, cantos de cima arredondados e o resto da tela escurecido.
     O toque fora, o × e o painel que a tela reabre sozinha ao carregar ficam com janela-redimensionavel.js. Outro painel de uma tela
     pode usar a mesma folha com a classe "folha-cel" (quem abre e fecha é a tela). data-folha="nao" deixa o painel como era. */
  html:root .opcoes:not([hidden]):not([data-folha="nao"]),html:root .folha-cel:not([hidden]){
    position:fixed;z-index:60;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;margin:0;
    max-height:min(78vh,640px);max-height:min(78dvh,640px);overflow:auto;overscroll-behavior:contain;
    display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;
    padding:22px var(--rt-cel-margem,16px) calc(22px + env(safe-area-inset-bottom,0px));
    border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:var(--surface);
    box-shadow:0 0 0 100vmax var(--scrim,rgb(15 20 28 / .45)),0 -12px 40px rgb(0 0 0 / .22)}
  html:root .opcoes[data-folha="recolhida"]{display:none !important}
  /* o primeiro grupo deixa lugar para o × da folha */
  html:root .opcoes:not([data-folha="nao"]) > .folha-x + *{padding-right:44px}
  /* dentro da folha, cada opção tem altura de toque */
  html:root .opcoes:not([data-folha="nao"]) .segs{display:flex;flex-wrap:wrap;width:100%;max-width:100%}
  html:root .opcoes:not([data-folha="nao"]) .seg{flex:1 1 auto}
  html:root .opcoes:not([data-folha="nao"]) .seg span{justify-content:center;min-height:var(--rt-cel-toque,44px);padding:6px 8px}
  html:root .opcoes:not([data-folha="nao"]) .seg span svg{display:none}

  /* ---------- Tabela larga (revisão de 11/11/2026) ----------
     O quadro que rola para o lado mostra uma sombra na borda em que há mais para ver ("rola-lado", no elemento que tem a rolagem), e a
     primeira coluna pode ficar presa ("col-presa", na tabela ou no quadro). Onde cada linha é um registro, a tela faz cartões. */
  .rola-lado{overflow-x:auto;
    background:linear-gradient(to right,var(--surface,#fff) 40%,transparent) left center / 36px 100% no-repeat local,
      linear-gradient(to left,var(--surface,#fff) 40%,transparent) right center / 36px 100% no-repeat local,
      linear-gradient(to right,color-mix(in srgb,var(--ink,#000) 22%,transparent),transparent) left center / 12px 100% no-repeat scroll,
      linear-gradient(to left,color-mix(in srgb,var(--ink,#000) 22%,transparent),transparent) right center / 12px 100% no-repeat scroll}
  .col-presa th:first-child,.col-presa td:first-child{position:sticky;left:0;z-index:1;background:var(--surface,#fff);
    box-shadow:1px 0 0 var(--line,#cdd3dc)}
  .col-presa thead th:first-child{z-index:3}

  /* ---------- Campo de busca: o × de limpar é o do aplicativo, na cor do texto (não o azul do navegador) ---------- */
  input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;flex:none;width:28px;height:28px;margin:0 -4px 0 4px;cursor:pointer;
    background:var(--muted,currentColor);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center / 14px no-repeat}
}

/* 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)}
}