/* Celular e tablet: o conteúdo nunca passa da largura da tela */
@media (max-width: 1024px) {
  .main-wrapper { width: 100%; min-width: 0; max-width: 100vw; }
  .page-content { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .page-content img, .page-content canvas { max-width: 100%; }
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
  .topbar { padding: 0 12px; }
  .topbar .page-subtitle, .topbar .user-name { display: none !important; }
  .topbar .page-title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-left { min-width: 0; flex: 1; }
  .topbar-left > div { min-width: 0; overflow: hidden; }
  .topbar-right { flex-shrink: 0; gap: 6px; }
  .page-content [style*="grid-template-columns"]:not(.g-kanban) { grid-template-columns: minmax(0, 1fr) !important; }
  .g-grid, .g-chatwrap { grid-template-columns: minmax(0, 1fr) !important; height: auto; }
  .g-row { flex-direction: column; align-items: stretch !important; }
  .g-row > .form-group { width: 100%; flex: 1 1 auto !important; }
  .g-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content .row > [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; }
  .card, .g-box { max-width: 100%; box-sizing: border-box; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .page-content [style*="grid-column"] { grid-column: auto !important; }
  .modal, .g-modal { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: 92vh; }
  input.form-control, select.form-control, textarea.form-control { font-size: 16px; }   /* evita o zoom automático no iPhone */
  #acting-banner { font-size: 12px; padding: 6px 10px; }
  #cx-fixo { padding: 10px 12px; gap: 8px; }
  #cx-fixo strong { font-size: 18px !important; }
}