/* VRK Rádio · estilo base (o do protótipo aprovado radio-r3). Cores por variáveis: o tema muda sem tocar no plugin.
   Para não carregar: add_filter( 'vrk_radio_css', '__return_false' ). */
:root { --vrkr-fg: var(--du-heading, #1a2a5c); --vrkr-mut: var(--du-ink-muted, #6a604f); --vrkr-bg: rgba(255,253,248,.94); --vrkr-ln: rgba(90,60,10,.12); --vrkr-btn: var(--du-heading, #1a2a5c); --vrkr-btn-fg: #fff; --vrkr-chip: var(--du-cream-100, #f3f1ec); --vrkr-cor: var(--du-red-600, #d32626); --vrkr-ouro: #c9a35a; --vrkr-largura: 1440px; }
.vrk-radio-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* botão (cabeçalho) */
.vrk-radio-botao { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--vrkr-fg); background: var(--vrkr-chip); border: 0; border-radius: 999px; padding: 8px 14px 8px 12px; cursor: pointer; line-height: 1.2; }
.vrk-radio-botao__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vrkr-cor); box-shadow: 0 0 0 4px rgba(211,38,38,.15); flex: none; }
.vrk-radio-botao svg { width: 14px; height: 14px; flex: none; }
.vrk-radio-botao .vr-pause, .vrk-radio-botao[data-estado="tocando"] .vr-play, .vrk-radio-botao[data-estado="carregando"] .vr-play { display: none; }
.vrk-radio-botao[data-estado="tocando"] .vr-pause, .vrk-radio-botao[data-estado="carregando"] .vr-pause { display: block; }
.vrk-radio-botao[data-estado="tocando"], .vrk-radio-botao[data-estado="fora"] { background: #fff; box-shadow: inset 0 0 0 1px rgba(221,185,118,.9); }
.vrk-radio-botao[data-estado="tocando"] .vrk-radio-botao__dot { animation: vrkr-pulso 1.6s ease-out infinite; }
.vrk-radio-botao[data-estado="carregando"] .vrk-radio-botao__dot { background: var(--vrkr-ouro); animation: vrkr-pisca 1s ease-in-out infinite; }
.vrk-radio-botao[data-estado="erro"] .vrk-radio-botao__dot { background: #9a917f; box-shadow: none; }
.vrk-radio-botao[data-estado="fora"] .vrk-radio-botao__dot { background: var(--vrkr-ouro); box-shadow: none; }
.vrk-radio-botao:focus-visible, .vrk-radio-barra button:focus-visible { outline: 2px solid var(--vrkr-fg); outline-offset: 2px; }
@keyframes vrkr-pulso { 0% { box-shadow: 0 0 0 0 rgba(211,38,38,.45); } 100% { box-shadow: 0 0 0 9px rgba(211,38,38,0); } }
@keyframes vrkr-pisca { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .vrk-radio-botao__dot, .vrk-radio-barra__dot { animation: none !important; } .vrk-radio-barra { transition: none !important; } }

/* barra fixa */
.vrk-radio-barra { position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0; color: var(--vrkr-fg); background: var(--vrkr-bg); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border-top: 1px solid var(--vrkr-ln); box-shadow: 0 -12px 30px -24px rgba(4,22,70,.45); transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.7,.2,1); font-family: inherit; container-type: inline-size; }
.vrk-radio-barra.is-on { transform: none; }
html.vrk-radio-barra-aberta body { padding-bottom: 72px; }
.vrk-radio-barra[data-tema="navy"] { --vrkr-fg: #fff; --vrkr-mut: rgba(255,255,255,.72); --vrkr-bg: rgba(4,22,70,.96); --vrkr-ln: rgba(255,255,255,.08); --vrkr-btn: #fff; --vrkr-btn-fg: #041646; --vrkr-chip: rgba(255,255,255,.1); }
.vrk-radio-barra__in { max-width: calc(var(--vrkr-largura) + 2 * clamp(20px, 5vw, 64px)); margin-inline: auto; padding: 12px clamp(20px, 5vw, 64px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; }
.vrk-radio-barra__play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--vrkr-btn); color: var(--vrkr-btn-fg); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .2s; }
.vrk-radio-barra__play:hover { transform: scale(1.05); }
.vrk-radio-barra__play svg { width: 18px; height: 18px; }
.vrk-radio-barra .vr-pause, .vrk-radio-barra[data-estado="tocando"] .vrk-radio-barra__play .vr-play, .vrk-radio-barra[data-estado="carregando"] .vrk-radio-barra__play .vr-play { display: none; }
.vrk-radio-barra[data-estado="tocando"] .vrk-radio-barra__play .vr-pause, .vrk-radio-barra[data-estado="carregando"] .vrk-radio-barra__play .vr-pause { display: block; }
.vrk-radio-barra[data-estado="fora"] .vrk-radio-barra__play, .vrk-radio-barra[data-estado="fora"] .vrk-radio-barra__vol { display: none; }
.vrk-radio-barra__tx { display: grid; gap: 1px; min-width: 0; }
.vrk-radio-barra__st { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9375rem; white-space: nowrap; min-width: 0; overflow: hidden; }
.vrk-radio-barra__st [data-r="prog"] { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vrk-radio-barra__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vrkr-cor); flex: none; }
.vrk-radio-barra[data-estado="tocando"] .vrk-radio-barra__dot { animation: vrkr-pulso 1.6s ease-out infinite; }
.vrk-radio-barra[data-estado="carregando"] .vrk-radio-barra__dot { background: var(--vrkr-ouro); animation: vrkr-pisca 1s ease-in-out infinite; }
.vrk-radio-barra:is([data-estado="parado"],[data-estado="erro"]) .vrk-radio-barra__dot { background: #9a917f; }
.vrk-radio-barra[data-estado="fora"] .vrk-radio-barra__dot { background: var(--vrkr-ouro); }
.vrk-radio-barra__live { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vrkr-cor); }
.vrk-radio-barra[data-tema="navy"] .vrk-radio-barra__live { color: #ff9d92; }
.vrk-radio-barra:is([data-estado="parado"],[data-estado="erro"],[data-estado="fora"]) .vrk-radio-barra__live { display: none; }
.vrk-radio-barra__sub { font-size: .8125rem; color: var(--vrkr-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrk-radio-barra__px { display: grid; gap: 1px; padding-left: 16px; border-left: 1px solid var(--vrkr-ln); max-width: 260px; min-width: 0; }
.vrk-radio-barra__px[hidden] { display: none; }
.vrk-radio-barra__px small { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vrkr-mut); }
.vrk-radio-barra__px span { font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrk-radio-barra__acoes { display: flex; align-items: center; gap: 6px; }
.vrk-radio-barra__vol { display: flex; align-items: center; gap: 8px; margin-right: 8px; color: var(--vrkr-mut); }
.vrk-radio-barra__vol svg { width: 18px; height: 18px; }
.vrk-radio-barra__vol input { width: 96px; accent-color: var(--vrkr-ouro); }
.vrk-radio-barra__b { font: inherit; display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--vrkr-fg); background: var(--vrkr-chip); border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.vrk-radio-barra__b svg { width: 16px; height: 16px; }
.vrk-radio-barra__b[hidden] { display: none; }
.vrk-radio-barra__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--vrkr-mut); display: grid; place-items: center; cursor: pointer; padding: 0; }
.vrk-radio-barra__x:hover { color: var(--vrkr-fg); background: var(--vrkr-chip); }
.vrk-radio-barra__x svg { width: 18px; height: 18px; }
@container (max-width: 980px) { .vrk-radio-barra__px { display: none; } }
@container (max-width: 640px) {
  .vrk-radio-barra__in { gap: 12px; padding-block: 10px; }
  .vrk-radio-barra__vol, .vrk-radio-barra__b span, .vrk-radio-barra__live { display: none; }
  .vrk-radio-barra__b { padding: 10px; }
  .vrk-radio-barra__st { font-size: .875rem; }
}

/* no ar (shortcode) */
.vrk-radio-agora__k { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vrkr-cor); }
.vrk-radio-agora__px { color: var(--vrkr-mut); }

