/* Visual de estúdio
   Opcional, cada usuário escolhe no menu da conta (Visual de estúdio). Inspirado nas mesas de automação de rádio:
   fundo escuro, painéis com brilho, contagem grande em azul, playlist em placas azuis, catálogo em placas cinzas,
   play verde / stop vermelho e uma doca de botões grandes embaixo. Tudo aqui vale só com <html data-visual="estudio">,
   menos a chave do menu e a doca escondida (que valem para os dois visuais). */

/* ------------------------------------------------------------------ sempre (os dois visuais) */
.doca { display: none; }
.topo-hora { display: none; }
.log-ir, .log-cod, .log-t2, .log-a2 { display: none; }
:root:not([data-visual="estudio"]) .botoneira > .botao-slot:nth-child(n+13) { display: none; }   /* o clássico mostra 12 botões */
.menu-painel .menu-visual { display: flex; align-items: center; gap: 10px; }
.menu-visual span { flex: 1; text-align: left; }
.menu-visual .chave { position: relative; flex: none; width: 30px; height: 17px; border-radius: 99px; background: var(--linha-forte); transition: background .15s; }
.menu-visual .chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.menu-visual[aria-pressed="true"] .chave { background: var(--ok); }
.menu-visual[aria-pressed="true"] .chave::after { transform: translateX(13px); }

/* ------------------------------------------------------------------ cores */
:root[data-visual="estudio"] {
  color-scheme: dark;
  --fundo: #0a0c0f;
  --superficie: #1b1f25;
  --painel: #14171c;
  --tinta: #f3f5f8;
  --tinta-2: #b9c2ce;
  --tinta-3: #7e8896;
  --linha: #262b33;
  --linha-forte: #3a414c;
  --vazio: #23282f;
  --ok: #3fcf6e;
  --alerta: #f2b630;
  --erro: #f04c3e;
  --no-ar: #ff4b3e;
  --marca: #3a8ef0;
  --marca-graf: #3a8ef0;
  --amarelo: #f5c84a;
  --azul-1: #4aa0ff; --azul-2: #1b63c9; --azul-3: #0f3f8a;
  --verde-1: #5ee08a; --verde-2: #1f9d4c;
  --vermelho-1: #ff7064; --vermelho-2: #c42a1f;
  --cinza-1: #4a515c; --cinza-2: #2a2f37;
  --brilho: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .25);
  --sombra: 0 6px 16px -8px rgba(0, 0, 0, .7);
  --doca-altura: 84px;
}

