/* ==========================================================================
   IDENTIDADE VISUAL hap-app -- direção aprovada em 2026-09-13 (ver canvas
   "Identidade Visual do hap-app"), estendida em 2026-09-22 com 3 temas
   noturnos novos (ver abaixo). Um acento por papel semântico, nunca vários
   valores pro mesmo papel -- lição do Roderick.
   ========================================================================== */
:root {
    color-scheme: light;
    /* Cor e força da sombra das bandeiras (js/bandeira.js): preta nos temas
       claros; nos escuros, um halo claro e mais forte (2026-10-04). */
    --sombra-rgb: 0 0 0;
    --sombra-forca: 1;
    --bg: #f9f3e6;
    --bg-elevado: #f1e8d4;
    --borda: #ddcba3;
    --texto: #2b2116;
    --texto-suave: #6b5c46;
    --acento: #7a1f1f;
    --acento-tinta: color-mix(in srgb, var(--acento) 8%, var(--bg));
    --sucesso: #3f6b3f;
    --atencao: #a3701f;
    --erro: #a13a2f;
    --fonte-leitura: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --fonte-marca: 'Cinzel', 'EB Garamond', Georgia, serif;
    /* Só usada no talhe "Dossiê" do Resumo Profético (rp-b-*) -- pilha de
       sistema de propósito, sem carregar fonte nova pra um único talhe
       opcional entre três. */
    --fonte-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
    --fonte-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Tema escolhido explicitamente pelo usuário (persistido em localStorage,
   ver js/tema.js) tem sempre a palavra final -- por isso os blocos abaixo
   pisam um no outro nesta ordem: primeiro a preferência do sistema
   operacional (se o usuário nunca escolheu nada), depois a escolha
   explícita, que sempre vence. */
/* Tema "Escuro": acento roxo (2026-09-22, era vermelho #c1443a até então) --
   com o "Vermelho Noite" novo abaixo cobrindo a família do vermelho em tema
   escuro, manter Escuro também vermelho o tornava quase indistinguível dele.
   Roxo nunca foi usado em tema nenhum do app, tem peso simbólico próprio no
   livro (Ap 17:4, "vestida de púrpura e de escarlate") e não esbarra em
   --sucesso (verde) nem --atencao (dourado), papéis fixos em todo tema.
   --erro continua vermelho -- deixou de competir com o acento (que não é
   mais vermelho), então fica inequívoco sem precisar mudar de tom. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;
        --sombra-rgb: 245 222 179;
        --sombra-forca: 1.8;
        --bg: #1c1712;
        --bg-elevado: #262019;
        --borda: #4a3f30;
        --texto: #ece2d0;
        --texto-suave: #b0a488;
        --acento: #A46FE0;
        --sucesso: #6b9b6b;
        --atencao: #d9a441;
        --erro: #e0574a;
    }
}

:root[data-tema="escuro"] {
    color-scheme: dark;
    --sombra-rgb: 245 222 179;
    --sombra-forca: 1.8;
    --bg: #1c1712;
    --bg-elevado: #262019;
    --borda: #4a3f30;
    --texto: #ece2d0;
    --texto-suave: #b0a488;
    --acento: #A46FE0;
    --sucesso: #6b9b6b;
    --atencao: #d9a441;
    --erro: #e0574a;
}

/* Tema "Azul" (2026-09-14): acento azul celeste vivo, sobre papel com leve
   tingimento azulado em vez do creme/pergaminho dos outros dois temas --
   pedido explícito do usuário foi um azul "marcadamente" celeste, não uma
   variação sutil do acento existente. */
:root[data-tema="azul"] {
    --sombra-rgb: 0 0 0;
    --sombra-forca: 1;
    color-scheme: light;
    --bg: #eaf3fa;
    --bg-elevado: #dbe9f5;
    --borda: #b7d4e8;
    --texto: #172533;
    --texto-suave: #4c6478;
    --acento: #0a6a9e;
    --sucesso: #2f7d5c;
    --atencao: #b17e17;
    --erro: #b3392c;
}

/* Tema "Azul Noite" (2026-09-22): par escuro do "Azul" -- pedido do usuário
   foi um azul-céu vívido de verdade, não a versão aquarelada que o mesmo
   acento (#0a6a9e) rende sobre o papel quase-branco do tema claro (contraste
   alto demais desidrata a cor aos olhos). Fundo quase-preto tingido de azul
   deixa o mesmo espírito de matiz mais saturado "estampar" de verdade. */
:root[data-tema="azul-noite"] {
    color-scheme: dark;
    --sombra-rgb: 200 225 255;
    --sombra-forca: 1.8;
    --bg: #0A1622;
    --bg-elevado: #122436;
    --borda: #24425C;
    --texto: #E8F2FA;
    --texto-suave: #8FB0C9;
    --acento: #14A8F0;
    --sucesso: #3FC38A;
    --atencao: #EAA93D;
    --erro: #E6604A;
}

/* Tema "Vermelho" (2026-09-14): vermelho vivo/saturado, papel quase branco
   com toque de dourado na borda -- referência pedida foi o vermelho do site
   do Vaticano ("sangue vivo brilhante"), propositalmente mais intenso e
   menos "envelhecido" que o vermelhão de selo de cera dos outros temas.
   --erro usa um vermelho mais escuro/apagado de propósito, pra não se
   confundir com o próprio acento do tema (os dois sendo vermelhos vívidos
   ficariam indistinguíveis). */
:root[data-tema="vermelho"] {
    --sombra-rgb: 0 0 0;
    --sombra-forca: 1;
    color-scheme: light;
    --bg: #fbf7f3;
    --bg-elevado: #f5e9e2;
    --borda: #ddc196;
    --texto: #271512;
    --texto-suave: #6e4c40;
    --acento: #c8102e;
    --sucesso: #2f7d4a;
    --atencao: #b8860b;
    --erro: #8b2314;
}

/* Tema "Vermelho Noite" (2026-09-22): par escuro do "Vermelho" -- mesmo
   raciocínio do Azul Noite acima. O vermelho já "vivo" do tema claro
   (#c8102e) ainda dilui sobre o papel quase-branco; tirar o branco do
   caminho (fundo quase-preto) é o que faz ler como sangue de verdade, não
   aquarela. --erro deslocado pra um tom alaranjado (em vez de outro
   vermelho) -- mesmo cuidado que o Vermelho claro já tinha: acento da marca
   e erro não podem ser a mesma cor, senão ninguém distingue "é vermelho
   porque é o tema" de "é vermelho porque deu erro". */
:root[data-tema="vermelho-noite"] {
    color-scheme: dark;
    --sombra-rgb: 255 214 200;
    --sombra-forca: 1.8;
    --bg: #180B0A;
    --bg-elevado: #241412;
    --borda: #4A2420;
    --texto: #F5E6DF;
    --texto-suave: #C0958A;
    --acento: #F23A4F;
    --sucesso: #4FB876;
    --atencao: #E8AC3D;
    --erro: #C85A2E;
}

* { box-sizing: border-box; }

/* min-height + flex-column -- pedido do usuário (2026-09-22): rodapé fica
   no fim do CONTEÚDO (depois de rolar, em página longa) mas nunca flutua
   no meio da tela em página curta -- sem isto, um <footer> logo após
   </main> renderiza onde o conteúdo termina, ponto, não necessariamente no
   fim da viewport. `main` abaixo ganha `flex: 1 0 auto` pra ocupar o
   espaço sobrando; `.gate-overlay` (position: fixed) não participa deste
   fluxo, então fica de fora sem precisar de exceção. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

/* Pesquisa no cabeçalho -- pedido do usuário (2026-09-18), disponível
   nos dois planos, qualquer termo em qualquer conteúdo do site. */
.nav-pesquisa {
    position: relative;
    flex: 1 1 12rem;
    max-width: 18rem;
}

.nav-pesquisa input {
    width: 100%;
    font: inherit;
    font-size: 0.85rem;
    color: var(--texto);
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 0.3rem 2.1rem 0.3rem 0.9rem;
}

.nav-pesquisa input:focus {
    outline: none;
    border-color: var(--acento);
}

.nav-pesquisa-botao {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--texto-secundario, var(--texto));
    opacity: 0.6;
    cursor: pointer;
}

.nav-pesquisa-botao:hover,
.nav-pesquisa-botao:focus-visible {
    opacity: 1;
}

.nav-pesquisa-botao svg {
    width: 16px;
    height: 16px;
}

.nav-plano {
    font-size: 0.75rem;
    color: var(--texto-suave);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 0.1rem 0.6rem;
}

.nav-link-anotacoes, .nav-link-revisao {
    font-size: 0.85rem;
    color: var(--acento);
    text-decoration: none;
    white-space: nowrap;
}

.nav-link-anotacoes:hover, .nav-link-revisao:hover { text-decoration: underline; }

#nav-ver-como {
    font-size: 0.75rem;
    color: var(--texto);
    background: var(--bg-elevado);
    border: 1px solid var(--acento);
    border-radius: 20px;
    padding: 0.1rem 0.5rem;
}

#nav-usuario {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

#nav-usuario button {
    border: 1px solid var(--borda);
    background: none;
    color: var(--texto-suave);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    font-size: 0.8rem;
}

.form-auth {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 340px;
}

.form-auth label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--texto-suave);
}

.form-auth input[type="text"], .form-auth input[type="email"], .form-auth input[type="password"] {
    font: inherit;
    color: var(--texto);
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
}

.form-auth-checkbox {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
}

.form-auth button[type="submit"] {
    border: 1px solid var(--acento);
    background: var(--acento);
    color: var(--bg);
    border-radius: 6px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

.cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--borda);
    background: var(--bg-elevado);
}

.nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.nav a {
    color: var(--texto-suave);
    text-decoration: none;
    font-size: 0.9rem;
}

.nav a:hover { color: var(--acento); }

.nav-marca {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.1;
}

.nav-marca-titulo {
    font-family: var(--fonte-marca);
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--acento);
}

.nav-marca-tagline {
    font-size: 0.62rem;
    color: var(--texto-suave);
    letter-spacing: 0.02em;
}

.seletor-tema {
    border: 1px solid var(--borda);
    background: var(--bg);
    color: var(--texto-suave);
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

.seletor-tema:hover { color: var(--acento); border-color: var(--acento); }

main {
    flex: 1 0 auto;
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

/* Rodapé sitewide (2026-09-22) -- vive em index.html, não em views/*.html
   (mesmo motivo do <header>: fora do fragmento que router.js troca a cada
   navegação, então precisa estar fixo no "casco" da SPA pra aparecer em
   toda página sem duplicar em 14 arquivos). */
.rodape {
    flex: none;
    border-top: 1px solid var(--borda);
    background: var(--bg-elevado);
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.rodape-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.25rem;
}

.rodape-links a {
    color: var(--texto-suave);
    font-size: 0.85rem;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}

.rodape-links a:hover {
    color: var(--acento);
    border-color: var(--acento);
}

.rodape-copyright {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--texto-suave);
}

/* Lema no fim do rodapé de todas as páginas (pedido do usuário,
   2026-10-01; mesma frase do fecho da landing). Discreto, mas distinto do
   resto: fonte MENOR que a do copyright (0.75rem), um traço curto acima
   e o tom do acento suavizado. */
.rodape-lema {
    max-width: 34rem;
    margin: 0.9rem auto 0;
    padding-top: 0.6rem;
    border-top: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
    border-image: linear-gradient(to right, transparent, color-mix(in srgb, var(--acento) 35%, transparent), transparent) 1;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--acento) 55%, var(--texto-suave));
}

/* Só a home (ver router.js, main.classList.toggle) -- achado real do
   usuário: com a coluna de concordância ao lado dos cards, 720px deixava
   tudo espremido (texto do card quebrando em muitas linhas curtas). */
main.main-largo {
    max-width: 1080px;
}

/* router.js foca o <h1> de cada página após toda navegação (anuncia o
   título novo pra leitor de tela) -- sem isto, o navegador desenha seu
   contorno de foco padrão em volta do título toda vez que a rota muda.
   O elemento tem tabindex="-1" (nunca alcançável via Tab de verdade), só
   é focado por script para o anúncio de leitor de tela -- não precisa de
   indicador visual nenhum pra usuário vidente, então some por completo
   em vez de só trocar de cor (2026-09-14: usuário achou a versão
   estilizada ainda "chata" aparecendo em todo refresh). */
main h1:focus {
    outline: none;
}

.pagina-legal {
    font-family: var(--fonte-leitura);
    line-height: 1.65;
}

.pagina-legal h2 {
    color: var(--acento);
    font-size: 1.1rem;
    margin-top: 2rem;
}

