/* ============================================================
   ACESSIBILIDADE — botão flutuante, painel e alto contraste

   Recursos no espírito do eMAG, o modelo do governo: ouvir a
   página, tamanho do texto, contraste e atalhos de teclado. Tudo
   próprio, sem overlay de terceiro — esses remendam pelo navegador
   sem corrigir o código e atrapalham quem usa leitor de tela.

   Paleta da Biblioteca: madeira escura, dourado e papel.
   O botão fica à ESQUERDA porque a direita é do VLibras.
   ============================================================ */

/* A régua institucional é obrigação do edital e ocupa a faixa de
   baixo inteira: nenhum botão flutuante pode cobri-la. A altura dela
   é a mesma declarada em regua-institucional.css. */
:root { --faixa-institucional: clamp(66px, 9dvh, 82px); }

.fab-acess {
  position: fixed;
  z-index: 8000;
  bottom: calc(var(--faixa-institucional) + 12px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(251, 212, 106, 0.55);
  border-radius: 50%;
  background: rgba(26, 18, 6, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  color: #FBD46A;
  cursor: pointer;
  transition: background-color 180ms ease, transform 160ms ease;
}

.fab-acess svg { display: block; width: 24px; height: 24px; }
.fab-acess:hover { background: rgba(45, 32, 10, 0.96); }
.fab-acess:active { transform: scale(0.94); }
.fab-acess:focus-visible { outline: 2px solid #FBD46A; outline-offset: 2px; }

.painel-acess {
  position: fixed;
  z-index: 8001;
  bottom: calc(var(--faixa-institucional) + 70px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  width: min(300px, calc(100vw - 32px));
  max-height: min(74dvh, 560px);
  padding: 16px 18px 18px;
  overflow-y: auto;
  border: 1px solid rgba(201, 138, 22, 0.45);
  border-radius: 14px;
  background: linear-gradient(180deg, #241a09, #171004);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.55);
  color: #FDF6E3;
}

.painel-acess[hidden] { display: none; }

.painel-acess-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.painel-acess h2 {
  margin: 0;
  color: #FBD46A;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.painel-acess-fechar {
  padding: 0 4px;
  border: 0;
  background: none;
  color: rgba(253, 246, 227, 0.6);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.painel-acess-fechar:hover { color: #FBD46A; }

.acess-grupo { margin-top: 14px; }

.acess-grupo h3 {
  margin: 0 0 7px;
  color: rgba(251, 212, 106, 0.85);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.acess-botoes { display: flex; flex-wrap: wrap; gap: 6px; }

.acess-botoes button {
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 38px;
  padding: 0.45em 0.8em;
  border: 1px solid rgba(201, 138, 22, 0.5);
  border-radius: 8px;
  background: rgba(253, 246, 227, 0.07);
  color: #FDF6E3;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.acess-botoes button:hover:not(:disabled) {
  border-color: rgba(251, 212, 106, 0.9);
  background: rgba(251, 212, 106, 0.16);
}

.acess-botoes button:disabled { opacity: 0.4; cursor: default; }
.acess-botoes button[aria-pressed="true"] { background: #F2A81D; color: #171004; }

.acess-aviso { margin: 7px 0 0; color: #FFC9A0; font-size: 11.5px; }

.acess-atalhos {
  margin: 0;
  padding: 0;
  color: rgba(253, 246, 227, 0.78);
  font-size: 11.5px;
  line-height: 1.7;
  list-style: none;
}

.acess-atalhos kbd {
  padding: 1px 5px;
  border: 1px solid rgba(201, 138, 22, 0.45);
  border-radius: 4px;
  background: rgba(253, 246, 227, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
}

/* O tamanho do conteúdo é aplicado pelo próprio script, via zoom no
   body: o CSS destas páginas é em px e mexer na raiz não mudaria nada.

   ---- alto contraste: o widget do VLibras fica de fora ---- */
/* Pintar TODO elemento de preto apagava a cena: a arte de fundo fica
   num <picture> com z-index negativo, e o fundo preto do palco por
   cima dela cobria a ilustração inteira. A tela virava um retângulo
   vazio com quatro palavras.

   O alto contraste agora age onde precisa — no texto e nas caixas de
   conteúdo — e deixa a arte aparecer, com um escurecimento que
   sustenta a leitura por cima dela. */
html[data-contraste="alto"] body {
  background-color: #000 !important;
}

/* texto e caixas de conteúdo: preto e branco puros */
html[data-contraste="alto"] :is(h1,h2,h3,p,li,span,strong,em,figcaption,label,legend,kbd):not([vw] *) {
  color: #FFF !important;
  text-shadow: 0 1px 3px #000 !important;
}

html[data-contraste="alto"] :is(a,button):not([vw] *) {
  border-color: #FFF !important;
  background-color: #000 !important;
  color: #FFE24D !important;
  text-decoration: underline !important;
}

/* a arte da cena continua visível, só mais contrastada */
html[data-contraste="alto"] .scene-picture img:not([vw] *) {
  filter: grayscale(1) contrast(1.5) brightness(0.75);
}

/* capas e páginas do livro seguem legíveis */
html[data-contraste="alto"] :is(.book-cover img, #livro img, .mini__capa):not([vw] *) {
  filter: grayscale(1) contrast(1.45);
}

/* as marcas institucionais NÃO podem ser alteradas: são arte oficial
   do edital e a régua tem fundo branco próprio */
html[data-contraste="alto"] .regua-institucional,
html[data-contraste="alto"] .regua-institucional * {
  background-color: #FFF !important;
  filter: none !important;
}

/* os rótulos da faixa herdavam o branco do texto geral e sumiam sobre
   o próprio fundo branco */
html[data-contraste="alto"] .regua-institucional :is(p, .ri-grupo__titulo) {
  color: #000 !important;
  text-shadow: none !important;
}

html[data-contraste="alto"] .ri-marca { filter: none !important; }

/* ---- VLibras ---- */
/* Ao abrir, o widget esconde o próprio botão e os controles internos
   só aparecem no hover: sem mouse o painel fica preso na tela. Com o
   display forçado, o mesmo botão abre e fecha.

   Só que o flex estica a caixa do botão para 200px, enquanto o ícone
   tem 40px. Os 160px restantes ficam invisíveis mas continuam captando
   o toque — no celular chegavam a cobrir o "Acessar Universo" e as
   setas do carrossel. A caixa passa a ter a largura do próprio ícone. */
[vw-access-button] {
  display: flex !important;
  width: fit-content !important;
  margin-left: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .fab-acess { transition: none; }
}

/* O widget nasce no meio da borda direita — exatamente onde vivem as
   setas de virar página e o "Acessar Universo". Descemos o contêiner
   para o canto inferior direito, acima do rodapé, que está livre nas
   três páginas. O painel do avatar abre a partir dele e continua
   cabendo na tela (ele mede 210x350). */
div[vw] {
  top: auto !important;
  bottom: calc(var(--faixa-institucional) + 12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* No leitor a coluna de miniaturas ocupa a borda direita inteira, do
   topo quase até o rodapé. Ali o widget não cabe sem cobrir capa ou
   botão, então ele troca de lado: fica à esquerda, empilhado acima do
   botão de acessibilidade, num espaço que nenhuma das duas colunas
   usa. */
/* No leitor a coluna de miniaturas voltou para a esquerda, então os
   dois flutuantes ficam à direita, onde nada mais disputa espaço. */
.leitor-body div[vw] {
  left: auto !important;
  right: 12px !important;
  bottom: calc(var(--faixa-institucional) + 66px + env(safe-area-inset-bottom, 0px)) !important;
}

.leitor-body .fab-acess {
  left: auto;
  right: 16px;
}

/* Os dois botões flutuantes moram no canto inferior esquerdo do
   leitor. O rodapé abre uma faixa ali para eles, em vez de o "Deixe
   seu causo" dividir o mesmo pedaço de tela. */
/* O rodapé precisa cobrir a largura inteira da tela: parando antes da
   borda direita, os botões eram empurrados para dentro e passavam por
   cima da linha do crédito, que é centrada na página.
   Só no desktop: no celular a faixa segue o padding do corpo. */
@media (min-width: 60rem) {
  .leitor-body .rodape-leitor {
    width: 100vw;
    margin-left: calc(var(--pad-coluna, 0px) * -1);
    margin-right: 0;
    padding-right: 76px;
  }
}

@media (min-width: 48rem) and (max-width: 59.99rem) {
  .leitor-body .rodape-leitor { padding-right: 76px; }
}

@media (max-width: 47.99rem) {
  /* no celular a linha das ações é centrada, então basta a faixa
     de baixo não encostar nos botões */
  .leitor-body .rodape-leitor { padding-left: 68px; padding-right: 68px; }
}

/* A linha do crédito atravessa a largura toda e passava por baixo dos
   botões flutuantes. Ela recua dos dois lados o suficiente para eles,
   em vez de ficar meio escondida atrás. */
.credito-hdbr {
  max-width: calc(100vw - 150px);
}

@media (max-width: 47.99rem) {
  .credito-hdbr { max-width: calc(100vw - 140px); }

  /* no leitor o crédito é bloco dentro do rodapé: quem recua é a
     própria faixa, senão em 320 ele passa por baixo do botão */
  .leitor-body .rodape-leitor { padding-left: 62px; padding-right: 62px; }
  .leitor-body .rodape-leitor__credito { max-width: 100%; }
}

/* O botão de acessibilidade mora no canto inferior esquerdo, que é
   onde a placa do autor termina. A faixa do rodapé da cena recua o
   suficiente para os dois conviverem. */
/* o autor alinha pelo eixo do título; o botão flutuante fica na
   margem, antes desse eixo, sem disputar espaço com ele */

@media (max-width: 47.99rem) {
  /* no celular o autor é centrado, então só o crédito precisa recuar */
  .cena-rodape { padding-inline: 58px; }
}