/* =====================================================================
   MOBILE (≤767px) — camada aditiva carregada DEPOIS do app.css.
   Convenção deste arquivo: só (1) blocos @media (max-width:767px) e
   (2) regras-base de elementos NOVOS que não existem no desktop
   (escondidos por padrão). O app.css NUNCA é alterado por causa do
   mobile — o desktop fica intocado por construção.
   Breakpoint 767 fica abaixo das MQs históricas (900/860/820/760),
   que continuam valendo no desktop estreito.
   ===================================================================== */

/* elementos que só existem no mobile: invisíveis fora do breakpoint */
.bottomnav{display:none}
.ib-back{display:none}
.lp-mobtabs{display:none}
.ag-days{display:none}

@media (max-width:767px){

/* ============================================ fundação / shell */
body{-webkit-tap-highlight-color:transparent}
.app{height:100dvh}
.sidebar{display:none}
.main{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
.view{padding:14px 14px 24px}

/* barra de navegação inferior (estilo app) */
.bottomnav{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:calc(58px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg1);border-top:1px solid var(--line2);
}
.bottomnav a,.bottomnav button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:10px;font-weight:600;color:var(--muted);position:relative;
  border:none;background:none;padding:0;font-family:inherit;
}
.bottomnav svg{width:21px;height:21px}
.bottomnav .on{color:var(--green2)}
.bottomnav .nbadge{
  position:absolute;top:5px;left:calc(50% + 6px);margin:0;
  background:var(--green);color:#fff;min-width:16px;height:16px;font-size:9.5px;
  font-weight:700;border-radius:99px;align-items:center;justify-content:center;padding:0 4px;
}

/* topbar: título em cima, ações numa linha rolável embaixo */
.topbar{flex-wrap:wrap;gap:6px 10px;padding:12px 14px 10px}
.topbar>div:first-child{min-width:0;flex:1}
.topbar h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{display:none}
.topbar .actions{
  margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  gap:8px;padding:2px 0 4px;scrollbar-width:none;
}
.topbar .actions::-webkit-scrollbar{display:none}
.topbar .actions>*{flex:0 0 auto}
.topbar .search{width:150px!important}

/* avisos acima da barra inferior */
#toasts{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom))}
.saveflash{bottom:calc(74px + env(safe-area-inset-bottom))}

/* drawer vira folha de tela cheia; modal ocupa quase tudo */
.drawer{width:100vw;right:-102vw;padding:18px 16px calc(18px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.drawer.wide{width:100vw}
.drawer.show{right:0}
.modal{width:calc(100vw - 20px);max-height:92dvh;overscroll-behavior:contain}
.bulkbar{flex-wrap:wrap}
.bk-row{grid-template-columns:minmax(0,1fr) auto 28px}
.bk-lbl{grid-column:1/-1;margin-bottom:-4px}

/* iOS: input abaixo de 16px dá zoom automático no foco */
input,textarea,select,.input,textarea.input,select.input,.input.sm{font-size:16px}

/* folha "Mais" da barra inferior */
.more-user{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.more-user .uinfo b{display:block;font-size:14.5px}
.more-user .uinfo span{font-size:11.5px;color:var(--muted)}
.more-nav{display:flex;flex-direction:column;gap:2px}
.more-nav a,.more-nav button{
  display:flex;align-items:center;gap:13px;padding:14px 10px;border-radius:12px;
  color:var(--ink);font-size:14.5px;font-weight:500;border:none;background:none;
  text-align:left;font-family:inherit;cursor:pointer;
}
.more-nav svg{width:19px;height:19px;color:var(--muted)}
.more-nav a:active,.more-nav button:active{background:rgba(244,248,252,.06)}
.more-nav .more-out{color:var(--bad);margin-top:10px;border-top:1px solid var(--line);border-radius:0;padding-top:18px}
.more-nav .more-out svg{color:var(--bad)}

/* ============================================ conversas (master/detail) */
.inbox{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}  /* texto nowrap não pode alargar a coluna */
.ib-side{display:none}
.ib-back{display:inline-flex;flex:0 0 auto}
.ib-list .lhead{padding:10px 12px 8px;gap:8px}
.seg button{padding:7px 8px;min-width:0}
/* cabeçalho da conversa limpo estilo WhatsApp: voltar + avatar + nome + ficha */
.th-head{padding:8px 10px;gap:8px}
.th-head .tinfo b,.th-head .tinfo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.th-head>.pill{display:none}       /* a etapa vive na lista e na ficha */
.th-head #thDel{display:none}      /* excluir fica na ficha */
.th-msgs{padding:14px 12px}
.msg{max-width:86%}
.aud{min-width:0}
.msg-video{width:100%}
.msg-doc{min-width:0}
.msg-doc .doc-info b{max-width:100%}
.tpl-pop{left:8px;right:8px;max-height:40dvh}
.composer{padding:8px 10px}
/* janela de 24h: no celular vira uma faixinha — só o título + o botão
   (o texto explicativo some via font-size:0, sem mexer no HTML) */
.winbanner{padding:6px 10px;gap:7px}
.winbanner span{font-size:0}
.winbanner span b{font-size:0}
.winbanner span b:first-child{font-size:11.5px;white-space:nowrap}
.ctab{padding:6px 12px;font-size:11.5px}
.iabar{font-size:11px;padding:0 2px 7px}
/* teclado aberto (campo focado): bottom nav e topbar saem da frente —
   quem está digitando precisa de mensagens na tela, não de navegação */
body.kb-open .bottomnav{display:none}
body.kb-open .topbar{display:none}
body.kb-open .main{padding-bottom:0}
.taskbar{flex-wrap:wrap;row-gap:4px}
.taskbar b{max-width:100%}
.recbar{gap:8px}

/* ============================================ rota do lead: abas Ficha | Conversa */
.lead-page{display:flex;flex-direction:column}
.lp-right{display:flex;flex:1;min-height:0}   /* desfaz o display:none da MQ @860 SÓ aqui */
.lp-left{display:none}
.lead-page.show-ficha .lp-left{display:block;flex:1;min-height:0;overflow:auto}
.lead-page.show-ficha .lp-right{display:none}
.lp-mobtabs{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}
.lp-mobtabs .seg{flex:1}
.lp-back{display:none}                        /* o voltar mora na barra de abas */
.stagebar span{height:14px}                   /* alvo de toque decente */
.fldrow>span{width:34%;flex:0 0 34%}

/* ============================================ CRM / kanban em touch */
.kb-wrap{scroll-snap-type:x mandatory;scroll-padding:12px;padding:12px}
.kb-col{width:86vw;flex:0 0 86vw;scroll-snap-align:start}
.kb-head [data-add]{width:34px!important;height:34px!important}
.kb-card .kc-move{width:30px;height:30px;margin-left:2px;flex:0 0 auto}
.more-nav button[disabled]{opacity:.5;pointer-events:none}
.lst-wrap{padding:12px}
.lst-wrap .table{min-width:760px}

/* tarefas: quadro herda o snap pelo .kb-*; só alvo de toque */
.tk-check,.tk-rcheck{width:26px;height:26px}

/* ============================================ dashboard / métricas */
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.dash-2,.dash-3{grid-template-columns:minmax(0,1fr)}
.kpi .ic{display:none}                        /* ícone decorativo sobrepunha o número */
.donut-wrap{flex-direction:column;align-items:flex-start!important}

/* ============================================ formulários / tabelas / toque */
.frow,.dw-grid,.cv-grid{grid-template-columns:minmax(0,1fr)}
.cfg{grid-template-columns:minmax(0,1fr)}   /* select longo não pode alargar a coluna */
.card table,.cfg table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.chip{padding:7px 13px;font-size:12px}
.iconbtn{width:40px;height:40px}
.impmap-dest{flex:0 0 150px}
.tfrow{display:flex;flex-wrap:wrap;row-gap:8px}
.tfrow #tKind{flex:1 1 40%!important}
.tfrow #tTitle{flex:1 1 100%!important;min-width:0!important}
.tfrow #tDate{flex:1 1 44%!important}
.tfrow #tTime{flex:1 1 30%!important}

/* tooltip [data-tip] acessível por toque (press): cópia do :hover do app.css */
[data-tip]:active::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);right:-6px;z-index:60;background:#0b1d33;color:#e8f1fb;border:1px solid rgba(140,190,255,.25);border-radius:9px;padding:7px 10px;font-size:11px;line-height:1.45;width:max-content;max-width:240px;white-space:normal;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
[data-tip]:active::before{content:"";position:absolute;bottom:calc(100% + 2px);right:2px;z-index:61;border:5px solid transparent;border-top-color:#0b1d33}

/* ============================================ agenda: modo dia */
.ag-days{display:flex;gap:6px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none}
.ag-days::-webkit-scrollbar{display:none}
.ag-days .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.ag-table.mob{grid-template-columns:52px 1fr;min-width:0}
.ag-wrap{padding:10px}
.ag-head h2{min-width:0;font-size:15px}
.ag-head .small{display:none}

/* ============================================ modal do lead (aba Tarefas) */
.modal.lead-modal{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}

}