/* The persistent radio shell is isolated from the legacy public-page themes. */
.radio-shell {
    --radio-orange: #ff7937;
    --radio-mint: #63edc5;
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    padding: 4px 12px 0;
    color: #172536;
    font-family: "Manrope", sans-serif;
}
.radio-shell-inner { display: grid; gap: 4px; max-width: 1680px; margin: auto; }
.radio-shell [hidden], .radio-navigation-notice[hidden] { display: none !important; }
.radio-shell button, .radio-navigation-notice button { cursor: pointer; }
.radio-shell button:disabled { cursor: wait; }
.radio-shell a, .radio-shell button, .radio-shell input { -webkit-tap-highlight-color: transparent; }
.radio-shell :is(a, button, input):focus-visible, .radio-navigation-notice button:focus-visible {
    outline: 3px solid #348cdc;
    outline-offset: 4px;
}
.radio-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 82px;
    padding: 10px 16px;
    border: 1px solid #fff;
    border-radius: 22px;
    background: #fcfcfa;
    box-shadow: 0 8px 28px #0b20301a;
}
.radio-brand { display: flex; align-items: center; gap: 11px; flex: 1 1 200px; min-width: 0; color: #14263b; }
.radio-brand img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.radio-brand > span { min-width: 0; }
.radio-brand strong { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 21px/1.2 "Outfit", sans-serif; }
.radio-brand small { display: block; max-width: 190px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #697581; font-size: 12px; }
.radio-nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 5px; border: 1px solid #e2e3de; border-radius: 17px; background: #f0f1ec; }
.radio-nav a { padding: 12px 10px; border-radius: 12px; color: #59616b; font-size: 14px; font-weight: 800; white-space: nowrap; transition: color 160ms, background 160ms; }
.radio-nav a:hover { color: #172536; background: #e5e8e1; }
.radio-nav a.is-active { color: #943608; background: #ffe6ce; box-shadow: inset 0 0 0 1px #ebc9a7, 0 2px 5px #13243708; }
.radio-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.radio-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 10px; border: 1px solid #e1e4e8; border-radius: 13px; background: #fff; color: #213145; transition: background 160ms, border-color 160ms, transform 160ms; }
.radio-icon-button svg, .radio-player-toggle svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.radio-icon-button:hover { background: #f1f3f5; border-color: #becbd6; }
.radio-menu-toggle { display: none; }
.radio-mobile-install { display: none; }
.radio-player-toggle { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 16px; border: 1px solid #ffaf73; border-radius: 13px; background: #ff813d; color: #291708; font-size: 14px; font-weight: 800; transition: background 160ms, box-shadow 160ms; }
.radio-player-toggle:hover { background: #ff984f; box-shadow: 0 4px 14px #f4773329; }
.radio-toggle-dot { width: 6px; height: 6px; border-radius: 50%; background: #723819; }
.radio-shell.is-playing .radio-toggle-dot { background: #183f32; box-shadow: 0 0 0 3px #183f3226; }
.radio-player {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 200px auto;
    align-items: center;
    gap: 0 18px;
    padding: 10px 18px 0;
    border: 1px solid #30465a;
    border-radius: 18px;
    color: #f5f8ff;
    background: radial-gradient(ellipse at 95% 0, #22443f80, transparent 42%), linear-gradient(110deg, #12233a, #0b1524 68%);
    box-shadow: 0 12px 32px #0b172a26;
}
.radio-transport { display: grid; justify-items: center; gap: 4px; }
.radio-play { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid #ffb16f; border-radius: 50%; background: linear-gradient(135deg, #ffb25d, #ff7638 75%); color: #241a13; box-shadow: 0 0 0 4px #ff8c4510, 0 4px 18px #ff763826; transition: transform 160ms, box-shadow 160ms; }
.radio-play:hover { transform: scale(1.05); box-shadow: 0 0 0 5px #ff8c451c, 0 4px 20px #ff763838; }
.radio-play svg { grid-area: 1 / 1; width: 24px; height: 24px; }
.radio-play .radio-play-icon { transform: translateX(-2px); }
.radio-pause-icon, .radio-spinner { display: none; }
.radio-shell.is-playing .radio-play-icon { display: none; }
.radio-shell.is-playing .radio-pause-icon { display: block; }
.radio-shell.is-loading:not(.is-playing) .radio-play-icon { display: none; }
.radio-shell.is-loading:not(.is-playing) .radio-spinner { display: block; width: 26px; height: 26px; border: 2px solid #231c1350; border-top-color: #231c13; border-radius: 50%; animation: radio-spin 900ms linear infinite; }
.radio-action-label { color: #bac7d8; font-size: 12px; font-weight: 700; white-space: nowrap; }
.radio-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.radio-art { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; }
.radio-satellite-art {
    position: relative;
    isolation: isolate;
    pointer-events: none;
}
.radio-satellite-art::before {
    content: "";
    position: absolute;
    inset: 18%;
    z-index: -1;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8b5526 10%, #5be4e72e 85%);
    filter: blur(12px);
}
.radio-satellite-art > svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px #020d1c66); }
.radio-satellite-body { animation: radio-satellite-float 4400ms ease-in-out infinite alternate paused; }
.radio-satellite-signal { animation: radio-satellite-transmit 2000ms ease-in-out infinite paused; }
.radio-satellite-signal-outer { animation-delay: -1300ms; }
/* Decorative motion is independent of the stream and freezes when paused or muted. */
.radio-shell.is-playing:not(.is-muted) .radio-satellite-body,
.radio-shell.is-playing:not(.is-muted) .radio-satellite-signal { animation-play-state: running; }
.radio-track-copy { min-width: 0; }
.radio-track-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.radio-live-badge { display: inline-flex; align-items: center; gap: 6px; color: #79f2cf; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; white-space: nowrap; }
.radio-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.radio-track-label { color: #acbcd0; font-size: 12px; }
.radio-track #player-now-playing { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; color: #fff; font: 700 clamp(18px, 1.55vw, 22px)/1.2 "Outfit", sans-serif; letter-spacing: -.25px; }
.radio-track.is-updating #player-now-playing { animation: radio-title-in 450ms ease-out; }
.radio-slogan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0 0; color: #8f9fb4; font-size: 13px; }
.radio-levels { display: inline-flex; align-items: center; gap: 3px; height: 15px; margin-left: auto; }
.radio-levels i { width: 3px; height: 12px; border-radius: 2px; background: #63edc5; transform: scaleY(.28); opacity: .4; }
.radio-shell.is-playing:not(.is-muted) .radio-levels i { opacity: .9; animation: radio-level 850ms ease-in-out infinite alternate; }
.radio-levels i:nth-child(2) { animation-delay: -550ms !important; }
.radio-levels i:nth-child(3) { animation-delay: -250ms !important; }
.radio-levels i:nth-child(4) { animation-delay: -700ms !important; }
.radio-levels i:nth-child(5) { animation-delay: -100ms !important; }
.radio-volume { border-left: 1px solid #ffffff16; padding-left: 16px; }
.radio-volume > label { display: block; margin: 0 0 2px 9px; color: #9eafc5; font-size: 12px; font-weight: 700; }
.radio-volume-controls { display: flex; align-items: center; gap: 8px; }
.radio-player .radio-icon-button { border-color: #ffffff20; color: #d0daea; background: #ffffff06; }
.radio-player .radio-icon-button:hover { border-color: #ffffff50; background: #ffffff13; color: #fff; }
.radio-volume .radio-icon-button { width: 36px; height: 36px; padding: 7px; border-color: transparent; }
.radio-volume input { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 5px; margin: 0; border: 0; border-radius: 8px; background: linear-gradient(to right, #63edc5 var(--volume-fill, 78%), #ffffff26 var(--volume-fill, 78%)); cursor: pointer; }
.radio-volume input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid #dcfff2; border-radius: 50%; background: #63edc5; box-shadow: 0 0 0 4px #63edc510; }
.radio-volume input::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #dcfff2; border-radius: 50%; background: #63edc5; }
.radio-volume output { flex: 0 0 36px; color: #c3d1e1; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.radio-volume-muted { display: none; }
.radio-shell.is-muted .radio-volume-waves { display: none; }
.radio-shell.is-muted .radio-volume-muted { display: block; }
.radio-socials { display: flex; align-items: center; gap: 8px; }
.radio-social { width: 36px; height: 36px; padding: 8px; border-radius: 11px; }
.radio-social svg { width: 18px; height: 18px; }
.radio-social span { display: flex; }
.radio-player .social-platform-whatsapp { color: #79edbf; }
.radio-player .social-platform-instagram { color: #f6b0d1; }
.radio-player-foot { grid-column: 1 / -1; display: flex; justify-content: flex-start; align-items: center; gap: 7px; min-width: 0; margin-top: 6px; padding: 5px 0 6px; border-top: 1px solid #ffffff12; color: #9cafc7; font-size: 12px; }
.radio-continuity { display: inline-flex; align-items: center; flex: 0 0 auto; }
.radio-continuity svg { width: 15px; height: 15px; }
.radio-status { flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.radio-shell.is-playing .radio-status { color: #79edbf; }
.radio-navigation-notice { position: fixed; z-index: 90; inset: auto 20px 20px auto; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 40px)); padding: 16px; border: 1px solid #ced9e6; border-radius: 16px; background: #fff; color: #14263b; box-shadow: 0 12px 45px #0003; font: 14px/1.5 "Manrope", sans-serif; }
.radio-navigation-notice button { flex-shrink: 0; padding: 9px 12px; border: 0; border-radius: 8px; background: #f0f3f7; color: #173653; font-weight: 700; }
.radio-navigation-notice [data-navigation-dismiss] { font-size: 24px; padding: 0 9px; }
@keyframes radio-spin { to { transform: rotate(360deg); } }
@keyframes radio-level { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes radio-title-in { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes radio-satellite-float { from { transform: translateY(1px); } to { transform: translateY(-2px); } }
@keyframes radio-satellite-transmit { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 1199px) {
    .radio-header { flex-wrap: wrap; gap: 12px; }
    .radio-brand { margin-right: auto; }
    .radio-brand strong, .radio-brand small { max-width: 280px; }
    .radio-menu-toggle { display: inline-flex; order: 2; }
    .radio-header-actions { order: 1; }
    .radio-nav { display: none; order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: center; }
    .is-mobile-nav-open .radio-nav { display: flex; }
    .radio-nav a { flex: 1 0 auto; text-align: center; }
    .radio-player { grid-template-columns: 60px minmax(0, 1fr) 176px auto; gap: 0 14px; padding: 10px 14px 0; }
    .radio-art { width: 60px; height: 60px; flex-basis: 60px; }
    .radio-track { gap: 10px; }
    .radio-volume { padding-left: 12px; }
    .radio-socials { flex-direction: row; gap: 6px; }
    .radio-social { width: 32px; height: 32px; padding: 7px; border-radius: 9px; }
    .radio-social svg { width: 18px; height: 18px; }
    .radio-slogan { display: none; }
}
@media (max-width: 760px) {
    .radio-shell { padding: 4px 8px 0; }
    .radio-header { min-height: 68px; padding: 8px 10px; gap: 8px; border-radius: 18px; }
    .radio-brand { gap: 8px; flex: 1 1 100px; }
    .radio-brand img { width: 44px; height: 44px; flex-basis: 44px; }
    .radio-brand strong { font-size: 20px; }
    .radio-brand small { display: none; }
    .radio-player-toggle { min-height: 42px; padding: 9px 11px; gap: 7px; }
    .radio-toggle-dot { display: none; }
    .radio-header-actions { gap: 6px; }
    .radio-player { grid-template-columns: 58px minmax(0, 1fr); gap: 8px 10px; padding: 10px 12px 0; border-radius: 16px; }
    .radio-play { width: 50px; height: 50px; }
    .radio-track { gap: 9px; }
    .radio-art { width: 52px; height: 52px; flex-basis: 52px; }
    .radio-track-heading { gap: 9px; }
    .radio-track #player-now-playing { font-size: 18px; }
    .radio-track-label { display: none; }
    .radio-volume { grid-row: 2; grid-column: 1 / -1; width: min(58%, 230px); padding: 0; border: 0; }
    .radio-volume > label { display: none; }
    .radio-volume-controls { gap: 6px; }
    .radio-socials { grid-row: 2; grid-column: 1 / -1; justify-self: end; flex-direction: row; gap: 7px; }
    .radio-social { width: 36px; height: 36px; }
    .radio-player-foot { margin-top: 0; padding: 5px 0 6px; font-size: 11px; }
}
@media (max-width: 480px) {
    .radio-install { display: none; }
    .radio-mobile-install { display: block; flex: 1 0 100%; padding: 12px; border: 0; border-radius: 12px; background: #e4e8e0; color: #24392e; font-size: 14px; font-weight: 800; }
    .radio-brand strong { max-width: 138px; font-size: 18px; }
    .radio-player-toggle { font-size: 13px; }
    .radio-player-toggle svg { width: 18px; height: 18px; }
    .radio-art { display: none; }
    .radio-navigation-notice { flex-wrap: wrap; inset-inline: 12px; max-width: none; }
    .radio-navigation-notice span { flex-basis: calc(100% - 40px); }
    .radio-navigation-notice [data-navigation-dismiss] { position: absolute; top: 12px; right: 10px; }
}
@media (max-width: 359px) {
    .radio-header { gap: 6px; }
    .radio-brand { flex-basis: 80px; gap: 5px; }
    .radio-brand strong { max-width: 95px; font-size: 16px; }
    .radio-brand img { width: 36px; height: 36px; flex-basis: 36px; }
    .radio-player-toggle { padding: 9px; }
    .radio-player-toggle svg { display: none; }
    .radio-volume { width: 52%; }
    .radio-socials { gap: 5px; }
    .radio-social { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .radio-shell *, .radio-shell *::before, .radio-shell *::after { animation: none !important; transition: none !important; }
}