/* JR OS · Portal · largura e ferramentas unificadas · 2026.435
   "Minhas obras" é a régua: 1280 px, margens iguais e conteúdo responsivo.
   A camada também tira Tema e menu JR dos cantos e os integra ao cabeçalho. */

body[data-jr-portal-tela]{--jr-portal-largura:1280px}

body[data-jr-portal-tela] #jr-portal-header>div,
body[data-jr-portal-tela] #tabs-container,
body[data-jr-portal-tela] #conteudo{
  box-sizing:border-box;width:min(var(--jr-portal-largura),100%)!important;
  max-width:var(--jr-portal-largura)!important;margin-inline:auto!important;min-width:0
}

/* Remove os limites diferentes criados tela a tela. Os componentes internos
   continuam com suas grades próprias, mas todos passam a ocupar a mesma área. */
body[data-jr-portal-tela]:not([data-jr-portal-tela="rewards"]) #conteudo> :is(div,section,header),
body[data-jr-portal-tela]:not([data-jr-portal-tela="rewards"]) :is(
  .jr-screen,.jr-arq-envio,.jr-arq-comercial,.jr-arq-escritorio,
  .jr-cliente-area,.jr-cliente-solicitar,.jr-cronograma-cliente,
  .jr-atualizacoes-lista,.jr-atualizacoes-vazio,.jr-portal-faq,
  .jr-assistente-shell,.jr-lojista-space
){
  box-sizing:border-box;width:100%!important;max-width:var(--jr-portal-largura)!important;
  margin-left:auto!important;margin-right:auto!important;min-width:0
}

/* Rewards já tinha exatamente 1280 px; reafirma a mesma borda visual sem
   tocar no seu desenho editorial. */
body[data-jr-portal-tela="rewards"] .jr-rewards-experience{
  width:100%;max-width:var(--jr-portal-largura)!important;margin-inline:auto
}

/* Ferramentas antes flutuantes agora ocupam o vazio útil do topo. */
#jr-portal-header-ferramentas{
  display:flex;align-items:center;justify-content:flex-end;gap:7px;flex:0 0 auto;
  padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important
}
#jr-portal-header-ferramentas>#jr-tema-botao{
  position:static!important;inset:auto!important;margin:0!important;
  width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;
  border:1px solid #3f3f46!important;border-radius:11px!important;background:#18181b!important;
  color:#d4d4d8!important;box-shadow:none!important
}
#jr-portal-header-ferramentas>#jr83-doca.jr83-compacta{
  position:static!important;inset:auto!important;display:flex!important;width:auto!important;
  transform:none!important;margin:0!important;padding:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important
}
#jr-portal-header-ferramentas>#jr83-doca :is(.jr83-avisos,.jr83-decisao){display:none!important}
#jr-portal-header-ferramentas>#jr83-doca .jr83-barra{
  min-height:0!important;padding:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important
}
#jr-portal-header-ferramentas>#jr83-doca .jr83-btn.jr83-marca{
  width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;
  padding:0!important;border:1px solid rgba(232,121,249,.42)!important;border-radius:11px!important;
  background:rgba(232,121,249,.1)!important;color:#f0abfc!important;box-shadow:none!important
}

/* Parecer pendente continua visível, mas sem o balão dourado que destoava
   do portal. O rosa identifica a ação sem competir com o Rewards. */
body[data-jr-portal-tela] .jr-parecer-alerta{
  border-color:rgba(232,121,249,.48)!important;
  background:radial-gradient(circle at 88% 0,rgba(232,121,249,.13),transparent 34%),#18181b!important;
  color:#fafafa!important;box-shadow:0 16px 42px rgba(0,0,0,.24)!important
}
body[data-jr-portal-tela] .jr-parecer-alerta p{color:#a1a1aa!important}
body[data-jr-portal-tela] .jr-parecer-alerta>a{
  border:1px solid rgba(232,121,249,.52)!important;background:#c026d3!important;
  color:#fff!important;box-shadow:0 10px 26px rgba(192,38,211,.22)!important
}
@keyframes jr-parecer-pulso{50%{box-shadow:0 0 0 6px rgba(232,121,249,.18)}}

/* Ao ganhar espaço, formulários e perguntas deixam de ficar espremidos no
   centro. É apenas distribuição visual; campos e handlers permanecem iguais. */
body[data-jr-portal-tela="conta"] #conteudo>section>.jr-portal-panel [style*="max-width:640px"]{
  max-width:none!important
}
@media(min-width:900px){
  body[data-jr-portal-tela="faq"] .jr-portal-faq>.jr-portal-section-head+.jr-portal-panel>div{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start
  }
}

@media(max-width:760px){
  body[data-jr-portal-tela] #jr-portal-header>div,
  body[data-jr-portal-tela] #tabs-container{width:100%!important}
  #jr-portal-header-ferramentas{gap:5px}
  #jr-portal-header-ferramentas>#jr-tema-botao,
  #jr-portal-header-ferramentas>#jr83-doca .jr83-btn.jr83-marca{
    width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important
  }
  body[data-jr-portal-tela="faq"] .jr-portal-faq>.jr-portal-section-head+.jr-portal-panel>div{
    grid-template-columns:1fr!important
  }
}

@media(max-width:420px){
  #jr-portal-header-acoes{gap:5px!important}
  #jr-portal-header-acoes>div:not(#jr-portal-header-ferramentas){display:none!important}
}

@media print{#jr-portal-header-ferramentas{display:none!important}}
