:root {
  --primary: #14232E;
  --accent:  #9A7116;
  --accent2: #702632;
  --bg: #ffffff;
  --bg2: #DAD7CD;
  --text: #000000;
}
body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.controls { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 10px; align-items: end; margin: 10px 0 20px; }
.controls label { font-size: 12px; color: #333; }
.controls button { background: var(--primary); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; }
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three columns */;
  gap: 12px;
}

.kpis .card {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical center */
  align-items: center;       /* horizontal center */
  text-align: center;        /* center text */
  min-height: 96px;          /* ensure equal height */
  padding: 12px 16px;
}

.kpis .card .k { font-size: 1.2rem; opacity: 0.75; }
.kpis .card .v { font-size: 1.5rem; font-weight: 800; margin-top: 4px; }
.table { width: 100%; border-collapse: collapse; }
.table.lefthead th { text-align: left; }
.table td, .table th { padding: 6px 8px; border-bottom: 1px solid #eee; }
.muted { color: #505050; font-size: 12px; margin-top: 6px; }