/* estilo.css — Trem (#342). Só tokens do design system. */
.trem-sub { color: var(--muted); font-size: 12px; }
.trem-aviso { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
.trem-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.trem-titulo { font-size: 13px; margin: 0 0 8px; }
.trem-para-que { color: var(--muted); font-size: 13px; margin: 0 0 12px; max-width: 70ch; }
.trem .ds-molde-corpo > .principal { align-self: stretch; max-width: 100%; }

/* #148: esta tela é a página inteira (filho direto do shell, sem .wrap):
   mesmo respiro do .wrap (como o Calendário no #643), senão o título encosta na sidebar. */
.app-shell > .trem { flex: 1; min-width: 0; box-sizing: border-box; padding: 18px 24px 28px; }
@media (max-width: 820px) { .app-shell > .trem { padding: 14px 16px 24px; } }