/* Ferramenta interna. Visual sóbrio, na paleta da marca (creme, terracota, marrom, sálvia),
   sem enfeite: o que importa aqui é ler número rápido e não confundir coluna. */

:root {
  --creme: #F7F3EC;
  --creme-2: #EFE8DD;
  --marrom: #3B2E26;
  --marrom-claro: #6B584A;
  --terracota: #B45B3E;
  --salvia: #6E8168;
  --vermelho: #A33B2A;
  --borda: #DCD2C4;
  --radius: 10px;
  --sombra: 0 1px 2px rgba(59, 46, 38, .06), 0 4px 12px rgba(59, 46, 38, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--marrom);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

header.topo {
  background: var(--marrom);
  color: var(--creme);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
header.topo .marca { font-weight: 700; letter-spacing: .2px; }
header.topo nav { display: flex; gap: 18px; flex-wrap: wrap; }
header.topo nav a { color: var(--creme-2); text-decoration: none; opacity: .85; }
header.topo nav a:hover, header.topo nav a.ativo { opacity: 1; text-decoration: underline; }
header.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
header.topo button {
  background: none; border: 1px solid rgba(247,243,236,.35); color: var(--creme);
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}

main { max-width: 1180px; margin: 0 auto; padding: 26px 22px 60px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 34px 0 12px; color: var(--marrom-claro); text-transform: uppercase; letter-spacing: .6px; }
.sub { color: var(--marrom-claro); font-size: 14px; margin: 0 0 20px; }

.filtros {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--radius);
  padding: 14px 16px; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  box-shadow: var(--sombra);
}
.filtros label { display: block; font-size: 12px; color: var(--marrom-claro); margin-bottom: 4px; }
.filtros input, .filtros select {
  border: 1px solid var(--borda); border-radius: 6px; padding: 7px 9px; font-size: 14px;
  background: #fff; color: var(--marrom);
}
.btn {
  background: var(--terracota); color: #fff; border: none; border-radius: 6px;
  padding: 8px 16px; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn.secundario { background: var(--salvia); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.card {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--sombra);
}
.card .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--marrom-claro); }
.card .valor { font-size: 25px; font-weight: 700; margin-top: 6px; }
.card .nota { font-size: 12px; color: var(--marrom-claro); margin-top: 4px; }
.card.alerta .valor { color: var(--vermelho); }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--creme-2); font-size: 14px; }
th { background: var(--creme-2); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--marrom-claro); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rolavel { overflow-x: auto; }

.aviso {
  background: #FBF1E8; border: 1px solid #E3C4AE; border-left: 4px solid var(--terracota);
  padding: 12px 16px; border-radius: 8px; margin: 18px 0; font-size: 14px;
}
.vazio { color: var(--marrom-claro); font-style: italic; padding: 18px; background: #fff; border: 1px dashed var(--borda); border-radius: var(--radius); }

.tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--creme-2); color: var(--marrom-claro); }
.tag.ok { background: #E4EBE1; color: #46583F; }
.tag.ruim { background: #F6E2DD; color: var(--vermelho); }

/* Login */
.login-wrap { max-width: 380px; margin: 90px auto; }
.login-wrap .caixa { background: #fff; border: 1px solid var(--borda); border-radius: var(--radius); padding: 28px; box-shadow: var(--sombra); }
.login-wrap input { width: 100%; padding: 10px; margin-bottom: 14px; border: 1px solid var(--borda); border-radius: 6px; font-size: 15px; }
.login-wrap .btn { width: 100%; }
.erro { background: #F6E2DD; color: var(--vermelho); padding: 10px 12px; border-radius: 6px; font-size: 14px; margin-bottom: 14px; }