/* Host Líder Stream — Player do Topo: barra horizontal na largura total do site.
 * Fica dentro do cabeçalho fixo (acima da barra de contatos e do menu). Carregado só quando o player está ativo.
 * Cor de destaque: --hls-primary (cor principal do painel).
 */
:root { --hls-pb-h: 50px; }
@media (min-width: 768px) { :root { --hls-pb-h: 54px; } }

.hls-rbar { --rb-c: var(--hls-primary, #a80c0c); box-sizing: border-box; width: 100%; color: #fff; font-size: 14px; line-height: 1; background: #151515; border-bottom: 2px solid var(--rb-c); }
.hls-rbar *, .hls-rbar *:before, .hls-rbar *:after { box-sizing: border-box; }

/* ---------- Origem: URL de streaming (player do sistema) ---------- */
.hls-rbar.rb-url { height: var(--hls-pb-h); }
.rb-url .rb-in { display: flex; align-items: center; gap: 14px; height: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; min-width: 0; }
.rb-play {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--rb-c); color: #fff; font-size: 15px; line-height: 1;
    cursor: pointer; transition: filter .15s ease;
}
.rb-play:hover { filter: brightness(1.2); }
.rb-play:focus-visible, .rb-mute:focus-visible, .rb-vol:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rb-play .fa-play { margin-left: 2px; }
.rb-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; }
.rb-live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rb-dot { width: 9px; height: 9px; border-radius: 50%; background: #666; }
.hls-rbar[data-state="playing"] .rb-dot { background: #ff3b3b; animation: rb-pulse 1.4s ease-in-out infinite; }
.hls-rbar[data-state="loading"] .rb-dot, .hls-rbar[data-state="reconnecting"] .rb-dot { background: #f5a623; animation: rb-pulse .8s ease-in-out infinite; }
.hls-rbar[data-state="error"] .rb-dot { background: #ff3b3b; }
@keyframes rb-pulse { 50% { opacity: .3; } }
.rb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c8c8c8; }
.hls-rbar[data-state="error"] .rb-text { color: #ff9f9f; }
.hls-rbar[data-state="reconnecting"] .rb-text { color: #f5c26b; }
.rb-vol-wrap { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.rb-mute { width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #d6d6d6; font-size: 16px; line-height: 1; text-align: left; cursor: pointer; }
.rb-mute:hover { color: #fff; }
.rb-vol { --fill: 80%; -webkit-appearance: none; appearance: none; width: 100px; height: 18px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.rb-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--fill), rgba(255, 255, 255, .25) var(--fill)); }
.rb-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #fff; }
.rb-vol::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.rb-vol::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.rb-vol::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; }
.hls-rbar.rb-novol .rb-vol-wrap { display: none; } /* iOS: o volume é o do aparelho */

/* ---------- Origem: código HTML próprio ---------- */
.hls-rbar.rb-html { padding: 4px 0; }
.rb-frame { display: block; width: 100%; max-width: 100%; border: 0; margin: 0 auto; background: transparent; }

/* ---------- Celular e tablet ---------- */
@media (max-width: 767px) {
    .rb-url .rb-in { gap: 12px; padding: 0 12px; }
    .rb-play { width: 40px; height: 40px; }
    .rb-info { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
    .rb-live { font-size: 11px; }
    .rb-text { max-width: 100%; font-size: 12px; }
    .rb-vol-wrap { display: none; } /* no celular o volume é o do aparelho */
}
@media (prefers-reduced-motion: reduce) {
    .hls-rbar .rb-dot { animation: none !important; }
}