/* ============================================================
   PÁGINA admin-metricas — dashboard, medalhas, relatórios e
   configurações. Padrões locais que NÃO casam 1:1 com o DS
   (KPIs de 28/30px, inputs de 38/40px raio 7, chips 2px/3px,
   pills de período, cores de categoria de medalha).
   ============================================================ */

/* ── KPIs com valor maior que o .kpi do DS (24px) ──────────
   Dashboard usa 30px; relatórios usam 28px. Mantemos o
   container .kpi do DS e só trocamos a tipografia/estrutura. */
.kpi-metrica__valor {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
  color: var(--marca-texto);
}
.kpi-metrica__valor--rel {
  font-size: 28px;
}
.kpi-metrica__valor--verde { color: var(--sucesso-texto); }
/* Estados do KPI "Alunos em risco": vermelho quando há risco, cinza quando zero */
.kpi-metrica__valor--vermelho { color: var(--perigo-texto); }
.kpi-metrica__valor--cinza { color: var(--txt-3); }
.kpi-metrica__sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}
.kpi-metrica__sub--rel {
  font-size: 11px;
  color: var(--color-text-muted); /* faint reprovava contraste WCAG AA */
  margin: 2px 0 0;
}
/* Link "Ver relatório →" no card de alunos em risco */
.kpi-metrica__link {
  font-size: 11.5px;
  margin-top: 4px;
  font-weight: 700;
  color: var(--color-success);
  text-decoration: none;
}

/* Ícone branco dentro da faixa .cabecalho-secao (acompanha o título).
   Padrão repetido em toda view admin — candidato a ir pro DS. */

/* Célula de tabela com ênfase (primeira coluna em negrito) */
td.celula-forte { font-weight: 600; }
/* Nome do aluno (relatório por aluno): escuro por padrão, vermelho em risco */
.tabela td.celula-forte--escura { color: var(--txt-1); }
.tabela td.celula-forte--risco { color: var(--perigo-texto); }
/* Célula verde negrito (coluna "Concluídos" dos relatórios) */
.tabela td.celula-verde {
  color: var(--sucesso-texto);
  font-weight: 600;
}
/* Contagem "Em risco" por trilha: cinza/normal por padrão, vermelho/negrito quando > 0 */
.tabela td.celula-em-risco { color: var(--txt-3); font-weight: 400; }
.tabela td.celula-em-risco--ativo { color: var(--perigo-texto); font-weight: 600; }
/* Célula secundária menor (e-mail/empresa/perfil/data nos relatórios) */
.tabela td.celula-secundaria {
  font-size: 12px;
  color: var(--txt-3);
}

/* Wrapper de CTA centralizado abaixo de uma tabela vazia */
.bloco-cta-centro {
  margin-top: 12px;
  text-align: center;
}

/* Grid de 4 KPIs (gap 14px, não casa com nenhuma pilha/linha) */
.grid-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* KPI dos relatórios: gap interno 2px (o .kpi do DS usa 4px) */
.kpi--rel { gap: 2px; }

/* Faixa de revisão pendente do dashboard: só é renderizada quando há trabalho a
   fazer, então não precisa de estado "vazio". */
.dash-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--alerta-suave);
  border: 1px solid var(--alerta-borda);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--alerta-texto);
}
.dash-aviso__icone {
  flex-shrink: 0;
  display: flex;
}
.dash-aviso__link {
  margin-left: auto;
  font-weight: 600;
  color: var(--alerta-texto);
  white-space: nowrap;
}

/* Filtro de período dos relatórios (linha alinhada na base) */
.filtro-periodo {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
/* Empurra as pills de período para a direita */
.empurra-direita { margin-left: auto; }
/* Cabeçalho do bloco "Por aluno" (título à esquerda + busca à direita) */
.bloco-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
/* Título de bloco sem a margem inferior padrão (quando está numa linha flex) */
.titulo-bloco--inline { margin-bottom: 0; }

/* Título de bloco acima de uma tabela (15px no dashboard, 14px nos relatórios) */
.titulo-bloco {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.titulo-bloco--rel {
  font-size: 14px;
}

/* Link verde de rodapé/CTA ("Gerenciar trilhas →") */
.link-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-success);
  text-decoration: none;
}

