/*
  reader.css - camada de interface do leitor (barra de ferramentas, painel de
  sumário, busca, navegação entre capítulos, ampliação de imagens).
  Não altera a marcação semântica das páginas nem duplica estilo_1.css:
  usa as mesmas variáveis de cor já definidas em :root por estilo_1.css.
  Progressive enhancement: sem JavaScript, a página funciona exatamente
  como antes (esta folha de estilos não esconde nenhum conteúdo por
  padrão, exceto os elementos que o próprio reader.js cria e controla).
*/

/*
  Correção crítica: várias regras abaixo definem `display` de forma
  incondicional (ex.: .leitor-painel { display: flex }). Como a regra do
  próprio autor sempre vence a regra padrão do navegador para [hidden]
  (que é [hidden] { display: none } da user-agent stylesheet), sem esta
  linha o atributo `hidden` do HTML deixaria de funcionar nesses
  elementos e painéis/lightbox nunca fechariam de verdade.
*/
[hidden] {
  display: none !important;
}

/* ---------- Barra de ferramentas fixa ---------- */

.leitor-barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.55em 0.9em;
  background: linear-gradient(to right, var(--cor-navy), var(--cor-lilas-escuro));
  border-bottom: 1px solid var(--cor-navy);
}

.leitor-barra-grupo {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

html.leitor-modo-pdf-ativo,
body.leitor-modo-pdf-ativo {
  overflow: hidden;
}

/* Conteúdo rolável (reader.js: envolverConteudo). Começa exatamente
   abaixo da barra fixa, então a rolagem nunca passa por trás dela -
   diferente da barra de rolagem nativa do documento, que ocuparia a
   altura inteira da janela. */
body.tem-barra-leitor .leitor-conteudo {
  position: fixed;
  top: var(--altura-barra, 3.2em);
  left: 0;
  right: 0;
  bottom: var(--altura-rodape, 0px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Barra de rolagem discreta, com as cores do projeto: fica invisível
   por padrão e só aparece quando o mouse passa por cima da área de
   conteúdo. */
.leitor-conteudo {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.leitor-conteudo:hover {
  scrollbar-color: var(--cor-texto-suave) transparent;
}

.leitor-conteudo::-webkit-scrollbar {
  width: 10px;
}

.leitor-conteudo::-webkit-scrollbar-track {
  background: transparent;
}

.leitor-conteudo::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

.leitor-conteudo:hover::-webkit-scrollbar-thumb {
  background-color: var(--cor-texto-suave);
  background-clip: padding-box;
}

.leitor-titulo-obra {
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

@media (max-width: 640px) {
  .leitor-titulo-obra {
    display: none;
  }
}

.leitor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 6px;
  padding: 0.4em 0.6em;
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
  min-height: 2.1em;
  min-width: 2.1em;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.leitor-btn:hover,
.leitor-btn:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.leitor-btn[aria-expanded="true"] {
  background: var(--cor-magenta);
  border-color: var(--cor-magenta);
  color: #fff;
}

.leitor-btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leitor-btn-texto {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .leitor-btn-texto {
    display: none;
  }
}

.leitor-btn-voltar {
  border: none;
  border-radius: 50%;
  padding: 0;
  width: 2.1em;
  height: 2.1em;
}

a.leitor-btn {
  text-decoration: none;
}

body.leitor-modo-pdf-ativo .leitor-btn-somente-html {
  display: none;
}

/* Botão "Baixar PDF": destaque sólido, como na referência. */
.leitor-btn-baixar {
  background: var(--cor-magenta);
  border-color: var(--cor-magenta);
  color: #fff;
  border-radius: 6px;
  padding: 0.45em 0.9em;
  font-weight: 700;
}

.leitor-btn-baixar:hover,
.leitor-btn-baixar:focus-visible {
  background: var(--cor-magenta-escuro);
  border-color: var(--cor-magenta-escuro);
  color: #fff;
}

/* ---------- Controles flutuantes (zoom / tela cheia) ---------- */

.leitor-flutuante {
  position: fixed;
  top: calc(var(--altura-barra, 3.2em) + 0.75em);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0.3em;
  background: rgba(10, 0, 34, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 0.3em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.leitor-flutuante-esquerda {
  left: 0.75em;
}

.leitor-flutuante-direita {
  right: 0.75em;
}

.leitor-btn-flutuante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 4px;
  width: 2.1em;
  height: 2.1em;
  cursor: pointer;
}

.leitor-btn-flutuante:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.leitor-btn-flutuante svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leitor-zoom-nivel {
  color: #fff;
  font-size: 0.75em;
  min-width: 2.8em;
  text-align: center;
}

/* Alternância HTML / PDF */

.leitor-modo-grupo {
  display: flex;
  gap: 0.15em;
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-borda-suave);
  border-radius: 6px;
  padding: 0.2em;
}

.leitor-modo-btn {
  border: none;
  border-radius: 4px;
  min-height: 1.8em;
  padding: 0.3em 0.9em;
  font-weight: 700;
  color: var(--cor-texto-suave);
}

/* --cor-magenta com texto branco dá só 4.49:1 de contraste - abaixo do
   mínimo de 4.5:1 do WCAG AA por uma margem mínima (achado pelo
   Lighthouse). --cor-magenta-escuro (já usada em estados de hover no
   projeto) dá 7.22:1, com folga. */
.leitor-modo-btn[aria-pressed="true"] {
  background: var(--cor-magenta-escuro);
  color: #fff;
}

/* Visualizador de PDF paginado (leitor-pdf.js) */

.leitor-pdf-container {
  position: fixed;
  top: var(--altura-barra, 3.2em);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  /* Fundo bem diferenciado da cor da página (não um tom quase-branco)
     - a página do livro (retrato) nunca preenche 100% da largura de
     uma janela larga e baixa sem distorcer a proporção real dela
     (mesma geometria de uma foto vertical numa moldura horizontal);
     testamos --cor-borda-suave (só um pouco mais escura que o
     branco) e ainda ficava parecendo "papel em branco" por engano
     (reportado com print, usuário circulou de verde só a área da
     página, pedindo que o resto NÃO pareça papel). --cor-selo-roxo é
     um roxo médio, claramente diferente de branco em qualquer tela -
     a página passa a se destacar sem ambiguidade como "página sobre
     uma bandeja". */
  background: var(--cor-selo-roxo);
  display: flex;
  flex-direction: column;
}

/* Tela cheia (botão / Fullscreen API): o container passa a ocupar a
   janela inteira, por cima da barra de ferramentas do leitor. O fallback
   (.leitor-pdf-imersivo-forcado, navegadores sem Fullscreen API) usa o
   mesmo resultado via position:fixed inset:0. */
.leitor-pdf-container:fullscreen,
.leitor-pdf-imersivo,
.leitor-pdf-imersivo-forcado {
  top: 0 !important;
}

/* Barra fina de progresso no livro inteiro - clicável (pula pro ponto). */
.leitor-pdf-progresso {
  flex: none;
  height: 4px;
  background: rgba(74, 25, 172, 0.12);
  cursor: pointer;
}

.leitor-pdf-progresso-preench {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--cor-lilas), var(--cor-magenta));
  transition: width 200ms ease;
}

.leitor-pdf-palco {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4em;
}

.leitor-pdf-com-zoom {
  overflow: auto;
}

/* EXPERIMENTAL (?flip-largura=1, ver leitor-pdf.js) - a pagina passa a
   ocupar 100% da largura do palco (zero sobra lateral); como fica
   mais alta que a area visivel, o palco ganha rolagem vertical em vez
   de cortar/encolher a pagina. align-items:flex-start (em vez de
   center) pra rolagem começar do topo da pagina, nao do meio. */
.leitor-pdf-palco-largura-total {
  align-items: flex-start;
  overflow-y: auto;
}

/* .leitor-pdf-livro-zoom tambem centraliza (align-items:center) por
   padrao - sem sobrescrever aqui tambem, o livro (agora mais alto que
   a area visivel) ficaria centralizado com metade "vazando" pra cima
   da posicao de rolagem 0, uma parte inalcancavel (scroll nunca fica
   negativo). Com flex-start dos dois lados, a rolagem 0 mostra o topo
   da pagina, e rolar pra baixo alcanca o rodape. */
.leitor-pdf-palco-largura-total .leitor-pdf-livro-zoom {
  align-items: flex-start;
  /* Limite de tamanho (pedido do usuário: "tem como deixar em tamanho
     A4, porque essa dimensão está muito grande" - depois ajustado de
     novo pra ~60% desse tamanho, ver LARGURA_MAXIMA_DUPLA em
     leitor-pdf.js) - em monitores largos, preencher 100% da largura
     deixava a página maior do que uma leitura confortável. O limite
     em si é aplicado por JS (aplicarTamanhoLivroZoom, leitor-pdf.js),
     não por max-width aqui: um max-width fixo bloquearia também o
     zoom de crescer além dele (o zoom escreve o mesmo elemento) - por
     isso só min-width:0 fica aqui, desfazendo o min-width:100% da
     regra padrão (abaixo), que senão forçaria 100% de largura mesmo
     quando o JS pede um valor menor. */
  min-width: 0;
  margin: 0 auto;
}

/* A curva/arrasto da página em si (sombra, dobra, canto seguindo o
   ponteiro) é toda feita pela biblioteca StPageFlip - ver
   resources/scripts/pageflip/ (vendorizada localmente, MIT) e o bloco
   .stf__* logo abaixo (CSS original da biblioteca, sem alterações).
   Aqui só cuidamos do zoom (aplicado por fora, como transform, pra não
   interferir no tamanho que a biblioteca calcula pra si mesma) e do
   livro em si ocupar o espaço disponível no palco. */
.leitor-pdf-livro-zoom {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 200ms ease, height 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .leitor-pdf-livro-zoom {
    transition: none;
  }
}

.leitor-pdf-livro {
  /* width/height 100% aqui sao criticos: a StPageFlip mede o proprio
     elemento (getBlockWidth/getBlockHeight) pra decidir o tamanho do
     livro em modo "stretch" - sem isso, o navegador da a ele um
     tamanho de bloco generico (nem sempre igual ao do pai, e nem
     sempre com a MESMA proporcao largura/altura da area disponivel),
     e a biblioteca acaba calculando uma altura maior que o espaco de
     verdade, cortando o topo/base do livro dentro do palco (que tem
     overflow:hidden). Com 100% explicito, ela mede exatamente o
     espaco que .leitor-pdf-livro-zoom reserva pra ela. */
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 30px rgba(10, 0, 34, 0.35));
  cursor: grab;
}

.leitor-pdf-livro:active {
  cursor: grabbing;
}

/* Cada <div class="leitor-pdf-pagina"> e' passado pra
   StPageFlip.loadFromHtml() (ver leitor-pdf.js) - a propria
   biblioteca posiciona/transforma esse elemento pra desenhar a curva
   da pagina (mesmo mecanismo do .stf__item logo abaixo, CSS original
   dela). Fundo branco: enquanto o <canvas> de dentro ainda nao foi
   desenhado (pagina fora da vizinhanca visivel - ver
   renderizarPaginasVisiveis), a pagina aparece em branco liso em vez
   de um buraco transparente/preto. */
.leitor-pdf-pagina {
  /* display:none por padrao: os 105+ <div> de pagina sao anexados ao
     .leitor-pdf-livro ANTES do "new St.PageFlip(...)" processar/
     posicionar cada um (loadFromHTML precisa deles ja presentes no
     DOM) - sem isso, por uma fracao de segundo eles ficam empilhados
     como blocos normais (nao position:absolute ainda), inflando a
     altura/largura medida do container bem na hora que a biblioteca
     calcula o tamanho da pagina, dando um valor errado que nunca mais
     se corrige depois. A propria StPageFlip troca pra
     "display: block" via style inline em cada pagina que ela
     realmente posiciona - isso aqui e' so o estado ANTES dela agir. */
  display: none;
  background: #fff;
  overflow: hidden;
}

.leitor-pdf-pagina-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.leitor-pdf-fallback-iframe {
  flex: 1;
  width: 100%;
  border: none;
}

/* Esqueleto de carregamento: some quando o livro termina de pré-renderizar. */
.leitor-pdf-esqueleto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  background: #fff;
  z-index: 3;
}

.leitor-pdf-esqueleto-pagina {
  width: 34%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  background: linear-gradient(
    100deg,
    var(--cor-fundo-suave) 30%,
    #fff 50%,
    var(--cor-fundo-suave) 70%
  );
  background-size: 250% 100%;
  animation: leitor-pdf-brilho 1.4s ease-in-out infinite;
}

.leitor-pdf-esqueleto-texto {
  position: absolute;
  bottom: 18%;
  color: var(--cor-texto-suave);
  font-size: 0.9em;
}

@keyframes leitor-pdf-brilho {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leitor-pdf-esqueleto-pagina {
    animation: none;
    background: var(--cor-fundo-suave);
  }
}

/* Padding reduzido (0.3em, era 0.5em) - ganha altura útil pro livro
   sem tocar em .leitor-barra (cabeçalho, compartilhado com o modo
   HTML). Diferente da tentativa anterior (revertida): aqui só a barra
   de controles PRÓPRIA do visualizador de PDF muda, então
   --altura-barra (medida só a partir de .leitor-barra) nunca fica
   desatualizada - a causa da barra branca da vez passada. */
.leitor-pdf-barra {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6em;
  padding: 0.3em 0.6em;
  background: linear-gradient(to right, var(--cor-navy), var(--cor-lilas-escuro));
  border-top: 1px solid var(--cor-navy);
}

/* Cada grupo de controles (paginação / zoom / miniaturas·sumário·tela
   cheia) fica num cartão "vidro" próprio, em vez de soltos direto na
   barra - deixa claro que são blocos de função diferentes. */
.leitor-pdf-grupo {
  display: flex;
  align-items: center;
  gap: 0.3em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 0.3em 0.4em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.leitor-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 4px;
  width: 2.2em;
  height: 2.2em;
  cursor: pointer;
}

.leitor-pdf-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.leitor-pdf-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.leitor-pdf-btn[aria-pressed="true"] {
  background: var(--cor-magenta);
  border-color: var(--cor-magenta);
}

.leitor-pdf-btn svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leitor-pdf-campo-pagina {
  width: 3.2em;
  height: 2.2em;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.leitor-pdf-campo-pagina::-webkit-outer-spin-button,
.leitor-pdf-campo-pagina::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.leitor-pdf-campo-pagina:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.leitor-pdf-total {
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 0.2em;
  white-space: nowrap;
}

/* Era um <span> só de leitura - virou <input> (dá pra digitar uma
   porcentagem exata, pedido do usuário), então precisa do mesmo tipo
   de estilo de campo que .leitor-pdf-campo-pagina, só um pouco mais
   largo (acomoda "250%"). */
.leitor-pdf-zoom-nivel {
  width: 3.6em;
  height: 2.2em;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.leitor-pdf-zoom-nivel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* --------------------------------- Miniaturas (faixa deslizante) --- */

.leitor-pdf-tiras {
  flex: none;
  display: flex;
  gap: 0.5em;
  overflow-x: auto;
  padding: 0.7em 1em;
  background: var(--cor-navy-suave);
  border-top: 1px solid var(--cor-navy);
  scrollbar-width: thin;
}

.leitor-pdf-tira {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0.25em;
  cursor: pointer;
}

.leitor-pdf-tira-canvas {
  display: block;
  width: 92px;
  height: auto;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.leitor-pdf-tira-num {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}

.leitor-pdf-tira:hover,
.leitor-pdf-tira:focus-visible {
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.leitor-pdf-tira-atual {
  border-color: var(--cor-magenta) !important;
}

/* --------------------------------------------- Sumário do modo PDF --- */

.leitor-pdf-sumario {
  flex: none;
  max-height: 45%;
  overflow-y: auto;
  background: var(--cor-navy-suave);
  border-top: 1px solid var(--cor-navy);
  padding: 0.8em 1em;
}

.leitor-pdf-sumario-titulo {
  margin: 0 0 0.5em;
  color: #fff;
  font-weight: 800;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.leitor-pdf-sumario-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.leitor-pdf-sumario-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0.55em 0.6em;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  font-size: 0.92em;
  cursor: pointer;
}

.leitor-pdf-sumario-item:hover,
.leitor-pdf-sumario-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.leitor-pdf-sumario-pag {
  flex: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------ Dica de como folhear --- */

.leitor-pdf-dica-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5em;
  background: rgba(10, 0, 34, 0.35);
}

.leitor-pdf-dica-cartao {
  max-width: 30em;
  background: #fff;
  border-radius: 10px;
  border-left: 4px solid var(--cor-magenta);
  padding: 1em 1.2em;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.leitor-pdf-dica-titulo {
  margin: 0 0 0.3em;
  font-weight: 800;
  color: var(--cor-navy);
}

.leitor-pdf-dica-corpo {
  margin: 0 0 0.8em;
  font-size: 0.92em;
  color: var(--cor-texto);
  line-height: 1.5;
}

.leitor-pdf-dica-corpo kbd {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  padding: 0.05em 0.35em;
  border: 1px solid var(--cor-borda-suave);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--cor-fundo-suave);
  font-size: 0.85em;
}

.leitor-pdf-dica-ok {
  background: var(--cor-magenta);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5em 1.1em;
  font-weight: 700;
  cursor: pointer;
}

.leitor-pdf-dica-ok:focus-visible {
  outline: 2px solid var(--cor-navy);
  outline-offset: 2px;
}

/* Dica dispensável de atalhos de teclado */

.leitor-dica {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-borda-suave);
  border-left: 4px solid var(--cor-magenta);
  border-radius: 6px;
  padding: 0.75em 1em;
  margin-bottom: 1.5em;
}

.leitor-dica-texto {
  margin: 0;
  font-size: 0.9em;
  color: var(--cor-texto);
}

.leitor-dica-fechar {
  flex: none;
  background: transparent;
  border: none;
  color: var(--cor-navy);
  cursor: pointer;
  padding: 0.2em;
  line-height: 0;
}

.leitor-dica-fechar svg {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ---------- Painel deslizante (sumário / busca) ---------- */

.leitor-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 0, 34, 0.55);
  z-index: 1100;
  transition: opacity 0.2s ease;
}

.leitor-painel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1200;
  width: min(360px, 88vw);
  background: #fff;
  box-shadow: 4px 0 24px rgba(10, 0, 34, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.leitor-painel[data-lado="direita"] {
  left: auto;
  right: 0;
  box-shadow: -4px 0 24px rgba(10, 0, 34, 0.35);
}

/* reader.js aplica estas classes por um instante ao abrir (removidas
   logo em seguida, depois de forçar um reflow) - o painel entra
   deslizando/a partir do lado de onde é ancorado, em vez de aparecer
   estático. O fechamento continua instantâneo de propósito: animar a
   saída exigiria atrasar o hidden=true e a devolução de foco pro
   elemento que abriu o painel, e essa complexidade extra na cadeia de
   foco não vale o ganho num painel que já fecha rápido. */
.leitor-painel-entrando {
  transform: translateX(-100%);
}

.leitor-painel[data-lado="direita"].leitor-painel-entrando {
  transform: translateX(100%);
}

.leitor-backdrop-entrando {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .leitor-backdrop,
  .leitor-painel {
    transition: none;
  }
}

.leitor-painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 1em 0.75em;
  border-bottom: 1px solid var(--cor-borda-suave);
  background: var(--cor-fundo-suave);
}

.leitor-painel-titulo {
  font-weight: 700;
  color: var(--cor-navy);
  font-size: 1.05em;
  margin: 0;
}

.leitor-painel-fechar {
  background: transparent;
  border: none;
  color: var(--cor-navy);
  cursor: pointer;
  padding: 0.3em;
  line-height: 0;
}

.leitor-painel-fechar svg {
  width: 1.3em;
  height: 1.3em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.leitor-painel-corpo {
  overflow-y: auto;
  padding: 0.5em 0;
  flex: 1;
}

/* Sumário */

.leitor-toc-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: leitor-toc;
}

.leitor-toc-lista li {
  counter-increment: leitor-toc;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.leitor-toc-lista a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.75em 1em;
  color: var(--cor-texto);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 0.92em;
  font-weight: 600;
}

.leitor-toc-lista a::before {
  content: counter(leitor-toc, decimal-leading-zero);
  color: var(--cor-magenta-escuro);
  font-weight: 800;
  font-size: 0.9em;
  min-width: 1.6em;
  flex: none;
}

.leitor-toc-lista a:hover,
.leitor-toc-lista a:focus-visible {
  background: var(--cor-fundo-suave);
}

.leitor-toc-lista a[aria-current="page"] {
  border-left-color: var(--cor-magenta);
  background: var(--cor-fundo-suave);
  color: var(--cor-magenta-escuro);
  font-weight: 700;
}

/* Busca */

.leitor-busca-form {
  display: flex;
  gap: 0.5em;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.leitor-busca-input {
  flex: 1;
  padding: 0.5em 0.65em;
  border: 1px solid var(--cor-borda-suave);
  border-radius: 6px;
  font-size: 0.95em;
  font-family: inherit;
}

.leitor-busca-enviar {
  background: var(--cor-magenta-escuro);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5em 0.9em;
  font-size: 0.9em;
  cursor: pointer;
}

.leitor-busca-status {
  padding: 0.6em 1em;
  font-size: 0.85em;
  color: var(--cor-texto-suave);
}

.leitor-busca-navegacao {
  display: flex;
  gap: 0.4em;
  padding: 0 1em 0.6em;
}

.leitor-busca-navegacao button {
  background: var(--cor-fundo-suave);
  border: 1px solid var(--cor-borda-suave);
  border-radius: 6px;
  padding: 0.3em 0.7em;
  font-size: 0.85em;
  cursor: pointer;
  color: var(--cor-navy);
}

.leitor-busca-resultados {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leitor-busca-resultados li a {
  display: block;
  padding: 0.6em 1em;
  color: var(--cor-texto);
  text-decoration: none;
  border-bottom: 1px solid var(--cor-borda-suave);
  font-size: 0.88em;
}

.leitor-busca-resultados li a:hover,
.leitor-busca-resultados li a:focus-visible {
  background: var(--cor-fundo-suave);
}

.leitor-busca-resultados .leitor-busca-capitulo {
  display: block;
  font-weight: 700;
  color: var(--cor-magenta-escuro);
  margin-bottom: 0.2em;
}

mark.leitor-destaque {
  background: #ffe27a;
  color: var(--cor-texto);
  border-radius: 2px;
}

mark.leitor-destaque-atual {
  background: var(--cor-magenta);
  color: #fff;
}

/* ---------- Rodapé fixo: navegação entre capítulos (só no modo HTML -
   o modo PDF já tem sua própria barra inferior com paginação) ---------- */

.leitor-rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: linear-gradient(to right, var(--cor-navy), var(--cor-lilas-escuro));
  border-top: 1px solid var(--cor-navy);
  padding: 0.47em 0.9em;
}

.leitor-nav-capitulos {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  max-width: 900px;
  margin: 0 auto;
}

.leitor-nav-capitulos a,
.leitor-nav-capitulos .leitor-nav-desabilitado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05em;
  text-decoration: none;
  padding: 0.25em 0.7em;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  max-width: 46%;
}

.leitor-nav-capitulos a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.leitor-nav-capitulos .leitor-nav-proximo {
  margin-left: auto;
  text-align: right;
}

.leitor-nav-rotulo {
  font-size: 0.66em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.leitor-nav-titulo {
  font-weight: 700;
  color: #fff;
  font-size: 0.82em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leitor-nav-desabilitado {
  color: rgba(255, 255, 255, 0.45);
  cursor: default;
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
}

.leitor-nav-desabilitado .leitor-nav-rotulo {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.78em;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Ampliação de imagens (lightbox) ---------- */

.leitor-ampliavel {
  cursor: zoom-in;
}

.leitor-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(10, 0, 34, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2em 1em;
  transition: opacity 0.15s ease;
}

/* mesma lógica do .leitor-painel-entrando acima: classe temporária
   aplicada pelo reader.js só na abertura. */
.leitor-lightbox-entrando {
  opacity: 0;
}

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

.leitor-lightbox-fechar {
  position: absolute;
  top: 1em;
  right: 1em;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.leitor-lightbox-fechar svg {
  width: 1.4em;
  height: 1.4em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.leitor-lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: #fff;
}

.leitor-lightbox-legenda {
  color: #fff;
  max-width: min(92vw, 1200px);
  margin-top: 1em;
  font-size: 0.95em;
  text-align: center;
}

/* ---------- Galeria de recursos: navegação em telas estreitas ---------- */

@media (max-width: 640px) {
  .galeria-recursos {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .galeria-recursos > .cartao {
    scroll-snap-align: start;
    flex: 0 0 100%;
  }

  /* A "Galeria de Recursos" (QR codes de cada capítulo) usa cartões
     com classe .cartao-recurso-bloco, não .cartao - então a regra
     acima (que dá flex:0 0 100% a cada cartão pro carrossel horizontal
     funcionar) nunca se aplicava a ela: os cartões ficavam encolhidos
     lado a lado dentro do container flex, sem nenhum dimensionamento
     (bug reportado pelo usuário - QR code pequeno demais pra ler com
     a câmera do celular). Aqui desfaz o carrossel horizontal só pra
     essa galeria específica e empilha 1 por linha (bloco normal) -
     cada QR code fica bem maior, mais fácil de escanear, sem precisar
     arrastar pros lados pra ver os outros recursos. */
  .galeria-recursos:has(.cartao-recurso-bloco) {
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .galeria-recursos:has(.cartao-recurso-bloco) .cartao-recurso-bloco {
    margin-bottom: 1em;
  }

  .galeria-recursos:has(.cartao-recurso-bloco) .cartao-recurso-bloco:last-child {
    margin-bottom: 0;
  }

  .leitor-galeria-controles {
    display: flex;
    justify-content: center;
    gap: 0.6em;
    margin-top: 0.75em;
  }

  .leitor-galeria-controles button {
    background: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda-suave);
    color: var(--cor-navy);
    border-radius: 50%;
    width: 2.4em;
    height: 2.4em;
    cursor: pointer;
  }

  .leitor-galeria-pontos {
    display: flex;
    align-items: center;
    gap: 0.4em;
  }

  .leitor-galeria-ponto {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--cor-borda-suave);
  }

  .leitor-galeria-ponto[data-ativo="true"] {
    background: var(--cor-magenta);
  }
}

@media not all and (max-width: 640px) {
  .leitor-galeria-controles {
    display: none;
  }
}

/* ---------- Utilitário: só leitor de tela ---------- */

.leitor-somente-leitor-de-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Impressão: esconder a camada de interface do leitor ---------- */

@media print {
  .leitor-barra,
  .leitor-backdrop,
  .leitor-painel,
  .leitor-rodape,
  .leitor-lightbox {
    display: none !important;
  }

  body.tem-barra-leitor .leitor-conteudo {
    position: static;
    overflow: visible;
  }
}

/* ---------------------------------------------------------------------
   CSS original da biblioteca StPageFlip (Oleg Litovski/Nodlik, MIT),
   vendorizada em resources/scripts/pageflip/ - ver license.txt nessa pasta.
   Copiado sem alterações do pacote (src/Style/stPageFlip.css); estiliza
   os elementos internos que a biblioteca cria para desenhar a curva da
   página (.stf__*). Mantido em bloco separado, no fim do arquivo, para
   deixar claro que não é CSS de autoria deste projeto.
   --------------------------------------------------------------------- */
.stf__parent {
  position: relative;
  display: block;
  box-sizing: border-box;
  transform: translateZ(0);

  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.sft__wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.stf__parent canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.stf__block {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  perspective: 2000px;
}

.stf__item {
  display: none;
  position: absolute;
  transform-style: preserve-3d;
}

.stf__outerShadow {
  position: absolute;
  left: 0;
  top: 0;
}

.stf__innerShadow {
  position: absolute;
  left: 0;
  top: 0;
}

.stf__hardShadow {
  position: absolute;
  left: 0;
  top: 0;
}

.stf__hardInnerShadow {
  position: absolute;
  left: 0;
  top: 0;
}