/* Ajustes definitivos: vista realista del panel de cliente y colores oficiales de los ejes. */
.client-dashboard {
  display: block;
  min-height: 510px;
  background: #f8fafc;
}

.client-topbar {
  height: 64px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #e8edf3;
  background: #fff;
}

.client-topbar > img { width: 132px; }
.client-support { margin-left: auto; color: #8490a0; font-size: 8px; }
.client-support b { color: #556174; }
.client-user { padding-left: 18px; display: flex; align-items: center; gap: 9px; border-left: 1px solid #edf0f4; }
.client-user > i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #18a67d; font-size: 8px; font-style: normal; font-weight: 800; }
.client-user > span { display: grid; }
.client-user b { font-size: 8px; }
.client-user small { color: #919baa; font-size: 7px; }

.client-content { padding: 22px 25px 18px; }
.client-heading { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; }
.client-heading h2 { margin: 0 0 3px; font-size: 15px; }
.client-heading p { margin: 0; color: #7c8798; font-size: 8px; }
.client-search { min-width: 185px; padding: 9px 12px; border-radius: 8px; color: #7d8999; background: #e9eef4; font-size: 8px; }

.provider-table { overflow: hidden; border: 1px solid #e7ebf1; border-radius: 9px; background: #fff; }
.provider-table-head,
.provider-row { display: grid; grid-template-columns: 1.42fr .84fr 1.12fr 1.28fr .78fr .76fr .7fr; column-gap: 10px; }
.provider-table-head { min-height: 31px; padding: 0 11px; align-items: center; color: #7a8697; background: #f7f9fb; font-size: 6px; font-weight: 800; }
.provider-row { min-height: 91px; padding: 12px 11px; align-items: start; border-top: 1px solid #e9edf2; }
.provider-name,
.provider-state,
.provider-score,
.provider-users { display: grid; gap: 4px; }
.provider-name b { font-size: 8px; }
.provider-name small { color: #66758a; font-size: 6.5px; }
.provider-name em { color: #8691a0; font-size: 6px; font-style: normal; }
.provider-state small,
.provider-score small,
.provider-users small { color: #8995a5; font-size: 6px; }
.provider-state > .state { width: max-content; padding: 4px 7px; border-radius: 10px; font-size: 6px; }
.state.blocked { color: #c94a60; background: #ffe5e8; }
.state.finished { color: #128a6d; background: #dcf6ec; }
.state.answering { color: #2585a8; background: #dff3fa; }

.overall-progress { display: grid; gap: 3px; }
.overall-progress > span { display: flex; justify-content: space-between; color: #8793a2; font-size: 6px; }
.overall-progress > span b { color: #4c596d; }
.overall-progress > i { height: 5px; overflow: hidden; border-radius: 4px; background: linear-gradient(90deg,#2ec59b var(--progress),#e7edf1 var(--progress)); }
.overall-progress > i.info-progress { background: linear-gradient(90deg,#28addb var(--progress),#e7edf1 var(--progress)); }

.axis-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.axis-progress > span { min-height: 31px; padding: 5px 6px; display: grid; align-content: center; gap: 2px; border: 1px solid #e4e9ef; border-radius: 6px; color: #8591a1; background: #f8fafc; font-size: 5.5px; }
.axis-progress b { color: #526074; font-size: 7px; }
.provider-score > b { font-size: 11px; }
.provider-score > em { width: max-content; padding: 3px 5px; border-radius: 7px; color: #8b96a5; background: #f0f3f6; font-size: 5.5px; font-style: normal; }
.provider-score > em.medium-risk { color: #9b6d14; background: #fff1cb; }
.provider-score > em.high-risk { color: #c1435c; background: #ffe2e7; }
.provider-users > b { color: #1d956f; font-size: 7px; }
.provider-report { padding-top: 3px; color: #8793a3; font-size: 6px; }
.provider-report.ready { width: max-content; padding: 5px 7px; border: 1px solid #f2d0d7; border-radius: 6px; color: #ce4860; font-weight: 700; }

/* Paleta exacta tomada de los SVG oficiales. */
.axis-card { background: linear-gradient(180deg,#fff 0%,var(--card-bg) 145%); border-color: var(--card-border); }
.axis-pink { --accent:#e51f3a; --tint:#fde7eb; --card-bg:#fff0f2; --card-border:#f0cbd2; }
.axis-aqua { --accent:#f3bf09; --tint:#fff5ce; --card-bg:#fff9e5; --card-border:#eee1ae; }
.axis-orange { --accent:#6ec4c5; --tint:#e2f4f4; --card-bg:#eaf8f8; --card-border:#c5e2e2; }
.axis-green { --accent:#93c121; --tint:#edf7d9; --card-bg:#f2f9e4; --card-border:#d5e7ad; }

@media (max-width: 740px) {
  .client-topbar { height: 56px; }
  .client-support { display: none; }
  .client-user { margin-left: auto; }
  .client-content { padding: 18px; }
  .client-heading h2 { font-size: 14px; }
}