/* ===== celular (carregado depois do estilo.css) ===== */
@media (max-width:760px){
  .casca{display:flex;flex-direction:column;height:auto;min-height:100%}
  aside{position:sticky;top:0;z-index:5;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--borda);overflow-x:auto;background:var(--bg)}
  aside .logo{width:84px;flex:none}
  aside>div:nth-child(2){display:flex;flex:1;min-width:0}
  aside .rotulo,.pe span{display:none}
  .lista-cli{flex-direction:row;gap:6px;overflow-x:auto}
  .cli{padding:6px 10px 6px 6px;white-space:nowrap;width:auto}
  .cli i{width:26px;height:26px}
  .pe{margin:0;flex:none}
  main{height:auto;position:relative}
  .topo{padding:16px 14px 10px;flex-direction:column;align-items:stretch;gap:12px}
  .topo h2{font-size:28px}
  .topo .abas{order:3;overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;scrollbar-width:none}
  .topo .abas button{white-space:nowrap;flex:none}
  .topo .acoes{position:absolute;top:18px;right:14px}
  .topo .acoes .btn{padding:9px 14px}
  .corpo{padding:6px 12px 90px}
  .barra{flex-direction:column;align-items:stretch;gap:10px}
  .filtros{overflow-x:auto;flex-wrap:nowrap}
  .proximos{grid-template-columns:1fr 1fr;gap:8px}
  .prox .capa{aspect-ratio:1}
  .mesnav{flex-wrap:wrap}
  .mesnav h3{min-width:0;flex:1;font-size:20px}
  .visoes{margin-left:0;width:100%;justify-content:center}
  .grade,.grade.semana{grid-template-columns:1fr!important;gap:6px}
  .sem{display:none}
  .dia{min-height:auto!important;flex-direction:row;flex-wrap:wrap;align-items:flex-start;padding:10px}
  .dia .n{width:44px;flex:none}
  .dia .chip{flex:1 1 calc(100% - 52px);margin-left:auto}
  .dia:not(:has(.chip)):not(.hoje){display:none}
  .dia .mais{opacity:1;position:static;margin-left:auto}
  .bola{gap:8px 12px}
  .rel .kpis,.kpis{grid-template-columns:1fr 1fr!important;gap:8px}
  .kpi{padding:14px}
  .kpi strong{font-size:28px!important}
  .canalcab{flex-wrap:wrap}
  .canalcab>div:last-child{margin-left:0!important;width:100%}
  .periodo{overflow-x:auto;flex-wrap:nowrap;width:100%}
  .periodo button{white-space:nowrap;flex:none}
  .graficos,.graficos.tres,.pmels,.rdests,.hb-tres,.dodont{grid-template-columns:1fr!important}
  .pmel.um{grid-column:auto}
  .ranking{overflow-x:auto}
  .ranking table{min-width:620px}
  .cores{grid-template-columns:1fr 1fr}
  .hub-cab h2{font-size:30px}
  .gaveta{width:100%;grid-template-columns:1fr;overflow:auto}
  .gaveta .prev{padding:16px}
  .cx{height:100dvh;max-height:100dvh;border-radius:0}
  .compositor{padding:0}
  .cx-corpo{display:flex;flex-direction:column;overflow:auto}
  .cx-form{overflow:visible;padding:4px 16px 16px}
  .cx-prev{order:2;border-left:0;border-top:1px solid var(--borda);padding:16px}
  .cx>header{padding:14px 16px}
  .cx>footer{padding:12px 16px;flex-wrap:wrap}
  .cx>footer .grow{display:none}
  .cx>footer .btn{flex:1}
  .cx>footer .btn:first-child{flex:0 0 100%;order:3;border:0}
  .linha3{grid-template-columns:1fr 1fr}
  .linha3 label:first-child{grid-column:1/-1}
  .modal>div,.interesse{width:100%;max-height:100dvh;overflow:auto}
}
@media (max-width:760px){
  .cx{width:100vw}
  .cx-corpo,.cx-form,.cx-form section,.cx-prev{min-width:0;max-width:100vw}
  .cx-form textarea,.solta{width:100%;min-width:0}
  .midias2{min-width:0}
  .cx-prev .cel{max-width:300px}
  html,body{overflow-x:hidden}
}