/* ── Filtros das listagens (busca/select próprios) ─────────
   Borda #d1d5db / fs 13.5 / raio 8 — não casa com .campo-busca
   do DS (#d4d4d4 + lupa) nem com .campo__input. */
.filtro-busca {
  height: 36px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--txt-2);
  outline: none;
  width: 280px;
  font-family: inherit;
}
.filtro-select {
  height: 36px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--txt-2);
  background: var(--sup);
  cursor: pointer;
  outline: none;
  min-width: 180px;
  font-family: inherit;
}

/* ── Página da listagem de medalhas ────────────────────────── */
/* Barra de filtros (busca + select à esquerda, ação à direita) */
.barra-filtros { flex-wrap: wrap; gap: 8px; }
.grupo-filtros { flex-wrap: wrap; }
/* Form/botões em linha dentro da célula de ações da tabela */
/* Botão "+ Medalha" (h36, não é .btn--compacto que é h38) */
.btn-acao-topo {
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--marca);
  color: var(--sobre-cor);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* Célula de ícone da medalha (emoji grande) */
td.medalha-icone {
  font-size: 28px;
  line-height: 1;
}
.medalha-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
.medalha-descricao {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
  max-width: 280px;
  white-space: normal;
}
.tabela td.medalha-regra {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: normal;
  max-width: 220px;
}

/* Chip de categoria/status da listagem (2px 8px / fs 11 — menor
   que .chip do DS, que é 3px 10px / fs 12). Cores fixas por
   categoria e por status (modifiers). */
.chip-mini {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
/* Cor da categoria da medalha (uma por tipo) */
.chip-mini--cat-geral { background: var(--sup-hover); color: var(--txt-2); }
.chip-mini--cat-progressao { background: var(--marca-suave); color: var(--info-texto); }
.chip-mini--cat-excelencia { background: var(--alerta-suave); color: var(--alerta-texto); }
.chip-mini--cat-consistencia { background: var(--sucesso-suave); color: var(--sucesso-texto); }
.chip-mini--cat-velocidade { background: var(--alerta-suave); color: var(--alerta-texto); }
.chip-mini--ativa {
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
  border: 1px solid var(--sucesso-borda);
}
.chip-mini--inativa {
  background: var(--sup-hover);
  color: var(--txt-4);
  border: 1px solid var(--linha);
}
/* Linha de medalha inativa (esmaecida) */
tr.linha-inativa { opacity: 0.6; }

/* Links/botões de ação inline da tabela (Editar/Ativar/Excluir) */
.acao-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
/* SVG inline herda vertical-align: baseline, o que desalinha ícones de
   proporções diferentes dentro do flex — display:block tira esse offset. */
.acao-link svg {
  display: block;
}
.acao-link--editar { color: var(--marca-texto); }
.acao-link--neutra { color: var(--txt-3); }
.acao-link--excluir { color: var(--perigo-texto); }
/* Botão "nu" usado nos submits inline (Ativar/Desativar/Excluir).
   Hover cinza preserva o que o fallback button[style*='background:none']
   dava antes do inline sair. */
.acao-botao {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.acao-botao:not(:disabled):hover {
  background-color: var(--sup-hover);
}

/* ── Form de medalha ───────────────────────────────────────── */
/* Linha ícone + título (alinha no topo, gap 14) */
.linha-icone-titulo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.coluna-icone { width: 72px; flex-shrink: 0; }
.coluna-flex { flex: 1; }
/* Rodapé de ações do form (Cancelar + Salvar à direita) */
.acoes-form {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
/* Inputs do form admin: h38 raio 7 — não casa com .campo__input
   (h40 raio 4). */
.input-admin {
  height: 38px;
  border: 1px solid var(--linha-forte);
  border-radius: 7px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--txt-1);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  background: var(--sup);
  font-family: inherit;
}
/* Variante "ícone" (emoji centralizado, 24px, sem padding) */
.input-admin--icone {
  font-size: 24px;
  text-align: center;
  padding: 0;
}
/* Textarea da descrição da medalha (min-height 72, line 1.5) */
.input-admin--area {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
/* Label do form admin (= .campo__label, mas com margin:0 explícito
   e cor #374151 do tema admin) */
.label-admin {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
  margin: 0;
}
/* Hint do form admin (cor #9ca3af, mais clara que .campo__hint) */
.hint-admin {
  font-size: 12px;
  color: var(--txt-4);
  margin: 0;
  line-height: 1.4;
}
/* Marca de campo opcional/asterisco no tema admin */
.label-asterisco { color: var(--perigo-texto); }
.label-opcional {
  color: var(--txt-4);
  font-weight: 400;
  font-size: 12px;
}

/* Caixa de erro do form admin (paleta --color-danger-*) */
.caixa-erro-admin {
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-border);
  border-radius: 8px;
  padding: 12px 16px;
}
.caixa-erro-admin p {
  font-size: 13px;
  color: var(--color-danger);
  margin: 0;
}

/* Bloco "Medalha ativa" (checkbox + textos sobre fundo cinza) */
.bloco-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--sup-sutil);
  border: 1px solid var(--linha);
  border-radius: 8px;
}
.bloco-toggle__titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
  margin: 0 0 2px;
}

/* Botão Cancelar (cinza) e Salvar (azul) do rodapé do form */
.btn-cancelar {
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--sup-hover);
  color: var(--txt-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.btn-salvar {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--marca);
  color: var(--sobre-cor);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* ── Relatórios ────────────────────────────────────────────── */
/* Pills de preset de período (7/30/90 dias). Borda/cor/fundo
   alternam entre ativo e inativo — como são valores fixos por
   estado, viram classes; o estado dinâmico só escolhe a classe. */
.pill-periodo {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--linha-forte);
  color: var(--txt-3);
  background: var(--sup);
}
.pill-periodo--ativa {
  border-color: var(--marca);
  color: var(--marca-texto);
  background: var(--marca-suave);
}
/* Input de data do filtro de período (h36 raio 7) */
.input-data {
  height: 36px;
  border: 1px solid var(--linha-forte);
  border-radius: 7px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--txt-2);
  outline: none;
  font-family: inherit;
}
.label-filtro {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-2);
}
/* Botão "Aplicar" (h36 raio 7 — variante de canto do btn-salvar) */
.btn-aplicar {
  height: 36px;
  padding: 0 18px;
  border-radius: 7px;
  background: var(--marca);
  color: var(--sobre-cor);
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* Chip de status por aluno (3px 9px / fs 12 — diferente do .chip
   do DS, 3px 10px). Cores fixas por estado. */
.chip-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}
.chip-status--concluida {
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
  border: 1px solid var(--sucesso-borda);
}
.chip-status--risco {
  background: var(--perigo-suave);
  color: var(--perigo-texto);
  border: 1px solid var(--perigo-borda);
}
.chip-status--andamento {
  background: var(--marca-suave);
  color: var(--marca-texto);
  border: 1px solid var(--marca-borda);
}
/* Linha de aluno em risco (fundo rosado leve) */

/* ── Configurações ─────────────────────────────────────────── */
/* Card de configuração (raio 12, padding em duas partes) */
.card-config {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow: hidden;
}
.card-config__cabecalho {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--linha-suave);
}
.card-config__corpo {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
}
/* Critérios lado a lado dentro do card, dividindo a largura em duas metades
   (o gap faz a separação; auto-fit ficaria amontoado à esquerda em tela larga) */
.card-config__corpo--grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 48px;
  align-items: start;
}
.card-config__corpo--grade .criterio { padding-bottom: 0; }
@media (max-width: 760px) {
  .card-config__corpo--grade { grid-template-columns: 1fr; }
}
.card-config__titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt-1);
  margin: 0 0 6px;
}
.card-config__descricao {
  font-size: 13px;
  color: var(--txt-3);
  line-height: 1.6;
  max-width: 680px;
  margin: 0;
}

/* Cada critério dentro do card de config */
.criterio { padding: 0 0 20px; }
.criterio__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 10px;
}
.criterio__hint {
  font-size: 12px;
  color: var(--txt-4);
  margin: 8px 0 0;
  line-height: 1.5;
  /* Trava a medida do texto: em tela larga a coluna passa de 700px e a linha
     de ajuda ficaria comprida demais pra ler. */
  max-width: 560px;
}
.criterio__unidade { font-size: 13px; color: var(--txt-3); }
.criterio__conector { font-size: 13px; color: var(--txt-4); }

