/* Leitor dos livros (25/09/2026) — livro de folhear no computador. Cores = as do site (cinza, noite/dia). */
:root {
    /* Cores do próprio site (25/09/2026, Sandro: "não tem isso de azul"): cinza neutro, noite e dia. */
    --leitor-fundo: #1a1a1a;
    --leitor-painel: #262626;
    --leitor-borda: #333333;
    --leitor-texto: #e6e6e6;
    --leitor-mudo: #b3b3b3;
    --leitor-botao: hsl(214, 73%, 27%); /* mesmo azul do botão "Ler o livro" do site */
    --leitor-botao-hover: hsl(214, 73%, 35%);
}
html.swday-day {
    --leitor-fundo: #f2f2f2;
    --leitor-painel: #ffffff;
    --leitor-borda: #d9d9d9;
    --leitor-texto: #1a1a1a;
    --leitor-mudo: #666666;
}

* { box-sizing: border-box; }

/* O leitor sempre cabe na tela: sem barra de rolagem (a animação de virar a página passava da borda e fazia a barra aparecer) */
html, body { margin: 0; height: 100%; overflow: hidden; }

body {
    display: flex;
    flex-direction: column;
    background: var(--leitor-fundo);
    color: var(--leitor-texto);
    font: 400 15px/1.5 "Poppins-normal", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sem-rolagem, .sem-rolagem body { overflow: hidden; }

.leitor-topo {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 28px;
    background: var(--leitor-painel);
    border-bottom: 1px solid var(--leitor-borda);
}

.leitor-voltar { color: var(--leitor-mudo); text-decoration: none; white-space: nowrap; }
.leitor-voltar:hover { color: var(--leitor-texto); }

.leitor-titulo { flex: 1; min-width: 0; }
.leitor-titulo h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leitor-titulo span { color: var(--leitor-mudo); font-size: 13px; }

.leitor-botao {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--leitor-borda);
    border-radius: 6px;
    background: transparent;
    color: var(--leitor-texto);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.leitor-botao:hover:not(:disabled) { border-color: var(--leitor-botao-hover); }
.leitor-botao:disabled { opacity: .4; cursor: default; }
.leitor-botao--destaque { background: var(--leitor-botao); border-color: var(--leitor-botao); color: #fff; }
.leitor-botao--destaque:hover { background: var(--leitor-botao-hover); }

.leitor-tela {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    min-height: 0;
    overflow: hidden;
}

.leitor-livro {
    width: 100%;
    /* !important: o StPageFlip grava max-width no próprio elemento (mesmo caso do livro do JGE) */
    max-width: calc((100vh - 190px) * var(--razao, 1.414)) !important;
    margin: 0 auto;
}

.leitor-pagina { background: #fff; overflow: hidden; }
.leitor-pagina canvas { display: block; width: 100%; height: 100%; }

.leitor-controles {
    display: flex;
    align-items: center;
    gap: 12px;
}
.leitor-contador { min-width: 150px; text-align: center; color: var(--leitor-mudo); font-size: 14px; }

.leitor-carregando { color: var(--leitor-mudo); }
.leitor-aviso { color: var(--leitor-mudo); }
.leitor-aviso a { color: var(--leitor-texto); }

/* Tela cheia: só o livro, no maior tamanho que cabe. */
.leitor-tela--cheia {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--leitor-fundo);
    padding: 16px;
}
.leitor-tela--cheia .leitor-livro { max-width: calc((100vh - 90px) * var(--razao, 1.414)) !important; }

/* Zoom (25/09/2026): as páginas abertas, redesenhadas em alta resolução; arrasta para mover. */
.leitor-zoom {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--leitor-fundo);
}
.leitor-zoom[hidden] { display: none; }
.leitor-zoom__barra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--leitor-painel);
    border-bottom: 1px solid var(--leitor-borda);
}
.leitor-zoom__nivel { min-width: 56px; text-align: center; font-weight: 600; }
.leitor-zoom__dica { flex: 1; color: var(--leitor-mudo); font-size: 13px; }
.leitor-zoom__area {
    flex: 1;
    overflow: auto;
    cursor: grab;
    user-select: none;
}
.leitor-zoom__area.arrastando { cursor: grabbing; }
.leitor-zoom__paginas {
    display: flex;
    gap: 6px;
    width: max-content;
    margin: 24px auto;
    padding: 0 24px;
}
.leitor-zoom__paginas canvas { display: block; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }