/* audio-biblia.css — player de áudio bíblico narrado (Bible Brain).
 *
 * Arquivo próprio, e não um bloco <style> repetido: o mesmo player vive em
 * leitura.html, diario.html e panorama.html, e três cópias divergiriam no
 * primeiro ajuste. Mesmo padrão do css/hg-select.css.
 *
 * Reescrito do zero (não remendado) para virar um CARD de verdade — cabeçalho
 * com título/meta/chip, transporte, secundária, créditos — em vez dos
 * controles novos pendurados na barra fina de uma geração anterior. Todas as
 * cores vêm de design-system/colors_and_type.css (NUNCA do handoff em
 * _design-handoff-leitura-biblica/ diretamente — alguns valores de lá são do
 * tema escuro por engano); usar só var(--token) aqui é o que dá claro/escuro
 * de graça via .theme-dark / [data-theme="dark"].
 *
 * Estados deliberadamente FORA deste arquivo (dependem de timing por
 * versículo, que não existe — ver SINCRONISMO_DISPONIVEL em
 * leitor-nucleo.js): waveform, destaque de verso, "verso X de Y", badge
 * SINCRONIZADO. */

/* ── Card ──────────────────────────────────────────────────────────────── */
.leitor-audio {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
}
.leitor-audio[hidden] { display: none; }

/* ── Cabeçalho: ícone · título · meta · chip · colapsar ──────────────────── */
.leitor-audio-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Badge do capítulo — 40×40px, radius 14px, ícone 19px: geometria exata do
 * mockup #player (linha 1394). Não existia até esta rodada. A canvas usa
 * `--primary-soft` para o fundo — token que NÃO existe em
 * design-system/colors_and_type.css (conferido); `--surface-hover` é o
 * equivalente real mais próximo (camada de destaque neutra já usada em
 * outros ícones do player). */
.leitor-audio-icone-capitulo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--surface-hover);
  color: var(--primary-text);
}
.leitor-audio-icone-capitulo .ic { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.leitor-audio-info {
  flex: 1;
  min-width: 0;
}

.leitor-audio-titulo {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leitor-audio-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Chip de estado — "a UI nunca promete sincronismo que o dado não sustenta"
 * (handoff de leitura bíblica). Hoje só "Sem sincronismo" é alcançável
 * (SINCRONISMO_DISPONIVEL=false em leitor-nucleo.js); cor âmbar do par REAL
 * --warning-bg/--warning-fg do design system (não o hex do handoff). Vive no
 * cabeçalho, ao lado do título — não mais espremido na linha de progresso. */
.leitor-audio-chip {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 10px;
  background: var(--warning-bg);
  color: var(--warning-fg);
  white-space: nowrap;
}
.leitor-audio-chip[hidden] { display: none; }

.leitor-audio-colapsar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.leitor-audio-colapsar:hover { background: var(--surface-hover); color: var(--fg); }
.leitor-audio-colapsar .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Progresso: barra + tempo decorrido/restante ─────────────────────────── */
.leitor-audio-progresso { display: flex; flex-direction: column; gap: 4px; }

/* BUG da rodada anterior (achado 18/09): a altura de 4px estava no INPUT
 * inteiro, não só no trilho. Isso reduz a caixa de layout do elemento a
 * 4px — o polegar de 14px (centralizado via margin-top negativo) estoura
 * essa caixa por quase 5px de cada lado, e dentro de um flex com
 * align-items:center (.leitor-audio-volume-grupo) o navegador reserva só
 * os 4px para o input entre os irmãos, deixando o polegar visualmente
 * solto e o trilho difícil de perceber. Correção: o INPUT tem altura
 * própria (20px, cabe o polegar + folga de toque); só o TRILHO
 * (pseudo-elemento) fica fino, 4px — são caixas diferentes.
 *
 * `accent-color` removido: com appearance:none + trilho/polegar
 * totalmente customizados, ele não tem mais papel de fallback (um
 * navegador que entende accent-color é moderno o bastante para entender os
 * pseudo-elementos também) e é uma declaração a mais que pode conflitar
 * dependendo da ordem de aplicação interna do navegador — sem benefício
 * em manter.
 *
 * BUG da rodada anterior (achado 18/09, 2ª causa): mesmo depois do fix de
 * altura acima, o trilho do VOLUME continuava sem aparecer. Medido em
 * Chrome headless com amostragem de pixel real (não getComputedStyle do
 * pseudo-elemento, que aqui devolve os valores do INPUT hospedeiro, não os
 * do pseudo — não confiável para depurar isto): o trilho pintava
 * exatamente rgb(239,237,250), e `.leitor-audio-volume-grupo` (o pílula que
 * o envolve) tem o MESMO rgb(239,237,250) — ambos usavam --surface-hover.
 * Contraste zero por construção, claro e escuro. A regra sempre aplicou
 * (confirmado injetando uma cor diferente, que apareceu na hora); o
 * problema nunca foi cascata/especificidade/agrupamento inválido — era a
 * cor escolhida coincidir exatamente com o fundo do próprio contêiner.
 * Trocado para --border-strong, que este arquivo já usa como "um degrau
 * mais forte que --surface-hover" (ver :hover de .leitor-audio-pill) —
 * contraste visível contra --surface (fundo do card, usado pelo progresso)
 * e contra --surface-hover (fundo do grupo de volume), nos dois temas. */
.leitor-audio-range {
  width: 100%;
  height: 20px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
}
.leitor-audio-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--mark-subtle);
}
.leitor-audio-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--primary-text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.leitor-audio-range::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--mark-subtle);
}
/* Firefox tem um pseudo-elemento próprio para o trecho já tocado —
 * WebKit não tem equivalente sem simular com gradiente via JS, o que o
 * pedido desta tarefa não cobre (só trilho + polegar). */
