/* ============================================================
   Ollaun / WLCRM  —  mobile.css
   Ajustes responsivos para celular (~360-390px).
   Carregado DEPOIS de styles.css: pode sobrescrever.
   NÃO altera markup. Usa as variáveis já existentes.
   Breakpoints: 760px (tablet/celular) e 400px (celular estreito).
   ============================================================ */

/* ------------------------------------------------------------
   1) TELEFONE E TABLET  —  @media (max-width:760px)
   ------------------------------------------------------------ */
@media (max-width:760px){

  /* Scrollers horizontais com inércia no iOS */
  .tbl-wrap,.tabs,.kan,.cc-list,.chat-body,.mdl-b{-webkit-overflow-scrolling:touch}

  /* ---------- Evitar zoom automático do iOS ao focar campos ----------
     iOS dá zoom quando o input tem fonte < 16px. */
  .field input,.field select,.field textarea,
  .search input,.composer input.box,
  .login input,.login select{font-size:16px}

  /* ---------- TOPBAR ---------- */
  .top{gap:8px;padding:0 10px}
  .vtitle{min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vtitle small{display:none}
  .conn{display:none}                 /* status WhatsApp some (já no styles.css, reforço) */
  .user .nm,.user .role{display:none}
  .user{padding-left:8px}
  .roleswitch button{padding:6px 10px;font-size:12px}
  .userswitch{padding:5px 8px;gap:5px}
  .userswitch select{max-width:124px;font-size:12px}

  /* ---------- PAGE ---------- */
  .page{padding:14px 12px}

  /* ---------- KPIs ---------- */
  .grid.kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:14px 13px}
  .kpi .k-val{font-size:21px}
  .kpi .k-top{font-size:12px;gap:6px}

  /* ---------- SEÇÃO (título + busca + botão) ---------- */
  .sect-h{flex-wrap:wrap;gap:10px;margin:18px 0 12px}
  .sect-h .sp{display:none}                     /* remove o espaçador flex pra empacotar */
  .sect-h .search{flex:1 1 100%;max-width:none!important}

  /* ---------- DASHBOARD: funil ---------- */
  .dash-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .fn-row{grid-template-columns:110px 1fr 84px;gap:8px}
  .fn-lbl{font-size:12px}
  .fn-val b{font-size:12px}

  /* ---------- CARDS de meta / canais ---------- */
  .meta-top b{font-size:20px}
  .card-h{padding:13px 14px}
  .card-b{padding:14px}

  /* ---------- TABELAS: rolam na horizontal sem empurrar o layout ----------
     .tbl é width:100% e encolhe demais; damos min-width pra virar rolagem suave. */
  .tbl-wrap{overflow-x:auto;overflow-y:hidden}
  .tbl{min-width:580px}
  .tbl th,.tbl td{padding:10px 11px}
  /* scrollbar discreta pra indicar que rola */
  .tbl-wrap::-webkit-scrollbar,.tabs::-webkit-scrollbar{height:6px}
  .tbl-wrap::-webkit-scrollbar-thumb,.tabs::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}

  /* ---------- CONFIG: barra de abas rola horizontalmente ---------- */
  .tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:2px;-webkit-overflow-scrolling:touch}
  .tabs button{flex:0 0 auto;white-space:nowrap;padding:10px 12px}
  .conn-card{flex-wrap:wrap;padding:14px}
  .qr{width:132px;height:132px}

  /* ---------- ASSISTENTE: 2 colunas viram 1 (grid com style inline) ---------- */
  .page > .grid[style*="1fr 1fr"]{grid-template-columns:1fr!important}

  /* ---------- MODAIS: sheet de baixo, corpo rola, rodapé/botões sempre visíveis ---------- */
  .ovl{padding:0;align-items:flex-end}
  .mdl,.mdl-wide{width:100%;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0}
  .mdl-h,.mdl-f{flex:none}
  .mdl-b{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}

  /* ---------- BUILDER DE ORÇAMENTO (.qb-row) cabe em 360px ---------- */
  .qb-row{grid-template-columns:1fr 52px 76px;gap:6px}
  .qb-row input{font-size:16px}
  .qb-row .qb-sub,.qb-row .qb-del{grid-column:span 3;justify-self:end}
  .qb-row .qb-del{margin-top:-2px}
  .qb-total b{font-size:18px}

  /* ---------- CONVERSAS (uma tela por vez já vem do styles.css; reforço) ---------- */
  .conv{grid-template-columns:minmax(0,1fr)}
  .conv .chat,.conv .ctx{display:none}
  .conv.show-chat .cc{display:none}
  .conv.show-chat .chat{display:flex}
  .chat-back{display:grid!important}
  .chat-body{padding:14px 10px 8px}
  .bubble{max-width:84%}
  .ai-chip{margin:0 0 10px}
  .composer{padding:9px 10px;gap:8px}

  /* ---------- KANBAN: desliza na horizontal ---------- */
  .kan{padding:12px;gap:10px}
  .kcol{flex:0 0 82vw;max-width:320px}

  /* ---------- LOGIN / SIGNUP: bloco rolável e centrado, sem cortar ---------- */
  .login-wrap{display:block;padding:40px 14px;overflow-y:auto}
  .login{margin:0 auto;padding:26px 22px;width:100%;max-width:400px}
}