.pagina-legal-data {
    color: var(--texto-suave);
    font-size: 0.85rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Concordância (esquerda) + cards dos livros (direita), lado a lado --
   decidido com o usuário (2026-09-17) a partir de um artefato com 3
   opções ("Opções de Índice Bíblico"). Achado real pesquisando as fontes:
   Apocalipse 13 não é um capítulo do HAP por inteiro -- o livro divide
   em dois (v. 1-10 = "Uma Quimera", v. 11-18 = "Um Cordeiro
   Draconiano"), por isso duas linhas "13" na concordância. */
.home-principal {
    display: grid;
    grid-template-columns: minmax(170px, 210px) 1fr;
    gap: 2.75rem;
    margin-top: 1.5rem;
    align-items: start;
}

.lista-livros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (max-width: 780px) {
    .home-principal { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .lista-livros { grid-template-columns: 1fr; }
}

/* Sem caixa/card -- pedido do usuário (2026-09-17): a concordância é um
   sumário de navegação, não a capa de um livro; ficando sem borda/fundo
   próprios, os cards continuam sendo o único objeto "encaixotado" da
   home, e a concordância flutua mais livre à esquerda deles. */
.concordancia {
    padding-top: 0.2rem;
}

.concordancia-titulo {
    font-family: var(--fonte-marca);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    margin: 0 0 1rem;
}

.concordancia-bloco + .concordancia-bloco {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--borda);
}

.concordancia-livro {
    font-family: var(--fonte-marca);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--acento);
    margin: 0 0 0.6rem;
}

.concordancia-linha {
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.5rem 0;
    text-decoration: none;
    color: var(--texto);
    border-bottom: 1px solid var(--borda);
    position: relative; /* âncora pra bandeira, quando a entrada tiver uma */
}

/* Card/entrada anunciando sem leitura liberada ainda (2026-09-21,
   migrations/0057) -- mesmo tratamento visual de .leitura-nav
   button:disabled, aplicado genericamente a qualquer elemento marcado
   assim (card de livro e linha de Concordância). Dica de verdade vem do
   atributo `title` nativo (hover), sem CSS/JS extra. */
[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.concordancia-linha:last-child { border-bottom: none; }

.concordancia-num {
    font-family: var(--fonte-marca);
    font-variant-numeric: oldstyle-nums;
    font-size: 1.15rem;
    color: var(--texto-suave);
    text-align: right;
}

.concordancia-linha:hover .concordancia-num { color: var(--acento); }

.concordancia-info { display: flex; flex-direction: column; gap: 0.1rem; }

.concordancia-info strong {
    font-family: var(--fonte-leitura);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.concordancia-info span {
    font-size: 0.74rem;
    color: var(--texto-suave);
}

/* "Página de rosto" -- ecoa a folha de rosto impressa dos livros
   (título / subtítulo / volume / edição, centrada e serifada), decidido
   com o usuário em 2026-09-14 a partir de um artefato com 3 opções. */
.cartao-rosto {
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 4px;
    padding: 2.2rem 1.75rem;
    text-align: center;
    font-family: var(--fonte-leitura);
    position: relative; /* âncora pras bandeiras (ver js/bandeira.js) */
}

/* Bandeiras/etiquetas (2026-09-20, a pedido do usuário -- ver artefato
   "Bandeiras e Concordância"): 5 modelos-base, só forma/cor/fonte aqui.
   Posição, rotação, escala, sombra e borda são decididos por instância
   (admin escolhe por card/entrada) e chegam como `style` inline vindo de
   js/bandeira.js -- nunca hardcoded na classe, é isso que permite reusar
   o mesmo modelo em lugares bem diferentes (canto de card vs. linha fina
   de Concordância). */
.bandeira { font-family: var(--fonte-ui); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; z-index: 2; }
.bandeira-fita { width: 150px; padding: 0.3rem 0; text-align: center; background: var(--acento); color: var(--bg); font-size: 0.68rem; }
.bandeira-selo {
    width: 4.3rem; height: 4.3rem; border-radius: 50%; background: var(--acento); color: var(--bg);
    display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: var(--fonte-marca); font-size: 0.6rem; line-height: 1.15; padding: 0.35rem;
    overflow: hidden; word-break: break-word; hyphens: auto;
}
.bandeira-pilula { padding: 0.3rem 0.8rem; border-radius: 20px; background: var(--acento); color: var(--bg); font-size: 0.68rem; }
.bandeira-contorno { padding: 0.2rem 0.7rem; border-radius: 20px; background: var(--bg); color: var(--acento); border: 1px solid var(--acento); font-size: 0.64rem; }
.bandeira-inline {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.64rem; color: var(--acento);
    font-family: var(--fonte-ui); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.bandeira-inline::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--acento); display: inline-block; }

.cartao-rosto-titulo {
    font-family: var(--fonte-marca);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    color: var(--texto-suave);
    margin: 0;
}

.cartao-rosto-regra {
    width: 2.5rem;
    height: 1px;
    background: var(--acento);
    margin: 0.85rem auto;
}

.cartao-rosto-subtitulo {
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.4;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.cartao-rosto-volume {
    font-family: var(--fonte-marca);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acento);
    margin: 0;
}

.cartao-rosto-edicao {
    font-size: 0.78rem;
    color: var(--texto-suave);
    margin: 0.2rem 0 0;
}

.cartao-rosto-acoes {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.timeline-arvore {
    font-family: var(--fonte-leitura);
}

.btn-topo {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 10;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-topo[hidden] { display: none; }

.timeline-arvore ul {
    list-style: none;
    padding-left: 1.25rem;
    border-left: 1px dashed var(--borda);
}

.timeline-arvore > ul { padding-left: 0; border-left: none; }

.timeline-no { margin: 0.5rem 0; }

.timeline-no-titulo {
    font-weight: 600;
    font-size: 1.1em;
}

.timeline-no-era {
    color: var(--acento);
    font-size: 0.8em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    margin-left: 0.5em;
    display: inline-flex;
    padding: 0.1rem 0.6rem;
    border-radius: 20px;
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
}

.timeline-no-corpo {
    margin: 0.35rem 0 0;
    font-size: 1em;
    line-height: 1.6;
}

.timeline-no-periodo {
    margin: 1.25rem 0 0.35rem;
}

.timeline-no-periodo > .timeline-no-era {
    margin-left: 0;
}

/* Ícones próprios (selo, rolo, medalhão) -- flat/sólidos, sem gradiente,
   sempre no acento do tema. Substituem os emojis-placeholder do primeiro
   rascunho (📖/🖼️), que não tinham padrão profissional. Ver o canvas de
   identidade visual para a folha completa (inclui um acervo de símbolos
   clássicos/marianos/miguelinos para uso pontual futuro, fora deste set). */
.icone-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--acento);
    flex-shrink: 0;
}

.botao-nota {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-left: 0.4em;
    vertical-align: middle;
}

.botao-nota .icone-tile { width: 22px; height: 22px; }

.recurso-imagem {
    margin: 0.75rem 0 0;
    padding: 0;
}

.recurso-imagem img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid var(--borda);
}

.recurso-imagem figcaption {
    margin: 0.4rem 0 0;
    font-size: 0.85em;
    font-style: italic;
    color: var(--texto-suave);
}

/* --- Modais: dois "talhes" visuais distintos, de propósito --- */

dialog.modal {
    max-width: 32rem;
    width: 90vw;
    border: none;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    color: var(--texto);
    background: var(--bg);
}

dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.modal-fechar {
    margin-top: 1rem;
    border: 1px solid var(--borda);
    background: none;
    color: inherit;
    border-radius: 6px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}

/* Modal de confirmação (js/dialogo.js, confirmarModal) -- substitui o
   confirm() nativo do navegador no painel admin, pra ficar no mesmo
   talhe visual do resto do site. */
.modal-confirmar-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.modal-confirmar-acoes button {
    border: 1px solid var(--borda);
    background: none;
    color: var(--texto);
    border-radius: 6px;
    padding: 0.4rem 1rem;
    cursor: pointer;
}

.modal-confirmar-acoes .botao-destaque {
    border-color: var(--acento);
    background: var(--acento);
    color: var(--bg);
    font-weight: 600;
}

.modal-confirmar-acoes .botao-perigo {
    border-color: var(--erro);
    background: var(--erro);
    color: var(--bg);
    font-weight: 600;
}

/* Modal só-leitura (js/dialogo.js, visualizarModal) -- ver o conteúdo de
   uma versão de Termos já publicada/arquivada (não editável). */
.modal-visualizar {
    max-width: 44rem;
}

.modal-visualizar-titulo {
    margin: 0 0 0.75rem;
    font-family: var(--fonte-marca);
}

.modal-visualizar-corpo {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 1rem;
}

/* Nota de rodapé: talhe de "cartão de citação" -- serifado, com aspas
   decorativas, borda de destaque à esquerda. Deliberadamente diferente
   do talhe do glossário, a pedido do usuário. */
.modal-nota {
    font-family: var(--fonte-leitura);
    border-left: 4px solid var(--acento);
    background: var(--acento-tinta);
}

.modal-nota-marca {
    font-size: 3rem;
    line-height: 1;
    color: var(--acento);
    opacity: 0.5;
    font-family: var(--fonte-leitura);
}

.modal-nota .modal-corpo {
    font-size: 1.05em;
    font-style: italic;
    white-space: pre-line;
}

.modal-nota .modal-corpo a {
    color: var(--acento);
    font-style: normal;
}

.modal-nota-legenda {
    margin-top: 0.6rem;
    font-size: 0.75em;
    font-style: normal;
    color: var(--texto-suave);
    word-break: break-all;
}

/* Revisão pendente pra futura edição (migrations/0041): talhe de "aviso
   editorial" -- deliberadamente distinto do cartão de citação da nota de
   rodapé (não é uma fonte, é um sinal de que aquele trecho está a caminho
   de melhor entendimento, ver preface1.adoc/hap-b1-2ed). --atencao (âmbar)
   em vez de --acento, sem aspas decorativas, com etiqueta de rótulo. */
.modal-revisao {
    font-family: var(--fonte-leitura);
    border-left: 4px solid var(--atencao);
    background: color-mix(in srgb, var(--atencao) 8%, var(--bg));
}

.modal-revisao-etiqueta {
    margin: 0 0 0.6rem;
    font-family: var(--fonte-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--atencao);
}

.modal-revisao .modal-corpo {
    font-size: 1.02em;
    white-space: pre-line;
}

.modal-revisao .modal-corpo a {
    color: var(--atencao);
}

/* Subtítulo com o nome completo do livro, abaixo do H1 de página (Resumo
   Profético, Cronologia) -- achado real (2026-09-17): "Resumo Profético —
   Hackeando as Profecias — Volume II" tudo junto no H1 ficava longo/
   quebrava mal. Mesmo tratamento usado depois pra "Timeline — hap-b234"
   (mesmo bug, slug cru + tudo numa linha só). */
.subtitulo-livro {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: -0.5rem 0 1.6rem;
}

/* Resumo Profético: três talhes visuais pro par "fato histórico /
   significado profético" (decisão do usuário, 2026-09-17 -- ver artifact
   "Opções de Resumo"). "a" (Numeração de Versículo) é o único disponível
   no plano Peregrino; "b" (Dossiê) e "c" (Selo) são exclusivos do
   Vigilante/owner (controle em #resumo-controle-estilo, js/pages/resumo.js). */

.resumo-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.resumo-controle-estilo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Achado real (2026-09-17): `hidden` sozinho não bastava aqui -- [hidden]
   e a classe têm a mesma especificidade (0,1,0), e a regra de autor acima
   (com display:flex) vence a [hidden]{display:none} do agente do
   usuário, então o controle continuava visível pro Peregrino mesmo com
   o atributo `hidden` certo no elemento. */
.resumo-controle-estilo[hidden] {
    display: none;
}

.resumo-controle-estilo-rotulo {
    font-size: 0.8rem;
    color: var(--texto-suave);
}

.resumo-estilo-botoes {
    display: flex;
    gap: 0.4rem;
}

.resumo-estilo-botoes button {
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
}

.resumo-estilo-botoes button[aria-pressed="true"] {
    border-color: var(--acento);
    color: var(--acento);
    font-weight: 600;
}

.modal-resumo {
    max-width: 38rem;
}

/* ---- Talhe A: Numeração de Versículo (convenção de Bíblia impressa) ---- */
.rp-a-cabecalho {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: baseline;
    margin-bottom: 0.9rem;
}

.rp-a-numero {
    font-family: var(--fonte-marca);
    font-size: 2rem;
    line-height: 1;
    color: var(--acento);
}

.rp-a-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 0.2rem;
}

.rp-a-titulo {
    font-family: var(--fonte-leitura);
    font-size: 1.2rem;
    margin: 0;
}

.rp-a-versos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.rp-a-verso {
    font: inherit;
    font-family: var(--fonte-leitura);
    font-variant-numeric: oldstyle-nums;
    font-size: 1.05rem;
    color: var(--texto-suave);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    padding: 0 0 0.2rem;
}

.rp-a-verso::before {
    content: "vv. ";
    font-family: var(--fonte-ui);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 0.15em;
}

.rp-a-verso[data-single="1"]::before {
    content: "v. ";
}

.rp-a-verso:hover {
    color: var(--acento);
}

.rp-a-capitulo + .rp-a-capitulo {
    margin-top: 1.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--borda);
}

.rp-a-card-ref {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 1rem;
}

.rp-a-card-ref strong {
    color: var(--acento);
    font-variant-numeric: oldstyle-nums;
    font-family: var(--fonte-leitura);
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
}

.rp-a-colunas {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 1.3rem;
}

.rp-a-regua {
    background: var(--borda);
}

.rp-a-colunas h4 {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 0.4rem;
}

.rp-a-colunas p {
    margin: 0;
    font-family: var(--fonte-leitura);
    line-height: 1.6;
}

@media (max-width: 560px) {
    .rp-a-colunas { grid-template-columns: 1fr; }
    .rp-a-regua { display: none; }
    .rp-a-colunas > div:nth-child(3) { padding-top: 0.8rem; border-top: 1px solid var(--borda); }
}

/* ---- Talhe B: Dossiê Forense (linguagem do próprio livro -- "historiografia forense") ---- */
.rp-b-faixa {
    border-left: 3px solid var(--acento);
    background: var(--bg-elevado);
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.9rem;
}

.rp-b-ref {
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--texto-suave);
    margin: 0 0 0.25rem;
}

.rp-b-titulo {
    font-family: var(--fonte-leitura);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0;
}

.rp-b-versos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.rp-b-verso {
    font: inherit;
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--texto);
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-left: 3px dashed var(--borda);
    padding: 0.35rem 0.75rem 0.35rem 0.9rem;
    cursor: pointer;
}

.rp-b-verso:hover {
    border-left-color: var(--acento);
}

.rp-b-capitulo + .rp-b-capitulo {
    margin-top: 1.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--borda);
}

.rp-b-card {
    border: 1px solid var(--borda);
}

.rp-b-card-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--bg-elevado);
    border-bottom: 1px solid var(--borda);
    padding: 0.55rem 0.9rem;
}

.rp-b-card-topo span {
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rp-b-card-topo strong {
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    color: var(--acento);
}

.rp-b-card-corpo {
    padding: 1.1rem 1.1rem 1.3rem;
}

.rp-b-secao {
    margin-bottom: 1rem;
}

.rp-b-secao:last-child {
    margin-bottom: 0;
}

.rp-b-secao h4 {
    font-family: var(--fonte-mono);
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--acento);
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rp-b-secao h4::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    background: var(--acento);
    display: inline-block;
}

.rp-b-secao p {
    margin: 0;
    font-family: var(--fonte-leitura);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---- Talhe C: Selo e Rubrica (evolui o acento único / regra fina já usados no card do livro) ---- */
.rp-c-eyebrow {
    font-family: var(--fonte-leitura);
    font-style: italic;
    color: var(--texto-suave);
    font-size: 0.88rem;
    margin: 0 0 0.25rem;
}

.rp-c-titulo-linha {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.rp-c-inicial {
    font-family: var(--fonte-marca);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--acento);
}

.rp-c-titulo {
    font-family: var(--fonte-marca);
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    margin: 0.25rem 0 0;
    line-height: 1.35;
}

.rp-c-regua {
    width: 2.5rem;
    height: 1px;
    background: var(--acento);
    margin: 0.85rem 0 1.2rem;
}

.rp-c-versos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.rp-c-verso {
    font: inherit;
    font-family: var(--fonte-marca);
    font-size: 0.8rem;
    cursor: pointer;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--texto-suave);
    border: 1.5px solid var(--acento);
    box-shadow: inset 0 0 0 2px var(--bg-elevado);
}

.rp-c-verso:hover {
    color: var(--acento);
}

.rp-c-capitulo + .rp-c-capitulo {
    margin-top: 1.9rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--borda);
}

.rp-c-card {
    text-align: center;
}

.rp-c-card-regua {
    width: 3.2rem;
    height: 1px;
    background: var(--acento);
    margin: 0 auto 0.9rem;
}

.rp-c-card-regua-fim {
    margin: 1.2rem auto 0;
}

.rp-c-card-ref {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 1.3rem;
}

.rp-c-card-ref strong {
    color: var(--acento);
}

.rp-c-card-corpo {
    text-align: left;
    max-width: 56ch;
    margin: 0 auto;
}

.rp-c-secao {
    margin-bottom: 1.1rem;
}

.rp-c-secao h4 {
    font-family: var(--fonte-marca);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: var(--acento);
    margin: 0 0 0.4rem;
    text-align: center;
}

.rp-c-secao p {
    margin: 0;
    font-family: var(--fonte-leitura);
    font-size: 1rem;
    line-height: 1.6;
}

.rp-c-secao-significado {
    background: var(--acento-tinta);
    padding: 0.9rem 1.1rem;
    border-radius: 4px;
}

/* --- Painel admin --- */

.admin-erro { color: var(--erro); }
.admin-sucesso { color: var(--sucesso); }

.admin-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 1rem;
}
.admin-tabela th, .admin-tabela td {
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--borda);
}
.admin-tabela th { color: var(--texto-suave); font-weight: 600; }

.admin-tabela-wrapper { overflow-x: auto; }

.admin-linha-usuario:hover { background: var(--bg-elevado); }

.admin-filtro-checkbox { display: flex !important; flex-direction: row !important; align-items: center; gap: 0.4rem !important; }
.admin-filtro-checkbox input { width: auto; }

/* --- Minha conta (self-service) --- */

.conta-secao {
    margin: 1.5rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borda);
}
.conta-secao:first-of-type { border-top: none; padding-top: 0; }
.conta-opcao { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.conta-opcao input { margin-top: 0.3rem; accent-color: var(--acento); }

.texto-erro { color: var(--erro); }
.texto-sucesso { color: var(--sucesso); }
.texto-suave { color: var(--texto-suave); font-size: 0.9em; }

.conta-ver-como-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.conta-ver-como-botoes button[aria-pressed="true"] {
    background: var(--acento);
    color: var(--bg);
    border-color: var(--acento);
}

.metricas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
    margin: 1rem 0;
}
.metrica-cartao {
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0.8rem;
    /* Achado real (2026-09-21): rótulo longo sem espaço em algum trecho
       (ex.: "capítulos+timeline+resumo+glossário", sem espaços entre os
       "+") não tinha onde quebrar linha e vazava pra fora da borda do
       card -- min-width:0 é necessário além de overflow-wrap porque o
       card é item de grid (repeat(auto-fit, minmax(160px, 1fr))); sem
       isso, o item de grid nunca encolhe abaixo do conteúdo intrínseco,
       ignorando o overflow-wrap do texto lá dentro. */
    min-width: 0;
    box-sizing: border-box;
}
.metrica-cartao .valor {
    font-family: var(--fonte-marca);
    font-size: 1.8rem;
    display: block;
}
.metrica-cartao .rotulo {
    color: var(--texto-suave);
    font-size: 0.8rem;
    overflow-wrap: break-word;
}

