/* ============================================================
   PÁGINA admin/trilhas (index, edit, relatorio) + admin/aulas/show.
   Padrões locais/únicos destas telas que não casam 1:1 com o DS.
   Tradução fiel dos style= inline — nenhum valor visual mudou.
   ============================================================ */

/* ── Casca da página ───────────────────────────────────────
   As telas de trilha usam padding 16px 32px 40px (não o
   .admin-pagina, que é 32px uniforme). */
/* edit/show usam coluna com padding-bottom só (banner tem padding próprio) */
.pagina-conteudo-trilha {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 36px 40px 56px; /* mesma grade de .admin-pagina */
}
@media (max-width: 760px) {
  .pagina-conteudo-trilha { padding: 24px 16px 40px; }
}
/* Painel/aba de conteúdo (padding 16px 32px 0) */
.trilha-painel {
  padding: 0;
}
/* Barra de abas (faixa com borda inferior) */
.trilha-abas {
  display: flex;
  align-items: center;
  padding: 0;
  gap: 8px;
  border-bottom: 1px solid var(--color-border-light);
}
/* Rodapé de ações do formulário: voltar à esquerda, salvar à direita.
   Com um filho só (aba de módulos), o voltar fica à esquerda mesmo. */
.acoes-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ── Banner de cabeçalho ───────────────────────────────────
   Faixa azul 48px. Difere do .cabecalho-secao do DS: aqui o
   padding lateral é só à esquerda (20px) — e nas telas com link
   "voltar" há padding-right 16px + título com flex:1. */
/* O banner do index/relatorio tem padding lateral próprio na página;
   edit/show envolvem o banner num bloco com padding 16px 32px 4px. */
/* A linha das abas faz o papel de divisor: o cabeçalho não leva a dele */
.trilha-banner-faixa {
  padding: 0;
}
.trilha-banner-faixa .cabecalho-secao {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ── Caixa de erros (validações da trilha/aula) ────────────
   Usa a família --color-danger e radius-xl (8px); difere da
   .caixa-erro do DS (paleta --vermelho, radius 6px). */
.trilha-erros-faixa {
  padding: 0;
}
.trilha-erros {
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-xl);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-danger);
}

/* ── index: filtros + barra superior ───────────────────────── */
.trilha-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trilha-filtros__grupo {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
/* Input/select de filtro: 36px de altura e radius-lg (7px) —
   menor que o .campo-busca/.campo__input do DS. */
.filtro-controle {
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 12px;
  font-size: var(--font-base);
  color: var(--color-text-secondary);
  outline: none;
}
.filtro-controle--busca {
  width: 260px;
}
.filtro-controle--select {
  background: var(--sup);
  cursor: pointer;
  min-width: 170px;
  font-family: inherit;
}
.filtro-controle--select-curto {
  background: var(--sup);
  cursor: pointer;
  font-family: inherit;
}

/* Botão compacto destas telas: 36px de altura (o .btn--compacto do
   DS é 38px). Padding 0 18px (Nova trilha) / 0 16px (modal). */
.btn-trilha {
  border-radius: 8px;
  height: 36px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-trilha--curto {
  padding: 0 16px;
}

/* ── Tabela do index/relatorio ─────────────────────────────
   th idêntico ao DS (.tabela th), mas td usa padding 13px 20px
   (index) / 12px 20px (relatorio) — o DS é 12px. Mantemos local
   pra preservar o pixel. */
.trilha-tabela-envoltura {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.trilha-tabela {
  width: 100%;
  border-collapse: collapse;
}
.trilha-tabela--rolavel {
  min-width: 700px;
}
.trilha-tabela th {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 11px 20px;
  text-align: left;
  white-space: nowrap;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-light);
}
/* td do index: 13px vertical */
.trilha-tabela--index td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-md);
}
/* td do relatorio: 12px vertical */
.trilha-tabela--relatorio td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Célula "conteúdo" (n módulos · n aulas) */
td.trilha-cel-conteudo {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: 12.5px;
}
.trilha-cel-conteudo__separador {
  color: var(--txt-5);
}
.trilha-cel-nome {
  font-weight: 600;
  color: var(--txt-1);
}

/* Form wrapper que o button_to gera (mantém o botão inline no grupo) */
/* Ações da linha (links/botões inline) */
.trilha-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
}
.trilha-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.trilha-acao svg {
  display: block;
}
.trilha-acao--editar {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--color-success);
}
.trilha-acao--relatorio {
  color: var(--txt-3);
}
.trilha-acao--duplicar {
  color: var(--marca-texto-hover);
}
.trilha-acao--excluir {
  color: var(--perigo-texto);
}

