/* === Tema oscuro azul profesional === */
body {
  background: radial-gradient(circle at top left, #0a1931, #000814 70%);
  color: #e9f2ff;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

/* === Encabezado === */
.app-badge {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0078ff, #004b8d);
  display: flex; justify-content: center; align-items: center;
  font-size: 36px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,120,255,0.4);
}
.app-title {
  font-weight: 800;
  color: #cfe8ff;
  font-size: 1.8rem;
}
.subtitle {
  color: #9fbde6;
  font-size: 1rem;
}

/* === Card de métricas === */
.metric-card {
  background: linear-gradient(180deg, #0f1b33 0%, #0a1325 100%);
  border: 1px solid rgba(0,150,255,0.3);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,100,255,0.15),
              inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 10px;
}
.metric-card h2 {
  color: #a7c4ff;
  font-size: 1.3rem;
}

/* === KPI bloques === */
.kpi {
  background: linear-gradient(180deg, #15223d, #0d162b);
  border-radius: 14px;
  margin-bottom: 15px;
  padding: 14px 18px;
  box-shadow: inset 0 0 0 1px rgba(0,150,255,0.25),
              0 6px 12px rgba(0,0,0,0.5);
}
.kpi-icon {
  font-size: 22px;
  color: #4da3ff;
  margin-bottom: 6px;
}
.kpi-label {
  color: #aac4f6;
  font-weight: 600;
}
.kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}

/* === Nota === */
.note {
  color: #9fbde6;
  font-size: 1rem;
}

/* === Botón “Ver clientes” === */
.btn-ver-clientes {
  background: linear-gradient(90deg, #0066ff, #009dff);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0,120,255,0.4);
  transition: all 0.2s ease;
}
.btn-ver-clientes:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.btn-ver-clientes:active {
  transform: scale(0.98);
}