/* ==========================================================================
   MAIS TUNER 24.18.0 — camada "Rede 2026"
   Alinha o app com a linguagem dos sites da rede (rmaisbr.com e Mais Europa):
   uma largura de conteúdo, cartões com cantos 18px, eyebrows com filete, ação
   e acabamento uniforme, preservando as cores e fontes originais.
   REGRAS: (1) não muda fonte, peso nem espaçamento de letra de nenhum elemento —
   as famílias originais (Plus Jakarta Sans, Reddit Sans, Work Sans, NRK Sans,
   Share Tech Mono) ficam como estão; (2) tudo que mexe em cartão/grade vale só
   para o modo GRADE (padrão). Os modos Lista, Grande e Marcas do botão ao lado da
   busca mantêm o layout próprio: por isso os cartões usam
   main#main .grid:not(.list-view):not(.large-view):not(.brand-view).
   É a ÚLTIMA folha carregada: ganha das camadas anteriores sem reescrevê-las.
   Para voltar ao visual antigo basta remover o <link> desta folha.
   ========================================================================== */

:root{
  --mt-max:1240px;
  --mt-gutter:clamp(16px,3.2vw,40px);
  --mt-radius:18px;
  --mt-radius-s:12px;
  --mt-request:#ffd453;
  --mt-request-ink:#2a1d00;
  --mt-live:#ff4d5e;
  --mt-ease:cubic-bezier(.2,.7,.2,1);
}
html:not([data-site-theme="light"]){
  --ui81-bg:#061529;
  --ui81-bg-2:#0a2140;
  --ui81-surface:#0d2a4d;
  --ui81-surface-2:#12345e;
  --ui81-surface-3:#19406f;
  --ui81-text:#f4f8ff;
  --ui81-muted:#a6bddb;
  --ui81-line:rgba(139,181,235,.17);
}
html[data-site-theme="light"]{
  --mt-request:#ffc933;
}

/* ---------- Uma largura para tudo ---------- */
html body .topbar-inner,
html body .hero-content,
html body .toolbar,
html body main#main,
html body .history,
html body .p5-releases,
html body .site-footer{
  width:min(var(--mt-max),calc(100% - 2*var(--mt-gutter)))!important;
  max-width:none!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:0!important;padding-right:0!important;
  box-sizing:border-box;
}
html body #miniPlayer .mini-player-inner,
html body #miniPlayer .mini-timeline{
  width:min(var(--mt-max),calc(100% - 2*var(--mt-gutter)))!important;
  max-width:none!important;margin-left:auto!important;margin-right:auto!important;
  box-sizing:border-box;
}
html body .hero{padding-left:0!important;padding-right:0!important}

/* ---------- Cabeçalho ---------- */
html body .topbar{background:color-mix(in srgb,var(--ui81-bg) 82%,transparent)!important;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--ui81-line)!important}
html body .brand-text small{color:var(--ui81-muted)!important}
html body .top-actions .circle-btn,
html body .top-actions .language-trigger{border-radius:999px!important;background:var(--ui81-surface)!important;color:var(--ui81-text)!important;border:1px solid var(--ui81-line)!important;box-shadow:none!important}
html body .top-actions .circle-btn:hover,
html body .top-actions .language-trigger:hover{background:var(--ui81-surface-2)!important;color:var(--ui81-accent)!important}

