/* 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; }
}

/* celular (1.0.7): só aparece depois de tocar (o JS cuida), sem "Ouvir em janela" (a não ser que se peça) e acima de
   uma barra do tema no rodapé: o tema diz a altura em --vrk-radio-base (ex.: a barra de abas). */
@media (max-width: 760px) {
  .vrk-radio-barra { bottom: var(--vrk-radio-base, 0px); transition: transform .35s cubic-bezier(.2,.7,.2,1), bottom .3s cubic-bezier(.2,.7,.2,1); }
  html.vrk-radio-barra-aberta body { padding-bottom: calc(80px + var(--vrk-radio-base, env(safe-area-inset-bottom, 0px))); }
  .vrk-radio-barra:not([data-cel-janela]) [data-r="out"] { display: none !important; }
  .vrk-radio-barra__play { width: 40px; height: 40px; }
  .vrk-radio-barra__play svg { width: 16px; height: 16px; }
  .vrk-radio-barra__x { width: 36px; height: 36px; }
  .vrk-radio-barra .vrk-radio-barra__live { display: inline; font-size: .625rem; }
  .vrk-radio-barra__sub { font-size: .75rem; }
  /* mini player: cartão arredondado, afastado das bordas */
  .vrk-radio-barra[data-cel="mini"] { left: 10px; right: 10px; bottom: calc(var(--vrk-radio-base, env(safe-area-inset-bottom, 0px)) + 10px); border: 0; border-radius: 18px;
    box-shadow: 0 14px 34px -14px rgba(4,22,70,.45), 0 0 0 1px rgba(26,42,92,.07); transform: translateY(calc(100% + 40px + var(--vrk-radio-base, 0px))); }
  .vrk-radio-barra[data-cel="mini"].is-on { transform: none; }
  /* fechado é fechado: fora da tela e sem receber toque (antes, acima de uma barra de abas, sobrava à vista) */
  .vrk-radio-barra:not(.is-on) { visibility: hidden; pointer-events: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), bottom .3s, visibility 0s .35s; }
  .vrk-radio-barra.is-on { visibility: visible; }
  .vrk-radio-barra[data-cel="mini"] .vrk-radio-barra__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px; }
  .vrk-radio-barra[data-cel="mini"] .vrk-radio-barra__acoes { gap: 2px; }
  /* encostada: de ponta a ponta */
  .vrk-radio-barra[data-cel="encostada"] .vrk-radio-barra__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 8px 14px; }
}


