/* Lista com espaçamento vertical */
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;

  /* padding: 12px 16px; */
  /* border: 1px solid #e5e7eb; */
  /* background-color: #ffffff; */
  /* transition: border 0.2s ease, background 0.2s ease; */
}

/* Custom checkbox escondido */
.list-item input[type="checkbox"] {
  display: none;
}

/* Estilo visual do checkbox customizado */
.list-item label {
  position: relative;
  padding-left: 32px;
  cursor: pointer;
  font-size: 15px;
  color: #111827;
  user-select: none;
}

.list-item label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border: 1.4px solid #bcc1c7;
  border-radius: 6px;
  background-color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Checkmark quando selecionado */
.list-item input[type="checkbox"]:checked + label::before {
  background-color: #2087e8;
  border-color: #2087e8;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}