/* =========================================================
   X3 mobile — adaptação global para celular (08/11/2026)
   Carregado automaticamente em todas as páginas do x3store.
   Só age em telas pequenas; não afeta impressão/PDF.
   ========================================================= */
.x3-tbl{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

@media screen and (max-width:820px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  html,body{max-width:100%;overflow-x:hidden}
  *,*::before,*::after{box-sizing:border-box}

  /* mídia nunca passa da largura da tela */
  img,video,canvas,iframe,embed,object{max-width:100%}
  img{height:auto}

  /* blocos principais respeitam a largura da tela */
  .container,.container-fluid,.wrapper,.content,.main,main,.page,.box,.panel,.card,.modal-dialog,form,section,article{max-width:100%}
  .container,.container-fluid{padding-left:12px;padding-right:12px}
  .modal-dialog{margin:10px auto;width:auto}

  /* tabelas largas rolam de lado (o x3-mobile.js envolve as que estouram) */
  .x3-tbl{margin-bottom:12px;border-radius:10px}
  .x3-tbl>table{margin-bottom:0}

  /* formulários: campos ocupam a largura e não dão zoom no iPhone */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),select,textarea{max-width:100%;font-size:16px}
  textarea{width:100%}

  /* toque confortável */
  button,.btn,input[type=submit],input[type=button],input[type=reset]{min-height:40px;touch-action:manipulation}

  /* grupos de botões e barras de ações quebram linha */
  .btn-group,.toolbar,.actions,.acoes,.botoes,.filtros,.header-actions,.page-actions{flex-wrap:wrap;gap:6px}

  /* textos longos não estouram */
  h1,h2,h3,h4,p,li,dd,blockquote{overflow-wrap:break-word}
  pre,code{white-space:pre-wrap;word-break:break-word}
}

@media screen and (max-width:480px){
  h1{font-size:clamp(20px,6vw,26px)}
  h2{font-size:clamp(18px,5.4vw,22px)}
}