/**
 * assets/css/revista.css — telas próprias do subdomínio da revista.
 * Usa a camada --ui-* de design-tokens.css (carregado antes deste arquivo em
 * cada página) — nasce e morre junto com ela em modo escuro, sem @media
 * próprio aqui (ver DESAFIOS.md sobre camada --ui-* ser tudo-ou-nada).
 */

.assinar-body {
    margin: 0;
    background: var(--ui-fundo);
    color: var(--ui-tinta);
}

.assinar-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.assinar-card {
    box-sizing: border-box;
    max-width: 560px;
    width: 100%;
    background: var(--ui-superficie);
    border: 1px solid var(--ui-linha);
    border-radius: var(--raio-grande);
    box-shadow: var(--ui-sombra);
    padding: 40px;
    text-align: center;
}

.assinar-wordmark {
    height: 1.4rem;
    display: flex;
    justify-content: center;
    margin: 0 0 24px;
}

.assinar-subtitulo {
    color: var(--ui-tinta-2);
    margin: 8px 0 24px;
}

.assinar-aviso {
    background: var(--ui-acento-fraco);
    border-radius: var(--raio-padrao);
    padding: 12px 16px;
    margin: 0 0 24px;
}

.assinar-planos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 24px;
    text-align: left;
}

.assinar-plano {
    box-sizing: border-box;
    border: 1px solid var(--ui-linha);
    border-radius: var(--raio-padrao);
    padding: 16px;
}

.assinar-plano h2 {
    font-size: 1rem;
    margin: 0 0 8px;
}

.assinar-plano-descricao {
    color: var(--ui-tinta-2);
    font-size: 0.9rem;
    margin: 0;
}

.assinar-manual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

@media (max-width: 520px) {
    .assinar-planos { grid-template-columns: 1fr; }
    .assinar-card { padding: 28px 20px; }
}

/* ==========================================================================
 * O LEITOR (ler.php)
 * ==========================================================================
 * Fundo escuro fixo, e não a camada --ui-*: o leitor é uma sala escura em
 * volta da página impressa, do mesmo jeito que um cinema. Aqui o escuro não
 * é "tema", é o palco — não deve inverter quando o aparelho está em modo
 * claro. Por isso as cores desta seção são literais e não trocam com
 * prefers-color-scheme; é desvio deliberado da regra da camada --ui-*.
 */

.leitor-body {
    margin: 0;
    background: #16110F;
    color: #F3EEEA;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.leitor-topo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(243, 238, 234, .10);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.leitor-topo-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    height: 18px;
}
.leitor-topo-edicao {
    font-size: .82rem;
    color: rgba(243, 238, 234, .62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}
.leitor-topo-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
}
.leitor-topo-usuario {
    font-size: .82rem;
    color: rgba(243, 238, 234, .62);
}
.leitor-aviso-rascunho {
    margin: 0;
    font-size: .75rem;
    background: var(--cor-amarelo);
    color: #2A1B10;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: var(--peso-corpo-medio);
}

.leitor-botao {
    box-sizing: border-box;
    font-family: var(--fonte-corpo);
    font-size: .82rem;
    font-weight: var(--peso-corpo-medio);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
}
.leitor-botao-destaque {
    background: var(--cor-amarelo);
    color: #2A1B10;
}
.leitor-botao-destaque:hover { background: var(--cor-amarelo-80); }
.leitor-botao-fantasma {
    border-color: rgba(243, 238, 234, .28);
    color: #F3EEEA;
}
.leitor-botao-fantasma:hover { border-color: rgba(243, 238, 234, .55); }

/* ── o palco ────────────────────────────────────────────────────────────── */
.leitor-palco {
    flex: 1;
    min-height: 0;          /* sem isto o flex item recusa encolher e a footer some */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    touch-action: pan-y;
}
.leitor-palco-ampliado {
    cursor: grab;
    touch-action: none;     /* a panorâmica e a pinça passam a ser nossas */
}
.leitor-palco-ampliado:active { cursor: grabbing; }

/* width/height saem do leitor.js (função dimensionar), calculados a partir da
   altura disponível — ver o comentário lá. Aqui só o que não depende de medida. */
