/* RESPONSIVO */
@media(max-width:760px){
  html,body{height:auto;overflow:auto}
  #app{flex-direction:column;height:auto;min-height:100vh}
  #side{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;position:sticky;top:0;z-index:6;border-right:0;border-bottom:1px solid var(--side-hair)}
  #side .logo{padding:10px 16px;border-bottom:0;flex-shrink:0}
  #side .logo img{width:auto;max-width:none;height:40px}
  #nav{flex:1;min-width:0;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:6px 8px;gap:2px;display:flex}
  .navsep{display:none}
  .navitem{width:auto;white-space:nowrap;border-radius:0;border-bottom:2px solid transparent;padding:9px 13px}
  .navitem.active{background:none;border-bottom-color:var(--accent);box-shadow:none}
  .navitem .tag{display:none}
  .side-toggle{display:none}
  #side .foot{display:flex;align-items:center;gap:10px;width:auto;margin-left:auto;border-top:0;padding:8px 14px}
  #side .foot .u,#side .foot .e,#side .foot .rolebadge{display:none}
  #side .foot button{width:auto;padding:7px 12px;white-space:nowrap}
  #main,#views,.view{min-height:0}
  #top{padding:12px 16px 0}
  .topbar{flex-wrap:wrap;gap:10px}
  .gs{width:100%;max-width:none;margin-left:0;order:2}
  .tabs{overflow-x:auto}
  #board{padding:14px 16px}
  #view-clientes,#view-metricas,#view-inicio .mod,.mod{padding-left:16px;padding-right:16px}
  .hm-cols{grid-template-columns:1fr}
  .cl-tablewrap{overflow-x:auto}
  /* iOS: input com fonte <16px dispara zoom automatico ao focar */
  .field input,.field select,.field textarea,.cl-bar input,.filterrow input,.filterrow select,.gs input{font-size:16px}
  /* a topbar mobile ja e sticky; a barra de busca dos clientes nao disputa com ela */
  .cl-bar{position:static}
}

/* Tablet estreito / janela lado a lado: sidebar mais magra, respiro menor */
@media(min-width:761px) and (max-width:960px){
  #side{width:198px}
  #side .logo img{max-width:162px}
  #top{padding:12px 18px 0}
  .mod,#board{padding-left:18px;padding-right:18px}
  #view-clientes,#view-metricas,#view-inicio .mod{padding-left:18px;padding-right:18px}
}

/* Telefones estreitos (ate 420px) */
@media(max-width:420px){
  .row2{flex-direction:column;gap:0}
  .d-stats{grid-template-columns:1fr}
  #top h2{font-size:18px}
  .kpi-val{font-size:22px}
  .col{width:232px}
  .hm-bk{width:90px}
  #side .logo img{height:34px}
  .mod,#board,#view-clientes,#view-metricas,#view-inicio .mod{padding-left:12px;padding-right:12px}
}