/*
 * JR OS 2026.83 — Camada única de interface flutuante.
 *
 * Problema resolvido: até a versão 2026.82 seis elementos independentes
 * disputavam o mesmo canto inferior da tela (índice de seções, controles de
 * slide, barra "Voltar ao portal", crachá de sessão, botão de ajuda, botão
 * de módulos e o "voltar ao topo"). No celular todos caíam um sobre o outro
 * e a navegação de páginas ficava soterrada.
 *
 * Aqui existe UMA doca inferior. Tudo o que flutua vive dentro dela, em
 * fluxo normal — por construção nada se sobrepõe.
 *
 * Este arquivo só afeta a tela. O PDF A4 continua sob controle dos blocos
 * @media print de cada página.
 */

:root{
  --jr83-rosa:#E9258C;
  --jr83-rosa-esc:#B4166B;
  --jr83-ouro:#C9A24B;
  --jr83-fundo:rgba(12,10,14,.94);
  --jr83-fundo-solido:#100D14;
  --jr83-linha:rgba(255,255,255,.12);
  --jr83-texto:#F6F3F8;
  --jr83-fraco:#9B93A5;
  --jr83-fonte:"Plus Jakarta Sans","Jost",system-ui,-apple-system,Segoe UI,Arial,sans-serif;

  /* Escala canônica de camadas — usar sempre estes números. */
  --jr83-z-doca:8850;
  --jr83-z-folha:8890;

  /* Altura real da doca, medida pelo JS. Reserva espaço no fim da página. */
  --jr83-doca-altura:0px;
}

/* ------------------------------------------------------------------ *
 * 1 · Silencia os flutuantes antigos. Eles continuam no DOM (o clique
 *     programático segue funcionando), mas deixam de brigar por espaço.
 * ------------------------------------------------------------------ */
body.jr83-ativa .jr-global-switcher,
body.jr83-ativa .jr-backtop,
body.jr83-ativa .jr-guia-ajuda{
  display:none!important;
}
/* Índice lateral e setas de slide originais: no celular quem navega é a
   doca; no desktop o índice lateral continua útil e é preservado. */
body.jr83-ativa .jr-slide-controls{display:none!important}
@media screen and (max-width:880px){
  body.jr83-ativa .jr-section-nav{display:none!important}
}
@media screen and (min-width:881px){
  /* Sobra espaço para a doca não cobrir o fim do índice lateral. */
  body.jr83-ativa .jr-section-nav{
    max-height:calc(100vh - 100px - var(--jr83-doca-altura))!important;
  }
}

/* Reserva de espaço: nada mais fica escondido embaixo da doca.
   Só no modo documento. No modo compacto a doca é um botão redondo e quem
   manda no padding do body continua sendo a doca do jr-mobile-2026.js —
   mexer aqui roubaria o espaço reservado por ela no portal e no admin. */
body.jr83-ativa:not(.jr83-modo-compacto){
  padding-bottom:var(--jr83-doca-altura)!important;
}
/* A barra de controle do topo é sticky: o salto entre páginas precisa
   parar abaixo dela, senão o título da seção nasce escondido. */
body.jr83-ativa #docwrap .page,
body.jr83-ativa #acoes-cliente{
  scroll-margin-top:70px;
}
@media screen and (min-width:881px){
  /* No modelo Cinema o #docwrap tem altura fixa e rolagem própria. */
  body.jr83-ativa.layout-editorial #docwrap{
    height:calc(100vh - 59px - var(--jr83-doca-altura))!important;
  }
  body.jr83-ativa.layout-contemporaneo #docwrap,
  body.jr83-ativa.layout-tecnico #docwrap,
  body.jr83-ativa.layout-luxo #docwrap,
  body.jr83-ativa.layout-executivo #docwrap,
  body.jr83-ativa.layout-compacto #docwrap{
    padding-bottom:calc(70px + var(--jr83-doca-altura))!important;
  }
}
body.jr83-ativa .toast,
body.jr83-ativa #toast{
  bottom:calc(var(--jr83-doca-altura) + 14px)!important;
}

/* ------------------------------------------------------------------ *
 * 2 · A doca
 * ------------------------------------------------------------------ */
#jr83-doca{
  position:fixed;
  z-index:var(--jr83-z-doca);
  left:0;right:0;bottom:0;
  display:flex;
  flex-direction:column;
  gap:0;
  font-family:var(--jr83-fonte);
  color:var(--jr83-texto);
  background:var(--jr83-fundo);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--jr83-linha);
  box-shadow:0 -14px 44px rgba(0,0,0,.42);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* No desktop a doca vira uma pílula central, longe dos cantos. */