/* Input numérico de config (h40 raio 7, largura padrão 120px) */
.input-config {
  height: 40px;
  border: 1px solid var(--linha-forte);
  border-radius: 7px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--txt-2);
  outline: none;
  width: 120px;
  box-sizing: border-box;
}
.input-config--curto { width: 80px; }

/* Linha flex que pode quebrar (modifier de .linha-N) */
.linha-wrap { flex-wrap: wrap; }

/* ── Aba de abandono dos relatórios ────────────────────────── */
/* Espaço entre os blocos "Por trilha" e "Por aluno" da aba */
.bloco-abandono { margin-top: 28px; }

/* Taxa de abandono nas tabelas (azul normal, vermelho >= 50%, cinza sem base) */
.taxa-abandono {
  font-size: 13px;
  font-weight: 700;
  color: var(--marca-texto);
}
.taxa-abandono--alta { color: var(--perigo-texto); }
.taxa-abandono--vazia { color: var(--txt-4); font-weight: 600; }

/* KPI que abre o detalhe: some o sublinhado do link e sobe no hover */
.kpi--clicavel {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}
.kpi--clicavel:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.kpi__seta {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--txt-5);
  line-height: 1;
}
.kpi--clicavel:hover .kpi__seta { color: var(--marca-texto); }

/* Botão-olho da última coluna das tabelas de abandono: abre o detalhe */
.celula-acao { text-align: right; white-space: nowrap; }
.btn-olho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--txt-4);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-olho:hover {
  background: var(--marca-suave);
  color: var(--marca-texto);
}

/* Rankings do resumo: duas colunas que empilham em tela estreita */
.grid-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
  margin-top: 28px;
  align-items: start;
}
.cartao-resumo {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 20px 24px;
}
.cartao-resumo__vazio {
  font-size: 13px;
  color: var(--txt-3);
  margin: 8px 0 0;
}
.link-ver-tudo {
  font-size: 12px;
  font-weight: 700;
  color: var(--marca-texto);
  text-decoration: none;
  white-space: nowrap;
}
.link-ver-tudo:hover { text-decoration: underline; }

.lista-resumo {
  list-style: none;
  margin: 0;
  padding: 0;
}
.item-resumo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linha-suave);
}
.item-resumo:first-child { border-top: none; }
/* min-width: 0 deixa o texto truncar em vez de esticar a linha */
.item-resumo__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.item-resumo__titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-resumo__sub {
  font-size: 12px;
  color: var(--txt-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-resumo__valor {
  font-size: 13px;
  font-weight: 700;
  color: var(--marca-texto);
  white-space: nowrap;
}
.item-resumo__valor--alerta { color: var(--perigo-texto); }

/* Filtros da tela de detalhe (estado + recorte ativo) */
.detalhe-filtros {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detalhe-filtros__rotulo { font-size: 12px; color: var(--txt-3); }
.chip-recorte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--marca-suave);
  border: 1px solid var(--marca-borda);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--marca-texto);
}
.chip-recorte__limpar {
  color: var(--txt-3);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}
.chip-recorte__limpar:hover { color: var(--perigo-texto); }

/* Página de form admin com largura máxima centralizada */
.admin-pagina--640 { max-width: 640px; margin-inline: auto; }
.admin-pagina--760 { max-width: 760px; margin-inline: auto; }

/* Larguras mínimas das tabelas rolaveis (cada tela tem a sua) */
.tabela--min480 { min-width: 480px; }
.tabela--min700 { min-width: 700px; }
.tabela--min800 { min-width: 800px; }
.tabela--min900 { min-width: 900px; }

/* Modal de criar/editar medalha (form longo: caixa mais larga, rola por dentro) */
.modal-caixa--medalha {
  max-width: 680px;
}

/* Abas dos relatórios (Geral / Por trilha / Por aluno) */
.rel-abas {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

/* Painel de aba dos relatórios: respiro uniforme após a borda das abas
   (as 3 abas começam com .bloco-cabecalho — sem salto vertical na troca) */
.painel-rel { padding-top: 16px; }

/* Ações do cabeçalho de bloco (busca + Exportar agrupados à direita) */
.bloco-cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* E-mail/empresa truncados pra tabela de alunos caber em 1280px
   (o conteúdo completo fica no title) */
.tabela td.celula-truncada {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Paddings horizontais compactos (tabela de 7 colunas) */
.tabela--compacta th,
.tabela--compacta td {
  padding-left: 12px;
  padding-right: 12px;
}

/* Botão de exportação CSV das abas de relatório */
.btn-exportar {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--azul);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--marca-texto);
  background: var(--sup);
  white-space: nowrap;
}
.btn-exportar:hover {
  background: var(--azul-suave-2);
}

/* ── Banners ───────────────────────────────────────────────── */
.banner-thumb-mini {
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.banner-link-truncado {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Academy ON ─────────────────────────────────────────── */
.apresentador-thumb-mini {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.edicao-thumb-mini {
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
/* Dois campos lado a lado dentro do modal de edição (quem conduz/especialista,
   gravação/duração). Empilha em modal estreito. */
.form-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Prévia do banner do topo na tela de configuração: a arte é larga (4:1), e
   numa miniatura quadrada ela ficava ilegível. */
.banner-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.banner-config__previa {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--borda-suave);
}
.banner-config__controles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.espaco-acima-8 { margin-top: 8px; }

/* Célula da edição: título em cima, pilar e endereço público embaixo. */
/* .tabela td é nowrap: sem white-space: normal aqui o título passava do
   max-width e escrevia por cima da coluna "Quando". */
.celula-edicao__titulo {
  margin: 0 0 4px;
  font-weight: 600;
  max-width: 420px;
  white-space: normal;
  text-wrap: pretty;
}
.celula-edicao__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--texto-suave);
  max-width: 420px;
}
/* Pilar e endereço sempre na mesma linha: com wrap, a linha do endereço mais
   longo pulava sozinha e a tabela parecia quebrada. Quem cede é o endereço. */
.celula-edicao__slug {
  color: var(--texto-suave);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.celula-edicao__slug:hover { text-decoration: underline; }
.celula-quando { white-space: nowrap; }
.celula-quando .celula-edicao__meta { display: block; }

/* Inscrição, gravação e publicação numa coluna só. */
.pilha-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.chip-mini--pilar {
  background: var(--azul-suave);
  color: var(--marca-texto);
}
.chip-mini--neutra {
  background: var(--sup-hover);
  color: var(--txt-2);
  border: 1px solid var(--linha);
}

@media (max-width: 720px) {
  .form-duplo { grid-template-columns: 1fr; }
}


/* Abas dentro do modal de edição: mesmo componente .aba do admin, com a
   linha divisória correndo de borda a borda do corpo do modal. */
.modal-abas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: -4px -24px 20px;
  padding: 0 24px;
  border-bottom: 1px solid var(--divisor);
}

/* Rodapé do form com o toggle de publicação à esquerda e as ações à direita. */
.acoes-form--entre { justify-content: space-between; align-items: center; }
.toggle-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-2);
  cursor: pointer;
}

/* Nota que abre um painel do form, explicando a etapa antes dos campos. */
.hint-admin--bloco {
  background: var(--fundo-suave);
  border-left: 3px solid var(--azul-suave);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 0;
}

/* Navegação entre as telas de uma seção do admin (Academy ON: Edições,
   Apresentadores, Configuração). Fica entre o cabeçalho e a barra de
   filtros, com o mesmo componente .aba usado em Trilhas. */
.abas-secao {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  border-bottom: 1px solid var(--borda-suave);
}
.abas-secao .aba {
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}

/* Modal de altura fixa: com abas dentro, cada painel tem uma altura e a
   caixa ia crescendo e encolhendo a cada troca, saltando na tela porque o
   overlay centraliza. Travando a altura, só o conteúdo rola. */
.modal-caixa--altura-fixa {
  height: min(660px, 88vh);
}
/* Com a altura travada, quem rola é o painel da aba — e a faixa de ações
   deixa de ser sticky para virar rodapé de verdade, senão ela boiava no meio
   da caixa nas abas curtas. */
