/* ATENA · Dashboards (comercial, pedagógico e financeiro).
 * Componentes do kit (at-card, at-kpi, at-segmented, at-table…); os gráficos
 * usam a cola compartilhada de app.css (.grafico, .hbarra, .dica, .legenda).
 * Aqui só a arrumação da tela, sempre com tokens. */

/* barra: painéis (segmented) + período */
.dash-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.dash-barra .navegacao-modulo { margin-bottom: 0; }
.dash-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.dash-filtros > .at-select { width: auto; min-width: 200px; }
.dash-livre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dash-data { gap: 0; }
.dash-data .at-input { width: auto; }
.dash-livre-erro { flex-basis: 100%; display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--danger); }
.dash-periodo { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* conteúdo: enquanto recarrega, o quadro anterior fica esmaecido (o esqueleto não) */
.dash-conteudo { transition: opacity var(--duration-fast) var(--ease-standard); }
.dash-conteudo.carregando { opacity: 0.5; pointer-events: none; }
.dash-conteudo.carregando:has(> .dash-esqueleto) { opacity: 1; }
.dash-graficos { margin-top: var(--space-4); }
.dash-graficos > .at-card { min-width: 0; }

/* KPIs: a pílula de variação entra depois do count-up (motion.md, KPIs) */
.dash-kpis .at-kpi__trend { flex: none; animation: at-fade var(--duration-base) var(--ease-out) var(--duration-slower) both; }
.dash-kpis .kpi-rotulo { min-width: 0; }

/* aviso do financeiro (matrículas sem valor): banner em warning-soft */
.dash-nota {
  display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--warning-soft); color: var(--ink);
  font-size: 14px; line-height: 20px; font-weight: 500;
}
.dash-nota > .at-icon { flex: none; color: var(--warning); margin-top: 1px; }
.dash-nota a { font-weight: 700; margin-left: var(--space-1); }

/* tabelas dos cards */
.dash-time td:first-child { min-width: 220px; }
.dash-pessoa { display: grid; min-width: 0; }
.dash-pessoa .at-person__name { white-space: nowrap; }
.dash-clicavel { cursor: pointer; }
.dash-nada { color: var(--ink-faint); }
.dash-graficos .at-empty { padding: var(--space-6) var(--space-4); }

/* esqueleto do primeiro carregamento */
.dash-esq-dica { width: 70%; }
.dash-esq-grafico { height: 200px; margin-top: var(--space-4); }

@media (max-width: 720px) {
  .dash-filtros, .dash-filtros > .at-select { width: 100%; }
  .dash-barra .navegacao-modulo { max-width: 100%; }
  .dash-time td:first-child { min-width: 180px; }
}

/* celular: o botão Tabela ⇄ Gráfico fica só com o ícone (o texto segue para leitor de tela),
 * e as tabelas rolam dentro do card em vez de espremer as colunas */
@media (max-width: 720px) {
  .tela-dashboards .grafico-alternar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tela-dashboards .dash-graficos .at-table td, .tela-dashboards .dash-graficos .at-table th { white-space: nowrap; }
}