/* =============================================================================
   plataforma/css/admin.css — DONO: executor R3 (telas do admin, DS v2).
   "Editorial claro sobre vidro" — normativo: docs/design-system-plataforma.md.

   Regras deste arquivo:
   - SÓ tokens --agx-* (agx.css, dono R1). Nenhum valor do tema escuro.
   - Tipografia: Geist Mono APENAS para número, data, contador, eyebrow, slug
     e código; todo texto humano (título, rótulo, descrição) em Geist 480–560.
   - Vermelho puro não existe: destrutivo/perigo é coral (#8C2C2C/#B85C5C via
     --agx-erro-forte/--agx-erro-suave) — doc §2.3.
   - Componentes base ficam em agx.css; aqui entram variações de tela
     (prefixo agx-admin-) + exceções já usadas pelo markup (agx-chip-remover,
     agx-th-ordenar, agx-td-*, agx-popover-item--perigo) e ajustes dos
     componentes EXCLUSIVOS do admin (agx-score, agx-funil, agx-admin-momento).
   ========================================================================== */

/* ————————————————————— tipografia utilitária ————————————————————— */

/* dado bruto: id, slug, código, contagem — mono tabular */
.agx-admin-mono {
  font-family: var(--agx-font-mono);
  font-size: 13px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
}

/* datas e meta curtas ("há 2 dias", "· 12 eventos") — mono tabular */
.agx-admin-meta {
  font-family: var(--agx-font-mono);
  font-size: 12.5px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
}

/* título de página do admin — Geist 560 (nunca mono) */
.agx-admin-titulo {
  font-family: var(--agx-font-sans);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  line-height: 1.15;
  color: var(--agx-texto-titulo);
  margin: 0 0 4px;
}

/* texto de apoio (frases) — Geist, jamais mono */
.agx-admin-ajuda {
  font-family: var(--agx-font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--agx-texto-suporte);
  max-width: 62ch;
  margin: 8px 0;
}

/* contador de resultados ("34 usuários") — número: mono */
.agx-admin-contador {
  font-family: var(--agx-font-mono);
  font-size: 12.5px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
  margin: 12px 0 8px;
}

.agx-admin-voltar { display: inline-block; margin-bottom: 12px; }

/* número ordinal em disco (perguntas, régua) — mono */
.agx-admin-ordinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid var(--agx-navy-16);
  border-radius: var(--agx-radius-pill);
  background: var(--agx-superficie-2);
  font-family: var(--agx-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--agx-acao);
  flex: none;
  box-shadow: var(--agx-shadow-xs);
}

/* rótulo humano de switch ("Ativa", "Publicado") — Geist 560, não mono */
.agx-admin-switch-rotulo {
  font-family: var(--agx-font-sans);
  font-size: 13px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
}

/* ——————————————— cabeçalhos de página (header + eyebrow) ——————————————— */

.agx-admin-cabecalho,
.agx-admin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.agx-admin-cabecalho .eyebrow,
.agx-admin-header .eyebrow { margin-bottom: 6px; }

/* ————————————————————— filtros, chips e contadores ————————————————————— */

.agx-admin-filtros {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.agx-admin-filtros .agx-campo-controle { width: auto; min-width: 180px; }
.agx-admin-filtros .agx-chips { margin-bottom: 0; }

.agx-admin-chips-resumo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.agx-chip-remover,
.agx-admin-chip-remover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  border: none;
  background: none;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  border-radius: var(--agx-radius-pill);
  opacity: 0.75;
}
.agx-chip-remover:hover,
.agx-admin-chip-remover:hover { opacity: 1; }
/* alvo de toque estendido (≥44px) sem inflar o chip */
@media (pointer: coarse) {
  .agx-chip-remover::after,
  .agx-admin-chip-remover::after { content: ""; position: absolute; inset: -12px; }
}

/* ————————————————————— tabelas: complementos premium ————————————————————— */

.agx-th-ordenar { white-space: nowrap; }
.agx-td-selecao { width: 40px; }
.agx-tabela tbody td { vertical-align: middle; }

.agx-admin-linha-clicavel { cursor: pointer; }
.agx-admin-linha-clicavel:hover { background: var(--agx-navy-03); }

.agx-admin-link-forte { text-decoration: none; color: var(--agx-texto-titulo); }
.agx-admin-link-forte strong { font-weight: var(--agx-peso-titulo); }
.agx-admin-link-forte:hover strong { color: var(--agx-secundaria); text-decoration: underline; text-underline-offset: 3px; }

.agx-admin-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.agx-admin-pill-slug { font-family: var(--agx-font-mono); font-size: 11.5px; }
.agx-admin-pill-inline { margin-left: 8px; }

.agx-admin-usuario-cell { display: flex; align-items: center; gap: 10px; }
/* nome + e-mail/negócio sempre empilham (mesmo quando são inline, como <strong>/<span>) */
.agx-admin-usuario-cell > div { display: grid; min-width: 0; }
.agx-admin-usuario-nome {
  font-family: var(--agx-font-sans);
  font-size: 14px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
  letter-spacing: var(--agx-ls-tight);
}
.agx-admin-usuario-negocio { font-size: 12.5px; color: var(--agx-texto-suporte); }
.agx-admin-mais {
  font-family: var(--agx-font-mono);
  font-size: 12px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
}

.agx-admin-mini-barra { width: 72px; flex: none; margin-bottom: 0; }
.agx-admin-progresso-cell { display: flex; align-items: center; gap: 8px; }

/* frase de progresso do lote ("Preparando…") — texto humano, Geist */
.agx-admin-progresso-texto { font-family: var(--agx-font-sans); font-size: 13.5px; color: var(--agx-texto-suporte); }

/* ————————————————————— visão geral ————————————————————— */

.agx-admin-visao { display: grid; gap: 20px; }

/* KPIs: cards de vidro (base .card) com eyebrow mono + número display mono */
.agx-admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.agx-admin-kpi { padding: 22px 24px 20px; gap: 4px; }
.agx-admin-kpi-titulo {
  font-family: var(--agx-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--agx-ls-label);
  text-transform: uppercase;
  color: var(--agx-texto-suporte);
  margin: 0 0 6px;
}
.agx-admin-kpi-valor {
  font-family: var(--agx-font-mono);
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tighter);
  line-height: 1.05;
  color: var(--agx-texto-titulo);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.agx-admin-kpi-sub { display: grid; gap: 6px; margin-top: 12px; }
