/* [mobile-sistema] camada para celular — so vale em telas ate 820px */
#mob-back,#mob-fundo,#wa-voltar{display:none}
@media (max-width:820px){
  :root{--header-h:56px;--sidebar-w:280px}
  html,body{overflow-x:hidden}
  input,select,textarea{font-size:16px!important} /* evita zoom automatico no iPhone */

  /* topo */
  #topbar{height:56px;padding:0 8px 0 0}
  .tb-brand,.tb-user{display:none!important}
  #tb-toggle{margin:0 2px 0 6px;padding:8px}
  #tb-toggle .mi{font-size:26px}
  .tb-space{margin:0 6px!important;max-width:none!important;min-width:0;flex:1}
  .tb-space input{min-width:0}
  #busca-resultados{position:fixed!important;top:60px!important;left:8px!important;right:8px!important;max-height:70vh!important}
  .tb-right{gap:4px}
  #tb-status,#tb-fila-livre,#tb-pausa-txt{display:none!important}
  #tb-btn-pausa{padding:7px!important}
  .tb-logout{font-size:0;padding:7px;border:0}
  .tb-logout .mi{font-size:20px!important}
  .tb-avatar{width:32px;height:32px;font-size:12px}
  #tb-pausa-aviso{margin:62px 10px 0!important}

  /* menu lateral vira gaveta */
  #sb{top:56px;width:280px;transform:translateX(-100%)!important;z-index:1300;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  body.sb-aberta #sb{transform:none!important}
  body.sb-aberta #mob-fundo{display:block;position:fixed;inset:56px 0 0 0;background:rgba(15,23,42,.45);z-index:1250}
  .ni{padding:12px 14px;font-size:15px}
  .ni-sub .ni{font-size:14px;padding:10px}

  /* conteudo */
  #ct{margin-left:0!important;margin-top:56px}
  .ph{flex-wrap:wrap;gap:10px;padding:12px 14px;position:static}
  .ph-actions,.ph-right{flex-wrap:wrap;margin-left:0!important}
  .pc{padding:12px}
  .sg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tc,.fr,.pipeline-grid{grid-template-columns:1fr!important}
  .tm-card{grid-template-columns:1fr 1fr}
  .card,.cfg-section{padding:14px}
  .cfg-row,.ben-row{flex-wrap:wrap}
  .cfg-lbl,.ben-lbl{width:100%}
  .cli-search-wrap{max-width:none}
  #ct img,#ct video{max-width:100%;height:auto}

  /* tabelas: rolam para o lado dentro do cartao, sem quebrar a pagina */
  #ct table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  #ct th{white-space:nowrap}
  .tw{overflow-x:auto}

  /* janelas (modais) ocupam a tela */
  #mb{align-items:flex-end}
  .mo{width:100%!important;max-width:100%!important;max-height:92vh;border-radius:16px 16px 0 0}
  .mof{flex-wrap:wrap}
  .mof button{flex:1;min-height:44px}

  /* WhatsApp: lista OU conversa */
  #wa-w{height:calc(100dvh - 56px - 57px)}
  #wa-lp{width:100%;border-right:0}
  #wa-cp{display:none}
  body.wa-conversa #wa-lp{display:none}
  body.wa-conversa #wa-cp{display:flex}
  body.wa-conversa #pg-atendimento .ph{display:none}
  body.wa-conversa #wa-w{height:calc(100dvh - 56px)}
  #wa-voltar{display:flex;align-items:center;gap:6px;padding:10px 12px;border:0;border-bottom:1px solid var(--border);background:var(--paper);color:var(--primary);font:600 14px var(--font);cursor:pointer;flex-shrink:0}
  .wm{max-width:88%}
  body:not(.wa-conversa) #wa-ia,body:not(.wa-conversa) #wa-ia-pill{display:none!important}
  #wa-ia.flt{left:10px!important;right:10px!important;width:auto!important;bottom:calc(10px + env(safe-area-inset-bottom))!important}
  #wa-ia-pill{left:10px!important}
  body.wa-conversa #fl-bell{bottom:calc(128px + env(safe-area-inset-bottom))!important;right:12px!important}
  #wa-ms{padding-bottom:150px}
  #wa-hd{top:0}
  .wa-ch{flex-wrap:wrap}

  /* telas em iframe (Minha Central etc.) */
  #ct iframe{height:calc(100dvh - 56px)!important}
}