/* ============ Player de Radio HTML5 ============
   Tamanhos e cantos chegam como variaveis inline vindas do p.php.
   Os valores abaixo sao apenas reserva, caso alguma falte.
   ================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:transparent;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

.rp{
  --raio:16px; --raio-m:12px; --raio-s:9px; --raio-btn:50%;
  --btn-tam:62px; --logo-tam:96px; --redes-tam:32px; --vol-larg:120px;

  width:100%;height:100%;
  background:var(--fundo);
  color:var(--texto);
  border-radius:var(--raio);
  padding:18px;
  display:flex;
  overflow:hidden;
  position:relative;
  min-width:0;
}
.rp::after{ /* brilho sutil no topo */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 50% -20%, var(--glow), transparent 60%);
}

/* ---------- Botao play ---------- */
.rp-btn{
  flex:none;position:relative;z-index:2;
  display:grid;place-items:center;
  width:var(--btn-tam);height:var(--btn-tam);
  border-radius:var(--raio-btn);
  border:0;cursor:pointer;padding:0;
  background:var(--cor);
  color:var(--sobre-cor);
  box-shadow:0 6px 22px -6px var(--sombra-cor);
  transition:transform .15s ease, filter .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.rp-btn:hover{filter:brightness(1.08)}
.rp-btn:active{transform:scale(.94)}
.rp-btn:focus-visible{outline:3px solid var(--cor);outline-offset:3px}
.rp-btn svg{
  width:calc(var(--btn-tam) * .42);height:calc(var(--btn-tam) * .42);
  fill:currentColor;display:block;
}
.rp-btn .ic-pause,.rp-btn .ic-load{display:none}

.rp[data-estado="tocando"] .rp-btn .ic-play{display:none}
.rp[data-estado="tocando"] .rp-btn .ic-pause{display:block}
.rp[data-estado="carregando"] .rp-btn .ic-play,
.rp[data-estado="carregando"] .rp-btn .ic-pause{display:none}
.rp[data-estado="carregando"] .rp-btn .ic-load{display:block;animation:rp-spin .8s linear infinite}
@keyframes rp-spin{to{transform:rotate(360deg)}}

/* pulso quando tocando */
.rp[data-estado="tocando"] .rp-btn::before{
  content:"";position:absolute;inset:-4px;border-radius:inherit;
  border:2px solid var(--cor);opacity:.6;
  animation:rp-pulso 1.8s ease-out infinite;
}
@keyframes rp-pulso{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.35);opacity:0}}