.modal-caixa--altura-fixa .modal-corpo {
  display: flex;
  flex-direction: column;
  /* preenche a caixa: sem isto o corpo encolhe até o conteúdo e a faixa de
     ações fica boiando no meio nas abas curtas */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.modal-caixa--altura-fixa .modal-corpo > div,
.modal-caixa--altura-fixa .modal-corpo form,
.modal-caixa--altura-fixa .modal-corpo [data-controller="abas"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.modal-caixa--altura-fixa [data-abas-target="painel"] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 4px;
}
.modal-caixa--altura-fixa .modal-corpo .acoes-form {
  position: static;
  flex: none;
}

/* Prévia da aba do aluno dentro do admin. O palco recria o fundo da área do
   aluno, para a seção não flutuar sobre o branco do admin. */
.previa-aviso {
  margin: 16px 0 12px;
}
.previa-aviso__texto {
  margin: 0;
  font-size: 12.5px;
  color: var(--texto-suave);
  max-width: 720px;
}
.previa-palco {
  background: var(--fundo);
  border: 1px solid var(--borda-suave);
  border-radius: 10px;
  padding: 24px;
}

/* Hover */
.kpi-metrica__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.pill-periodo { transition: background 0.12s, color 0.12s, border-color 0.12s; }
.pill-periodo:not(.pill-periodo--ativa):hover {
  background: var(--sup-hover);
  border-color: var(--linha-hover);
  color: var(--txt-1);
}

/* ── Relatórios: filtros, público, atividade e evolução ─────── */
/* Período e público empilhados num bloco só, acima das abas */
.rel-filtros { display: flex; flex-direction: column; gap: 14px; }
.rel-publico {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rel-publico .label-filtro { margin-right: 4px; }
.rel-publico__nota { font-size: 12.5px; color: var(--txt-3); margin-left: 6px; }

/* Cinco cards na primeira linha; quebra em telas menores */
.grid-kpis--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .grid-kpis, .grid-kpis--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-kpis, .grid-kpis--5 { grid-template-columns: 1fr; }
}

.kpi__tag { align-self: flex-start; margin-top: 6px; }

/* Variação contra o período anterior: ícone + texto, nunca só a cor */
.kpi-variacao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 600;
}
.kpi-variacao--alta { color: var(--sucesso-texto); }
.kpi-variacao--baixa { color: var(--perigo-texto); }
.kpi-variacao--neutro { color: var(--txt-3); font-weight: 500; }

/* Evolução semanal: quatro gráficos pequenos lado a lado */
.evolucao { margin-top: 28px; }
.evolucao__nota { font-size: 12px; color: var(--txt-3); }
.evolucao__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1100px) { .evolucao__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .evolucao__grade { grid-template-columns: 1fr; } }
.evolucao__grafico { margin: 0; }
.evolucao__titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--txt-2);
  margin-bottom: 6px;
}
.evolucao__total { font-size: 16px; color: var(--txt-1); font-variant-numeric: tabular-nums; }
.evolucao__svg { width: 100%; height: auto; display: block; overflow: visible; }
.evolucao__base { stroke: var(--linha-forte); stroke-width: 1; }
.evolucao__eixo { font-size: 9px; fill: var(--txt-3); font-variant-numeric: tabular-nums; }
.evolucao__barra { fill: var(--marca); }
.evolucao__alvo { fill: transparent; }
.evolucao__coluna:hover .evolucao__alvo { fill: var(--marca-suave); }
.evolucao__coluna:hover .evolucao__barra { fill: var(--marca-hover); }
.evolucao__tabela { margin-top: 16px; }
.evolucao__tabela summary {
  font-size: 12.5px;
  color: var(--marca-texto);
  cursor: pointer;
  font-weight: 600;
}
.evolucao__tabela .tabela-envoltura { margin-top: 10px; }

/* Cabeçalho ordenável (aba Por empresa) */
.th-ordenar {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.th-ordenar::after { content: "↕"; font-size: 10px; opacity: 0.4; }
th[aria-sort="ascending"] .th-ordenar::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .th-ordenar::after { content: "↓"; opacity: 1; }
.th-ordenar:hover { color: var(--marca-texto); }

/* ── Dashboard: onboarding e últimos 7 dias ─────────────────── */
.dash-resumo { margin-top: 0; }
.dash-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px 20px;
  margin: 4px 0 0;
}
.dash-numeros dt { font-size: 12px; color: var(--txt-3); }
.dash-numeros dd {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--txt-1);
  font-variant-numeric: tabular-nums;
}
.dash-numeros dd.dash-numeros__alerta { color: var(--perigo-texto); }
.dash-numeros .kpi-variacao { margin-top: 2px; font-size: 11px; }
.dash-resumo__nota { font-size: 12px; font-weight: 400; color: var(--txt-3); margin-left: 6px; }