:root {
  --bg: #FFFFFF;
  --surface: #EEF0EA;
  --surface-alt: #E2E6DE;
  --border: #D3D9D1;
  --text: #1B2420;
  --text-muted: #646E68;
  --text-subtle: #818C85;
  --primary: #3E6B4F;
  --primary-strong: #2C5039;
  --primary-soft: #DCE7DE;
  --on-primary: #F3F1EA;
  --accent: #C9962B;
  --accent-soft: #F3E6C6;
  --on-accent: #17221F;
  --success: #3E8A5C;
  --danger: #B4433A;
  --radius-sm: 12px;
  --radius-md: 16px;
  --font-body: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Young Serif', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; margin: 0 0 16px; }
h1 { font-size: 28px; } h2 { font-size: 20px; margin-top: 32px; } h3 { font-size: 17px; }

.layout { display: flex; min-height: 100vh; }
.barra-lateral { width: 220px; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 0; display: flex; flex-direction: column; }
.barra-lateral .marca { font-family: var(--font-heading); font-size: 18px; padding: 0 20px 20px; }
.barra-lateral ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.barra-lateral li a { display: block; padding: 10px 20px; color: var(--text); text-decoration: none; }
.barra-lateral li a.ativo { background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; }
.barra-lateral li a:hover { background: var(--surface-alt); }

.conteudo { flex: 1; padding: 32px; max-width: 1100px; }
.conteudo-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; max-width: none; }

.cartao-login { background: var(--surface); border-radius: var(--radius-md); padding: 32px; width: 320px; }
.cartao-login label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); }
.cartao-login input { display: block; width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; }

button { font-family: inherit; cursor: pointer; }
.btn-primario, .btn-secundario, .btn-perigo { border: none; border-radius: var(--radius-sm); padding: 10px 16px; font-size: 14px; font-weight: 600; }
.btn-primario { background: var(--primary); color: var(--on-primary); }
.btn-secundario { background: var(--surface-alt); color: var(--text); }
.btn-perigo { background: var(--danger); color: #fff; }
.btn-texto { background: none; border: none; color: var(--primary-strong); text-decoration: underline; padding: 6px 4px; font-size: 14px; }
.btn-pequeno { padding: 6px 10px; font-size: 13px; margin-right: 6px; }

.tabela { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tabela th, .tabela td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top; }
.tabela th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }

.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.cartao-metrica { background: var(--surface); border-radius: var(--radius-md); padding: 16px; }
.cartao-metrica-titulo { font-size: 12px; color: var(--text-muted); }
.cartao-metrica-valor { font-size: 26px; font-weight: 600; margin-top: 4px; }

.lista-saude { list-style: none; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.lista-saude li { background: var(--surface); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; }
.lista-saude li.saude-falha { background: var(--danger); color: #fff; }

.tag { display: inline-block; background: var(--surface-alt); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.tag-atencao { background: var(--accent-soft); color: var(--on-accent); }

.erro, .erro-inline { background: var(--danger); color: #fff; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }

.abas { display: flex; gap: 8px; margin-bottom: 16px; }
.abas .aba { background: var(--surface); border: none; border-radius: var(--radius-sm); padding: 8px 14px; font-size: 14px; }
.abas .aba.ativo { background: var(--primary); color: var(--on-primary); }

form input, form select { padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; margin-right: 8px; }
form label { display: inline-block; margin-right: 12px; font-size: 13px; color: var(--text-muted); }