.leitor-zoom {
    transform-origin: center center;
    transition: transform .18s ease-out;
    will-change: transform;
}
.leitor-flip-ativo { width: 100%; height: 100%; }
/* Enquanto ampliado, o arrasto é panorâmica — a lib não deve receber o
   ponteiro, senão os dois gestos brigam pelo mesmo dedo (ver leitor.js). */
.leitor-zoom-ativo .leitor-flip { pointer-events: none; }

.leitor-flip { margin: 0 auto; }

.leitor-pagina {
    background: #FFFFFF;
    overflow: hidden;
}
.leitor-pagina img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Página travada: mesma proporção da impressa (794x1123), para o cadeado
   ocupar exatamente o lugar da página e a numeração não desalinhar. */
.leitor-pagina-travada {
    background: #241D1A;
    color: #F3EEEA;
    border: 1px solid rgba(243, 238, 234, .10);
}
/*
 * Centralizado por posicionamento, e não por flex no elemento da página:
 * a StPageFlip escreve `display: block` INLINE em cada item ao montar o
 * flipbook, e estilo inline vence a classe — um `display: flex` aqui é
 * silenciosamente descartado e o cadeado encalha no topo da página. O
 * absoluto se ancora no próprio item (que a lib deixa posicionado), então
 * funciona nos dois casos: com a lib ativa e no fallback empilhado.
 */
.leitor-cadeado {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    padding: 24px;
    max-width: 280px;
}
.leitor-flip:not(.leitor-flip-ativo) .leitor-pagina-travada { position: relative; }
.leitor-cadeado svg { color: var(--cor-amarelo); margin-bottom: 12px; }
.leitor-cadeado-titulo {
    font-family: var(--fonte-display);
    font-size: 1rem;
    margin: 0 0 8px;
}
.leitor-cadeado-texto {
    font-size: .85rem;
    color: rgba(243, 238, 234, .70);
    margin: 0 0 16px;
}
.leitor-cadeado-rodape {
    font-size: .78rem;
    color: rgba(243, 238, 234, .55);
    margin: 12px 0 0;
}
.leitor-cadeado-rodape a { color: var(--cor-amarelo); }
.leitor-cadeado-folio {
    font-size: .72rem;
    color: rgba(243, 238, 234, .38);
    margin: 18px 0 0;
}

/* ── controles ──────────────────────────────────────────────────────────── */
.leitor-controles {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(243, 238, 234, .10);
    flex-shrink: 0;
}
.leitor-controle {
    box-sizing: border-box;
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    line-height: 1;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #F3EEEA;
    border: 1px solid rgba(243, 238, 234, .24);
    border-radius: 10px;
    cursor: pointer;
}
.leitor-controle:hover { background: rgba(243, 238, 234, .10); }
.leitor-controle:focus-visible { outline: 2px solid var(--cor-amarelo); outline-offset: 2px; }
.leitor-indicador {
    font-size: .82rem;
    color: rgba(243, 238, 234, .62);
    min-width: 72px;
    text-align: center;
}
.leitor-controles-separador {
    width: 1px;
    height: 24px;
    background: rgba(243, 238, 234, .18);
    margin: 0 6px;
}

/* ── fallback: StPageFlip não carregou ──────────────────────────────────────
 * Sem a classe que o leitor.js acrescenta, as páginas ficam empilhadas numa
 * rolagem vertical. Continua sendo uma revista legível — com o mesmo gate,
 * porque o cadeado veio pronto do servidor. */
.leitor-flip:not(.leitor-flip-ativo) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 100%;
    overflow-y: auto;
    max-width: 820px;
}
.leitor-flip:not(.leitor-flip-ativo) .leitor-pagina {
    aspect-ratio: 794 / 1123;
    width: 100%;
}

.leitor-em-tela-cheia .leitor-topo { display: none; }

@media (max-width: 640px) {
    .leitor-topo { padding: 10px 14px; }
    .leitor-topo-edicao { display: none; }
    .leitor-palco { padding: 10px; }
    .leitor-controles { gap: 6px; padding: 10px 12px; }
    .leitor-controle { min-width: 36px; height: 36px; }
    .leitor-indicador { min-width: 58px; font-size: .76rem; }
}