/* O player do narrador (FEATURE-049): o tutorial no sistema e o devocional, no
   sistema e no site da igreja. Arquivo próprio, e não <style> nem style="" na
   página, porque o CSP do site público (`style-src 'self'`) os barra. Classes
   próprias, sem depender do Bootstrap, que o site público não carrega.

   Uma linha só: o rótulo, o player e a velocidade. No celular o rótulo sobe, e
   o player e a velocidade seguem lado a lado (o player encolhe). */
.narrador {
    max-width: 900px;
    margin: 0 0 1.5rem;
}

.narrador-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: .5rem;
}

.narrador-rotulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.narrador-rotulo svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.narrador-controles {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: min(100%, 260px);
}

.narrador-audio {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
}

.narrador-velocidade {
    flex: none;
    width: auto;
    font: inherit;
    font-size: .875rem;
    color: inherit;
    background-color: transparent;
    border: 1px solid currentColor;
    border-radius: .375rem;
    padding: .3rem .4rem;
    opacity: .85;
}

.narrador-velocidade option {
    color: #212529;
}

.narrador-sem-rede {
    font-size: .875rem;
    color: #b45309;
    margin-top: .25rem;
}

.narrador-aviso {
    font-size: .875rem;
    opacity: .75;
    margin-top: .25rem;
}

/* O trecho que está sendo lido (D4). O amarelo translúcido funciona no claro
   e no escuro, sobre o texto e sobre o título. */
[data-bloco] {
    transition: background-color .2s, box-shadow .2s;
}

[data-bloco].lendo {
    background-color: rgba(255, 193, 7, .28);
    box-shadow: 0 0 0 .3rem rgba(255, 193, 7, .28);
    border-radius: .25rem;
}

.narrador-sincronizado [data-bloco]:not([data-bloco="0"]) {
    cursor: pointer;
}

/* No celular o volume é o do aparelho, e o botão de volume do player tomava
   o lugar da barra de progresso, que o Chrome esconde quando falta espaço
   (medido em 360px, 15/10/2026). */
@media (max-width: 576px) {
    .narrador-audio::-webkit-media-controls-mute-button,
    .narrador-audio::-webkit-media-controls-volume-slider,
    .narrador-audio::-webkit-media-controls-volume-control-container {
        display: none;
    }
}