/* =====================================================================
   Leitor de PDF (js/leitor-pdf.js) -- LIVRO, e nao rolo.

   A pagina inteira cabe na tela e se troca para o lado, como um livro de
   verdade. Foi pedido assim, e no celular e mesmo melhor: livro infantil
   e ilustracao de pagina cheia, e rolar por dentro dela cortava o desenho
   ao meio o tempo todo.

   Quem vira a pagina e a ROLAGEM HORIZONTAL NATIVA com scroll-snap -- nao
   um gesto escrito a mao. Assim o arrasto tem a inercia e o elastico do
   proprio aparelho, funciona igual em iOS e Android, e continua obedecendo
   a quem le com teclado ou leitor de tela.
   ===================================================================== */

/* A casca ocupa a tela toda: o leitor e uma tela cheia, nao um bloco no
   meio de uma pagina que rola. */
.leitor-livro {
    display: flex;
    flex-direction: column;
    /* dvh, e nao vh: no celular a barra do navegador entra e sai, e com vh
       o rodape do livro ficava escondido atras dela. */
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
}

/* Dentro do leitor, TODA a moldura do site sai de cena: o topo fixo e a
   barra de baixo somavam uns 130px de altura, que num celular sao a
   diferenca entre ver a pagina inteira e ver dois tercos dela. E leitura
   em tela cheia, como um aplicativo de livro -- e o "Voltar" fica a mao,
   no canto da propria cabeca do leitor. */
body:has(.leitor-livro) { padding-bottom: 0; overflow: hidden; }
body:has(.leitor-livro) .topo,
body:has(.leitor-livro) .barra-app,
body:has(.leitor-livro) .rodape { display: none; }

/* -------- cabeca -------- */

/* A barra FLUTUA sobre o livro em vez de ocupar uma faixa: sao uns 45px de
   altura, e altura e exatamente o que falta numa tela de celular. Ela sai
   sozinha depois de alguns segundos (classe `imerso`, posta pelo JS) e volta
   a qualquer toque. */
.pdf-cabeca {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px clamp(12px, 3vw, 28px);
    background: linear-gradient(180deg, rgba(5, 9, 28, .96) 55%, rgba(5, 9, 28, 0));
    transition: transform .25s, opacity .25s;
}

.leitor-livro.imerso .pdf-cabeca {
    transform: translateY(-100%);
    opacity: 0;
}

.pdf-bt.ligado {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .35);
}

