/*
 * layout-fix.css — corrige a barra lateral cobrindo o conteúdo entre 1121 e 1440 px.
 *
 * CAUSA: app-responsive.css, em @media (max-width:1440px), zera
 *   body.product-page main / .product-top { margin-left:0 !important }
 * e muda .product-top para grid com uma coluna de 44 px para o botão de menu.
 * Mas product-console.css mantém a .product-rail fixa e visível (transform:none)
 * e esconde o botão de menu até 1120 px. Resultado: rail de 256 px por cima
 * do conteúdo, que começa em x = 0.
 *
 * REGRA: rail fixa visível e conteúdo deslocado 256 px acima de 1120 px;
 * gaveta (drawer) só em ≤ 1120 px, como product-console.css já faz.
 *
 * COMO USAR: carregue este arquivo POR ÚLTIMO em todas as páginas do portal
 * (depois de app-responsive.css, app-breathing.css, material-card-system.css,
 * product-console.css e de qualquer CSS da página):
 *   <link rel="stylesheet" href="layout-fix.css">
 * Os seletores usam body.product-page para vencer a especificidade de
 * app-responsive.css (body.product-page main) sem depender da ordem.
 */
@media (min-width:1121px){
  body.product-page .product-rail{
    display:flex!important;
    width:256px!important;
    max-width:256px!important;
    transform:none!important;
    box-shadow:none!important;
  }
  body.product-page .product-top,
  body.product-page.workspace-page .product-top,
  body.product-page.reports-page .product-top{
    display:flex!important;
    left:256px;
    width:calc(100% - 256px)!important;
    margin-left:256px!important;
  }
  body.product-page main,
  body.product-page.workspace-page main,
  body.product-page.reports-page main{
    width:calc(100% - 256px)!important;
    margin-left:256px!important;
  }
  body.product-page .app-mobile-menu,
  body.product-page .app-nav-scrim{display:none!important}
  body.product-page .product-top .top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
  body.product-page .product-top .session-exit{margin-left:12px}
  body.product-page.product-nav-open .product-rail{transform:none!important}
}

/* Faixa que estava quebrada: devolve o topo e o respiro do conteúdo do desktop. */
@media (min-width:1121px) and (max-width:1440px){
  body.product-page .product-top{
    height:72px!important;
    min-height:72px!important;
    padding:0 28px!important;
    align-items:center;
    justify-content:space-between;
  }
  body.product-page .product-top h1{font-size:20px!important}
  /* Nesta faixa o "Sair" fica na rail (app-responsive.css), não no topo. */
  body.product-page .product-top .session-exit{display:none!important}
  body.product-page main{padding-left:32px!important;padding-right:32px!important}
}

/* Gaveta: só até 1120 px. Garante o conteúdo em largura total nessa faixa. */
@media (max-width:1120px){
  body.product-page .product-top,
  body.product-page main{margin-left:0!important;width:100%!important}
  body.product-page .product-top{left:0}
}

/* Tutoriais: rodapé passava da largura da tela (rolagem lateral) e o texto das trilhas 01–03 ficava espremido em 36 px. */
.tutorial-page .page-footer { margin-left: 0; margin-right: 0; padding-left: max(24px, calc((100% - 1180px) / 2)); padding-right: max(24px, calc((100% - 1180px) / 2)); }
.tutorial-path a > span:last-child { display: block; width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; text-align: left; justify-self: start; place-self: center start; place-items: normal; }
.tutorial-path a > span:last-child b, .tutorial-path a > span:last-child small { text-align: left; margin-left: 0; margin-right: 0; width: auto; max-width: none; }

/* Logo igual em todas as telas antigas (login, cadastro): mesmas cores do casco v3. */
.brand-symbol i:nth-child(2), .brand-mark i:nth-child(2) { background: #1e8e3e !important; }
.brand em, .product-brand span, .legal-brand span, .auth-brand span { color: #146c2e !important; }