:root {
  --bg-soft: #f8fafc;
  --bg-accent: #e7eefb;
  --ink: #1f2937;
  --muted: #64748b;
  --card-border: #dbe3ef;
}

body {
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at -10% -20%, #c7d9ff 0%, transparent 60%),
    radial-gradient(900px 420px at 110% -10%, #ffe4c4 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-accent) 100%);
  min-height: 100vh;
}

.navbar {
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.22);
}

.navbar.bg-dark {
  background: linear-gradient(120deg, #0f172a, #1e293b) !important;
}

.card {
  border: 1px solid var(--card-border);
  border-radius: 0.9rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.card, .btn, .form-control, .form-select {
  transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.18);
}

.table > :not(caption) > * > * {
  vertical-align: middle;
}

.table tbody tr:hover {
  background: rgba(148, 163, 184, 0.1);
}

.hero-panel {
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.8));
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  padding: 1rem;
}

.kpi-card {
  border-radius: 0.9rem;
  color: #fff;
  padding: 0.9rem;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16);
}

.kpi-card small {
  opacity: 0.92;
}

.kpi-card strong {
  display: block;
  font-size: 1.35rem;
}

.kpi-dark { background: linear-gradient(130deg, #334155, #1e293b); }
.kpi-blue { background: linear-gradient(130deg, #2563eb, #1d4ed8); }
.kpi-green { background: linear-gradient(130deg, #16a34a, #15803d); }
.kpi-yellow { background: linear-gradient(130deg, #f59e0b, #d97706); }
.kpi-red { background: linear-gradient(130deg, #ef4444, #dc2626); }

.obs-box {
  max-width: 300px;
}

.progress {
  height: 0.55rem;
}