@media screen and (min-width:881px){
  #jr83-doca{
    left:50%;
    right:auto;
    bottom:18px;
    transform:translateX(-50%);
    width:min(940px,calc(100vw - 40px));
    border:1px solid var(--jr83-linha);
    border-radius:20px;
    box-shadow:0 26px 70px rgba(0,0,0,.5);
    overflow:hidden;
    padding-bottom:0;
  }
}

/* Modo compacto: telas sem documento paginado (portal, editor, site).
   Vira um único botão redondo — o lugar onde antes havia três. */
#jr83-doca.jr83-compacta{
  left:auto;right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom,0px) + var(--jr-doca,0px));
  width:auto;
  transform:none;
  border:1px solid var(--jr83-linha);
  border-radius:999px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:transparent;
  box-shadow:none;
  padding:0;
}
@media screen and (min-width:881px){
  #jr83-doca.jr83-compacta{right:18px;bottom:calc(18px + var(--jr-doca,0px))}
}

/* O canto direito já é de outro flutuante (o WhatsApp do site): a doca
   troca de lado em vez de sentar em cima dele. */
#jr83-doca.jr83-compacta.jr83-esquerda{right:auto;left:14px}
@media screen and (min-width:881px){
  #jr83-doca.jr83-compacta.jr83-esquerda{right:auto;left:18px}
}
/* Os dois cantos ocupados: sobe e forma uma pilha, sem sobrepor. */
#jr83-doca.jr83-compacta.jr83-acima{
  bottom:calc(92px + env(safe-area-inset-bottom,0px) + var(--jr-doca,0px));
}
#jr83-doca.jr83-compacta .jr83-barra{
  border:1px solid rgba(233,37,140,.4);
  border-radius:999px;
  background:var(--jr83-fundo);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 44px rgba(0,0,0,.45);
  padding:6px;
}

/* ------------------------------------------------------------------ *
 * 3 · Faixa de avisos (crachá de sessão + barra de edição/voltar)
 * ------------------------------------------------------------------ */
.jr83-avisos{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid var(--jr83-linha);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.jr83-avisos::-webkit-scrollbar{display:none}
.jr83-avisos:empty{display:none}
.jr83-avisos>*{flex:0 0 auto}

/* Os elementos adotados perdem o position:fixed e entram no fluxo. */
.jr83-avisos>#jr-session-badge,
.jr83-avisos>#jr-live-edit{
  position:static!important;
  inset:auto!important;
  left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
  z-index:auto!important;
  margin:0!important;
  max-width:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.jr83-avisos>#jr-session-badge{
  padding:6px 10px!important;
  border-radius:11px!important;
  background:rgba(62,207,142,.08)!important;
}
.jr83-avisos>#jr-live-edit{
  padding:6px 10px!important;
  border-radius:11px!important;
  background:rgba(233,37,140,.09)!important;
  border-color:rgba(233,37,140,.34)!important;
  flex-wrap:nowrap!important;
}
.jr83-avisos>#jr-live-edit a{white-space:nowrap}

