/* HotCast — painel: barra no topo, menu lateral, cartões com cabeçalho.
   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; display: inline-flex; align-items: center; }
.logo img { width: 20px; height: 20px; flex: none; margin-right: 8px; }
/* Só um espaço entre o nome e a hora (sem traço). Margem, não espaço no HTML:
   dentro do .logo (inline-flex) o espaço do começo do span some. */
.relogio-topo { font-variant-numeric: tabular-nums; margin-left: 8px; }
@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; display: flex; align-items: center; gap: 6px; }
.lateral .versao img { width: 14px; height: 14px; flex: none; }
.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; }
/* Texto miúdo no cabeçalho (ex.: "agora: … Mbps" da Banda usada): o cinza do
   .miudo é para fundo claro — no azul do tema claro quase sumia. Herda a cor do
   cabeçalho, um pouco mais suave. */
.card-cabecalho .miudo { color: inherit; opacity: .85; font-weight: 400; }
.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); }
/* ── Central de notificações no cabeçalho (0.59.0) ──────────────────────────
   O lugar padrão de toda notificação: fica no espaço livre da barra do topo e
   nunca empurra a página. Chips resumem (saúde, reiniciar, pedido, ao vivo), a
   mensagem da última ação aparece ao lado, e clicar abre a lista completa. */