/* Cards clicáveis (2026-09-21) -- levam à aba correspondente com o
   filtro do card já aplicado (ver montarVisaoGeral/cartaoMetrica em
   js/pages/admin.js). Card <button> reseta o chrome nativo de botão pra
   herdar o mesmo talhe visual do <div> não-clicável, só acrescentando
   affordance de hover/foco. Nem todo card é clicável (ex.: "Conteúdo em
   rascunho" soma 4 tipos de conteúdo em 4 abas diferentes -- sem um
   destino único, fica só informativo, sem esse tratamento).
   */
button.metrica-cartao {
    display: block;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
button.metrica-cartao:hover, button.metrica-cartao:focus-visible {
    background: var(--bg);
    border-color: var(--acento);
}

.admin-config-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.admin-config-grupo h4 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.admin-config-lista { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.admin-config-lista li { padding: 0.15rem 0; }
.admin-preco-input { width: 6rem; }

.admin-abas {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-aba, #admin-sair, .admin-novo button, .admin-card button {
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.admin-aba:hover, #admin-sair:hover { border-color: var(--acento); color: var(--acento); }

.admin-aba.ativa {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--bg);
    font-weight: 600;
}

.admin-card {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.9rem;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-card header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-card label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

/* Aba "Revisões Pendentes" (migrations/0041) -- ver js/pages/admin.js. */
.admin-revisoes-ajuda {
    color: var(--texto-suave);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.admin-revisao-trecho {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--texto-suave);
    border-left: 2px solid var(--atencao);
    padding-left: 0.6rem;
    margin: 0;
}

.admin-card input[type="text"], .admin-card textarea, .admin-card select:not(.admin-visibilidade),
.admin-novo input, .admin-novo textarea, .admin-novo select {
    font: inherit;
    color: var(--texto);
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    resize: vertical;
    /* select mede sua própria caixa pelo texto da opção mais comprida (ex.:
       "Permanente (...)", 2026-09-22) -- sem isto, um <select> num
       .admin-card (flex-direction: column) estoura a largura do próprio
       quadro em vez de encolher/truncar. width:100% faz ele preencher o
       label (mesmo comportamento dos inputs de texto ao lado). */
    width: 100%;
    max-width: 100%;
}

/* Campo de texto compacto por padrão (ex.: motivo de revisão) com botão de
   expansão ao lado -- caixas grandes o tempo todo poluem a lista de cards;
   expande só quando o texto é longo o bastante pra precisar (citações). */
.admin-campo-expansivel {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.admin-campo-expansivel textarea {
    flex: 1;
    min-width: 0;
}

.admin-campo-expansivel textarea.expandido {
    min-height: 12rem;
}

.admin-expandir-campo {
    flex: none;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--bg-elevado);
    color: var(--texto-suave);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    cursor: pointer;
}

/* Prévia dinâmica do card de livro (migrations/0052) -- mesma
   .cartao-rosto da home, só que dentro do formulário/card do admin.
   Contida numa moldura discreta pra não parecer parte do formulário. */
.admin-livro-card-preview-rotulo {
    font-family: var(--fonte-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0.6rem 0 0.3rem;
}
.admin-livro-card-preview {
    border: 1px dashed var(--borda);
    border-radius: 8px;
    padding: 0.6rem;
    background: var(--bg);
}
.admin-livro-card-preview .cartao-rosto { padding: 1.4rem 1rem; }
.admin-livro-card-deteccao {
    font-size: 0.8rem;
    color: var(--texto-suave);
    margin: 0.2rem 0;
}

/* Campos de bandeira/etiqueta (migrations/0053) -- compartilhados entre
   Cards de Livro e Concordância, ver camposBandeiraHtml em
   js/pages/admin.js. Fieldset próprio pra separar visualmente do resto
   do formulário (são campos opcionais, "extras"). */
.admin-bandeira-campos {
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0.6rem 0.8rem 0.8rem;
    margin: 0.4rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.admin-bandeira-campos legend {
    font-family: var(--fonte-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    padding: 0 0.3rem;
}
.admin-bandeira-campos input[type="range"] { width: 100%; accent-color: var(--acento); }
.admin-bandeira-borda-campo { flex-direction: row !important; align-items: center; gap: 0.4rem !important; }
.admin-bandeira-borda-campo input[type="checkbox"] { width: auto; accent-color: var(--acento); }

/* Mesmo princípio de .admin-bandeira-borda-campo acima, só que
   genérico -- qualquer checkbox de admin-card/admin-novo cujo rótulo
   deve ficar do LADO (não em cima, que é o padrão de .admin-card label
   pensado pra input de texto/select). Usado por "leitura_habilitada"
   (2026-09-21, livro-cards e Concordância). */
.admin-checkbox-campo { flex-direction: row !important; align-items: center; gap: 0.4rem !important; }
.admin-checkbox-campo input[type="checkbox"] { width: auto; accent-color: var(--acento); }

.admin-bandeira-preview-rotulo {
    font-family: var(--fonte-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0.4rem 0 0.3rem;
}
.admin-bandeira-preview {
    border: 1px dashed var(--borda);
    border-radius: 8px;
    padding: 0.8rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    position: relative;
    overflow: visible;
}
.admin-bandeira-preview-vazia { font-size: 0.78rem; color: var(--texto-suave); }
/* Achado real (2026-09-20): a coluna de Concordância de verdade
   (.home-principal) tem só 170–210px de largura -- reproduzir essa
   largura aqui é o que faz a prévia parecer com o resultado final de
   verdade (largura errada escondia o problema de bandeira grande
   demais pra linha, ver js/bandeira.js). */
.admin-bandeira-preview.concordancia { max-width: 210px; justify-content: flex-start; }
.admin-bandeira-preview-linha { width: 100%; }

.admin-visibilidade {
    margin-left: auto;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--bg-elevado);
    color: var(--texto);
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

.admin-acoes {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.admin-excluir { border-color: var(--erro); color: var(--erro); }

.admin-status {
    font-size: 0.8rem;
    color: var(--texto-suave);
}

.admin-novo {
    border: 1px dashed var(--borda);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ==========================================================================
   PORTÃO DE ACESSO -- mesmo padrão do uaulas/Roderick: um único overlay de
   tela cheia concentra login/cadastro/2FA/escolha de plano (não são rotas
   separadas), cobrindo o app até usuário autenticado + plano escolhido
   serem confirmados. Ver js/gate.js.
   ========================================================================== */

.gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 10vh 1rem 3rem;
    background: var(--bg);
}

.gate-overlay[hidden] { display: none; }

/* Card central genérico -- mesmo talhe visual do .gate-card, para páginas
   de conteúdo mínimo (confirmação de e-mail, e outras semelhantes que
   ainda vierem) que hoje ficam cruas dentro do <main> padrão. */
.pagina-card {
    max-width: 420px;
    margin: 3.5rem auto;
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.pagina-card-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.pagina-card h1 {
    font-family: var(--fonte-marca);
    font-size: 1.3rem;
    margin: 0.75rem 0 0.5rem;
}

.pagina-card p {
    color: var(--texto-suave);
    margin: 0;
}

.pagina-card p.sucesso { color: var(--sucesso); }
.pagina-card p.erro { color: var(--erro); }

.botao-primario {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    background: var(--acento);
    color: var(--bg);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Mesmo motivo de .gate-area label[hidden] mais abaixo: "display:
   inline-block" acima sobrepõe o [hidden] nativo do navegador -- sem
   isto, um botão/link .botao-primario escondido via JS (ex.: "Concluir
   pagamento" em views/conta.html depois de cancelar o pendente) continua
   visível e clicável (só que sem href/ação nenhuma) até um reload que
   nem sempre recalcula o estado. Bug real reportado pelo usuário
   (2026-09-16). */
.botao-primario[hidden] { display: none; }

.leitura-quiz-cta {
    margin: 2rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--bg-elevado);
    text-align: center;
}
.leitura-quiz-cta p { margin: 0 0 0.75rem; }
.leitura-quiz-cta[hidden] { display: none; }

.pagina-card .botao-primario { margin-top: 1.25rem; }

.link-secundario {
    color: var(--texto-suave);
    font-size: 0.9rem;
    border-bottom: 1px dotted var(--texto-suave);
    text-decoration: none;
}

.link-secundario:hover { color: var(--acento); border-color: var(--acento); }

/* "Voltar" no topo das páginas "distais" (leitura/timeline/resumo) --
   pedido do usuário (2026-09-17), ver voltarOuInicio em js/router.js.
   Mesmo talhe de botão secundário já usado em #leitura-anterior/-proximo
   (herda o chrome padrão de <button> do navegador, .link-secundario só
   veste cor/sublinhado por cima) -- só precisa de espaço abaixo aqui
   porque fica sozinho, fora de uma nav em linha. */
.botao-voltar {
    display: inline-block;
    margin-bottom: 1rem;
}

/* Página Fontes (pedido do usuário, 2026-09-17): ficha completa de cada
   fonte citada no acervo + citações reais aninhadas por livro/capítulo. */
.fontes-aviso {
    background: color-mix(in srgb, var(--atencao) 12%, var(--bg));
    border: 1px solid var(--atencao);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin: 1rem 0 1.5rem;
}

.fontes-aviso p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.fontes-lista {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fontes-card {
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 1.3rem 1.4rem;
    background: var(--bg-elevado);
}

.fontes-card-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.fontes-card-cabecalho h2 {
    font-family: var(--fonte-leitura);
    font-size: 1.15rem;
    margin: 0;
}

.fontes-tipo {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texto-suave);
    border: 1px solid var(--borda);
    border-radius: 20px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.fontes-campo {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 0.5rem;
}

.fontes-campo:last-of-type { margin-bottom: 0.8rem; }

.fontes-campo strong {
    color: var(--texto-suave);
    font-weight: 600;
}

.fontes-citacoes {
    margin-top: 0.8rem;
    border-top: 1px solid var(--borda);
    padding-top: 0.8rem;
}

.fontes-citacoes summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--acento);
    font-weight: 600;
}

.fontes-citacao-livro {
    margin-top: 1rem;
}

.fontes-citacao-livro-titulo {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 0.5rem;
}

.fontes-citacao-capitulo {
    margin-bottom: 0.9rem;
}

.fontes-citacao-capitulo-titulo {
    font-family: var(--fonte-leitura);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
}

.fontes-citacao-item {
    margin: 0 0 0.6rem 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--acento);
    background: var(--bg);
    font-size: 0.88rem;
    line-height: 1.55;
}

.fontes-citacao-item p { margin: 0; }

.fontes-citacao-contexto {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 0.3rem;
}

/* Página de resultados de pesquisa (pedido do usuário, 2026-09-18). */
.pesquisa-total {
    font-size: 0.85rem;
    color: var(--texto-suave);
    margin: 0 0 1.3rem;
}

.pesquisa-secao {
    margin-bottom: 1.8rem;
}

.pesquisa-secao h2 {
    font-family: var(--fonte-marca);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--acento);
    margin: 0 0 0.7rem;
}

.pesquisa-resultado {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.7rem;
    background: var(--bg-elevado);
}

a.pesquisa-resultado:hover {
    border-color: var(--acento);
}

.pesquisa-resultado-sem-link {
    cursor: default;
}

.pesquisa-resultado-contexto {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 0.35rem;
}

.pesquisa-resultado-trecho {
    font-family: var(--fonte-leitura);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.pesquisa-resultado-trecho mark {
    background: var(--acento-tinta);
    color: var(--acento);
    font-weight: 600;
    border-radius: 2px;
    padding: 0 0.1em;
}

/* Marca o ponto exato do termo dentro do bloco/nó de destino ao chegar
   vindo de um resultado de pesquisa (js/destaque-pesquisa.js) -- mesma
   paleta do <mark> da própria lista de resultados, acima. */
mark.destaque-pesquisa {
    background: var(--acento-tinta);
    color: var(--acento);
    font-weight: 600;
    border-radius: 2px;
    padding: 0 0.15em;
}

.gate-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    transition: max-width 0.15s ease;
}

/* Telas de escolha de plano/pagamento têm versão própria, mais larga --
   os cartões (.planos-grade/.plano-cartao) precisam de espaço pra ficar
   em colunas separadas no desktop, o que os 380px do card de
   login/cadastro nunca comportariam. Alternado via JS em mostrarArea()
   (js/gate.js), não fixo -- login/cadastro/2FA continuam estreitos e
   centralizados como sempre foram. */
.gate-card.gate-card-largo {
    max-width: 720px;
}
/* 3º plano visível (2026-09-30): três cartões lado a lado no desktop. */
.gate-card.gate-card-largo:has(#gate-plano-hacker:not([hidden])) {
    max-width: 1060px;
}
.plano-cartao-aviso {
    font-size: 0.85rem;
    color: var(--texto-suave, inherit);
    font-style: italic;
}

.gate-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

.gate-header .icone-tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.gate-header span {
    font-family: var(--fonte-marca);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--acento);
}

.gate-tagline {
    font-size: 0.72rem;
    color: var(--texto-suave);
    margin: -0.1rem 0 0.6rem;
    letter-spacing: 0.02em;
}

.gate-titulo {
    font-family: var(--fonte-marca);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--acento);
    letter-spacing: 0.02em;
    margin: 0.8rem 0 0;
}

.gate-acao {
    font-size: 0.85rem;
    color: var(--texto-suave);
    margin: 0.3rem 0 1.4rem;
}

.gate-area { display: flex; flex-direction: column; gap: 0.9rem; }
.gate-area[hidden] { display: none; }

.gate-area label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--texto-suave);
}
/* Mesmo motivo da regra .gate-area[hidden] acima: "display: flex" em
   .gate-area label sobrepõe o [hidden] nativo do navegador -- sem isto,
   o checkbox de plano de teste (só pra admin, escondido/mostrado via JS
   com o atributo hidden) ficava visível pra qualquer usuário. Achado
   real (2026-09-15): usuário comum viu o checkbox de teste por causa
   exatamente disso. */
.gate-area label[hidden] { display: none; }

.gate-area input[type="text"], .gate-area input[type="email"], .gate-area input[type="password"] {
    font: inherit;
    color: var(--texto);
    background: var(--bg);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    width: 100%;
}

.gate-area label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
}

.gate-area button[type="submit"] {
    border: 1px solid var(--acento);
    background: var(--acento);
    color: var(--bg);
    border-radius: 6px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.gate-area button[type="submit"]:hover { opacity: 0.92; }

.gate-links {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
}

.gate-links a, .gate-links button {
    color: var(--texto-suave);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.gate-links a:hover, .gate-links button:hover { color: var(--acento); }

.gate-mensagem { font-size: 0.85rem; color: var(--erro); }
.gate-mensagem.sucesso { color: var(--sucesso); }

.input-senha-wrapper { position: relative; display: block; }

.input-senha-wrapper input { padding-right: 2.4rem; }

.btn-toggle-senha {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    color: var(--texto-suave);
    display: flex;
}

.btn-toggle-senha:hover { color: var(--acento); }

/* Plano "em breve" (Fase 69, js/gate.js): selo ao lado do nome = estado da
   VENDA; o bloco com "aulas em preparação" e o "Avise-me" ocupa o lugar dos
   botões de assinar. Sai no lançamento do Hacker. */
.plano-selo-em-breve {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--acento);
    border-radius: 999px;
    color: var(--acento);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.plano-em-breve { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; }
.plano-em-breve[hidden] { display: none; }
.plano-cartao .plano-em-breve p { flex-grow: 0; }
.plano-cartao .plano-em-breve-preco { flex-grow: 0; font-weight: 600; color: var(--texto); font-size: 0.95rem; }
.plano-em-breve-preco[hidden] { display: none; }
.plano-em-breve-estado { color: var(--texto-suave); font-size: 0.82rem; }
.plano-em-breve-novidades { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.8rem; color: var(--texto-suave); cursor: pointer; }
.plano-em-breve-novidades input { margin-top: 0.15rem; }

/* Aviso de pagamento pendente na área de conta (views/conta.html,
   js/pages/conta.js) -- cor de atenção. (O antigo .gate-aviso-construcao,
   de onde este visual veio, saiu no lançamento de 2026-09-23.) */
.conta-aviso-pendente {
    background: color-mix(in srgb, var(--atencao) 14%, var(--bg));
    border: 1px solid var(--atencao);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    color: var(--texto);
    margin: 0.5rem 0;
}

/* Cartões de plano/pagamento -- mesmo padrão do uaulas
   (.planos-grade/.plano-cartao, ver css/style.css lá): cartões lado a
   lado no desktop (colunas próprias, uma por plano/provedor), empilhados
   no mobile, um deles destacado. Compartilhado pelas duas telas
   (#gate-area-plano e #gate-area-pagamento) -- um card novo (novo plano,
   novo provedor) só precisa de uma nova <section class="plano-cartao">,
   sem mexer em CSS.*/
.planos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
    align-items: start;
}

.plano-cartao {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    background: var(--bg-elevado);
}

.plano-cartao-destaque {
    border-color: var(--acento);
    border-width: 2px;
}

.plano-cartao h3 {
    margin: 0;
    font-family: var(--fonte-marca);
    color: var(--texto);
}

.plano-cartao p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
    flex-grow: 1;
}

/* Lista de recursos do plano em destaque (Vigilante) -- cada item do
   estudo ativo (grifo/anotações, quiz, revisão espaçada, ver Fases
   18-21 do PLANO.md) precisa ficar nomeado, não resumido numa frase
   só -- senão o card não comunica o que a assinatura de fato entrega. */
.plano-cartao-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plano-cartao-lista li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--texto);
}

