:root {
  --color-bg: #ffffff;
  --color-surface: #f5f7f4;
  --color-text: #232323;
  --color-verde: #689F38;
  --color-verde-escuro: #0D3B36;
  --color-laranja: #F57C00;
  --color-cinza: #757575;
  --color-divider: #e3e3df;

  --color-verde-100: #eef4e9;
  --color-verde-700: #4d7629;
  --color-laranja-100: #fdf1e4;
  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #ebebe8;
  --color-neutral-400: #b9b9b3;
  --color-neutral-600: #757575;
  --color-neutral-700: #575757;

  --font-heading: 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-body: 'Segoe UI', Roboto, system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius: 6px;
  --shadow-md: 0 3px 12px rgba(13,59,54,.08);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0 0 var(--space-2); color: var(--color-verde-escuro); }
a { color: var(--color-verde-700); }
img { max-width: 100%; }

.nav { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-6); border-bottom: 1px solid var(--color-divider); }
.nav img { height: 42px; }
.nav .saudacao { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
.nav .saudacao .rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-verde); }
.nav .saudacao .nome { font-weight: 700; font-size: 18px; color: var(--color-verde-escuro); }

.layout { display: flex; align-items: stretch; min-height: calc(100vh - 63px); }
.sidebar { width: 224px; flex: none; border-right: 1px solid var(--color-divider); padding: var(--space-4) var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.sidebar .grupo { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-verde); padding: 6px 14px 8px; }
.sb-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-weight: 600; font-size: 15px; color: var(--color-text); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; }
.sb-link:hover { color: var(--color-verde-700); background: var(--color-verde-100); }
.sb-link.ativo { color: var(--color-verde-700); border-left-color: var(--color-verde); background: var(--color-verde-100); }
.sb-link svg { width: 17px; height: 17px; flex: none; }
.sidebar .rodape { margin-top: auto; }

main.conteudo { flex: 1; padding: var(--space-6) var(--space-8); min-width: 0; }

.kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-verde); margin-bottom: 4px; }

.card { border: 1px solid var(--color-divider); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--color-bg); }
.card-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-verde); margin-bottom: 4px; }
.card-value { font-size: 28px; font-weight: 700; color: var(--color-verde-escuro); }
.card-meta { font-size: 11px; color: var(--color-neutral-600); margin-top: 4px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-1_6-1 { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 13px; border-radius: 4px; padding: 9px 16px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); }
.btn:hover { background: var(--color-neutral-100); }
.btn-primary { background: var(--color-verde); border-color: var(--color-verde); color: #fff; }
.btn-primary:hover { background: var(--color-verde-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.field { margin-bottom: var(--space-3); }
.field label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--color-neutral-700); font-weight: 600; }
.input, select.input, textarea.input { width: 100%; min-height: 38px; padding: 7px 10px; font: inherit; font-size: 14px; border: 1px solid var(--color-divider); border-radius: 4px; background: #fff; }
.input:focus { outline: 2px solid var(--color-verde); outline-offset: 0; border-color: var(--color-verde); }
.errorlist { color: #c0392b; font-size: 12px; padding-left: 16px; margin: 2px 0; }

.tag { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.tag-verde { background: var(--color-verde-100); color: var(--color-verde-700); }
.tag-laranja { background: var(--color-laranja-100); color: var(--color-laranja); }
.tag-neutro { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.tag-outline { border: 1px solid var(--color-laranja); color: var(--color-laranja); }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-neutral-200); }
.table tbody tr:hover { background: var(--color-neutral-100); }

.flt { font-weight: 700; font-size: 12px; padding: 5px 12px; border: 1px solid var(--color-divider); border-radius: 4px; background: transparent; cursor: pointer; color: var(--color-text); text-decoration: none; display: inline-block; }
.flt.ativo { background: var(--color-verde); color: #fff; border-color: var(--color-verde); }

.alerta { display: flex; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--color-divider); font-size: 12.5px; color: var(--color-neutral-700); }
.alerta.laranja { border: 1px solid var(--color-laranja); background: var(--color-laranja-100); border-radius: 4px; }

.barra { height: 10px; background: var(--color-neutral-200); border-radius: 5px; overflow: hidden; }
.barra > div { height: 100%; background: var(--color-verde); }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-surface); }
.login-card { width: 360px; padding: var(--space-8); border: 1px solid var(--color-divider); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); text-align: center; }
.login-card img { height: 56px; margin-bottom: var(--space-4); }

.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.messages li { padding: 10px 14px; border-radius: 4px; background: var(--color-verde-100); color: var(--color-verde-700); margin-bottom: 6px; font-size: 13px; }
.messages li.error { background: #fdeaea; color: #c0392b; }

#mapa-medidores { height: 264px; border-radius: 4px; border: 1px solid var(--color-divider); }