//顶部栏部分
ion-header {
  position: fixed;
  z-index: 10; /* 确保它在其他内容之上 */
  top: 0;
  left: 0;
  right: 0;
  height: 56px; /* 设置固定头部高度 */
}

.custom-segment {
  width: 60%; 
}

ion-icon {
  --ionicon-stroke-width: 16px;
  margin-bottom: 5px;
}

ion-segment-button::part(indicator-background) {
  background: #719e8c;
}

ion-segment-button.md::part(native) {
  color: #000;
  font-size: 12px;
}

.segment-button-checked.md::part(native) {
  color: #08a391;
  font-size: 20px;
}

ion-segment-button.md::part(indicator-background) {
  height: 2px;
}

ion-content {
  padding-top: 56px; /* 给内容区域加上与header相等的顶部间距 */
}
ion-content {
  background-color: #f9f9f9;
  padding-top: 56px;
}
// plan部分css
/* 给表格增加阴影和圆角 */
.plan-table ion-grid {
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%; 

}
/* 计划表格的列间距和背景 */
.plan-table ion-row {
  margin-bottom: 1px;
}

/* 表格行的底部间距 */
.plan-table ion-col {
  margin-bottom: 1px;
  border-bottom: 1px solid #ddd;
  
}

/* 表格的列 */
.plan-column {
  background-color: #ffffff;
  padding: 12px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

/* 表格的标题 */
.grid-header {
  font-weight: bold;
  background-color: #f0f0f0;
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid #ddd;
}
.plan-table ion-select {
  width: 50%;  /* 调整宽度 */
  height: 50%;
  margin: 1px;
}

/* 修改状态框的选项 */
.plan-table ion-select .select-interface-option {
  font-size: 12px;  /* 修改选项字体大小 */
  color: #555;  /* 修改选项字体颜色 */
}

/* 修改选中时的背景颜色 */
.plan-table ion-select .select-placeholder {
  color: #719e8c;  /* 占位符字体颜色 */
}

/* 修改下拉箭头的颜色 */
.plan-table ion-select .select-icon {
  color: #719e8c;  /* 下拉箭头颜色 */
}

/* 当选择框被激活时的样式 */

.plan-table ion-button {  
  margin-right: 10px; 
  text-align: center; 
  justify-content: center; 
}
.plan-table ion-button[color="success"]::part(native)
{
   justify-content: center;
  align-items: center;
color: white !important; /* 强制修改文本颜色为黑色 */
}
.plan-table ion-button[color="danger"]::part(native)
{
   justify-content: center;
  align-items: center;
color: white !important; /* 强制修改文本颜色为黑色 */
}
/* 按钮 */
.plan-table ion-button[color="success"] {
  background-color: #59beec; /* 绿色背景 */
  border-radius: 4px;
  padding: 5px 5px;
  font-weight: bold;
   justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.plan-table ion-button[color="success"]:hover {
  background-color: #48a7cc; /* 悬停时颜色变深 */
  transform: scale(1.05); /* 悬停时按钮放大 */
}

.plan-table ion-button[color="danger"] {
  background-color: #f44336; /* 红色背景 */
  border-radius: 4px;
  padding: 5px 5px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.plan-table ion-button[color="danger"]:hover {
  background-color: #d32f2f; /* 悬停时颜色变深 */
  transform: scale(1.05); /* 悬停时按钮放大 */
}
/* 优化按钮在行中的显示位置 */
.plan-table ion-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 给每个section加标题 */
.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 问诊部分的设计 */
/* 确保图片等大 */
.consult .ion-text-center ion-img {
  width: 100%; /* 设置宽度为 100% */
  height: 200px; /* 设置固定高度，确保两张图片等高 */
  object-fit: cover; /* 保持图片比例，同时裁剪图片以适应区域 */
}
.consult ion-item {
  margin-bottom: 12px; /* 增加医生卡片之间的间距 */
  padding: 12px; /* 调整卡片内边距 */
  border-radius: 8px; /* 圆角设计 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
  background-color: #ffffff; /* 卡片背景色 */
}

.consult ion-thumbnail {
  width: 60px; /* 缩略图宽度 */
  height: 60px; /* 缩略图高度 */
  border-radius: 50%; /* 圆形头像 */
}

.consult .coach-info {
  margin-left: 12px; /* 缩略图与文字的间距 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.consult .coach-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.consult .coach-info p {
  margin: 4px 0;
  font-size: 14px;
  color: #666; /* 字体颜色 */
}


/* 打卡部分的设计 */
.checkin-container p {
  font-size: 18px;
  color: #555;
}