/* O diferencial do Vigilante (2026-09-29): bloco próprio abaixo da lista. */
.plano-cartao-diferencial {
    border: 1px solid var(--acento);
    border-left-width: 4px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--acento) 7%, transparent);
    padding: 0.6rem 0.75rem;
}
.plano-cartao-diferencial span {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: 0.2rem;
}
.plano-cartao .plano-cartao-diferencial p { color: var(--texto); flex-grow: 0; }

.plano-cartao-lista svg {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 0.15rem;
    color: var(--sucesso);
}

.plano-cartao button {
    border: 1px solid var(--acento);
    background: var(--acento);
    color: var(--bg);
    border-radius: 6px;
    padding: 0.55rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

.plano-cartao button:disabled {
    background: none;
    color: var(--texto-suave);
    border-color: var(--borda);
    cursor: not-allowed;
}

/* 2 formas de pagar o mesmo plano (mensal/anual, 2026-09-21) -- a 2ª opção
   não deve competir visualmente com a 1ª (2 CTAs sólidos empilhados
   parecem 2 planos diferentes, não 2 formas do mesmo plano). */
.plano-cartao button.botao-secundario {
    background: none;
    color: var(--acento);
}

/* --- Leitura de capítulo (Fase 8) --- */
/* MVP: só "clássica sem recursos" (coluna única, texto justificado, sem
   miniatura/motivo na margem) -- ver decisão de layout no PLANO.md. A
   escolha clássica-com-recursos/zigue-zague-com-recursos (exclusiva do
   plano pago) depende do acervo de motivos ainda não curado. */

.leitura-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}

.leitura-nav select {
    flex: 1 1 auto;
    min-width: 10rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    font: inherit;
}

.leitura-nav button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Link fixo "Ver Índice" -- pedido do usuário (2026-09-17): o seletor de
   capítulo do topo some de vista ao rolar um capítulo longo; esta aba
   fica alcançável em qualquer altura de rolagem, mesmo princípio do
   #leitura-topo (fixed, independente do fluxo da coluna centralizada). */
.leitura-btn-indice {
    position: fixed;
    left: 0;
    top: 45%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left top;
    z-index: 10;
    border: 1px solid var(--borda);
    border-bottom: none;
    background: var(--bg-elevado);
    color: var(--texto);
    font: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    padding: 0.45rem 1rem;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.leitura-btn-indice[hidden] { display: none; }

.leitura-btn-indice:hover {
    color: var(--acento);
    border-color: var(--acento);
}

/* Achado real do usuário (2026-09-18, mobile): a aba fica na margem vazia
   fora da coluna de leitura (720px) só em telas largas. Em telas estreitas
   a coluna ocupa quase toda a largura, então a aba vertical-centralizada
   passava por cima do próprio texto. Reposicionada pro canto inferior
   esquerdo, espelhando o .btn-topo (inferior direito) das mesmas páginas
   -- os dois cabem lado a lado sem sobrepor nada. */
@media (max-width: 780px) {
    .leitura-btn-indice {
        left: 1.5rem;
        top: auto;
        bottom: 1.5rem;
        transform: none;
        transform-origin: initial;
        border: 1px solid var(--borda);
        border-radius: 8px;
    }
}

/* Painel do índice -- <dialog> ancorado na borda esquerda da tela (em vez
   de centralizado como os demais .modal), altura cheia, rolagem própria
   pra livros com muitos capítulos. Non-modal (.show(), não .showModal())
   -- pedido do usuário (2026-09-17): dá pra rolar a página com o painel
   aberto, pra ver ao vivo a seção atual em destaque (ver atualizarSecaoAtiva
   em js/pages/leitura.js). Por não entrar na "top layer" do modal, precisa
   de z-index explícito (maior que a aba fixa, z-index:10). */
dialog.leitura-indice {
    position: fixed;
    inset: 0 auto 0 0;
    margin: 0;
    height: 100vh;
    max-height: 100vh;
    width: 20rem;
    max-width: 85vw;
    border-radius: 0 10px 10px 0;
    padding: 0;
    z-index: 20;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
}

/* [open] explícito -- achado real (2026-09-17): "display: flex" sem essa
   qualificação tem a mesma especificidade de "dialog:not([open]) {
   display: none }" do agente do usuário, então o painel ficava visível
   mesmo fechado (mesma causa-raiz do bug já corrigido em
   .resumo-controle-estilo[hidden], ver Fase 9). */
dialog.leitura-indice[open] {
    display: flex;
    flex-direction: column;
}

.leitura-indice-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--borda);
    flex-shrink: 0;
}

.leitura-indice-cabecalho h2 {
    font-family: var(--fonte-marca);
    font-size: 1.05rem;
    margin: 0;
}

.leitura-indice-fechar {
    margin: 0;
    border: none;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    color: var(--texto-suave);
}

.leitura-indice-lista {
    overflow-y: auto;
    overscroll-behavior: contain; /* achado real: rolagem do painel "vazava" pra página por trás ao chegar no fim da lista */
    padding: 0.6rem 0;
}

.leitura-indice-item {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.7rem 1.3rem;
    text-decoration: none;
    color: var(--texto);
    border-left: 3px solid transparent;
}

.leitura-indice-item:hover {
    background: var(--bg-elevado);
}

.leitura-indice-numero {
    font-family: var(--fonte-marca);
    font-size: 0.8rem;
    color: var(--texto-suave);
    flex-shrink: 0;
}

.leitura-indice-titulo {
    font-family: var(--fonte-leitura);
    font-size: 0.98rem;
    line-height: 1.35;
}

.leitura-indice-item-atual {
    border-left-color: var(--acento);
    background: var(--acento-tinta);
}

.leitura-indice-item-atual .leitura-indice-numero,
.leitura-indice-item-atual .leitura-indice-titulo {
    color: var(--acento);
    font-weight: 600;
}

/* "Scrollspy" do índice da Cronologia (js/pages/timeline.js) -- marco de
   topo em que o leitor está agora, ao vivo, mesmo princípio do
   .leitura-indice-secao-ativa da leitura, mas no nível de item (a
   cronologia é uma árvore só, sem "capítulo" pra separar um "atual" fixo
   de uma seção "ativa" -- aqui só existe o marco ativo). */
.leitura-indice-item.leitura-indice-item-ativo {
    border-left-color: var(--acento);
    background: var(--acento-tinta);
}

.leitura-indice-item-ativo .leitura-indice-titulo {
    color: var(--acento);
    font-weight: 600;
}

/* Item do índice da Cronologia -- pedido do usuário (2026-09-17): data e
   nome do evento em linhas separadas, tamanhos diferentes (a base
   .leitura-indice-item é `align-items: baseline` numa linha só, pensada
   pro par número+título curto da leitura -- aqui os dois textos podem ser
   longos, não cabem lado a lado). */
.leitura-indice-item-cronologia {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.leitura-indice-data {
    font-family: var(--fonte-marca);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.leitura-indice-item-ativo .leitura-indice-data {
    color: var(--acento);
}

.leitura-indice-capitulo + .leitura-indice-capitulo {
    margin-top: 0.3rem;
}

/* Rótulo de grupo dentro do índice -- usado pela página Fontes
   (js/pages/fontes.js) pra separar por tipo (fonte antiga/autor
   moderno/site/instituição), já que ali não há "capítulo" de verdade. */
.leitura-indice-grupo-titulo {
    font-family: var(--fonte-marca);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--acento);
    margin: 0;
    padding: 0.6rem 1.3rem 0.3rem;
}

/* Seção/subseção (cabeçalho nivel 3/4/5 do capítulo, ver renderizarBloco
   em js/pages/leitura.js) -- indentação cresce com o nível, achado real
   do usuário (2026-09-17): índice só mostrava o capítulo, sem a
   estrutura interna dele. */
.leitura-indice-secoes {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
}

.leitura-indice-secao a {
    display: block;
    padding: 0.35rem 1.3rem 0.35rem 2.3rem;
    font-family: var(--fonte-leitura);
    font-size: 0.86rem;
    color: var(--texto-suave);
    text-decoration: none;
}

.leitura-indice-secao a:hover {
    background: var(--bg-elevado);
    color: var(--texto);
}

.leitura-indice-secao-nivel-4 a { padding-left: 3rem; font-size: 0.82rem; }
.leitura-indice-secao-nivel-5 a { padding-left: 3.7rem; font-size: 0.8rem; }

/* "Scrollspy" -- pedido do usuário (2026-09-17): a seção/subseção em que o
   leitor está agora se destaca ao vivo conforme ele rola (ver
   atualizarSecaoAtiva em js/pages/leitura.js), não só o capítulo inteiro. */
.leitura-indice-secao a.leitura-indice-secao-ativa {
    color: var(--acento);
    font-weight: 600;
    background: var(--acento-tinta);
    border-left: 2px solid var(--acento);
    padding-left: calc(2.3rem - 2px);
}

.leitura-indice-secao-nivel-4 a.leitura-indice-secao-ativa { padding-left: calc(3rem - 2px); }
.leitura-indice-secao-nivel-5 a.leitura-indice-secao-ativa { padding-left: calc(3.7rem - 2px); }

.leitura-corpo {
    font-family: var(--fonte-leitura);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 42rem;
    margin: 0 auto;
}

.leitura-bloco { margin: 0 0 1.25rem; }

.leitura-paragrafo p {
    margin: 0 0 1.1rem;
    text-align: justify;
    hyphens: auto;
}
.leitura-paragrafo p:last-child { margin-bottom: 0; }

.leitura-cabecalho {
    font-family: var(--fonte-leitura);
    color: var(--acento);
    margin: 2rem 0 1rem;
}

.leitura-sidebar {
    background: var(--bg-elevado);
    border-left: 3px solid var(--acento);
    border-radius: 4px 10px 10px 4px;
    padding: 1.1rem 1.4rem;
    overflow-x: auto; /* tabela larga (ex.: "Contagem Retroativa dos 1.150 dias", 5 colunas x 65 linhas) não estoura a coluna em telas estreitas */
}
.leitura-sidebar-titulo {
    font-family: var(--fonte-leitura);
    font-size: 1.05rem;
    color: var(--acento);
    margin: 0 0 0.6rem;
}
.leitura-sidebar p {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    text-align: justify;
}
.leitura-sidebar p:last-child { margin-bottom: 0; }
.leitura-sidebar figure.sidebar-imagem {
    margin: 0.9rem 0;
    text-align: center;
}
.leitura-sidebar figure.sidebar-imagem img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--borda);
}
.leitura-sidebar figure.sidebar-imagem figcaption {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--texto-suave);
}

.leitura-imagem {
    text-align: center;
    margin: 0 0 1.5rem;
}
.leitura-imagem img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--borda);
}
.leitura-imagem figcaption {
    margin-top: 0.5rem;
    font-size: 0.85em;
    font-style: italic;
    color: var(--texto-suave);
}

.leitura-lista ol, .leitura-lista ul { padding-left: 1.4rem; }
.leitura-lista li { margin-bottom: 0.6rem; }
.leitura-lista ol ol, .leitura-lista ul ul, .leitura-lista ol ul, .leitura-lista ul ol {
    margin-top: 0.4rem;
}

/* Rótulo de lista de descrição AsciiDoc ("Termo::") -- ver
   scripts/importar-capitulos.mjs (matchTermoLista). Sem estilo extra além
   do negrito já embutido no HTML -- é só um parágrafo comum que antecede
   a lista de verdade (bloco "lista" seguinte). */
.leitura-paragrafo p.leitura-termo-lista {
    margin: 0;
}

/* Tabela real do AsciiDoc (|===) -- ver scripts/importar-capitulos.mjs.
   Reaproveita o mesmo bloco "lista" no banco (corpo já vem como <table>
   de verdade quando é o caso), só estiliza aqui. Mesmas regras valem pra
   tabela DENTRO de sidebar (`.leitura-sidebar table`, sem o wrapper
   `.leitura-lista` -- achado real, 2026-09-17: tabela em sidebar aparecia
   sem nenhuma borda/fundo de cabeçalho, só o <table> cru do navegador). */
.leitura-bloco.leitura-lista { overflow-x: auto; } /* tabela larga não estoura a coluna de leitura em telas estreitas */
.leitura-lista table,
.leitura-sidebar table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
    font-size: 0.92rem;
}
.leitura-lista table caption,
.leitura-sidebar table caption {
    font-family: var(--fonte-leitura);
    font-style: italic;
    color: var(--texto-suave);
    text-align: left;
    margin-bottom: 0.5rem;
    caption-side: top;
}
.leitura-lista table th,
.leitura-lista table td,
.leitura-sidebar table th,
.leitura-sidebar table td {
    border: 1px solid var(--borda);
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
}
.leitura-lista table th,
.leitura-sidebar table th {
    background: var(--bg-elevado);
    font-weight: 600;
}
.leitura-lista table img.leitura-imagem-inline,
.leitura-sidebar table img.leitura-imagem-inline {
    max-width: 100%;
    max-height: 140px;
    display: block;
    border-radius: 4px;
}
.leitura-imagem-inline {
    max-height: 1.4em;
    vertical-align: middle;
    border-radius: 2px;
}

/* Marcador de nota de rodapé -- mesmo princípio do .botao-nota da timeline,
   só que inline (o marcador já é o número original do livro, <sup>). */
.leitura-corpo .nota {
    cursor: pointer;
    color: var(--acento);
    font-weight: 700;
    padding: 0 0.1em;
}
.leitura-corpo .nota:hover { text-decoration: underline; }

/* Trecho pendente de revisão em edição futura (migrations/0041) --
   destaque DISCRETO de propósito (pedido do usuário 2026-09-19): sem
   preenchimento de fundo nem número visível, só um sublinhado pontilhado
   na cor de atenção -- reconhecível a quem procura, mas não grita "erro"
   pra quem só está lendo. <mark> em vez de <sup>: marca o trecho inteiro,
   não um ponto. */
.leitura-corpo .revisao-trecho {
    cursor: pointer;
    background: none;
    color: inherit;
    border-bottom: 2px dotted var(--atencao);
    text-decoration: none;
}
.leitura-corpo .revisao-trecho:hover {
    background: color-mix(in srgb, var(--atencao) 12%, transparent);
}

