:root {
  --fundo: #f4f7f6;
  --cartao: #ffffff;
  --texto: #1d2b2a;
  --suave: #5c6e6c;
  --linha: #d9e2e0;
  --marca: #0f6e66;
  --marca-escura: #0a4f49;
  --ok-fundo: #e3f4ee;
  --ok: #17694a;
  --erro-fundo: #fbe9e7;
  --erro: #a3281a;
  --destaque: #fff6d6;
  --raio: 10px;
}

* { box-sizing: border-box; }

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

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

header.topo {
  background: var(--marca);
  color: #fff;
  padding: .6rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
}
header.topo a { color: #fff; text-decoration: none; }
header.topo .marca { font-weight: 700; margin-right: auto; }
header.topo nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
header.topo form { margin: 0; }
header.topo button { background: transparent; border: 1px solid #ffffff80; color: #fff; padding: .2rem .6rem; }

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.4rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem;
  margin-bottom: 1rem;
}

.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.suave { color: var(--suave); font-size: .9rem; }

.aviso { padding: .7rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); }

form.campos { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-items: end; }
form.campos .largo { grid-column: 1 / -1; }

label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--suave); }
label.linha { flex-direction: row; align-items: center; gap: .5rem; color: var(--texto); }

input, select, textarea, button {
  font: inherit;
  padding: .5rem .6rem;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
}
input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }
textarea { min-height: 4rem; }

button, .botao {
  background: var(--marca);
  color: #fff;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: 8px;
}
button:hover, .botao:hover { background: var(--marca-escura); }
button.secundario, .botao.secundario { background: #fff; color: var(--marca); border: 1px solid var(--marca); }
button.perigo { background: var(--erro); }

.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--suave); font-weight: 600; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.melhor td { background: var(--destaque); font-weight: 600; }

.jarros input { width: 100%; min-width: 4.5rem; }

.numeros { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.numero { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem; }
.numero .valor { font-size: 1.5rem; font-weight: 700; }
.numero.bom .valor { color: var(--ok); }

.etiqueta { display: inline-block; font-size: .78rem; padding: .05rem .45rem; border-radius: 99px; background: var(--linha); color: var(--texto); }
.etiqueta.inativo { background: var(--erro-fundo); color: var(--erro); }

.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.acoes form { margin: 0; }

.login { max-width: 380px; margin: 4rem auto; }
.login form { display: grid; gap: .8rem; }

details summary { cursor: pointer; color: var(--marca); margin: .3rem 0; }

a.cartao { display: block; color: inherit; text-decoration: none; }
a.cartao:hover { border-color: var(--marca); }
fieldset { border: 1px solid var(--linha); }