/* =========================================================
   ComercioPlay — interface clara, arredondada e minimalista
   Painel e player dividem o mesmo esqueleto: barra lateral
   fixa à esquerda, conteúdo respirando à direita.
   ========================================================= */

:root {
  --fundo:      #f7f8fa;
  --superf:     #ffffff;
  --tinta:      #0f1419;
  --tinta-2:    #7b8494;
  --tinta-3:    #a8b0bd;
  --linha:      #ecedf1;
  --linha-2:    #e2e4ea;

  --verde:      #22c55e;
  --verde-2:    #16a34a;
  --verde-luz:  #e8f9ef;

  --alerta:     #e5484d;
  --alerta-luz: #fdecec;
  --ok-luz:     #e8f9ef;
  --ok-tinta:   #127a45;

  --raio:       18px;
  --raio-2:     12px;
  --sombra:     0 1px 2px rgba(15,20,25,0.04), 0 8px 28px rgba(15,20,25,0.05);
  --sombra-alta:0 18px 48px rgba(15,20,25,0.14);

  --lateral:    248px;
  --toca:       92px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fundo);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 1.25rem; }
h2 { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 0.85rem; }
h3 { font-size: 0.95rem; font-weight: 650; margin: 0; }

.apoio { color: var(--tinta-2); font-size: 0.875rem; margin: 0 0 0.75rem; }
.rotulo {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-3);
}

:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 6px; }

/* =========================================================
   ENTRADA / INSTALAÇÃO
   ========================================================= */
.tela-centro {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem;
  background:
    radial-gradient(900px 420px at 15% -10%, #e9fbf0 0%, transparent 60%),
    radial-gradient(760px 420px at 105% 110%, #eef2ff 0%, transparent 60%),
    var(--fundo);
}
.cartao {
  background: var(--superf); border: 1px solid var(--linha);
  border-radius: 24px; padding: 2.4rem 2.1rem; width: 100%; max-width: 400px;
  box-shadow: var(--sombra);
}
.cartao h1 { margin-bottom: 0.25rem; }
.cartao .apoio { margin-bottom: 1.6rem; }
.cartao .botao { width: 100%; text-align: center; margin-top: 0.4rem; }

.selo-marca {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.selo-marca .ponto {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--verde) 0%, #0ea5e9 100%);
  display: grid; place-items: center; color: #fff;
}

/* =========================================================
   ESQUELETO: barra lateral + conteúdo
   ========================================================= */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral); flex: none;
  background: var(--superf); border-right: 1px solid var(--linha);
  padding: 1.4rem 0.9rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.marca {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 0.5rem; color: var(--tinta); font-weight: 750;
  letter-spacing: -0.02em; font-size: 1.02rem; text-decoration: none;
}
.marca:hover { text-decoration: none; }
/* assinatura da marca: a sílaba "Play" sai no verde */
.marca b, h1 b { color: var(--verde-2); font-weight: inherit; }
.marca-nome { letter-spacing: -0.03em; margin-bottom: 0.3rem; }
.marca .ponto {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--verde) 0%, #0ea5e9 100%);
  display: grid; place-items: center; color: #fff;
}
.marca img {
  width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex: none;
  background: var(--fundo);
}

.grupo { display: flex; flex-direction: column; gap: 0.15rem; }
.grupo .rotulo { padding: 0 0.65rem; margin-bottom: 0.45rem; }

.item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.65rem; border-radius: 10px;
  color: var(--tinta-2); font-size: 0.885rem; font-weight: 500;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.item:hover { background: var(--fundo); color: var(--tinta); text-decoration: none; }
.item.ativo { background: var(--verde-luz); color: var(--verde-2); font-weight: 600; }
.item svg { width: 17px; height: 17px; flex: none; }

.lateral .rodape-lateral { margin-top: auto; padding: 0 0.4rem; }
.lateral .quem {
  font-size: 0.78rem; color: var(--tinta-3); line-height: 1.4;
  border-top: 1px solid var(--linha); padding-top: 0.9rem;
}
.lateral .quem strong { display: block; color: var(--tinta); font-weight: 600; font-size: 0.84rem; }

/* ---------- área principal ---------- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.9rem; position: sticky; top: 0; z-index: 5;
  background: rgba(247,248,250,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.busca {
  flex: 1; max-width: 460px; position: relative;
  display: flex; align-items: center;
}
.busca svg { position: absolute; left: 0.85rem; width: 16px; height: 16px; color: var(--tinta-3); }
.busca input {
  width: 100%; margin: 0; padding: 0.6rem 0.9rem 0.6rem 2.4rem;
  border: 1px solid var(--linha-2); border-radius: 999px; background: var(--superf);
  font: inherit; font-size: 0.875rem;
}
.busca input::placeholder { color: var(--tinta-3); }

.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #1f2937, #4b5563);
  display: grid; place-items: center; color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}

.conteudo { padding: 1.6rem 1.9rem 4rem; max-width: 1120px; width: 100%; }

/* =========================================================
   BLOCOS, FORMULÁRIOS, BOTÕES
   ========================================================= */