/* "---" do AsciiDoc-fonte (linha divisória, ex.: separa prosa de uma
   tabela em ch4-vf.adoc/c1-vf.adoc) -- <hr> de verdade em vez do estilo
   cinza genérico do navegador, pra combinar com o resto do tema. */
.leitura-corpo hr {
    border: none;
    border-top: 1px solid var(--borda);
    margin: 1.5rem auto;
    width: 40%;
}

/* [.scripture]#texto# do AsciiDoc-fonte (citação bíblica direta) -- estilo
   fiel ao .yml do tema real (hap-b234-theme.yml/hap-b5-theme.yml, chave
   `scripture:`): itálico, linha um pouco mais compacta. Sem trocar a
   família da fonte -- já é serifada (--fonte-leitura), equivalente à Noto
   Serif itálica do PDF sem precisar carregar mais uma fonte só pra isto. */
.leitura-escritura {
    font-style: italic;
    line-height: 1.35;
}

/* latexmath:[...]/stem:[...] convertido pra unicode simples (÷/×), sem
   MathJax/KaTeX -- só 5 ocorrências no acervo, aritmética trivial não
   justifica a biblioteca. Monoespaçada só pra destacar a fórmula do texto
   ao redor, não é código de verdade. */
.leitura-formula {
    font-family: monospace;
    background: var(--bg-elevado);
    padding: 0.05em 0.35em;
    border-radius: 3px;
}

/* Grifo + anotação pessoal (plano Vigilante, migrations/0034) -- Opção A
   escolhida num canvas de design (2026-09-18): grifo de cor + ícone
   pequeno colado no fim, clicável pra reabrir/editar/excluir. Ver
   js/anotacoes.js. */
.leitura-anotacao-grifo {
    background: rgba(240, 193, 75, 0.45);
    color: inherit;
}

/* Um grifo pode ter vários <mark> em sequência quando cruza negrito/
   itálico/termo de glossário no meio (ver envolverIntervalo em
   js/anotacoes.js) -- arredondamento/padding só nas pontas do grifo
   inteiro, senão cada pedaço fica com uma emenda visível nas bordas
   internas entre um pedaço e o outro. */
.leitura-anotacao-grifo-inicio {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    padding-left: 1px;
}

.leitura-anotacao-grifo-fim {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    padding-right: 1px;
}

.leitura-anotacao-marcador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: var(--acento);
    color: var(--bg);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Botão flutuante que aparece perto da seleção de texto -- posicionado via
   JS (top/left calculados a partir de getBoundingClientRect() da seleção +
   scroll da página, não fixed: precisa acompanhar o texto ao rolar). */
.leitura-anotacao-botao-grifar {
    position: absolute;
    z-index: 15;
    background: var(--acento);
    color: var(--bg);
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.leitura-anotacao-botao-grifar[hidden] { display: none; }

.leitura-anotacao-popover {
    position: absolute;
    z-index: 16;
    width: min(320px, 80vw);
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 0.9rem 1rem;
}

.leitura-anotacao-popover[hidden] { display: none; }

.leitura-anotacao-popover-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--fonte-marca);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: 0.5rem;
}

.leitura-anotacao-popover-cabecalho button {
    border: none;
    background: none;
    font-size: 1rem;
    color: var(--texto-suave);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.leitura-anotacao-trecho {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--texto-suave);
    border-left: 2px solid var(--borda);
    padding-left: 0.6rem;
    margin: 0 0 0.6rem;
}

#leitura-anotacao-texto {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

#leitura-anotacao-campo {
    width: 100%;
    min-height: 5rem;
    box-sizing: border-box;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--texto);
    background: var(--bg);
    resize: vertical;
    margin: 0 0 0.6rem;
}

.leitura-anotacao-popover-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.leitura-anotacao-acao-fraca {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.85rem;
    color: var(--texto-suave);
    cursor: pointer;
    font-family: inherit;
    margin-right: auto;
}

.leitura-anotacao-acao-forte {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--acento);
    cursor: pointer;
    font-family: inherit;
}

.leitura-anotacao-acao-fraca[hidden],
.leitura-anotacao-acao-forte[hidden] { display: none; }

/* Marcação de revisão pendente (admin/owner, "modo marcação" -- ver
   migrations/0041_conteudo_revisoes.sql) -- mesmo talhe do botão/popover
   de grifo pessoal acima, só na cor de atenção (âmbar) em vez de acento,
   pra não confundir as duas ferramentas por cor. */
.leitura-revisao-botao-marcar {
    position: absolute;
    z-index: 15;
    background: var(--atencao);
    color: var(--bg);
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.leitura-revisao-botao-marcar[hidden] { display: none; }

.leitura-revisao-popover {
    position: absolute;
    z-index: 16;
    width: min(320px, 80vw);
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 0.9rem 1rem;
}

.leitura-revisao-popover[hidden] { display: none; }

.leitura-revisao-popover-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--fonte-marca);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--atencao);
    margin-bottom: 0.5rem;
}

.leitura-revisao-popover-cabecalho button {
    border: none;
    background: none;
    font-size: 1rem;
    color: var(--texto-suave);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.leitura-revisao-popover-trecho {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--texto-suave);
    border-left: 2px solid var(--atencao);
    padding-left: 0.6rem;
    margin: 0 0 0.6rem;
}

#leitura-revisao-popover-campo {
    width: 100%;
    min-height: 5rem;
    box-sizing: border-box;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--texto);
    background: var(--bg);
    resize: vertical;
    margin: 0 0 0.6rem;
}

/* Achado real (2026-09-20): a regra acima (seletor de ID) tem mais
   especificidade que `.admin-campo-expansivel textarea.expandido` (só
   classe) -- o "min-height: 5rem" ganhava sempre, botão de expandir
   trocava o ícone mas a caixa nunca crescia. Precisa de ID+classe aqui
   pra vencer de verdade. */
#leitura-revisao-popover-campo.expandido {
    min-height: 12rem;
}

.leitura-revisao-popover-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

/* Página "Minhas Anotações" (js/pages/minhas-anotacoes.js) -- lista
   central agrupada por livro > capítulo, reaproveita os botões
   .leitura-anotacao-acao-forte/fraca do popover de leitura. */
.anotacoes-livro { margin-top: 2rem; }
.anotacoes-livro:first-child { margin-top: 1rem; }

.anotacoes-livro > h2 {
    font-family: var(--fonte-marca);
    font-size: 1.2rem;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 0.4rem;
}

.anotacoes-capitulo { margin-top: 1.2rem; }

.anotacoes-capitulo > h3 {
    font-size: 1rem;
    margin: 0 0 0.6rem;
}
.anotacoes-capitulo > h3 a { color: var(--texto); }

.anotacao-item {
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.7rem;
}

.anotacao-item-trecho {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--texto-suave);
    border-left: 2px solid var(--borda);
    padding-left: 0.6rem;
    margin: 0 0 0.5rem;
}

.anotacao-item-nota { margin: 0 0 0.5rem; }

.anotacao-item-campo {
    width: 100%;
    min-height: 4.5rem;
    box-sizing: border-box;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--texto);
    background: var(--bg);
    resize: vertical;
    margin: 0 0 0.5rem;
}

.anotacao-item-nota[hidden],
.anotacao-item-campo[hidden] { display: none; }

.anotacao-item-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.anotacao-item-data {
    font-size: 0.75rem;
    color: var(--texto-suave);
}

