:root {
  --brand: #1b3a63;
  --brand-light: #2c5387;
  --accent: #c99a2e;
  --bg-soft: #f4f6f9;
}

body {
  background: var(--bg-soft);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.navbar {
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 60, 0.06);
}

.card-header {
  background: white;
  border-bottom: 1px solid #edf0f4;
  font-weight: 600;
  color: var(--brand);
}

.progress {
  height: 10px;
  border-radius: 6px;
}

.progress-bar {
  background-color: var(--brand-light);
}

.area-card .display-6 {
  color: var(--brand);
  font-weight: 700;
}

.badge.bg-warning {
  color: #543a00 !important;
}

.funcion-item {
  border-left: 4px solid var(--brand-light);
  transition: background 0.15s;
}

.funcion-item:hover {
  background: #eef2f8;
}

.atrasada {
  color: #b02a37;
  font-weight: 600;
}

.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-brand:hover {
  background-color: var(--brand-light);
  color: #fff;
}

.stat-icon {
  font-size: 1.8rem;
  color: var(--accent);
}