.bloco {
  background: var(--superf); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.35rem 1.4rem; margin: 0 0 1.1rem;
  box-shadow: var(--sombra);
}
.bloco-topo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }

label { display: block; margin: 0 0 1rem; font-size: 0.8rem; font-weight: 550; color: var(--tinta-2); }
label.caixa {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--tinta); font-size: 0.875rem; font-weight: 500;
}
label.caixa input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--verde); margin: 0; }

/* Pega todo campo de digitar, inclusive <input> sem type declarado — que o
   navegador trata como texto mas o seletor input[type=text] deixaria passar.
   O :where() zera a especificidade, então as regras abaixo continuam vencendo. */
input:not(:where([type=checkbox], [type=radio], [type=range], [type=submit],
                 [type=button], [type=reset], [type=image], [type=hidden], [type=color])),
select, textarea {
  display: block; width: 100%; margin-top: 0.4rem; padding: 0.62rem 0.8rem;
  border: 1px solid var(--linha-2); border-radius: var(--raio-2); font: inherit;
  font-size: 0.9rem; background: var(--superf); color: var(--tinta);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.14);
}
input[readonly] {
  background: var(--fundo); font-family: var(--mono); font-size: 0.78rem; color: var(--tinta-2);
}
input[type=file] { padding: 0.5rem 0.6rem; font-size: 0.82rem; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1.1rem; }
.grade > button, .grade > fieldset, .grade > .largo { grid-column: 1 / -1; }
/* o botão ocupa a linha inteira, mas mantém a largura natural de pílula */
.grade > button { justify-self: start; margin-top: 0.2rem; }

.dias {
  border: 1px solid var(--linha-2); border-radius: var(--raio-2);
  padding: 0.7rem 0.9rem 0.4rem; margin: 0 0 1rem;
}
.dias legend { font-size: 0.72rem; font-weight: 600; color: var(--tinta-2); padding: 0 0.35rem; }
.dias label.caixa { margin: 0 1rem 0.4rem 0; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: var(--verde); color: #fff; border: 0; border-radius: 999px;
  padding: 0.62rem 1.35rem; font: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.08s;
}
.botao:hover { background: var(--verde-2); text-decoration: none; }
.botao:active { transform: translateY(1px); }
.botao.secundario {
  background: var(--superf); color: var(--tinta); border: 1px solid var(--linha-2);
}
.botao.secundario:hover { background: var(--fundo); }

.link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.84rem;
  color: var(--verde-2); cursor: pointer; font-weight: 550;
}
.link:hover { text-decoration: underline; }
.link.perigo { color: var(--alerta); }
.linha-form { display: flex; gap: 1rem; margin: 0; align-items: center; }

