/* dispositivos.css — viewport e toque para Mac, iPhone e iPad (SP-M5, WP-4). Carregado por último.
   Não mexe na geometria interna das páginas (a folha de PDF continua em pt e é escalada por transform);
   só ajusta a casca: régua, palco, alvos de toque e controles que dependiam de hover.
   Mac com mouse (pointer: fine, largura ≥ 760px) não é afetado por nada aqui. */

html { touch-action: manipulation; }

/* ------------------------------------------------------------ régua: alvos de toque e rolagem horizontal */
@media (pointer: coarse), (max-width: 759px) {
  body, body[data-modulo] { --regua-altura: 52px; }
  regua-app, regua-app[data-modulo] {
    gap: 8px; padding: 0 10px; font-size: 14px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  regua-app::-webkit-scrollbar { display: none; }
  regua-app > * { flex: none; }
  regua-app > .rg-trilha { flex: 0 1 auto; min-width: 0; max-width: 18em; }
  regua-app > .rg-estado { margin-left: auto; min-width: 0; }
  regua-app[data-modulo] :is(button, summary, select) {
    height: 44px; min-width: 44px; padding: 0 12px; font-size: 14px; line-height: 1;
  }
  regua-app[data-modulo] select { padding: 0 6px; }
  regua-app[data-modulo] .rg-modulos { border-radius: 8px; }
  regua-app[data-modulo] .rg-modulos a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; }
  /* o menu fica fora da rolagem horizontal da régua */
  regua-app[data-modulo] .rg-menu { position: fixed; top: var(--regua-altura); right: 8px; }
  regua-app[data-modulo] .rg-menu button { height: 44px; }
}

/* ------------------------------------------------------------ palco: telas estreitas rolam na vertical */
@media (max-width: 759px) {
  #palco { overflow-x: hidden; overflow-y: auto; align-items: flex-start; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  pagina-folha:not([orientacao="fluida"]) { margin: 6px 0; }
  body.stickers-aberto #palco { right: 0; }
  .painel-stickers { width: min(260px, 86vw); }
  dialog.modal-stark { max-width: calc(100vw - 24px); }
}

/* ------------------------------------------------------------ controles que só apareciam ao passar o mouse */
@media (hover: none) {
  quadro-livre .ferramentas { opacity: 1; }
  quadro-livre .item :is(.alca, .remover, .redimensionar) { opacity: 1; }
  quadro-livre .ferramentas button { padding: 4px 7px; }
  quadro-livre .item :is(.remover, .redimensionar)::after { content: ""; position: absolute; inset: -10px; }
}