/* ---------- Textos ---------- */
.rp-nome{font-size:17px;font-weight:700;line-height:1.2;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-slogan{font-size:12.5px;line-height:1.3;margin:3px 0 0;color:var(--texto2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texto2);margin-top:6px;
}
.rp-status .bolha{width:7px;height:7px;border-radius:50%;background:var(--texto2);flex:none}
.rp[data-estado="tocando"] .rp-status{color:var(--cor)}
.rp[data-estado="tocando"] .bolha{background:var(--cor);animation:rp-blink 1.4s ease-in-out infinite}
.rp[data-estado="erro"] .rp-status{color:#ff6b6b}
.rp[data-estado="erro"] .bolha{background:#ff6b6b}
@keyframes rp-blink{50%{opacity:.25}}

/* ---------- Equalizador ---------- */
.rp-eq{display:none;align-items:flex-end;gap:3px;height:13px;margin-left:3px}
.rp-eq i{width:3px;border-radius:2px;background:var(--cor);height:20%;display:block}
.rp[data-estado="tocando"] .rp-eq{display:flex}
.rp[data-estado="tocando"] .rp-eq i{animation:rp-eq .9s ease-in-out infinite}
.rp-eq i:nth-child(2){animation-delay:.15s}
.rp-eq i:nth-child(3){animation-delay:.3s}
.rp-eq i:nth-child(4){animation-delay:.45s}
@keyframes rp-eq{0%,100%{height:25%}50%{height:100%}}

/* ---------- Volume ---------- */
.rp.sem-vol .rp-ctrl{display:none}
.rp-ctrl{position:relative;z-index:2;flex:none}
.rp-vol{display:flex;align-items:center;gap:8px;min-width:0;width:var(--vol-larg)}
.rp-mute{background:none;border:0;padding:4px;cursor:pointer;color:var(--texto2);
  display:grid;place-items:center;border-radius:8px;flex:none}
.rp-mute:hover{color:var(--texto)}
.rp-mute svg{width:19px;height:19px;fill:currentColor;display:block}
.rp-mute .ic-mudo{display:none}
.rp.mudo .rp-mute .ic-som{display:none}
.rp.mudo .rp-mute .ic-mudo{display:block}

.rp-range{
  -webkit-appearance:none;appearance:none;background:transparent;
  width:100%;min-width:40px;height:18px;cursor:pointer;margin:0;
}
.rp-range::-webkit-slider-runnable-track{
  height:4px;border-radius:4px;
  background:linear-gradient(to right,var(--cor) var(--pct,80%),var(--trilha) var(--pct,80%));
}
.rp-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:#fff;border:0;margin-top:-4.5px;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.rp-range::-moz-range-track{height:4px;border-radius:4px;background:var(--trilha)}
.rp-range::-moz-range-progress{height:4px;border-radius:4px;background:var(--cor)}
.rp-range::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}

/* ---------- Logo ---------- */
.rp-logo{
  flex:none;width:var(--logo-tam);height:var(--logo-tam);
  border-radius:var(--raio-m);overflow:hidden;background:var(--trilha);
  display:grid;place-items:center;position:relative;z-index:2;
}
.rp-logo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Redes sociais ---------- */
.rp-redes{display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:2;flex:none}
.rp-redes a{
  width:var(--redes-tam);height:var(--redes-tam);
  border-radius:var(--raio-s);display:grid;place-items:center;
  color:var(--texto2);background:var(--trilha);text-decoration:none;
  transition:transform .12s ease,background .12s ease,color .12s ease;
}
.rp-redes a:hover{background:var(--cor);color:var(--sobre-cor);transform:translateY(-2px)}
.rp-redes svg{
  width:calc(var(--redes-tam) * .5);height:calc(var(--redes-tam) * .5);
  fill:currentColor;display:block;
}

/* =======================================================
   LAYOUT: CARD (vertical)
   ======================================================= */
.rp.l-card{
  flex-direction:column;align-items:center;text-align:center;
  gap:12px;padding:22px 20px;justify-content:center;
}
.rp.l-card .rp-info{width:100%;min-width:0;position:relative;z-index:2}
.rp.l-card .rp-nome{font-size:19px}
.rp.l-card .rp-ctrl{width:100%;max-width:260px}
/* no card o volume ocupa a largura toda, a menos que tenha medida fixa */
.rp.l-card[data-vol-fixo="0"] .rp-vol{width:100%}
.rp.l-card .rp-status{justify-content:center}

/* =======================================================
   LAYOUT: BARRA (horizontal)
   ======================================================= */
.rp.l-bar{flex-direction:row;align-items:center;gap:14px;padding:14px 18px}
.rp.l-bar .rp-info{flex:1 1 auto;min-width:0;text-align:left;position:relative;z-index:2}

/* =======================================================
   LAYOUT: MINI
   ======================================================= */
.rp.l-mini{flex-direction:row;align-items:center;gap:11px;padding:10px 14px}
.rp.l-mini .rp-info{flex:1 1 auto;min-width:0;text-align:left;position:relative;z-index:2}
.rp.l-mini .rp-nome{font-size:14px}
.rp.l-mini .rp-slogan{display:none}
.rp.l-mini .rp-status{margin-top:2px;font-size:10px}

/* =======================================================
   POSICAO (escolhida no painel)
   ======================================================= */
/* botao de play depois dos textos */
.rp[data-btn-pos="direita"] .rp-btn{order:8}
.rp[data-btn-pos="direita"] .rp-ctrl{order:9}
.rp[data-btn-pos="direita"] .rp-redes{order:10}

/* alinhamento do conteudo */
.rp.l-card[data-alinha="esquerda"]{align-items:flex-start;text-align:left}
.rp.l-card[data-alinha="esquerda"] .rp-status{justify-content:flex-start}
.rp.l-card[data-alinha="direita"]{align-items:flex-end;text-align:right}
.rp.l-card[data-alinha="direita"] .rp-status{justify-content:flex-end}
.rp.l-card[data-alinha="centro"]{align-items:center;text-align:center}

/* nas barras, o bloco de texto deixa de esticar para o conjunto poder deslocar */
.rp.l-bar[data-alinha="centro"] .rp-info,
.rp.l-bar[data-alinha="direita"] .rp-info,
.rp.l-mini[data-alinha="centro"] .rp-info,
.rp.l-mini[data-alinha="direita"] .rp-info{flex:0 1 auto}
.rp.l-bar[data-alinha="centro"],.rp.l-mini[data-alinha="centro"]{justify-content:center}
.rp.l-bar[data-alinha="direita"],.rp.l-mini[data-alinha="direita"]{justify-content:flex-end}
.rp.l-bar[data-alinha="esquerda"],.rp.l-mini[data-alinha="esquerda"]{justify-content:flex-start}

/* =======================================================
   RESPONSIVO - largura
   ======================================================= */
@media (max-width:520px){
  .rp.l-bar .rp-vol{width:min(var(--vol-larg),86px)}
  .rp.l-bar .rp-redes a:nth-child(n+4){display:none}
}
@media (max-width:400px){
  .rp.l-bar{gap:10px;padding:12px}
  .rp.l-bar .rp-logo{display:none}
  .rp.l-bar .rp-ctrl{display:none}
  .rp.l-mini .rp-ctrl{display:none}
  .rp.l-mini .rp-logo{display:none}
}

/* =======================================================
   RESPONSIVO - altura (iframe baixo, ex.: 60px)
   min() respeita a medida escolhida no painel e so encolhe
   quando ela nao couber na altura pedida.
   ======================================================= */
@media (max-height:150px){
  .rp.l-card{flex-direction:row;text-align:left;gap:12px;padding:12px 16px;
    align-items:center;justify-content:flex-start}
  .rp.l-card .rp-logo{width:min(var(--logo-tam),52px);height:min(var(--logo-tam),52px)}
  .rp.l-card .rp-info{flex:1 1 auto;width:auto}
  .rp.l-card .rp-status{justify-content:flex-start}
  .rp.l-card .rp-ctrl{width:auto;max-width:none}
  .rp.l-card[data-vol-fixo="0"] .rp-vol{width:min(var(--vol-larg),110px)}
}
@media (max-height:96px){
  .rp{padding:9px 13px;gap:11px}
  .rp .rp-btn{width:min(var(--btn-tam),46px);height:min(var(--btn-tam),46px)}
  .rp .rp-btn svg{width:min(calc(var(--btn-tam) * .42),19px);height:min(calc(var(--btn-tam) * .42),19px)}
  .rp .rp-logo{width:min(var(--logo-tam),46px);height:min(var(--logo-tam),46px)}
  .rp .rp-nome{font-size:14.5px}
  .rp .rp-slogan{font-size:11.5px;margin-top:1px}
  .rp .rp-status{margin-top:2px;font-size:10px}
  .rp .rp-redes a{width:min(var(--redes-tam),29px);height:min(var(--redes-tam),29px)}
  .rp .rp-redes svg{width:min(calc(var(--redes-tam) * .5),15px);height:min(calc(var(--redes-tam) * .5),15px)}
}
@media (max-height:74px){
  .rp{padding:7px 11px;gap:9px}
  .rp .rp-btn{width:min(var(--btn-tam),38px);height:min(var(--btn-tam),38px)}
  .rp .rp-btn svg{width:min(calc(var(--btn-tam) * .42),16px);height:min(calc(var(--btn-tam) * .42),16px)}
  .rp .rp-logo{width:min(var(--logo-tam),38px);height:min(var(--logo-tam),38px)}
  .rp .rp-slogan{display:none}
  .rp .rp-nome{font-size:13.5px}
  .rp .rp-status{margin-top:0}
  .rp .rp-redes a{width:min(var(--redes-tam),26px);height:min(var(--redes-tam),26px)}
  .rp .rp-redes svg{width:min(calc(var(--redes-tam) * .5),13px);height:min(calc(var(--redes-tam) * .5),13px)}
  .rp .rp-vol{width:min(var(--vol-larg),90px)}
  /* o anel pulsante nao cabe numa barra tao baixa */
  .rp[data-estado="tocando"] .rp-btn::before{display:none}
}
@media (max-height:54px){
  .rp{padding:5px 9px;gap:8px}
  .rp .rp-btn{width:min(var(--btn-tam),30px);height:min(var(--btn-tam),30px)}
  .rp .rp-btn svg{width:min(calc(var(--btn-tam) * .42),13px);height:min(calc(var(--btn-tam) * .42),13px)}
  .rp .rp-logo{display:none}
  .rp .rp-status{display:none}
  .rp .rp-nome{font-size:12.5px}
  .rp .rp-redes a{width:min(var(--redes-tam),23px);height:min(var(--redes-tam),23px)}
  .rp .rp-redes svg{width:min(calc(var(--redes-tam) * .5),12px);height:min(calc(var(--redes-tam) * .5),12px)}
}