/* ============================================================
   Nossa Bússola — camada DESKTOP (23/09/2026). Carregada só em telas a partir de 1000px (o <link> tem media=).
   Regra da casa: NADA aqui vale no celular. Só reorganiza o espaço; cores, fontes, raios, sombras e o modo escuro são os
   mesmos tokens do style.css. A barra de abas de baixo vira um menu lateral; a coluna de 430px vira uma área de conteúdo
   larga; as janelas que subiam de baixo abrem centralizadas. Pra voltar ao que era: tirar o <link> do desktop.css.
   ============================================================ */
@media (min-width: 1000px) {
  :root { --nb-lateral: 248px; --nb-conteudo: 920px; }
  .app { max-width: none; margin: 0; box-shadow: none; --nb-screen-pad: 48px; --nb-tabbar-h: 0px; }

  /* menu lateral (é a tabbar do celular, deitada) */
  .tabbar { position: fixed; left: 0; top: 0; bottom: 0; right: auto; width: var(--nb-lateral); height: auto; max-width: none; margin: 0; padding: 28px 14px 24px;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; background: var(--nb-surface); border-top: 0; border-right: 1px solid var(--nb-border); box-shadow: none; }
  .tabbar::before { content: "Nossa Bússola"; display: block; font-family: var(--nb-font-display); font-size: 22px; font-weight: 500; color: var(--nb-text); letter-spacing: var(--nb-tracking-tight);
    padding: 2px 10px 26px 48px; background: url(/img/logo-mark.svg) no-repeat 10px 2px / 28px 28px; }
  .tabbar button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; height: 46px; padding: 0 12px; border-radius: var(--nb-radius-sm); color: var(--nb-text-2); transition: background var(--nb-dur), color var(--nb-dur); }
  .tabbar button:hover { background: var(--nb-surface-2); color: var(--nb-text); }
  .tabbar button.on { background: var(--nb-primary-soft); color: var(--nb-primary-strong); }
  .tabbar .pill, .tabbar button.on .pill { width: 24px; height: 24px; background: transparent; }
  .tabbar span.rot, .tabbar button.on span.rot { font-size: var(--nb-text-base); font-weight: 500; }
  .tabbar button.on span.rot { font-weight: 600; }

  /* área de conteúdo */
  .tela { margin-left: var(--nb-lateral); max-width: calc(var(--nb-conteudo) + 2 * var(--nb-screen-pad)); padding: 0 var(--nb-screen-pad) 64px; min-height: 100vh; }
  .tela.sem-tab { margin: 0 auto; max-width: 760px; }
  .appbar { min-height: 76px; padding-top: 22px; padding-bottom: 12px; }
  .appbar.grande { padding-top: 34px; padding-bottom: 22px; }
  .appbar.grande .tit { font-size: var(--nb-text-3xl); }
  .secao { margin-top: 30px; }
  .card { padding: 20px; }
  .card.lista { padding: 6px 20px; }

  /* Início e Módulos: os cartões de módulo em 4 colunas, e mais folga entre eles */
  .grade2:has(> .tile) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tile:hover { transform: translateY(-2px); box-shadow: var(--nb-shadow-raised); }
  button.linha:hover { background: color-mix(in srgb, var(--nb-surface-2) 55%, transparent); margin: 0 -12px; padding-left: 12px; padding-right: 12px; width: calc(100% + 24px); border-radius: var(--nb-radius-sm); }

  /* botão flutuante e barra do chat acompanham a área de conteúdo, não a tela toda */
  .fab { right: auto; left: calc(var(--nb-lateral) + var(--nb-conteudo) + var(--nb-screen-pad) - 56px); bottom: 32px; }
  @media (max-width: 1264px) { .fab { left: auto; right: 32px; } }
  .sd-chat-form { left: var(--nb-lateral); right: auto; width: calc(var(--nb-conteudo) + 2 * var(--nb-screen-pad)); max-width: none; margin: 0; bottom: 0; padding: 12px var(--nb-screen-pad) 20px; }

  /* janelas: abrem no centro, como diálogo, em vez de subir de baixo */
  .sheet-fundo { align-items: center; padding: 24px; }
  .sheet { max-width: 600px; border-radius: var(--nb-radius-lg); padding: 24px 32px 32px; max-height: 88vh; animation: none; }
  .sheet .alca { display: none; }
  .sheet h3 { font-size: var(--nb-text-xl); }
  .toast { bottom: 32px; left: calc(50% + var(--nb-lateral) / 2); }

  /* entrada */
  .perfis { max-width: 460px; margin: 0 auto; padding-top: 12vh; }
  .carregando { min-height: 100vh; }
}