/* ------------------------------------------------------------------ base, topo e rodapé */
[data-visual="estudio"] body { background: radial-gradient(1200px 600px at 50% -200px, #1a2433 0%, transparent 70%), var(--fundo); background-attachment: fixed; }
[data-visual="estudio"] .topo { background: linear-gradient(#1d2128, #111418); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
[data-visual="estudio"] .topo .botao-tema { display: none; }   /* o visual de estúdio é sempre escuro */
[data-visual="estudio"] .selo-estudio { color: var(--amarelo); border-color: color-mix(in srgb, var(--amarelo) 40%, transparent); }
[data-visual="estudio"] .usuario-menu summary { background: linear-gradient(#2a2f37, #1c2026); box-shadow: var(--brilho); border-color: #000; }
[data-visual="estudio"] .menu-painel { background: #171a1f; border-color: #000; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9); }
[data-visual="estudio"] .rodape { border-top-color: #000; }
[data-visual="estudio"] h1 { color: #fff; }
[data-visual="estudio"] h2 { color: var(--amarelo); }

/* ------------------------------------------------------------------ peças de todas as telas */
[data-visual="estudio"] .bloco,
[data-visual="estudio"] .painel {
  background: linear-gradient(180deg, #1a1e24 0%, #121519 100%);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--sombra);
}
[data-visual="estudio"] .botao {
  background: linear-gradient(#3a414b, #252a31); border: 1px solid #05070a; color: #fff;
  box-shadow: var(--brilho); text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
[data-visual="estudio"] .botao:hover { background: linear-gradient(#47505c, #2c3239); }
[data-visual="estudio"] .botao.primario { background: linear-gradient(var(--verde-1), var(--verde-2)); border-color: #0b3d1d; color: #fff; }
[data-visual="estudio"] .botao.primario:hover { filter: brightness(1.08); background: linear-gradient(var(--verde-1), var(--verde-2)); }
[data-visual="estudio"] .botao.perigo { background: linear-gradient(var(--vermelho-1), var(--vermelho-2)); border-color: #4a0d08; color: #fff; }
[data-visual="estudio"] .campo input, [data-visual="estudio"] .campo select, [data-visual="estudio"] .campo textarea,
[data-visual="estudio"] .ferramentas-simples input, [data-visual="estudio"] .ferramentas-simples select,
[data-visual="estudio"] .sequencia select, [data-visual="estudio"] .acervo-busca input,
[data-visual="estudio"] .dialogo .campo input:not([type="range"]):not([type="radio"]) {
  background: #0d0f13; border-color: #3a414c; color: var(--tinta); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}
[data-visual="estudio"] .tab th { color: var(--amarelo); border-bottom-color: #000; }
[data-visual="estudio"] .tab td { border-bottom-color: #22272e; }
[data-visual="estudio"] .tab tbody tr:hover td { background: rgba(74, 160, 255, .08); }
[data-visual="estudio"] .dialogo { background: #15181d; border-color: #000; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .9); }
[data-visual="estudio"] .dialogo::backdrop { background: rgba(0, 0, 0, .65); }
[data-visual="estudio"] .pastas > a { background: linear-gradient(#2c3239, #1d2127); border-color: #000; box-shadow: var(--brilho); }
[data-visual="estudio"] .pastas > a[aria-current="page"] { background: linear-gradient(var(--azul-1), var(--azul-2)); color: #fff; border-color: var(--azul-3); }
[data-visual="estudio"] .dia input:checked + span,
[data-visual="estudio"] [data-editar][aria-pressed="true"] { background: linear-gradient(var(--azul-1), var(--azul-2)); color: #fff; border-color: var(--azul-3); }
[data-visual="estudio"] .aviso { background: #15181d; }
[data-visual="estudio"] code { background: #0d0f13; }

/* ------------------------------------------------------------------ tela do ar: cabeçalho */
[data-visual="estudio"] .cab-esq, [data-visual="estudio"] .cab-centro, [data-visual="estudio"] .cab-dir {
  background: linear-gradient(180deg, #1c2026, #111418); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--sombra);
}
[data-visual="estudio"] .cab-relogio b { font-size: 2.1rem; font-weight: 700; color: #fff; text-shadow: 0 0 18px rgba(74, 160, 255, .35); }
[data-visual="estudio"] .cab-relogio span { color: var(--amarelo); }
[data-visual="estudio"] .botao-grande { background: linear-gradient(#353b44, #20242a); border-color: #000; box-shadow: var(--brilho); color: #fff; }
[data-visual="estudio"] .botao-ouvir[aria-pressed="true"] { background: linear-gradient(var(--verde-1), var(--verde-2)); border-color: #0b3d1d; }
[data-visual="estudio"] .vu-apagado { background: #0b0d10; }
[data-visual="estudio"] .vu-barra::after { background: repeating-linear-gradient(90deg, transparent 0 5px, #0b0d10 5px 6px); }

/* ------------------------------------------------------------------ painéis: cabeçalho com brilho */
[data-visual="estudio"] .painel-cab { background: linear-gradient(#2a2f37, #1a1d22); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
[data-visual="estudio"] .painel-cab h2 { color: var(--amarelo); }

/* transporte: play verde, pause amarelo, stop vermelho */
[data-visual="estudio"] .transporte { background: none; border: 0; gap: 5px; overflow: visible; }
[data-visual="estudio"] .tr-botao { width: 44px; height: 38px; border-radius: 9px; border: 1px solid #000; color: #fff; box-shadow: var(--brilho);
  background: linear-gradient(#444b56, #2a2f37); }
[data-visual="estudio"] .tr-botao + .tr-botao { border-left: 1px solid #000; }
[data-visual="estudio"] .tr-play { background: linear-gradient(var(--verde-1), var(--verde-2)); border-color: #0b3d1d; }
[data-visual="estudio"] .tr-pause { background: linear-gradient(#ffd46a, #c98a0c); border-color: #4d3404; }
[data-visual="estudio"] .tr-stop { background: linear-gradient(var(--vermelho-1), var(--vermelho-2)); border-color: #4a0d08; }
[data-visual="estudio"] .tr-botao:hover { filter: brightness(1.12); color: #fff; }
[data-visual="estudio"] .tr-play[aria-pressed="true"] { background: linear-gradient(var(--verde-1), var(--verde-2)); color: #fff;
  box-shadow: var(--brilho), 0 0 0 2px #0a0c0f, 0 0 0 4px var(--verde-1), 0 0 14px rgba(94, 224, 138, .55); }
[data-visual="estudio"] .tr-pause[aria-pressed="true"] { box-shadow: var(--brilho), 0 0 0 2px #0a0c0f, 0 0 0 4px #ffd46a; }
[data-visual="estudio"] .tr-stop[aria-pressed="true"] { box-shadow: var(--brilho), 0 0 0 2px #0a0c0f, 0 0 0 4px var(--vermelho-1); }
[data-visual="estudio"] .tr-botao:not([aria-pressed="true"]) { opacity: .82; }

/* o que toca agora: caixa azul com a contagem grande */
[data-visual="estudio"] .painel-noar .tocando-agora {
  position: relative; overflow: hidden; color: #fff; border: 1px solid #072a5e; border-radius: 12px;
  background: linear-gradient(180deg, var(--azul-1) 0%, var(--azul-2) 48%, var(--azul-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -10px rgba(27, 99, 201, .8);
}
[data-visual="estudio"] .painel-noar .tocando-agora::before {   /* reflexo */
  content: ""; position: absolute; inset: 0 0 52% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
}
[data-visual="estudio"] .tocando-agora.aovivo { background: linear-gradient(180deg, var(--vermelho-1), var(--vermelho-2) 55%, #7d140d); border-color: #4a0d08; }
[data-visual="estudio"] .tocando-agora.parado { opacity: 1; filter: saturate(.35) brightness(.8); }
[data-visual="estudio"] .tocando-agora .ta-titulo, [data-visual="estudio"] .tocando-agora .ta-passou { color: #fff; }
[data-visual="estudio"] .tocando-agora .ta-artista { color: rgba(255, 255, 255, .85); }
[data-visual="estudio"] .tocando-agora .ta-estado { color: #fff; background: rgba(0, 0, 0, .25); padding: 2px 8px; border-radius: 99px; letter-spacing: .1em; }
[data-visual="estudio"] .tocando-agora .ta-estado:empty { display: none; }
[data-visual="estudio"] .tocando-agora .etiqueta { background: rgba(255, 255, 255, .2); color: #fff; }
[data-visual="estudio"] .tocando-agora .ta-capa { background: rgba(0, 0, 0, .22); color: rgba(255, 255, 255, .8); }
[data-visual="estudio"] .tocando-agora .ta-barra { background: rgba(0, 0, 0, .35); }
[data-visual="estudio"] .tocando-agora .ta-progresso { background: linear-gradient(90deg, #d9ecff, #fff); }
[data-visual="estudio"] .tocando-agora .ta-cabeca { background: #fff; border-color: var(--azul-2); }
[data-visual="estudio"] .tocando-agora .ta-barra.fim .ta-progresso { background: linear-gradient(90deg, #ffb3ab, #ff5a4f); }
[data-visual="estudio"] .tocando-agora .ta-tempos { align-items: end; }
[data-visual="estudio"] .tocando-agora .ta-falta {
  color: #fff; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 22px rgba(255, 255, 255, .25);
}
[data-visual="estudio"] .tocando-agora .ta-barra.fim + .ta-tempos .ta-falta { color: #fff; animation: estudio-pisca .5s ease-in-out infinite alternate; }
@keyframes estudio-pisca { to { color: #ffd0cb; text-shadow: 0 0 26px rgba(255, 80, 70, .9); } }

/* playlist no modelo das mesas de automação: à esquerda o botão (NO AR verde na que toca, vermelho "pôr no ar agora"
   nas próximas); à direita a placa com título e duração, artista e hora de entrada, e a pasta embaixo */
[data-visual="estudio"] .log-cab { display: none; }
[data-visual="estudio"] .log-corpo { background: none; }
[data-visual="estudio"] .log { padding: 4px 8px 8px; display: grid; gap: 5px; }
[data-visual="estudio"] .log-linha {
  --placa: linear-gradient(180deg, #4a515c 0%, #2a2f37 55%, #1d2126 100%); --borda: #000;
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-areas: "ir tit dur" "ir tit hora" "ir cod cod" "ir ac ac";
  column-gap: 0; align-items: center; min-height: 80px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; overflow: visible; color: #fff; cursor: default;
}
[data-visual="estudio"] .log-linha::before {   /* a placa */
  content: ""; display: block; position: absolute; left: 82px; right: 0; top: 0; bottom: 0; width: auto; z-index: 0;
  border-radius: 5px; border: 1px solid var(--borda); background: var(--placa); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
[data-visual="estudio"] .log-linha > *, [data-visual="estudio"] .log-linha .log-fim > * { position: relative; z-index: 1; }
/* título em cima e artista embaixo (no clássico a música aparece como "Artista - Título" numa linha só) */
[data-visual="estudio"] .log-linha.log-linha .log-titulo > b, [data-visual="estudio"] .log-linha.log-linha .log-titulo > .log-artista { display: none; }
[data-visual="estudio"] .log-linha .log-t2 { display: block; font-size: 1.12rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-visual="estudio"] .log-linha .log-a2 { display: block; font-size: 1rem; color: #e6eaef; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-visual="estudio"] .log-linha .log-t2 .log-extra { margin-left: 8px; }
[data-visual="estudio"] .log-linha .log-ico { display: none; }
[data-visual="estudio"] .log-ir {
  grid-area: ir; align-self: stretch; display: grid; place-items: center; width: 76px; min-height: 80px; padding: 0;
  border-radius: 5px; border: 1px solid #000; color: #fff; font: inherit; cursor: pointer;
  background: linear-gradient(180deg, #ff7064, #c42a1f 60%, #8f1a12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
[data-visual="estudio"] .log-ir:active { transform: translateY(1px); filter: brightness(1.1); }
[data-visual="estudio"] .log-ir svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
[data-visual="estudio"] .log-ir.no-ar { cursor: default; background: linear-gradient(180deg, #5ee08a, #1f9d4c 60%, #137a37); font-size: .9rem; font-weight: 800; letter-spacing: .02em; }
[data-visual="estudio"] .log-ir.no-ar::before { content: none; }
[data-visual="estudio"] .log-ir.no-ar { color: transparent; }
[data-visual="estudio"] .log-ir.no-ar::after {
  content: "NO AR"; position: absolute; color: #fff; background: #c42a1f; border: 2px solid #fff; border-radius: 4px; padding: 3px 7px; font-size: .88rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
[data-visual="estudio"] .log-ir.vazio { background: #121519; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); cursor: default; }
[data-visual="estudio"] .log-linha .log-titulo { grid-area: tit; padding: 8px 10px 0 16px; align-self: start; }
[data-visual="estudio"] .log-linha .log-titulo b { display: block; font-size: 1.12rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-visual="estudio"] .log-linha .log-titulo .log-artista { display: block; font-size: 1rem; color: #e6eaef; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-visual="estudio"] .log-linha .log-extra { color: #ffe08a; }
[data-visual="estudio"] .log-linha .log-fim { display: contents; }
[data-visual="estudio"] .log-linha .log-dur { grid-area: dur; align-self: end; padding: 8px 12px 0 0; font-size: 1.12rem; font-weight: 700; color: #fff; text-align: right; min-width: 0; }
[data-visual="estudio"] .log-linha .log-hora { grid-area: hora; align-self: start; display: block; padding: 2px 12px 0 0; margin: 0; background: none; border: 0;
  font-size: .9rem; font-weight: 500; color: #d5dbe2; text-align: right; }
[data-visual="estudio"] .log-linha .log-cod { grid-area: cod; display: block; padding: 0 12px 6px 16px; text-align: right; font-size: .78rem; color: #aab3be;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tipos */
[data-visual="estudio"] .log-linha.atual { --placa: linear-gradient(180deg, #62b4ff 0%, #2c80ea 50%, #1a5fc4 100%); --borda: #bfe0ff; }
[data-visual="estudio"] .log-linha.atual .log-cod, [data-visual="estudio"] .log-linha.atual .log-hora { color: #e3f0ff; }
[data-visual="estudio"] .log-linha.t-vinheta, [data-visual="estudio"] .log-linha.t-horacerta, [data-visual="estudio"] .log-linha.t-abertura { --placa: linear-gradient(180deg, #7a6fd0, #4a3f9e 55%, #352c7a); }
[data-visual="estudio"] .log-linha.t-comercial { --placa: linear-gradient(180deg, #d39a2a, #9a6a0e 55%, #704c08); }
[data-visual="estudio"] .log-linha.t-trilha { --placa: linear-gradient(180deg, #9a5bd0, #6a3a9e 55%, #4e2a7a); }
[data-visual="estudio"] .log-linha.t-material { --placa: linear-gradient(180deg, #3cbf73, #1f8a4c 55%, #166a3a); }
[data-visual="estudio"] .log-linha.t-aovivo { --placa: linear-gradient(180deg, #e0584c, #a52c22 55%, #841f17); }
[data-visual="estudio"] .log-linha.t-comando { --placa: linear-gradient(180deg, #3d5466, #2a3946 55%, #1f2a33); }
/* a cor escolhida no relógio (Musical ou relógio comercial do Opec) vale mais que a cor do tipo de áudio */
[data-visual="estudio"] .log-linha.com-cor:not(.atual):not(.break-cab) {
  --placa: linear-gradient(180deg, color-mix(in srgb, var(--cor-relogio) 72%, #fff), var(--cor-relogio) 55%, color-mix(in srgb, var(--cor-relogio) 68%, #000));
  --borda: color-mix(in srgb, var(--cor-relogio) 40%, #000); background: none; }
[data-visual="estudio"] .log-linha.com-cor.claro:not(.atual) .log-t2, [data-visual="estudio"] .log-linha.com-cor.claro:not(.atual) .log-a2,
[data-visual="estudio"] .log-linha.com-cor.claro:not(.atual) .log-dur, [data-visual="estudio"] .log-linha.com-cor.claro:not(.atual) .log-hora,
[data-visual="estudio"] .log-linha.com-cor.claro:not(.atual) .log-cod { color: #14171b; }
[data-visual="estudio"] .log-linha.atual.t-vinheta, [data-visual="estudio"] .log-linha.atual.t-comercial, [data-visual="estudio"] .log-linha.atual.t-trilha,
[data-visual="estudio"] .log-linha.atual.t-horacerta, [data-visual="estudio"] .log-linha.atual.t-abertura { --borda: #bfe0ff; }
[data-visual="estudio"] .log-linha.sorteio { --placa: #121519; --borda: #3a414c; min-height: 56px; grid-template-areas: "ir tit hora" "ir tit hora" "ir cod cod" "ir ac ac"; }
[data-visual="estudio"] .log-linha.sorteio::before { border-style: dashed; box-shadow: none; }
[data-visual="estudio"] .log-linha.sorteio .log-ir { min-height: 56px; }
[data-visual="estudio"] .log-linha.sorteio .log-titulo { align-self: center; padding-top: 0; }
[data-visual="estudio"] .log-linha.sorteio .log-t2 { font-weight: 400; font-style: italic; color: var(--tinta-3); font-size: .95rem; }
[data-visual="estudio"] .log-linha.sorteio .log-hora { align-self: center; color: var(--tinta-3); }
/* botões da linha (subir, descer, trocar, tirar): aparecem ao tocar na placa */
[data-visual="estudio"] .log-linha .log-acoes { grid-area: ac; display: none; position: static; transform: none; opacity: 1; pointer-events: auto;
  background: none; padding: 0 10px 8px 16px; gap: 6px; justify-content: flex-end; }
[data-visual="estudio"] .log-linha.aberta .log-acoes { display: flex; }
[data-visual="estudio"] .log-linha .log-acoes .icone-acao { width: 46px; height: 42px; color: #fff; background: rgba(0, 0, 0, .3); border: 1px solid rgba(0, 0, 0, .4); }
[data-visual="estudio"] .log-linha .log-acoes .icone-acao.perigo { background: linear-gradient(#ff7064, #c42a1f); }
[data-visual="estudio"] .log-linha .log-acoes .icone-acao:disabled { opacity: .3; }
[data-visual="estudio"] .log-linha:has(.log-acoes) { cursor: pointer; }
[data-visual="estudio"] .log-linha.aberta::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 2px var(--amarelo); }

/* caixa azul da contagem, com hora e situação ao lado (no lugar do cartão "tocando agora") */
.est-topo { display: none; }
[data-visual="estudio"] .painel-noar .tocando-agora { display: none; }
[data-visual="estudio"] .est-topo { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 8px 8px; }
[data-visual="estudio"] .est-cont {
  position: relative; overflow: hidden; text-align: center; padding: 6px 0 10px; border-radius: 5px; border: 2px solid #9cc9ff;
  background: linear-gradient(180deg, #5aa9ff, #1d63c9 55%, #0f3f8a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 18px rgba(74, 160, 255, .4);
}
[data-visual="estudio"] .est-cont::before { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .05)); pointer-events: none; }
[data-visual="estudio"] .est-cont b { position: relative; display: block; font-size: 4.2rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums; }
[data-visual="estudio"] .est-cont span { position: relative; display: block; font-size: .85rem; font-weight: 800; letter-spacing: .16em; margin-top: 2px; }
[data-visual="estudio"] .est-barra { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow: hidden; }
[data-visual="estudio"] .est-barra i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
[data-visual="estudio"] .est-cont.fim { border-color: #ffb3ab; background: linear-gradient(180deg, #ff7a6e, #c42a1f 55%, #7d140d); animation: est-pisca .5s ease-in-out infinite alternate; }
@keyframes est-pisca { to { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 26px rgba(255, 80, 70, .9); } }
[data-visual="estudio"] .est-cont[data-modo="pausado"] { background: linear-gradient(180deg, #ffd46a, #c98a0c 55%, #8a5d06); border-color: #ffe7a8; }
[data-visual="estudio"] .est-cont[data-modo="parado"] { background: linear-gradient(180deg, #6b7380, #3a414b 55%, #23272e); border-color: #8a94a1; }
[data-visual="estudio"] .est-cont[data-modo="aovivo"] { background: linear-gradient(180deg, #ff7a6e, #c42a1f 55%, #7d140d); border-color: #ffb3ab; }
[data-visual="estudio"] .est-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 12px; margin: 0; align-items: baseline; }
[data-visual="estudio"] .est-info dt { color: #9aa4b1; font-size: .95rem; }
[data-visual="estudio"] .est-info dd { margin: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* catálogo: grade de placas cinzas */
[data-visual="estudio"] .acervo-abas { border-bottom-color: #000; }
[data-visual="estudio"] .abas-lateral .acervo-abas button[aria-selected="true"],
[data-visual="estudio"] .acervo-abas button[aria-selected="true"] {
  background: linear-gradient(var(--azul-1), var(--azul-2)); color: #fff; border-color: transparent; box-shadow: var(--brilho);
}
[data-visual="estudio"] .acervo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; padding: 6px 10px 10px; align-content: start; }
[data-visual="estudio"] .acervo-lista li {
  position: relative; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 8px;
  padding: 8px 8px 6px 12px; min-height: 78px; border: 1px solid #05070a; border-radius: 9px; overflow: hidden; align-items: start;
  background: linear-gradient(180deg, #4a515c 0%, #353b44 50%, #2a2f37 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 5px -3px #000;
}
[data-visual="estudio"] .acervo-lista li:hover { background: linear-gradient(180deg, #58606c, #3d444e 50%, #30353d); }
[data-visual="estudio"] .acervo-lista li .faixa-cor { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 0; }
[data-visual="estudio"] .acervo-lista li > .icone-acao:first-of-type {   /* pré-escuta: botão verde */
  grid-row: 1; grid-column: 1; width: 28px; height: 28px; color: #fff; border: 1px solid #0b3d1d;
  background: linear-gradient(var(--verde-1), var(--verde-2)); box-shadow: var(--brilho);
}
[data-visual="estudio"] .acervo-lista li > .icone-acao[aria-pressed="true"] { background: linear-gradient(var(--vermelho-1), var(--vermelho-2)); border-color: #4a0d08; }
[data-visual="estudio"] .acervo-lista .item-txt { grid-row: 1; grid-column: 2 / 4; }
[data-visual="estudio"] .acervo-lista .item-txt b { color: #fff; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .84rem; line-height: 1.2; }
[data-visual="estudio"] .acervo-lista .item-txt span { color: #c8ced7; font-size: .74rem; }
[data-visual="estudio"] .acervo-lista .item-dur { grid-row: 2; grid-column: 1 / 3; align-self: end; color: var(--amarelo); font-weight: 700; font-size: .78rem; }
[data-visual="estudio"] .acervo-lista .item-acoes { grid-row: 2; grid-column: 3; align-self: end; }
[data-visual="estudio"] .acervo-lista .item-acoes .icone-acao { width: 24px; height: 24px; color: #e3e7ec; }
[data-visual="estudio"] .acervo-lista .item-acoes .icone-acao:hover { background: rgba(255, 255, 255, .14); color: #fff; }
[data-visual="estudio"] .acervo-lista li.comando-item, [data-visual="estudio"] .acervo-lista li.tocou-item { grid-template-columns: 30px minmax(0, 1fr) auto; }
[data-visual="estudio"] .acervo-lista li.tocou-item .tocou-num, [data-visual="estudio"] .acervo-lista li.comando-item .comando-ico { grid-row: 1; grid-column: 1; color: var(--amarelo); font-weight: 700; }
[data-visual="estudio"] .acervo-lista li.tocou-item .tocou-hora { grid-row: 2; grid-column: 1 / -1; color: var(--amarelo); font-size: .76rem; }
[data-visual="estudio"] .acervo-lista li.acervo-vazio { grid-column: 1 / -1; background: none; border: 0; box-shadow: none; min-height: 0; display: block; }
[data-visual="estudio"] .acervo-dica { border-top-color: #000; }

/* botoneira: botões com brilho */
[data-visual="estudio"] .botao-slot {
  border: 1px solid rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-botao, #5b6b7d) 70%, #fff) 0%, var(--cor-botao, #5b6b7d) 45%, color-mix(in srgb, var(--cor-botao, #5b6b7d) 70%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 8px -4px #000; text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
[data-visual="estudio"] .botao-slot.vazio { background: #101317; border: 1px dashed #343a43; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); text-shadow: none; }
[data-visual="estudio"] .botao-slot.tocando { box-shadow: inset 0 0 0 3px #fff, 0 0 16px 2px var(--cor-botao); }
[data-visual="estudio"] .botoneira-abas button[aria-pressed="true"], [data-visual="estudio"] .botoneira-abas [aria-selected="true"] { background: linear-gradient(var(--azul-1), var(--azul-2)); color: #fff; }

/* mixer escuro */
[data-visual="estudio"] .canal { background: linear-gradient(180deg, #23272e, #15181c); border-color: #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
[data-visual="estudio"] .canal-fone { background: linear-gradient(180deg, #1f3150, #141c2b); border-color: #000; }
[data-visual="estudio"] .canal-nome { color: var(--amarelo); }
[data-visual="estudio"] .canal-nome span { background: var(--amarelo); color: #000; }
[data-visual="estudio"] .vu-v::after { background: repeating-linear-gradient(0deg, transparent 0 4px, #15181c 4px 5px); }
[data-visual="estudio"] .vu-v i { background: #0b0d10; }
[data-visual="estudio"] .fader { accent-color: #d7dde5; }
[data-visual="estudio"] .canal-on { background: linear-gradient(#3a414b, #23272e); border-color: #000; color: #9aa4b1; box-shadow: var(--brilho); }
[data-visual="estudio"] .canal-on[aria-pressed="true"] { background: linear-gradient(var(--verde-1), var(--verde-2)); border-color: #0b3d1d; color: #fff; box-shadow: var(--brilho), 0 0 12px -2px var(--verde-1); }
[data-visual="estudio"] .canal-fone .canal-on[aria-pressed="true"] { background: linear-gradient(var(--azul-1), var(--azul-2)); border-color: var(--azul-3); }
[data-visual="estudio"] .canal-parar { background: linear-gradient(var(--vermelho-1), var(--vermelho-2)); color: #fff; border-color: #4a0d08; }

/* abas do celular */
[data-visual="estudio"] .console-abas { background: #0f1216; border: 1px solid #000; }
[data-visual="estudio"] .console-abas button[aria-pressed="true"] { background: linear-gradient(var(--azul-1), var(--azul-2)); color: #fff; box-shadow: var(--brilho); }

/* destaque ao chegar pela doca */
.doca-destaque { animation: doca-destaque 1.1s ease-out; }
@keyframes doca-destaque { 0% { box-shadow: 0 0 0 3px var(--amarelo, #f5c84a); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ------------------------------------------------------------------ doca de atalhos (embaixo) */
[data-visual="estudio"] body:has(> .doca) { padding-bottom: calc(var(--doca-altura) + env(safe-area-inset-bottom, 0px)); }
[data-visual="estudio"] .doca {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 6px; justify-content: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(180deg, #23272e 0%, #121418 60%, #0b0c0f 100%); border-top: 1px solid #000;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .06) inset, 0 -10px 24px -12px rgba(0, 0, 0, .9);
}
[data-visual="estudio"] .doca::-webkit-scrollbar { display: none; }
[data-visual="estudio"] .doca-item {
  --c1: #6a7380; --c2: #3c434d;
  flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0;
  border: 0; background: none; color: #e9edf2; font: inherit; font-size: .72rem; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[data-visual="estudio"] .doca-item i {
  position: relative; display: grid; place-items: center; width: 52px; height: 46px; border-radius: 11px; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--c1), var(--c2)); border: 1px solid rgba(0, 0, 0, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px -4px #000; transition: transform .08s, filter .15s;
}
[data-visual="estudio"] .doca-item i::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .02)); }
[data-visual="estudio"] .doca-item svg { width: 26px; height: 26px; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
[data-visual="estudio"] .doca-item span { white-space: nowrap; text-shadow: 0 1px 0 #000; }
[data-visual="estudio"] .doca-item:hover i { filter: brightness(1.15); }
[data-visual="estudio"] .doca-item:active i { transform: translateY(1px) scale(.97); }
[data-visual="estudio"] .doca-item[aria-current="page"] span { color: var(--amarelo); }
[data-visual="estudio"] .doca-item[aria-current="page"] i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #0b0c0f, 0 0 0 4px var(--amarelo); }
[data-visual="estudio"] .d-menu { --c1: #7d8693; --c2: #434a54; }
[data-visual="estudio"] .d-playlist { --c1: #4aa0ff; --c2: #1b5fc0; }
[data-visual="estudio"] .d-catalogo { --c1: #8e9aab; --c2: #4c5664; }
[data-visual="estudio"] .d-botoneira { --c1: #ffd25e; --c2: #d08a0a; }
[data-visual="estudio"] .d-aovivo { --c1: #6a7380; --c2: #3c434d; }
[data-visual="estudio"] .d-biblioteca { --c1: #ff9a4a; --c2: #c95a0c; }
[data-visual="estudio"] .d-musical { --c1: #a57cff; --c2: #6339c4; }
[data-visual="estudio"] .d-historico { --c1: #3fd0d0; --c2: #10858f; }
[data-visual="estudio"] .d-processador { --c1: #ff74b5; --c2: #c42c78; }
[data-visual="estudio"] .d-site { --c1: #5ee08a; --c2: #1f9d4c; }
[data-visual="estudio"] .d-mixer { --c1: #3fe0b0; --c2: #10876a; }
[data-visual="estudio"] .d-config { --c1: #9aa3ae; --c2: #565e69; }

/* tela do ar no computador: duas colunas, playlist à esquerda; à direita o catálogo ou a botoneira com o mixer */
@media (min-width: 1101px) {
  [data-visual="estudio"] .console-grade { grid-template-columns: minmax(470px, .72fr) minmax(0, 1fr); gap: 8px; }
  [data-visual="estudio"] .console-grade:not([data-direita="acervo"]) > .abas-lateral { display: none !important; }
  [data-visual="estudio"] .console-grade[data-direita="acervo"] > .coluna-dir { display: none; }
  [data-visual="estudio"] .console-grade[data-direita="botoes"] .painel-mesa { display: none; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .painel-botoes { display: none; }
  [data-visual="estudio"] .console-grade[data-direita="botoes"] .coluna-dir > .painel-botoes { flex: 1 1 auto; }
  [data-visual="estudio"] .console-grade[data-direita="botoes"] .painel-botoes .painel-corpo { flex: 1; }
  [data-visual="estudio"] .console-grade[data-direita="botoes"] .botoneira { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 5px; }
  [data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot { min-height: 0; align-items: center; justify-content: center; text-align: center; padding: 6px 5px; }
  [data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot .b-rodape { justify-content: center; gap: 6px; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .coluna-dir > .painel-mesa { flex: 1 1 auto; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .canal-corpo { height: auto; flex: 1; min-height: 180px; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .mesa { flex: 1; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .painel-mesa .painel-corpo, [data-visual="estudio"] .console-grade[data-direita="mesa"] .canal { min-height: 0; }
  /* faixa de cima mais baixa: a hora já está na caixa azul */
  [data-visual="estudio"] .console-cab { min-height: 0; }
  [data-visual="estudio"] .cab-esq, [data-visual="estudio"] .cab-centro, [data-visual="estudio"] .cab-dir { padding-top: 6px; padding-bottom: 6px; }
  [data-visual="estudio"] .cab-relogio b { font-size: 1.5rem; }
  [data-visual="estudio"] .botao-grande { padding: 4px 12px; min-height: 0; }
  [data-visual="estudio"] .cab-logo img { max-height: 44px; }
  [data-visual="estudio"] .coluna-dir { overflow-y: auto; }
  [data-visual="estudio"] .coluna-dir > .painel-botoes { flex: 0 0 auto; min-height: 0; }
  [data-visual="estudio"] .botoneira { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 8px; }
  [data-visual="estudio"] .coluna-dir > .painel-mesa { flex: 1 0 auto; }
  [data-visual="estudio"] .botao-slot .b-nome { font-size: .9rem; }
  [data-visual="estudio"] .acervo-lista { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (min-width: 1101px) and (max-height: 820px) {
  [data-visual="estudio"] .botoneira { grid-auto-rows: 52px; gap: 6px; }
  [data-visual="estudio"] .canal-corpo { height: 92px; }
  [data-visual="estudio"] .tocando-agora .ta-falta { font-size: 3rem; }
}

/* a tela do ar ocupa a altura que sobra acima da doca */
[data-visual="estudio"] .console-grade {
  height: calc(100vh - var(--topo-altura) - 150px - var(--doca-altura));
  height: calc(100dvh - var(--topo-altura) - 150px - var(--doca-altura)); min-height: 500px;
}
@media (max-width: 1100px) {
  [data-visual="estudio"] .console-grade { height: calc(100dvh - var(--topo-altura) - 170px - var(--doca-altura)); min-height: 440px; }
}
@media (max-width: 1100px) {
  [data-visual="estudio"] .doca { justify-content: flex-start; }
}
@media (max-width: 760px) {
  :root[data-visual="estudio"] { --doca-altura: 70px; }
  [data-visual="estudio"] .doca { gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  [data-visual="estudio"] .doca-item { width: 66px; font-size: .64rem; }
  [data-visual="estudio"] .doca-item i { width: 42px; height: 38px; border-radius: 10px; }
  [data-visual="estudio"] .doca-item svg { width: 22px; height: 22px; }
  [data-visual="estudio"] .tocando-agora .ta-falta { font-size: 2.3rem; }
  [data-visual="estudio"] .acervo-lista { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  [data-visual="estudio"] .aviso-flutuante { bottom: calc(var(--doca-altura) + 12px); }
}
[data-visual="estudio"] .aviso-flutuante { bottom: calc(var(--doca-altura) + 14px); }
[data-visual="estudio"] .proc-aviso { bottom: calc(var(--doca-altura) + 14px); }
@media print { .doca { display: none !important; } }

/* ------------------------------------------------------------------ feito para tela de toque
   Tudo que se aperta tem pelo menos ~44 px, as ações da playlist ficam sempre à mostra (sem depender do mouse),
   o toque responde na hora (sem a espera do toque duplo) e segurar o dedo não seleciona texto. */
[data-visual="estudio"] body { -webkit-tap-highlight-color: transparent; }
[data-visual="estudio"] :is(button, a, summary, select, label, input[type="range"], input[type="checkbox"], .botao-slot, .acervo-lista li) { touch-action: manipulation; }
[data-visual="estudio"] .console, [data-visual="estudio"] .doca { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-visual="estudio"] .console input { -webkit-user-select: text; user-select: text; }
/* botões em geral */
[data-visual="estudio"] .botao { min-height: 44px; padding: 10px 16px; }
[data-visual="estudio"] .botao.pequeno { min-height: 40px; padding: 8px 12px; }
[data-visual="estudio"] .campo input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [data-visual="estudio"] .campo select,
[data-visual="estudio"] .acervo-busca input, [data-visual="estudio"] .ferramentas-simples input, [data-visual="estudio"] .ferramentas-simples select { min-height: 44px; }
[data-visual="estudio"] input[type="checkbox"], [data-visual="estudio"] input[type="radio"] { width: 22px; height: 22px; }
[data-visual="estudio"] .icone-acao { width: 40px; height: 40px; border-radius: 9px; }
[data-visual="estudio"] .menu-painel a, [data-visual="estudio"] .menu-painel button { min-height: 46px; }
[data-visual="estudio"] .usuario-menu summary { min-height: 46px; }
/* transporte grande */
[data-visual="estudio"] .tr-botao { width: 64px; height: 50px; border-radius: 11px; }
[data-visual="estudio"] .tr-botao svg { width: 22px; height: 22px; }
[data-visual="estudio"] .transporte { gap: 7px; }
/* playlist: subir, descer, trocar e tirar sempre visíveis e grandes */
/* catálogo: placas maiores, botões de 40 px */
[data-visual="estudio"] .acervo-lista { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
[data-visual="estudio"] .acervo-lista li { min-height: 96px; padding: 10px 8px 8px 14px; }
[data-visual="estudio"] .acervo-lista li { grid-template-columns: 40px minmax(0, 1fr) auto; }
[data-visual="estudio"] .acervo-lista li > .icone-acao:first-of-type { width: 40px; height: 40px; }
[data-visual="estudio"] .acervo-lista .item-acoes { gap: 4px; }
[data-visual="estudio"] .acervo-lista .item-acoes .icone-acao { width: 38px; height: 38px; background: rgba(0, 0, 0, .2); }
[data-visual="estudio"] .acervo-lista .item-dur { align-self: center; }
[data-visual="estudio"] .abas-lateral .acervo-abas button { min-height: 58px; }
[data-visual="estudio"] .abas-lateral { grid-template-columns: 88px minmax(0, 1fr); }
/* botoneira */
[data-visual="estudio"] .botoneira-abas button { min-height: 40px; padding: 0 16px; }
[data-visual="estudio"] .painel-cab { min-height: 60px; }
[data-visual="estudio"] .botao-slot { min-height: 64px; }
/* mixer: ON, CUE e faders fáceis de pegar com o dedo */
[data-visual="estudio"] .canal-on, [data-visual="estudio"] .canal-cue, [data-visual="estudio"] .canal-parar { min-height: 42px; max-width: none; width: 100%; font-size: .78rem; }
[data-visual="estudio"] .fader { width: 40px; margin-left: 2px; }
[data-visual="estudio"] .fader::-webkit-slider-thumb { width: 34px; height: 22px; }
[data-visual="estudio"] .fader::-moz-range-thumb { width: 34px; height: 22px; border-radius: 5px; }
/* abas do celular e doca */
[data-visual="estudio"] .console-abas button { min-height: 46px; }
[data-visual="estudio"] .doca-item { min-height: 64px; }
/* telas de toque não têm "passar o mouse": nada importante fica escondido atrás disso */
@media (hover: none) {
  [data-visual="estudio"] .tr-botao:hover, [data-visual="estudio"] .doca-item:hover i { filter: none; }
}
/* espaço que sobra para as placas do catálogo em telas de 1366 */
@media (min-width: 1101px) and (max-width: 1400px) {
  [data-visual="estudio"] .acervo-lista { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (min-width: 1101px) and (max-height: 820px) {
  [data-visual="estudio"] .botao-slot { min-height: 0; }
  [data-visual="estudio"] .botoneira { grid-auto-rows: 56px; }
}
[data-visual="estudio"] .botoneira-abas button { white-space: nowrap; }
@media (max-width: 760px) {
  [data-visual="estudio"] .botoneira-abas button { padding: 0 10px; }
  [data-visual="estudio"] .botoneira { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(70px, auto); }
  [data-visual="estudio"] .painel-botoes .painel-cab { flex-wrap: wrap; row-gap: 8px; }
}

/* tela do ar: sem a faixa de medidores, relógio e programa (a hora e a situação estão na caixa azul; ouvir vai pela doca) */
[data-visual="estudio"] .console-cab { display: none; }
[data-visual="estudio"] .console { padding-top: 8px; gap: 8px; }
[data-visual="estudio"] .console-grade { height: calc(100vh - var(--topo-altura) - var(--doca-altura) - 26px); height: calc(100dvh - var(--topo-altura) - var(--doca-altura) - 26px); }
@media (max-width: 1100px) {
  [data-visual="estudio"] .console-grade { height: calc(100dvh - var(--topo-altura) - var(--doca-altura) - 90px); }
}
[data-visual="estudio"] .est-info dd.alerta { color: #ff8a80; white-space: normal; font-size: 1rem; }
/* Ouvir (retorno) e Ao vivo (mic) cinza quando desligados; ligados: o Ouvir azul e o Ao vivo vermelho */
[data-visual="estudio"] .d-ouvir { --c1: #6a7380; --c2: #3c434d; }
[data-visual="estudio"] .d-ouvir[aria-pressed="true"] { --c1: #4aa0ff; --c2: #1b5fc0; }
[data-visual="estudio"] .d-ouvir[aria-pressed="true"] i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #0b0c0f, 0 0 0 4px #4aa0ff, 0 0 14px rgba(74, 160, 255, .6); }
[data-visual="estudio"] .d-ouvir[aria-pressed="true"] span { color: #8cc4ff; }
@media (min-width: 761px) and (max-width: 1440px) {
  [data-visual="estudio"] .doca { gap: 2px; }
  [data-visual="estudio"] .doca-item { width: 84px; font-size: .68rem; }
}
@media (max-width: 760px) {
  [data-visual="estudio"] .est-topo { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
  [data-visual="estudio"] .est-cont b { font-size: 3rem; }
  [data-visual="estudio"] .est-cont span { font-size: .7rem; letter-spacing: .1em; }
  [data-visual="estudio"] .est-info { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  [data-visual="estudio"] .est-info dt { font-size: .75rem; }
  [data-visual="estudio"] .est-info dd { font-size: .95rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  [data-visual="estudio"] .painel-noar .painel-cab { flex-wrap: wrap; }
  [data-visual="estudio"] .painel-noar .painel-cab h2 { flex-basis: 100%; }
  [data-visual="estudio"] .painel-noar .painel-cab-acoes, [data-visual="estudio"] .painel-noar .transporte { flex: 1; }
  [data-visual="estudio"] .painel-noar .tr-botao { flex: 1; width: auto; }
  [data-visual="estudio"] .log-linha { grid-template-columns: 60px minmax(0, 1fr) auto; min-height: 72px; }
  [data-visual="estudio"] .log-linha::before { left: 66px; }
  [data-visual="estudio"] .log-ir { width: 60px; min-height: 72px; }
  [data-visual="estudio"] .log-ir.no-ar::after { font-size: .7rem; padding: 2px 4px; white-space: nowrap; }
  [data-visual="estudio"] .log-linha .log-t2, [data-visual="estudio"] .log-linha .log-dur { font-size: 1rem; }
  [data-visual="estudio"] .log-linha .log-a2 { font-size: .9rem; }
}

/* hora e temperatura na barra de cima (no espaço entre o logo e as luzes NO AR / ONLINE) */
[data-visual="estudio"] .topo-hora { display: flex; align-items: center; gap: 22px; margin: 0 auto; padding: 0 16px; }
[data-visual="estudio"] .topo-hora + nav { margin-left: 0; }
[data-visual="estudio"] .th-relogio, [data-visual="estudio"] .th-clima > span { display: flex; flex-direction: column; line-height: 1.05; }
[data-visual="estudio"] .th-relogio b { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 14px rgba(74, 160, 255, .35); }
[data-visual="estudio"] .th-relogio small, [data-visual="estudio"] .th-clima small { font-size: .72rem; color: var(--amarelo); margin-top: 2px; white-space: nowrap; }
[data-visual="estudio"] .th-clima { display: flex; align-items: center; gap: 7px; padding-left: 20px; border-left: 1px solid #2c323a; }
[data-visual="estudio"] .th-clima[hidden] { display: none; }
[data-visual="estudio"] .th-clima i { display: grid; color: #8fc4ff; }
[data-visual="estudio"] .th-clima b { font-size: 1.3rem; font-weight: 700; }
@media (max-width: 1100px) { [data-visual="estudio"] .th-relogio small { display: none; } }
@media (max-width: 760px) { [data-visual="estudio"] .topo-hora { display: none; } }
[data-visual="estudio"] .selo-estudio { white-space: nowrap; }
@media (max-width: 1200px) {
  [data-visual="estudio"] .selo-beta, [data-visual="estudio"] .topo .operador-atual { display: none; }
  [data-visual="estudio"] .topo-hora { gap: 14px; padding: 0 8px; }
  [data-visual="estudio"] .th-clima { padding-left: 12px; }
  [data-visual="estudio"] .th-clima small { display: none; }
}

/* ------------------------------------------------------------------ doca: transporte à esquerda + 7 botões */
.doca-transporte { display: none; }
[data-visual="estudio"] .doca { justify-content: flex-start; padding-left: 14px; }
[data-visual="estudio"] .doca-transporte { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; padding-right: 16px; }
[data-visual="estudio"] .doca-transporte:empty { display: none; }
[data-visual="estudio"] .doca-transporte .transporte { gap: 8px; }
[data-visual="estudio"] .doca-transporte .tr-botao { width: 76px; height: 62px; border-radius: 12px; }
[data-visual="estudio"] .doca-transporte .tr-botao svg { width: 28px; height: 28px; }
[data-visual="estudio"] .doca-transporte + .doca-item { margin-left: 0; }
[data-visual="estudio"] .doca-item { width: 92px; }
[data-visual="estudio"] .d-aovivo[aria-pressed="true"] i { background: linear-gradient(180deg, #ff6f63, #c02a1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #0b0c0f, 0 0 0 4px #ff5a4d, 0 0 14px rgba(255, 90, 77, .6); }
[data-visual="estudio"] .d-aovivo[aria-pressed="true"] span { color: #ff8a80; }
/* modo Estúdio deste computador: a mesa do estúdio manda no ar; sem o Ao vivo e o Ouvir na doca */
[data-entrada="estudio"] [data-doca-mic], [data-entrada="estudio"] [data-doca-ouvir] { display: none !important; }
/* microfone conectado em espera: ponto verde (pronto aqui) ou âmbar (em uso em outro computador) no ícone */
[data-visual="estudio"] .d-aovivo i { position: relative; }
[data-visual="estudio"] .d-aovivo[data-espera="pronto"] i::after, [data-visual="estudio"] .d-aovivo[data-espera="em-uso"] i::after {
  content: ""; position: absolute; inset: 5px 5px auto auto; width: 10px; height: 10px; border-radius: 50%; background: #34d27b;
  box-shadow: 0 0 0 2px #0b0c0f, 0 0 6px rgba(52, 210, 123, .7); }
[data-visual="estudio"] .d-aovivo[data-espera="em-uso"] i::after { background: #f2b234; box-shadow: 0 0 0 2px #0b0c0f; }
[data-visual="estudio"] .d-aovivo[data-espera="em-uso"] span { color: #f2c76a; }
[data-visual="estudio"] .canal[data-mic="pronto"] .canal-estado { color: #5fe39a; }
[data-visual="estudio"] .canal[data-mic="em-uso"] .canal-estado, [data-visual="estudio"] .canal[data-mic="bloqueado"] .canal-estado { color: #f2c76a; }
[data-visual="estudio"] .painel-mesa .canal[data-mic="pronto"] .canal-estado::before { background: #2fe06d; }
[data-visual="estudio"] .painel-mesa .canal[data-mic="em-uso"] .canal-estado::before,
[data-visual="estudio"] .painel-mesa .canal[data-mic="bloqueado"] .canal-estado::before { background: #f2b234; }
@keyframes doca-mic { from { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #0b0c0f, 0 0 0 4px #ff4b3e; } to { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #0b0c0f, 0 0 0 4px #ff4b3e, 0 0 18px 4px rgba(255, 75, 62, .7); } }
@media (min-width: 761px) and (max-width: 1440px) {
  [data-visual="estudio"] .doca-item { width: 84px; }
  [data-visual="estudio"] .doca-transporte .tr-botao { width: 64px; height: 56px; }
}
@media (max-width: 1100px) {
  [data-visual="estudio"] .doca-transporte .tr-botao { width: 54px; height: 50px; }
  [data-visual="estudio"] .doca-transporte { padding-right: 8px; margin-right: 6px; }
}
@media (max-width: 760px) {
  :root[data-visual="estudio"] { --doca-altura: 76px; }
  [data-visual="estudio"] .doca-transporte .tr-botao { width: 50px; height: 46px; }
  [data-visual="estudio"] .doca-transporte .transporte { gap: 4px; }
}

/* medidor OUT no cabeçalho do Player, no lugar dos botões */
[data-visual="estudio"] .painel-noar .painel-cab-acoes { flex: 1; justify-content: flex-end; min-width: 0; }
[data-visual="estudio"] .painel-noar .painel-cab-acoes .vu { flex: 1; max-width: 380px; grid-template-columns: 40px minmax(0, 1fr); }
[data-visual="estudio"] .painel-noar .painel-cab-acoes .vu-estado { display: none; }
[data-visual="estudio"] .painel-noar .painel-cab-acoes .vu-canais { gap: 4px; }
[data-visual="estudio"] .painel-noar .painel-cab-acoes .vu-barra { height: 10px; }
[data-visual="estudio"] .painel-noar .painel-cab-acoes .vu-rot { color: var(--amarelo); }

/* ao lado da contagem: capa e nome da música */
[data-visual="estudio"] .est-cont { padding: 10px 0 14px; }
[data-visual="estudio"] .est-musica { display: flex; align-items: center; gap: 14px; min-width: 0; }
[data-visual="estudio"] .est-capa { flex: none; position: relative; width: 92px; height: 92px; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(#2c323a, #1a1d22); border: 1px solid #000; color: #7e8896; box-shadow: 0 4px 12px -6px #000; }
[data-visual="estudio"] .est-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-visual="estudio"] .est-capa.com-capa svg { visibility: hidden; }
[data-visual="estudio"] .est-nome { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
[data-visual="estudio"] .est-nome b { font-size: 1.35rem; line-height: 1.2; font-weight: 700; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-visual="estudio"] .est-nome span { font-size: 1.05rem; color: #c8ced7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-visual="estudio"] .est-nome small { font-size: .85rem; font-weight: 600; color: var(--amarelo); }
[data-visual="estudio"] .est-nome small.alerta { color: #ff8a80; }
[data-visual="estudio"] .est-nome small[data-hibrido="pc"] { color: #45d483; }
@media (max-width: 760px) {
  [data-visual="estudio"] .est-capa { width: 64px; height: 64px; }
  [data-visual="estudio"] .est-musica { gap: 10px; }
  [data-visual="estudio"] .est-nome b { font-size: 1.05rem; }
  [data-visual="estudio"] .est-nome span { font-size: .9rem; }
  [data-visual="estudio"] .painel-noar .painel-cab { flex-wrap: nowrap; }
  [data-visual="estudio"] .painel-noar .painel-cab h2 { flex-basis: auto; }
  [data-visual="estudio"] .painel-noar .painel-cab-acoes .vu { max-width: none; }
}
/* celular: os botões play/pause/stop/avançar numa linha e os 7 atalhos embaixo, sem rolar para o lado */
@media (max-width: 760px) {
  :root[data-visual="estudio"] { --doca-altura: 128px; }
  [data-visual="estudio"] .doca { flex-wrap: wrap; justify-content: space-between; gap: 6px 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); overflow: visible; }
  [data-visual="estudio"] .doca-transporte { flex: 0 0 100%; margin: 0; padding: 0 4px; }
  [data-visual="estudio"] .doca-transporte .transporte { display: flex; width: 100%; gap: 6px; }
  [data-visual="estudio"] .doca-transporte .tr-botao { flex: 1; width: auto; height: 46px; }
  [data-visual="estudio"] .doca-item { flex: 1 1 44px; width: auto; min-width: 0; font-size: .58rem; min-height: 0; }
  [data-visual="estudio"] .doca-item i { width: 40px; height: 36px; }
  [data-visual="estudio"] .doca-item svg { width: 20px; height: 20px; }
  [data-visual="estudio"] .doca-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* celular/tablet: as abas No ar / Catálogo / Mixer saem (a doca faz esse papel) */
@media (max-width: 1100px) {
  [data-visual="estudio"] .console-abas { display: none; }
  [data-visual="estudio"] .console-grade { height: calc(100dvh - var(--topo-altura) - var(--doca-altura) - 24px); }
}
@media (max-width: 1100px) {
  [data-visual="estudio"] .console-grade[data-direita="botoes"] .painel-mesa { display: none; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .painel-botoes { display: none; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .coluna-dir > .painel-mesa { flex: 1 1 auto; }
}
/* ao lado da contagem fica só o nome da música (sem a capa) */
[data-visual="estudio"] .est-capa { display: none; }
[data-visual="estudio"] .est-nome b { font-size: 1.5rem; }
@media (max-width: 760px) { [data-visual="estudio"] .est-nome b { font-size: 1.1rem; } }
@media (max-width: 1100px) { [data-visual="estudio"] .console-grade[data-direita="mesa"] .canal-corpo { height: 240px; } }

/* catálogo de volta em lista (como no visual clássico), só que escura e com botões no tamanho do dedo */
[data-visual="estudio"] .acervo-lista, [data-visual="estudio"] .console-grade .acervo-lista { display: block; padding: 0; }
[data-visual="estudio"] .acervo-lista li, [data-visual="estudio"] .acervo-lista li.comando-item, [data-visual="estudio"] .acervo-lista li.tocou-item {
  display: grid; grid-template-columns: 5px 44px minmax(0, 1fr) auto auto; grid-template-rows: auto; gap: 10px; align-items: center;
  min-height: 56px; padding: 6px 8px 6px 0; margin: 0; border: 0; border-bottom: 1px solid #22272e; border-radius: 0;
  background: none; box-shadow: none; overflow: visible;
}
[data-visual="estudio"] .acervo-lista li:hover { background: rgba(74, 160, 255, .08); }
[data-visual="estudio"] .acervo-lista li .faixa-cor { position: static; width: auto; align-self: stretch; border-radius: 3px; }
[data-visual="estudio"] .acervo-lista li > .icone-acao:first-of-type { grid-row: auto; grid-column: auto; width: 40px; height: 40px; }
[data-visual="estudio"] .acervo-lista .item-txt { grid-row: auto; grid-column: auto; }
[data-visual="estudio"] .acervo-lista .item-txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; -webkit-line-clamp: unset; }
[data-visual="estudio"] .acervo-lista .item-txt span { font-size: .8rem; color: #9aa4b1; }
[data-visual="estudio"] .acervo-lista .item-dur { grid-row: auto; grid-column: auto; align-self: center; color: #c8ced7; font-weight: 500; font-size: .85rem; }
[data-visual="estudio"] .acervo-lista .item-acoes { grid-row: auto; grid-column: auto; align-self: center; }
[data-visual="estudio"] .acervo-lista .item-acoes .icone-acao { width: 40px; height: 40px; background: none; }
[data-visual="estudio"] .acervo-lista .item-acoes .icone-acao:hover { background: rgba(255, 255, 255, .1); }
[data-visual="estudio"] .acervo-lista li.tocou-item { grid-template-columns: 5px 44px minmax(0, 1fr) auto; }
[data-visual="estudio"] .acervo-lista li.tocou-item .tocou-num, [data-visual="estudio"] .acervo-lista li.comando-item .comando-ico { grid-row: auto; grid-column: auto; text-align: center; }
[data-visual="estudio"] .acervo-lista li.tocou-item .tocou-hora { grid-row: auto; grid-column: auto; color: #c8ced7; }
[data-visual="estudio"] .acervo-lista li.comando-item { grid-template-columns: 5px 44px minmax(0, 1fr) auto; }
[data-visual="estudio"] .acervo-lista li.acervo-vazio { display: block; }
@media (max-width: 760px) {
  [data-visual="estudio"] .abas-lateral { grid-template-columns: 66px minmax(0, 1fr); }
  [data-visual="estudio"] .abas-lateral .acervo-abas button { font-size: .66rem; }
  [data-visual="estudio"] .acervo-lista li { grid-template-columns: 5px 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; padding-top: 8px; padding-bottom: 6px; }
  [data-visual="estudio"] .acervo-lista li .faixa-cor { grid-row: 1 / 3; }
  [data-visual="estudio"] .acervo-lista li > .icone-acao:first-of-type { grid-row: 1 / 3; }
  [data-visual="estudio"] .acervo-lista li .item-txt { grid-column: 3 / 5; grid-row: 1; }
  [data-visual="estudio"] .acervo-lista li .item-dur { grid-column: 3; grid-row: 2; }
  [data-visual="estudio"] .acervo-lista li .item-acoes { grid-column: 4; grid-row: 2; }
  [data-visual="estudio"] .acervo-lista li.tocou-item, [data-visual="estudio"] .acervo-lista li.comando-item { grid-template-rows: auto; }
  [data-visual="estudio"] .acervo-lista li.tocou-item .item-txt, [data-visual="estudio"] .acervo-lista li.comando-item .item-txt { grid-column: 3; }
  [data-visual="estudio"] .acervo-lista li.tocou-item .faixa-cor, [data-visual="estudio"] .acervo-lista li.comando-item .faixa-cor { grid-row: 1; }
}
/* hora e temperatura encostadas nas luzes NO AR / ONLINE (à direita) */
[data-visual="estudio"] .topo-hora { margin: 0 14px 0 auto; padding: 0 16px 0 0; border-right: 1px solid #2c323a; }

/* abas do catálogo (Músicas, Vinhetas...) no padrão da doca: ícone em placa colorida com brilho e o nome embaixo */
[data-visual="estudio"] .abas-lateral .acervo-abas { background: linear-gradient(180deg, #1a1d22, #101215); border-right: 1px solid #000; gap: 6px; padding: 10px 4px; }
[data-visual="estudio"] .abas-lateral .acervo-abas button,
[data-visual="estudio"] .abas-lateral .acervo-abas button[aria-selected="true"] {
  background: none; box-shadow: none; border: 0; color: #e9edf2; font-size: .7rem; font-weight: 600; gap: 5px; padding: 4px 2px; min-height: 0; text-shadow: 0 1px 0 #000;
}
[data-visual="estudio"] .abas-lateral .acervo-abas button svg {
  width: 50px; height: 44px; padding: 9px 12px; box-sizing: border-box; border-radius: 10px; opacity: 1; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-aba) 62%, #fff) 0%, var(--cor-aba) 52%, color-mix(in srgb, var(--cor-aba) 68%, #000) 100%);
  border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px -4px #000;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2)); transition: transform .08s, filter .15s;
}
[data-visual="estudio"] .abas-lateral .acervo-abas button:hover svg { filter: brightness(1.12); }
[data-visual="estudio"] .abas-lateral .acervo-abas button:active svg { transform: translateY(1px) scale(.97); }
[data-visual="estudio"] .abas-lateral .acervo-abas button[aria-selected="true"] svg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #0b0c0f, 0 0 0 4px var(--amarelo); }
[data-visual="estudio"] .abas-lateral .acervo-abas button[aria-selected="true"] span { color: var(--amarelo); }
[data-visual="estudio"] .acervo-abas .aba-musica { --cor-aba: #2fb35a; }
[data-visual="estudio"] .acervo-abas .aba-vinheta { --cor-aba: #2f7de1; }
[data-visual="estudio"] .acervo-abas .aba-abertura { --cor-aba: #12a693; }
[data-visual="estudio"] .acervo-abas .aba-comercial { --cor-aba: #e39a12; }
[data-visual="estudio"] .acervo-abas .aba-trilha { --cor-aba: #8a5ae0; }
[data-visual="estudio"] .acervo-abas .aba-material { --cor-aba: #22b35f; }
[data-visual="estudio"] .acervo-abas .aba-comandos { --cor-aba: #e0463a; }
[data-visual="estudio"] .acervo-abas .aba-tocou { --cor-aba: #1aa6b8; }
@media (max-width: 760px) {
  [data-visual="estudio"] .abas-lateral .acervo-abas button svg { width: 42px; height: 38px; padding: 9px 11px; }
  [data-visual="estudio"] .abas-lateral .acervo-abas button { font-size: .62rem; }
}

/* luzes NO AR / ONLINE no padrão dos botões: placa com brilho; apagada em cinza, acesa em vermelho (NO AR) ou verde (ONLINE) */
[data-visual="estudio"] .topo nav { gap: 8px; }
[data-visual="estudio"] .topo nav .luz-no-ar, [data-visual="estudio"] .topo nav .luz-online {
  min-height: 40px; padding: 6px 14px; border-radius: 9px; border: 1px solid #000; color: #8a94a1; font-weight: 800; letter-spacing: .12em;
  background: linear-gradient(180deg, #3a414b 0%, #262b32 55%, #1a1e23 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px -4px #000; text-shadow: 0 1px 0 #000;
}
[data-visual="estudio"] .topo nav .luz-no-ar .luz, [data-visual="estudio"] .topo nav .luz-online .luz {
  width: 11px; height: 11px; background: #4a515c; opacity: 1; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
[data-visual="estudio"] .topo nav .luz-no-ar:hover { color: #c8ced7; filter: brightness(1.1); }
[data-visual="estudio"] .topo nav .luz-no-ar.ligada {
  color: #fff; border-color: #4a0d08; background: linear-gradient(180deg, #ff7064 0%, #d8322a 52%, #9a1d14 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 16px 1px rgba(255, 75, 62, .55);
}
[data-visual="estudio"] .topo nav .luz-no-ar.ligada .luz { background: #fff; box-shadow: 0 0 8px 2px #fff; }
[data-visual="estudio"] .topo nav .luz-online.ligada {
  color: #fff; border-color: #0b3d1d; background: linear-gradient(180deg, #5ee08a 0%, #1f9d4c 52%, #137a37 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px 0 rgba(94, 224, 138, .4);
}
[data-visual="estudio"] .topo nav .luz-online.ligada .luz { background: #eafff0; box-shadow: 0 0 8px 2px #b8ffcf; }

/* botão da conta (nome do usuário) no padrão dos botões: placa com brilho e o ícone numa placa colorida */
[data-visual="estudio"] .usuario-menu summary {
  min-height: 40px; padding: 4px 12px 4px 4px; gap: 9px; border-radius: 9px; border: 1px solid #000;
  background: linear-gradient(180deg, #3a414b 0%, #262b32 55%, #1a1e23 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px -4px #000; color: #fff; text-shadow: 0 1px 0 #000;
}
[data-visual="estudio"] .usuario-menu summary:hover, [data-visual="estudio"] .usuario-menu[open] summary {
  background: linear-gradient(180deg, #47505c 0%, #2c3239 55%, #1f2328 100%);
}
[data-visual="estudio"] .usuario-menu[open] summary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 2px #0b0c0f, 0 0 0 4px var(--amarelo); }
[data-visual="estudio"] .usuario-menu summary .avatar, [data-visual="estudio"] .menu-cab .avatar {
  border-radius: 7px; border: 1px solid rgba(0, 0, 0, .7); color: #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .25) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
[data-visual="estudio"] .usuario-menu summary .avatar { width: 32px; height: 32px; }
[data-visual="estudio"] .usuario-menu .usuario-nome { font-weight: 700; }
[data-visual="estudio"] .usuario-menu .seta { color: #9aa4b1; }

/* a luz NO AR só mostra a situação: não é botão nem link */
.topo nav .luz-no-ar, .topo nav .luz-no-ar:hover { cursor: default; text-decoration: none; }
[data-visual="estudio"] .topo nav .luz-no-ar:hover { color: #8a94a1; filter: none; }
[data-visual="estudio"] .topo nav .luz-no-ar.ligada:hover { color: #fff; }

/* ------------------------------------------------------------------ botoneira no modelo das mesas de automação
   4 colunas, placas retangulares com faixa de brilho, nome e tempo centralizados; 24 por página (setas no topo) */
.botoneira-paginas { display: none; }
[data-visual="estudio"] .botoneira-paginas { display: inline-flex; align-items: center; gap: 6px; }
[data-visual="estudio"] .botoneira-paginas span { min-width: 34px; text-align: center; font-size: .82rem; font-weight: 700; color: var(--amarelo); font-variant-numeric: tabular-nums; }
[data-visual="estudio"] .botoneira-paginas .botao { width: 46px; padding: 0; justify-content: center; background: linear-gradient(180deg, #4aa0ff, #1b5fc0); border-color: #0a2a58; }
[data-visual="estudio"] .botoneira-paginas .botao:disabled { opacity: .35; }
[data-visual="estudio"] .botoneira[data-pagina="1"] > .botao-slot:nth-child(n+25),
[data-visual="estudio"] .botoneira[data-pagina="2"] > .botao-slot:nth-child(-n+24) { display: none !important; }

[data-visual="estudio"] .botoneira,
[data-visual="estudio"] .console-grade[data-direita="botoes"] .botoneira { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(58px, 1fr); gap: 4px; padding: 0; }
[data-visual="estudio"] .painel-botoes .painel-corpo { padding: 6px; background: #050607; }
[data-visual="estudio"] .botao-slot,
[data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot {
  --c: var(--cor-botao, #5b6b7d);
  min-height: 0; padding: 6px 8px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .16) 48%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .18) 100%),
    var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .25);
}
[data-visual="estudio"] .botao-slot.claro { color: #111; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
[data-visual="estudio"] .botao-slot .b-num { display: none; }
[data-visual="estudio"] .botao-slot .b-nome { font-size: .86rem; font-weight: 700; line-height: 1.15; -webkit-line-clamp: 2; }
[data-visual="estudio"] .botao-slot .b-rodape,
[data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot .b-rodape { justify-content: center; font-size: .78rem; opacity: .95; }
[data-visual="estudio"] .botao-slot .b-rodape > span:first-child { display: none; }   /* "por cima" / "no lugar" */
[data-visual="estudio"] .botao-slot .b-enche { background: rgba(255, 255, 255, .35); }
[data-visual="estudio"] .botao-slot:active { transform: none; filter: brightness(1.15); }
[data-visual="estudio"] .botao-slot.tocando { box-shadow: inset 0 0 0 3px #fff, 0 0 14px 2px var(--c); }
[data-visual="estudio"] .botao-slot.vazio,
[data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot.vazio {
  background: #0a0b0d; border: 1px solid #000; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .9); color: #4a515c; text-shadow: none;
}
[data-visual="estudio"] .editando .botao-slot.vazio { border: 1px dashed #3a414c; color: #9aa4b1; font-size: .75rem; }
@media (max-width: 760px) {
  [data-visual="estudio"] .botoneira { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(64px, auto); }
  [data-visual="estudio"] .botao-slot .b-nome { font-size: .74rem; }
  [data-visual="estudio"] .botoneira-paginas .botao { width: 40px; }
  [data-visual="estudio"] .botoneira-paginas span { min-width: 28px; }
}
[data-visual="estudio"] .botoneira .botao-slot.claro, [data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot.claro { color: #111; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }

/* doca: os atalhos da direita com o mesmo tamanho dos botões play/pause/stop/avançar, sem o nome embaixo;
   o nome aparece num balão ao passar o mouse */
[data-visual="estudio"] .doca { align-items: center; gap: 8px; }
[data-visual="estudio"] .doca-item { position: relative; width: auto; min-height: 0; gap: 0; }
[data-visual="estudio"] .doca-item i { width: 76px; height: 62px; border-radius: 12px; }
[data-visual="estudio"] .doca-item svg { width: 30px; height: 30px; }
[data-visual="estudio"] .doca-item span {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); z-index: 70;
  padding: 6px 10px; border-radius: 7px; background: #0b0c0f; border: 1px solid #3a414c; color: #fff; font-size: .78rem; font-weight: 700;
  white-space: nowrap; box-shadow: 0 6px 16px -6px #000; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
}
[data-visual="estudio"] .doca-item span::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #3a414c; }
@media (hover: hover) {
  [data-visual="estudio"] .doca-item:hover span, [data-visual="estudio"] .doca-item:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
}
[data-visual="estudio"] .doca-item[aria-current="page"] span, [data-visual="estudio"] .d-ouvir[aria-pressed="true"] span, [data-visual="estudio"] .d-aovivo[aria-pressed="true"] span { color: #fff; }
[data-visual="estudio"] .doca-item:last-child span { left: auto; right: 0; transform: translate(0, 4px); }
[data-visual="estudio"] .doca-item:last-child span::after { left: auto; right: 26px; }
@media (hover: hover) { [data-visual="estudio"] .doca-item:last-child:hover span { transform: translate(0, 0); } }
@media (min-width: 761px) and (max-width: 1440px) {
  [data-visual="estudio"] .doca-item { width: auto; }
  [data-visual="estudio"] .doca-item i { width: 64px; height: 56px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  [data-visual="estudio"] .doca { gap: 5px; }
  [data-visual="estudio"] .doca-item i { width: 54px; height: 50px; }
  [data-visual="estudio"] .doca-item svg { width: 24px; height: 24px; }
}
@media (max-width: 760px) {
  :root[data-visual="estudio"] { --doca-altura: 120px; }
  [data-visual="estudio"] .doca { gap: 6px 4px; }
  [data-visual="estudio"] .doca-item { flex: 1 1 40px; }
  [data-visual="estudio"] .doca-item i { width: 100%; height: 46px; border-radius: 11px; }
  [data-visual="estudio"] .doca-item svg { width: 22px; height: 22px; }
}
@media (min-width: 761px) {
  [data-visual="estudio"] .doca { overflow: visible; }
  [data-visual="estudio"] .doca-transporte { margin-right: auto; }
}

/* barra de baixo maior: todos os botões (transporte e atalhos) do mesmo tamanho, mais altos */
:root[data-visual="estudio"] { --doca-altura: 100px; }
[data-visual="estudio"] .doca-transporte .tr-botao, [data-visual="estudio"] .doca-item i { width: 94px; height: 78px; border-radius: 14px; }
[data-visual="estudio"] .doca-transporte .tr-botao svg { width: 34px; height: 34px; }
[data-visual="estudio"] .doca-item svg { width: 36px; height: 36px; }
[data-visual="estudio"] .doca-transporte .transporte { gap: 10px; }
[data-visual="estudio"] .doca { gap: 10px; }
@media (min-width: 761px) and (max-width: 1440px) {
  :root[data-visual="estudio"] { --doca-altura: 90px; }
  [data-visual="estudio"] .doca-transporte .tr-botao, [data-visual="estudio"] .doca-item i { width: 78px; height: 68px; border-radius: 13px; }
  [data-visual="estudio"] .doca-transporte .tr-botao svg, [data-visual="estudio"] .doca-item svg { width: 30px; height: 30px; }
  [data-visual="estudio"] .doca, [data-visual="estudio"] .doca-transporte .transporte { gap: 8px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  :root[data-visual="estudio"] { --doca-altura: 80px; }
  [data-visual="estudio"] .doca-transporte .tr-botao, [data-visual="estudio"] .doca-item i { width: 62px; height: 60px; border-radius: 12px; }
  [data-visual="estudio"] .doca-transporte .tr-botao svg, [data-visual="estudio"] .doca-item svg { width: 26px; height: 26px; }
  [data-visual="estudio"] .doca, [data-visual="estudio"] .doca-transporte .transporte { gap: 5px; }
}
@media (max-width: 760px) {
  :root[data-visual="estudio"] { --doca-altura: 136px; }
  [data-visual="estudio"] .doca-transporte .tr-botao { width: auto; height: 58px; }
  [data-visual="estudio"] .doca-transporte .tr-botao svg { width: 28px; height: 28px; }
  [data-visual="estudio"] .doca-item i { width: 100%; height: 54px; }
  [data-visual="estudio"] .doca-item svg { width: 26px; height: 26px; }
  [data-visual="estudio"] .doca { gap: 6px 4px; }
}

/* playlist um pouco mais larga (acompanha a botoneira) e letras maiores dentro dos botões da botoneira */
@media (min-width: 1101px) {
  [data-visual="estudio"] .console-grade { grid-template-columns: minmax(500px, .92fr) minmax(0, 1fr); }
}
[data-visual="estudio"] .botoneira .botao-slot .b-nome { font-size: 1.04rem; line-height: 1.15; }
[data-visual="estudio"] .botoneira .botao-slot .b-rodape, [data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot .b-rodape { font-size: .92rem; font-weight: 600; }
@media (min-width: 1101px) and (max-width: 1440px) {
  [data-visual="estudio"] .botoneira .botao-slot .b-nome { font-size: .96rem; }
  [data-visual="estudio"] .botoneira .botao-slot .b-rodape, [data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot .b-rodape { font-size: .86rem; }
}
@media (max-width: 760px) {
  [data-visual="estudio"] .botoneira .botao-slot .b-nome { font-size: .84rem; }
  [data-visual="estudio"] .botoneira .botao-slot .b-rodape, [data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot .b-rodape { font-size: .78rem; }
}

/* botoneira com 24 botões numa página só: as setas de página saem */
[data-visual="estudio"] .botoneira-paginas { display: none; }

/* nome da aba da botoneira: no modo Editar, a aba aberta mostra um lápis (tocar nela troca o nome) */
.botoneira-abas.renomear button[aria-pressed="true"]::after { content: " ✎"; }
.botoneira-abas button { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* playlist volta à largura de antes; o catálogo (meio) e as abas dele ficam maiores */
@media (min-width: 1101px) {
  [data-visual="estudio"] .console-grade { grid-template-columns: minmax(470px, .72fr) minmax(0, 1fr); }
}
[data-visual="estudio"] .abas-lateral { grid-template-columns: 104px minmax(0, 1fr); }
[data-visual="estudio"] .abas-lateral .acervo-abas { gap: 8px; padding: 12px 6px; }
[data-visual="estudio"] .abas-lateral .acervo-abas button,
[data-visual="estudio"] .abas-lateral .acervo-abas button[aria-selected="true"] { font-size: .8rem; gap: 6px; }
[data-visual="estudio"] .abas-lateral .acervo-abas button svg { width: 62px; height: 52px; padding: 12px 17px; border-radius: 12px; }
[data-visual="estudio"] .acervo-lista li, [data-visual="estudio"] .acervo-lista li.comando-item, [data-visual="estudio"] .acervo-lista li.tocou-item { min-height: 64px; grid-template-columns: 6px 48px minmax(0, 1fr) auto auto; }
[data-visual="estudio"] .acervo-lista li.tocou-item, [data-visual="estudio"] .acervo-lista li.comando-item { grid-template-columns: 6px 48px minmax(0, 1fr) auto; }
[data-visual="estudio"] .acervo-lista li > .icone-acao:first-of-type { width: 46px; height: 46px; }
[data-visual="estudio"] .acervo-lista .item-txt b { font-size: 1.06rem; }
[data-visual="estudio"] .acervo-lista .item-txt span { font-size: .86rem; }
[data-visual="estudio"] .acervo-lista .item-dur { font-size: .95rem; }
[data-visual="estudio"] .acervo-lista .item-acoes .icone-acao { width: 46px; height: 46px; }
[data-visual="estudio"] .acervo-lista .item-acoes .icone-acao svg { width: 22px; height: 22px; }
[data-visual="estudio"] .acervo-busca input { min-height: 50px; font-size: 1rem; }
@media (max-width: 760px) {
  [data-visual="estudio"] .abas-lateral { grid-template-columns: 72px minmax(0, 1fr); }
  [data-visual="estudio"] .abas-lateral .acervo-abas button svg { width: 48px; height: 42px; padding: 10px 13px; }
  [data-visual="estudio"] .abas-lateral .acervo-abas button { font-size: .66rem; }
  [data-visual="estudio"] .acervo-lista li { grid-template-columns: 6px 48px minmax(0, 1fr) auto; }
  [data-visual="estudio"] .acervo-lista .item-txt b { font-size: .98rem; }
}
[data-visual="estudio"] .abas-lateral .acervo-abas { overflow-y: auto; scrollbar-width: none; }
[data-visual="estudio"] .abas-lateral .acervo-abas button { flex: none; }
@media (min-width: 761px) and (max-height: 860px) {
  [data-visual="estudio"] .abas-lateral .acervo-abas { gap: 4px; padding: 8px 6px; }
  [data-visual="estudio"] .abas-lateral .acervo-abas button svg { width: 58px; height: 44px; padding: 9px 16px; }
  [data-visual="estudio"] .abas-lateral .acervo-abas button { gap: 3px; padding: 2px; }
}

/* botão de recarregar a playlist, ao lado do avançar */
.tr-recarregar { display: none; }
[data-visual="estudio"] .tr-recarregar { display: grid; background: linear-gradient(180deg, #4aa0ff, #1b5fc0 60%, #134a99); border-color: #0a2a58; }
[data-visual="estudio"] .tr-recarregar.girando svg { animation: tr-gira .8s linear infinite; }
@keyframes tr-gira { to { transform: rotate(360deg); } }

/* caixa da contagem com a altura da primeira fileira da botoneira (calculada pelo painel) */
[data-visual="estudio"] .est-topo { box-sizing: border-box; align-items: stretch; padding-top: 6px; padding-bottom: 6px; }
[data-visual="estudio"] .est-cont { display: flex; flex-direction: column; justify-content: center; }
[data-visual="estudio"] .est-musica { align-self: center; }
[data-visual="estudio"] .est-cont b { font-size: clamp(2.3rem, calc(var(--est-h, 130px) * .5), 4.8rem); }
[data-visual="estudio"] .est-cont { padding-top: 4px; padding-bottom: 10px; }

/* luz RETORNO (barra de cima): acende em azul quando o Ouvir está ligado */
.luz-retorno { display: none; }
[data-visual="estudio"] .topo nav .luz-retorno {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 9px; border: 1px solid #000;
  font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  color: #8a94a1; cursor: pointer; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #3a414b 0%, #262b32 55%, #1a1e23 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 8px -4px #000;
}
[data-visual="estudio"] .topo nav .luz-retorno[hidden] { display: none; }
[data-visual="estudio"] .topo nav .luz-retorno .luz { width: 11px; height: 11px; border-radius: 50%; background: #4a515c; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); flex: none; }
[data-visual="estudio"] .topo nav .luz-retorno:hover { color: #c8ced7; }
[data-visual="estudio"] .topo nav .luz-retorno.ligada {
  color: #fff; border-color: #0a2a58; background: linear-gradient(180deg, #5aa9ff 0%, #1d63c9 52%, #0f3f8a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px 0 rgba(74, 160, 255, .55);
}
[data-visual="estudio"] .topo nav .luz-retorno.ligada .luz { background: #eaf4ff; box-shadow: 0 0 8px 2px #bfe0ff; }
@media (max-width: 760px) { [data-visual="estudio"] .topo nav .luz-retorno { padding: 5px 9px; letter-spacing: .06em; font-size: .7rem; gap: 6px; } }

/* barra de cima maior, no tamanho dos botões do sistema */
:root[data-visual="estudio"] { --topo-altura: 80px; }
[data-visual="estudio"] .topo { min-height: var(--topo-altura); gap: 14px; }
[data-visual="estudio"] .topo .portal .marca-icone { width: 42px; height: 42px; }
[data-visual="estudio"] .topo .marca-nome { font-size: 1.55rem; }
[data-visual="estudio"] .selo-estudio, [data-visual="estudio"] .selo-beta { font-size: .8rem; padding: 3px 10px; }
[data-visual="estudio"] .topo nav { gap: 10px; }
[data-visual="estudio"] .topo nav .luz-no-ar, [data-visual="estudio"] .topo nav .luz-online, [data-visual="estudio"] .topo nav .luz-retorno {
  min-height: 54px; padding: 8px 18px; border-radius: 12px; font-size: .95rem; gap: 10px;
}
[data-visual="estudio"] .topo nav .luz-no-ar .luz, [data-visual="estudio"] .topo nav .luz-online .luz, [data-visual="estudio"] .topo nav .luz-retorno .luz { width: 14px; height: 14px; }
[data-visual="estudio"] .usuario-menu summary { min-height: 54px; padding: 5px 16px 5px 5px; border-radius: 12px; gap: 12px; }
[data-visual="estudio"] .usuario-menu summary .avatar { width: 42px; height: 42px; border-radius: 9px; }
[data-visual="estudio"] .usuario-menu summary .avatar svg { width: 22px; height: 22px; }
[data-visual="estudio"] .usuario-menu .usuario-nome { font-size: 1.02rem; max-width: 200px; }
[data-visual="estudio"] .th-relogio b { font-size: 2.1rem; }
[data-visual="estudio"] .th-relogio small, [data-visual="estudio"] .th-clima small { font-size: .82rem; }
[data-visual="estudio"] .th-clima b { font-size: 1.6rem; }
[data-visual="estudio"] .th-clima i svg { width: 28px; height: 28px; }
[data-visual="estudio"] .menu-painel { top: calc(100% + 8px); }
@media (min-width: 761px) and (max-width: 1440px) {
  :root[data-visual="estudio"] { --topo-altura: 72px; }
  [data-visual="estudio"] .topo nav .luz-no-ar, [data-visual="estudio"] .topo nav .luz-online, [data-visual="estudio"] .topo nav .luz-retorno { min-height: 48px; padding: 6px 14px; font-size: .86rem; }
  [data-visual="estudio"] .usuario-menu summary { min-height: 48px; }
  [data-visual="estudio"] .usuario-menu summary .avatar { width: 38px; height: 38px; }
  [data-visual="estudio"] .th-relogio b { font-size: 1.8rem; }
  [data-visual="estudio"] .topo .marca-nome { font-size: 1.35rem; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  [data-visual="estudio"] .usuario-menu .usuario-nome { display: none; }
  [data-visual="estudio"] .usuario-menu summary { padding-right: 8px; }
}
@media (max-width: 760px) {
  :root[data-visual="estudio"] { --topo-altura: 64px; }
  [data-visual="estudio"] .topo nav { gap: 6px; }
  [data-visual="estudio"] .topo nav .luz-no-ar, [data-visual="estudio"] .topo nav .luz-online, [data-visual="estudio"] .topo nav .luz-retorno { min-height: 42px; padding: 5px 9px; font-size: .68rem; gap: 6px; border-radius: 10px; }
  [data-visual="estudio"] .topo nav .luz-no-ar .luz, [data-visual="estudio"] .topo nav .luz-online .luz, [data-visual="estudio"] .topo nav .luz-retorno .luz { width: 10px; height: 10px; }
  [data-visual="estudio"] .usuario-menu summary { min-height: 42px; padding: 3px; }
  [data-visual="estudio"] .usuario-menu summary .avatar { width: 34px; height: 34px; }
  [data-visual="estudio"] .topo .portal .marca-icone { width: 34px; height: 34px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  [data-visual="estudio"] .topo nav { flex-wrap: nowrap; gap: 6px; }
  [data-visual="estudio"] .topo .marca-nome, [data-visual="estudio"] .selo-estudio { display: none; }
  [data-visual="estudio"] .topo nav .luz-no-ar, [data-visual="estudio"] .topo nav .luz-online, [data-visual="estudio"] .topo nav .luz-retorno { padding: 6px 11px; letter-spacing: .08em; font-size: .8rem; }
}

/* doca em duas partes: play/pause/stop/avançar/recarregar centralizados embaixo da playlist; os atalhos
   centralizados embaixo da botoneira (mesmas colunas da tela do ar) */
.doca-atalhos { display: contents; }
[data-visual="estudio"] .doca-atalhos { display: flex; align-items: center; justify-content: center; gap: inherit; }
@media (min-width: 761px) {
  [data-visual="estudio"] .doca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 8px; padding-left: 20px; padding-right: 20px; }
  [data-visual="estudio"] .doca-transporte { margin: 0; padding: 0; justify-self: center; }
  [data-visual="estudio"] .doca-atalhos { gap: 10px; }
}
@media (min-width: 1101px) {
  [data-visual="estudio"] .doca { grid-template-columns: minmax(470px, .72fr) minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1440px) { [data-visual="estudio"] .doca-atalhos { gap: 8px; } }
@media (min-width: 761px) and (max-width: 1100px) { [data-visual="estudio"] .doca-atalhos { gap: 5px; } }
@media (max-width: 760px) {
  [data-visual="estudio"] .doca-atalhos { flex: 0 0 100%; gap: 4px; }
}

/* sem o contorno amarelo piscando ao trocar de parte pela barra de baixo */
.doca-destaque { animation: none !important; }

/* barra de cima ocupando a largura toda em todas as telas (antes, fora da tela do ar, ela ficava espremida no meio) */
[data-visual="estudio"] .topo { padding-left: 20px; padding-right: 20px; flex-wrap: nowrap; }
[data-visual="estudio"] .topo nav { flex-wrap: nowrap; }
/* fora da tela do ar (sem play/pause na doca), os atalhos ficam centralizados na barra toda */
[data-visual="estudio"] .doca-transporte:empty + .doca-atalhos { grid-column: 1 / -1; }

/* menu da conta no padrão do sistema: painel com brilho, itens altos e cada ícone numa placa colorida */
[data-visual="estudio"] .menu-painel {
  min-width: 290px; padding: 8px; border-radius: 14px; border: 1px solid #000;
  background: linear-gradient(180deg, #23272e 0%, #15181c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 50px -14px rgba(0, 0, 0, .95);
}
[data-visual="estudio"] .menu-cab { padding: 10px 10px 14px; gap: 12px; border-bottom: 1px solid #2c323a; margin-bottom: 6px; }
[data-visual="estudio"] .menu-cab b { font-size: 1.05rem; color: #fff; }
[data-visual="estudio"] .menu-cab span { color: #9aa4b1; }
[data-visual="estudio"] .menu-cab .avatar { width: 48px; height: 48px; }
[data-visual="estudio"] .menu-painel a, [data-visual="estudio"] .menu-painel button {
  --c: #4a515c; min-height: 52px; padding: 6px 10px; gap: 12px; border-radius: 10px; font-size: .98rem; font-weight: 600; color: #e9edf2;
}
[data-visual="estudio"] .menu-painel a:hover, [data-visual="estudio"] .menu-painel button:hover, [data-visual="estudio"] .menu-painel a[aria-current="page"] {
  background: linear-gradient(180deg, #2f353d, #23282e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-visual="estudio"] .menu-painel a svg, [data-visual="estudio"] .menu-painel button svg {
  flex: none; width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: 9px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #fff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 68%, #000) 100%);
  border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
[data-visual="estudio"] .menu-painel .menu-sep { border-top-color: #2c323a; margin: 6px 4px; }
[data-visual="estudio"] .menu-painel a[href*="/biblioteca"] { --c: #e2742a; }
[data-visual="estudio"] .menu-painel a[href*="/musical"] { --c: #7c4ddb; }
[data-visual="estudio"] .menu-painel a[href*="/aovivo"] { --c: #d8322a; }
[data-visual="estudio"] .menu-painel a[href*="/historico"] { --c: #1aa6b8; }
[data-visual="estudio"] .menu-painel a[href*="/player"] { --c: #1f9d4c; }
[data-visual="estudio"] .menu-painel a[href*="/configuracoes"] { --c: #6b7480; }
[data-visual="estudio"] .menu-painel a[href*="/conta"] { --c: #2f7de1; }
[data-visual="estudio"] .menu-painel form[action*="recarregar"] button { --c: #2f7de1; }
[data-visual="estudio"] .menu-painel form[action*="reiniciar"] button { --c: #b5432a; }
[data-visual="estudio"] .menu-painel form[action*="trocar"] button { --c: #d6950f; }
[data-visual="estudio"] .menu-painel form[action$="/sair"] button { --c: #c42a1f; }
[data-visual="estudio"] .menu-painel a:not([href*="/biblioteca"]):not([href*="/musical"]):not([href*="/aovivo"]):not([href*="/historico"]):not([href*="/player"]):not([href*="/configuracoes"]):not([href*="/conta"]) { --c: #4a6fa5; }   /* Voltar à Central */

/* aviso de nova versão / atualizando, no padrão do sistema */
[data-visual="estudio"] .faixa-atualizacao {
  padding: 10px 20px; border-bottom: 1px solid #000; color: #fff;
  background: linear-gradient(180deg, #1d4f99 0%, #163f7d 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}
[data-visual="estudio"] .faixa-atualizacao > svg { color: #bfe0ff; }
[data-visual="estudio"] .faixa-atualizacao .botao { background: linear-gradient(180deg, #5ee08a, #1f9d4c); border-color: #0b3d1d; min-height: 40px; }
[data-visual="estudio"] .faixa-atualizacao.atualizando { background: linear-gradient(180deg, #b77b14, #8a5a0a); }
[data-visual="estudio"] .console-grade { height: calc(100dvh - var(--topo-altura) - var(--doca-altura) - var(--faixa-alt, 0px) - 26px); }
@media (max-width: 1100px) {
  [data-visual="estudio"] .console-grade { height: calc(100dvh - var(--topo-altura) - var(--doca-altura) - var(--faixa-alt, 0px) - 24px); }
}

/* RETORNO é só uma luz (como NO AR): sem cursor de clique */
[data-visual="estudio"] .topo nav .luz-retorno, [data-visual="estudio"] .topo nav .luz-retorno:hover { cursor: default; }
[data-visual="estudio"] .topo nav .luz-retorno:hover { color: #8a94a1; }
[data-visual="estudio"] .topo nav .luz-retorno.ligada:hover { color: #fff; }

/* tecla do atalho no canto do botão da botoneira */
.b-tecla { display: none; }
[data-visual="estudio"] .botao-slot .b-tecla {
  display: block; position: absolute; top: 4px; left: 5px; padding: 0 5px; border-radius: 4px; font-size: .66rem; font-weight: 800;
  line-height: 1.5; background: rgba(0, 0, 0, .35); color: #fff; text-shadow: none; letter-spacing: .02em;
}
[data-visual="estudio"] .botao-slot.claro .b-tecla { background: rgba(0, 0, 0, .55); }

/* botão de tela cheia na barra de baixo */
.d-tela .ico-fechar { display: none; }
.d-tela[aria-pressed="true"] .ico-abrir { display: none; }
.d-tela[aria-pressed="true"] .ico-fechar { display: block; }
[data-visual="estudio"] .d-tela { --c1: #7d8693; --c2: #3c434d; }
[data-visual="estudio"] .d-tela[aria-pressed="true"] i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 2px #0b0c0f, 0 0 0 4px var(--amarelo); }

/* Catálogo em ícones no visual de estúdio */
[data-visual="estudio"] .cat-secao h3 { color: #9aa4b1; }
[data-visual="estudio"] .cat-secao h3::after { background: linear-gradient(90deg, #3a414c, transparent); }
/* Catálogo: botão escuro do player (como "Ver mais 1 hora") com uma mini tecla na cor da pasta, igual às da doca */
[data-visual="estudio"] .cat-ico { color: #fff; border: 1px solid #000; border-radius: 11px; min-height: 62px; padding: 8px 12px 8px 9px;
  background: linear-gradient(180deg, #353c46, #1f242b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 8px -4px #000; }
[data-visual="estudio"] .cat-ico::before { display: none; }
[data-visual="estudio"] .cat-ico:hover { background: linear-gradient(180deg, #3e4652, #252b33); border-color: #000; }
[data-visual="estudio"] .cat-ico i { position: relative; overflow: hidden; width: 44px; height: 42px; border-radius: 10px; color: #fff;
  border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 90%, #fff), color-mix(in srgb, var(--cor) 65%, #000)); }
[data-visual="estudio"] .cat-ico i::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .02)); }
[data-visual="estudio"] .cat-ico i svg { width: 21px; height: 21px; position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
[data-visual="estudio"] .cat-txt b { color: #fff; }
[data-visual="estudio"] .cat-ico.cat-todas { border-style: solid; background: linear-gradient(180deg, #3b434e, #262c34); }
[data-visual="estudio"] .cat-ico.cat-todas i { background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 90%, #fff), color-mix(in srgb, var(--cor) 65%, #000)); }
[data-visual="estudio"] .cat-txt small { color: #9aa4b1; }
[data-visual="estudio"] .cat-voltar { background: linear-gradient(180deg, #3a414b, #23282f); border-color: #000; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
[data-visual="estudio"] .cat-titulo { color: #fff; }

/* ================================================================== Mixer no padrão do sistema (mesa de broadcast)
   Seis canais numa linha: Mic, Player, Catálogo, Botoneira, Externa e, separado, Fones (o monitor do operador).
   Cada canal: faixa de cor no topo, ícone em placa como na doca, luz de estado, VU de LED, fader de mesa com
   escala em dB, visor âmbar com o valor e os botões grandes (CUE/LINHA e ON). */
[data-visual="estudio"] .painel-mesa .mesa {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1fr); gap: 8px; padding: 10px; align-items: stretch;
  background: linear-gradient(180deg, #121417, #0c0e10); }
[data-visual="estudio"] .painel-mesa .canal {
  --cc: #8a94a0;
  display: grid; grid-template-rows: auto auto minmax(110px, 1fr) auto auto auto; justify-items: stretch; align-items: center;
  gap: 8px; padding: 12px 8px 10px; margin: 0; min-width: 0; min-height: 0; position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid #000;
  background: linear-gradient(180deg, #262a31 0%, #1a1d22 40%, #131519 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .02), 0 8px 18px -10px #000; }
[data-visual="estudio"] .painel-mesa .canal::before {   /* faixa de cor do canal */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 70%, #fff), var(--cc)); box-shadow: 0 0 10px 0 color-mix(in srgb, var(--cc) 60%, transparent); }
[data-visual="estudio"] .painel-mesa .canal[data-canal="mic"] { --cc: #e0463a; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="playlist"] { --cc: #2f7de1; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="acervo"] { --cc: #2fb35a; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="botoneira"] { --cc: #e39a12; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="externa"] { --cc: #12a693; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="fone"] { --cc: #6b8cff; margin-left: 6px;
  background: linear-gradient(180deg, #232a3a 0%, #181d29 40%, #12151d 100%); }
[data-visual="estudio"] .painel-mesa .canal[data-canal="fone"]::after {   /* separação da seção de monitor */
  content: ""; position: absolute; left: -9px; top: 8px; bottom: 8px; width: 2px; background: #000; box-shadow: 1px 0 0 rgba(255, 255, 255, .05); }
/* nome com o ícone em placa colorida (como a doca) */
[data-visual="estudio"] .painel-mesa .canal-nome {
  flex-direction: column; gap: 6px; color: #e9edf2; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-shadow: 0 1px 0 #000; }
[data-visual="estudio"] .painel-mesa .canal-nome span {
  width: 38px; height: 34px; border-radius: 9px; color: #fff; border: 1px solid rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 62%, #fff) 0%, var(--cc) 52%, color-mix(in srgb, var(--cc) 66%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px -4px #000; }
[data-visual="estudio"] .painel-mesa .canal-nome span svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
/* luz de estado */
[data-visual="estudio"] .painel-mesa .canal-estado {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 0;
  padding: 3px 10px; border-radius: 999px; background: #0a0c0e; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
  color: #7d8792; font-size: .66rem; font-weight: 700; letter-spacing: .03em; }
[data-visual="estudio"] .painel-mesa .canal-estado::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3a414b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
[data-visual="estudio"] .painel-mesa .canal-estado.ativo { color: #8ef0b0; }
[data-visual="estudio"] .painel-mesa .canal-estado.ativo::before { background: #2fe06d; box-shadow: 0 0 8px 1px rgba(47, 224, 109, .8); }
[data-visual="estudio"] .painel-mesa .canal[data-canal="mic"] .canal-estado.ativo,
[data-visual="estudio"] .painel-mesa .canal[data-canal="externa"] .canal-estado.ativo { color: #ff9a8f; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="mic"] .canal-estado.ativo::before,
[data-visual="estudio"] .painel-mesa .canal[data-canal="externa"] .canal-estado.ativo::before { background: #ff3b2f; box-shadow: 0 0 8px 1px rgba(255, 59, 47, .85); }
/* medidores + escala + fader num poço escuro */
[data-visual="estudio"] .painel-mesa .canal-corpo {
  height: 100%; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 4px;
  padding: 10px 6px; border-radius: 9px; background: #08090b; border: 1px solid #000; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .85); }
[data-visual="estudio"] .painel-mesa .vu-v { width: 9px; border-radius: 2px;
  background: linear-gradient(0deg, #17c454 0%, #17c454 64%, #f2c12e 64%, #f2c12e 84%, #ff3b2f 84%, #ff3b2f 100%); }
[data-visual="estudio"] .painel-mesa .vu-v i { background: #15181c; }
[data-visual="estudio"] .painel-mesa .vu-v::after { background: repeating-linear-gradient(0deg, transparent 0 3px, #08090b 3px 4px); }
[data-visual="estudio"] .painel-mesa .vu-v b { background: #fff; }
[data-visual="estudio"] .painel-mesa .canal.desligado .vu-v { opacity: .35; }
[data-visual="estudio"] .painel-mesa .canal-escala { position: relative; width: 22px; flex: none; margin: 11px 0; }
[data-visual="estudio"] .painel-mesa .canal-escala span {
  position: absolute; right: 0; bottom: calc(var(--pos) * 100%); transform: translateY(50%);
  font-size: .56rem; line-height: 1; color: #6f7883; font-variant-numeric: tabular-nums; }
[data-visual="estudio"] .painel-mesa .canal-escala span::after {
  content: ""; position: absolute; right: -6px; top: 50%; width: 4px; height: 1px; background: #4a525c; }
[data-visual="estudio"] .painel-mesa .canal-escala span.zero { color: #f2c12e; font-weight: 700; }
/* fader de mesa: trilho fino e capa cinza com risco no meio */
[data-visual="estudio"] .painel-mesa .fader {
  -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl;
  width: 44px; height: auto; margin: 0 0 0 6px; background: transparent; cursor: ns-resize; accent-color: #d7dde5; }
[data-visual="estudio"] .painel-mesa .fader::-webkit-slider-runnable-track {
  width: 6px; border-radius: 3px; background: linear-gradient(90deg, #000, #22262c 50%, #000); box-shadow: 0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, .06); }
[data-visual="estudio"] .painel-mesa .fader::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 40px; height: 24px; margin-left: -17px; border-radius: 4px; border: 1px solid #000;
  background: linear-gradient(180deg, #f1f3f6 0%, #c3c9d1 30%, #8d949e 48%, #2b2f35 50%, #8d949e 52%, #c3c9d1 70%, #e6e9ed 100%);
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, .9), inset 0 1px 0 #fff; }
[data-visual="estudio"] .painel-mesa .fader::-moz-range-track { width: 6px; border-radius: 3px; background: #000; }
[data-visual="estudio"] .painel-mesa .fader::-moz-range-thumb {
  width: 40px; height: 24px; border-radius: 4px; border: 1px solid #000;
  background: linear-gradient(180deg, #f1f3f6 0%, #c3c9d1 30%, #8d949e 48%, #2b2f35 50%, #8d949e 52%, #c3c9d1 70%, #e6e9ed 100%); }
/* visor âmbar com o valor */
[data-visual="estudio"] .painel-mesa .canal-db {
  justify-self: center; min-width: 74px; padding: 4px 8px; border-radius: 6px; text-align: center;
  background: #050607; border: 1px solid #000; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .05);
  color: #ffb52e; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; text-shadow: 0 0 6px rgba(255, 181, 46, .5); }
/* botões */
[data-visual="estudio"] .painel-mesa .canal-cue, [data-visual="estudio"] .painel-mesa .canal-on {
  width: 100%; max-width: none; min-height: 42px; height: auto; border-radius: 9px; font-size: .8rem; font-weight: 800; letter-spacing: .08em;
  border: 1px solid #000; color: #a8b1bc; background: linear-gradient(180deg, #3b424c, #262b32 55%, #1d2126); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px -2px #000; }
[data-visual="estudio"] .painel-mesa .canal-cue:hover:not(:disabled), [data-visual="estudio"] .painel-mesa .canal-on:hover:not(:disabled) { filter: brightness(1.12); }
[data-visual="estudio"] .painel-mesa .canal-cue:active:not(:disabled), [data-visual="estudio"] .painel-mesa .canal-on:active:not(:disabled) { transform: translateY(1px); }
[data-visual="estudio"] .painel-mesa .canal-cue.vazio { visibility: hidden; display: block; }
[data-visual="estudio"] .painel-mesa .canal-on[aria-pressed="true"] {
  color: #fff; border-color: #0b3d1d; background: linear-gradient(180deg, #4fe38a, #1fa954 55%, #158a43); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px -3px #2fe06d; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
[data-visual="estudio"] .painel-mesa .canal[data-canal="mic"] .canal-on[aria-pressed="true"],
[data-visual="estudio"] .painel-mesa .canal[data-canal="externa"] .canal-on[aria-pressed="true"] {
  border-color: #4a0d08; background: linear-gradient(180deg, #ff6a5c, #d8261c 55%, #a8180f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 14px -3px #ff3b2f; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="fone"] .canal-on[aria-pressed="true"] {
  border-color: #0d1f4a; background: linear-gradient(180deg, #7ea0ff, #3d63e0 55%, #2a4bb8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 14px -3px #6b8cff; }
[data-visual="estudio"] .painel-mesa .canal-cue[aria-pressed="true"] {
  color: #1d1600; border-color: #5a4500; background: linear-gradient(180deg, #ffe066, #f2b705 55%, #c99500); text-shadow: none; }
[data-visual="estudio"] .painel-mesa .canal-linha[aria-pressed="true"] {
  color: #fff; border-color: #06463f; background: linear-gradient(180deg, #3fd6c0, #12a693 55%, #0c7e70); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 14px -3px #12a693; animation: none; }
[data-visual="estudio"] .painel-mesa .canal-cue:disabled, [data-visual="estudio"] .painel-mesa .canal-on:disabled { opacity: .45; cursor: not-allowed; }
/* parar o catálogo: quadradinho vermelho no canto, sem empurrar os botões */
[data-visual="estudio"] .painel-mesa .canal-parar {
  position: absolute; top: 10px; right: 8px; width: 26px; min-height: 0; height: 26px; padding: 0; border-radius: 6px; font-size: .7rem; z-index: 2; }
/* mixer na coluna da direita: ocupa a altura toda */
@media (min-width: 1101px) {
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .painel-mesa .mesa { flex: 1; min-height: 0; }
  [data-visual="estudio"] .console-grade[data-direita="mesa"] .painel-mesa .canal-corpo { height: 100%; min-height: 0; }
}
/* tela estreita: os seis canais rolam para o lado sem apertar demais */
@media (max-width: 1100px) {
  [data-visual="estudio"] .painel-mesa .mesa { grid-template-columns: repeat(6, minmax(92px, 1fr)); overflow-x: auto; }
  [data-visual="estudio"] .painel-mesa .canal { grid-template-rows: auto auto 240px auto auto auto; }
}
/* ajuste de largura: seis canais cabem inteiros; fader e escala um pouco mais estreitos */
[data-visual="estudio"] .painel-mesa .mesa { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="fone"] { margin-left: 0; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="fone"]::after { display: none; }
[data-visual="estudio"] .painel-mesa .canal { overflow: visible; }
[data-visual="estudio"] .painel-mesa .canal::before { border-radius: 12px 12px 0 0; }
[data-visual="estudio"] .painel-mesa .canal-corpo { gap: 3px; padding: 10px 4px; overflow: hidden; }
[data-visual="estudio"] .painel-mesa .vu-v { width: 8px; }
[data-visual="estudio"] .painel-mesa .canal-escala { width: 18px; }
[data-visual="estudio"] .painel-mesa .fader { width: 36px; margin-left: 4px; }
[data-visual="estudio"] .painel-mesa .fader::-webkit-slider-thumb { width: 34px; margin-left: -14px; }
[data-visual="estudio"] .painel-mesa .fader::-moz-range-thumb { width: 34px; }
[data-visual="estudio"] .painel-mesa .canal-db { min-width: 0; width: 100%; }
@media (max-width: 1100px) {   /* celular e tablet: canais com largura fixa, o mixer rola para o lado */
  [data-visual="estudio"] .painel-mesa .mesa { grid-template-columns: repeat(6, 108px); column-gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; }
  [data-visual="estudio"] .painel-mesa .canal-nome { font-size: .66rem; letter-spacing: .04em; }
  [data-visual="estudio"] .painel-mesa .canal-estado { padding: 3px 8px; font-size: .62rem; }
}

/* Break comercial na playlist: uma faixa fina com o título do break e, embaixo, cada comercial (um por linha) */
[data-visual="estudio"] .log-linha.break-cab {
  min-height: 0; grid-template-columns: 1fr auto; grid-template-areas: "tit hora"; padding: 6px 12px 6px 14px; margin-top: 4px;
  --placa: linear-gradient(180deg, #5a4210, #3a2a08); --borda: #8a6614; }
[data-visual="estudio"] .log-linha.break-cab .log-ir, [data-visual="estudio"] .log-linha.break-cab .log-ico,
[data-visual="estudio"] .log-linha.break-cab .log-cod, [data-visual="estudio"] .log-linha.break-cab .log-fim,
[data-visual="estudio"] .log-linha.break-cab .log-a2 { display: none; }
[data-visual="estudio"] .log-linha.break-cab .log-titulo { grid-area: tit; }
[data-visual="estudio"] .log-linha.break-cab .log-t2 { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ffd27a; }
[data-visual="estudio"] .log-linha.break-cab .log-hora { grid-area: hora; align-self: center; color: #ffd27a; }
[data-visual="estudio"] .log-linha.break-item .log-ir.vazio { background: linear-gradient(180deg, #3a2a08, #241a05); border-color: #000; }
[data-visual="estudio"] .log-linha.break-cab::before { left: 0 !important; }
[data-visual="estudio"] .log-linha.break-cab { padding-left: 14px; }
/* ícone de comercial à esquerda dos comerciais do break (placa âmbar com brilho, como os botões) */
[data-visual="estudio"] .log-linha .log-ir.ir-comercial {
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #f2b83a 0%, #d3901a 50%, #9a6608 100%) !important; border: 1px solid #4a3205 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px -3px #000; }
[data-visual="estudio"] .log-linha .log-ir.ir-comercial svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }

/* ------------------------------------------------------------------ Tocou no formato da playlist
   quadrado com o número à esquerda (como o botão da playlist) + placa na cor de fundo da janela,
   com a faixa fina da cor do tipo de áudio, título grande, artista embaixo e a hora em que tocou à direita */
html[data-visual="estudio"] body .acervo-lista li.tocou-item {
  position: relative; display: grid; grid-template-columns: 76px 22px minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 0;
  min-height: 72px; padding: 0; margin: 0 0 6px; border: 0; background: none; align-items: stretch;
}
html[data-visual="estudio"] body .acervo-lista li.tocou-item:hover { background: none; }
html[data-visual="estudio"] body .acervo-lista li.tocou-item::before {
  content: ""; position: absolute; left: 82px; right: 0; top: 0; bottom: 0; z-index: 0; border-radius: 5px;
  background: linear-gradient(180deg, #20242b 0%, #181b20 100%); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-visual="estudio"] body .acervo-lista li.tocou-item > * { position: relative; z-index: 1; }
html[data-visual="estudio"] body .acervo-lista li.tocou-item .tocou-num {
  grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 76px; align-self: stretch; min-height: 72px; margin: 0; padding: 0;
  border-radius: 5px; border: 1px solid #000; background: linear-gradient(180deg, #3a414c 0%, #262b33 55%, #1b1f25 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); color: var(--amarelo); font-size: 1.35rem; font-weight: 800; text-align: center;
}
html[data-visual="estudio"] body .acervo-lista li.tocou-item:first-child .tocou-num {   /* o último que tocou, em destaque */
  background: linear-gradient(180deg, var(--azul-1), var(--azul-2) 60%, var(--azul-3)); color: #fff;
}
html[data-visual="estudio"] body .acervo-lista li.tocou-item .faixa-cor {
  grid-column: 2; grid-row: 1; justify-self: end; width: 4px; margin: 12px 0; border-radius: 3px; align-self: stretch;
}
html[data-visual="estudio"] body .acervo-lista li.tocou-item .item-txt { grid-column: 3; grid-row: 1; align-self: center; padding: 8px 12px 8px 14px; min-width: 0; }
html[data-visual="estudio"] body .acervo-lista li.tocou-item .item-txt b { font-size: 1.12rem; font-weight: 700; color: #fff; }
html[data-visual="estudio"] body .acervo-lista li.tocou-item .item-txt span { display: block; font-size: .95rem; color: #c8ced7; margin-top: 2px; }
html[data-visual="estudio"] body .acervo-lista li.tocou-item .tocou-hora {
  grid-column: 4; grid-row: 1; align-self: center; padding: 0 16px; color: #fff; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  html[data-visual="estudio"] body .acervo-lista li.tocou-item { grid-template-columns: 56px 18px minmax(0, 1fr) auto; min-height: 64px; }
  html[data-visual="estudio"] body .acervo-lista li.tocou-item::before { left: 62px; }
  html[data-visual="estudio"] body .acervo-lista li.tocou-item .tocou-num { width: 56px; min-height: 64px; font-size: 1.15rem; }
  html[data-visual="estudio"] body .acervo-lista li.tocou-item .item-txt b { font-size: 1rem; }
  html[data-visual="estudio"] body .acervo-lista li.tocou-item .item-txt span { font-size: .85rem; }
  html[data-visual="estudio"] body .acervo-lista li.tocou-item .tocou-hora { font-size: 1rem; padding: 0 10px; }
}

/* ------------------------------------------------------------------ topo sem plaquinhas
   NO AR, RETORNO, ONLINE, conta e a nuvem ficam soltos, separados por um risquinho (como hora | temperatura | ouvintes).
   Apagado: bolinha e texto cinza. Aceso: a bolinha brilha e o texto ganha a cor (vermelho, azul, verde). */
html[data-visual="estudio"] body .topo nav { gap: 0; }
html[data-visual="estudio"] body .topo nav .luz-no-ar,
html[data-visual="estudio"] body .topo nav .luz-online,
html[data-visual="estudio"] body .topo nav .luz-retorno {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 0; border-left: 1px solid #2c323a;
  background: none; box-shadow: none; text-shadow: none; color: #7e8896;
}
html[data-visual="estudio"] body .topo nav > :first-child { border-left: 0; }
html[data-visual="estudio"] body .topo nav .luz-no-ar.ligada { color: #ff5a4f; background: none; box-shadow: none; border-color: #2c323a; }
html[data-visual="estudio"] body .topo nav .luz-no-ar.ligada .luz { background: #ff4b3e; box-shadow: 0 0 10px 3px rgba(255, 75, 62, .75); }
html[data-visual="estudio"] body .topo nav .luz-online.ligada { color: #5ee08a; background: none; box-shadow: none; border-color: #2c323a; }
html[data-visual="estudio"] body .topo nav .luz-online.ligada .luz { background: #5ee08a; box-shadow: 0 0 10px 3px rgba(94, 224, 138, .6); }
html[data-visual="estudio"] body .topo nav .luz-retorno.ligada { color: #8fc4ff; background: none; box-shadow: none; border-color: #2c323a; }
html[data-visual="estudio"] body .topo nav .luz-retorno.ligada .luz { background: #4aa0ff; box-shadow: 0 0 10px 3px rgba(74, 160, 255, .6); }
html[data-visual="estudio"] body .topo nav .luz-no-ar.ligada:hover { color: #ff5a4f; }
html[data-visual="estudio"] body .topo nav .luz-retorno.ligada:hover { color: #8fc4ff; }

/* conta: avatar e nome soltos, com o risquinho antes */
html[data-visual="estudio"] body .usuario-menu summary {
  min-height: 40px; padding: 0 4px 0 18px; border: 0; border-radius: 0; border-left: 1px solid #2c323a;
  background: none; box-shadow: none; text-shadow: none;
}
html[data-visual="estudio"] body .usuario-menu summary:hover, html[data-visual="estudio"] body .usuario-menu[open] summary { background: none; box-shadow: none; }
html[data-visual="estudio"] body .usuario-menu summary:hover .usuario-nome, html[data-visual="estudio"] body .usuario-menu[open] .usuario-nome { color: var(--amarelo); }
html[data-visual="estudio"] body .topo nav + .usuario-menu, html[data-visual="estudio"] body .topo .usuario-menu { margin-left: 0; }

/* a nuvem do RD-CLOUD: solta, com o risquinho antes */
html[data-visual="estudio"] body .sobre-sistema { margin-left: 14px; }
html[data-visual="estudio"] body .sobre-sistema > summary {
  width: auto; min-height: 40px; padding: 0 0 0 18px; border: 0; border-radius: 0; border-left: 1px solid #2c323a;
  background: none; box-shadow: none;
}
html[data-visual="estudio"] body .sobre-sistema > summary img { width: 32px; }
html[data-visual="estudio"] body .sobre-sistema[open] > summary { box-shadow: none; }
html[data-visual="estudio"] body .sobre-sistema[open] > summary img, html[data-visual="estudio"] body .sobre-sistema > summary:hover img { filter: drop-shadow(0 0 8px rgba(227, 38, 43, .55)); }
@media (max-width: 760px) {
  html[data-visual="estudio"] body .topo nav .luz-no-ar,
  html[data-visual="estudio"] body .topo nav .luz-online,
  html[data-visual="estudio"] body .topo nav .luz-retorno { padding: 0 9px; }
  html[data-visual="estudio"] body .usuario-menu summary { padding-left: 10px; }
  html[data-visual="estudio"] body .sobre-sistema { margin-left: 8px; }
  html[data-visual="estudio"] body .sobre-sistema > summary { padding-left: 10px; }
}

/* catálogo: o botão de ouvir e a faixinha na cor da pasta (a que se escolhe no Musical ao criar a pasta).
   Sem pasta continua verde; tocando a pré-escuta continua vermelho. */
html[data-visual="estudio"] body .acervo-lista li.com-cor-pasta > .icone-acao:first-of-type:not([aria-pressed="true"]) {
  color: var(--sobre-pasta, #fff); border-color: color-mix(in srgb, var(--cor-pasta) 45%, #000);
  background: linear-gradient(color-mix(in srgb, var(--cor-pasta) 78%, #fff), var(--cor-pasta) 55%, color-mix(in srgb, var(--cor-pasta) 80%, #000));
}
html[data-visual="estudio"] body .acervo-lista li.com-cor-pasta .faixa-cor { background: var(--cor-pasta); }

/* rodapé da playlist no visual de estúdio */
[data-visual="estudio"] .log-mais { color: #c9d1da; }
[data-visual="estudio"] .log-linha.drop-antes::after { left: 82px; }
[data-visual="estudio"] .log-linha.ir-destaque::before { outline: 3px solid #ffd23f; outline-offset: -1px; }
[data-visual="estudio"] .log-linha.ir-destaque { outline: 0; }

/* hora certa e temperatura na playlist: o reloginho / o termômetro no quadrado da esquerda */
[data-visual="estudio"] .log-linha .log-ir.ir-locucao {
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #4fc3d6 0%, #1592a8 50%, #0b6878 100%) !important; border: 1px solid #053a43 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px -3px #000; }
[data-visual="estudio"] .log-linha .log-ir.ir-temperatura { background: linear-gradient(180deg, #ff9a5a 0%, #e0632a 50%, #a8410f 100%) !important; border-color: #4a1d06 !important; }
[data-visual="estudio"] .log-linha .log-ir.ir-locucao svg { stroke-width: 1.9; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }

/* botão do fader do mixer: tampa branca arredondada, com relevo suave (como as mesas de software) */
[data-visual="estudio"] .painel-mesa .fader::-webkit-slider-thumb {
  width: 26px; height: 38px; margin-left: -10px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f7 45%, #e2e5ea 100%);
  box-shadow: 0 3px 8px -1px rgba(0, 0, 0, .75), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .07); }
[data-visual="estudio"] .painel-mesa .fader::-moz-range-thumb {
  width: 26px; height: 38px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f7 45%, #e2e5ea 100%);
  box-shadow: 0 3px 8px -1px rgba(0, 0, 0, .75), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .07); }
[data-visual="estudio"] .painel-mesa .fader:hover::-webkit-slider-thumb { background: linear-gradient(180deg, #ffffff, #f7f8fa 45%, #e9ecf0); }
[data-visual="estudio"] .painel-mesa .fader:active::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, .8), inset 0 1px 0 #fff; }
[data-visual="estudio"] .painel-mesa .fader:focus-visible::-webkit-slider-thumb { outline: 2px solid #62b4ff; outline-offset: 2px; }

/* telas de toque: alvos de pelo menos 44 px para o dedo */
@media (pointer: coarse) {
  [data-visual="estudio"] [data-aba-botoes], [data-visual="estudio"] [data-parar-botoes], [data-visual="estudio"] .painel-botoes [data-editar],
  [data-visual="estudio"] .painel-botoes .painel-cab .botao, [data-visual="estudio"] .canal-on, [data-visual="estudio"] .canal-cue,
  [data-visual="estudio"] .painel-mesa .canal button, [data-visual="estudio"] .topo summary { min-height: 46px; }
  [data-visual="estudio"] .topo summary { min-width: 46px; }
}
/* celular: os atalhos da barra de baixo dividem a largura (antes os últimos ficavam fora da tela) */
@media (max-width: 760px) {
  [data-visual="estudio"] .doca-atalhos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
  [data-visual="estudio"] .doca-atalhos .doca-item { width: auto; min-width: 0; }
  [data-visual="estudio"] .doca-atalhos .doca-item[hidden] { display: none; }
  [data-visual="estudio"] .doca-atalhos .doca-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (pointer: coarse) {
  [data-visual="estudio"] .topo summary, [data-visual="estudio"] [data-aba-botoes] { height: auto !important; min-height: 46px !important; }
}
@media (max-width: 760px) {
  [data-visual="estudio"] .doca { max-width: 100vw; box-sizing: border-box; }
  [data-visual="estudio"] .doca-transporte { flex: 0 0 100%; margin: 0; padding: 0; min-width: 0; }
  [data-visual="estudio"] .doca-transporte .transporte { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  [data-visual="estudio"] .doca-transporte .tr-botao { width: auto; min-width: 0; }
}
/* celular estreito: a barra de cima cabe inteira (fica a luz NO AR; retorno e online aparecem a partir de 521 px) */
@media (max-width: 520px) {
  [data-visual="estudio"] .topo { padding-left: 10px; padding-right: 10px; gap: 8px; }
  [data-visual="estudio"] .topo .luz-retorno, [data-visual="estudio"] .topo .luz-online { display: none !important; }
  [data-visual="estudio"] .sobre-sistema { margin-left: 0 !important; }
}

/* botoneira: botões quadrados, cantos quase retos (a barra de progresso e o "F1" acompanham) */
[data-visual="estudio"] .botoneira .botao-slot,
[data-visual="estudio"] .console-grade[data-direita="botoes"] .botao-slot { border-radius: 4px; overflow: hidden; }
[data-visual="estudio"] .botoneira .botao-slot.alvo { border-radius: 4px; }
/* botoneira: botão em loop (símbolo de repetir no canto) */
[data-visual="estudio"] .botao-slot .b-loop { position: absolute; right: 6px; top: 5px; display: grid; place-items: center; width: 22px; height: 18px;
  border-radius: 6px; background: rgba(0, 0, 0, .35); color: #fff; z-index: 2; }
[data-visual="estudio"] .botao-slot.claro .b-loop { background: rgba(255, 255, 255, .55); color: #111; }
[data-visual="estudio"] .botao-slot.em-loop .b-loop { animation: b-loop-gira 1.6s linear infinite; }
@keyframes b-loop-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-visual="estudio"] .botao-slot.em-loop .b-loop { animation: none; } }
/* Externas: com as linhas dos repórteres o mixer fica numa linha só e rola para o lado */
.mesa.com-linhas, [data-visual="estudio"] .painel-mesa .mesa.com-linhas {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); overflow-x: auto; overscroll-behavior-x: contain; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="externas"] { --cc: #E3262B; }
[data-visual="estudio"] .painel-mesa .canal[data-canal="externa"] { --cc: #1fae5b; }   /* WhatsApp */

/* menu da conta: nunca passa da tela nem fica atrás da barra de baixo. O meio rola; o cabeçalho e o rodapé
   (Trocar de locutor e Sair) ficam sempre à vista. Em telas largas, os itens vão em duas colunas. */
.menu-painel { display: flex; flex-direction: column; z-index: 80;
  max-height: calc(100vh - var(--topo-altura, 64px) - 24px);
  max-height: calc(100dvh - var(--topo-altura, 64px) - 24px); }
[data-visual="estudio"] body:has(> .doca) .menu-painel {
  max-height: calc(100vh - var(--topo-altura, 64px) - var(--doca-altura) - 24px - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - var(--topo-altura, 64px) - var(--doca-altura) - 24px - env(safe-area-inset-bottom, 0px)); }
.menu-cab { flex: none; }
.menu-rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.menu-pe { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--linha); }
[data-visual="estudio"] .menu-pe { border-top-color: #2c323a; }
.menu-pe button { justify-content: center; }
[data-visual="estudio"] .menu-pe button { justify-content: flex-start; }
[data-visual="estudio"] .menu-painel a, [data-visual="estudio"] .menu-painel button { min-height: 46px; padding: 5px 10px; }
[data-visual="estudio"] .menu-painel a svg, [data-visual="estudio"] .menu-painel button svg { width: 32px; height: 32px; padding: 7px; }
@media (min-width: 900px) and (max-height: 1100px) {
  [data-visual="estudio"] .menu-painel { width: 580px; }
  .menu-rolagem { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; align-content: start; }
  .menu-rolagem > .menu-sep { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .topo .usuario-menu .menu-painel { position: fixed; left: 8px; right: 8px; top: calc(var(--topo-altura, 64px) + 6px); min-width: 0; width: auto; }
}
[data-visual="estudio"] .menu-painel a[href*="/registro"] { --c: #5b6bd6; }
@media (max-width: 600px) { .menu-pe button { white-space: nowrap; font-size: .9rem !important; } }
/* música posta à mão pelo operador: só um "M" (manual) */
.log-extra.log-manual { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; padding: 0; border-radius: 5px;
  font-size: .7rem; font-weight: 800; letter-spacing: 0; text-transform: none; line-height: 1; vertical-align: 2px;
  color: #fff !important; background: var(--marca, #e0362c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ------------------------------------------------------------------ catálogo inteiro no formato do Tocou
   (músicas, vinhetas, aberturas, trilhas, comerciais, materiais, comandos e a busca): quadrado à esquerda
   (a pré-escuta, ou o ícone do comando) + placa com a faixa fina da cor, título, a linha de baixo, a duração e os
   botões. Tamanho normal: um pouco mais baixo que o Tocou, para caber mais áudio na tela. */
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) {
  position: relative; display: grid; grid-template-columns: 60px 20px minmax(0, 1fr) auto auto; grid-template-rows: auto;
  column-gap: 0; min-height: 60px; padding: 0; margin: 0 0 5px; border: 0; border-radius: 0; background: none;
  box-shadow: none; align-items: stretch;
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio)::before {
  content: ""; position: absolute; left: 66px; right: 0; top: 0; bottom: 0; z-index: 0; border-radius: 5px;
  background: linear-gradient(180deg, #20242b 0%, #181b20 100%); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio):hover { background: none; }
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio):hover::before { background: linear-gradient(180deg, #282d35 0%, #1d2127 100%); }
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) > * { position: relative; z-index: 1; }
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) > .icone-acao:first-of-type,
html[data-visual="estudio"] body .acervo-lista li.comando-item .comando-ico {
  grid-column: 1; grid-row: 1; width: 60px; height: auto; min-height: 60px; align-self: stretch; margin: 0; border-radius: 5px;
  display: grid; place-items: center;
}
html[data-visual="estudio"] body .acervo-lista li.comando-item .comando-ico {
  border: 1px solid #000; background: linear-gradient(180deg, #3a414c 0%, #262b33 55%, #1b1f25 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); color: var(--amarelo);
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) > .icone-acao:first-of-type svg { width: 24px; height: 24px; }
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .faixa-cor {
  position: static; grid-column: 2; grid-row: 1; justify-self: end; width: 4px; margin: 11px 0; border-radius: 3px; align-self: stretch;
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-txt {
  grid-column: 3; grid-row: 1; align-self: center; padding: 6px 10px 6px 12px; min-width: 0;
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-txt b {
  display: block; font-size: 1rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-txt span {
  display: block; font-size: .84rem; color: #c8ced7; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-dur {
  grid-column: 4; grid-row: 1; align-self: center; padding: 0 10px; color: #fff; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-acoes {
  grid-column: 5; grid-row: 1; align-self: center; display: flex; gap: 2px; padding-right: 8px;
}
html[data-visual="estudio"] body .acervo-lista li.comando-item .item-acoes { grid-column: 4 / 6; }
html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-acoes .icone-acao { width: 40px; height: 40px; }
html[data-visual="estudio"] body .acervo-lista li.inativo { opacity: .55; }
html[data-visual="estudio"] body .acervo-lista li.arrastando { opacity: .5; }
@media (max-width: 760px) {
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) {
    grid-template-columns: 52px 16px minmax(0, 1fr) auto; grid-template-rows: auto auto; min-height: 64px;
  }
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio)::before { left: 57px; }
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) > .icone-acao:first-of-type,
  html[data-visual="estudio"] body .acervo-lista li.comando-item .comando-ico { width: 52px; grid-row: 1 / 3; min-height: 64px; }
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .faixa-cor { grid-row: 1 / 3; }
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-txt { grid-column: 3 / 5; grid-row: 1; padding-bottom: 0; }
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-dur { grid-column: 3; grid-row: 2; padding-left: 12px; font-size: .9rem; }
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-acoes { grid-column: 4; grid-row: 2; }
  html[data-visual="estudio"] body .acervo-lista li.comando-item .item-acoes { grid-column: 4; grid-row: 1 / 3; }
  html[data-visual="estudio"] body .acervo-lista li:not(.tocou-item):not(.acervo-vazio) .item-acoes .icone-acao { width: 36px; height: 36px; }
}
html[data-visual="estudio"] body .acervo-lista li.comando-item .comando-ico svg { width: 26px; height: 26px; }
/* fim do break: a mesma faixa, fechando o bloco, com a hora em que ele termina */
[data-visual="estudio"] .log-linha.break-cab.break-fim { margin-top: 0; margin-bottom: 6px; --placa: linear-gradient(180deg, #3a2a08, #241a05); }
[data-visual="estudio"] .log-linha.break-fim .log-t2 { color: #e8b95a; }

/* bloco da grade no ar, discreto acima do nome da música */
[data-visual="estudio"] .est-nome small.est-bloco { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: #9fb0c8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-visual="estudio"] .est-nome small.est-bloco.passa { color: var(--amarelo); }
/* um pouco acima e afastado do nome da música (a música continua no centro, ao lado da contagem) */
[data-visual="estudio"] .est-nome small.est-bloco { margin: -10px 0 9px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  align-self: flex-start; max-width: 100%; }
@media (max-width: 760px) {
  [data-visual="estudio"] .est-nome small.est-bloco { margin: -4px 0 5px; padding-bottom: 4px; }
}

/* dados do ar acima da música (como no WinRadio): bloco, evento e playlist, com a barra do bloco */
.est-dados { display: none; }
[data-visual="estudio"] .est-dados:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px;
  margin: 0 0 12px; padding-bottom: 9px; position: relative; }
[data-visual="estudio"] .est-dado { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
[data-visual="estudio"] .est-dado[hidden] { display: none; }
[data-visual="estudio"] .est-dado i { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a96a8; }
[data-visual="estudio"] .est-dado b { font-size: 1.05rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.2; }
[data-visual="estudio"] .est-dado em { font-style: normal; font-size: .72rem; font-weight: 600; color: #9fb0c8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-visual="estudio"] .est-dado.passa b, [data-visual="estudio"] .est-dado.passa em { color: var(--amarelo); }
[data-visual="estudio"] .est-dado.falta b, [data-visual="estudio"] .est-dado.falta em { color: #ff8a80; }
[data-visual="estudio"] .est-dado-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
[data-visual="estudio"] .est-dado-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f7de1, #5aa2ff); transition: width 1s linear; }
@media (max-width: 760px) {
  [data-visual="estudio"] .est-dados:not([hidden]) { gap: 2px 8px; margin: -2px 0 6px; padding-bottom: 5px; }
  [data-visual="estudio"] .est-dado b { font-size: .82rem; }
  [data-visual="estudio"] .est-dado em { display: none; }
}
/* com os dados do ar, o nome ocupa a largura toda: Bloco, Evento e Playlist ficam distribuídos por igual */
[data-visual="estudio"] .est-musica:has(.est-dados:not([hidden])) { align-self: stretch; }
[data-visual="estudio"] .est-nome:has(.est-dados:not([hidden])) { flex: 1; justify-content: center; padding-right: 6px; }

/* a próxima a tocar: em azul, logo abaixo do cartão do ar (a do ar fica só no cartão de cima) */
[data-visual="estudio"] .log-linha.seguinte, [data-visual="estudio"] .log-linha.seguinte.com-cor:not(.atual):not(.break-cab) {
  --placa: linear-gradient(180deg, #62b4ff 0%, #2c80ea 50%, #1a5fc4 100%); --borda: #bfe0ff; }
[data-visual="estudio"] .log-linha.seguinte .log-cod, [data-visual="estudio"] .log-linha.seguinte .log-hora,
[data-visual="estudio"] .log-linha.seguinte .log-t2, [data-visual="estudio"] .log-linha.seguinte .log-a2,
[data-visual="estudio"] .log-linha.seguinte .log-dur, [data-visual="estudio"] .log-linha.seguinte.com-cor.claro:not(.atual) .log-t2,
[data-visual="estudio"] .log-linha.seguinte.com-cor.claro:not(.atual) .log-a2, [data-visual="estudio"] .log-linha.seguinte.com-cor.claro:not(.atual) .log-dur,
[data-visual="estudio"] .log-linha.seguinte.com-cor.claro:not(.atual) .log-hora, [data-visual="estudio"] .log-linha.seguinte.com-cor.claro:not(.atual) .log-cod { color: #fff; }
[data-visual="estudio"] .canal-master { background: linear-gradient(180deg, #4a3a10, #2a2008); border-color: #000; }
[data-visual="estudio"] .canal-master .canal-on.canal-master-rotulo { background: linear-gradient(#f5c63a, #c99500); border-color: #8a6600; color: #1d1600; }
/* com o Master (admin) e/ou a Botoneira 2 (motor novo): os canais ficam numa linha só */
.mesa.com-master, [data-visual="estudio"] .painel-mesa .mesa.com-master,
.mesa.com-b2, [data-visual="estudio"] .painel-mesa .mesa.com-b2 {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 1100px) {
  .mesa.com-master, [data-visual="estudio"] .painel-mesa .mesa.com-master,
  .mesa.com-b2, [data-visual="estudio"] .painel-mesa .mesa.com-b2 { grid-auto-columns: 108px; overflow-x: auto; overscroll-behavior-x: contain; }
}

/* ---------------------------------------------------------------- disposições da tela do ar (computador)
   "botoes-cima": playlist | (12 botões em cima, catálogo embaixo). "tres-colunas": playlist | catálogo | 12 botões.
   O mixer continua na doca: com ele aberto, ocupa o lugar dos botões. */
@media (min-width: 1101px) {
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"],
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] { grid-template-rows: minmax(0, 1fr); }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] > .abas-lateral,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] > .abas-lateral { display: flex !important; flex-direction: column; min-height: 0; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] > .coluna-dir,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] > .coluna-dir { display: flex !important; flex-direction: column; min-height: 0; overflow: hidden; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"]:not([data-direita="mesa"]) .painel-mesa,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"]:not([data-direita="mesa"]) .painel-mesa { display: none; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"]:not([data-direita="mesa"]) .coluna-dir > .painel-botoes,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"]:not([data-direita="mesa"]) .coluna-dir > .painel-botoes { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .coluna-dir > .painel-mesa,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] .coluna-dir > .painel-mesa { flex: 1 1 auto; min-height: 0; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .painel-botoes .painel-corpo,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] .painel-botoes .painel-corpo { flex: 1; min-height: 0; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .botoneira,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] .botoneira { height: 100%; grid-auto-rows: minmax(0, 1fr); gap: 6px; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .botao-slot,
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] .botao-slot { min-height: 0; align-items: center; justify-content: center; text-align: center; padding: 6px 5px; }

  /* botões em cima (12 em 2 fileiras de 6) e o catálogo embaixo, com as pastas mais estreitas */
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] { grid-template-columns: minmax(470px, .72fr) minmax(0, 1fr); grid-template-rows: 40% minmax(0, 1fr); }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] > .painel-noar { grid-column: 1; grid-row: 1 / 3; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] > .coluna-dir { grid-column: 2; grid-row: 1; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] > .abas-lateral { grid-column: 2; grid-row: 2; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .botoneira { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .painel-acervo .cat-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .painel-acervo .cat-ico { min-height: 0; padding-top: 5px; padding-bottom: 5px; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .painel-acervo .cat-ico i { width: 34px; height: 32px; border-radius: 8px; }
  [data-visual="estudio"] .console-grade[data-disposicao="botoes-cima"] .painel-acervo .cat-ico i svg { width: 17px; height: 17px; }

  /* três colunas do mesmo tamanho: playlist | catálogo | 12 botões em 3 colunas de 4 */
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] > .painel-noar { grid-column: 1; grid-row: 1; }
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] > .abas-lateral { grid-column: 2; grid-row: 1; }
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] > .coluna-dir { grid-column: 3; grid-row: 1; }
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] .botoneira { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] .painel-acervo .cat-grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  /* o mixer aberto na coluna estreita: rola para o lado */
  [data-visual="estudio"] .console-grade[data-disposicao="tres-colunas"] .painel-mesa .mesa { grid-auto-columns: 96px; overflow-x: auto; }
}
/* menu da conta: escolha da disposição */
.menu-disposicao { padding: 6px 10px 8px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.menu-disposicao .menu-rot { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 6px; }
.menu-disp-opcoes { display: flex; gap: 4px; }
.menu-painel .menu-disp-opcoes button { flex: 1; justify-content: center; text-align: center; padding: 7px 4px; font-size: .78rem; border: 1px solid var(--linha); }
.menu-painel .menu-disp-opcoes button[aria-pressed="true"] { background: #1b5fc0; border-color: #4aa0ff; color: #fff; }

/* ---------------------------------------------------------------- janela das duas botoneiras (segundo monitor) */
body.so-botoneiras { margin: 0; background: #07080a; overflow: hidden; }
body.so-botoneiras .doca, body.so-botoneiras .rodape, body.so-botoneiras .faixa-atualizacao { display: none !important; }
.botoneiras-duplas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: 100vh; height: 100dvh;
  padding: 10px; box-sizing: border-box; max-width: none; margin: 0; }
.botoneiras-duplas .bd-painel { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.botoneiras-duplas .bd-painel .painel-cab { flex-wrap: nowrap; gap: 8px; }
.botoneiras-duplas .bd-painel .painel-cab h2 { white-space: nowrap; }
.botoneiras-duplas .bd-painel .painel-cab-acoes { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.botoneiras-duplas .painel-corpo { flex: 1; min-height: 0; padding: 8px; background: #050607; }
.botoneiras-duplas .botoneira { display: grid; height: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; }   /* 4 x 4 */
.botoneiras-duplas .botao-slot { min-height: 0; align-items: center; justify-content: center; text-align: center; padding: 8px 6px; }
[data-visual="estudio"] .botoneiras-duplas .botao-slot .b-nome, .botoneiras-duplas .botao-slot .b-nome { font-size: clamp(1rem, 1.7vw, 1.9rem); }
.botoneiras-duplas .botao-slot .b-rodape { justify-content: center; gap: 8px; font-size: clamp(.8rem, 1vw, 1.1rem); }
.botoneiras-duplas [data-bd-aviso] { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; }
@media (max-width: 900px) { .botoneiras-duplas { grid-template-columns: minmax(0, 1fr); height: auto; overflow: auto; } body.so-botoneiras { overflow: auto; } }
.menu-rolagem > .menu-disposicao { grid-column: 1 / -1; }
.menu-rolagem > [data-abrir-botoneiras] { grid-column: 1 / -1; }
.menu-painel .menu-disposicao .menu-disp-padrao { margin-top: 6px; justify-content: center; font-size: .78rem; padding: 6px; border: 1px dashed var(--linha); color: var(--tinta-2); }
/* janela das botoneiras com o Mixer embaixo */
.botoneiras-duplas .bd-mixer { display: none; }
.botoneiras-duplas.com-mixer { grid-template-rows: minmax(0, 56fr) minmax(0, 44fr); }
.botoneiras-duplas.com-mixer .bd-mixer { display: block; grid-column: 1 / -1; min-height: 0; }
.botoneiras-duplas .bd-mixer iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; border-radius: 10px; }
.botoneiras-duplas.com-mixer .botoneira { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.botoneiras-duplas [data-bd-mixer][aria-pressed="true"] { background: #1b5fc0; border-color: #4aa0ff; color: #fff; }
/* o player só com o Mixer (dentro da janela das botoneiras) */
body.so-mesa { overflow: hidden; background: #07080a; }
body.so-mesa .topo, body.so-mesa .faixa-atualizacao, body.so-mesa .rodape, body.so-mesa .doca, body.so-mesa .console-cab,
body.so-mesa .console-abas, body.so-mesa [data-erro], body.so-mesa .console-grade > .painel-noar,
body.so-mesa .console-grade > .abas-lateral, body.so-mesa .coluna-dir > .painel-botoes { display: none !important; }
body.so-mesa .main-console, body.so-mesa main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
[data-visual="estudio"] body.so-mesa .console-grade, body.so-mesa .console-grade { display: block !important; height: 100vh !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
body.so-mesa .console-grade > .coluna-dir { display: flex !important; flex-direction: column; height: 100%; overflow: hidden; }
body.so-mesa .coluna-dir > .painel-mesa { display: flex !important; flex: 1 1 auto; min-height: 0; margin: 0; }
body.so-mesa .painel-mesa .mesa { flex: 1; min-height: 0; }
body.so-mesa .painel-mesa .canal-corpo { height: auto; flex: 1; min-height: 0; }
/* o Mixer sozinho nunca mostra o catálogo nem os botões, qualquer que seja a disposição do player */
html[data-visual] body.so-mesa .console-grade[data-disposicao] > .abas-lateral,
html[data-visual] body.so-mesa .console-grade[data-disposicao] > .painel-noar,
html[data-visual] body.so-mesa .console-grade[data-disposicao] .coluna-dir > .painel-botoes { display: none !important; }
html[data-visual] body.so-mesa .console-grade[data-disposicao] .coluna-dir > .painel-mesa { display: flex !important; }
html[data-visual] body.so-mesa .console-grade[data-disposicao] > .coluna-dir { display: flex !important; grid-column: auto; grid-row: auto; }
/* partes sozinhas embaixo das duas botoneiras: o Catálogo ou o Tocou (o Mixer usa as regras de .so-mesa acima) */
body.so-parte { overflow: hidden; background: #07080a; }
body.so-parte .topo, body.so-parte .faixa-atualizacao, body.so-parte .rodape, body.so-parte .doca, body.so-parte .console-cab,
body.so-parte .console-abas, body.so-parte [data-erro] { display: none !important; }
body.so-parte .main-console, body.so-parte main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
html[data-visual] body.so-parte .console-grade, body.so-parte .console-grade { display: block !important; height: 100vh !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
html[data-visual] body.so-acervo .console-grade[data-disposicao] > .painel-noar, html[data-visual] body.so-acervo .console-grade[data-disposicao] > .coluna-dir,
html[data-visual] body.so-tocou .console-grade[data-disposicao] > .painel-noar, html[data-visual] body.so-tocou .console-grade[data-disposicao] > .coluna-dir { display: none !important; }
html[data-visual] body.so-acervo .console-grade[data-disposicao] > .abas-lateral,
html[data-visual] body.so-tocou .console-grade[data-disposicao] > .abas-lateral { display: flex !important; flex-direction: column; height: 100%; min-height: 0; }
html[data-visual] body.so-acervo .painel-acervo .cat-grade { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* escolha do que vai embaixo das botoneiras */
.botoneiras-duplas .bd-baixo { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--tinta-2, #9aa3ae); white-space: nowrap; }
.botoneiras-duplas .bd-baixo select { background: #14171c; color: #f2f2f4; border: 1px solid #3a414c; border-radius: 6px; padding: 5px 8px; font: inherit; font-size: .82rem; }
.botoneiras-duplas .botao-slot.vazio { font-size: .72rem; color: #5b6470; }
.botoneiras-duplas .botao-slot.alvo { outline: 3px solid #f5c63a; outline-offset: -3px; }
[data-visual="estudio"] .botoneiras-duplas .botao-slot .b-nome, .botoneiras-duplas .botao-slot .b-nome { font-size: clamp(.8rem, 1.15vw, 1.35rem); }
.botoneiras-duplas.com-mixer .botao-slot .b-rodape { display: none; }
/* modo Editar da segunda tela: o X tira o áudio do botão */
.botoneiras-duplas [data-bd-editar][aria-pressed="true"] { background: #f5c63a; border-color: #f5c63a; color: #111; font-weight: 700; }
.botoneiras-duplas .bd-editando .painel-corpo { box-shadow: inset 0 0 0 2px #f5c63a; border-radius: 0 0 10px 10px; }
.botoneiras-duplas .botao-slot.editando { position: relative; cursor: pointer; animation: bd-treme 1.2s ease-in-out infinite; }
.botoneiras-duplas .botao-slot.editando .b-enche, .botoneiras-duplas .botao-slot.editando .b-tecla { display: none; }
.botoneiras-duplas .botao-slot .b-tirar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: #e0362c; color: #fff; font: 700 15px/1 system-ui, sans-serif;
  box-shadow: 0 0 0 2px #000, 0 2px 6px #000; }
.botoneiras-duplas .botao-slot.editando:hover { filter: brightness(.8); }
@keyframes bd-treme { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-.6deg); } 75% { transform: rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .botoneiras-duplas .botao-slot.editando { animation: none; } }
/* Mixer embaixo das botoneiras (segunda tela): mais compacto para caber inteiro, com fader alto e CUE/ON à vista */
.botoneiras-duplas.com-mixer { grid-template-rows: minmax(0, 52fr) minmax(0, 48fr); }
body.so-mesa .painel-mesa > .painel-cab { min-height: 0; padding: 4px 12px; }
body.so-mesa .painel-mesa > .painel-cab h2 { font-size: .72rem; }
[data-visual="estudio"] body.so-mesa .painel-mesa .mesa { padding: 6px 8px 8px; gap: 6px; column-gap: 8px; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal { grid-template-rows: auto auto minmax(50px, 1fr) auto auto auto; gap: 5px; padding: 8px 6px 6px; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal-nome { flex-direction: row; justify-content: center; gap: 6px; font-size: .7rem; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal-nome span { width: 26px; height: 24px; border-radius: 7px; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal-nome span svg { width: 14px; height: 14px; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal-estado { padding: 2px 8px; font-size: .62rem; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal-corpo { padding: 4px; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal-db { padding-top: 3px; padding-bottom: 3px; font-size: .78rem; }
[data-visual="estudio"] body.so-mesa .painel-mesa .canal-cue, [data-visual="estudio"] body.so-mesa .painel-mesa .canal-on { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
/* tela menor (ex.: 1366): o cabeçalho da Botoneira 1 encolhe para os nomes Minha / Da rádio caberem */
.botoneiras-duplas [data-bd-tela-cheia] .bd-ico { display: none; font-size: 1.05rem; line-height: 1; }
@media (max-width: 1500px) {
  .botoneiras-duplas .bd-baixo .bd-rot, .botoneiras-duplas [data-bd-tela-cheia] .bd-rot { display: none; }
  .botoneiras-duplas [data-bd-tela-cheia] .bd-ico { display: inline; }
  .botoneiras-duplas .bd-painel .painel-cab { gap: 6px; }
  .botoneiras-duplas .bd-painel .painel-cab-acoes { gap: 4px; }
  .botoneiras-duplas .bd-baixo select { padding: 5px 4px; }
}
.botoneiras-duplas .bd-sem-permissao { margin: 24px; color: #9aa4b2; text-align: center; }
/* canal Rede (sinal da rádio cabeça de rede) */
[data-visual="estudio"] .painel-mesa .canal[data-canal="rede"] { --cc: #8e5cf0; }

/* ------------------------------------------------------------------ luz ESTÚDIO / NUVEM (no lugar da luz Retorno)
   Só com o estúdio híbrido em "PC no ar". Sem plaquinha, como NO AR e ONLINE: bolinha e texto soltos, com o risquinho antes.
   Roxo "Estúdio" com o PC do estúdio no ar (verde é do ONLINE); âmbar "Nuvem" quando a nuvem assume. */
.luz-estudio { display: none; }
html[data-visual="estudio"] body .topo nav .luz-estudio {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 18px; border: 0; border-left: 1px solid #2c323a; border-radius: 0;
  background: none; box-shadow: none; text-shadow: none; color: #7e8896; cursor: default;
  font: inherit; font-size: .86rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
html[data-visual="estudio"] body .topo nav .luz-estudio[hidden] { display: none; }
html[data-visual="estudio"] body .topo nav .luz-estudio .luz { width: 14px; height: 14px; border-radius: 50%; background: #4a515c; flex: none; }
html[data-visual="estudio"] body .topo nav .luz-estudio[data-estado="pc"] { color: #b48cff; }
html[data-visual="estudio"] body .topo nav .luz-estudio[data-estado="pc"] .luz { background: #b48cff; box-shadow: 0 0 10px 3px rgba(180, 140, 255, .65); }
html[data-visual="estudio"] body .topo nav .luz-estudio[data-estado="nuvem"] { color: #ffb52e; }
html[data-visual="estudio"] body .topo nav .luz-estudio[data-estado="nuvem"] .luz { background: #ffb52e; box-shadow: 0 0 10px 3px rgba(255, 181, 46, .65); }
@media (max-width: 760px) { html[data-visual="estudio"] body .topo nav .luz-estudio { padding: 0 9px; letter-spacing: .08em; font-size: .72rem; gap: 6px; } }
@media (max-width: 520px) { html[data-visual="estudio"] body .topo nav .luz-estudio { display: none !important; } }

/* Letreiro do nome no topo: uma linha; se não cabe, desliza até o fim e volta (pausa de ~20% em cada ponta) */
[data-visual="estudio"] .est-nome b[data-est-titulo] { display: block; white-space: nowrap; overflow: hidden; -webkit-line-clamp: unset; }
/* o span do letreiro herda o título (a regra ".est-nome span" é a do artista: menor e cinza) */
[data-visual="estudio"] .est-nome b[data-est-titulo] > span { display: inline-block; will-change: transform; font-size: inherit; color: inherit;
  font-weight: inherit; white-space: nowrap; overflow: visible; text-overflow: clip; }
[data-visual="estudio"] .est-nome b[data-est-titulo].rola > span { animation: est-letreiro var(--dur, 10s) ease-in-out infinite alternate; }
@keyframes est-letreiro { 0%, 20% { transform: translateX(0); } 80%, 100% { transform: translateX(var(--desloca, 0)); } }
/* o letreiro rola mesmo com "reduzir animações" ligado no Windows/navegador (pedido do dono: o nome inteiro tem que
   aparecer na tela do ar); é lento e com pausa nas pontas */

/* botões do card da faixa: Loop e Parar depois desta */
[data-visual="estudio"] .est-marcas { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
[data-visual="estudio"] .est-marca-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 8px;
  font: 700 .82rem/1 inherit; letter-spacing: .02em; text-transform: uppercase; color: #c8ced7; cursor: pointer;
  background: linear-gradient(#2c323a, #1a1d22); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
[data-visual="estudio"] .est-marca-btn:hover { color: #fff; }
[data-visual="estudio"] .est-marca-btn.ligado[data-marca-atual="loop"] { color: #062a12; background: linear-gradient(#5ff08f, #23b356); }
[data-visual="estudio"] .est-marca-btn.ligado[data-marca-atual="parar_apos"] { color: #2a1600; background: linear-gradient(#ffc56a, #f08a1c); }
[data-visual="estudio"] .est-nome small.est-marca { font-weight: 800; letter-spacing: .03em; }
[data-visual="estudio"] .est-nome small.est-marca.marca-loop { color: #5ff08f; }
[data-visual="estudio"] .est-nome small.est-marca.marca-parar_apos { color: #ffb347; }
[data-visual="estudio"] .log-linha .log-acoes .icone-acao.marca-btn.ligado { color: #111; background: linear-gradient(#ffe08a, #f2b31d); }
.log-marca { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 5px; font: 800 .68rem/1.5 inherit; font-style: normal;
  letter-spacing: .04em; vertical-align: middle; color: #062a12; background: #5ff08f; }
.log-marca.marca-parar_apos { color: #2a1600; background: #ffb347; }
.log-linha.nao-conta .log-hora { opacity: .45; font-style: italic; }
@media (max-width: 760px) {
  [data-visual="estudio"] .est-marca-btn span { display: none; }
  [data-visual="estudio"] .est-marca-btn { padding: 0 9px; }
}
[data-visual="estudio"] .est-nome .est-marca-btn span { font-size: .78rem; color: inherit; overflow: visible; white-space: nowrap; }
[data-visual="estudio"] .est-marca-ativa { align-self: flex-start; margin-top: 3px; padding: 3px 9px; border-radius: 6px; border: 0; cursor: pointer;
  font: 800 .72rem/1.4 inherit; letter-spacing: .04em; color: #062a12; background: #5ff08f; }
[data-visual="estudio"] .est-marca-ativa.marca-parar_apos { color: #2a1600; background: #ffb347; }