/* ---------- Sintonia Central (hero) ---------- */
html body .hero .hero-panel{border-radius:24px!important;border:1px solid var(--ui81-line)!important}
html body .hero .hero-kicker,
html body .hero .hero-overline{display:inline-flex;align-items:center;gap:10px;color:var(--ui81-accent)!important}
html body .hero .hero-overline::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;flex:none}
html body .hero .hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
html body .hero .hero-overline{order:1;margin:0 0 10px!important}
html body .hero .hero-station{order:2;margin:0!important}
html body .hero .hero-editorial-question{order:3;margin:12px 0 0!important;color:var(--ui81-text)!important;opacity:.9;max-width:34ch}
html body .hero .hero-sub{order:4;margin-top:8px!important;color:var(--ui81-muted)!important}
html body .hero .hero-copy > :not(.hero-overline):not(.hero-station):not(.hero-editorial-question):not(.hero-sub){order:5}
/* ponto de estado: neutro → pulsando ao vivo → vermelho sem sinal */
html body .hero .hero-context i{background:var(--ui81-muted)!important;box-shadow:none!important}
html body .hero:has(#liveDot:not(.off)) .hero-context .hero-context-dot{background:var(--ui81-accent)!important;animation:mtDot 1.6s ease-in-out infinite}
html.signal-error body .hero .hero-context i{background:var(--mt-live)!important;animation:none}
@keyframes mtDot{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ui81-accent) 55%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
/* faixa de estado + "fontes de áudio" sem faixa clara solta no tema claro */
html body .hero .hero-detail-row{background:transparent!important;border-top:1px solid var(--ui81-line)!important}
html body .hero .source-row{background:transparent!important}
html body .hero .source-row::before{color:var(--ui81-muted)!important}

/* Play: mantém as cores originais (vermelho nos cartões/player, menta no topo). */

/* ---------- Atalhos (RadioVision, RádioVisual, Legendas, Radioguide) ---------- */
html body .toolbar-top{max-width:none!important;flex:1 1 100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;width:100%!important}
html body .toolbar-top > button{width:100%!important;max-width:none!important;min-width:0!important;justify-content:flex-start!important;gap:10px!important;padding:0 18px!important;height:50px!important;border-radius:14px!important;background:var(--ui81-surface)!important;border:1px solid var(--ui81-line)!important;color:var(--ui81-text)!important;transition:background .18s ease,border-color .18s ease,transform .18s var(--mt-ease)!important}
html body .toolbar-top > button:hover{background:var(--ui81-surface-2)!important;border-color:color-mix(in srgb,var(--ui81-accent) 45%,transparent)!important;transform:translateY(-2px)}
html body .toolbar-top > button > svg{order:-1;flex:none;color:var(--ui81-accent)!important}
html body #openGuideBtn > svg{fill:currentColor!important}
html body .toolbar-top > button > small,
html body #openRadioVisionBtn > span{margin-left:auto!important}
html body #openRadioVisionBtn > span{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:7px;background:var(--ui81-accent);color:var(--ui81-accent-ink)!important}

/* busca + filtros */
html body .search-row .search{border-radius:14px!important;background:var(--ui81-surface)!important;border:1px solid var(--ui81-line)!important}
html body .search-row .search:focus-within{border-color:var(--ui81-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui81-accent) 22%,transparent)!important}
html body .layout-toggle{border-radius:14px!important}
html body #tabs.tabs{gap:8px!important;scrollbar-width:none}
html body #tabs .tab{border-radius:999px!important}
html body #tabs .tab-brand img{opacity:.9!important;filter:none!important}
html:not([data-site-theme="light"]) body #tabs .tab-brand:not(.active) img{filter:brightness(0) invert(1)!important;opacity:.75!important}
html[data-site-theme="light"] body #tabs .tab-brand:not(.active) img{filter:brightness(0)!important;opacity:.7!important}

/* ---------- Títulos de seção com filete (linguagem da rede) ---------- */
html body main#main .group > h2{display:flex!important;align-items:center;gap:14px;margin-left:0!important}
html body main#main .group > h2::before{content:"";width:6px;height:.9em;border-radius:3px;background:var(--ui81-accent);flex:none}