.aviso {
  border-radius: var(--raio-2); padding: 0.75rem 1rem; font-size: 0.875rem;
  margin: 0 0 1.1rem; border: 1px solid transparent;
}
.aviso.ok   { background: var(--ok-luz); color: var(--ok-tinta); border-color: #bfeed4; }
.aviso.erro { background: var(--alerta-luz); color: #a3272b; border-color: #f7cdce; }

/* ---------- números do painel ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; margin-bottom: 1.6rem; }
.mini {
  background: var(--superf); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.05rem 1.2rem; box-shadow: var(--sombra);
}
.mini .num { display: block; font-size: 1.7rem; font-weight: 750; letter-spacing: -0.035em; line-height: 1.2; }
.mini .rot { font-size: 0.78rem; color: var(--tinta-2); }
.mini .medidor {
  display: block; height: 4px; margin-top: 0.6rem;
  background: var(--linha-2); border-radius: 999px; overflow: hidden;
}
.mini .medidor i { display: block; height: 100%; background: var(--verde); border-radius: 999px; }

/* cabeçalho do painel com a logo do comércio */
.cabeca-cliente { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.cabeca-cliente h1 { margin: 0 0 0.15rem; }
.cabeca-cliente .apoio { margin: 0; }
.capa-cliente {
  width: 62px; height: 62px; border-radius: 16px; flex: none; object-fit: cover;
  border: 1px solid var(--linha); background: var(--superf);
}
.capa-cliente.vazia {
  display: grid; place-items: center; color: #fff; border: 0;
  background: linear-gradient(140deg, var(--verde) 0%, #0ea5e9 100%);
  font-weight: 750; font-size: 1.25rem; letter-spacing: -0.02em;
}

.selo {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; padding: 0.22rem 0.6rem; border-radius: 999px;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo.no-ar  { background: var(--verde-luz); color: var(--verde-2); }
.selo.parado { background: #f1f2f5; color: var(--tinta-3); }

.tabela {
  width: 100%; border-collapse: collapse; background: var(--superf);
  font-size: 0.88rem; border: 1px solid var(--linha); border-radius: var(--raio);
  overflow: hidden;
}
.tabela th {
  text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--tinta-3); padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--linha); background: #fcfcfd;
}
.tabela td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #fcfcfd; }
.tabela tr.inativa td { opacity: 0.45; }
.tabela .acoes { white-space: nowrap; text-align: right; }
.rolagem { overflow-x: auto; border-radius: var(--raio); }

.link-copia { margin-top: 0.6rem; }

/* miniatura de capa dentro das tabelas e listas */
.capinha {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none;
  background: var(--fundo); border: 1px solid var(--linha);
}
.capinha.vazia {
  display: grid; place-items: center; color: var(--tinta-3);
  font-size: 0.7rem; font-weight: 700;
}
.capinha.herdada { opacity: 0.42; }

.faixa-linha { display: flex; align-items: center; gap: 0.7rem; }
.faixa-linha strong { font-weight: 600; }
.faixa-linha small { display: block; color: var(--tinta-2); font-size: 0.78rem; }

/* clicar na miniatura já abre o seletor de imagem */
.troca-capa { margin: 0; flex: none; }
.capa-alvo { display: block; position: relative; margin: 0; cursor: pointer; width: 40px; height: 40px; }
.capa-alvo .lapis {
  position: absolute; inset: 0; border-radius: 10px; display: grid; place-items: center;
  background: rgba(15,20,25,0.62); color: #fff; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.15s;
}
.capa-alvo:hover .lapis, .capa-alvo:focus-within .lapis { opacity: 1; }

/* ---------- área de capa no painel ---------- */
.capa-editor { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.capa-previa {
  width: 168px; height: 168px; border-radius: var(--raio); flex: none;
  background: var(--fundo) center/cover no-repeat;
  border: 1px solid var(--linha-2);
  display: grid; place-items: center; text-align: center;
  color: var(--tinta-3); font-size: 0.78rem; padding: 1rem; overflow: hidden;
}
.capa-previa img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--raio) - 1px); }
.capa-editor .campos { flex: 1; min-width: 240px; }

/* =========================================================
   PLAYER
   ========================================================= */
body.player {
  background: var(--fundo);
  padding-bottom: var(--toca);
}
.player .principal { padding-bottom: 1rem; }

/* barra lateral do player: identidade da loja + fila */
.player .lateral { height: calc(100vh - var(--toca)); }

.loja-cabeca { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.45rem; }
.loja-cabeca .logo {
  width: 42px; height: 42px; border-radius: 12px; flex: none; object-fit: cover;
  background: linear-gradient(140deg, var(--verde) 0%, #0ea5e9 100%);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.95rem;
  border: 1px solid var(--linha);
}
.loja-cabeca .nome { min-width: 0; }
.loja-cabeca .nome strong {
  display: block; font-size: 0.94rem; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loja-cabeca .nome span { font-size: 0.76rem; color: var(--tinta-2); }

/* lâmpada de estúdio */
.tally {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-3); background: #f1f2f5;
  border-radius: 999px; padding: 0.32rem 0.8rem; align-self: flex-start;
  transition: color 0.35s, background 0.35s;
}
.tally .bulbo {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  transition: box-shadow 0.35s;
}
.player.tocando .tally { color: var(--verde-2); background: var(--verde-luz); }
.player.tocando .tally .bulbo { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); animation: pulsa 2s ease-in-out infinite; }
.player.anuncio .tally { color: #b45309; background: #fef4e2; }
.player.anuncio .tally .bulbo { box-shadow: 0 0 0 4px rgba(217,119,6,0.18); }

@keyframes pulsa { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0.06); } }
@media (prefers-reduced-motion: reduce) { .player.tocando .tally .bulbo { animation: none; } }

/* ---------- o cartão grande ---------- */
.palco { padding: 1.4rem 1.9rem 0; }

.vitrine { position: relative; margin: 1.1rem 0 2.4rem; padding: 0 2.2rem; }

/* cartõezinhos espiando atrás, como no layout de referência */
.vitrine .espia {
  position: absolute; top: 12%; bottom: 12%; width: 90px;
  border-radius: 22px; opacity: 0.55; filter: blur(0.4px);
  background: var(--espia, linear-gradient(160deg, #c7d2fe, #a5b4fc));
}
.vitrine .espia.esq { left: 0; transform: translateX(14px); }
.vitrine .espia.dir { right: 0; transform: translateX(-14px); }
.vitrine .espia::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0));
}

