/* ============================================================================
   SGCP — Radar (fila de trabalho consolidada, spec `radar`).
   Extraído de style="" inline colado na portagem do protótipo — mesmas
   declarações, sem mudança visual. Cores/raios/sombras sempre via tokens
   (tokens.css). Convenção BEM igual à de shell.css/componentes.css/auth.css.
   ============================================================================ */

.sgcp-radar__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sgcp-radar__janelas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sgcp-radar__janela {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-2);
  font: 600 12.5px var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}

.sgcp-radar__janela:hover {
  border-color: var(--brand-text);
}

.sgcp-radar__janela:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.sgcp-radar__janela--ativa {
  border-color: var(--brand-bg);
  background: var(--brand-bg);
  color: var(--on-brand);
}

/* Alternância Lista/Quadro vive na barra de janelas (topo), não na barra de
   filtros do card — posição fiel ao protótipo (`data-screen-label="Radar de
   vencimentos"`). */
.sgcp-radar__alternador-topo {
  margin-left: auto;
}

.sgcp-radar__janela-contagem {
  font: 600 11px var(--font);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: var(--r-full);
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

.sgcp-radar__janela-contagem--ativa {
  background: rgba(255, 255, 255, .25);
  color: var(--on-brand);
}

.sgcp-radar__semaforo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--brand-bg);
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-soft-text);
  font: 600 12.5px var(--font);
}

.sgcp-radar__semaforo-limpar {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}

.sgcp-radar__noscript-btn {
  height: 32px;
  padding: 0 12px;
}

.sgcp-radar__exportar-form {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.sgcp-radar__td-tipo {
  padding: 10px 12px;
  min-width: 0;
}

.sgcp-radar__responsavel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sgcp-radar__responsavel-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-soft-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 9.5px var(--font);
}

.sgcp-radar__dica {
  padding: 8px 14px;
  font: 400 11.5px var(--font);
  color: var(--text-3);
  border-top: 1px solid var(--border);
}

.sgcp-radar__kanban-wrap {
  margin-top: 14px;
}