/* Base do app de entrega (lei 27). Celular primeiro e só; no computador, a mesma coluna centralizada.
   Fonte do sistema para a interface, serifa do sistema para o texto de leitura (a Palavra). Claro e escuro seguem o aparelho.
   Variáveis de cor da oferta (--cor, --cor-escuro, --dourado) são gravadas pelo montar.py em :root. */
:root {
  --cor: #6B1D2A; --cor-escuro: #D9808E; --dourado: #B08D3C;
  --fundo: #FBF8F3; --papel: #FFFFFF; --tinta: #2B2320; --tinta2: #6E635E; --linha: #E6DFD5; --suave: #F3EDE3;
  --acento: var(--cor); --acento-texto: #FFFFFF; --ok: #2E7D4F;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, "Noto Serif", "Times New Roman", serif;
  --leitura: 18px;
  --raio: 16px; --abas-altura: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #1B1517; --papel: #262022; --tinta: #F2EAE2; --tinta2: #B8ABA3; --linha: #3A3134; --suave: #2F282B;
          --acento: var(--cor-escuro); --acento-texto: #1B1517; --ok: #7FD1A0; }
}
html.letra-media { --leitura: 20px; }
html.letra-grande { --leitura: 23px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; } /* o atributo hidden vence o display das classes (.sobre, .abas) */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 17px/1.5 var(--sans); min-height: 100dvh; }
body.com-abas { padding-bottom: calc(var(--abas-altura) + var(--safe-b)); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento); }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0 0 12px; }
.semjs { padding: 24px; }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* A coluna do celular, também no computador */
.tela { max-width: 480px; margin: 0 auto; padding: calc(16px + var(--safe-t)) 20px 32px; min-height: 60vh; }
.tela > * + * { margin-top: 16px; }
.cabeca { padding-top: 8px; }
.cabeca .sobre-titulo { color: var(--tinta2); font-size: 15px; margin: 0 0 4px; }
.cabeca p.sub { color: var(--tinta2); margin-top: 6px; }

/* Botões: 52 px, largura total; o secundário é mais leve. Nunca menos de 44 px. */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 12px 18px;
  border: 0; border-radius: 14px; background: var(--acento); color: var(--acento-texto); font-weight: 700; font-size: 17px;
  transition: transform .15s ease, opacity .15s ease; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.leve { background: var(--suave); color: var(--tinta); }
.btn.linha { background: transparent; border: 2px solid var(--linha); color: var(--tinta); }
.btn[disabled] { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--acento); text-decoration: underline; min-height: 44px; padding: 8px 0; font-size: 17px; }
.linha-acoes { display: flex; gap: 12px; }
.linha-acoes > * { flex: 1; }

/* Campo de entrar */
.campo { display: block; width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid var(--linha); border-radius: 14px;
  background: var(--papel); font-size: 18px; }
.campo:focus { border-color: var(--acento); outline: 0; }
.rotulo { display: block; font-weight: 600; margin-bottom: 8px; }
.aviso { padding: 14px 16px; border-radius: 12px; background: var(--suave); border-left: 4px solid var(--dourado); }
.aviso.erro { border-left-color: #B3261E; }

/* Cartões: só onde há um grupo de ações. Leitura não tem cartão. */
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.cartao > * + * { margin-top: 12px; }
.cartao .rotulo-pequeno { color: var(--tinta2); font-size: 15px; margin: 0; }
.cartao.destaque { border-color: color-mix(in srgb, var(--acento) 45%, var(--linha)); }
.cartao.dourado { border-color: var(--dourado); background: color-mix(in srgb, var(--dourado) 8%, var(--papel)); }

/* A grade das 40 (o elemento que se pinta) */
.grade { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.grade span { aspect-ratio: 1; border-radius: 6px; background: var(--suave); border: 1px solid var(--linha); transition: background .25s; }
.grade span.lida { background: var(--acento); border-color: var(--acento); }
.grade span.atual { border: 2px solid var(--dourado); }
.progresso { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--tinta2); font-size: 15px; }
.progresso b { color: var(--tinta); font-size: 17px; white-space: nowrap; }
.progresso span { text-align: right; }
.barra { height: 8px; border-radius: 4px; background: var(--suave); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--acento); border-radius: 4px; transition: width .3s; }

