/* ATENA · Aulas e alunos (web/js/modulos/alunos.js).
 * Componentes do kit (at-); aqui só a arrumação do módulo, com classes aulas-
 * e apenas tokens. Telas: turmas, turma, alunos, ficha do aluno e cursos. */

/* ---------- topo das listas ---------- */
.aulas-kpis { margin-bottom: var(--space-6); }
.aulas-secao { margin-top: var(--space-4); }
.aulas-filtros .at-select { width: auto; max-width: 100%; }
.aulas-filtros .at-checkbox { white-space: nowrap; }
.aulas-contagem { margin-top: var(--space-2); }

/* KPI sem número (situação da turma, presença ainda sem registro) */
.aulas-kpi-conteudo { display: flex; align-items: center; min-height: 34px; }
.aulas-kpi-vazio { color: var(--ink-muted); }
.aulas-kpi-icone--risco { background: var(--danger-soft); color: var(--danger); }
.aulas-anel { --size: 36px; flex: none; }
.aulas-anel::before { inset: 5px; }

/* ---------- presença: a cor acompanha o número, nunca o substitui ---------- */
.aulas-nivel--ok { --fill: var(--success); }
.aulas-nivel--alerta { --fill: var(--warning); }
.aulas-nivel--risco { --fill: var(--danger); }
.aulas-freq { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.aulas-freq .at-progress { flex: 1 1 auto; min-width: 48px; max-width: 180px; }
.aulas-freq__valor { min-width: 40px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.aulas-freq__detalhe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }

/* ---------- cartão da turma ---------- */
.aulas-turma { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; color: var(--ink); font-weight: 500; text-decoration: none; }
.aulas-turma:hover { color: var(--ink); text-decoration: none; }
.aulas-turma__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.aulas-turma__topo .at-badge { flex: none; }
.aulas-turma__nome { min-width: 0; margin: 0; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.aulas-turma__curso { color: var(--ink-muted); margin-top: calc(-1 * var(--space-2)); }
.aulas-turma__pessoas { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.aulas-turma__prof { color: var(--ink-secondary); font-weight: 600; }
.aulas-turma__alunos { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; color: var(--ink-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aulas-turma__alunos b { color: var(--ink); }
.aulas-turma__alunos .at-icon { color: var(--ink-muted); }
.aulas-turma__medidas { gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.aulas-turma .at-progress-row { grid-template-columns: 88px minmax(0, 1fr) auto; }
.aulas-turma__rodape { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

/* ---------- página da turma ---------- */
.aulas-turma-blocos > .at-card { min-width: 0; }
.aulas-texto-livre { white-space: pre-wrap; overflow-wrap: anywhere; }
.aulas-info .at-dl { margin: 0; }
.aulas-info .aulas-texto-livre { font-weight: 500; }
/* selo ao lado do título (ex.: em risco): o badge volta à fonte da interface */
.tela-alunos .at-page-header__title .at-badge { font-family: var(--font-sans); letter-spacing: 0.01em; }
.aulas-info .at-dl a { display: inline-flex; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; }

/* lista de aulas: data, título com o estado, ações */
.aulas-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.aulas-aula {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.aulas-aula:hover { border-color: var(--brand-200); background: var(--brand-soft-hover); }
.aulas-aula__data { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); background: var(--surface-sunken); text-align: center; font-variant-numeric: tabular-nums; }
.aulas-aula__data strong { color: var(--ink); }
.aulas-aula__data span { color: var(--ink-muted); white-space: nowrap; }
.aulas-aula__corpo { min-width: 0; }
.aulas-aula__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.aulas-aula__titulo strong { overflow-wrap: anywhere; }
.aulas-aula__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.aulas-aula__links a { display: inline-flex; align-items: center; gap: var(--space-1); }
.aulas-aula__acoes { display: flex; align-items: center; gap: var(--space-1); }
.aulas-aula[data-status="cancelada"] .aulas-aula__titulo strong { color: var(--ink-muted); text-decoration: line-through; }
.aulas-aula[data-status="cancelada"] .aulas-aula__data strong { color: var(--ink-muted); }

/* ---------- tabelas (alunos da turma, lista de alunos, cursos) ---------- */
.aulas-clicavel { cursor: pointer; }
.aulas-pessoa { display: flex; flex-direction: column; min-width: 0; }
.aulas-pessoa a.at-person__name { color: var(--ink); }
.aulas-pessoa a.at-person__name:hover { color: var(--brand-text); }
.aulas-pessoa__nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.aulas-col-freq { width: 34%; min-width: 200px; }
.aulas-mats { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.aulas-mats__linha { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 13px; line-height: 18px; }
.aulas-curso__descricao { max-width: 420px; }
.aulas-curso__publico { margin-top: var(--space-1); }

/* empty state dentro de card: a coruja menor */
.aulas-compacto .at-empty { padding: var(--space-6) var(--space-4); }
.aulas-compacto .at-empty__art { width: 88px; }

/* ---------- presença (modal) ---------- */
.aulas-presenca__topo { align-items: center; }
.aulas-presenca__resumo { color: var(--ink-secondary); }
.aulas-presenca__resumo b { color: var(--ink); font-variant-numeric: tabular-nums; }
.aulas-presenca { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); }
.aulas-presenca__linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.aulas-presenca__linha:last-child { border-bottom: 0; }
.aulas-presenca__nome { min-width: 0; }
.aulas-presenca__obs { height: var(--control-height-sm); }
.aulas-alterna { min-width: 112px; }
.aulas-alterna.is-presente { --at-btn-bg: var(--success-soft); --at-btn-ink: var(--success); --at-btn-border: transparent; }
.aulas-alterna.is-faltou { --at-btn-bg: var(--danger-soft); --at-btn-ink: var(--danger); --at-btn-border: transparent; }
.aulas-alterna.is-presente:hover { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.aulas-alterna.is-faltou:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* ---------- ficha do aluno ---------- */
.aulas-contatos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aulas-contatos .at-btn { max-width: 100%; }
.aulas-rotulo { margin-bottom: var(--space-2); text-transform: uppercase; }
.aulas-ficha > .at-card { min-width: 0; }
.aulas-matriculas { display: flex; flex-direction: column; gap: var(--space-3); }
.aulas-matricula { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.aulas-matricula__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.aulas-matricula__curso { overflow-wrap: anywhere; }
.aulas-matricula__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--ink-muted); }
.aulas-matricula__freq { padding-top: var(--space-1); }
.aulas-atendimento-form { display: flex; flex-direction: column; gap: var(--space-3); }
.aulas-atendimento-form .at-textarea { min-height: 80px; }
.aulas-atendimento { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }

/* ---------- esqueletos ---------- */
.aulas-esq-70 { width: 70%; }
.aulas-esq-nome { width: 140px; }
.aulas-esq-voltar { width: 72px; margin-bottom: var(--space-3); }
.aulas-esq-cabecalho { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }

/* ---------- telas estreitas ---------- */
@media (max-width: 720px) {
  .aulas-filtros .at-select { flex: 1 1 100%; }
  .aulas-info .at-dl { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .aulas-info .at-dl dd + dt { margin-top: var(--space-2); }

  .aulas-aula { grid-template-columns: 76px minmax(0, 1fr); }
  .aulas-aula__acoes { grid-column: 1 / -1; justify-content: flex-end; }

  .aulas-presenca__linha { grid-template-columns: minmax(0, 1fr) auto; }
  .aulas-presenca__obs { grid-column: 1 / -1; grid-row: 2; }

  /* tabela vira lista: cada linha um bloco, o rótulo da coluna em overline */
  .aulas-tabela thead { display: none; }
  .aulas-tabela, .aulas-tabela tbody, .aulas-tabela tr, .aulas-tabela td { display: block; width: 100%; }
  .aulas-tabela tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .aulas-tabela tbody tr:last-child { border-bottom: 0; }
  .aulas-tabela td { height: auto; padding: var(--space-1) 0; border: 0; text-align: left; }
  .aulas-tabela td[data-rotulo]:not(:first-child)::before {
    content: attr(data-rotulo); display: block; margin-bottom: 2px;
    font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  }
  .aulas-tabela td.is-num { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
  .aulas-tabela td.is-num::before { margin-bottom: 0; }
  .aulas-tabela td.is-actions { width: 100%; text-align: left; padding-top: var(--space-2); }
  .aulas-col-freq { min-width: 0; }
  .aulas-mats__linha { align-items: flex-start; }
  .aulas-mats__linha .truncar { white-space: normal; }
  .aulas-curso__descricao { max-width: none; white-space: normal; }
}

/* ---------- portal do aluno: acesso (card na ficha) ---------- */
.aulas-portal__corpo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.aulas-portal__dados { margin: 0; flex: 1 1 360px; min-width: 0; }
.aulas-portal__dados dd { overflow-wrap: anywhere; }
.aulas-portal__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.aulas-portal__acoes .at-help { flex-basis: 100%; }
.aulas-badge-desligado { --at-badge-bg: var(--slate-soft); --at-badge-ink: var(--slate); }
.aulas-senha { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); }
.aulas-senha__valor { font-size: 20px; line-height: 28px; letter-spacing: 0.08em; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- página do curso: conteúdo do portal ---------- */
.aulas-curso__nome { font-weight: 700; color: var(--ink); }
.aulas-curso__nome:hover { color: var(--brand-text); }
.aulas-pconteudo__topo { align-items: flex-start; }
.aulas-pmods { display: flex; flex-direction: column; gap: var(--space-3); }
.aulas-pmod { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); min-width: 0; }
.aulas-pmod.is-rascunho { border-style: dashed; }
.aulas-pmod__topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: flex-start; gap: var(--space-3); }
.aulas-pmod__titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aulas-pmod__titulo strong { overflow-wrap: anywhere; }
.aulas-pmod__n { color: var(--brand-text); text-transform: uppercase; }
.aulas-pmod__acoes { display: flex; align-items: center; gap: var(--space-1); }
.aulas-pmod__vazio { padding-left: var(--space-10); }
.aulas-ordem { display: flex; flex-direction: column; }
.aulas-ordem .at-btn--icon.at-btn--sm { width: 28px; height: 24px; min-width: 0; }
.aulas-seta-cima .at-icon { transform: rotate(180deg); }
.aulas-plicoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.aulas-plicao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.aulas-plicao.is-rascunho { border-style: dashed; }
.aulas-plicao__texto { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.aulas-plicao__titulo { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.aulas-plicao__titulo:hover { color: var(--brand-text); }
.aulas-plicao__acoes { display: flex; align-items: center; gap: var(--space-1); }
.aulas-markdown { min-height: 220px; }
.aulas-video-ok .at-help { color: var(--success); font-weight: 600; }

/* ---------- página do curso: comunidade ---------- */
.aulas-psalas { margin-bottom: var(--space-4); }
.aulas-psalas .at-chip { gap: var(--space-2); }
.aulas-pmsgs__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aulas-pmsg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.aulas-pmsg:last-child { border-bottom: 0; }
.aulas-pmsg__corpo { min-width: 0; }
.aulas-pmsg__corpo p { margin: 2px 0 0; color: var(--ink); }
.aulas-pmsg .at-person__name { color: var(--ink); }
.aulas-pmsg .at-person__name:hover { color: var(--brand-text); }
.aulas-pmsgs__mais { display: flex; justify-content: center; padding-top: var(--space-3); }

@media (max-width: 720px) {
  .aulas-pmod { padding: var(--space-3); }
  .aulas-pmod__topo { grid-template-columns: auto minmax(0, 1fr); }
  .aulas-pmod__acoes { grid-column: 1 / -1; justify-content: flex-end; }
  .aulas-pmod__vazio { padding-left: 0; }
  .aulas-plicao { grid-template-columns: auto minmax(0, 1fr); }
  .aulas-plicao__acoes { grid-column: 1 / -1; justify-content: flex-end; }
  .aulas-portal__acoes { width: 100%; }
}
.aulas-psalas .at-chip { height: auto; min-height: var(--control-height-sm); padding-top: 4px; padding-bottom: 4px; max-width: 100%; white-space: normal; text-align: left; }

/* Onboarding do aluno novo (alunos-onboarding.js) */
.onb-resumo { margin-bottom: var(--space-2); }
.onb-grupo { margin-bottom: var(--space-6); }
.onb-grupo__titulo { text-transform: uppercase; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--ink-secondary); }
.onb-grupo__n { display: inline-flex; min-width: 22px; height: 22px; padding: 0 var(--space-2); align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.onb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.onb-cartao { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.onb-cartao:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.onb-cartao:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.onb-cartao__nome { display: flex; flex-direction: column; min-width: 0; }
.onb-cartao__nome .title-md { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-cartao__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.onb-progresso { display: flex; align-items: center; gap: var(--space-3); min-width: 140px; }
.onb-progresso .at-progress { flex: 1; }
.onb-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.onb-passo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.onb-passo:first-child { border-top: 0; padding-top: 0; }
.onb-passo__marca { align-items: flex-start; flex: 1; min-width: 0; }
.onb-passo__texto { display: flex; flex-direction: column; gap: 2px; }
.onb-passo__rotulo { font-weight: 700; color: var(--ink); }
.onb-passo.is-feito .onb-passo__rotulo { color: var(--ink-secondary); }

/* avisos da turma no portal do aluno */
[data-avisos-turma] .at-card__header { align-items: flex-start; gap: var(--space-3); }
.aulas-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aulas-aviso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.aulas-aviso:last-child { border-bottom: 0; padding-bottom: 0; }
.aulas-aviso__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }