/* KingCast Rádio: o que o painel de rádio acrescenta por cima do app.css do KingCast de vídeo.
   Regra: tokens e componentes continuam os do app.css; aqui só o que é da rádio ou ajuste do layout em Go. */

/* marca: "KingCast Rádio" (o produto em peso normal, ao lado do nome) */
.marca-prod{font-weight:500;font-size:.72em;color:var(--verde);letter-spacing:0;margin-left:2px;vertical-align:1px}
.kl-logo .marca-prod{color:#4ade80}

/* botão Sair dentro de um <form> (no PHP era um link com o token na URL) */
.form-sair{display:inline-flex;margin:0}

/* estado da rádio em cartões (Dashboard do admin e No ar do cliente) */
.rd-estado{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rd-ponto{width:10px;height:10px;border-radius:50%;background:var(--mut3);flex:none}
.rd-ponto.ok{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.rd-ponto.amb{background:#f59e0b}
.rd-ponto.erro{background:#ef4444}
.rd-tocando{display:flex;flex-direction:column;gap:2px;min-width:0}
.rd-tocando b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-tocando small{color:var(--mut);font-size:13px}
.rd-cmd{display:flex;gap:8px;flex-wrap:wrap}
.rd-lista{display:flex;flex-direction:column;gap:10px}
.rd-item{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--borda);border-radius:10px;background:#fff}
.rd-item .nome{display:flex;flex-direction:column;min-width:0}
.rd-item .nome b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-item .nome small{color:var(--mut);font-size:12.5px}
.rd-item .dado{display:flex;flex-direction:column;font-size:13.5px}
.rd-item .dado span{color:var(--mut);font-size:12px}
.rd-item .dado b{font-family:var(--mono);font-weight:500}
@media (max-width:860px){.rd-item{grid-template-columns:1fr 1fr}}

/* perfil: códigos de recuperação em grade (o resto do .totp-* vem do app.css) */
.totp-codigos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0}
.totp-codigos span{font-family:var(--mono);font-size:15px;letter-spacing:.06em;background:var(--suave);border:1px solid var(--borda);border-radius:8px;padding:8px 10px;text-align:center}

/* tabela de atividades */
.atv-tabela td{font-size:14px}
.atv-tabela .mono{font-size:12.5px}
.atv-detalhe{color:var(--mut);font-size:12.5px;display:block;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tema escuro (fase 0: tokens; as telas ganham o ajuste fino quando o KS também receber) */
html[data-tema="escuro"]{color-scheme:dark}
html[data-tema="escuro"]{
  --bg:#0d1210; --card:#141b18; --borda:#22302a; --borda2:#2c3b33; --suave:#17201c; --suave2:#1c2621;
  --txt:#e5ece8; --txt2:#cbd5cf; --txt3:#b3bfb8; --mut:#94a39b; --mut2:#8a9890; --mut3:#6b7a72;
  --verde:#22c55e; --verde-esc:#4ade80; --verde-cl:#0f2a1b; --verde-bd:#1f5a36;
  --amb:#fbbf24; --amb-cl:#2a1f05; --amb-bd:#5a4310;
  --verm:#f87171; --verm-cl:#2a0f0f; --verm-bd:#5a1f1f;
  --roxo:#a78bfa; --roxo-cl:#1c1530; --roxo-bd:#3b2a6b;
}
html[data-tema="escuro"] .sidebar,html[data-tema="escuro"] .topbar,html[data-tema="escuro"] .adm-topo,html[data-tema="escuro"] .btn,html[data-tema="escuro"] .inp,html[data-tema="escuro"] select.inp,html[data-tema="escuro"] textarea.inp,html[data-tema="escuro"] .rd-item,html[data-tema="escuro"] .totp-qr{background:var(--card);color:var(--txt)}