/* Estilo mínimo do sistema: legível no computador e no celular, sem framework. */
:root {
  --texto: #1f2328;
  --fundo: #ffffff;
  --suave: #f4f5f7;
  --borda: #d0d7de;
  --destaque: #1f5f8b;
  --erro: #b42318;
  --sucesso: #1a7f37;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--suave);
  border-bottom: 1px solid var(--borda);
}

.topo nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; }
.topo form { margin: 0; }
.marca { font-weight: 700; color: var(--texto); text-decoration: none; }

main { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem; }

a { color: var(--destaque); }

input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem;
  border: 1px solid var(--borda);
  border-radius: 6px;
}
form > div { margin-bottom: 0.75rem; }
label { display: block; margin-bottom: 0.25rem; }

button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--destaque);
  border-radius: 6px;
  background: var(--destaque);
  color: #fff;
  cursor: pointer;
}
button.discreto { background: transparent; color: var(--destaque); }

.mensagem, [role="alert"] {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--suave);
}
[role="alert"], .mensagem.error { color: var(--erro); }
.mensagem.success { color: var(--sucesso); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.5rem; border-bottom: 1px solid var(--borda); text-align: left; }
@media (max-width: 40rem) {
  table { display: block; overflow-x: auto; }
}