/* ==========================================================================
   IDENTIDADE VISUAL hap-app -- direção aprovada em 2026-09-13 (ver canvas
   "Identidade Visual do hap-app"). Dois temas completos hoje (claro/escuro),
   arquitetura pronta para um terceiro ("sépia") sem redesenho -- mesmo
   princípio de extensibilidade já usado para os planos de assinatura.
   Um único acento (vermelhão/selo de cera) nos dois temas, só ajustado em
   claridade para contraste -- lição do Roderick: um acento por papel
   semântico, nunca vários valores pro mesmo papel.
   ========================================================================== */
:root {
    color-scheme: light;
    --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;
}

/* 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. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;
        --bg: #1c1712;
        --bg-elevado: #262019;
        --borda: #4a3f30;
        --texto: #ece2d0;
        --texto-suave: #b0a488;
        --acento: #c1443a;
        --sucesso: #6b9b6b;
        --atencao: #d9a441;
        --erro: #e0574a;
    }
}

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

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

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

#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 {
    font-family: var(--fonte-marca);
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--acento);
    text-decoration: none;
}

.botao-tema {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--borda);
    background: var(--bg);
    color: var(--texto-suave);
    border-radius: 20px;
    padding: 0.3rem 0.8rem 0.3rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
}

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

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

.lista-livros {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.lista-livros a {
    display: block;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: var(--bg-elevado);
}

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

.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;
}

.termo-glossario {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted var(--acento);
    text-underline-offset: 3px;
}

.termo-glossario:hover { color: var(--acento); }

/* Í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%;
    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;
}

/* 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;
}

/* Glossário: talhe de "cartão de dicionário" -- sem serifa, cantos mais
   arredondados, termo em destaque como cabeçalho de verbete. */
.modal-glossario {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    border-radius: 16px;
    background: var(--bg-elevado);
}

.modal-glossario-termo {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    text-transform: capitalize;
    color: var(--texto);
}

.modal-glossario .modal-corpo p {
    margin: 0 0 0.6rem;
}

/* Resumo Profético: talhe de "ficha de decodificação" -- duas seções
   rotuladas (Fato Histórico / Significado Profético), a segunda com um
   realce de tinta do acento, num formato deliberadamente diferente dos
   outros dois modais. */
.modal-resumo-verso {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.modal-resumo-secao {
    margin-bottom: 0.9rem;
}

.modal-resumo-secao h3 {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
}

.modal-resumo-secao p {
    margin: 0;
    line-height: 1.55;
}

.modal-resumo-secao-significado {
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    background: var(--acento-tinta);
}

.resumo-capitulo {
    margin-bottom: 1.5rem;
}

.resumo-capitulo h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave);
    margin: 0 0 0.6rem;
}

.resumo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip-versiculo {
    border: 1px solid var(--borda);
    background: var(--bg-elevado);
    color: var(--texto);
    border-radius: 20px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.chip-versiculo:hover {
    border-color: var(--acento);
    color: var(--acento);
}

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

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

.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-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);
}

.admin-card input[type="text"], .admin-card textarea, .admin-novo input, .admin-novo textarea {
    font: inherit;
    color: var(--texto);
    background: var(--bg-elevado);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    resize: vertical;
}

.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; }

.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);
}

.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-subtitulo {
    font-size: 0.85rem;
    color: var(--texto-suave);
    margin: 0 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);
}

.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); }

.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); }

.gate-planos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plano-opcao {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg);
}

.plano-opcao h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--texto);
}

.plano-opcao p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--texto-suave);
}

.plano-opcao button {
    align-self: flex-start;
    border: 1px solid var(--acento);
    background: var(--acento);
    color: var(--bg);
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

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