.agx-admin-kpi-sub-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px auto;
  align-items: center;
  gap: 8px;
}
.agx-admin-kpi-sub-linha .progresso-barra { margin-bottom: 0; height: 5px; }
.agx-admin-kpi-sub-nome {
  font-family: var(--agx-font-sans);
  font-size: 12.5px;
  font-weight: var(--agx-peso-medio);
  color: var(--agx-texto-suporte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agx-admin-kpi-sub-n {
  font-family: var(--agx-font-mono);
  font-size: 12.5px;
  color: var(--agx-texto-titulo);
  font-variant-numeric: tabular-nums;
}

/* As 4 filas de trabalho: cards clicáveis (base .card já dá lift + sheen) */
.agx-admin-filas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.agx-admin-fila {
  align-items: flex-start;
  gap: 6px;
  padding: 20px 22px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.agx-admin-fila-n {
  font-family: var(--agx-font-mono);
  font-size: 30px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tighter);
  line-height: 1.05;
  color: var(--agx-texto-titulo);
  font-variant-numeric: tabular-nums;
}
.agx-admin-fila-rotulo {
  font-family: var(--agx-font-sans);
  font-size: 14px;
  font-weight: var(--agx-peso-medio);
  color: var(--agx-texto-corpo);
  line-height: 1.35;
}
/* urgente = coral (nunca vermelho puro) */
.agx-admin-fila--urgente {
  border-color: var(--agx-borda-erro);
  box-shadow: var(--agx-shadow-card), 0 0 0 0.5px rgba(184, 92, 92, 0.2);
}
.agx-admin-fila--urgente .agx-admin-fila-n { color: var(--agx-erro-forte); }
/* zerada = verde só como sinal de status (doc §7) */
.agx-admin-fila--ok { border-color: rgba(31, 138, 91, 0.35); }
.agx-admin-fila--ok .agx-admin-fila-n { color: var(--agx-sucesso); }
.agx-admin-fila-vazia { font-family: var(--agx-font-sans); font-size: 12.5px; color: var(--agx-sucesso); }

.agx-admin-linha3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.agx-admin-bloco { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.agx-admin-bloco h3 {
  margin: 0;
  font-family: var(--agx-font-sans);
  font-size: 17px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
}
.agx-admin-bloco-vazio { font-family: var(--agx-font-sans); font-size: 13.5px; color: var(--agx-texto-suporte); margin: 4px 0; }

.agx-admin-lista-simples { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agx-admin-lista-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-lista-item:last-child { border-bottom: none; padding-bottom: 0; }
.agx-admin-lista-quando {
  font-family: var(--agx-font-mono);
  font-size: 12.5px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.agx-admin-lista-texto { font-family: var(--agx-font-sans); font-size: 14px; color: var(--agx-texto-corpo); min-width: 0; }

/* ————————————————— grades de cards (produtos, fontes de webhook) ————————— */

.agx-admin-grade-produtos,
.agx-admin-grade-fontes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.agx-admin-card-produto,
.agx-admin-card-fonte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
}
.agx-admin-card-produto-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.agx-admin-card-produto-topo h3 {
  margin: 0;
  font-family: var(--agx-font-sans);
  font-size: 18px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
}
.agx-admin-card-produto-ativos { margin: 0; font-size: 14px; color: var(--agx-texto-corpo); }
.agx-admin-card-produto-ativos strong {
  font-family: var(--agx-font-mono);
  font-size: 18px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
  font-variant-numeric: tabular-nums;
}
.agx-admin-card-produto-webhook { margin: 0; }
.agx-admin-card-produto-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--agx-borda-hairline);
}

/* ————————————————————— seções de configuração ————————————————————— */

.agx-admin-secao { padding: 24px; margin-bottom: 20px; display: block; }
.agx-admin-secao-solta { margin: 28px 0; }
.agx-admin-secao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.agx-admin-secao-titulo {
  font-family: var(--agx-font-sans);
  font-size: 18px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
  margin: 16px 0 10px;
}
.agx-admin-secao > .agx-admin-secao-titulo:first-child,
.agx-admin-secao-topo .agx-admin-secao-titulo { margin-top: 0; }
/* subtítulo de seção = eyebrow mono (assinatura do sistema) */
.agx-admin-secao-subtitulo {
  font-family: var(--agx-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--agx-ls-label);
  text-transform: uppercase;
  color: var(--agx-texto-suporte);
  margin: 16px 0 8px;
}
.agx-admin-secao-interna {
  border-top: 1px solid var(--agx-borda-hairline);
  margin-top: 16px;
  padding-top: 8px;
}

.agx-admin-form-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.agx-admin-campo-ordem {
  width: 64px;
  padding: 8px 10px;
  text-align: center;
  font-family: var(--agx-font-mono);
  font-variant-numeric: tabular-nums;
}
.agx-admin-campo-curto { max-width: 160px; }
.agx-admin-campo-switch { display: flex; align-items: center; min-height: 48px; }
.agx-admin-campo-com-acao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agx-admin-campo-com-acao .agx-campo-controle { flex: 1 1 200px; }

/* barra salvar embutida na página (base sticky vem de .agx-barra-salvar) */
.agx-admin-barra {
  margin-top: 16px;
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card);
}

.agx-admin-checklist { display: grid; gap: 10px; }
/* Checkbox próprio do admin (label > input + span caixa + .agx-admin-check-texto).
   Autocontido — não herda nada do .check-passo do aluno (agx.css). */
.agx-admin-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  cursor: pointer;
}
.agx-admin-check > input { position: absolute; opacity: 0; }
.agx-admin-check > input + span {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--agx-navy-25);
  border-radius: 6px;
  background: var(--agx-superficie-2);
  position: relative;
  transition: all 0.16s ease;
  box-shadow: var(--agx-shadow-xs);
}
.agx-admin-check > input:checked + span {
  background: var(--agx-acao-gradiente);
  border-color: var(--agx-acao);
}
.agx-admin-check > input:checked + span::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
.agx-admin-check > input:focus-visible + span {
  outline: 3px solid rgba(10, 31, 59, 0.15);
  outline-offset: 1px;
}
.agx-admin-check > input:disabled + span { opacity: 0.55; }
.agx-admin-check:has(> input:disabled) { cursor: default; }
.agx-admin-check-texto {
  flex: 1;
  min-width: 0;
  font-family: var(--agx-font-sans);
  font-size: 14.5px;
  color: var(--agx-texto-corpo);
}

/* Zona de perigo: coral, nunca vermelho puro (doc §2.3) */
.agx-admin-zona-perigo {
  border-top: 1px solid var(--agx-borda-erro);
  margin-top: 16px;
  padding-top: 16px;
}
.agx-admin-zona-perigo .agx-admin-secao-titulo { color: var(--agx-erro-forte); }
section.agx-admin-zona-perigo,
.card.agx-admin-zona-perigo {
  border: 1px solid var(--agx-borda-erro);
  padding-top: 24px;
  background: linear-gradient(180deg, rgba(184, 92, 92, 0.03), transparent 42%), var(--agx-superficie-3);
  box-shadow: var(--agx-shadow-card), 0 0 0 0.5px rgba(184, 92, 92, 0.14);
}

/* ————————————————— régua de momentos + steppers em pílulas ————————————— */

.agx-admin-regua-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-regua-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.agx-admin-acoes-linha { display: flex; align-items: center; gap: 4px; flex: none; }
.agx-admin-stepper-preview { margin-top: 8px; }

/* Stepper de momento (detalhe do usuário) e preview da régua: pílulas.
   Sobrescreve o stepper base (agx.css §15) SÓ nesses dois contextos. */
.agx-admin-momento { margin: 14px 0; }
.agx-admin-momento .agx-stepper,
.agx-stepper.agx-admin-stepper-preview {
  flex-direction: row; /* vence o modo vertical mobile do stepper base */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* especificidade tripla: precisa vencer as regras mobile do stepper base
   (.agx-stepper:not(--horizontal) .agx-stepper-passo, agx.css §15 @599px) */
.agx-admin-momento .agx-stepper .agx-stepper-passo,
.agx-stepper.agx-admin-stepper-preview .agx-stepper-passo {
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--agx-navy-16);
  border-radius: var(--agx-radius-pill);
  background: var(--agx-superficie-2);
  box-shadow: var(--agx-shadow-xs);
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.agx-admin-momento .agx-stepper .agx-stepper-passo::before,
.agx-stepper.agx-admin-stepper-preview .agx-stepper-passo::before { display: none; }
.agx-admin-momento .agx-stepper-no,
.agx-admin-stepper-preview .agx-stepper-no {
  width: 22px;
  height: 22px;
  border: none;
  background: var(--agx-navy-06);
  color: var(--agx-texto-suporte);
  box-shadow: none;
}
.agx-admin-momento .agx-stepper-rotulo,
.agx-admin-stepper-preview .agx-stepper-rotulo {
  font-size: 13px;
  color: var(--agx-texto-corpo);
  white-space: nowrap;
}
.agx-admin-momento .agx-stepper .agx-stepper-passo--feito {
  background: var(--agx-navy-04);
  border-color: var(--agx-navy-20);
}
.agx-admin-momento .agx-stepper .agx-stepper-passo--feito .agx-stepper-no {
  background: var(--agx-acao-gradiente);
  color: #FFFFFF;
}
.agx-admin-momento .agx-stepper .agx-stepper-passo--atual,
.agx-stepper.agx-admin-stepper-preview .agx-stepper-passo--atual {
  background: var(--agx-acao-gradiente);
  border-color: transparent;
  box-shadow: var(--agx-shadow-nav-ativa);
}
.agx-admin-momento .agx-stepper-passo--atual .agx-stepper-no,
.agx-admin-stepper-preview .agx-stepper-passo--atual .agx-stepper-no {
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  box-shadow: none;
}
.agx-admin-momento .agx-stepper-passo--atual .agx-stepper-rotulo,
.agx-admin-stepper-preview .agx-stepper-passo--atual .agx-stepper-rotulo {
  color: #FFFFFF;
  font-weight: var(--agx-peso-titulo);
}
.agx-admin-momento button.agx-stepper-no { position: relative; cursor: pointer; }
.agx-admin-momento button.agx-stepper-no:hover { background: var(--agx-navy-12); }
.agx-admin-momento .agx-stepper-passo--atual button.agx-stepper-no:hover,
.agx-admin-momento .agx-stepper-passo--feito button.agx-stepper-no:hover { background: var(--agx-acao-deep); }
@media (pointer: coarse) {
  /* alvo ≥44px sem inflar a pílula */
  .agx-admin-momento button.agx-stepper-no::after { content: ""; position: absolute; inset: -11px; }
}

/* ————————————————— webhooks: endpoint, segredos, payload ————————————————— */

.agx-admin-fonte {
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card);
  background: var(--agx-superficie-2);
  padding: 14px;
  margin: 12px 0;
  display: grid;
  gap: 10px;
  box-shadow: var(--agx-shadow-xs);
}
.agx-admin-fonte-topo { display: flex; align-items: center; gap: 10px; }

/* endpoint: bloco de código claro (superficie-1).
   A URL encolhe com reticências; o «Copiar» fica sempre visível à direita
   (overflow-x no contêiner empurrava o botão para fora da área visível). */