/* Rodapé "N trilhas" e contadores de aluno */
.trilha-contador {
  font-size: var(--font-sm);
  color: var(--color-text-faint);
  margin: 6px 0 0;
}

/* Estado vazio da tabela (difere do .vazio: usa font-lg/font 14px) */
td.trilha-tabela-vazio {
  text-align: center;
  padding: 48px 20px;
  color: var(--color-text-faint);
  font-size: var(--font-lg);
}

/* ── Chips/badges de status do index ───────────────────────
   Paletas próprias (âmbar "Essencial"/"Sem perfis", azul perfis,
   verde "Ativa", cinza "Rascunho") que não batem com os .chip do DS. */
.tag-trilha {
  display: inline-block;
  font-weight: 600;
  border-radius: var(--radius-pill);
}
.tag-trilha--essencial {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  background: var(--alerta-suave);
  color: var(--alerta-texto);
  border: 1px solid var(--alerta-borda);
  white-space: nowrap;
}
.tag-trilha--sem-perfis {
  font-size: 11.5px;
  padding: 2px 8px;
  background: var(--alerta-suave);
  color: var(--alerta-texto);
  border: 1px solid var(--alerta-borda);
}
.tag-trilha--perfil {
  font-size: 11.5px;
  padding: 2px 8px;
  background: var(--marca-suave);
  color: var(--info-texto);
  border: 1px solid var(--color-primary-border);
  margin-right: 4px;
}
.tag-trilha--ativa {
  font-size: var(--font-sm);
  padding: 3px 9px;
  background: var(--sucesso-suave);
  color: var(--color-success);
  border: 1px solid var(--sucesso-borda);
}
.tag-trilha--rascunho {
  font-size: var(--font-sm);
  padding: 3px 9px;
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-light);
}

/* ── Modal "Nova trilha" do index ──────────────────────────
   Overlay/caixa próprios (modal_controller dispara hidden): caixa de
   400px, radius 12px; o modal do DS é 420px e usa z-index 100. */
.modal-trilha-overlay {
  position: fixed;
  inset: 0;
  background: var(--veu);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px 16px;
}
.modal-trilha-caixa {
  background: var(--sup);
  border-radius: 12px;
  width: 400px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
}
.modal-trilha-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--linha-suave);
}
.modal-trilha-titulo {
  font-size: 17px;
  font-weight: 700;
  color: var(--txt-1);
  margin: 0;
}
.modal-trilha-fechar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--txt-3);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.modal-trilha-corpo {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-trilha-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 20px 24px;
  border-top: 1px solid var(--linha-suave);
}
/* Label do modal: cor --color-text-secondary (não o #393939 dos forms edit) */
.modal-trilha-label {
  display: block;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
/* Input do modal: paleta admin (--color-border / radius-lg), distinto do
   .form-trilha-input das telas edit (#c1c1c1 / radius 4). */
.modal-trilha-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0 12px;
  font-size: var(--font-lg);
  outline: none;
  box-sizing: border-box;
}

/* ── Formulários das telas edit/show ───────────────────────
   Label/input próprios (label 13/600 #393939; input 40px, radius 4,
   padding lateral 11px). Difere do .campo/.campo__input do DS (padding
   12px, label sem o #393939 exato). */