.pdf-cabeca .pdf-titulo {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-cabeca .pdf-dir {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Classe propria para o nivel do zoom, e nao a mesma do contador: o JS
   procura o contador por `.pdf-contador` e pegaria o primeiro que achasse. */
.pdf-contador,
.pdf-nivel {
    font-size: 13px;
    color: var(--texto-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pdf-nivel { min-width: 42px; text-align: center; }

.pdf-bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--borda);
    background: rgba(255, 255, 255, .06);
    color: var(--texto);
    cursor: pointer;
    transition: background .15s;
}

.pdf-bt:hover { background: rgba(255, 255, 255, .14); }
.pdf-bt:disabled { opacity: .35; cursor: default; }

/* O audio acompanha a barra: com ela fora do fluxo, ficaria colado no topo
   por cima da pagina. */
.pdf-audio {
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    z-index: 29;
    padding: 0 clamp(12px, 3vw, 28px) 8px;
    transition: transform .25s, opacity .25s;
}

.leitor-livro.imerso .pdf-audio { transform: translateY(-160%); opacity: 0; }
.pdf-audio audio { width: 100%; height: 34px; }

/* -------- o livro -------- */

.pdf-livro {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;   /* sem isso o flex nao deixa o palco encolher */
    overflow: hidden;
    /* Centraliza o livro na area que sobra. Precisa ser aqui, e nao dentro do
       palco: assim que a lib calcula o tamanho, ela GRAVA a altura no proprio
       palco -- entao ele encolhe ate o livro, e quem o centraliza tem de ser
       o pai. Antes disso, o livro ficava colado no topo com um vazio embaixo. */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Um respiro, para a folha nao encostar na borda da tela. Vai no PAI e
       nao no palco: e o palco que a lib mede para decidir o tamanho, e uma
       margem nele seria descontada duas vezes. */
    padding: 12px;
    box-sizing: border-box;
}

/* O StPageFlip toma este elemento para si (vira .stf__parent) e centraliza as
   folhas dentro dele. Comeca ocupando a area INTEIRA porque e dela que a lib
   tira a largura e a altura disponiveis para decidir o tamanho da pagina e se
   cabem duas; depois ela mesma reduz a altura ao tamanho do livro. */
.pf-palco {
    width: 100%;
    height: 100%;
    max-height: 100%;
    /* O arrasto de virar e horizontal; sem isto o navegador do celular
       entende como "voltar" e sai da pagina no meio da leitura. */
    touch-action: pan-y;
}

.pf-pagina {
    position: relative;
    overflow: hidden;
    /* Papel, e nao buraco: enquanto o desenho nao chega, a folha ja existe
       com a cor certa, e a virada nunca mostra um retangulo preto. */
    background: #fbfaf7;
    background-image: linear-gradient(120deg, #ffffff, #f1efe9);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

/* A lib posiciona `.stf__parent canvas` em absoluto e 100% -- e o que faz o
   desenho preencher a folha exatamente. */
.pf-pagina canvas { background: #fff; }

/* NAO "consertar" aqui o `.sft__wrapper` da folha de estilo da biblioteca
   (o nome vem com as duas letras trocadas na origem, entao a regra nunca
   pega). Foi tentado: dar `width: 100%` ao wrapper muda a largura que a lib
   mede e a pagina passou de 597x845 para 720x1019 -- estourando a altura da
   tela. O calculo dela conta com esse elemento sem largura imposta. */

/* Vinco perto da lombada, so quando ha DUAS paginas: e a sombra que faz o par
   parecer um livro aberto, em vez de duas fotos lado a lado. A classe de
   orientacao mora no `.stf__wrapper`, e nao no `.stf__parent` -- conferido no
   DOM, porque errar isso deixaria o vinco aparecendo tambem na pagina unica,
   onde nao ha lombada nenhuma. */
.stf__wrapper.--landscape .pf-pagina::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
    z-index: 2;
}

.stf__wrapper.--landscape .stf__item:nth-child(odd) .pf-pagina::after {
    right: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .16));
}

.stf__wrapper.--landscape .stf__item:nth-child(even) .pf-pagina::after {
    left: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .16));
}

/* -------- ampliado -------- */

/* Ampliado, o dedo arrasta a pagina -- entao virar passa a ser das SETAS, e
   elas precisam aparecer justamente aqui, inclusive no celular, onde
   normalmente ficam escondidas porque o dedo ja folheia. Sem isso, encher a
   tela significaria ler uma pagina so. */
.pdf-livro.ampliado .pdf-nav { display: grid; }
.pdf-livro.ampliado .pf-palco { cursor: grab; }
.pdf-livro.ampliado .pf-palco:active { cursor: grabbing; }

.pdf-sem-zoom {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(10, 14, 34, .86);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

/* So aparece quando ha do que voltar -- ampliado, nao ha outra saida obvia. */
.pdf-livro.ampliado .pdf-sem-zoom { display: inline-flex; }

/* -------- setas -------- */

.pdf-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(10, 14, 34, .72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s, opacity .15s;
}

.pdf-nav:hover { background: rgba(10, 14, 34, .92); }
.pdf-nav.esq { left: 10px; }
.pdf-nav.dir { right: 10px; }
.pdf-nav[disabled] { opacity: 0; pointer-events: none; }

/* No celular a seta atrapalha o desenho, e o dedo ja arrasta -- salvo
   ampliado, onde o dedo virou panoramica (regra acima, mais especifica). */
@media (max-width: 720px) {
    .pdf-nav { display: none; }
    .pdf-folha { padding: 6px; }

    /* A cabeca nao cabe inteira em 390px: o titulo era espremido ate virar
       uma letra so ("J."), o que nao informa nada e ainda rouba largura de
       quem informa. Sai o titulo -- a capa esta na tela -- e saem os botoes
       de zoom, porque no celular a pinca do proprio aparelho ja amplia (e o
       desenho e feito com folga justamente para aguentar isso). */
    .pdf-cabeca .pdf-titulo,
    .pdf-cabeca [data-z],
    .pdf-cabeca .pdf-nivel { display: none; }
    .pdf-cabeca { padding: 8px 12px; }

    /* Cada pixel de largura vira tamanho de letra: no celular a pagina ja
       e limitada pela largura, entao a moldura encolhe ao minimo. */
    .pdf-livro { padding: 5px; }
}

/* -------- carregando e falha -------- */

.pdf-estado {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    color: var(--texto-2);
}

.pdf-girando {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 3px solid var(--borda);
    border-top-color: var(--dourado);
    animation: pdf-gira .8s linear infinite;
}

@keyframes pdf-gira { to { transform: rotate(360deg); } }

/* Barra de quanto ja baixou. Num 4G, o silencio de um arquivo de 5 MB e
   indistinguivel de uma tela travada -- e quem espera desiste. */
.pdf-progresso {
    width: min(240px, 60vw);
    height: 5px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.pdf-progresso span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--dourado);
    transition: width .25s;
}