.agx-admin-endpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--agx-superficie-1);
  border: 1px solid var(--agx-borda-hairline);
  border-radius: 12px;
  padding: 9px 12px;
}
.agx-admin-endpoint code {
  font-family: var(--agx-font-mono);
  font-size: 12.5px;
  color: var(--agx-texto-titulo);
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agx-admin-endpoint .botao-copiar { flex: none; margin-left: auto; }

.agx-admin-chips-codigo { display: flex; gap: 8px; flex-wrap: wrap; }
.agx-admin-chip-codigo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--agx-superficie-1);
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-pill);
  padding: 4px 6px 4px 12px;
}
.agx-admin-chip-codigo code {
  font-family: var(--agx-font-mono);
  font-size: 12px;
  color: var(--agx-texto-titulo);
}

.agx-admin-linha-adicionar-codigo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.agx-admin-linha-adicionar-codigo .agx-campo-controle { flex: 1 1 240px; }

.agx-admin-linha-agenda {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-linha-agenda:last-of-type { border-bottom: none; }

/* payload / segredo: viewer de código claro — superficie-1, mono 12.5px */
.agx-admin-bloco-segredo,
.agx-admin-bloco-payload { margin: 12px 0; }
.agx-admin-bloco-segredo pre,
.agx-admin-bloco-payload pre {
  background: var(--agx-superficie-1);
  padding: 16px 18px;
}
.agx-admin-bloco-segredo pre code,
.agx-admin-bloco-payload pre code {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--agx-texto-corpo);
}
.agx-admin-bloco-payload pre { max-height: 50dvh; overflow: auto; }
.agx-admin-runbook {
  margin: 12px 0 0 18px;
  display: grid;
  gap: 8px;
  font-family: var(--agx-font-sans);
  font-size: 14px;
  color: var(--agx-texto-corpo);
}

/* ————————————————————— conteúdos: tabela e árvore ————————————————————— */

.agx-admin-capa-mini {
  width: 56px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--agx-borda-hairline);
  flex: none;
  box-shadow: var(--agx-shadow-xs);
}
.agx-admin-capa-mini--vazia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--agx-superficie-1);
  font-size: 14px;
}
.agx-admin-link-curso {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--agx-texto-titulo);
}
.agx-admin-link-curso strong { font-weight: var(--agx-peso-titulo); }
.agx-admin-link-curso:hover strong { color: var(--agx-secundaria); text-decoration: underline; text-underline-offset: 3px; }

.agx-admin-modulo { padding: 18px 20px; margin: 14px 0; display: block; }
.agx-admin-modulo-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agx-admin-modulo-nome {
  margin: 0;
  font-family: var(--agx-font-sans);
  font-size: 16px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
  flex: 1;
  min-width: 120px;
}
.agx-admin-modulo-topo .agx-admin-acoes-linha { margin-left: auto; }
.agx-admin-callout-ordem { margin: 12px 0; }

.agx-admin-linha-aula {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-linha-aula-nome { flex: 1; min-width: 120px; font-family: var(--agx-font-sans); font-size: 14.5px; color: var(--agx-texto-corpo); }
.agx-admin-acoes-ordem { gap: 0; }

.agx-admin-player-preview { margin: 8px 0 16px; }
.agx-admin-player-preview iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card);
  background: var(--agx-superficie-1);
  box-shadow: var(--agx-shadow-md);
}

.agx-admin-linha-material {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-linha-material-nome { flex: 1; min-width: 100px; font-family: var(--agx-font-sans); font-size: 14px; color: var(--agx-texto-corpo); }
.agx-admin-linha-material--novo { border-bottom: none; flex-wrap: wrap; }
.agx-admin-linha-material--novo .agx-campo-controle { flex: 1 1 220px; }

/* ————————————————— tutoriais (editor, anexar, listas) ————————————————— */

.agx-admin-tutoriais-alvo {
  border-top: 1px dashed var(--agx-navy-16);
  margin-top: 14px;
  padding-top: 6px;
}
.agx-admin-tutoriais-alvo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.agx-admin-linha-tutorial {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-linha-tutorial:last-child { border-bottom: none; }
.agx-admin-linha-tutorial strong { flex: 1; min-width: 120px; font-size: 14.5px; font-weight: var(--agx-peso-titulo); color: var(--agx-texto-titulo); }
.agx-admin-linha-tutorial-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agx-admin-linha-tutorial-info strong { flex: none; }
.agx-admin-lista-tutoriais { margin-top: 8px; }

.agx-admin-md-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.agx-admin-md-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
/* Markdown cru = código → mono */
.agx-admin-md-textarea {
  font-family: var(--agx-font-mono);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  min-height: 260px;
}
.agx-admin-md-preview-wrap { min-width: 0; }
.agx-admin-md-preview {
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card);
  padding: 16px 18px;
  max-height: 480px;
  overflow: auto;
  background: var(--agx-superficie-2);
  box-shadow: var(--agx-shadow-xs);
}
.agx-admin-md-preview img { max-width: 100%; }

.agx-admin-seletor-alvo { display: grid; gap: 0; }
.agx-admin-abas-anexar { margin-bottom: 12px; }
.agx-admin-lista-anexar { display: grid; gap: 0; margin-top: 10px; }
.agx-admin-linha-anexar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-linha-anexar > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ————————————————————— mentorias (admin) ————————————————————— */

.agx-admin-vagas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agx-admin-vagas-barra {
  width: 64px;
  height: 5px;
  border-radius: var(--agx-radius-pill);
  background: var(--agx-track-progresso);
  box-shadow: var(--agx-track-progresso-inset);
  overflow: hidden;
  flex: none;
}
.agx-admin-vagas-preenchido { height: 100%; background: var(--agx-fill-progresso); border-radius: var(--agx-radius-pill); }
.agx-admin-vagas--lotada .agx-admin-vagas-preenchido { background: var(--agx-grafico-4); }

.agx-admin-lista-presenca { display: grid; gap: 0; margin: 12px 0; }
.agx-admin-linha-presenca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-linha-presenca-info { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.agx-admin-select-status { width: auto; padding: 6px 32px 6px 10px; font-size: 13px; }
.agx-admin-resultados-busca { display: grid; gap: 0; margin-top: 8px; }

/* ————————————————————— menus "⋯" (popover) ————————————————————— */

.agx-admin-menu,
.agx-admin-menu-acoes { display: flex; flex-direction: column; min-width: 200px; padding: 4px; }
.agx-admin-menu-item { text-align: left; }
.agx-admin-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
/* item destrutivo: coral (doc §2.3 — erro-suave; hover intensifica p/ erro-forte) */
.agx-admin-menu-item--perigo,
.agx-popover-item--perigo { color: var(--agx-erro-suave); }
.agx-admin-menu-item--perigo:hover,
.agx-popover-item--perigo:hover { background: rgba(184, 92, 92, 0.08); color: var(--agx-erro-forte); }

/* ————————————————— formulários: builder + preview ————————————————— */

.agx-admin-builder {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
}
.agx-admin-builder-col { min-width: 0; }
.agx-admin-builder-preview {
  position: sticky;
  top: calc(var(--agx-topo-altura) + 16px);
  border: 1px solid var(--agx-borda-sutil);
  border-radius: var(--agx-radius-card-lg);
  padding: 20px 22px;
  background: var(--agx-superficie-3b);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--agx-shadow-card);
  max-height: calc(100dvh - var(--agx-topo-altura) - 48px);
  overflow: auto;
}
.agx-admin-builder-lista { display: grid; gap: 14px; margin: 16px 0; }

.agx-admin-pergunta { padding: 18px 20px; display: block; }
.agx-admin-pergunta-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.agx-admin-pergunta-topo .agx-admin-acoes-linha { margin-left: auto; }
/* id da pergunta = slug → mono */
.agx-admin-pergunta-id {
  font-family: var(--agx-font-mono);
  font-size: 11.5px;
  color: var(--agx-texto-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
}

.agx-admin-opcoes { margin-top: 4px; }
.agx-admin-opcao-linha { display: flex; align-items: center; gap: 8px; margin: 6px 0; }

.agx-admin-lgpd {
  border: 1px dashed var(--agx-navy-16);
  border-radius: var(--agx-radius-card);
  background: var(--agx-superficie-0);
  padding: 14px 16px;
  color: var(--agx-texto-suporte);
  margin-top: 8px;
}
.agx-admin-lgpd-titulo {
  font-family: var(--agx-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--agx-ls-label);
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--agx-texto-suporte);
}
.agx-admin-lgpd-texto { font-family: var(--agx-font-sans); font-size: 13px; margin: 4px 0 0; color: var(--agx-texto-suporte); }

.agx-admin-btn-preview { margin-left: 12px; }
.agx-admin-preview-form { display: grid; gap: 0; }
.agx-admin-preview-multi { display: grid; gap: 8px; }
.agx-admin-preview-escala { display: flex; gap: 6px; flex-wrap: wrap; }
.agx-admin-escala-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--agx-navy-16);
  border-radius: var(--agx-radius-pill);
  background: var(--agx-superficie-2);
  font-family: var(--agx-font-mono);
  font-size: 12px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
}
.agx-admin-campo-moeda { display: flex; align-items: center; gap: 8px; }
.agx-admin-campo-moeda .agx-campo-controle { flex: 1; }
.agx-admin-radio-item { display: inline-flex; align-items: center; gap: 8px; margin-right: 16px; font-size: 14.5px; }