/* No celular o crachá de sessão fica só com o essencial. */
@media screen and (max-width:880px){
  .jr83-avisos>#jr-session-badge em{display:none!important}
  .jr83-avisos>#jr-live-edit>div:first-child{max-width:44vw}
  .jr83-avisos>#jr-live-edit>div:first-child #jr-live-status{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* ------------------------------------------------------------------ *
 * 3b · Barra de decisão — a resposta do cliente fica sempre à mão,
 *      sem precisar rolar o documento inteiro até o fim.
 * ------------------------------------------------------------------ */
.jr83-decisao{
  display:flex;
  align-items:stretch;
  gap:7px;
  padding:9px 10px;
  border-bottom:1px solid var(--jr83-linha);
  background:linear-gradient(100deg,rgba(201,162,75,.1),rgba(233,37,140,.08));
}
.jr83-decisao:empty{display:none}

.jr83-decidir{
  flex:1 1 auto;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:0 14px;
  border:0;
  border-radius:13px;
  background:linear-gradient(135deg,#C9A24B,#A88134);
  color:#1A1206;
  font:900 13px/1.15 var(--jr83-fonte);
  letter-spacing:.2px;
  cursor:pointer;
  transition:filter .18s,transform .18s;
}
.jr83-decidir:hover,.jr83-decidir:focus-visible{filter:brightness(1.08)}
.jr83-decidir:active{transform:translateY(1px)}
.jr83-decidir i{
  display:grid;
  place-items:center;
  width:24px;height:24px;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(26,18,6,.22);
  font-style:normal;
  font-size:13px;
}
.jr83-decidir span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.jr83-decidir.jr83-sec{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--jr83-texto);
  font-weight:800;
  font-size:12px;
}
.jr83-decidir.jr83-sec:hover,.jr83-decidir.jr83-sec:focus-visible{
  border-color:rgba(233,37,140,.55);
  background:rgba(233,37,140,.16);
  filter:none;
}
@media screen and (max-width:390px){
  .jr83-decidir{font-size:12px;padding:0 11px}
  .jr83-decidir.jr83-sec{font-size:11px;padding:0 10px}
}

/* ------------------------------------------------------------------ *
 * 4 · Barra principal: ‹ título · n/total › ⋯
 * ------------------------------------------------------------------ */
.jr83-barra{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  min-height:60px;
}
@media screen and (min-width:881px){
  .jr83-barra{padding:9px 11px;min-height:58px}
}
#jr83-doca.jr83-compacta .jr83-barra{min-height:0}

.jr83-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:46px;
  min-height:46px;
  padding:0 12px;
  border:1px solid var(--jr83-linha);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:var(--jr83-texto);
  font:800 13px/1 var(--jr83-fonte);
  cursor:pointer;
  text-decoration:none;
  transition:background .18s,border-color .18s,transform .18s,opacity .18s;
}
.jr83-btn:hover:not(:disabled),
.jr83-btn:focus-visible{background:rgba(233,37,140,.16);border-color:rgba(233,37,140,.5)}
.jr83-btn:active:not(:disabled){transform:translateY(1px)}
.jr83-btn:disabled{opacity:.3;cursor:default}
.jr83-btn.jr83-seta{font-size:19px;padding:0}
.jr83-btn.jr83-marca{
  border-color:rgba(233,37,140,.45);
  background:linear-gradient(135deg,rgba(233,37,140,.24),rgba(180,22,107,.2));
  font-size:12px;
  letter-spacing:.4px;
}

/* Botão central: título da página atual + posição */
.jr83-atual{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  min-height:46px;
  padding:5px 12px;
  border:1px solid var(--jr83-linha);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:var(--jr83-texto);
  font-family:var(--jr83-fonte);
  cursor:pointer;
  text-align:left;
  transition:background .18s,border-color .18s;
}
.jr83-atual:hover,.jr83-atual:focus-visible{background:rgba(233,37,140,.14);border-color:rgba(233,37,140,.45)}
.jr83-atual b{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:800;
  letter-spacing:.1px;
}
.jr83-atual span{
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
  min-height:15px;
  color:var(--jr83-fraco);
  font:800 9px/1.6 var(--jr83-fonte);
  letter-spacing:1.2px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
}
.jr83-atual span i{font-style:normal;color:var(--jr83-ouro)}
.jr83-atual span .jr83-chev{
  margin-left:auto;
  padding-left:8px;
  color:#F9A8D4;
  font-style:normal;
  font-size:9.5px;
  letter-spacing:.6px;
  text-transform:none;
}

/* Régua de progresso do documento */
.jr83-regua{
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.jr83-regua i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--jr83-rosa),var(--jr83-ouro));
  transition:width .25s ease;
}
#jr83-doca{position:fixed}
#jr83-doca .jr83-barra{position:relative}

/* ------------------------------------------------------------------ *
 * 5 · Folha (índice de páginas e menu "Mais")
 * ------------------------------------------------------------------ */
