/* ATENA — o que é só do sistema, por cima do kit (atena-design-system:
 * tokens.css + components/bundle.css, que vêm antes e não são editados).
 * Regra: só tokens (var(--…)); nenhuma cor, fonte ou raio inventado.
 * Aqui: arrumação da casca (menu recolhido), modal, utilidades de layout,
 * sino e gráficos. O CSS de cada módulo mora em css/modulos/<módulo>.css. */

#app { min-height: 100vh; }
[hidden] { display: none !important; }

/* ---------- casca ---------- */
.at-app { min-height: 100vh; }
.at-main { width: 100%; }
/* o foco vai para o conteúdo a cada troca de tela (leitor de tela); o anel não aparece em volta da página inteira */
.at-main:focus, .at-main:focus-visible { outline: none; box-shadow: none; }
/* tile do logo (no menu recolhido só o tile aparece; gira no hover, como no manual) */
.at-sidebar__brand { text-decoration: none; }
.at-sidebar__brand:hover { text-decoration: none; }
.at-sidebar__brand .at-sidebar__brand-mark { display: none; }
.at-app.is-collapsed .at-sidebar:not(.is-peek) .at-sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
.at-app.is-collapsed .at-sidebar:not(.is-peek) .at-sidebar__brand .lockup { display: none; }
.at-app.is-collapsed .at-sidebar:not(.is-peek) .at-sidebar__brand .at-sidebar__brand-mark { display: block; }
.at-sidebar__user { color: var(--sidebar-ink); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); }
.at-sidebar__user:hover { background: var(--sidebar-bg-hover); color: var(--sidebar-ink); text-decoration: none; }
.at-sidebar__user.is-active { background: var(--sidebar-bg-active); }
.at-nav { overflow-y: auto; scrollbar-width: none; }
.at-nav::-webkit-scrollbar { display: none; }
/* contador no menu recolhido: no canto do ícone */
.at-app.is-collapsed .at-sidebar:not(.is-peek) .at-nav__item { position: relative; }
.at-app.is-collapsed .at-sidebar:not(.is-peek) .at-nav__count { position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
/* recolhido: passar o mouse (ou tocar no logo) abre o menu por cima do conteúdo */
.at-app > .at-sidebar { grid-column: 1; }
.at-app > .at-main { grid-column: 2; }
.at-app.is-collapsed .at-sidebar.is-peek {
  position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: var(--sidebar-width); box-shadow: var(--shadow-lg);
  animation: at-fade var(--duration-fast) var(--ease-out) both;
}
.at-app.is-collapsed .at-sidebar.is-peek .at-nav__label,
.at-app.is-collapsed .at-sidebar.is-peek .at-nav__badge,
.at-app.is-collapsed .at-sidebar.is-peek .at-sidebar__user-name,
.at-app.is-collapsed .at-sidebar.is-peek .at-sidebar__user-role { display: revert; }
.at-app.is-collapsed .at-sidebar.is-peek .at-nav__section { display: block; }
.at-app.is-collapsed .at-sidebar.is-peek .at-nav__item { justify-content: flex-start; padding: 0 var(--space-3); }
.at-app.is-collapsed .at-sidebar__user { justify-content: center; }
.at-app.is-collapsed .at-sidebar.is-peek .at-sidebar__user { justify-content: flex-start; }

/* ---------- splash (primeiro carregamento) ---------- */
.at-splash__wordmark { height: 28px; }

/* ---------- modal (o painel e o scrim vêm do kit) ---------- */
.modal-raiz .at-drawer-overlay { z-index: var(--z-overlay); }
.at-modal__panel { max-height: calc(100vh - 2 * var(--space-6)); overflow: auto; display: flex; flex-direction: column; }
.at-modal__panel.modal-largo { width: min(760px, 100%); }
.modal-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.modal-corpo { display: flex; flex-direction: column; gap: var(--space-4); }
.modal-erro { color: var(--danger); margin-top: var(--space-3); }
.modal-rodape { justify-content: flex-end; margin-top: var(--space-6); }

/* ---------- formulários: arrumação ---------- */
.at-form-row .inteiro, .at-form-row > .inteiro { grid-column: 1 / -1; }
.at-field small, .at-field .at-help { margin: 0; }
.at-checkbox-lista { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
fieldset.at-field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.at-field > legend { padding: 0; margin-bottom: 6px; }
@media (max-width: 720px) { .at-form-row { grid-template-columns: 1fr; } }
/* drawer no celular: largura toda, sem o raio (telas.md · Responsivo) */
@media (max-width: 720px) { .at-drawer { border-radius: 0; } .at-drawer__header, .at-drawer__body, .at-drawer__footer { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* ---------- utilidades de layout (equivalentes aos pv-row/pv-col dos previews) ---------- */
.pilha { display: flex; flex-direction: column; gap: var(--space-3); }
.linha { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.linha-sep { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cresce { flex: 1; min-width: 0; }
.mt { margin-top: var(--space-4); }
.mt-p { margin-top: var(--space-2); }
.suave { color: var(--ink-secondary); }
.fraco { color: var(--ink-muted); }
.mini { font-size: 13px; line-height: 18px; }
.truncar { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inteiro { grid-column: 1 / -1; }
.secao-titulo { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.005em; margin: var(--space-8) 0 var(--space-4); }
.at-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .at-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .at-grid--3 { grid-template-columns: 1fr; } }
.voltar { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); font-size: 13px; }
.voltar .at-icon { width: 16px; height: 16px; }
.at-page-header__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.at-page-header > div:first-child { min-width: 0; }
.at-page-header__actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) { .at-page-header { flex-direction: column; gap: var(--space-4); } .at-page-header__actions { justify-content: flex-start; } }
.at-card__title { margin: 0; }
.at-card__header .at-card__title + * { flex: none; }
.texto-limite { max-width: 64ch; }
/* sub-navegação de um módulo (Turmas · Alunos · Cursos): o segmented do kit, com links */
.at-segmented a.at-segmented__item { text-decoration: none; }
.navegacao-modulo { margin-bottom: var(--space-5); max-width: 100%; overflow-x: auto; }
/* tabela vazia: o empty state ocupa a linha inteira */
.at-table td.vazio-celula { height: auto; }

/* ---------- sino (notificações) ---------- */
.lista-notificacoes { display: flex; flex-direction: column; gap: var(--space-2); }
.notificacao {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font-weight: 500;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.notificacao:hover { border-color: var(--brand-200); background: var(--brand-soft-hover); text-decoration: none; color: var(--ink); }
.notificacao__ponto { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.notificacao.is-nova .notificacao__ponto { background: var(--brand); }
.notificacao__texto { display: block; }

/* ---------- gráficos (web/js/graficos.js): cores do manual, chart-1… e etapas ---------- */
.grafico { position: relative; min-height: 120px; border-radius: var(--radius-sm); }
.grafico-svg { display: block; overflow: visible; font-family: var(--font-sans); touch-action: pan-y; }
.g-grade { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.g-eixo { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.g-eixo-y, .g-eixo-x { fill: var(--ink-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-eixo-y { text-anchor: end; }
.g-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-area { fill-opacity: .1; stroke: none; }
.g-ponto { stroke: var(--surface-raised); stroke-width: 2; }
.g-mira { stroke: var(--ink-muted); stroke-width: 1; shape-rendering: crispEdges; }
.g-col { transition: opacity var(--duration-fast) var(--ease-standard); transform-box: fill-box; transform-origin: bottom; animation: at-grow-y var(--duration-slower) var(--ease-out) both; }
.g-com-ativa .g-col:not(.ativa) { opacity: .45; }
.g-valor { fill: var(--ink-secondary); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-ref { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.g-ref-rotulo { fill: var(--ink-muted); font-size: 11px; font-weight: 600; }
.g-plano { cursor: crosshair; }
.g-linha { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: at-check-draw var(--duration-slower) var(--ease-out) 120ms forwards; }
.grafico-vazio { display: grid; place-items: center; color: var(--ink-muted); font-size: 13px; min-height: 80px; margin: 0; }

/* barras horizontais: a linha de progresso do kit (trilho chart-track, 8px, cresce e brilha) */
.hbarras { display: flex; flex-direction: column; gap: var(--space-1); }
.hbarra { display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: 6px var(--space-2); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; transition: background-color var(--duration-fast) var(--ease-standard); }
.hbarra[data-dica]:hover, .hbarra:focus-visible { background: var(--brand-soft-hover); outline: none; }
.hbarra:focus-visible { box-shadow: var(--shadow-focus); }
.hbarra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.hbarra-rotulo .at-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--success); }
.hbarra-rotulo .at-icon.alerta { color: var(--warning); }
.hbarra-trilho { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 20px; }
.hbarra-trilho::before { content: ""; position: absolute; left: 0; right: var(--reserva); top: 50%; height: 8px; margin-top: -4px; border-radius: var(--radius-xs); background: var(--chart-track); }
.hbarra-marca { position: relative; flex: none; height: 8px; width: max(4px, calc((100% - var(--reserva)) * var(--f))); border-radius: var(--radius-xs); animation: at-grow var(--duration-slower) var(--ease-out) both; }
.hbarra-valor { position: relative; margin-left: auto; white-space: nowrap; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-secondary); } /* no fim, na área reservada (como .at-progress-row__value) */
.hbarra-ref { position: absolute; z-index: 1; top: -4px; bottom: -4px; left: calc((100% - var(--reserva)) * var(--f)); border-left: 1px dashed var(--ink-muted); }
.hbarra-cabeca { padding-top: 0; padding-bottom: 0; }
.hbarra-cabeca .hbarra-trilho { min-height: 16px; }
.hbarra-cabeca .hbarra-trilho::before { display: none; }
.hbarra-ref-rotulo { position: absolute; left: calc((100% - var(--reserva)) * var(--f)); transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 720px) { .hbarra { grid-template-columns: minmax(0, 1fr); gap: 2px; } .hbarra-cabeca > span:first-child { display: none; } }

.legenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13px; font-weight: 600; color: var(--ink-secondary); margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-chave { display: inline-block; flex: none; }
.legenda-linha { width: 14px; height: 3px; border-radius: 2px; }
.legenda-barra { width: 10px; height: 10px; border-radius: var(--radius-xs); }

/* dica do gráfico = o tooltip do kit (surface-inverse) */
.dica { position: fixed; z-index: var(--z-tooltip); pointer-events: none; display: grid; gap: 2px; max-width: 280px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--surface-inverse); color: var(--ink-inverse); box-shadow: var(--shadow-md); font-size: 12px; line-height: 16px; animation: at-fade var(--duration-fast) var(--ease-standard) both; }
.dica-titulo { color: var(--ink-inverse-muted); font-weight: 600; }
.dica-linha { display: flex; align-items: center; gap: var(--space-2); }
.dica-linha strong { font-size: 14px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dica-linha span:not(.dica-chave) { color: var(--ink-inverse-muted); font-weight: 600; }
.dica-chave { width: 12px; height: 3px; border-radius: 2px; flex: none; }

/* cartão de gráfico: o card do kit com o botão Tabela ⇄ Gráfico */
.grafico-cartao { min-width: 0; }
.grafico-cartao .at-card__header { align-items: flex-start; }
.grafico-cartao .at-card__header p { margin-top: 2px; }
.grafico-largo { grid-column: 1 / -1; }
.at-table--compact.tabela-grafico td { height: 40px; }

/* sucesso do botão vence o hover (o ponteiro ainda está sobre o botão logo depois do clique) */
.at-btn.is-success, .at-btn.is-success:hover { background: var(--success-fill); border-color: var(--success-fill); color: var(--on-status); }
/* badge ao lado do título da página (selo do cabecalho(), ex.: "em breve") fica na fonte do texto */
.at-page-header__title .at-badge { font-family: var(--font-sans); vertical-align: middle; margin-left: var(--space-2); }
/* texto só para leitor de tela (.sr) dentro de tabela que rola: fica preso à caixa, não alarga a página */
.at-table-wrap { position: relative; }
/* títulos que recebem foco ao abrir (drawer, modal) são ponto de leitura, não controle: sem anel */
.at-drawer__title:focus, .modal-topo h2:focus { outline: none; }
/* login no celular: a frase de abertura quebra em duas linhas; ficam as duas dentro de UMA pauta
   para os campos continuarem na linha dos rótulos da margem (E-mail, Senha) */
@media (max-width: 720px) {
  .at-login__text { font-size: 13px; line-height: 20px; height: var(--pitch); display: flex; align-items: flex-end; padding-bottom: 4px; }
}