/* ————————————————— respostas: pares e agregado ————————————————— */

.agx-admin-pares { display: grid; gap: 12px; margin: 0; }
.agx-admin-pares dt { font-size: 13px; color: var(--agx-texto-suporte); }
.agx-admin-pares dd { margin: 2px 0 8px; font-size: 15px; color: var(--agx-texto-corpo); }
.agx-admin-par { margin: 0; }
.agx-admin-par-pergunta { margin: 0; font-size: 13px; color: var(--agx-texto-suporte); }
.agx-admin-par-resposta { margin: 2px 0 0; font-size: 15px; color: var(--agx-texto-corpo); }
.agx-admin-par-removido,
.agx-admin-par-removido .agx-admin-par-pergunta { color: var(--agx-texto-tenue); font-style: italic; }
.agx-admin-consentimento { border-top: 1px solid var(--agx-borda-hairline); padding-top: 10px; }

.agx-admin-agregado { margin-bottom: 16px; }
.agx-admin-agregado-resumo { margin: 4px 0 10px; font-size: 15px; color: var(--agx-texto-corpo); }
.agx-admin-barra-linha {
  display: grid;
  grid-template-columns: minmax(80px, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}
.agx-admin-barra-linha--mini { grid-template-columns: minmax(48px, 80px) minmax(0, 1fr) auto; }
.agx-admin-barra-rotulo {
  font-family: var(--agx-font-sans);
  font-size: 13px;
  color: var(--agx-texto-corpo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agx-admin-barra-trilho {
  height: 8px;
  border-radius: var(--agx-radius-pill);
  background: var(--agx-track-progresso);
  box-shadow: var(--agx-track-progresso-inset);
  overflow: hidden;
}
.agx-admin-barra-preenchido { height: 100%; background: var(--agx-fill-progresso); border-radius: var(--agx-radius-pill); }
.agx-admin-barra-valor { flex: none; }
.agx-admin-lista-textos { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--agx-texto-corpo); }

/* ————————————— usuários: lote, atalhos, rádios ————————————— */

.agx-admin-atalhos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.agx-admin-radio-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--agx-texto-corpo);
  margin: 8px 0;
  cursor: pointer;
}

/* ————————————————————— usuário: detalhe ————————————————————— */

.agx-admin-detalhe { display: grid; gap: 20px; }

.agx-admin-perfil-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.agx-admin-perfil-ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.agx-admin-perfil-negocio { margin: 2px 0 0; font-size: 13.5px; color: var(--agx-texto-suporte); }
.agx-admin-perfil-contatos {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--agx-texto-corpo);
}
/* carimbos = datas → mono */
/* o e-mail copiável fica na linha com os demais contatos —
   .botao-copiar (agx.css) traz margin-left:auto do cabeçalho de código */
.agx-admin-perfil-contatos .botao-copiar { margin-left: 0; }
.agx-admin-perfil-carimbos {
  margin: 4px 0 0;
  font-family: var(--agx-font-mono);
  font-size: 12px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
}
.agx-admin-perfil-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.agx-admin-matricula { padding: 22px 24px; margin-bottom: 16px; display: block; }
.agx-admin-matricula-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agx-admin-matricula-cab h3 {
  font-family: var(--agx-font-sans);
  font-size: 17px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
  margin: 0;
}
.agx-admin-matricula-prazo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-size: 14px;
  color: var(--agx-texto-corpo);
}
.agx-admin-matricula-progresso { display: grid; gap: 8px; margin: 12px 0; }
.agx-admin-matricula-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.agx-admin-progresso-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto auto;
  align-items: center;
  gap: 10px;
}
.agx-admin-progresso-linha .progresso-barra { margin-bottom: 0; }
.agx-admin-progresso-nome {
  font-family: var(--agx-font-sans);
  font-size: 14px;
  color: var(--agx-texto-corpo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agx-admin-notas { border-top: 1px solid var(--agx-borda-hairline); margin-top: 14px; padding-top: 12px; }
.agx-admin-notas-lista { display: grid; gap: 10px; }
.agx-admin-nota {
  background: var(--agx-superficie-0);
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card);
  padding: 12px 14px;
}
.agx-admin-nota-texto { margin: 0; font-size: 14px; color: var(--agx-texto-corpo); white-space: pre-wrap; }
.agx-admin-nota-meta {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--agx-texto-suporte);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.agx-admin-nota-acoes { display: inline-flex; gap: 8px; }
.agx-admin-nota-editar { display: flex; gap: 8px; margin-top: 8px; }
/* excluir nota: coral, nunca vermelho puro */
.agx-admin-nota-excluir { color: var(--agx-erro-suave); }
.agx-admin-nota-excluir:hover { color: var(--agx-erro-forte); }
.agx-admin-nota-nova { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.agx-admin-nota-nova .agx-campo-controle,
.agx-admin-nota-nova textarea { flex: 1 1 240px; }

.agx-admin-historico { margin-top: 14px; }
.agx-admin-historico summary { cursor: pointer; font-size: 13.5px; color: var(--agx-texto-suporte); }
.agx-admin-historico summary:hover { color: var(--agx-texto-titulo); }
.agx-admin-historico-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.agx-admin-historico-item {
  font-size: 13px;
  color: var(--agx-texto-corpo);
  padding-left: 12px;
  border-left: 2px solid var(--agx-borda-hairline);
}

/* ——————————— usuário: aba atividade (score, funil, heatmap, picos) ——————— */

.agx-admin-atividade { display: grid; gap: 16px; }

/* score de adoção: número display em mono (componente é exclusivo do admin) */
.agx-score-valor {
  font-family: var(--agx-font-mono);
  font-size: clamp(30px, 2.6vw, 38px);
  letter-spacing: var(--agx-ls-tighter);
}
.agx-score { padding: 22px 24px; }

/* funil: escala navy → #C4CFDD do doc (§2.7) por etapa */
.agx-funil { padding: 22px 24px; }
.agx-funil-etapa:nth-child(1) .agx-funil-preenchido { background: var(--agx-grafico-1); }
.agx-funil-etapa:nth-child(2) .agx-funil-preenchido { background: var(--agx-grafico-2); }
.agx-funil-etapa:nth-child(3) .agx-funil-preenchido { background: var(--agx-grafico-3); }
.agx-funil-etapa:nth-child(4) .agx-funil-preenchido { background: var(--agx-grafico-4); }
.agx-funil-etapa:nth-child(n+5) .agx-funil-preenchido { background: var(--agx-grafico-5); }

.agx-admin-heatmap-card { padding: 22px 24px; display: block; }
.agx-admin-heatmap-card h3,
.agx-admin-picos-card h3,
.agx-admin-timeline-card h3 {
  font-family: var(--agx-font-sans);
  font-size: 17px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
  margin: 0 0 12px;
}
.agx-admin-heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }

.agx-admin-picos-card { padding: 22px 24px; display: block; }
.agx-admin-picos {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 96px;
  margin-top: 10px;
}
.agx-admin-pico {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1;
  height: 100%;
}
.agx-admin-pico-barra {
  width: 100%;
  max-width: 32px;
  min-height: 2px;
  background: linear-gradient(180deg, var(--agx-grafico-2), var(--agx-grafico-1));
  border-radius: 6px 6px 2px 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* rótulo do pico = dia abreviado (data) → mono */
.agx-admin-pico-rotulo { font-family: var(--agx-font-mono); font-size: 11px; color: var(--agx-texto-suporte); }
.agx-admin-timeline-card { padding: 22px 24px; display: block; }

/* ————————————————— respostas do usuário ————————————————— */

.agx-admin-resposta { padding: 22px 24px; margin-bottom: 14px; display: block; }
.agx-admin-resposta-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.agx-admin-resposta-cab h3 {
  font-family: var(--agx-font-sans);
  font-size: 17px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
  margin: 0;
}
/* "enviado há 3 dias" = data → mono */
.agx-admin-resposta-quando {
  font-family: var(--agx-font-mono);
  font-size: 12px;
  color: var(--agx-texto-suporte);
  font-variant-numeric: tabular-nums;
}

/* ————————————————————— criar usuário ————————————————————— */

.agx-admin-form-novo { display: grid; gap: 16px; max-width: 760px; }
.agx-admin-card-form { padding: 24px; display: block; }
.agx-admin-card-form .agx-admin-secao-titulo:first-child { margin-top: 0; }
.agx-admin-form-rodape { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.agx-admin-repetidor { display: grid; gap: 12px; }
.agx-admin-repetidor-linha {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-repetidor-linha .agx-campo { margin-bottom: 0; flex: 1 1 160px; }

/* ————————————————————— mobile ≤959px ————————————————————— */

@media (max-width: 959px) {
  .agx-admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agx-admin-filas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agx-admin-form-grade,
  .agx-admin-md-split { grid-template-columns: minmax(0, 1fr); }
  .agx-admin-builder { grid-template-columns: minmax(0, 1fr); }
  .agx-admin-builder-preview { display: none; } /* preview vira modal (botão "Ver preview") */
  .agx-td-oculta-mobile { display: none; }

  /* heatmap rola com fade na borda direita */
  .agx-admin-heatmap-wrap {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }

  /* — Tabelas do admin viram cards claros com micro-rótulos (td[data-rotulo]) — */
  .agx-admin-tabela-webhooks,
  .agx-admin-tabela-cursos,
  .agx-admin-tabela-forms,
  .agx-admin-tabela-respostas,
  .agx-admin-tabela-mentorias { display: block; }
  .agx-admin-tabela-webhooks thead,
  .agx-admin-tabela-cursos thead,
  .agx-admin-tabela-forms thead,
  .agx-admin-tabela-respostas thead,
  .agx-admin-tabela-mentorias thead { display: none; }
  .agx-admin-tabela-webhooks tbody,
  .agx-admin-tabela-cursos tbody,
  .agx-admin-tabela-forms tbody,
  .agx-admin-tabela-respostas tbody,
  .agx-admin-tabela-mentorias tbody { display: flex; flex-direction: column; gap: 12px; }
  .agx-admin-tabela-webhooks tbody tr,
  .agx-admin-tabela-cursos tbody tr,
  .agx-admin-tabela-forms tbody tr,
  .agx-admin-tabela-respostas tbody tr,
  .agx-admin-tabela-mentorias tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 14px 16px;
    background: var(--agx-superficie-2);
    border: 1px solid var(--agx-borda-hairline);
    border-radius: var(--agx-radius-card);
    box-shadow: var(--agx-shadow-sm);
  }
  .agx-admin-tabela-webhooks tbody td,
  .agx-admin-tabela-cursos tbody td,
  .agx-admin-tabela-forms tbody td,
  .agx-admin-tabela-respostas tbody td,
  .agx-admin-tabela-mentorias tbody td {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    min-width: 0;
  }
  /* micro-rótulo mono acima do valor (mesmo padrão da tabela de usuários) */
  .agx-admin-tabela-webhooks tbody td[data-rotulo],
  .agx-admin-tabela-cursos tbody td[data-rotulo],
  .agx-admin-tabela-forms tbody td[data-rotulo],
  .agx-admin-tabela-respostas tbody td[data-rotulo],
  .agx-admin-tabela-mentorias tbody td[data-rotulo] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .agx-admin-tabela-webhooks tbody td[data-rotulo]::before,
  .agx-admin-tabela-cursos tbody td[data-rotulo]::before,
  .agx-admin-tabela-forms tbody td[data-rotulo]::before,
  .agx-admin-tabela-respostas tbody td[data-rotulo]::before,
  .agx-admin-tabela-mentorias tbody td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-family: var(--agx-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: var(--agx-ls-wide);
    text-transform: uppercase;
    color: var(--agx-texto-suporte);
  }
  /* célula-título ocupa a linha inteira do card */
  .agx-admin-tabela-cursos tbody td:first-child,
  .agx-admin-tabela-forms tbody td:first-child,
  .agx-admin-tabela-respostas tbody td:first-child,
  .agx-admin-tabela-mentorias tbody td:nth-child(2) { flex: 1 1 100%; }
  /* menu "⋯" encosta à direita */
  .agx-admin-tabela-webhooks tbody td:last-child,
  .agx-admin-tabela-cursos tbody td:last-child,
  .agx-admin-tabela-mentorias tbody td:last-child { margin-left: auto; }
}

/* ————————————————————— mobile ≤599px (390 real) ————————————————————— */

@media (max-width: 599px) {
  .agx-admin-kpis,
  .agx-admin-filas,
  .agx-admin-linha3 { grid-template-columns: minmax(0, 1fr); }
  .agx-admin-kpi-valor { font-size: 30px; }
  .agx-admin-cabecalho,
  .agx-admin-header { align-items: stretch; flex-direction: column; }
  .agx-admin-cabecalho .agx-btn,
  .agx-admin-header .agx-btn { align-self: flex-start; }
  .agx-admin-perfil-header { flex-direction: column; }
  .agx-admin-linha-aula { flex-wrap: wrap; }
  .agx-admin-linha-aula-nome { flex-basis: 100%; order: -1; }
  /* linhas de tutorial/material/régua quebram — as ações caem para a fileira
     de baixo em vez de estourar os 390px */
  .agx-admin-linha-tutorial,
  .agx-admin-linha-material,
  .agx-admin-regua-item { flex-wrap: wrap; }
  .agx-admin-linha-tutorial > strong { flex-basis: 100%; min-width: 0; order: -1; }
  .agx-admin-acoes-linha { gap: 0; }
  /* pílulas de momento: rótulos longos podem quebrar dentro da pílula */
  .agx-admin-momento .agx-stepper-rotulo,
  .agx-admin-stepper-preview .agx-stepper-rotulo { white-space: normal; }
  .agx-admin-modulo-topo .agx-admin-acoes-linha { margin-left: 0; }
  .agx-admin-progresso-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .agx-admin-progresso-linha .progresso-barra { display: none; }
  .agx-admin-endpoint { flex-wrap: nowrap; }
  .agx-admin-barra-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .agx-admin-barra-linha .agx-admin-barra-trilho { grid-column: 1 / -1; }

  /* filtros: campos quebram; chips rolam em fileira única com fade */
  .agx-admin-filtros { gap: 8px; }
  .agx-admin-filtros .agx-campo-controle { min-width: 0; flex: 1 1 140px; }
  .agx-admin-filtros .agx-chips {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
  }
}

/* ————————————————————— toque: alvos ≥44px ————————————————————— */

@media (pointer: coarse) {
  .agx-admin-menu-item,
  .agx-admin-menu .agx-popover-item,
  .agx-admin-menu-acoes .agx-popover-item { min-height: 44px; }
  .agx-admin-endpoint .botao-copiar,
  .agx-admin-bloco-segredo .botao-copiar,
  .agx-admin-bloco-payload .botao-copiar { min-height: 36px; position: relative; }
  .agx-admin-endpoint .botao-copiar::after,
  .agx-admin-bloco-segredo .botao-copiar::after,
  .agx-admin-bloco-payload .botao-copiar::after { content: ""; position: absolute; inset: -4px; }
  .agx-admin-campo-ordem { min-height: 42px; }
}

/* ————————————————————— movimento reduzido ————————————————————— */

@media (prefers-reduced-motion: reduce) {
  .agx-admin-momento .agx-stepper-passo,
  .agx-admin-stepper-preview .agx-stepper-passo { transition: none; }
}

/* =============================================================================
   Customer Success (telas #/admin/cs/* + aba CS do usuário) — plano §D.1.
   Prefixo agx-admin-cs-*: componentes que não existem no agx.css (quadro de
   colunas, card de aprovação, killswitch). Tokens do DS v2 apenas.
   ============================================================================= */

.agx-admin-cs { display: grid; gap: 16px; }

/* ————— navegação de período (semana do FUP, mês do fechamento) ————— */

.agx-admin-cs-semana { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agx-admin-cs-semana-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  font-family: var(--agx-font-mono);
  font-size: 13px;
  color: var(--agx-texto-corpo);
  font-variant-numeric: tabular-nums;
}
/* as setas nunca se separam do rótulo (só o atalho «voltar» quebra linha) */
.agx-admin-cs-semana > .agx-btn--pequeno { flex: 0 0 auto; }
.agx-admin-cs-semana > .agx-btn--link { flex: 1 0 100%; }

/* ————— avisos de topo (killswitch, erros de fila, sincronismo) ————— */

.agx-admin-cs-avisos { display: grid; gap: 8px; margin-bottom: 12px; }
.agx-admin-cs-alerta { margin: 0; }

/* contador ao lado de aba/coluna — número sempre mono */
.agx-admin-cs-contador {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--agx-radius-pill);
  background: var(--agx-navy-08);
  font-family: var(--agx-font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--agx-texto-corpo);
  text-align: center;
}

/* ————— card de FUP / quarentena ————— */

.agx-admin-cs-card { padding: 20px 22px; display: grid; gap: 12px; }
.agx-admin-cs-card-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.agx-admin-cs-card-topo strong { font-weight: var(--agx-peso-titulo); color: var(--agx-texto-titulo); }

.agx-admin-cs-pauta {
  padding: 12px 14px;
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card);
  background: var(--agx-navy-03);
  display: grid;
  gap: 6px;
}
.agx-admin-cs-pauta .eyebrow { margin: 0; }
.agx-admin-cs-pauta-corpo { display: grid; gap: 6px; }
.agx-admin-cs-pauta-linha { margin: 0; font-size: 14px; color: var(--agx-texto-corpo); }
.agx-admin-cs-sinais {
  margin: 0;
  font-family: var(--agx-font-mono);
  font-size: 11.5px;
  color: var(--agx-texto-suporte);
}
.agx-admin-cs-lista {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--agx-texto-corpo);
  display: grid;
  gap: 3px;
}

