/* css/audio.css: mini player global de áudio e estado de áudio da aula
 * (05/09/2026). Carregado em todas as cascas; só age onde o
 * assets/js/magis-audio.js monta o player (área do prescritor, body.tema-app).
 * Cores só por token --mg-*: o tema escuro troca os tokens e o player segue. */

/* ---------- bloco "Ouvir só o áudio" na tela da aula ---------- */
.aula-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 0; }
.aula-audio p { margin: 0; flex: 1 1 240px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--mg-tinta-2); }
.aula-audio .btn { min-height: 46px; }
.aula-audio .btn.ativo { background: var(--mg-verde-800); color: var(--mg-creme); }
.aula-audio-espera .badge { min-height: 30px; display: inline-flex; align-items: center; }

/* ---------- botão de ouvir do podcast ---------- */
.pod-ouvir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.pod-ouvir .btn { min-height: 46px; }
.pod-ouvir .btn.ativo { background: var(--mg-verde-900); }
.pod-ouvir-estado { font-size: 12.5px; color: var(--mg-tinta-2); font-variant-numeric: tabular-nums; }
.pod-ouvir-estado:empty { display: none; }

/* ---------- mini player ---------- */
/* Fica logo acima da barra inferior no telefone (a altura dela vai para
 * --mga-base pelo script, já com a área segura do iPhone) e no rodapé no
 * desktop, deslocado pela barra lateral. z-index abaixo da barra inferior (70)
 * e acima do conteúdo. */
.mg-audio {
  position: fixed; left: 0; right: 0; bottom: var(--mga-base, 0px); z-index: 69;
  background: var(--mg-branco); border-top: 1px solid var(--mg-borda);
  box-shadow: 0 -8px 28px rgba(34, 48, 42, .12);
  padding: 0 10px 8px; font-family: var(--ff-texto); color: var(--mg-tinta);
}
.mg-audio[hidden] { display: none; }
@media (min-width: 1024px) {
  .mg-audio { left: 264px; padding: 0 24px 10px; }
  .sidebar-recolhida .mg-audio { left: 76px; }
}
html[data-tema="escuro"] .mg-audio { box-shadow: 0 -8px 28px rgba(0, 0, 0, .45); }

.mg-audio-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer; accent-color: var(--mg-verde-800);
}
.mg-audio-range:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: -2px; border-radius: 6px; }
.mg-audio-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--mg-verde-800) 0, var(--mg-verde-800) var(--mga-pct, 0%), var(--mg-borda) var(--mga-pct, 0%), var(--mg-borda) 100%);
}
.mg-audio-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; margin-top: -5px;
  background: var(--mg-verde-800); border: 2px solid var(--mg-branco); box-shadow: 0 0 0 1px var(--mg-verde-800);
}
.mg-audio-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--mg-borda); }
.mg-audio-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--mg-verde-800); }
.mg-audio-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--mg-verde-800); border: 2px solid var(--mg-branco); }

.mg-audio-linha { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.mg-audio-capa { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--mg-creme); flex: 0 0 auto; }
.mg-audio-textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-audio-titulo { font-size: 14px; font-weight: 700; color: var(--mg-verde-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Duas linhas em vez de reticência (10/09/2026): a linha abaixo do título
   trazia palestrante e tempo e saía cortada no telefone. Clamp de duas
   linhas: cabe a frase inteira e a barra não cresce sem limite. */
.mg-audio-sub { font-size: 12px; color: var(--mg-tinta-2); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mg-audio-controles { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.mg-audio-controles button {
  background: none; border: 0; color: var(--mg-verde-900); min-width: 46px; min-height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer;
  font-family: var(--ff-texto); font-size: 12.5px; font-weight: 700; transition: background var(--transicao), color var(--transicao);
}
.mg-audio-controles button:hover { background: var(--mg-creme); }
.mg-audio-controles button:focus-visible { outline: 2px solid var(--mg-verde-800); outline-offset: 2px; }
.mg-audio-controles svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-audio-controles svg text { stroke: none; fill: currentColor; font-family: var(--ff-texto); font-weight: 700; font-size: 7.5px; }
.mg-audio-controles .mg-audio-play { background: var(--mg-verde-800); color: var(--mg-creme); }
.mg-audio-controles .mg-audio-play:hover { background: var(--mg-verde-900); }
.mg-audio-controles .mg-audio-play svg { fill: currentColor; stroke: none; width: 22px; height: 22px; }
.mg-audio-controles .mg-audio-vel { font-size: 12.5px; letter-spacing: -.01em; }
.mg-audio-continuar .mg-audio-play { animation: mga-pulso 1.4s ease-in-out infinite; }
@keyframes mga-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 89, 74, .35); }
  50% { box-shadow: 0 0 0 9px rgba(45, 89, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .mg-audio-continuar .mg-audio-play { animation: none; } }

/* Telefone estreito: a capa e a velocidade saem antes de o título sumir. */
@media (max-width: 419px) { .mg-audio-capa { display: none; } }
@media (max-width: 359px) { .mg-audio-controles .mg-audio-vel { display: none; } }

/* Com o player aberto, o rodapé e o toast sobem para não ficar por baixo. */
body.mg-audio-ativo .app-rodape { padding-bottom: calc(92px + 92px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body.mg-audio-ativo .app-rodape { padding-bottom: 116px; } }
@media (max-width: 1023px) { body.mg-audio-ativo.tema-app .toast { bottom: calc(76px + 92px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { body.mg-audio-ativo.tema-app .toast { bottom: 116px; } }