/* JR OS 2026.141 — modo claro.
   Inverte a luminosidade e gira o matiz 180°: claro vira escuro e a cor
   permanece. Depois devolve ao normal tudo que é imagem de verdade — foto de
   obra invertida seria pior do que tela escura no sol. */
html.jr-claro{
  filter:invert(1) hue-rotate(180deg);
  background:#f6f4ef;
}
/* Conteúdo que não pode inverter: foto, vídeo, mapa, logotipo, moldura de site. */
html.jr-claro img,
html.jr-claro video,
html.jr-claro iframe,
html.jr-claro canvas,
html.jr-claro embed,
html.jr-claro object,
html.jr-claro [style*="background-image"],
html.jr-claro .jr-nao-inverter{
  filter:invert(1) hue-rotate(180deg);
}
/* Ícone traçado acompanha o texto: NÃO leva a segunda inversão. */
html.jr-claro .jr-i{filter:none}

/* No claro, sombra escura vira mancha: sombra some e a borda assume. */
html.jr-claro *{box-shadow:none!important}
html.jr-claro .card,html.jr-claro .jr-card,html.jr-claro .cartao,html.jr-claro .motivo{
  border-color:rgba(0,0,0,.14)!important;
}

/* O botão de alternar. */
.jr-tema-botao{
  min-width:38px;min-height:38px;border-radius:999px;
  border:1px solid #27344a;background:#0b111b;color:#c8d5e6;
  font:800 15px/1 system-ui,sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.jr-tema-botao:hover{border-color:#3d5375;color:#fff}
.jr-tema-botao.solto{position:fixed;right:14px;top:14px;z-index:4600}
@media(max-width:760px){.jr-tema-botao.solto{top:auto;bottom:calc(var(--jr-rodape, 0px) + 64px)}}
@media print{html.jr-claro{filter:none}.jr-tema-botao{display:none}}

/* ------------------------------------------------------------------ *
 * 2026.136 — o botao de tema estava pousando em cima do "Sair"
 *
 * Ele e fixo no canto e o portal tem uma barra de acoes no mesmo canto: no
 * desktop cobria 79% do botao Sair, no celular 64% do "Mais". Quem tocasse
 * ali trocava o tema achando que estava saindo da conta.
 *
 * A solucao nao e mover o tema para outro canto — todo canto tem alguem. E
 * tirar o tema da camada de flutuantes quando a tela ja tem barra propria:
 * ele vira mais um item dessa barra, na ordem, sem cobrir ninguem.
 * ------------------------------------------------------------------ */
body[data-jr-page="cliente"] #jr-tema-botao{
  position:static;margin-left:6px;box-shadow:none;
  min-width:44px;min-height:44px;
}
/* Tentei duas alturas diferentes no canto e nas duas ele cobria outro botao:
   naquele canto ja moram a barra inferior e o "Mais". Canto disputado nao se
   resolve com pixel — se resolve saindo dele. No celular o tema fica na mesma
   linha de acoes do topo, onde ha espaco e ninguem embaixo. */
@media (max-width:640px){
  body[data-jr-page="cliente"] #jr-tema-botao{
    position:static;right:auto;bottom:auto;box-shadow:none;
    min-width:44px;min-height:44px;margin-left:6px;
  }
}
/* O atalho de comandos ficava 2 px abaixo do alvo minimo de toque. Precisa de
   forca igual a da regra que o dimensiona em outra camada. */
#jr-ux-launcher{min-width:44px!important;min-height:44px!important;width:auto!important;height:auto!important}