/* textarea de mensagem: cresce com o texto (auto-height no JS) */
textarea.agx-admin-cs-mensagem {
  min-height: 72px;
  overflow: hidden;
  line-height: 1.55;
}
.agx-admin-cs-editado { margin: 0; color: var(--agx-secundaria); }
.agx-admin-cs-mensagem-lida {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--agx-radius-card);
  background: var(--agx-superficie-0);
  border: 1px solid var(--agx-borda-hairline);
  white-space: pre-wrap;
  font-size: 14.5px;
  color: var(--agx-texto-corpo);
}

.agx-admin-cs-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.agx-admin-cs-fila { display: grid; gap: 6px; }
.agx-admin-cs-fila-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
.agx-admin-cs-erro { color: var(--agx-erro-forte); }

.agx-admin-cs-resposta { display: grid; gap: 6px; justify-items: start; }
.agx-admin-cs-inbound {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--agx-secundaria);
  border-radius: 0 var(--agx-radius-card) var(--agx-radius-card) 0;
  background: var(--agx-navy-03);
  white-space: pre-wrap;
  font-size: 14.5px;
  color: var(--agx-texto-corpo);
}

.agx-admin-cs-barra-lote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px dashed var(--agx-borda-media);
  border-radius: var(--agx-radius-card);
}
.agx-admin-cs-barra-lote .agx-admin-ajuda { margin: 0; }

/* ————— quarentena ————— */

.agx-admin-cs-trecho {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--agx-radius-card);
  background: var(--agx-superficie-0);
  font-size: 14px;
  color: var(--agx-texto-corpo);
  white-space: pre-wrap;
}
.agx-admin-cs-trecho--oculto { color: var(--agx-texto-suporte); font-style: italic; white-space: normal; }
.agx-admin-cs-busca { display: grid; gap: 8px; margin-top: 8px; }
.agx-admin-cs-resultados { display: grid; gap: 2px; }
.agx-admin-cs-opcoes { display: grid; gap: 10px; margin-bottom: 8px; }
.agx-admin-cs-opcoes .agx-campo-ajuda { display: block; margin: 2px 0 0; }

/* ————— quadros de coluna (esteira e kanban) ————— */

.agx-admin-cs-quadro {
  display: grid;
  gap: 14px;
  align-items: start;
}
.agx-admin-cs-quadro--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 6 etapas não cabem legíveis em 1440: rolagem lateral com fade, coluna mínima
   de 212px (o card interno nunca é espremido) */
.agx-admin-cs-quadro--6 {
  grid-template-columns: repeat(6, minmax(212px, 1fr));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
}

.agx-admin-cs-coluna {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card-lg);
  background: var(--agx-navy-02);
  min-width: 0;
}
.agx-admin-cs-coluna-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--agx-font-sans);
  font-size: 13.5px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
}
.agx-admin-cs-coluna-n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--agx-radius-pill);
  background: var(--agx-acao-gradiente);
  color: var(--agx-texto-sobre-acao);
  font-family: var(--agx-font-mono);
  font-size: 11px;
}

.agx-admin-cs-mini { padding: 14px; display: grid; gap: 8px; min-width: 0; max-width: 100%; }
.agx-admin-cs-mini > * { min-width: 0; max-width: 100%; }
.agx-admin-cs-mini .agx-admin-meta { margin: 0; overflow-wrap: anywhere; }
.agx-admin-cs-mini .agx-admin-cs-card-topo strong,
.agx-admin-cs-mini .agx-admin-link-forte { overflow-wrap: anywhere; }
.agx-admin-cs-tarefa-titulo {
  margin: 0;
  font-size: 14.5px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
  overflow-wrap: anywhere;
}
.agx-admin-cs-cuidados {
  margin: 0;
  font-size: 13px;
  color: var(--agx-erro-forte);
  overflow-wrap: anywhere;
}
.agx-admin-cs-mover { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* o select de etapa ocupa a própria linha: ‹ › ficam lado a lado e nada estoura
   a largura da coluna */
.agx-admin-cs-mover .agx-campo-controle {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  order: 2;
  padding-left: 14px;
  padding-right: 14px;
  font-size: 13px;
}
.agx-admin-cs-mover .agx-btn { flex: 0 0 auto; }

/* ————— fechamentos ————— */

.agx-admin-cs-killswitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px solid var(--agx-borda-media);
}
.agx-admin-cs-killswitch--pausado { border-color: rgba(184, 92, 92, 0.45); background: rgba(184, 92, 92, 0.05); }
.agx-admin-cs-killswitch .eyebrow { margin: 0 0 4px; }
.agx-admin-cs-killswitch-estado {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
}
.agx-admin-cs-killswitch--pausado .agx-admin-cs-killswitch-estado { color: var(--agx-erro-forte); }
.agx-admin-cs-killswitch .agx-admin-ajuda { margin: 0; }

.agx-admin-cs-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-cs-linha:last-child { border-bottom: none; }
.agx-admin-cs-linha--metricas { display: block; }
.agx-admin-cs-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.agx-admin-cs-metricas--total {
  padding: 12px;
  border-radius: var(--agx-radius-card);
  background: var(--agx-navy-03);
  margin-bottom: 8px;
}
.agx-admin-cs-metrica { display: grid; gap: 2px; }
.agx-admin-cs-metrica .eyebrow { margin: 0; }
.agx-admin-cs-metrica .agx-admin-mono { font-size: 15px; color: var(--agx-texto-titulo); }

/* ————— saúde do CS na visão geral ————— */

.agx-admin-cs-saude { display: grid; gap: 12px; }
.agx-admin-cs-saude .agx-admin-secao-titulo { margin: 0; }
.agx-admin-cs-heartbeat .agx-admin-lista-item { justify-content: space-between; }
.agx-admin-cs-atalhos { display: flex; gap: 14px; flex-wrap: wrap; }

/* ————— aba CS do usuário ————— */

.agx-admin-cs-cabecalho { gap: 10px; }
.agx-admin-cs-bandas { display: flex; gap: 6px; flex-wrap: wrap; }
.agx-admin-cs-memoria,
.agx-admin-cs-resumo {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--agx-borda-hairline);
}
.agx-admin-cs-resumo-texto {
  margin: 0;
  white-space: pre-wrap;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--agx-texto-corpo);
}
.agx-admin-cs-briefing { max-height: 60vh; overflow-y: auto; }

/* ————————————————————— mobile (≤ 599px) ————————————————————— */

@media (max-width: 599px) {
  /* quadros viram fileira rolável com fade — nada é cortado nem espremido */
  .agx-admin-cs-quadro--3,
  .agx-admin-cs-quadro--6 {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }
  .agx-admin-cs-quadro--3 > .agx-admin-cs-coluna,
  .agx-admin-cs-quadro--6 > .agx-admin-cs-coluna { flex: 0 0 264px; }

  .agx-admin-cs-card { padding: 16px; }
  .agx-admin-cs-killswitch { flex-direction: column; align-items: flex-start; }
  .agx-admin-cs-barra-lote { align-items: stretch; }
  .agx-admin-cs-barra-lote .agx-btn { align-self: stretch; text-align: center; }
  .agx-admin-cs-acoes .agx-btn--primario,
  .agx-admin-cs-acoes .agx-btn--perigo { flex: 1 1 100%; text-align: center; }
  /* setas + período em UMA linha: o selo "semana atual" sai (a informação já
     está no texto e no atalho de voltar) */
  .agx-admin-cs-semana { width: 100%; }
  .agx-admin-cs-semana-rotulo { font-size: 12.5px; }
  .agx-admin-cs-semana-rotulo .badge-pill { display: none; }
  .agx-admin-cs-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ————————————————————— toque: alvos ≥44px ————————————————————— */

@media (pointer: coarse) {
  .agx-admin-cs-mover .agx-btn,
  .agx-admin-cs-acoes .agx-btn,
  .agx-admin-cs-semana .agx-btn,
  .agx-admin-cs-linha .agx-btn { min-height: 44px; }
  .agx-admin-cs-mover .agx-campo-controle,
  .agx-admin-cs-mover .agx-btn { min-width: 44px; }
  .agx-admin-cs-resultados .agx-popover-item { min-height: 44px; }
}

/* ————————— capa por upload + seletor de vídeo do Panda (editor de curso) ————————— */

.agx-admin-capa-bloco {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.agx-admin-capa-moldura {
  flex: 0 0 208px;
  width: 208px;
  aspect-ratio: 16 / 9;
  border-radius: var(--agx-radius-thumb);
  overflow: hidden;
  border: 1px solid var(--agx-borda-hairline);
  background: var(--agx-superficie-1);
  box-shadow: var(--agx-shadow-xs);
}
.agx-admin-capa-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agx-admin-capa-preview--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--agx-texto-tenue);
}
.agx-admin-capa-lado { flex: 1 1 240px; min-width: 0; }
.agx-admin-capa-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.agx-admin-capa-lado .agx-campo-ajuda { margin-top: 8px; }
.agx-admin-capa-url { margin-top: 10px; }
.agx-admin-capa-url > summary {
  cursor: pointer;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  color: var(--agx-texto-suporte);
  margin-bottom: 8px;
}
.agx-admin-capa-url > summary:hover { color: var(--agx-secundaria); }