/* grade da semana */
.vrk-radio-grade { margin: 2em 0; }
.vrk-radio-grade__abas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: none; }
.vrk-radio-grade__abas button { flex: none; display: grid; gap: 2px; min-width: 96px; padding: 10px 16px; border: 0; border-radius: 14px; background: var(--vrkr-chip); color: var(--vrkr-fg); font: inherit; text-align: left; cursor: pointer; }
.vrk-radio-grade__abas button b { font-weight: 600; }
.vrk-radio-grade__abas button small { font-size: .75rem; color: var(--vrkr-mut); }
.vrk-radio-grade__abas button[aria-selected="true"] { background: var(--vrkr-fg); color: #fff; }
.vrk-radio-grade__abas button[aria-selected="true"] small { color: rgba(255,255,255,.75); }
.vrk-radio-grade ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vrkr-ln); }
.vrk-radio-grade li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 12px; border-bottom: 1px solid var(--vrkr-ln); border-radius: 0; }
.vrk-radio-grade__h { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--vrkr-mut); }
.vrk-radio-grade__p b { display: block; font-weight: 600; color: var(--vrkr-fg); }
.vrk-radio-grade__p a { color: inherit; text-decoration: none; }
.vrk-radio-grade__p small { display: block; font-size: .875rem; color: var(--vrkr-mut); }
.vrk-radio-grade__esp { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a5a1c; }
.vrk-radio-grade__ar { display: none; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vrkr-cor); }
.vrk-radio-grade__ar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vrkr-cor); }
.vrk-radio-grade li.is-ar { background: var(--vrkr-chip); border-radius: 12px; }
.vrk-radio-grade li.is-ar .vrk-radio-grade__ar { display: inline-flex; }
.vrk-radio-grade li.is-ar .vrk-radio-grade__h { color: var(--vrkr-cor); }
.vrk-radio-grade__vazio { color: var(--vrkr-mut); }
@media (max-width: 640px) { .vrk-radio-grade li { grid-template-columns: 56px minmax(0, 1fr); } .vrk-radio-grade__esp, .vrk-radio-grade__ar { grid-column: 2; justify-self: start; } }

/* prévia no painel (Rádio › Emissora e player) */
.vrk-radio-barra--previa { position: relative; z-index: 1; transform: none; transition: none; border: 1px solid var(--vrkr-ln); border-radius: 12px; overflow: hidden; }
.vrk-radio-barra--previa[hidden] { display: none; }