/* ============================================================
   GF PDI — progress bars + objetivos visuais
   ============================================================ */

/* === Mini objetivo no card === */
.gf-pdi-obj {
  margin-top: 6px;
  font-size: 11px;
}

.gf-pdi-obj__line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.gf-pdi-obj__title {
  color: var(--gf-cinza-700);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gf-pdi-obj__perc {
  font-weight: var(--gf-weight-semibold);
  color: var(--gf-azul-escuro);
  font-size: 10px;
  white-space: nowrap;
}

.gf-pdi-obj__bar {
  background: var(--gf-cinza-200);
  border-radius: 3px;
  height: 4px;
  overflow: hidden;
}

.gf-pdi-obj__bar > div {
  background: var(--gf-azul-medio);
  height: 100%;
  transition: width 0.3s ease-out;
}

/* === Barra grande do PDI total === */
.gf-pdi-progress-big {
  background: var(--gf-cinza-200);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
  margin: 8px 0;
}

.gf-pdi-progress-big > div {
  background: linear-gradient(90deg, var(--gf-azul-medio) 0%, var(--gf-ouro) 100%);
  height: 100%;
  transition: width 0.4s ease-out;
}

/* === Drawer: objetivos completos === */
.gf-pdi-drawer-objs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.gf-pdi-drawer-obj {
  background: var(--gf-branco);
  border: 1px solid var(--gf-cinza-200);
  border-left: 4px solid var(--gf-cinza-300);
  border-radius: var(--gf-radius-sm);
  padding: 10px 12px;
  font-size: 12px;
}

.gf-pdi-drawer-obj--ok      { border-left-color: var(--gf-verde, #28A745); }
.gf-pdi-drawer-obj--warning { border-left-color: var(--gf-ouro); }
.gf-pdi-drawer-obj--danger  { border-left-color: var(--gf-vermelho, #DC3545); }
.gf-pdi-drawer-obj--info    { border-left-color: var(--gf-azul-claro, #5BB3D6); }
.gf-pdi-drawer-obj--neutral { border-left-color: var(--gf-cinza-400); }

.gf-pdi-drawer-obj__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--gf-cinza-600);
  flex-wrap: wrap;
}

.gf-pdi-drawer-obj__cat {
  background: var(--gf-cinza-100);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  color: var(--gf-cinza-700);
}

.gf-pdi-drawer-obj__prazo {
  font-size: 10px;
  color: var(--gf-cinza-600);
}

.gf-pdi-drawer-obj__perc {
  margin-left: auto;
  font-size: 13px;
  color: var(--gf-azul-escuro);
}

.gf-pdi-drawer-obj__title {
  font-size: 13px;
  font-weight: var(--gf-weight-semibold);
  color: var(--gf-azul-escuro);
  margin-bottom: 6px;
  line-height: 1.4;
}

.gf-pdi-drawer-obj__bar {
  background: var(--gf-cinza-200);
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.gf-pdi-drawer-obj__bar > div {
  background: linear-gradient(90deg, var(--gf-azul-medio) 0%, var(--gf-ouro) 100%);
  height: 100%;
  transition: width 0.3s ease-out;
}

.gf-pdi-drawer-obj__desc {
  background: var(--gf-cinza-50, #FAFBFC);
  padding: 6px 8px;
  border-radius: var(--gf-radius-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gf-cinza-700);
  margin-bottom: 6px;
}

.gf-pdi-drawer-obj__impacto {
  font-size: 11px;
  color: var(--gf-cinza-600);
  background: rgba(231, 184, 70, 0.06);
  padding: 6px 8px;
  border-radius: var(--gf-radius-sm);
  border-left: 2px solid var(--gf-ouro);
}

.gf-pdi-drawer-obj__impacto strong {
  color: var(--gf-azul-escuro);
}