.agx-admin-video-escolhido {
  margin: 8px 0 0;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  color: var(--agx-texto-corpo);
}
.agx-admin-video-escolhido:empty { display: none; }
.agx-admin-video-escolhido--alerta { color: var(--agx-erro); }

.agx-admin-check--inline { flex: none; min-height: 44px; }
.agx-admin-check--inline .agx-admin-check-texto {
  flex: none;
  font-size: 13px;
  color: var(--agx-texto-suporte);
  white-space: nowrap;
}

.agx-admin-catalogo {
  display: grid;
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
  margin-top: 12px;
}
.agx-admin-catalogo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--agx-radius-thumb);
  cursor: pointer;
}
.agx-admin-catalogo-item:hover,
.agx-admin-catalogo-item:focus-visible {
  background: var(--agx-superficie-1);
  border-color: var(--agx-borda-hairline);
}
.agx-admin-catalogo-thumb {
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--agx-borda-hairline);
  background: var(--agx-superficie-1);
}
.agx-admin-catalogo-thumb--vazia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.agx-admin-catalogo-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.agx-admin-catalogo-titulo {
  font-family: var(--agx-font-sans);
  font-size: 14px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
  overflow-wrap: anywhere;
}

@media (max-width: 599px) {
  .agx-admin-capa-moldura { flex-basis: 100%; width: 100%; }
  .agx-admin-capa-acoes .agx-btn { flex: 1 1 auto; text-align: center; }
  .agx-admin-catalogo-thumb { width: 72px; }
  .agx-admin-catalogo { max-height: 46vh; }
}

/* --------------------------------------------------------------------------
   N. Soluções (#/admin/solucoes) — 011_solucoes.sql
   Editor completo: passo a passo escrito (reaproveita .agx-admin-md-split /
   .agx-admin-md-preview) + tutoriais em vídeo + aulas relacionadas.
   -------------------------------------------------------------------------- */

.agx-admin-filtros-solucoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.agx-admin-filtros-solucoes .agx-campo-select { min-width: 200px; }

/* — lista — */
.agx-admin-lista-solucoes {
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-card);
  background: var(--agx-superficie-2);
  overflow: hidden;
}
.agx-admin-linha-solucao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-linha-solucao:last-child { border-bottom: none; }
.agx-admin-linha-solucao-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.agx-admin-linha-solucao-info strong {
  font-size: 14.5px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
  overflow-wrap: anywhere;
}
.agx-admin-selos-solucao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* — editor: vídeos — */
.agx-admin-editor-solucao { display: grid; gap: 4px; }
.agx-admin-lista-videos { display: grid; gap: 8px; margin: 10px 0; }
.agx-admin-linha-video {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-thumb);
  background: var(--agx-superficie-0);
}
.agx-admin-linha-video .agx-campo-controle { min-width: 0; }
.agx-admin-linha-video .agx-campo-controle:nth-of-type(1) { flex: 2 1 180px; }
.agx-admin-linha-video .agx-campo-controle:nth-of-type(2) { flex: 1 1 140px; font-family: var(--agx-font-mono); font-size: 13px; }
.agx-admin-linha-video .agx-admin-campo-ordem { flex: 0 0 84px; }
.agx-admin-acoes-video { display: flex; align-items: center; gap: 2px; flex: none; }

/* — editor: aulas relacionadas — */
.agx-admin-lista-aulas-rel { display: grid; gap: 6px; margin: 10px 0; }
.agx-admin-linha-aula-rel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--agx-borda-hairline);
  border-radius: var(--agx-radius-thumb);
  background: var(--agx-superficie-0);
}
.agx-admin-add-aula {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.agx-admin-add-aula .agx-campo-select { flex: 1 1 260px; min-width: 0; }

/* — mobile (390 sem overflow horizontal) — */
@media (max-width: 599px) {
  .agx-admin-filtros-solucoes { flex-direction: column; align-items: stretch; }
  .agx-admin-filtros-solucoes .agx-campo-select { min-width: 0; width: 100%; }
  .agx-admin-linha-solucao { flex-wrap: wrap; padding: 12px; }
  .agx-admin-linha-solucao-info { flex-basis: 100%; order: -1; }
  .agx-admin-linha-video { flex-wrap: wrap; }
  .agx-admin-linha-video .agx-campo-controle,
  .agx-admin-linha-video .agx-admin-campo-ordem { flex-basis: 100%; width: 100%; }
  .agx-admin-acoes-video { width: 100%; justify-content: flex-end; }
  .agx-admin-add-aula .agx-campo-select { flex-basis: 100%; }
  .agx-admin-add-aula .agx-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLAREZA + INTEGRAÇÕES
   Peças de linguagem de negócio: chip de identificador, avisos de "falta
   explicação", régua de momentos explicada e a tela #/admin/integracoes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ————— chip do identificador técnico (ex-slug solto embaixo do título) ————— */

.agx-admin-card-produto-id { margin: 0; }
.agx-admin-chip-id {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--agx-radius-pill);
  background: var(--agx-navy-03);
  border: 1px solid var(--agx-borda-hairline);
  font-family: var(--agx-font-sans);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--agx-texto-tenue);
  cursor: help;
  max-width: 100%;
}
.agx-admin-chip-id code {
  font-family: var(--agx-font-mono);
  font-size: 11.5px;
  color: var(--agx-texto-suporte);
  overflow-wrap: anywhere;
}

/* pílula de estado que pode ter frase longa (nome da fonte junto) */
.agx-admin-card-produto-webhook .agx-pill-status,
.agx-admin-integra-topo .agx-pill-status { white-space: normal; text-align: left; }
.agx-admin-card-produto-webhook { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ————— sinalização de "isso ainda não foi explicado" ————— */

.agx-admin-meta--faltando { color: var(--agx-erro-medio); font-style: italic; }
.agx-admin-ajuda--aviso { color: var(--agx-erro-medio); }
.agx-admin-pill-alerta {
  background: rgba(184, 92, 92, 0.06);
  border-color: rgba(184, 92, 92, 0.28);
  color: var(--agx-erro-medio);
}

/* seção alvo de deep-link (?secao=…): pisca uma vez para o olho achar */
.agx-admin-secao--destacada {
  outline: 2px solid var(--agx-navy-20);
  outline-offset: 2px;
  animation: agx-admin-destacar 2.4s ease-out 1 forwards;
}
@keyframes agx-admin-destacar {
  0%, 60% { outline-color: var(--agx-navy-30); }
  100% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .agx-admin-secao--destacada { animation: none; outline-color: var(--agx-navy-20); }
}

/* ————— régua de momentos explicada (ficha do aluno) ————— */

.agx-admin-momento-legenda {
  margin: 0 0 8px;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  color: var(--agx-texto-suporte);
}
.agx-admin-momento-explicacao {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--agx-radius-thumb);
  background: var(--agx-navy-03);
  border: 1px solid var(--agx-borda-hairline);
}
.agx-admin-momento-explicacao p {
  margin: 0 0 6px;
  font-family: var(--agx-font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--agx-texto-corpo);
  max-width: 70ch;
}
.agx-admin-momento-explicacao p:last-of-type { margin-bottom: 0; }
.agx-admin-momento-explicacao .agx-btn--link { margin-top: 8px; }

.agx-admin-momento-glossario { margin-top: 10px; }
.agx-admin-momento-glossario > summary {
  cursor: pointer;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  color: var(--agx-texto-suporte);
  padding: 4px 0;
}
.agx-admin-momento-glossario > summary:hover { color: var(--agx-texto-titulo); }
.agx-admin-momento-lista { margin: 8px 0 0; }
.agx-admin-momento-lista dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--agx-font-sans);
  font-size: 13.5px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
}
.agx-admin-momento-lista dt:first-child { margin-top: 0; }
.agx-admin-momento-dt--atual { color: var(--agx-texto-titulo); }
.agx-admin-momento-lista dd {
  margin: 2px 0 0;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--agx-texto-suporte);
  max-width: 70ch;
}

/* ═════════════════════ tela #/admin/integracoes ═════════════════════ */

.agx-admin-integracoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 16px;
  align-items: start;
}
.agx-admin-integra-alerta { grid-column: 1 / -1; margin: 0 0 4px; }

.agx-admin-integra-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
}
.agx-admin-integra-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.agx-admin-integra-titulo {
  margin: 0;
  font-family: var(--agx-font-sans);
  font-size: 18px;
  font-weight: var(--agx-peso-titulo);
  letter-spacing: var(--agx-ls-tight);
  color: var(--agx-texto-titulo);
}
.agx-admin-integra-para-que {
  margin: 4px 0 0;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--agx-texto-suporte);
  max-width: 52ch;
}