#jr83-folha{
  position:fixed;
  inset:0;
  z-index:var(--jr83-z-folha);
  display:none;
  background:rgba(4,3,6,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  font-family:var(--jr83-fonte);
}
#jr83-folha.on{display:block}
.jr83-folha-caixa:focus{outline:none}
.jr83-folha-caixa{
  position:absolute;
  left:0;right:0;bottom:0;
  max-height:86dvh;
  display:flex;
  flex-direction:column;
  background:var(--jr83-fundo-solido);
  border-top:1px solid var(--jr83-linha);
  border-radius:22px 22px 0 0;
  box-shadow:0 -30px 90px rgba(0,0,0,.6);
  animation:jr83Sobe .24s cubic-bezier(.2,.75,.25,1);
}
@media screen and (min-width:881px){
  .jr83-folha-caixa{
    left:50%;right:auto;bottom:24px;
    transform:translateX(-50%);
    width:min(560px,calc(100vw - 40px));
    max-height:78vh;
    border:1px solid var(--jr83-linha);
    border-radius:22px;
  }
  @keyframes jr83Sobe{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
}
@media screen and (max-width:880px){
  @keyframes jr83Sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
.jr83-folha-topo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--jr83-linha);
}
.jr83-folha-topo h2{
  flex:1;
  margin:0;
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--jr83-texto);
}
.jr83-folha-topo small{
  display:block;
  margin-top:3px;
  color:var(--jr83-fraco);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.jr83-fechar{
  width:40px;height:40px;
  flex:0 0 auto;
  border:1px solid var(--jr83-linha);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:var(--jr83-texto);
  font-size:17px;
  cursor:pointer;
}
.jr83-fechar:hover{background:rgba(233,37,140,.18)}
.jr83-folha-corpo{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:12px 14px calc(20px + env(safe-area-inset-bottom,0px));
}
.jr83-grupo{
  margin:14px 4px 8px;
  color:#6E6577;
  font:800 9.5px/1 var(--jr83-fonte);
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.jr83-grupo:first-child{margin-top:4px}
.jr83-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:54px;
  margin-bottom:7px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:#171320;
  color:var(--jr83-texto);
  font-family:var(--jr83-fonte);
  font-size:13.5px;
  font-weight:700;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .18s,background .18s;
}
.jr83-item:hover,.jr83-item:focus-visible{border-color:rgba(233,37,140,.5);background:#1E1728}
.jr83-item i{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:11px;
  background:rgba(233,37,140,.16);
  color:#F9A8D4;
  font-style:normal;
  font-size:15px;
  font-weight:800;
}
.jr83-item .jr83-num{
  background:rgba(201,162,75,.16);
  color:var(--jr83-ouro);
  font-size:12px;
  letter-spacing:.3px;
}
.jr83-item>div{min-width:0;flex:1}
.jr83-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.jr83-item small{
  display:block;
  margin-top:2px;
  color:var(--jr83-fraco);
  font-size:10.5px;
  font-weight:600;
  line-height:1.45;
}
.jr83-item.on{
  border-color:rgba(233,37,140,.65);
  background:linear-gradient(135deg,rgba(233,37,140,.2),rgba(124,58,237,.12));
}
.jr83-item.on i{background:var(--jr83-rosa);color:#fff}

/* ------------------------------------------------------------------ *
 * 5b · Alvos de toque dignos de dedo nas telas públicas
 * ------------------------------------------------------------------ */
@media screen and (max-width:880px){
  body.jr83-ativa .ham,
  body.jr83-ativa .jr-mobile-menu{
    min-width:44px;
    min-height:44px;
  }
  /* Tela de acesso: "ver senha", "esqueci minha senha" e o × do guia
     estavam abaixo dos 44px recomendados para toque. */
  body.jr83-ativa #access-eye{min-width:42px;min-height:42px}
  body.jr83-ativa #access-reset{min-height:42px}
  body.jr83-ativa .jr-guia-fechar{width:42px;height:42px}
}

/* ------------------------------------------------------------------ *
 * 6 · O guia contextual passa a respeitar a doca
 * ------------------------------------------------------------------ */
/* Enquanto o guia está aberto ele cobre a tela inteira com um véu: manter a
   doca visível por baixo só criaria mais um botão sobre outro. Ela volta
   assim que o guia fecha. */
body:has(.jr-guia-overlay) #jr83-doca,
body.jr83-guia-aberto #jr83-doca,
/* O botão flutuante de WhatsApp do site também espia por cima do véu. */
body:has(.jr-guia-overlay) #cfab-w,
body.jr83-guia-aberto #cfab-w{display:none!important}

body.jr83-ativa .jr-guia-card{
  bottom:calc(18px + var(--jr83-doca-altura))!important;
}
@media screen and (max-width:640px){
  body.jr83-ativa .jr-guia-card{
    bottom:calc(14px + var(--jr83-doca-altura))!important;
    max-height:min(54vh,calc(100dvh - var(--jr83-doca-altura) - 40px))!important;
  }
}

/* ------------------------------------------------------------------ *
 * 7 · Impressão e acessibilidade
 * ------------------------------------------------------------------ */
@media print{
  #jr83-doca,#jr83-folha{display:none!important}
  body.jr83-ativa{padding-bottom:0!important}
}
@media (prefers-reduced-motion:reduce){
  .jr83-folha-caixa{animation:none}
  .jr83-regua i{transition:none}
}