/* Upper Scout — layout para computador e tablet deitado (tela a partir de 900 px).
   No celular nada muda. Aqui o app ocupa a tela toda: menu à esquerda, conteúdo mais largo,
   listas em colunas, janelas no meio da tela e o registro de visita numa coluna central. */
@media (min-width:900px){
  .app,.app.wide{max-width:none;box-shadow:none}

  /* largura do conteúdo: o espaço que sobra vira margem dos dois lados */
  .scr{--cw:1120px}
  .scr:not(:has(>.tabbar)){--cw:760px}               /* registro de visita e "visita salva" */
  .scr:has(>.body.narrow){--cw:880px}                 /* perfil e fornecedor */
  .scr:has(>.pf-body){--cw:1480px}                     /* painel */
  .scr .body,.app.wide .scr .body{padding:12px max(28px,calc((100% - var(--cw)) / 2)) 40px}
  .scr .hdr,.scr .top-p{padding:18px max(28px,calc((100% - var(--cw)) / 2)) 12px;min-height:72px}
  .scr .cap-h{padding:14px max(20px,calc((100% - var(--cw)) / 2 - 8px)) 12px}
  .scr .foot{padding:14px max(28px,calc((100% - var(--cw)) / 2)) 18px}
  .scr .hero{height:240px;padding:20px max(28px,calc((100% - var(--cw)) / 2))}
  .scr .hero-top{left:max(20px,calc((100% - var(--cw)) / 2 - 8px));right:max(20px,calc((100% - var(--cw)) / 2 - 8px));top:14px}
  .hdr h1{font-size:24px}
  .scr .top-p.brandbar{padding-top:22px;padding-bottom:26px}
  .brandbar .bb-logo{visibility:hidden}               /* o logo já está no menu */
  .scr>.hdr{padding-top:20px;padding-bottom:16px}

  /* menu lateral no lugar da barra de baixo */
  .scr:has(>.tabbar){display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .scr:has(>.tabbar)>*{grid-column:2;min-width:0}
  .scr:has(>.tabbar)>.hdr,.scr:has(>.tabbar)>.top-p,.scr:has(>.tabbar)>.hero{grid-row:1}
  .scr:has(>.tabbar)>.body{grid-row:2}
  .scr:has(>.tabbar)>.foot{grid-row:3}
  /* menu: azul-marinho com o logo, como o topo do site do Grupo Upper */
  .scr>.tabbar,.scr>.tabbar.desk-only{grid-column:1;grid-row:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:2px;
    height:auto;padding:24px 14px 18px;border-top:0;background:var(--navy);overflow-y:auto}
  .tabbar .nav-logo{display:block;order:-3;height:27px;width:auto;align-self:flex-start;margin:0 10px 6px}
  .tabbar .nav-sub{display:block;order:-2;color:rgba(255,255,255,.55);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:0 10px 22px}
  .tabbar .tb,.tabbar .tb.desk{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;font-size:14.5px;font-weight:600;
    color:rgba(255,255,255,.74);padding:11px 12px;border-radius:10px;margin:0;text-align:left;letter-spacing:-.005em}
  .tabbar .tb .i{width:20px;height:20px}
  .tabbar .tb:hover{background:rgba(255,255,255,.07);color:#fff}
  .tabbar .tb.on{background:rgba(255,255,255,.11);color:#fff;box-shadow:inset 3px 0 0 var(--red)}
  .tabbar .tb.on::after,.tabbar .tb.on-m::after{display:none}
  .tabbar .tb.on-m:not(.on){color:rgba(255,255,255,.74)}
  .tabbar .tb .bdg{position:static;margin-left:auto}
  .tabbar .tb.plus{order:-1;margin:0 0 16px;background:var(--red);color:#fff;font-weight:700;padding:13px 14px;box-shadow:0 8px 20px rgba(198,34,39,.35)}
  .tabbar .tb.plus:hover{background:var(--red-dk)}
  .tabbar .tb.plus .fab{width:auto;height:auto;background:none;box-shadow:none;border-radius:0}
  .tabbar .tb.plus .fab .i{width:20px;height:20px}
  .tabbar .tb[data-v="profile"]{margin-top:auto}
  .tabbar>span:empty{display:none}

  /* listas em colunas: cada visita, revisita ou expositor vira um cartão; o resto ocupa a linha toda */
  .body.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));align-content:start;gap:14px 12px}
  .body.cols>:not(.li):not(.rvc){grid-column:1/-1}
  .body.home2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:14px 12px}
  .body.home2>:not(.li):not(.rec-cta):not(.big-opt){grid-column:1/-1}
  .kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .people{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .thumbs-g{grid-template-columns:repeat(6,1fr)}
  .li:hover,.big-opt:hover,.kpi:hover{border-color:var(--a-line2);box-shadow:0 4px 14px rgba(14,26,43,.06)}

  /* filtros: os botões quebram linha em vez de rolar para o lado */
  .hscroll{flex-wrap:wrap;overflow:visible;margin:0;padding:0}

  /* janelas (Parar registro, fornecedor repetido) no meio da tela */
  .sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(560px,calc(100% - 48px));max-height:84%;border-radius:24px;padding:20px 22px 22px;
    transform:translate(-50%,-50%);animation:dpop .2s ease-out}
  .sheet .grab{display:none}
  .sheet.msg{width:min(680px,calc(100% - 48px))}
  @keyframes dpop{from{opacity:0;transform:translate(-50%,-46%)}}
  .toast{left:50%;right:auto;width:min(520px,calc(100% - 24px));transform:translateX(-50%);animation:dtin .25s ease-out}
  @keyframes dtin{from{opacity:0;transform:translate(-50%,-12px)}}

  /* entrada: tudo numa coluna central */
  .login.auth{padding-left:max(22px,calc((100% - 460px) / 2));padding-right:max(22px,calc((100% - 460px) / 2))}
}