/* HotCast — painel. Layout inspirado no AzuraCast (barra no topo, menu lateral,
   cartões com cabeçalho), com desenho próprio. Tema claro e escuro. */

:root, [data-tema="claro"] {
  --fundo: #eef1f6;
  --superficie: #ffffff;
  --superficie-2: #f6f8fb;
  --borda: #dde2ea;
  --texto: #1f2733;
  --apagado: #6b7585;
  --topo: #1e2a3d;
  --topo-texto: #ffffff;
  --lateral: #ffffff;
  --lateral-ativo: #e6effd;
  --primaria: #2f6fde;
  --primaria-texto: #ffffff;
  --cabecalho-card: #2f6fde;
  --cabecalho-card-texto: #ffffff;
  --sucesso: #1a9b52;
  --perigo: #d23b3b;
  --aviso: #d98a00;
  --grafico-1: #2f6fde;
  --grafico-2: #d98a00;
  --grafico-3: #1a9b52;
  --sombra: 0 1px 3px rgba(20, 30, 50, .08);
  color-scheme: light;
}

[data-tema="escuro"] {
  --fundo: #0f141d;
  --superficie: #182130;
  --superficie-2: #1d2839;
  --borda: #2a3649;
  --texto: #e3e8f0;
  --apagado: #93a0b4;
  --topo: #0a0e15;
  --topo-texto: #e3e8f0;
  --lateral: #141b27;
  --lateral-ativo: #22314a;
  --primaria: #4f8dfb;
  --primaria-texto: #ffffff;
  --cabecalho-card: #22314a;
  --cabecalho-card-texto: #e3e8f0;
  --sucesso: #2fbf6c;
  --perigo: #ff5f5f;
  --aviso: #f0a830;
  --grafico-1: #4f8dfb;
  --grafico-2: #f0a830;
  --grafico-3: #2fbf6c;
  --sombra: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background: var(--fundo);
  color: var(--texto);
}
a { color: var(--primaria); }
code { background: var(--superficie-2); border: 1px solid var(--borda); padding: 0 5px; border-radius: 4px; font-size: 12px; }
h3 { font-size: 13px; margin: 16px 0 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.miudo { color: var(--apagado); font-size: 12px; }
.ajuda { color: var(--apagado); font-size: 12px; margin: 4px 0 0; }
.espaco { flex: 1; }
.vazio { color: var(--apagado); font-style: italic; }
.subtitulo { color: var(--apagado); margin: -8px 0 16px; }
[hidden] { display: none !important; }

/* ── barra do topo ─────────────────────────────────────── */
.barra-topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px;
  background: var(--topo); color: var(--topo-texto);
}
.logo { color: var(--topo-texto); font-weight: 700; font-size: 17px; text-decoration: none; }
.logo { white-space: nowrap; }
.relogio-topo { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .barra-topo { flex-wrap: wrap; height: auto; min-height: 52px; padding: 8px; gap: 6px; }
}
.usuario-topo { font-size: 13px; opacity: .85; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-topo form { margin: 0; }
.botao-topo, .botao-icone {
  font: inherit; color: var(--topo-texto); background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.botao-topo:hover, .botao-icone:hover { background: rgba(255,255,255,.2); }
.so-celular { display: none; }

/* ── estrutura ─────────────────────────────────────────── */
.app { display: flex; min-height: calc(100vh - 52px); }
.lateral {
  width: 240px; flex-shrink: 0;
  background: var(--lateral); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px 0;
}
.lateral nav { display: flex; flex-direction: column; }
.lateral nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px; color: var(--texto); text-decoration: none;
  border-left: 3px solid transparent;
}
.lateral nav a:hover { background: var(--superficie-2); }
.lateral nav a.ativo, .lateral nav a.atual { background: var(--lateral-ativo); border-left-color: var(--primaria); font-weight: 600; }
.lateral nav a.parada .nome { opacity: .6; }
.lateral nav a.radio-item.aberta { font-weight: 600; }
.lateral nav a.radio-item .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral nav a.sub { padding: 6px 18px 6px 40px; font-size: 13px; }
.lateral nav a.sub .ic { font-size: 12px; }
.selo.mini { font-size: 10px; padding: 1px 6px; }
.lateral .ic { width: 20px; text-align: center; }
.lateral .grupo {
  margin: 16px 18px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--apagado);
}
.lateral .versao { font-size: 11px; color: var(--apagado); padding: 12px 18px 0; }
.conteudo { flex: 1; min-width: 0; padding: 20px 24px 40px; }
.titulo-pagina h1 { margin: 0 0 16px; font-size: 22px; font-weight: 600; }
/* Com descricao, o h1 encosta nela; a margem de baixo fica com o subtitulo. */
.titulo-pagina h1:has(+ .subtitulo) { margin-bottom: 4px; }