/* orelha (1.0.11): aba presa na lateral, só no celular. Montada pelo radio.js em [data-vrk-radio-orelha]. */
.vrk-orelha { display: none; }
@media (max-width: 760px) {
  .vrk-orelha { font-size: 13px; line-height: 18px; position: fixed; z-index: 9980; bottom: calc(var(--vrk-radio-base, env(safe-area-inset-bottom, 0px)) + 22px); display: flex; align-items: center; transition: bottom .3s cubic-bezier(.2,.7,.2,1), translate .35s cubic-bezier(.2,.7,.2,1), opacity .25s; font-family: inherit; }
  .vrk-orelha[data-lado="dir"] { right: 0; flex-direction: row; }
  .vrk-orelha[data-lado="esq"] { left: 0; flex-direction: row-reverse; }
  .vrk-orelha.is-aberta, .vrk-orelha.is-some { opacity: 0; pointer-events: none; translate: 0 12px; visibility: hidden; transition: opacity .2s, translate .3s, visibility 0s .3s; }
  .vrk-orelha button { font-family: inherit; font-size: inherit; line-height: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .vrk-orelha__b { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px 0 14px; color: var(--vrkr-fg); background: var(--vrkr-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px -12px rgba(4,22,70,.5), 0 0 0 1px rgba(26,42,92,.08); font-weight: 700; white-space: nowrap; }
  .vrk-orelha[data-lado="dir"] .vrk-orelha__b { border-radius: 22px 0 0 22px; }
  .vrk-orelha[data-lado="esq"] .vrk-orelha__b { border-radius: 0 22px 22px 0; padding: 0 14px 0 12px; flex-direction: row-reverse; }
  .vrk-orelha__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vrkr-cor); flex: none; animation: vrkr-pulso 1.6s ease-out infinite; }
  .vrk-orelha[data-estado="carregando"] .vrk-orelha__dot { background: var(--vrkr-ouro); }
  .vrk-orelha__ic { display: none; width: 20px; height: 20px; flex: none; }
  .vrk-orelha__tx, .vrk-orelha__fr, .vrk-orelha__lt, .vrk-orelha__ab { display: none; }
  .vrk-orelha[data-forma="icone"] .vrk-orelha__ic { display: block; }
  .vrk-orelha[data-forma="aovivo"] .vrk-orelha__tx { display: inline; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .vrk-orelha[data-forma="alterna"] .vrk-orelha__fr { display: grid; justify-items: start; text-align: left; height: 18px; overflow: hidden; max-width: 190px; }
  .vrk-orelha__fr span { grid-area: 1 / 1; opacity: 0; translate: 0 100%; animation: vrkr-frase 9s infinite; overflow: hidden; text-overflow: ellipsis; }
  .vrk-orelha__fr span:nth-child(2) { animation-delay: 3s; } .vrk-orelha__fr span:nth-child(3) { animation-delay: 6s; }
  .vrk-orelha[data-forma="letreiro"] .vrk-orelha__lt { display: flex; width: 150px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
  .vrk-orelha__lt span { flex: none; animation: vrkr-letreiro 14s linear infinite; }
  .vrk-orelha[data-forma="abre"] .vrk-orelha__b { gap: 0; }
  .vrk-orelha[data-forma="abre"] .vrk-orelha__ab { display: inline-block; overflow: hidden; max-width: 0; opacity: 0; margin-left: 8px; animation: vrkr-abre 9s cubic-bezier(.2,.7,.2,1) infinite; }
  .vrk-orelha[data-lado="esq"][data-forma="abre"] .vrk-orelha__ab { margin: 0 8px 0 0; }
  /* botão de recolher/esconder */
  .vrk-orelha__x { width: 26px; height: 26px; margin: 0 6px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--vrkr-bg); color: var(--vrkr-mut); box-shadow: 0 6px 16px -8px rgba(4,22,70,.5), 0 0 0 1px rgba(26,42,92,.08); }
  .vrk-orelha__x svg { width: 12px; height: 12px; }
  .vrk-orelha[data-lado="esq"] .vrk-orelha__x svg { scale: -1 1; }
  .vrk-orelha[data-x="toque"]:not(.is-toque) .vrk-orelha__x { opacity: 0; pointer-events: none; width: 0; margin: 0; }
  /* recolhida: só o ponto (e o ícone, se pedido) */
  .vrk-orelha.is-rec .vrk-orelha__x, .vrk-orelha.is-ponta .vrk-orelha__x { display: none; }
  .vrk-orelha.is-rec .vrk-orelha__b { padding: 0 13px; }
  .vrk-orelha.is-rec :is(.vrk-orelha__tx, .vrk-orelha__fr, .vrk-orelha__lt, .vrk-orelha__ab) { display: none !important; }
  .vrk-orelha.is-rec .vrk-orelha__ic { display: none; }
  .vrk-orelha.is-rec[data-recolhida="icone"] .vrk-orelha__ic { display: block; }
  .vrk-orelha.is-rec[data-recolhida="icone"] .vrk-orelha__b { gap: 7px; }
  /* pontinha */
  .vrk-orelha__ponta { display: none; width: 14px; height: 44px; padding: 0; place-items: center; background: var(--vrkr-bg); box-shadow: 0 8px 20px -10px rgba(4,22,70,.5), 0 0 0 1px rgba(26,42,92,.08); }
  .vrk-orelha[data-lado="dir"] .vrk-orelha__ponta { border-radius: 10px 0 0 10px; } .vrk-orelha[data-lado="esq"] .vrk-orelha__ponta { border-radius: 0 10px 10px 0; }
  .vrk-orelha__ponta .vrk-orelha__dot { width: 6px; height: 6px; animation: none; }
  .vrk-orelha.is-ponta .vrk-orelha__b { display: none; } .vrk-orelha.is-ponta .vrk-orelha__ponta { display: grid; }
  /* ao rolar: encolhe, fica a pontinha */
  .vrk-orelha.is-rolando[data-lado="dir"] { translate: calc(100% - 12px) 0; } .vrk-orelha.is-rolando[data-lado="esq"] { translate: calc(-100% + 12px) 0; }
}
@keyframes vrkr-frase { 0% { opacity: 0; translate: 0 100%; } 5%, 30% { opacity: 1; translate: 0 0; } 36%, 100% { opacity: 0; translate: 0 -100%; } }
@keyframes vrkr-letreiro { to { translate: -100% 0; } }
@keyframes vrkr-abre { 0%, 8% { max-width: 0; opacity: 0; } 16%, 52% { max-width: 220px; opacity: 1; } 60%, 100% { max-width: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vrk-orelha__fr span, .vrk-orelha__lt span, .vrk-orelha__ab, .vrk-orelha__dot { animation: none !important; }
  .vrk-orelha__fr span:first-child { opacity: 1; translate: 0 0; } .vrk-orelha__ab { max-width: none !important; opacity: 1 !important; }
}

/* 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; }