/* Shell minimo da fase 1. As telas de negocio entram nas fases seguintes. */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.875rem 1.25rem;
  background: var(--sup-1); border-bottom: 1px solid var(--linha);
}
.topo .wordmark { font-size: 1.25rem; }
.topo .identidade { display: flex; align-items: center; gap: 0.625rem; }
.topo img { width: 28px; height: 28px; border-radius: 6px; }
.topo .sair {
  width: auto; margin: 0; padding: 0.5rem 0.875rem; font-size: 0.8125rem;
  background: transparent; color: var(--texto-2); border: 1px solid var(--linha);
}
.topo .sair:hover { background: var(--sup-2); color: var(--texto); }
main { padding: 1.5rem 1.25rem; max-width: 60rem; margin: 0 auto; }
.cartao {
  background: var(--sup-1); border: 1px solid var(--linha);
  border-radius: var(--raio-md); padding: 1.5rem; margin-bottom: 1rem;
}
.cartao h2 { font-size: 1rem; margin-bottom: 0.75rem; }
.cartao p { color: var(--texto-2); font-size: 0.9375rem; }
dl.dados { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; }
dl.dados dt { color: var(--texto-2); font-size: 0.875rem; }
dl.dados dd { font-family: var(--fonte-dados); font-size: 0.875rem; }