.leitor-audio-range::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--primary-text);
}
.leitor-audio-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--primary-text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.leitor-audio-tempos {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* ── Transporte: capítulo anterior · -15 · play · +15 · próximo capítulo ── */
.leitor-audio-transporte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.leitor-audio-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.leitor-audio-btn:disabled { opacity: .35; cursor: default; }

/* 44px é o mínimo de alvo de toque (regra escrita da canvas, CD23) — mantido
 * uniforme mobile/desktop. O RAIO agora segue o mockup do #player (14px),
 * não mais var(--radius-pill): a canvas é um player de cantos quadrados
 * arredondados, não circular — ver docs/estado/paridade-player.md. 14px não
 * tem token equivalente no DS real (--radius-sm é 12px, --radius-md é
 * 16px), por isso valor literal. */
.leitor-audio-btn--nav {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.leitor-audio-btn--nav .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leitor-audio-btn--nav:hover:not(:disabled) { background: var(--surface-hover); color: var(--fg); }

.leitor-audio-btn--skip {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  gap: 3px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
}
.leitor-audio-btn--skip .ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leitor-audio-btn--skip:hover:not(:disabled) { background: var(--surface-hover); color: var(--fg); }
/* Rótulo "15" ao lado do ícone (mockup #player, linha 1421). A canvas usa
 * uma fonte mono para o número — o DS real não expõe --font-mono, então
 * fica na UI padrão (mesma divergência permanente já registrada para o
 * tempo decorrido/restante, ver docs/estado/paridade-player.md). */
.leitor-audio-btn--skip span { font-variant-numeric: tabular-nums; }

/* Play/pause GRANDE — é o único botão "cheio" (preenchido) do card; tudo ao
 * redor é ghost/transparente de propósito, para não competir com ele.
 * 60px pelo MOCKUP VISUAL da canvas — CD23 (design-system-v4/canonical/
 * CANONICAL_DECISIONS.md): onde mockup e regra escrita se contradizem, o
 * mockup manda no visível (geometria) e a regra escrita manda no
 * comportamental (alvo mínimo de toque). "Play tem 56px" é a regra escrita
 * cumprindo seu papel — 56 ≥ 44, então o mockup vale para o tamanho real.
 * Raio: 20px no mockup — bate exatamente com --radius-lg do DS real, então
 * usa o token em vez de valor literal. Deixa de ser círculo (era
 * var(--radius-pill)) — é o ajuste mais visível do sistema de raio desta
 * rodada; a FAB (mobile, minimizado) continua circular de propósito, são
 * elementos diferentes que nunca aparecem ao mesmo tempo. */
.leitor-audio-btn--play {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--fg-on-primary);
  box-shadow: var(--shadow-md);
}
.leitor-audio-btn--play:hover:not(:disabled) { background: var(--primary-hover); }
.leitor-audio-btn--play:active:not(:disabled) { background: var(--primary-press); }
.leitor-audio-btn--play .ic { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.leitor-audio-btn--play .ic circle,
.leitor-audio-btn--play .ic path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.leitor-audio-btn--play .ic polygon,
.leitor-audio-btn--play .ic rect { fill: currentColor; stroke: none; }

/* ── Secundária: velocidade · volume · sono · menu ──────────────────────── */
.leitor-audio-secundaria {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* 44px mínimo aqui também — mesma regra do transporte. Raio 13px, igual ao
 * botão de velocidade/volume/sono/overflow no mockup do #player (era
 * var(--radius-pill), círculo/pílula total) — sem token equivalente no DS
 * real, valor literal. */
.leitor-audio-pill {
  flex-shrink: 0;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg-2);
  background: var(--surface-hover);
  border: none;
  border-radius: 13px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.leitor-audio-pill:hover { background: var(--mark-subtle); color: var(--fg); }
.leitor-audio-pill--icone { width: 44px; min-width: 44px; padding: 0; }
.leitor-audio-pill--icone .ic { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leitor-audio-pill--icone .ic polygon { fill: currentColor; stroke: none; }
/* Botão ativo (temporizador de sono ligado): --primary sinaliza "em curso",
 * mesmo tratamento de estado ativo já usado nos chips de passagem. */
.leitor-audio-pill--ativo { background: var(--primary); color: var(--fg-on-primary); }
.leitor-audio-pill--ativo:hover { background: var(--primary-hover); color: var(--fg-on-primary); }

/* Sono com rótulo visível: só quando há um valor ativo (10 min/20 min/etc),
 * mesmo padrão do botão de velocidade (que sempre mostra "1×") — sem isso o
 * botão cicla e muda de estado (cor, aria-label) mas parece quebrado, porque
 * nada na tela muda visivelmente. Desligado continua só ícone (regra do
 * #player, CD24) — o rótulo só aparece quando há algo específico a dizer.
 * Sobrescreve a largura fixa de --icone porque o texto precisa de espaço. */
.leitor-audio-pill--icone.leitor-audio-pill--com-rotulo {
  width: auto;
  padding: 0 12px 0 10px;
}
.leitor-audio-pill-rotulo:empty { display: none; }
.leitor-audio-pill-rotulo { font-size: 11px; white-space: nowrap; }

/* ── Volume: ícone de mudo + slider real ──────────────────────────────────
 * Substitui o botão de 3 estados de um lote anterior — a canvas (#player,
 * linha 1428) usa um <input type="range"> de verdade dentro de um grupo com
 * o ícone de mudo, não um ciclo. 44px de altura (regra de alvo de toque),
 * radius 13px (mesmo raio dos outros controles da linha secundária). O
 * slider reaproveita .leitor-audio-range — mesmo trilho/polegar estilizados
 * para o progresso, só a largura muda (58px, geometria do mockup, em vez de
 * 100%). Some inteiro em navegadores onde audio.volume é somente-leitura
 * (iOS Safari) — ver verificarVolumeAjustavel() em audio-biblia.js. */
.leitor-audio-volume-grupo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 13px 0 11px;
  border-radius: 13px;
  background: var(--surface-hover);
}
.leitor-audio-volume-grupo[hidden] { display: none; }

.leitor-audio-volume-mudo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  padding: 0;
}
.leitor-audio-volume-mudo:hover { color: var(--fg); }
.leitor-audio-volume-mudo .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.leitor-audio-volume-mudo .ic polygon { fill: currentColor; stroke: none; }

.leitor-audio-volume-slider { width: 58px; }

/* ── Menu de overflow ─────────────────────────────────────────────────────
 * Um item hoje ("Recomeçar do início") — desenhado para crescer: é onde
 * ações pouco usadas entram sem disputar espaço com velocidade/volume/sono,
 * que ficam sempre à mostra por serem os ajustes mais frequentes. */
.leitor-audio-menu-wrap { position: relative; }

.leitor-audio-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 180px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.leitor-audio-menu[hidden] { display: none; }

.leitor-audio-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  color: var(--fg);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.leitor-audio-menu-item:hover { background: var(--surface-hover); }

/* ── Créditos: UMA linha discreta ─────────────────────────────────────────
 * As duas atribuições (© Sociedade Bíblica do Brasil e Faith Comes By
 * Hearing) são exigência contratual — o texto nunca muda, só a apresentação:
 * era um <details> colapsável com dois parágrafos empilhados por dentro,
 * agora é texto corrido sempre visível. Sem white-space:nowrap de propósito:
 * as duas atribuições juntas passam de 90 caracteres, e forçar uma linha
 * cortaria com reticências texto que é exigência de licença — "discreta" é
 * sobre peso visual (fonte pequena, cor --fg-3), não sobre nunca quebrar. */
/* Separador + ícone (mockup #player, linha 1437-1440) — a canvas usa
 * border-top:1px solid var(--divider), mas --divider NÃO existe em
 * design-system/colors_and_type.css (conferido); --border é o hairline real
 * já usado no resto deste arquivo (ex.: borda do próprio card). */
.leitor-audio-creditos-linha {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--fg-3);
}
.leitor-audio-creditos-linha[hidden] { display: none; }
.leitor-audio-creditos-linha .ic {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 2px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* ── Estado "indisponível" ─────────────────────────────────────────────────
 * Só o cabeçalho (título/meta/chip) fica visível — o chip carrega a mensagem
 * ("Indisponível — recurso desligado no servidor"). Nada abaixo dele faz
 * sentido mostrar: não há URL, não há progresso, não há o que pular ou
 * ajustar. Aplicado por audio-biblia.js via mostrarIndisponivel(). */
.leitor-audio--indisponivel .leitor-audio-progresso,
.leitor-audio--indisponivel .leitor-audio-transporte,
.leitor-audio--indisponivel .leitor-audio-secundaria,
.leitor-audio--indisponivel .leitor-audio-creditos-linha,
.leitor-audio--indisponivel .leitor-audio-colapsar {
  display: none;
}

/* ── Estado minimizado ────────────────────────────────────────────────────
 * Desktop (≥768px): vira uma mini barra horizontal (título + play pequeno +
 * progresso fino). Mobile (<768px): esconde o card inteiro e mostra o FAB
 * (ver .leitor-audio-fab) — não cabe uma barra e um FAB nos ~390px do
 * desenho, então cada faixa de tela ganha a representação minimizada que faz
 * sentido nela, com o MESMO estado por trás (data-estado="minimizado"). */
.leitor-audio[data-estado="minimizado"] {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}
.leitor-audio[data-estado="minimizado"] .leitor-audio-cabecalho { flex: 1; min-width: 0; align-items: center; }
.leitor-audio[data-estado="minimizado"] .leitor-audio-chip,
.leitor-audio[data-estado="minimizado"] .leitor-audio-meta,
.leitor-audio[data-estado="minimizado"] .leitor-audio-tempos,
.leitor-audio[data-estado="minimizado"] .leitor-audio-btn--nav,
.leitor-audio[data-estado="minimizado"] .leitor-audio-btn--skip,
.leitor-audio[data-estado="minimizado"] .leitor-audio-secundaria,
.leitor-audio[data-estado="minimizado"] .leitor-audio-creditos-linha {
  display: none;
}
.leitor-audio[data-estado="minimizado"] .leitor-audio-transporte { flex: none; }
/* Círculo explícito aqui, não herdado do --radius-lg do play grande: a 40px
 * de lado os dois valores coincidem (20px = metade de 40px), mas depender
 * dessa coincidência quebraria silenciosamente se o tamanho grande mudasse. */
.leitor-audio[data-estado="minimizado"] .leitor-audio-btn--play { width: 40px; height: 40px; border-radius: 50%; box-shadow: none; }
.leitor-audio[data-estado="minimizado"] .leitor-audio-btn--play .ic { width: 18px; height: 18px; }
.leitor-audio[data-estado="minimizado"] .leitor-audio-progresso { flex: none; width: 96px; }

@media (max-width: 767px) {
  .leitor-audio[data-estado="minimizado"] { display: none; }
}

/* ── FAB (mobile, estado minimizado) ─────────────────────────────────────
 * Botão flutuante fixo com anel de progresso (currentTime/duration) — a
 * representação minimizada em telas estreitas. É irmão de .leitor-audio no
 * DOM (não filho): precisa continuar visível mesmo com o card escondido. */
.leitor-audio-fab {
  display: none;
  position: fixed;
  right: var(--space-5);
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 91;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.leitor-audio-fab[hidden] { display: none !important; }

@media (max-width: 767px) {
  /* Só aparece quando o card correspondente está minimizado — irmão
     seguinte no DOM, por isso o combinador geral (~). */
  .leitor-audio[data-estado="minimizado"] ~ .leitor-audio-fab:not([hidden]) { display: flex; }
}

.leitor-audio-fab-anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.leitor-audio-fab-trilho { fill: none; stroke: var(--mark-subtle); stroke-width: 3; }
.leitor-audio-fab-progresso {
  fill: none;
  stroke: var(--primary-text);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 200ms linear;
}
.leitor-audio-fab-icone {
  position: relative;
  display: inline-flex;
  color: var(--primary-text);
}
.leitor-audio-fab-icone .ic { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.leitor-audio-fab-icone .ic circle,
.leitor-audio-fab-icone .ic path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.leitor-audio-fab-icone .ic polygon,
.leitor-audio-fab-icone .ic rect { fill: currentColor; stroke: none; }

/* ── Aviso textual de modo (fora do card) ─────────────────────────────────
 * Usado onde não há chip possível (estado 'tts': sem player, então sem
 * cabeçalho para carregar um chip). Vive fora de .leitor-audio de propósito
 * — ver leitura-integrada.css (#capitulo-aviso) e leitor.js
 * (#leitor-aviso-audio, diario.html/panorama.html). */
.leitor-audio-modo-aviso {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-3);
  padding: 0 var(--space-6) var(--space-3);
  flex-shrink: 0;
}
.leitor-audio-modo-aviso[hidden] { display: none; }

/* ── Spinner do estado "carregando" ───────────────────────────────────────
 * O MP3 de um capítulo tem de 2 a 10 MiB, e numa conexão ruim o intervalo
 * entre o toque e o som é longo o bastante para parecer que o botão não
 * funcionou. */
.audio-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: audio-girar .7s linear infinite;
}
@keyframes audio-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .audio-spinner { animation-duration: 2s; }
  .leitor-audio-btn,
  .leitor-audio-pill,
  .leitor-audio-colapsar { transition: none; }
  .leitor-audio-fab-progresso { transition: none; }
}

/* ── Desktop (≥768px): só folgas maiores — tamanhos de alvo de toque ficam
 * uniformes com o mobile de propósito (56px play, 44px o resto). Antes desta
 * rodada o play subia para 68px e o nav de capítulo CAÍA para 40px no
 * desktop — abaixo do mínimo de 44px que a própria regra pede. ────────── */
@media (min-width: 768px) {
  .leitor-audio {
    padding: var(--space-5) var(--space-6) var(--space-4);
    gap: var(--space-4);
  }
  .leitor-audio-titulo { font-size: var(--fs-body); }
  .leitor-audio-transporte { gap: var(--space-5); }
}