/* Dias seguidos */
.dias { display: flex; align-items: center; gap: 12px; }
.dias .num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--acento); font-variant-numeric: tabular-nums; }
.dias small { color: var(--tinta2); font-size: 15px; display: block; }

/* Listas tocáveis (trilha, parábolas, temas, mais) */
.lista { list-style: none; margin: 0; padding: 0; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.lista li + li { border-top: 1px solid var(--linha); }
.item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 16px; background: none; border: 0; text-align: left; color: inherit; }
.item:active { background: var(--suave); }
.item .n { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--suave); color: var(--tinta2); font-variant-numeric: tabular-nums; }
.item.lida .n { background: var(--acento); color: var(--acento-texto); }
.item .txt { flex: 1; min-width: 0; }
.item .txt b { display: block; font-weight: 600; }
.item .txt small { display: block; color: var(--tinta2); font-size: 15px; }
.item .seta { flex: 0 0 auto; color: var(--tinta2); }
.item .ico { flex: 0 0 28px; color: var(--acento); }
.secao { margin: 24px 0 8px; }
.secao h2 { font-size: 19px; }
.secao p { color: var(--tinta2); margin: 2px 0 0; font-size: 15px; }

/* Leitura: página de livro, sem cartão */
.leitura { font-family: var(--serif); font-size: var(--leitura); line-height: 1.6; }
.leitura p { margin: 0 0 14px; }
.leitura .passo { margin: 26px 0 0; }
.leitura .passo-cab { display: flex; align-items: center; gap: 12px; font-family: var(--sans); margin-bottom: 8px; }
.leitura .passo-cab .num { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--acento); color: var(--acento-texto);
  display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.leitura .passo-cab .ref { font-weight: 700; font-size: 17px; line-height: 1.3; }
.leitura .passo-cab .ref small { display: block; font-weight: 500; color: var(--tinta2); font-size: 14px; }
.leitura .passo.antigo { border-left: 3px solid var(--dourado); padding-left: 14px; }
.leitura .passo.novo { border-left: 3px solid var(--acento); padding-left: 14px; }
.leitura .ligacao { margin-top: 26px; }
.leitura .ligacao .passo-cab .num { background: var(--tinta); color: var(--fundo); }
.leitura .missa { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--suave); font-family: var(--sans); font-size: 16px; }
.leitura .missa b { display: block; margin-bottom: 4px; }
.leitura .guardar { margin-top: 26px; padding: 18px; border: 2px solid var(--dourado); border-radius: var(--raio); font-style: italic; }
.leitura .guardar b { font-style: normal; font-family: var(--sans); display: block; margin-bottom: 6px; font-size: 15px; color: var(--tinta2); }
.rodape-biblia { color: var(--tinta2); font-size: 14px; margin-top: 20px; }

/* Vídeo (apoio): player oficial com crédito */
.video { margin-top: 24px; font-family: var(--sans); font-size: 15px; }
.video .quadro { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.video .quadro img, .video .quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .quadro img { object-fit: cover; }
.video .tocar { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.25); color: #fff; font-size: 17px; font-weight: 700; display: grid; place-items: center; }
.video .credito { color: var(--tinta2); margin-top: 8px; }
.video .credito a { margin-right: 14px; display: inline-block; min-height: 44px; line-height: 44px; }

/* Botão fixo de concluir */
.fixo { position: sticky; bottom: calc(var(--abas-altura) + var(--safe-b)); margin-top: 28px; padding: 28px 0 12px;
  background: linear-gradient(to bottom, transparent, var(--fundo) 45%); }
.fixo .btn { box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.fixo .btn.feito { background: var(--ok); color: #fff; }

/* Abas embaixo: sempre visíveis, ícone + uma palavra */
.abas { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--abas-altura) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha); display: flex; z-index: 20; }
.abas .wrap { display: flex; width: 100%; max-width: 480px; margin: 0 auto; }
.abas button { flex: 1; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--tinta2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 600; padding: 6px 0; }
.abas button svg { width: 26px; height: 26px; }
.abas button.ativa { color: var(--acento); }

/* Sobreposição: comemoração */
.sobre { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--fundo) 94%, transparent); display: grid; place-items: center; padding: 24px; }
.sobre .caixa { width: 100%; max-width: 400px; background: var(--papel); border-radius: 22px; padding: 28px 22px; text-align: center; border: 1px solid var(--linha);
  animation: subir .25s ease-out; }