/* ---------- Cartões de estação ---------- */
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:16px!important;align-items:stretch!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card{display:flex!important;flex-direction:column!important;width:auto!important;min-width:0!important;border-radius:var(--mt-radius)!important;border:1px solid var(--ui81-line)!important;background:var(--ui81-surface)!important;overflow:hidden!important;transition:transform .22s var(--mt-ease),box-shadow .22s var(--mt-ease),border-color .22s ease!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card:not(.disabled):hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ui81-accent) 40%,transparent)!important;box-shadow:0 22px 40px -26px rgba(0,0,0,.85)!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-hero{border-radius:0!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-body{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;min-width:0!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-text{min-width:0!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-actions{margin-top:auto!important;padding-top:12px!important;display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-actions .card-dots{margin-left:auto!important;flex:none!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-tag{color:var(--ui81-muted)!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-ext{color:var(--ui81-muted)!important;text-decoration:none!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-ext:hover{color:var(--ui81-accent)!important}
/* fontes de áudio: uma linha com rolagem lateral, nomes inteiros (antes "AAC · p…") */
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-src-row{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none;margin-right:-14px;padding-right:14px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-src-row::-webkit-scrollbar{display:none}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-src-pill{flex:none!important;max-width:none!important;width:auto!important;white-space:nowrap!important;text-overflow:clip!important;overflow:visible!important;border-radius:999px!important}
/* selo de banda legível sobre qualquer cor de marca */
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-hero-badge{background:rgba(3,18,36,.74)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* P8: seletor de rede não cobre mais o logo */
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-network-row{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-network-brand{min-width:0!important;flex:1 1 auto!important;overflow:hidden}
html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-network-trigger{position:static!important;flex:none!important;height:32px!important;padding:0 10px 0 12px!important;border-radius:999px!important}

/* ---------- Mini player ---------- */
html body #miniPlayer{border-top:1px solid var(--ui81-line)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
html body #miniPlayer .mini-art{border-radius:12px!important}
/* "Pedir": amarelo com texto escuro (antes amarelo sobre amarelo) */
html body #miniRequestBtn.mini-request-shortcut,
html body #cinemaModal .mini-request-shortcut{background:var(--mt-request)!important;color:var(--mt-request-ink)!important;border:0!important;border-radius:999px!important;padding:0 14px 0 11px!important;gap:6px!important;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--mt-request) 80%,transparent)!important}
html body #miniRequestBtn.mini-request-shortcut svg,
html body #cinemaModal .mini-request-shortcut svg{fill:currentColor!important;color:currentColor!important}
html body #miniRequestBtn.mini-request-shortcut span{color:currentColor!important}
/* selo SEM SINAL / AO VIVO */
html body .mini-live{display:inline-flex!important;align-items:center!important;gap:8px!important;width:auto!important;height:30px!important;border-radius:999px!important;white-space:nowrap!important;flex:none!important;overflow:visible!important;padding-left:12px!important;padding-right:12px!important}
html body .mini-live > i,html body #cinemaModal #cinemaLiveDot,html body #miniPlayer #miniLiveDot{position:relative!important;inset:auto!important;transform:none!important;margin:0!important;flex:none!important}
html[data-site-theme="light"] body .mini-live.off{background:#ffe3e6!important;color:#b0142a!important}
/* botão "abrir stream" acima do player, discreto */
html body #externalBtn.fab{background:var(--ui81-surface)!important;color:var(--ui81-text)!important;border:1px solid var(--ui81-line)!important;box-shadow:0 12px 28px -16px rgba(0,0,0,.8)!important;width:46px!important;height:46px!important}
html body #externalBtn.fab svg{fill:currentColor!important}
html body:has(#miniPlayer.show) #externalBtn.fab{bottom:calc(var(--mt-mini-h,112px) + 16px)!important}

/* ---------- Cinema ---------- */
html body #cinemaModal .card-network-trigger,
html body #cinemaModal .cinema-station-row button{border-radius:999px!important}
html body #cinemaModal .cinema-controls-row{overflow:visible!important}
html body #cinemaModal .mini-live{max-width:none!important}

/* ---------- Pedir música (catálogo) ---------- */
html body .request-catalog-card{border-radius:16px!important;overflow:hidden!important;border:1px solid var(--ui81-line)!important;display:flex!important;flex-direction:column!important}
html body .request-catalog-card .request-catalog-copy{display:flex!important;flex-direction:column!important;gap:3px!important;padding:12px 12px 0!important;flex:1 1 auto}
html body .request-catalog-card .request-catalog-track{margin:0!important;min-height:0!important}
html body .request-catalog-card .request-catalog-artist{margin:0!important;min-height:0!important;color:var(--ui81-muted)!important}
html body .request-catalog-card .request-catalog-action{margin:12px!important;width:auto!important;border-radius:999px!important}
html body .request-catalog-card div.request-catalog-art{position:relative;background:linear-gradient(140deg,color-mix(in srgb,var(--request-accent,var(--ui81-accent)) 55%,#0a2140),#0a2140)!important}
html body .request-catalog-card div.request-catalog-art::after{content:"♫";position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:rgba(255,255,255,.55)}
/* confirmação dentro do próprio cartão (substitui o window.confirm nativo) */
.mt-req-confirm{display:flex;flex-direction:column;gap:8px;margin:12px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--request-accent,var(--ui81-accent)) 18%,var(--ui81-surface-2));border:1px solid color-mix(in srgb,var(--request-accent,var(--ui81-accent)) 45%,transparent);animation:mtPop .22s var(--mt-ease)}
.mt-req-confirm p{margin:0;font:inherit;font-weight:700;font-size:13px;line-height:1.35;color:var(--ui81-text)}
.mt-req-confirm div{display:flex;flex-wrap:wrap;gap:8px}
html body .request-catalog-card .mt-req-hidden{display:none!important}
.mt-req-confirm button{flex:1 1 90px;white-space:nowrap;height:36px;border-radius:999px;border:0;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.mt-req-confirm .mt-req-yes{background:var(--request-accent,var(--ui81-accent));color:#fff}
.mt-req-confirm .mt-req-no{background:transparent;color:var(--ui81-text);border:1px solid var(--ui81-line)}
html body .request-catalog-card .request-catalog-action.is-sent{background:transparent!important;color:var(--ui81-accent)!important;box-shadow:inset 0 0 0 1px currentColor!important;opacity:1!important;cursor:default}
@keyframes mtPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Aviso P8 Goiânia: rótulo não encosta mais no logo ---------- */
html body .p8-launch-kicker{margin-top:22px!important}
html body .p8-launch-card{border-radius:24px!important;overflow:hidden!important}
html body .p8-launch-card .p8-launch-lineup,html body .p8-launch-card .p8-launch-all,html body .p8-launch-card .p8-launch-row-arrow{border-radius:16px!important}
html body .p8-launch-card .p8-launch-artists > *{border-radius:999px!important}
html body .p8-launch-card .p8-launch-close{border-radius:999px!important}

/* ---------- Seletor de idioma ---------- */
html body #languageMenu.language-menu{border:1px solid var(--ui81-line)!important;box-shadow:0 24px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.25)!important}

/* ---------- Menu do site: ícones centralizados e do mesmo tamanho ---------- */
html body .site-menu-icon{display:grid!important;place-items:center!important;line-height:1!important;text-align:center!important;flex:none!important}

/* ---------- Barra dos Podcasts ---------- */
html body .podcasts-topbar{grid-template-columns:auto minmax(0,1fr) auto auto!important;padding-right:28px!important}
html body .podcasts-topbar .podcasts-search{width:100%!important;max-width:none!important}
html body .podcasts-topbrand .podcasts-mark{display:grid!important;place-items:center!important;color:#03233a!important;font-size:20px!important;line-height:1!important}
@media (max-width:700px){
  html body .podcasts-topbar{padding-right:12px!important}
  html body .podcasts-topbar .podcasts-back,
  html body .podcasts-topbar .language-trigger{width:42px!important;min-width:42px!important;height:42px!important;border-radius:14px!important}
  html body .podcasts-topbar .podcasts-topbrand{flex:1 1 auto!important;justify-content:center!important}
}

/* ---------- Rodapé ---------- */
html body .site-footer{border-top:1px solid var(--ui81-line)!important;color:var(--ui81-muted)!important}
html body .dist-footer-link{border-radius:999px!important}

/* ---------- Celular ---------- */
@media (max-width:700px){
  html body .toolbar-top{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .toolbar-top > button{height:46px!important;padding:0 14px!important}
  /* estações em 2 colunas compactas (antes 1 cartão de ~400 px por rádio) */
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-hero{height:auto!important;aspect-ratio:16/10!important;min-height:0!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-body{padding:10px 10px 12px!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-brand-row{min-height:0!important;margin-bottom:4px!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-brand-logo{max-height:22px!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-tag{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-ext,
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-prog-time{display:none!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-src-row{margin-right:-10px;padding-right:10px}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-actions{gap:6px!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-play-row{width:auto!important;flex:none!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-play-text{display:none!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-pill{width:36px!important;min-width:36px!important;height:36px!important;padding:0!important;justify-content:center!important;font-size:0!important;flex:none!important;border-radius:999px!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-pill svg{width:18px!important;height:18px!important;margin:0!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-dots{width:36px!important;height:36px!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card .card-network-trigger{height:28px!important;padding:0 8px!important}
  /* modo Lista no celular: o nome do programa passava por baixo do botão play (bug antigo) */
  html body main#main .grid.list-view > .card .card-body{flex-wrap:wrap!important;row-gap:10px!important}
  html body main#main .grid.list-view > .card .card-text{flex:1 1 100%!important;min-width:0!important}
  html body main#main .grid.list-view > .card .card-prog-name,
  html body main#main .grid.list-view > .card .card-tag{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body main#main .grid.list-view > .card .card-actions{flex:none!important;margin-left:0!important}
  /* mini player: a barra de progresso tinha largura 0 no celular e só a bolinha
     aparecia solta no canto (as horas ficam ocultas e a barra caía na coluna 1) */
  html body #miniPlayer .mini-timeline{grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important}
  html body #miniPlayer .mini-timeline .mini-track-bar{grid-column:2!important;width:100%!important;min-width:0!important}
  html body #miniPlayer .mini-timeline{padding-left:0!important;padding-right:0!important}
  html body #miniPlayer #miniRequestBtn.mini-request-shortcut{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;justify-content:center!important}
  html body #miniPlayer #miniRequestBtn.mini-request-shortcut span{display:none!important}
  html body #miniPlayer .mini-live{height:34px!important}
  /* play da capa do hero não sai mais para fora do cartão */
  html body .hero .hero-play{right:10px!important;bottom:10px!important}
  html body #externalBtn.fab{width:42px!important;height:42px!important;right:14px!important}
  /* cinema: controles organizados (capa e palco ficam em cinema-2026.css) */
  html body #cinemaModal .cinema-controls-row{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px 14px!important;height:auto!important}
  html body #cinemaModal .cinema-controls-row .mini-play{order:0;width:58px!important;height:58px!important}
  html body #cinemaModal .cinema-controls-row .mini-live{order:2;position:static!important;transform:none!important}
  html body #cinemaModal .cinema-controls-row > :not(.mini-play):not(.mini-live){order:1}
}
@media (max-width:360px){
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view){grid-template-columns:minmax(0,1fr)!important}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card,html body .toolbar-top > button{transition:none!important}
  html body main#main .grid:not(.list-view):not(.large-view):not(.brand-view) > .card:hover,html body .toolbar-top > button:hover{transform:none!important}
  html body .hero .hero-context i{animation:none!important}
}