/* Responsivo: deixa o CRM inteiro redondo no celular. */

/* Botao de menu (hamburguer) e fundo do menu: escondidos no desktop. */
#navtoggle{display:none;align-items:center;justify-content:center;background:var(--bg);
  border:1px solid var(--linha);color:var(--azul);border-radius:10px;width:40px;height:40px;
  cursor:pointer;flex-shrink:0;padding:0}
.nav-backdrop{display:none}

@media (max-width: 820px){
  /* Menu lateral vira gaveta que desliza */
  #navtoggle{display:flex}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:min(82vw,290px);z-index:300;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.45)}
  body.nav-aberto .sidebar{transform:none}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(20,33,61,.5);z-index:250;
    opacity:0;pointer-events:none;transition:opacity .2s}
  body.nav-aberto .nav-backdrop{opacity:1;pointer-events:auto}

  .main{width:100%;min-width:0}
  .topbar{padding:11px 14px;gap:10px;flex-wrap:wrap}
  .topbar h1{font-size:16px}
  .topbar .crumb{display:none}
  .topbar .search{display:none}
  .topbar .btn{padding:9px 12px;font-size:12.5px}

  .view{padding:16px 14px !important}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:11px}
  .kpi .val{font-size:22px}
  .two-col,.grid-2,.grid-2b,.ia-grid,.usr-grid{grid-template-columns:1fr}
  .section-head{flex-wrap:wrap;gap:10px}

  /* Kanban: uma coluna por vez, arrastando de lado */
  .board .col{width:82vw}

  /* Tabelas rolam de lado sem quebrar a tela */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--linha)}
  .tbl-scroll table{min-width:560px;box-shadow:none;border:none}

  /* Modais ocupam a tela com folga */
  .modal,.est-modal{max-width:100%}
  .overlay,.est-ov{padding:12px}

  /* Copiloto: painel quase cheio no celular */
  #cop-panel{right:12px;left:12px;width:auto;bottom:84px}
  #cop-bubble{right:16px;bottom:16px}

  /* Ficha do lead e formularios respiram melhor */
  .fields{grid-template-columns:1fr}
}

/* Telas bem pequenas */
@media (max-width: 420px){
  .kpi-grid{grid-template-columns:1fr}
  .topbar .btn{font-size:0;gap:0;padding:9px 11px}
  .topbar .btn::before{content:"+";font-size:18px}
}