/* FaroBella — cabeçalho compacto e alinhado ao menu lateral.
   O desktop-shell-scroll.js injeta estilos depois dos CSS estáticos; por isso estes seletores
   são propositalmente mais específicos e usam !important para vencer o shell fixo. */
@media (min-width: 981px) {
  html body.farobella-desktop-shell-fixed > #app.app,
  html body.farobella-desktop-shell-fixed > .app {
    grid-template-columns: 248px minmax(0, 1fr) !important;
  }

  html body.farobella-desktop-shell-fixed > #app.app.side-collapsed,
  html body.farobella-desktop-shell-fixed > .app.side-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main,
  html body.farobella-desktop-shell-fixed .app .main {
    padding: 8px 20px 0 !important;
    grid-template-rows: 58px minmax(0, 1fr) 32px !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top,
  html body.farobella-desktop-shell-fixed .app .main > header.top {
    display: grid !important;
    grid-template-columns: minmax(210px, max-content) minmax(260px, 1fr) !important;
    grid-template-areas: 'title search' !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 12px !important;
    min-height: 54px !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: color-mix(in srgb, var(--bg) 90%, white) !important;
  }

  /* O acionador do menu voltou pra borda do menu lateral (padrão do ecossistema, igual ao
     TchêMova), então o cabeçalho não reserva mais coluna pra ele. Se por algum motivo ele reaparecer
     dentro do header, fica escondido em vez de quebrar o grid de duas colunas. */
  html body.farobella-desktop-shell-fixed #app.app .main > header.top > .side-toggle,
  html body.farobella-desktop-shell-fixed .app .main > header.top > .side-toggle {
    display: none !important;
  }

  /* O cartão do usuário mudou pro rodapé do menu lateral, junto do "Sair" (padrão do TchêMova). */
  html body.farobella-desktop-shell-fixed #app.app .main > header.top > .user,
  html body.farobella-desktop-shell-fixed .app .main > header.top > .user {
    display: none !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top > div:first-of-type,
  html body.farobella-desktop-shell-fixed .app .main > header.top > div:first-of-type {
    grid-area: title !important;
    justify-self: start !important;
    align-self: center !important;
    text-align: left !important;
    min-width: 0 !important;
    max-width: 320px !important;
    margin: 0 !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top .eyebrow,
  html body.farobella-desktop-shell-fixed .app .main > header.top .eyebrow {
    margin: 0 0 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top #title,
  html body.farobella-desktop-shell-fixed .app .main > header.top #title {
    margin: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top #subtitle,
  html body.farobella-desktop-shell-fixed .app .main > header.top #subtitle {
    margin: 1px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top .busca-global,
  html body.farobella-desktop-shell-fixed .app .main > header.top .busca-global {
    grid-area: search !important;
    justify-self: end !important;
    align-self: center !important;
    width: min(370px, 28vw) !important;
    margin: 0 !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top .busca-global input,
  html body.farobella-desktop-shell-fixed .app .main > header.top .busca-global input {
    min-height: 34px !important;
    padding: 8px 12px !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .side .side-toggle,
  html body.farobella-desktop-shell-fixed .app .side .side-toggle {
    top: 12px !important;
    right: -15px !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .page.active,
  html body.farobella-desktop-shell-fixed .app .page.active {
    padding-top: 14px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body.farobella-desktop-shell-fixed #app.app .main > header.top,
  html body.farobella-desktop-shell-fixed .app .main > header.top {
    grid-template-columns: minmax(190px, max-content) minmax(220px, 1fr) !important;
  }

  html body.farobella-desktop-shell-fixed #app.app .main > header.top .user span,
  html body.farobella-desktop-shell-fixed .app .main > header.top .user span {
    max-width: 120px !important;
  }
}