/* Celular e tablet (2026-10-13, pedido do Thiago: todo o Portal Plano acessível pelo celular).
   Carregado POR ÚLTIMO (depois de portal/paralegal/flutuante.css) em base.html, paralegal_base.html e paralegal_embed.html.
   Só age em tela estreita ou de toque; no computador nada muda. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- celular (até 680px) ---------- */
@media (max-width: 680px) {
  /* cabeçalho: linha 1 = logo + tema + usuário; linha 2 = módulos numa faixa que rola de lado (antes eram 3 linhas empilhadas) */
  .topbar.tf { padding: 6px 8px; row-gap: 2px; margin: 6px 6px 0; }
  .topbar.tf .tf-modulos { flex-wrap: nowrap; overflow-x: auto; height: 44px; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .topbar.tf .tf-mod { height: 38px; padding: 0 12px; }
  .topbar.tf .tf-mod.off { display: none; }              /* módulo sem acesso/sem link não ocupa a faixa */

  /* menu lateral (Paralegal/Controle/Central) vira faixa de chips com rolagem; cada chip com altura de toque */
  .pl-lateral, .ct-lateral { gap: 6px; }
  .pl-item, .ct-item { min-height: 42px; white-space: nowrap; flex: none; }

  /* quadro do Paralegal: coluna "encaixa" ao soltar o dedo */
  .pl-quadro { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .pl-col { scroll-snap-align: start; }

  /* barra de salvar do processo: sai de baixo do botão da DONNA e respeita a barra do aparelho */
  .pr-rodape { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); padding-right: 70px; flex-wrap: wrap; gap: 8px; }
  .donna-flutuante { width: 46px; height: 46px; bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* tabelas com rolagem própria: altura pela tela do aparelho (a barra do navegador do celular muda de tamanho) */
  .tabela-paginada-wrap, .grade-clientes-wrap { max-height: calc(100dvh - 140px); -webkit-overflow-scrolling: touch; }

  /* títulos e blocos não estouram */
  h1 { font-size: 22px; overflow-wrap: anywhere; }
  .card { overflow-wrap: anywhere; }
  .rodape { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ---------- celular e tablet (até 900px) ou qualquer tela de toque ---------- */
@media (max-width: 900px), (pointer: coarse) {
  /* campo com letra menor que 16px faz o iPhone dar zoom ao tocar; 16px evita */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]),
  select, textarea { font-size: 16px !important; }

  /* alvos de toque: mínimo ~40px */
  button, .botao, a.botao, a.linkbtn, select,
  input[type=text], input[type=search], input[type=date], input[type=email], input[type=number],
  input[type=password], input[type=tel], input[type=url], input[type=time], input[type=datetime-local] { min-height: 40px; }
  button.pequeno, .pequeno { min-height: 36px; }
  .aj-btn { width: 34px; height: 34px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: none; }
  tbody td a:not(.badge):not(.chip) { display: inline-block; padding: 8px 3px; }
  .pg-nav, .pg-num { min-height: 38px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; }
  tbody td, .pl-card { -webkit-tap-highlight-color: rgba(31, 111, 209, .12); }

  /* ⓘ: a caixa cabe na tela e não sai pela borda */
  .aj-pop { width: min(430px, calc(100vw - 24px)); }

  /* gaveta do processo ocupa a tela toda */
  .pl-gaveta { width: 100vw; border-left: 0; }
}

/* sem hover no toque: o que só aparecia ao passar o mouse fica visível */
@media (hover: none) {
  .row-menu, .acoes-hover { opacity: 1 !important; visibility: visible !important; }
}