.destaque {
  position: relative; z-index: 1; border-radius: 26px; overflow: hidden;
  min-height: 300px; display: flex; align-items: stretch;
  box-shadow: var(--sombra-alta);
  background: var(--tom, linear-gradient(135deg, #f97362 0%, #ef5f78 100%));
  transition: background 0.7s ease;
}
.destaque .fundo-borrado {
  position: absolute; inset: -18%; background: var(--capa-fundo) center/cover no-repeat;
  filter: blur(38px) saturate(1.5); opacity: 0.55; transform: scale(1.1);
}
.destaque .veu {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.14) 52%, rgba(0,0,0,0) 100%);
}

.destaque .dentro {
  position: relative; z-index: 2; flex: 1;
  display: flex; align-items: center; gap: 2rem;
  padding: 2rem 2.2rem; min-width: 0; color: #fff;
}

.destaque .texto { flex: 1; min-width: 0; }
.destaque .posicao {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(6px); border-radius: 999px; padding: 0.3rem 0.85rem;
  margin-bottom: 1rem;
}
.destaque .titulo {
  font-size: clamp(1.85rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.04; margin: 0 0 0.5rem; overflow-wrap: anywhere;
  text-shadow: 0 2px 22px rgba(0,0,0,0.28);
}
.destaque .artista { font-size: 1rem; opacity: 0.9; margin: 0; }

.destaque .pares {
  display: flex; gap: 2.4rem; margin-top: 1.7rem; flex-wrap: wrap;
}
.destaque .par .rotulo { color: rgba(255,255,255,0.68); }
.destaque .par .valor {
  font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch;
}

.destaque .capa {
  width: 236px; height: 236px; flex: none; border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,0.16); box-shadow: 0 22px 46px rgba(0,0,0,0.28);
  display: grid; place-items: center;
}
.destaque .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.destaque .capa .sigla {
  font-size: 3.4rem; font-weight: 800; color: rgba(255,255,255,0.85); letter-spacing: -0.04em;
}

/* ---------- fila em círculos ---------- */
.secao-cabeca { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1.1rem; }
.secao-cabeca h2 { margin: 0; }
.secao-cabeca .apoio { margin: 0; font-size: 0.82rem; }