.agx-admin-integra-dados {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--agx-borda-hairline);
}
.agx-admin-integra-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--agx-borda-hairline);
}
.agx-admin-integra-rotulo {
  font-family: var(--agx-font-sans);
  font-size: 13px;
  color: var(--agx-texto-suporte);
  flex: none;
}
.agx-admin-integra-valor {
  font-family: var(--agx-font-mono);
  font-size: 12.5px;
  color: var(--agx-texto-titulo);
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.agx-admin-integra-teste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.agx-admin-integra-resultado {
  margin: 0;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--agx-texto-suporte);
  flex: 1 1 200px;
}
.agx-admin-integra-resultado--ok { color: var(--agx-sucesso); }
.agx-admin-integra-resultado--erro { color: var(--agx-erro-medio); }

/* killswitch de WhatsApp dentro do card do Z-API */
.agx-admin-integra-kill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--agx-radius-thumb);
  background: var(--agx-navy-03);
  border: 1px solid var(--agx-borda-hairline);
}
.agx-admin-integra-kill--pausado {
  background: rgba(184, 92, 92, 0.06);
  border-color: rgba(184, 92, 92, 0.28);
}
.agx-admin-integra-kill-estado {
  margin: 2px 0 0;
  font-family: var(--agx-font-sans);
  font-size: 13px;
  color: var(--agx-texto-corpo);
}
.agx-admin-integra-kill--pausado .agx-admin-integra-kill-estado { color: var(--agx-erro-forte); }

/* passo a passo de conexão — fechado por padrão, nunca no caminho de quem já sabe */
.agx-admin-integra-como {
  border-top: 1px solid var(--agx-borda-hairline);
  padding-top: 10px;
}
.agx-admin-integra-como > summary {
  cursor: pointer;
  font-family: var(--agx-font-sans);
  font-size: 13.5px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
  padding: 4px 0;
}
.agx-admin-integra-passos {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agx-admin-integra-passos li {
  font-family: var(--agx-font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--agx-texto-corpo);
  max-width: 62ch;
}
.agx-admin-integra-passos code {
  font-family: var(--agx-font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--agx-navy-05);
  color: var(--agx-texto-titulo);
  overflow-wrap: anywhere;
}
.agx-admin-integra-passos .agx-btn--link { padding: 0; font-size: 13px; }
.agx-admin-integra-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-family: var(--agx-font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--agx-texto-tenue);
  max-width: 62ch;
}
.agx-admin-integra-aviso .agx-icone { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* ————————————————————— mobile 390 ————————————————————— */

@media (max-width: 599px) {
  .agx-admin-integracoes { grid-template-columns: 1fr; }
  .agx-admin-integra-card { padding: 18px 16px; }
  .agx-admin-integra-linha { flex-direction: column; align-items: flex-start; gap: 2px; }
  .agx-admin-integra-valor { text-align: left; }
  .agx-admin-integra-kill { flex-direction: column; align-items: flex-start; }
  .agx-admin-integra-teste .agx-btn { align-self: stretch; text-align: center; }
  .agx-admin-momento-explicacao { padding: 12px; }
}

@media (pointer: coarse) {
  .agx-admin-integra-teste .agx-btn,
  .agx-admin-integra-como > summary,
  .agx-admin-momento-glossario > summary { min-height: 44px; }
  .agx-admin-integra-como > summary,
  .agx-admin-momento-glossario > summary { display: flex; align-items: center; }
}

/* rodapé do card de produto: switch + ação lado a lado, sem quebrar palavra */
.agx-admin-card-produto-rodape { flex-wrap: wrap; }
.agx-admin-card-produto-rodape .agx-btn { white-space: nowrap; }
.agx-admin-card-produto-rodape .agx-admin-switch-rotulo { white-space: nowrap; }
.agx-admin-integra-dica { color: var(--agx-texto-tenue); font-style: italic; }

/* ——— Categorias da vitrine (migração 014) ——— */
.agx-admin-cabecalho-acoes { display: flex; gap: 8px; align-items: center; }
.agx-admin-lista-categorias { margin-top: 12px; display: grid; gap: 8px; }
.agx-admin-linha-categoria { display: flex; gap: 8px; align-items: center; }
.agx-admin-linha-categoria .agx-campo-controle { flex: 1; }
.agx-admin-linha-categoria .agx-admin-campo-ordem { flex: 0 0 72px; }

/* ——— Checklist de implantação (migração 016) ——— */
.agx-admin-implantacao-topo { display: flex; align-items: baseline; gap: 8px; }
.agx-admin-implantacao-resumo { font-family: var(--agx-fonte-mono, monospace); }
.agx-admin-implantacao-resumo--ok { color: var(--agx-sucesso, #047857); font-weight: 700; }
.agx-admin-implantacao-lista { display: grid; gap: 6px; margin-top: 8px; }
.agx-admin-implantacao-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.agx-admin-implantacao-rotulo { flex: 1; }
.agx-admin-implantacao-obs { flex: 0 1 220px; font-size: 0.85rem; padding: 4px 8px; }
@media (max-width: 640px) {
  .agx-admin-implantacao-item { flex-wrap: wrap; }
  .agx-admin-implantacao-obs { flex-basis: 100%; }
}

/* ————— esteira kanban (estilo CRM AGX) ————— */

.agx-admin-cs-kb-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.agx-admin-cs-kb-barra .agx-campo-controle { max-width: 280px; }
.agx-admin-cs-kb-parados--ativo {
  background: rgba(184, 92, 92, 0.14);
  border-color: rgba(184, 92, 92, 0.5);
  color: var(--agx-erro-forte);
}

.agx-admin-cs-kb {
  display: grid;
  grid-template-columns: repeat(6, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
}

.agx-admin-cs-kb-coluna {
  display: grid;
  align-content: start;
  border: 1px solid var(--agx-borda-hairline);
  border-top: 3px solid var(--kb-cor, var(--agx-borda-media));
  border-radius: var(--agx-radius-card-lg);
  background: var(--agx-navy-02);
  min-width: 0;
  overflow: hidden;
}
.agx-admin-cs-kb-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--agx-borda-hairline);
  background: color-mix(in srgb, var(--kb-cor, transparent) 7%, transparent);
}
.agx-admin-cs-kb-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kb-cor);
  flex: 0 0 auto;
}
.agx-admin-cs-kb-titulo {
  margin: 0;
  font-family: var(--agx-font-sans);
  font-size: 12.5px;
  font-weight: var(--agx-peso-titulo);
  color: var(--agx-texto-titulo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.agx-admin-cs-kb-contador {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--agx-radius-pill);
  background: color-mix(in srgb, var(--kb-cor) 18%, transparent);
  color: var(--kb-cor);
  font-family: var(--agx-font-mono);
  font-size: 11.5px;
  font-weight: 600;
}
.agx-admin-cs-kb-corpo {
  display: grid;
  gap: 8px;
  padding: 10px;
  align-content: start;
  min-height: 64px;
}
.agx-admin-cs-kb-vazio {
  margin: 0;
  text-align: center;
  color: var(--agx-texto-suporte);
  font-size: 13px;
  padding: 12px 0;
}

.agx-admin-cs-kb-card { padding: 12px; display: grid; gap: 6px; min-width: 0; max-width: 100%; }
.agx-admin-cs-kb-card > * { min-width: 0; max-width: 100%; }
.agx-admin-cs-kb-card-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.agx-admin-cs-kb-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.agx-admin-cs-kb-nome strong { font-weight: var(--agx-peso-titulo); color: var(--agx-texto-titulo); }
.agx-admin-cs-kb-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--agx-radius-pill);
  font-family: var(--agx-font-mono);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--agx-texto-suporte);
  white-space: nowrap;
}
.agx-admin-cs-kb-badge--ok { background: rgba(125, 220, 125, 0.12); color: #7ddc7d; }
.agx-admin-cs-kb-badge--atencao { background: rgba(255, 200, 90, 0.14); color: #ffc85a; }
.agx-admin-cs-kb-badge--parado { background: rgba(184, 92, 92, 0.18); color: var(--agx-erro-forte); }
.agx-admin-cs-kb-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--agx-texto-suporte);
  overflow-wrap: anywhere;
}
.agx-admin-cs-kb-mover {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.agx-admin-cs-kb-mover .agx-campo-controle {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
}
.agx-admin-cs-kb-mover .agx-btn { flex: 0 0 auto; }

/* ————— Dossiê do aluno (usuario-detalhe) ————— */
.agx-admin-dossie-campos { display: grid; gap: 12px; margin-top: 8px; }
.agx-admin-dossie-campos .agx-campo { display: grid; gap: 4px; }
.agx-admin-dossie-acoes { display: flex; justify-content: flex-end; }

/* ————— Links de convite (modal na tela Usuários) ————— */
.agx-admin-convites-form { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.9fr auto; gap: 8px; margin: 10px 0 14px; align-items: center; }
.agx-admin-convites-lista { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
@media (max-width: 640px) { .agx-admin-convites-form { grid-template-columns: 1fr 1fr; } }