/* Mesmo tema escuro do painel do track-stream-recorder: o Bootstrap 5.3
   vendorizado já suporta data-bs-theme="dark" (definido na tag <html>), então
   cards, tabelas, inputs, selects e alerts já respeitam o tema -- aqui só
   ajustamos a paleta para os mesmos tons do painel e implementamos o que o
   Bootstrap não cobre: cabeçalho (eyebrow + headline + faixa de contagens),
   navegação discreta, pílula de atualização, ponto de status pulsante,
   pílulas de estado, passos do assistente e a barra de escuta no rodapé.
   O Alpine.js só liga dados ao HTML; nenhuma regra visual depende dele. */

:root[data-bs-theme="dark"] {
  --bs-body-bg: #0f1620;
  --bs-body-color: #e5e7eb;
  --bs-border-color: #2c3948;
  --bs-tertiary-bg: #1b2430;
  --bs-secondary-bg: #1b2430;
  --bs-card-bg: #1b2430;
  --bs-card-border-color: #2c3948;
}

/* O Alpine remove x-cloak ao iniciar: evita o "piscar" dos templates crus. */
[x-cloak] { display: none !important; }

/* CTA de destaque: o mesmo verde-esmeralda que o painel usa para "ativo/
   positivo" (ponto online, comando concluído), em vez do azul do
   .btn-primary, que destoa do resto da UI. */
.btn-accent {
  background: #34d399;
  border-color: #34d399;
  color: #0f1620;
  font-weight: 600;
}
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:disabled {
  background: #10b981;
  border-color: #10b981;
  color: #0f1620;
}
/* Link de ação em texto ("editar", "usar", "descartar rascunho"): o verde
   do painel, sem o azul sublinhado do .btn-link do Bootstrap. */
