/* 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; }
}

/* Quadro kanban: colunas lado a lado, com rolagem horizontal no celular. */
.quadro { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; }
.coluna {
  flex: 0 0 15rem;
  background: var(--suave);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 0.5rem;
}
.coluna.alvo { outline: 2px dashed var(--destaque); }
.coluna h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.contagem { font-weight: 400; color: #57606a; }
.cartao {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.cartao[draggable="true"] { cursor: grab; }
.cartao details { margin-top: 0.25rem; }
.cartao select, .cartao input { max-width: 100%; margin-bottom: 0.25rem; }
.discreto, .vazia { color: #57606a; font-size: 0.875rem; }
.filtro select { max-width: 16rem; }