/* ------------------------------------------------------------
   2) CELULAR ESTREITO  —  @media (max-width:400px)
   ------------------------------------------------------------ */
@media (max-width:400px){

  /* ---------- TOPBAR bem apertada ---------- */
  .top{gap:6px;padding:0 8px}
  .vtitle{font-size:14px}
  .roleswitch{padding:2px}
  .roleswitch button{padding:5px 8px;font-size:11.5px}
  .icon-btn{width:34px;height:34px}
  .top .user .av{width:30px;height:30px;font-size:12px}

  /* ---------- PAGE / KPIs ---------- */
  .page{padding:12px 10px}
  .kpi{padding:12px 11px}
  .kpi .k-val{font-size:19px}
  .kpi .k-ic{width:28px;height:28px}

  /* ---------- Funil mais compacto ---------- */
  .fn-row{grid-template-columns:84px 1fr 64px;gap:6px}
  .fn-lbl{font-size:11px}
  .fn-dot{width:8px;height:8px}
  .fn-val b{font-size:11.5px}
  .fn-val small{font-size:10px}

  /* ---------- Builder de orçamento no limite ---------- */
  .qb-row{grid-template-columns:1fr 46px 70px;gap:5px}

  /* ---------- Kanban ocupa quase a tela ---------- */
  .kcol{flex:0 0 86vw}

  /* ---------- Modal ocupa altura total disponível ---------- */
  .mdl,.mdl-wide{max-height:94vh}
}

/* ------------------------------------------------------------
   3) LANDING PAGE (lp.html)
   SÓ tem efeito se o maestro adicionar
      <link rel="stylesheet" href="/mobile.css">
   no lp.html (ele usa CSS inline próprio, não carrega styles.css).
   Seletores escopados a elementos EXCLUSIVOS da LP (.hero, .band,
   .sec, header .nav, .cta, .wrap) para nao colidir com o app.
   ------------------------------------------------------------ */
@media (max-width:480px){
  .hero h1{font-size:28px}
  .hero p{font-size:15.5px}
  .hero{padding:48px 0 60px}
  .wrap{padding:0 16px}
  header .nav{gap:10px;height:60px}
  .brand{font-size:17px}
  /* CTA empilha e botoes ocupam a largura */
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn,.band .btn{width:100%;justify-content:center}
  .sec{padding:44px 0}
  .sec-h h2,.band h2{font-size:24px}
  .sec-h p{font-size:15.5px}
  .trust .wrap{gap:14px;font-size:12.5px}
}