.anotacao-item-acoes {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.anotacao-item-ver {
    font-size: 0.85rem;
    color: var(--acento);
    text-decoration: none;
}
.anotacao-item-ver:hover { text-decoration: underline; }

/* Marca de progresso ("capítulo concluído") -- selects/índice de leitura,
   ver js/progresso.js. */
.progresso-concluido::after {
    content: " ✓";
    color: var(--sucesso, var(--acento));
}

/* Quiz do capítulo (plano Vigilante, Fase 20) -- ver js/pages/quiz.js. */
.quiz-mensagem { margin-top: 1rem; }
.quiz-progresso {
    font-size: 0.85rem;
    color: var(--texto-suave);
    margin-bottom: 0.5rem;
}
.quiz-enunciado {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
/* Livro/capítulo de origem de cada pergunta -- só usado em "Avalie Seu
   Progresso" (js/pages/revisao.js), onde as perguntas vêm misturadas de
   capítulos/livros diferentes; o quiz de capítulo (js/pages/quiz.js) não
   precisa, o contexto já é fixo e mostrado no topo da página inteira. */
.quiz-origem {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--acento);
    margin: -0.3rem 0 0.6rem;
}
.quiz-alternativas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.quiz-alternativa {
    text-align: left;
    padding: 0.65rem 1rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--bg);
    color: var(--texto);
    cursor: pointer;
    font-size: 0.95rem;
}
.quiz-alternativa:hover { background: var(--bg-elevado); }
.quiz-alternativa-selecionada { border-color: var(--acento); border-width: 2px; }
.quiz-alternativa-correta { border-color: var(--sucesso); background: color-mix(in srgb, var(--sucesso) 15%, var(--bg)); }
.quiz-alternativa-errada { border-color: var(--erro); background: color-mix(in srgb, var(--erro) 15%, var(--bg)); }
.quiz-feedback {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.quiz-feedback-certa { background: color-mix(in srgb, var(--sucesso) 15%, var(--bg)); color: var(--sucesso); }
.quiz-feedback-errada { background: color-mix(in srgb, var(--erro) 15%, var(--bg)); color: var(--erro); }
.quiz-resumo { margin-top: 1.5rem; }
.quiz-resumo .botao-primario { margin-top: 1rem; }

/* Corações subindo e sumindo (vapor) quando acerta -- ver
   mostrarCoracoesFlutuantes em js/pages/quiz.js. */
.quiz-coracoes {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 20;
}
.quiz-coracao {
    position: absolute;
    left: 0;
    top: 0;
    animation: quiz-coracao-subir 2.2s ease-out forwards;
}
@keyframes quiz-coracao-subir {
    0% { transform: translate(-8px, 0) scale(0.5) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    65% { opacity: 1; }
    100% { transform: translate(calc(-8px + var(--desvio, 0px)), -170px) scale(1.15) rotate(var(--rot, 0deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-coracao { animation: none; opacity: 0; }
}

/* Painel do Afiliado (/afiliado, 2026-09-24) -- reaproveita .metricas-grade,
   .metrica-cartao, .conta-secao e .admin-tabela; só o que é próprio fica aqui. */
.afiliado-link {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
}
.afiliado-link code { font-size: 1rem; word-break: break-all; flex: 1 1 16rem; }
.afiliado-aviso { border-left: 3px solid var(--atencao); padding: 0.5rem 0.8rem; background: color-mix(in srgb, var(--atencao) 10%, var(--bg)); }
.afiliado-barra { display: inline-block; height: 0.6rem; background: var(--acento); border-radius: 3px; vertical-align: middle; margin-right: 0.35rem; min-width: 2px; }
.afiliado-regras { color: var(--texto-suave); font-size: 0.92rem; }
.afiliado-regras li { margin-bottom: 0.3rem; }
.afiliado-termos { max-height: 26rem; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 0.4rem 1rem; background: var(--bg-elevado); margin-bottom: 1rem; }
.afiliado-termos h2 { font-size: 1.05rem; }
.afiliado-aceite { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.8rem; }
.afiliado-aceite input { width: auto; margin-top: 0.3rem; }

/* ---- Ilustrações curadas + layout sinuoso (2026-09-28) ----
   Ilustração (js/pages/leitura.js, renderizarIlustracao) flutua à direita
   ou à esquerda, alternando ao longo do capítulo; o texto justificado dos
   parágrafos seguintes contorna. Cabeçalho, quadro, imagem do livro e
   lista/tabela limpam a flutuação (não deixam o quadro colorido nem a
   tabela escorrerem ao lado de uma imagem). No celular, largura cheia. */
.leitura-corpo { display: flow-root; }
.leitura-cabecalho, .leitura-sidebar, .leitura-lista { clear: both; }
/* Imagem do livro que NÃO flutua (bloco seguinte não é parágrafo) segue
   centralizada, sozinha na linha, como antes. */
.leitura-imagem:not(.leitura-ilustracao) { clear: both; }

.leitura-ilustracao { margin: 0.35rem 0 1rem; }
.leitura-ilustracao-direita { float: right; margin-left: 1.5rem; }
.leitura-ilustracao-esquerda { float: left; margin-right: 1.5rem; }
.leitura-ilustracao-media { width: 46%; }
.leitura-ilustracao-miniatura { width: 30%; }
.leitura-ilustracao img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--borda);
}
.leitura-ilustracao figcaption {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.4;
    font-style: italic;
    color: var(--texto-suave);
    text-align: left;
    hyphens: auto;
}
.leitura-ilustracao-credito {
    display: block;
    margin-top: 0.2rem;
    font-style: normal;
    font-size: 0.72rem;
    opacity: 0.85;
}
/* Admin: ancoragem aproximada (texto do parágrafo mudou numa reimportação)
   fica sinalizada pra conferência. Leitor comum não recebe o atributo. */
.leitura-ilustracao[data-ancoragem="aproximada"] img { outline: 3px dashed var(--atencao); outline-offset: 2px; }
.leitura-aviso-orfas {
    border: 1px dashed var(--atencao);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-family: system-ui, sans-serif;
}

@media (max-width: 640px) {
    .leitura-ilustracao-direita, .leitura-ilustracao-esquerda {
        float: none;
        width: 100%;
        margin: 0.25rem 0 1.25rem;
    }
}

/* Toda imagem de conteúdo abre no modal de ampliação (js/lightbox.js). */
.leitura-ilustracao img, .leitura-imagem img, .sidebar-imagem img, .recurso-imagem img { cursor: zoom-in; }
.leitura-ilustracao img:focus-visible, .leitura-imagem img:focus-visible,
.sidebar-imagem img:focus-visible, .recurso-imagem img:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Modal de ampliação: fundo sempre escuro (em qualquer tema), como sala de
   projeção -- a imagem é que manda. */
dialog.lightbox {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(14, 10, 7, 0.95);
    color: #eadfcb;
}
dialog.lightbox[open] { display: flex; align-items: center; justify-content: center; }
dialog.lightbox::backdrop { background: rgba(14, 10, 7, 0.6); }
.lightbox-figura {
    margin: 0;
    max-width: min(92vw, 1400px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    object-fit: contain;
    border-radius: 4px;
    background: #1c1712;
}
.lightbox-legenda {
    margin-top: 0.75rem;
    max-width: 70ch;
    text-align: center;
    font-family: var(--fonte-leitura);
    font-size: 1rem;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.lightbox-credito { font-size: 0.8rem; opacity: 0.75; font-family: system-ui, sans-serif; }
.lightbox-credito a { color: #e8b27a; }
.lightbox-contador { font-size: 0.75rem; opacity: 0.6; font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.lightbox-fechar, .lightbox-seta {
    position: fixed;
    background: rgba(234, 223, 203, 0.12);
    color: #eadfcb;
    border: none;
    cursor: pointer;
    border-radius: 999px;
    line-height: 1;
}
.lightbox-fechar { top: 0.9rem; right: 0.9rem; width: 2.6rem; height: 2.6rem; font-size: 1.7rem; }
.lightbox-seta { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2.2rem; }
.lightbox-anterior { left: 0.9rem; }
.lightbox-proxima { right: 0.9rem; }
.lightbox-fechar:hover, .lightbox-seta:hover { background: rgba(234, 223, 203, 0.25); }
.lightbox-fechar:focus-visible, .lightbox-seta:focus-visible { outline: 2px solid #e8b27a; outline-offset: 2px; }
.lightbox-unica .lightbox-seta { display: none; }
@media (max-width: 640px) {
    .lightbox-seta { top: auto; bottom: 0.9rem; transform: none; }
    .lightbox-img { max-height: calc(100vh - 12rem); }
}

/* ---- Carregamento ordenado das imagens (2026-09-28) ----
   width/height reais no <img> reservam o espaço; height:auto mantém a
   proporção quando a coluna é mais estreita que a imagem. Enquanto a
   imagem não chega, um fundo neutro ocupa o lugar dela; ao chegar, entra
   com esmaecimento (js/carregamento-imagens.js tira .img-pendente). */
.leitura-ilustracao img, .leitura-imagem img, .sidebar-imagem img, .recurso-imagem img {
    height: auto;
    background: var(--bg-elevado);
    transition: opacity 0.35s ease;
}
.leitura-ilustracao img.img-pendente, .leitura-imagem img.img-pendente,
.sidebar-imagem img.img-pendente, .recurso-imagem img.img-pendente { opacity: 0.001; }
.leitura-ilustracao:has(img.img-pendente), .leitura-imagem:has(img.img-pendente),
.sidebar-imagem:has(img.img-pendente), .recurso-imagem:has(img.img-pendente) {
    background: color-mix(in srgb, var(--borda) 35%, transparent);
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .leitura-ilustracao img, .leitura-imagem img, .sidebar-imagem img, .recurso-imagem img { transition: none; }
}

.aviso-imagens {
    position: fixed;
    left: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    font: 0.8rem system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.aviso-imagens::before {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    border: 2px solid var(--acento);
    border-right-color: transparent;
    vertical-align: -0.05rem;
    animation: aviso-imagens-giro 0.9s linear infinite;
}
@keyframes aviso-imagens-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aviso-imagens::before { animation: none; } }

/* Perguntas ao autor + vídeo mensal de respostas (plano Vigilante,
   migrations/0067): popover "Perguntar" na leitura (reaproveita
   .leitura-anotacao-popover) e a página /perguntas (reaproveita
   .anotacao-item). */
#leitura-pergunta-campo,
.perguntas-form textarea {
    width: 100%;
    min-height: 5rem;
    box-sizing: border-box;
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--texto);
    background: var(--bg);
    resize: vertical;
    margin: 0 0 0.6rem;
}

.pergunta-exibir-nome {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.85rem;
    margin: 0 0 0.5rem;
}
.pergunta-exibir-nome[hidden] { display: none; }

.pergunta-aviso,
.pergunta-origem {
    font-size: 0.78rem;
    color: var(--texto-suave);
    margin: 0 0 0.6rem;
}

.pergunta-status { font-size: 0.85rem; margin: 0 0 0.6rem; }

.perguntas-secao { margin-top: 2rem; }
.perguntas-secao > h2 {
    font-family: var(--fonte-marca);
    font-size: 1.2rem;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 0.4rem;
}

.pergunta-selo { font-weight: 600; }
.pergunta-selo-selecionada { color: var(--acento); }
.pergunta-ver-resposta { font-size: 0.85rem; font-weight: 600; }

.perguntas-busca {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--bg);
    color: var(--texto);
    font: inherit;
    margin-bottom: 1rem;
}
.perguntas-busca[hidden] { display: none; }

.resposta-video {
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.2rem;
    scroll-margin-top: 5rem;
}
.resposta-video[hidden] { display: none; }
.resposta-video > h3 { margin: 0 0 0.2rem; }

.resposta-lista { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.resposta-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-top: 1px solid var(--borda);
}
.resposta-item[hidden] { display: none; }
.resposta-texto { margin: 0 0 0.2rem; }

.resposta-tempo {
    flex: none;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--bg);
    color: var(--acento);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    cursor: pointer;
}

/* Aba "Perguntas" do admin (js/pages/admin-perguntas.js) */
.admin-pergunta-texto { margin: 0.4rem 0 0.6rem; font-weight: 600; }
.admin-pergunta-campos { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.4rem 0; }

/* Player do vídeo mensal de respostas (modo R2, <video> comum); posicionado
   para a camada de sobreposições (js/sobreposicoes.js). */
.resposta-player { position: relative; }
.resposta-player video,
.admin-video-previa {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
    border-radius: 8px;
    margin: 0.6rem 0;
}
.admin-video-bloco { border-top: 1px solid var(--borda); margin-top: 0.8rem; padding-top: 0.6rem; }
.admin-video-bloco progress { width: 100%; }
.admin-video-bloco progress[hidden] { display: none; }
.admin-video-sugestao { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; padding: 0.3rem 0; }

/* Aba Perguntas do admin (js/pages/admin-perguntas.js): mestre-detalhe.
   Lista compacta rolável à esquerda, painel do item à direita (desktop,
   main.main-largo ligado por admin.js só nesta aba); empilhado no celular. */
.pq { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1000px) {
    .pq { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .pq-lista { position: sticky; top: 1rem; }
}
.pq-lista, .pq-detalhe { min-width: 0; }
.pq-abas { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.pq-abas button { flex: 1; }
.pq-abas button[aria-selected="true"] { background: var(--acento); color: var(--bg); border-color: var(--acento); }
.pq-filtros { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.pq-filtros select { flex: none; }
.pq-filtros input { flex: 1; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg); color: var(--texto); font: inherit; }
.pq-itens { max-height: 70vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); }
@media (max-width: 999px) { .pq-itens { max-height: 45vh; } }
.pq-item {
    display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left;
    padding: 0.55rem 0.7rem; border: none; border-bottom: 1px solid var(--borda);
    background: transparent; color: var(--texto); font: inherit; cursor: pointer;
}
.pq-item:hover { background: var(--bg-elevado); }
.pq-item.pq-selecionado { background: var(--bg-elevado); box-shadow: inset 3px 0 0 var(--acento); }
.pq-t1 { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.pq-t2 { font-size: 0.75rem; color: var(--texto-suave); }
.pq-t3 { font-size: 0.72rem; }
.pq-duas-linhas { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.pq-aviso { color: var(--acento); }
.pq-ajuda { font-size: 0.8rem; color: var(--texto-suave); margin: 0.3rem 0; }
.pq-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.pq-status { font-size: 0.85rem; margin: 0 0 0.6rem; }
/* Mensagem junto ao botão que a provocou (js/aviso-local.js). */
.aviso-local { font-size: 0.85rem; font-weight: 600; color: var(--sucesso); margin: 0.35rem 0 0.6rem; }
.aviso-local-erro { color: var(--erro); }
.pq-detalhe { border: 1px solid var(--borda); border-radius: 10px; background: var(--bg-elevado); padding: 1rem; }
.pq-cab h3 { margin: 0.2rem 0; }
.pq-texto-pergunta { font-size: 1.15rem; line-height: 1.4; }
.pq-meta { font-size: 0.78rem; color: var(--texto-suave); margin: 0.15rem 0; }
.pq-bloco { border-top: 1px solid var(--borda); margin-top: 0.9rem; padding-top: 0.6rem; }
.pq-bloco h4 { margin: 0.3rem 0; font-size: 0.95rem; }
.pq-bloco label { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.4rem 0; font-size: 0.85rem; }
.pq-bloco input[type="text"], .pq-bloco input[type="month"], .pq-bloco input[type="date"], .pq-bloco textarea, .pq-bloco select {
    width: 100%; box-sizing: border-box; padding: 0.35rem 0.5rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg); color: var(--texto); font: inherit;
}
.pq-bloco .admin-pergunta-campos label { flex: 1 1 8rem; }
.pq-editar-dados summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.pq-relacionados .pq-item { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 0.35rem; background: var(--bg); }
.pq-player { margin: 0.6rem 0; }
.pq-vinculadas, .pq-transcricao { list-style: none; padding: 0; margin: 0.3rem 0; }
.pq-vinc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0.4rem; border-radius: 6px; }
.pq-vinc.pq-ativa { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.pq-vinc-ativar, .pq-link { border: none; background: none; color: var(--acento); cursor: pointer; font: inherit; padding: 0; }
.pq-link { font-size: 0.78rem; text-decoration: underline; }
.pq-vinc-tempo { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.2rem; }
.pq-vinc-texto { flex: 1 1 12rem; font-size: 0.88rem; }
.pq-vinc-sugestao { font-size: 0.78rem; }
.pq-transcricao { max-height: 45vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); }
.pq-tr { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--borda); font-size: 0.88rem; }
.pq-tr:last-child { border-bottom: none; }
.pq-tr-tempo { border: none; background: none; color: var(--acento); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; padding: 0; min-width: 3rem; text-align: left; }
.pq-tr-texto { flex: 1; }
.pq-tr-campo { flex: 1; min-width: 0; padding: 0.2rem 0.4rem; border: 1px solid var(--borda); border-radius: 4px; background: var(--bg-elevado); color: var(--texto); font: inherit; }
.pq-tr-usar { font-size: 0.75rem; padding: 0.1rem 0.45rem; }

/* "Veja os Termos de Uso" junto ao botão de enviar pergunta */
.pergunta-termos-link { font-size: 0.8rem; margin-right: auto; }
.pergunta-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.pergunta-enviar .pergunta-termos-link { margin-right: 0; }

/* Trecho apontado por link (/termos#perguntas-licenca) */
.pagina-legal-destaque { background: color-mix(in srgb, var(--acento) 10%, transparent); border-radius: 6px; padding: 0.4rem 0.6rem; scroll-margin-top: 5rem; }

/* Réplica (migrations/0070): aviso no formulário e link "ver a resposta anterior" */
.pergunta-replica { font-size: 0.85rem; margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; border-left: 3px solid var(--acento); background: var(--bg-elevado); }
.pergunta-replica[hidden] { display: none; }
.resposta-tempo-texto { border: none; padding: 0; background: none; text-decoration: underline; font-weight: 400; }
.pq-acoes[hidden] { display: none; }
.pq-vinc-ativar { width: 1.2rem; text-align: center; }
.admin-erro-texto { color: var(--acento); font-size: 0.85rem; }

/* Troca de plano na /conta (2026-09-30). */
.conta-troca { margin-top: 1.2rem; }
.conta-troca h3 { margin-bottom: 0.4rem; }
.conta-troca-botoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.modal-confirmar-texto { white-space: pre-line; }

/* Aba Curso do admin (js/pages/admin-curso.js): árvore módulo -> parte ->
   aula com caixas de seleção para a exibição em lote; reaproveita .pq-*. */
.cu-arvore { max-height: 75vh; }
.cu-linha { display: flex; align-items: stretch; border-bottom: 1px solid var(--borda); }
.cu-linha input[type="checkbox"] { flex: none; margin: 0 0.2rem 0 0.5rem; align-self: center; }
.cu-linha .pq-item { border-bottom: none; }
.cu-nivel-modulo { background: var(--bg-elevado); }
.cu-nivel-parte { padding-left: 0.9rem; }
.cu-nivel-aula { padding-left: 1.8rem; }
.cu-selo { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0 0.4rem; border-radius: 999px; border: 1px solid var(--borda); }
.cu-oculta { color: var(--texto-suave); }
.cu-breve { color: var(--acento); border-color: var(--acento); }
.cu-noar { background: var(--acento); color: var(--bg); border-color: var(--acento); }
.cu-aberta { color: var(--texto); }
.cu-lote { background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: 8px; padding: 0.4rem 0.6rem; }
.cu-check { flex-direction: row !important; align-items: center; gap: 0.4rem !important; }
.cu-video h4 { margin-bottom: 0; }

/* Curso do plano Hacker -- sumário (/curso, js/pages/curso.js) e aula
   (/curso/aula/:id, js/pages/aula.js). Fase 61, etapa 2. */
.curso-convite {
    background: var(--bg-elevado); border: 1px solid var(--borda); border-left: 3px solid var(--acento);
    border-radius: 8px; padding: 0.8rem 1rem; margin: 1rem 0;
}
.curso-convite-aula { margin-top: 1.5rem; }
.curso-modulo { margin-top: 2rem; }
.curso-modulo > h2 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.curso-parte { margin-top: 1.2rem; }
.curso-parte > h3 { font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--texto-suave); }
.curso-parte-sigla { color: var(--acento); font-weight: 700; }
.curso-descricao { color: var(--texto-suave); font-size: 0.92rem; margin: 0.2rem 0 0.6rem; }
.curso-aulas { list-style: none; padding: 0; margin: 0; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: var(--bg-elevado); }
.curso-aula + .curso-aula { border-top: 1px solid var(--borda); }
.curso-aula-link { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.75rem 1rem; color: var(--texto); text-decoration: none; }
a.curso-aula-link:hover { background: color-mix(in srgb, var(--acento) 7%, transparent); }
.curso-aula-numero { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; border: 1px solid var(--borda); color: var(--texto-suave); }
.curso-aula-concluida .curso-aula-numero { background: var(--acento); border-color: var(--acento); color: var(--bg); }
.curso-aula-texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.curso-aula-titulo { font-weight: 600; line-height: 1.3; }
.curso-aula-objetivo { font-size: 0.88rem; color: var(--texto-suave); }
.curso-aula-meta { font-size: 0.78rem; color: var(--texto-suave); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.curso-aula-em_breve .curso-aula-titulo, .curso-aula-trancada .curso-aula-titulo { color: var(--texto-suave); }
.curso-selo { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0 0.45rem; border-radius: 999px; border: 1px solid var(--borda); }
.curso-selo-destaque { background: var(--acento); color: var(--bg); border-color: var(--acento); }
.curso-selo-concluida { color: var(--acento); border-color: var(--acento); }
.curso-selo-aberta { color: var(--texto); }

.aula-caminho { font-size: 0.85rem; color: var(--texto-suave); margin: 1rem 0 0.2rem; }
.aula-cronologia { font-size: 0.9rem; margin: 0.3rem 0 1rem; }
.aula-video { margin-top: 1.6rem; }
.aula-video h2 { font-size: 1.15rem; margin: 0 0 0.2rem; }
.aula-video-concluido { font-size: 0.78rem; font-weight: 600; color: var(--acento); margin-left: 0.4rem; }
.aula-video-meta, .aula-video-retomada { font-size: 0.82rem; color: var(--texto-suave); margin: 0.1rem 0; }
.aula-video-descricao { margin: 0.4rem 0; }
.aula-player-caixa { position: relative; margin: 0.6rem 0 0.3rem; }
.aula-player { display: block; width: 100%; max-height: 75vh; background: #000; border-radius: 8px; }
/* Sobreposições (js/sobreposicoes.js): a camada cobre só o retângulo real da
   imagem; tamanhos em cqh (1% da altura dela). pointer-events: none deixa os
   cliques chegarem aos controles do vídeo. */
.sobreposicoes-camada { position: absolute; container-type: size; pointer-events: none; overflow: hidden; }
.sobreposicao { position: absolute; box-sizing: border-box; display: none; overflow: hidden; }
.sobreposicao.ativa { display: flex; }
.sobreposicao-texto { flex-direction: column; justify-content: center; }
.sobreposicao-linha { display: block; white-space: pre; }
.sobreposicao-imagem img { width: 100%; height: 100%; object-fit: contain; }
.sobreposicao-credito { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 0.1em 0.4em; background: rgba(0, 0, 0, 0.55); color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aula-player-telacheia { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 2.2rem; height: 2.2rem; border: none; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; opacity: 0.65; }
.aula-player-telacheia:hover, .aula-player-telacheia:focus-visible { opacity: 1; }
/* Tela cheia própria do conjunto vídeo + camada (aulas e respostas). */
.em-tela-cheia { display: flex; align-items: center; justify-content: center; background: #000; margin: 0; }
.em-tela-cheia video { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.aula-video-aviso-telacheia { font-size: 0.78rem; color: var(--texto-suave); margin: 0.1rem 0; }
/* Legenda (js/legendas.js): camada própria sobre o quadro do vídeo, acima
   das sobreposições; tamanhos em cqh, com piso para vídeo pequeno. Embaixo,
   folga para não cair sob os controles nativos. */
.legenda-camada { position: absolute; container-type: size; pointer-events: none; z-index: 1; }
.legenda-bloco { position: absolute; left: 5%; right: 5%; bottom: max(9cqh, 3.6rem); display: flex; flex-direction: column; align-items: center; gap: 0.12em; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.3; }
.legenda-bloco[hidden] { display: none; }
.legenda-cima .legenda-bloco { bottom: auto; top: max(6cqh, 1rem); }
.legenda-pequeno .legenda-bloco { font-size: max(12px, 4.2cqh); }
.legenda-medio .legenda-bloco { font-size: max(14px, 5.4cqh); }
.legenda-grande .legenda-bloco { font-size: max(17px, 7cqh); }
.legenda-linha { padding: 0.05em 0.4em; border-radius: 0.2em; white-space: pre-wrap; }
.legenda-cor-branco .legenda-linha { color: #fff; }
.legenda-cor-amarelo .legenda-linha { color: #ffe14d; }
.legenda-fundo-escuro .legenda-linha { background: rgba(0, 0, 0, 0.82); }
.legenda-fundo-translucido .legenda-linha { background: rgba(0, 0, 0, 0.5); }
.legenda-fundo-nenhum .legenda-linha { text-shadow: 0 0 3px #000, 0 0 3px #000, 1px 1px 2px #000, -1px -1px 2px #000; }
.legenda-controles { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: flex; gap: 0.3rem; }
.legenda-controles.com-telacheia { right: 3rem; }
.legenda-botao { min-width: 2.2rem; height: 2.2rem; padding: 0 0.4rem; border: none; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; opacity: 0.65; }
.legenda-botao:hover, .legenda-botao:focus-visible, .legenda-cc[aria-pressed="true"] { opacity: 1; }
.legenda-cc[aria-pressed="true"] { box-shadow: inset 0 -3px 0 #fff; }
.legenda-botao[hidden] { display: none; }
.legenda-painel { position: absolute; top: 2.6rem; right: 0; width: 15rem; max-width: 80vw; padding: 0.5rem 0.6rem; border-radius: 8px; background: rgba(20, 20, 20, 0.94); color: #fff; font-size: 0.82rem; }
.legenda-painel[hidden] { display: none; }
.legenda-grupo { border: none; margin: 0 0 0.4rem; padding: 0; }
.legenda-grupo legend { padding: 0; margin-bottom: 0.2rem; opacity: 0.8; }
.legenda-grupo button { margin: 0 0.25rem 0.25rem 0; padding: 0.2rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; background: transparent; color: #fff; font-size: 0.8rem; cursor: pointer; }
.legenda-grupo button[aria-pressed="true"] { background: #fff; color: #000; }
/* Editor de sobreposições (js/editor-sobreposicoes.js), no admin. */
dialog.modal.so-editor { max-width: none; width: 96vw; height: 94vh; padding: 0.8rem 1rem; display: flex; flex-direction: column; box-sizing: border-box; }
dialog.modal.so-editor:not([open]) { display: none; }
.so-topo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding-bottom: 0.5rem; border-bottom: 1px solid var(--borda); }
.so-topo h3 { margin: 0; font-size: 1.05rem; margin-right: auto; }
.so-modo, .cu-aviso-integrado { margin: 0.4rem 0 0; padding: 0.35rem 0.6rem; font-size: 0.85rem; border-radius: 6px; background: rgba(214, 160, 0, 0.15); border: 1px solid rgba(214, 160, 0, 0.5); }
.so-estado.so-erro { color: var(--erro, #b3261e); }
.so-icone { min-width: 2.1rem; padding-inline: 0.45rem; font-size: 1.05rem; line-height: 1.2; }
.so-atalhos { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid var(--borda); border-radius: 6px; font-size: 0.85rem; }
.so-atalhos p { margin: 0 0 0.35rem; }
.so-atalhos table { border-collapse: collapse; }
.so-atalhos th { text-align: left; font-weight: 600; white-space: nowrap; padding: 0.1rem 1rem 0.1rem 0; }
.so-atalhos td { padding: 0.1rem 0; }
.so-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1rem; padding-top: 0.6rem; }
.so-palco, .so-lado { min-height: 0; overflow-y: auto; }
.so-caixa { margin: 0; }
.so-caixa .aula-player { max-height: 62vh; }
.so-camada .sobreposicao { pointer-events: auto; cursor: move; touch-action: none; user-select: none; }
.so-camada .sobreposicao.so-selecionada { outline: 2px dashed #ffcc00; outline-offset: 1px; }
.so-camada .sobreposicao.so-fora { opacity: 0.55; }
.sobreposicao-alca { display: none; }
.so-camada .so-selecionada .sobreposicao-alca { display: block; position: absolute; right: 0; bottom: 0; width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center; font: 0.9rem/1.2rem sans-serif; font-style: normal; font-weight: 400; color: #000; background: #ffcc00; cursor: nwse-resize; }
.so-tempo { margin: 0.3rem 0; font-variant-numeric: tabular-nums; }
.so-lista { display: flex; flex-direction: column; gap: 0.25rem; }
.so-item { display: flex; gap: 0.6rem; text-align: left; font: inherit; font-size: 0.88rem; padding: 0.35rem 0.6rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg-elevado); color: var(--texto); cursor: pointer; }
.so-item-sel { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); }
.so-item-tempo { font-variant-numeric: tabular-nums; color: var(--texto-suave); white-space: nowrap; }
.so-enviar { display: inline-flex; align-items: center; cursor: pointer; padding: 0.3rem 0.7rem; border: 1px solid var(--borda); border-radius: 6px; font-size: 0.9rem; }
.so-grupo { border-top: 1px solid var(--borda); padding: 0.4rem 0 0.6rem; }
.so-grupo h4 { margin: 0.2rem 0 0.4rem; font-size: 0.92rem; }
.so-grupo label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; }
.so-grupo label.cu-check { flex-direction: row; align-items: center; }
.so-grupo textarea, .so-grupo input[type="text"], .so-grupo input[type="number"], .so-grupo select { font: inherit; font-size: 0.9rem; padding: 0.25rem 0.4rem; border: 1px solid var(--borda); border-radius: 4px; background: var(--bg); color: var(--texto); min-width: 0; }
.so-linha { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.4rem; }
.so-linha label { flex: 1 1 6rem; }
.so-tempos { display: flex; gap: 0.35rem; align-items: flex-end; margin-bottom: 0.35rem; }
.so-tempos label { flex: 1; }
.so-tempos button { font-size: 0.8rem; padding: 0.25rem 0.45rem; }
.so-avisos p { margin: 0.2rem 0; padding: 0.35rem 0.5rem; font-size: 0.82rem; border-radius: 6px; background: rgba(214, 160, 0, 0.15); border: 1px solid rgba(214, 160, 0, 0.5); }
.so-acervo { border: 1px solid var(--borda); border-radius: 8px; padding: 0.5rem; margin: 0.5rem 0; }
.so-acervo-busca { width: 100%; box-sizing: border-box; font: inherit; padding: 0.3rem 0.5rem; margin-bottom: 0.5rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg); color: var(--texto); }
.so-acervo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.4rem; max-height: 40vh; overflow-y: auto; }
.so-acervo-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.25rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg-elevado); color: var(--texto); font-size: 0.72rem; text-align: left; cursor: pointer; }
.so-acervo-item[hidden] { display: none; }
.so-acervo-item img { width: 100%; height: 5rem; object-fit: contain; background: #0001; }
.so-marcar { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 0.3rem; }
.so-falas { max-height: 40vh; }
.so-fala-dentro { background: rgba(214, 160, 0, 0.14); }
/* Estreito: empilhado em bloco, não em grade -- numa grade de altura fixa,
   o min-height: 0 dos filhos encolhia as linhas e o painel do vídeo
   transbordava por cima do lado (textos sobrepostos). */
@media (max-width: 900px) {
    .so-corpo { display: block; overflow-y: auto; }
    .so-palco, .so-lado { overflow: visible; }
    .so-lado { margin-top: 1rem; }
}
.aula-vizinhas { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.aula-seguinte { margin-left: auto; text-align: right; }

/* Aula em texto (2026-10-01, migrations/0080): HTML do autor + "marcar como lido". */
.aula-texto-corpo { margin: 0.6rem 0; line-height: 1.6; overflow-wrap: anywhere; }
.aula-texto-corpo h2 { font-size: 1.1rem; margin: 1.2rem 0 0.4rem; }
.aula-texto-corpo h3 { font-size: 1rem; margin: 1rem 0 0.3rem; }
/* Artefato embutido numa aula em texto (js/artefatos.js) */
.artefato { margin: 1rem 0; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--bg-elevado); }
.artefato-barra { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--borda); font-size: 0.85rem; }
.artefato-titulo { margin-right: auto; color: var(--texto-suave); }
.artefato-tela-cheia { font-size: 0.8rem; padding: 0.2rem 0.6rem; }
.artefato-quadro { display: block; width: 100%; min-height: 360px; border: 0; background: var(--bg); }
.artefato-aviso { margin: 0; padding: 0.8rem; color: var(--texto-suave); }
.artefato:fullscreen { display: flex; flex-direction: column; border-radius: 0; }
.artefato:fullscreen .artefato-quadro { flex: 1; height: auto !important; }
.aula-texto-corpo img { max-width: 100%; height: auto; }
.aula-texto-leitura { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0.6rem 0 0; }
.aula-texto-marcar { font: inherit; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--acento); background: none; color: var(--acento); cursor: pointer; }
.aula-texto-marcar:hover, .aula-texto-lido { background: var(--acento); color: var(--bg); }
.aula-texto-aviso { font-size: 0.82rem; color: var(--texto-suave); }

/* Progresso global do curso (2026-10-01, js/progresso-global-curso.js):
   anel + barra + contagens; cada contagem abre o modal com as aulas. */
.cpg { display: flex; gap: 1.2rem; align-items: center; margin: 1rem 0 0.5rem; padding: 0.9rem 1rem; background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: 10px; }
.cpg-anel { flex: none; }
.cpg-anel circle { fill: none; stroke-width: 3.2; }
.cpg-trilho { stroke: var(--borda); }
.cpg-concluido { stroke: var(--acento); }
.cpg-andamento { stroke: color-mix(in srgb, var(--acento) 35%, var(--bg)); }
.cpg-pct { font-size: 8.5px; font-weight: 700; fill: var(--texto); text-anchor: middle; dominant-baseline: central; }
.cpg-linhas { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.cpg-titulo { font-size: 1.05rem; margin: 0; }
.cpg-barra { display: flex; height: 6px; border-radius: 999px; background: var(--borda); overflow: hidden; }
.cpg-barra-concluido { background: var(--acento); }
.cpg-barra-andamento { background: color-mix(in srgb, var(--acento) 35%, var(--bg)); }
.cpg-lista { list-style: none; padding: 0; margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.cpg-contagem { font: inherit; font-size: 0.9rem; background: none; border: none; padding: 0; color: var(--texto); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cpg-contagem:hover { color: var(--acento); }
.cpg-resumo, .cpg-extra { font-size: 0.8rem; color: var(--texto-suave); margin: 0; }
.cpg-compacto { padding: 0.5rem 0.8rem; gap: 0.8rem; margin: 0.6rem 0 0; }
.cpg-compacto .cpg-linhas { font-size: 0.85rem; }
.cpg-compacto .cpg-contagem { font-size: 0.82rem; color: var(--texto-suave); }
.cpg-compacto .cpg-pct { font-size: 9.5px; }
.cpg-modal-lista { margin: 0; padding-left: 1.2rem; line-height: 1.7; }
.cpg-modal-lista small { color: var(--texto-suave); }
.cpg-modal-lista a { color: var(--acento); }
@media (max-width: 480px) { .cpg:not(.cpg-compacto) { gap: 0.8rem; padding: 0.8rem; } .cpg:not(.cpg-compacto) > .cpg-anel { width: 68px; height: 68px; } }

/* Anotações por vídeo (2026-10-01, migrations/0078). */
.aula-notas { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: 8px; }
.aula-notas-titulo { font-size: 0.95rem; margin: 0 0 0.4rem; }
.aula-notas-lista { list-style: none; padding: 0; margin: 0; }
.aula-nota { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0; border-top: 1px solid var(--borda); }
.aula-nota:first-child { border-top: none; }
.aula-nota-tempo {
    flex: none; font-family: var(--fonte-mono); font-size: 0.8rem; font-weight: 600; color: var(--acento);
    background: var(--acento-tinta); border: 1px solid var(--acento); border-radius: 999px; padding: 0.05rem 0.5rem; cursor: pointer;
}
.aula-nota-tempo:hover { background: var(--acento); color: var(--bg); }
.aula-nota-corpo { flex: 1; min-width: 0; }
.aula-nota-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.aula-nota-campo, .aula-nota-nova { width: 100%; box-sizing: border-box; font: inherit; padding: 0.4rem 0.5rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg); color: var(--texto); }
.aula-nota-acoes { display: flex; gap: 0.8rem; margin-top: 0.2rem; }
.aula-nota-acoes button { background: none; border: none; padding: 0; font-size: 0.8rem; color: var(--texto-suave); cursor: pointer; text-decoration: underline; }
.aula-nota-acoes button:hover { color: var(--acento); }
.aula-nota-form { margin-top: 0.5rem; }
.aula-nota-form-rodape { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin-top: 0.35rem; }
.aula-nota-anotar {
    font-weight: 600; color: var(--bg); background: var(--acento); border: 1px solid var(--acento);
    border-radius: 6px; padding: 0.3rem 0.9rem; cursor: pointer; font-variant-numeric: tabular-nums;
}
.aula-nota-anotar:disabled { opacity: 0.6; cursor: wait; }
.aula-nota-aviso { font-size: 0.8rem; color: var(--texto-suave); }

.aula-objetivo { font-style: italic; color: var(--texto-suave); margin: -0.3rem 0 0.8rem; }
.aula-cronologia a, .aula-vizinhas a, .curso-convite a:not(.botao-primario) { color: var(--acento); }

/* Estatísticas do curso no admin (2026-10-01, js/pages/admin-curso-estatisticas.js).
   Uma medida por gráfico; barras na cor de acento do tema. */
.ce-topo { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; }
.ce-topo h2 { margin: 0; }
.ce-opcao { font-size: 0.88rem; display: flex; gap: 0.35rem; align-items: center; }
.ce-legenda { font-size: 0.85rem; color: var(--texto-suave); margin: 0.5rem 0 0.3rem; }
.ce-legenda strong { color: var(--texto); }
.ce-corpo h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
.ce-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.ce-numero { background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.82rem; color: var(--texto-suave); }
.ce-numero span { display: block; font-size: 1.35rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.ce-grafico { display: block; width: 100%; height: 90px; margin: 0.3rem 0 0.6rem; overflow: visible; }
.ce-barra { fill: var(--acento); }
.ce-alvo { fill: transparent; }
.ce-alvo:hover + .ce-barra, .ce-barra:hover { fill: color-mix(in srgb, var(--acento) 70%, var(--texto)); }
.ce-base { stroke: var(--borda); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ce-tabela-rolagem { overflow-x: auto; }
.ce-tabela { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ce-tabela th, .ce-tabela td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.ce-tabela th { color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.ce-tabela small { color: var(--texto-suave); }
.ce-linha-detalhe > td { background: var(--bg-elevado); padding: 0.6rem 0.8rem; }
.ce-detalhe .ce-tabela { margin-top: 0.6rem; }
.ce-abrir { font-size: 0.8rem; padding: 0.15rem 0.6rem; border: 1px solid var(--borda); border-radius: 6px; background: none; color: var(--texto); cursor: pointer; white-space: nowrap; }
.ce-selo { font-size: 0.7rem; padding: 0 0.4rem; border: 1px solid var(--borda); border-radius: 999px; color: var(--texto-suave); }
.ce-parado td { color: var(--atencao); }
/* Abas "Quiz" e "Estatísticas do quiz" do admin (js/pages/admin-quiz.js, Fase 70). */
.qz-corpo h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
/* Um painel por obra, recolhido de saída; o título abre/fecha só ele. */
.qz-obra { border: 1px solid var(--borda); border-radius: 8px; margin: 0.6rem 0; background: var(--bg-elevado); }
.qz-obra > summary { cursor: pointer; padding: 0.6rem 0.9rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; list-style: none; }
.qz-obra > summary::-webkit-details-marker { display: none; }
/* Com display:flex o navegador some com o triângulo; indicador próprio. */
.qz-obra > summary::before { content: "▸"; color: var(--acento); width: 0.8rem; }
.qz-obra[open] > summary::before { content: "▾"; }
.qz-obra > summary small { color: var(--texto-suave); }
.qz-obra-resumo { font-size: 0.82rem; color: var(--texto-suave); margin-left: auto; }
.qz-obra[open] > summary { border-bottom: 1px solid var(--borda); }
.qz-obra > :not(summary) { margin-left: 0.9rem; margin-right: 0.9rem; }
/* Arrastar para rolar a tabela (colunas escondidas à direita): mãozinha
   fora de botões, links e campos. */
.qz-arrastavel { cursor: grab; }
.qz-arrastavel.arrastando { cursor: grabbing; user-select: none; }
.qz-arrastavel :is(button, a, label, input[type="checkbox"], select) { cursor: pointer; }
.qz-arrastavel :is(input[type="text"], input[type="search"], textarea) { cursor: text; }
.qz-capitulo { font-size: 0.95rem; margin: 1.2rem 0 0.3rem; }
.qz-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: end; font-size: 0.85rem; }
.qz-filtros label { display: flex; flex-direction: column; gap: 0.15rem; }
.qz-lote { font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.qz-tabela td:nth-child(5) { min-width: 18rem; }
.qz-conceito td { background: color-mix(in srgb, var(--acento) 6%, transparent); font-size: 0.82rem; }
.qz-acoes { white-space: nowrap; }
.qz-acoes .ce-abrir { margin: 0 0.15rem 0.2rem 0; }
.qz-rascunho { border-color: var(--atencao); color: var(--atencao); }
.qz-removida { border-color: var(--erro, #b3261e); color: var(--erro, #b3261e); }
/* Detalhe preso à esquerda e com largura limitada: a tabela é larga e rola
   na horizontal; sem isto, as barras ficavam fora da tela. */
.qz-tabela .ce-detalhe { position: sticky; left: 0.5rem; max-width: min(48rem, calc(100vw - 3rem)); }
.qz-alternativas { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; font-size: 0.85rem; }
.qz-alternativas li { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 5.5rem; gap: 0.6rem; align-items: center; }
.qz-certa .qz-alt-texto { font-weight: 700; color: var(--sucesso); }
.qz-alt-barra { height: 0.55rem; background: var(--borda); border-radius: 999px; overflow: hidden; }
.qz-alt-barra span { display: block; height: 100%; background: var(--acento); }
.qz-certa .qz-alt-barra span { background: var(--sucesso); }
.qz-alt-n { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
dialog.modal.qz-editor { max-width: 760px; width: 94vw; }
.qz-form { display: grid; gap: 0.6rem; font-size: 0.9rem; }
.qz-form h3 { margin: 0; }
.qz-form label { display: grid; gap: 0.2rem; }
.qz-form textarea, .qz-form input[type="text"], .qz-form select { font: inherit; width: 100%; box-sizing: border-box; }
.qz-linha { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.qz-linha label { flex: 1 1 8rem; }
.qz-alts { border: 1px solid var(--borda); border-radius: 8px; padding: 0.5rem 0.7rem; display: grid; gap: 0.4rem; }
.qz-alts-lista { display: grid; gap: 0.35rem; }
.qz-alt { display: flex; gap: 0.4rem; align-items: center; }
.qz-alt input[type="text"] { flex: 1; }
.qz-aviso { margin: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--atencao); border-radius: 6px; background: color-mix(in srgb, var(--atencao) 12%, transparent); font-size: 0.85rem; }
.qz-erro { margin: 0; color: var(--erro, #b3261e); font-weight: 600; }

/* Aba "Atividade" do admin (2026-10-01, js/pages/admin-atividade.js);
   reaproveita tabela e números das estatísticas do curso (.ce-*). */
.at-busca { padding: 0.3rem 0.5rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--bg); color: var(--texto); }
.at-aviso { color: var(--atencao); }
.at-movimentos td { font-size: 0.8rem; }
.at-movimentos .at-pagina td, .at-movimentos .at-inicio td { font-weight: 600; }
.at-movimentos .at-oculta td, .at-movimentos .at-desfoco td { color: var(--texto-suave); }
.ajustes-lista { list-style: none; padding: 0; display: grid; gap: 0.6rem; max-width: 44rem; }
.ajustes-lista label { display: flex; gap: 0.8rem; align-items: center; justify-content: space-between; }
.ajustes-lista input { width: 6rem; }

/* Aba Fragmentos do admin (Fase 72): caixa de entrada da escrita por
   fragmentos. Reaproveita o mestre-detalhe .pq-* da aba Perguntas. */
.fg-item.fg-novo .pq-t1, .fg-item.fg-alterado .pq-t1 { color: var(--acento); }
.fg-item.fg-orfao .pq-t1 { text-decoration: line-through; color: var(--texto-suave); }
.fg-selo { font-weight: 600; }
.fg-selo-novo, .fg-selo-alterado { color: var(--acento); }
.fg-selo-orfao { color: var(--erro); }
.fg-previa { max-height: 70vh; overflow-y: auto; padding: 0.5rem 0.75rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); }
.fg-previa .leitura-imagem img { max-width: 100%; height: auto; }
.fg-titulo-secao { margin: 0.2rem 0 0.8rem; }
.fg-notas { font-size: 0.8rem; color: var(--texto-suave); margin: 0.2rem 0 0.8rem; padding-left: 1.4rem; }
.fg-classificacao { border: 1px solid var(--borda); border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0.4rem 0; }
.fg-classificacao label { flex-direction: row !important; align-items: center; gap: 0.45rem !important; }
.fg-dif { max-height: 70vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); padding: 0.5rem 0.75rem; font-size: 0.92rem; line-height: 1.5; }
.fg-dif-bloco { padding: 0.4rem 0.5rem; margin: 0.3rem 0; border-left: 3px solid var(--borda); white-space: pre-wrap; }
.fg-dif-mudou { border-left-color: var(--acento); }
.fg-dif-saiu { border-left-color: var(--erro); }
.fg-dif-entrou { border-left-color: var(--sucesso); }
.fg-dif-iguais { font-size: 0.78rem; color: var(--texto-suave); text-align: center; margin: 0.3rem 0; }
.fg-dif del { background: color-mix(in srgb, var(--erro) 18%, transparent); color: inherit; }
.fg-dif ins { background: color-mix(in srgb, var(--sucesso) 22%, transparent); color: inherit; text-decoration: none; }
.fg-historico summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.fg-historico ul { font-size: 0.82rem; margin: 0.4rem 0; padding-left: 1.2rem; }
/* Arranjo e publicação (Fase 72). */
.fg-vistas { max-width: 28rem; margin-bottom: 0.9rem; }
.fa-ocupado { opacity: 0.6; pointer-events: none; }
.fa-resumo { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; margin: 0.3rem 0; }
.fa-fora { font-size: 0.85rem; }
.fa-paginas { list-style: none; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.8rem; }
.fa-pagina { border: 1px solid var(--borda); border-radius: 10px; background: var(--bg-elevado); padding: 0.6rem 0.8rem; }
.fa-pagina-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: center; border-bottom: 1px solid var(--borda); padding-bottom: 0.45rem; }
.fa-pagina-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.85rem; }
.fa-pagina-acoes button { font-size: 0.8rem; padding: 0.15rem 0.5rem; }
.fa-itens { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.fa-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 0.8rem; align-items: center; padding-top: 0.3rem; padding-bottom: 0.3rem; padding-right: 0.3rem; border-bottom: 1px dashed var(--borda); font-size: 0.88rem; }
.fa-item:last-child { border-bottom: none; }
.fa-item code { font-size: 0.72rem; color: var(--texto-suave); }
.fa-item.fa-publico .fa-item-titulo { font-weight: 600; }
.fa-item-campos { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.8rem; }
.fa-item-campos select, .fa-item-campos button { font-size: 0.78rem; padding: 0.1rem 0.35rem; }
.fa-item-campos label { display: flex; align-items: center; gap: 0.25rem; }
.fa-item-titulo { flex: 1 1 18rem; min-width: 0; }
.fa-item-campos { margin-left: auto; }
/* Resumo das novidades na aba Config (Fase 72). */
.admin-resumo-campos { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; }
.admin-resumo-campos label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.88rem; }
.admin-resumo-campos input { width: 6rem; }
.admin-resumo-itens { font-size: 0.9rem; }
/* "O que há de novo" (Fase 72). */
.nav-link-novidades { position: relative; }
.nav-ponto-novidade { display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.3rem; border-radius: 50%; background: var(--acento); vertical-align: super; }
.novidades-dia { margin: 1.4rem 0; }
.novidades-data { font-size: 1rem; color: var(--texto-suave); border-bottom: 1px solid var(--borda); padding-bottom: 0.3rem; margin: 0 0 0.5rem; }
.novidades-dia ul { list-style: none; padding: 0; margin: 0; }
.novidades-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding: 0.45rem 0; }
.novidades-item a { font-weight: 600; }
.novidades-selo { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--acento); color: var(--acento); }
.novidades-onde { flex-basis: 100%; font-size: 0.82rem; color: var(--texto-suave); }
.leitura-novidade { display: inline-block; margin-left: 0.5rem; font-family: var(--fonte-ui, inherit); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--acento); color: var(--acento); vertical-align: middle; }
/* Desenhos em SVG (diagramas do TikZ, ícones como o lábaro) vêm com traço
   escuro e fundo transparente: nos temas escuros sumiam (conferido em
   2026-10-04 com o diagrama "Duas Trajetórias"). Fundo de papel em
   qualquer tema, também na ampliação. */
.leitura-imagem img[src*=".svg"], .sidebar-imagem img[src*=".svg"], .lightbox-img[src*=".svg"] { background: #f9f3e6; padding: 0.6rem; box-sizing: border-box; }
.leitura-imagem-inline[src*=".svg"] { background: #f9f3e6; border-radius: 3px; padding: 1px; }
/* Anotações cujo trecho mudou (Fase 72). */
.leitura-orfas-aviso { font-size: 0.88rem; padding: 0.5rem 0.8rem; border-left: 3px solid var(--acento); background: var(--bg-elevado); border-radius: 6px; margin: 0 0 1.2rem; }
.leitura-orfas { margin: 2rem 0 1rem; padding: 0.9rem 1.1rem; border: 1px dashed var(--acento); border-radius: 10px; background: var(--bg-elevado); }
.leitura-orfas-titulo { font-size: 1.05rem; margin: 0 0 0.4rem; }
.leitura-orfas-explica { font-size: 0.88rem; color: var(--texto-suave); margin: 0 0 0.6rem; }
.leitura-orfas ul { list-style: none; padding: 0; margin: 0; }
.leitura-orfas li { border-top: 1px solid var(--borda); padding: 0.6rem 0; }
.leitura-orfas-trecho { font-style: italic; margin: 0 0 0.3rem; }
.leitura-orfas-nota { margin: 0 0 0.4rem; }
.anotacao-item-orfa { font-size: 0.8rem; color: var(--acento); margin: 0.2rem 0; }
/* Painéis do arranjo recolhidos (2026-10-04). */
details.fa-pagina > summary.fa-pagina-cab { cursor: pointer; list-style: none; border-bottom: none; padding-bottom: 0; }
details.fa-pagina > summary.fa-pagina-cab::-webkit-details-marker { display: none; }
details.fa-pagina > summary.fa-pagina-cab > div:first-child::before { content: "▸"; display: inline-block; width: 1rem; color: var(--acento); transition: transform 0.15s; }
details.fa-pagina[open] > summary.fa-pagina-cab > div:first-child::before { transform: rotate(90deg); }
details.fa-pagina[open] > summary.fa-pagina-cab { border-bottom: 1px solid var(--borda); padding-bottom: 0.45rem; }
/* Fontes das notas (Fase 72). */
.fg-vistas { max-width: 40rem; }
.fn-filtros { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.fn-filtros button { font-size: 0.8rem; padding: 0.2rem 0.55rem; }
.fn-filtros button[aria-pressed="true"] { background: var(--acento); color: var(--bg); border-color: var(--acento); }
.fn-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.fn-nota { border: 1px solid var(--borda); border-radius: 8px; padding: 0.6rem 0.8rem; background: var(--bg-elevado); }
.fn-texto { font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.fn-acoes select, .fn-acoes button { font-size: 0.8rem; }
/* Imagem pendurada num item de lista (fora ou dentro de quadro), 2026-10-04:
   mesmo tratamento da figura de quadro -- nunca passa da largura da coluna. */
.leitura-lista figure.sidebar-imagem, .leitura-sidebar li figure.sidebar-imagem { margin: 0.7rem 0 0.4rem; text-align: center; }
.leitura-lista figure.sidebar-imagem img, .leitura-sidebar li figure.sidebar-imagem img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--borda); }
.leitura-lista figure.sidebar-imagem figcaption { margin-top: 0.4rem; font-size: 0.82rem; font-style: italic; color: var(--texto-suave); }
.leitura-sidebar { overflow-wrap: anywhere; }
/* Vídeos presos a fragmentos (Fase 72). */
.fa-videos { flex-basis: 100%; margin: 0.4rem 0 0.2rem; padding: 0.5rem 0.7rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); }
.fa-videos-lista { margin: 0 0 0.4rem; padding-left: 1.1rem; }
.fa-videos-lista button { font-size: 0.75rem; margin-left: 0.4rem; }
.fa-videos-novo { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fa-video-escolha { max-width: 100%; }
.leitura-videos { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin: -0.3rem 0 1rem; font-size: 0.88rem; }
.leitura-video-link { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.15rem 0.6rem; border: 1px solid var(--acento); border-radius: 999px; text-decoration: none; }
.leitura-video-sub { color: var(--texto-suave); font-size: 0.8rem; }
/* Fontes históricas e referências: seções por categoria (2026-10-04). */
.fontes-categoria { margin: 1.8rem 0 0; }
.fontes-categoria-titulo { font-size: 1.35rem; border-bottom: 1px solid var(--borda); padding-bottom: 0.3rem; margin: 0 0 0.3rem; }
.fontes-categoria-explica { color: var(--texto-suave); font-size: 0.9rem; margin: 0 0 1rem; }
/* Dicas do admin (js/dicas.js). */
.dica-caixa { position: fixed; z-index: 1000; padding: 0.45rem 0.65rem; border-radius: 6px; background: var(--texto); color: var(--bg); font-size: 0.8rem; line-height: 1.4; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
[data-dica] { cursor: help; }
button[data-dica], a[data-dica], select[data-dica], input[data-dica], label[data-dica] { cursor: pointer; }
input[type="text"][data-dica], input[type="number"][data-dica], input[type="search"][data-dica] { cursor: text; }
/* Concordância no admin: cartões recolhidos (2026-10-04). */
.admin-card-recolhivel { padding: 0; gap: 0; }
.admin-card-recolhivel > details > summary.admin-card-resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; padding: 0.7rem 1rem; cursor: pointer; list-style: none; }
.admin-card-recolhivel > details > summary.admin-card-resumo::-webkit-details-marker { display: none; }
.admin-card-recolhivel > details > summary.admin-card-resumo::before { content: "▸"; color: var(--acento); transition: transform 0.15s; }
.admin-card-recolhivel > details[open] > summary.admin-card-resumo::before { transform: rotate(90deg); }
.admin-card-recolhivel > details[open] > summary.admin-card-resumo { border-bottom: 1px solid var(--borda); }
.admin-card-resumo-meta { font-size: 0.85rem; color: var(--texto-suave); }
.admin-card-corpo { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 1rem 0.9rem; }
.admin-novo-recolhivel { margin-bottom: 0.9rem; }
.admin-novo-recolhivel > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.admin-card-corpo > label > select.admin-visibilidade { align-self: flex-start; }
.admin-card-controles { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.admin-card-controles label { flex-direction: row !important; align-items: center; gap: 0.4rem; }

/* Verificação das notas (Fase 73, functions/lib/fontes-verificacao.js):
   endereço trocado e correção, marcados para o leitor. */
.nota-verificada { font-size: 0.85em; font-style: italic; color: var(--texto-suave); white-space: nowrap; }
.nota-correcao { display: block; margin-top: 0.45em; padding: 0.35em 0.6em; border-left: 3px solid var(--atencao); background: color-mix(in srgb, var(--atencao) 10%, transparent); font-size: 0.95em; }
.ff-abas { margin-bottom: 0.6rem; }