/* Secao 480: leitor do livro de edificacao. Tema claro, sepia e escuro por variaveis. */
:root {
  --fundo: #F7F5EF; --papel: #FBFAF6; --cartao: #FFFFFF; --borda: #ECE9E0;
  --texto: #1D2321; --texto-livro: #26241F; --suave: #6B6A63;
  --verde: #1F3B33; --verde-escuro: #142722; --ouro: #B7832F; --ouro-claro: #E2C38A; --destaque: #F3E7C9;
  --letra: 19px;
}
body.tema-sepia { --fundo: #EFE4CC; --papel: #F4E9D2; --cartao: #FAF1DE; --borda: #E0D3B6; --texto-livro: #3B2F1E; --suave: #6E604A; --destaque: #E9D5A6; }
body.tema-escuro { --fundo: #15191A; --papel: #1B2021; --cartao: #22282A; --borda: #2E3638; --texto: #E7EAE8; --texto-livro: #DEDDD6; --suave: #9AA39F; --verde: #3E7A68; --verde-escuro: #2F6253; --destaque: #4A3F22; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--texto); font-family: Figtree, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--verde); }
.carregando { padding: 32px; color: var(--suave); }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

.botao { min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--verde); color: #fff; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.botao:hover { background: var(--verde-escuro); }
.botao:disabled { opacity: .6; cursor: wait; }
.botao.claro { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.botao.link { background: transparent; color: var(--verde); min-height: 44px; padding: 0 8px; }
.ico { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--texto); flex: none; }
.ico:hover { background: var(--borda); }
.ico.on { color: var(--ouro); }
.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.campo input { min-height: 50px; border: 1.5px solid var(--borda); border-radius: 12px; padding: 0 14px; font-size: 16px; background: var(--cartao); }
.aviso { border-radius: 10px; padding: 10px 14px; background: #FDECEC; color: #8B2323; font-size: 14px; }
.aviso.ok { background: #E3F1EA; color: #1D5C40; }

/* ---- Entrar ---- */
.entrar { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 20px calc(32px + env(safe-area-inset-bottom)); }
.entrar-caixa { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.entrar h1 { margin: 0; font-family: Literata, Georgia, serif; font-weight: 600; font-size: 28px; text-align: center; color: var(--verde-escuro); }
body.tema-escuro .entrar h1 { color: var(--texto); }
.entrar p { margin: 0; text-align: center; color: var(--suave); line-height: 1.5; }
.lembrar { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.lembrar input { width: 20px; height: 20px; accent-color: var(--verde); }

/* ---- Capa desenhada ---- */
.capa { aspect-ratio: 2 / 3; border-radius: 3px 8px 8px 3px; background: var(--cor, #1F3B33); box-shadow: 0 10px 22px rgba(20,39,34,.25), inset 5px 0 0 rgba(0,0,0,.25); display: flex; flex-direction: column; justify-content: flex-end; padding: 10% 9% 10% 13%; color: #fff; overflow: hidden; }
.capa img { width: 100%; height: 100%; object-fit: cover; }
.capa.com-imagem { padding: 0; }
.capa-titulo { font-family: Literata, Georgia, serif; font-style: italic; font-weight: 600; font-size: 13px; line-height: 1.2; }
.capa svg { width: 70%; }

/* ---- Biblioteca ---- */
.biblioteca { display: flex; min-height: 100%; }
.lateral { display: none; }
.principal { flex: 1; min-width: 0; padding: 24px 20px calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 22px; max-width: 1040px; margin: 0 auto; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo h1 { margin: 0; font-family: Literata, Georgia, serif; font-weight: 600; font-size: 30px; color: var(--verde-escuro); }
body.tema-escuro .topo h1, body.tema-escuro .continue-titulo, body.tema-escuro .secao-titulo { color: var(--texto); }
.avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; border: 0; cursor: pointer; }
.continue { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 16px; display: flex; gap: 16px; align-items: stretch; }
.continue .capa { width: 100px; flex: none; }
.continue-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.continue-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ouro); }
.continue-titulo { font-family: Literata, Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--verde-escuro); }
.continue-sub { font-size: 13px; color: var(--suave); }
.barra { display: flex; align-items: center; gap: 8px; }
.barra-trilho { flex: 1; height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden; }
.barra-cheia { height: 100%; background: var(--verde); }
.continue-acoes { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.continue-acoes .botao { flex: 1; min-height: 44px; }
.secao-titulo { font-family: Literata, Georgia, serif; font-weight: 600; font-size: 19px; color: var(--verde-escuro); margin: 0; }
.estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; }
.estante-item { display: flex; flex-direction: column; gap: 6px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.estante-item b { font-size: 14px; }
.estante-item span { font-size: 12px; color: var(--suave); }
.abas { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--cartao); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.aba { flex: 1; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--suave); border: 0; background: none; cursor: pointer; }
.aba.on { color: var(--verde); }
body.tema-escuro .aba.on { color: var(--ouro-claro); }
.marcacao { display: flex; gap: 10px; align-items: flex-start; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.marcacao button.ir { flex: 1; text-align: left; border: 0; background: none; cursor: pointer; padding: 0; }
.marcacao small { color: var(--suave); }
.perfil { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
@media (min-width: 900px) {
  .lateral { display: flex; flex-direction: column; gap: 4px; width: 230px; flex: none; border-right: 1px solid var(--borda); padding: 28px 14px; }
  .lateral .marca { font-family: Literata, Georgia, serif; font-weight: 600; font-size: 17px; color: var(--verde); padding: 0 12px 18px; }
  .lateral button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; font-size: 15px; text-align: left; color: var(--texto); }
  .lateral button.on { background: var(--borda); font-weight: 700; }
  .abas { display: none; }
  .principal { padding: 40px 48px; }
  .continue { padding: 24px; gap: 28px; }
  .continue .capa { width: 150px; }
  .continue-titulo { font-size: 26px; }
}

/* ---- Leitura ---- */
.leitor { display: flex; min-height: 100%; background: var(--papel); }
.sumario { display: none; }
.leitura { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.leitura-topo { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 4px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px; background: var(--papel); border-bottom: 1px solid var(--borda); }
.leitura-topo .meio { flex: 1; min-width: 0; text-align: center; }
.leitura-topo .meio small { display: block; font-size: 12px; color: var(--suave); }
.leitura-topo .meio b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.continuando { margin: 14px 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--verde); color: #fff; font-size: 14px; line-height: 1.4; display: flex; gap: 10px; align-items: center; }
.texto { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 24px 24px 40px; font-family: Literata, Georgia, serif; font-size: var(--letra); line-height: 1.75; color: var(--texto-livro); }
.texto h1 { font-family: Literata, Georgia, serif; font-weight: 600; font-size: 1.6em; line-height: 1.2; margin: 0 0 .2em; color: var(--texto-livro); }
.texto .cap-eyebrow { font-family: Figtree, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin-bottom: 8px; }
.texto p { margin: 0 0 1em; white-space: pre-line; }
.texto p.lendo { background: var(--destaque); box-shadow: 0 0 0 6px var(--destaque); border-radius: 4px; }
.texto p.marcado { border-left: 3px solid var(--ouro); padding-left: 10px; }
.navegar { display: flex; justify-content: space-between; gap: 10px; max-width: 680px; width: 100%; margin: 0 auto; padding: 0 24px 24px; }
.leitura-rodape { position: sticky; bottom: 0; z-index: 4; background: var(--papel); border-top: 1px solid var(--borda); padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; }
.rodape-linha { display: flex; align-items: center; gap: 4px; }
.rodape-linha .info { flex: 1; font-size: 13px; color: var(--suave); }
.trilho { position: relative; height: 4px; border-radius: 2px; background: var(--borda); }
.trilho > div { height: 100%; border-radius: 2px; background: var(--verde); }
.gaveta-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 10; }
.gaveta { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); background: var(--cartao); z-index: 11; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 14px 24px; display: flex; flex-direction: column; gap: 6px; }
.gaveta h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); margin: 14px 8px 6px; }
.cap-item { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 8px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 15px; width: 100%; }
.cap-item.atual { background: var(--borda); font-weight: 700; }
.cap-item .ok { color: #2F7D5B; width: 14px; }
.painel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; background: var(--cartao); border-radius: 18px 18px 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -10px 30px rgba(0,0,0,.15); max-width: 560px; margin: 0 auto; }
.painel h2 { margin: 0; font-size: 16px; }
.grupo { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--borda); background: transparent; cursor: pointer; font-weight: 600; }
.chip.on { background: var(--verde); border-color: var(--verde); color: #fff; }
@media (min-width: 1000px) {
  .sumario { display: flex; flex-direction: column; gap: 4px; width: 290px; flex: none; border-right: 1px solid var(--borda); background: var(--fundo); padding: 24px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .so-celular { display: none !important; }
  .texto { padding-top: 40px; }
}

/* ---- Ouvir (modo direcao) ---- */
.ouvir { min-height: 100%; background: #0F211D; color: #fff; padding: calc(16px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; max-width: 560px; margin: 0 auto; }
body.modo-ouvir { background: #0F211D; }
.ouvir a, .ouvir .ico { color: var(--ouro-claro); }
.ouvir .ico:hover { background: #16302A; }
.ouvir-topo { display: flex; align-items: center; justify-content: space-between; }
.ouvir-topo small { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #9FB5AD; }
.ouvir-titulo { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ouvir-titulo small { color: #9FB5AD; }
.ouvir-titulo b { font-family: Literata, Georgia, serif; font-size: 24px; font-weight: 600; line-height: 1.25; }
.ouvir-trecho { background: #16302A; border-radius: 14px; padding: 14px 16px; font-family: Literata, Georgia, serif; font-size: 16px; line-height: 1.6; color: #DCE7E2; max-height: 9.6em; overflow: hidden; }
.ouvir-controles { display: flex; align-items: center; justify-content: center; gap: 24px; }
.redondo { border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.redondo.pequeno { width: 68px; height: 68px; background: #16302A; color: #fff; }
.redondo.grande { width: 116px; height: 116px; background: var(--ouro-claro); color: #142722; }
.ouvir .rotulo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9FB5AD; }
.vozes { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.voz { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px; border: 1.5px solid #2E4A42; background: #16302A; color: #fff; cursor: pointer; text-align: left; }
.voz.on { border-color: var(--ouro-claro); background: #21423A; }
.voz small { display: block; color: #B9CBC4; font-size: 13px; }
.ouvir .chip { border-color: #2E4A42; color: #fff; }
.ouvir .chip.on { background: var(--ouro-claro); border-color: var(--ouro-claro); color: #142722; }
.ouvir-nota { margin-top: auto; font-size: 13px; line-height: 1.5; color: #9FB5AD; text-align: center; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.ouvir-estado { min-height: 1.2em; font-size: 14px; color: var(--ouro-claro); text-align: center; }
.grupo-vozes { display: block; margin: 6px 2px 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #9FB5AD; }

/* ---- Secao 524: leitura acompanhada (tocador no rodape) e idioma do livro ---- */
.tocador { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 6px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.tocador[hidden] { display: none; }
.tocador-linha { display: flex; align-items: center; gap: 8px; }
.redondo.medio { width: 52px; height: 52px; background: var(--verde); color: #fff; flex: none; }
.redondo.medio svg { width: 26px; height: 26px; }
.redondo.mini { width: 40px; height: 40px; background: var(--borda); color: var(--texto); font-weight: 700; font-size: 14px; flex: none; }
.tocador-voz { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--borda); border-radius: 999px; background: transparent; padding: 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; }
.tocador-aviso { font-size: 12px; color: var(--suave); line-height: 1.35; }
.texto.acompanhando p, .texto.acompanhando h1 { cursor: pointer; }
.texto.acompanhando p:hover { background: color-mix(in srgb, var(--destaque) 45%, transparent); border-radius: 4px; }
.texto h1.lendo { background: var(--destaque); box-shadow: 0 0 0 6px var(--destaque); border-radius: 4px; }
.texto p.lendo { transition: background-color .25s; }
@media (prefers-reduced-motion: reduce) { .texto p.lendo { transition: none; } }
.idiomas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.idiomas small { font-size: 12px; color: var(--suave); margin-right: 2px; }
.chip.pequeno { min-height: 36px; padding: 0 12px; font-size: 13px; }
.painel-vozes { max-height: 85vh; overflow-y: auto; }
.painel .voz { border-color: var(--borda); background: var(--fundo); color: var(--texto); }
.painel .voz.on { border-color: var(--verde); background: var(--destaque); }
.painel .voz small, .painel .grupo-vozes { color: var(--suave); }