/* Plataforma AXIS: ajustes de celular e tablet (Frente 43).
   Só layout: nenhuma regra muda o que a tela faz. Carrega depois dos outros CSS.
   Toda regra fica dentro de @media screen para não mexer na impressão nem no desktop. */

/* ---------- tablet e celular (menu lateral vira gaveta, já desde 980px no app.css) ---------- */
@media screen and (max-width:980px){
  /* gaveta: sombra, rolagem própria e fundo escurecido atrás (o fundo não captura toque) */
  nav.rail{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:none}
  body.menu-aberto nav.rail{box-shadow:24px 0 60px rgba(8,8,30,.35)}
  body.menu-aberto .app::after{content:"";position:fixed;inset:0;z-index:29;background:rgba(10,11,32,.48);pointer-events:none;animation:rsp-fade .18s ease-out}
  body.menu-aberto{overflow:hidden}

  /* tabelas: rolagem só dentro da caixa, com a primeira coluna presa à esquerda */
  .wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
  :where(.wrap) :where(th:first-child,td:first-child){position:sticky;left:0;z-index:1;background:var(--card)}
  :where(.wrap) :where(thead th:first-child){z-index:2;background:var(--bg)}
  :where(.wrap) :where(tbody td:first-child){box-shadow:inset -1px 0 0 var(--linha)}

  /* grades de largura fixa que não tinham versão estreita */
  .cofre-g{grid-template-columns:minmax(0,1fr)}
  .notif-g{grid-template-columns:minmax(0,1fr)}
  .editor{grid-template-columns:minmax(0,1fr)}
  .ed-lado{position:static}
  .fz{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .fz .fz-custo{grid-column:1/-1;text-align:left}

  /* mensagens: lista de conversas em cima, conversa embaixo */
  .ch-g,.ch-g.com-fio{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;height:auto;min-height:0}
  .ch-g .ch-lado{border-right:0;border-bottom:1px solid var(--linha);max-height:42vh}
  .ch-g .ch-conv{min-height:65vh}
  .ch-g .ch-fio{border-left:0;border-top:1px solid var(--linha);min-height:50vh}

  /* modal no tablet: duas colunas de novo (o app.css já empilha em 980) e rodapé sempre visível */
  dialog .grade{grid-template-columns:1fr 1fr}
  dialog:modal{max-height:calc(100dvh - 32px);overflow:hidden}
  dialog:modal>form{max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;overscroll-behavior:contain}
  dialog footer{position:sticky;bottom:0;z-index:3;background:var(--card);padding:12px 0 2px;margin-top:4px;box-shadow:0 -1px 0 var(--linha)}
}

/* ---------- celular ---------- */
@media screen and (max-width:640px){
  /* topo mais enxuto */
  .topo{padding-top:10px;padding-bottom:10px}
  .topo .ctx{min-width:0}
  .topo .ctx>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tela{padding-top:16px;gap:16px}
  h1{font-size:20px}

  /* filtros e ações: campos em linha que dividem a largura, sem sobra torta */
  .filtros>input,.filtros>select,.filtros>.btn{flex:1 1 140px;min-width:0}
  .filtros>input[type=month],.filtros>input[type=date],.cab .acoes>input[type=month]{flex:1 1 180px}
  .filtros>input[type=checkbox],.filtros>input[type=radio]{flex:none}
  .cab .acoes>.btn,.cab .acoes>a.btn{flex:1 1 auto;justify-content:center}
  .cab .acoes>input,.cab .acoes>select{flex:1 1 140px}

  /* formulários em uma coluna */
  .grade,dialog .grade{grid-template-columns:minmax(0,1fr)}
  .drop{grid-template-columns:minmax(0,1fr)}
  .drop .campo{grid-column:auto!important}
  .dest-l{grid-template-columns:minmax(0,1fr)}
  .cf-l{grid-template-columns:84px minmax(0,1fr) auto}
  .fz{grid-template-columns:minmax(0,1fr)}

  /* campos com 16px para o iPhone não dar zoom ao tocar */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
  input[type=file]{max-width:100%}

  /* alvos de toque */
  .btn{min-height:40px}
  .btn.pq{min-height:34px}

  /* cartões de número que cortavam o rótulo */
  .as-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* modal em tela cheia, rolando por dentro, com o rodapé de Salvar preso embaixo */
  dialog:modal,dialog.largo:modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;inset:0}
  dialog:modal>form,dialog.largo:modal>form{height:100%;max-height:100%;overflow:auto;box-sizing:border-box;padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(12px + env(safe-area-inset-bottom,0px))}
  dialog footer{margin-top:auto;padding:12px 0 calc(4px + env(safe-area-inset-bottom,0px))}
  dialog footer .btn{flex:1 1 0;justify-content:center}
  dialog .lead-m{width:auto}

  /* painel lateral das tarefas ocupa a tela */
  .tk-painel{width:100vw}

  /* Dashboard de tarefas (app13.js): listas e "por cliente" encolhem com reticências em vez de alargar a página */
  .dt-grade>.box,.dt-lista,.dt-cli,.dt-it,.dt-c{min-width:0}
  .dt-2col{grid-template-columns:minmax(0,1fr)}
  .dt-c{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dt-c .dt-cv{grid-column:1/-1;white-space:normal}
  .dt-it .pill{flex-shrink:0}
}

@keyframes rsp-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.menu-aberto .app::after{animation:none}}