.pdf-estado .bi-file-earmark-pdf { font-size: 40px; opacity: .5; }
.pdf-estado p { margin: 14px auto 18px; max-width: 34ch; }

.pdf-saidas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Pequeno e discreto: nao e recado para quem le, e pista para quem conserta.
   Sem ele, as duas falhas possiveis mostravam a mesma frase e nao dava para
   distinguir rede ruim de arquivo que nao subiu no servidor. */
.pdf-motivo {
    display: block;
    margin-top: 16px;
    font-size: 11.5px;
    line-height: 1.4;
    opacity: .5;
    max-width: 44ch;
    word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .pdf-trilho { scroll-behavior: auto; }
    .pdf-girando { animation: none; }
}

/* ---------------------------------------------------------------------
   Amostra gratuita (degustacao)

   O leitor e o MESMO da leitura paga -- o que muda e o arquivo servido e
   estes dois avisos. Ver frontend/views/catalogo/ler.php.
   --------------------------------------------------------------------- */

/* O selo do topo. Dourado porque aqui ele fala de venda, e o dourado e a
   cor reservada ao premium em todo o site -- ver css/app.css. */
.pdf-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(217, 180, 91, .45);
    background: rgba(217, 180, 91, .14);
    color: var(--dourado);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* O unico botao da barra que nao e quadrado: ele nao e uma ferramenta do
   leitor, e a acao que a amostra existe para provocar. */
.pdf-bt-assinar {
    width: auto;
    gap: 7px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 700;
    background: var(--dourado);
    border-color: var(--dourado);
    color: #1a1405;
}
.pdf-bt-assinar:hover { background: #e6c674; }

/* O convite do fim. Cobre a tela toda de proposito: e o momento em que a
   leitura acabou, e um cantinho discreto seria ignorado -- mas ele SAI com
   um clique e volta a pagina, entao nao prende ninguem. */
.pdf-convite {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 9, 28, .82);
    backdrop-filter: blur(6px);
    animation: pdf-convite-entra .25s ease-out;
}
.pdf-convite[hidden] { display: none; }

@keyframes pdf-convite-entra {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pdf-convite-caixa {
    max-width: 460px;
    text-align: center;
    padding: 30px 26px;
    border-radius: 18px;
    border: 1px solid rgba(217, 180, 91, .35);
    background: linear-gradient(160deg, rgba(14, 30, 86, .96), rgba(5, 9, 28, .96));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.pdf-convite-caixa h2 { margin: 0 0 10px; font-size: 22px; }
.pdf-convite-caixa p { margin: 0 0 20px; color: var(--texto-2); font-size: 15px; line-height: 1.55; }

.pdf-convite-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Num celular em pe a barra ja disputa espaco com o titulo: o selo perde o
   texto e fica so o icone, que e o que cabe sem empurrar o contador para
   fora da tela. */
@media (max-width: 560px) {
    .pdf-selo { font-size: 0; padding: 5px 9px; gap: 0; }
    .pdf-selo i { font-size: 14px; }
    .pdf-bt-assinar { padding: 0 11px; }
}