@keyframes subir { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.sobre .check { width: 96px; height: 96px; margin: 0 auto 14px; }
.sobre .check circle { fill: none; stroke: var(--acento); stroke-width: 4; }
.sobre .check path { fill: none; stroke: var(--acento); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60; animation: desenhar .5s .15s ease-out forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.sobre h2 { margin-bottom: 6px; }
.sobre p { color: var(--tinta2); }
.sobre .btn + .btn { margin-top: 10px; }

/* Carinhas */
.carinhas { display: flex; gap: 10px; }
.carinhas button { flex: 1; min-height: 56px; font-size: 30px; border: 2px solid var(--linha); border-radius: 14px; background: var(--papel); }

/* Calendário do Plano 2027 */
.meses { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.meses::-webkit-scrollbar { display: none; }
.meses button { flex: 0 0 auto; min-height: 44px; padding: 8px 16px; border-radius: 22px; border: 2px solid var(--linha); background: var(--papel); font-weight: 600; }
.meses button.ativa { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.bloco-porque { padding: 14px 16px; border-radius: 12px; background: var(--suave); border-left: 4px solid var(--dourado); }
.bloco-porque b { display: block; margin-bottom: 4px; }
.dia { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linha); }
.dia:first-child { border-top: 0; }
.dia .data { flex: 0 0 44px; text-align: center; line-height: 1.1; }
.dia .data b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.dia .data small { color: var(--tinta2); font-size: 13px; }
.dia .cap { flex: 1; min-width: 0; font-size: 16px; }
.dia .cap .nt { color: var(--tinta2); display: block; }
.dia .cap .jesus { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0 10px; border-radius: 10px; border: 0;
  background: color-mix(in srgb, var(--dourado) 18%, var(--papel)); color: var(--tinta); font-weight: 600; font-size: 15px; }
.dia .marcar { flex: 0 0 44px; height: 44px; border-radius: 12px; border: 2px solid var(--linha); background: var(--papel); display: grid; place-items: center; color: transparent; }
.dia .marcar.feito { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.dia.hoje { background: color-mix(in srgb, var(--dourado) 10%, var(--papel)); }
.dia.previa .marcar { opacity: .35; }
.livros { columns: 2; column-gap: 16px; list-style: none; padding: 0; margin: 0; }
.livros li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 16px; }
.livros li.riscado { text-decoration: line-through; color: var(--tinta2); }
.tranca { text-align: center; padding: 8px 0; }
.tranca .cadeado { font-size: 40px; }

/* Mais: tamanho da letra */
.letras { display: flex; gap: 10px; }
.letras button { flex: 1; min-height: 52px; border-radius: 12px; border: 2px solid var(--linha); background: var(--papel); font-family: var(--serif); }
.letras button.ativa { border-color: var(--acento); color: var(--acento); }
.letras button:nth-child(1) { font-size: 16px; } .letras button:nth-child(2) { font-size: 19px; } .letras button:nth-child(3) { font-size: 22px; }

.mapa-bloco h3 { margin: 18px 0 6px; }
.mapa-bloco ul { list-style: none; padding: 0; margin: 0; }
.mapa-bloco li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 16px; }
.mapa-bloco li small { color: var(--tinta2); text-align: right; }
.centro { text-align: center; }
.suave-txt { color: var(--tinta2); font-size: 15px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca .selo { width: 48px; height: 48px; border-radius: 12px; background: var(--acento); color: var(--acento-texto); display: grid; place-items: center; font-family: var(--serif); font-size: 26px; font-weight: 700; }