.central { flex: 1; min-width: 0; display: flex; justify-content: center; position: relative; }
.central-botao {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
  font: inherit; font-size: 13px; color: var(--topo-texto); cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 12px;
}
.central-botao:hover, .central-botao[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.central-chips { display: inline-flex; gap: 6px; flex: none; }
.central-chips:empty { display: none; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.chip.erro { background: var(--perigo); color: #fff; }
.chip.aviso { background: var(--aviso); color: #1a1a1a; }
.chip.info { background: rgba(255, 255, 255, .22); color: var(--topo-texto); }
.central-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.central-msg:empty { display: none; }
.central-msg.ok { color: #7ee2a8; }
.central-msg.erro { color: #ff9b9b; font-weight: 600; }
.central-msg.aviso { color: #ffd27a; }
.central-lista {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.central-lista[hidden] { display: none; }
.central-secao { padding: 8px 10px; border-radius: 6px; border-left: 4px solid var(--primaria); background: var(--superficie-2); font-size: 13px; }
.central-secao.erro { border-left-color: var(--perigo); }
.central-secao.aviso { border-left-color: var(--aviso); }
.central-secao ul { margin: 6px 0; padding-left: 18px; }
.central-historico { list-style: none; padding: 0 !important; margin: 6px 0 0 !important; display: flex; flex-direction: column; gap: 4px; }
.central-historico li { overflow-wrap: anywhere; }
.central-historico li.erro { color: var(--perigo); }
.central-historico li.aviso { color: var(--aviso); }
.central-historico time { color: var(--apagado); font-variant-numeric: tabular-nums; margin-right: 4px; }
.central-vazia { margin: 4px; }
/* No celular a barra quebra em duas linhas: a central ganha a segunda linha
   inteira e a lista ocupa a largura da tela, presa ao topo. */
@media (max-width: 600px) {
  .central { order: 5; flex-basis: 100%; }
  .central-lista { position: fixed; top: 110px; left: 16px; right: 16px; transform: none; width: auto; }
}
/* Faixa "falta reiniciar": texto e botoes na mesma linha, sem empurrar nada. */
.faixa-reiniciar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.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; }
/* Botão acima de um cartão (ex.: Nova playlist): respiro embaixo, não em cima. */
.acoes.acoes-topo { margin: 0 0 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; }
/* "Ocultar"/"Mostrar" dos cartões do Desempenho: mesma largura nos dois textos. */
[data-recolher] { min-width: 5.4rem; justify-content: 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; }
/* Colunas fixas (0.60.5): tabelas IGUAIS repetidas (Playlists por grupo;
   Estatísticas em cartões empilhados ou lado a lado) calculavam cada uma as
   próprias larguras pelo conteúdo e as colunas não se alinhavam entre elas.
   Com layout fixo, a largura vem do <colgroup>, igual em todas. */
.tabela.colunas-fixas { table-layout: fixed; }
.tabela.colunas-fixas td, .tabela.colunas-fixas th { overflow-wrap: anywhere; }
.tabela.colunas-fixas .c-num-fixa { width: 120px; }
/* Nome + 3 colunas de 120 px: sem largura mínima, em tela estreita o nome
   ficava com 0 px, letra por letra (validação 0.60.5, P2). 560 px = 200 px
   para o nome; abaixo disso a tabela rola dentro do cartão (.tabela-rolagem). */
.tabela.colunas-fixas:not(.playlists) { min-width: 560px; }
.tabela.playlists.colunas-fixas { min-width: 900px; }   /* celular: rola em vez de espremer */
.tabela.playlists .c-pl-nome { width: 23%; }
.tabela.playlists .c-pl-pastas { width: 14%; }
.tabela.playlists .c-pl-tipo { width: 14%; }
.tabela.playlists .c-pl-horarios { width: 12%; }
.tabela.playlists .c-pl-musicas { width: 9%; }
.tabela.playlists .c-pl-ultima { width: 11%; }
.tabela.playlists .c-pl-acoes { width: 17%; }
.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; }
.tabela.radios .link-ouvintes { font-weight: 600; text-decoration: none; }
.tabela.radios .link-site { color: inherit; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela.radios .link-site:hover, .tabela.radios .link-site:focus-visible { color: var(--primaria); text-decoration: underline; }
.tabela.radios .link-ouvintes:hover, .tabela.radios .link-ouvintes:focus-visible { text-decoration: underline; }
.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; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 16px;
  /* Arte própria do HotCast (as barras do logo, ondas de áudio e equalizador), sempre escura. */
  background: #070b1a url(fundo-login.svg?v=1) center / cover no-repeat; }
.cartao-login { width: 100%; max-width: 360px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.cartao-login .logo-login { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cartao-login .logo-login img { width: 22px; height: 22px; }
/* Fora da caixa, logo abaixo, sobre o fundo (sempre escuro): texto claro nos dois temas. */
.tela-login .direitos-login { margin: 14px 0 0; text-align: center; font-size: 12px; color: rgba(227, 232, 240, .75); }
/* Tema claro: o cabeçalho é azul e o gradiente do logo sumia nele — fica numa plaquinha branca. */
:root:not([data-tema="escuro"]) .cartao-login .logo-login img { width: 24px; height: 24px; padding: 2px; background: #fff; border-radius: 6px; }

/* ── 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; }
/* Aba Avançado: "padrão: X" ao lado da caixa (em destaque quando o atual difere). */
.campo-com-padrao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campo-com-padrao input { flex: 0 1 160px; min-width: 90px; }
.padrao-campo { font-size: 12px; color: var(--apagado); white-space: nowrap; }
.padrao-campo.difere { color: var(--aviso); font-weight: 600; }
.mt { margin-top: 6px; }
.lista-ajuda { padding-left: 18px; }
.lista-ajuda li { margin: 2px 0; }
.tabela.montagens { min-width: 860px; }
/* A coluna do ponto (2ª) guarda também a contingência: o endereço cabe inteiro. */
.tabela.montagens td { vertical-align: top; }
.tabela.montagens td:nth-child(2) { 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 */
.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); }
pre.log .log-aviso { color: var(--aviso); }
.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 */
.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 */
.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 */
/* 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; }
}

/* ── Locução IA (v0.28.0) ─────────────────────────────────────────────── */
.linha-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.linha-status .selo.neutro, .grade-monitor .selo.neutro { background: var(--borda); color: var(--texto); }
.grade-monitor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .grade-monitor { grid-template-columns: 1fr; } }
.registro-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.musicas-bloco { margin: 6px 0 0; padding-left: 22px; font-size: 13px; line-height: 1.5; }
.lista-registros .motivo { margin-top: 4px; color: var(--perigo); }
.grade-monitor .console-locucao { grid-column: 1 / -1; }
/* Caixa fixa com as 5 últimas, uma linha cada (pedido do operador): não cresce. */
.lista-registros { list-style: none; margin: 0; padding: 0 16px; height: 222px; overflow: hidden; }
.lista-registros li { display: flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box; border-bottom: 1px solid var(--borda); white-space: nowrap; overflow: hidden; }
/* Colunas fixas: locutor/hora, estado e o resto começam no mesmo ponto em todas as linhas. */
.lista-registros .registro-linha { display: grid; align-items: center; column-gap: 12px; width: 100%; min-width: 0; }
.lista-registros .colunas-locucao { grid-template-columns: 6.5em 5.5em minmax(0, 1fr); }
.lista-registros .colunas-hora { grid-template-columns: 3.5em 6.5em 5.5em minmax(0, 1fr); }
.lista-registros .registro-linha > strong, .lista-registros .registro-linha > span:not(.selo):not(.info) { overflow: hidden; text-overflow: ellipsis; }
.lista-registros .registro-linha .selo { justify-self: start; min-width: 5em; text-align: center; box-sizing: border-box; }
.lista-registros .registro-linha .info { overflow: hidden; text-overflow: ellipsis; }
.lista-registros .motivo { margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lista-registros li:last-child { border-bottom: 0; }
.lista-registros li.vazio { color: var(--suave, inherit); opacity: .7; }
/* Ocupa o resto da tela (altura calculada no painel.js), com rolagem interna. */
.console-locucao { margin-bottom: 0; }
.console-locucao .log { margin: 0 16px 16px; height: 360px; min-height: 180px; overflow: auto; white-space: pre-wrap; }
.turno-linha .botoes-turno { display: flex; gap: 4px; margin-left: auto; }
.aviso-turno { margin: -4px 0 8px; color: var(--aviso); }
/* Cadastro de locutor: nome e botão na mesma linha. */
.linha-cadastro { display: flex; gap: 8px; align-items: center; }
.linha-cadastro input { flex: 1; min-width: 0; }
.linha-cadastro .botao { flex: none; }
/* Tabela de locutores com colunas fixas: o texto que muda (andamento do envio,
   faltas da hora certa) não empurra as colunas nem a altura da linha. */
.tabela-locutores { table-layout: fixed; width: 100%; min-width: 900px; }
.tabela-locutores .c-nome { width: 25%; }
/* Foto do locutor (0.51.0): capa da fala da Locução IA. 0.62.1: foto à
   esquerda, renomear e troca de foto à direita dela. */
.identidade-locutor { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; }
/* Bloco do locutor (0.62.6): uma moldura em volta de nome, foto e controles. */
.bloco-locutor { width: fit-content; max-width: 100%; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; background: var(--superficie-2); }
/* Largura = a da linha Trocar/Remover; a moldura do Procurar se estica até ela. */
.controles-locutor { flex: none; width: max-content; max-width: 100%; display: flex; flex-direction: column; gap: 6px; }
.controles-locutor .botao { align-self: flex-start; }
.botoes-foto { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.botoes-foto form { margin: 0; }
.foto-locutor { flex: none; }
.foto-locutor img, .foto-locutor .capa { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; display: block; }
.form-foto-locutor { display: flex; flex-direction: column; gap: 4px; }
.form-foto-locutor input[type="file"] { font-size: 11px; max-width: 100%; }
/* Escolher arquivo (0.62.3, painel.js: data-escolher): "Procurar…" + nome. */
/* Com a mesma moldura dos campos (input), como o campo original do navegador. */
.escolher-arquivo { display: flex; align-items: center; gap: 6px; min-width: 0; contain: inline-size;   /* não alarga a coluna: segue a dos botões */
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 2px 4px; }
/* Fininho, no tamanho do botão nativo que havia antes. */
.escolher-arquivo .botao { padding: 1px 8px; font-size: 12px; line-height: 1.5; min-height: 0;
  margin: 0; display: inline-block; }   /* é um <label>: sem a margem dos rótulos de campo */
.escolher-arquivo:focus-within { outline: 2px solid var(--primaria); outline-offset: 0; border-color: var(--primaria); }
.escolher-arquivo.faltando { border-color: var(--perigo); }
.escolher-arquivo .botao { flex: none; }
.escolher-arquivo .nome-escolhido { font-size: 12px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.escolher-arquivo.faltando .nome-escolhido { color: var(--perigo); font-weight: 600; }
/* Renomear locutor (0.62.0): discreto até abrir; a coluna do nome é estreita. */
.renomear-locutor { font-size: 12px; }
.renomear-locutor summary { cursor: pointer; color: var(--apagado); }
.renomear-locutor .linha-cadastro { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 4px; }
.tabela-locutores .c-vozes { width: 16%; }
.tabela-locutores .c-fixas { width: 15%; }
.tabela-locutores .c-acoes { width: 290px; }
.tabela-locutores td { vertical-align: top; overflow-wrap: anywhere; }
.tabela-locutores details ul { max-height: 200px; overflow: auto; }
.acoes-locutor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acoes-locutor form { margin: 0; }
/* Tela de arquivos do locutor. */
.filtros-arquivos { display: flex; gap: 8px; padding-top: 0; }
.filtros-arquivos input { flex: 1; min-width: 0; }
.filtros-arquivos select { width: auto; flex: none; }
.barra-arquivos { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; }
.tabela-arquivos { table-layout: fixed; width: 100%; min-width: 820px; }
.tabela-arquivos .c-marca { width: 40px; }
.tabela-arquivos .c-tam { width: 80px; }
.tabela-arquivos .c-data { width: 130px; }
.tabela-arquivos .c-acoes-arq { width: 190px; }
.tabela-arquivos td { overflow-wrap: anywhere; }
.tabela-arquivos .nome-arquivo label { cursor: pointer; }
.tabela-arquivos .acoes-arquivo { white-space: nowrap; }
.aviso-texto { color: var(--aviso); font-size: 12px; }
.envio-vozes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.envio-vozes form { margin: 0; }
.envio-vozes [data-andamento-vozes] { flex-basis: 100%; margin: 0; min-height: 1.5em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.envio-vozes [data-erros-vozes] { flex-basis: 100%; margin: 0; color: var(--perigo); max-height: 160px; overflow: auto; }

/* ── Relatórios → Estatísticas ─────────────────────────── */
.filtro-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtro-periodo select, .filtro-periodo input[type="date"] { width: auto; }
.resumo-estatisticas { margin-top: 10px; font-size: 14px; }
.grafico .barra { fill: var(--grafico-1); opacity: .85; }
.grafico .barra:hover { opacity: 1; }
.botoes-dia { display: flex; flex-wrap: wrap; gap: 6px; }
.pizza { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-height: 240px; }
.pizza-svg { width: 180px; height: 180px; flex: none; }
.pizza-svg .fatia { stroke: var(--superficie); stroke-width: .02; }
.legenda-pizza { list-style: none; margin: 0; padding: 0; font-size: 12px; display: grid; gap: 4px; }
.legenda-pizza li { display: flex; align-items: center; gap: 6px; }
.marca-pizza { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.tabela .ganho { color: var(--sucesso); font-weight: 600; }
.tabela .perda { color: var(--perigo); font-weight: 600; }

/* ── Saúde do servidor ─────────────────────────────────── */
.faixa-saude { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 14px; }
.tabela-saude .saude-icone { width: 32px; text-align: center; font-weight: 700; }
.tabela-saude .saude-erro .saude-icone, .tabela-saude .saude-erro td:nth-child(3) { color: var(--perigo); }
.tabela-saude .saude-aviso .saude-icone, .tabela-saude .saude-aviso td:nth-child(3) { color: var(--aviso); }
.tabela-saude .saude-ok .saude-icone { color: var(--sucesso); }

/* ── Painel geral: colunas fixas ───────────────────────── */
/* A tabela não se reajusta a cada troca de música ou de ouvintes: largura
   fixa por coluna, e texto longo termina em "…" (o completo fica no title). */
.tabela.radios { table-layout: fixed; width: 100%; min-width: 980px; }
/* 0.69.3: larguras medidas pelo conteudo de verdade. Num notebook (1366 px) as
   colunas fixas somavam 1016 px e o "Tocando agora" ficava com ~50 px ("SOME...").
   Agora somam 854 px: o que sobra, que e o que muda de tamanho, vai para ele. */
.tabela.radios .c-play { width: 52px; }
.tabela.radios .c-radio { width: 200px; }
.tabela.radios .c-site { width: 186px; }
.tabela.radios .c-ouvintes { width: 84px; }
.tabela.radios .c-maximo { width: 84px; }
.tabela.radios .c-servicos { width: 164px; }
.tabela.radios .c-abrir { width: 84px; }
.tabela.radios .corta > *, .tabela.radios .agora-texto > * {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela.radios .corta .nome-radio { display: block; }
.tabela.radios .agora-texto { min-width: 0; flex: 1; }
.tabela.radios .agora-linha .capa { flex: none; }
.tabela.radios .selos { flex-wrap: nowrap; }

/* ── Manutenção: caixa fixa do resultado ────────────────── */
/* Sempre presente e do mesmo tamanho: a mensagem (ou o relatório da tarefa)
   entra aqui sem o cartão crescer ou encolher. O painel.js a estica até o fim
   da janela, sem passar (nada de barra de rolagem externa); os 260 px são só
   para quem está sem JavaScript. O que passar rola por dentro. */
.resultado-manutencao {
  height: 260px; overflow: auto; margin-top: 12px; padding: 10px;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px;
}
.resultado-manutencao .alerta { margin: 0 0 8px; }
.resultado-manutencao .vazio { margin: 0; }
/* Atualização do HotCast (0.63.0). Caixa do resultado de tamanho FIXO, como a
   das limpezas: o relatório rola por dentro e o cartão não cresce com ele. */
.resultado-atualizacao {
  height: 220px; overflow: auto; margin-top: 12px; padding: 10px;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px;
}
.resultado-atualizacao .alerta { margin: 0 0 8px; }
.resultado-atualizacao .vazio { margin: 0; }
.resultado-atualizacao pre.log { max-height: none; overflow: visible; border: 0; padding: 0; background: none; }
.chave-atualizacao { margin-top: 12px; }
.chave-atualizacao summary { cursor: pointer; }
.chave-atualizacao form { margin-top: 10px; }
.chave-atualizacao input[type="password"] { max-width: 100%; }
.resultado-manutencao pre.log { max-height: none; overflow: visible; border: 0; padding: 0; background: transparent; }

/* ── Relatórios → Ouvintes ─────────────────────────────── */
.filtros-ouvintes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtros-ouvintes select, .filtros-ouvintes input[type="date"] { width: auto; }
.filtros-ouvintes input.curto-min { width: 80px; }
.filtros-ouvintes input[type="search"] { flex: 1; min-width: 200px; }
.resumo-ouvintes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px; margin-top: 14px; }
.resumo-ouvintes > div { display: flex; flex-direction: column; }
.resumo-ouvintes strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.resumo-ouvintes p { margin: 0; }
/* Colunas fixas: a lista que se atualiza sozinha não fica mudando de largura. */
.tabela-ouvintes { table-layout: fixed; width: 100%; min-width: 900px; }
.tabela-ouvintes .c-ip { width: 150px; }
.tabela-ouvintes .c-tempo { width: 130px; }
.tabela-ouvintes .c-transmissao { width: 170px; }
.tabela-ouvintes .c-local { width: 25%; }
.tabela-ouvintes td { vertical-align: top; overflow-wrap: anywhere; }
.tabela-ouvintes .mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.tabela-ouvintes .corta-ouvinte > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-ouvintes .icone-aparelho { margin-right: 6px; }

/* Totalização: calendário do mês, semanas e meses. A cor do dia vai do
   nível 0 (sem ouvintes/sem dado) ao 4 (o maior da tela). */
/* 0.62.11: mais compacto (pedido do operador) — até 1100 px, células de 56 px (eram 74): um mês de 6 linhas cabe na tela. */
.calendario-ouvintes { width: 100%; max-width: 1100px; min-width: 560px; table-layout: fixed; border-collapse: separate; border-spacing: 4px; padding: 8px; }
.calendario-ouvintes th { font-size: 12px; font-weight: 600; color: var(--apagado); text-align: center; padding: 4px 0; }
/* 0.62.11: resumo (total do mês, melhor dia) à direita do calendário — em
   cima, um mês de 6 linhas não cabia na tela sem rolar. Em tela estreita o
   resumo desce para baixo dele. */
.calendario-com-resumo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; }
.calendario-com-resumo > .tabela-rolagem { flex: 1 1 560px; max-width: 1100px; }
.calendario-com-resumo .resumo-ouvintes { flex-direction: column; align-items: flex-start; gap: 16px; margin: 0; padding: 36px 16px 12px; }
.nota-ouvintes { padding-top: 12px; padding-bottom: 12px; }
/* Logo depois do calendário (por dia) fica justa: o mês de 6 linhas cabe na tela. */
.calendario-com-resumo + .nota-ouvintes { padding-top: 4px; padding-bottom: 10px; }
.nota-ouvintes p { margin: 0; }
.calendario-ouvintes td {
  height: 56px; vertical-align: top; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--borda); background: var(--superficie);
}
.calendario-ouvintes td.fora { border: 0; background: transparent; }
.calendario-ouvintes td strong { display: block; margin-top: 0; font-size: 19px; line-height: 1.25; text-align: right; font-variant-numeric: tabular-nums; }
.calendario-ouvintes td .miudo { display: block; text-align: right; }
.calendario-ouvintes .dia-numero { font-size: 12px; color: var(--apagado); }
.calendario-ouvintes td.hoje { border: 2px solid var(--primaria); }
.calendario-ouvintes td.futuro { opacity: .45; }
.calendario-ouvintes td.nivel-1 { background: color-mix(in srgb, var(--primaria) 10%, var(--superficie)); }
.calendario-ouvintes td.nivel-2 { background: color-mix(in srgb, var(--primaria) 22%, var(--superficie)); }
.calendario-ouvintes td.nivel-3 { background: color-mix(in srgb, var(--primaria) 36%, var(--superficie)); }
.calendario-ouvintes td.nivel-4 { background: color-mix(in srgb, var(--primaria) 52%, var(--superficie)); }
.tabela-totais { table-layout: fixed; width: 100%; }
.tabela-totais th:first-child { width: 40%; }
.tabela-totais th.num { width: 150px; }
.tabela-totais tr.futuro td { color: var(--apagado); }
.tabela-totais meter { width: 100%; height: 12px; }
@media (max-width: 600px) {
  .calendario-ouvintes td { height: 48px; padding: 4px; }
  .calendario-ouvintes td strong { font-size: 15px; }
}

/* ── Desempenho: franquia de tráfego do mês ─────────────── */
.franquia { margin-bottom: 14px; }
.franquia-texto { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.franquia-pct { font-size: 18px; font-variant-numeric: tabular-nums; }
.franquia-barra { height: 12px; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borda); overflow: hidden; margin: 6px 0; }
.franquia-barra span { display: block; height: 100%; background: var(--sucesso); }
.franquia-barra.alerta-franquia span { background: var(--aviso); }
.franquia .miudo { margin: 0; }
.form-backup .duas-colunas { margin-top: 8px; }
.form-backup .duas-colunas select, .form-backup .duas-colunas input { width: 100%; }
.rodape-card { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.rodape-card .botao { min-width: 170px; padding: 9px 18px; }
#copias .acoes-cabecalho form { margin: 0; }
.form-backup .formato-backup { margin-top: 16px; }
.form-backup .formato-backup label.caixa { margin-top: 6px; }
.form-restaurar select, .form-restaurar input[type="password"] { width: 100%; }
.form-restaurar .grupo-campos { margin-top: 12px; }
.envio-backup { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); }
.envio-backup input[type="file"] { width: 100%; margin: 6px 0 8px; }
.envio-backup progress { width: 100%; height: 10px; margin-top: 8px; }
#restaurar details.log-backup { margin-top: 14px; }
.form-backup-manual { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-backup-manual .formato-backup { display: inline-flex; gap: 10px; font-size: 13px; font-weight: 400; margin-right: 4px; }
.form-backup-manual .formato-backup label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; }
.form-backup-manual .formato-backup input { width: auto; margin: 0; }
@media (max-width: 640px) {
  #copias .card-cabecalho { flex-wrap: wrap; gap: 8px; }
  .form-backup .duas-colunas { grid-template-columns: 1fr; }
}

/* ── Usuários e Minha conta (v0.40.0) ───────────────────────────────────── */
a.usuario-topo { color: inherit; text-decoration: none; }
a.usuario-topo:hover { text-decoration: underline; opacity: 1; }
.tabela-usuarios { table-layout: fixed; min-width: 640px; }
.tabela-usuarios .col-perfil { width: 130px; }
.tabela-usuarios .col-situacao { width: 110px; }
.tabela-usuarios .col-login { width: 140px; }
.tabela-usuarios .col-acoes { width: 180px; }
.tabela-usuarios td:first-child { overflow-wrap: anywhere; }
.tabela-usuarios tr.inativo td { opacity: .6; }

/* ── Gráfico de ouvintes do Painel geral: abas, legenda clicável, dica (v0.43.0) ── */
.abas-grafico { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 8px; }
.abas-grafico button { background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0;
  padding: 5px 12px; color: var(--primaria); cursor: pointer; font: inherit; margin-bottom: -1px; }
.abas-grafico button[aria-selected="true"] { color: inherit; border-color: var(--borda); background: var(--superficie); font-weight: 600; }
button.item-legenda { background: none; border: 0; padding: 2px 4px; font: inherit; color: inherit; cursor: pointer; border-radius: 4px; }
button.item-legenda:hover { background: var(--superficie-2); }
button.item-legenda i { width: 22px; height: 10px; border-radius: 2px; }
button.item-legenda.oculta { opacity: .55; text-decoration: line-through; }
button.item-legenda.oculta i { opacity: .4; }
/* Com as abas em cima, o gráfico deste cartão é mais baixo: o Painel geral
   continua cabendo na tela sem barra de rolagem vertical. */
.grafico-dica { position: relative; }
.grafico.alto.grafico-dica { height: 200px; margin-top: 4px; }
button.item-legenda { line-height: 1.3; }
.grafico .marca { stroke: var(--superficie); stroke-width: 1; }
.grafico .marca.ativa { stroke-width: 2; }
.grafico .guia-dica { stroke: var(--apagado); stroke-dasharray: 3 3; stroke-width: 1; }
.grafico .area-dica { fill: transparent; cursor: crosshair; }
.dica-grafico { position: absolute; top: 6px; z-index: 5; pointer-events: none; min-width: 150px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 8px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); font-size: 12px; line-height: 1.6; }
.dica-grafico strong { display: block; margin-bottom: 2px; }
.dica-grafico strong::first-letter { text-transform: uppercase; }
.dica-grafico div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dica-grafico i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dica-grafico b { margin-left: auto; padding-left: 10px; }
/* Backup em andamento: passo atual + barra (0.52.5) */
[data-backup-acompanhar] p { margin: 0 0 4px; }
[data-backup-acompanhar] progress { width: 100%; height: 10px; margin: 4px 0; }
/* Página pública → Marca (0.56.0) */
.recursos-marca { display: flex; flex-direction: column; gap: 18px; }
.recurso-marca { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
.previa-marca { width: 180px; height: 110px; border-radius: 6px; overflow: hidden; background: var(--superficie-2); display: flex; align-items: center; justify-content: center; }
.previa-marca.quadrada { width: 110px; height: 110px; }
.previa-marca img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-recurso { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.form-recurso input[type="file"] { font-size: 12px; max-width: 100%; }
textarea.codigo { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; width: 100%; }
@media (max-width: 640px) { .recurso-marca { grid-template-columns: 1fr; } }