.link-action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  color: #34d399;
  text-decoration: none;
  cursor: pointer;
}
.link-action:hover,
.link-action:focus-visible { color: #6ee7b7; text-decoration: underline; }
.link-action:disabled { color: #6b7280; cursor: default; text-decoration: none; }
/* Escuta de outra aba que bloqueia "Ouvir": texto e botão quebram juntos. */
.ongoing-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Ação secundária no mesmo verde (ex.: "copiar"), contornada. */
.btn-outline-accent {
  border-color: #34d399;
  color: #34d399;
  white-space: nowrap;
}
.btn-outline-accent:hover,
.btn-outline-accent:focus {
  background: rgba(52, 211, 153, 0.12);
  border-color: #34d399;
  color: #34d399;
}

/* Cabeçalho: o nome do serviço vira um "eyebrow" discreto; o propósito da
   tela (não o nome dela) carrega o peso visual como título. */
.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7fa0;
  margin-bottom: 4px;
}

.headline {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* Navegação discreta, no tom do gatilho de período do painel -- sem a barra
   azul de navbar, que competiria com o título. */
.app-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.app-nav a,
.app-nav button {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: #9ca3af;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.app-nav a:hover,
.app-nav button:hover { border-color: #3d4c5e; color: #e5e7eb; }
.app-nav a.active { color: #34d399; border-color: #34d399; }
.app-nav button { background: transparent; }

/* Contagens da frota condensadas numa única barra, como o resumo do
   catálogo do painel do stream. */
.overview-strip {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #c5cbd6;
}

.overview-strip .sep { color: #3d4c5e; }
.overview-strip .fact { display: inline-flex; align-items: center; gap: 6px; }

/* Pílula "painel atualizado há Xs" no cabeçalho do card: vermelha quando o
   polling passa de dois ciclos sem resposta (ver refreshPill em logic.js). */
.refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #9ca3af);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  padding: 3px 10px;
  border-radius: 20px;
}

.refresh-pill .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  position: relative;
  flex-shrink: 0;
}

.refresh-pill.stale { color: #f87171; }
.refresh-pill.stale .live-dot { background: #f87171; }

.refresh-pill .live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #34d399;
  opacity: 0.5;
  animation: pulse-ring 1.8s ease-out infinite;
}

.refresh-pill.stale .live-dot::after { display: none; }

@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Ponto de status: pulsa só quando o dispositivo está online (conectado
   agora de fato); sólido nos demais estados -- o pulso é reservado para o
   único caso em que "isso está vivo agora" é verdade. */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  background: #6b7280;
}

.status-dot.online { background: #34d399; }
.status-dot.online::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #34d399;
  opacity: 0.5;
  animation: pulse-ring 1.8s ease-out infinite;
}
.status-dot.offline { background: #f87171; }
/* Tons de gravidade (card de atenção) e cinza para quem não tem conexão a
   mostrar (pendente, revogado). */
.status-dot.bad { background: #f87171; }
.status-dot.warn { background: #fbbf24; }
.status-dot.muted { background: #4b5563; }

@media (prefers-reduced-motion: reduce) {
  .refresh-pill .live-dot::after,
  .status-dot.online::after { animation: none; }
}

/* Texto de estado ao lado do ponto, no estilo .rc-status-text do painel. */
.status-text {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.status-text.ok { color: #4ade80; }
.status-text.warn { color: #fbbf24; }
.status-text.bad { color: #f87171; }
.status-text.muted { color: #9ca3af; }

/* Pílula de estado (ciclo de vida, configuração, comando): borda na cor do
   texto, como .replica-pill/.mode-badge do painel. Cor por tom, não por
   estado, para a tabela de cores ficar em stateTone (logic.js). */
.state-pill {
  display: inline-block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.state-pill.ok { color: #4ade80; }
.state-pill.warn { color: #fbbf24; }
.state-pill.bad { color: #f87171; }
.state-pill.muted { color: #9ca3af; }

/* Tabelas compactas: cabeçalho em caixa-alta discreta, células com o mesmo
   tamanho de fonte das linhas de instância do painel. */
.data-table th {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7fa0;
  white-space: nowrap;
}
.data-table th,
.data-table td { padding: 6px 12px; }
.data-table td { font-size: 0.8rem; }
.data-table th:first-child,
.data-table td:first-child { padding-left: 20px; white-space: nowrap; }
.data-table th:last-child,
.data-table td:last-child { padding-right: 20px; }
.data-table .muted { color: var(--bs-secondary-color, #9ca3af); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover > * { background: rgba(255, 255, 255, 0.03); }
.data-table tr.recommended td { color: #34d399; font-weight: 600; }
.data-table .empty { text-align: center; color: #6b7280; padding: 16px; }

.device-name { font-weight: 600; }

/* ---- Lista de dispositivos ---- */

/* Precisa de atenção: uma linha por dispositivo, motivo em uma frase. */
.attention-card .card-header .muted { color: #6b7fa0; font-weight: 400; }
.attention-list { list-style: none; margin: 0; padding: 4px 0; }
.attention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  font-size: 0.82rem;
  cursor: pointer;
  border-bottom: 1px dashed var(--bs-border-color);
}
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover,
.attention-item:focus { background: rgba(255, 255, 255, 0.03); outline: none; }
.attention-item .device-name { white-space: nowrap; flex-shrink: 0; }
.attention-why { margin-left: auto; text-align: right; color: #c5cbd6; min-width: 0; overflow-wrap: anywhere; }
.attention-why.bad { color: #f87171; }
.attention-why.warn { color: #fbbf24; }
.attention-more {
  font-size: 0.7rem;
  color: #6b7fa0;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 0 6px;
  flex-shrink: 0;
}

/* Atalhos de filtro: um ativo por vez, no tom da navegação. */
.shortcut-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.shortcut-pills button {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: #9ca3af;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
}
.shortcut-pills button:hover { border-color: #3d4c5e; color: #e5e7eb; }
.shortcut-pills button.active { color: #34d399; border-color: #34d399; }
.shortcut-pills .count { font-weight: 400; color: #6b7fa0; }
.shortcut-pills button.active .count { color: inherit; }

.device-cell { display: flex; align-items: center; gap: 8px; }
.device-notes {
  max-width: 260px;
  margin-left: 16px;
  font-size: 0.72rem;
  color: #6b7fa0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table tr.revoked > * { opacity: 0.5; }

/* Tracinhos de gravação, um por rádio do catálogo (mesmo desenho do
   .radio-ticks do painel do stream). */
.radio-ticks-cell { display: inline-flex; align-items: center; gap: 8px; }
.radio-ticks { display: inline-flex; gap: 2px; flex-shrink: 0; }
.radio-tick {
  display: inline-block;
  width: 4px;
  height: 12px;
  border-radius: 1px;
  background: #4b5563;
}
.radio-tick.ok { background: #34d399; }
.radio-tick.warn { background: #f59e0b; }
.radio-ticks-text { color: var(--bs-secondary-color, #9ca3af); white-space: nowrap; cursor: help; }

/* Pares chave/valor nos cards de detalhe. */
.kv {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 0.82rem;
}
.kv dt { font-weight: 400; color: #6b7fa0; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.hint { font-size: 0.75rem; color: var(--bs-secondary-color, #9ca3af); }
.mono,
pre.json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}
pre.json {
  margin: 4px 0 0;
  padding: 8px 10px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
}

.form-label { font-size: 0.78rem; color: #c5cbd6; margin-bottom: 4px; }
textarea.mono { min-height: 7rem; }


/* Cadastro e instalação: duas colunas no desktop (formulário/passo a passo à
   esquerda, resumo vivo à direita), uma coluna abaixo de lg. */
.wide-page { max-width: 1140px; }
.optional { color: #6b7280; }
.field-ok { margin-top: 4px; font-size: 0.78rem; color: #34d399; }
.map-link { display: inline-block; margin-top: 4px; font-size: 0.78rem; color: #34d399; text-decoration: none; }
.map-link:hover { text-decoration: underline; }
.coords-feedback { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.coords-hint { font-size: 0.78rem; color: #34d399; }
.device-preview {
  padding: 10px 12px;
  border: 1px dashed var(--bs-border-color);
  border-radius: 6px;
  background: #121a24;
}
.device-preview-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.device-preview-top .state-pill { flex-shrink: 0; }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.device-location { margin-left: 16px; font-size: 0.72rem; color: #9ca3af; }

.install-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7fa0;
}
.install-eyebrow .mono { text-transform: none; letter-spacing: 0; }
.install-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  color: #fcd34d;
  overflow-wrap: anywhere;
}
.code-meta { margin-top: 2px; font-size: 0.78rem; color: #9ca3af; }
.code-more { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--bs-border-color); }
.link-quiet { color: #6b7280; font-size: 0.78rem; }
.link-quiet:hover { color: #9ca3af; }
.install-code-card.confirming { border-color: #fbbf24; }
.install-code-card.expired { border-color: #f87171; }
.install-steps { list-style: none; margin: 0; padding: 0; }
.install-steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--bs-border-color);
}
.install-steps li:last-child { border-bottom: 0; }
.install-steps .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #34d399;
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.min-w-0 { min-width: 0; }
.install-command {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
}
/* O comando fica numa linha só, com rolagem horizontal. */
.install-command code { flex: 1; min-width: 0; color: #e5e7eb; white-space: nowrap; overflow-x: auto; }
/* Acompanhamento: card com a borda no verde de destaque. */
.install-live { border-color: #34d399; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.15); }
.install-live .card-header { display: flex; justify-content: space-between; align-items: center; }
.install-live .live-label { font-size: 0.72rem; font-weight: 400; color: #6b7280; }
.install-live .card-footer { background: transparent; }
.install-spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #34d399;
  border-right-color: transparent;
  animation: install-spin 1s linear infinite;
  flex-shrink: 0;
}
@keyframes install-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .install-spin { animation: none; }
}
.install-stages { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.82rem; }
.install-stages li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; color: #9ca3af; }
.install-stages li::before { width: 12px; flex-shrink: 0; }
.install-stages .stage-at { font-size: 0.72rem; color: #6b7280; }
.install-stages li.now { color: #e5e7eb; }
.install-stages li.done { color: #e5e7eb; }
.install-stages li.done::before { content: "✓"; color: #34d399; }
.install-stages li.now::before { content: "●"; color: #fbbf24; }
.install-stages li.next::before { content: "○"; color: #4b5563; }
.next-steps li { color: #c5cbd6; }
/* Instalação no celular: os dois cards da direita viram itens da linha, para
   ficarem antes do passo a passo (order-1, order-2; o passo a passo é order-3). */
@media (max-width: 991.98px) {
  .contents-below-lg { display: contents; }
  .contents-below-lg > * {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
  }
}

/* Passos do assistente: segmentos numerados; o atual em verde. */
.wizard-steps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.wizard-steps button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: #9ca3af;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
}
.wizard-steps button:hover { border-color: #3d4c5e; color: #e5e7eb; }
.wizard-steps .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2c3948;
  font-size: 0.7rem;
}
.wizard-steps .current button { color: #34d399; border-color: #34d399; }
.wizard-steps .current .num { background: #34d399; color: #0f1620; }

/* Emissora no passo 3: subcard no tom do .radio-board do painel. */
.subcard {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.wizard-steps .done .num { background: #1f3a33; color: #34d399; }

.text-ok { color: #34d399; }
.text-warn { color: #fbbf24; }

/* Passo 1: uma linha por emissora, como no protótipo aprovado
   (Rádio | Quando gravar | Arquivos de | ✕; a frequência vem do catálogo);
   no celular, rádio e ✕ em cima, "quando" e minutos embaixo. */
.station-row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--bs-border-color);
}
.station-row:first-child { padding-top: 0; }
.station-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) 32px;
  grid-template-areas: "radio when min x";
  gap: 8px 10px;
  align-items: start;
}
.st-radio { grid-area: radio; }
.st-when { grid-area: when; }
.st-min { grid-area: min; }
.st-x { grid-area: x; align-self: start; padding-top: 1.55rem; text-align: center; }
.station-grid .form-label { font-size: 0.75rem; margin-bottom: 3px; color: #9ca3af; }
.btn-remove {
  background: none;
  border: 0;
  color: #f87171;
  font-size: 1rem;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}
.btn-remove:hover { color: #fca5a5; }
@media (max-width: 767.98px) {
  .station-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 32px;
    grid-template-areas:
      "radio radio x"
      "when min min";
  }
}
.windows-editor { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--bs-border-color); }
.station-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.quick-radio-actions { display: flex; align-items: center; gap: 12px; padding-top: 1.75rem; }
@media (max-width: 767.98px) {
  .quick-radio-actions { padding-top: 0; }
}

/* Faixa captada pelo dongle: alcance em verde, DC tracejado no centro,
   uma marca por emissora (vermelha fora do alcance). Rótulos alternam em
   duas alturas para não se sobreporem com emissoras vizinhas. */
.band { padding: 18px 28px 36px; }
.band-track { position: relative; height: 30px; }
.band-range {
  position: absolute;
  inset: 8px 0;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid #34d399;
  border-radius: 4px;
}
.band-dc {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(50% - 1px);
  width: 2px;
  background: repeating-linear-gradient(#6b7280 0 3px, transparent 3px 6px);
}
.band-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #e5e7eb;
}
.band-tick.out { background: #f87171; }
.band-top,
.band-label {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
}
.band-top { top: -18px; color: #9ca3af; }
.band-label { top: 32px; color: #e5e7eb; }
.band-label.low { top: 46px; }
.band-label.out { color: #f87171; }
/* Perto das pontas, o rótulo cresce para dentro da faixa. */
.band-label.edge-l { transform: none; }
.band-label.edge-r { transform: translateX(-100%); }
.band + .small { margin-top: 10px; }
.manual-center { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.manual-center input { width: 9rem; }

/* Passo 2. */
.measure-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (max-width: 575.98px) {
  .gain-table th,
  .gain-table td { padding-left: 6px; padding-right: 6px; }
}
.gain-used { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-top: 16px; }
.gain-used input { width: 9rem; }

/* Passo 4. */
.review-headline { font-weight: 600; font-size: 1.05rem; }
.review-stations { list-style: none; padding: 0; margin: 6px 0 2px; color: #cbd5e1; font-size: 0.9rem; }
.review-diff { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bs-border-color); }
.publish-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }

.wizard-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wizard-nav-next { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; text-align: right; }

/* Card de acompanhamento da publicação, no detalhe do dispositivo. */
.publish-card { border-color: #34d399; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 3px 0; color: #9ca3af; }
.timeline li::before { display: inline-block; width: 1.3em; }
.timeline li.done { color: #e5e7eb; }
.timeline li.done::before { content: "✓"; color: #34d399; }
.timeline li.now { color: #e5e7eb; }
.timeline li.now::before { content: "●"; color: #fbbf24; }
.timeline li.next::before { content: "○"; color: #4b5563; }
.timeline li.rejected { color: #f87171; }
.timeline li.rejected::before { content: "✕"; }
.timeline-reason { margin: 4px 0 0 1.3rem; font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }

details.advanced > summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: #6b7fa0;
  margin: 12px 0 8px;
}

/* Barra de escuta fixa no rodapé, a mesma do player do painel do stream:
   continua visível ao trocar entre detalhe e assistente do mesmo
   dispositivo; fechar = parar a sessão. */
.audio-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; background: #111827; color: #f9fafb;
  padding: .6rem 1rem; box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
.audio-player-head { display: flex; align-items: center; gap: .75rem; }
.audio-player-title { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-player-status { font-size: .85rem; color: #fcd34d; min-height: 1.2em; }
.audio-player audio { width: 100%; }
body.audio-player-open { padding-bottom: 7rem; }

/* Login: uma coluna centralizada, com o cabeçalho do painel (eyebrow +
   título) e uma linha de propósito -- só o que o sistema é, nada da frota,
   porque esta tela é pública. O traço de sinal em verde é a assinatura
   visual: "corre" devagar como um sinal ao vivo e para quando o sistema pede
   menos movimento. */
.login-screen {
  min-height: calc(100vh - 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-column {
  width: 100%;
  max-width: 340px;
}

.login-signal {
  display: block;
  width: 100%;
  height: 36px;
  margin-bottom: 14px;
}

.login-signal polyline {
  fill: none;
  stroke: #34d399;
  stroke-width: 1.6;
  stroke-opacity: 0.75;
  stroke-linejoin: round;
  stroke-dasharray: 320 320;
  animation: login-signal-run 6s linear infinite;
}

@keyframes login-signal-run {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -640; }
}

@media (prefers-reduced-motion: reduce) {
  .login-signal polyline {
    animation: none;
    stroke-dasharray: none;
  }
}

.login-headline {
  font-size: 1.35rem;
  margin: 4px 0 6px;
}

.login-purpose {
  color: var(--bs-secondary-color, #9ca3af);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* Botão "mostrar/ocultar" colado ao campo, no tom das bordas do tema. */
.login-toggle {
  border: 1px solid var(--bs-border-color);
  color: #6b7fa0;
  font-size: 0.8rem;
}

.login-toggle:hover,
.login-toggle:focus {
  color: var(--bs-body-color);
}

.login-foot {
  margin-top: 14px;
  font-size: 0.75rem;
  color: #6b7fa0;
}

/* Catálogo de rádios: pílula da faixa (FM verde, AM lilás), aviso de
   duplicada e subtítulo do cadastro inline no assistente. */
.band-pill {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 7px;
  border-radius: 10px;
  border: 1px solid currentColor;
  color: #9ca3af;
}
.band-pill.fm { color: #34d399; }
.band-pill.am { color: #a78bfa; }
.duplicate-notice { color: #fbbf24; font-size: 0.85rem; }
.duplicate-notice .link-action { color: #fbbf24; text-decoration: underline; }
.subcard-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }

/* Rádios ao alcance (varredura FM no passo 1): barras de sinal, linha da
   rádio já gravada em destaque e a lista de não detectadas no rodapé. */
.scan-head { color: #9ca3af; font-size: 0.75rem; font-weight: 400; }
.scan-pause,
.scan-empty { padding: 10px 20px; }
.scan-pause { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border-bottom: 1px solid var(--bs-border-color); }
.scan-table tr.recording > * { background: rgba(52, 211, 153, 0.08); }
.sig { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; vertical-align: -1px; }
.sig i { width: 3px; background: #34d399; display: block; }
.sig i.off { background: #2c3948; }
.btn-chip {
  background: none;
  border: 1px solid #34d399;
  color: #34d399;
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
}
.btn-chip:hover { background: rgba(52, 211, 153, 0.1); }
.scan-undetected {
  padding: 8px 20px 10px;
  border-top: 1px solid var(--bs-border-color);
  color: #9ca3af;
  font-size: 0.8rem;
}
.undetected-item { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 0 0; color: #e5e7eb; }
@media (max-width: 575.98px) {
  /* No celular a tabela da varredura cabe sem rolar: menos respiro e sem o id da rádio. */
  .scan-table th,
  .scan-table td { padding: 6px 4px; }
  .scan-table th:first-child,
  .scan-table td:first-child { padding-left: 10px; }
  .scan-table th:last-child,
  .scan-table td:last-child { padding-right: 10px; }
  .scan-table .catalog-id,
  .scan-table .unit { display: none; }
  .scan-table th { white-space: normal; letter-spacing: 0; }
  .scan-table td { font-size: 0.75rem; }
  .scan-pause,
  .scan-empty,
  .scan-undetected { padding-left: 12px; padding-right: 12px; }
}