/* ── cartões ───────────────────────────────────────────── */
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: var(--sombra); margin-bottom: 16px; overflow: hidden;
}
.card-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; font-weight: 600;
  background: var(--cabecalho-card); color: var(--cabecalho-card-texto);
}
.card-cabecalho.centro { justify-content: center; font-size: 18px; }
.card-corpo { padding: 14px 16px; }
.card-corpo.sem-margem { padding: 0; }
.perigo-card .card-cabecalho { background: var(--perigo); color: #fff; }
.linha-cards { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.linha-cards > .card { margin-bottom: 16px; }
.cresce { flex: 2 1 480px; }
.lateral-card { flex: 1 1 320px; }
.metade { flex: 1 1 420px; }
.quarto { flex: 1 1 200px; }
.subtitulo-card { margin: 18px 0 6px; font-size: 12px; color: var(--apagado); text-transform: uppercase; letter-spacing: .05em; }

/* ── selos ─────────────────────────────────────────────── */
.selos { display: flex; gap: 6px; flex-wrap: wrap; }
.selo {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: var(--superficie-2); color: var(--apagado); border: 1px solid var(--borda);
}
.card-cabecalho .selo { border-color: transparent; }
.selo.ok { background: var(--sucesso); color: #fff; border-color: transparent; }
.selo.erro { background: var(--perigo); color: #fff; border-color: transparent; }
.selo.aviso { background: var(--aviso); color: #fff; border-color: transparent; }
.selo.neutro { background: rgba(255,255,255,.18); color: inherit; }

/* ── botões e formulários ──────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: 7px 14px; border-radius: 6px; border: 1px solid transparent;
  background: var(--primaria); color: var(--primaria-texto);
}
.botao:hover { filter: brightness(1.08); }
.botao:disabled { opacity: .5; cursor: default; filter: none; }
.botao.pequeno { padding: 4px 10px; font-size: 12px; }
.botao.largo { width: 100%; justify-content: center; margin-top: 16px; padding: 9px; }
.botao.secundario { background: var(--superficie-2); color: var(--texto); border-color: var(--borda); }
.botao.claro { background: rgba(255,255,255,.18); color: inherit; border-color: rgba(255,255,255,.3); }
.botao.sucesso { background: var(--sucesso); color: #fff; }
.botao.perigo { background: transparent; color: var(--perigo); border-color: var(--perigo); }
.botao.perigo-cheio { background: var(--perigo); color: #fff; }
input, select {
  width: 100%; font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 7px 10px;
}
input[readonly] { background: var(--superficie-2); color: var(--apagado); }
input:focus, select:focus { outline: 2px solid var(--primaria); outline-offset: 0; border-color: var(--primaria); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--perigo); }
select.pequeno { width: auto; padding: 2px 6px; font-size: 12px; background: var(--superficie); }
label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; }
label.caixa { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; margin-top: 16px; }
label.caixa input { width: auto; }
.erro-campo { color: var(--perigo); font-size: 12px; margin: 4px 0 0; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.tres-colunas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
.rodape-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.alerta { padding: 10px 12px; border-radius: 6px; border-left: 4px solid var(--primaria); background: var(--superficie); box-shadow: var(--sombra); }
.alerta.erro { border-left-color: var(--perigo); }
.alerta.aviso { border-left-color: var(--aviso); }
.alerta.ok { border-left-color: var(--sucesso); }
/* Faixa "falta reiniciar": texto e botoes na mesma linha, sem empurrar nada. */
.faixa-reiniciar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.faixa-reiniciar > span:first-child { flex: 1 1 260px; }
/* Botoes lado a lado (ex.: os dois de limpar cache). */
.botoes-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* O texto do andamento vai para a linha de baixo em vez de empurrar o botao. */
.faixa-reiniciar [data-aviso-reiniciar]:not(:empty) { flex: 1 1 100%; margin-top: 4px; }
.busca { display: flex; gap: 8px; }
.busca input { flex: 1; }
.busca-linha-tempo { flex-wrap: wrap; align-items: center; }
.busca-linha-tempo input { width: auto; min-width: 0; flex: 1 1 150px; }
.acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acoes.separado { border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 14px; }
.aviso-acao { font-size: 12px; color: var(--apagado); min-height: 1em; margin: 6px 0 0; }
.aviso-acao.ok { color: var(--sucesso); }
.aviso-acao.erro { color: var(--perigo); }
.volume { width: 110px; padding: 0; accent-color: var(--primaria); }

/* ── tocando agora ─────────────────────────────────────── */
.agora { display: flex; gap: 18px; align-items: flex-start; }
.agora-info { flex: 1; min-width: 0; }
.agora-titulo { font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.agora-artista { font-size: 16px; color: var(--primaria); margin-top: 2px; }
.agora-meta { font-size: 12px; color: var(--apagado); margin-top: 4px; }
.capa {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 6px;
  object-fit: cover; overflow: hidden; color: var(--apagado);
}
.capa.grande { width: 150px; height: 150px; font-size: 42px; }
.capa.grande img { width: 100%; height: 100%; object-fit: cover; }
.capa.mini { width: 40px; height: 40px; font-size: 16px; }
.progresso { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--apagado); font-variant-numeric: tabular-nums; }
.barra { flex: 1; height: 6px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 4px; overflow: hidden; }
.barra-cheia { height: 100%; width: 0; background: var(--primaria); transition: width 1s linear; }

/* ── números e gráficos ────────────────────────────────── */
.numeros { display: flex; justify-content: space-around; text-align: center; gap: 8px; }
.numeros strong { display: block; font-size: 26px; line-height: 1.1; }
.numeros span { font-size: 11px; color: var(--apagado); }
.grafico { height: 150px; margin-top: 12px; }
.grafico.alto { height: 240px; }
.grafico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafico .grade-linha { stroke: var(--borda); stroke-width: 1; }
.grafico .eixo { fill: var(--apagado); font-size: 10px; }
/* Painel geral: play na linha da radio, capa junto de titulo/artista e a
   legenda do grafico de ouvintes (uma cor por radio). */
.col-play { width: 44px; }
/* A .botao-icone nasceu para a barra ESCURA do topo (texto branco): dentro da
   tabela, em fundo claro, ficava branco no branco e sumia. */
.play-radio {
  /* Centrado no circulo por flex: com line-height o glifo segue a baseline da
     fonte e fica caido (o triangulo ainda tem folga a esquerda, por isso o
     padding-left de 1px; o quadrado do stop nao precisa). */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; padding: 0 0 0 1px; color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--borda);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
}
.play-radio.tocando { padding: 0; }
.play-radio:hover:not(:disabled) { background: var(--lateral-ativo); border-color: var(--primaria); }
.play-radio.tocando { color: var(--primaria-texto); background: var(--primaria); border-color: var(--primaria); }
.play-radio:disabled, .play-radio.sem-som { opacity: .4; cursor: default; }
.col-tocando .agora-linha { display: flex; align-items: center; gap: 10px; }
.legenda-grafico { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: 12px; color: var(--apagado); }
.item-legenda { display: inline-flex; align-items: center; gap: 6px; }
.item-legenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
select.pequeno { padding: 2px 6px; font-size: 12px; width: auto; }
.acoes-cabecalho { display: inline-flex; align-items: center; gap: 8px; }
.faxina-resultado { margin-top: 12px; }
.faxina-resultado .log { max-height: 260px; margin-top: 8px; }
/* "Ocultar gráfico" e "Mostrar gráfico" têm larguras diferentes: sem uma
   largura fixa, trocar o texto empurrava o seletor de período para o lado. */
[data-recolher-grafico] { min-width: 8.6rem; text-align: center; }

.grafico .serie-1 { stroke: var(--grafico-1); fill: none; stroke-width: 2; }
.grafico .area-1 { fill: var(--grafico-1); opacity: .15; }
.grafico .serie-2 { stroke: var(--grafico-2); fill: none; stroke-width: 1.5; }
.grafico .serie-3 { stroke: var(--grafico-3); fill: none; stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafico .sem-dados { fill: var(--apagado); font-size: 12px; }
.legenda { font-size: 12px; display: flex; gap: 14px; }
.cor-1 { color: var(--grafico-1); } .cor-2 { color: var(--grafico-2); } .cor-3 { color: var(--grafico-3); }
.medidor { text-align: center; }
.medidor span { display: block; font-size: 12px; color: var(--apagado); text-transform: uppercase; letter-spacing: .05em; }
.medidor strong { display: block; font-size: 30px; margin: 4px 0; }
.medidor small { color: var(--apagado); }

/* ── listas ────────────────────────────────────────────── */
.lista-faixas { list-style: none; margin: 0; padding: 0; }
.lista-faixas li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-bottom: 1px solid var(--borda);
}
.lista-faixas li:last-child { border-bottom: 0; }
.lista-faixas li.vazio { padding: 14px; }
.lista-faixas .textos { flex: 1; min-width: 0; }
.lista-faixas .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-faixas .a { font-size: 12px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-faixas .quando { font-size: 12px; color: var(--apagado); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lista-faixas li.vinheta .t { color: var(--aviso); }
.lista-simples { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.lista-simples li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.servico { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.servico > div { flex: 1; }

/* ── tabelas ───────────────────────────────────────────── */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; color: var(--apagado); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.tabela td { padding: 7px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td, .tabela.chave-valor tr:last-child th { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .col-capa { width: 56px; }
.tabela.chave-valor th { width: 42%; background: transparent; border-bottom: 1px solid var(--borda); font-size: 13px; color: var(--apagado); font-weight: 500; }
.tabela.chave-valor td { overflow-wrap: anywhere; }
.tabela.radios .nome-radio { font-weight: 600; }
.linha-erro td { color: var(--perigo); }
.linha-ausente td { opacity: .5; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* ── login ─────────────────────────────────────────────── */
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.cartao-login { width: 100%; max-width: 360px; }

/* ── celular ───────────────────────────────────────────── */
/* Formulário da rádio: abas */
.abas { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid var(--borda); margin-bottom: 16px; }
.abas button {
  font: inherit; font-weight: 600; color: var(--apagado); background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 9px 16px; cursor: pointer;
}
.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--primaria); border-bottom-color: var(--primaria); }
.grupo-campos { border: 1px solid var(--borda); border-radius: 8px; padding: 4px 14px 14px; margin: 0 0 14px; }
.grupo-campos legend { font-weight: 600; padding: 0 6px; }
input.curto { max-width: 160px; }
.mt { margin-top: 6px; }
.lista-ajuda { padding-left: 18px; }
.lista-ajuda li { margin: 2px 0; }
.tabela.montagens { min-width: 860px; }
/* A coluna do formato guarda também a contingência: o endereço cabe inteiro. */
.tabela.montagens td { vertical-align: top; }
.tabela.montagens td:first-child { min-width: 250px; }
/* O campo do tempo e o "0 = sem limite" ficam lado a lado, sem quebrar. */
.tabela.montagens .campo-com-nota { display: flex; align-items: center; gap: 6px; }
.tabela.montagens .campo-com-nota input { flex: 0 0 96px; }
.tabela.montagens .miudo { white-space: nowrap; }
.tabela.montagens label.caixa { margin: 4px 0; font-weight: 500; }

/* Playlists */
.acoes-linha { white-space: nowrap; }
.acoes-linha form { display: inline; }
.tabela.playlists { min-width: 760px; }
.tabela.playlists td { vertical-align: top; }
.agenda-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--borda);
}
.agenda-horas { display: flex; align-items: center; gap: 6px; }
.agenda-horas label { margin: 0; font-weight: 500; }
.agenda-horas select { width: auto; }
.agenda-dias { display: flex; flex-wrap: wrap; gap: 4px 10px; border: 0; padding: 0; margin: 0; }
.agenda-dias label.dia { display: flex; align-items: center; gap: 4px; margin: 0; font-weight: 500; font-size: 13px; }
.agenda-dias input { width: auto; }
.agenda-linha .erro-campo { flex-basis: 100%; }
.grade-semana { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 11px; table-layout: fixed; }
.grade-semana th { color: var(--apagado); font-weight: 600; padding: 3px 4px; }
.grade-semana thead th.hoje { color: var(--primaria); }
.grade-semana tbody th { width: 44px; text-align: right; }
.grade-semana td { border: 1px solid var(--borda); padding: 2px 4px; height: 20px; vertical-align: top; overflow: hidden; }
.grade-semana td.tem { background: var(--lateral-ativo); }
.grade-semana td.agora { outline: 2px solid var(--primaria); outline-offset: -2px; }
.grade-semana td span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-semana td span.vinheta { color: var(--apagado); font-style: italic; }
.grade-semana td span.desligada { text-decoration: line-through; opacity: .6; }

.abas a {
  font-weight: 600; color: var(--apagado); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 9px 16px;
}
.abas a:hover { color: var(--texto); }
.abas a[aria-current="page"] { color: var(--primaria); border-bottom-color: var(--primaria); }
.recuo { padding: 0 16px; }
.mais { display: inline-block; position: relative; }
.mais summary { list-style: none; cursor: pointer; }
.mais summary::-webkit-details-marker { display: none; }
.mais-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra);
  padding: 4px 0; display: flex; flex-direction: column;
}
.mais-menu form { display: block; }
.mais-menu button, .mais-menu a {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--texto);
  background: none; border: 0; padding: 7px 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.mais-menu button:hover, .mais-menu a:hover { background: var(--superficie-2); }
.card:has(.mais[open]), .tabela-rolagem:has(.mais[open]) { overflow: visible; }

/* Menu da rádio em grupos (como no AzuraCast) */
.lateral .subgrupo {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--apagado); padding: 10px 16px 2px 38px;
}
/* Arquivos de música */
.uso { display: flex; align-items: center; gap: 8px; }
.barra-uso { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.barra-uso span { display: block; height: 100%; background: currentColor; }
.filtros-arquivos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filtros-arquivos a {
  text-decoration: none; color: var(--texto); font-size: 13px; padding: 4px 10px;
  border: 1px solid var(--borda); border-radius: 999px;
}
.filtros-arquivos a[aria-current="page"] { background: var(--lateral-ativo); border-color: var(--primaria); color: var(--primaria); }
.zona-envio {
  border: 2px dashed var(--borda); border-radius: 10px; padding: 18px; text-align: center; margin-bottom: 12px;
  transition: border-color .15s, background .15s;
}
.zona-envio.arrastando { border-color: var(--primaria); background: var(--lateral-ativo); }
.zona-envio label.botao { display: inline-block; margin: 0 0 0 6px; }
.lista-envio { list-style: none; padding: 0; margin: 8px 0 0; text-align: left; }
.lista-envio li { display: grid; grid-template-columns: 1fr 160px 220px; gap: 10px; align-items: center; padding: 3px 0; font-size: 13px; }
.lista-envio li .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-envio li progress { width: 100%; }
.lista-envio li.ok .estado { color: var(--sucesso); }
.lista-envio li.erro .estado { color: var(--perigo); }
.trilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; margin-top: 8px; }
.trilha span { color: var(--apagado); }
.barra-selecao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: var(--superficie-2);
}
.barra-selecao details.desativado summary { opacity: .5; cursor: not-allowed; }
.painel-menu { padding: 10px 12px; gap: 6px; min-width: 240px; }
.painel-menu label { margin: 2px 0; }
.painel-menu button { border: 1px solid var(--borda); border-radius: 6px; margin-top: 4px; }
.tabela.arquivos { min-width: 900px; }
.tabela .col-marcar { width: 34px; }
.tabela .col-marcar input { width: auto; }
.nome-arquivo { display: flex; align-items: center; gap: 8px; max-width: 360px; }
.nome-arquivo > span:last-child { overflow-wrap: anywhere; }
.nome-pasta { font-weight: 600; text-decoration: none; }
.bloco { display: block; }
.card:has(.barra-selecao .mais[open]) { overflow: visible; }
.card:has(.barra-selecao .mais[open]) .tabela-rolagem { overflow: visible; }
.dialogo { border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto); padding: 18px; width: min(460px, 92vw); }
.dialogo::backdrop { background: rgba(0,0,0,.45); }
.dialogo h3 { margin-top: 0; }
/* Logs e linha do tempo */
pre.log {
  font-size: 12px; line-height: 1.45; max-height: 70vh; overflow: auto; margin: 0;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere;
}
pre.log .log-alerta { color: var(--perigo); }
.linha-vinheta td { color: var(--apagado); }
.busca label { margin: 0 4px 0 0; align-self: center; }

/* Grupos do menu da rádio: recolhidos, abrem no clique (como no AzuraCast) */
.lateral .grupo-menu > summary.subgrupo {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 10px 16px 6px 38px; user-select: none;
}
.lateral .grupo-menu > summary.subgrupo::-webkit-details-marker { display: none; }
.lateral .grupo-menu > summary.subgrupo::before {
  content: "▸"; font-size: 11px; transition: transform .15s; display: inline-block;
}
.lateral .grupo-menu[open] > summary.subgrupo::before { transform: rotate(90deg); }
.lateral .grupo-menu > summary.subgrupo:hover { color: var(--texto); }
/* `.lateral nav a { display: flex }` vence a regra do navegador que esconde o
   conteúdo de um <details> fechado: é preciso esconder explicitamente. */
.lateral .grupo-menu:not([open]) > a { display: none; }

/* O nome da rádio é que abre e fecha os itens dela (nada fixo do lado de fora) */
.lateral .grupo-radio > summary.radio-item {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px; color: var(--texto);
  border-left: 3px solid transparent;
}
.lateral .grupo-radio > summary.radio-item::-webkit-details-marker { display: none; }
.lateral .grupo-radio > summary.radio-item:hover { background: var(--superficie-2); }
.lateral .grupo-radio > summary.radio-item .nome {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral .grupo-radio.parada > summary.radio-item .nome { opacity: .6; }
.lateral .grupo-radio > summary.radio-item::after {
  content: "▸"; font-size: 11px; color: var(--apagado);
  transition: transform .15s; display: inline-block;
}
.lateral .grupo-radio[open] > summary.radio-item { font-weight: 600; }
.lateral .grupo-radio[open] > summary.radio-item::after { transform: rotate(90deg); }
/* A rádio da página atual fica marcada mesmo com os itens recolhidos. */
.lateral .grupo-radio > summary.radio-item.aberta { border-left-color: var(--primaria); }
/* Um <details> fechado também precisa esconder os grupos de dentro. */
.lateral .grupo-menu:not([open]) > details { display: none; }

@media (max-width: 860px) {
  .so-celular { display: inline-block; }
  .usuario-topo { display: none; }
  .lateral {
    position: fixed; top: 52px; bottom: 0; left: 0; z-index: 15;
    transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra);
  }
  .lateral.aberto { transform: none; }
  .conteudo { padding: 16px 14px 32px; }
  .agora { flex-direction: column; align-items: center; text-align: center; }
  .agora .acoes, .progresso { justify-content: center; }
  .duas-colunas, .tres-colunas { grid-template-columns: 1fr; }
  .lista-envio li { grid-template-columns: 1fr; gap: 2px; }
  .tabela.chave-valor th { width: auto; }
}

/* Ao vivo: lista de contas com o cartão de conexão ao lado (como no AzuraCast) */
.duas-colunas.larga-esquerda { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 0 16px; align-items: start; }
.dados-conexao { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 12px; }
.dados-conexao dt { color: var(--apagado); font-size: 12px; }
.dados-conexao dd { margin: 0; }
.acoes-linha { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.acoes-linha .linha-form { display: inline; }
tr.linha-atual > td { background: var(--lateral-ativo); }
@media (max-width: 980px) {
  .duas-colunas.larga-esquerda { grid-template-columns: 1fr; }
}

/* Player na barra do topo: fica fora do conteúdo trocado, então não para */
/* Larguras fixas: tocando ou parado, o player ocupa sempre o mesmo espaço */
/* Como no AzuraCast: a barra do topo so mostra o player depois que voce manda
   tocar alguma radio (a classe .ativo entra quando ha stream carregado). */
.player-barra { display: none; align-items: center; gap: 8px; margin-right: 6px; }
.player-barra.ativo { display: flex; }
.player-barra .volume { width: 90px; flex: 0 0 90px; }
.player-barra [data-tocar] { width: 34px; flex: 0 0 34px; text-align: center; }
.player-barra.tocando [data-tocar] { color: #2fbf6c; }
.player-barra [data-tocar].sem-som { color: var(--perigo, #e05252); }
main.conteudo.trocando { opacity: .55; transition: opacity .12s; }
@media (max-width: 860px) {
  .player-barra .volume { display: none; }
}