/* Marca RD-CLOUD no painel.
   - Logo RD-CLOUD em todas as telas.
   - Preto e vermelho só nas páginas do menu (Biblioteca, Configurações, O que tocou...) e no login.
   - A tela do ar (o player, html[data-visual="estudio"]) fica com as cores de sempre: nada aqui muda as cores dela. */

/* ------------------------------------------------------------------ logo (todas as telas) */
.marca-rdcloud { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.marca-rdcloud .marca-logo { display: block; height: 24px; width: auto; }
.marca-rdcloud:hover .marca-logo { filter: brightness(1.1); }
.botao-tema { display: none !important; }
@media (max-width: 640px) {
  .marca-rdcloud .marca-logo { height: 20px; }
  .marca-rdcloud .selo-beta { display: none; }
}

/* ------------------------------------------------------------------ cores: só fora da tela do ar */
html:root:not([data-visual="estudio"]) {
  color-scheme: dark;
  --fundo: #0D0D0F;
  --superficie: #1B1B1F;
  --painel: #151518;
  --tinta: #F2F2F4;
  --tinta-2: #A9A9B2;
  --tinta-3: #77777F;
  --linha: #26262B;
  --linha-forte: #36363D;
  --vazio: #202025;
  --ok: #34C77B;
  --alerta: #F0A92E;
  --erro: #FF5A55;
  --no-ar: #FF3B30;
  --marca: #E3262B;
  --marca-graf: #E3262B;
  --sobre-marca: #FFFFFF;
  --acento: #E3262B;
  --acento-forte: #C81E23;
}
html:not([data-visual="estudio"]) body { background: var(--fundo); }
html:not([data-visual="estudio"]) :focus-visible { outline-color: var(--acento); }
html:not([data-visual="estudio"]) .topo { background: #0D0D0F; border-bottom: 1px solid #1F1F24; }
html:not([data-visual="estudio"]) .selo-beta { color: #9A9AA3; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
html:not([data-visual="estudio"]) .usuario-menu summary { background: #151518; border-color: #26262B; }
html:not([data-visual="estudio"]) .menu-painel { background: #151518; border-color: #26262B; }
html:not([data-visual="estudio"]) .avatar { background: #26262B; }

/* botões e campos */
html:not([data-visual="estudio"]) .botao.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
html:not([data-visual="estudio"]) .botao.primario:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
html:not([data-visual="estudio"]) .campo input:focus, html:not([data-visual="estudio"]) .campo select:focus,
html:not([data-visual="estudio"]) .campo textarea:focus, html:not([data-visual="estudio"]) .busca input:focus {
  border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
html:not([data-visual="estudio"]) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--acento); }
html:not([data-visual="estudio"]) :is(.abas-admin a[aria-current="page"], .segmentos button[aria-pressed="true"]) { border-bottom-color: var(--acento); }
html:not([data-visual="estudio"]) :where(main) :where(p, td, li, dd, .nota, .aviso, .ajuda) > a:where(:not([class])) { color: #FF5A5F; }

/* rodapé: RDCLOUD, a empresa dona do sistema */
html:not([data-visual="estudio"]) .rodape { color: var(--tinta-3); border-top-color: #1F1F24; text-align: left; max-width: var(--largura, 1240px); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
html:not([data-visual="estudio"]) .rodape b { color: var(--tinta-2); }

/* entrar */
.entrar { background: var(--fundo); }
.entrar .caixa { background: #151518; border-color: #26262B; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .85); }
.entrar-marca .marca-logo { height: 38px; width: auto; }
.entrar h1 { display: grid; gap: 2px; }
.entrar h1 small { font-size: .85rem; font-weight: 400; color: var(--tinta-2); }
.entrar-rodape { margin: 4px 0 0; text-align: center; font-size: .78rem; color: var(--tinta-3); }
.entrar-rodape b { color: var(--tinta-2); }

/* ------------------------------------------------------------------ topo: logo da emissora (ajustado em tema.js) */
.logo-emissora { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; flex: none; margin-left: 16px; }
.logo-placa { display: inline-flex; align-items: center; justify-content: center; height: 58px; max-width: 260px; opacity: 0; transition: opacity .2s; }
.logo-placa.pronto { opacity: 1; }
.logo-placa img { display: block; max-height: 54px; max-width: 260px; width: auto; height: auto; object-fit: contain; }
.logo-placa.quadrado img { max-height: 58px; }
/* desenho escuro: contorno claro bem leve para aparecer no topo preto (sem caixa) */
.logo-placa.desenho-escuro img { filter: drop-shadow(0 0 .6px rgba(255, 255, 255, .95)) drop-shadow(0 0 .6px rgba(255, 255, 255, .95)); }
.logo-nome { font-family: "Marca", var(--fonte, sans-serif); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: #fff;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-emissora:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 10px; }

/* ------------------------------------------------------------------ topo: ouvintes agora (entre a temperatura e o NO AR) */
.th-ouvintes { display: none; }
[data-visual="estudio"] .th-ouvintes { display: flex; align-items: center; gap: 7px; padding-left: 20px; border-left: 1px solid #2c323a; }
[data-visual="estudio"] .th-ouvintes[hidden] { display: none; }
[data-visual="estudio"] .th-ouvintes i { display: grid; color: #8fc4ff; }   /* mesmo estilo do ícone da temperatura */
[data-visual="estudio"] .th-ouvintes > span { display: flex; flex-direction: column; line-height: 1.05; }
[data-visual="estudio"] .th-ouvintes b { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
[data-visual="estudio"] .th-ouvintes small { font-size: .72rem; color: var(--amarelo); margin-top: 2px; white-space: nowrap; }
@media (max-width: 1200px) { [data-visual="estudio"] .th-ouvintes small { display: none; } }
@media (max-width: 1100px) { [data-visual="estudio"] .th-ouvintes { padding-left: 12px; } }

/* ------------------------------------------------------------------ topo: a nuvem do RD-CLOUD e o cartão "Sobre o sistema" */
.sobre-sistema { position: relative; flex: none; margin-left: 8px; }
.sobre-sistema > summary {
  list-style: none; display: grid; place-items: center; width: 44px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid #26262B; background: #151518;
}
.sobre-sistema > summary::-webkit-details-marker { display: none; }
.sobre-sistema > summary img { display: block; width: 28px; height: auto; transition: transform .15s; }
.sobre-sistema > summary:hover img { transform: scale(1.08); }
.sobre-sistema[open] > summary { border-color: #E3262B; box-shadow: 0 0 0 3px rgba(227, 38, 43, .25); }
.sobre-sistema > summary:focus-visible { outline: 2px solid #E3262B; outline-offset: 2px; }
[data-visual="estudio"] .sobre-sistema > summary { min-height: 46px; width: 50px; background: linear-gradient(#2a2f37, #1c2026); box-shadow: var(--brilho); border-color: #000; }
[data-visual="estudio"] .sobre-sistema[open] > summary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 2px #0b0c0f, 0 0 0 4px #E3262B; }
.sobre-cartao {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 320px; padding: 20px; display: grid; gap: 12px;
  background: #121215; color: #F2F2F4; border: 1px solid #26262B; border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9);
  font-size: .9rem; text-align: left;
}
.sobre-logo { display: block; height: 30px; width: auto; }
.sobre-texto { margin: 0; color: #A9A9B2; line-height: 1.5; }
.sobre-versao { margin: -4px 0 0; color: #77777F; font-size: .78rem; }
.sobre-empresa { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #19191D; border: 1px solid #26262B; }
.sobre-empresa img { flex: none; border-radius: 9px; }
.sobre-empresa div { display: grid; line-height: 1.2; }
.sobre-empresa small { color: #77777F; font-size: .74rem; }
.sobre-empresa b { font-family: "Marca", var(--fonte, sans-serif); font-weight: 400; font-size: 1.2rem; letter-spacing: -.01em; color: #fff; }
.sobre-empresa b strong { font-weight: 800; }
.sobre-titulo { margin: 4px 0 -4px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #77777F; }
.sobre-canais { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sobre-canais a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #F2F2F4; }
.sobre-canais a:hover { background: #1D1D21; }
.sobre-canais svg { flex: none; color: #E3262B; }
.sobre-canais span { display: grid; min-width: 0; line-height: 1.25; }
.sobre-canais b { font-weight: 600; font-size: .88rem; }
.sobre-canais small { color: #A9A9B2; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .sobre-cartao { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .logo-placa, .logo-placa img { max-width: 150px; }
  .logo-placa img { max-height: 38px; }
  .logo-emissora { margin-left: 6px; }
}
/* a regra antiga do topo (.topo .portal img { height: 28px }) não vale para o logo da rádio */
.topo .portal.logo-emissora .logo-placa img { height: auto; }
/* ouvintes agora: mesmo tamanho da temperatura (número, ícone e legenda) */
[data-visual="estudio"] .th-ouvintes b { font-size: 1.6rem; }
[data-visual="estudio"] .th-ouvintes small { font-size: .82rem; }
[data-visual="estudio"] .th-ouvintes i svg { width: 28px; height: 28px; }