.form-trilha-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 8px;
  display: block;
}
/* show usa margin-bottom 6px no label (label_estilo) */
.form-trilha-label--justo {
  margin-bottom: 6px;
}
.form-trilha-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 0 11px;
  font-size: 14px;
  color: var(--txt-2);
  outline: none;
  background: var(--sup);
  box-sizing: border-box;
}
.form-trilha-input--select {
  cursor: pointer;
  width: auto; /* o original não esticava: só min-width */
  min-width: 180px;
  font-family: inherit;
}
/* larguras pontuais reusadas no show */
.form-trilha-input--m660 {
  max-width: 660px;
}
.form-trilha-input--w100 {
  width: 100px;
}
.form-trilha-textarea {
  width: 100%;
  height: 100px;
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 10px 11px;
  font-size: 14px;
  color: var(--txt-2);
  outline: none;
  background: var(--sup);
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.form-trilha-hint {
  font-size: 12px;
  color: var(--txt-3);
  margin: 0;
}
.form-trilha-hint--erro {
  font-size: 11px;
  color: var(--color-danger);
  margin: 0;
}

/* Cartão branco de formulário (edit aba geral/avaliação, show) */
.cartao-form {
  background: var(--sup);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.cartao-form--g24 {
  gap: 24px;
}
.cartao-form--g20 {
  gap: 20px;
}
.cartao-form--g16 {
  gap: 16px;
}

/* Linha do thumbnail (preview + controles), topo alinhado */
.thumb-linha {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.thumb-controles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
/* Grade de checkboxes de perfis */
.perfis-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Hint da seção de perfis (margem inferior própria) */
.form-trilha-hint--perfis {
  margin: 0 0 8px;
}
/* Hint da trilha essencial (line-height maior) */
.form-trilha-hint--folgado {
  line-height: 1.5;
}
.label-inline {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
}

/* Input de arquivo do thumbnail */
.input-arquivo {
  font-size: 12px;
}

/* Thumbnail da trilha (preview) */
.thumb-trilha {
  width: 140px;
  height: 80px;
  border-radius: 6px;
  border: 1px solid var(--linha-forte);
  object-fit: cover;
  flex-shrink: 0;
}

/* Checkbox/radio dos forms admin (azul Mainô / verde) */
.check-trilha {
  width: 16px;
  height: 16px;
  accent-color: var(--marca-texto);
  cursor: pointer;
}
.check-trilha--pequeno {
  width: 15px;
  height: 15px;
}

/* Linha de checkbox com rótulo */
.opcao-perfil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--txt-2);
  cursor: pointer;
}
.opcao-alinhada {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.opcao-alinhada--g12 {
  gap: 12px;
}

/* ── edit: aba Módulos e Aulas (drag-and-drop) ─────────────── */
/* Pilhas/linhas com larguras flexíveis das listas sortable */
.lista-sortable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lista-sortable--aulas {
  gap: 6px;
}
.modulo-titulo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.modulo-titulo-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.modulo-acoes {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.aula-titulo-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.aula-acoes {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.form-adicionar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-adicionar--aula {
  margin-top: 4px;
}
.form-adicionar--modulo {
  align-self: flex-start;
}
.modulo-cartao {
  background: var(--sup-sutil);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modulo-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.arrastar-handle {
  background: none;
  border: none;
  padding: 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.modulo-titulo-input {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-1);
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 4px 8px;
  outline: none;
  flex: 1;
  max-width: 400px;
}
/* botões de texto verdes/vermelhos do editor */
.acao-texto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.acao-texto svg {
  display: block;
}
.acao-texto--salvar {
  /* gravação é ação primária: navy (verde fica pras ações aditivas) */
  font-size: 12px;
  font-weight: 600;
  color: var(--marca-texto);
}
.acao-texto--excluir {
  font-size: 12px;
  color: var(--perigo-texto);
}
.acao-texto--adicionar-verde {
  font-size: 12px;
  font-weight: 600;
  color: var(--sucesso-texto);
}

/* Linha de aula dentro do módulo */
.aula-item {
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: 4px;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  justify-content: space-between;
  gap: 8px;
}
.aula-item__titulo {
  font-size: 14px;
  color: var(--txt-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-aula {
  font-size: 10px;
  font-weight: 500;
  background: var(--marca-suave);
  border: 1px solid var(--marca-hover);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.tag-aula--quiz {
  color: var(--marca-texto);
}
.tag-aula--artigo {
  color: var(--marca-texto-hover);
}
.aula-acao-editar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--sucesso-texto);
  text-decoration: none;
}
.aula-acao-editar svg {
  display: block;
}

/* Input de "adicionar aula/módulo" */
.input-adicionar {
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  outline: none;
}
.input-adicionar--aula {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  flex: 1;
  max-width: 320px;
}
.input-adicionar--modulo {
  height: 36px;
  padding: 0 11px;
  font-size: 13px;
  width: 280px;
}
/* botão secundário "+ Adicionar módulo": 36px / radius 6 / 13px */
.btn-add-modulo {
  border-radius: 6px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ── Editor de quiz (templates de questão/opção) ───────────
   Compartilhado por edit (avaliação final) e show (quiz da aula). */
.cartao-questao {
  background: var(--sup-sutil);
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.questao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.questao-rotulo {
  font-size: 13px;
  font-weight: 600;
}
.questao-rotulo--cinza {
  color: var(--txt-2);
}
.questao-rotulo--azul {
  color: var(--marca-texto);
}
/* input do texto da questão: edit usa 40px, show usa 44px/500 */
.questao-input {
  width: 100%;
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 0 11px;
  color: var(--txt-2);
  outline: none;
  background: var(--sup);
  box-sizing: border-box;
}
.questao-input--medio {
  height: 40px;
  font-size: 14px;
}
.questao-input--alto {
  height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt-1);
}
.questao-legenda {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-3);
  margin: 0;
}

/* Opção (radio + texto + remover) */
.opcao-editor {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* show: opção dentro de caixa cinza */
.opcao-editor--caixa {
  background: var(--sup-sutil);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 0 12px;
  height: 40px;
}
.opcao-radio {
  flex-shrink: 0;
  cursor: pointer;
}
.opcao-radio--verde {
  width: 14px;
  height: 14px;
  accent-color: var(--sucesso-texto);
}
.opcao-radio--verde-grande {
  width: 16px;
  height: 16px;
  accent-color: var(--sucesso-texto);
  margin: 0;
}
.opcao-input {
  flex: 1;
  height: 36px;
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--txt-2);
  outline: none;
  background: var(--sup);
}
/* show: input "naked" dentro da caixa cinza */
.opcao-input--nu {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--txt-2);
  background: transparent;
}
.opcao-remover {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--txt-4);
  line-height: 1;
  flex-shrink: 0;
}
/* botão "+ Adicionar alternativa/questão" (azul/verde) */
.btn-add-quiz {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  font-family: inherit;
}
.btn-add-quiz--alternativa {
  font-size: 12px;
  font-weight: 600;
  color: var(--marca-texto-hover);
}
.btn-add-quiz--questao {
  font-size: 14px;
  font-weight: 600;
  color: var(--sucesso-texto);
}
.quiz-vazio {
  font-size: 13px;
  color: var(--txt-4);
  margin: 0;
}
/* container das questões (gap 20 no edit, 16 no show) e das opções */
.lista-questoes {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lista-questoes--justa {
  gap: 16px;
}
.lista-opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lista-opcoes--justa {
  gap: 6px;
}

/* edit aba avaliação: nota mínima e checkbox de habilitar */
.input-nota {
  height: 40px;
  width: 120px;
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 0 11px;
  font-size: 14px;
  color: var(--txt-2);
  outline: none;
  background: var(--sup);
  box-sizing: border-box;
}

/* ── show: linha vídeo + duração ───────────────────────────── */
.aula-linha-video {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.aula-campo-video {
  flex: 1;
  min-width: 320px;
  max-width: 660px;
}
/* rodapé do form (Voltar à esquerda, Salvar à direita) */
.aula-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── show: blocos de artigos complementares / quiz da aula ─── */
.bloco-divisor {
  border-top: 1px solid var(--linha);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}
.bloco-divisor--g12 {
  gap: 12px;
}
.bloco-divisor--g16 {
  gap: 16px;
}
/* cabeçalho do bloco "nota mínima" (linha) */
.linha-nota {
  display: flex;
  align-items: center;
  gap: 10px;
}
.titulo-bloco-aula {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-1);
  margin: 0;
}
.titulo-bloco-aula--mb4 {
  margin: 0 0 4px;
}
.lista-artigos {
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  overflow: hidden;
}
.artigo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}
.artigo-item--separado {
  border-top: 1px solid var(--linha);
}
.artigo-item__titulo {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-1);
  margin: 0;
}
.artigo-item__url {
  font-size: 11px;
  color: var(--marca-texto-hover);
}
.artigo-item__id {
  font-size: 11px;
  color: var(--txt-3);
  flex-shrink: 0;
}
.nota-rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-3);
}
.nota-percent {
  font-size: 12px;
  color: var(--txt-3);
}
.input-nota--curto {
  width: 72px;
  height: 32px;
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.conteudo-md-textarea {
  width: 100%;
  height: 320px;
  border: 1px solid var(--linha-input);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--txt-2);
  resize: vertical;
  outline: none;
  font-family: monospace;
  background: var(--sup);
  box-sizing: border-box;
}

/* botões "Salvar"/"Voltar" do rodapé dos forms (36px/radius 8) */
.btn-form {
  border-radius: 8px;
  height: 36px;
  padding: 0 18px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.btn-form--salvar {
  font-weight: 700;
  border: none;
}
.btn-form--voltar {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* ── relatorio: KPIs + barra de progresso ──────────────────── */
.kpi-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
/* KPI desta tela: valor 28px com cor dinâmica (inline); difere do
   .kpi do DS (valor 24px azul fixo). */
.kpi-trilha {
  background: var(--sup);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  padding: 18px 20px;
}
.kpi-trilha__rotulo {
  font-size: 12px;
  color: var(--txt-3);
  font-weight: 500;
}
.kpi-trilha__valor {
  font-size: 28px;
  font-weight: 700;
  margin: 2px 0 0;
  line-height: 1.1;
}
/* Cor do valor do KPI por estado (escolhida no array da view) */
.kpi-trilha__valor--azul { color: var(--marca-texto); }
.kpi-trilha__valor--verde { color: var(--sucesso-texto); }
.kpi-trilha__valor--vermelho { color: var(--perigo-texto); }
.kpi-trilha__valor--cinza { color: var(--txt-3); }
.kpi-trilha__sub {
  font-size: 11px;
  color: var(--txt-4);
  margin: 2px 0 0;
}

.relatorio-filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.relatorio-total {
  font-size: 12px;
  color: var(--txt-4);
}
.relatorio-tabela-rolavel {
  overflow-x: auto;
}

/* Célula aluno (nome + e-mail) */
.aluno-bloco {
  line-height: 1.2;
}
.aluno-nome {
  display: block;
  font-weight: 600;
  font-size: 13px;
}
.aluno-email {
  font-size: 11.5px;
  color: var(--txt-3);
}
td.cel-secundaria {
  font-size: 12.5px;
  color: var(--txt-3);
}
td.cel-data {
  font-size: 12px;
  color: var(--txt-3);
}

/* Barra de progresso da tabela de relatório */
.progresso-cel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progresso-trilha {
  width: 64px;
  height: 6px;
  background: var(--sup-trilho);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
/* width = --pct (contínuo, inline); cor por faixa = modifier */
.progresso-trilha__barra {
  height: 6px;
  border-radius: 3px;
  width: var(--pct, 0%);
}
.progresso-trilha__barra--azul { background: var(--marca); }
.progresso-trilha__barra--verde { background: var(--sucesso); }
.progresso-trilha__barra--vermelho { background: var(--perigo); }
.progresso-texto {
  line-height: 1.1;
}
.progresso-pct {
  font-size: 12px;
  font-weight: 700;
  display: block;
}
.progresso-pct--azul { color: var(--marca-texto); }
.progresso-pct--verde { color: var(--sucesso-texto); }
.progresso-pct--vermelho { color: var(--perigo-texto); }
.progresso-aulas {
  font-size: 10.5px;
  color: var(--txt-4);
}

/* Chips de status do relatório (verde/vermelho/azul) */
.status-relatorio {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}
.status-relatorio--concluida {
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
  border: 1px solid var(--sucesso-borda);
}
.status-relatorio--risco {
  background: var(--perigo-suave);
  color: var(--perigo-texto);
  border: 1px solid var(--perigo-borda);
}
.status-relatorio--andamento {
  background: var(--marca-suave);
  color: var(--marca-texto);
  border: 1px solid var(--marca-borda);
}
/* Nunca abriu nenhuma aula da trilha — neutro, não é problema nem progresso */
.status-relatorio--nao-iniciado {
  background: var(--sup-sutil);
  color: var(--txt-3);
  border: 1px solid var(--linha);
}

/* Nota explicativa da carência acima da tabela de abandono */
.relatorio-abandono__nota {
  font-size: 12px;
  color: var(--txt-3);
  line-height: 1.6;
  margin: -4px 0 12px;
  max-width: 860px;
}
.relatorio-abandono__link {
  font-weight: 600;
  color: var(--marca-texto);
  text-decoration: none;
  white-space: nowrap;
}
.relatorio-abandono__link:hover { text-decoration: underline; }
td.relatorio-tabela-vazio {
  text-align: center;
  padding: 48px 20px;
  color: var(--txt-4);
  font-size: 14px;
}

/* Fieldset transparente: agrupa a seção condicional da avaliação sem afetar
   o layout (mesmo gap do .cartao-form). */
.fieldset-limpo {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Busca de artigos do Intercom no form da aula */
.artigos-busca {
  display: flex;
  gap: 8px;
  align-items: center;
}
.artigos-busca__campo {
  width: 320px;
}
.artigos-busca__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  max-width: 660px;
}
.artigos-busca__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px;
}
.artigos-busca__item:last-child {
  border-bottom: none;
}
.artigos-busca__adicionar {
  background: none;
  border: none;
  color: var(--marca-texto);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  padding: 2px 6px;
}
.artigos-busca__vazio {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}