/* leitura-integrada.css — o texto bíblico dentro do fluxo da tela do dia.
 *
 * Substitui o overlay do leitor em leitura.html. O overlay continua existindo em
 * diario.html e panorama.html, com o CSS próprio de cada uma — ali o texto é um
 * desvio, e voltar para onde se estava faz sentido.
 *
 * Todos os valores saem dos tokens reais de design-system/colors_and_type.css.
 * Em particular os RAIOS: --radius-md 16px / --radius-lg 20px / --radius-xl 28px,
 * a escala v2 do DS. */

/* ── Barra de passagens (sticky) ───────────────────────────────────────────
 * Encaixa abaixo do header. A altura do header é medida em runtime por
 * js/leitura.js e publicada em --altura-header: fixar o valor no CSS quebraria
 * assim que o header mudasse de padding ou o nome do plano quebrasse em duas
 * linhas. O fallback cobre o instante antes da primeira medição. */
.barra-passagens {
  position: sticky;
  top: var(--altura-header, 60px);
  z-index: 90;
  margin: 0 calc(-1 * var(--space-5)) var(--space-8);
  padding: var(--space-3) var(--space-5);
  background: var(--nav-glass);
  backdrop-filter: blur(var(--blur));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.barra-passagens .sec-titulo { margin-bottom: var(--space-3); }

.passagens-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.passagens-chips::-webkit-scrollbar { display: none; }
.passagens-chips .passagem-chip { flex: none; }

/* Selecionada ≠ lida. "Selecionada" é o capítulo que está na tela agora;
 * "ativa" (já existente) é a passagem marcada como lida. As duas coexistem. */
.passagem-chip.selecionada {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--fg-on-primary);
  box-shadow: var(--shadow-glow-soft);
}
.passagem-chip.selecionada .chip-pendente { border-color: rgba(255,255,255,.65); }
.passagem-chip.selecionada .chip-check { background: var(--bg-deep); color: var(--success); }

/* ── Introdução com dobra ──────────────────────────────────────────────────
 * Não é accordion fechado: o primeiro parágrafo é o gancho do dia e precisa
 * estar visível. A máscara evita o corte seco no meio de uma linha. */
.intro-dobra {
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.intro-dobra.recolhida {
  max-height: 196px;
  mask-image: linear-gradient(#000 118px, transparent);
  -webkit-mask-image: linear-gradient(#000 118px, transparent);
}

.intro-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.btn-dobra .ic { transition: transform var(--dur-base) ease; }
.btn-dobra[aria-expanded="true"] .ic { transform: rotate(180deg); }

/* ── Capítulo ──────────────────────────────────────────────────────────────*/
.sec-capitulo { margin-bottom: var(--space-10); }
.sec-capitulo[hidden] { display: none; }

.capitulo-card {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.capitulo-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.capitulo-titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--fg);
  line-height: var(--lh-snug);
}

.capitulo-meta {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  margin-top: 2px;
}

.capitulo-controles {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Aviso de estado do áudio — só sobra pro estado TTS (sem áudio narrado): nesse
 * caso o player (.leitor-audio) nem renderiza, então não há onde pôr um chip.
 * O estado "sem sincronismo" (que TEM player) usa o chip âmbar no cabeçalho
 * dele — ver .leitor-audio-chip em css/audio-biblia.css — em vez deste
 * banner; aqui vira legenda muda, sem caixa colorida, porque cabe numa linha
 * e não é alarme, é só contexto. */
.capitulo-aviso {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: var(--space-4);
}
.capitulo-aviso[hidden] { display: none; }

/* Tamanho e fonte vêm das preferências de leitura (js/leitura-preferencias.js → variáveis em <html>);
 * sem o script valem os fallbacks: 18px e Lora. */
.capitulo-corpo {
  font-family: var(--leitura-fonte-biblica, var(--font-read));
  line-height: 1.85;
  font-size: var(--leitura-tam, 18px);
}

.capitulo-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.capitulo-acoes .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#btn-proxima-passagem[hidden] { display: none; }

/* ── Versículos ────────────────────────────────────────────────────────────*/
.leitor-versiculo {
  margin-bottom: var(--space-4);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-left: calc(-1 * var(--space-3));
  margin-right: calc(-1 * var(--space-3));
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.leitor-versiculo:hover { background: var(--surface-2); }

/* Destaque sem borda-esquerda colorida (anti-padrão do DS) — pill de fundo. */
.leitor-versiculo.leitor-destacado { background: rgba(123,127,232,.18); }
.leitor-versiculo.leitor-destacado:hover { background: rgba(123,127,232,.24); }

.leitor-dica {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--fg-3);
  margin-bottom: var(--space-5);
  user-select: none;
}

.leitor-ver-num {
  font-size: .65em;
  color: var(--verse-num);
  font-weight: 700;
  vertical-align: super;
  margin-right: 2px;
}
.leitor-ver-texto { color: var(--fg); }

/* A barra de áudio (css/audio-biblia.css) nasceu no rodapé de um modal em
 * coluna flex, onde ficava sempre visível de graça (irmã não-rolável do corpo
 * do modal). Aqui o capítulo vive no fluxo normal da página — sem isto ela só
 * aparecia depois de rolar o capítulo inteiro. Flutuante, reaproveitando a
 * convenção de barra fixa já usada em css/fluxo-grupo.css (.fg-fab-wrap):
 * fixed + z-index abaixo da bottom-nav (100). A altura real é medida em
 * runtime por publicarAlturaBarraAudio() (js/leitor-inline.js) e soma no
 * padding-bottom de .leitura-wrapper — mesmo padrão de --altura-header. */
/* Só posição + vidro aqui — a aparência do card (padding, cantos, sombra,
 * cabeçalho, transporte...) é toda de css/audio-biblia.css, compartilhada com
 * o modal de diario.html/panorama.html. Duplicar padding/cor aqui é exatamente
 * o tipo de cópia que diverge no primeiro ajuste (ver comentário daquele
 * arquivo). */
.leitor-audio {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));   /* 68px = altura da bottom-nav */
  z-index: 90;
  margin: 0;
  background: var(--nav-glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* O FAB (mobile, estado minimizado) também é fixed — precisa subir acima da
 * bottom-nav, mesma referência de altura da barra cheia. */
.leitor-audio-fab {
  bottom: calc(68px + var(--space-3) + env(safe-area-inset-bottom, 0px));
}

/* Desktop: sem bottom-nav — a barra vai até o rodapé de verdade, só recuando
 * da sidebar fixa de 248px (design-system/components.css, .sidebar). */
@media (min-width: 768px) {
  .leitor-audio {
    left: 248px;
    bottom: 0;
  }
}

@media (max-width: 600px) {
  .leitor-audio { padding-left: var(--space-4); padding-right: var(--space-4); }

  /* O wrapper cai de 20px para 16px de padding aqui — a sangria da barra tem de
     acompanhar, senão ela vaza 4px de cada lado e a página inteira ganha scroll
     horizontal. */
  .barra-passagens {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .capitulo-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-5) var(--space-4);
  }
  .capitulo-header { flex-direction: column; }
}