/* ==========================================================================
   Página pública da rádio. As cores vêm da própria rádio (--p e --f); o texto
   é claro ou escuro conforme o fundo. Três temas no mesmo HTML:
     capa      — imersivo, logotipo grande, player no centro (padrão)
     classico  — cartão horizontal, logotipo ao lado do nome
     minimal   — só a barra do player
   ========================================================================== */
@font-face{font-family:'Outfit';src:url('/static/fonts/outfit-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/static/fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{--p:#0a6bf7;--f:#061423;--tx:#f3f7fb;--suave:rgba(243,247,251,.68);
  --vidro:rgba(255,255,255,.07);--borda:rgba(255,255,255,.13);--display:'Outfit',system-ui,sans-serif;
  --fam:'Montserrat',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--peso-titulo:800}
[data-claro="1"]{--vidro:rgba(0,0,0,.05);--borda:rgba(0,0,0,.1)}
*{box-sizing:border-box}
html{color-scheme:dark}
[data-claro="1"] html,body[data-claro="1"]{color-scheme:light}
body{margin:0;min-height:100vh;background:var(--f);color:var(--tx);
  font:16px/1.55 var(--fam);
  background-image:radial-gradient(900px 520px at 50% -12%, color-mix(in srgb, var(--p) 38%, transparent) 0%, transparent 70%);
  padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,.titulo,.estado,.ouvintes b,.tocar-aviso span{font-family:var(--display);font-weight:var(--peso-titulo)}
button,input,textarea{font-family:var(--fam)}

/* ---- imagem de fundo escolhida pela rádio: fica atrás de tudo, com um véu da cor de fundo ---- */
body.com-fundo{background-image:none}
.fundo{position:fixed;inset:calc(-1 * var(--fundo-blur,0px) * 2);z-index:-2;background:var(--fundo-img) center/cover no-repeat;filter:blur(var(--fundo-blur,0px))}
.fundo-veu{position:fixed;inset:0;z-index:-1;background:var(--f);opacity:var(--fundo-veu,.55)}
body.com-fundo .player,body.com-fundo .bloco{background:color-mix(in srgb, var(--f) 55%, transparent)}
/* Botões sobre a foto: mais opacos e com desfoque atrás, para não sumirem; o WhatsApp mantém o verde dele. */
body.com-fundo .canal,body.com-fundo .acao{background:color-mix(in srgb, var(--f) 72%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.com-fundo .canal:hover,body.com-fundo .acao:hover{background:color-mix(in srgb, var(--p) 35%, var(--f))}
body.com-fundo .canal.whatsapp,body.com-fundo .canal.whatsapp:hover{background:#25d366;color:#062b16}
body.com-fundo .acao.destaque,body.com-fundo .acao.destaque:hover{background:var(--p);color:#fff}
a{color:var(--tx)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--p);outline-offset:3px}
.sub{color:var(--suave);font-size:.9em}
.pagina{max-width:760px;margin:0 auto;padding:clamp(1.2rem,4vw,2.5rem) 1.2rem 3rem}

/* ---- marca da rádio ---- */
.marca{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;margin-bottom:1.6rem}
.marca .logo{width:clamp(150px,40vw,240px);height:auto;max-height:240px;object-fit:contain;border-radius:22px;
  background:#fff;padding:.5rem;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.marca h1{font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:-.02em;margin:.2rem 0 0;line-height:1.1}
.marca .slogan{margin:0;color:var(--suave);font-size:1rem}

/* ---- o player: a razão da página ---- */
.player{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;
  background:var(--vidro);border:1px solid var(--borda);border-radius:26px;padding:1.6rem 1.4rem 1.3rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.play{width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:0;
  background:var(--p);box-shadow:0 12px 34px color-mix(in srgb, var(--p) 55%, transparent);
  display:grid;place-items:center;transition:transform .15s,box-shadow .15s;flex:none}
.play:hover{transform:scale(1.04)}
.play:active{transform:scale(.97)}
.play svg{width:38px;height:38px;fill:#fff}
.play .ic-pause{display:none}
.play[aria-pressed="true"] .ic-play{display:none}
.play[aria-pressed="true"] .ic-pause{display:block}
.estado{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
.estado .ponto{width:8px;height:8px;border-radius:50%;background:var(--suave);opacity:.5}
.estado[data-estado="musica"] .ponto{background:var(--p);opacity:1;box-shadow:0 0 10px var(--p)}
.estado[data-estado="aovivo"]{color:#ff8a8a}
.estado[data-estado="aovivo"] .ponto{background:#ff4d4d;opacity:1;box-shadow:0 0 12px #ff4d4d;animation:respira 1.5s ease-in-out infinite}
@keyframes respira{50%{opacity:.35}}
.faixa-info{min-width:0;width:100%}
.titulo{font-size:clamp(1.15rem,3.4vw,1.45rem);line-height:1.2;margin:0;letter-spacing:-.01em;overflow-wrap:anywhere}
.artista{margin:.15rem 0 0;color:var(--suave)}
.programa{margin:.1rem 0 0;color:var(--suave);font-size:.85rem}

/* equalizador: barras que reagem ao áudio de verdade (Web Audio); sem ele, animação suave quando toca */
.eq{display:flex;align-items:flex-end;gap:4px;height:26px}
.eq i{display:block;width:5px;height:4px;border-radius:3px;background:var(--p);opacity:.9;transition:height .08s}
.player.tocando.sem-analise .eq i{animation:pula 1.1s ease-in-out infinite}
.player.tocando.sem-analise .eq i:nth-child(2){animation-delay:.15s}.player.tocando.sem-analise .eq i:nth-child(3){animation-delay:.3s}
.player.tocando.sem-analise .eq i:nth-child(4){animation-delay:.45s}.player.tocando.sem-analise .eq i:nth-child(5){animation-delay:.6s}
@keyframes pula{0%,100%{height:5px}50%{height:24px}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none!important}.estado .ponto{animation:none!important}}

.controles{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;width:100%;color:var(--suave);font-size:.9rem}
.controles input[type=range]{width:140px;accent-color:var(--p)}
.ouvintes b{color:var(--tx);font-family:var(--display);font-weight:800}

/* aviso quando o navegador não deixou começar sozinho */
.tocar-aviso{position:absolute;inset:0;border-radius:26px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--f) 78%, transparent);backdrop-filter:blur(4px);cursor:pointer;border:0;color:var(--tx);font:inherit}
.tocar-aviso span{font-family:var(--display);font-weight:800;font-size:1.1rem;display:flex;align-items:center;gap:.6rem}

/* ---- canais ---- */
.canais{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0 0}
.canal{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:600;font-size:.92rem;
  padding:.5rem .9rem;border-radius:999px;background:var(--vidro);border:1px solid var(--borda);transition:.12s}
.canal:hover{background:color-mix(in srgb, var(--p) 25%, var(--vidro))}
.canal svg{width:18px;height:18px;fill:currentColor}
.canal.whatsapp{background:#25d366;color:#062b16;border-color:transparent}
.canal.whatsapp:hover{filter:brightness(1.06)}

/* ---- blocos ---- */
.bloco{background:var(--vidro);border:1px solid var(--borda);border-radius:18px;padding:1.1rem 1.2rem;margin-top:1rem}
.bloco h2{font-size:1.05rem;margin:0 0 .6rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}
.bloco p{margin:0}

/* ---- contato ---- */
.contato form{display:grid;gap:.6rem}
.contato input,.contato textarea{width:100%;background:var(--vidro);border:1px solid var(--borda);color:var(--tx);border-radius:10px;padding:.6rem .7rem;font:inherit}
.contato input:focus,.contato textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 25%, transparent)}
.contato button{justify-self:start;background:var(--p);color:#fff;border:0;border-radius:10px;padding:.65rem 1.2rem;font:inherit;font-weight:700;cursor:pointer}
.contato .retorno{margin-top:.4rem;font-size:.92rem}
.contato .retorno.ok{color:#7ff0b4}.contato .retorno.erro{color:#ff9d9d}
.isca{position:absolute;left:-9999px;opacity:0;height:0;width:0}


/* ---- barra fixa no topo: só quando o player saiu da tela ---- */
.barra-fixa{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:.7rem;padding:.5rem .9rem;
  padding-top:calc(.5rem + env(safe-area-inset-top));background:color-mix(in srgb, var(--f) 88%, transparent);border-bottom:1px solid var(--borda);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateY(-110%);transition:transform .22s ease}
.barra-fixa.visivel{transform:none}
.play.mini{width:44px;height:44px;box-shadow:0 6px 18px color-mix(in srgb, var(--p) 45%, transparent)}
.play.mini svg{width:20px;height:20px}
.barra-info{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.barra-info strong{font-family:var(--display);font-weight:var(--peso-titulo);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-info span{font-size:.8rem;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- ações: compartilhar e baixar o app ---- */
.acoes-pagina{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;margin:.9rem 0 0}
.acao{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-weight:600;font-size:.92rem;color:var(--tx);cursor:pointer;
  padding:.55rem 1rem;border-radius:999px;background:var(--vidro);border:1px solid var(--borda);transition:.12s;min-height:44px}
.acao:hover{background:color-mix(in srgb, var(--p) 25%, var(--vidro))}
.acao svg{width:18px;height:18px;fill:currentColor}
.acao.destaque{background:var(--p);color:#fff;border-color:transparent;box-shadow:0 8px 24px color-mix(in srgb, var(--p) 40%, transparent)}
.acao.destaque:hover{filter:brightness(1.08)}
@media (display-mode:standalone){.acoes-pagina #btn-instalar{display:none}}

/* ---- programação de hoje ---- */
.grade-dia{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.grade-dia li{display:flex;align-items:center;gap:.7rem;padding:.45rem .6rem;border-radius:10px;color:var(--suave)}
.grade-dia .hora{font-family:var(--display);font-weight:var(--peso-titulo);font-variant-numeric:tabular-nums;min-width:3.2em;color:var(--tx)}
.grade-dia .nome{flex:1;min-width:0;overflow-wrap:anywhere}
.grade-dia li.agora{background:color-mix(in srgb, var(--p) 22%, transparent);color:var(--tx)}
.grade-dia .tag{font-family:var(--display);font-weight:var(--peso-titulo);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--p);padding:.15rem .5rem;border-radius:999px}

/* ---- comentários ---- */
.comentarios .qtd{font-size:.75rem;background:var(--vidro);border:1px solid var(--borda);border-radius:999px;padding:.05rem .55rem;color:var(--suave)}
.comentarios form{display:grid;gap:.55rem;margin-bottom:1rem}
.comentarios .linha-com{display:flex;justify-content:flex-end}
.comentarios input,.comentarios textarea{width:100%;min-width:0;background:var(--vidro);border:1px solid var(--borda);color:var(--tx);border-radius:10px;padding:.6rem .7rem;font:inherit;font-size:16px}
.comentarios input:focus,.comentarios textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 25%, transparent)}
.comentarios button{flex:none;background:var(--p);color:#fff;border:0;border-radius:10px;padding:.6rem 1.1rem;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.comentarios .retorno{margin:0;font-size:.92rem}
.comentarios .retorno.ok{color:#7ff0b4}.comentarios .retorno.erro{color:#ff9d9d}
.lista-com{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.lista-com li{background:var(--vidro);border:1px solid var(--borda);border-radius:14px;padding:.7rem .85rem;animation:surge .25s ease}
@keyframes surge{from{opacity:0;transform:translateY(-4px)}}
.lista-com .quem{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.lista-com .quem strong{font-weight:700;overflow-wrap:anywhere}
.lista-com time{font-size:.78rem;color:var(--suave);flex:none}
.lista-com p{margin:.25rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.comentarios .vazio{margin-top:.3rem}

/* ---- folha de instruções (iPhone) ---- */
.folha{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding:1rem}
.folha-corpo{background:var(--f);color:var(--tx);border:1px solid var(--borda);border-radius:20px;padding:1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));max-width:440px;width:100%;animation:sobe .25s ease}
@keyframes sobe{from{transform:translateY(30px);opacity:0}}
.folha-corpo h3{margin:0 0 .7rem;font-size:1.1rem}
.folha-corpo ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.folha-corpo svg{width:18px;height:18px;fill:currentColor;vertical-align:-3px}
.folha-corpo .fechar{display:block;box-sizing:border-box;text-align:center;text-decoration:none;margin-top:.7rem;width:100%;background:var(--p);color:#fff;border:0;border-radius:12px;padding:.75rem;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.folha-corpo .fechar.secundario{background:var(--vidro);border:1px solid var(--borda);color:var(--tx)}
.folha-corpo .sub{margin:0 0 .6rem}
.folha-app{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--borda)}
.folha-app p{margin:0 0 .6rem;font-size:.92rem}

/* ---- celular: toques maiores, nada de zoom ao focar, cantos contidos ---- */
@media (max-width:600px){
  .pagina{padding:1rem .9rem 2.5rem}
  .player{padding:1.3rem 1rem 1.1rem;border-radius:20px}
  .tocar-aviso{border-radius:20px}
  .canal{min-height:42px}
  .contato input,.contato textarea{font-size:16px}
  .contato button{width:100%;min-height:46px}
  .controles input[type=range]{width:min(60vw,220px)}
  .comentarios .linha-com button{width:100%}
}

/* ---- tema clássico: marca e player lado a lado, num cartão ---- */
body[data-tema="classico"] .marca{flex-direction:row;text-align:left;justify-content:flex-start;gap:1rem}
body[data-tema="classico"] .marca .logo{width:auto;height:116px;max-width:260px;max-height:116px;border-radius:18px;padding:.4rem}
@media (max-width:600px){body[data-tema="classico"] .marca .logo{height:88px;max-width:200px}}
body[data-tema="classico"] .marca h1{font-size:clamp(1.3rem,4vw,1.8rem)}
body[data-tema="classico"] .player{flex-direction:row;text-align:left;align-items:center;padding:1.1rem 1.2rem;border-radius:18px;gap:1rem}
body[data-tema="classico"] .play{width:68px;height:68px}
body[data-tema="classico"] .play svg{width:28px;height:28px}
body[data-tema="classico"] .faixa-info{flex:1}
body[data-tema="classico"] .eq{order:-1;display:none}
body[data-tema="classico"] .controles{width:auto;flex-direction:column;align-items:flex-end;gap:.4rem}
body[data-tema="classico"] .controles input[type=range]{width:120px}
@media (max-width:600px){body[data-tema="classico"] .player{flex-wrap:wrap;justify-content:center;text-align:center}
  body[data-tema="classico"] .controles{width:100%;flex-direction:row;justify-content:center}}

/* ---- tema mínimo: só a barra ---- */
body[data-tema="minimal"] .pagina{max-width:640px;padding-top:1.2rem}
body[data-tema="minimal"] .marca,body[data-tema="minimal"] .bloco,body[data-tema="minimal"] .eq{display:none}
body[data-tema="minimal"] .player{flex-direction:row;text-align:left;padding:.8rem 1rem;border-radius:16px;gap:.9rem}
body[data-tema="minimal"] .play{width:54px;height:54px}
body[data-tema="minimal"] .play svg{width:22px;height:22px}
body[data-tema="minimal"] .faixa-info{flex:1}
body[data-tema="minimal"] .titulo{font-size:1rem}
body[data-tema="minimal"] .controles{width:auto}
body[data-tema="minimal"] .controles input[type=range]{width:90px}
body[data-tema="minimal"] .canais{margin-top:.8rem}
body[data-tema="minimal"] .tocar-aviso{border-radius:16px}

/* ---- embed: cabe em 120px de altura ---- */
body.embed{padding:0;min-height:0;background-image:none}
body.embed .pagina{padding:.4rem;max-width:none}
body.embed .player{flex-direction:row;text-align:left;padding:.55rem .8rem;border-radius:12px;gap:.7rem}
body.embed .logo-player{height:52px;width:auto;max-width:110px;object-fit:contain;border-radius:10px;background:#fff;padding:.25rem;flex:none}
@media (max-width:420px){body.embed .logo-player{display:none}}
body.embed .play{width:48px;height:48px}
body.embed .play svg{width:20px;height:20px}
body.embed .faixa-info{flex:1}
body.embed .titulo{font-size:.95rem}
body.embed .artista,body.embed .programa{font-size:.8rem}
body.embed .eq{display:none}
body.embed .controles{width:auto}
body.embed .controles input[type=range]{width:80px}
body.embed .tocar-aviso{border-radius:12px}