.circulos { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.circulo { width: 92px; text-align: center; }
.circulo .anel {
  width: 76px; height: 76px; margin: 0 auto 0.55rem; border-radius: 50%;
  padding: 3px; background: linear-gradient(140deg, var(--verde), #0ea5e9);
}
.circulo.e-anuncio .anel { background: linear-gradient(140deg, #f59e0b, #ef4444); }
.circulo .anel span, .circulo .anel img {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; background: var(--superf);
  color: var(--tinta-2); font-weight: 700; font-size: 1.05rem;
  border: 2px solid var(--superf);
}
.circulo .nome {
  font-size: 0.79rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.circulo .sub { font-size: 0.72rem; color: var(--tinta-3); }

/* lista "a seguir" da barra lateral */
.fila-lateral { display: flex; flex-direction: column; gap: 0.1rem; }
.fila-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.55rem; border-radius: 10px; min-width: 0;
}
.fila-item:hover { background: var(--fundo); }
.fila-item .n {
  width: 18px; flex: none; text-align: center;
  font-size: 0.72rem; font-weight: 700; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}
.fila-item .cap {
  width: 30px; height: 30px; border-radius: 8px; flex: none; object-fit: cover;
  background: var(--fundo); border: 1px solid var(--linha);
  display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; color: var(--tinta-3);
}
.fila-item .txt { min-width: 0; }
.fila-item .txt b {
  display: block; font-size: 0.79rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fila-item .txt i {
  font-style: normal; font-size: 0.7rem; color: var(--tinta-3);
}
.fila-item.e-anuncio .txt i { color: #d97706; }

.recado {
  margin: 1.2rem 0 0; color: #b45309; background: #fef4e2;
  border-radius: var(--raio-2); padding: 0.7rem 0.95rem; font-size: 0.86rem;
}
.recado:empty { display: none; }

/* =========================================================
   BARRA DE REPRODUÇÃO (rodapé fixo)
   ========================================================= */
.toca {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--toca);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 1.4rem; padding: 0 1.5rem;
}

.toca .agora { display: flex; align-items: center; gap: 0.8rem; width: 260px; flex: none; min-width: 0; }
.toca .agora .cap {
  width: 50px; height: 50px; border-radius: 12px; flex: none; object-fit: cover;
  background: var(--fundo); border: 1px solid var(--linha);
  display: grid; place-items: center; font-weight: 700; color: var(--tinta-3); font-size: 0.8rem;
}
.toca .agora .txt { min-width: 0; }
.toca .agora .txt b {
  display: block; font-size: 0.875rem; font-weight: 650; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toca .agora .txt span { font-size: 0.76rem; color: var(--tinta-2); }

.toca .miolo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 0; }
.transporte { display: flex; align-items: center; gap: 1rem; }

.b-redondo {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha-2);
  background: var(--superf); color: var(--tinta-2); cursor: pointer;
  display: grid; place-items: center; transition: color 0.15s, border-color 0.15s;
}
.b-redondo:hover:not(:disabled) { color: var(--tinta); border-color: var(--tinta-3); }
.b-redondo:disabled { opacity: 0.4; cursor: default; }
.b-redondo svg { width: 15px; height: 15px; }

.b-tocar {
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--verde); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(34,197,94,0.36); transition: background 0.15s, transform 0.08s;
}
.b-tocar:hover { background: var(--verde-2); }
.b-tocar:active { transform: scale(0.95); }
.b-tocar svg { width: 18px; height: 18px; }

.trilha { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 560px; }
.trilha .t {
  font-size: 0.72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums;
  min-width: 38px; text-align: center;
}
.barra-tempo { flex: 1; height: 5px; background: var(--linha-2); border-radius: 999px; overflow: hidden; }
.barra-tempo i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--verde); transition: width 0.25s linear;
}
.player.anuncio .barra-tempo i { background: #f59e0b; }
@media (prefers-reduced-motion: reduce) { .barra-tempo i { transition: none; } }

.toca .direita { display: flex; align-items: center; gap: 0.8rem; width: 210px; flex: none; justify-content: flex-end; }
.volume { display: flex; align-items: center; gap: 0.55rem; }
.volume svg { width: 16px; height: 16px; color: var(--tinta-3); flex: none; }
.volume input[type=range] {
  width: 96px; margin: 0; padding: 0; border: 0; background: transparent;
  accent-color: var(--verde); cursor: pointer;
}
.volume input[type=range]:focus { box-shadow: none; }
.volume .pct {
  font-size: 0.72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; min-width: 30px;
}
.sinal {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--tinta-3); white-space: nowrap;
}
.sinal.on { color: var(--verde-2); }
.sinal.off { color: var(--alerta); }

/* =========================================================
   ESTAÇÃO INDISPONÍVEL
   ========================================================= */
.aviso-grande { text-align: center; }
.aviso-grande .icone {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 1.2rem;
  background: var(--alerta-luz); color: var(--alerta);
  display: grid; place-items: center;
}

/* =========================================================
   TELAS MENORES
   ========================================================= */
@media (max-width: 1080px) {
  .destaque .capa { width: 180px; height: 180px; }
  .vitrine { padding: 0 1rem; }
  .vitrine .espia { display: none; }
}

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .lateral {
    width: 100%; height: auto; position: static; flex-direction: row;
    align-items: center; gap: 1rem; overflow-x: auto; padding: 0.8rem 1rem;
    border-right: 0; border-bottom: 1px solid var(--linha);
  }
  .lateral .grupo { flex-direction: row; gap: 0.3rem; }
  .lateral .grupo .rotulo, .lateral .rodape-lateral, .lateral .fila-lateral, .lateral .tally { display: none; }
  .player .lateral { height: auto; }
  .conteudo, .palco { padding-left: 1.1rem; padding-right: 1.1rem; }
  .topo { padding: 0.8rem 1.1rem; }

  .destaque { min-height: 0; }
  .destaque .dentro { flex-direction: column-reverse; align-items: flex-start; gap: 1.4rem; padding: 1.5rem; }
  .destaque .capa { width: 130px; height: 130px; }

  .toca { gap: 0.8rem; padding: 0 0.9rem; }
  .toca .agora { width: auto; flex: 1; }
  .toca .agora .txt span { display: none; }
  .toca .direita { display: none; }
  .trilha .t { min-width: 34px; }
}

@media (max-width: 560px) {
  .toca .miolo { flex: none; }
  .trilha { display: none; }
  .circulo { width: 74px; }
  .circulo .anel { width: 62px; height: 62px; }
}